良いもの。悪いもの。

昨年の8月に書いた記事、「 Google App Engine: Gearsで位置情報を取得してストリートビューで表示させる 」で、無線LANから取得した現在位置を Googleマップ と ストリートビュー で表示するウェブアプリを作ったが、今回、それをブログなどにもそのまま貼り付けられるようにしてみた。もともと、JavaScriptを使ったアプリなのでそれほど変更するところもなかったのだが、無用な部分を削除し、きちんと画面にエラーメッセージを表示するようにした。動作させるためには Gears をインストールしている必要がある。 無線LANから現在位置情報を取り出すためにGearsの Geolocation API を使った。位置情報を取り出したらあとは Google Maps API でそれをGoogleマップとストリートビューで表示させるだけだ。因みに、今年の7月からGoogleマップの画面で左上にある四角いボタンを押すと 現在位置を表示できる ようになっている。 今回のアプリでは、現在位置を示すマーカーに自作の扇形アイコンを使った。ストリートビューの向きと連動している。ペグマン(人型アイコン)でもよかったのだろうけど、個人的には向いている方向が分かりづらいと思う。 以下にソースファイルを示す。ページを読み込んだ際にGearsにより位置情報を取得している。 <script src="http://maps.google.com/maps?file=api&v=2.x&key= Google Maps API Key " type="text/javascript"></script> <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script> <script type="text/javascript"> var map; var pano; var overlayInstance = null; var marker;...

JavaScriptを使って素数を計算して、それを動的に表示してみた。今更という感じもするけど、10行そこそこでこのような動的な表示ができるというのは、とても便利だと思う。とは言え、普段はあまりJavaScriptを使ったHTMLは書いてないな。 までの素数 テキストボックスに数字を入力すると、その数までの素数を計算して表示する。最大入力桁を5桁にしたので、99,999までの素数を求めることができる。括弧内の数値は求めた素数の数を示す。 複数のブラウザ(Google Chrome, Firefox, IE8, Safari4)で確認してみたけど、最近はどのブラウザもJavaScriptが速い。今後、ますますJavaScript、特にAjaxなどは要の技術になっていくのだろうな。 以下にソースを示す。 <script type="text/javascript"><!-- function calcPrimes(data) { var primes = []; if (data.value >= 2) primes.push(2); for (i = 3; i <= data.value; i += 2) { for (j = 0; i > primes[j] * primes[j] && i % primes[j] != 0; j++); if (i < primes[j] * primes[j]) primes.push(i); } document.getElementById("primes").innerHTML = primes.length ? " (" + primes.length + "): " + primes.join(", ") : ""; } // --></script> <form><input type="text" size="5" maxlength="5" onk...

最近、mixiアプリの正式版がリリースされたらしい。以前、オープンベータが始まったときにちょっと興味を抱いたのだが、そのまま忘れてしまっていた。しかし、この正式版リリースでまた興味が湧き、Google App Engine (GAE)と絡めてちょっといじってみたので、GAEを利用したmixiアプリの作成方法を説明してみようと思う。 まず、GAEを初めて利用する場合は、 Google App Engine - Google Code でアカウントを取得する。SDK一式を落としてきて使えるようにしておくこと。次に、mixiアプリを申請できるように、 デベロッパー登録 をしておこう。 さて、ここから本格的にmixiアプリを作成するわけだが、誰でも(自分を含めて)簡単に理解できるように「 はじめてのmixiアプリ 」の「Hello, world!」アプリケーションを元に作成することにした。 ところで、GAEを単なるファイル置き場として使うだけであれば、次のように設定すればいい。まず、作業ディレクトリにgadgetsディレクトリを作成して、そこにGadget XMLファイル(ここではhello.xmlとする)を置き、app.yamlのhandlersに以下の設定を追加する。 - url: /(.*\.xml) static_files: gadgets/\1 upload: gadgets/(.*\.xml) これを、そのまま以下のコマンドでアップロードする。そして、mixiアプリ登録で、Gadget XMLファイルのURLを、 http://アプリケーション名.appspot.com/hello.xml のように指定するだけだ。 appcfg.py update アプリケーション名 しかし、ファイル置き場にするだけならば、GAEである必要はないわけで、ここではちゃんとGAEを利用した使い方を説明する。 Google App Engineを利用したmixiアプリ「Hello, world!」 GAEを利用するということで、「Hello, world!」アプリケーションの表示を「Hello, ユーザ名!」から、時間に応じた挨拶に変更してみる。朝なら「おはよう, ユーザ名!」、昼なら「こんにちは, ユーザ名!」、夜なら「こんばんは, ユ...

前回 に引き続き、今回もCookie関連の記事だ。 ITmedia の ユーザーが制御できない「秘密cookie」、半数強のサイトが利用 という記事で、「ユーザーが削除したHTTP cookieを、Flash cookieを使って復活させているケース」があると書かれているが、技術的には簡単だ。 まず、HTMLのhead内にJavaScriptでdocument.cookieを設定・取得する関数を定義する。Flash (ActionScript 3.0)側では、flash.external.ExternalInterfaceを利用してHTTP Cookieを取得する。もし、取得できなければFlash Cookie (Local Shared Object, LSO)の取得を試みる。両方とも取得できない場合は、初めての利用と判断される。どちらか一方を取得できたのなら、もう一方に対して取得した値を渡す。これにより、どちらかが削除されたとしても再読み込みした際に、HTTP CookieとFlash Cookieとで同期され、削除されたデータは復元する。 異なるCookieの同期はデータの永続性を強固にする利点があるが、削除したつもりのデータが実は消えていないということも起こり得るわけで、セキュリティの面からするとあまり良くないかもしれない。これを防ぐためには、Cookieの制御に関する正しい知識を持つしかないだろう。 前回の記事 でも書いたが、Flash Cookieについては グローバルストレージ設定パネル の「今後表示しない」を選択することで禁止することができる。既に書き込まれているFlash Cookieは、 Webサイトの記憶領域設定パネル から、削除や禁止、ディスク容量の調整などが行える。また、HTTP Cookieについてはブラウザの設定で削除できる。 最後に、「 ActionScript 3.0でFlash Cookieを利用する 」で作成したプログラムを、HTTP CookieとFlash Cookieとで同期させるように変更してみたので、そのソースコードを以下に示しておく。赤字は前回からの修正箇所となる(クラス名などは除く)。使用する際は、HTMLのhead内に、 <script language="JavaScript...

Googleデスクトップガジェット(Google Desktop Gadgets) を作るのは簡単だ。ここではHello, world!と表示させ、表示された文字をクリックするとJavaScriptによりダイアログが出てくるガジェットを作成する。さらに、国際化を施して、英語環境では"Hello, world!"、日本語環境では「こんにちは、世界!」と表示させることにする。 これで、ガジェットの作成、JavaScriptの記述、国際化、それぞれの基本を押さえることができる。またこれはJavaScriptを使ったミニアプリケーションでもあり、JavaScript学習者にとっては手軽に扱えるアプリケーション作成ツールにもなるだろう。 まずは準備 当たり前のことだが、最初に Googleデスクトップ をインストールしておく。 次に、 GoogleデスクトップガジェットSDK をダウンロードし、適当なディレクトリに展開する。以前は日本語版があったようだが、現在は英語版しかないようだ。しかし使い方が簡単なので、それでもまったく問題ない。 早速、ガジェットを作ってみる 展開したディレクトリの api/tools/designer_en.exe を実行し、Google Desktop Gadget Designerを起動する。メニューの File から New Gadget... を選択する。 プロジェクト名として適当な名前をつける(ここでは HelloWorld とした)。 プロジェクトを作るとテンプレートとして四角い領域が表示されるので、Gadget Designerの"Label"アイコンを選択し、その領域の中央をクリックしラベルを付ける。付けたラベルをクリックすると右上のペインにラベルのプロパティが表示されるので、プロパティ内のinnerNameの値を &HELLO_WORLD; とする。 左のビューペインでen/フォルダを開くとstrings.xmlが表示されるので、それをダブルクリックする。そうするとstrings.xmlの中身が表示されるので、<strings></strings>内の適当な場所に、 <HELLO_WORLD>Hello,...

Googleからウェブブラウザ「 Google Chrome 」がリリースされた。まだベータ版だが、高速な起動は特筆に値する。作業効率を著しく下げる起動の遅いPC、OS、アプリケーションには個人的に我慢がならないので、それだけでGoogle Chromeを採用する価値がある。しかしながら、このブラウザの本質は独自開発の高速なJavaScriptエンジン" V8 "にある。 しばらく前からIE7の動作の遅さや不安定さが目立つようになってきており、そろそろ他のもっと軽快なブラウザに乗り換えようかと考えていた。動作の遅さの原因ははっきりしている。JavaScriptを多用しているページをタブで複数開いているからである。一昔前、GoogleによりAjaxが世間に知られるようになる以前のこと、JavaScriptはオフにしておくべき項目のトップであった。しかし、Ajaxに代表されるJavaScriptを使ったページの便利さが知られることで、JavaScriptの使用は必須になってしまった。今更、GoogleリーダーやGoogleマップを使うなといわれても困るのだ。 しかし、JavaScriptの有用性が知られれば知られるほど、JavaScriptを多用したページは増え、よりリッチになって行き、ついにはウェブブラウザの許容範囲を超えてしまう。ここ最近では、明らかにJavaScriptの要求に付いていってないのが分かるようになっていた。 このまま行けば、ブラウザ環境はいずれ破綻する、しないとしてもユーザビリティの著しく劣った環境になると思っていた。必要とされているのは、JavaScriptが軽快に動作するシンプルで高速なウェブブラウザなのだ。 そんな中、タイミングよくGoogle Chromeが出てきた。個人的にはあまりGoogleばかりに依存したくはないのだが、自分の琴線に触れるようなサービスが出てくるので仕方がない。まだリリースされたばかりのベータ版で機能不足や不安定さが残っているが、素質は十分だ。 Google Chromeを使うにあたってのメモ: Google Chromeの固定幅フォントのサイズ(13pt)が何故かプロポーショナルフォントのサイズ(16pt)よりも小さく設定されている。そのためサイトによっては固定幅フォントが他...

Gears に ジオロケーション専用のAPI(Geolocation API) がリリースされたのでGoogle App Engineで実装してみた。まず、Geolocation APIで位置情報を取得し、 Google Maps および Google Street View により表示するWebアプリだ。因みに、アプリを実行させるには予めGearsをインストールしておく必要がある。 Geo View コードは基本的には Street Stroll を使っており、初期位置情報をGeolocation APIのgetCurrentPositionメソッドにより取得している。下記に示すコードが主な変更部分になる。 Gearsのコアであるgears_init.jsの読み込み。 <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script> 初期化関数initialize()の前にinitialize_geo()を噛ませ、変数lat, lngにそれぞれ緯度・経度が入るようにしている。 function updatePosition(position) { lat = position.latitude; lng = position.longitude; initialize(); } function initialize_geo() { if (window.google && google.gears) { var geo = google.gears.factory.create("beta.geolocation"); geo.getCurrentPosition(updatePosition, function(positionError) { alert(positionError.message); }); } else { if (confirm("位置情報を取得するためにはGearsが必要です。インストールしますか?")) { ...

前回のエントリ でGoogle Maps APIを試しに動かしたところ問題なく動いたので、ざっと Google Maps APIのリファレンス を読んでみた(因みに日本語版だとストリートビュー関連のAPIがまだ載っていない)。なんとなく全体の構成が分かったところで、デモギャラリーを参考にしながら、ストリートビューを使って自由に散歩するWebアプリ、 Street Stroll を作ってみた。Googleマップ上のマーカーと連動して動くようにしている。また、URLのオプションでマップの大きさを自由に変えられるので環境に合わせて利用して欲しい。要望があれば、写真撮影とその保存・閲覧、位置情報保存・再開、高速移動あたりをデータストアなどを使って実装するかもしれない。 Street Stroll 400×400 (標準) Street Stroll 300×300 Street Stroll 500×500 Street Stroll 500×250 今回もURLのオプションぐらいしかGoogle App Engineの機能を使っていないのでコードは割愛。ブラウザからソースを開けばJavaScript部分は読むことができる。 追記: Google StrollからStreet StrollにWebアプリ名を変更した。