WEBVTT 00:00:01.668 --> 00:00:04.905 どうも。Lloyd Hilaielです。Marcio GalliとMozilla Labsで働いています 00:00:04.905 --> 00:00:09.710 この短いビデオを通じて、Chromelessの概観をお伝えしようと思います 00:00:09.710 --> 00:00:13.547 Chromelessはウェブのユーザインタフェイスを 00:00:13.547 --> 00:00:16.917 新たな発想を持った人が、簡単にいじれるようにするための実験です 00:00:16.917 --> 00:00:19.122 「ブラウザはどう見えるべきか、どう振舞うべきか」 00:00:19.122 --> 00:00:21.622 そんな会話にもっと人々を巻き込みたい 00:00:21.622 --> 00:00:23.954 それを目標としています 00:00:23.954 --> 00:00:26.828 技術的にはChromelessは特に新しいものではありません 00:00:26.828 --> 00:00:30.130 アプリケーションのランタイムとしてXULRunnerを用いますが 00:00:30.130 --> 00:00:31.932 これはFIrefoxやThunderbirdの土台になっているものです 00:00:31.932 --> 00:00:34.735 そして、その上に薄い抽象レイヤをかぶせます 00:00:34.735 --> 00:00:37.804 このレイヤが、ブラウザの迅速な開発を可能とします 00:00:37.804 --> 00:00:42.509 HTMLやJavascript、CSSといったウェブ技術が使えます 00:00:42.509 --> 00:00:45.412 Chromelessには単一のHTMLドキュメントが存在し 00:00:45.412 --> 00:00:48.588 ブラウザのユーザーインターフェイスを定義しています 00:00:48.588 --> 00:00:50.517 話を簡単にするために、この最初に現れるHTMLのことを 00:00:50.517 --> 00:00:54.152 ブラウザコードと呼んでいます 00:00:54.152 --> 00:00:57.457 普通のウェブコンテンツが他のサイト、iframeを埋め込めるのと同様に 00:00:57.457 --> 00:00:59.960 ブラウザコードも他のサイトを埋め込んだりできます。 00:00:59.960 --> 00:01:02.696 違いは、ブラウザコードには、iframeの中身のコンテンツに対して 00:01:02.696 --> 00:01:05.149 監視したり影響を与えるための、より強い権限があるという所です 00:01:05.149 --> 00:01:08.035 「既存のウェブのコンセプトを元にして 00:01:08.035 --> 00:01:10.237 ほんの少し力を増大させてやる」というテーマこそ 00:01:10.237 --> 00:01:13.106 Chromelessの背後にある基本的な概念です 00:01:13.106 --> 00:01:17.611 では、何が出来るのか、いくつか御覧いただきましょう 00:01:17.611 --> 00:01:20.080 今ご覧になられているのは、とても単純でありながら 00:01:20.080 --> 00:01:21.816 しかし機能的なウェブブラウザです 00:01:21.816 --> 00:01:24.584 ご覧になっているのは単純なHTMLです 00:01:24.584 --> 00:01:27.788 表示するのは、URLを入力するためのテキストボックスと 00:01:27.788 --> 00:01:30.157 ウェブコンテンツがやってくるiframeです 00:01:30.157 --> 00:01:32.395 Chromelessを使えば、ブラウザを作るのに必要なのは 00:01:32.395 --> 00:01:34.328 たったこれだけのコードなのです 00:01:34.328 --> 00:01:35.596 もう少し続けましょう。 00:01:35.596 --> 00:01:38.403 さて、フルスクリーンモードへの切り替えを可能にしたいならどうしましょうか？ 00:01:38.403 --> 00:01:40.634 フルスクリーンへの展開は明らかに 00:01:40.634 --> 00:01:42.903 普通のウェブページにはできないことです。 00:01:42.903 --> 00:01:45.247 新しいAPIを使う必要があります 00:01:45.247 --> 00:01:47.729 Chromelssにはrequireというグローバル関数があります 00:01:47.729 --> 00:01:50.629 それを使って新しいAPIにアクセスします 00:01:50.629 --> 00:01:54.014 この場合、miscライブラリをrequireします。 00:01:54.014 --> 00:01:55.931 miscという名前はただのプレースホルダですが、 00:01:55.931 --> 00:01:58.585 それはともかく、ブラウザのモードをフルスクリーンに切り替えるために 00:01:58.585 --> 00:02:01.221 その中の関数を利用できます 00:02:01.221 --> 00:02:03.638 ボタンのclickハンドラーの中にある 00:02:03.638 --> 00:02:05.336 この関数を発動させます 00:02:05.336 --> 00:02:07.896 ４行コードを加えただけで、私たちのブラウザは 00:02:07.896 --> 00:02:10.931 機能的なフルスクリーンモードを手に入れました 00:02:10.931 --> 00:02:12.966 では、次はもっと楽しいことをやってみましょう 00:02:12.966 --> 00:02:14.601 新たな、２つのアイデアを組み合わせます 00:02:14.601 --> 00:02:16.960 ではひとつめについて。私が前に申し上げたとおり、ブラウザコードは 00:02:16.960 --> 00:02:21.241 より高い権限を持ち、iframeの中で動くウェブコンテンツを監視できます。 00:02:21.241 --> 00:02:24.878 その例として、新しいコンテンツがiframeに読み込まれたときに 00:02:24.878 --> 00:02:28.682 発火(fire)するような、実験的なDOM Loadイベントを考える事ができます 00:02:28.682 --> 00:02:31.418 さて、二つ目のアイデアに使うのは、dom shotライブラリです。 00:02:31.418 --> 00:02:34.788 これを使って指定のDOMノードのスナップショット画像を取得できます 00:02:34.788 --> 00:02:37.391 その関数は、PNG画像データが埋め込まれた 00:02:37.391 --> 00:02:40.227 data URLを値として返します 00:02:40.227 --> 00:02:42.629 Marcioはこの二つの機能とちょっとしたjQueryを組み合わせて 00:02:42.629 --> 00:02:44.624 このデモンストレーション用ブラウザを組み上げました 00:02:44.624 --> 00:02:48.072 開いているタブのサムネイルが 00:02:48.072 --> 00:02:50.938 魚眼エフェクト付きで表示されます 00:02:50.938 --> 00:02:53.707 この例を通じ、あなたが「Chromelessとは何か」について 00:02:53.707 --> 00:02:55.308 素晴らしい理解が得られたとしたら幸いであります 00:02:55.308 --> 00:02:56.844 詳しく知りたい人はgithubからコードをpullして 00:02:56.844 --> 00:03:00.080 そのなかに含まれているチュートリアルをはじめてください 00:03:00.080 --> 00:03:03.150 ここでお見せしたAPIのいくつかは、変更されているかもしれませんが 00:03:03.150 --> 00:03:06.954 Chromelessの背後にある考え方については、もちろん変わっておりません 00:03:06.954 --> 00:03:08.989 もしChromelessに対して貢献をしたいとお考えでしたら 00:03:08.989 --> 00:03:11.792 あるいは、何らかの見解をお持ちでしたら、 00:03:11.792 --> 00:03:13.933 IRCやメーリングリストのいつもの場所で行われる口論にご参加ください 00:03:13.933 --> 99:59:59.999 ご覧いただきましてありがとうございました