-
どうも。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ハンドラーの中にある
-
この関数を発動させます
-
4行コードを加えただけで、私たちのブラウザは
-
機能的なフルスクリーンモードを手に入れました
-
では、次はもっと楽しいことをやってみましょう
-
新たな、2つのアイデアを組み合わせます
-
ではひとつめについて。私が前に申し上げたとおり、ブラウザコードは
-
より高い権限を持ち、iframeの中で動くウェブコンテンツを監視できます。
-
その例として、新しいコンテンツがiframeに読み込まれたときに
-
発火(fire)するような、実験的なDOM Loadイベントを考える事ができます
-
さて、二つ目のアイデアに使うのは、dom shotライブラリです。
-
これを使って指定のDOMノードのスナップショット画像を取得できます
-
その関数は、PNG画像データが埋め込まれた
-
data URLを値として返します
-
Marcioはこの二つの機能とちょっとしたjQueryを組み合わせて
-
このデモンストレーション用ブラウザを組み上げました
-
開いているタブのサムネイルが
-
魚眼エフェクト付きで表示されます
-
この例を通じ、あなたが「Chromelessとは何か」について
-
素晴らしい理解が得られたとしたら幸いであります
-
詳しく知りたい人はgithubからコードをpullして
-
そのなかに含まれているチュートリアルをはじめてください
-
ここでお見せしたAPIのいくつかは、変更されているかもしれませんが
-
Chromelessの背後にある考え方については、もちろん変わっておりません
-
もしChromelessに対して貢献をしたいとお考えでしたら
-
あるいは、何らかの見解をお持ちでしたら、
-
IRCやメーリングリストのいつもの場所で行われる口論にご参加ください
-
ご覧いただきましてありがとうございました