Return to Video

Introducing Chromeless

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

Japanese subtitles

Revisions Compare revisions