2013-02-27

Sencha Touchパーフェクトガイドが出版されました！

sencha sencha touch

年末年始に書いていた本「HTML5モバイルアプリケーションフレームワーク Sencha Touchパーフェクトガイド」が遂に出版されました！

共著で私は主に7章、8章あたりを担当させていただきました。メイン担当はありますが、もちろん他の部分もレビューし、全体的に参加しています。

Sencha Touch 2についての本は意外と少なく（日本語書籍では2冊目）、これだけのボリュームのある書籍は世界でも希です。（現時点では）まさにパーフェクトといえる内容だと自負しています。

特に3部の実践では、実務で役に立つ内容がてんこ盛り！実際に使った人が悩むポイントやはまり所などが詳しく解説されています。私も非常に勉強になりました^^;

しかし、まだまだ書き足りないと思うところがあるのも事実。。特に Ext のユーティリティメソッドに関してはほとんど触れられなかったのが少し残念です。（そのあたりは後述の Sencha Touch 2 Up and Running が詳しい。）また、テストやデバッグについてもあればよかったかも、とも思います。

とはいえ、最初の基本から応用、そして実践までの解説に関しては、今のところ本書が世界で最も詳しく書かれていると思います！

どのくらいボリューミーなのか、ということを他の書籍と客観的に評価してみましょう。

Sencha Touch 関連で出ている書籍で有名なのは大体以下の3つです。

id:nowokay こと、きしださんの日本で最初の Sencha Touch 2 の書籍！すごい表紙が一部で話題に！！

Sencha Forum のふざけたアイコン(ｗでもおなじみの Mitchell Simoens も書いている Sencha Touch 2のバイブル的存在。2への対応中で、3月末に正式出版されるらしい。現在プレビュー版を購入できる。（英語）

最近出たオライリーの Sencha Touch 2本。幅広く全体を薄く網羅している感じ。なぜかユーティリティメソッドの説明が充実（英語）

これらの名著たちと、本書のボリュームをページ数と、容積から比較してみます。

タイトル	ページ数	サイズ(cm)	容積(㎠)
Sencha Touch パーフェクトガイド	432	23.4 x 18.2 x 2.8	1192.464
Sencha Touchではじめるモバイルアプリ開発	255	20.8 x 14.8 x 2	615.68
Sencha Touch In Action	375	未定	未定
Sencha Touch 2 Up and Running	230	23.3 x 17.8 x 1.5	622.11

圧倒的ボリューム！！ページ数では2位の15％、3位の約70％増しで、容積にいたっては次点のなんと 90%増でおよそ約2倍！ページ数が~~膨らんだなぁ~~充実したなぁ、と思っていましたがここまで多かったとは。

ということで、この充実っぷり、是非一度お手にとってご確認いただければ幸いです。

充実の目次！

第1部 Sencha Touch の概要

第1章イントロダクション

1.1 ネイティブアプリケーションの終焉

1.2 はじめよう、Sencha Touch

1.3 本書の構成

1.4 ソースコードのダウンロード

第2章開発準備

2.1 開発準備

2.2 Sencha Cmd

2.3 Hello, World アプリケーション

第3章はじめての Sencha Touch

3.1 モデル

3.2 ビュー

3.3 コントローラ

第2部 Sencha Touch の基本構成

第4章クラスシステム

4.1 クラス定義

4.2 コンストラクタ

4.3 コンフィグ

4.4 インスタンス化

4.5 継承

4.6 オーバーライド

4.7 ミックスイン

4.8 シングルトン

4.9 静的メンバ

4.10 別名

4.11 依存性管理

4.12 めとめ

第5章コンポーネント

5.1 コンポーネント概要

5.2 配置

5.3 検索

5.4 生成・描画・破棄

5.5 まとめ

第6章イベントシステム

6.1 イベントシステム概要

6.2 イベントリスナ

6.3 リスナオプション

6.4 独自イベント

6.5 タッチイベント

6.6 まとめ

第7章データパッケージ

7.1 データパッケージ概要

7.2 モデル

7.3 ストア

7.4 プロキシ

7.5 まとめ

第8章リストとテンプレート

8.1 リスト

8.2 テンプレート

8.3 まとめ

第9章アプリケーション

9.1 アプリケーション

9.2 コントローラ

9.3 ルーティング

9.4 プロファイル

9.5 まとめ

第10章 Sencha Touch デザイン概論

10.1 環境の構築

10.2 Sass の基本文法

10.3 Compass について

10.4 Sencha Touch でのデザイン変更について

10.5 まとめ

第11章ネイティブパッケージング

11.1 パッケージング

11.2 ネイティブパッケージングの流れ

11.3 iOS アプリケーションの作成について

11.4 Android アプリケーションの作成

11.5 ネイティブ API

11.6 まとめ

第3部実践 Sencha Touch アプリケーション開発

第12章プロジェクト開始

12.1 開発するアプリケーション

第13章 CRUD

13.1 表示（Read）

13.2 作成（Create）

13.3 更新（Update）

13.4 削除（Delete）

13.5 ルーティングとヒストリー

13.6 URL の変更

第14章カスタムコンポーネント

14.1 カスタムコンポーネントとは

14.2 Sencha マーケット

14.3 カスタムコンポーネントの名前空間

14.4 ファイルパス

14.5 電卓コンポーネント

14.6 Dropbox プロキシ

第15章 Sencha Touch Charts

15.1 Sencah Touch Charts 概要

15.2 図形描画の基礎

15.3 グラフの基礎

15.4 家計簿アプリケーションへの組み込み

第16章アプリケーションの仕上げ

16.1 タブレット用画面の実装

16.2 アプリケーションのリリース

16.3 まとめ

著者紹介

付録A 標準コンポーネントひとめぐり

A.1 コンポーネント

A.2 コンテナ

A.3 リスト

A.4 フィールド

A.5 その他

長い。さすが400ページ超えだけあって、目次も長い。

そして、奇しくも今日は自分の誕生日。
書いた本がそんな日に出版されるなんて、最高の誕生日プレゼントになりました。
ありがとうございます！

2013-02-26

Sublime Text 2 をちょっと便利に使うTips

Sublime Text

今さらながら Sublime Text 2 をちょっと便利に使うTipsを２つほど。

Expand Selection のスキップ

Sublime Text の特徴の一つに、Ctrl-D とかでどんどん単語を選択して、マルチセレクトで一括編集できる Expand Selection というものがあります。これはとても便利なのだけれど、特定の箇所はスキップしたい、ということも良くあります。

例えば、次のようなコードで、 "hoge_name" と "fuga_name" を、それぞれ "hoge_nickname" と "fuga_nickname" に変えたいとします。

var name_1 = "hoge_name";
var name_2 = "fuga_name";

"hoge_name" の "name" 部分を選択して Ctrl-D すればいいじゃん、と思いますが、そうすると name_2 の name にも引っ掛かってしまいます。そこは変えたくない。次の fuga_name に行きたいんです。

そういうときは、Ctrl-K, Ctrl-D でスキップできます。

また、間違えて選択した場合は、Ctrl-U で選択を一つ前へ戻せます。正確に言うと、Ctrl-U は選択状態を含め、カーソル位置を前へ戻すのでその他にも便利に使えます。

参考：http://stackoverflow.com/questions/11548308/skip-ctrld-selection-in-sublime-text-2

その他複数選択に関するTipsが沢山！ Sublime Text2の複数カーソルの使い方
（覚えきれない。。。）

特定ファイル、フォルダをファイルリストに表示させない

サイドバーにフォルダを追加して、プロジェクトとすると、Ctrl-P でファイルが切り替えられて大変便利です。が、プロジェクトが大きくなってくると、キャッシュファイルやゴミファイルなんかも出てきて鬱陶しいこともあります。

そんな時は、設定で以下を追記しましょう。全体設定でも良いですが、User Settings に書くのが良いと思います。Ctrl + , でユーザー設定が開くので、以下を追記します。

    // 除外するフォルダ
    "folder_exclude_patterns": [".svn", ".git", ".hg", "CVS"],

    // 除外するファイル
    "file_exclude_patterns": ["*.pyc", "*.pyo", "*.exe", "*.dll", "*.obj","*.o", "*.a", "*.lib", "*.so", "*.dylib", "*.ncb", "*.sdf", "*.suo", "*.pdb", "*.idb", ".DS_Store", "*.class", "*.psd", "*.db"],

    // サイドバーには表示するけど、Ctrl-Pでは表示しないファイル
    "binary_file_patterns": ["*.jpg", "*.jpeg", "*.png", "*.gif", "*.ttf", "*.tga", "*.dds", "*.ico", "*.eot", "*.pdf", "*.swf", "*.jar", "*.zip"],

上記は標準のデフォルト設定です。これに、自分の好みの設定を追記します。例えば、Compass/Sassなんかを使ってると、.sass-cache フォルダが邪魔なので、folder_exclude_patterns へ ".sass-cache" を追加すると、ファイルリストに出てこずにすっきり！

Ctrl-P では表示したくないけど、サイドバーに表示したいときは、binary_file_patterns へ追加してください。

日本語入力の問題

Windows ではインライン入力出来ないとか、Emmetでは変換確定できないとか、Tabキーで変換できないなどなど、日本語入力周りは問題が多々あります。

自分の環境で困るのが、検索バーで日本語変換がうまくできないこと。カーソルキーやTabキー、EnterキーをSublime Text本体がハンドリングしてしまって、うまく変換できません。。Tabのキーバインドを無効にして変換する方法（http://d.hatena.ne.jp/kaz_shu/20120718/1342623780）もありますが、各種スニペットが使えないも痛い。それにカーソルやEnterの問題は解決していない。

こんな投票があるので、是非みなさんも一票を！！
http://sublimetext.userecho.com/topic/52165-unable-to-finalize-kana-kanji-conversion-in-japanese-in-the-search-box/

2013-02-05

デザイナのためのGit入門のスライドをアップしました

git

お世話になってるデザイン事務所で、最近よく聞くgitってやつについて教えてよ、ってことで話しました。

デザイナのためのGit入門 from dsuke Takaoka

デザイナさん向け中心に、まずはイメージを掴んでもらう概要の説明となってます。コマンドとか意図的に載せてません。それは参考資料見てください。

30分前に急いで作ったので間に合わなかったとかじゃないから！(>_<)

話して驚いたのが、結構みんな git ＝ github だと思ってたということ！githubの省略だと思ってたとかｗ

Subversionでいいじゃん、という話しもチラホラ。確かに現状困ってないのなら Subversionでも全然よいかもしれません。個人的に思うチーム開発でSubversion使ってて困ることは、どうしてもコミット単位が大きくなりがちなこと。他の人に影響与えるといけないので切りの良いところでコミットしないといけないのだけれど、なかなか切りのよい感じにならなくてどんどん修正範囲膨らんで、1回のコミットが巨大になるとか。その点gitだとローカルリポジトリへのコミットは気兼ね無しにできて良いですね。取り消しやコミットの修正も簡単だし。切りの良いところでpushすればいい。もちろん、巨大なpushはマージが大変になるのでお勧めできませんが。

あと、デザイナさんはやっぱりPSDとかaiファイルのバージョン管理をしたい、という話がありました。大きなプロジェクトになると1つのPSDファイルが数百Mになることも、とか。調べてみると、こんなサービスあるようです。「もうPSDは無くさない！デザイナー版GitHubのPixelapseはうっかりデザイナーの救世主！」面白そう。使ってみた感想ききたい！

コマンドや個々の使い方の良い資料はたくさんあるので、それを実際どう運用するか、特に社内での運用方法、というのを次回あればやりたいですね。

てか、誰かやってください！
人の発表を聞くだけよりも、自分で調べ手を動かしながら考えた方が絶対に身につきます。それを私がやるのはもったいない。是非つぎは誰かがやってくれると期待してます。

2013-01-08

今年もよろしくお願いします

明けてもう7日が経ちましたが、新年おめでとうございます。

ほんとは、もっと今年の抱負とか目標とかまとまってから書こうと思ってたのですが、それを待っていると年越してしまいそうなので、見切り発射ながらエントリーを投入している次第でございます。

まだはっきりと目標とまでは言えませんが、それでもおぼろげながらはやりたいことが出てきました。

まず、やはりちゃんと情報発信していきたいな、ということ。twitterやfacebookのライトなポストも手軽では良いのですが、もう少しまとまった情報を整理してBlogのエントリーとして書いていきたいと思っています。単に新しい情報をうわべだけ書き連ねるのではなく、自分なりに整理した内容を書ければいいなぁ、という所存でございます。

これには狙いが2点あって、そういう意気込みで書くからにはそれなりに調べたり勉強しないといけないわけで、自分のスキルアップに直結するということ。2点目はBlogでも書き続ければ文章体力がつきそうかな、ということ。完結で説得力がある文章を短時間でかけるようになりたい、という思惑もあります。

次に、なんだかんだでやっぱり英語をちゃんと勉強したい。技術文書なんかはなんとなく読めはするけど、話すのと書くのは全然ダメ。これはほんと実践するしかないんだろうな。周りもよくやってるオンライン英会話でも始めようかな。んで、できれば6月の Sencha Conferenceに行きたい。せっかく Complete も買ったしね−。ちょうどあと半年くらいなので、目標にすると励みになってよいかな、と、割と本気です。

仕事面では、昨年からやっているフロントエンドの技術支援という形をもう少し広げたいな、という思いがあります。自分もまだまだなところも多いですが、あちこちの現場を見ているとかなり課題も多く、こうすれば簡単にできますよ、というのも結構ある。特に、最近若手と話すことも増えましたが、教えたいことも色々とあるような気がしてきました。

自分一人で開発するのはある意味、気は楽なのですが限界もある。チーム全体でうまくいくように支援したい、という思いが増えてきました。しかし、そこをどう仕事にするかが課題。

それも含めてBlogでも書いていければなぁ、というあたりで今年の抱負としたいと思います。

みなさま今年もよろしくお願いいたします。

2012-12-31

今年の自分まとめ的なもの

大晦日ということで、今年一年のまとめ的なエントリーでも書こうと思います。

自身の今年を一言で表すとすると、「外へ」でしょうか。

去年はGDDへの出展とかもありましたが、わりとInkpod Webの開発に専念していました。それに比べて今年は外向きの活動が多かったように思います。

HTML5とか勉強を始めいろんな勉強会に参加し、多くの方とお話しさせて頂いて繋がりができたことは大変貴重な経験となりました。なかでもアリエルさんの Sencha Touch 勉強会から特に大きな縁が広がり、本当によかったことの一つだったと思っています。その縁で、Japan Sencha User Group の共同運営者をすることになったり、勉強会で話したネタでITmediaさんへ記事（HTML5アプリのタッチUX）も書かせて頂きました。さらに、本の執筆の話まで広がりました。

先端IT活用推進コンソーシアムでもProject L.Aの開発はもちろん、次期検討委員会、運営委員としても協力させて頂き、こちらでも色々な繋がりが増えました。

仕事面でもデザイン事務所さんでの新技術支援や、ECサイトのコンサル・機能強化など普段あまりやらないお仕事にもチャレンジさせて頂きました。

また、プライベートでは南フランスをレンタカーで回り、最高の夏休みを過ごすことができました。思えばこれもやはり外での活動でした。

外部発信としてBlogももっと書いていこうと思っていたのですが、あまり継続的には書けませんでした。しかし、いくつかホッテントリ入りすることもでき、読者も少し増えました。更新頻度と内容の深掘りについては、今後も課題です。

振り返ってみると、ほんと外での活動が広がった一年でした。また、それは多くの方にお世話になった一年でもあります。本当に皆様ありがとうございました。この場で改めてお礼を申し上げたいと思います。

来年もデブサミ2013や、ソフトウエアジャパン2013といった大きなイベントで話すことになっています。今後もしばらくは外部への発信を積極的に行っていきたいと思います。

来年も引き続きよろしくお願いいたします。
それでは皆様よいお年を！

2012-12-23

ネイティブよりも速いと評判のfastbookの裏側を調べてみる

sencha HTML5 javascript

本記事は、Sencha Advent Calendar 2012 の23日目の記事です。~~1日遅れでごめんなさい！~~あ、今日であってた(;´▽｀A 当初完走は無理なんじゃないかと思ってたけど、みんなのがんばりで完走目前！おめでとうございます！

Sencha Touchで作ったネイティブよりも速いfacebookアプリ「fastbook」が話題になっていますね。

ネイティブを凌ぐすごいパフォーマンスに驚きますよね！これらは実際にはどんなコンポーネントを使って作られているのかすごく気になります。そこで、ちょっと調べてみたいと思いました。

ネイティブアプリ向けパッケージが、https://github.com/extjs/fastbook にあるようなのですが、~~メンテナンス中と出てアクセスできません。。ソースみたかった。。。~~（2012.12.26追記: 今見るとアクセスできますね。けど、本当にWebViewでラップしただけで中身はWebから表示してるだけでした。つまりJSのソースは無い）仕方ないので公開されているものを解析しつつ推測してみます。

基本的に３つのスクリプトファイルからできているようです

index.js: 他のスクリプトやCSSを読み込むローダー
app.js: アプリケーション本体
sdk.js: Sencha Touch SDK（3.0alpha！）

app.js にアプリのロジックが圧縮されて入っています。圧縮と言ってもそれほど複雑な物ではないので、Webインスペクターで Pretty print すれば、まあなんとか読めます。気になるのは、sdkですね。Ext.versionを見てみると、versionが "3.0alpha" とあります！まだ一般公開されていない、次期 Sencha Touch で作られてるんですね！

とりあえず app.js を記事で触れられている改善点を中心に見てみました。

パフォーマンス改善のポイントはいくつかありますが、特に無限Listコンポーネントが重要のようです。これは最近、Sencha Touch 2.1で改良された無限Listコンポーネント（What’s Coming in Sencha Touch 2.1）のことかと思ったら、実はそうでもないようです。

Sencha Touch 2.1.0 の SDK に含まれる examples に、touchtweets というTwitterアプリのサンプルがあります。これは新しい無限リストに対応しているそうです。（オンライン上のデモはまだ2.0.1のようだ）

fastbookではiframeを使ってDOMツリーを分割したとあります（実際はobjectタグだった。iframeではなくobjectなのはなぜだろう？）。しかし、先のサンプルのリストはiframeではありませんでした。fastbookで使われているのは「Sandboxコンテナー」というまったく新しい機能のようです。残念ながらまだSDKには入っていません。 Sencha Market なんかで出してくれないかなー、と期待してます。

次の、TaskQueueは、Ext.TaskQueueのことですね。これはSencha Touch 2.1から新しく追加された機能です。複数のDOM要素の操作をバッチ処理のようにまとめることで、DOMのリフローとリペイントを最小化するようです。リフローについてはブラウザ動作の理解－リフローとリペイント及びその最適化に詳しくあります。ただ、まだこのクラスはAPIドキュメント上はprivateとなっていて、フレームワーク内部での利用しか推奨されていません。

次に AnimationQueue を追加したとあります。これもfastbookのための新規クラスです。これは内部に taskQueue と idleQueue の二つのキューを持ち、taskQueueがある間はそれを実行し、taskQueueが無くなったら idleQueue を実行する、という仕組みでアニメーションやロードの処理を分割しているようです。特にアニメーションに特化した機能では無く、汎用的な仕組みなため、これも早く標準APIへ組み込んで欲しいですね。

Web Workerは、Ext.Xhrという新しいクラスに組み込まれています。また、これ用に xhr-worker.js が読み込まれています。このスクリプトでWorkerとのmessageやりとりをしているようです。Web WorkerではAjaxでのリソース取得、デコードを行っています。元々Ajaxで非同期通信ではあるのですが、WebWorkerを使うことでUIスレッドから切り離し、よりスクロールの滑らかさなどを維持するようです。特に現在のマルチコアプロセッサを持つスマートフォンなどでは有効だそうです。

総じて、やはりfastbookはかなりチューニングされています。通常Sencha Touchで使われるMVC アーキテクチャでのアプリケーションのロード方法とも少し違います。カリカリにチューニングされているからこそ、この性能が出るんですね。

単純にSencha Touchを使ったからといって、皆が皆ここまでのアプリケーションを作れるわけではありません。それはネイティブにとっても言えることでしょう。ネイティブだからパフォーマンスが良い、HTML5（Sencha Touch）だから優れている、というのはナンセンスです。大筋の傾向はありますが、個別事例ではそれが全てではありません。結局は作り手の技術と情熱次第。

そういう意味で、fastbookはSenchaが優れているということではなく、まさしく作り手次第でHTML5でもここまで出来るんだ、ということを証明してくれたのだと思います。

2012-12-12

HTML5で出来ないことまとめ 2012年12月版

HTML5

本記事は、HTML5 Advent Calendar 2012 の12日目の記事です。なんとか本日中にあげれるか・・アップできた！

業務やらイベントやら本やらで死ぬほど忙しいなか、無謀にもHTML5 Advent Calendarに参加してしまった@dsuketです。こんばんわ。

先月の段階ではここまで修羅場になるとは思わなかったのですが、師走は恐ろしいものですね。年末にこんな首を絞めるイベントが山ほど各所で行われているとは、つくづくエンジニアはM属性だと思いました。

本ネタは始めは「HTML5で出来ること」にしようかと思っていたのです。が、そんな話は山ほどある。もはや食傷気味ですよね。そこで逆転の発想で「出来ないこと」にすればいい！と閃いたわけです。さすが良い閃きだな−、俺冴えてる！と思ったのも束の間。念のためググってみると・・・「あれ？いっぱいあるぞ・・(￣0￣;)」

しかし、検索上位に表示されるものをよく読んでみると古い内容が多く、もうそれできるよ（できそうだよ）というのも多くある。日々進化の早いこの業界、2，3年も経つと情勢が大きく変わりますよね。そこで今回は、その先人達の記事を参照しつつ「HTML5で出来ないこと 2012年12月版」としてお送りしたいと思います。

第13回　来るべきHTML5の世界へ（後編）

まず、下記の記事からみてみましょう。2010年12月なのでちょうど2年前の記事ですね。
第13回　来るべきHTML5の世界へ（後編）

HTML5でできないこと
また，マルチメディア機能では，Flashがストリーミング動画を複数のブラウザに表示できるのに対し，HTML5ではその対応ができません。これは，HTML5向けのビデオエンコーディング技術がブラウザメーカで統一されていないためで，Internet Explorer 9やSafariなどは「H，264」を，MozillaやOperaは「WebM」をサポートしています。さらに，動画機能についても，動画制御や著作権管理，フルスクリーン表示などに未対応であり，マルチメディア機能を中心に実装する動きが活発化する中，できないことも明らかになってきました。

ここで上げられているコーディックの問題は今もあります。GoogleがH.264を長期的にサポートをしないと言いだした（GoogleがH.264問題を再説明、IEとSafariにはWebMプラグインを提供へ）かと思えば、MozillaはH.264サポートを打ち出したり（Mozilla が H.264 をサポートへ、webM 一本化を断念）、一方OperaはMobileに限っては H.264をサポートしたり（Web specifications support in Opera products 英語版）と混乱の極みですが、これでモバイルでは主要なブラウザが全てH.264をサポートすることになりました。（デスクトップ向けではまだ）

記事中で次に触れている動画制御が、何を指しているのか分かりませんがシークやループも可能です（参考: HTML5のvideo/audio＋JavaScript APIテクニック）。DRMは未だ解決していません。GoogleやMSが取り込んではいるようですが、標準化にはまだまだ遠そうです（GoogleとMicrosoftら、HTML5対応のコンテンツ暗号化APIの標準化を申請）。フルスクリーンについては Fullscreen API で標準化が進み、Firefox、Chrome、Safariでは既にサポートされています。

HTML5でアプリを開発するメリットとデメリット

次の記事はこちら。HTML5でアプリを開発するメリットとデメリットより

HTML5で出来ないことは以下の通り。

写真/動画撮影

Bluetoothへのアクセス

Gyroscope

プッシュ通知

バイブレーション

メディアファイルへのアクセス

バックグラウンドで起動

写真/動画撮影については、WebRTC や Media Capture API で仕様が策定中です。Media Capture API はiOS6でその一部が実装され、遂にカメラが使えるようになりました（参考: iOS6のSafariでサポートされるHTML5の機能）。Androidでもversion 3から対応しています（ Android 4の新機能でカメラWebアプリ作ってみた）。残念ながらPC向けブラウザは対応しているものはなさそうです。動画や音声のストリーミングが可能なWebRTCについては、Opera 12、Android版Opera mobileが標準で対応、Google Chrome がオプションで対応しています。

Gyroscope（ジャイロスコープ）は DeviceOrientation Event Specificationで仕様策定されています。最新のiOS/Androidなら結構動きます。

~~BluetoothはHTML5でデバイス機能を使うためのDevice API にも標準化されていません。今後の追加予定も無さそうです。~~（追記: あるよ、とご指摘いただきました。末尾で追加しました）プッシュ通知については、そのものではありませんが、Server-Sent Eventsというもので実現可能です。ブラウザでこれを受け取りOSの通知システムと連動すればネイティブアプリのようになるでしょう。

バイブレーションは Vibration APIで標準化されています。未だ Firefox Aurora でしかサポートされてませんが時間の問題でしょう。メディアファイルへのアクセスは前述の通り。バックグラウンドでの起動は Web Workers でできそうですが、現在のところ iOSなどではバックグラウンド中のJavaScriptは停止してしまうため無理そうです。今後の改善に期待！

HTML5で作るiPhoneアプリのできない5つのこと

続いての記事はこちら HTML5で作るiPhoneアプリのできない5つのこと。こちらも2年以上前なのでだいぶ変わりましたねー。ちなみに3が二つあるのは原文まま。

１、clipboardの利用
２、ファイルのアップロード
３、カメラ
３、シェイクイベント
４、加速度センサー
５、バックグラウンド起動

クリップボード欲しいですよねぇ。無いことが意外だとクライアントによく言われます。未だ実装はありませんが、仕様はあります。 Clipboard API and events です。最終更新が去年の2月ですね。なにやらパテントの関係で難航しているようです。。。

ファイルのアップロートは先のMedia Capture APIとFile APIによってiOS6から対応済みです。ただしアルバム内に限る。任意のファイルできません。カメラは前述の通り。シェイクイベントはDeviceOrientation Eventで実現可能です。加速度センサーも同様ですね。

Flashだとここまでできる! HTML5とFlashの機能比較

だいぶ疲れてきました。しかも時間無い。。最後はFlashとの比較。 Flashだとここまでできる! HTML5とFlashの機能比較

クロスブラウザの映像対応
依然として動画コーデックの統一が進んでおらずクロスブラウザに対応した動画コンテンツを提供することが難しい状況です。

これは前述の通り。モバイルはだいぶH.264に寄ってきましたが、デスクトップはまだまだ。

Flash だと縦書きができる

CSS3でwriting-modeがサポートされました。コレを使えば縦書きもできます。こちらのサンプルの右下 Vertical Textで確認できます。

Flash だとタイムラインアニメーションに映像を組み込める

HTML5のオーサリングツールも出始めました。

これらを使えばFlashのようにCanvasアニメーションを作ることが出来ます。

Flash の 3D は進化している

HTML5の3Dも進化しています。WebGLの性能もあがり、便利なライブラリも充実してきています。tree.jsのサンプルで体験することが出来ます。

Flash だとウェブカメラが利用できる

先のWebRTCを使えばHTML5でもウェブカメラが使えます。 WebRTCはブラウザ上でリアルタイムコミュニケーションをするためのフレームワーク。HTML5 Conference 2012
ChromeのCanaryビルドなどで使うことが出来ます。正式サポートまでもう少し！？

Flash 内部で音を生成して再生することができる

HTML5でもこんなドラムマシーンができます。 HTML5 AudioとJavaScriptで作った簡易ドラムマシン

まとめ

時間が無いので手短にまとめます。

ここ2年くらいでHTML5で出来ることが随分増えた。
特にモバイルの進化がすごい。
これからの2年もきっとすごい進化する。

ということで、本来ならばまだできないことをまとめたいところですが、~~早くしないと今日が終わってしまうため今回はここまで！~~

と、してたのですが、やっぱり気持ち悪いので簡単にまとめを追加。
これまで上げた点から、今でもどのブラウザでも出来ない、2012年12月版HTML5で出来ないことは以下の5点！

DRM
Bluetooth通信
OSへのプッシュ通知
バックグラウンドでの起動
クリップボード

個人的には 3，4，5あたりができるようになるともう最高なんだけどなー。これらはまだまだ先の話になりそうです。

追記:
ブクマやtwitterでコメントいただきました。ありがとうございます。
アレが入ってないぞ，このヤロー！とかあるとおもうので、ジャンジャン突っ込んで下さい！

んーこれ dsuket.hatenablog.com/entry/2012/12/… 頑張って書いてくれてるけどBluetoothはSysApps w3.org/2012/09/sysapp… PushやクリップボードはWebApps w3.org/2012/webapps/c… が議論の場で、実装も結構進んでるのよ〜
— dynamis (でゅなみす)さん (@dynamitter) 12月 13, 2012

ご指摘ありがとうございます。勉強になります。
System Applications Working Group というので、WebのNative化に対する標準化を進めているそうです。詳しくは小松さんの記事で！WebのNative化に対する標準化が始まる？

Web Applications Working Group では、アプリケーションとして必要な機能の標準化を進めています。クリップボードだけじゃなく、先に挙げたFullscreen APIやFile API、Server-Send Eventsなんかもこれに含まれています。他にも Database and Offline Application APIs、Web Intents、Web Sockets、Widgetsなんかもあります。

ブコメより

んー、出来ないことの範囲が狭い気がするよ、自由にローカルファイルを扱わせろとかOSコマンド実行させろとかあると思うんだけどなあ

確かに、File APIでローカルファイルが扱えるようになった、といっても <input type="file"> か、ドラッグ＆ドロップしないとファイルハンドラを受け取れないのは不便ですよね。OSのファイルシステムにそのままアクセスはセキュリティ上問題でしょうけど、サンドボックスみたいな環境があっても良いかもですねー。同様に、OSのシステムコマンド実行も難しいでしょうねぇ。システムコールを呼べるようになると凄いんですが、セキュリティが心配すぎる。。

E4Xが使えない、なんて話しもどこかから。
E4Xありましたね。。。当時は画期的だ！と思ったのですが、JSONが普及してからはXMLがあんまり出番が無くなったような。FireFox もついに打ち切るそうです。E4X は衰退しました

他にもツッコミお待ちしてますー

Expand Selection の スキップ