HTML5」タグアーカイブ

【読書】Firefox OSアプリ開発ガイド


Firefox OSアプリ開発ガイド (Amazon.co.jp)

iOS、Androidに対する「第3のモバイルOS」に名乗りを上げているOSの1つとして「Firefox OS」があります。ソニーモバイルが端末を提供するともいわれ、日本ではKDDIがプッシュしているこのOS、最大の特徴は「すべてがHTMLコンテンツである」ということでしょう。ロック画面もホーム画面も設定画面も、ブラウザ画面さえもがHTML(とJavaScriptとCSS)で構成される前衛的なOSと言えます。この本はそんなFirefox OSのアプリ開発解説本です。

とはいえ実機が存在しない現状もあり、実際にはバリバリ商品レベルのものを作るというよりは「Firefox OSでこんなこともできるよ~、できる予定だよ~」という雰囲気を感じました。サンプルコードがHTMLやJavaScriptなので、開発者でないモバイル好きの人もそれなりに読み進められるのではないでしょうか。

個人的には興味津々ですが、本当にHTMLやJavaScriptの動作速度でiOSやAndroidのネイティブアプリレベルのものが作れるのかという疑念も若干あったりします。HTMLでオープンプラットフォームというのは作る側の都合で、使う側にしてみればとにかく快適に使えることが一番大事なので、HTMLアプリであることを言い訳にしなくてよいような完成度が必要でしょう。まずは市販端末第1号がどの程度の完成度で出てくるかに注目したいところです。

【読書】HTML5とJavaScriptでiPhoneとAndroidの両対応をなんたらかんたらという本


HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド (DESIGN & WEB TECHNOLOGY) (Amazon.co.jp)

連休読書の最後はちょっと硬派な技術本を。HTML5といっても技術要素もその適用範囲も非常に幅広いのですが、この本はHTML5の技術を主にスマートフォンアプリに活用しようとしている人向けの内容になります。技術解説もさることながら、冒頭のHTML/JavaScript/CSSの歴史は読み物として面白かったです。また「WebアプリケーションのためのJavaScript」ではJavaScriptについて骨太の説明が行われており、なんとなくJavaScriptを書いているような(自分のような)人間にとってなるほどと思わせる内容。JavaScriptの専門書を読んでみたくなる内容です。

もちろんcanvasやvideoなどHTML5らしい内容や、より柔軟なスタイル指定ができるCSS3の解説なども充実しており、まず1冊読んでみようという向きにはお勧めできるかと。ただしjQuery / jQuery Mobileの解説は(本筋ではないという判断か)若干おざなりに感じました。

【メモ】HTML5のApplication Cacheは動的ページには使えない


HTML5のapplication cacheがつかえない件 ((ひ)メモ)

WordPressのブログでjQueryのファイルだけApplication Cacheに入れて高速化できないかな…とか思って調べたりやってみたりしていたのですが、

「<html manifest="…">を記述してあるURLのリソースそのものもキャッシュされ、かつ、cache.manifestのNETWORKセクションに明にキャッシュしないように指示したとしても必ずキャッシュされることが仕様で定められている」

んだそうです。つまりApplication Cacheを使おうとしてmanifest=…の記述をした瞬間、そのページのHTML自体がApplication Cacheの対象になってしまいます。WordPressの場合、テーマファイルのheader.phpにmanifest=…の記述をすると、全てのページがApplication Cacheに入るカオス状態。

静的HTMLをコンテナとして、その内部をJavaScriptで書き換えていくような使い方では非常に有効に使えそうな仕様ですが、動的ページで使うのは厳しそうですね。

「新しいiPad」発売記念!ブログのアニメーションバナーをHTML5対応にしてみた


当ブログ(PC版)画面上部のバナー

image

は、Adobe Flashでアニメーションするようになっていますが、iPhoneやiPadのようなFlash非対応デバイスの増加や、Android向けFlashの提供がAndroid 4.0系を最後に停止される見込みであること、また次世代Windows「Windows 8」のInternet Explorerで主に使われるMetroスタイルでFlashをサポートしないなど、何かとFlashの肩身が狭くなってきていました。そこで可能な限り原型を残しつつ、この部分を(Flash非対応ブラウザでも動く)HTML5ベースで再構築することに。

使用したのはGoogleが提供している「Swiffy」というサービス。

Google Swiffy (Google)

このサービスを使うと、Flashのファイル(***.swf)をアップロードすると、同じような動きをするHTML5のコード(***.html)を自動生成してくれます。もちろんFlashの全機能に対応しているわけではないのですが、簡単なアニメーションであればほぼそのまま変換できます。上が元のFlash、下が変換されたHTML5です。画像では何のことだかわからないと思いますが、ほぼ同じような動きをするHTML5コードに変換されます。

image

すでにSwiffyで変換されたアニメーションバナーはこのブログ(PC版)に組み込まれており、HTML5に対応するブラウザではHTML5版が、そうでないブラウザではFlashが自動的に選択されて表示されます。主要ブラウザでひと通り動作確認はしてあります。なおAndroidではHTML5もFlashも動作が不安定なのでアニメーション自体を無効にしています。

実はSwiffyは発表当時に一度試したことがあるのですが、その時はSwiffyの対応もブラウザ側の対応も不十分で、こんなシンプルなアニメーションバナーですらFlashを置き換えることができませんでした。しかし今回はほぼ問題なくHTML5で置き換えることができており、着実に進歩しているなあと。

※タイトルの「新しいiPad」はステマですw。一応iPadでも動作確認はしてありますが…

HTML5の動画コーデックはブラウザとは別にダウンロードするのが今風?


Microsoft、Google Chrome向けにHTML5のH.264動画再生拡張機能を公開 (Impress)

HTML5におけるH.264のサポートを止めて「WebM」推進を明確にしたGoogleのWebブラウザChromeに対して、MicrosoftがH.264を使えるようにするプラグインを提供開始しました。MicrosoftはすでにFirefoxに対しても同じようなプラグインを提供しています。

一方のWebM陣営は、SafariとIE9向けのプラグインを提供予定。結局のところはHTML5のvideoタグを快適に使うためにはどちらかのプラグインが必要ということになりそうです。

#だったらFlashだって同じ条件だよね…
#プラグイン不要というHTML5の当初の志はどこに…