Flash CS6 の拡張機能である Toolkit for CreateJS を利用して、ちょっとしたミニゲームを作ってみましたので、その使用感や気をつけたことを述べていきます。 今回作ったゲームは、高速で移動するライオンを、制限時間内にクリックして捕まえるゲーム？です。PC以外にはiOS5以上のiPhone/iPad、Android3.2以上の端末で動作確認しました。(モバイル端末には最適化してないです。また、PCでゲームを始めると、音がなります)作ったゲームは、コチラから。 Flash上での作業 まず、最初にやったことは、Flashだけミニゲームを完成させ、一旦、完成させた状態そのままで、CreateJSでパブリッシュしてみて（当然、動きませんが）、どの部分がJSで書き直しが必要か、あたりをつけます。
Webフォントを使用したスマートフォン向け秀英体見本帳を公開Webフォントを使用したスマートフォン向け秀英体見本帳を公開
秀英体とは、大日本印刷オリジナルの書体です。秋からMORISAWA PASSPORTで秀英角ゴシック、秀英丸ゴシックが提供開始されるにあたり、スマートフォン向け見本帳を作成しました。以前より、Flash版の見本帳を公開していましたが、今回はWebフォントサービスのRealTypeさまにご協力いただき、秀英明朝/秀英初号明朝/秀英横太明朝/秀英丸ゴ/秀英角ゴ金/秀英角ゴ銀の６ 書体を試験的にWebフォント化し、HTML版を作成しました。推奨閲覧環境はiOS5以上、Android 3.2以上となっております。本コンテンツではWebフォント機能を使用しているため、環境によってはフォントが適用されない場合がありますので、あらかじめご了承ください。 Flash版はこちら＞Flash見本帳HTML版はこちら＞スマートフォン向け秀英体見本帳（※2013/3/29現在、リニューアルに伴い公開停止中です。ご迷惑をおかけいたしますが、よろしくお願い致します。） チャレンジしたこと Webフォントでの縦書き表現 CSS3のwriting-modeプロパティを使用すると、テキストを縦書き表示することができます。しかし、writing-modeを指定したテキストにWebフォントを指定すると、かなだけグリフが寝てしまう問題（参照：縦書きにWebフォントを使いたい！けど使えるのか検証してみた）がありました。そのため、HTML版秀英体見本帳内の縦組み部分ではSVGのtext要素、JavaScriptを使った縦組みライブラリのNehanを使用して縦組みを表現しています。
縦書きにWebフォントを使いたい！けど使えるのか検証してみた縦書きにWebフォントを使いたい！けど使えるのか検証してみた
最近、IT系の記事や勉強会でWebフォントの話題を見かけるようになってきました。以前の記事では、Webフォントサービスのデコもじを使ってRIAXDNPブログの記事タイトルのフォントを変えてみましたが、今回は縦書きにした文字にWebフォントを適用できるのか検証してみました。検証環境はWindows版Safari（5.1.2）とMac版Safari（5.1.1）です。 WEBフォントを使う Webフォントサービスを使わずに自分でフォントを定義する場合、フォントのライセンスに注意してください。今回のフォントデータはデモ用に弊社の秀英体開発室からお借りしました。CSS3では以下のように@font-face規則を使って、フォントを定義することができます。 @font-face {font-family:’DNPShueiMinPr5B’; src:url(‘../../fonts/DNPShueiMinPr5-B.otf’) format(‘opentype’);} .myFontStyle { font-family:’DNPShueiMinPr5B’;}
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
ADC MEETUP ROUND 03 発表資料をアップしましたADC MEETUP ROUND 03 発表資料をアップしました
先日のADC MEETUP ROUND 03 MAX RETWEET にご参加された皆様、ありがとうございました！「AIR3新機能： Captive Runtime + Native
【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ファイルをプリロードして保持しておくことが難しく、１音しかプリロードされた状態で鳴らなかったり（参照：iPhoneでHTML5のaudio要素を使うときに気をつけたいこと）、ユーザのアクションごとにAudioデータのロードでタイムラグが発生し、動きによって音が出ているという感じがありませんでした。 ポイント
第5回おばかアプリ選手権にて、Windows Phone賞をいただきました！第5回おばかアプリ選手権にて、Windows Phone賞をいただきました！
8/20、アーツ千代田3331で開催されました「第5回おばかアプリ選手権」に参戦してきました！司会にザリガニワークスの武笠さんと坂本さんを迎え、全１１チームが自慢のおばかアプリを披露しました。 我らチームDNPからは、４つのおばかアプリを紹介させていただき・・・結果、Windows Phone賞をいただきました！ チームDNPが発表しました４作品をご紹介します！ 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デザインを行う上で、気を付けている／気を付けたいポイントを１０コまとめてみました。 （01）実現したい目標、目的の「その先」を把握する（02）最初は手書きのスケッチから始める（03）UIデザインパターンを利用する（04）一度ルールを決めたら一貫性を保つ（05）全てのことに意味を考える（06）技術的な裏付けをもつ（07）最終的な判断は発注者に委ねる（08）UI設計上の議論の中で「UI系ワード」を使わない（09）シンプル＆スモールからフィードバックを得て改善する（10）ある程度の妥協を許容する UI設計の参考書やUIコンサル系のWebサイトに書いてあるようなことではなくて、ノウハウというより自分たちへの心構えという意味合いが強い感じです。 （01）実現したい目標、目的の「その先」を把握する 開発するシステムによって「データ入力効率が１０％向上した」、「コンバージョンが20%上がった」といった「目標・効果」のKPIは開発案件で設定されることがあるかと思います。それも大事なのですが、もう一歩踏み込んで「効率化した時間を何に活かすのか？」「ユーザーがそのサービスをもう一度使いたいと思うには？」といった内容をステークホルダーで議論すると、UIにもうひと工夫できるし、「価値」が生まれるかなと思っています。ちなみに案件によってはペルソナも用意しますが、マーケティングリサーチのためのペルソナでなく、ユーザーターゲットのためのペルソナとして妥当な範囲に留める様にしています。 （02）最初は手書きのスケッチから始める いきなりPowerPointやPhotoshopを使ってUI検討のためのワイヤーフレームを作るのではなく、まずは紙とペンでフリーハンドでプランニングするようにしています。最初からアプリケーションを使うと、「見栄え良くする」「綺麗にそろえる」とかに時間を費やし、なんだかドキュメント化することが目的になるからです。そうなると、バリエーションを考えることが疎かになったり、修正が億劫になったりという自体になったりします。手書きのスケッチからすぐモックアップ、それがマスターになれば画面設計書さえ不要なこともあります（現実的には仕様書で発注者に確認…というケースが多いですが）。 （03）UIデザインパターンを利用する