JavaScriptのIDE を使ってみよう

IDE

ってなわけでいい加減FC2のエディタの編集もなにかと不便なのでIDEを入れてみる。
とはいえ、.NET使いの我々にはVisual Studioという高価なエディタがあり、けっこうJavaScriptもがんばってくれちゃったりするんだけれど、後々はサーバーサイドをRubyで書きたいと考えているのでフリーでRubyもいけそうな奴を使っていきたいと思う。

はい、ではGoogleツールバーの検索窓で『javascript ide』とそのまま打ってエンター！

さて、まっさきに出てきたのはやはりコイツ、

Aptana

こいつは、まだ僕がJavaで開発していたころにお世話になったのだが、相変わらず人気のようだ。
Aptanaはスタンドアロンでも使えるが、Eclipseプラグインとしても使用する事ができる。
なにより、AptanaはRadRailsというRuby on Rails用のプラグインも備えているため今回の要望にもぴったりだ。

というか、調べる前からAptanaだろうなとは思ってはいたのだが、検索結果に気になる二つ目のIDEが…、こいつは初めて見る。

奴の名前はSpket IDE

去年からいるみたいだ、全然知らなかった。。
どうやらこいつもAptana同様にスタンドアロン版とEclipseプラグイン版が存在するようだ。
ということはAptanaと共存可能か、両方使い分けるのもいいかもしれない。


さて、ここまでIDEを紹介してきたが、やはり無敵のアイツを忘れてはいけないだろう。

そうだ！Fire Bugだ！

FireFoxプラグインという性質上、IDEって感じはしないが、編集機能にデバッガ装備、さらには実行プロファイリングまで取ってくれちゃうという東西南北中央不敗っぷり。
んで、いつからかAptanaの標準デバッガがFireBugになっているではないか！これはもう、スザクにランスロットコンクエスタ並みの最強コンビですよ！

ってなわけで、以下は本家サイトのリンクです。

AptanaとSpketの共存のためにもスタンドアロンではなくEclipseプラグインとしてインストールする事をお勧めします。
それから、AptanaのデバッガのFireBugはバージョンが新しいため、普通にFireFoxプラグインとして入れると駄目かもしれません。
Aptana経由で入れてやるようにしてくださいね〜。

AptanaやFireBugに比べて、SpketIDEの情報が少ない気がしたので、インストールに関して参考サイトをば。

Spket IDEインストール参考サイト

Think IT EclipseベースのエディタSpket IDEを使ってみよう！

teramakoの日記　Eclipse で拡張開発


最後になってこんな事言うのもなんだが、RubyとJavaScriptならば、NetBeansも最近のバージョンはかなりイケてる感じがする。

ブログに動画を貼り付ける

ニコニコ動画

以前から思っていただが、なぜブログ（というかサイト）にサムネイルやコメント付きのニコニコ動画を表示できるのか、不思議で仕方無かった。
表示上は、まるで、公式サイトを切り取って貼り付けているかという感じであり、私的には世の中の解らないものの一つとされていた。

が、

ブログを始めてみて、少しわかったのだが、これはブログの編集機能に含まれたりするようだ。
例えばFC2ブログの場合、編集時に追加できる機能があるのだとか。
http://sukumiu.blog99.fc2.com/blog-entry-138.html



はてなの場合、これと同じ機能はないっぽい。
が、方法はあるとのこと。
なんでも、Google Gadgets等を駆使すれば、軽い上に公式チックな表示方法が可能なんだそうだ。
http://d.hatena.ne.jp/sikii_j/20071218/p1



簡単そうなサムネイルジェネレータで実際にやってみる。
『僕がマーチを好きな理由』に「R4」のBGMを乗せてみた。‐ニコニコ動画(SP1)



やれた！



しかし疑問点が発生中。
下のサイトに行くと分かるのだが、表示方法は5つある。
http://nicovideo.g.hatena.ne.jp/keyword/%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e4%bb%98%e3%81%8d%e3%81%a7%e5%8b%95%e7%94%bb%e3%82%92%e7%b4%b9%e4%bb%8b%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95
もともと使いたかったのはニコニコのiframeとやらなので、その表示方法を知りたい。
あと、Google Gadgetsの利用方法も知りたい。
そのうち調べる。



と思ったら、Google Gadgetsの表示方法が分かった。

ここでなんかわかったような。
ニコニコ動画を表示したい時って、単にタグを書いているだけな訳だ。Google Gadgetsとかの知識も要らん。
つまり、ニコニコのiframeの表示も同じなんじゃないか？？？
あとでテスト。


でもってテスト。

うっはおｋｗｗｗｗｗｗ

ジオコーディングオブジェクト

GoogleMap

今までは位置情報をリクエストを投げる事で得ていたが、毎回そんなことしてられないよね。

そんなわけでジオコーディングオブジェクトを使います。詳細はGoogleCodeのココ！

ではでは、今回は

  1. 住所を入力したら、
  2. その住所にマーカーを打って、
  3. 吹き出しに住所を出して
  4. 緯度と経度をテキストボックスに出してやる

ことにします。

まずはグーグルのサイトのサンプルコードを見てみましょ。

var map = new GMap2(document.getElementById("map_canvas"));
var geocoder = new GClientGeocoder();
function showAddress(address){
    geocoder.getLatLng(address, function(point){
         if (!point) {
             alert(address + " not found");
         }
        else {
             map.setCenter(point, 13);
             var marker = new GMarker(point);
             map.addOverlay(marker);
             marker.openInfoWindowHtml(address);
        }
    });
}

解説を見ると、

GClientGeocoder#getLatLngは住所と住所の取得時に実行されるコールバック関数を引数にとる

と書いてある。
なるほど、まあコールバック関数は、csでいうとこのデリゲートみたいなもんだな。
コールバック関数にはGLatLngオブジェクト、つまり位置情報のオブジェクトが返されると書いてある。
確かにコールバック関数内ではpointって引数をGMarkerに入れたりしてるからGLatLngオブジェクトのようだ。
ってことは、GLatLng#lat()やlng()で緯度、経度も取得できるはずだ。

ふむふむ、ここまで情報が揃えば、ルルーシュ風に言えば

『条件はすべてクリアされた』

だな。

さて、では関数を作ってみる。と言ってもほぼパクリだけど。

/**
 * 住所情報を表示する。実際は緯度経度出したりいろいろしてる。。
 * @param {Object} address 住所
 */
function showAddress(address){
    var map = new GMap2(document.getElementById("map"));
    var geocoder = new GClientGeocoder();
    geocoder.getLatLng(address, function(point){
        if (!point) {
            alert(address + " not found");
        } else {
            map.setCenter(point, 17);
            var marker = new GMarker(point);
            map.addOverlay(marker);
            marker.openInfoWindowHtml(address);
            document.getElementById("txtResultLat").value = point.lat();
            document.getElementById("txtResultLng").value = point.lng();
        }
    });
}
/**
 * テキストボックスの住所から住所情報を表示します。
 * @param {Object} addressHolderId 住所を格納したなんかのID
 */            
function showAddressByTextBox(addressHolderId){
    var address = document.getElementById(addressHolderId).value;
    showAddress(address);
}

なんかしてると言えば、テキストボックスから住所取ったり、緯度経度入れたりしてるだけ。
いちおう、起動ボタンとかも書くと

<input type="button" onclick="showAddressByTextBox('txtAddressInput');" value="Get 緯度経度" />

後は定義したIDをもったテキストボックスを配置してやるだけ。

サンプルはコチラ！

ジオコーディングオブジェクトは他にもJSON形式で取ったり、キャッシュ機能があったりするみたい。暇があったら触ってみる…つもり。

よし、明日は代休だ！違う今日だった！

GoogleMapの座標の使い方

GoogleMap

GoogleMapを表示する手順は以下の手順が必要である。
1.表示したい場所の住所を調べる。
2.住所の座標を調べる。
3.GoogleMapに表示する座標を指定する。


この際、2と3の連結には気をつけるべきだ。
なぜなら、2で取得した座標の緯度と経度の順番が、3で逆になっていることがあるからだ。

GoogleMapにフキダシをつける

GoogleMap

特定のポイントにフキダシをつける。
http://sinjyukudotcs.web.fc2.com/gmapsample/080521_aoyagi.html

文字化けしている理由は、後日解析する。。。


で、調べてみました。（正確には聞いてみたなのですが・・・）
書きづらいのですが、サーバーに保存していた文字コードが悪かっただけ。

なんか不思議だよなー。アップするファイルのエディタに文字コードの指定ができることが。
でも、まあ、今は考えなくっていっかー。デフォルトのshift-jisでやっていこー。

なんて考えてました。。。
あ、あはは。

■

新宿ネタ GoogleMap

さてさて、新宿を名乗っている以上、新宿についても少し触れておかねばね。
今日は帰りに同僚数人と飯を食って帰ろうとしていると、なんと上司(といっても年齢は変わらないが…)が飯代だけ渡して去っていったのだ！

そんな感動のイベントの中、夜23時に訪れたのがこちらハイチ新宿本店でございます。気になるお値段は千円前後と御値ごろ価格、いただいた千円でお釣りがきました。


では、ハイチをマップで出して見よう。
が、しかし、ハイチを出すにはハイチの位置情報が必要だ。昔GoogleMapを触ったころはツールを使ってなんとなく位置情報も得ていたが、今回はせっかくなのでガイドに従ってやってみる。

リンクをたどっていると、ディベロッパーガイドのサービスにジオコーディングという項目に辿り着いた。どうやら、リクエストを投げると複数の形式で返してくれるようだ。

先ほどのハイチのサイトから得た住所情報からガイドに従ってリクエストを作ってみた。

http://maps.google.com/maps/geo?q=東京都新宿区西新宿1-19-2&key=****&output=xml

おそるおそるリクエストを投げてみると、見事に返ってきた！すばらしい！こんな感じ。

<?xml version="1.0" encoding="UTF-8" ?> 
<kml xmlns="http://earth.google.com/kml/2.0">
<Response>
  <name>東京都新宿区西新宿1-19-2</name> 
  <Status>
    <code>200</code> 
    <request>geocode</request> 
  </Status>
  <Placemark id="p1">
    <address>日本東京都新宿区西新宿１丁目１９-２</address> 
    <AddressDetails Accuracy="1" xmlns="urn:oasis:names:tc:ciq:xsdschema:xAL:2.0">
      <Country>
        <CountryNameCode>JP</CountryNameCode> 
        <AddressLine>東京都新宿区西新宿１丁目１９-２</AddressLine> 
      </Country>
    </AddressDetails>
    <Point>
      <coordinates>139.697620,35.688413,0</coordinates> 
    </Point>
  </Placemark>
</Response>
</kml>

うれしくなって他の形式も投げてみる。まずはCSV
リクエストはこちら。

http://maps.google.com/maps/geo?q=東京都新宿区西新宿1-19-2&key=*****&output=csv

戻り値はこちら。

200,1,35.688413,139.697620

最後にJSON、リクエストはこちら。ただし、IEだとなぜかうまくいかず…、FireFoxだと問題なかったです。

http://maps.google.com/maps/geo?q=東京都新宿区西新宿1-19-2&key=*****&output=json

そして戻り値、けど、JSONのインデントのつけ方間違ってるよな…また勉強しないと。

{
  "name":"東京都新宿区西新宿1-19-2",
  "Status":
    {
    "code":200,
    "request":"geocode"
    },
  "Placemark":
    [
      {
      "id":"p1",
      "address":"日本東京都新宿区西新宿１丁目１９-２",
      "AddressDetails":
        {
        "Country":
	  {
	  "CountryNameCode":"JP",
	  "AddressLine":["東京都新宿区西新宿１丁目１９-２"]
	  },
	"Accuracy": 1
	},
      "Point":
        {
        "coordinates":[139.697620,35.688413,0]
	}
      }
    ]
}

さて、では、マーカーにトライする前にまずは地図をハイチセンターにしてみる。
GoogleMap APIのkey取得ページの完コピソースを改変。中心座標を変えて、拡大率を上げる。最大で19まで行けたが、意味わからなくなるので18で。

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.6884, 139.6976), 18);
      }
    }

これでセンターになる。
ついでにマーカーも打ってみる。GMarkerはコンストラクタ引数にGLatLngをとる。素直に書くと。

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.6884, 139.6976), 18);
        map.addOverlay(new GMarker(new GLatLng(35.6884, 139.6976)));
      }
    }

一応リファクタ。

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        var haitipoint = new GLatLng(35.6884, 139.6976);
        map.setCenter(haitipoint, 18);
        map.addOverlay(new GMarker(haitipoint));
      }
    }

これでマーカーが立った！吹き出しもつけたかったが、ヤバい、眠い。でもおもしろい。おやすみ。。

おっと、で編集後はこんな感じ。今日のサンプル

GoogleMap APIとXHTML

GoogleMap

同じくディベロッパーガイドからの引用だが、GoogleMap APIではXHTMLの使用が推奨されているようだ。XHTMLでの記述は自分でサイトを作ったりする際は意識はするが、会社で書いたりしてるとHTMLだったりしてなかなか頭に入らない。とりあえず下記のDOCTYPE宣言は忘れないようにとのGoogleからのお達しだ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ガイドにはVMLの記述についても触れられていたが、、とりあえず今回は無視しよう。知らないから。。