portal shit!

ツイッター歴10年を超え、どういうウプダテスをしたらファボをもらえるかはだいたい予想がつくようになってきたけど、それよりも前からやってるブログに関してはどうやったらバズるかがわからない。 mizch さんがブログを書く前にどのくらいブックマークが付くか想像できると言ってた気がする¹けどそういうのすごいと思う。「もうちょい反応あるんじゃないかな」と思った記事が全然伸びなかったり、逆に完全に自己満足のために書いた記事がバズったこともある。ツイッターもブログも商売と同じで読み手に価値を提供することができたら良い反応があるものだと思う。ツイッターに関しては面白ツイートで読み手に価値を提供できている（自分が面白いと思うものが読み手にとっても面白いと評価されている）のだろうけど、ブログでは価値を提供できていない（少なくとも狙ってはやれていない）のだろう。

短文で面白おじさんを演じるのは簡単だけど、長文だととても難しくなる。自分で自分が書いた過去の記事を読んでも「滑ってるなぁ」という感じしかしない一方で、たとえば寿司について書いた記事はいま自分で読んでも「攻めてるなぁ」と感じる。また仕事で社内ブログに記事を投稿してもそこそこ反響得られてるので文章を書く能力が著しく低いわけではないのだと思う。

つまるところ自分はブログで記事を書くときに、自分の興味関心とオーディエンスの興味関心を一致させられていないのだろう。ツイッターや社内ブログでは読み手が誰であるかを把握するのが簡単なので事前にコンテキストを共有した上で記事を書ける。コンテキストが共有されているのでどんな内容が受けるかを想像しやすいのだ。しかしブログの場合は誰が読むかは見当がつかない。パソコン関係の記事が受けるのか、日記的な雑文が受けるのか、蓄財についての記事が受けるのか、あるいはそれ以外か、全く見当がつかない。

15年前にブログが流行ったとき、ブログはテーマを絞った方がいいというアドバイスをよく目にした。思えばそれは読者の種類を絞り、読み手とコンテキストを共有することで記事を書きやすくするためだったんだろうなぁと思う。

自分はなんでもブログに書くスタンスでやってきたので今更書く内容を絞ったりはしたくないんだけど、今年は読み手とのコンテキストの共有を意識してインターネットしていきたい。

ブログに人気記事を表示するようにしてみた。やり方はめっちゃ雑で、 Nginx の access_log を集計して Bot や Crawler 、 RSS Reader からのアクセス、画像や CSS 、 JS ファイルへのアクセスを除外してアクセス数を集計して結果をテキストファイルに出力し、 Ruby で parse してフッターに表示してる。

仕組み

こんな感じのシェルスクリプトを置いて cron で実行してる。

#!/bin/bash

zcat -f /path/to/access.log* \
  | grep -vE 'useragent:.+?(bot|Feed\s?Fetcher|Crawler|Fastladder|Feed|Ruby|Aol\sReader|proximic|Hatena\sAntenna|Mediapartners-Google|subscribe)' \ # bot や Crawler を除外
  | cut -f5 | sed -e 's/request_uri://' \ # request_path だけ抜き出し
  | grep -vE '(favicon\.ico|index\.atom|\.js|\.json|\.css|\.jpe?g|\.png|\.gif|\.txt|\.php|\/admin|^\-$|^\/$)' \ # HTML 以外へのリクエストを除外
  | sort | uniq -c | sort -nr | head -100 | sed -r 's/^[ \t]+//g' \ # 集計して上位 100 件だけを得る
  | tee /path/to/public/access-ranking.txt # テキストファイルに書き出し

zcat -f しているのは gzip 済みのログファイルも cat したいため。このやり方だと現存するログファイルからしか調べられないので logrotate で設定している期間（自分の場合は 30 日）の集計しかできない。またサーバーを複数並べて運用しているようなアプリケーションではアクセスログがばらけるのでこんな雑なやり方は使えない。

Nginx のログのフォーマットは LTSV にしているので grep でのフィルタリングがやりやすい。まず User-Agent で bot っぽいアクセスを除外したあと、ログから request_uri のフィールドだけを切り出し、静的ファイルなどへのアクセスを除外したあと sort -> uniq -c -> sort -nr してる。

Ruby （ Lokka ） の方では以下のようなコードを書いて access-ranking.txt を読み込んでる。これをやらないと記事のタイトル表示やリンクが生成できないため。

class Entry
  class << self
    def popular(count = 5)
      access_ranking = File.open(File.join(Lokka.root, 'public', 'access-ranking.txt'))
      slugs = {}
      access_ranking.each.with_index(1) do |line, index|
        access_count, path = *line.split(" ")
        slug = path.split("/")[-1]
        slugs[access_count] = slug
        break if index == count
      end
      all(slug: slugs.values, limit: count).sort_by {|entry| slugs.values.index(entry.slug) }
    end
  end
end

フッターは適度にキャッシュしているのでスピードはそんなに遅くならない。

感想

アクセスランキングを表示してみて、意外と Twitter やはてブでバズった記事へのアクセスは継続的には多くないことがわかる。最近だと ARC'TERYX や SIERRA DESIGNS のパーカーの記事が人気があるようだ。これはおそらく寒くなってきててそういうキーワードで検索してたどり着く人が多いのだろう。 GarageBand でのアナログレコード録音の方法は前から人気ある。はてブとかは大して付いてないが、 Yahoo! 知恵袋や 2ch の過去記事・まとめサイトからのアクセスが多いようである。謎なのが痔ろうの記事へのアクセス数の多さ。痔ろうの症状・治療方法を結構詳細に書いたので Google 先生が良記事判定してくれているのかも知れない。家の記事ははてブでバズって 2000 ブックマーク以上付いたが、それでもやっと 5 位という感じ。バズっても短期的なアクセスしか得ることができず（人の噂も 75 日！！！、！）、長期的に細々とトラフィックを集めるためには特定の属性の人にだけ響く詳細な記事を書くのがよいのかもしれない。

以前、 The Old Reader について書いたとき、クローリングが遅くて不満だ、というようなことを書いていた。

The Old Reader はフィードの更新間隔がクソで、プレミアムアカウントのユーザーが登録しているフィードは 30 分おきにフィードをフェッチするとあるんだけど、全然そんなことなくて、平気で 4 時間遅れたりする。偏りがあって、頻繁に更新されるブログのフィードは頻繁にチェックされるけど、頻繁に更新されないブログのフィードはあまりチェックされないみたい。クローラーのつくりとしては正しいのかもだけど、利用者としては不満が残るなぁ。

— The Old Reader - portal shit!

そしたら以下のようなコメントを Pinboard でたまわってた。

フィード・リーダーのクローラーが遅い問題の話。Feedlyもそうだけど、クローラー側のポーリングは4時間ごとくらいで良くて、ユーザー（サービス）側がPubSubHubbbub使って欲しいな。

— https://pinboard.in/u:hail2u/b:e25b4cfe2a4a

確かにその通りなのでこのブログでも PubSubHubbub 使うようにしてみた。 Sidekiq とか入れたら Worker にやらせることできていい感じにできるんだろうけど、とりあえずこんな感じで乱暴に通知してる。

class Entry
  after :save do
    if Lokka.production? && !draft
      system("curl -s https://pubsubhubbub.appspot.com/ -d 'hub.mode=publish&hub.url=https://portalshit.net/index.atom' -X POST")
    end
  end
end

爆速で The Old Reader や Inoreader に更新が反映されることを確認したので Feedly とかでも更新後に即反映されるようになってると思う。

このブログ（ Lokka ）の DB は MySQL を使っている。 MySQL のバージョンは 5.7 なので、 column encoding を utf8mb4 、 collation を utf8mb4_general_ci とかにしておけば emoji を使えるかと思ってたけど使えなかった。長らく DataMapper が 対応してないかと思ってたけどリポジトリを覗いてみたら随分前に対応されてた。どうも Lokka 側に問題があるっぽい。

support for mysql utf8mb4 encoding by npeer2004 · Pull Request #76 · datamapper/do

added mapping for utf8mb4 encoding, which is supported by the underlying C driver and mysql. http://dev.mysql.com/doc/refman/5.7/en/charset-unicode-utf8mb4.html

github.com

Lokka の DB 接続設定は dsn を URL として記載するようになっている。 DataMapper は ActiveRecord のように Hash オブジェクトを DB 接続の引数に渡せるので、 encoding: 'UTF-8-MB4' をオプションとして渡せるようにしてやればよいっぽいが、いまの Lokka のコードでは encoding オプションを指定できないのでこれではダメっぽい。

ちょっと Lokka 側のコードをいじって encoding オプションを渡すようにしてみたところ無事 emoji が使えるようになったので lokka/lokka に Pull Request 出しておこう ⌨️

Make admin page smartphone friendly by morygonzalez · Pull Request #225 · lokka/lokka

Lokka の管理画面をスマートフォンから見やすくしました。小さいディスプレイからのアクセスのときはサイドメニューを非表示にして Dashboard にサイドメニューの内容を表示するようにしています。大きいディスプレイ（パソコンなど）からアクセスしたときの表示は変えていません。 ダッシュボード: 記事一覧: 入力画面:

github.com

Lokka の管理画面をスマートフォン対応させた。携帯から記事を投稿したりスパムコメントを削除したいなと思うことがあっても Lokka の管理画面はモバイルフレンドリーではなくて非常に厳しかった。とても便利になったと思う。ドッグフーディング最高。

専業フロントエンダーではないのでマークアップと CSS コーディングは適当だけどこの様に寝床でごろんとしながらでも駄文を投稿できるようになって便利。 Lokka ご利用中の方はご活用ください。

乗るしかない、このビッグウェーブに、という感じで Let's Encrypt を使って無料の証明書をゲットし、ブログを https で公開するようにした。

証明書の設定とか難しそうで敬遠してたのだけど、実際やってみると思ったより簡単だったが、いくつかはまりポイントあったので書いておきます。

自サイト内の 'http://' を 'https://' に書き換える

CSS やテンプレート内で http://hogehoge.com となっているところを //hogehoge.com に変える。本文中の画像の URL も 'https://' に書き換える。ちまちました作業。 Amazon の画像の URL も https に対応したドメインに変えないといけない。

S3 に独自ドメイン当てて使っている場合、ここも証明書がいる

画像は S3 から配信していて、独自ドメイン（ resources.portalshit.net ）を当てて使ってたんだけど、ブログ本体を SSL にしたのに画像配信サーバーとの通信が非 SSL なので mixed content といって怒られる。

S3 単体で独自ドメインを使って SSL 通信することはできないので、 CloudFront を経由して CloudFront に Let's Encrypt で作った証明書を登録して使う。この S3/CloudFront 用の証明書の発行・登録のプロセスが若干面倒くさい。更新のときに手順忘れてそうで心配。 Let's Encrypt プラグインを使うようにした方がよさそう。

• dlapiduz/letsencrypt-s3front: Letsencrypt CLI plugin for S3/CloudFront validation and installation

他、 Route53 で CNAME 当てて S3 に向けていたのを CloudFront を向くように変える必要もあり。

個人ブログごときで CloudFront を使うことになるとは思わなかった。

Lokka の管理画面が SSL 通信に対応してない

やっと mixed content の警告消えて記事を書こうとしたら、なんと管理画面が SSL 非対応でブログにログインできない。 Padrino の url メソッドが protocol の指定を出来ないようだった。オーバーライドとか試してみたけどうまくいかなくて困ってたところ、 rack-ssl-enforcer という gem を発見した。こいつを RACK_ENV=production のときだけ use するようにして乗り切った。 'http://' となってるのを Rack 層でえいやっと 'https://' に書き換えてくれる。

• tobmatth/rack-ssl-enforcer: A simple Rack middleware to enforce ssl connections

感想

Let's Encrypt 、本当に簡単で最高便利だと思った。オレオレ証明書発行するより楽っぽい。いい世の中になったと思う。ただ有効期限が短いので更新を忘れないようにしないといけない。更新の自動化までやってしまいたい。

ウェブサーバーを Nginx から H2O に変えるのとかまでは手が回ってないので自動更新と一緒にやりたい。

2015 年のアドベントカレンダー、こんだけ参加してる。

寺・神社とか面白そうなのあったのでひょっとしたらもっと参加するやつ増えるかもしれない。 12 月は睡眠不足になりそう。

また、今年初めて自分でもアドベントカレンダー作ってみた。

できる Mac OS X Advent Calendar 2015 - Adventar

 愛用している Mac のアプリケーションについて書いてみませんか。 みんな使ってないけど個人的にとても気に入って使ってる秘蔵のソフトとか、あんまり定番じゃないものを取り上げて順番で紹介していったら面白いのではないかと思って作ってみました。 ### カレンダー作った人が想定している情報 - Mac App Store で 3000 円くらいするけど有益で十分金出す価値あるソフトの情報 - Free だけど便利、しかしインストールに少し知恵のいるソフトのインストール方法 ### 多分求められてない情報 - エバーノート徹底活用術（笑） - Photoshop 用無料テクスチャ 10 選 TeX でも MacVim でも Cocoa Emacs でも QuarkXPress でも Excel でも何でもいいので書いてくれ！！！、！！！、！、！！！

www.adventar.org

Mac のソフトネタ、昔はちょくちょく書いてたけど最近書いてないので、これを機会に久々に書いてみようと思ってこういうアドベントカレンダー作ってみた。

『 Evernote 徹底活用術』とか、『これは便利！ 無料の Photoshop テクスチャ 10 選』、みたいなのじゃない記事が集まればよいと思う。

アドベントカレンダー、トピ主の人間力が問われていて、トピ主に知名度がなかったりネットで好かれてなかったりしたらなかなか書きたいという人が集まらない。全然書き手が集まんなくて、 2, 3 個しか記事が投稿されないアドベントカレンダーは寒いので、みんな何か書いてくれ頼む！！！、！！！、！、！！！