プロジェクト tag:mdlab.jp,2011-08-10:/project//2 2012-05-17T04:05:18Z Movable Type Pro 5.12 ブレークスルーキャンプ by IMJに協力して認知的ウォークスルーのワークショップを開催しました。 tag:mdlab.jp,2012:/project//2.49 2012-05-17T03:11:58Z 2012-05-17T04:05:18Z IMJグループのIMJインベストメントパートナーズが主催しているブレークスルーキャンプ by IMJで支援が決まった5社に認知的ウォークスルーのワークショップを開催してきました。 mdlab こんにちは。マルチデバイスLab.の和田です。

IMJグループのIMJインベストメントパートナーズが主催しているブレークスルーキャンプ by IMJで支援が決まった5社に認知的ウォークスルーのワークショップを開催してきました。

各社ともユーザビリティには詳しくないため、始めに分かりやすい表現や実例を踏まえつつ、ISO9241-11で定められているユーザビリティの定義からユーザビリティテストするさいの注意点を説明しました。

講義中の画像
ユーザビリティの説明に使ったスライド

ワークショップでは各社に１名、マルチデバイスLab.のメンバーが入って認知的ウォークスルーを進めます。

各社の状況はワイヤーフレームレベルからサービスをすでに開始してるなど、進捗状況が異なっていたため、各社の状況に合わせてPCを操作してユーザビリティを評価したりペーパープロトタイピングでユーザビリティを評価しています。

ワークショップ中の画像
ワークショップ中の画像

ワークショップ終了後は懇親会を開催し、ワークショップの感想を話しながらピザとビールです！

懇親会中の画像
懇親会中の画像

「今まで作ってきたサービスを客観的に見直すきっかけになった」「メンバーの意識が高まった」など、ユーザビリティ以外にも色々と発見のあるワークショップになったようです。

Lean Startup中の会社でも実践しやすいように、事前準備の負担が少ない認知的ウォークスルーのワークショップを開催しました。
今回のワークショップを学んだことを生かして、認知的ウォークスルーやユーザテストを繰り返し実践してもらえたら嬉しい限りです。

一般的な内容ばかりの資料ですが今回のワークショップで使用したスライドを公開しています。
※一部スライド(事例など)は削除しています。

View more PowerPoint from MultiDeviceLab

関連サイト

マルチデバイスLab.の研究内容について、ご意見、ご質問などありましたら、
「マルチデバイスLab.」までお気軽にお問い合わせください。

※株式会社アイ･エム・ジェイのお問い合わせフォームに移動します。
サービスに関するお問い合わせ

]]> Web&モバイルマーケティングEXPO2012にブースを出展してきました。 tag:mdlab.jp,2012:/project//2.48 2012-05-11T08:11:58Z 2012-05-14T02:48:04Z 2012年5月9日（水）から11日（金）までの3日間、東京ビックサイトで開催されている「Web＆モバイルマーケティングEXPO2012」に参加し、株式会社アイ・エム・ジェイのブースを出展してきました。たくさんのお客様にお立ち寄りいただきましたので、ごご報告させていただきます。 mdlab みなさんこんにちは。マルチデバイスLab.の加茂 春菜です。

2012年5月9日（水）から11日（金）までの3日間、東京ビックサイトで開催されている「Web＆モバイルマーケティングEXPO2012」で株式会社アイ・エム・ジェイのブースに参加してきました。たくさんのお客様にお立ち寄りいただきましたのでご報告します。

EXPO出展時の画像

EXPO出展時の画像

株式会社アイ・エム・ジェイのブース。マルラボメンバーも解説中。

今回、IMJが開発したマルチデバイス活用に最適な柔軟なCMS、「JellyCMS」をブースでご紹介するにあたり、マルチデバイスLab.としてデモ用コンテンツを開発し、展示させていただきました。

こちらが会場でデモしたｉPadとPCを使った店舗向けインタラクティブ映像コンテンツ"体感ディスプレイ"です。

体感ディスプレイ画像

以前コラムでもご紹介した年賀コンテンツ Multi-Device Dragonと同じAdobe AIR3を使って作られたコンテンツで、手元のiPadの女性に服を着替えさせると、上部のモニターに移ってる映像の女性の服も変わる、という仕組みにっています。モデルさんがかわいかったから？だけではないとおもいますが、多くの皆様が足をとめて体験してくださいました。

この体感ディスプレイについて、もっと詳しく話が聞きたい等のご要望がございましたら、ぜひマルチデバイスLab.までお問い合わせください。

ご来場いただきましたみなさま誠にありがとうございました。


マルチデバイスLab.の研究内容について、ご意見、ご質問などありましたら、
「マルチデバイスLab.」までお気軽にお問い合わせください。

※株式会社アイ･エム・ジェイのお問い合わせフォームに移動します。

サービスに関するお問い合わせ

]]> デバイス別Google Analytics導入ガイドライン tag:mdlab.jp,2012:/project//2.46 2012-04-09T02:08:52Z 2012-04-12T06:49:28Z ★ガイドラインの人気は強い！★ 他の内容に比べてガイドライン系のコラムは、リリースしたときだけではなく長くアクセスが続く傾向があるようです。 ということで、人気コラムランキングに私のコラムがランクインするべく、安直な考えでGoogle Analyticsの導入ガイドラインを作成しました。 mdlab

はじめに

皆元です。私のマルチデバイスLab.の活動のひとつに、「マルチデバイスLab.のサイトの分析」があり、その活動の一環として2011年の末に、その時点の人気コラムのランキングを書かせていただきました。

人気コラムランキング(～2011年12月)
http://mdlab.jp/project/report/05.html

マルチデバイスLab.のサイトを分析している中で、分かったことがあります。

★ガイドラインの人気は強い！★

他の内容に比べてガイドライン系のコラムは、リリースしたときだけではなく長くアクセスが続く傾向があるようです。
ということで、人気コラムランキングに私のコラムがランクインするべく、安直な考えでGoogle Analyticsの導入ガイドラインを作成しました。

様々なデバイスにGoogle Analyticsを導入する際に参考になるガイドラインになっているので、ご活用ください。

Google Analyticsで「何を解析」するのか、具体的なイメージが思い浮かばない人は、ガイドラインをダウンロードする前に「Gogle Analyticsを導入する前に」をお読みください。

目次

Gogle Analyticsを導入する前に

デバイスごとの分析項目

Google Analyticsを導入する前に、何を分析するのか検討します。
よく、次のような質問を受けます。

フィーチャーフォン特有の計測の項目を教えてください

スマートフォンを分析するにはPCとは違うと思うのですがどうすればいいですか

フィーチャーフォンなら、機種名、画面サイズや解像度、搭載しているFLASHのバージョン、GPS対応かどうかなどの端末のスペックを取得。
など、確かにPCサイトの分析をする時とは異なる指標もあります。

取得できる指標を考える前にこう考えるのはどうでしょうか。
それらのサイトでは何を目的にしていますか。

サイトの目的

デバイスを問わず、分析をする上でとても重要なことが、サイトの目的です。

もしも、サイトの目的が、デバイス問わず一緒なら、分析する項目は同じになるでしょう。
ただし、デバイスが異なるということは

  • ●ターゲットユーザーが異なる
  • ●利用シーンが異なる
  • ●閲覧可能な情報量が異なる

など、異なることが複数あります。

デバイスの特徴を理解した上でのサイト作りが必要になります。
そこで、異なるサイトの目的をデバイスごとに設定できたなら、分析する項目も異なってくるでしょう。

例）スマートフォンサイトの最適化

スマートフォンサイトの最適化＝PCサイトをスマートフォンで見ても見やすいようにする。
ではもったいないと常々思っています。

1.スマートフォンの特徴を思いつく限り書き出す

  • ●画面が小さい（フィーチャーフォンよりは大きいがPCよりは小さい）
  • ●縦画面と横画面を考慮する必要がある
  • ●いつでも持ち歩く
  • ●おさいふ機能があるものある
  • ●GPS機能があるものもある
  • ●回線速度は3GからWi-Fi高速回線まで様々
  • ●通勤時や空き時間に使うこともある

などいろいろ、思いつくままにあげていきます。

2.その上で、スマートフォンサイトにはどのようなことを掲載するべきか検討

例えば、小売店があり、PCサイトでは売っている商品とその詳細、店舗情報を記載しているとします。
その場合は、

  • ●地図アプリを起動して、店舗までのナビゲーション
  • ●おさいふ機能を利用して売上と会員情報を管理
  • ●商品購入者に事後アンケートを空き時間に回答してもらう

など、PCサイトとは異なる目的をスマートフォンサイトに与えることが出来ます。

そうなると、それぞれどのくらい利用されているのか、迷わず利用されているかなど分析したい項目が見えてきます。
これは、フィーチャーフォンサイトでもタブレットサイトでもPCサイトでも同じです。

分析をはじめる前のまとめ

デバイス別の解析をするには、デバイス別に作るサイトの目的を明確化することが大事。

Google Analytics導入ガイドライン

サイトの目的から分析したい内容が決まったら、いよいよGoogle Analyticsの導入です。
タグの導入だけではなく、よく使う設定をまとめました。内容は以下になります。

1.デバイス別導入方法

PC・スマートフォン・フィーチャーフォンのGoogle Analyticsの導入方法を記述しています。一番基本的な内容になります

2.複数ドメインのトラッキング

トップドメインの異なるサイトのトラッキング方法やサブドメインの異なるサイトのトラッキング方法をデバイス別にまとめています

3.フィーチャーフォンのSSLページ計測

そのまま設置するとセッションがページ毎切れてしまう（ドコモ、ソフトバンク）フィーチャーフォンのSSLページの計測をするための方法をまとめています

4.バーチャルページビュー

実際のURLと異なるURLで計測するバーチャルページビューの設定方法をデバイス別にまとめています

5.イベントトラッキング

JavaScriptを利用して計測するイベントトラッキング。フィーチャーフォンでは利用できないため、PC・スマートフォンで計測すための方法をまとめています

6.カスタム変数

Google Analyticsの機能の中で自由度が高く設定できるカスタム変数の設定方法をデバイス別にまとめています

7.キャンペーンの計測

広告の分析も可能なGoogle Analytics。そのキャンペーンの設定方法をまとめています。無料ツールなのに本当に凄いと思います

8.ログがあがらないと思ったら

電化製品でいう「故障かなと思ったら」をイメージしています。自分で設定する場合は起こらないような導入に関するトラブルも、大きな会社では設定を担当する方にお願いすることも多々あります。
そんなときに起こりうる設定時のトラブルをまとめました。

ガイドラインのダウンロード

以下リンクからPDFデータのダウンロードが出来ます。

slideshareにも公開しているのでWEB上からでも確認できます。

View more presentations from MultiDeviceLab

マルチデバイスラボ　ガイドライン一覧

スマートフォン・タブレット UIガイドライン

フィーチャーフォン UIガイドライン

最後に：マルチデバイスラボサイトティザーサイト制作前から携わってまいりましたが、3月31日卒業することになりました。ただ、ガイドラインには、今後スマートフォンアプリへのGoogle Analytics導入方法も追記予定と書いてありますので、新メンバーが引き継いでくれることでしょう。お楽しみに！

マルチデバイスLab.の研究内容について、ご意見、ご質問などありましたら、
「マルチデバイスLab.」までお気軽にお問い合わせください。

※株式会社アイ･エム・ジェイのお問い合わせフォームに移動します。
サービスに関するお問い合わせ

]]> スマホ女子は写真と共有がお好き tag:mdlab.jp,2012:/project//2.47 2012-03-28T01:29:07Z 2012-03-28T07:52:05Z IMJモバイルが実施した調査では、スマートフォンユーザー（女性）の写真の撮影が95%、SNS系サービスへの共有56%と、スマートフォンを使った写真の撮影と共有が頻繁におこなわれていることがわかり、数値からスマートフォンとSNS系サービスの相性の良さが実証されました。 mdlab IMJモバイルが実施した調査では、スマートフォンユーザー（女性）の写真の撮影が95%、SNS系サービスへの共有56%と、スマートフォンを使った写真の撮影と共有が頻繁におこなわれていることがわかり、数値からスマートフォンとSNS系サービスの相性の良さが実証されました。

また条件付ではあるものの写真を共有する61%の女性が顔写真を共有している事実が浮き彫りになり、SNS系サービスとスマートフォンの普及により匿名性が強かった日本のインターネット文化が変わりつつあることを実感する調査データです。

ライフスタイルの変化を表したインフォグラフィックス画像

参照元の調査データ

データは2月2日にIMJモバイルが発表したスマーフォンユーザーの、写真撮影やWebサービスへの共有方法を調査した「スマートフォンユーザーの写真投稿に関する調査」をもとに作成しています。

マルチデバイスLab.の研究内容について、ご意見、ご質問などありましたら、
「マルチデバイスLab.」までお気軽にお問い合わせください。

※株式会社アイ･エム・ジェイのお問い合わせフォームに移動します。
サービスに関するお問い合わせ

]]> Flash を HTML5に変換するアプリ 「SWF Animation Converter」 を利用して、キーボード操作できるキャラクターアニメーションを作成する tag:mdlab.jp,2012:/project//2.42 2012-02-07T01:00:23Z 2012-02-07T01:31:12Z 去年公開させて頂きました、「SWF Animation Converter」 (以下SAC) がお陰様で多くDLいただき有難い限りの糸数でございます。 しかし、「アプリで変換はできたけど、マウスアクションとか付けられないの？」 「キーボード操作したいけどどうすれば？」 などの質問をよく受けます（受けるということにしておいて下さい）。 確かにそういうケース多々ありますよね。 mdlab swf_animation_converter_mainimage.png



去年公開させて頂きました、「SWF Animation Converter」 (以下SAC) がお陰様で多くDLいただき有難い限りの糸数でございます。

しかし、
「アプリで変換はできたけど、マウスアクションとか付けられないの？」
「キーボード操作したいけどどうすれば？」
などの質問をよく受けます（受けるということにしておいて下さい）。
確かにそういうケース多々ありますよね。

しかしそこはご安心を！

実は、SACにはJSのAPIが用意されており、ただflashアニメーションを変換するだけでなく、変換後に比較的自由にカスタマイズできるよう設計されています（したつもりです）。

今回はSACの出力ファイル（スプライトシート等）を利用し、
キーボード操作できるキャラクターアニメーションを作成する方法をご紹介し、最終的にこのようなHTMLサンプルを作成する手順を書いていこうと思います。


ますはswfを変換しよう！

まずは、アプリのダウンロードとベース素材を用意。

[1] SACのダウンロード

SWF Animation Converter | マルチデバイスLab.

[2]サンプルflaをダウンロード (CS4形式)

sample4_api.zip

上記がそろったら下記の動画を参考に、変換してみて下さい。




できましたでしょうか？

ここまでがSACの基本的な役割で、スプライトシートとJSを吐き出しています。

SACは特にこのように、「Flash Proで設定したラベル名を、JSに変換し、サクッとアニメーション制御ができる」ので、簡単なゲームやインタラクションを作成するのに、お役に立てる（？）かと思います。

カスタマイズする！

結論から言うと、SAC自体はシンプルなDIVなので、それにユーザーイベントを付加すればカスタマイズできるという事になります。

SAC化したいDIVを用意しクラス名をつけ、SWFACObjectの第一引数に渡してやればOK！（ここでは SACArea）
第二引数には画像パス。第三以降は初期値なので無視してもらってOK


クリックイベントを付加してみる

例えば、SACにクリックイベントを付加するサンプルはこうです。
[SAMPLE] クリックイベント

というように、クラス名に対して、カスタマイズしてやればよいわけです。

SACの JS API を利用し タイムラインを操作する

SACで書き出した index.html 内 23行目あたり、下記の部分は、再生スタートの命令です。


このようにSACインスタンスには様々なメソッドが用意されています。


どんなメソッドがある？


[1] flashライクに再生/ストップ

[SAMPLE] gotoAndPlay() / gotoAndStop()



[2] flash側で設定したフレームラベルを再生

[SAMPLE] gotoLabel()
gotoLabel() は第二引数に
true を渡すとラベルをループ。
false でラベルを1回だけ再生。
と指定出来ます。

[3] コールバック関数

たとえば画像のロード完了をまってから1フレーム目で静止したい場合は
コールバック関数、setLoadCompleteCallbackを利用し下記のようにします。
[SAMPLE] setLoadCompleteCallback()
その他、ループ時、エンターフレイム時、ラベル再生完了時など、さまざまなコールバックが用意されています

その他

[4] フレームレートを変更したい場合、

[5] divの幅、高さを取得したい場合、



などなど
すべての機能は、APIドキュメントにありますので参照してみてください。
※SACで吐き出されたindex.htmlを開くと、APIのサンプルコードが、 下部にコメントアウトされているので参考にしてみてください。

SACファイルにキーイベントを付加するサンプル

では実際冒頭のサンプルファイルのカスタマイズ例を解説します。



画像ロードコールバック登録

まず、画像のロード完了コールバックで、walkアニメーションを設定します



キーイベント設定

次に、jQueryでキーイベントを取得し「A、←、↑、→」キーの押下イベントを取得しそれぞれアクションをつけていきます。


パンチ動作

パンチ動作の終了で、walk動作に自動で戻りたいため、
setLabelCompleteCallback() 関数に、終了時のアクションを登録します。
これはラベルアニメーションの再生がストップしたときに呼ばれる関数です。
同様に、移動や、ジャンプも設定していきます。

最終的には下記のコードを参考にして見てください。
SACキーイベントカスタマイズサンプル
以上、SACのカスタマイズのご紹介でした。
ご意見ご質問は@md_labまでよろしくお願いします！

最後まで読んでいただきありがとうございました!



]]> [page2012]オープンイベント「スマートフォンビジネスの変化と展望～女子が語るスマホはカオス～」に参加します。 tag:mdlab.jp,2012:/project//2.44 2012-02-01T07:15:05Z 2012-02-01T07:36:37Z このたび、モバイルマーケティングソリューション協議会さんのご紹介で 印刷、メディア業界のコンベンション[page2012]で行なわれるパネルディスカッションに参加することになりましたので、ご案内させていただきます。 mdlab このたび、モバイルマーケティングソリューション協議会さんのご紹介で 印刷、メディア業界のコンベンション[page2012]で行なわれるパネルディスカッションに参加することになりましたので、ご案内させていただきます。

今回、スマートフォンビジネスの変化と展望『女子が語るスマホはカオス』と題しまして、スマートフォンビジネスをめぐる現状と将来を女子目線でお話しさせていただく予定です。
page2012では、「PAGE からpage へ　―― ePower で新領域へ」という全体テーマを通じ、印刷、メディア業界ならではの興味深いイベントもそろっておりますので、みなさまのご来場をお待ちしております。


[詳細はこちらから]


◆イベント概要
【タイトル 】 スマートフォンビジネスの変化と展望　『女子が語るスマホはカオス』
【開催日時】　2012年2月9日（木）12:45～14:15（開場12:40）
【開催場所】　文化会館7F710号室
【参加費】　　無料

【お申込み】　以下の申込みフォームよりお申込ください。
　　　　　　　⇒http://www.mmsa.jp/regi_sem120209.html

【開催内容】
スマートフォンビジネスをめぐる現状と将来をテーマとして、第一線で活躍する女子がスマートフォンを巡る「アレコレ」をパネルディスカッションでご紹介していきます。
　・女子から見たスマホブームと企業の反応
　・スマホをめぐるクライアントの誤解と勘違い
など、データより肌感、女子力で語ります！

【出演者】　※社名５０音順
　◆株式会社　IMJモバイル
　　クリエイティブ本部 マルチデバイスLab マネージャー　
　　　　加茂 春菜　氏

　◆グランドデザイン&カンパニー株式会社
　　事業推進部　アカウントエグゼクティブ　
　　　　公文 紫都　氏

　◆株式会社スパイア
　　モバイル広告事業本部　第２セールスグループ　
　　　　鹿島 美由　氏

　◆株式会社mediba
　　メディア事業本部メディア事業企画部メディア推進グループ　
　　プロデューサー　
　　　　河面　久美子　氏

【問い合わせ先】
　　　　鄭平文　
　　　　　E-mail：info@mmsa.jp　　
　　　　　TEL 03-6804-3538



]]> 【Google Analytics】2012年賀サイトで検証－WebGL対応状況 tag:mdlab.jp,2012:/project//2.43 2012-02-01T04:30:14Z 2012-02-01T04:41:06Z 寒い日が続きますが如何お過ごしでしょうか。皆元チナ(JWDA WEB解析士マスター)です。 2012年があけて、早くも1ヶ月が過ぎようとしています。 1月1日にワンソースでマルチデバイスコンテンツを実現。IMJグループ2012年賀「Multi-Device Dragon」というコラムがありました。 マルチデバイスを活用した新しい表現を体験いただけたかと思います。 mdlab 寒い日が続きますが如何お過ごしでしょうか。皆元チナ(JWDA WEB解析士マスター)です。
2012年があけて、早くも1ヶ月が過ぎようとしています。
1月1日にワンソースでマルチデバイスコンテンツを実現。IMJグループ2012年賀「Multi-Device Dragon」というコラムがありました。
マルチデバイスを活用した新しい表現を体験いただけたかと思います。

ただ、私たちはIMJGの年賀サイトだけではなく、マルチデバイスラボ独自の年賀サイトも作成しました。

マルチデバイスラボ 2012年賀サイト
http://mdlab.jp/nenga2012/

技術的なことなどは別途コラムでご紹介しますが、今回は、Google Analyticsを利用した検証結果を紹介します

WebGLについて少しだけ

マルチデバイスラボの年賀サイト、立体的に見えたり、マウスを動かすと変化したりするのですが、「WebGL（ウェブジーエル）」という技術を使って制作されています。

この技術の注意事項として、ブラウザや搭載しているグラフィックボードなどによって閲覧が限られているという点があります。

参考：WebGL|wikipedia

そのため、WebGLに対応しているかを確認して、表示するコンテンツを変えていました。
今回はマルチデバイスラボ年賀サイトを閲覧した方がWebGLに対応しているか（コンテンツを見ることができたのか）の割合を調査しました

結果

次の3つに分けて計測しました。

・パソコンからアクセスして、WebGL対応のブラウザで閲覧
・パソコンからアクセスして、WebGL非対応のブラウザで閲覧
・スマートフォンからの閲覧

結果は以下

48%およそ半分の方にコンテンツをお楽しみいただくことが出来ました。
なお、本年賀サイトの告知は主にツイッターで行ったため、一般的というより、普段からマルチデバイスラボが発信するような新しい技術などに興味がある人がアクセスをしているという前提があります

計測方法

Google Analyticsはデフォルトでいろいろな指標を計測することが可能です。
オペレーティングシステムや、ブラウザも取得することが出来るのですが、WebGL対応非対応の判断はそれらの指標を掛け合わせても難しいことが判明したため（加えて集計を容易に行いたかったため）
カスタム変数に値を入れて集計しました。

まず何らかの方法で、WebGL対応非対応を判断します。詳細は、別コラムで紹介予定です。
サンプルは、flgに入れて、それを送っています。
具体的な対応非対応の判断方法は割愛しています。

続いて、Google Analyticsにデータを送ります。

セッションレベルで指定しています。
nameがOPEN_GLなのは特に深い意味はありません。
カスタム変数の詳細は

カスタム変数|Google アナリティクス　Google code

こちらでご確認いただけます。

これからも、マルチデバイスラボから発信する様々な新しい技術について分析していきます。

実は今回、WebGL対応の方が何秒見て離脱（ブラウザを閉じるなどでサイトから離れる事）したのかも調べようとしたのですが、パソコンのスペックにより速さが違うということと、リリースまでの時間の問題、さらにワースト1位になってしまったメンバーが気の毒なのでやめました。

マルチデバイスLab.の研究内容について、ご意見、ご質問などありましたら、
「マルチデバイスLab.」までお気軽にお問い合わせください。

※株式会社アイ･エム・ジェイのお問い合わせフォームに移動します。
サービスに関するお問い合わせ

]]> 「cocos2d x」の開発環境が更に快適に！ -Xcode4対応版 tag:mdlab.jp,2012:/project//2.41 2012-01-31T07:00:00Z 2012-05-15T04:58:30Z 前回のコラムではXcode3を前提とした導入についてご紹介しましたが、現在はiOS5にも対応したXcode4がスタンダードとなりつつあります。cocos2dxはXcode4にも対応していますが、iPhoneとAndroidの同時開発を行うためにはXcode3より複雑な手順が必要となりますので、今回はXcode4での導入方法についてご紹介いたします。 mdlab

はじめに

前回のコラムではXcode3を前提とした導入についてご紹介しましたが、 現在はiOS5にも対応したXcode4がスタンダードとなりつつあります。 cocos2dxはXcode4にも対応していますが、iPhoneとAndroidの同時開発を行うためには Xcode3より複雑な手順が必要となりますので、今回はXcode4での導入方法についてご紹介いたします。

Xcode4での相違点

(1)フォルダ構成

Xcode4でcocos2dxを導入する際、最も大きな問題となるのがプロジェクトのフォルダ構成です。 Xcode3では下図のように、プロジェクト名フォルダの直下にClassesフォルダが配置されており、 Android用プロジェクトと同じフォルダ構成になっています。 そのため前回のコラムで紹介したように、Android用プロジェクトと共通のClassesフォルダを使うことができました。 xcode3_proj.png ですがXcode4では、プロジェクト名フォルダの下にさらにプロジェクト名フォルダが作られ、その中にClassesフォルダが配置されています。 つまりAndroid用プロジェクトよりも1階層深い位置にClassesフォルダが存在しています。 xcode4_proj.png これにより、共通のソース(Classesフォルダ)を使用したiPhoneとAndroidの同時開発を行うことが Xcode3と同じ導入手順ではできなくなってしまいました。

(2)重複プロジェクト名の削除

Xcode3での導入手順では、まず最初にAndroid用プロジェクトを作成し、 次にXcode3で同名の新規プロジェクトを立ち上げ、Android用プロジェクトフォルダに上書きして作成していました。 ですがXcode4で同様の手順を行うと、上書き時にそれまで存在していたフォルダは削除されてしまいます。 そのため先に作成したAndroid用プロジェクトが消えるようになってしまいました。

対応策

これらの相違点による問題を解決する方法をご紹介いたします。 まずはcreate-android-project.shでAndroid用プロジェクトを作成します。 今回はプロジェクト名を「example2」としました。 前項(2)の通り、Xcode4で同名のプロジェクトを作成すると、 今作成したAndroid用プロジェクトフォルダが消えてしまいますので、 一旦フォルダ名を「example2_bak」のように変更します。 column2_xcode3.png 続いてXcode4でのiPhone用プロジェクト作成です。

※Xcode4用テンプレートのインストールをしていない場合、事前に「install-templates-xcode.sh」でのインストールを行ってください。詳しくは前回のコラムを参照

まずXcode4を起動して「Create a new Xcode project」をクリック。

column2_xcode1.png

iOS内の「cocos2d-x」を選択するとcocos2dx用のテンプレートが表示されますので、「cocos2dx」を選択して「Next」ボタンをクリック。

column2_xcode2.png

Product Nameに「example2」、Company Identifierに「jp.mdlab」を入力して、「Next」をクリック。

column2_xcode3.png

プロジェクト保存画面が表示されますので、cocos2d-1.0.1-x-0.10.0フォルダを選択した状態で「Create」をクリック。

column2_xcode4.png

これでXcode4用に「example2」プロジェクトが作成されました。

column2_folder1.png

Xcode4用のプロジェクトが作成された、先ほどフォルダ名を変更した「example2_bak」の中にある android、Classes、Resourcesフォルダを、example2/example2の中に移動し、上書きします。

column2_folder2.png

これで共通のソース(Classesフォルダ)をiPhone/Androidどちらからも参照できるようになりました。

column2_folder3.png

ですがこのままではAndroid用のビルドがうまくいきません。 一階層深いフォルダ構成に強引に変更したので、それに合わせて各種設定を変更する必要があります。

example2/example2/android/build_native.sh

GAME_ROOT=$COCOS2DX_ROOT/example2/example2


example2/example2/android/jni/Android.mk

subdirs := $(addprefix $(LOCAL_PATH)/../../../../,$(addsuffix /Androids.mk, \


example2/example2/android/jni/helloworld/Android.mk

LOCAL_C_INCLUDES := $(LOCAL_PATH)/../../../../../cocos2dx \
                    $(LOCAL_PATH)/../../../../../cocos2dx/platform \
                    $(LOCAL_PATH)/../../../../../cocos2dx/include \


example2/example2/Classes/Android.mk

LOCAL_C_INCLUDES := $(LOCAL_PATH)/../../../cocos2dx \
                    $(LOCAL_PATH)/../../../cocos2dx/platform \
                    $(LOCAL_PATH)/../../../cocos2dx/include \
                    $(LOCAL_PATH)/../../../CocosDenshion/include \
                    $(LOCAL_PATH)/../../../cocos2dx/lua_support
LOCAL_LDLIBS := -L$(call host-path, $(LOCAL_PATH)/../android/libs/$(TARGET_ARCH_ABI)) \
                -lcocos2d -lcocosdenshion \
                -L$(call host-path, $(LOCAL_PATH)/../../../cocos2dx/platform/third_party/android/libraries/$(TARGET_ARCH_ABI))


あとはXcode3での導入時と同様にbuild_native.shでビルドを行い、 Eclipseでプロジェクトフォルダを読み込めば動作確認を行うことができます。 読み込むフォルダも一階層深くなっていますのでご注意ください。

テンプレート展開シェル

前項の対応を行うことでXcode3と同様にiPhone/Androidでの同時開発が可能になるのですが、 新規プロジェクト作成時に毎回この作業を行うのは手間がかかってしまいます。 そこでこの作業を自動的に行ってくれる、Xcode4対応版テンプレート展開プログラムを作成しました。

展開プログラムをダウンロード

まずはテンプレート展開プログラムをダウンロード。 下記のようにcocos2dxフォルダ配下に格納してください。

column2_folder4.png

※Android SDK/NDKインストール場所によって「create-android-project-xcode4.sh」内の設定変更が必要です。[NDK_ROOT]と[ANDROID_SDK_ROOT]を環境に合わせて修正してください。詳しくは前回のコラムを参照

続いてXcode4で新規プログラムを作成します。 この作業は前項と同様です。ここでのプロジェクト名は「example3」にしました。

column2_folder5.png

最後にXcode4対応版テンプレート展開プログラムを起動します。 cocos2dxフォルダ内でcreate-android-project-xcode4.shを実行。 入力項目はcreate-android-project.shと同様です。

column2_terminal1.png

必要項目を入力するとXcode4用に設定が変更された各種ファイルが example3/example3配下に格納されています。

column2_folder6.png

尚、この展開プログラムは一時的に [プロジェクト名]tmp フォルダを作成します。 (今回の例では、example3tmpフォルダが一時的に作成されます) 既に同名のフォルダが存在していた場合、正常に稼動しない可能性がありますのでご注意ください。

まとめ

Xcode4での開発にも対応することで、より多くの方にcocos2dxを触ってもらえる機会が増えたのではないでしょうか。 次回以降はもう少し実践的な使い方などをご紹介します。

cocos2dxシリーズ

クロスプラットフォーム開発について質問、興味などありましたら、
「マルチデバイスLab.」までお気軽にお問い合わせください。

※株式会社アイ･エム・ジェイのお問い合わせフォームに移動します。
サービスに関するお問い合わせ

]]> 第三回 ティザーサイトの実装裏側！-実装編 tag:mdlab.jp,2012:/project//2.35 2012-01-13T00:40:18Z 2012-05-17T08:02:26Z 一回目、二回目と概念的な部分が多かったので、今回は実際のソースや困った点を紹介していきます。WebSocket実装のその前にティザーサイトでは、ネットワーク環境の都合上任意のポートを外部からアクセス可とすることができませんでした。また、サーバも1台しかなかったため、Apacheのポート番号を変更してNode.jsを80番ポートで動作させ、HTMLや画像などもNode.jsを通じてアクセスさせる必要がありました。 mdlab 第三回 ティザーサイトの実装裏側！-実装編

一回目、二回目と概念的な部分が多かったので、今回は実際のソースや困った点を紹介していきます。

WebSocket実装のその前に

ティザーサイトでは、ネットワーク環境の都合上任意のポートを外部からアクセス可とすることができませんでした。また、サーバも1台しかなかったため、Apacheのポート番号を変更してNode.jsを80番ポートで動作させ、HTMLや画像などもNode.jsを通じてアクセスさせる必要がありました。

そこで問題になるのが、Node.jsを単に動かしただけではファイルへのアクセスはできないということです。Apacheであれば設定ファイルで定義されたディレクトリ中のファイルに容易にアクセスできますが、Node.jsには当然そのような設定はありません。

そのため、URLを解析してどのファイルにアクセスしたいのかを判断し、ファイルを返却する必要があります。

Node.jsをWebサーバとして動かす

Node.jsをWebサーバとして動かすには以下のようなコードを記述します。

しかし、このままではHTTPリクエストを受けた時の処理を記述していないため、Node.jsは何もしてくれません。Node.jsをApacheと同じように動作させるには、以下のような処理を記述する必要があります。

  • 1. リクエストパスを取得する
  • 2. ファイルを読み込む
  • 3. Content-Typeを判別する
  • 4. レスポンスを送信する

順を追って見ていきましょう。

1. リクエストパスを取得する

まずは、http.ServerRequestオブジェクトにはURL情報が格納されています。

そこでアクセスされたURLからパスを抽出します。なお、Apacheの挙動と同様にするため、「/」を「/index.html」と読み替えることもここで処理しています。

2. ファイルを読み込む

パスを抽出したら、File Systemモジュールを利用してファイルを読み込みます。

今回はファイル全体を読み込んでレスポンスを返却するので、readFile関数（指定ファイルを非同期に読み込む）を利用しています。

ファイル読み込み後の処理はデータ読み込みが完了しないと行えないため、readFile関数のコールバックに記述することになります。

3. Content-Typeを判別する

ファイルの読み込みに成功したら、次はContent-Typeを判別します。

ブラウザによってはこのヘッダ情報を基に異なる動作をするため、できるだけ正しい情報を返却する必要があります。 （Apacheではmime.typesで定義されています。）

今回は"拡張子":"Content-Type"という形でJSONを記述し、アクセスされたファイルの拡張子から該当するContent-Typeを返却しています。

なお、どのようなContent-Typeが定義されているかは以下のURLに詳しく記述されています。 http://www.iana.org/assignments/media-types/index.html

4. レスポンスを送信する

ファイルを読み込みContent-Typeを判別できたら、最後にファイルの内容を返却します。

今回はWebサーバなので、正常にレスポンスをする場合はHTTP/1.1 200 OKをヘッダ情報に含める必要があります。

Node.jsを起動する

これまで紹介したソースを組み合わせることで、Apacheと同じようにリクエストされたファイルを返却できるようになりました。

これまでのソースをserver.jsというファイル名で保存した場合、以下のコマンドで実行することで、WebサーバとしてNode.jsが起動します。

   node server.js

この状態でブラウザからアクセスすると、URLに応じてHTMLファイルや画像、あるいは、404ページが表示されるようになります。

Node.jsのデーモン化

先ほどのコマンドでNode.jsを起動すると、待受状態のまま他の操作を行えなくなります。これでは、サーバを起動中ずっとコンソールを接続したままにしなくてはいけません。サーバとして動かすためには、やはりバックグラウンドで 実行されて欲しいものです。

幸いなことに、Node.jsをデーモン化するモジュールがあります。今回はdaemonモジュールを利用してデーモン化しました。これまで記述してきたJavascriptファイルの末尾に以下の記述を追加します。

これで、nodeコマンド実行すると自動的にデーモン化されて起動します。

ベーシック認証の実装

やっとNode.jsをWebサーバとして動かすことができましたが、開発中に誰でもアクセスできてしまうのは困りものです。そこで、ベーシック認証を設定することにしました。

今回はexpressなどのフレームワークを利用していないため、ベーシック認証の処理も実装する必要があります。

今回のおさらい

今回はNode.jsをApacheと同様に動作させるための処理、および、バックグラウンドで動作させるためのデーモン化を行いました。さらに、開発中に誰でもアクセスできては困るのでベーシック認証も独自で実装しました。

これで、Apache利用時と同様に、ドキュメントルートにファイルを置くだけでブラウザからアクセスできるようになりました。また、開発中はベーシック認証を聞かれるため、一般に公開されることもありません。

次回の内容

次回はいよいよWebSocketを用いたティザーサイト演出の実装について説明していきます。

また、ユーザエージェントに基づくコンテンツ出し分けについても合わせてご紹介します。

Node.jsなどリアルタイムWebについて、ご意見、ご質問などありましたら、
「マルチデバイスLab.」までお気軽にお問い合わせください。

※株式会社アイ･エム・ジェイのお問い合わせフォームに移動します。
サービスに関するお問い合わせ

]]> ワンソースでマルチデバイスコンテンツを実現。IMJグループ2012年賀「Multi-Device Dragon」 tag:mdlab.jp,2012:/project//2.40 2011-12-31T15:00:00Z 2011-12-31T15:09:51Z ワンソースでマルチデバイスコンテンツを実現。IMJグループ2012年賀コンテンツ「Multi-Device Dragon」 mdlab

新年明けましておめでとうございます。糸数です。

IMJグループ2012年賀コンテンツ「Multi-Device Dragon」を公開させて頂きました。

「Mac、Windows、iOS、Android」間を、龍が自由に渡り歩き、優雅に飛翔する、というコンテンツで、龍の極彩色は、"デバイス"や"ディスプレイ"を象徴し、IMJグループが2012年、めまぐるしく進化するデジタル環境の変化に取り組んでゆく、という意思を表現しています。

Multi-Device Dragon


以下、今回のコンテンツを構成する技術的なトピックです。

Adobe AIR3

さまざまなプラットフォーム、デバイスに展開できるランタイム。
今回はこれを利用し「iOSアプリ」「Androidアプリ」「Flash(web)」をワンソース開発しました。
※ベースの技術はActionScript3を使用。
※誤解されている方も多いですが、Flashの技術でiOSアプリも作成可能ですよ！。

[参考リンク]
Adobe AIR 3

RTMFP

FlashPlayer10から搭載されているP2P型通信機能。
サーバレスモードで接続することにより、サーバを解さず、同一LAN内の端末同士が通信できます。
今回はこれを利用し、各端末のAIRランタイム上のFlashPlayer同士が、直接通信しています。

[参考リンク]
Flash Player 10.1 と RTMFP - akihiro kamijo
Adobe Flash Media Server 4.5 * RTMFP グループ
Directed Routing Explained in Flash 10.1 P2P -- FlashRealtime.com

AIR Native Extension

AIR から、各デバイスの、「OS(ネイティブ)機能」を利用できる拡張機能。
例えば、iOSならObjective-C、AndroidならJAVAの機能、などが利用できます。
つまり、AIRのみでは実現できない機能を持ったアプリケーションの作成、が可能です。
（ネイティブアプリと比較してAIRアプリでできないことは実質無くなった（ちょっと語弊あるかもしれませんが））
今回はこれを利用し、それぞれのデバイスで出来るだけ同じ動作をするように、スクリーンオンオフ、ネットワーク状態監視、の機能などを拡張しています。

[参考リンク]
Adobe AIR と ActionScript Native Extensions (ANE) - akihiro kamijo

最後に

最後まで読んでいただき、ありがとうございました。
では、本年もよろしくお願いいたします！。


]]> 人気コラムランキング(～2011年12月) tag:mdlab.jp,2011:/project//2.39 2011-12-28T01:22:11Z 2012-02-01T01:41:39Z 人気コラムランキングはじめます2011年9月26日にオープンした、このマルチデバイスLab.サイト。オープンから2ヶ月がたち、コラムの総数も20本になりました「Multi Device Lab. は、デジタル・コミュニケーションの先端に立ち、今を調査し、分析し、未来を予測し、創造することをめざしています。」 mdlab 人気コラムランキングはじめます

2011年9月26日にオープンした、このマルチデバイスLab.サイト。 オープンから2ヶ月がたち、コラムの総数も20本になりました。

**「Multi Device Lab. は、デジタル・コミュニケーションの先端に立ち、今を調査し、分析し、未来を予測し、創造することをめざしています。」**

ちょうど、2011年も終わるタイミングなので、この20本のアクセス数や、口コミ数を独自に集計して、今デジタル・コミュニケーションの先端ではどんな技術や情報、データが一番必要とされているのかランキングにしてみました。

今読まれている、みんなが興味のある技術や情報、データ　ベスト５を発表！

集計期間：2011年9月26日～12月25日

●●第5位●●
swfアニメーションをhtml5に変換するAIRアプリ作ってみました

swf_animation_converter_mainimage.png

マルチデバイスLab.から初のツールです。 flashアニメーションをhtml5に変換するAIRアプリ。見た目の再現率100％。Web Designing12月号でもこの「SWF Animation Converter」をご紹介いただきました。
また、このコラムは口コミでたくさんの皆さんに知ってもらうことができました。ぜひ使ってみてください！

●●第4位●●
第一回 Android ライブ壁紙の魅力とは？

第一回 Android ライブ壁紙の魅力とは？

現在、三回まで公開しているライブ壁紙プロジェクトの第一回が四位ランクイン。サンプルアプリもこのページからダウンロードできます。 Androidライブ壁紙は、2012年Android端末の普及によりもっと需要が高くなりそうですね。

●●第3位●●
第一回 ワンソースマルチユースを斬る！

全四回で完結したワンソースマルチユースプロジェクト。最終回の第四回では、ワンソースマルチユースのガイドラインをダウンロードできます。実は、このマルチデバイスLab.サイトもこのガイドラインを元にワンソースで制作されてます。あわせてご覧ください！

●●第2位●●
スマートフォンユーザーの今

スマートフォンユーザーのライフスタイルの変化についてまとめたコラムです。興味深いデータで、多くの人にアクセスしてもらったコラムでした。来年はスマートフォンをはじめ、デバイスがどのように利用シーンとして変わっていくか楽しみです。

★★第1位★★
スマートフォン・タブレット UIガイドライン

タッチパネルの操作性など特有なインターフェイスのスマートフォン・タブレットに関するUIガイドラインがもっともたくさんの皆さんにアクセスされ、共有されたコラムでした。ガイドラインをダウンロードいただいた皆様も多く、参考になればと思います。
もちろんスマートフォン・タブレットのサイトやアプリの制作依頼もご相談ください。

どんなコラムがあるのか

最後にマルチデバイスLab.サイトで掲載している全コラムを紹介します。

プロジェクトを紹介しながらコラムについて振り返ってみましょう。 プロジェクトの最後に（完）がついているものは、連載が完結しているプロジェクトになります。

●Androidライブ壁紙プロジェクト

Androidのライブ壁紙の特徴や制作方法、テンプレートの公開まで、2012年もますますユーザーが増えると思われるAndroidのライブ壁紙についてのプロジェクトです。 実際製作したライブ壁紙をAndroidマーケットでダウンロードできますのでチェックしてください！

●Frameworkプロジェクト

年末に開始したばかりのプロジェクトです。便利なFrameworkについて調査研究していく予定です。 まずは、cocos2dxについて、導入方法などわかりやすくまとめられています。

●Node.jsプロジェクト

サーバーサイド界隈で注目を集めているNode.js。概要や導入の際の注意点や、tipsを公開していきます。 現在第二回まで公開されています。継続して掲載していきますのでお楽しみに！

●UIガイドラインプロジェクト

制作時の一つの指標となるUIガイドラインをデバイス別に公開していくプロジェクトです。 現時点で、スマートフォン・タブレットのガイドラインとフィーチャーフォン用のガイドラインを公開しています。 ランキング1位スマートフォン・タブレットの第度ラインをダウンロードいただけます。ご活用ください。

●ツールプロジェクト

実際使えるツールやアプリケーションを製作して紹介していくプロジェクト。 現在は1つのみですが、そのツールのクオリティの高さに私は驚きました。来年も期待してください！

●ティザーサイトプロジェクト（完）

約一ヶ月間の期間限定公開しましたマルチデバイスLab.のティザーサイトについて。 期間限定の利を活かして（？）普段のプロジェクトではなかなか出来ないような実験的な試みをいくつか取り入れました。その内容をご紹介しています。 開発期間は短かったのですが、すごいスピード感で完成させることができ、マルチデバイスLab.の勢いにドライブがかるきっかけとなったプロジェクトでした。
コラム内で、ティザーサイトを見ることもできます。リアルタイムウェブを体験してみてください。

●ワンソースマルチユースプロジェクト（完）

話題のMedia Queriesをはじめとしたワンソースマルチユースの対応をする際の注意点と、未来について語っていきます。 四回でいったん終了したプロジェクトですが今後新しい動きがあれば再開されます。まずは現状のワンソースマルチユースをチェックしてみてください。

●活動報告プロジェクト

マルチデバイスLab.の活動報告を告知します。 今年は雑誌掲載など紹介してます

●調査レポートプロジェクト

調査レポートを基に、ユーザーを取り巻くデジタル環境の"今"に何が起こっているのか分かり易く伝えるコラムです。 現在掲載されているコラムは、スマートフォンユーザーについてです。ご覧になっていない方はぜひチェックしてください。

2012年も、マルチデバイスLab.から発信されるコラムにご期待ください！

マルチデバイスLab.の研究内容について、ご意見、ご質問などありましたら、
「マルチデバイスLab.」までお気軽にお問い合わせください。

※株式会社アイ･エム・ジェイのお問い合わせフォームに移動します。
サービスに関するお問い合わせ

]]> クロスプラットフォームの新しい選択肢「cocos2dx」でスマートフォンアプリを開発！ -導入編 tag:mdlab.jp,2011:/project//2.36 2011-12-27T02:47:54Z 2012-02-01T01:41:29Z スマートフォンの普及が急速に進んできた昨今、AndroidとiPhoneのどちらにも対応したアプリの開発が求められるケースが増えてきました。 一般的にはAndroidならJava、iPhoneならObjective-Cといったように、OS毎に異なるプログラム言語での開発を行う必要があり、それがコスト的にもスケジュール的にも開発者を悩ませる要因となっていました。 mdlab

はじめに

スマートフォンの普及が急速に進んできた昨今、AndroidとiPhoneのどちらにも対応したアプリの開発が求められるケースが増えてきました。 一般的にはAndroidならJava、iPhoneならObjective-Cといったように、OS毎に異なるプログラム言語での開発を行う必要があり、それがコスト的にもスケジュール的にも開発者を悩ませる要因となっていました。 その悩みを解決するための新しい選択肢として、ワンソースでマルチデバイス向けアプリの開発が可能となるフレームワーク「cocos2dx」をご紹介いたします。

cocos2dxとは？

iPhone(iOS)向けの2Dゲームが手軽に開発できることで多くの開発者に使用されているフレームワーク「cocos2d for iPhone」。 それをAndroidやblackberryなどの他プラットフォームにも対応させたのが「cocos2dx」です。 デバイス毎の微調整は必要にはなりますが、事実上ワンソースでの開発が可能となりました。 「cocos2d for iPhone」はObjective-Cでの開発ですが、「cocos2dx」ではC++やLuaを使用して開発します。 http://www.cocos2d-x.org/

cocos2dxのインストール

今回はiPhoneとandroid向けのアプリ開発を行いますので、開発環境はMac OS Xを使用します。 またXcode、Eclipse、Android SDK、Android NDKがインストールされていることを前提としています。

使用環境

  • Mac OS X 10.6.8
  • Xcode 3.2.5
  • Eclipse 3.7.1
  • Android SDK Revision 16
  • Android NDK Revision 7

まずはcocos2dxのサイトから本体をダウンロード。 現時点での最新版にあたる「cocos2d-1.0.1-x-0.10.0」を使用します。

ダウンロードページ

http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download download.png ダウンロードが完了したら、「cocos2d-1.0.1-x-0.10.0.zip」を解凍して任意のフォルダに格納します。 今回はApplications配下に格納しました。 folder0.png cocos2dxのインストールはこれで完了です。

各種設定

実際にアプリ開発をする前に、インストールしたcocos2dxを開発環境に合わせて設定変更をする必要があります。

Xcode用テンプレートのインストール

iPhone開発時に使用するテンプレートをXcodeで使用できるようにします。 ターミナルを起動し、cocos2dxフォルダ配下にあるXcode用テンプレート展開シェル「install-templates-xcode.sh」を実行します。 Xcodeのインストール場所によっては、シェル内の設定変更が必要な場合もありますので実行前にファイルを開いて設定を確認しましょう。 terminal0.png 設定が問題なければ実際にシェルを実行します。 (今回の環境では権限の問題からsudoをつけています。) Xcodeのバージョンを聞かれるので数値を入力。 今回はXcode 3.2.5を使用しますので、「3」と入力しました。 terminal1.png done!と表示されれば展開完了です。 terminal2.png Xcodeを起動して「新規Xcodeプロジェクトを作成」を選択すると 「User Templates」カテゴリ内に「cocos2d-1.0.1-x-0.10.0」が追加されています。 xcode0.png これでXcode用テンプレートのインストールは完了です。

Android SDK/NDKのパス設定

今度はAndroid用の設定です。 ターミナルを起動し、cocos2dxフォルダ配下にあるAndroid用プロジェクト生成シェル「create-android-project.sh」を実行します。 こちらもAndroid SDK/NDKのインストール場所によって、シェル内の設定変更が必要になります。 今回使用する環境では下記のように設定しました。 terminal3.png 設定を変更したら準備完了です。

プロジェクトの作成

Android用プロジェクト

実際にアプリを開発するためのプロジェクトを作成します。 ターミナルを起動し、前項で設定変更をした「create-android-project.sh」を実行しましょう。 最初にパッケージパスの入力を求められます。 今回開発するアプリは「jp.mdlab.example」にしました。 terminal4.png 続いてターゲットIDの入力です。 Androidの各バージョンと、それに対応する数値がIDとして表示されますので、 作成するAndroidのバージョンに応じたIDを入力します。 今回はAndroid2.1向けにするため、「1」を入力しました。 terminal5-12set.png 最後にプロジェクト名の入力です。 プロジェクト名は「example」にしました。 terminal6.png 上記3点の入力が完了するとプロジェクト作成処理が行われます。 terminal7.png cocos2dxフォルダ配下に「example」フォルダが作られました。 中には下記のようにフォルダが3つ含まれています。 folder1.png android:Android用アプリで使用する設定ファイルやリソース類が含まれます。 Classes:cocos2dxでの開発はこのClassesフォルダ内の*.cpp、*.hなどを編集します。 Resources:アプリで使用する各デバイス共通の画像などが含まれてます。

iPhone用プロジェクト

上記でAndroid用プロジェクトは作成できましたが、これだけではiPhone用アプリの開発はできませんので、 別途iPhone用プロジェクトを作成する必要があります。 iPhone用プロジェクトの作成時、Android用プロジェクトと同じプロジェクト名にして 先ほど作成したプロジェクトフォルダに上書きすると、 共通のClassesファイルを使用したiPhone用/Android用それぞれのプロジェクトの作成をすることができます。 共通のClassesファイルを使用することで、iPhone用とAndroid用アプリの同時開発が可能になります。 comp.png まずXcodeを起動して「新規Xcodeプロジェクトを作成」をクリック。 xcode1.png User Templates内の「cocos2d-1.0.1-x-0.10.0」を選択するとcocos2dx用のテンプレートが表示されますので、 「cocos2d-x Application」を選択して「選択...」ボタンをクリック。 xcode2.png 新規プロジェクト保存画面が表示されますので 名前に「example」と入力し、cocos2d-1.0.1-x-0.10.0フォルダ内に保存します。 xcode3.png exampleプロジェクトは先ほどAndroid用プロジェクトとして作成しましたので、 下記のようなアラートが表示されます。 Android用プロジェクトで作成されたClassesフォルダなどをそのままiPhone用プロジェクトとしても流用しますので、 「置き換え」ボタンをクリックして上書きします。 xcode4.png さらに下記のような確認画面が表示されますので、 「選択ファイルを上書き」ボタンをクリックして上書きします。 xcode5.png 先ほど作成した「example」フォルダ内にxcodeprojファイルや「ios」フォルダが作成されました。 これでiPhone用プロジェクトの作成は完了です。 folder2.png

iPhoneでの動作確認

iPhoneでの動作確認は一般的なアプリ開発時の手順と同じです。 前項で作成したexample.xcodeprojファイルをXcodeで開き、 [概要]のプルダウンを「Simulator」に設定してから[ビルドと実行]をクリック。 ビルド完了後にシミュレータが起動し、テンプレートに記述されたプログラムが実行されます。 xcode7.png ※実機で動作させるには事前にプロビジョニングファイルの登録や設定が必要です。 少しだけプログラムに手を加えてみます。 Classesフォルダ内にあるHelloWorldScene.cppを開き、下記のような変更をしてみました。

修正前

修正後

ファイルを保存してから再度[ビルドと実行]をクリック。 先ほどHelloWorldScene.cppに加えた修正が反映されていることが確認できます。 xcode8.png

Androidでの動作確認

続いてandroidでの動作確認です。 Androidは少し複雑で、まずはNDKのビルドから行う必要があります。 ターミナルを開き、先ほど作成したプロジェクト「example」フォルダ内の「android」フォルダに移動。 フォルダ内にある「build_native.sh」を実行します。 terminal8.png cppファイルのコンパイルが順次行われていくのですが、 途中でエラーが発生してしまいました。 terminal9.png 原因の調査をしたところ、Android NDKがRevision 7になって削除されてしまったフラグがあるらしく、 Android.mkファイルを修正しなくてはならないようです。

参考サイト

http://blog.plicatibu.com/how-to-solve-problems-with-build_native-sh-and-android-ndk-r7-on-cocos2d-x/ cocos2dxフォルダ配下のcocos2dx/Android.mkファイルを開き、「LOCAL_CFLAGS」に「-DGL_GLEXT_PROTOTYPES=1」を加えます。 terminal10.png 再びbuild_native.shを実行したところ、今度はうまくビルドできました。 terminal11.png example/android/libs内に.soファイルが生成されています。 folder3.png NDKのビルドが完了したらEclipseを起動。 [File]＞[New]＞[Android Project]を選択するとプロジェクト作成画面が表示されます。 「Create project from existing source」をチェックし、 「Location」の欄に先ほど作成した「example」フォルダ内の「android」フォルダを入力しましょう。 「android」フォルダを選択した時点で、「Project Name」に「example」と自動的に入力されます。 eclipse0.png 入力が完了したら「Finish」ボタンをクリック。 先ほど作成したプロジェクトが読み込まれます。 eclipse1.png 念のため[Project]＞[Clean]で一度クリーニングしてからビルド。 [Run]＞[Run As]＞[Android Application]を選択すればシミュレータで起動できます。 iPhoneでの動作確認時に行った修正も反映されていることが確認できました。 eclipse2.png 開発機材に実機を接続してから起動すると実機での動作確認もできます。

まとめ

cocos2dxの導入からiPhone、Androidでの動作確認方法までご紹介いたしました。 実際にアプリを開発する際には、Xcode上でiOSベースでの開発と動作確認を行いつつ、 ある程度できあがったらNDKのビルドをしてEclipseでの動作確認、という流れになるかと思います。

cocos2dxシリーズ

クロスプラットフォーム開発について質問、興味などありましたら、
「マルチデバイスLab.」までお気軽にお問い合わせください。

※株式会社アイ･エム・ジェイのお問い合わせフォームに移動します。
サービスに関するお問い合わせ

]]> フィーチャーフォン UIガイドライン tag:mdlab.jp,2011:/project//2.28 2011-12-21T10:09:22Z 2012-04-06T05:52:34Z フィーチャーフォンUIガイドラインについて小さい画面でキー操作するフィーチャーフォンも、適したUI設計を行う必要があるデバイスです。フィーチャーフォンの特徴として挙げられ、なおかつ注意すべき点は、画面サイズ、容量制限、フィーチャーフォン特有の機能制限です。 mdlab

フィーチャーフォンUIガイドラインについて

小さい画面でキー操作するフィーチャーフォンも、適したUI設計を行う必要があるデバイスです。

フィーチャーフォンの特徴として挙げられ、なおかつ注意すべき点は、画面サイズ、容量制限、フィーチャーフォン特有の機能制限です。
このデバイスの特性を踏まえずに設計すると、ユーザーにとって使い勝手の悪いばかりか、閲覧できないサイトになりかねません。

この特徴を踏まえた上で、マルチデバイスLab.はIMJモバイルのユーザビリティ研究所と共同で、最適なUIを設計するためのガイドラインを作成しました。また同時に、ガイドラインに準拠したPSDデータも同時に公開しています。

ガイドラインとPSDデータを見比べ、画面サイズと容量制限を踏まえたフィーチャーフォンの画面設計で注意すべきポイントを掴んでいただければと思います。

ただしUIガイドラインはあくまで指標です。
サイト制作時にはターゲットユーザー、利用シーンに合わせて、ガイドラインを調整してご利用していただくことをお勧めします。

ガイドラインのダウンロード

下記リンクからPDF、PSDデータのダウンロードができます。

slideshareにも公開しているのでWEB上からでも確認できます。

View more presentations from MultiDeviceLab

ユーザビリティ研究所

株式会社IMJモバイルのユーザビリティ研究所は２００７年にモバイルサイトのユーザビリティ研究所として発足し、現在ではPC・モバイル・スマートフォン等、多様化するデバイスのユーザビリティ研究所として活動を行っている研究組織です。

マルチデバイスLab.のガイドラインに質問、興味などありましたら、
「マルチデバイスLab.」までお気軽にお問い合わせください。

※株式会社アイ･エム・ジェイのお問い合わせフォームに移動します。
サービスに関するお問い合わせ

]]> 第三回 Androidライブ壁紙テンプレートを公開します! (カスタマイズ＆ランチャー機能付き) tag:mdlab.jp,2011:/project//2.30 2011-12-06T05:15:53Z 2012-02-01T01:29:45Z Androidライブ壁紙テンプレートを公開します mdlab vol3_0_title.png

こんにちは糸数です。
Androidのライブ壁紙を作成していて、自分なりのフレームワークが出来てきたので、テンプレートとしてまとめてみました。
まだまだ改善の余地はあるかもしれませんが、公開させて頂きます。

どんなテンプレート？

デフォルトで下記２つの機能が備わっています。

[1] カスタマイズ機能

ライブ壁紙をユーザーがカスタマイズできる、設定画面（PreferenceActivity）があり、そのPreferenceで変更した値を、ライブ壁紙Engine側で取得、確認するコードがデフォルトで入っています。
※OnSharedPreferenceChangeListener インターフェイスの registerOnSharedPreferenceChangeListener でリスナーしている

[2] ランチャー機能

ライブ壁紙は、通常のアプリと違い、インストールしてもホーム画面に表示されないので、どこに追加されたのかユーザーがわかりにくい、という問題があります。（実際そのようなユーザーを何人か目の当たりにしました）
それを解消するため、壁紙インストールと同時に、ホームに「壁紙選択ページを起動する通常のアプリ」を作成するようにしています。
※AndroidManifest.xmlでアプリを定義している

テンプレート利用するには？

ダウンロード

テンプレートをダウンロード
（Eclipsプロジェクト）

Eclipsにインポートする

※ [ 注意 ] インポート前に、文字コード設定を確認。
[Preference] > [General] > [Workspace] の[Text file encoding] が UTF-8 になっているか確認しましょう。

  • 1.ダウンロード後フォルダを解凍。
  • 2.Eclipsを起動し、メニューの [File] > [import] を選択。
  • 3.出てきたダイアログで、解凍したフォルダを選択。（Copy projects into workspace をチェックしテンプレートのコピーを使うようにします）

※開発環境のセットアップに関しては 第二回 Android ライブ壁紙を作るまで。｜マルチデバイスLab. - Multi Device Lab.を参考ください。

テンプレートを素の状態でビルド＆インストールした場合の説明

vol3_1_buildandinstall.png

通常通りビルド＆インストールすると、ホームにランチャーアプリが追加されます。

vol3_2_rancher.png

ランチャーアプリを起動すると、シンプルにテキストとボタンのみが表示された画面になり、ボタンをタップすると...

vol3_3_toast.png

「ライブ壁紙選択画面」が表示され「(アプリタイトルはここ)を選択して下さい」とToastメッセージが表示されユーザをナビゲートします。

vol3_4_setting.png

壁紙を選択すると真っ黒な画面になります（つまりテンプレートなのでなにも表示されません。）
「Setting...」をタップすると、設定画面が表示されます。
デフォルトで「 ListPreference / CheckBoxPreference / EditTextPreference 」の3つのPreferenceサンプルが配置されています

vol3_5_toast_preference.png

Preferenceに何かしら変更を加えると、ライブ壁紙側でその変更を取得し、Toastメッセージが表示されます。

文言、画像、レイアウト変更は「resフォルダ」内のファイルを適宜調整していけばOK!

テンプレート使用例

上記テンプレートを利用し作成した、サンプルライブ壁紙をご紹介します。
vol3_droidclockwallpaper.png

[Android Market] DROID CLOCK WALLPAPER

上記、「カスタマイズ機能、ランチャー機能」が実装されています。
※表示するドロイド君のスタイルカスタマイズできます。(2D/3D)

テンプレートのパッケージ名を任意の名前に変更したい場合

現状このテンプレートでは、パッケージが jp.mdlab.livewallpaper.template となっています。
任意のパッケージに変更する手順がすこし手間なので、詳細を説明します。

1.AndroidManifest.xmlを開き任意のパッケージ名に変更
vol3_7_manifest.png

2.res/xml/wallpaper.xml の android:settingsActivity の設定クラスパスを変更
vol3_8_xml.png

3.res/パッケージを、[右クリック] > [Refactor] > [Rename]でリファクタリング
vol3_9_refactor.png

4.res/パッケージ/Main.java を開き、22行目あたりの、設定クラスパスを変更。
vol3_10_classpath.png

5.念のため最後に [Project] > [Clean] しておきましょう。
vol3_11_clean.png

これで任意のパッケージに変更できました。

最後に

「もっとこうしたほうがいいよ！」などのご意見などありましたら、 @md_lab までご連絡いただけると幸いです。

最後まで読んで頂きありがとうございました！

Android ライブ壁紙シリーズ

]]> 第二回 ティザーサイトの実装裏側！-環境編 tag:mdlab.jp,2011:/project//2.31 2011-11-22T03:33:08Z 2012-02-01T01:40:57Z 先日、東京Node学園祭というイベントが開かれていました。 東京Node学園祭とは、Node.js日本ユーザグループ、Node.jsの作者、Socket.IOの作者を招聘し開催した、初のカンファレンスです。 こちらの東京Node学園祭のページを見ていたらマルチデバイスLab.のティザーサイトと同じ表現実装でした。マウスの位置を共有する方法はNode.jsのパフォーマンスとしては分かりやすいのかもしれませんね。 mdlab 第二回 ティザーサイトの実装裏側！-環境編

先日、東京Node学園祭というイベントが開かれていました。

東京Node学園祭とは、Node.js日本ユーザグループ、Node.jsの作者、Socket.IOの作者を招聘し開催した、初のカンファレンスです。
こちらの東京Node学園祭のページを見ていたらマルチデバイスLab.のティザーサイトと同じ表現実装でした。マウスの位置を共有する方法はNode.jsのパフォーマンスとしては分かりやすいのかもしれませんね。
※現在は東京Node学園祭のNode.jsの演出は見ることが出来ないようです。

さて今回から、ティザーサイトで実装したNode.jsについて説明します。
それぞれのインストール方法は公式サイトをご覧いただくとして、第二回目は何を利用してどのような環境を構築したのか？を、ご紹介します。

ティザーサイトのCSSやJavascriptに関してはティザーのコラムで連載

環境設定

インストールはそんなに難しくありません。
今回はCentOS 5.5で実装をしたので、CentOS 5.5ベースで話を進めます。
※今回の実装したバージョンで説明しているため、インストール前には最新のバージョンが無いか確認してください。

Node.jsをインストール

各バージョンは以下の通りです。

-OS
CentOS 5.5
-node.js
node-v0.4.9.tar
-npm(Node Package Manager)
※ご利用のnpmのバージョンによってはtarをバージョンアップする必要があります。
-Socket.IO
Socket.IO v0.7
参考URL
CentOS5インストール - CentOSで自宅サーバー構築
これからnode.jsを始める人のためのインストール系エントリまとめ - 大人になったら肺呼吸
Socket.IO: the cross-browser WebSocket for realtime apps.
node.jsで遊ぶ: モジュール管理編 - SummerWind
Socket.IO: the cross-browser WebSocket for realtime apps.

※Node.jsは現在安定版0.6.2がリリース済み。
※Windowsバイナリも提供されています。

Node.jsのバージョン管理

Node.jsは活発に開発が進められており頻繁にバージョンアップしています。 ティザーサイトは短期間ということもありNode.js v0.4.9のみを直接コンパイルして利用しましたが、 継続的にNode.jsを利用したサービスを提供する場合にはNode.jsのバージョンアップ作業も考慮してインストールしたほうがいいでしょう。

バージョンアップのたびにソースコードのダウンロード・コンパイルを実施するのは煩雑ですが、何よりバージョンアップしたことで下位互換性がなくなりこれまでのプログラムが動かなくなることがあります。 そんなときのために、バージョン管理ツールを使って複数バージョンのNode.jsを１つの環境にインストールしましょう。

ここでは有名な２つのツールを紹介いたします。
お好きな方を使用していただければ大丈夫かと思いますが、それぞれの特徴は以下のようになります。

-nave
npmと作者が同じ
-nvm
インストールが楽
zshを使用している場合、躓くポイントがいくつかある
最近はこちらを使用している人が多い
こちらを先にインストールすると、Node.jsの管理がとても楽になる。

パッケージの管理

Node.jsのバージョンアップだけでなく、ブラウザのバージョンアップによって利用しているパッケージ
（Node.jsの機能を拡張するプログラム。Socket.IOなど）が正常に作動しなくなることもあります。
実際にこのティザーを公開してから一ヶ月後、Chromeのバージョンアップにより当初利用していた
Socket.IOのバージョンでは正常に動作しなくなりました。

もしかすると、Node.jsよりもパッケージの方がNode.js本体のバージョンアップやブラウザの実装状況など
様々な要因により利用できなくなる恐れがあり、管理が煩雑ではないのか？とお思いかもしれません。
しかし、幸いなことにNode.jsのバージョン管理ツールと同様に、パッケージ管理を行うツールがあります。

npm(Node Package Manager)はNode.jsのパッケージ管理システムの一つです。
こちらは先程ご紹介したnaveと同じ作者の方が作成されています。

これらをインストールして、まずはNode.js開発の基盤を作っていきましょう！

次回の内容

次回はNode.jsを利用した場合のベーシック認証、HTMLファイルや画像を返却するといったページ表示までの実装について説明していきます。

Node.jsシリーズ

マルチデバイスLab.の研究内容について、ご意見、ご質問などありましたら、
「マルチデバイスLab.」までお気軽にお問い合わせください。

※株式会社アイ･エム・ジェイのお問い合わせフォームに移動します。
サービスに関するお問い合わせ

]]>