Javascriptの最近のブログ記事

Javascriptでプログラムを国際化する仕組みがなさそうだったので作ってみました。
基本的にはUNIX系OSで広く使われているgettextをJavascriptで使えるようにしたものです。
prototype.js が必要です。

gettext.js: gettext本体
local.php: ロケールデータをJSONに変換するPHPスクリプト
gettext.tar.bz2: アーカイブファイル 動作デモで使ってる全てのデータが入ってます。
動作デモ

仕様はほとんど同じなのですが、若干異なる部分があります。

メソッドは全てLocaleオブジェクトの中に閉じ込めています。
なので、全てのメソッドは Location.hoge() の形で呼び出す必要があります。
メソッドの命名規則はprototype.jsにあわせてあります。

Locale.setLocale(category, locale)

setlocale() と同じ。
現状LC_MESSAGESしか意味がありません。

Locale.bindTextDomain(domain, directory, func)

bindtextdomain() と同じですが、第3引数が増えています。

domain, directory で指定された情報を元にロケールデータを取得します。
ロケールデータはJSONで取得します。
アクセス先は
directory/LC_MESSAGES/locale/domain.js
になります。

第3引数にはロケールデータの読み込みが完了した時に実行する関数オブジェクトを指定します。

Locale.getText(string)

gettext()と同じ。
渡された文字列からロケールに含まれる文字を返します。

Locale.getTextNoop(string)

gettext_noop()と同じ。
xgettextにロケール文字列であることを知らせるだけに使用します。
処理は全く行いません。

_(), N_()

gettextを使う時は、gettextと書くのが大変なので、よく"_", "N_"のようなマクロを定義して使用します。
慣例にならって同じように"_", "N_"を定義しました。
それぞれLocale.getText, Locale.getTextNoopと全く同じ処理を行います。

Locale.setSuffix(suffix)

オリジナルのgettextにはないメソッド。
ロケールデータはデフォルトではdomain.jsなのですが、拡張子を変更することができます。
動作デモではphpに変更しています。

webアプリならではのメソッドです。gettextだけのためにapacheの設定いじるのはやりたくないので。

使い方

ロケールデータを作ります。

xgettext -k_ -kN_ -j index.html -o locale/ja/LC_MESSAGES/i18n_javascript.po

.htmlが対応してない拡張子なのでwarningが出ますが問題なく処理されます。(Cのプログラムだと仮定して処理される)

poファイルを編集する。
編集後のpoファイル

poファイルのデータをJSONに変換するためにlocale.phpへのsymlinkをはる。
ln -s $PWD/locale.php locale/ja/LC_MESSAGES/i18n_javascript.php

po -> JSONの処理にはPEAR:File_Gettext, PEAR:Services_JSONを使ってます。

以上で作業は終わりです。
これでJavascriptで国際化したプログラムを書けるようになります。

まとめ

PHP, Perlなどのサーバサイドのスクリプトのgettextを使って、出力するJavascriptの言語を動的に変更して国際化をすることもできます。
しかし、動的コンテンツとして出力するJavascriptを変更していては、クライアントでデータをキャッシュすることができないし、サーバにやさしくありません。

Javascriptで国際化をすれば、Javascriptファイルは動的に変化しないので静的コンテンツとして出力することができます。

謝辞:
PEAR:File_Gettext の使い方に
http://blog.poyo.jp/archives.php/categ-1/year-2006/month-4/id-1145313508
を参照させてもらいました。
貴重な情報をありがとうございます。

prototype.js を使って画像サムネイルを表示するライブラリについての記事を CodeZine に書きました。
prototype.jsを使った画像サムネイルの表示ライブラリ

IE 限定ですが、web ページから画像をアップロードするときにリアルタイムでサムネイルを表示するためのライブラリです。
実際の動作はデモを見てもらうと分かると思います。

動作デモ

このライブラリはもともとフォト蔵用に開発したもので、もちろんフォト蔵でも使っています。
詳しい解説は記事の方を参照ください。

Javascript で日本語プログラミング言語なでしこ(もどき)を作りました。

Javascript なでしこ(もどき)

100% Javascript で書いています。
何もダウンロードする必要ありません。
IE, firefox で動作確認済み。

週末ハックでできるとこまでしか作らない条件で作ったので、
本物のなでしこほど完成度は高くなく、
本当に基本的な機能しかありません。

今、実装している機能は
・計算
・文字列の表現
・メッセージの表示
・変数の扱い
だけです。

なんでこんなものを作ろうかと思ったのは、
kmyacc という Javascript に対応したコンパイラコンパイラを公開されたから。
Javascript に対応した yacc の処理系ってたぶん kmyacc だけ。
kmyacc を公開された森 公一郎さん、ありがとうございます。

構文解析は kmyacc でやってますが、字句解析は自作です。
誰か Javascript 対応の lex処理系作ってくれないかなぁ(他力本願)。

Ajax Pages

Ajaxで作られたJavascriptスクリプトテンプレートエンジン。

<% var hello="Hello world" %>
<%=hello%>

みたいにPHPのようにHTMLの中にJavascriptを埋め込むことができます。

<%@include file="header.ajp" %>

のように動的なファイルの読み込みにも対応しているもよう。

このように簡単にHTMLの中にJavascriptを埋め込めるのは画期的ですね。
PHPが普及したのもHTMLの中にプログラムが簡単に書けたからだと思います。

qooxdoo

Javascriptの高度なwidget。
とりあえずデモを見てください。
かなりすごい!!

WSSE for JavaScript

AtomAPIで使用されるWSSE認証用のヘッダを生成するJavascriptライブラリ。
MovableTypeとかはてなとかのAtomAPIにXMLHttpRequestで
Javascriptからアクセスできるようになるので、便利です。

ページレンダリングを妨げない広告挿入手法に関する覚書

しかしこの方法には問題があって、それはscriptがロードされて実行が完了するまでページのレンダリングが止まる、ということだ。jsファイルを受信するまでにかかる時間と、解釈と実行、document.writeでブラウザに出力する、この間ブラウザはscriptタグを挿入した位置でHTMLをぶった切って表示できる範囲まで表示する、という動作をする。

なるほど~。
確かにdocument.write()だと何が出力されるか分からないので、
処理が終わるまでは後続の部分を処理できないですね。
勉強になります。

getElementsBySelector()

なるほど~。
確かにこういうのあると便利ですね。

Javascript Diff Algorithm

Javascriptによるdiffの実装

Javascript Index

Javascriptの巨大なリファレンス
こいつは便利だ

del.icio.us direc.torの謎

xmlHttpRequestのクロスドメインの問題は、「呼び出し元のJavascriptファイルが置いてあるドメインと、呼び出し先のウェブサーバのドメインが同じじゃないといけない」わけではなく、「Javascriptを呼び出しているページのドメインと、呼び出し先のウェブサーバのドメインが同じじゃないといけない」わけで、Javascriptファイルがどこにあっても関係ないようです。

なるほど~、これは知らなかった。メモメモ。
恥ずかしながらxmlhttprequestはまだ使ったことがない新参者なので勉強になりました。

AtomAPI X-WSSE認証ヘッダジェネレータ

おお、これは便利。メモメモ

JavaScriptによるHTML構造解析ツール

Javascriptで書かれたDOMインスペクタ。
サイトの構造をこのように可視化してくれるのは便利ですね。

僕はFirefoxのDOMインスペクタを使っていますが、
IEユーザには朗報かも。

Flash / JavaScript Integration Kit (Beta)

マクロメディアがFlashとJavascriptで相互通信するためのライブラリを発表しました。
最近はリッチクライアントアプリケーションとしてAjaxが注目されてますが、
Javascriptでも、できることとできないことがあるわけで、
それをFlashと組み合わせることで補えるのは大変いいことだと思います。

実際にFlashとJavascriptを組み合わせているサイトは、日本だと、
BEYESがあります。
かっこいいですね。

DHTML Lemmings! - by crisp

Javascriptでレミングスが遊べます。
完成度が高い!!

レミングスって初めてプレイしましたが、結構面白いですね。

ウェブページ

Powered by Movable Type 4.21-ja

このアーカイブについて

このページには、過去に書かれたブログ記事のうちJavascriptカテゴリに属しているものが含まれています。

前のカテゴリはiPodです。

次のカテゴリはlifehacksです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。