SVGアニメーションの再生タイミングについてSVGアニメーションの再生タイミングについて

今回は前回書きました『IllustratorからSVGを書き出して、SVGアニメーションを追加する』の関連記事です。SVGアニメーションの再生タイミングにかなりハマったのでもう少し詳しくご紹介したいと思います。OPERAさんの2006年(!)の記事に、詳しい解説がありましたので、参考にしています。こうして見てみると、枯れた技術かと思われていたSVGに再び光が当たった感がありますね。  animate要素の追加  例えば、以下のようなanimate要素を追加したい場合。 <animate attributeName=”opacity” begin=”indefinite” to=”0″ dur=”0.25″ fill=”freeze”

IllustratorからSVGを書き出して、SVGアニメーションを追加するIllustratorからSVGを書き出して、SVGアニメーションを追加する

iOS5のアップデートに伴い、Mobile SafariがインラインSVGに対応しました。そこで、このiOS5のMobileSafari向けに、キャラクターのイラストをIllustratorで書き出し、SMILアニメーションに挑戦してみました。   SVGをアニメーションさせる際の選択肢 SVGで書き出したグラフィックをアニメーションさせる場合、DOM操作、SMILアニメーションなどいくつかの方法があります。 ・SMILアニメーション・CSS3アニメーション・JavaScriptでの属性値変更・Canvasアニメーション SVGの仕様は非常に大きく、アニメーション機能としてSMIL Animationをサポートしています。SMILとは、Synchronized Multimedia

【HTML5】iPhone向けWEBアプリで、Audioを使ってみてハマった点【HTML5】iPhone向けWEBアプリで、Audioを使ってみてハマった点

HTML5のAudio要素を使い、再生する音を遅延無く切り替える方法を、先週8/20(土)に開催された「第5回おばかアプリ選手権」で紹介しましたアプリ、iBooNを例に紹介したいと思います。 iBooNの仕組み iBooNは、Mobile Safari上で動作するWEBアプリです。Mobile Safariから加速度を取得(iOS4.2から加速度センサーに対応)し、前後のシェイクジェスチャ(ぶーんと走らせる動き)、左右の傾き(ドリフト)に応じて異なる車の音を再生させています。 当初は複数のAudioファイルをプリロードさせ、ユーザのアクションに応じて各ファイルを再生させる予定でしたが、Mobile Safariでは複数のAudioファイルをプリロードして保持しておくことが難しく、1音しかプリロードされた状態で鳴らなかったり(参照:iPhoneでHTML5のaudio要素を使うときに気をつけたいこと)、ユーザのアクションごとにAudioデータのロードでタイムラグが発生し、動きによって音が出ているという感じがありませんでした。  ポイント

第5回おばかアプリ選手権にて、Windows Phone賞をいただきました!第5回おばかアプリ選手権にて、Windows Phone賞をいただきました!

8/20、アーツ千代田3331で開催されました「第5回おばかアプリ選手権」に参戦してきました!司会にザリガニワークスの武笠さんと坂本さんを迎え、全11チームが自慢のおばかアプリを披露しました。 我らチームDNPからは、4つのおばかアプリを紹介させていただき・・・結果、Windows Phone賞をいただきました! チームDNPが発表しました4作品をご紹介します! RIA Hockey Microsoft SilverlightとAdobe

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()”

RIAxDNPチームのUIデザイン10のポイントRIAxDNPチームのUIデザイン10のポイント

たまには方法論的なトピックです。これまで多くの得意先の受注案件や自社サービスのRIA案件のユーザーインターフェース開発を担当させて頂きましたが、RIAxDNPチームがUIデザインを行う上で、気を付けている/気を付けたいポイントを10コまとめてみました。 (01)実現したい目標、目的の「その先」を把握する(02)最初は手書きのスケッチから始める(03)UIデザインパターンを利用する(04)一度ルールを決めたら一貫性を保つ(05)全てのことに意味を考える(06)技術的な裏付けをもつ(07)最終的な判断は発注者に委ねる(08)UI設計上の議論の中で「UI系ワード」を使わない(09)シンプル&スモールからフィードバックを得て改善する(10)ある程度の妥協を許容する UI設計の参考書やUIコンサル系のWebサイトに書いてあるようなことではなくて、ノウハウというより自分たちへの心構えという意味合いが強い感じです。 (01)実現したい目標、目的の「その先」を把握する 開発するシステムによって「データ入力効率が10%向上した」、「コンバージョンが20%上がった」といった「目標・効果」のKPIは開発案件で設定されることがあるかと思います。それも大事なのですが、もう一歩踏み込んで「効率化した時間を何に活かすのか?」「ユーザーがそのサービスをもう一度使いたいと思うには?」といった内容をステークホルダーで議論すると、UIにもうひと工夫できるし、「価値」が生まれるかなと思っています。ちなみに案件によってはペルソナも用意しますが、マーケティングリサーチのためのペルソナでなく、ユーザーターゲットのためのペルソナとして妥当な範囲に留める様にしています。 (02)最初は手書きのスケッチから始める いきなりPowerPointやPhotoshopを使ってUI検討のためのワイヤーフレームを作るのではなく、まずは紙とペンでフリーハンドでプランニングするようにしています。最初からアプリケーションを使うと、「見栄え良くする」「綺麗にそろえる」とかに時間を費やし、なんだかドキュメント化することが目的になるからです。そうなると、バリエーションを考えることが疎かになったり、修正が億劫になったりという自体になったりします。手書きのスケッチからすぐモックアップ、それがマスターになれば画面設計書さえ不要なこともあります(現実的には仕様書で発注者に確認…というケースが多いですが)。 (03)UIデザインパターンを利用する

Canvasに画像を複数枚重ねて描画するにはCanvasに画像を複数枚重ねて描画するには

HTML5のCanvasには画像を組み込むことができます。Canvas上に複数枚の画像(透過PNG)をレイヤー状に順番に重ねたり、重ねた後の画像を取得する方法を解説します。 画像のプリロード  画像を複数枚重ねる場合、単に描画のループを回してしまうと読み込みが完了されたものから表示れ、重ねる順番が保障されない為、描画の前に順にImageオブジェクトを先読みしておきます。 var fileArry = [‘imgName1’,’imgName2’…]; // 読み込みたい画像のパスの配列 var

AIR for Androidでゲームコントローラを作ってみたAIR for Androidでゲームコントローラを作ってみた

ちょっとした思いつきでAndroidスマートフォンでゲームのコントローラを作ってみたかった…ので、作ってみました。それがこちらです↓ 意匠が今は無きP○P goのよう?Nexus Sだとそれだけでゲーム端末っぽくなりますね。自分はもうこれだけで満足なのですが、これだけではその名の通りのコントローラであることを証明出来ない…ので、不本意ながら簡単なマルチユーザーゲームも作りました。それがコチラ。やっつけで作ったのでゲームとしてツッコミどころ一杯なのですが、、、 ■遊び方 ゲームとして浅いので遊び方は至ってシンプルです。 先ずTwitterのIDでログインします。 スタートボタンを押すと(正確にはタッチすると…)ゲーム開始。

Flex Hero のモバイルアプリ開発でハマった点Flex Hero のモバイルアプリ開発でハマった点

「Flex Hero のモバイルアプリ開発の基本」では、ホントの基本のみのご紹介でした。今回は、実際に使ってみてハマった点をいくつかご紹介したいと思います。*なお、この記事は公開されているFlash Builder Buritto Preview版 を対象としています。 画面回転時のレイアウト