2007年3月アーカイブ
昨日作った 自転車の軌跡 Google Earth 版ですが、すこしフォーマットを変えてみました。
諸般の事情で URL は http://tsuyuguchi.com/masaaki/gps/getdata.cgi?m=kmlall に変更しましたが、MIME type は application/vnd.google-earth.kml+xml を返すように修正し、ブラウザでアクセスすると即 Google Earth が起動するようにしてみました。最初に Google Map 版自転車の軌跡を作って、自分の通ったパスが地図の上で見られるようになったときは、そのわかりやすさにビックリしましたが、Google Earth で見ると勝手に軌跡の場所へグイグィ~と画面が移動していく様子を見ているとさらに感動です。
で、これを作っていて思ったことですが、KML の説明のページにチュートリアルがついているのが、自分の開発にとって大きなプラスだったように思います。これがもし、チュートリアルがなくてレファレンスだけだとしたら、仕事から帰ってきて寝るまでの短時間では絶対にできないです。チュートリアルをざっとみてコピペして、必要のあるところとか気になる箇所をレファレンスで確認してカスタマイズするという流れ、これが重要ですね。つまり、新しいものにチャレンジしようとして技術書を買うときは「なんとかレファレンス」のような網羅的な説明があるものを買うよりも、まずは CookBook や 「すぐできるなんとか」という類のものを買った方がいいのかなと、そんなことを思いました。
時間があったらスタートからゴールまでパスを再生する機能にも挑戦してみたいと思います。
自転車の軌跡を KML に対応させました。 KML は
http://tsuyuguchi.com/masaaki/gps/getdata.cgi?m=kmlall
から取得できます。
この KML を Google Earth に読み込むことで Google Earth でも、私の自転車の軌跡をごらんいただくことができるようになりました。Google Earth のメニューから「追加」→「ネットワークリンク」とたどって開いたダイアログの「リンク」に上記 URL を入力を入力することで KML を読み込むことができます。
参考: KML について
なんだかバッドノウハウのにおいがプンプンするエントリーです。
私のサイトを作るためのローカル開発環境は Windows XP に cygwin を入れたものを使っていますが、 perl は C:\perl にインストールした activeperl を使っています。ですので、perl スクリプトの shebang は #!/perl/bin/perl となります。一方、サーバでは #!/usr/bin/perl ですので、 perl で作った CGI スクリプトをサーバにアップする場合はこれを書き換える必要があるのですが、これが実に面倒だし、よく忘れてしまいいます。
ということで次の Makefile を作りました。
.SUFFIXES: .cgi .release .debug SED=/usr/bin/sed CP=/usr/bin/cp RM=/usr/bin/rm PSRCS=getdata.cgi PTMPS=$(PSRCS:.cgi=.debug) PRELS=$(PSRCS:.cgi=.release) .cgi.debug: $(SED) '1s/usr\/bin/perl\/bin/' < $< > $@ ; \ $(CP) -p $@ $< .cgi.release: $(SED) '1s/perl\/bin/usr\/bin/' < $< > $@ ; \ $(CP) -p $@ $< all: release debug: $(PTMPS) release: $(PRELS) clean: -$(RM) $(PTMPS) $(PRELS)
で、PSRCS にファイル名を設定してこれで make すると #!/usr/bin/perl になり、make debug すると #!/perl/bin/perl になります。以上。
セレクトボックスに表示するテキストが数字だけという素っ気いないものでしたので、日付の形になるようにしてみました。
日本語が通るようになりました。
%uXXXX の UTF-16 escape の件は ActionScript 側で UTF-8 に変換してからサーバにリクエストすることで解決できました。具体的にはリクエストパラメータ data を作成するときに
data += id + "=" + Utf16escapeToUtf8escape( escape(text) ) + "&";
としています。ビルトイン関数の escape で「あ」が UTF-16 escape 文字列「%u3041」になるので、それをさらに自作の Utf16escapeToUtf8escape で UTF-8 の escape 文字列「%E3%81%82」に変換するということですね。変換ルーチンは「UCS-2とUTF-8」 の「UCSからUTF-8への変換法」と「高度な JavaScript 技集」の utf.js を参考にしました。サロゲートペアには対応していません。
解決方法だけ書いてみるとあっさりしすぎているけど、調べていく上で UCS と UTF の関係が勉強になりました。flex2 アプリとしてもこれで一応完成の形にはなりましたかね。
アプリはこちら: http://tsuyuguchi.com/masaaki/flex2/QRcode/ ソースは Flash アプリ上で右クリック→「View Source」で mxml を見ることができるので、そこから Script の source であるところの QRcode.as を辿って見ることができます。
テキストボックスへ入力した後そのまま Enter を押すと次のテキストボックスへフォーカスを移すようにしてみました。あとは ActionScript と JavaScript の連携する方法を調べて、同じページ内に画像を表示させるようにしてみました。こういうのができると Flash っぽいって感じがします。
あと、困っていることが一つあって ActionScript で パラメータを escape すると日本語は %uXXXX の UTF-16 escape の形に変換されるのだけど、それをうまいこと decode する方法が、 Jcode.pm だと UTF-16 扱えないし、かといってサーバにはいっている perl は 5.0 で Unicode がばりばり使えるわけでなし。
なので、今は日本語が通りません。正確に言うと日本語を入力しても画像は作られるのだけど、うまく読み取ってくれません。
フォームに入力された値を検証するのに Validator というコンポーネントを使ってみた。半角のみ受け入れるフォームには正規表現を使って検証する RegExpValidator というコンポーネントを、誕生日には DateValidator を用いた。電話番号にも PhoneNumberValidator というバリデータコンポーネントが用意されているのだけど、この仕様が、”0-9,#,*" が OK という DoCoMo の QRコード仕様にあわなかったので、カスタムバリデータを作ってみた。
カスタムバリデータを作るにあたってカスタムコンポーネントのコンパイルの仕方も調べる必要があった。コンポーネントのコンパイラは compc を使う。そして、コンパイル用の xml ファイルを用意して、
compc -load-config+=myValidators-config.xml
とすれば OK。compc は load-config を指定するとシステムデフォルトのコンフィグファイルが読み込まれないので、設定を上書きするという意味で += でファイルを指定する必要がある。これにハマってしまった。そして mxmlc で swc ファイルをリンクするためには、compc で作成したカスタムコンポーネントの swc ファイルのあるパスを library-path で指定すればリンクしてくれます。mxmlc の config ファイルはファイル名を {mxml ファイル名}-config.xml とすれば、コマンドライン引数で指定しなくても mxmlc が勝手に読み込んでくれる。
compc を使わない、つまりカスタムコンポーネントを個別にコンパイルせずに mxmlc で一発コンパイルとリンクをする場合は mxmlc のコンフィグで必要なソースファイルのあるディレクトリを source-path で指定すれば、OK。
参考までに compc の confi ファイル(myValidators-config.xml ) と mxmlc の config ファイル(QRcode-config.xml) へリンクを張っておく。
「Flex アプリケーションの構築と展開」を読んでいると mxmlc 自体にインクリメンタルコンパイルという必要なファイルだけコンパイルするという Make みたいなことをやって機能があるようで、これを使えば開発者が意図的に分割コンパイルする必要はないみたいだ。でもカ、スタムコンポーネントを別のアプリケーションで使い回す場合やソースを公開せずに swc だけを誰かに提供する場合なんかは compc で swc を作る意味があるのかも。
今回は、もう Makefile も書いてしまったので、今後不都合がでないかぎりは compc + mxmlc の 2 段構えでいく。
さて、暖かくなってきたので週末サイクリングも先週あたりから始動しています。今日は桜を探しに皇居の外周をグルッとまわってきました。例によって GPS ロガーで記録しています。リンク先を見ていただければ分かりますが、靖国通り→千鳥ヶ淵→三宅坂→日比谷通り→永代通り→新大橋通りというコースの全長約 20km 。
春がすぐそこまできているとはいえ、気温はまだ少し肌寒くウィンドブレーカを着て走っています。それでも、走っているとすぐに体は温まってくるのですが、止まると今度はすぐに冷えてしまうので難しいところです、早く暖かくなってほしいものです。
そして、肝心の桜ですが、千鳥ヶ淵、三宅坂あたりをねらっていったのですが、まだつぼみがふくらむ程度でした。でも、運良く一本だけ一分咲きのがあったので写真を撮ってきました。少し高いところでしたので、手を伸ばして撮ったのですが、咲いているのがギリギリ分かる程度であまりきれいにとれていませんね…。でも、咲いているのが見つかってよかったです。来週あたりは弁当をリュックにいれて出かける感じになってますかね。
とりあえず、これまでいろんなところで見聞きした flex2 に対する予備知識を自分のものにするためにQRCode 作成 CGI のフロントエンドを flex2 アプリ版にしてみようと思い立ち、ありとあらゆるドキュメントを見ながら、やっととりあえずの UI と空のイベントハンドラができた。ふぅ。こちら:
http://tsuyuguchi.com/masaaki/flex2/QRcode/
構成は mxml と action script なのだが、action script はボタンのイベントハンドラだけで後はすべて MXML だ。右クリックで View Source を実行するとその MXML を見られるようにしてみたので、興味のある人はどうぞ。
ここまでのポイントはステートとデータバインディングかな。特にステートは作りながら画面遷移の設計が MXML にスムーズに対応するような気がした。データバインディングはコンボボックスに使ってみた。動的なバインディングをしてはいないので、今のところ HTML の SelectBox と何ら変わらないのだが…。 UI コンポーネントの配置は java.awt や Perl/Tk が XML になったという感じで、レファレンスがあれば後は特に難しいと言うことはなかった。
Action Script はコンパイルオプションに -strict=true を指定して片付けを意識して書いてみた。たった 10 行なのに JavaScript のつもりで書いたら警告がそれなりに出てビックリした。僕は C 上がりなので片付けは特に自分にとって問題はないが、ECMAScript の型指定、特に関数のインタフェース定義にやや違和感を覚えた。もっとも慣れの問題でしかないが。ActionScript はこの先 Flash API を使うようになったらそこでまた止まって休憩することになりそうな予感だ。
flex2 builder はインストールしていないので、全部エディタで書いた。開始タグを書いたからといって閉じタグが自動補完されることもなく完全に from full scratch。その昔、ウェブ界でテキスト系なるものが流行ったときに、サイトを作るのに HTML手書き派とビルダー派に分かれていたことを思い出して、なんだかちょっと懐かしくなった。













最近のコメント