社内HTML5勉強会を行いました

先日、社内でHTML5勉強会を行いました。
今回は「基礎編~HTML5の基礎とiPhone最適化~」と題して、HTML5でiPhone最適化を行う際の基礎知識とHTML5利用の目的共有を行いました。そこで、今回の勉強会の資料を一部公開します!

HTML5といっても、新しく追加されたタグやAPI,CSS3など範囲が広く、その上主要ブラウザでも実装状況が違ったり、仕様の廃止があったりするのが現状です。しかし、スマートフォン(今回はiPhoneのみ)に限定してしまえば、ブラウザを限定することがほぼ可能なので、HTML5の機能を生かした最適化を行うことができます。
機能面、操作性ではネイティブアプリに劣りますが、Webアプリであればデバイスに依存することなく開発でき、安価で導入しやすいという利点があります。

 
【資料の内容】
●開発環境の整備
●HTML5の基本セット
●iPhone向けWebアプリケーションの開発
-Viewport
-付加機能
●HTML5で追加されたタグ
-audio
-video
-canvas
-form属性
●API
-クライアントサイドのストレージ
-geolovcation
-オフラインアプリケーションキャッシュ
●アニメーション

 
【資料はコチラ】

[file]/2010/12/HTML5_iPhone.pdf[/file]

Related Post

iPhoneでHTML5のaudio要素を使うときに気をつけたいことiPhoneでHTML5のaudio要素を使うときに気をつけたいこと

HTML5ではaudio要素が追加され、外部プラグインを使わずブラウザで音を扱えるようになりました。そこで、デモを作ろうとしたのですが、ハマったポイントがいくつかあったので紹介します。検証環境はPC:Safari5.0.5(WIN)、iPhone:iOS4.3.2のMobile Safariです。 loop属性が効かない audio要素ではloop属性を付けることで、繰り返し再生が可能です。PCでは動作しますが、iPhoneではこれがうまく動作せず、1回再生されて停止してしまいました。onendedを使い、最後まで再生したらもう一度再生させれば対処できます。 <audio src=”audio.mp3″ preload=”auto” onended=”this.play()”

Parse.comを使ったiOSデバイスへのプッシュ通知[ターゲッティング編]Parse.comを使ったiOSデバイスへのプッシュ通知[ターゲッティング編]

前回、Parseを使ったiOSデバイス向けのプッシュ通知を行う方法をご紹介しました。今回はプッシュ通知先の絞り込みについて、無料版でも利用可能なChannelというパラメータを使用した方法をご紹介します。 大まかには、以下のような流れで行います。 デバイスにChannelの情報をひもづける Channelを指定してプッシュ通知を送る デバイスにChannelの情報をひもづける 次のメソッドを使って、デバイス側からParse(サーバ)側にChannel情報を登録できます。 NSString *channelName = @"hogehoge";   //登録するChannel名[PFPush

dotFes 2012 SENDAIに参加してきましたdotFes 2012 SENDAIに参加してきました

これまで写心機(ver.1、ver.2)で、2度コラボレーションしてきたワンパク(1PAC Inc.)さんからお誘いあって、dotFes 2012 SENDAIに3度目のコラボレーションとなるデジタルインスタレーションを出展してきました! 今回のインスタレーションは、dotFesに合わせて新しく企画し造ったのですが、アイデアのスタートとしては、「Kinectを使わないインスタレーションにする」「たくさんの余ったデバイスを使う」という縛りでした。両社が短い開発期間と本業の合間をぬって、たくさんのアイデア出しと熱い議論を重ねました。そして完成したのが 「device organized table