Lokka の管理画面をスマートフォン対応させた。携帯から記事を投稿したりスパムコメントを削除したいなと思うことがあっても Lokka の管理画面はモバイルフレンドリーではなくて非常に厳しかった。とても便利になったと思う。ドッグフーディング最高。
専業フロントエンダーではないのでマークアップと CSS コーディングは適当だけどこの様に寝床でごろんとしながらでも駄文を投稿できるようになって便利。 Lokka ご利用中の方はご活用ください。
Amazon Product Advertising API への問い合わせを非同期に
自作の 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 タグは無視されるらしい。なるほど〜。
ということでもうちょい調べたら DOM には Node.nodeType というプロパティがあって、COMMENT_NODE など type を持っているらしい。
<!-- 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 を書いていると精神が浄化されるような感覚があってよい。写経に通じるものがある。写経やったことないけど。
RubyKaigi 2016 を観覧
京都であった RubyKaigi 2016 を観覧してきた。 RubyKaigi 、つくばであった 2010 がこれまでの人生での唯一の RubyKaigi で、人生二度目の観覧だった。
RubyKaigi 2010 の思い出
一度目のときは少し前に増田に上がってた勉強会ゴロ状態（受付の人と技術書を買ったジュンク堂の人と以外誰とも会話をせずに帰宅）だった。
ちなみにこのとき ESM の企業発表を見に行って、 ESM に転職したばかりの hsbt さんの姿を初めて目にした。なんか入社したばかりなのに社内ブログで暴れてて愉快、みたいな紹介のされ方だった。その後同じ会社で働くことになるとは思いもしなかった。
ESM の発表はとにかく鮮烈に印象に残ってて、ペアプロのライブコーディングだった。 ursm さんが CRM か何かの開発を実演してた。まず最初に落ちるテストコードを書いて、その後にパスするプロダクトコードを書く、というやつを初めて目にして、田舎で HTML コーダーをしつつちょっとしたプログラムを書いてた自分は衝撃を受けた。黒い画面の Vim で高速にコードを書いていく様がとにかくかっこよかった。はやくこういう感じでコード書けるようになりたい、と思ったものだった。
クックパッドの企業発表みたいのも聞きにいって、このときクックパッドもまだそんなにエンジニアの数多くなかったはずで、同じくはてなから転職してきたばかりのセコンさんが話してるのを聞いてトートバッグもらって帰った。
YAPC::Asia Tokyo 2015 の思い出
去年の夏、 YAPC で東京に行って、このときはペ社時代の知ってる人としゃべったりして無言の帰宅は避けられた。
YAPC 2015 は気がついたときには懇親会の申し込み締め切られててどこにも行けず、一人浜松町の宿泊先の近くの「とにかく安くて量が多い」と食べログにレビューが書いてある寿司屋に入って一人で寿司を食べたら寿司がねちゃっとしてて具合が悪くなったりしてた。
YAP寿司::Asia 始まった pic.twitter.com/5AI2FXedlJ
— morygonzalez (@morygonzalez) August 21, 2015
RubyKaigi 2016
今年も発表する側にまわったわけではないので一般ピープルである点は同じだったが、これまで話したことなかった人と話せたのがよかった。
取り分けよかったのが Fjord 社の komagata さんと話せたことだった。今後の Lokka の方針をどうするか開発者会議的なものを開催してババっと方針を決めましょう、という話をした。 Lokka 、思い入れがあるので積極的にメンテナンスに関わって今後も長く使い続けていきたい。
一日目
一日目は Kaizen Chat についてのブログ記事を公開するというタスクがあって、 Matz のキーノートとかはあまりじっくり聞けなかった。記事公開後に会社のブースで自分のシールを配布したりして公私混同してた。
今年の RubyKaigi は懇親会の枠が大きかったおかげで申し込みそびれるということにならなくてよかった。
オフィシャル懇親会で Fusic 社の k1low さんと初めてゆっくり話をした。Fukuoka.rb で顔を合わせることあっても一緒に酒飲んだりする機会なかったので RubyKaigi に来て初めてじっくり話すという感じだった。
ヒトデさんとその愉快な仲間たちの皆さんとも話して、 shikakun はオリジン弁当ばかり食べてるくせにやたら調理器具を持っていて不可解だとか、風呂蓋付きの浴室がある部屋にすんでいていけすかないという話をした。
Twitter で 8 年くらい前にハゲクラスタとしてわいわいやってた send_ さんとも再会できて、お互い帽子をかぶった状態でいまの仕事の話をしたりした。
オフィシャル懇親会のあとは、ヒトデさんオーガナイズの二次会に参加させてもらった。デンエンという物価が崩壊してる飲み屋に行ってタワーから注いで飲むビール飲みまくった。クックパッド社の著名エンジニアの皆さんと対面に座ったけど人に自慢できるような OSS とかなくて雑魚いので自己紹介に困ったが、とりあえずこういうアイコンのものですと言ってシールを見せたら「あ、なんか見たことある」という感じになったのでシール便利だった。
二日目
朝一番の Justin Searls さんのリファクタリングについての発表がとにかく面白かった。
RubyKaigi 2016, September 8..10, Kyoto, Japan #rubykaigi
September 8..10, Kyoto, Japan
rubykaigi.org
去年 YAPC で GitHub の人が話してた sicientist と似てるけど、リファクタリング前後のコードで A/B テストをする gem の紹介。新しい方のメソッドが例外投げたら rescue して古い方のメソッドを実行するというのが面白かった。本番にも安心して投入できるとのこと。
三日目
午前二番目に tkawa さんの HTTP クライアントについての発表聞いた。 HTTP クライアント乱立しててひどい、 API をラップしてリモートサーバー側のクラスを再現するような異常なクライアント多くて、 REST API とは一体何なのか状態だ、みたいな話だった。言われてみれば確かにそうかもしれない。独自の API クライアント作ることなく、 Rack が Rack Middleware を use して拡張していくみたいに、 HTTP クライアントの側でも Middleware を use していくのがよい、そこで Faraday ですよ、という話で、あ、 Faraday ってそういうことを目的にしてたんだと膝を打った。
午前中最後の Chris Arcand 氏の発表が面白かった。
RubyKaigi 2016, September 8..10, Kyoto, Japan #rubykaigi
September 8..10, Kyoto, Japan
rubykaigi.org
Ruby のコードを解析して呼ばれてないメソッドを調べる、という発表だった。実際に Rails プロジェクトとかで使うのは大変そうに見えたけどいまから君のプロジェクトに投入できるよ、 Rails もダイジョブみたいなことを言ってた気がするのでスライド見直したい。
最後のセッションの前、一日目のデンエン会で知古を得た pastak さん見かけたので uiureo さんを紹介してもらって話をした。 uiureo さん、初対面だけど話しやすくて好青年な感じだった。 r7kamura さんとも少ししゃべらせてもらってよかった。
飛行機の時間の都合があったのでクロージングまでは残らず、最後のキーノートの途中で離席して帰途についた。ホールを出ようとしたところで滑り込みで会場にやってきた元同僚の hisaichi551 さんと邂逅して自分のシールを何枚か雑に渡した。ゆっくり話がしたかった。
京都での開催について
京都での開催良かった。個人的には福岡からだと東京に行くよりも京都の方が近いので移動が楽で良い。首都圏からの大多数の参加者も京都に宿泊して参加するので夜通しどこかで RubyKaigi 関連の飲み会が開かれてる感じで祝祭感あった。夕方から観光したりできて海外からの参加者も満足度高いのではないかと思う。京都国際会館のインフラも素晴らしかった（施設、庭園、食事内容）。スポンサーの提供で振る舞われたお弁当おいしかった。
総合的な感想
RubyKaigi 、海外からのスピーカーの発表はどうやってよいコードを書くかとかリファクタリングとかの話が多い。日本人の発表者の人は Ruby を開発する方の話が多い。（ Ruby コミッターのほとんどが日本人だから）。なので Ruby 本体の開発に興味ない人（ Ruby 開発者ではなく Ruby ユーザーなプログラマー）はぽかんとすることが多いかもしれない。自分は結構ぽかんとしてた。
あと今回多いと感じたのが Concurrency についての話だった。どうやって Ruby で並行性を上げるかという話。 Thread は難しいので素人は手を出すな、ということはわかったけど Ruby 3 の Guild というので素人でも Concurrent なプログラムが書けるようになるかどうかは今ひとつわからなかったので資料を読み直したい（ reuibld.fm の Episode 158 を聞くと良い復習になりそう）。 Ruby 3 に並行処理の使い勝手が向上する前に、他の言語で並行処理について学んで準備をしといた方が良さそうだと感じた。
2010年の勉強会ゴロ状態のときに比べれば、何人かの人と話したりシールを配ったりすることができて、有意義な時間を過ごすことができたと思う。ただアイコンの気持ち悪さで認知されるよりも書いたソフトウェアの知名度で認知される方がよいので、カンファレンスに行って自己紹介するときに「○×というソフトを作ってます」と言えるようになりたい。仕事だけじゃなく、オープンソース活動もやっていけるように頑張りたいな、と気持ちをあらたにした会でした。
公私混同してる pic.twitter.com/nlrFCMOPXb
— morygonzalez (morygonzalez) September 8, 2016
Let's Encrypt でサイトを https にした
乗るしかない、このビッグウェーブに
、という感じで 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 プラグインを使うようにした方がよさそう。
他、 Route53 で CNAME 当てて S3 に向けていたのを CloudFront を向くように変える必要もあり。
個人ブログごときで CloudFront を使うことになるとは思わなかった。
Lokka の管理画面が SSL 通信に対応してない
やっと mixed content の警告消えて記事を書こうとしたら、なんと管理画面が SSL 非対応でブログにログインできない。 Padrino の url メソッドが protocol の指定を出来ないようだった。オーバーライドとか試してみたけどうまくいかなくて困ってたところ、 rack-ssl-enforcer という gem を発見した。こいつを RACK_ENV=production のときだけ use するようにして乗り切った。 'http://' となってるのを Rack 層でえいやっと 'https://' に書き換えてくれる。
感想
Let's Encrypt 、本当に簡単で最高便利だと思った。オレオレ証明書発行するより楽っぽい。いい世の中になったと思う。ただ有効期限が短いので更新を忘れないようにしないといけない。更新の自動化までやってしまいたい。
ウェブサーバーを Nginx から H2O に変えるのとかまでは手が回ってないので自動更新と一緒にやりたい。
アドベントカレンダーに備えて Open Graph protocol に対応
昨日飲みに行って今朝起きてからふとコード書きたくなって、アドベントカレンダーもあることだし（去年の Adventar で自分のブログだけ og:image がなくて画像が出てなくて残念だった）、このブログを Open Graph protocol に対応させることにした。
Twitter Card の Lokka Plugin を前作ってたのでそれを改造した。
Ruby 2.1.0 以降で使える Module#refine 使いまくったけど安全にモンキーパッチできて便利。
module AddImagesToEntry
refine Entry do
def images
self.body.scan(/https?:\/\/[\w\/:%#\$&\?\(\)~\.=\+\-]+?\.(?:png|jpe?g|gif)/)
end
end
endrefine するときのモジュール名、 ActiveRecord のマイグレーションのクラス名みたいで面白い。
Lokka やったこと・やりたいこと
一時期に比べたら Lokka 使ってる人減ってて、 Jekyll/Octopress ブームのあとは Go lang 製のスタティックサイトジェネレーターかはてなブログに移っていってしまった。自分は自分で使うツールを自分でいじるのが好きなので Lokka 使い続けていきたい。ということでいろいろやった。
最近やったこと
テスト通るようにした
Lokka の master ブランチ、しばらくコミットされてなくて Travis CI のビルド 1 年半くらい走ってなかった。久々に Pull Request 出したらビルド成功しなかったので通るようにした。 Travis がコンテナベースの環境から Docker ベースに移行したぽくて、その影響で PostgreSQL がらみで bundle install がこけるようになってた。なのでテキトーに addon を追加しといた。
同じコミットでもうメンテナンスが終了している Ruby 1.9 系の CI をやめるようにした。
Ruby 2.2 に対応させた
json 1.5.5 は Ruby 2.2 系では install に失敗するようなのでいろいろ bundle update した。 ActiveSupport も 3.1 ではエラーが出てしまうので bundle udpate して 3.2 の edge にした。
XSS 直した
コメントで教えてもらったので直した。
ただ実はまだ完全には直せてないので近日中に直したいのだけどテンプレートをレンダリングする仕組みをまるっと変えないと直らなそうなので結構きびしい…。
これからやりたいこと
フロントエンドよくしたい
具体的にはプラグインに同梱された CSS や JavaScript とテーマのやつをくっつけて配信したい。 Asset Pipeline 的な。
高速化
なんか遅い。このブログのトップページのレスポンス返すのに 1 秒くらいかかってるの改善したい。 DB にインデックス張るのとクエリのチューニングかな。
ActiveRecord 化
Fjord の皆さんで開発が続けられていたけど停滞しているっぽい。 DataMapper 、耐えられないほど不便なわけでもないし ActiveRecord にない便利な機能もあるのだけど、 N+1 起こらないという触れ込みなのに N+1 起こったり、ちょっと込み入ったクエリを投げたいと思ったときにやり方がわからないもしくは出来ないということがあるので、 Ruby エンジニアの皆さんが日常的に使ってる ActiveRecord を使うようにするのが良いだろうと思った。そもそもあまりメンテもされてないし、 DataMapper に引きずられて Lokka が停滞するのも残念だし。高速化のためにも ActiveRecord 化有効そう。
最近「仕事外でコードを書かないエンジニアは人間のクズだ」、「いやクズはそっちだ、エンジニアの業務時間外の学習に依存する会社こそ真のクソ」みたいな議論多いけど、自分で使うツールのメンテナンスくらいやらないと本当にプログラマー廃業しないといけない気がするし、自分がプログラミングに触れたの自体 P_BLOG の改造がきっかけだったので、プライベートを犠牲にして歯を食いしばりながら取り組んでいきたい。
Archive ページを React で作り直した
このブログの Archive ページ、自分で作った Lokka Plugin でできているのだけど、ここを React を使って作ってみた。 React チュートリアルの写経の題材を自分のブログにした感じ。 CoffeeScript オワコンと言われて久しいけど Coffee で書いた。 JSX を CoffeeScript で書くときはバッククオートで囲むとよいという知見が得られた。
Entry = React.createClass
render: ->
`(
<li className="entry">
<a href={this.props.link}>{this.props.title}</a>
<div className="detail-information">
<span className="created_at">{this.props.created_at}</span>
<Category category={this.props.category} />
</div>
</li>
)`