MovableType+Chrome Hackathonにお邪魔してきました
6月28日に、Six Apart社主催の「MovableType + Chrome Hackathon」に講師としてお呼ばれしてきました。MovableTypeにはData APIというのがあって、MTの中にある情報を取得したり更新することができます。このAPIを使ったChromeアプリや拡張機能を作ってみましょう、というのが今回のテーマです。
会場は、Six Apart社の新しいオフィスでした。
僕自身は12時くらいに行ったのですが、すでにほとんどの方が到着していて、開発に黙々と取り組んでいました。Hackathonは開発までの時間が限られていて、しかも成果発表が伴うため、独特の雰囲気になります。もちろん今回のHackathonも同じような感じで、ちょっとした緊張感というか、まさに皆さん「没頭している」って感じでした。
僕は「Chrome appsや拡張機能について詳しい人」っていう名目で参加していましたが、それだけにとどまることはなく、Web技術全般の質問も当然絡んできますので、答えなければならない問題領域は結構広くなります。全てのことに答えられるかというとそんな自信はないので、僕としても「対応できない問題が来たらどうしよう・・・」と内心ドキドキでした。本当は何でも即答できるとベストです。皆さんは「時間が限られた開発の中で次々と直面する問題課題を解決し続けている」状態です。その中で「できること、できなこと」を取捨選択しながら、最終的には「動くもの」に仕上げなければなりません。それを迅速にするために、僕がいるわけです。僕が「答えれない」「答えるのに時間がかかる」「間違った答えをする」ということは、皆さんの開発の言わば「邪魔」になってしまうわけです。
・・・という風に書いてしまうと大げさですが、でも近いものがあります。僕は僕で、各質問に対して、自分の経験の中から「理想としては○○ですが、この場では△△とした方が良さそうですね」というように回答するよう心がけたつもりです。
昼食はSix Apartの方々のご厚意で、お弁当が準備されていました。「乳製品が入ってないお弁当お願いします」とわがままを言ってごめんなさい。唐揚げ弁当でしたが、4つあった唐揚げ一つ一つが巨大でした。
開発は17時過ぎまで行われ、その後ビールを飲みながらの成果発表会が行われました。6人+1チームの合計7個の成果を簡単に紹介したいと思います（本当はもう一つ成果がありましたが、Chrome全く関係なくWebアプリでもなく、しかも発表時Chromeはデスクトップに見当たらずSafariだった、という今回のテーマ外のものだったので、ここでは除外）。
ShortnoteBackup (Extension)
Shortnoteというスマートフォン向けテキスト投稿サイトがあって、そのShortnoteに何か投稿した際に、同時にMovableTypeにも投稿される、というChrome拡張機能でした。公開設定なども事故が起きないようにどちらにも同じ設定で投稿されます。MovableTypeにも投稿する目的としては、Shortnoteへの投稿を自動的にMTにバックアップしておきたい、という理由でした。
技術的には、Content scriptを仕込んで、Shortnoteへの記事投稿ボタンのクリックイベントを監視し、MT Data APIを叩いて投稿内容をMTにPOSTする、という感じでした。
一番質問を僕にしてくれた方が、これを作った方でした。jQueryでクリックイベントを横取りしたい要素にイベントハンドラを登録するための実装に苦労されていましたね。Content scriptは比較的泥臭い実装になるのですが、今回のこの場合も同様で、表示されているページのDOM構成に完全に依存した実装を強制されるため、スマートにはなかなかいかないものなのです。ただ、最終的にはしっかり動作するように仕上がっていましたので、素晴らしかったです。
MTEditmark (Extension)
MTから出力されたWebページが表示されている際に、そのページや適用されているテンプレートの編集ページに簡単に移動するためのChrome拡張機能でした。
Browser actionを使って実装されていました。ポップアップウィンドウ内にあるリンクをクリックした際に、表示されているタブのURLを見て、MT Data APIにそのURLを渡して編集用URLを取得し、そのページに遷移するという流れのようでした。
ただ、編集用URLを取得する、というData APIは標準では存在していないようで、編集用URL取得APIをMTのPluginとして自作するところから行ったそうです。この拡張機能以外にも、Data APIの自作からやってた人が数人いました。
個人的には、これはPage actionの方がより適していたように思いましたが、MTユーザの誰しも使いたくなる拡張機能だろうなぁ、と思いました。
InPlaceEditor ForChrome (Extension)
これもさっきと一緒で、MTから出力されたWebページを手軽に編集したい、という目的のChrome拡張機能でした。しかし、先ほどのものと大きく違う点として、「その場で編集可能」でした。つまり、開いているWebページから別のページに遷移することなく、そのページをEditableにして見た目そのままでテキストを編集でき、そのままMTにも反映できてしまうというわけです。
これを作った方も、Data APIに独自APIを追加していました。裏の動作的には、Browser actionからEditリンクを選択すると、その自作APIを叩いて「編集用のHTML」を取得し、仕込んだContent scriptがその内容を参考にしながら、開いてるページ内で編集対象の要素を特定し、Editableにしている、という感じのようでした。
個人的には、Browser actionとか使わず、表示されてるページ上に編集のきっかけとなるUIを追加しちゃっても方がいいのかも、と思いました。さらに、Chrome Extensionとかに頼らず、そもそもMTが標準でサポートすべき機能じゃね？とも。。。
同じことを思った参加者がいて、僕も「WordPressでは、管理ページで専用Cookieが発行されて、それがあるとエントリページにUIが表示されます。同じことをMTでサポートしてもいいのでは？」と質問してみましたが、実際にはそれはセキュリティとのトレードオフになり、現状では安全側に倒している、ということでした。MTの出力結果はあくまで静的ページを期待する企業が多いそうで、実際の出力結果からCGIを叩いたりMTサーバ側の動的処理を呼んだりすることは、多くの企業が避けたいと考えるとのことでした。うん、まぁ、そうですよね。。。
実はこれを作った方は、MT Data APIの作者です。
bitcatch (Extension)
bitcatchという情報共有Webアプリを開発されている方々による成果です。これだけ2名によるチーム開発でした。Browser actionから、bticatchへテキストやTODOを投稿可能、というChrome拡張機能でした。
ちょっと知識不足で発表内容の全てを理解することができなかったのですが、たぶんbticatchの裏でMTが動いているということなのでしょう。Browser actionからMT Data APIを叩いてエントリを追加し、その結果がbticatch上でも反映される、というものなのだろうと思って発表を聞いていました。
MT TemplateMerge (App)
MovableTypeでは、MTを管理している企業と、実際のユーザ企業が別々ということも少なくありません。その2つの企業それぞれにMTを動かしておいて、片方で行われた変更をもう片方のMTに反映する、という運用もあり得ます。例えば、出力されたWebページの見た目を変えたいといった場合に、例えばユーザ企業側のMTで編集されたテンプレートの差分を、実運用しているMT側に反映する、といったことをしたくなるわけです。この際、どんな変更内容なのか、差分を確認できれば便利です。
このアプリは、2つのMTにそれぞれあるファイルの差分を表示してくれます。左右にフォームがあり、比較したいMTを割り当てておきます。そして、ファイルを選択していくと、エンジニアであればおなじみの差分表示がされるわけです。
これはChrome appsとして実装されていました。さらに、差分の表示については、 Code mirrorを使っているとのことでした。見た目的には、最もエンジニア心をくすぐるアプリだったのではないか、と思います。
今後、差分確認後に実際にmergeして反映するとか、このアプリ上でコンフリクトを解消できる機能を実装したりしたい、と発表されていました。僕個人的にもこれは今後が楽しみですし、「これは売れる！」という声も上がっていました。
Movable Type Quiz (App)
唯一「ネタに走った」アプリだったと言えますし、発表者本人もそう言ってました。これは、クイズアプリです。5つの問題が次々と表示され、それに答えていきます。都度正解か不正解か表示され、しかもサウンドもちゃんと鳴ります。
質問はMTのエントリとして作成してあって、Data APIで引っ張ってきているとのことでした。回答結果も、Data APIでPOSTしているそうです。
ずっと実用的なものばかりだったので、こういうのもHackathonではとても重要。サウンドがかなりマッチしてて、凄くシンプルだけど、実は完成度はかなりのものでした。
Chromecast試したアプリ (Chromecast app)
最後の発表は、「Chromecastアプリを作ってみました」的なものでした。WebページからData APIのURLを入力してあげると、SenderではそのURLを叩き、その結果（デモではエントリのリスト？）をReceiver上で表示する、という感じの動作でした。
実は僕はChromecastは持ってなくて、実際にSenderとReceiverを実装して自作アプリが動作しているのを直接目にするのは初めてでした。個人的には貴重な体験をさせていただきました。
さて、今回僕は審査委員でもありました。厳正なる(?)審査の結果、準優勝は「ShortnoteBackup」、優勝は「MT TemplateMerge」になりました。
成果としては、拡張機能が4つ、アプリが2つ、Chromecastが1つ、その他1つ、でした。やはりMovableTypeとの組み合わせ、という点で拡張機能のほうがイメージが湧いたということだと思います。ただ、アプリが2つもあったのは驚きでしたし、どちらもアイディア的に素晴らしかったです。実際に作られた方々は、きっと「Chromeアプリ、Chrome拡張機能としての一歩目は簡単、でもその先には地道な作り込みが待っている」という感想を持ったと思います。実際書き始めから動作し始めるまではとても早いと思うので、あとはアイディア次第実装力次第っていう世界です。参加された皆さんがChromeアプリや拡張機能への第一歩を記してくれたことは、僕にとってもとても嬉しいことですし、今後もぜひ続けていってほしいな、と思います。
楽しい1日でした。ありがとうございます。そしてお疲れさまでした〜。
