Mozilla Vision 2012 Conference Dayに参加してきたので、その時のメモです。(いつも通り正確性は保証されません)

Boot to Gecko

B2G = Boot to Gecko

なぜ必要なのか

モバイルは閉鎖的すぎる

過去を振りかえる

• 2002年 ブラウザの場合

IE のみだったので、拡張性はなかった。 拡張する必要がなかった

やがて複数のブラウザが登場して競争するようになった。 ブラウザ間で実装の競争が起こると

• UXが良くなる
• ユーザーはハッピーになる
• 標準化も良くなっていく -> 書き手もハッピー

ブラウザとモバイル

モバイルプラットフォームは閉鎖的で、プラットフォーム側がコントールできるようにしている。

様々なプラットフォームに対応しようとするとそのプラットフォームに対応しないといけない -> 時間の無駄になってる。

プラットフォームを移行するとデータが移行できない。 このようなsilosがあるとオープンではない

これを変えるためにB2Gを作っていく。

Webプラットフォームができる事

オープンなものにするために必要なもの

• オープンなApp Marketsが必要
• プラットフォーム間を移行する際にデータも移行できる Firefox Syncのデバイスを超えた同期システム。
• BrowserID

ネイティブアプリだと使えるケドWebからは使えないモバイルの機能があるのはWebのバグなども

Boo2Gecko

B2Gに必要なもの

• iOS負けないUX
• オープンスタンダートを構築する。B2G以外でも同じAPIが利用できる
• Apps。Web自体がapp storeみたいなもの

デモ

• ロックスクリーン、ホーム画面もWebアプリとして実装されている
• 60FPS出るようにしている

電話ができるようにWeb APIとしてDevice APIを実装してある。 ネイティブコードではなくてWebの技術で実装されている。

ホーム画面もHTMLベースなので、ソースコードが見られる

• Quake 3を使ったアプリ
  • WebGLのエンジン

クラッシュしたけど、直ぐ立ち上がる。

B2Gの実装

iOSなどのネイティブAPIの代わりに、Webエンジン/標準化されたDevice APIsがあり、ネイティブUIの代わりにWebベースのUIが存在する。

すべて再開発するわけではなく、Webレイヤー以外の部分は既存のものをサイっ利用したりする。

Gonk ( Androidのものも再利用) WebランタイムにMozillaは集中開発して、GPSなど他の部分に関してはAndroidのコードを利用する。

B2Gは何がしたい

• モバイルをオープンにしたい
• プランや開発やソースコードもオープンにしている
• 作成したAPIを標準化したい
• オープンなエコシステムを作成したい
• Boot2Webkit など他の実装も作れるようにしたい
• B2Gで動くものはB2Wでうごくようになるべき

一からはじめたプロジェクトではない。 Androidのコミュニティ

Q&A

Q どのようにして標準化していくのか。 それぞれの実装に対してそれぞれのUIがあるから、ポートする作業していく必要がでていく。 Gaiaに対してのUIのガイドラインが必要

A 標準化していくのはシステムのテーマ

Q non-nativeなものを場合、ゲーム等最大限の性能出すためにネイティブAPIを開発するの?

A ネイティブAPIを実装するつもりはない。 WebGLがOpenGLが遅ければそれはWebのバグである。 クロスプラットフォームを常に担保していくという目的を持っているので、少し遠回りでもWeb APIをやっていく。

Q アプリが落ちたときに他のシステムを巻き込むの?

A プライオリティの高いものを別のプロセスを走らせる事もできる。 OSがとても軽量なので、全てがダウンしても直ぐに起動できる。

電話のプロセスは別のものとして動いてるのでOSがダウンしても生きてる。 プロセスのセパレーションと呼ばれるものが実装できてる。

Linuxカーネルがあってその上にいくつかのXULや電話やBTなどのプロセスなどを起動していく。そして最後にB2Gのプロセスが起動して、その中でWeb Appが起動する。

Chromelessのようなイメージで、全てがiframeのようなものになって、iframeにマニフェストを与えて、iframeを別プロセスで動作させることができる。

Q どのようにB2Gを提供していくか? Mozillaがサポートするの?

A Mozillaは直接デバイスを出荷することはなく、 Mozilla Phoneパートナーと一緒してやっていく。 メジャーなキャリアとはやり取りを始めていて、最終的にそのキャリアが出していくことになる。

Q デバイスを買ってきて、OSとしてB2Gを後入れるということはできるの?

A 今サムソンのデバイスを使ってるが勝手に入れてる。 なので、将来的にはより多くのデバイスをサポートして行って、そのような事が可能になる

Web 標準の今、そして未来

Tantek Çelik

スライド : Open Standards Stories & Practices

CSSの標準化に参加したことについてのお話

• ISO

買った上で誰でも見ることができる => 昔のオープン

• CalConnect

お金を払った上にテストに参加できる。 テストスイートなのに、対象が限定されている。

W3Cはだれても見られるオープン

• W3C tests

CSS WGはレポートを公開していたので誰でも見ることができた。 CalcConnectは公開してはいけないという縛りがあった

オープンなテストは再現性が担保されている

まだCSS WG不満があった

更にテスト、レポートをオープンにしていく必要がある。

• Blog
• Wiki

CSS WGのWikiを作成した。まだ閉ざされていた部分があったが、IRCやバグトラッカーなども公開していくようにした。

当時にメーリングリストはあったが、W3Cのメンバーでないとみられないようになっていたが、テクニカルな内容のものは全てPublicにしていくようにした。

• editor ‘s drafts

これもエディターが書いてる途中のものも公開していくようにした。

• last call

2011になってCSS2.1がやっとRCになった。9年もかかった。

CSS3の確固たる基盤になるCSS2.1ができた。

学んだ事

オープンは進化する

2. XFN

• 2003年

SXSWという会議に参加した時の話。

ブログロールの仕組みについての会議で、ものすごく複雑な仕様になっていた。

rel=”friend”がついてればいいぐらいな簡単なものを提案した。

実際にどういう状態がfriendなのかについて調査した。

CC

XFNは初めてのCCライセンスを使ったオープンな標準化となった。 そこからフィードバックをもらってXFN1.1をリリースした。

rel=me

一番大きな6文字。自分を示すrel属性で、多くのSNSなどで使用されている。

rel=me , OAuth

２つを組み合わせることで、OpenIDをよりシンプルなものを実現できるでは?

XFNから学んだものは単純でシンプルであるべきということ

3. MicroFormat

• rel=license

この時初めてMicroFormatという事が使われた

その頃はまだ標準に関するWikiがなかったので、Wikiで公開した。= 初めてのWikiで公開され知多Web標準

人を表現するhtml

classnameでつけていた習慣など、定義されていた言葉を元に定義した。

hcard , hcalendar

既にある用語を元に作成した標準。 既存のフォーマットを使用したので馴染みやすい。

Webレビューのフォーマット

いろいろ研究した

80/20の法則 : 比較などのある程度のフォーマットの表現が見えてきた

• hreview

hreviewという標準化した

microformats.org

これまでの標準化団体とは少し異なる。

• プロセスそのものを文章化
• 今までの教訓を掲載した
• IRCもオープンに
• パブリックなログを公開

wikiがemail以上の公式な文章であるとした。 -> Wikiが厳格であるようにした

• IRCに変更をとばすbot
• スパムの除去

Wikiのイイ点としては同時に翻訳が行えるようになった。 今も標準化作業中に17ヶ国に翻訳作業がされている。

どんどんフィードバックを送る。標準化は誰でも参加ができる環境に翻訳は重要

Wikiは誰でも参加できる。W3Cは組織としての参加が必要になってる。

全てPublic domain / CC0にすることで全てがオープンであることを体現する。

microformats2

更にシンプルになるMicroformat。 ユーザーはシンプルなしようが求められる。

4. HTML5

• 2004年

W3Cのワークショップが始まり。

HTM + CSS + DOM VS XHTML2 +XForms +etc..

これまでを進化させていく方向　VS W3CのXML

incremental VS replace

進化させていくと置き換えていくの対決

HTML VS XML は8:11でHTMLは負けた

ベンダーはHTMlの方を支持していた。MS,Apple,Mozilla等

Web自体は進化しないと行けない

WHATWGが設立

ここでHTMLは進化していった。

Web Apllication specがHTMl5になっていった。

Core+new APIsという構成はCSSも同じ

WHATWGはMITライセンスをしようした!!! これまであるライセンスを再利用した

W3Cは独自のライセンス – フォークが許されないライセンス

W3CとWHATWGの共通点

• 要素

エディタを信頼する VS WG全体で協議する

というような対立が生まれてた。

5. W3C CGs (コミュニティグループ)

• 2011年

2011にW3Cコミュニティグループができた

あるテーマに関するコミュニティグループは4人いればできる

CC0 & OWFa の仕様

Mozillaの弁護士にそれぞれ調べて持ったが、どちらもいい感じだった。 オープンに使えるライセンス。

仕様作成の10個のベストプラクティス

1. オープンに作る(標準をオープンに作っていく)
2. オープンに反復を行う(完璧じゃなくてもいいから試行錯誤を出す)
3. オープンWikiを使う
4. オープンに討議をする
5. ブログ、Tweet、あらゆる手を使ってオープンに
6. オープンなアーカイブ&ログ
7. Wiki編集はIRCに投げる
8. オープンテストスイート(堅牢、反復的に
9. テストレポートをオープンにする
10. 可能な限りコミュニティを巻き込む( 多くの人を巻き込む)

境界を超えた範囲で巻き込んだ作業をする。標準はグローバル

Q&A

Q MicroFormats以外に草の根的なものはありますか?

A OAuthはメーリングリストだけでできてきた

Q ベストプラクティスはWeb以外に対しても適応できる?

A 他にも適応できるだろう.

Facebookがオープンプラットフォームということをやろうとしている

Q W3Cのノンフォークライセンスだということだけど、コミュニティができてフォークが行われてる。W3Cが変わってきてるの?

A 今は２つの方向ができてきてる。 HTML5はまだノンフォークなライセンスになってる。

将来的には切り替わるかもしれない。

pdf.js — HTML5 と JavaScript の限界に挑戦する

なぜpdf.jsが必要なのか

信頼されたネイティブコードは脆弱性があると問題になる。

pdfに何が必要なのか

portableなのに巨大なフォーマット

• Adobeのみが実装してるサブセットがある
• pdfの一部サブセットを実装することを目的にした

圧縮されたpdfを戻して、パースしてdrawTextみたい形にしてレンダリングする。

Document -> ページとオブジェクトがある。

HTML/CSS/JS

• JavaScriptはTyped Arrayなどを使用して高速化
• Fast 2D Canvas、GPUで加速的
• CSS @fant-face フォントに対応、ダイナミックにフォントをロードする機能
• data: URI バイナリデータをJavaScript上で作れる

SVGなどを使わなかった理由もある。 = スピード

pdf.jsの手順

ダウンロード

バイナリデータをXHRでresponseTYpe = “arraybuffer”でダウンロードできる。

デコード、解読、パース

• PNG,LZWデコーダーをJavaScriptで書いた
• パーサーもJavaScriptで書いた

レンダリング

パースしたものをレンダリングしていくのが大変

• 2D CanvasでLineやarcsなどを描いていく
• bitmapもimgで描画する

問題

• 2DCanvasは十分ではなかった。
• Dash line等Canvasには実装されてなかった。 even odd ruleなどもそう

解決方法として2DCanvas自体を拡張していく

bitmap画像のデコードをサポートしてなかった。

• img と Canvasはjpeg2000
• フォーマットを追加するのは大変
• JavaScriptでデコーダーを書く

フォントの問題

• OpenType , TrueTypesなどブラウザはサポートしてないTypeがあった
• Type1は一番PDFで使わてるのにCSS Font faceでサポートされてない

解決方法としてOpenTypeに変換して、中間フォーマット的にType1をサポートした。

まだまだやることはいろいろ

• Shading fillはCSS gradientsで実装されてる
• Image Mask はCanvasがネイティブでできる
• PostScriptオブジェクト – PostScriptのインタープリタをJSで
• TYpe3フォント PDF.js自体でレンダリングを行ってる

pdfをWeb技術でレンダリングする事に成功した。

デモ

• Web技術で実装するとモバイルでも動かせる
• フルのPDFレンダラーがブラウザ上で走っている

PDFビューアーのUI

UIを作っていく

• ページビュー(サイドでページをプレビューする)
• ハイパーリンクのサポート
• テキストの選択 – 難しい
• テキストの検索 – 難しい

ハイパーリンクの実装

2種類のリンク方式がある

• 相互参照
• 外部リング

Webブラウザが認識できるaリンクに変換した。 そのオブジェクトをpdf.jsでレンダリングした上にaリンクを重ねたものを表示して扱うようにした。

相互参照はポイントへ飛ぶようにしていて、バックボタンが機能するようになっている。

テキストの選択

Canvasは画素が並んでいるだけなので選べないが、オーバーレイに透過性を持ったdivタグでテキストを描画している。

アクセシビリティもサポートできている。

pdf.jsの高速化

コンパイル

pdf.jsはPDFのサブセットをレンタリング

• PDFレンダラーはインタープリタだった
• PDFレンダラーのJITコンパイルする switch等をコンパイルしたら省略できるので、直接draw*を呼べるようにできて十数倍の動作速度が得られる。
• Overview of pdf.js guts < Chris Pitchin’ Hey

ダイナミックなコンパイレーションを行なってFunction()で実行してる。

Web Workers

Web Workersを使って別のスレッドで、デコード、パース、フォント変換、デコードイメージを行う。

• main threadではdrawを行なっていく。(これはUIブロックを生む)
• 別スレッドで実行してるものはUIブロックの影響されない
• 同時併用でタスクを実行できるので高速化

pdf.jsの現状

• 大部分の機能は完成している
• Firefox,Chromeの拡張して利用できる

* HTML/JS/CSS Can redner PDFs *

next

• PDF内のテキストを検索
• HTTP byte-rangeリクエストを使ってPDFを分割ロード。メモリの削減になる
• Web Worker内でCanvasをサポート。UIブロックを潰せる
• (maybe) WebGLで高速レンダリング？？？ GPUをもっと使える

質問

Q なぜCanvasを使用したのか?

A JavaScriptが直接やり取りできる。SVGはDOMを経由しないといけないため、より早くするには難しい。

PDFではPDFファイルがあるのだからDOMを作成してやるのは不要だ。

Q 政府などでフォームとしてPDFを利用する場合。インタラクティブなPDFな方向はするのか?

A ２つのフォームフォーマットがある

• Acro format – 標準化されてる
• XNA format – プロレタリア

PDF.jsでも実装しやすい部類のもの。 AdobeではSpiderMonkeyベースのエンジンが使わていて、Validationが行われていたりする。

pdf.jsは100%のpdfのサポートするわけではないので、フォームなどのやり取りをべーすとするならばHTMLベースのほうがよいものになるかもしれない。

Q セキュリティポリシーについて

A pdf.jsの用途について

A メールクライアントなどの場合 HTMLのセキュリティポリシーに寄っていく(クロスドメインの問題がでるかもしれない)

Q テキストの描画方法

A PDFは左から右へ書けというようなコマンドが存在する。 まだ、サポートしてないが、Canvasの機能を一部利用かもしれない。

Q Canvasにテキスト選択を追加しなかった理由?

A Canvasにそれが実装されなかったのはとても管理が大変だったから。パフォーマンスとテキスト選択のトレードオフの結果

Q 対応するブラウザについて

A pdf.jsはオープンWeb標準を使って作っていくという方向から始まった。だが、ブラウザにはまだ実装されていない機能があって、その部分が拡張実装として、Firefox や Webkitに実装されていった。

dot line と even fill あたりが互換性ブラウザの問題を生んでる。 => スタンダートを追加していく

重要なのはTyped Arrayのサポートが大事で高速に動作するにはこれが必須。# LT

LT

“実践”Emscripten

• Alon zakai
  • EmScriptenの作者
• C, C++をLLVMでJavaScriptへ変換する
  • バイトコードになってそれをエミュレート
• 手作業よりも少し遅いぐらい
• まとめ
  • 2-4倍ぐらい遅くなる
  • 変換作業が短くすむ
• JSViz
  • GraphVizを変換
  • アニメーション機能付き
  • グラフを考えるようにするのを視覚化

ブラウザプレゼンテーションの教育的利用

• Nurota Lab.
• 教師と生徒とのやり取りが必要になる。
  • 臨機応変に内容を変えられるようにする
  • 黒板以上のことをできるようにする
• インタラクティブにコードを実行しながら事業を進行できる
• Webページを埋め込むとかWeb技術を使える
• 数学とか物理とか利用方法がある

Firefox Syncサーバを建てて見た

• Firefox Sync
  • 保存情報をアドオンを同期する機能
  • Androidとも同期できる
• Mozillaのサーバに情報が転送される
  • ローカで暗号化されてから送信している
• Syncサーバを自前で建てて利用する
  • 証明書を用意してHTTPSでやり取りできる
• Python, SQLite、Macurialで動く
  • ビルドして、コマンドだけ動く
• いろいろ調整しないと動かないけど

Firefox 布教大作戦

• Firefox を 灘高校 に広める
  • IE 83%のシェアな高校
• Firefoxノートを1300部発注
  • 教員に止められた
• 「布教」は簡単ではない

Firefoxのゴキゲンな通知UI

• Popup Notifications
  • doorhangerがコードネーム
• ノンブロッキングな通知UI
• PopupNotification.show()
  • 6つの引数で設定
• 通知の複数表示ができないバグ
• ドキュメントが充実してない
  • コードはドキュメントになってる
• まとめ

ドアハンガーをもっと簡単につかいたい! – Piro

• PopupNotication.jsmの罠
  • CSSでアイコンの表示
  • コードバックをたくさん指定しないといけない
• 簡単に扱えるライブラリを書いた

海外の開発コミュニティをを利用して世界デビューをしよう

• Linuxに企業として参加
  • コミニティに参加していくには
• ユーザーもどんどん参加する
• 英語のレベルはあまりきにしない
• 批判されても落ち込まない
• 思いついたらすぐ投稿(反応を早く)
• オープンにディスカッションをする
• キーとなる人を早く見つける
• まずは感謝

才能のソーシャルメディア

• Stylelist DirectoryというSNSサービス
  • 才能のソーシャルメディア
  • 美容師のソーシャルメディア
• 欧米だと美容師は芸術家的に個人活動
  • 日本だとサロン
• 美容師が才能を発揮できるようなサイト
  • 活躍のアピール
  • 一般の人たちもそれらに反応
• Joomla の CMSを使って運営してる
  • 他の業界とのコラボレーションとかやっていきたい

Scratchでつなぐオープンな学び

• Openな学び
• Scratch
  • 8 – 12歳向けのMITが開発してるソフト
  • 80万人ぐらいアクティブユーザー
• デモ

Interop Tokyoでのオープンなネットワークエンジニア育成

• Interop
  • ネットワークの国内最大のイベント
  • いろんな会社の機器を使ってネットワークを構築する
  • 超ネット
• ShowNet
  • STMプログラム
  • インターネット技術者を育てる

まとめ

Web 標準の今、そして未来 by Tantek Çelik がとても面白かった。仕様を作っている側からの視点の話は結構貴重な貴重な気がした。

Mozilla飯よかった。

メモツール(セッションごとに別々のファイルで保存)

• Qute for PC/Mac
• Mou

• 海外のJavaScript情報を見つけよう
• 世界のJavaScript情報を読もう
• 今からRSS購読すべきタグと検索結果
• ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ
• HOW TO LEARN (これだけ記事じゃないですが)

世界のJavaScriptを読もう @ 2012を発表していた時、RSS購読フローの部分がなぜか受けが良かったようなので、簡単な補足を書いておきます。

自分はRSSリーダを多用しているので、何でもRSSにしてとりあえずRSSリーダーに流れてくるような状況を作っています。
Webサイトを見ていて、Read It Latorなどで後で読むことにしても結局読むのを忘れてしまうことがあるため、Read It Latorに登録したリストがRSSとしてRSSリーダーに流れてくるといった感じです。

Pinboardやはてなブックマークやソーシャルニュースサイト等もRSSで購読していると、同じ記事を扱ったものが何度もRSSに出てきます。
これは今からRSS購読すべきタグと検索結果でLDRの読み方にでも書いていましたが、SBMなどは量が多くなってしまうので、全て目を通そうとすると気疲れします。
そのため、SBMや検索結果等のRSSは高めのレートにして心理的に飛ばしやすい(LDRでいうSキーを押す)状態にしています。

なんで検索結果のRSSは★4にしてるかというと、検索結果RSSで出てくるサイトは★3のサイトと被ったりすることがあるので、
★4で飛ばしても★3で出てくるからまあいいっかと適当な感じで読める安心感が生まれます。

今からRSS購読すべきタグと検索結果 | Web scratch

ここから、発表してたときにウケてた部分ですが、RSSリーダで読んでいるときに少しでも気になった記事は
とりあえずTwitterへ投稿しています。(Post Now browsing to TwitterがLDRから直接投稿できるようにしているのもその辺の関係)
一応軽くは目を通してからTwitterへ投稿していますが、専門的な記事や英語の記事など一度みるだけじゃ理解が出来なかったり、判断が難しい記事も多いと思います。

そういう時にTwitterのフォロワーから反応があると理解しやすかったりします。
またFavやRTがあったものが流れてくるようにRSSを購読しておけば、重要な記事 (少なくてもフォロワーが興味を持った記事)が再度RSSとして流れてくるようになります。

こういう感じで、重要な記事は何度もRSSとして流れるようにして、読み忘れを減らしたり & 心理的に軽い気持ちでフィードを読み飛ばしても大丈夫なように意識しています。
他の人の力も借りて手を抜きつつ、人があまり見ないようなところもチェックするようにして、いろいろな情報を共有できればいいかなと思います。

どういう所などをみているかについてはオフライン勉強会でJSer.info一周年について発表してきた | JSer.infoのスライドの方にもまとめたのでそちらを見てください。

• オフライン勉強会でJSer.info一周年について発表してきた | JSer.info

iOSアプリケーションのUnit Test – 岸川

テストを習慣化するには

なぜテストを書かないか

• テストの効果がわかりにくい
• iPhoneアプリのテストってどう書けばいいのかワカラナイ
• デバイス固有のデータを利用していたりする

ツール/フレームワークを使う

• 繰り返し実行するのが簡単
• 自動化できる
• テスト結果が見えてくるようになる

無理をしない

• モデルのテストは書きやすい
• 論理構造はそう簡単に変わらないはず
• 繰り返し実行するメリットがあるので(正常系/例外/異常/境界値)をちゃんとテストする

表示は論理構造が簡単にひっくり返る事があるので、テストを無理に書こうとしない

テストしやすいコードを書く努力はする

• テストしやすいコードは、使い易いコードなので良い設計にも繋がる
• メソッドをきちんと分けてあげる

単体テストをワークフローに取り入れる

• OCUnit
• GHUnit

OCUnit

• XCode標準
• XCodeと統合されてるが、アサーションが貧弱
• 非同期テストがサポートされてない

GHUnit

• XCode非標準
• アサーションが豊富
• まともなテストができる(teardown/setup)
• 非同期テストのサポート(waitを使える)
• OCUnitのテストケースも実行可能
• viewのテスト機能が追加された

Viewのテスト

GHVerifyView あらかじめ取っておいた画面の画像と照らしあわせてテストしてくれる 画像での比較

Flashからcocos2dに移植した話 – CAつりポンチーム

• Flashとcocos2dに移植した

• 1万７千件のレビュー

• 平均4.5☆

• Twitterによる拡散

• 完全無料広告なし
• アメーバピグ
• ストレスフリー
• App Storeのレビュー誘導

オフライン対応

非会員対応

• ほぼすべての機能を非会員でも遊べる
• 会員と非会員の差別化
• タイトル画面の対応のみ
• ポイントの管理をローカルにおいて、サーバ側からポイント管理を排除

iPod Touchのユーザーが30% => オフライン対応の成果?

cocos2dとFlash

大量の画像を書きだす

• 手動は日が暮れるので
• アクションを作って、画像ファイル名=レイヤー名にしてバッチで生成

texturepacker を知る

• 一枚の画像に素材を貼り付けて、座標データからファイルを切り出して表示する
• CSS スプライトみたいな

AutoSD

自動でRetinaと通常の解像度を作成できる

Spriteはフォルダ管理

Finder上でフォルダ構造そのままにSPriteを管理できて楽 texturepacker上に反映する

見ていて飽きないガチャを作れという司令

まずはFlashで動きを作る

1. 色を選ぶ
2. ガチャを出すアニメーション

自作AIRツールで座標の抽出

swfから座標の抽出をするソフトを作成した

• 座標系の違いを補正する スクリーン座標 -> デカルト座標
• Flash上のレイアウトがそのままcocos2dに移植

cocos2dを利王した最適化と高速化

• 描画処理の高速化
• テクスチャロードの非同期化

iPhoneのOpenGLの傾向と対策

• OpenGLの描画を呼び出すほどオーバーヘッドが大きなリ重くなる傾向
• なので、texturepackerを使ってテクスチャを一回でロードしたりして 呼び出し回数を減らした。

テクスチャロードの非同期化

• 非同期で先にテクスチャを読み込んで、読み込み待ちを減少させる
• addImageAsyncを使って非同期ロード

テクスチャフォーマットの調整

• RGBA4444に統一してる(32bit -> 16bit)

モーション制御の最適化

CCPawnやCCSequenceを処理コストが多いでの、人体とかが苦手だった。 モーションデータを削減して、モーション制御をNEONで並列処理にして最適化

コンフィグの微調整

ccConfig.hでCCUSESVBOを無効にするだけで結構変わる

Time Profiler

順次上から見て最適化をしていく

まとめ

• テクスチャは一枚にまとめてCCSpriteBatchNodeで描画
• NEONなどSIMDを使って最適化
• ccConfig.hをみてチューニング

OCTOBAから見た面白いAndroidアプリ – 丸岡

Android Market

アプリ削除率

• 37%?

OCTOBA

• 男性が多い
• 30-40代が多い

パーミッションの問題

Any.Do

• 機密ログデータの読取
• このパーミッションを要求するアプリはレビューしない

いろいろなパーミッション

• 機密ログデータの読取
• 連絡先データの読取
• SMSメッセージの送信
• アカウントの認証情報を利用
• 起動中のアプリケーション情報
• 端末ステータスとIDの取得

広告SDKでGPSデータを利用してターゲティングを使用したりするものもある。 組み込んだアプリでGPSを使ってなくても、パーミッションが求められる

レビューの基準

人気ジャンル

セキュリティが5月(2011)あたりが入ってる

• ツール・設定系
• ゲームエンタメ系

昔はツール系が多かったが、ゲームエンタメ系が増えてきている

検索キーワード

1. 電話帳
2. 時計
3. メール

使ってもらえるアプリの考え方 – fladdict

ATMアプリを考えてみる

架空の事例で考える

リサーチ

• 既存のATMの機能?
• 既存のATMの不便?
• どういう時に使う

既存のATMの機能

• 残高確認
• 入金、引き出し
• 送金
• 設定変更

オンラインバンキングを含めるともっとたくさんあるので、 どの機能をアプリに含めるのかを考える -> 絞り込む、利用の想定

シナリオ

• 通販などの振込
• 通常の送金
• 支払い忘れへの緊急対応
• 残高確認

逆にスマートフォンで保険や税金管理などの操作はしないとのでいらないはず

90%のユーザーが必要な機能を入れる

• ヘルプなしでわかるアプリを作る
• アプリを起動してからそのアプリのタスクを1-2駅程度の間に完了できるようにする

必要な機能を絞り込んでから、コンセプトを立てる

コンセプトの定義

iPhoneアプリは大体4つの形がある

• ユーティリティ型
• ナビゲーション型(TableView)
• タブ型
• 没入型(全画面)

それぞれのタイプをプロトタイピングして検証していく。

ユーティリティ型

• 最低限だけの機能
• 残高の確認
• 送金ができる

ナビゲーション型

ユーティリティより機能は増える

• ニュース
• 残高
• 送金
• 設定

タブ型

ナビゲーション型と似た機能を持つが、平行して機能を使える

没入型

iPhoneのUIに頼らないので時間がかかる

• 実際の画面に似せるなど
• ナビゲーションを出してみたり
• 現実のメタファ

今回はナビゲーション型かタブ型

ナビゲーション型

• 拡張しやすい
• 単純

タブ型

• 拡張に限界がある
• 平行して機能を利用できるのが利点

ナビゲーション型は階層が深いと、作業を切り替えるにコストがかかるので、タブ型の方がやりやすい

タブ型のメニュー

よく使うものから左から右へ配置していく

ニュースを残高確認後に見る人はあまりいない ニュースをATM側としては配信したいので、ニュースを左に持ってきて自動的に見せるようにした。

設定画面

• ピンコード
• アカウント名
• 銀行アカウントのパスコード

入力UI

• Pickerを使って桁ミスなくすなど
• 送金時はボタンのミスタッチをなくす
• スライドで送金処理を完了させる <= 難しいUIな気がする…
• 最初にボタンを詰め込みすぎない

Edit Qute for PC/Mac

有名な企業やライブラリはコーディングルールも公開している事が多いので適当にまとめてみました

JavaScript style guide – MDC Docs

Mozilla/Firefox向けのものなので、一部ECMAScriptの範囲を超えたものも含まれています。
多くの人が見ていると思うので、見たことない人は一度読んでみるといいです。

Google JavaScript Style Guide

Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳(日本語版)
Googleのコーディングルールですが、ルールを並べるだけではなくなぜ悪いのかについても触れているので、一読をお勧めします。
Closure Linterというチェックツールもあるため、採用しやすいかもしれない。

JQuery Core Style Guidelines – jQuery JavaScript Library

jQuery Coreのもの。
Typeチェックの仕方についても触れている。

Dojo Style Guide – The Dojo Toolkit

Dojoのコーディングルール。
コード例が豊富で、命名規則やホワイトスペースの扱いなど細かいところまで入ってる。

Felix’s Node.js Style Guide

Felix’s Node.js Style Guide(和訳)(日本語版)
Node.jsにおけるコーディングルール。(公式なものではない。no official document)
Node.jsに限らず、クライアントサイドJavaScriptに置いても参考になる部分は多い。

Code Conventions for the JavaScript Programming Language

Douglas Crockfordによるもの。
コーディングルールというよりは慣習的なもの。
同作者によるJSLintも併用しましょう。(JSLint or JSHintは他のコーディングルールであっても採用してよいもの)

Code Guidelines for Rich Internet Application Development

コーディングルールではなくてガイドライン的なものです、HTMLやCSS、JavaScriptについてのガイドラインを書かれている。

Introduction to Apple JavaScript Coding Guidelines

JavaScript Coding Guidelines for Mac OS X(日本語版)
Appleによるコーディングのガイドライン。
“JavaScriptのベストプラクティス”でコーディングで気をつける事について触れている。

The WebKit Open Source Project – WebKit Coding Style Guidelines

JavaScriptではありませんが、Webkitにおけるコーディングルール。
ホワイトスペースやLine breakingの所はJavaScriptの場合でも参考になる。
uupaaさんがこれをベースに一部分を変更した感じで使ってるそうです。

• CodingStyle – uupaa-js – JavaScript Coding Style Guide – JavaScript Library for Casual Creator – Google Project Hosting

サイボウズで学んだこと – IT戦記

amachangによるもの。
大規模 JavaScript 開発におけるルールや命名規則、デバッグ、パフォーマンスについて触れています。
コーディングルールを整えてどのように実践したかについて参考になります。

JavaScriptパターン (オライリー本)

JavaScriptパターン ―優れたアプリケーションのための作法

posted with AZlink at 2011.5.27

Stoyan Stefanov,豊福 剛
オライリージャパン
売り上げランキング: 8213

Amazon.co.jp で詳細を見る

この書籍のChapter 2. Essentialsにおいて、JavaScriptのコーディングルールが紹介されています。
また避けるべき事やどう書くべきなのかについてもかなり深く書かれています。

コーディングルールは”どう書けばいいのか分からない”という人向けのものではないと思います。どう書いたらいいのか分からない人は、まずなぜそのように書いたらダメなのかを知るのがよいと思います。
そのため、書き方に不安を持ってる人はなぜダメなのかについても触れているGoogle JavaScript Style Guide 和訳を読むのがよいと思います。(読みやすい日本語版もあるしね)
コーディングルールはコードに一貫性を持つためにあると思います。頻繁にルールを変える必要はないと思いますが、必ずしもそのルールが、その時の(実行環境|JavaScript)において最適な書き方ではない場合もあります。そういうときはルールの更新をしましょう。

おまけ

自分の場合はWebStormの自動整形に任せている(といっても膨大なルール設定があるため、上記で紹介したコーディングルールを自動化できる)ので、基本的にはIDE任せという書き方にしています。
セミコロン忘れなどについてはcomplete current statement機能( [WebStorm]Complete Current Statementがとても便利な件(・∀・))を使ったり、WebStormのシンタックスチェックはかなり優秀なのでエラーも書いてる途中で発見しやすいです。(シンタックスチェックも細かく制御できる)
そのため、やっぱり道具任せといった感じではありますが、WebStormを使用していない場合も同じコードが書けるようにある程度のルールは持っています。
Google JavaScript Style Guide + WebKit Coding Style Guidelines に近いですが、ホワイトスペースなど見た目的なちょっとした違いにはそこまで厳しくしない感じで書いています。
if, for, while, doなどの{}は省略しない(WebStormの自動整形で中括弧を強制的につける)、誰が見てもある程度読める感じにする、ブレークポイントを打ちやすい空間を作るように配慮するなどなどで、他のコーディングルールに書いてある事と同じようなものだと思います。

「JavaScriptで大規模ゲーム開発」渋川

ソーシャルゲームの定義

• ユーザー間で非同期のやり取りが発生する

ngCore

• マルチプラットフォーム
  • 同一ソースでAndroidとiOSに対応
  • テスト環境はFlashにも対応

ゲームの構成

• ngCore上にゲームロジック/JavaScript
• サーバ/APach+FCGI上に認証とか結果の書き込みをMobageサーバに

役割分担

• ngCoreのクライアント
  • アクションシーン
  • サーバ側で作ったデータの再生
• ゲームサーバ
  • パラメーター保持、変化
  • アイテム管理
  • ミッションのスロットの目の決定など
  • ずる防止をするためサーバ側でロジックがある

ngCoreの開発サイクル

• node.jsで書かれたビルドサーバでビルドを行う。
  • ファイルの結合とか

コード

• CJSライクなモジュール
• クラスを作るsubclass関数
• ゲームはmain関数から始まる
• Core.UpdateEmitter でゲームループを回す

ゲームの基本構成

• シンプルなクラス群
  • Sceneクラスを継承してシームを作っていく
  • Sceneを遷移してゲームの遷移が行われる
• サーバ側からjsonのジョブスタックを受け取る
  • ミッション結果なども配列で返ってくる
  • 知らないジョブが来たら無視が基本方針
  • クライアントは順番に再生していくだけ
  • 新しいミッションも簡単に追加できる
• サーバエラーがおきたらホーム画面に強制的に戻る

DnLig/ngGo

• DnLib
  • ゲーム開発の共通ライブラリ
• ngGo

開発拠点

• サンフランシスコ
• 日本

• パキスタン

• SKypeチャットが主なインフラ

• git
  • git flow
• ドキュメントSphinx

ngGo/ngBuilder

• – データ駆動で行えるように
• - パラメーターチューニングのしやすさ

デバッグとテスト

• デバッグメニュー
  • サーバにデバッグ用画面がある
• Jasmineを使ってる

今後のngCore

• 3D対応、HTML5対応

まとめ

JavaScriptベースで

オフラインWebアプリケーションの作り方 (白石)

Google Gearsを使ってオフラインアプリケーションを作ったことがある。

オフラインWebアプリケーション

Google Gears

• Google Gears終了 –> HTML5へ以降を推奨
  • HTML5を中心にするようになった

オフラインでも読めるアプリの作り方

• それほど実装は難しくない
• アプリケーションキャッシュを利用すればいい

アプリケーションキャッシュとは

• 静的なリソースをキャッシュすることができる機能
• ローカルキャッシュの利点
• IE以外のブラウザでは実装されてる

キャッシュマニフェスト

• リソースのリストを作成する
• Titanium Mobileのリファレンスはローカルキャッシュされてる

アプリケーションキャッシュのJavaScript API

• window.applicationCacheにJavaScriptから操作できるアプリケーションキャッシュAPIがある。

アプリケーションキャッシュを利用する上での注意点

• キャッシュマニフェストを更新しないとリロードで反映しない
• キャッシュ容量が限られている
  • モバイルとかだと10MBぐらい

オフラインでも書けるアプリの作り方

• 割りと面倒なもの
• デスクトップアプリとやりたい事はあんまり変わらない

オフラインWebアプリを作るポイント

• 基本はリッチクライアント+同期機能

利用できるローカルストレージ

• Web Storage
• Web SQL Database
• Indexed Database API
• File API
  • ドメインごとに仮想的な空間
  • セキュリティ的なものがあるため

双方向同期

かなり難しく面倒くさい – フェールセーフ – 更新の衝突 – 同期のタイミング – ネットワーク状態、データの状態管理 – ローカルDBのスキーマ管理/サーバのスキーマと2つできてしまう – ローカルDBのクオータ(5MBぐらい)

- 容量の限界がきたときにどうするか

まとめ

• オフラインアプリケーションといっても読む/書くの2つがある
• 書く/同期的なアプリケーションはかなり面倒臭い
  • 割り切ったほうがいい

スケールするUIについて – @monjudoh

Objective-Cで非同期処理のチェーンライブラリとか

要素数

ループの中でbind/unbindしてたので大量に追加されたときに重たかったのでliveメソッドに変更 bindはここの要素に付けるから、要素が多いと死ぬ。delegateとかliveはその枠の方にイベント一個張るだけだから軽くてすむ。

D&D

• ユーザが触れる範囲だけにイベントを付ける
• D&Dは複数のイベントから成り立つので複雑(down->move-up)

要素の生成

• UITableView
  • 表示範囲+ぐらいのみを描画してる
  • 再利用してる

JavaScriptのテスト事情 – @os0x

• JavaScriptのテスト
  • まだまだ未成熟
• 二種類
  • JavaScriptのテスト
    • JavaScriptだけなので比較的わかりやすい
  • JavaScriptを含めたテスト
    • UIとかも含むインテグレーションテスト

インテグレーションテスト

• インテグレーションテストは書くのが大変
• 動いてあることが保証できるので重要
  • 後から追加修正とかも

インテグレーションテストの定番 – Selenium

• インテグレーションテストは遅い

テスト実行環境

• カピバラさん + Webkit

QUnit,Jasmine

• Jasmineの方がアプリケーションテストは向いてる

jasmine-headless-webkit

• jasmine のspecをCUI環境で実行できる

Titanium Mobile – Masui Yuichiro

• ココログ
• liblis
• AKB
• サイボウズLiveの
• MobSnap

Titanium Mobile

• JavaScriptだけでアプリを作成できる
• Titanium Mobile のモジュール売買できる
  • mobile market place

モバイルのUX

• それぞれのプラットフォームに合わせた形に変換する
• それぞれに合わせたUIはUXに
• タブバーの位置がAndroid/iPhoneで逆になったり

飯食う

• 追加モジュールとサポートのみが有料
• 認定トレーニング

感想

• ちょっと落ち着きがなかった気がするの
• あまり掘り下げた感じにはならなかったのは少しもったいない気がした。

メモ環境

• Mou

イベントのページ: Mozilla 勉強会＠東京 6th
Twitterのまとめ: Mozilla 勉強会＠東京 6th – Togetter

• 14:30 – 15:00: 開場、発表者準備

• 15:00 – 15:10: Opening

自己紹介の流れ。

• コマンドの補完

Inspector

• 次世代のセキュリティポリシー
  • XSSの攻撃防止
• コンテンツ種別で読み込み制御
  • 画像やCSSやJSなども制御できるようにする
• Webkitではほぼ開発されてる

• デフォルトセキュリティポリシーがいろいろ強化される
• CSPの使い方
  • X-Content-Security-PolicyのHTTPレスポンスヘッダを送信
  • HTMLのメタタグは書き換えできたりするものだからヘッダーで
  • Apache でCSPの設定
• CSP対応に移行する
  • JS,CSSは外部ファイルに
  • evalを使わない
  • ポリシー違反レポートでどこがおかしいのかも確認できる
    • ヘッダーでレポートを報告するURLを指定してログを残せる
  • CSPブックマークレットもある

HTTP Strict Transport Security

• Do-Not-Trackヘッダ
  • ブラウザ側でサイトに通知する
  • IE,Safariも対応
  • Chromeだけ非対応
• 受け取ったらユーザー追跡をしない

• ALT
• back to owner tab
• Fox Splitter

restartlessのコードリーディング

• アドオン SDK を利用した初めてのアドオン開発– by knagato
  
  • 初めてアドオン開発する人が対象
  • SDKを使ったアドオン開発を特徴
    • HTMLやJavaScriptなどが中心で、XULやXPCOMなどMozilla特有の機能を使わなくても開発できる
  • 開発環境の種類
    • Add-on BuilderをWeb上での開発
      • 再起動不要なのでその場で試せる
    • Addon SDKを使った開発
      • コマンドラインベース
  • Add-on SDKのチュートリアル
• Thunderbirdアドオンによるワークフロー開発について– by Nakashima
  
  • 提案するツール
    • 自分自身でのプロセス改善が可能
    • やり取りの簡略化ができる
  • http://www.p2pwf.com/ に仕様の詳細
• Forking Secure Login – by saneyuki_s
  
  • Secure Loginアドオンのフォークの話
    • 現在はメンテナンスアップデートのみになってる
    • 全面改装してる
  • 一部機能の省略
  • レガシーコードの除去
  • doorhanger対応
    • Firefoxに入ってるSSLのポップアップするやつ
• jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること – by kyo_ago
  
  • requestAnimationFrame
    • setIntervalの問題点としてアニメーション向けではない
  • jQuery 1.6から削除された
    • setIntervalとrequestAnimationFrameが衝突してキューがたまる
    • タブがバックグランドにあるときの挙動
• ES.next WeakMap– by mooz (@stillpedant)
  
  • WeakMap = 連想配列
  • Firefox6から利用可能
  • {}やObject()と比較して
    • keyにオブジェクトが指定可能
      • ハッシュはkeyに文字列しか指定できない(toStringされてる)
      • WeakMapはkeyにオブジェクトが指定可能
        • オブエジェクトしか指定できない
        • プリミティブ値はエラー
      • オブジェクトの外部拡張
        • DOMノードに独自プロパティは危険
        • ES5ではオブジェクトの拡張がfreezeできる
        • オブジェクト自体は拡張しないで、外部に付加情報を持つ
        • WeakMapを利用する
          • キーとして外部情報をもたせる
    • keyに指定されたオブジェクトを弱く参照
      • CGにたいして
• Firefox4以降のE4X– by teramako
  • ワイルドカード
    • *が指定子に使える
  • 属性アクセス
    • @が使える
  • Firefox3.6までは上記のものがE4X以外でも使えた
    • Firefox4以降は禁止された
    • ざんねんでしたね

デジタルプラクティス

発行は季刊で1月（創刊号のみ2月），4月，7月，10月に発行されるのをPDFで読める。
内容も多岐にわたっていて、論文というほど堅くはないものもあり読みやすい。

デジタルプラクティスでは，実務の現場におけるIT 実践例・経験・ノウハウのレベルの成果でも社会的に有用なものならば歓迎し，IT実践における新たな発展を先導するような論文を積極的に採録します
創刊に当たって

また、著名な人も結構寄稿されているので、読みたいものが何かしらあると思います。

• プログラミング言語Rubyの世界普及戦略
  まつもとゆきひろ
• ウェブブラウザLunascapeの起業戦略と技術戦略
  近藤秀和
• クラウド時代のユーザインタフェースの方向性
  ～サービスサイエンスでUI の方向性を検証する～
  鹿島泰介

などなど

情報処理推進機構：ニューヨークだより

IPAにより月一でPDF形式で発行される。
アメリカのIT関係についての最新事情を扱っていて、ものすごく詳しく書かれている。
ITやスマートフォンなどのデジタル機器(OSについても)やITと政治についてなど、かなり詳細な情報を掲載している。
無料とは思えない質だったり、情報元のソースを脚注で入れてくれるので、情報元自体も見られてとても良い感じになっている。おすすめです。

Wizard Bible

Wizard Bibleとは、基本的に毎月リリースしているWebマガジンです
Wizard Bible

発行は月一でtxt形式で発行されている(最近不定期だった気がする)
内容はどういったテーマで書けばいいのか？を見ると分かると思いますが、セキュリティ関係のものが中心となっています。それに関係するプログラミングや数学などの内容も扱われています。

IS Report System

本サイトは 「同志社大学生命医科学部医情報学科 医療情報システム研究室」 及び 「同志社大学工学部インテリジェント工学科 知的システムデザイン研究室」 の所有する研究報告である ISレポートの管理システム
IS Report System

医療やソーシャルメディア、インターネットや携帯電話などの電子機器について書かれたレポートが公開されています。
HTMLとepub形式(一部PDFも)で配布されていて、図などが入ったものも多く内容も結構読みやすいです。
結構書かれているジャンルが幅広い気がします。

The Pragmatic Bookshelf | Read Our Magazines

Pragmatic Bookshelfにより毎月発行されるプログラミング関係の電子雑誌。
HTML PDF epub mobiが用意されている。

番外編

タイトルから外れて有料の雑誌。
といっても海外だと電子版の雑誌は珍しくないので、気になったものだけ。

JsMag – the magazine for JavaScript developers

JavaScriptについて扱う月刊誌。
一号毎に購入($4.99)か一年分まとめて購入($53.88 )ができる。
日本にもこういうの欲しいですね。。

Hacker Monthly – Print Magazine of Hacker News

Hacker Newsで話題になったものを厳選して扱う月刊誌。

おわり

電子雑誌というタイトルにしたけど、別に雑誌じゃないものが多い気がする。
今はブログやソーシャルメディア経由でだいたいの情報はカバーできるだろうけど、論文や雑誌、スライドなどある程度労力を伴って書かれたものにはブログとは異なるものがあると思ってるので、こういうものも読んでいきたいですね。

JavaScriptの論文かき集める仕組み欲しい。日本でも小さなもの含めて年間二桁は書かれてる感じする。
Twitter / @azu_re: JavaScriptの論文かき集める仕組み欲しい。日 …

とか思ったりするのはそういう理由です。

他にもおすすめがありましたらよろしくお願いします。

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

第3回 ブラウザー勉強会

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

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

[Ustream] [発表資料]

jQuery Plugin testフレームワーク

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

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

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

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

<script type="dom/base" /> <script type="test/code" /> <script type="dom/comp" />

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

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

[Ustream] [発表資料]

Chrome Extensionの構成

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

Chrome Extentionの制約を超える

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

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

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

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

NPWIN32

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

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

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

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

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

[Ustream] [発表資料]

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

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

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

• JavaScriptのイベントハンドリングの差異
• HTMl5の対応状況の差異

jQuery & Modernizr

jQuery

• jQuery Core
• jQuery Mobile
• jQuery Template
• jQuery Validate

Modernizr

• ブラウザのHTML5対応度合いの確認

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

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

[Ustream] [発表資料]

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

• ウィンドウ式

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

• 画面下部に表示
  • Opera
  • Sleipnir Mobile
  • サムネイル付きが多くてわかりやすい
• 画面上部に表示
  • Dolphine Browser
  • タブレットでは一般的
• FIrefox Mobile式
  • サイドに格納する

番外

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

まとめ

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

Google Chromeはエンタープライズの夢をみるか : Hebikuzure

[Ustream] [発表資料]

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

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

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

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

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

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

[Ustream] [発表資料]

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

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

Mozilla Labsをメインに

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

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

  • FIrefox Syncなど
• UI/UX
• WEB API

などがLabの範囲

Design Challenge

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

Test Pilot

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

Prospector

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

Firefox SHARE / F1

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

Q&A

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

UI/UXのアプローチ

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

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

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

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

[Ustream] [発表資料]

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

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

More than HTML5

Device APIs

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

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

More like a platform

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

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

ブラウザの進化

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

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

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

ネイティブよりウェブ?

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

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

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

Q&A

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

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

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

[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 がタブレット

環境記録
メモソフトウェア: bodhi/MarkdownEditor – GitHub

サイボウズラボユース中間結果発表会

NDAは結ばずに、成果をオープンすることを条件に支援を行う。

• サイボウズ・ラボユース

「ロボット制作を支援するログ解析プログラムの開発」 by @sn_monochr

マイコンカー

赤外線センサーを使ってリアルタイムで制御するカー。 C言語で開発を行う。

マイコンカーの走行ログ

走行ログ

• 制御プログラムの動作状態
• 赤外線などのセンサー状態

メモリが限られているので、データはシフト演算などを使って一つにまとめて保存、送信を行う。 これらのデータを可視化していくため、解析ソフトウェアを開発する。(Windows)

走行ログの可視化

• データに基づいたマシン調整が可能になる
• １つのソフトウェアに統合

夏の合宿

目標設定をして合宿を行った

• 走行ログの可視化

ラインの中でモードの変更をライン色の変更してる。

• 無線通信でログのやり取りをするのが今後目標

走るコースに、車線変更や直角カーブなどのマークが書かれていて、それを読み取ってモードを変えることで動きを変える。

「世界最速の正規表現JITエンジンの実装」by @sinya8282

• 正規表現エンジンの作成
• 正規表現の歴史は古い 1960～
• • 実装はたくさんある
• • いろいろやられている

「正規表現エンジンの開発」には意義があるのですか? -> 車輪は車輪でも「最速の車輪」を開発する

正規表現エンジンRegen(れーげん)の開発

Regen

動的コード生成

• Xbyak でJIT regex
• 正規表現に合わせて、プログラムがプログラムを生成する
• 正規表現コンパイルに最適化レベル導入(O0 – O4)
• • 最適化しにくいパターンもある

マッチング並列化

• 並列化のための特殊なモデルを実装

ベンチマーク

Google RE2との比較。

JITしても3-5倍の高速化 -> 今はメニーコアの時代 -> 正規表現の並列化

• 6コアでガクって落ちるのはアーキテクチャの問題

まとめ

高速化の二台手法は実装した、成果もでた

• JIT
• 並列化

これからの課題

• 実システムへの応用、ツールの作成
• 正規表現エンジンじゃないと処理できない問題
• • なければ作る
• ライブラリとして今夏中に整えたい

質問

• 正規表現 <-> インデクシング
• フィルターなどの分野では、流れるデータに対して正規表現の活用などもある。
• 禁止ワードのORつなぎみたいなものは正規表現より向いてる方法があるとか

「JavaScriptによる型推論器の実装と可視化」by takuto_h

• JavaScriptで型推論器を作りました – takuto_hの日記

型推論

• 型を書かなくて楽
• 型があるんで安全

引数の型

function foo(bar){ return bar + 1; }

どのような演算子を呼んでいるかを見て、型を推論する

型推論は方程式

• 値が広志位なら型が等しい
• 方の上での方程式を集めて解くのが型推論

コンピューターでは解くのか

a = b, b = c, c = d, d= int

<a>, <b>, <c>, <d>というオブジェクトとintという物体を用意する。

• a = b で <a : <b>>, <b>, <c>, <d>
• b = c で ….

どんどん置き換えて行って型推論を行う。

Ibisという型推論機

IbisはJavaScriptで書かれている。

• まずはパースして構文木にする
• ここからステップごとに型推論の計算(推論)を表示
• 最終的に、関数の入力と出力の型推論結果が表示される

型推論はパズル

質問

型推論にとってオブジェクトは鬼門

Q . 循環参照の時はどうするの?

２つの考え方

• 禁止する方針
• 再帰的なものも許す方針

OCamlは不健全な循環参照は禁止されている。 再帰的なものはチェックを付けて型推論を続ける。

演算子のオーバーロードがあると型推論はむずい

「世界で一番仕様に忠実なJavaScript処理系の作成」 by Constellation

iv/lv5

iv / lv5 VM engine – 枕を欹てて聴く

• ESのパーサーiv
• エンジンlv5

sputniktestというECMA262への正確性を測るテスト

• 以前はASTはインタープリンタ
• VMに変えたのでECMAエンジンといえますね。
• インタープリタと共存している(オプションで切り替えが可能)

JITをモジュールとして取り込めるのではないかと。

高速化

いろいろ。11倍近く高速

まだJITはしていない。

今後

• RegisterVmについての検討
• GCの自作

az: ECMAScript Analyzer

JavaScriptの補完候補を出す

型の推論 Doctorjs

• 抽象的なAbstractインタプリターを使って型情報を集めている
• これを元にC++にした

JavaScriptは後ろに関数宣言置けるし、補完するときにシンタックスは壊れてるからどうするの?

方針: シンタックスが不正なASTに対して解析を行う

• シンタックスが不正なスクリプトでも常にASTを得る

target.

こういう時はに解析を行うと、式がエラーになるので、ここでステートメントにマークを付ける。

改行があったらそのへんは大丈夫なんじゃないかと、してぶっちぎる。 JavaScriptにはセミコロン自動挿入があるので、改行を判定に使う必要性が出てくる。

問題点

• Abstractインタープリタは状態が有限でないと終わらない
• なので状態を有限して、行う
• jQueryとのfor inとかむず

WebStromの場合

• JSDocで型情報を読んでこれを基準に解析
• 元に情報を用意して何とかする方向

おわり

仕様忠実は第一

「現役高校生の考えるクラウドOSの設計と実装」by liva_s

クラスドOSって何だろう?

Googleの場合

• ブラウザ上でWebアプリを走らせている
• 確かにクラウドを利用している

僕の考えるクラウド化

カーネルのクラウド化

• カーネルがやるべきことをクラウドサーバー上で一括処理するのはどうだろか?
• サーバー側に処理を置くことで、クライアント側の負荷が減る

カーネルを分割して、クラウド上でカーネルが動いてるいうという状態

• 当然ローカルでやるべきことも残る(ハードウェア制御)
• ローカルとくらうどの線引きが大事になる

どの境界線はどう測るべきものかがわからない(ベンチマークで?)

マイクロカーネル開発

カーネルには最小限なものにして、Serverというアプリケーションにわけてやるもの。 この時のServerをクラウドに乗っければ、クラウドOSになる。

=> マイクロカーネルの開発がいいのではないかと

Serverを単位にして、ローカルとクラウドでベンチマークを取れば、境界線がわかりやくなる。

モジュール開発とマイクロカーネル

モジュールはプロセス管理を作る前に、モジュールを開発できる。 (後で動かせばいい)

まとめ

クラウドOSはWebアプリベースのOSではない

Q. カーネルでどの辺がボトルネックになってるのか?

A. モジュール化していけばベンチは測りやすいから、これからは。

カーネルのモジュール化はダイナミックに構成を変更できるということが結構面白い事になる

Q.マルチキャストの逆みたいな話。同じような処理をしてるコンピューターはいっぱいあるから、そのへんの処理を効率ができるのではないかと

• Installation – GitHub
• Macのパッケージ管理をMacPortsからhomebrewへ – よんちゅBlog 

$ ruby -e "$(curl -fsS http://gist.github.com/raw/323731/install_homebrew.rb)"
$ brew install git
$ brew update

これでbrewコマンドが使えるようになったので、下のFormula(パッケージの情報みたいなもの)を使ってPHPやMySQLなどをインストールする。

• (Re)installing PHP 5.3 on Mac OS X — justin hileman dot info
• bobthecow’s gist: 85ad6dfb594d9215b42b — Gist

最近のMacだとデフォルトPHPとか入ってるけど、何かアップデートとか面倒そうなのでbrewを使ってインストールし直してる。

$ brew install https://github.com/adamv/homebrew-alt/raw/master/duplicates/php.rb --with-mysql --with-intl

という感じでインストールした。
インストール後にwhichコマンドで、どのphpバイナリを示しているかを確認すると、デフォルト?のphpが参照されてままだった。(Homebrewは/usr/local/bin/以下にインストールしていく)

$which php
/usr/bin/php

/usr/local/bin/php

• とあるプログラマーの覚書 OSXでのbashrcの設定

~/.bash_profile を作り、下記の内容を書き加える。

if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi

export PATH="$(brew --prefix)/bin:$PATH"

$ which php
/usr/local/bin/php

• Mac でバーチャルホストを XAMPP や MAMP に頼らず設定する方法 | ウェブル
• Mac OS X 10.6 で VirtualHost – hida_shunの日記
• MacでApache, MySQL, PHP環境を作ったよ – bojovs blog

httpd-vhosts.conf を使って、バーチャルホストを設定する際は設定を変更して保存したら

apachectl -t

のコマンドで文法ミスがないかをチェックしてから再起動などして試した方が安心。
またコピペして設定する時は、クオーテーションがおかしくないかなども確認した方がいい。

参考

• HomebrewでPHP5.3.6をインストールする – okonomiの日記