Movable Type CMSプラットフォーム Movable Type
ドキュメントサイト

Blogブログ

MT Data API + Chrome ハッカソンを開催しました

去る6月28日(土)に、シックス・アパートの新オフィスにて、MT Data API + Chrome ハッカソンを開催しました。

降りしきる雨の中、開始10時前に到着した参加者は1名......ということで少々焦りましたが、お昼には11名の参加者が集まり一安心。今回は、発表会で成果物のデモを含めた5分間プレゼンをすることがルールになってたため、皆さん、真剣に、もくもくと開発に取り組んでいました。

また当日は、勉強会でもお世話になった Google Developer Expert の田中洋一郎さんもお越しくださり、ハッカソンの最中、参加者の質問にいろいろ答えてくださり、審査のご協力もいただきました。

hackathon1.JPG

そして、MovableType.jp よりも早く、ハッカソン後すぐ、ご自身のブログにいろいろと感想を書いて下さっています。

Movable Type リードエンジニアでプロダクト・マネジャーの高山からも、各作品にコメントをもらいましたので、発表会で発表された順に紹介させていただきます!

ShortNote Backup Extension(大和比呂志さん)

シックス・アパートのサービス ShortNote に投稿した記事を Data API 経由で Movable Type にクロスポストすることで、バックアップを行う Chrome Extension を披露していただきました。

ShortNote の投稿ボタンのイベント処理に苦労していましたが、デモでは無事成功していました。ボタンに ID 要素があれば......とは、本人の弁。

Data API を使えば、記事の投稿や変更を Movable Type にログインすることなく行う事ができるので、今回のように、別のサービスに投稿した内容を、Movable Type へクロスポストすることでバックアップを取る。なんてこともできますね。

作成された記事を Data API で検索することができなくて、ShortNote で同じ記事を更新しても、新規記事が投稿されていましたが、ShortNote 側の ID を 記事のキーワードなどに保存しておけば、Data API から記事を特定することができます。

REST での呼び出し方

GET

https://your-host/your-mt-api.cgi/v1/sites/:blog_id/entries?searchFields=keywords&search=id-of-shortnote

JavaScript ライブラリでの使い方

var params = {
  search: "id-of-shortnote",
  searchFields: "keywords",
};
api.listEntries(siteId, params, function(response) {
  // Do anything
});

あるいは、記事を投稿したときのレスポンスは、作成された記事の Entries リソースになるので、そこから Movable Type 側の記事 ID を取得して、ShortNote 側の ID との紐付けをローカルストレージなどに保存しておくこともできます。

MTEditmark Extension(宮永邦彦さん)

Movable Type 5 で廃止されたMTタグに MTEntryEditLink というタグがあります。このタグは、公開されている記事のページ内に記事編集用のリンクを表示するというタグなのですが、Movable Type の管理画面への URL が漏れてしまうというセキュリティリスクがあったために廃止になっていました。

この Chrome 拡張機能では、ページ内にそれらの情報を持つことなく、表示されている記事の編集用リンクや、使われているテンプレートの編集用リンクも用意している優れものでした。

記事の ID や、使われているテンプレートに関する情報は、出力されているページには存在しません。では、どうやって取得しているかというと、Movable Type のデータベース の mt_fileinfo テーブルに格納されている情報を Data API で取得できるエンドポイントを独自に開発されていました。

Data API は、Movable Type のプラグイン(Perlになりますが)で、拡張することができますので、Movable Type のデータベースには存在するけど、取得するエンドポイントが存在しない場合には、プラグインでエンドポイントを追加する。という使い方もできます。

もちろん、Movable Type Data API の基本機能としてエンドポイントの増強は今後も引き続き行っていきます。

InPlaceEditor for Chrome Extension(天野卓さん)

前述の宮永さんの Chrome 拡張機能と同じように、記事の編集を行えるようにするというものでしたが、こちらは公開されている記事を、その場(ページ内)で編集するというものでした。

こちらも 記事の ID の情報を mt_fileinfo テーブルから取得する Data API のエンドポイントを独自に作成されていました(すでに2つ同じアイディアのプラグインが出ているので、標準提供の方向で検討したいですね)。

公開されているサイト上で、記事の編集や投稿というと、Movable Type のコミュニティ機能でも似たようなことをしていますので、コミュニティ機能の Data API 化という事も進めていきたいと思っています。

BitCatch Extension(柳谷真志さん・奥脇知宏さん)

Data API のリファレンスサイトである 「Six Apart のごはんレシピ」や、Movable Type 6 の書籍である『Movable Type 6 本格活用ガイドブック』を執筆された、bit part のお二人による チームでの発表でした。

Movable Type で作成されている マイクロブログ風な bitcatch への投稿を行う Chrome 拡張機能でした。Movable Type をウェブアプリケーションのバックエンドとして利用した場合、ユーザーが利用するフロントエンドは Movable Type のサイトである必要はなく、スマホアプリからでもいいし、Chrome 拡張機能や Chrome アプリなどでも良いのではないか?という事は、先日の Data API 勉強会などでもお話ししていますが、今回の発表内容は、まさにその好例と言えるのではないでしょうか。

フロントエンドは、Data API と Movable Type から生成した静的コンテンツで自由を手に入れられるのではないでしょうか。

MT Template Merge Chrome Application(内藤謙一さん)

Movable Type で運営されているサイトの場合、本番環境とは別にステージング環境や開発環境というように複数の環境が利用されることが多いです。

そういった場合に、テンプレートの差分確認やマージ作業をラクにしてくれるツールなのではないかと思いました(Movable Type のコア機能としても、差分表示などをサポートしていれば良いのですが、複数環境にまたがっている場合、Movable Type の中で実行するのもむずかしいです)。

確認はしていませんが、差分確認とマージは 「mergely」こちらでしょうかね。また、テンプレート自体の取得は 独自に Data API のエンドポイントを拡張されていたのでしょうか?

ハッカソンのネタだけではなく、実用的なアプリケーションとして、今後の開発に期待したいです。

Movable Type Quiz Chrome Application(藤本壱さん)

クイズをコンテンツと考えた場合、Movable Type でクイズサイトを作るという企画自体は、ボクも前々から 弊社の納会で行っているのですが、こちらは Chrome アプリケーションにすることで、クイズ専用アプリにしています。

クイズデータや結果データの仕様をオープンにすれば、様々なクイズサイトを Movable Type で作ってもらう。というような事もできるのではないでしょうか?

そう考えると、これも Movable Type をバックエンドのシステムとして使う好例のひとつだと思います。

Chromecast アプリ(シックス・アパート 早瀬)

Chromecast の API を利用して、入力されたサイトの記事一覧を Data API で取得して画面に表示するというアプリケーションを披露しました。

Data API の活用方法のひとつとして、デジタルサイネージなどのデバイス対応があると思っているので、これは良い例になりますね。

番外編:Image Manager(野田純生さん)

野田さんが作られた、アイテムのエンドポイント拡張プラグインを利用したアプリケーションを披露されていました。惜しむらくは これが Chrome アプリケーションであったなら、というところでしょうか。今回のテーマには沿っていないと言うことで番外編とさせていただきました。

アイテム周りのエンドポイントは、現在のところ アップロードしか対応していませんが、編集・削除・一覧などのエンドポイントについても、現在準備中です。それ以外にも、様々な機能の追加を Data API では行って行く予定になっています。ご期待ください。

そして優勝は......

優勝は、内藤謙一さんの MT Template Merge Chrome Application でした! 審査員をしてくださった田中洋一郎さん、デザイナーの長谷川恭久さん、そしてシックス・アパートCTOの平田からは、実用性と完成度の高さ、そして拡張機能を作られる方が多い中、Chrome アプリに挑戦されたことも評価されていました。他の参加者からは「売れる!」「買う!」という声も上がっていました。他にも追加されたい機能やブラッシュアップされたいところがあるとおっしゃっていたので、ぜひ完成させて Chromeウェブストアで公開してください。

そして準優勝は、大和比呂志さんの ShortNote Backup Extension が選ばれました。田中洋一郎さんのブログによると、洋一郎さんに一番質問をされていたのが大和さんだったとのこと。いろいろと苦労されていたようですが、これからもぜひ Data API を活用していろいろと作っていただきたいな!と思いました。

hackathon2.jpg

内藤さん、大和さん、おめでとうございました! 高山も「Data API の基本機能としてエンドポイントの増強は今後も引き続き行っていきます」と言っていますので、ご期待いただきつつ、これからも Data API を活用いただけると嬉しいなと思います。そして、今後も勉強会やハッカソンを開催していきたいと思いますので、またぜひご参加ください。

雨の中ご参加いただいた皆さま、本当にありがとうございました。

  • このエントリーをはてなブックマークに追加