僕たちのテキストエリアはどうなっていくのだろうか?

mohri taroh
10 min readDec 29, 2019
銀座線旧渋谷駅ホーム最後の日(記事とは関係ありません)

書き手と編み手の Advent Calendar 2019、25日目。主催にもかかわらず、4日も遅れてしまって申しわけないです。モーリです。いつもははてなブログで書いていますが、この記事はMediumです。なぜプラットフォームを変えたのかは記事で説明します。

この記事では、ウェブで記事を公開しようとするひとが必ずお世話になるCMSの記事編集画面、つまりテキストエリアの動向について考えてみたいとおもっています。きっかけになったのは2019年11月に出たこの記事。

はてなブックマークのコメントなどを読んでも、ウェブでの記事制作においてワードプロセッサ(WordやGoogle docs)ライクなWYSIWYG(ウィジウィグ)なツールと、Markdown(あるいはそれに類する構造化簡易記法)のどちらがよいか? という視点で議論されている(そして主に議論に参加しているのがエンジニアなので記法優位?)という状況に見えて、というより記事そのものがMarkdownの時代が終わってWYSIWYGに移行しているという論点なのだけど、実際に例示されているツールをよく見たところ、そうシンプルではないように思える。

むしろ、その両者を統合した、あるいはMarkdownの延長線上にある(けれど一見するとWYSIWYGのような)第三の手法がいま増えていることが本当は重要なのではないだろうか?

本論に入る前にお断り書き

このアドベントカレンダーは、主にプロのライターや編集者(ときには漫画家)が仕事に関連して何か書いているものが多いのですが、今回のネタについては、むしろ普通のブロガーや、非編集職の社内メディア、オウンドメディア担当者、あるいはふつうにメモや議事録をクラウド上に記録する一般の人にこそ関連がある内容かもしれない。

なぜなら、プロはたとえウェブに掲載する記事であっても、執筆するときはエディタやワープロを使うことが多く、テキストエリアは最後に記事を公開するときにようやく登場するということも多そうだし、記事を装飾するときにも、たとえば私が去年のアドベントカレンダーに書いた顔写真付きの会話スタイルを使いたいなら、素朴にHTMLとCSSで組みますということになるので、MarkdownかWYSIWYGかという議論にならない。

今回の記事は、おもむろに記事編集画面を開いて入れて、直接テキストエリアに文章を打ち始めるときに関係してくるものなので、いままさにリアルタイムで記事編集画面で書いているんだけど、すっごいとりとめもなく文章が長くなりそうなので、読む側でいいかんじに端折ってもらえると嬉しいです。というあたりで本論に戻ります。

行指向編集画面という新しいスタイル

先ほど紹介したportal shit!さんの記事で挙げられているスタイルのツールにはどういったものがあるのだろうか。

Dropbox Paper や Notion の UI はシンプルでクール

といくつか例示されているが、ほかにもあるように思える。

  • Dropbox paper … Dropbox公式の文書共同編集共有サービス
  • Notion … クラウドの簡易文書作成および共有アプリケーション
  • Scrapbox … 簡易ドキュメント(ノート)をチームで共有するツール
  • Medium … ブログより簡単に書けるウェブパブリッシングサービス

ここに挙げたツールには、次のような共通点がある。

  • 行指向のその場編集画面 … カーソルでクリックした行が編集可能になり、テキストを入力したり、写真やさまざまなサービスをembedできる。感覚としては「行」だが、編集を終えるとdivやpで全体が囲われるので、実態としては「段落指向」とも言える
  • 簡易記法のサポート … Scrapboxは開発者の増井さんが明言しているようにMarkdownではないが、それでも独自のWiki記法をサポートしている。ほかのツールはもちろんMarkdownをサポートしている

増井さんは明確にScrapboxを「インタラクティブなWiki」だとしているが、ほかのツールもそういったWiki的な側面を持つと言えるだろう。

したがって、いま増えている第三のツール群は、かつてさまざまなWikiで使われていたものから、最近のMarkdownまで、何らかの簡易記法を、その簡易記法の特徴に適したUI(ユーザーインターフェース)で包んだ(ラップした)ものであり、その簡易記法に最適のUIが行指向であると言えるのではないか。

Google docs vs. Dropbox paper

簡易記法+行指向編集UIのツール群に何らかのよい名前があるとよいのだけれど、それはまた別の機会に譲って、ここでは仮にボックス型と呼んでおくことにする(DropboxとScrapboxからの連想です)。

これに対して同じウェブの文書作成・編集のツールのGoogle docsは、そもそもMicrosoft Wordの置き換えを狙ったもので、完全なWYSIWYGのワードプロセッサーである。

Dropbox paperは2017年にリリースされ、第一印象としては「MarkdownをサポートしたGoogle docs」というものだったし、むしろdocsほどの自由度や表現力がないため、劣化したdocsという印象があった。

しかし、2019年のいまあらためてpaperを使ってみると、docsよりもサクサクを書けることに驚く。上に挙げたどのツールでもそうなのだが、たとえば行頭で * と打つと、そこからすぐに箇条書きが始められる。

文章を書いて、それに適したスタイルはなんだろう? と考えてツールバーをあれこれさわる必要はない。書きたいことを書きたいママに考えが途切れないように書き続けることができる。

scrapboxなどはもっと徹底していて、行頭の空白文字で箇条書きになる。ひとは何かをまとめるときにとりあず箇条書きにしたいということをよく理解した秀逸なインターフェースだとおもう。

ここでは記法がインターフェースに転化している。行頭の空白文字という簡易記法が、スペースバーを押すと箇条書きが始まるとなっている。

この点については、portal shit!さんの元記事ですでにはっきりと書かれている(改行強調は引用者)。

Google Docs など昔ながらの WYSIWYG はボタンが多く、出来ることが多すぎて逆に不自由だと感じる場面が多かった。一方で Dropbox Paper や Notion の WYSIWYG には悪い印象がない。

Paper や Notion の WYSIWYG はできることが限定されていて、制限されているがゆえの使いやすさがある。 MS Word のような大小の文字が入り乱れ、文字が七色に輝いているような文書は書けない。

文章を構造化することに慣れていない人でも、まぁまぁ読みやすい構造化された文章を書ける、あるいは構造化された文章の書き方を学べるようになっている。

私のこの文はここを広げたものにすぎない。

Google docs(あるいは、世の中にあまたある記事制作用のCMS、ブログサービス)の完全なWYSIWYGから、簡易記法の世界観を導入した抑制されたWYSIWIGへという動きが、いま記事編集画面界隈(そんな界隈があるのか知らないけれど)で勃興しているのだ。

抑制されたHTMLとしてのWiki記法、再び

世の中のさまざまな流行りや考え方が、2つの極の間で揺り動くことはままある。よく揺り戻しが起きたというやつだ。そして、実際は振り子のようにただ繰り返すのではなく、螺旋のように動きながらさらに便利になっていく。それがいままた起きているように感じる。

思えば1990年代、われわれがウェッブという広大なる荒野を発見したとき、そこにはHTMLしかなかった。まだblinkタグなどが生き生きと走り回っていた時代だ。貴重な野生のmarqueeタグなど、いまどこで見られるのだろう?

しかし、荒野に乗り込んだ素人が書き散らしたHTMLはひどいものだった。当時pタグは閉じなくてよいなどと言われてなかったでしたっけ?

そこで良心ある人々は秩序を求めた。それがWikiなどで採用されている簡易記法である。簡易記法では、HTMLのような表現力はない。テキストサイトのようなフォントいじりも難しいのではないか? 中華キャノンの流行もWikiでは難しかったかもしれない。

表現力を抑制する代わりに、Wikiには構造があった。HTML文書はきちんと構造化されるからこそ、そこに意味を見出しやすい。再利用可能な情報がウェブで共有される世界の実現には、文書の構造化は不可欠である。

しかし、簡易記法には限界があった。ひとはそんなもの覚えたくないのである。ただ文書を書きたかったし、中華キャノンのGIFが貼りたいのだ。

そうして、ブログサービスや多くのCMSはワードプロセッサーのような方向に進化をすることになるが、一方でWYSIWYGのあいまいさを望まないとくにエンジニア層にとっては、GitHubで採用されたMarkdownという簡易記法が広まっった。

いま起きているのは、これをMarkdown側に寄せて統合しようという動きであり、これはもっとさまざななサービスで使われてよい手法ではないかと思う。

  • Wikipedia ... いま世界で最も使われているウィキであるが、多くのひとが編集に参加するには記法のマスターが必須でありハードルが高い
  • GitHub … イシューやコメント欄でMarkdownが使えるのだから、あれがScrapboxのように書ければ便利だとはおもわんかね
  • ブログサービス … WordPress、はてなブログ、なんとかブログといろいろあるが、簡易記法で行指向の編集(抑制されたWYSIWYG)ができるのは、今のところこのMediumだけではないだろうか(だから、この記事はMediumで書いているのです)。惜しいところでは、はてなブログは簡易記法をサポートしているが行指向でなく、noteは行編集だが簡易記法で入力できない

もちろん各サービスで考え方はあるだろうし、次また揺り戻しがあるとするならさらに便利になったWYSIWYGという方向と踏んでそちらを研究するということもありえるかもしれない。

なんにせよ文書をサクッと書いてシュッと共有するための仕組みは、この方向がいまよさそうということになりつつあるように思える。2020年にどうなっているかが楽しみです。

#このエントリーは個人の見解であり、所属する組織の意見を代表するものではありません。

✔ 記事掲載後に「面白かったから投げ銭したい」という声をいただいたので、試しにpaypal.meを貼ってみます。機能するのかな?

--

--

mohri taroh

毛利勝久(モーリ・タロー)/エディター系男子/フリーダムなIT系編集者・ライター/ほかの出版社で経験積んだはてな編集スタッフ