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
    ４行コードを加えただけで、私たちのブラウザは
  • 2:08 - 2:11
    機能的なフルスクリーンモードを手に入れました
  • 2:11 - 2:13
    では、次はもっと楽しいことをやってみましょう
  • 2:13 - 2:15
    新たな、２つのアイデアを組み合わせます
  • 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
kazy (じゃわてぃー) edited Japanese subtitles for Introducing Chromeless
kazy (じゃわてぃー) edited Japanese subtitles for Introducing Chromeless
kazy (じゃわてぃー) edited Japanese subtitles for Introducing Chromeless
kazy (じゃわてぃー) edited Japanese subtitles for Introducing Chromeless
taninsw edited Japanese subtitles for Introducing Chromeless
taninsw edited Japanese subtitles for Introducing Chromeless
taninsw edited Japanese subtitles for Introducing Chromeless
taninsw edited Japanese subtitles for Introducing Chromeless
Show all

Japanese subtitles

Revisions

Our website uses cookies for analysis purposes.