Cafe Diary ログに戻る

2012-12-25

いっきに作ってしまおう。ProcessingでAndroidアプリを作成&公開する方法

今月は5年ぶりにPCを新調してMac Book Airを買い、ParallelsでWindows8環境を作ったりして、いっきに散財してしまい、しばらくは節電ならぬ節ガジェットだなぁと諦めかけていたのですが……クリスマスプレゼントとしてNexus7を貰いました。これは――嬉しい。

その記念というか、無駄な勢いというか、前回のWebアプリをほぼそのままにAndroidアプリとしてリリース! 今回はその手順をご紹介します。

アイデアがどんどん湧いてくる!? Idea Man (Google Play - Androidアプリ:無料)

processing.jsとWebViewを使ったアプリではなく、Javaコードのアプリとして作成しています。

テストした開発環境はWindows 8+Nexus7(Android)です。


1.Javaモードで動作チェック

processingのスケッチ(コード)を普通にJava(Standard)モードで動作確認します。
問題なければ次へ。


2.Android SDKをダウンロードしてProcessing - Androidモードの環境設定

Androidモードを使う場合、Android用のSDK(ADK)が必要なので
GoogleのサイトからダウンロードしてProcessingにパスを設定します。

以下のようなパッケージをインストールしておきましょう。

※バージョン違いなどでうまくいかない場合は、古いAPIや最新のAPIのパッケージのインストールもお試しください。

もしAndroid SDKのパスの指定を間違えたときは、
ProcessingのFile->Preferenceで開くダイアログの下部に書いてある preferens.txt の

android.sdk.path=xxx

を編集してProcessing(PDE)を再起動しましょう。


3.Androidモードで実機転送

エミュレータを使用する場合はProcessingのメニューのAndroid->AVDManagerで設定や起動ができます。が、Androidの開発でエミュレータを使うのはオススメしませんので説明は割愛。

以下は実機、つまり実際のAndroid端末を使う場合の手順です。

まず、Android端末内の設定画面で、開発者向けオプションを表示します。

Android OS 4.2以降を使っている場合など、開発者向けオプションがない場合はこちらのサイトなどを参考に設定->タブレット情報->ビルド番号を7回タップすると、開発者向けオプションが表示されるようになります。

設定->開発者向けオプションの「USBデバッグ」(USB接続時はデバッグモードにする)をONにしてください。

また、OSのバージョンによっては、
設定->アプリケーションの「提供元不明のアプリ」(サードパーティアプリケーションのインストールを許可する)をONにする必要があるかもしれません。(Nexus7 OS 4.2.1ではセキュリティに「提供元不明のアプリ」がありましたが、特にONにする必要はありませんでした)

あとはAndroid端末をUSBケーブルでパソコンにつないで、実行……なのですが、
Android端末開発用のUSBドライバーをインストールする必要があります。

各メーカーのサイトからダウンロードしてインストールするか、
「2」でPCにインストールしたパッケージ内の、

sdk\extras\google\usb-driver

にある該当ドライバ(android-winusb.inf)をインストールしてください。
手動の場合はこのファイルを選択して右クリックメニューで「インストール」。

# Nexus7でしか試してないので他の端末で正しいかどうかはよく知りません。

デバイスマネージャで見たときにその端末の「!」マークが無くなっていればOKです。

あとはProcessingをAndroidモードにしたまま、通常通り再生ボタン(Ctrl+R)でスケッチを実行すればOK。無事起動したかな?

# ちなみにCtrl+Shift+Rでエミュレータでの実行ができます。

実行したときに画面サイズが変だなと思ったら、

void setup(){
  size(displayWidth, displayHeight); // Android用

とすると端末の画面いっぱいに表示できます。

ただ動かすだけならここで完了ですが、
アプリをGoogle Playなどのストアで公開したい場合は以下の手順に進んでください。


4.ビルドの準備(antのダウンロードとパスの設定)

ビルド用にAntをダウンロードして、フォルダに解凍。
.zip archive: apache-ant-1.8.4-bin.zipとか書いてるヤツです。

環境変数のPATHにantのbinフォルダをセミコロン(;)で区切って追加します。

例)
antを置いたフォルダ\apache-ant-1.8.4\bin

後述するkeytoolとjarsigner用にjdkのbinも、PATHに追加します。

例)
processingを置いたフォルダ\processing-2.0b7\java\bin

同じく後述するzipalign用にAndroidSDKのtoolsも、PATHに追加します。

例)
androidSDKを置いたフォルダ\adt-bundle-windows-64\sdk\tools

以上で環境変数への設定は完了です。


5.apkファイルをリリースビルド

あとはProcessing Forumのやり取りを見てやってみたところできたという手順です。

# なおそのうちProcessingでExport Signed Packageがサポートされるようになれば
# このような面倒な手順は省略できるようになると思います。

まず、Processing(PDE)のメニューのFile->Export Android Projectを選択すると
スケッチのあるフォルダにandroidというフォルダが作られてプロジェクトが出力されます。

コマンドプロンプトを起動して、さきほど作ったandroidフォルダに移動し、

ant release

を実行すればビルド完了です。

「スケッチ名-release-unsigned.apk」という名前のファイルができていると思います。
読んで字のごとく、このapkはまだ未認証のapkなのでストアには公開できません。

ちなみにスケッチ直下(androidフォルダの一階層上)に

  • icon-48.png
  • icon-72.png

といった名前でそれぞれのサイズのアイコンを用意してExportすると、アプリのアイコンを変更できます。アイコンやストア用のスクリーンショットなどのガイドラインはこちら


6.keytoolで認証キーを作成

スケッチフォルダ直下で以下のコマンドを実行してください。

keytool -genkey -v -keystore スケッチ名-release-key.keystore -alias エイリアス名 -keyalg RSA -keysize 2048 -validity 10000

スケッチ名はスケッチフォルダ名そのもの(大文字小文字も同じで)、エイリアス名はあなたの名前とかドメインとかでしょうか?

実行するとパスワードとか所在地とか色々聞かれるので答えていきましょう。

スケッチ名-release-key.keystoreというファイルができればOKです。


7.jarsignerとzipalignで認証済みapkファイルを作成

スケッチフォルダ直下で以下のコマンドを実行してください。

jarsigner -verbose -keystore スケッチ名-release-key.keystore android\bin\スケッチ名-release-unsigned.apk エイリアス名

問題なければ、さらに次のコマンドを実行して、
アライメントをそろえて認証済みapkファイルを作成してください。

zipalign -v 4 android\bin\スケッチ名-release-unsigned.apk android\bin\スケッチ名apk

最後のファイル名は好きな名前でOKです。
これでストアに公開可能なapkファイルができました!


8.Google Playにデベロッパー(開発者)登録

Google Playのデベロッパー登録の回答ページにある通り、
Google Play Developer Consoleにアクセスしましょう。

メールアドレスや電話番号などのプロフィールを記載して、
初回費用として$25払えば完了です。


9.アプリ(apk)やスクリーンショットをアップロードして公開

アプリの管理ページでアプリ名を入力したあと、
apkファイルやスクリーンショットをアップロードしたり、
アプリの説明を書いたりしましょう。

必須のものをすべてを用意して保存すれば、数時間後にはGoogle Playに公開されます。

おつかれさまでした。


以上、全部まとめると長いですが、一度やってしまえばあとは簡単ですね。
コマンドはバッチファイルにしてもいいですし。

なお、アプリ内で使用する関数によっては Processing(PDE)のAndroid->Sketch Permissionsで
AndroidManifest.xmlの設定をする必要があるかもしれません。

その他ProcessingでAndroidを使う際の設定についてはProcessing for Android WIkiArduino Wikiのこちらのページ(日本語訳)などが参考になります。

IdeaManアプリの中身の方は、新しいデータを入れないと見飽きてしまって面白くないし、
暇があればもうちょっとまともに作りたいところです。



Trackback(0)

2012-12-6

アイデアがどんどん湧いてくる!? Processingで作るスマートフォン向けWebアプリ

今年もProcessing Advent Calender 2012に参加しました。本日12/6のテーマは適当に「スマートフォン」とだけしていたのですが……ちょうどいいネタがない!

 〜ここから回想〜

思い起こせば、小学生の頃のこと。「しんはつめいじどうぽちぽちき」という絵本を読みました。記憶の中での絵本の内容は、「すごい機械を発明したので、その機械にさせたいことを募集したところ、大量の手紙が届き、じどうぽちぽち機は大量の手紙を自動処理する機械になった」というもの。

それが現在郵便局で使われている機械だと思うと非常に感慨深いですね。

――ではなくて、ネタに困った結果、前々から作りたかったネタを作るためのWebアプリを作ってみました。

iPhone / Androidなどのスマートフォン向けです。が、iPhone5、iPhone3GSでしかテストしてません。Androidはエミュレーターで少しだけ。

 http://goo.gl/bZg1G

上記URLにスマートフォンからアクセスするとWebアプリを確認できます。

Shuffleボタンで3つのキーワードすべてをシャッフル。

各キーワードは上下にドラッグして入れ替えたり、左右に動かして個別に新しいキーワードと入れ替えたりもできます。

アイデアの生み出し方について考えた古典「アイデアのつくり方」で、ジェームス・W・ヤングは次のように語っています。

アイデアとは既存の要素の新しい組み合わせ以外の何ものでもない。

――ジェームス・W・ヤング著、今井茂雄訳 『アイデアのつくり方』阪急コミュニケーションズ、1988年、28頁

そう、新しい組み合わせこそが、新しい発見であり、アイデアなんです。

さあ、これで湯水のごとくアイデアが湧き出てきますね!
新しいアプリ、新しい料理、新しい政党、クリスマスプレゼントでもなんでもござれ!!

……と言い切るにはナンセンスなものですが、作りながらひとりで笑えたのでこれはこれでよし。

ソースコードはこちら IdeaMan.pde。200行ちょっとです。index.htmlもリンク先を保存するか、アクセスしてソースコードを表示すれば確認できます。

※UTF8なので文字化けする方はダウンロードして対応エディタでご確認ください。

構成を単純にするためキーワードのテキストデータもソースに入れてます。
データはまだ100個+αぐらいしか入れてないので増やすと面白いですよ。

さて、ではこのアプリのようなスマートフォン向けのWebアプリ作り方をピンポイントで説明しましょう。

1.Processing 2.0をダウンロード

いまはProcessing 2.0 beta 6をダウンロードできますね。

2.JavaScriptモードでプログラムを作成

Processingを起動したあと右上にあるモードのボタンでJavaをJavaScriptに変更します。

iPhoneとAndroidでどうも画面拡大率が同じように書けなかったので、以下のように分岐して画面サイズを決めました。

 void setup() 
 {
     size(640, 1136); // PCでのテスト用。iPhone 5相当
 
     if( navigator.userAgent.indexOf("iPhone")>0 || 
         navigator.userAgent.indexOf("iPod")>0 ||
         navigator.userAgent.indexOf("iPad")>0 )
     {
         size(screen.width * 2, screen.height * 2);
     }
     else if( navigator.userAgent.indexOf("Android")>0 ) 
     {
         size(screen.width, screen.height);
     }
     ...

PC用のものが余計ですが、PC用のsizeを最初に書いておかないとprocessing(PDE)上でのテストがうまくいかないため、こんなありさまに。

でも、あとは普通にProcessingでプログラミングするだけ!

3.実行するとできるweb-exportフォルダのindex.htmlにスマートフォン向けのmetaタグを追加

幅とか拡大率とか、拡大縮小禁止とかを指定しました。
Android用にtarget-densitydpi=device-dpiと指定しています。

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no" />

<meta name="apple-mobile-web-app-capable" content="yes" />

iPhoneのHome画面にブックマークを登録するときのWebアプリ用のアイコンを指定する場合は以下のような感じで。

<link rel="apple-touch-icon" href="icon.png" />""

あと余計なcssなども取り除いています。

それから、web-exportフォルダのままだと上書きされるので、書き換えたindex.htmlは別のところに退避しておくとよいでしょう。

4.ブラウザのURLバーを見えなくする&スクロールを禁止に

そうするためには強引にウインドウをスクロールさせるらしいので以下のようにしてみました。

<body onLoad="window.scrollTo(0, 1); setTimeout(scrollTo, 500, 0, 1);" ontouchmove="event.preventDefault()"">

でもダブルタップするとスクロールしちゃいますが。どうにかならないのかな?

5.Webサイトにアップロード

自分のWebサイトがないときには、Dropboxのpublicフォルダに置いて、index.htmlのURLリンクを公開(長いときは短縮URLにして)という技もあります。

以上で完了です。

調整したいところはまだ色々あるのですが、ひとまずお試しください。

# もしmetaタグやスクロール、canvas側のサイズなど、iPhone/Android両対応でうまいやり方をご存知の方がいましたら、ぜひ twitter @n_ryotaBBSなどにコメントください。

12/25 追記
このWebアプリをもとにProcessingでAndroidアプリを作成しました



Trackback(0)

2012-10-14

ゲームの中に入って遊ぼう - Kinect Sky Labyrinth

8月にQUMI Q2という小型プロジェクターを買ったので、このプロジェクターとKinectを使って遊べるゲームを作ってみました。

床に広げたただのシーツが、突然広々とした空が広がる世界になり、自分がゲームの中に入って遊んでいるような感じになります。

映像、手持ちのiPhone5で撮ったので見づらいですね。暇があったら撮り直したい。

最初に位置あわせのためのキャリブレーションを行っています。固定設置だったらいらないけど、毎回動かしてるので。でもこんなやり方でいいのかな。

ゲームのルールとしては、ブロックからブロックに飛び移って遊び、
たくさんブロックを踏めるほどよい、というもの。

映像は手抜きで立方体しか使ってないです。シーツのアイロンがけの方が面倒で……。

でも、Kinectで遊ぶのは本当、楽しい。以前Kinect Magic Knightを作ったときもそう思ったけど。
先週、体調悪いのに楽しすぎて深夜作業してしまったのはアレですが。

プログラムはProcessing + SimpleOpenNIを使って書いています。工学ナビのProcessingで手抜きプロジェクションマッピングも参考にさせていだきました!

微妙すぎて分からないと思いますが、プレイヤーの位置にあわせて、見える景色に微妙に角度をつけたりしているので、歩くだけでも多少奥行き感があります。これは以前作ったWindowSimulatorと同じ手法ですね。

ただ歩くスペースがない。もう少し広い部屋でやってみたいものです。



Trackback(0)

2012-8-24

ゲーム作りに役立つ! デジカメ・プロトタイピング

2012年8月22日、CEDEC2012というコンピュータを使った娯楽のカンファレンスで
ゲーム作りに役立つ! デジカメ・プロトタイピングと題して
30分ほどの講義をしてきました。

よく考えたらCEDEC2012の講義、みんな「ゲーム作りに役立つ!」だから
このタイトルは、なにも絞れてない……とか思いましたが、あとの祭りです。

デジカメを使って動画でゲームのイメージ映像を試作する話。
ファミ通の記事で短くまとめていただけてます。

これはアクションゲーム「メドゥーサと恋人」の例です。
1〜2人プレイ、コミカルなのにどこか切ないというのを狙いました。

下はデジカメプロトの趣旨とは無関係に、無理言って描いていただいたイラスト。
一瞬しか映らなかったのでここでアピールしておきます。

# 中川さんありがとうございました!
# メドゥーサの蛇が一匹だけ漁師の方を見ている絵にしようか、
# なんて話になったときにはすでに時間が無かったという。

講義は、誰もいなかったらどうしよう……と思ってたけど、満席近く見にきてもらえて、
温かいリアクションで、ホッとしました:D
お役に立ててたらいいな。

練習に付き合ってくれたみんなにも感謝です。

しかし、会社で一緒にゲーム作りたい方募集してます!という話をしそびれた。
募集してます。

# 資料はそのうちCEDiLでも公開されると思いますけど、いつになるのか不明。



Trackback(0)

2012-8-12

こんなにコンパクトで綺麗! LEDプロジェクター生活をはじめよう

1年ほど前からずっと欲しかった小型プロジェクターQUMI Q2を、先日ついに購入しました。

600g、300ルーメンのLEDプロジェクターです。
大きく投影するなら暗い場所で見ることが必須ですが、小さく投影するならそこそこ明るい場所ても平気。
動作音がとても静かなのがいいです。

詳しくはASCHIIの記事を見ていただくとして、実際投影してみた映像はこちら。

まぁ、映画を見るために買ったわけじゃなくて、なにかプログラムを投影して遊ぼうと思ったんですが。

デジカメで撮ったMP4動画なんかも、USBメモリやマイクロSDカードに入れて再生できます。

# 誤算だったのはRegza(テレビ)からの映像出力がコンポジット出力(いわゆる、黄赤白のケーブル)しかなくて、映せるけど低解像度だったこと……。QUMIはHDMI入力ができるのに。

価格は、Amazonだとこの記事を書いた時点では46,541円
(Amazon.comなら $499 + 送料で買えます)

今回はAmazonではなく、livedoorのデパートのAvanZarがセール中で45,009円、ポイントが6000円分ぐらい付いたので、実質3万9000円くらいかな。色はホワイトで。

ちなみに、もうすぐこれの後継機種のQUMI Q5が出ます(海外ではすでに販売中)。
少し高くても、より高性能な機種をお望みでしたら、そちらを待つのがオススメです。



Trackback(0)

2012-7-4

JINS PCクリアタイプを買ってみた

普段、会社ではコンタクト、家ではメガネという生活なのですが、最近目が痛くなることが多かったので、巷で話題のPC用メガネを買ってみました。

最初はPCのモニタの輝度、コントラスト、色温度など調整してたんだけど、なにか違う……と。

それで、今回ターゲットとしたJINS PCにはライトブラウンの薄いサングラスみたいなレンズ(ブルーライトカット率45%)と、透明色のクリアレンズ(ブルーライトカット率30%)があるのですが、今回はクリアレンズを選択。

理由としては、色味をある程度は正しく把握しておきたいというのがひとつ。それから、そもそもコンタクトの使用時間を減らすだけで良い気がしていたので、それほどブルーライトカットを期待してもなかったので。

フレームは好きなものを選べるとのことで、目の保湿効果が若干アップするという変り種フレームのJINS Moistureネイビー色にしました。

へんなフレームにした理由は、保湿という機能があるから――というよりも、今持っている目立たない普通のメガネより、メガネメガネしたインパクト重視という理由で。近視なので矯正ありのレンズをつけると目が少し小さく見えるので、あえて目立つメガネにするのもいいかなぁ、と。

視界の端にあるフレームが水中眼鏡というかなんというか、映画の帯みたいな感じで面白かったというのもあります。

クリアレンズは¥3,990(矯正ありなしで価格かわらず)で、レンズ交換費はキャンペーン中で無料、フレームも¥3,990だったので、合計¥7,980です。

注文してから2週間ということだったんですが、今回は1週間くらいで出来たという連絡が来ました。

そんなわけで、このメガネをしばらく使ってみようと思います。

ちょっとかけた感じだと快適ですが、
反射タイプなので背後の光の映りこみが他のメガネより目立つ感じはします。

え? JINS PC Hackers? これは着こなせる自信がなかったので断念です。



Trackback(0)

2012-4-25

Processingでプルプル立体GIFアニメ

なんかすぐできるんじゃ? と思って
Processingを使って立体感を強調(?)したGIFアニメ画像を作ってみました。

カメラの位置、被写体の位置、画像の細かさ、注視点で
立体感の出やすさがずいぶん違うようで、
試してみるといろいろと分かりますね。

とはいえこれ級の立体感には遠く及ばないですが。

この状態で自由に視点動かしたら立体感のあるゲーム画面になるのか?
というとそうでもなく、落ち着かないゲーム画面という印象:P

手前のmikuのモデルはTripshotsのspecialstuffsからお借りしました。
(ありがとうございます)

ちなみに後ろのお城は東武ワールドスクエアで撮影した、
ノイシュヴァンシュタイン城(ミニチュア)の写真です。

注視点はキャラモデルのそばに、
BGは遠めに配置するのがコツ。
(BGはP3Dモードだと歪むのでポリゴンを割ってあります)

東武ワールドスクエア、若干さびれてたけど、また行きたいなぁ。



Trackback(0)

2012-1-1

Processingで3D物理シミュレーション

新年あけましておめでとうございます!
今年もマイペースに頑張りますので、どうぞよろしくお願いいたします。

そうそう、今年もミスドの福袋を買いましたよ。

じゃなくって、今年はプログラム記事もあります。

今回はJBullet(3D物理シミュレーションライブラリ)をProcessingから簡単に呼び出す
PBulletというクラスを作ってみました。

Physics3Dサンプルのページへ

ライブラリ化はまだしてませんが、ひとまずサンプルをどうぞ。
新年ということで紅白カラーで縁起の良さをアピールしています。

使い方は簡単。setupなどで以下のようにクラスを生成します。

 PBullet bullet = new PBullet(this);

オブジェクトの追加はこんな感じ。

 // 球を追加(位置、半径、質量を渡している)
 bullet.add( new RigidSphere(new PVector(0, 0, 0), 20, 2.0f) );

あとはdraw内で

 bullet.simulation(frameRate);
 bullet.draw();

とすれば物理シミュレーションを行ったオブジェクトを描画できます。

このクラスを使うときは、Processingのスケッチフォルダの libraries に jbullet フォルダを作って、さらにその中に library フォルダを作り、JBulletのサイトのjbullet-20101010.zipにある jbullet.jar と vecmath.jar を入れておきましょう。(ここに固めたものも作っておきました)

ついでに、MQOファイルをロードするクラスを若干拡張してMQOファイルから頂点データをもってきて剛体にするようなこともしてあります。

こんな感じで RigidObject クラスを派生したクラスで独自描画もできますし、PBulletのdrawを使わずに、各オブジェクトのapplyTransを自分で呼んで独自描画をしたりもできます。

# 最初はAB法(ベルレ物理というらしい)を使った自前の物理処理を書いたのですが、
# Bullet使えるならそっちの方が「使えるもの」になりそうだったのでこのとおり公開してみました。

enjoy, it. それでは、また。



Trackback(0)

Cafe Diary ログに戻る