portal shit!

ブログで使ってる Amazon S3 のバケットの画像のほとんどをミスって空ファイルにしてしまった…。 S3 に上がっている画像、 Cache-Control ヘッダーが付与されていないのですべての画像ファイルに Cache-Control ヘッダーを付与しようとしての事故だった。ファイル一覧を取得して AWS SDK Ruby で Cache-Control だけ付与するつもりだったのにファイルそのものを空で上書きしてしまって無となった。

大した操作じゃないと思って事前にバックアップを取っていなかった＆ S3 に上げておけば安心だと思って日常のバックアップも行っていなかった。スーパーアホ。写真ならアップロードし直すことは可能だけど、キャプチャとか、アニメーション Gif とか、ブログの内容に合わせて OmniGraffle で描いた画像は基本的には元のファイルが残ってなくて元に戻すことができなかった…。

CDN に残っていたものとローカルでキャッシュされていたものを探したが、 500 ファイル以上が失われてしまった。つらい…。

画像の吹っ飛び、過去にも何回か起こっている。レンタルサーバーの障害で消えたパターンもあったけど、自分のミスで消してしまうパターンが多い。自分が一番信用ならないので画像はプロに管理してもらうのが一番だなと身にしみて思った…。とりあえず S3 バケットのバージョンコントロールを有効にしたいと思います…

追記

AWS SDK Ruby での正しい Cache-Control ヘッダー付与の仕方は以下だった。

object.copy_from(object, cache_control: 'max-age=2592000,s-maxage=31536000', metadata_directive: "REPLACE")

#copy_from の引数に medata_directive: "REPLACE" を渡す必要がある。

🙅🏻‍♀️🙅🏻‍♀️🙅🏻‍♀️以下は NG なので注意されたし ☠️☠️☠️

object.put(cache_control: 'max-age=2592000,s-maxage=31536000')

これやるとファイルの body が空になります 🈳🈳🈳

このブログのフィードを誰が読みに来ているのか調べてみた。一ヶ月間で 100 回以上見に来ている上位の UA は以下。

なんと一位はフィードリーダーの bot ではなく Slackbot だった。 Googlebot よりも多い。もはや Slack が一番のフィードリーダーになっているのかもしれない。こうなると PubSubHubbub とかの仕組みに乗っかって無駄なクローリングが発生しないようにして欲しい。フィードを購読する Slack の Workspace が増えるほどクローリング回数が増えてしまうと負荷がバカにならない。

三番目の Hatena::Russia::Crawler/0.01 ってのは Hatena と名前に入っているが本当にはてなのクローラーなのだろうか。 Russia という文字列が怪しい。

Feedly はもっと多いかと思ったが非常に少なかった。意外と Fastladder が多い。みんなどこかのサーバーで運用しているのだろう。ご苦労様です。

今回、ログを調べていて Feedeen といったサービスが存在していることを初めて知った。他に Feedbin などいくつか有料の RSS リーダーが存在しているようだ。 Google Reader や Livedoor Reader が終了した後、国内外で有料のフィードリーダーが開発されサービス提供されているのだろう。 Feedeen は料金が月 200 円で安い。日本人が作っているというのも安心感がある。自分は Google Reader 終了後はまず The Old Reader を使っていたけどいまは Inoreader を使っている。 Inoreader も開発元はルーマニアのインディー感あふれる会社で、フィードリーダーの世界は独立系の企業やデベロッパーによって活況を呈しているようだ。よいことだと思う。昔のインターネットを思い出す。

ちなみにフィードリーダー系の Crawler は UA にそのフィードの購読者数を表示しているのがおもしろい。こんだけ購読者数がいるんですよ、ということをブログ主に伝えて UA でブロックされないようにしているのだろう。

各記事の一枚目の画像をカバー画像とみなすようにして、関連記事にサムネイルを表示するようにしてみた。画像があるだけで記事をクリックしてみたい感が高まると思う（残念ながら Google Analytics で見る限り直帰率は改善してない）。人間は、文字だけを読むよりもイラストや画像など視覚的な情報を一緒に見ることで物事の理解度が高まると本で読んだ。自分で過去記事を読み直していても画像があると関連記事をクリックしてみたくなるし、満足感のある改修だった。

なおカバー画像の判定処理は記事本文を読み込んだ上で正規表現で調べているので多分重い（ベンチマークを取ったらタイトルを表示する処理に比べて二倍くらい遅かった）のだけど、関連記事表示部分はキャッシュしてるのでそんなに体感速度は悪化してないはず。

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

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

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

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

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

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

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

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

最新の Rebuild.fm のエピソードを聞いてたら Automattic による Tumblr 買収の話から Medium 、 WordPress から古の Blogger 、 TypePad 、 MovableType まで話が及んで楽しかった。

Rebuild: 246: You Are Welcome (fumiakiy)

Fumiaki Yoshimatsu さんをゲストに迎えて、Netflix, Tumblr, ブログ、コードレビュー、Android, Jackquard などについて話しました。

rebuild.fm

エピソード内で miyagawa さんがインディーなインターネットユーザーとして独自ドメインは重要だけど、誰も使わないから当てられるサービスがなくなってきた、その意味で WordPress は独自ドメイン使えるので悪くない選択だと思う、的なことを言っていたのが印象的だった。エピソード中でも触れられていたけど、 Medium は新規登録ユーザーに対して独自ドメイン利用を利用不可能にしている模様。

Just a moment...

help.medium.com

ブログプラットフォームとしての知名度を高めるためには一目で「あ、このブログは Medium 使ってるんだ」とわかった方が良いはずで、となると独自ドメイン名を使われるのは良くないと判断したんだろうなぁ。

加えて Medium は確かに最近よくログインを求めてくる。旧型の iPhone 7 で見ると画面の 1/3 くらいの領域をユーザー登録導線にしてる感じ。読みづらい。なんらかのプラットフォームに乗っかると、やはりプラットフォームに「こう使って欲しい」と制約をかけられることになりがちだ。ステークホルダーが書き手、読み手、プラットフォームの三者になるので当然といえば当然か。一方でセルフホストのブログなら基本的には書き手と読み手の二者しかステークホルダーがいない。

ブログは自分で作るのが一番満足度高いと感じる。意に反して広告が出るようになることはないし、読者にログインを強要したりもしない。足りない機能があれば自分で作ればよいというのもよい¹。自分はセルフホストのブログを同じドメインで 14 年やってて、最初は P_BLOG 、 そしていまは Lokka を自分で細々と改修しながら使ってる。時々更新が途絶えることはあるが、ほぼほぼ毎月一本は何かしらを書き続けることができている。サーバーの運用は発生するが、まぁプログラマーなら自宅サーバーか VPS くらい飼ってるだろうし、運用は趣味の一環かなという感じがする。

サイトの横幅（ max-width ）を 1280px に広げてみた。最も頻繁にこのサイトを訪れる自分の閲覧環境が 5K ディスプレイになったので昔の環境（ 13 インチの MacBook ）に合わせて作ったデザインでは横幅が間延びした感じがあっていまいちだった。文字サイズもちょっと小さかったので 15px から 18px にした。 cho45 さんがまえブログに書いてたけど、自分のディスプレイを大きくして画像を大きいサイズで見る機会が増えて、大きい画像の尊さのようなものを感じるようになってきた。

大きな画像っていうのはそれだけで強い主張があります。かつてあった「体験」を呼び起こす力が画像の大きさと解像度にはあります。そこにいて、そこでこう見たのだという主張のため、とにかく大きいのは正義なのです。

— サイトの画像サイズを再びアップグレード | tech - 氾濫原

Flickr から埋め込み表示している画像は ebmed タグの中で width と height が固定されているので本文幅に合わせるためには手でちまちまと大きいサイズに変えていかなければならない（おいおいやっていきます）。