0:00:01.668,0:00:04.905
どうも。Lloyd Hilaielです。Marcio GalliとMozilla Labsで働いています

0:00:04.905,0:00:09.710
この短いビデオを通じて、Chromelessの概観をお伝えしようと思います

0:00:09.710,0:00:13.547
Chromelessはウェブのユーザインタフェイスを

0:00:13.547,0:00:16.917
新たな発想を持った人が、簡単にいじれるようにするための実験です

0:00:16.917,0:00:19.122
「ブラウザはどう見えるべきか、どう振舞うべきか」

0:00:19.122,0:00:21.622
そんな会話にもっと人々を巻き込みたい

0:00:21.622,0:00:23.954
それを目標としています

0:00:23.954,0:00:26.828
技術的にはChromelessは特に新しいものではありません

0:00:26.828,0:00:30.130
アプリケーションのランタイムとしてXULRunnerを用いますが

0:00:30.130,0:00:31.932
これはFIrefoxやThunderbirdの土台になっているものです

0:00:31.932,0:00:34.735
そして、その上に薄い抽象レイヤをかぶせます[br]

0:00:34.735,0:00:37.804
このレイヤが、ブラウザの迅速な開発を可能とします

0:00:37.804,0:00:42.509
HTMLやJavascript、CSSといったウェブ技術が使えます

0:00:42.509,0:00:45.412
Chromelessには単一のHTMLドキュメントが存在し

0:00:45.412,0:00:48.588
ブラウザのユーザーインターフェイスを定義しています

0:00:48.588,0:00:50.517
話を簡単にするために、この最初に現れるHTMLのことを

0:00:50.517,0:00:54.152
ブラウザコードと呼んでいます

0:00:54.152,0:00:57.457
普通のウェブコンテンツが他のサイト、iframeを埋め込めるのと同様に

0:00:57.457,0:00:59.960
ブラウザコードも他のサイトを埋め込んだりできます。

0:00:59.960,0:01:02.696
違いは、ブラウザコードには、iframeの中身のコンテンツに対して

0:01:02.696,0:01:05.149
監視したり影響を与えるための、より強い権限があるという所です

0:01:05.149,0:01:08.035
「既存のウェブのコンセプトを元にして[br]

0:01:08.035,0:01:10.237
ほんの少し力を増大させてやる」というテーマこそ

0:01:10.237,0:01:13.106
Chromelessの背後にある基本的な概念です

0:01:13.106,0:01:17.611
では、何が出来るのか、いくつか御覧いただきましょう

0:01:17.611,0:01:20.080
今ご覧になられているのは、とても単純でありながら

0:01:20.080,0:01:21.816
しかし機能的なウェブブラウザです

0:01:21.816,0:01:24.584
ご覧になっているのは単純なHTMLです

0:01:24.584,0:01:27.788
表示するのは、URLを入力するためのテキストボックスと[br]

0:01:27.788,0:01:30.157
ウェブコンテンツがやってくるiframeです

0:01:30.157,0:01:32.395
Chromelessを使えば、ブラウザを作るのに必要なのは

0:01:32.395,0:01:34.328
たったこれだけのコードなのです

0:01:34.328,0:01:35.596
もう少し続けましょう。

0:01:35.596,0:01:38.403
さて、フルスクリーンモードへの切り替えを可能にしたいならどうしましょうか？

0:01:38.403,0:01:40.634
フルスクリーンへの展開は明らかに

0:01:40.634,0:01:42.903
普通のウェブページにはできないことです。

0:01:42.903,0:01:45.247
新しいAPIを使う必要があります

0:01:45.247,0:01:47.729
Chromelssにはrequireというグローバル関数があります[br]

0:01:47.729,0:01:50.629
それを使って新しいAPIにアクセスします

0:01:50.629,0:01:54.014
この場合、miscライブラリをrequireします。

0:01:54.014,0:01:55.931
miscという名前はただのプレースホルダですが、

0:01:55.931,0:01:58.585
それはともかく、ブラウザのモードをフルスクリーンに切り替えるために

0:01:58.585,0:02:01.221
その中の関数を利用できます

0:02:01.221,0:02:03.638
ボタンのclickハンドラーの中にある[br]

0:02:03.638,0:02:05.336
この関数を発動させます

0:02:05.336,0:02:07.896
４行コードを加えただけで、私たちのブラウザは

0:02:07.896,0:02:10.931
機能的なフルスクリーンモードを手に入れました

0:02:10.931,0:02:12.966
では、次はもっと楽しいことをやってみましょう

0:02:12.966,0:02:14.601
新たな、２つのアイデアを組み合わせます

0:02:14.601,0:02:16.960
ではひとつめについて。私が前に申し上げたとおり、ブラウザコードは

0:02:16.960,0:02:21.241
より高い権限を持ち、iframeの中で動くウェブコンテンツを監視できます。

0:02:21.241,0:02:24.878
その例として、新しいコンテンツがiframeに読み込まれたときに

0:02:24.878,0:02:28.682
発火(fire)するような、実験的なDOM Loadイベントを考える事ができます

0:02:28.682,0:02:31.418
さて、二つ目のアイデアに使うのは、dom shotライブラリです。[br]

0:02:31.418,0:02:34.788
これを使って指定のDOMノードのスナップショット画像を取得できます

0:02:34.788,0:02:37.391
その関数は、PNG画像データが埋め込まれた

0:02:37.391,0:02:40.227
data URLを値として返します[br]

0:02:40.227,0:02:42.629
Marcioはこの二つの機能とちょっとしたjQueryを組み合わせて

0:02:42.629,0:02:44.624
このデモンストレーション用ブラウザを組み上げました

0:02:44.624,0:02:48.072
開いているタブのサムネイルが

0:02:48.072,0:02:50.938
魚眼エフェクト付きで表示されます

0:02:50.938,0:02:53.707
この例を通じ、あなたが「Chromelessとは何か」について

0:02:53.707,0:02:55.308
素晴らしい理解が得られたとしたら幸いであります

0:02:55.308,0:02:56.844
詳しく知りたい人はgithubからコードをpullして

0:02:56.844,0:03:00.080
そのなかに含まれているチュートリアルをはじめてください

0:03:00.080,0:03:03.150
ここでお見せしたAPIのいくつかは、変更されているかもしれませんが

0:03:03.150,0:03:06.954
Chromelessの背後にある考え方については、もちろん変わっておりません

0:03:06.954,0:03:08.989
もしChromelessに対して貢献をしたいとお考えでしたら

0:03:08.989,0:03:11.792
あるいは、何らかの見解をお持ちでしたら、

0:03:11.792,0:03:13.933
IRCやメーリングリストのいつもの場所で行われる口論にご参加ください

0:03:13.933,9:59:59.000
ご覧いただきましてありがとうございました