| @WWW

Markdown Logo.png

なぜ Day One は Markdown を捨てたのか

Day One が Markdown をやめて WYSIWYG に移行した話は前書いた。

自分が知っている範囲でアンチ Markdown 勢は Scrapbox くらいしか思い浮かばず、 GitHub や Trello などのグローバル勢に加え、 Qiita やはてなブログなど日本国内向けのサービスでも当然のように Markdown が共通言語として使われているのに、その Markdown を捨てて WYSIWYG 化する1という戦略は疑問だった。

ひと前の WYSIWYG は最悪で、Word での文書作成や Google Docs にも良い思い出がない。とにかく文章が書きにくい不自由なツールだった。

WYSIWYG 勢が力をつけてきている

一方で、お洒落な UI で話題になった Notion を使ってみると Markdown の要素を残した WYSIWYG だった。 Dropbox Paper も Markdown 風 WYSIWYG 、 Slack も最近段階的に WYSIWYG 化しつつある。

どうやら WYSIWYG の波が到来しつつあるようだ。

なぜ WYSIWYG なのか

Markdown は HTML を書いたことがない人には難しい

エンジニアやデザイナーなど、 HTML を理解している人からしたら Markdown は簡単だが、そうでない人には難しい。組織内に非エンジニア・非デザイナー( HTML を書けない人)が増えてくると、途端に社内ドキュメント管理ツールがカオス( や全角空白   で装飾された文書が氾濫)になる。

プレーンな Markdown では、リストの概念や文書を構造化するということに対する理解がないと読みやすい文書は書けない。プレーンテキストベースの Markdown には読みやすく構造化された文書を書けるようになることを助ける仕組みが欠落している。

普通の人が Web 系のように働きはじめている

Slack は DAU が 1200 万を超えたらしい。もはやエンジニアだけのツールだけではなくなってきているようだ。

チャット、 Wiki 、社内ブログ、タスク管理ツールなど、文章を入力させる系の SaaS が徐々に IT 産業以外の職場でも普及しつつあり、そのような環境でも受け入れられやすいようにプレーンテキストの Markdown ではなく、 Markdown 風の WYSIWYG を入れてきているのだと推察する。

普通の人でもぐちゃぐちゃにならないように文書を書くための仕組みとして WYSIWYG が注目され直しているのだろう。

抑制された WYSIWYG

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

MS Word や Google Docs など昔ながらの WYSIWYG はボタンが多く、出来ることが多すぎて逆に不自由だと感じる場面が多かった。一方で Dropbox Paper や Notion の WYSIWYG には悪い印象がない。Paper や Notion の WYSIWYG はできることが限定されていて、制限されているがゆえの使いやすさがある。 MS Word のような大小の文字が入り乱れ、文字が七色に輝いているような文書は書けない。

ぐちゃぐちゃな文書を書かせない仕組み

Paper や Notion はアウトライナーを WYSIWYG 化したような感じで、文章を並べ替えたり入れ子にしたりできる。

Notion

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

WYSIWYG 化で失うもの

文書のポータビリティー

WYSIWYG の前提として、下書きする場所と最終的な出力をする場所が同じだということが挙げられる。でないと独自の装飾フォーマットが使えない。

Notion で書いた文書は Notion でしか読めないし、 Dropbox Paper で書いた文書は Dropbox Paper でしか読めない。 Markdown で書いたテーブルならほかのツールに取り込めるが、 Notion で書いたテーブルは Notion でしか使えない。入れ子にしたり装飾したりする便利な機能も Notion で使うからこそ約束されているものだ。その場所でしかその書き方はできない

だから、ローカルのお気に入りのテキストエディター( Vim など)で書いたあとにクリップボードにコピーしてブラウザーに貼り付ける、という使い方が出来なくなってしまう。

いまこの文書は Notion を使って書いているが、プレーンテキストでコピーできない2のでブログにこの記事を投稿するときは一旦 Markdown フォーマットで書き出して Vim で開き、コピーしてブラウザーのブログ記事入力欄にペーストする必要がある。

冒頭に挙げた Day One も Markdown で文章をコピーすることができなくなった。文書作成・管理プラットフォームとして考えたときにはこれは正しい戦略で、 Markdown ではない独自のフォーマットで文書を書かせることでユーザーをロックインできる。ひとたび Notion や Dropbox Paper に文章を書きため、その独自フォーマットに慣れてしまえば、データと記法の両方によってロックインされてしまうわけだ。

Notion や Dropbox Paper はよくできていると思う。特に Notion は WorkFlowy のようなアウトライナー的な側面を持ち、いわゆる「ファイルの壁」問題を解決しつつ Markdown のサポート、画像の埋め込みや表の挿入などにも対応している。良いなと思う反面、一人のインターネットユーザーとしては、オープンかつ自由なフォーマットで書くことができる Markdown がやっぱり好きだとも思う。


  1. 正確には Notion と Dropbox Paper と同じような、 Markdown と WYSIWYG がミックスされた独自フォーマット 

  2. macOS 版の Notion では Markdown 形式でコピーできたけど、 iOS 版ではできなかった 

| @ブログ

dark-mode-and-light-mode.jpg

このサイトのデザインは黒地に白文字でダークモードという概念が出てくる前からダークモードだった。家のパソコンで見るときには見づらいと思うことはなかったが、外出先で日中にスマートフォンでサイトを見ると黒地に濃い赤色のリンクは見づらいなぁと思うことがあった。最近、 Mac や iPhone でダークモードの概念が浸透してきたので、自分のサイトの場合は昼間用のライトモード対応を行うことにした。こういう感じのメディアクエリを書けばよい。

@media (prefers-color-scheme: light) {
  ...
}

ただ、元々の CSS が結構ぐちゃぐちゃな書き方で難儀した。ダークモードとライトモードの切り替えが行えるサイトは必然的に CSS のメンテナンス性が高い状態だと思う。明暗を反転したときにこの色はこうなる、という対応関係が綺麗に提示できるような状態は、利用するカラーをシステマティックに整理できているということだと思う。 Sass で書いてあるなら利用する色はきちんと変数化されていて適切な命名がなされているとかそういう状態だと思う。 CSS の設計健康診断としてダークモード・ライトモード切り替え対応をやってみるのは結構いいと思う。

| @WWW

Temple wall at Hakata

ヒトデさんのブログを読んでGoogleの広告設定を共有してメンバー間でつながるプロジェクトに参加した

Google の広告設定のページにアクセスすると Google からどういう属性として認識されているかがわかり、それを共有して遊ぼうというもの。 Scrapbox はタグ付けが簡単なので人と人の関連性が表現しやすい。

おもしろかったので、普段使ってる三つの Google アカウントでそれぞれでどういう結果になるかやってみた。

個人アカウント

iPhone の Safari でも自宅の Mac でもログインしててよく使うアカウント。ただ最近は Google 検索をあまり使わないようになって、検索には DuckDuck Go を使うようにしている。 #企業向けテクノロジー #業種:_ヘルスケア業界 #業種:_テクノロジー業界 あたりが入っているのがおもしろい。前職が B2B の SaaS / クラウドソーシング企業だったこと、現職がアウトドア関連の企業であることを反映してそう。

#35~44_歳 #男性 #Anova_Culinary #TechAcademy_[テックアカデミー] #Mynavi #Amazon #American_Express #Aha! #Wantedly #Fujitsu #Bic_Camera #Yodobashi_Camera #Kakaku.com #SoftBank_Telecom #Apple_iOS #Mac_OS #SF_映画、ファンタジー映画 #SF_番組、ファンタジー番組 #TV_ゲーム、PC_ゲーム #アウトドア #アクション映画、アドベンチャー映画 #アニメ、漫画 #アメリカン_フットボール #イベント情報 #インディーズ音楽、オルタナティブ_ミュージック #ウェブデザイン、開発 #エクストリーム_スポーツ #オーディオ機器 #オフィス、ビジネスソフトウェア #お祝い、ギフト、祝祭日用グッズ #カメラ #カメラ_レンズ #カメラ、写真機材 #クーポン、割引サービス #クラウドストレージ #クラシック音楽 #グルメ食品、特別食 #クレジット_カード #ゲーム機 #コーヒー_メーカー、エスプレッソ_マシン #コーヒー、紅茶 #コミック、アニメーション #コメディ映画 #コンピュータ_コンポーネント #コンピュータ_ドライブ、ストレージ #コンピュータ_ハードウェア #コンピュータ_モニター、ディスプレイ #コンピュータ、電化製品 #コンピュータ周辺機器 #コンピュータ用メモリ #サイクリング #サッカー #ジャズ #ショッピング #スポーツ #スポーツ衣料 #スマートフォン #ソーシャル_ネットワーク #タブレット_PC #ダンス、電子音楽 #ツアー旅行 #デジタル一眼レフ_カメラ #テレビ、ビデオ、動画 #テレビドラマ #ドキュメンタリー番組、ノンフィクション番組 #トラック、バン、SUV #ニュース #バー、クラブ、ナイトライフ #ハイキング、キャンプ #ハッチバック #ビーチ、島 #ビジネス_サービス #ビジネス_ニュース #ビジュアル_アート、デザイン #ファースト_フード #ファッション、スタイル #フィットネス用品 #フォーク、伝統音楽 #ブランド品、高級品 #ブルース #プログラミング #ペット #ボート #ホームの自動化 #ポップ_ミュージック #マセラティ #ラグビー #ラップトップ、ノートパソコン #ランニング、ウォーキング #リフォーム #レストランのレビュー、予約 #レンタカー、タクシー #ロック_ミュージック #ワールド_ミュージック #飲食店 #映画 #音楽、オーディオ #価格比較 #家庭 #家電 #会計、財務ソフトウェア #確定申告、税務 #学歴:_学士号 #環境に優しい生活、環境問題 #企業向けテクノロジー #業種:_ヘルスケア業界 #業種:_テクノロジー業界 #銀行 #携帯電話 #芸術写真、デジタル_アート #芸能ニュース #個人ブログ、サイト #佐賀 #財務プランニング、マネジメント #山岳、スキー_リゾート #仕事 #子育て、育児 #子供の有無:_子供なし #子供服 #自動車 #自動車販売 #室内装飾、内装 #写真、画像の共有 #写真の印刷サービス #写真編集ソフト #社員数:_中規模雇用者(従業員数:_250~999_人) #授乳用品、離乳食用品 #住宅所有状況:_住宅所有 #書籍、文学 #商品レビュー、価格比較 #食器洗い機 #世界のニュース #世帯収入:_高 #政治 #送金・決済システム、サービス #大学 #都市交通 #投資 #東京 #動画編集ソフトウェア #日本 #配偶者の有無:_既婚 #美容、フィットネス #表計算ソフトウェア #舞台芸術 #福岡 #分散コンピューティング、クラウド_コンピューティング #宝石、アクセサリー #旅行 #料理、レシピ #量販店、デパート #腕時計

趣味アカウント

昔はよく使っていたが最近はあんまり使ってない。主に Mac で使ってた。いまは YouTube でのみこのアカウントを使ってる。

#35~44_歳 #男性 #SF_映画、ファンタジー映画 #SF_番組、ファンタジー番組 #アメリカン_フットボール #イベント情報 #ギター #クイズ番組 #クラシック音楽 #グルメ食品、特別食 #コーヒー、紅茶 #コミック、アニメーション #コンピュータ_ハードウェア #コンピュータ、電化製品 #ショッピング #スポーツ #ソーシャル_ネットワーク #テレビ、ビデオ、動画 #テレビドラマ #トーク番組 #ニュース #バスケットボール #ビジネス_サービス #ビジュアル_アート、デザイン #フィットネス #ヘヴィメタル #ペット #ホームの自動化 #ポップ_ミュージック #ラグビー #リアリティ番組 #リフォーム #ロック_ミュージック #ワールド_ミュージック #映画 #音楽、オーディオ #家族向けテレビ番組 #学校、教室関連用品 #環境に優しい生活、環境問題 #業種:_テクノロジー業界 #芸能ニュース #子供の有無:_3_要素 #自動車 #自動車販売 #室内装飾、内装 #社員数:_小規模雇用者(従業員数:_1~249_人) #住宅所有状況:_住宅所有 #書籍、文学 #商品レビュー、価格比較 #食料品小売業 #世帯収入:_平均以上 #政治 #都市交通 #東アジアの音楽 #配偶者の有無:_既婚 #美容、フィットネス #舞台芸術 #服飾 #分散コンピューティング、クラウド_コンピューティング #野球 #料理、レシピ #量販店、デパート

仕事用アカウント

会社の Gsuite のアカウント。 Chrome の Canary Channel で利用していて、個人アカウントとは明確に使い分けてる。仕事関係の検索やサイト閲覧はほぼほぼこのブラウザーで行っている。仕事用アカウントなので買い物とか趣味の検索はほとんどしない。どうも消費に結びつく検索をしないと世帯収入が低く出る模様。逆に個人アカウントでは頻繁に消費に関係する検索を行っているので世帯収入が高いと判定されてるっぽい。また個人的な用途に使わないので年代を特定できず、 25〜54_歳 という扱いになってるのも面白い。

#25~54_歳 #男性 #Apple_iOS #TV_ゲーム、PC_ゲーム #アウトドア #アクション映画、アドベンチャー映画 #アメリカン_フットボール #エクストリーム_スポーツ #オーディオ機器 #オフィス、ビジネスソフトウェア #カメラ、写真機材 #クーポン、割引サービス #クラウドストレージ #グルメ食品、特別食 #クレジット_カード #コミック、アニメーション #コンピュータ_ハードウェア #コンピュータ、電化製品 #ショッピング #スポーツ #スマートフォン #ソーシャル_ネットワーク #テレビ、ビデオ、動画 #テレビドラマ #ニュース #ハイキング、キャンプ #ビジネス_サービス #ビジュアル_アート、デザイン #ファッション、スタイル #フィットネス #ブランド品、高級品 #ペット #ホームの自動化 #ラグビー #ランニング、ウォーキング #飲食店 #映画 #音楽、オーディオ #価格比較 #家庭 #家電 #学校、教室関連用品 #学歴:_学士号 #企業向けテクノロジー #起業準備 #業種:_テクノロジー業界 #携帯電話 #芸術写真、デジタル_アート #芸能ニュース #犬 #山岳、スキー_リゾート #子供の有無:_子供なし #自動車 #自動車販売 #室内装飾、内装 #社員数:_中規模雇用者(従業員数:_250~999_人) #住宅所有状況:_住宅所有 #書籍、文学 #商品レビュー、価格比較 #世帯収入:_平均以下 #送金・決済システム、サービス #都市交通 #配偶者の有無:_既婚 #美容、フィットネス #舞台芸術 #服飾 #分散コンピューティング、クラウド_コンピューティング #旅行 #料理、レシピ

| @ブログ

background-image random pick up

写真や画像があると文章だけよりも記憶に定着しやすいらしい。なのでヘッダー画像のバリエーションを増やしてみることにした。これまで自分が撮ってきた写真の中で気に入ってるもの、ヘッダー画像にちょうど良さそうなやつを 14 枚選んで、これまで表示していた門司の「平民食堂」のやつと合わせて 15 枚をランダムピックアップして表示させている。本当ならランダムではなく記事ごとにイメージに合う画像を選定すべきなのだろうけどそこまではやってない。「このブログ主はこういう写真の場所に行ったりこういう写真をいいと思ってるんだな」ということが伝われば良いと思ってる。

ランダム表示に関して、最初は JavaScript で CSS の background-image を書き換える方式でやっていたが、 DOM の読み込み完了時に動く都合上、かくつきが出てしまう。それで画像の選定は Ruby で行って data-attribute として指定し、予め CSS にそれぞれの data-attribute に応じた background-image を書いておくことにした。これでかくつきはほぼほぼなくなった。

<div id="header" data-background-image="heimin">
</div>
#header[data-background-image="heimin"] {
  background-image: url(header-bg-heimin.jpg);
}

このほかにも CSS 周りを結構いじってて、パンくずリストが載る部分は文字が読みにくくなるのでグラデーションでシャドーを掛けてる。これまで float でやってた配置の制御を flexbox に置き換えたりもやった。今のデザインのベースは 10 年前に作ったので、当時はグラデーションなんかは CSS で実現できず横幅 1px の画像をリピートする方法を使ったが、これで画像を捨てて全て CSS で実現できそう。良い世の中になってきてる。

| @ブログ

今宿の踏切

このブログのマークアップを改善して BlogPosting - schema.org に対応させた。

2年くらい前に BreadcrumbList - schema.org には対応させていて、 Google の検索結果にパンくずリストの情報が表示されるようになってたんだけど、 Search Console から「お前のパンくずリストのマークアップは不正だ」ってメールが来たので、ついでに BlogPosting にも対応させた。

Google が提供している 構造化データ テストツール が便利だった。

Google のコアアルゴリズムアップデート - portal shit! にも書いたけど、 6 月の Google のアルゴリズムアップデートの影響でサイトへのアクセスが激減してしまった。ヘルスケアやお金関係の記事だけでなく、その他のジャンルの記事も検索結果に表示されにくくなってるように感じる。インプレッションはご覧の通りほぼ半減している。

Google Search Console Impressions Graph

マークアップを改善してインプレッションが増えるかどうかはわからないけどしばらく様子を見てみたい。