KMLとは、Googleさん主導で考案されて、今や標準規格となった緯度経度なんかの地理情報を表すフォーマットです。Google　Earthなんかも使ってます。

で、XMLHttpRequestでKMLを読み込んで、取得した緯度経度列を画面上にプロットするまでは簡単だったんだけど、Firefox限定でなにかおかしい。や、XMLHｔｔｐRequestって時点でFirefoxというか非IEなんだけども。

この時はIEとFirefoxで確認していたんだけど、GoogleEarthで作成したKMLが、IEだと最後まで表示されているのだけど、Firefoxでは途中までしか表示できない。

ちなみに、IE側での描画はVML、FirefoxはCANVASでやっていたんだけど、どうやってもFirefoxが最後まで描画できない。

どうも座標数が増えると描画できないようなので、じゃあいくつまで表示できてるのよ、と数を数えてみると、きっちり４０９６bytes。どう考えてもあやしい。あやしすぎる。

IEでは表示されてるからKMLには問題ない。ということはFirefoxでは4096byteまでしか取得できないとかいうはてなな仕様なのかも、と思ったらどうやらそのとおりらしい。まじすか。

正確には、4096byteを超えると、それ以降は勝手にノードが分割されて格納されるらしい。

つまり取得時にfirstNode.nodeValueに格納すれば本来済むところを、

childNodes[n].nodeValue

n=byte数/4096ということなっているというザマ。超めんどくせーお話。

今までXMLを読んでるときはあんまり４０９６を超えないから気がつかなかったけど、KMLで扱うのは座標列なんで、座標数１００をこえれば、まあだいたい4096byteの上限だ。

手っ取り早く読み込むためにここでnormalizeしてあげる。

xmldoc =xmlhttp.responseXML;
if (typeof(xmldoc.normalize) != “undefined”) {
xmldoc.normalize();
}

こんな感じで書いたら、無事４０９６byte以降も読み込まれました。

ｎormalizeってのは要するに、同階層のノードをひとまとめにするものだけど、本来１ノードであるものをFirefoxが勝手に分割しちゃってるのに、それをこちらで尻拭いのようにnormarizeするのはなんだかなあ、と思わないでもないけど、読めなきゃしかたがない。

なので、一塊がめちゃめちゃ長いXMLやKMLをFirefoxで読み込む時はnormalizeをするってのがお約束。ひとつ学んだね。テストでるよ？でないけど。

ところで未確認なのだけれど、4096byteを超えても、jsonだと問題ないらしい。どんだけやねん。

ちょっと前から「これはいい！」なんて声を聞いていたのでちょっと試してみた。

今日のエントリーはFirefoxユーザー以外は読んでもなんのこっちゃかさっぱりイミフなので、「僕はIEしか使わない！」とか「テキストブラウザこそ至高！」「OPERA!OPERA!」な人たちは帰ってください。嘘です。ちょっといきがってました。すいません。

Ubiqutyの説明はこのあたりのサイト様が詳しいです。

ブラウザの新境地？Ubiquityが変える衝撃のブラウザ体験

FireFoxプラグイン「Ubiquity」に大量のコマンドを登録して日本のサイトを一発で開くすごい方法

タイトルからもうアツすぎてあてられそうです。

ようするに、ブラウザの動きをコマンドラインで制御するランチャーみたいなもので、javascriptを書けば簡単なアプリ的なものもつくれるよー、って事です。

まずはUbiquityをインストールしてみましょう。

Ubiquityのダウンロードはこちら

ものは試しに、GJ!でいただいた拍手数をブラウザからすぐに確認できるようにしてみます。

 WindowsではCtrl＋スペースでコマンド入力のプロンプトが開きますので、command-listと入力して、コマンド入力画面に移ります。

今回はGJ!のcgiとXMLを介して会話することになるので、通信周りの実装とXMLのパーシングをしています。

CmdUtils.CreateCommand({<br /> //gj.phpへのパスを記述<br /> phppass: "http://hoge.com/gj.php",<br /> name: "gjranking",<br /> description: "GJ拍手数表示",<br /> help: "GJ!の拍手数表示を表示します。",<br /> icon: "http://hmlab.info/minor/php/gj/img/gjlogo.gif", takes: {parameter: noun_arb_text},<br /> /*<br /> * プレビュー：拍手数ランキングを表示するよ！<br /> */<br /> preview: function( pblock ) {<br /> var msg = ‘<p><bold>GJ! Ranking</bold></p><table>’;<br /> var $ = jQuery;<br /> var url = this.phppass+"?mode=xml";<br /> $.get(url, function(response) {<br /> var res = $("items", response); res.find(‘item’).each(function(){<br /> var data = $(this);<br /> msg += "<tr><td><a href=’" + data.find(‘ _fcksavedurl=’" + data.find(‘pageurl’).text() +"’>" + data.find(‘pagename’).text() + "</a></td><td>" + data.find(‘count’).text()+"</td></tr>"; });<br /> msg +="</table>"; jQuery(pblock).html(msg) .css("color","#ffffff") .css("background-color","#000000") }, "xml");<br /> },<br /> /*<br /> * 実行：パスワード入力で管理画面に飛ぶよ！<br /> */<br /> execute: function(pass) {<br /> var url = this.phppass+"?mode=show&"+pass.text; Utils.openUrlInBrowser(url);<br /> }<br /> })<br />

ソースはこんな感じです。

使用される場合、phppassの中身を自分のgj.phpのアドレスに書き換えてください。

それ以外はコピペで問題ないです。

コマンド入力から「gjranking」と入力すると（実際はインクリメンタル検索で、入力途中に表示されます）

今までは管理画面からしか確認できなかったのが、どこからでも確認できると言うライフハック。

更に、gjrankingの後に半角スペースを空けて、パスワードを入力してリターンを押せば、そのまま管理画面へとジャンプしますので、GJ!を使ってらっしゃる方でFirefoxユーザー、かつUbiquityユーザーの方は（ニッチ過ぎる！！）お使いいただければ便利かなと思います。

というか、Addonという形なのでブラウザの制限が適用されないので、実装はjavascriptなのに別ドメインのデータにアクセスできるってのは新鮮で良いですね。いろいろ遊べそう。

気になるのはUbiquityのバージョンコード。バージョン０．１ってどんだけー。

Firefox 3 Hacks Mozillaテクノロジ徹底活用テクニック
	江村 秀之 オライリージャパン 2008-08-27 売り上げランキング : 1701 Amazonで詳しく見る by G-Tools

遠く南のほうでは早くも梅雨入りという声も届いてきました。

頬を撫でる夜風もどこか夏の夜を思わせる湿気を帯び始め、月日の移り変わりは実に忙しいものだな、ということを実か完全に忘れておりました。

すっかり公開した気になってたよ。いや、常にサイドバーにくっついてたからさ。はっはっはー

 今サイドバーに付けているランキング表示パーツ、FLASHで作ってるんだけど、じゃあ久しぶりにいじりましょうかってんで探したんだけどどうにも見つからない。

やっとこソースというか、flaファイルを見つけたんでいざ、と勇んでファイルオープンしたのだけど、今度はさっぱり理解ができない。

あれー、コレ作ったの僕だよなあ？僕ではない誰か？小人？なんて首を捻ったけど全然判らない。
あかーん、これもう完全に忘れてる。えーと、ライブラリ？なに？

中を見ると僕のブログのGJ!へのパスが直書きしてあったりする時点でだめっぽさもフルスロットルなんですけど、それをじゃあ外から指定するようにしましょうかっつってもその方法とか、全然わかんないっす。

 
もともとFLASHは門外漢だったので、一度忘れてしまうと完全にお手上げ。あちゃーちゃー。

なので、とりあえJavascriptで表示するスクリプトを書いたので、公開しまっしゅ。

↓こんなかんじ。

スクリプト本体はこちら

 こっちはブログに書く

<script src=”http://hoeghoge.com/gjranking.js” type=”text/javascript”>

<link rel=” stylesheet=”" type=”text/css” href=”http://hoeghoge.com/gjranking.css”>

<div id=”gj_fav_etr”>></div>
<script>showrank()</script>

ダウンロードしたスクリプト中の、URLってところを自分のgj.phpを指定します。
で、あとは、ランキングを貼り付けたい場所に上のコードを書き込めばオッケーです。
あっと、gjranking.jsとgjranking.cssへのパスは自分の環境によって書き換えてください。（このあたりはheaderの中で読んでしまったほうがすっきりするか）

 gjranking.jsのmaxcountの値を変えれば表示する記事数が変わります（デフォルトで10件）
あとはcssをかえれば色なんかはある程度変更できます。

単純にXMLを読んで表示するだけです。変更はご自由に。

最近FLEXに興味があるので、そのうちFlexで作りかえるかもしれません。SDK落としてきたし、ってFlexも広義でいえばFLASHじゃん。フリダシー。

Flex3.0SDKで学ぶActionScript3.0入門―プログラミングの基礎からAIRアプリケーションの作り方まで 佐藤 信正 メディア・テック出版 2008-04 売り上げランキング : 3428 おすすめ平均 Amazonで詳しく見る by G-Tools

mytwitterfeed.js

まず上のファイルを同名で保存します。

んで、

横長表示用CSS

こちらも同じく保存。

必要なファイルは以上。

後はサイト中のつぶやきを表示したい場所に

<link href=”mytwitterfeed160x190.css” type=”text/css” rel=”stylesheet” /><script src=”mytwitterfeed.js” type=”text/javascript”></script></p> <div id=”twitter_wrap”> <div class=”newsslidercontent” id=”newsslider”></div> </div> <script src=”http://twitter.com/statuses/user_timeline/yourname.json?callback=viewTwitter&count=10″ type=”text/javascript”></script>

上記の記述を追加してください。

＊yournameの部分をあなたのtwitterでの名前（僕だとhex68)に変更してください。

MyTwitterFeed

eclipseの重さが我慢ならない。テキステエディタに逆戻りしそうだ。
HEX68 said about 3 hours ago

なんだか憂鬱な日が続きます
HEX68 said 3 days ago

カルアミルクは名曲
HEX68 said 6 days ago

つぶやきを表示するスクリプト書いたけどFirefoxだけうまく動いてる。うむう。
HEX68 said 6 days ago

JQueryをインクルードしたはいいが、まったく使わないことに気がついた。
HEX68 said 6 days ago

widthとheightを素で間違えるとか俺終わってるな
HEX68 said 7 days ago

出先でお腹痛くなると凹むよね
HEX68 said 7 days ago

すると、こんな感じになりますよ。

＊ .cssファイルとmytwitterfeed.jsが別のディレクトリに設置している場合、rel=の部分はcssのurlを正確に記述してください。

CSSを変更することで背景色とか文字色、配置をある程度までは変更できるようになっています。

例えば

縦長表示用CSS

こちらを使うと

こんな感じになります。

CSS自体はすごく単純ですので変更は簡単だと思います。

あと、追加する記述の最終行（あなたのTwitterネームを記述した行）のuser_timelineの部分をfriends_timelineと変更すればタイムラインが表示されます。

例：

<script type=”text/javascript” src=”http://twitter.com/statuses/friends_timeline/hex68.json?callback=viewTwitter&count=10″ ></script>

あと、前回と同じく＠マークがつぶやき中に入っている場合、誰かへのメッセージと判断して表示しないようになっています。

ライブラリとかは一切使ってないので、お好きにいじってください。

あー、やっぱjsonp使えるとお気軽にできていいわー。

twitterコミュニケーション・バイブル―気軽に書ける1行ブログ ブラウザインスタントメッセンジャーケータイ対応 菊地 芳枝

Twitterでしている自分のつぶやきをブログに表示すれば、ブログの更新をさぼって、「最近ブログが更新されないけど・・・あの子になにかあったのかしら」なんてオカンに心配されることも無いよ！

僕の母はブログどころかメールもできないから心配いらないけど。

TwitterのAPIってXMLを返してくるのかと思っていたけど、JSONPでも返してくれるのね。はじめて知ったのよさ（遅い。そしてなぜピノコ）

JSONPってことはあれだ、クロスドメインを気にしなくて良いからjavascriptだけで遊べる。

なので軽く自分のつぶやきを表示できるようにしてみた。

基本的にはTwitter公式のhttp://twitter.com/badgesこのbadgesのソースを変更している。

＠マーク付き発言は特定の相手へのメッセージの意味なので、＠付き発言は表示しないようにしている。

最新から10件を取得して表示している。

プレイボタンを押すとメッセージがニュースティッカーのように流れる。

が、なぜかFirefoxでしか動かない。最新の発言だけは見れるので、まあいいか。

ちなみに、ティッカー表示は

http://www.leigeber.com/2008/05/ultimate-javascript-scroller-and-slider/

こちらのslider.jsを使用した。

ソースを公開しようと思ってたんだけど、IEとかだと美味くないのでとりあえず保留で。

しかしなんでFirefoxだけオッケーなんだ。うーむ。

Twitter!―Twitter APIガイドブック 辻村 浩

これから設置する方はこちらをご覧ください。

今まで設置していた方（ver1.00以降のverをご使用の方）は、とりあえずスクリプトを一式ダウンロードして、その中から

gj.js

img/gjbutton3.gif

img/mark1.gif

img/mark10.gif

img/mark100.gif

を取り出してください。上記５ファイル以外には前回からの変更ありません。

＊gj.js以外は新規ファイルです。

テンプレートの記述変更

設置にあたりテンプレートへの記述が変更されます。

といっても、以前のものの末尾に

<span id="<$MTEntryPermalink$>_gj_mark"></span>(movabletype4の場合）

を追記するだけです。このタグを記述した箇所に拍手数のアイコンが表示されます。

基本的な記述は下記のページ中のブログテンプレートへの記述をご覧ください

movabletype4の場合

wordpressの場合

表示スタイルの選択

gj.js内のgj_stという変数の値を０、または１とすることでお好きな表示スタイルを選ぶことができます。

gj_st=0 → ボタンに拍手数が表示される

gj_st=1 → 拍手数がアイコン表示される

また、設置の際に

･URL         gj.phpへのパス

･img_1      1の位を表すアイコン

･img_10    10の位を表すアイコン

･img_100  100の位を表すアイコン

･buttong   gj_st=1の時に表示するボタングラフィック

上記変数の値を各人の環境に合わせて変更してください。

その後、アップロードをしてください。

以上で変更は終了です。

gj_stの値を変更すればいつでもスタイルの変更は可能です。

ちょっと判りづらい説明になってしまいましたが、ご容赦を。そのうちproductsのgj!のページも書き換えます。

仕事で『任意の単語に関連のある画像』をWebから引っ張ってきて表示する必要があった。

で、とりあえずということでYahooJapanの画像検索APIを調べる。

JSONが見つからない

んん？ YahooJapanのAPIリファレンスをみてみるも、どうもJSONの指定が書いていない。どう見ても、JSONでくださいよ、ってお願いする為のパラメータの記述が見つからない。

本家YAHOOだとWeb検索も画像も動画もJSONをサポートしていたはずなんだけど・・・

書いていないだけで実は実装済みってこともよくあることなので、試しに本家と同じクエリをyahoojapanに投げてみる・・・駄目か。JSONではなくがっつりXMLで帰ってくる。

リクエスト例

http://api.search.yahoo.co.jp/ImageSearchService/V1/imageSearch?appid=YahooDemo&output=json&callback=yisshow&adult_ok=0&query=Tokyo

ちなみに、yahoo.co.jpを本家yahoo.comに変えてみると

http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&output=json&callback=yisshow&adult_ok=0&query=Tokyo

ばっちりJSONP。

ちなみに、

http://api.search.yahoo.co.jp/WebSearchService/V1/webSearch?appid=YahooDemo&output=json&callback=yisshow&adult_ok=0&query=Tokyo

でWeb検索のクエリを投げると、日本Yahooでも結果がJSONで返ってきますよ。YahooJapanのリファレンスには乗ってないけどね！HAHAHAHA・・・・

何故だッ！！

XMLだとJavascriptで使いづらいんだよ！CGIを間にかませなきゃいけなくなってめんどくさいし。

日本だとあんまり需要無いんだろうか・・・JSON便利なのに・・・つか実装しているならせめてWeb検索のほうはリファレンス書いとこうよ・・・

仕方が無いのでYahoo.comを使う。

本家USAでも一応日本語検索は可能だが・・・検索結果がなかなかにとんちんかんで、なんだかすごく残念な感じだ。

Yahoo.comの画像検索サンプル

ソース

<br /> <script type=”text/javascript”></p> <p>function searchy()<br /> {<br /> qer =encodeURI( document.getElementById(“word”).value);<br /> var yhourl=”http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?”;<br /> var param =”appid=YahooDemo&output=json&callback=yisshow&adult_ok=0″<br /> param += “&query=” + qer;</p> <p>var objScript = document.createElement(“script”);<br /> objScript.type = “text/javascript”;<br /> objScript.src = yhourl+param;<br /> document.lastChild.appendChild(objScript)<br /> }<br /> function yisshow(result)<br /> {<br /> 　document.getElementById(“yis”).innerHTML=”";<br /> var count = result.ResultSet.Result.length;<br /> for(var i=0; i<count; i++)<br /> {<br /> document.getElementById(“yis”).innerHTML += ‘<img src=”‘ + result.ResultSet.Result[i].Url + ‘” width=”100px” height=”100px” / >’;<br /> }<br /> document.getElementById(“yis”).innerHTML += “</div>”;<br /> };</script><br /> <input id=”word” name=”word” /><br /> <input onclick=”javascript:searchy()” value=”Search!!!” type=”button” /></p> <p><div id=”yis”></div><br />

Googleマップ+Ajaxで自分の地図をつくる本 Google Maps API徹底活用 米田 聡 ソフトバンク クリエイティブ 2005-12-21 売り上げランキング : 162200 おすすめ平均 Amazonで詳しく見る by G-Tools

ちなみにはてなスター風GJ!は１０以上で中サイズ、100以上で大サイズと拍手数によってアイコンのサイズが変わります。

裏方のPHPは一切変更してませんので、今までのFC2（風）GJ!（ver1.00）を設置していた方でもそのまま付け替え可能です。UIしか変えてませんしね。拍手数のカウンントもそのままです。

付け替える場合javascriptの差し替えと、HTML（テンプレート）の記述変更でいけます。

あ、あと、拍手数を表すアイコンの画像。僕はこちらの肉球アイコンを使わせていただいてます。

しばらく自分のとこで設置して問題ないと判断したら公開します。

というか、僕が作るの、～風ばっかりやな。オリジナリティーがないのなー。

MyminiCity上の架空の街。いったい、みなさんはどこの国に自分の街を設置してプレイされてるのかなー、と思って、ブラウザ上でグラフが簡単に描ける【Google Chart API】を使ってグラフ化してみました。

下がその内訳。

MyMiniCityブログパーツのPHPが呼ばれた時のログを読み込んで、現時点の国籍の分布を動的に描画しています。

というかニッポンが圧倒的に多すぎて、他の国がよくわからないことに。

多くの人は実際の自分と同じ国を選ぶでしょうし、まあ当たり前かなという結果でした。

（＊国、といってもユーザーの実際の国籍ではなくて、MyMiniCity上の国籍のことです。）

Google Chart API

Googleさんから先日公開されたAPIなんですが、これがけっこう楽しい。

javascriptとかPHPでグラフを書こうとすると意外にめんどくさいし、Excelなんかでグラフを作成してアップロードだと当然動的なグラフ作成はできないしでう～ん、ってところなんですが、これをつかうとかなり楽チン。

ざっくりと説明すると、Google Chart APIのURLにパラメーターを付与すると、グラフ化された画像が帰ってくる仕組みです。で、それを<img>タグのsrcで受けると。

例：<img src=”http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World">

グラフの種類も円グラフ、棒グラフ、折れ線、散布図など一通り揃っています。

残念なのは、キャプションが日本語に対応していなくて、文字化けしてしまうこと。「Japan」を「日本」なんて書くとワケが判らないことになります。

そこに目をつぶれば、ブログ上や自分のサイト上に、気軽にグラフを描画することができますね。

まあ普通、そんなにグラフを描く機会もないんですけど。

－以下オリジナル記事－

以前のエントリーで、Web拍手について触れた。
今まではWeb拍手さまのスクリプトをダウンロードさせて頂いていた。

設置後おかげさまで、何人かの方に拍手をいただいた。
それ自体はもう嬉しくてたまらないのだが、やっぱりどの記事に対しての拍手なのかが僕は知りたい。
「うまい！！」とコメントを下さった方がいても、どの記事に対して仰って下さったのかが判らないのでは、ちょっとリアクションに困る。

と言うわけで、作ってみました。

モデルになるのはFC２ブログWeb拍手。

実装したい項目として

• どのエントリーに対しての反応なのかを把握できる
• ブログのエントリーを書けば、自動的にボタンが設置される
• 拍手ボタンを押したあと「画面の遷移」をしないでコメント欄が表示される
• 拍手数がボタン上に表示される

くらいでいいかな。
UIは最低限シンプルで。

で、とりあえず今テストとしてこのブログに設置しています。

アプリ名「ウェブＣｈｅｅｒｓ」（ウェブ・チアーズ）
「GJ!」に改名しました。

サンプルページ

こんな感じになります。
ＵＲＬはダミーです（一回言ってみたかったセリフ）

統計ページを見てもらえれば判ると思いますが、どの記事に対しての応援か、またその記事にどんなコメントが寄せられたのかが判るようになっています。
統計ページには簡単なパスワードが設定できるようになっています。

ただ、実現したい項目であるボタン上に拍手数を表示するをリアルタイムに実現する為（ボタンを押した瞬間数字に反映される）Javascriptを使っています。
それだけならまだしも、ボタンの表示、さらにリンクにもonClickを使っている為、Javascriptを切っている方にはボタンが表示されないという極悪ぶり。んー、Webアプリとしてどうなんだろうこれ。

とりあえずしばらく使ってみます。
問題なければそのうち公開します。