portal shit!

ブログの管理画面にファイルアップロード機能をつけてみた。 GitHub の Issue みたいにドラッグアンドドロップでアップロードしてくれる。こんな感じ。

いまのところ埋め込みフォーマットは Markdown にしか対応してない。

Lokka は heroku とか PaaS を使うことを前提に作られているのでファイルをアップロードする機能が提供されてこなかった（ heroku は永続的なファイル書き込みができない）。 heroku で動かしている人でも使えるように Amazon S3 に上げるようにしてみた。 AWS のアカウント作成とかが必要なのでレンタルサーバーに設置してある WordPress にファイルアップロードするのに比べたら敷居が高いけど、設定するのは1回だけだし全くアップロードする手立てがなかったこれまでに比べたら劇的に快適になるはず。自分で使ってみたけどめっちゃ便利になった。

ファイルアップロード、ちゃんと作るなら Paperclip みたいにファイルのチェックを厳密に行なわないと危ないと思うけど、管理画面から上げるの前提なのでチェックなしで雑にアップロードできるようになっている。 AWS の token 系の設定画面を作ったら Lokka 本体に Pull Request 出します。

なお一つ前の記事でアプリケーションサーバーを puma に変更 - portal shit!というのを書いたけど、このファイルアップロード機能がうまく動かなかったので unicorn を捨てたのだった（ pow で動かしている環境や bundle exec rackup して WEBRick で起動しているサーバーではちゃんとアップロードできる）。なぜか unicorn で multipart/form-data な POST リクエストを rack アプリケーションに適切に渡すことができず EOFError が発生してしまう。

"EOFError: bad content body" for multipart form requests · Issue #903 · rack/rack

On a multipart form where users can submit profile information like a profile picture upload we're getting occasional "EOFError: bad content body" errors. They come mostly from mobile devices. Thes...

github.com

仕事で unicorn で動いてるサーバーにファイルアップロードする仕組み入れたことは何度かあるけどこんなエラーになったことはなかったのになぁ。謎い。

ブログのアプリケーションサーバーには unicorn を使っていたのだけど puma に変えてみた。

PassengerやめてunicornにしたらLokkaが速くなった

仕事でunicornを使っているので、ポータルシットをunicornで動かすことにしてみた。PassengerのおかげでPHP + Apacheでサイトつくるみたいにお気楽にRackなサイトをつ...

portalshit.net

2011 年から使っていたようなので丸 5 年は unicorn を使っていたことになる。 puma はスレッドセーフにしないと死ぬ、ということは聞き及んでいたのでおそるおそる変えてみたけどいまのところ問題なさげ。

手元で確認したときには scss のコンパイルで怪しい雰囲気があった（特定ページにアクセスしたあとレスポンスを返さなくなってしまう）ので 0.12.7 だった compass のバージョンを 1.0.3 に上げてみたところ問題が解決した。結果オーライということで深追いはしてないけど、リポジトリを見に行ってみたらメンテナンス停止しているようだった。最近はフロントエンドは JavaScript でやるのが当たり前ですもんね。

GitHub - Compass/compass: Compass is no longer actively maintained. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.

Compass is no longer actively maintained. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain. - Compass/compass

github.com

Lokka のフロントエンドは 2010 年頃ナウかった Ruby ベースの技術が満載で最近の傾向とは異なるので、フロントエンドで利用してる gem がメンテされておらず Ruby のバージョンアップ時のボトルネックとなってくることが考えられる。この前 Ruby 2.4.0 で動くか素振りしてみたけどダメだった。padrino-helpers 、 slim 、 haml 、 coffeescript （この機能は自分が追加した）あたりとどういう風に折り合いを付けていくか考えないといけない。

Pinboard にブックマークしたらはてなブックマークに同期するやつを作った。

GitHub - morygonzalez/pinboard2hatena: Sync はてなブックマーク with Pinboard

Sync はてなブックマーク with Pinboard. Contribute to morygonzalez/pinboard2hatena development by creating an account on GitHub.

github.com

なんで Pinboard を使うのか、どうしてはてブに一本化しないのかというと、洋物のサービスを使うときに Pinboard の方が使いやすいから。 IFTTT に Pinboard 連携機能はあってもはてブ連携機能はないし、 Delibar や Reeder や ReadKit も Pinboard には対応しているけどはてブには対応してない。あと Pinboard は広告出ないしホッテントリ的なものもないので気がついたら Amazon で買い物してたとかホッテントリの海に溺れてた、ということも起こらない。とはいえはてブのコメントでキャッキャッウフフはしたい。なのでブックマークするときは両方にしたい。パソコンの Chrome からブックマークするときは Taberareloo でクロスポストできるのだけど、最近 iPhone からブックマークすることが増えて（iPhone 進化し過ぎて仕事するときしかパホコン使わなくなった） Pinboard とはてブにそれぞれブックマークするのがだるかった。そういうわけで Pinboard をメインにしつつはてブに同期を試みた。

はてなスタッフの aereal さんが作ってるはてブ API 用の gem （aereal/hatena-bookmark-restful: A client library for Hatena::Bookmark RESTful API）あって使わせてもらったのだけど、これはそのままだと使えない。タグが複数あるケースに対応してない＆ User-Agent を送らないので API 側から 401 Unauthorized が返ってくる。なので雑にモンキーパッチした。

はてなブックマークの API は tag を 10 個まで設定できるけど、以下のように Request Body が Encode されるのを期待しているっぽい。

"comment=&tags=ruby&tags=http&url=https%3A%2F%2Fgithub.com%2Flostisland%2Ffaraday"

この様な Request パラメーターを Ruby で表現すると以下のような Hash になると思う。

params = {
  comment: '',
  tags: ['ruby', 'http'],
  url: 'https://github.com/lostisland/faraday'
}

Hash は当然のことながら同じキーを複数持つことはできないから、 tags は配列として表現される。これをこのまま Faraday （Ruby の HTTP クライアント。上述の gem でも使われてる）に渡して Request Body を生成するとエラーになってしまうのだった。

最近の Faraday には encode option が追加されて FlatParamsEncoder というのを選べるようになってた。こいつを使うと配列を value に持つ Hash をシリアライズしたときに tags=foo&tags=bar みたいな形式にしてくれる。加えて User-Agent も載せるようにもした。こんな感じ。

class Hatena::Bookmark::Restful::V1
  def create_bookmark(bookmark_params)
    res = connection.post("/#{api_version}/my/bookmark") {|req|
      req.params = bookmark_params
    }
    attrs = JSON.parse(res.body)
    bookmark = Bookmark.new_from_response(attrs)
  end

  private

  def connection
    @connection ||= Faraday.new(url: 'http://api.b.hatena.ne.jp/') do |conn|
      conn.request :url_encoded
      conn.options.params_encoder = Faraday::FlatParamsEncoder
      conn.request     :oauth, {
        consumer_key:    @credentials.consumer_key,
        consumer_secret: @credentials.consumer_secret,
        token:           @credentials.access_token,
        token_secret:    @credentials.access_token_secret
      }
      conn.headers['User-Agent'] = 'Hatena::Bookmark::Restful Client'
      conn.adapter Faraday.default_adapter
    end
  end
end

なおはてブの API はリクエストパラメーターが不正なとき 400 Bad Request を返すのではなく 401 Unauthorized を返す。のみならず User-Agent なしのリクエストに対しても 401 を返す。一方で OAuth ヘッダーが不正なときは 400 を返す。原因の切り分けがむずかしくなるので、リクエストパラメータが不正なときは 400 を返して欲しいし認証できないときは 401 を返して欲しい。

追記 2017-05-22 18:34:38

作者の aereal さんに気づいてもらってパッチを取り込んでもらったんだけど、なんかやっぱりタグありの記事をブックマークしようとするとエラーになるっぽい。相変わらず 401 Unauthorized が返ってくる…。

Archives ページは部分的に React.js を使ってる。これを全部 React にして SPA 化してみたい。そのためには Server Side Rendering が必要。

Ruby で Server Side Rendering するライブラリでは react-rails が有名だけど、 Rails 以外で Server Side Rendering したい。

有名なやつでは airbnb の hypernova というのがあった。これ自体は Node.js で、 hypernova-ruby というクライアントからサーバーを呼び出して Server Side Rendering するというもの。なのでサーバー側に一個プロセスが増える。開発環境でも Node.js でプロセス起動したりしないといけない。仕事で Microservice には食傷気味になってきてるので趣味では Majestic Monolith™ で行きたい。

名前似てるけど Hyper-Ract というやつもあった。これは過激で JavaScript とか HTML を排除して Ruby で全部書こうぜという Opal が React 対応したもの。良いんだけど F/E の進化早すぎ問題に対応できなくなる気がする。数年後には CoffeeScript みたいになりそうな予感がある。スタンダードでシンプルなものを使いたい。

もう一個、スター全然付いてないしメンテナンスもされてなさそうなんだけど、 V8 で React 読み込んで出力するだけという簡単なのもあった。react-ruby-v8 という直球な名前。こんなので十分かもしれない。

自作の Lokka プラグインに Amazon の Product Advertising API に問い合わせてアフィリエイトリンク付きの商品画像を返すやつがある。 Amazon 上の商品管理番号を <!-- ASIN=XXXXXXXX --> みたいな感じで本文中に書いとくと良い感じに小銭を稼げるかたちのリンクにして画像を表示してくれるという便利なやつ。

Amazon の規約上、 Amazon Product Advertising API に対しては一秒間に一リクエストしか送ってはいけないことになってるので、データを取得する度に 1 秒 sleep するようにしていたけど、一ページ内で複数のリンクがあるときにキャッシュがエクスパイアして Amazon の API を叩くとめっちゃレスポンス遅くなってださかったので非同期で取るようにした。ページコンテンツ本体はサクッと返して、商品情報などの取得はページがレンダリングされたあとに JavaScript で行う。 Amazon から JSON を取ってくる処理自体は Ruby にやらせる。

+----------+            +----------------+             +--------------------------------+
|          | +--------> |                | +---------> |                                |
|  client  |            |  Ruby (Lokka)  |             | Amazon Product Advertising API |
|          | <--------+ |                | <---------+ |                                |
+----------+            +----------------+             +--------------------------------+

最初は雑に body の innerHTML を正規表現で replace したりしてたんだけど、そうすると Twitter のウィジェットなど本文内に埋め込んである script タグが動かなくなる問題に気がついた。 HTML 5 の仕様で、 innerHTML = で挿入されたコンテンツの script タグは無視されるらしい。なるほど〜。

Element: innerHTML プロパティ - Web API | MDN

Element オブジェクトの innerHTML プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。

developer.mozilla.org

ということでもうちょい調べたら DOM には Node.nodeType というプロパティがあって、COMMENT_NODE など type を持っているらしい。

Node: nodeType プロパティ - Web API | MDN

nodeType は Node インターフェイスの読み取り専用プロパティであり、整数値でこのノードが何であるかを識別します。これは様々なノードの種類、例えば elements、text、comments を見分けます。

developer.mozilla.org

<!-- ASIN=XXXXXXXX --> は COMMENT_NODE として扱われるので、こいつの後ろに document.createElementして JavaScript で動的に生成された要素を突っ込むようにした。 Promise を使ってナウでヤングな感じに書いた。

let promise = new Promise(function(resolve, reject) {
  request.open('GET', url);
  request.onreadystatechange = function() {
    if (request.readyState != 4) {
      // リクエスト中
    } else if (request.status != 200) {
      // 失敗
      reject(request.response);
    } else {
      // 取得成功
      let formatter = new Formatter(request.response);
      let result = formatter.formatItem();
      resolve(result);
    }
  };
  request.send();
});
promise.then(function(result) {
  let previous = node.previousSibling;
  let parent = node.parentNode;
  let d = document.createElement('div');
  d.className = 'amazon';
  d.innerHTML = result;
  parent.insertBefore(d, previous.nextSibling);
}).catch(function(error) {
  console.log(error);
});
return promise;

意地でも jQuery 使うまいと思ってやってみたけど意外と大丈夫だった。楽をせずに素の JavaScript を書いていると精神が浄化されるような感覚があってよい。写経に通じるものがある。写経やったことないけど。

むかしやってた映画のブログ（ WordPress ）のデータをこのブログに取り込もうとしたら、 mysqldump しといたデータが文字化けして読めなかった。 映画ブログのデータベースの文字コードは utf-8 にしてたけど、 Dreamhost の MySQL サーバーの defualt-character-set がおそらく latin1 になっていたと考えられ、 mysqldump するときに utf8 のデータが latin1 として export されてしまい文字化けを起こしていたっぽい。

vim で開いて e ++enc=utf8 してみたり、 nkr で変換しようと試みたり、ググって出てきた Perl のスクリプトで変換しようと試してみたけど直らなかった。この変換は MySQL 自身にやらせないとダメなのではと思い、以下を試したがダメ。

• [x] latin1 で DB 作成し latin1 で import 、 utf8 で export
• [x] latin1 で DB 作成し utf8 で import 、 utf8 で export

結局、 Stack Overflow にあった以下の方法で解決できた。

utf 8 - Detecting utf8 broken characters in MySQL - Stack Overflow

I've got a database with a bunch of broken utf8 characters scattered across several tables. The list of characters isn't very extensive AFAIK (áéíúóÁÉÍÓÚÑñ) Fixing a given table is very straightfo...

stackoverflow.com

一旦文字化けしたまま utf-8 の文字列として import し、以下の SQL を流す。

UPDATE [table_name] SET [column_name] = CONVERT(BINARY CONVERT([column_name] USING latin1) USING utf8);

やっぱり MySQL で化けたデータは MySQL で直すしかないみたいだった。

BitBar で私家版通勤タイマー (2) - portal shit! の続き。

時刻表を JSON 化した奴を食わせて 60 分以内（まえの記事では 30 分以内にしてるけど 60 分以内に変えた。パラメーターで調整できるようにすると良さそう）の次の電車一覧と発車時刻までの分数を表示できるようになった。あとはこれを BitBar で扱えるようにする。以下のようなシェルスクリプトを用意した。 BitBar をインストールして pup 、 jq をインストールし、 go get github.com/morygonzalez/jikoku した上で以下のようなシェルスクリプトを ~/bitbar/jikoku.1m.sh という名前で保存すればよい。

#!/bin/sh
export PATH="$HOME/bin:/usr/local/bin:/usr/bin:/bin:$PATH"

echo ":train:"
echo "---"

go_filter=""
return_filter="筑 西 唐"
go_base="http://transit.yahoo.co.jp/station/time/28074/?gid=2480"
return_base="http://transit.yahoo.co.jp/station/time/28236/?gid=6400"

day=`date "+%a"`
hour=`date "+%H"`

if [ $hour -lt 13 ]; then
    go=true
else
    go=false
fi

case ${day} in
    "Sun")
        kind=4
    ;;
    "Sat")
        kind=2
    ;;
    *)
        kind=1
    ;;
esac

if [ $go = true ]; then
    url="${go_base}&kind=${kind}"
    path="/tmp/jikoku_go_${kind}"
    filter=$go_filter
    echo "Go | href=$url"
else
    url="${return_base}&kind=${kind}"
    path="/tmp/jikoku_return_${kind}"
    filter=$return_filter
    echo "Return | href=$url"
fi

if [ ! -f ${path} ] && [ ! -s ${path} ]; then
    curl -s ${url} -o ${path}
else
    current=`date +%s`
    last_modified=`stat -f "%m" ${path}`
    if [ $(($current - $last_modified)) -gt 3600 ]; then
        curl -s ${url} -o ${path}
    fi
fi

echo "---"

cat ${path} |\
    pup 'table.tblDiaDetail [id*="hh_"] json{}' |\
    jq '[.[] | { hour: .children[0].text, minutes: [.children[1].children[].children[].children[].children[].children | map(.text) | join(" ") ] }]' |\
    jikoku -f "${filter}"

echo "---"
echo "Refresh | refresh=true"

go_base には往路の、 return_base には復路の Yahoo! 乗換案内時刻表の URL が入る。 go_filter と back_filter はユーザーごとに行き先を絞り込みたいだろうから（自分の場合は福岡市地下鉄の JR 筑肥線直通電車だけを絞り込みたかったので行き先表示に「筑」「西」「唐」が含まれるものだけがフィルタリングされるようにした。BitBar はファイル名を 1h.sh や 1m.sh とすることで 1 時間おきの実行や 1 分おきの実行など実行間隔を指定できる。

ちなみに当初は 5m.sh にしていたが、次の列車までの時間を表示するソフトが 5 分おきに実行とかだったらまずいことに気がついた。メニューバーで確認してまだ余裕だと思ってたら間に合わなかったみたいな事態になる。毎分処理が走らなければ意味がない。毎分実行しても問題ないよう（ Yahoo! 乗換案内に迷惑をかけないよう）、時刻表を一時間キャッシュするようにした。もっと長期間キャッシュしても良いのだろうけど、 13 時を境に往路と復路を切り替えるようにしているので、まぁ 60 分もキャッシュすれば十分サーバーリソースにやさしいかなと思い、このような作りにしている。

最初は curl と pup と jq を組み合わせて簡単に作れないかな、と思ってやり始めて意外と簡単にできそうだと思っていたけど結局は結構複雑になってしまった。 Go で書いた jikoku コマンドの方も複雑かつ終電後の翌朝始発を考慮できていなくていまいち感がある。時刻表は平日と土曜、日曜祝日で異なるので安易に当日のデータを翌日のデータとして使い回せない（曜日判定しないといけない）。たとえば金曜日の終電後に翌朝の始発を金曜日の時刻表を使って表示してしまうとまずい。ちゃんと土曜日の時刻表を使わないといけない。しかし時刻表自体は curl で HTML を取得して pup と jq で JSON に整形しているので、翌日の時刻表が必要になっても Go コマンドの方からはどうしようもない。

• 時刻表の HTML を取得 （いまは curl でやってる）
• HTML から必要な要素を取り出す （いまは pup でやってる）
• 取り出した情報を使いやすい形式に直す （いまは pup と jq でやってる）
• 次の電車を表示する （いまは自作の jikoku コマンドでやってる）

という四つのステップを全部 Go でやった方がよいのかもしれない。そもそも jq 職人だったら jikoku コマンドみたいなものは不要で、次の電車を表示するところまで jq でできてしまうのかもしれない。

ちょっともやっとした感じは残ったけどなかなか便利ですのでよかったらご利用ください。

• BitBar - Put anything in your Mac OS X menu bar
• bitbar/jikoku.1m.sh at master · morygonzalez/bitbar
• morygonzalez/jikoku: 私家版通勤タイマー

なお pup と jq に依存してますんでインストールが必要です。

brew install pup
brew install jq