WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
Subscribe       

WebOS Goodies の新環境 : 独自 CMS とか、 Google Spreadsheets によるコメント管理とか

WebOS Goodies は開始してから 3 年あまり経つのですが、これまで一貫して livedoor blog を利用してきました。しかし、あろうことか昨年末に livedoor blog の Wiki 文法が変更され、過去記事の大半が維持できない状況に陥りました(実際にレイアウトの崩れた記事を読まれた方、大変申し訳ありません)。長く使ってきたので名残惜しいのですが、残念ながら、この状況では livedoor blog を使い続けることはできません。

そんなわけで、年末年始にかけて livedoor blog の Wiki 文法を処理できる CMS を自作して、新環境への移行を行いました。せっかくですので、本日はその新環境の概要をご紹介します。 Web API を活用したユニークなシステムになっていて、それなりにご紹介する意味もあるかと思いますので、ぜひご一読いただければと思います。

新環境の概要

各ページの冒頭にも書いていますが、このブログの趣旨は「さまざまな Web サイトが連携して、 Web 全体がひとつのアプリケーション・プラットフォームとなる、いわゆる WebOS 実現を目指す」というものです。その一環として、新環境への移行では、既存の Web サービスを積極的に活用するように工夫しました。その結果、新しいシステムの構成は以下のようになっています。

  • 公開用 Web サーバーは XREA のレンタルサーバー
  • CMS はローカルで動く Rails ベースのものを独自開発
  • コメント管理は Google Spreadsheets
  • カテゴリ管理は Delicious
  • 最新記事の表示は Google AJAX Feed API

公開用 Web サーバーはぶっちゃけなんでも良かったので、もともとアカウントを持っていた XREA を利用しています。 XREA では CGI や DB も利用可能ですが、現在のところそれらはほとんど使っていません。将来的には簡単な CGI も使うことになるでしょうが、あくまで Web API を呼び出すためのプロキシーとして使うにとどめ、可能な限り Web API を活用していきたいと思っています。

その他の要素については、以下で個別にご紹介します。

静的 HTML を生成する独自開発の CMS

まずは今回新たに開発した CMS から。 CMS というと、 Web サーバー上で動作してページを動的生成する、 XOOPS や WordPress のようなものを想像する方が多いのではないでしょうか。しかし、今回開発した CMS は、

ローカルで動作し、静的 HTML を生成する

という仕様になっています。投稿画面で記事を投稿すると、静的な HTML ファイルを生成して公開用 Web サーバー (XREA) に FTP で転送するという感じです。もちろん記事の内容は DB (SQLite) にも保存され、後から修正できます。動作の仕組みという面では Windows Live Writer のような blog 投稿ツールに近いですね。しかしまぁ、外部のブログサービスに依存しているわけではありませんし、 RSS / ATOM フィードの生成もできるので、一応 CMS と呼べるものではあると思います。

こういった構成にしたのには、前述の「Web サービス活用」以外にも、以下の理由があります。

  • パフォーマンス。 XREA のサーバーが多少重い状態になっていても、静的 HTML なら問題なく配信してくれるでしょう。
  • セキュリティー。サーバーサイド・スクリプトの脆弱性を突かれてサーバーに侵入される心配は(ほぼ)ありません。
  • 基本的にメンテナンスフリー。たぶん 10 年放っておいても普通に表示されるでしょう。もちろん、 Web サーバーなどの契約を維持すればの話ですが。
  • 環境依存がまったくない。例えば XREA とは別のサービスに移行することも簡単にできます。単にファイルをコピーするだけ。

まあ、基本的には管理の手間がかからないという点が非常に大きいですね。少ない余暇を使ってブログを更新しているわけなので、余計な手間はできるだけ省くのが長続きさせるコツだったりします。

まだまだ他人様に使っていただけるものではありませんが、一応ソースは以下の URL で公開されています。興味のある方はご覧ください。

http://webos-goodies.googlecode.com/svn/trunk/cms/...

Google Spreadsheets でコメントシステムを構築

サイトを静的 HTML のみで構成した場合、コメントをどうやって保存するかが問題になります。コメントはいつ投稿されるかわかりませんから、オフラインで静的な HTML を更新する方法では対処できません。そこで、このブログでは

Google Spreadsheets を DB として使う

という方法で、コメントシステムを構築しています。ここまでヘビーに Google Spreadsheets を使っている例は稀だと思いますので、どれだけパフォーマンスがでるか心配だったのですが、とりあえず普通に動いているみたいですね(笑)

まず、コメントの投稿フォームは Google Spreadsheets のフォーム機能 で実現しています。生成したフォームのソースを見れば、送信先 URL と各フィールドの name 属性がわかるので、各記事のコメントフォームをそれと同じ設定にしてあります。この状態でコメントを送信すれば、スプレッドシートの一行としてコメントの内容が保存されるわけです。さらに Google Spreadsheets には更新時にメール通知する機能があるので、それを有効にしておけばコメントの読み忘れもありません。

コメントの表示には Google Visualization API を使っています。フォームの隠しフィールドで記事の URL の一部を保存しているので、それをキーにしてクエリーをかけて、ページに挿入しています。クエリーの条件はかなり柔軟に指定できるので、その気になれば最新コメントの表示やコメント数の多い記事の表示なども可能でしょう。余裕があれば挑戦してみたいと思っています。

ちなみに、コメントシステムの実現には HaloScanDISQUS, Google Friend Connect といったサービスを利用する手もあります。さすがに専用サービスだけあってユーザー認証やスパム対策、リッチテキストエディタなど、多彩な機能があるようです。今回はいくつかの理由で採用を見送ったのですが、もしニーズにマッチするものがあれば、これらを利用するのも手だと思います。

Delicious でカテゴリ管理

これは今回から始めたものではないのですが、記事のカテゴリ管理には Delicious を使っています。皆さんご存知かと思いますが、ソーシャルブックマークサービスの元祖ですね。 Web API がとても充実しているので、こういった目的には最適です。

具体的には、毎回記事を投稿した後にセルクマして、 Ruby スクリプトでカテゴリページの HTML や関連記事を表示するための JSON ファイルなどを生成し、 XREA にアップロードしています。

こういった機能は CMS に実装するのが本筋でしょうが、使いやすいインターフェースの実装はかなりの手間がかかります。その点、 Delicious のような既存サービスを利用すれば、少しのスクリプトを組むだけで必要な機能を簡単に実現できてしまいます。米 Yahoo! はほかにも多数の便利な API を公開しているので、投資家や MS の圧力に負けずに、頑張ってほしいと思う今日この頃です。

最新記事の表示は Google AJAX Feed API で

こちらはまあ、普通の使い方だと思いますが、サイドバーにある最新記事の表示は ATOM フィードを RESTful 形式の Google AJAX Feed API で読み込むことで実現しています。この Google AJAX Feed API は JavaScript のみでクロスドメインのフィード読み込みを実現する API で、 Yahoo! Pipes と並んで、 JavaScript でのフィード処理には便利な API です。

もっとも、今回はフィードが同じドメインにあるので、わざわざ API を経由せずとも、 XMLHttpRequest で直接読み込むことも可能です。ただ、 JSON 形式なので解析が簡単なこと、 Google キャッシュでも正常に表示できることなどは、 Feed API を使う理由になるでしょう。逆に欠点としては、更新の反映が若干遅れるようです。おそらく Google がフィードの内容をキャッシュしているのでしょう。

その他、利用しているサービス

上記の他にも、いくつかのサービスを利用しています。参考までに、主なものを簡単にご紹介しておきます。

Google Custom Search Engine
ページ右上の検索窓は、 Google Custom Search Engine で実現しています。ポップアップで検索結果を表示しているのも、 Google Custom Search Engine の標準機能 です。
Google Code Project Hosting
自作したツール・ライブラリやサンプルコードの公開に使っています。 Subversion によるバージョン管理や Wiki 、 Issue Tracker などの機能もあるので、ソースコードを手軽に公開するのには最適です。
codeなにがし
こちらもサンプルコードの公開に使っています。ブラウザのみで投稿できるので Google Code Project Hosting よりも気軽に使えるのが利点です。最近はシンプルなソースの掲載にはだいたいこちらを利用していますね。
Flickr
記事に掲載する画像は全て Flickr で管理います。タグで管理できるので、以前掲載した画像を探すときに便利なもので。ただし実際に表示しているのは、以前公開した CachedProxy で XREA のサーバーにコピーしたものです。

今後も可能な限りいろいろな Web サービスを試していきたいと思っています。とくに注目しているのは Google Friend Connect で、面白い活用方法をいろいろと思案しています。いくつかアイディアはあるので、あとは実装する時間があれば。うむむ。

今後の課題

まずなんといっても、トラックバックの受け付けを復活させなければいけませんね。トラックバックの表示自体はコメントと同じ方法で実現しているのですが、 ping を受信するためには、さすがに簡単に CGI を組む必要があるかなと思っています。 HTTP でポストされたデータを加工して別のサーバーに再びポストする、みたいな API があればいいのですが、見当たりません。無念。

あとは、やはり CMS の強化です。 WYSIWYG エディタとして Zoho Writer の Remote API を利用するとか、 Web API の利用をさらに押し進めたいですね。また、現在は機能の実装を優先して見た目などは本当にボロボロなので、そのあたりも整理していかないといけません。いつの日か、正式に公開できる日を目指して頑張っていこうと思っています。

以上、本日は新しい WebOS Goodies を構成している仕組みをご紹介しました。今回実際にやってみて、静的 HTML でも、各種 Web API を活用することでかなりのことができるという感触を得ました。ブログ以外のサイトでも応用できると思いますので、サーバーサイドに頼る前に検討してみるのも良いのではないでしょうか。

それでは、新しくなった WebOS Goodies を今後ともよろしくお願いします!

関連記事

この記事にコメントする

Recommendations
Books
「Closure Library」の入門書です。
詳しくはこちらの記事をどうぞ!
Categories
Recent Articles