JavaScript

FizzBuzzを今更作ってみた

かつのり — Thu, 08 Nov 2007 01:55:00 GMT

普通じゃ面白くないので、変わった作り方にチャレンジしました。言語はJavaScriptです。

まずはif文を使わないパターン。

f=['fizz','','buzz',''];
for(i=0;i<100;i++)
document.write(((f[(!(i%3)+'').length-4]+f[(!(i%5)+'').length-2])||i)+'<br>');

そして、極力短くしたパターン。

for(i=0;i<100;i++){a=i;b=!(i%3);if(b)a='fizz';if(!(i%5))a=(b?a:'')+'buzz';document.write(a+"<br>")}

if文を使わない代わりに三項演算子を使うなんてズルはしていません。true/falseを文字列化して、文字長を配列にマップしています。

極力短くしたパターンは実際にこれ以上短くできるのでしょうか・・・。実は7行テトリスに感化されています。

一行で IE の JavaScript を高速化する方法

かつのり — Fri, 12 Oct 2007 01:09:00 GMT

http://d.hatena.ne.jp/amachang/20071010/1192012056

JavaScriptに、

/*@cc_on _d=document;eval('var document=_d')@*/

を埋め込むと5倍近く早くなるらしいです。うーんamachang氏恐ろしい・・・

リファラ偽装ブックマークレット

かつのり — Wed, 29 Aug 2007 21:30:00 GMT

今見ているページをリファラーにして移動するブックマークレットです。

javascript:(function(){var a=document.createElement("a");if((a.href=window.prompt("url...",""))!=""){a.innerHTML="a";document.body.appendChild(a);a.click();}})()

ここをお気に入りに追加

例えば、Google等で非常にｹﾞﾌﾝｹﾞﾌﾝなキーワードで検索し、その検索結果のページで上記ブックマークレットを実行します。

プロンプトが表示されるので、ターゲットのサイトのURLを入力。するとターゲットのサイトには、何故かｹﾞﾌﾝｹﾞﾌﾝなキーワード検索の結果からリンクされたログが残ります。

極端な話、ヤフーのトップからリンクされている！？ってことも可能です。

リファラー偽装はブラウザを改造すりゃどうにかなるんですが、JavaScriptだけでもどうにかなってしまうのです。

Rhinoに挑戦

かつのり — Thu, 24 May 2007 02:09:00 GMT

JDK6にはまだ移行していないのですが、JavaScriptとJavaの連携をやりたくて、JavaScriptのJava実装であるRhinoに挑戦中。

import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.net.URL; import org.mozilla.javascript.Context; import org.mozilla.javascript.Scriptable; public class Test { public static void main(String[] args) throws Exception { Context context = Context.enter(); InputStream in = null; InputStreamReader reader = null; try { Scriptable scope = context.initStandardObjects(); URL url = Test.class.getResource("test.js"); in = url.openStream(); reader = new InputStreamReader(in); context.evaluateReader(scope, reader, url.getPath(), 0, null); } catch (Exception e) { throw e; } finally { Context.exit(); if (reader != null) { try { reader.close(); } catch (IOException e) { } } } } }

というようなコードを書いて、このクラスと同じところにtest.jsという名前でJavaScriptファイルを配置して実行できます。もちろんブラウザ上のものではないので、documentとかwindowとか、そんなものは一切ないので、生のまま使うと結構地味です。

ただ、クライアントサイドもサーバサイドもJavaScriptで連携はAjaxというのがやりたいし、業務ロジックなんかもJavaScriptにやらせてみたいのです。以下は擬似コードですが、

(function(){ var conn = getConnection(); var sql = new SQL("select * from test where xxx = ?"); sql.bind(request.getParameter("xxx")); var result = sql.execute(conn); var record; var records = []; while(record = result.hasNext()){ record.name = record.name + "さん"; records.push(record); } conn.close(); return records; })();

のようなDBからデータを取得して加工して配列で返すような処理をJavaScriptでさくさく書けると楽しいのかなと。例えばトランザクションをスクリプトの実行前後で自動的に操作すると、ストアド感覚で業務ロジックが書けそうです。

グローバルなオブジェクトにDBに関連するクラス、オブジェクト、関数を配置すると、多分色々できるんだなという確信はあるのですが、ドキュメントが本当に少ないです。この辺はJDK6のソースコードを見ながらって感じですね。

Ajaxで郵便番号->住所変換

かつのり — Sun, 13 May 2007 00:33:00 GMT

Ajaxを使った郵便番号と住所変換です。HTTPサーバのみでサーバサイド処理が不要なバージョンです。

http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html

静的なコンテンツのみであれば、サーバのリソースを節約する事が出来る為、私も業務で同じ手法を取り入れました。私が行った実装方法は、郵便番号の先頭4桁をファイル名にします。例えば郵便番号が012-3456なら、0123.jsonというファイルをサーバに配置します。

次に0123.jsonの中には、

{
    "3" : {
        "4" : {
            "6" : ["XX県","XX市","字XXX"],
            "7" : ["XX県","XX市","字XXX"],
            "8" : ["XX県","XX市","字XXX"]}
        },
        "5" : {
            "6" : ["XX県","XX市","字XXX"],
            "7" : ["XX県","XX市","字XXX"],
            "8" : ["XX県","XX市","字XXX"]}
        }
    },
    "4" : {
        "4" : {
            "6" : ["XX県","XX市","字XXX"],
            "7" : ["XX県","XX市","字XXX"],
            "8" : ["XX県","XX市","字XXX"]}
        },
        "5" : {
            "6" : ["XX県","XX市","字XXX"],
            "7" : ["XX県","XX市","字XXX"],
            "8" : ["XX県","XX市","字XXX"]}
        }
    }
}

のように記述し、7桁確定したら先頭4桁でファイルを取得してレスポンスに対してevalを行います。結果の各プロトタイプを参照すれば、住所が取得できるわけです。Ajaxによる取得・評価が1回と、プロトタイプの参照が3回のみで、検索といえるような処理がないためかなり高速です。

郵政のサイトからのダウンロード、アーカイブの解凍、jsonファイルの生成を月1回自動で行うスクリプトを書くと、常に自動的に最新の住所を保つ事もできます。

サーバの特性を考慮したり、インクリメンタルなサーチを提供する場合、桁の扱い方を適切に変えるといいと思います。殆ど変化のないマスタ情報で他のテーブルと連携しないようなものは、JSON形式のファイルをクライアントに読ませるの方が楽ですね。例えば和暦とか。

実験的にCMS風の静的サイトを作ってみた

かつのり — Fri, 04 May 2007 18:56:00 GMT

取り合えずは実験的なCMS風の静的サイトを作ってみました。

http://kacchan6.wankuma.com/site/

コンテンツの情報ファイルとコンテンツファイルをAjaxで読み込んで表示しています。JavaScriptのライブラリはYahoo UI LibraryとEXTJSを使いました。

http://extjs.com/

全てindex.htmlで処理しています。こういうサイトを作るのはいいのですが、

SEO対策は無理。サーチエンジン糞食らえ！
古いブラウザも無理。新しいブラウザ使え！
テキストブラウザさようなら～

という状況に陥りますね。

JavaScriptで継承

かつのり — Wed, 02 May 2007 01:09:00 GMT

JavaScriptでの継承方法。たまに忘れるのでメモ。

//クラスを作るオブジェクト(prototype.jsのパクリっぽい) var Class = { create : function(){ //コンストラクタ var result = function(){ //init関数へ委譲 this.init.apply(this, arguments); }; //継承する機能を追加 result.extend = function(cls){ //ここでプロトタイプチェーンを利用した継承 this.prototype = new cls; return this; }; return result; } }; //取り合えずHogeクラスを作る var Hoge = Class.create(); //メンバを実装 Hoge.prototype = { _i : 0, _j : 0, getI : function(){ return this._i; }, getJ : function(){ return this._j; }, init : function(i,j){ this._i = i || 0; this._j = j || 0; }, plus : function(){ return this.getI() + this.getJ(); } }; //インスタンスを生成 var hoge = new Hoge(10,20); //30が表示される alert(hoge.plus()); //Hogeを継承したクラスを生成 var Fuga = Class.create().extend(Hoge); //getIをオーバーライド Fuga.prototype.getI = function(){ return this._i * 10; }; //Fugaのインスタンスを生成 var fuga = new Fuga(10,20); //120が表示される alert(fuga.plus());

functionタイピング

かつのり — Mon, 23 Apr 2007 00:52:00 GMT

面白いのを見つけました。

http://shohoji.net/labs/function/

functionと何秒でタイプできるかを試すタイピングソフト。JavaScript廃人度を調べれますｗｗｗ。ちなみに自分は調子がいいと0.5秒台・・・まだまだ廃人には遠い・・・

JavaScriptのシンタックスシュガー

かつのり — Mon, 23 Apr 2007 00:37:00 GMT

最近は結構有名になっていますが、JavaScriptには色々とシンタックスシュガーがあります。

new Arrayと[]
new Objectと{}
new RegExp(正規表現文字列)と正規表現リテラル
new Stringと文字列リテラル
new Numberと数値リテラル
new Functionと関数構文

という感じです。

Array

var hoge1 = []; var hoge2 = new Array(); var hoge3 = [1,2,3,4,5]; var hoge4 = new Array(1,2,3,4,5);

Object

var hoge1 = {}; var hoge2 = new Object(); var hoge3 = {aaa : 1, bbb: 2}; var hoge4 = new Object(); hoge4.aaa = 1; hoge4.bbb = 2;

RegExp

var hoge1 = new RegExp("^abc[0-9]*$","g"); var hoge2 = /^abc[0-9]*$/i;

最後に、String/Number/Functionについてはシンタックスシュガーなのかちょっと微妙な感じですが、取り合えずこんな感じで書けるというサンプルです。

Number.prototype.times = function(fn){ for(var i = 0; i < this; i++){ fn(i); } }; (5).times(function(idx){ alert(idx); });

数値はNumberのインスタンスであるので、Numberのprototypeを使う事ができます。Rubyっぽいな～。

String.prototype.toNumber = function(radix){ if(!radix){ radix = 10; } return parseInt(this) || 0; }; alert("123".toNumber() + 10); alert("".toNumber() + 10);

これも同じ感じですね。

Javascript Tips & Tricks ( and oddities )

かつのり — Sun, 22 Apr 2007 23:54:00 GMT

http://code.google.com/p/jslibs/wiki/JavascriptTips

結構熱いテクニックが色々と書かれています(クロスブラウザ向けは少ないですが・・・)。ちょっと触発されたので、自分でも使う技を一部紹介します。

文字バッファ

使い方は、

var hoge = new StringBuilder(); hoge.append("aaa").append("bbb").append("ccc"); alert(hoge);

実際に＋による文字列連結よりも早いです。

ショートカット関数

//IDで要素を取得 var $id = function(id){ return document.getElementById(id); }; //クリックイベントを追加 var $click = function(el, fn){ if(typeof(el) == 'string'){ el = $id(el); } if(el.attachEvent){ el.attachEvent("onclick" , fn); }else{ el.addEventListener("click", fn, false); } } //他よく使う関数をショートカット化＋クロスブラウザ化

使い方は、

$click("button-aaa", function(){ alert("aaaがクリックされました。"); });