emileはCSS/JavaScript製のオープンソース・ソフトウェア。Webブラウザ上でアニメーションを行う際、まず思いつくのはFlashを使った手法だろう。だがそこまで複雑なアニメーションでもなく、そもそもFlashを扱うのが苦手な場合はどうしたら良いだろう。そこで使えそうなのがJavaScriptだ。 動作サンプル 最近のJavaScriptは表現力が高く、簡単なアニメーションくらいなら十分に実現できるようになっている。さらにCSSを使うことで位置の設定も容易に、色の変更もできるようになる。それを使って作られているのがemileだ。 emileはPrototype.jsやjQueryといった有名なライブラリを使わずに作られている。アニメーションを使いたいとなった途端に重たいフレームワークを導入というのでは萎えてしまう。わずか50行程度でアニメーションを実現しているのだから面白い。

CodeMirrorはJavaScript製のオープンソース・ソフトウェア。Webブラウザのテキストエリアの貧弱さは言うに事欠かない。メモ帳レベルの機能しかなく、とても使い勝手が悪い。HTMLを作成する場合はWYSIWYGなエディタに変換するCKEditorのようなソフトウェアも存在するが、Webブラウザ上でプログラミングしたいと思うような機能はない。 テキストエリアをハイライト もしWeb上で開発者向けのサービスや環境を提供しようと思うならCodeMirrorを使ってみるといいだろう。CodeMirrorはテキストエリアを開発のしやすいエディタ環境に変化させてくれるソフトウェアだ。例えばJavaScript/HTML/CSS/Python/Rubyといった言語向けにハイライト表示する機能がある。 それらは各言語向けのCSSとJavaScriptで作られたパーサーによって作られている。また

2009年09月30日00:30 カテゴリMathTips #google - chart API で数式表示 これはおいしい。 Google Chart APIを使って数式を埋め込む - Hello, world! - s21g ちょっと前からGoogleDocsで数式が書けるようになりましたが、 これがGoogle Chart APIを使って実装されているようです。Demo というわけで早速JSで。 LaTex Expression: Formula: ソースはこれくらい簡単です。 <input type="text" size="64" value="\int_{}^{}e^{i\theta}d\theta=\frac{1}{i}e^{i\theta}+C=-ie^{i\theta}+C" onkeyup=" (function(tex, img){ img.alt = tex; i

Webフォームから飛んできた値について、入力チェックを行わないということはまずないだろう。数字のところに文字列が入ったり、必須のものが入っていなかったりすることはよくある。だからこそサーバサイドのプログラムでチェックはするのだが、ユーザビリティを考えるとクライアントサイドでも入力チェックを行いたい。 リアルタイムで行われる入力チェック 入力チェックのJavaScriptを作る、なんていうと面倒な感じがするがVanadiumを使えば開発者の方でなくともチェック機能が実装できてしまう。 今回紹介するオープンソース・ソフトウェアはVanadium、jQueryを使ったクライアントサイド入力チェックライブラリだ。 Vanadiumは入力項目のクラスでチェック内容を指定するようになっている。そのためVanadiumさえ読み込めば、HTMLを変更するだけで入力チェックが実装できるようになる。入力必須や

SVGは技術的に注目を集めていても実際に利用されている場面はそう見かけない。ブラウザ上でドローを描くだけであれば、画像で十分という話であるし、アニメーションを必要とするならFlashがあるからだ。かつIE6をはじめとするレガシーなブラウザで動作しないという最大の問題がある。 だがFlashに比べれば扱いやすく、テキストベースなのでシステムとの親和性も高い。また画像とは違いインタラクティブな動作ができる。そんなSVGの利用を推進するのがRaphaëlだ。 今回紹介するオープンソース・ソフトウェアはRaphaël、JavaScriptのグラフィックスライブラリだ。 RaphaëlはSVG、VML、JavaScriptを使ったグラフィックスライブラリだ。グラフやSVG、様々なオブジェクトを描き出すことができる。もちろんJavaScriptによって刻々と変化するアニメーションやマウスの動きによって

2009年06月15日16:30 カテゴリLightweight Languages javascript - にKanconvitを移植してみた コードが以外にコンパクトだったので、JavaScriptにも簡単に移植できそうだなと思ったら、あっという魔に出来上がったので。 [を] 簡体字と日本語漢字の相互変換ツール Kanconvit を公開 Hack部（ハック部）の合宿で、中国語の簡体字と日本語漢字の相互変換ツール Kanconvit を作りました。 /lang/javascript/kanconvit/trunk ? CodeRepos::Share ? Trac Demo: 漢字 中華料理協議会 简体字 中华料理协议会 DHTML Source Bookmarklets Kanconvitしたいページを開いた状態で使って下さい。 漢字から簡体字 简体字から汉字 工夫のしどころ 変換

通常、Webサイトは縦に長くなる傾向がある。そのため縦書きの文字はほとんど使われず、横書きで下へ、下へ伸びていく。そのため、あまりページが長くなるとページネーションとしてページを区切って読み進めるようになっているのが一般的だ。 Webページをスライド化して読みやすくする だがこのページネーションは果たして便利な機能だろうか。都度マウスでクリックしたりするのが面倒だし、縦長のページを移動するのも大変だ。そこでSiteFlowが登場した。 今回紹介するオープンソース・ソフトウェアはSiteFlow、Webサイトの可読性、操作性を向上するJavaScriptライブラリだ。 SiteFlowはJavaScriptで提供されるソフトウェアで、ブックマークレットとしても動作する。主な機能は二つで、一つはページ内の移動に関する機能で、もう一つはページネーションに関係する機能だ。ページ内の移動処理では、C

JavaScriptがWebアプリケーションを構築する上で欠かせない技術になっている以上、そのデバッグ方法も洗練される必要がある。Firefoxの場合は有名なFirebugがあるが、他のブラウザになるとそれぞれのやり方があったり、そもそも使い勝手が悪かったりと開発効率が落ちてしまう。 多数のブラウザに対応したJavaScriptデバッガ そんな中、Javascript Debug Toolkitでは多数のブラウザをサポートしたJavaScriptのデバッグが可能なようだ。 今回紹介するオープンソース・ソフトウェアはJavascript Debug Toolkit、WindowsやLinuxに対応したJavaScriptデバッグツールだ。 Javascript Debug Toolkitはスタンドアローン版とEclipseプラグイン版が提供されている。Eclipse版であればMac OSXで

Webサイトでテキストを指定したフォントで表示しようと思った場合、CSSで指定するか画像を使うかのどちらかが選択肢になる。CSSで指定した場合、コンピュータ上にフォントがある必要があり、画像で作成する場合は再利用性が悪い。 好きなフォントで描画する そこで使ってみたいのがCufónだ。英文フォントに限定されるだろうが、テキストを好きなフォントで描くことができる。 今回紹介するオープンソース・ソフトウェアはCufón、Canvas + JavaScriptによるテキストレンダリングライブラリだ。 Cufónは予めフォントをJavaScriptファイルに変換する必要がある。そのためのWebインタフェースも用意されており、レギュラー、ボールド、イタリック、ボールド&イタリックそれぞれのフォントを指定する必要がある（レギュラーフォント以外はオプション）。 加工を施した例 フォントを指定する際にグラ

JavaScriptと言えばWebブラウザ上で動作する軽量なプログラミング言語というイメージがある。だが最近ではAptana JaxerやRhinoのような技術によってクライアントサイドとサーバサイドのどちらもJavaScriptで実装することが不可能ではなくなってきている。 サンプルに登録されている動画。一見の価値あり？ とは言えサーバ向けのAPIを独自で実装していくのは難しく、今年に入ってからServerJSという標準の策定に向けた動きが活発化してきた。それに則ったJavaScriptライブラリがNarwhalだ。 今回紹介するオープンソース・ソフトウェアはNarwhal、サーバサイドからWebアプリケーションまでこなせるServerJS標準ライブラリだ。 Narwhalは角のあるクジラ、イッカクを意味している。個人的にNarwhalが気になるのは、その開発にKeynote風Webアプ

Webアプリケーションが増えるに従って、JSONフォーマットを利用する機会も増えてきた。だがJSONファイルの扱いはそれほど良くなく、Firefoxの場合ダウンロードのダイアログが開いてしまう。それにシステム向けに改行なしで作られているケースが多く閲覧には不向きだ。 JSONフォーマットをFirefox上で閲覧できる 今後さらに利用が進んでいくと思われるだけに、扱い勝手が悪いのは問題だ。そこで使ってみたいのがJSONViewだ。 今回紹介するオープンソース・ソフトウェアはJSONView、Firefox上でJSONファイルを閲覧できるようにするFirefoxアドオンだ。 JSONViewをインストールした状態でJSONファイルを開くとダウンロードダイアログが開かず、そのままソースが見られるようになる。キー、文字列、数値とそれぞれハイライト化されて表示されるので分かりやすい。配列やハッシュの

2009年08月01日16:00 カテゴリLightweight Languages Ajax - URIのJPEGからEXIFを抜いて、Google Mapsで表示する それでは、ピンポイントでお答えしましょう。 ディスカヴァー社長室blogディスカヴァー社長室blog: ここはどこ？〜干場 ディズニーシーより混んでいる。 (追記:IEでの不具合を修正) ずばり、ここです。 Demo なつかしいなあ。妻と入籍する前の婚前旅行で行きましたよ。Caffe Florianにはたちよりました?しっかり勘定に"Musica"って入ってました? ということを簡単に実現するための仕組みです。 やってることは単純で、JPEGからEXIFをぶっこぬいて、そこにある緯度経度に Google Map をセンタリングしているだけ。強いて面倒な点をあげると、EXIFの緯度経度は度分秒で表現されているのに対し、Go

JavaScriptを使ってGPSデータを取得できるようになったiPhone OS 3.0。前回は、現在の位置情報を取得し、Googleマップに表示する方法を紹介しました。後編は、位置情報と日時をデータベースにどんどん記録していくプログラムを作ってみましょう。 Safariのデータベースを使う iPhoneに搭載されているSafariは、HTML5で追加される予定のAPI「Client-side database storage」を先行実装しており、ブラウザーが用意しているローカルデータベースにJavaScriptを使ってデータを保存できます。 iPhoneのSafariはデータベースエンジンとして「SQLite」を実装しています。SQLiteは、SQLのすべての命令には対応していませんが、簡単なWebアプリケーション用途であれば十分な機能を持つデータベースエンジンです。個々のテーブルは「

※ 画面は公式サイトデモより BBCといえば英国の国営放送だが、日本のテレビ局界隈とは異なりWeb技術への取り組みが積極的だ。Web APIも提供しており、各種動画共有サイトへの配信も行っている。Webサイトも相当作り込まれたものになっている。 BBCによるJavaScriptウィジェットライブラリ そんなBBCで新しい試みが行われている。彼らの作ったJavaScriptライブラリがオープンソース化されたのだ。 今回紹介するオープンソース・ソフトウェアはGlow、BBC製のJavaScriptライブラリだ。 Glowは幾つかのパーツに分かれている。例えば入力補完、画像をスクロールするCarousel、WYSIWYGエディタ、吹き出し風の情報パネル、オーバーレイウィンドウ、スライダー、ドラッグアンドドロップによるソート、タイムラインなどだ。 キーボードヒーロー。隠されている部分も推測しつつ単

各ベンダーの意向が揃わず、HTML5での仕様策定が断念されたvideoタグではあるが、オンラインでの動画閲覧がこれだけ広まっているのであればやはり何らかの仕様が欲しいだろう。そんな企業の思惑を越えて動けるのが開発者だ。 Safari4の場合 videoタグはHTML5をサポートしたブラウザでしか動かないが、旧来のブラウザでも可能にするのがvideo4allだ。 今回紹介するオープンソース・ソフトウェアはvideo4all、多数のブラウザでvideoタグを利用可能にするJavaScriptだ。 video4allはvideoタグを各ブラウザの仕様に合わせて表示を変更するJavaScriptライブラリだ。対応するのはFirefox 3.0/2.0、IE6〜8、Opera、Safari2、Chromeとなっている。Safari4やFirefox3.5についてはvideoタグがそのまま使われる。

Webアプリケーションを構築する上で最大のネックになるのがGUiインタフェースだろう。一般的なローカルOS向けのGUIツールキットとは異なり、Web向けには貧弱なコンポーネントしか用意されていない。YUIやExt JSなど多数のツールキットが登場しているのはそのせいだ。 アニメーションもこなすGUIツールキット そしてデザイン面のみならず、アクションまで踏まえてWebアプリケーションを構築できるのがSocksというGUIツールキットだ。 今回紹介するオープンソース・ソフトウェアはSocks、JavaScriptによるGUIツールキットだ。 SocksはJavaScriptで作られたGUiツールキットだ。HTMLはデザインする必要がなく、Socks上でオブジェクトを定義してテキストボックスやチェックボックスなどを配置していく。後は指定した表示形式に沿ってSocksが揃えて表示してくれる。 ハ

PHPの開発者であれば皆使うのがvar_dumpだ。開発中はもちろんデバッグ時などに非常に重宝する。エラーがあっても出力してくれるので、これがなければ生活できないという人も多いのではないだろうか。 JavaScriptでも変数のダンプを メソッドを調べる必要もなく、知りたいものを関数に入れれば全ての情報を出してくれる。そんなvar_dumpの魅力をJavaScriptでも再現したのがprettyPrint.jsだ。 今回紹介するフリーウェアはprettyPrint.js、JavaScriptの変数ダンプライブラリだ。ソースコードは公開されているが、ライセンスは明記されていなかったのでご注意いただきたい。 prettyPrint.jsはJavaScriptのオブジェクトを指定すれば、その中身をダンプし、テーブル組で見やすく表示してくれるライブラリだ。PHPのvar_dumpよりも、cfdum

インターネットの世界では素早さを求める動きが強まっている。それこそ、サイト内検索で欲しい情報が見つからなかったり、レスポンスが遅れたりすればあっという間にユーザがいなくなってしまう。 JavaScriptだけで検索を行う そんな高速なサーバ検索は難しいかもしれないが、クライアントサイドであれば意外と高速化できる。 今回紹介するオープンソース・ソフトウェアはjQuery Live Search、jQueryを使ったリスト検索ライブラリだ。 jQuery Live SearchはWebページ上にあるリストを検索するライブラリだ。リアルタイムにフィルタリングが行われるのでインクリメンタル検索に近い。デモでは1,000件のリストに対してフィルタリングを行っている。 文字を入力するたびに絞り込まれていく レスポンスはブラウザの性能によるだろうが、思っていた以上に高速だ。検索結果の件数も表示されるので