blog@ongmap.com

普段は三鷹の方で平日の日中に開催されているプログラマーズカフェですが、昨晩プログラマーズカフェナイト 2ndが新宿で開催されたので初参加してきました。

3分でできるLT（Lightning Talk）を募集されていたので、この前作ったAnywhereのサンプルアプリの紹介をしようとLTに参加させてもらったのですが 、相変わらずのプレゼン下手でchirp_preview版のAnywhere APIのすごさが伝わらなかったと思うので簡単にまとめておきたいと思います。

Anywhere APIの進化の方向性がみえる

大きくニュースにも取り上げられたAnywhere APIですが、現在のバージョン1.0では単に「Follow Me」ボタン（このブログの右上にもあります）や、「Connect to Twitter」ボタン、あとは「投稿フィールド」が簡単に作れるAPIくらいしか提供されていません。

ただ、Chirpカンファレンスで公開されたプレビュー版を見ると、もっとたくさんのAPIが実は開発中だということが分かります。

JavaScriptのみでTwitter Clientが作れてしまうこと

これまでもTwitterのAPIの多くはJSONPをサポートしていたので、JavaScriptだけでもかなりのことができたのですが、Anywhere APIを使えば、もっと簡単に同じことができるようになっています。

さらにJSONPではさすがにできなかった、認証や投稿といった操作も同じAPIから行えるので、JavaScriptだけで全ての機能が揃ったTwitterクライアントアプリが作れてしまうということになります。

Google Maps API的な存在に？

この前行ったWhere 2.0カンファレンスでGoogleの人が、世界で一番使われているオンラインの地図サービスはGoogle MapsではなくてGoogle Maps APIだ、と言ってました。

それほど多くのサイトがGoogle Maps APIを使って自分のサイトに地図を埋め込んでるわけですが、これと同じことがTwitterでも起きるのではないのかなとAnywhere APIを触ってみて思いました。

世の中数えきれないほどのWeb APIが公開されていますが、Google Maps APIのような本格的なJavaScript APIは実はそれほどない気がします。今回のAnywhere APIに触発されて、JavaScriptで利用できるAPIが増えていったら嬉しいですね。

・・・

ということを伝えたかったのですが、伝えきれなかったのでまとめてみました。まとまったのか？

Twitter @Anywhere JS-API

Twitter @Anywhere APIの1.0ではなくてPreview版の方のAPIですが、面白うそうだったのでExt JSと組み合わせた簡単なアプリを作ってみました。

Ext JS x Twitter Anywhere API Sample Application （Firefoxでしか動きません。IEではアクセスしないでください[後述]アクセスできないようにしました）

最初は何も表示されないので、右上に表示される「Connect with Twitter」をクリックしてログインしてください（ログイン処理は全てTwitter側で行われます）ログイン後、左側にタイムラインやリストなどの一覧（ツリー）が表示され、右側にはタイムラインが表示されるはずです。

Twitterアプリケーションとしては貧相なものですが、何が凄いかというと、JavaScriptのみで動いているということです。サーバー側コードはありません。 

機能は現在2つのみ：

• ツイートはできます（Reply、ReTweet、DirectMessageはまだできません）
• 自分のタイムライン、自分宛のDM、自分のリスト、Following/Followerの一覧（一部）を表示できます

注意点としては：

• 現在、Firefoxでしか動作しません（Safari、Chrome、IE7で試してみましたが全部だめでした。IE7はタブが無数に開いて強制終了しないといけない状態になるので、くれぐれも開かないようにしてくださいFireFox以外ではアクセスできないようにしました）
• ツリーの中の「Mentions」と「Searches」は機能していません（APIのCurrentUser.mentions、SavedSearch.results
• データ取得および表示に若干時間がかかるときがあります

使ったAPI  @Anywhere JavaScript API (v=chirp_preview）：

• まだ、かなりバグがあります。動かないAPIもいくつかあります。
• ほとんど（というか全部？）のAPIが非同期で動作
• 挙動不明なAPIも多数
• Firefoxでしか動きませんでした
• アプリケーションのソースは圧縮してないので、適当に見てください

あと、投稿機能を実装しようとすると「Read-Onlyアプリケーションからは投稿できないよ」的なエラーがでるので、その対処方法は下記のブログを参照してください。

Twitterの機能をJSで簡単に導入できる「@Anywhere」の使い方メモ

まだまだ機能も少なく不安定なAnywhere APIですが、今後急速に開発が進んでいき近い将来Google Maps APIに匹敵する人気のWeb APIに育って行くのではないかと感じました。

anywhere Ext JS JavaScript twitter

「iPhone用天気予報を練習で作ってみた」に、

「自分の地方を選んだ状態をブックマークorアイコン化できないっ！」

というコメントを頂きましたので、対応してみました。



あまりスマートではないですが、上の画像のように、各画面の一番下に「ブックマーク用URL」というリンクを設けました。これをクリックすると全く同じ画面が表示されるのですが、そのページのURLをブックマークなりホーム画面に登録すれば、次回からは直接そのページに行くことができます。

いろいろと試行錯誤したのですが、最終的には、index.phpに該当するページのデータをひっぱるためのパラメーターを渡して、それをiui.jsの中にある「showPageByHref」というメソッドに渡すだけで済みました↓

window.onload = function(){
  var url = [index.phpに渡したパラメーターからURLを組成];
  iui.showPageByHref(url, null, null, null, function(){});
};

ちなみにホーム画面用のアイコンも追加してみました（下は今の僕のホーム画面です。Googleだらけｗ）

iPhone用天気予報

以下、読んでもらいたいので、7nsの方からコピペ：

先週金曜日のことになってしまいますが、IBMのdeveloperWorksに私の方で翻訳と解説を書かせてもらったExt JSに関する記事が掲載されました：

翻訳記事↓

Ext JS で作る AJAX アプリケーション〜RIA 開発のための JavaScript フレームワーク

解説記事↓

Ext JS 入門者の最初の壁〜Ext.grid.GridPanel へのデータの読み込み

短い記事ですが、Ext JS始めた人がつまづきがちなGridPanelについて、ちょっと解説してみました。時間のあるときにでもぜひ。

昨日の天気予報に続いて、iPhone用のWebアプリを作ってみました：

iPhoneで百人一首

機能が今のところ

• 一覧表示
• クイズ

の2つだけです。

「一覧表示」は、単に1番目から100番目を順番に見ていくだけです（最後にカルタの写真も表示されます。元ネタはここ）

「クイズ」は、2種類あって、上の句にマッチする下の句を4つの選択肢から選ぶタイプと、5・7・5・7・7＋作者の6つのパーツを繋いでいくタイプがあります。

これ作った人が、結構前から「百人一首覚えるアプリ作ろうよ」と言っていたので、勢いで作ってみました。昨日の天気予報のコードをベースに作ったので、コーディングにかかった時間は1時間未満。

データ収集と整形に2時間くらいかかりました。

このタイプのアプリであれば、SDK使わないでもiUI.js使えば、数十分〜数時間程度でサクッとできそうなので、他にも色々と考えてみようと思います。

とりあえず、練習でiPhone用の天気予報Webアプリを作ってみました：

iPhone用天気予報

利用したのは、

• iUI.js
• livedoor 天気情報

iPod Touchのときから天気予報アプリがアメリカン過ぎる（特にアイコン）のが気に入らなかったので、真っ先に作ってみました。

これ、一回作ってしまったら、いろいろと簡単に応用が利きそうです。

さて、何作ろう。。。

Google Maps Apiのフォーラムで紹介されていた

Dual Maps

Google MapsのStreetViewの横に、Virtual Earthの鳥瞰図（Bird’s view）を並べて表示しているのをみて、早速真似しようと思ったのですが、なかなかうまく行きません。

あ、普通にやれば、普通にできるのですが、メインの機能ではないのでVirtual Earthのライブラリの読み込みを動的にやろうとしたところ、これがなぜかエラーが発生してしまいます。

function loadVE(opt){
  if(typeof VEMap == 'undefined'){
    var ve = document.createElement("script");
    ve.src = 'http://dev.virtualearth.net/...（以下略）';
    ve.type= 'text/javascript';
    ve.id = 'vesrc';
    Ext.getBody().appendChild(ve);

    var to = setInterval(function(){
      if(typeof VEMap != 'undefined'){
        clearInterval(to);
        opt.callback.call(opt.scope,opt.args);
      }
    },500);
  }else{
    opt.callback.call(opt.scope,opt.args);
  }
}

こんな感じでやっているのですが、SafariとIEについてはほぼ問題なく動いてくれるのに、なぜかFireFoxだと動かない。

で、エラーを追っていくと、VirtualEarthの内部で、地図を貼り付けるDIVに対して「attacheEvent」を呼ぼうとしていてエラーになっている。

FireFoxだと「addEventListener」のはずなんだけど、VirtualEarthの中でうまく認識してくれていないのかと思って、適当に

mapDiv.attachEvent = function(e,f){mapDiv.addEventListener(e,f,false); }

とか適当にやると、最初に出ていたエラーは消えたものの、また別の場所で同じエラーが発生 orz

う〜ん、なんでだろう。動的にローディングするとブラウザを正しく認識してくれないのだろうか？それともやり方が間違ってる？

Adobe AIR for JavaScript Developers Pocketguide

ダウンロード版は無料だそうです（Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License）

JavaScript の圧縮と難読化の定番ツールといえば、「packer」ということを聞いて、試してみました（実は以前にも試したことがあったのですが、なかなかエラーを取り除くことができずギブアップしたことがあります）

今回はちゃんとHelpページを読んで、Firebugでエラー箇所を追いかけながらやってみたところ、なんとか動かすことができたので、そのメモ：

「Packerを使うときは、セミコロン(;）に注意」

ヘルプページにも書いてありますが、functionの定義の終わりにセミコロンを入れないとエラーになってしまいます。あと、functionと同じく、オブジェクトリテラルも「{…};」みたいな感じでセミコロンを入れないとエラー。

要はオブジェクト定義の最後にはセミコロン、ということです。実際のところ、FireFoxもIEもオブジェクト定義の最後にセミコロンが無くても普通に動いてしまうので、今回圧縮したコードにはこの「セミコロン抜け」が結構な数見つかりました・・・。

packerにはオプションが二つあって、

• Base62 encode
• Shrink variables

この二つを使わないと、単純に空白と改行を取り除いてくれるだけなので、それほど圧縮も難読化もできません（今回のコードで約25%の圧縮）。

「Base62 encode」を使うといい感じに圧縮＆難読化されます（約50%の圧縮）

「Shrink variables」を使うとさらに数パーセント圧縮されるのですが、今回のコードではなぜか、ここでエラーがでてしまい、デバッグのやり方も分からず今回はこのオプションは使わずに「Base62 encode」だけを利用してみました。

今日の午前中はまったのでメモ。

Apacheの設定とかほとんどやったことないのですが、ちょっとやる必要が生じたので。

Ext JSを利用する上で、その巨大なファイル（510k！）が帯域をできるだけ喰わないように、あらかじめgzipしておく必要があります（mod_deflate/mod_gzip等で動的にやる方法もありますが、借りてるレンタルサーバーでは組み込まれてなさそうだし、毎回圧縮のためにCPU負荷かけるのもあれなので、あらかじめ圧縮してます）。

と書いてて思い出したのが、以前書いたこれとこれ（スクリプト側についてやることはこの辺を参照ください）

・・・

で、今回はサーバーそのものを設定しないといけないので、ググったところ

• jgz と .js.gz と Apache の設定
• prototype.jsを10KBにする方法
• Safari と gzip 圧縮 JavaScript
• Apache のコンテントネゴシエーションで圧縮転送
• Content Negotiation でリクエストに応じて gzip 圧縮ファイルを返す
• ApacheのMultiViewsで拡張子が有るリクエストでもgzが働くようにする

と色々出てきたので、参考にしながら分かったことをまとめると（Apacheのバージョンは2.2.6です）：

• mod_negotiation （MultiViews用）
• mod_rewrite

以上のモジュールが必要（mod_rewriteだけでもいいかもしれませんが、、、）

最初にやった設定がMultiViews。httpd.confに次の一行を加えるだけ：

Options MultiViews

これが設定されていると、例えば：

<script type="text/javascript" src="./ext-2.0.1/ext-all.js"></script>

↓

<script type="text/javascript" src="./ext-2.0.1/ext-all"></script>

のようにファイルの拡張子が省略されていても、Apacheがそのディレクトリの中から適当なファイルを探し出して返してくれます。 これを設定することで、同じディレクトリに「ext-all.js」と「ext-all.js.gz」を配置しておいて、gzipをサポートするブラウザにはgzipファイルを、それ以外のブラウザには通常のjsファイルを渡すような処理が可能になるわけです。

次にやったのが、Rewriteの設定。httpd.confに以下の行を追加：

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !.gz$
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

何をやっているのかよく理解できていないのですが、多分、ブラウザがgzipをサポートしていて、同時に要求されたファイル名＋「.gz」というファイルが存在する場合には、そのファイルを返す、ということだと思います。

本当はこれでうまくいくはずだったのですが、なぜかうまくいかない。

しょうがないので、Live HTTP headers でサーバーとのやりとりを追ったところ、どうもgzipファイルは送られてきているものの、「Content-Type : application/x-gzip」となってしまっていてJavaScriptファイルとして認識されていないらしい（これが判明するまでに2時間・・・）

で、もう一度httpd.confを眺めてみると、

#AddEncoding x-gzip .gz .tgz
AddType application/x-gzip .gz .tgz

こうなっている箇所を発見。試しにコメントアウトを逆にして

AddEncoding x-gzip .gz .tgz
#AddType application/x-gzip .gz .tgz

試してみたら、動いた！これで、「Content-Type : application/javascript」になって、「Content-Encoding : gzip」という行も追加されていた。めでたし、めでたし。

・・・

P.S.

実は最後の設定をやってもJavaScriptファイルがうまく渡されてなかった。もう一度、ヘッダー情報を追いかけてみたら、受け渡しされているファイルが「304 Not Modified」となっているので、試しにファイルをタッチしてみたら、うまく動きました。

教訓：Webサーバーの設定を変えても何も変わらなければ、ファイルの情報も更新しよう！