[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.67,0:00:04.90,Default,,0000,0000,0000,,どうも。Lloyd Hilaielです。Marcio GalliとMozilla Labsで働いています
Dialogue: 0,0:00:04.90,0:00:09.71,Default,,0000,0000,0000,,この短いビデオを通じて、Chromelessの概観をお伝えしようと思います
Dialogue: 0,0:00:09.71,0:00:13.55,Default,,0000,0000,0000,,Chromelessはウェブのユーザインタフェイスを
Dialogue: 0,0:00:13.55,0:00:16.92,Default,,0000,0000,0000,,新たな発想を持った人が、簡単にいじれるようにするための実験です
Dialogue: 0,0:00:16.92,0:00:19.12,Default,,0000,0000,0000,,「ブラウザはどう見えるべきか、どう振舞うべきか」
Dialogue: 0,0:00:19.12,0:00:21.62,Default,,0000,0000,0000,,そんな会話にもっと人々を巻き込みたい
Dialogue: 0,0:00:21.62,0:00:23.95,Default,,0000,0000,0000,,それを目標としています
Dialogue: 0,0:00:23.95,0:00:26.83,Default,,0000,0000,0000,,技術的にはChromelessは特に新しいものではありません
Dialogue: 0,0:00:26.83,0:00:30.13,Default,,0000,0000,0000,,アプリケーションのランタイムとしてXULRunnerを用いますが
Dialogue: 0,0:00:30.13,0:00:31.93,Default,,0000,0000,0000,,これはFIrefoxやThunderbirdの土台になっているものです
Dialogue: 0,0:00:31.93,0:00:34.74,Default,,0000,0000,0000,,そして、その上に薄い抽象レイヤをかぶせます\N
Dialogue: 0,0:00:34.74,0:00:37.80,Default,,0000,0000,0000,,このレイヤが、ブラウザの迅速な開発を可能とします
Dialogue: 0,0:00:37.80,0:00:42.51,Default,,0000,0000,0000,,HTMLやJavascript、CSSといったウェブ技術が使えます
Dialogue: 0,0:00:42.51,0:00:45.41,Default,,0000,0000,0000,,Chromelessには単一のHTMLドキュメントが存在し
Dialogue: 0,0:00:45.41,0:00:48.59,Default,,0000,0000,0000,,ブラウザのユーザーインターフェイスを定義しています
Dialogue: 0,0:00:48.59,0:00:50.52,Default,,0000,0000,0000,,話を簡単にするために、この最初に現れるHTMLのことを
Dialogue: 0,0:00:50.52,0:00:54.15,Default,,0000,0000,0000,,ブラウザコードと呼んでいます
Dialogue: 0,0:00:54.15,0:00:57.46,Default,,0000,0000,0000,,普通のウェブコンテンツが他のサイト、iframeを埋め込めるのと同様に
Dialogue: 0,0:00:57.46,0:00:59.96,Default,,0000,0000,0000,,ブラウザコードも他のサイトを埋め込んだりできます。
Dialogue: 0,0:00:59.96,0:01:02.70,Default,,0000,0000,0000,,違いは、ブラウザコードには、iframeの中身のコンテンツに対して
Dialogue: 0,0:01:02.70,0:01:05.15,Default,,0000,0000,0000,,監視したり影響を与えるための、より強い権限があるという所です
Dialogue: 0,0:01:05.15,0:01:08.04,Default,,0000,0000,0000,,「既存のウェブのコンセプトを元にして\N
Dialogue: 0,0:01:08.04,0:01:10.24,Default,,0000,0000,0000,,ほんの少し力を増大させてやる」というテーマこそ
Dialogue: 0,0:01:10.24,0:01:13.11,Default,,0000,0000,0000,,Chromelessの背後にある基本的な概念です
Dialogue: 0,0:01:13.11,0:01:17.61,Default,,0000,0000,0000,,では、何が出来るのか、いくつか御覧いただきましょう
Dialogue: 0,0:01:17.61,0:01:20.08,Default,,0000,0000,0000,,今ご覧になられているのは、とても単純でありながら
Dialogue: 0,0:01:20.08,0:01:21.82,Default,,0000,0000,0000,,しかし機能的なウェブブラウザです
Dialogue: 0,0:01:21.82,0:01:24.58,Default,,0000,0000,0000,,ご覧になっているのは単純なHTMLです
Dialogue: 0,0:01:24.58,0:01:27.79,Default,,0000,0000,0000,,表示するのは、URLを入力するためのテキストボックスと\N
Dialogue: 0,0:01:27.79,0:01:30.16,Default,,0000,0000,0000,,ウェブコンテンツがやってくるiframeです
Dialogue: 0,0:01:30.16,0:01:32.40,Default,,0000,0000,0000,,Chromelessを使えば、ブラウザを作るのに必要なのは
Dialogue: 0,0:01:32.40,0:01:34.33,Default,,0000,0000,0000,,たったこれだけのコードなのです
Dialogue: 0,0:01:34.33,0:01:35.60,Default,,0000,0000,0000,,もう少し続けましょう。
Dialogue: 0,0:01:35.60,0:01:38.40,Default,,0000,0000,0000,,さて、フルスクリーンモードへの切り替えを可能にしたいならどうしましょうか？
Dialogue: 0,0:01:38.40,0:01:40.63,Default,,0000,0000,0000,,フルスクリーンへの展開は明らかに
Dialogue: 0,0:01:40.63,0:01:42.90,Default,,0000,0000,0000,,普通のウェブページにはできないことです。
Dialogue: 0,0:01:42.90,0:01:45.25,Default,,0000,0000,0000,,新しいAPIを使う必要があります
Dialogue: 0,0:01:45.25,0:01:47.73,Default,,0000,0000,0000,,Chromelssにはrequireというグローバル関数があります\N
Dialogue: 0,0:01:47.73,0:01:50.63,Default,,0000,0000,0000,,それを使って新しいAPIにアクセスします
Dialogue: 0,0:01:50.63,0:01:54.01,Default,,0000,0000,0000,,この場合、miscライブラリをrequireします。
Dialogue: 0,0:01:54.01,0:01:55.93,Default,,0000,0000,0000,,miscという名前はただのプレースホルダですが、
Dialogue: 0,0:01:55.93,0:01:58.58,Default,,0000,0000,0000,,それはともかく、ブラウザのモードをフルスクリーンに切り替えるために
Dialogue: 0,0:01:58.58,0:02:01.22,Default,,0000,0000,0000,,その中の関数を利用できます
Dialogue: 0,0:02:01.22,0:02:03.64,Default,,0000,0000,0000,,ボタンのclickハンドラーの中にある\N
Dialogue: 0,0:02:03.64,0:02:05.34,Default,,0000,0000,0000,,この関数を発動させます
Dialogue: 0,0:02:05.34,0:02:07.90,Default,,0000,0000,0000,,４行コードを加えただけで、私たちのブラウザは
Dialogue: 0,0:02:07.90,0:02:10.93,Default,,0000,0000,0000,,機能的なフルスクリーンモードを手に入れました
Dialogue: 0,0:02:10.93,0:02:12.97,Default,,0000,0000,0000,,では、次はもっと楽しいことをやってみましょう
Dialogue: 0,0:02:12.97,0:02:14.60,Default,,0000,0000,0000,,新たな、２つのアイデアを組み合わせます
Dialogue: 0,0:02:14.60,0:02:16.96,Default,,0000,0000,0000,,ではひとつめについて。私が前に申し上げたとおり、ブラウザコードは
Dialogue: 0,0:02:16.96,0:02:21.24,Default,,0000,0000,0000,,より高い権限を持ち、iframeの中で動くウェブコンテンツを監視できます。
Dialogue: 0,0:02:21.24,0:02:24.88,Default,,0000,0000,0000,,その例として、新しいコンテンツがiframeに読み込まれたときに
Dialogue: 0,0:02:24.88,0:02:28.68,Default,,0000,0000,0000,,発火(fire)するような、実験的なDOM Loadイベントを考える事ができます
Dialogue: 0,0:02:28.68,0:02:31.42,Default,,0000,0000,0000,,さて、二つ目のアイデアに使うのは、dom shotライブラリです。\N
Dialogue: 0,0:02:31.42,0:02:34.79,Default,,0000,0000,0000,,これを使って指定のDOMノードのスナップショット画像を取得できます
Dialogue: 0,0:02:34.79,0:02:37.39,Default,,0000,0000,0000,,その関数は、PNG画像データが埋め込まれた
Dialogue: 0,0:02:37.39,0:02:40.23,Default,,0000,0000,0000,,data URLを値として返します\N
Dialogue: 0,0:02:40.23,0:02:42.63,Default,,0000,0000,0000,,Marcioはこの二つの機能とちょっとしたjQueryを組み合わせて
Dialogue: 0,0:02:42.63,0:02:44.62,Default,,0000,0000,0000,,このデモンストレーション用ブラウザを組み上げました
Dialogue: 0,0:02:44.62,0:02:48.07,Default,,0000,0000,0000,,開いているタブのサムネイルが
Dialogue: 0,0:02:48.07,0:02:50.94,Default,,0000,0000,0000,,魚眼エフェクト付きで表示されます
Dialogue: 0,0:02:50.94,0:02:53.71,Default,,0000,0000,0000,,この例を通じ、あなたが「Chromelessとは何か」について
Dialogue: 0,0:02:53.71,0:02:55.31,Default,,0000,0000,0000,,素晴らしい理解が得られたとしたら幸いであります
Dialogue: 0,0:02:55.31,0:02:56.84,Default,,0000,0000,0000,,詳しく知りたい人はgithubからコードをpullして
Dialogue: 0,0:02:56.84,0:03:00.08,Default,,0000,0000,0000,,そのなかに含まれているチュートリアルをはじめてください
Dialogue: 0,0:03:00.08,0:03:03.15,Default,,0000,0000,0000,,ここでお見せしたAPIのいくつかは、変更されているかもしれませんが
Dialogue: 0,0:03:03.15,0:03:06.95,Default,,0000,0000,0000,,Chromelessの背後にある考え方については、もちろん変わっておりません
Dialogue: 0,0:03:06.95,0:03:08.99,Default,,0000,0000,0000,,もしChromelessに対して貢献をしたいとお考えでしたら
Dialogue: 0,0:03:08.99,0:03:11.79,Default,,0000,0000,0000,,あるいは、何らかの見解をお持ちでしたら、
Dialogue: 0,0:03:11.79,0:03:13.93,Default,,0000,0000,0000,,IRCやメーリングリストのいつもの場所で行われる口論にご参加ください
Dialogue: 0,0:03:13.93,9:59:59.99,Default,,0000,0000,0000,,ご覧いただきましてありがとうございました