2011年8月20日開催された第３回ブラウザー勉強会に参加してきたので、その時のメモです。

TwittterのログはTogetter – 「第3回 ブラウザー勉強会(#BrowserWS)のまとめ」にまとまっています。

第3回 ブラウザー勉強会

午前の部 :コミュニティー セッション

ショートセッション : kyo_ago  (http://tech.kayac.com/)
「Testで始まる物語（ストーリー） QUnit CUIの紹介」 {#kyo_agohttp:tech.kayac.comtestqunitcui}

[Ustream] [発表資料]

jQuery Plugin testフレームワーク {#jqueryplugintest}

  • 非同期実行されるコードのテストが面倒
  • UIのテストが面倒

テストコードは次の３つから構成される

  • テスト前のHTML
  • テストするコード
  • テスト後のHTML

コードにすると以下みたいな感じ。

<script type="dom/base" /> <script type="test/code" /> <script type="dom/comp" />
  • iframe内でこれを行うので、セレクタなどの心配が不要
  • 自動的にdiffをとれる
  • 複数端末上で分散実行
  • 複数ブラウザでの比較
  • pluginのテストコードを生成

ショートセッション : はせがわようすけ 「Using Win32 API inside Chrome Extension」 {#usingwin32apiinsidechromeextensionbrowserws}

[Ustream] [発表資料]

Chrome Extensionの構成

  • HTML + JavaScript
  • マニフェストとリソース

Chrome Extentionの制約を超える {#chromeextention}

NPAPI DLL – プラグインを書くためのもの

  • OSに依存する
  • Extension内にplugin DLL
    • リモートHTMLから直接利用は無理

マニフェストにdllのロードパスを書くだけで読み込める。

  • 拡張の制約が超えられる
  • 化石のようなもの

NPWIN32 {#npwin32}

何でも使える汎用DLL * JavaScriptから何でもできる

JavaScriptからネイティブコードを呼び出すことができる

  • Windowsの方のalertを呼び出す
  • デスクトップ情報の取得

NaCLとの違い * NaCLは OSネイティブの機能は呼び出せない。

ライトニング トーク : normalian さん (http://d.hatena.ne.jp/waritohutsu/) {#normalianhttp:d.hatena.ne.jpwaritohutsu}

[Ustream] [発表資料]

「ブラウザ戦国時代で考えるクロスブラウザなテスト方法（仮題）」

  • ブラウザのバージョンアップ頻度が高くなった

  • ブラウザレンダリングの差異

  • JavaScriptのイベントハンドリングの差異

  • HTMl5の対応状況の差異

jQuery & Modernizr {#jquerymodernizr}

jQuery {#jquery}

  • jQuery Core
  • jQuery Mobile
  • jQuery Template
  • jQuery Validate
Modernizr {#modernizr}
  • ブラウザのHTML5対応度合いの確認

jQuery UIとjQuery Mobileはソースコードは一部流用されている。 混ぜると危険。

モバイルブラウザのタブの傾向と対策 -Androidスマフォを主に- saneyuki_s

[Ustream] [発表資料]

  • モバイルブラウザのタブの傾向まとめ スマートフォンブラウザの「タブ」の様式にデファクトがない

  • ウィンドウ式

  • メニューからウィンドウを出して切り替える

  • 画面下部に表示

    • Opera
    • Sleipnir Mobile
    • サムネイル付きが多くてわかりやすい

  • 画面上部に表示

    • Dolphine Browser
    • タブレットでは一般的

  • FIrefox Mobile式

    • サイドに格納する

番外

  • IE9 Mobile – タスクスイッチャーと連動
  • Sleipnir Mobile – タブグループ機能 -  面倒くさい工程

まとめ

様式は落ち着かないだろう。

Google Chromeはエンタープライズの夢をみるか : Hebikuzure {#googlechrome:hebikuzure}

[Ustream] [発表資料]

  • ユーザ権限でインストールできる
  • 勝手にアップデートできる
  • Google Chrome Frame

管理者が投げ捨てる可能性

Chrome にはグループポリシー機能がある {#chrome}

(Windows版について) Documentation for Administrators – The Chromium Projects

Chromum Projectの方に書かれてる

  • HTTP認証の動作
  • コンテンツの設定
  • 検索プロバイダ
  • パスワードマネージャー
  • プロキシ
  • ホームページ
  • 拡張機能
  • スタートアップページ
  • Google Chrome Frameの動作(無効にできる)
  • Google Updateの動作
    • Google製品の個別で自動アップデートの有無
  • Google Installerによるソフトウェアのインストールの設定

 

Chromeのmsiインストーラーもある(?msi=trueでダウンロード)

  • Active Directorで配布できる
  • 特定のバージョン縛りができる

グループポリシーのテンプレート(ADM,ADMX)が配布されているので、グループポリシーの追加ができる。
PolicyDefinitionsというフォルダーにコピーする事で入れることでも読み込める

Q&A {#qa}

  • セキュリティアップデートも無効にできる

午後の部 : テーマ セッション 「ブラウザーと Web が描く『夢』」 {#web}

加藤 誠さん (Mozilla Japan)
「Openness, Innovation, and Opportunity」 {#mozillajapanopennessinnovationandopportunity}

[Ustream] [発表資料]

Mozillaのミッション「Openness, Innovation, and Opportunity」

非営利法人が扱えるお金が制限されているので、Mozilla Corporationという株式会社ができた。

Mozilla Labsをメインに

  • 実装だけではなくて、モックなどでもあり

  • RUST 言語

  • 将来のFirefoxで取り入れられることも

    • FIrefox Syncなど

  • UI/UX

  • WEB API

などがLabの範囲

Design Challenge {#designchallenge}

  • 特定のテーマでデザインやモックでアイデアを募る
  • アイデア(デザイン)の発表する場所
  • 実装ではなく、あくまでもアイデア

Test Pilot {#testpilot}

  • ユーザーのブラウザ利用データーを取得して解析
    • 収集用のアドオン
    • 結果を公開
  • データが偏る傾向があるため、偏りを取る手法を使う
  • ユーザーのクリックするホットスポット調査とか

 

Prospector {#prospector}

  • ユーザーが目的のサイトにたどり着くためのUXの模索
  • Prospectorは実装ありきのアイデア

Firefox SHARE / F1

ソーシャルネットワークとの結合

Q&A {#qa}

アップデートスピードが早くなったのはなんで? * Webの流れが早くなってる

UI/UXのアプローチ

  • 目線の移動がおかしいとか
  • 公開された議論してるので、おかしいとクレームがくる

検索バーとURLバーの統合について

  • 一応Firefoxとしてもそういう議論がある
  • ユーザーからのフィードバック次第になる。

Daniel Davis さん (Opera Japan)
「ブラウザの未来：HTML5の先には？」 {#danieldavisoperajapanhtml5}

[Ustream] [発表資料]

1899年に書かれた未来2000年について。

未来的なものを想像しても、洋服や建物が変化していない。

More than HTML5 {#morethanhtml5}

Device APIs

  • まだまだカメラでデータ取得は先だけど 。
  • Web APIとARを連動してやるなど(Tweetの取得など)

逆にカメラにブラウザが乗ることもあり得る

More like a platform {#morelikeaplatform}

Web on TV * ブラウザが載ってるTVも増えている * ブラウザはWebを見るためではなく、Appとして利用されてる * 多くのメーカーはSVGでUIを使ってる(レンダリングエンジンがブラウザ)

  • TVのUI(user input = リモコン)は最悪
    • これが改善されないとWeb on TVが流行らないかも
    • ジャイロリモコン
    • キーボードタイプ

ブラウザの進化

  • ブラウザによりUIが静的から動的に
  • 動的からインタラクティブへ
    • ペーパーレス = 静的なものがまだ多い => マルチメディア

履歴書の事例 * 履歴書に動画を入れる * マルチメディアをもっと普通のドキュメントに使う

再生だけではなく、作成もブラウザで? * contenteditable * 今はまだ非力

ネイティブよりウェブ?

  • JavaScriptは早く、パワフルになった
  • 比較的に書きやすく勉強しやすい
  • 100%オープン
    • ひとつの会社などにコントロールされてない
    • 未来的にそれはいいこと

未来の予想は人によって違う

  • ウェブはひとつの団体にコントロールされないのが重要
  • コントロールされないウェブは未来も一緒に作る

Q&A {#qa}

ブラウザがいろいろなものに乗った場合、それぞれに対して最適なUIは異なるが、それを上手くやる工夫

  • OSとブラウザは大きくは変わらない
  • ブラウザを一番下において、その上に何かをかぶせて作らせれば異なるものに対して拡張を作りやすい。

春日井 良隆さん (日本マイクロソフト株式会社 UXエバンジェリスト)
「マイクロソフトにとってのWebって？」 {#uxweb}

[Ustream] [発表資料]

MSとしてIE6のシェアを減らすのに取り組んでいる。 @mskkie の中の人 with ミゾグチさん

管理者キット9(IEAK 9) * カスタマイズしたIEをパッケージ化、配布、管理するためのツール
なんとか版IEというのはIEAKでパッケージ化したものを使ってる

The Internet Explorer 9 Blocker Toolkit
WindowsアップデートやMSアップデートを管理するツール

HTML5 Native to WIndows

  • ウェブの技術をネイティブに持っていく
  • ウェブサイトをアプリケーションと同じように使う方向性

タブレットPCは失敗した…

HTML5+JavaScriptでアプリケーションを作る。

MSは同じ表示をするという基本思念がある。

Windowsはカーナビ専用のOSがある。

Windows Phone はIE9ベースのブラウザ

MSと携帯会社である程度端末の取り決めがある

  • ボタンは3つを付ける
  • 性能についても取り決めがある
  • 解像度は固定

IE10は8-12週でリリースする。

MSはブラウザ固有の機能は付けない方向

IEの拡張性について

  • IEはカスマイズは上げて行く方向ではない感じ
  • 拡張を簡単に作る仕組みはまだ見検討

IE7について

  • IE7さんはわすられています。
  • まずはIE6からなくしていく。

IDE, Expression について

  • Expressionはdevよりの作り

  • デザインはDWの方がいいかも

  • ExpressionはそっけないVisual Studioな感じ

  • IE10は今年はでない

  • Windows 8 がタブレット