2009-08-26

TOKYO FLICKER : 様々な制作意欲につながるインスピレーションをもかき立てられる「知の現代おもちゃ」が、優れていない訳がない。

これはやられた。
ソースを見ると、30?40行程度の非常に短くシンプルなJavaScriptでプログラムされているのが見て取れる（ファンクションは『pan』と『view』の2つのみ）。もちろん外部".js"ファイルにもリンクしていない。
詳しく言うと、このHTML全体に書かれていることといえば、GoogleMapsを表示するためのキー・コードとそのマップに対する命令、及びボディー内にフルスクリーンで表示するための"置き場"の、計3項目しかない。
これを可能にするGoogleMapsのAPIには、JavaScriptなどによって定義づけられる数々のコントロール機能があらかじめ存在し、様々なメソッドにより各種プロパティを外部から操作するような形で機能する。
そのJavaScriptはコンパイルする必要のないスクリプト言語だ。Wikipedia『コンパイラ』の項に、---引用開始--- コンパイル前のプログラムを特に「ソースコード」（原始コード）と呼び、反対にコンパイル後のプログラムを「オブジェクトコード」（目的コード）と呼んで区別する。---引用終了--- とある。三段論法によると「JavaScript」=「原始コード」と推論できる。
具体的にそれを感じさせるいくつかの点を挙げると、まず、当然だが内容が全部丸見えだ。誰でも簡単にコピペして使うことができてしまう（一方でこれは長所とも言えるべきことではあるのだが……）。例えば、FlashのSWFはある種のコンパイル作業により吐き出されるファイルなので、ソースを見るのが容易ではない。不可逆圧縮（JPG）や可逆圧縮（GIF）の話に似ている。
さらにコンパイル（ラテン語で｢かき集める｣）されていないので、動作が比較的重い。長くなると、とたんにCPUが熱を帯びてくる。
しかしこのAPIは、誰もが本当に簡単に使える、汎用性に優れた素晴らしい出来のプログラムであることは否めない（数年前からはFlashに直接地図の画像を読み込むことも可能に）。
それに、このウェブサイトのような「狂気的挙動」プログラミングが、たった数十行のJavaScriptで書けるのだ。様々な制作意欲につながるインスピレーションをもかき立てられる「知の現代おもちゃ」が、優れていない訳がない。

2009-08-26

■

bookmark

At Wed Aug 26 2009 13:10:31 GMT+0900, total 1 window(s)

Window has 12 tab(s)

2009-08-26

TOKYO FLICKER

gmaps

http://dinkypage.com/hv7/

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>TOKYO FLICKER</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAELBuAQvDHzeelTqc_XkFpRTKYZOW_z4YSyDREXzfuNMF03e0gBSqY249KoB_8CjrNtRI4XxKZgRO2w" type="text/javascript"></script>
    <script type="text/javascript">
      var streetObj;
      var panStarted = false;
      window.onload = view;

      function pan() {
        var pov = streetObj.getPOV();
        pov.yaw = Math.random() * 360;
        pov.pitch = Math.random() * 180 - 90;
        pov.zoom = Math.random() * 5;
        streetObj.panTo(pov);
        //streetObj.setPOV(pov);
        //streetObj.followLink(0);
        setTimeout(pan, 150);
      }

      function view() {
        if(!streetObj) {
          streetObj = new GStreetviewPanorama(document.getElementById("viewArea"));
          window.onresize = function() { streetObj.checkResize(); }
        }
        var lat = 35.672853 + Math.random() * (35.790284 - 35.672853);
        var lng = 139.258393 + Math.random() * (139.81741 - 139.258393);

        var somewhere = new GLatLng(lat, lng);
        var svcObj = new GStreetviewClient();
        svcObj.getNearestPanoramaLatLng(somewhere, function(latlng){
          if (latlng) {
            streetObj.setLocationAndPOV(latlng);
            //setPov();
            if(!panStarted) {
              pan();
              panStarted = true;
            }
            setTimeout(view, 3000);
          }else{
            setTimeout(view, 2000);
          }
        });

      }



   </script>

  </head>

  <body style="margin: 0">
    <div id="viewArea" style="width:100%;height:100%;"></div>
  </body>
</html>

2009-08-26

■

Google Maps API を使用すると、あなたのウェブページに Google マップを埋め込むことができます。単一の Maps API キーは、単一の「ディレクトリ」またはドメインで有効です。詳細についてはこのよくある質問を参照してください。Maps API キーを取得するには Google アカウントが必要です。取得した API キーは、この Google アカウントと関連付けられます。

2009-08-26

■

gist_replace_title_with_filename.user.js · GitHub

// ==UserScript==
// @name gist: replace title with filename
// @namespace http://d.hatena.ne.jp/youpy/
// @include http://gist.github.com/*
// @exclude http://gist.github.com/gists
// @require http://gist.github.com/raw/3242/1a7950e033a207efcfc233ae8d9939b676bdbf46
// ==/UserScript==
 
(function() {
  var username = $X('id("owner")/a[@href!="#"]')[0].textContent;
  var filenames = $X('//*[name()="A" or name()="SPAN"][name(..)="DIV"][../@class="info"]').map(
    function(span) {
      return span.textContent;
    }
  );
 
  if(filenames.length) {
    document.title = document.title.
        replace(/^(gist: \d+)/,
                '$1 (' + filenames.join(', ') + ') by ' + username);
  }
})();

filename は複数存在する可能性があるってことだ。

で、この greasemonkey を入れるとタイトルのところが

gist: 93187 - GitHub

っていうのが

gist: 93187 (gist_replace_title_with_filename.user.js) by youpy - GitHub

になる。