どうも。Lloyd Hilaielです。Marcio GalliとMozilla Labsで働いています
この短いビデオを通じて、Chromelessの概観をお伝えしようと思います
Chromelessはウェブのユーザインタフェイスを
新たな発想を持った人が、簡単にいじれるようにするための実験です
「ブラウザはどう見えるべきか、どう振舞うべきか」
そんな会話にもっと人々を巻き込みたい
それを目標としています
技術的にはChromelessは特に新しいものではありません
アプリケーションのランタイムとしてXULRunnerを用いますが
これはFIrefoxやThunderbirdの土台になっているものです
そして、その上に薄い抽象レイヤをかぶせます
このレイヤが、ブラウザの迅速な開発を可能とします
HTMLやJavascript、CSSといったウェブ技術が使えます
Chromelessには単一のHTMLドキュメントが存在し
ブラウザのユーザーインターフェイスを定義しています
話を簡単にするために、この最初に現れるHTMLのことを
ブラウザコードと呼んでいます
普通のウェブコンテンツが他のサイト、iframeを埋め込めるのと同様に
ブラウザコードも他のサイトを埋め込んだりできます。
違いは、ブラウザコードには、iframeの中身のコンテンツに対して
監視したり影響を与えるための、より強い権限があるという所です
「既存のウェブのコンセプトを元にして
ほんの少し力を増大させてやる」というテーマこそ
Chromelessの背後にある基本的な概念です
では、何が出来るのか、いくつか御覧いただきましょう
今ご覧になられているのは、とても単純でありながら
しかし機能的なウェブブラウザです
ご覧になっているのは単純なHTMLです
表示するのは、URLを入力するためのテキストボックスと
ウェブコンテンツがやってくるiframeです
Chromelessを使えば、ブラウザを作るのに必要なのは
たったこれだけのコードなのです
もう少し続けましょう。
さて、フルスクリーンモードへの切り替えを可能にしたいならどうしましょうか？
フルスクリーンへの展開は明らかに
普通のウェブページにはできないことです。
新しいAPIを使う必要があります
Chromelssにはrequireというグローバル関数があります
それを使って新しいAPIにアクセスします
この場合、miscライブラリをrequireします。
miscという名前はただのプレースホルダですが、
それはともかく、ブラウザのモードをフルスクリーンに切り替えるために
その中の関数を利用できます
ボタンのclickハンドラーの中にある
この関数を発動させます
４行コードを加えただけで、私たちのブラウザは
機能的なフルスクリーンモードを手に入れました
では、次はもっと楽しいことをやってみましょう
新たな、２つのアイデアを組み合わせます
ではひとつめについて。私が前に申し上げたとおり、ブラウザコードは
より高い権限を持ち、iframeの中で動くウェブコンテンツを監視できます。
その例として、新しいコンテンツがiframeに読み込まれたときに
発火(fire)するような、実験的なDOM Loadイベントを考える事ができます
さて、二つ目のアイデアに使うのは、dom shotライブラリです。
これを使って指定のDOMノードのスナップショット画像を取得できます
その関数は、PNG画像データが埋め込まれた
data URLを値として返します
Marcioはこの二つの機能とちょっとしたjQueryを組み合わせて
このデモンストレーション用ブラウザを組み上げました
開いているタブのサムネイルが
魚眼エフェクト付きで表示されます
この例を通じ、あなたが「Chromelessとは何か」について
素晴らしい理解が得られたとしたら幸いであります
詳しく知りたい人はgithubからコードをpullして
そのなかに含まれているチュートリアルをはじめてください
ここでお見せしたAPIのいくつかは、変更されているかもしれませんが
Chromelessの背後にある考え方については、もちろん変わっておりません
もしChromelessに対して貢献をしたいとお考えでしたら
あるいは、何らかの見解をお持ちでしたら、
IRCやメーリングリストのいつもの場所で行われる口論にご参加ください
ご覧いただきましてありがとうございました