Affamative Way

前向きにグダグダいいながらコード書く

Firefox Developers Confarence 2008に参加しました

最近、○○に参加しましたばっかなのはうすうす感じてますが、懲りずに書きまふ

Mozilla Japan - イベント情報 - Firefox Developers Conference 2008

以下、参加メモ

Firefox Mobile -The One Web-

Mobileも意欲中に開発中ですよー!というデモが満載でした。

先月リリースしたこれだったのかな?同時通訳だったので自信なし。。
Fennec M9 (user experience alpha) for Maemo release notes

Ubiquity -言葉でつなげる Web-

  • インタフェースが悪いと人を殺す事もある
    • 1972年の航空機事故からインターフェースの重要性が説明された。
  • どういう理念をインターフェースを持つか
    • firefoxのアドオンが4000あるのでインターフェースがwordのツールバー全部出したみたいになっていいのか?


↑こんなの

  • ただ機能増えていくごとにインタフェースを増やしていくのを辞めたい
  • 地図を調べてをEmailで送りたい
    • Gmailで店の名前を書く → GoogleMapで調べる → URLをコピー → メールに貼り付け
  • 結果は不細工なURLが貼り付いているだけ
  • それUbi(ry
    • 単語を選択してUbiquityにmapと入力 → enter
  • 画像を地図の画像をメール本文に貼り付けできる
    • 人に話すようにコンピュータと対話出来る
  • 翻訳も簡単にできるよ
    • 文字を選択してtran を入力するとWebページ内で翻訳したものが置換される
  • メールの送り先もコンタクトリストをWebページを展開するだけで読んでくれる
  • edit-page → ページ内編集 → save で次回アクセスしたときに保存できる

例)
1. edit-page

2. ロゴ選択して削除して、適当な文字を入力

3. ここでsaveすると次回アクセスしても編集した状態が保存されます!
※元に戻すならremove-annotationsで戻せますのでご安心を

  • Ubiquityの利点
    • コマンドを共有が簡単
    • 再起動しないくていい

これでアラートを出してるみたい

<link rel="commands" href="http://www.hurl.ws/js/ubiquityhurl.js" name="Hurl.ws Ubiquity Commands" />
  • まとめ
    • Quick Silverみたいじゃなくてもいい、好きに変更できればもっといい
    • 話をするように言葉を使えば、インタフェースは改善できる
    • 他のアプリケーションの中で使えるようになればもっといい
    • Javascriptが書ければ作れるので、Extentionよりも簡単だからもっと開発者が増えるといいな!
感想

それUbi(ry ってもう始まってるのかも知れませんが、まぁそりゃなんでもできるよな〜という感じもしつつ。
日本語の自然言語の対応の実装もすでにされているとかなので、今後はコマンドラインインタフェースに慣れていない人にも革命的に広まっていくと面白いなーと思います。


まだ入れてない人は是非入れて試してくださいな

あとでじっくりやる

今すぐ使える HTML5 の新機能

w3cの中の人が話してくれました。

HTML5がどのような状態にあるのか?

"HTML:The Markup Langauge" daft spec
HTML: The Markup Language (an HTML language reference)
↑の読み方を教えてくれた

他にも一般用のHTML5の文書やオーサリングガイド(ブラウザ上で正しく機能するための作り方)
を準備する必要があると思ってる

HTML5 features that work today(すでに動くHTML5要素)
  • canvasエレメント
    • サポート:mozilla,Opera,Webkit
    • imgエレメントと同様だが、静的ではなく動的(ダイナミック)な画像が使える
    • javascriptで生成できる
  • video,audioエレメント
    • サポート:safari,opera,Fx3.1 over
    • 動画やオーディオの導入にプラグインが必要だったが、これを使うとそれが不要でコントロールできる
<video src="動画ファイル名"></video>
  • autoplay 属性
    • 自動再生される
  • controls 属性
    • 動画の下にブラウザ側で生成された動画のコントロールバーが表示される
    • 気に入らない場合はスクリプトで簡単にコントロールを追加することができる
  • API for native drag-and-drop
    • スクリプトが入らずで実現出来る
<div ondrop="ドロップ時の動作" ondragenter="ドラッグ時の動作" ondragover="ドラッグ中の動作">
<img ~~ ondragstart="ドラッグが始まった時の動作">
  • new form attriburtes & APIs
    • Operaはサポートしてる
    • データタイプの確認をクライアント側で実現できる
<input type="date">
  • データ型をバリデーションできるよ
  • 適切な情報が入力されるように強制できる
  • カレンダーが表示される
<input type="range" min=0 max=100 oninput="操作した時の動作">
    • スライダーが表示されてコントロールを表示することができる
    • 適切な情報以外は入力されない
  • offline Web application
    • サポート:mozilla,Opera
    • アプリケーションのキャッシュを操作して使える
    • 携帯を使って利用する場合に圏外の状態でもWebAppがシームレスな仕様をする時に使える
  • APIs for slient-side data stroge
    • 今はCookieを使ってるけど、一々サーバーに送ったり戻したりしている
    • 使えるステート情報やセッション情報をブラウザのメモリ上で利用することができる
  1. sessionストレージ
    • 単一のサイトを保持
      • mozilla,Fx3.1,IEでサポートされている
  2. localStorage
    • ブラウザを落としても、ブラウザのファイルシステムに保持されていて再利用できる
    • SQLiteと同様に利用できる

※時間都合で飛ばされた。。


他にもデモが↓にあるらしい
Web Hypertext Application Technology Working Group

HTML5 features that don't work yet

まだどのブラウザも対応できていない部分を説明

<time>
  • 時間を表示する
<progress>
  • ローディング中の状態を表示する
<meter>
  • ローディングの進捗状態(ステータス)を表示できる
<command>, <bb>, <menu>
  • アプリケーションの中にメニューを表示できる
<datagrid>
  • テーブルのようにデータが入った表をソートできる
  • Web Sockets

説明が聞きとれず。。
Web Sockets, Comet, and a Panel - Ajaxian
↑見た感じだとCometのような常時接続の仕組みかな?


C++できる人は実装で手伝ってください、特にdatagrid

感想

データ型がフロントで定義されるから安心といっても受け取る側は、結局変わらないから悩ましい部分はありますが、インタフェースの為にJSで頑張らずともHTMLで用意に実装できるようになるのはうれしい限りです。
しかし、できればブラウザごとの実装の差が少ないといいなぁ。。ブラウザ側で頑張る分対応してないものの為に頑張らなきゃ行けないのはちょっとねぇ。。。


とまぁ、なんだか複雑な心境でした

Firefox 3.1 の最新テクノロジー

  • コードネームは「知床」
新UI
  • tabの一覧表示が縮小版が表示されるようになった
  • window間のDDが再読込でなく編集途中のものがちゃんと移動されるようになった
  • tabが一つでもデフォルトでタブバーが表示される
  • セキュリティ関連のUIが改善
新機能
  • プライベートブラウジング
    • 既存の履歴は利用可能
  • 最近の履歴の削除
    • 時間限定が可能に
  • スマートロケーションバー
    • 明示的なキーワードで検索が可能
    • ^ で履歴、* でブックマークなど
    • スマートキーワードの検索を候補のトップに持ってくる
  • 柔軟なセッション復元
    • ウィンドウとタブを指定し、クラッシュの原因となるタブだけ外して復元できる
新標準
  • Web Fonts
    • fontをWebページから落として利用できる
@font-face {
   font-family:~
   src:~
}
  • Webfontがサポートしていなければ標準フォントが利用されるだけ
  • デモ: CSS Garden
  • オープンのWeb Fontも公開されている
    • ただ、日本語はまだ少ない
  • CSS3
    • メディアクエリー
      • 出力デバイスに応じたデザインが可能に
      • 幅、高さ、縦横比、解像度・・・etc
    • CSS3 疑似セレクタ
      • 最初の画像だけ操作とか
      • 角丸や、影付けができる
    • more CSS
      • 角度や回転
      • 改行以外の空白を1つに
    • Canvas
      • HTML5 Canvas Text APIが利用可能
      • video & audio
      • SVG filter, clip, CSS Transformなどとも併用可
  • その他のWeb標準
    • SVGによるHTMLの切り抜き、マスク、フィルタ
    • クロスサイトXMLHTTPRequest
    • js遅延評価
  • カラーマネージメント
    • PhotoShopなどでの表示色と一致する
    • safariとも同じ動作になる
  • JavaScript
    • JSON(rfc4627)サポート
      • JSON.parse(), JSON.stringify(),*.prototype.toJSON()
      • XUL内で仕様するnsIJSONはFx3で実装済み
    • ワーカースレッドAPI
    • API仕様は標準化されていない
JavaScriptの高速化
  • Javascriptはなぜ遅い?
    • 単純なスクリプトを処理する言語
    • 歴史的経緯より用途上そもそも高速化する必要性、需要がなかった
  • 動的スクリプト言語
    • 演算前に型チェック、変換が必要
    • 配列は存在しない
      • Arrayは配列でなくハッシュオブジェクト
      • すべてのプロパティアクセスでハッシュ計算が必要
    • クラスが存在しない
  • ちょっと前の議論C++Javaがどちらが速い?
  • JavaScriptの高速化手法
    • 動的スクリプト言語
      • ループ外で型チェックしてから固定型で演算
    • 配列が存在しない
      • 内部的に配列をつくって処理
      • プロパティのアクセスをキャッシュ
        • Chromeがうまいこと実装されている
    • クラスが存在しない
      • オブジェクトの定義を変更することはまれ
      • 同じ手順で定義したオブジェクトを同じクラスに
Just In Time Compiler
  • ボトルネックを高速なネイティブコードに変換
  • 実行時に繰り返し処理される部分を検出
    • 既存のJITは関数呼び出しをカウント
    • 一定回数以上呼び出されたメソッドをコンパイル
  • 実行時の情報を使った最適化が可能
    • 事前コンパイル型のC++などより高速化可能
  • JavaはHotSpotというJITの導入で大幅高速化
  • Action Script3もJITによって高速化
Tracing JIT
  1. ソースコードバイトコードに変換
  2. インタープリンタでバイトコードを実行しつつ監視
    • 稿本分岐発生時以外はペナルティ一切なし
  3. 稿本分岐のジャンプ先をループ視点候補として記録
  4. 一定回数以上ループしたら実行バイトコードを記録
  5. 記録された軌跡をネイティブコードに変換
  6. 以後ネイティブコードを実行
  • ループのバイトコードをトレース
    • 条件分岐を記録
    • 同一条件で実行される限りネイティブコードで処理
    • 記録した分岐結果と異なる場合はVMに処理を返す
    • switch文なども分岐テーブルではなくてトレース時に実行された特定条件との比較だけを行う
  • ループ完了または特定条件発生時にトレース終了
    • 例外発生時についてはトレース対象外
    • ネイティブメソッド呼び出しも基本的に対象外
  • 既存の手法より高速化可能
    • 実際処理される最小限のネイティブコードを生成
    • ループ中の関数呼び出しもネイティブコードで最適化
    • 型についても当然ループ開始時のチェックのみに

ただ、まだ開発は始まったばかりなので高速化の余地はまだまだ



感想

JITコンパイラすげーとしかいいようが、やがてはLLもフレームワークもこういう仕組みが採用されていくんかなーとなんか感動的でした。
ただ、仕組み自体はメモしてもさっぱり理解が付いていきませんでした。。。

Mockingbird

id:sotarokが開発に参加したMockingbird
説明するよりはデモ見てください。きっとすげーっていいますぜ

実世界とつながるブラウザ -灯の次の展開-

Firefox の灯 を作った方の発表でした。

実世界指向インタラクション × ブラウザ ということで様々なインタラクションをブラウザを介して提供しているそうです。

わくらわ

  • 同じ時間に同じページを見ているユーザのアイコンを表示する
    • ここから新たなコミュニケーションが生まれていく

Weave+Fennec: Continuity of Experience

401 Authorization Required

  • テーマがその場で切り替わるツール
    • 背景に地図や動的なものも表示できる

面白いので是非一回試してみると楽しいです。

懇親会

毎回、飯が少ないと言われていたので今回はこれでもかというくらいいっぱいありますた


抽選会でふぉくすけ人形は当たらなかったのが心残りでしかたありません > <


長くなりましたが、すごく楽しかったです。
mozilla japanの皆様素敵な集まりを開いていただきありがとうございました。