人生で初めてサッカーの試合観てきた

2015年6月17日 TOME Leave a comment

こんにちは。

会社辞めてから時間だけはあるので、人生初のサッカー観戦に行ってきました。観に行ったのは2015年6月16日埼玉スタジアムで行われた『日本代表vsシンガポール代表（2018ロシアW杯アジア２次予選）』です。

チケット

５日前の日本代表対イラク代表の試合を観ている時に思い立ってネットで買ってみたら買えました。JFA (日本サッカー協会) のページでオンライン購入してセブンイレブンで発券しました。

チケットJFA
http://ticket.jfa.or.jp/top.jsp

座席

埼玉スタジアム２００２の場合の話になりますが、席の種類がカテゴリー１〜５に分かれていて初心者にはハードル高くて一番悩みました。

ネットで調べてわかったこと、後日観戦してわかったことをまとめると大体以下のような感じです。

メインスタンド／バックスタンド

メインスタンドとバックスタンドに分かれていますが、テレビ中継のときの映像はメインスタンド側から撮られています。初心者にはメインスタンド側が無難なようです。

カテゴリー

カテゴリー１〜５にわかれていて、１〜４に関しては、カテゴリー１が近くて見やすい席で、カテゴリー４が一番遠くて見にくい席です。カテゴリー１〜４は指定席です。

カテゴリー５だけは別格で、サポーターズシート（後述）と同じ雰囲気でした。初心者には敷居が高いです。カテゴリー５は自由席です。

初心者は予算に合わせてカテゴリー１〜４の範囲で選ぶと良さそうです。自分はメインスタンド側カテゴリー２（南門側）のチケットを購入しました。

サポーターズシート

真剣に応援する人の席です。試合中ずっと「ニッポン！ニッポン！」と叫び続けなければなりません。野球観戦で言えばライトスタンドに相当する場所のようです。にわかサポーターにはお勧めできません。

ユニフォーム

服に関してネット通販は不安だったので、直接買えそうな店舗を調べたところ、サッカーショップKAMO が有名そうだったので、池袋まで買いに行きました。一緒に行く人が４番（本田）のを買ったので自分はよくわからないので名前を知っている１０番（香川）のを買いました。(^^;

レプリカユニフォームとオーセンティックユニフォーム（本物？）とあるのですが、レプリカで十分と思います。

レプリカユニフォームが 6,728円だったのに会計時に10,000 円くらいで、あれ？と思ったら背番号のマーキング料が4,000円くらいかかるとのこと。もっとわかりやすく表示しといてほしかった・・・。(>_<)

というわけで事前に買いに行ったのですが、当日埼玉スタジアムでも応援グッズは売っていたので、わざわざ事前に買わなくてもよかったかもしれません。しかし店舗で買うと試着も可能だったりするので、お目当の選手のものを確実に手に入れたい場合は店舗で買ったほうがよいかもしれません。

しかしユニフォーム着るとテンションが上がります。自分はそういう事ないと思ったんですけど、上がりました。コスプレイヤーの気持ちが少しわかりました。

当日

野球観戦ではビールが欠かせないですが、テレビのサッカー中継を見ている限りあんまりスタンドでビール飲んでる人がいないくて「サッカー観戦にビールは無用なのだろうか？」と心配していました。

しかしそんな事はなくて安心しました。

埼玉スタジアム入る前からすでにお店が所狭しと出ており、やすやすとビールをゲット出来ました。値段は観光地価格（1杯600円）です。

スタジアムの中にも売店があり、飲み物も食べ物も売ってました！良かった！

ここはいいところだ。

肝心の試合のほうですが、ご存知の通り格下シンガポール代表に対して「０対０」の引き分けでした・・・。

ハリル日本、アジア2次予選は前途多難なスコアレスドロー発進（ＡＦＰ＝時事） – Yahoo!ニュース http://headlines.yahoo.co.jp/hl?a=20150617-00000002-jij_afp-socc

まあかなり盛り上がって楽しかったんですけど、これで点が入っていればもっとすごい事になってたと思うとちょっと残念でした。

試合後、突然の豪雨でスタジアムに１時間以上足止めされるなどありましたが、それはそれ。

ちょっと不安だった応援も、カテゴリー５とかサポーターズシートに座らなければビール片手に落ち着いて観られる事が判明したので大収穫です。

またビール飲みに行きます。

その他

ブラウザ上のキャンバスサイズ

HTMLの canvas 要素として指定します。Cocos2d-JS のサンプルでは ./index.html で指定されているので、所望のサイズに変更します。

./index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cocos2d-html5 Hello World test</title>
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="yes"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
    <style>
        body, canvas, div {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>
</head>
<body style="padding:0; margin: 0; background: #000;">
<script src="res/loading.js"></script>
<canvas id="gameCanvas" width="800" height="450"></canvas>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>
</body>
</html>

Cocos2d 内部のデザイン画面サイズ（ピクセル解像度）

Cocos2d 内部でピクセルデータを処理する際に使用される画面サイズです。

Cocos2d-JS のサンプルでは ./main.js で cc.EGLView.setDesignResolutionSize() メソッドによって指定されています。ほとんどの場合、さきほどブラウザ上のキャンバスサイズに指定したものと同じサイズを指定することになると思います。このメソッドの第3引数 Resolution Policy については以下で説明します。

./main.js

cc.game.onStart = function(){
    if(!cc.sys.isNative && document.getElementById("cocosLoading")) //If referenced loading.js, please remove it
        document.body.removeChild(document.getElementById("cocosLoading"));

    // Pass true to enable retina display, disabled by default to improve performance
    cc.view.enableRetina(false);
    // Adjust viewport meta
    cc.view.adjustViewPort(true);
    // Setup the resolution policy and design resolution size
    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
    // The game will be resized when browser size change
    cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new HelloWorldScene());
    }, this);
};
cc.game.run();

Resolution Policy

Cocos2d-JS は内部のデザイン画面サイズと表示先（ブラウザ上のキャンバスサイズが異なる場合の解決ポリシーを以下から選択できます。基本的には SHOW_ALL にしておけば大抵よいと思います。

EXACT_FIT
NO_BORDER
SHOW_ALL
FIXED_HEIGHT
FIXED_WIDTH
UNKNOWN

EXACT_FIT

全体表示：◯
縦横比：×
余白なし：◯
ドットバイドット：×

キャンバスいっぱいに拡大縮小されます。縦横比率は保持しません。余白を作りたくない場合に使えるかもしれません。

NO_BORDER

全体表示：×
縦横比：◯
余白なし：◯
ドットバイドット：×

高さか幅の大きい方に合わせて拡大縮小されます。縦横比は保持しますが、全体が表示されないことがあります。余白を作りたくない場合に使えるかもしれません。

SHOW_ALL

全体表示：◯
縦横比：◯
余白なし：×
ドットバイドット：×

常に全体が表示されるように拡大縮小されます。縦横比は保持されます。全体表示しつつ縦横比が保持されるので個人的にはほぼこれの一択だと思います。

FIXED_HEIGHT

全体表示：×
縦横比：×
余白なし：×
ドットバイドット：×

常に上端は上端に、下端は下端に表示されるように拡大縮小されます。縦横比は保持されません。全体が表示されないことがあります。使い所がわかりません。

FIXED_WIDTH

全体表示：×
縦横比：×
余白なし：×
ドットバイドット：×

常に左端は左端に、右端は右端に表示されるように拡大縮小されます。縦横比は保持されません。全体が表示されないことがあります。使い所がわかりません。

UNKNOWN

全体表示：×
縦横比：◯
余白なし：×
ドットバイドット：◯

拡大縮小が発生しません。名前からするとちょっとハッキング的な使い方なのですが、ピクセル（ドット）の一つ一つを等間隔で表示したいドット絵マニアの方にとっては使いどころがあるかもしれません。

※ GitHub に動作するサンプルが公開してあります！
https://github.com/shinhirota/cocos2djs-sample/tree/47cf3117953a862e2b5042ee13a5bb9341b4d5cd

Cocos2d-x/JS

ラジウム・クリッカー（ブラウザ版）のソースコードを公開しました

2015年6月15日 TOME One comment

こんにちは。

先日ブラウザ版を公開した「ラジウム・クリッカー」ですが、Cocos2d-JS の普及およびブログの宣伝のためにソースコードを公開しました！

ラジウム・クリッカー（ブラウザ版）ソースコード – GitHub
https://github.com/shinhirota/radiumclicker

Cocos2d-JS にならいラジウムクリッカーはMIT ライセンスでの公開です。一言で言うと、著作権表示さえすれば、無制限に使用して構いませんが、作者はいかなる責任も負わないというものです。

今年１月ごろ作成したコードですが、そのあと比較的しっかりとしたアプリである「ねずみハンターキャシー」の制作でがっつり Cocos2d-JS を使ったせいか、今見ると結構恥ずかしい実装が随所にありますが、それは割り切りました。(^^;

参考

ラジウム・クリッカー (ブラウザ版)
http://tomeapp.jp/apps/radiumclicker/

ラジウム・クリッカーのブラウザ版を公開しました

2015年6月15日 TOME Leave a comment

こんばんは。

今年2月にCocos2d-JSで制作し、iOS/Androidアプリとしてリリースした「ラジウム・クリッカー」でしたが、せっかく JS で作っていたのでブラウザ版を公開します。

元祖リケジョの星、キュリー夫人になりきってラジウムを抽出しましょう！
インストール不要ですぐ遊べます！

↓ラジウム・クリッカー (ブラウザ版) ↓
http://tomeapp.jp/apps/radiumclicker/

ブラウザ版の特典として、キーボード入力もクリックと見なすようにしておきました！ (^^;

「ブラウザ版があれば、iOS/Android からもブラウザ経由から実行できるから、アプリ版もういらないじゃん！」と思われるかもしれませんが、アプリ版は SpiderMonkey という C++ で JavaScript を解釈するプラットフォームで動作しているので、かなり軽いです。このゲームくらいではあまり差が出ませんが、もっと多くの処理を行いたい場合は、やはりアプリ版をビルドし、使用すべきです。

その辺の紹介も時間があればしてみたいです。

遊び方

マウスまたはキーボードでひたすら石を叩いてください。ただそれだけです。すみません。。。

１万回くらい叩くとノーベル賞がもらえますのでがんばってください。

今後の予定

ソースコードも MITライセンスで~~公開しようと思っています。~~[2015年6月15日追記] ↓GitHub上でソースコードを公開しました！↓
ラジウム・クリッカー（ブラウザ版）のソースコードを公開しました

Cocos2d-JS で文字列を表示する

2015年6月11日 TOME Leave a comment

Cocos2d-JS で文字列を表示する方法です。

（「Cocos2d-JS の開発環境を構築する」の手順が完了しているものとして話を進めます）

文字列を表示するには主に２つの方法があります。

LabelTTF クラスを使用する。
LabelBMFont を使用する。

今回は LabelTTF を使用して文字列表示をためしてみます。

./src/app.js に文字列を表示するコードを追加します。

app.js

github に必要な修正がまとめてあります。

https://github.com/shinhirota/cocos2djs-sample/commit/006c62e3d39c9c3c6e8aed786847e340fbc4047f

実行結果

うまくいけば Hello World の上に先ほどの文字列が表示されています！！

※ GitHub に動作するサンプルが公開してあります！
https://github.com/shinhirota/cocos2djs-sample/tree/47cf3117953a862e2b5042ee13a5bb9341b4d5cd

参考

COCOS2D-X-3.0で改善されたラベル
http://www.cocos2d-x.org/docs/manual/framework/native/v3/label/ja

日本人プログラマーにありがちな１０の間違った英語の読み方

2015年6月10日 TOME 4 comments

今年の３月まで某外資系企業でプログラマーを１０年やらせていただき、いろいろありました。

海外のエンジニアと電話会議やミーティングをやる機会がよくあったのですが、日本でカタカナで覚えた用語がしばしば通じなかったり、向こうがなんか知らない用語を使ってるなあと思ったら実は知っている単語だったりしたことがよくありました。

自戒も含めてまとめてみました。

（※国際的に通じる発音を認識して、海外にも通用する人材に近づくことが本稿の目的です）

以下、多分通じないカタカナ表記を赤、そこそこ通じそうなカタカナ表記を青で書きます

Cocoa

Mac OS X や iOS で使われているフレームワークの名称です。これは「ココ」に近い発音です「ココア」だと思っていて聞き取れず、悔しい思いをしました。

cocoaの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/17035/m0u/

Opaque

不透明度のことです。昔会社の先輩が「オパキュー」と言っていたので、そのように読んでしまっている日本人はいなくもないと思いますが、英語圏では「オペーク」に近い読み方をします。自分はオパキューと言われるとオバケのキャラクターしか思い浮かびません。

opaqueの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/59219/m0u/opaque/

Height

高さのことです。もちろん「ハイト」と読めばだいたい通じます。スペルから判断して「ヘイト」と読んでしまう日本人が多いので要注意です。

heightの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/39780/m0u/height/

Hierarchy

階層構造のことで、日本語では「ヒエラルキー」と書くことが多いとおもいます。日本人と話す時はそれでもよいのですが、英語圏の人の発音をあえてカタカナにすると「ハイアラーキー」のように聞こえました。相手によって使い分けましょう。

hierarchyの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/40332/m0u/Hierarchy/

Tutorial

日本語では「チュートリアル」です。お笑い芸人でそういう名前の人がいた気もしますし。カタカナにはしづらいので、これでいいと思うのですが、英語圏の人がしゃべると、あえてカタカナにするなら「テュトーリアル」のように聞こえます。「テュ」が日本語にないのが問題なんですかね。

tutorialの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/89034/m0u/tutorial/

Ping

ネットワークがつながっているかどうか調べるコマンドです。自分も周りの人も日本では「ピング」と読んでいる人が多いと思いますが、英語圏の人は「ピン」のように言ってました。考えてみると、現在進行形の “-ing” の発音のときは、最後の g はあまり発音しないですが、それと同じことですよね。ピングっていうと某ペンギンのキャラクターのことだと思われるんじゃないですかね？

Github (gif, gimp)

プログラマー界では著名は Git を使用した Web 共有サービスです。自分は「ジットハブ」だと思っていたのですが、「ギットハブ」と読むのが正しいようです。同様なものに画像ファイルの gif, 画像加工ソフトウエアの gimp もありますが、~~それぞれ「ギフ」「ギンプ」が多数派のようです。~~ gif は開発者が「ジフ」だと言っているので「ジフ」、gimp は「ギンプ」が多数派のようです。([2015年6月10日訂正] @nekobata_kaigi さん、ご指摘ありがとうございます)

Github – Wikipedia
http://ja.wikipedia.org/wiki/GitHub

Warning

コンパイルするとよく出てくる「警告」です。日本では「ワーニング」と読む人が（少なくとも自分の周りでは）多いですが、英語圏の人の発音は「ウォーニング」に近いです。「War (戦争)」は「ウォー」って言いますよね？

warningの意味 – 英和辞書 – 英語辞書 – goo辞書 http://dictionary.goo.ne.jp/leaf/ej3/93161/m0u/Warning/

Null

初期化してないポインターがよくこれになって悩まされます。これも日本では「ヌル」と読む人が（少なくとも自分の周りでは）多いですが、英語圏の人の発音は「ナル」に近いです。しかしこれはドイツ語では「ヌル」のように発音するという話もあるので、英語圏でも「ヌル」と言っても通じる気がしてます。ソースは自分です。それに日本人相手に「ナル」とか言うと嫌われる予感がすごくするので、相手によって使い分けると良さそうです。

nullの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/58015/m0u/null/

Matrix

行列のことです。某有名映画のタイトルにもなっているので「マトリックス」と読む日本人が多いと思いますが、英語圏での発音は「メイトリックス」のほうが近いです。これくらいなら時間とともにきづくんですけど、怖いのはこれの複数形が matrices なことで、カタカナにすると「メイトリシーズ」のように聞こえます。これは知らないと何百回聞いても理解できません。

matricesの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/52376/m0u/matrices/

番外編

Width

幅のことです。非常に使用頻度が高いのですが、日本人には絶望的に発音が難しいです。カタカナにするのは無理です。自分はあきらめて「ホリゾンタル　サイズ」とか言い換えることにしてました。

widthの意味 – 英和辞書 – 英語辞書 – goo辞書
http://dictionary.goo.ne.jp/leaf/ej3/94624/m0u/width/

最後に

あくまでケースバイケースで、正しいか間違っているかよりも、通じたか通じなかったかを重視すべきだと思います。

Cocos2d-JS で画像を表示する

2015年6月9日 TOME Leave a comment

Cocos2d-JS で画像を追加する方法です。

（「Cocos2d-JS の開発環境を構築する」の手順が完了しているものとして話を進めます）

例としてこの画像ファイルを表示してみます。

CathyTest.png

画像ファイルを ./res にコピーします。

追加した画像ファイル名は ./src/resource.js を編集し、追加しておきます。

最後に ./src/app.js に画像をスプライトとして表示するコードを追加します。

resource.js

app.js

github に必要な修正がまとめてあります。

https://github.com/shinhirota/cocos2djs-sample/commit/47cf3117953a862e2b5042ee13a5bb9341b4d5cd

実行結果

cocos run コマンドで web アプリとして実行してみます。

$ <strong>cd MyProject</strong>
$ <strong>pwd</strong>
<span style="color: #339966;">/My/Test/MyProject</span>
$ <span style="color: #0000ff;"><strong>cocos run -p web</strong></span>
<span style="color: #339966;">Running command: compile</span>
<span style="color: #339966;">Building mode: debug</span>
<span style="color: #339966;">Running command: deploy</span>
<span style="color: #339966;">Deploying mode: debug</span>
<span style="color: #339966;">Running command: run</span>
<span style="color: #339966;">starting application</span>
<span style="color: #339966;">Try start server on 127.0.0.1:8000</span>
<span style="color: #339966;">Serving HTTP on 127.0.0.1, port 8000 ...</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET / HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /res/loading.js HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /frameworks/cocos2d-html5/CCBoot.js HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /main.js HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /project.json HTTP/1.1" 200 -</span>
<span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /frameworks/cocos2d-html5/moduleConfig.json HTTP/1.1" 200 -
  :
  :</span>

$ cd MyProject

$ pwd

/My/Test/MyProject

$ cocos run -p web

Running command: compile

Building mode: debug

Running command: deploy

Deploying mode: debug

Running command: run

starting application

Try start server on 127.0.0.1:8000

Serving HTTP on 127.0.0.1, port 8000 ...

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET / HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /res/loading.js HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /frameworks/cocos2d-html5/CCBoot.js HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /main.js HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /project.json HTTP/1.1" 200 -

127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /frameworks/cocos2d-html5/moduleConfig.json HTTP/1.1" 200 -

:

うまくいけば Hello World の上に先ほどのグラフィックが表示されています！！

※ github に動作するサンプルが公開してあります！
https://github.com/shinhirota/cocos2djs-sample/tree/47cf3117953a862e2b5042ee13a5bb9341b4d5cd

Cocos2d-x/JS

いまさらながら Eclipse + ADT の Android 開発環境を作る

2015年6月8日 TOME One comment

ちまたでは Android Studio 1.3 が発表され、今後 Android アプリ開発は Google の強力なプッシュにより Android Studio で行うのが主流になっていくと思われます。

そうは言っても、過去の遺産にしばられるのがソフトウェアの常なので、ビルドができるうちは Eclipse + ADT (Android Developer Tools) 勢力も残っていくと思います。

Cocos2d-JS で作成したプロジェクトも、2015年6月の最新版 v3.6.1 でも Eclipse + ADT 用の設定ファイルしか出力しないので、Cococs2d-JS を使うなら、今のところは Eclipse + ADT で行くのが早いです。

使用した環境

OS: Mac OS X 10.10.3
Eclipse: Eclipse Luna Service Release 2 – Version 4.4.2
ADT: 23.0.6

インストール手順

下調べ

バージョン不整合で痛い目を見ないために、まず ADT の公式ページで要件を調べます。

http://developer.android.com/tools/sdk/eclipse-adt.html

2015年3月に ADT 23.0.6 がリリースされており、依存関係は以下のとおり：

Java 7 以降 (Android 5.0 以上のビルドを行う場合)
Android SDK Tools r24.1.2
Eclipse Indigo (Version 3.7.2) 以降

順番に確認し、必要に応じてインストールします。

Java および Android SDK Tools のインストール

こちらの記事「Cocos2d-JS のサンプルを動かしてみる (Android編)」を参考に、コマンドラインベースの Android 開発環境を構築しておいてください。

Eclipse のインストール

以下のページから最新版の Eclipse (2015年6月8日現在 Eclipse Luna – Version 4.4.2) をダウンロードします。いろいろ種類がありますが、Android アプリ開発に必要なものは一番上の Eclipse IDE for Java Developers に含まれています。

https://eclipse.org/downloads/

インストーラーは特に無いので、ダウンロードしたファイル (eclipse-java-luna-SR2-macosx-cocoa-x86_64.tar.gz) をダブルクリックで解凍し、作成される eclipse というディレクトリを丸ごと /Applications に移動させるのがオススメです。

最初の起動時は「インターネットからダウンロードしたファイルは実行できません」と怒られますが、ファインダー上で右クリックメニューから開けば実行できます。

Android Development Tools (ADT) のインストール

http://developer.android.com/sdk/installing/installing-adt.html

ADT は Eclipse のプラグインとして提供されているため、Eclipse 上で追加することができます。

Eclipse を起動し、メニューの [Help]→[Install New Software…] を選びます。

プラグイン管理のウインドウが開くので [Add] を押し、レポジトリを指定します。

公式ページに書かれている “https://dl-ssl.google.com/android/eclipse/” をLocation に指定し、[OK] を押します。

ポップアップが閉じると “Developer Tools” が選べるようになっているので、それを選択して [Next>] を押します。

少し時間がかかって依存性が解決され、実際にインストールされるパッケージのリストが表示されたら再度 [Next>] を押します。

ライセンス情報が表示されたら、内容をすべて理解するのはかなりハードル高いのでどうするかはお任せします。自分は理解せずに “I accept …” を選びました。

そして　[Finish] を押すとインストールが始まります。

もしかしたら　Security Warning が表示されるかもしれませんが、その時どうするかはお任せします。自分はレポジトリの URL が google.com だったので、Google を信じて [OK] で進めてしまいました。

インストールが終わると Eclipse の再起動が求められるので、再起動します。

再起動後、Android SDK の場所を求められるので入力します。「Cocos2d-JS のサンプルを動かしてみる (Android編)」の通り作業してあれば、/opt/android-sdk-macosx がそれになります。

自分の場合ここで何か xml ファイルが読めないようなエラーメッセージが出ましたが、そのまま進めてしまいました。

これでインストールは完了です。

動作テスト

確認として、空の Android アプリを作成して動作させてみます。

Eclipse メニューの [File]→[New]→[Project…] を選びます。

新規プロジェクトウイザードが開始するので [Android]→[Android Application Project] を選んで [Next>] を押します。

アプリ名などを適当に入力します。ここでは「Test」と言う名前のアプリ名／プロジェクト名にしました。SDK のバージョンをなどを聞かれますが、デフォルトのままにして　[Next>] を押します。

Activity をどうするか聞かれるので “Blank Activity” を選んで [Next>] を押します。Activity と言うのは iOS で言うところ View Controller のようなものです。

あとはすべてデフォルトのまま進み、最後に [Finish] を押します。

これで空の Android プロジェクトができたので、実行してみます。左側の Package Explorer で先ほどのアプリ (ここでは “Test”) を選んだ状態で、ツールバーのデバッグアイコンのプルダウンから [Debug As]→[Android Application] を選びます。

うまくいけば、シミュレーター (AVD) が起動し、空のアプリが起動します！！

これで Cocos2d-JS の Android プロジェクトを IDE で開発する準備が整いました！

Cocos2d-JS のサンプルを動かしてみる (Android編)

2015年6月8日 TOME 2 comments

先日 Cocos2d-JS のサンプルを iOS アプリとして実行するやり方を紹介しましたが、今回は Android アプリ編です。

Android は iOS と比較して開発環境を整えるのが大変で、記事の内容もほとんど Android アプリの開発環境設定の話になってしまいました。。(2015年6月8日時点での情報です)

使用した環境

OS: Mac OS X 10.10.3
Cocos2d-JS: v3.6.1

JDK: 1.8.0_31
Android SDK Tools: r24.2
Android: 5.1.1 – API Level 22
Android NDK: r10e
ant: Apache Ant(TM) version 1.9.4

設定手順

Java Development Kit (JDK) の確認

使用中の Mac OS X に Java Development Kit (JDK) がインストールされているかどうか確認します。

ターミナルから javac -version と入力すれば JDK のバージョンが大体わかります。

<span class="s1">$ <span style="color: #0000ff;"><strong>javac -version</strong></span></span>

1	<span class="s1">$ <span style="color: #0000ff;"><strong>javac -version</strong></span></span>

<span class="s1" style="color: #339966;">javac 1.8.0_31</span>

1	<span class="s1" style="color: #339966;">javac 1.8.0_31</span>

この例の場合、Java 8 の JDKがインストールされていることが伺えます。もし javac が使えなかった場合は以下のサイトなどを参考に、最新の JDK をインストールしてください。

MacにJava(JDK)をインストール
http://qiita.com/ryo0301/items/3c9a02e03b4e9a41f576

Android SDK のインストール

Android SDK はいろいろなバージョンの Android 用に用意されているのでバージョン管理が大変そうですが、Android SDK Manager というありがたいものが用意されています。

現在標準的な Android 開発 IDE である Android Studio にはこれが含まれているのですが、Cocos2d-JS のプロジェクトは Android Studio ではなく Eclipse 用の設定ファイルしか含んでいないため、今回は Android Studio を避けます。

以下のページから Mac OS X 用 SDK Tools のパッケージをダウンロード・解凍し、任意の場所に置きます。自分は /opt/android-sdk-macosx に置きました。

https://developer.android.com/sdk/index.html#Other

この中の android というコマンドから、Android SDK Manager を含めていろいろなツールが呼び出せます。android sdk とを実行すると Android SDK Manager を起動できます。

<span class="s1">$ <strong>cd /opt/android-sdk-macosx/tools</strong>
$ <strong>pwd</strong>
<span style="color: #339966;">/opt/android-sdk-macosx/tools</span>
$ <span style="color: #0000ff;"><strong>./android sdk</strong></span>

</span>

$ cd /opt/android-sdk-macosx/tools

$ pwd

/opt/android-sdk-macosx/tools

$ ./android sdk

Android SDK Manager の GUI が開いたら、デフォルトでいくつかの SDK が選ばれています。Android M というのは Lollipop の次の Android のことですが、今回は使わないので外すのがおすすめです。

Android Native Development Kit (NDK) のインストール

Cocos2d-JS は Cocos2d-x 上で動作しており、Cocos2d-x は主に C++ で記述されています。ですので Android 上で C++ を動作させるために Android Native Development Kit (NDK) のインストールが必要になります。

https://developer.android.com/ndk/downloads/index.html

Mac OS X 用のパッケージをダウンロードし、任意の場所に解凍します。自分は /opt/android-ndk-r10e にしました。

$ <strong><span style="color: #0000ff;">chmod a+x android-ndk-r10c-darwin-x86_64.bin</span></strong>
$ <span style="color: #0000ff;"><strong>./android-ndk-r10c-darwin-x86_64.bin</strong></span>

<span style="color: #339966;">7-Zip SFX 9.20 Copyright (c) 1999-2010 Igor Pavlov 2010-11-18</span>
<span style="color: #339966;">p7zip Version 9.20 (locale=utf8,Utf16=on,HugeFiles=on,4 CPUs)</span>

<span style="color: #339966;">Processing archive: ./android-ndk-r10e-darwin-x86_64.bin</span>

<span style="color: #339966;">Extracting android-ndk-r10e/prebuilt/darwin-x86_64/bin/2to3</span>
<span style="color: #339966;">Extracting android-ndk-r10e/toolchains/aarch64-linux-android-4.9/prebuilt/darwin-x86_64/bin/aarch64-linux-android-c++</span>
<span style="color: #339966;">Extracting android-ndk-r10e/toolchains/aarch64-linux-android-4.9/prebuilt/darwin-x86_64/bin/aarch64-linux-android-ld</span>
<span style="color: #339966;">Extracting android-ndk-r10e/sources/cxx-stl/stlport/stlport/
</span> :
 :
(中略)
 :
 :
<span style="color: #339966;">Extracting  android-ndk-r10e/build/awk</span>
<span style="color: #339966;">Extracting  android-ndk-r10e/build</span>
<span style="color: #339966;">Extracting  android-ndk-r10e</span>

<span style="color: #339966;">Everything is Ok</span>
$ <strong><span style="color: #0000ff;">mv android-ndk-r10e /opt</span></strong>
$

$ chmod a+x android-ndk-r10c-darwin-x86_64.bin

$ ./android-ndk-r10c-darwin-x86_64.bin

p7zip Version 9.20 (locale=utf8,Utf16=on,HugeFiles=on,4 CPUs)

Processing archive: ./android-ndk-r10e-darwin-x86_64.bin

Extracting android-ndk-r10e/prebuilt/darwin-x86_64/bin/2to3

Extracting android-ndk-r10e/toolchains/aarch64-linux-android-4.9/prebuilt/darwin-x86_64/bin/aarch64-linux-android-c++

Extracting android-ndk-r10e/toolchains/aarch64-linux-android-4.9/prebuilt/darwin-x86_64/bin/aarch64-linux-android-ld

Extracting android-ndk-r10e/sources/cxx-stl/stlport/stlport/

:

(中略)

Extracting android-ndk-r10e/build/awk

Extracting android-ndk-r10e/build

Extracting android-ndk-r10e

Everything is Ok

$ mv android-ndk-r10e /opt

antの確認

ant は汎用のビルドコマンドです。(昔でいう make ですかね。。) 最近のMac OS X には含まれていないようなので、もし ant -version と入力してエラーになるようであれば以下のサイトなどを参考に ant をインストールします。

Mac OS X 10.9 ( Mavericks ) に Homebrew で Apache Antをインストールする

http://yoshiweb.net/blog/?itemid=374

Cocos2d-JS に Android SDK, NDK, ant の情報を設定する

最後に「Cocos2d-JS の開発環境を構築する」で使用した setup.py を実行します。前回 Android NDK と SDK の場所は指定しませんでしたが、今回は指定します。青い部分はユーザーからの入力です。

<span style="font-size: 8pt;">$ <span style="color: #0000ff;"><strong>pwd</strong></span></span>
<span style="color: #339966; font-size: 8pt;">/opt/cocos2d-js-v3.6.1</span>
<span style="font-size: 8pt;">$ <span style="color: #0000ff;"><strong>./setup.py</strong> </span></span>

<span style="color: #339966; font-size: 8pt;">Setting up cocos2d-x...</span>
<span style="color: #339966; font-size: 8pt;">-&gt;Check environment variable COCOS_CONSOLE_ROOT</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;Find environment variable COCOS_CONSOLE_ROOT...</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;COCOS_CONSOLE_ROOT not found</span>

<span style="color: #339966; font-size: 8pt;"> -&gt; Add COCOS_CONSOLE_ROOT environment variable...</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;Added COCOS_CONSOLE_ROOT=/opt/cocos2d-js-v3.6.1/tools/cocos2d-console/bin</span>

<span style="color: #339966; font-size: 8pt;">-&gt;Configuration for Android platform only, you can also skip and manually edit "/Users/hirota/.bash_profile"</span>

<span style="color: #339966; font-size: 8pt;">-&gt;Check environment variable NDK_ROOT</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;Find environment variable NDK_ROOT...</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;NDK_ROOT not found</span>

<span style="color: #339966; font-size: 8pt;"> -&gt;Please enter the path of NDK_ROOT (or press Enter to skip):<span style="color: #0000ff;"><strong>/opt/android-ndk-r10e</strong></span></span>
<span style="color: #339966; font-size: 8pt;"> -&gt; Add NDK_ROOT environment variable...</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;Added NDK_ROOT=/opt/android-ndk-r10e</span>

<span style="color: #339966; font-size: 8pt;">-&gt;Check environment variable ANDROID_SDK_ROOT
  -&gt;Find environment variable ANDROID_SDK_ROOT...
    -&gt;ANDROID_SDK_ROOT not found

  -&gt;Please enter the path of ANDROID_SDK_ROOT (or press Enter to skip):<span style="color: #0000ff;"><strong>/opt/android-sdk-macosx</strong></span>
  -&gt; Add ANDROID_SDK_ROOT environment variable...
    -&gt;Added ANDROID_SDK_ROOT=/opt/android-sdk-macosx
</span>
<span style="color: #339966; font-size: 8pt;">-&gt;Check environment variable ANT_ROOT</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;Find environment variable ANT_ROOT...</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;ANT_ROOT not found</span>

<span style="color: #339966; font-size: 8pt;"> -&gt;Find command ant in system...</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;Path "/usr/local/bin" was found</span>

<span style="color: #339966; font-size: 8pt;"> -&gt; Add ANT_ROOT environment variable...</span>
<span style="color: #339966; font-size: 8pt;"> -&gt;Added ANT_ROOT=/usr/local/bin</span>


<span style="color: #339966; font-size: 8pt;">A backup file "/Users/hirota/.bash_profile.backup7" is created for "/Users/hirota/.bash_profile".</span>

<span style="color: #339966; font-size: 8pt;">Please execute command: "source /Users/hirota/.bash_profile" to make added system variables take effect</span>

<span style="font-size: 8pt;">$</span>

$ pwd

/opt/cocos2d-js-v3.6.1

$ ./setup.py

Setting up cocos2d-x...

->Check environment variable COCOS_CONSOLE_ROOT

->Find environment variable COCOS_CONSOLE_ROOT...

->COCOS_CONSOLE_ROOT not found

-> Add COCOS_CONSOLE_ROOT environment variable...

->Added COCOS_CONSOLE_ROOT=/opt/cocos2d-js-v3.6.1/tools/cocos2d-console/bin

->Configuration for Android platform only, you can also skip and manually edit "/Users/hirota/.bash_profile"

->Check environment variable NDK_ROOT

->Find environment variable NDK_ROOT...

->NDK_ROOT not found

->Please enter the path of NDK_ROOT (or press Enter to skip):/opt/android-ndk-r10e

-> Add NDK_ROOT environment variable...

->Added NDK_ROOT=/opt/android-ndk-r10e

->Check environment variable ANDROID_SDK_ROOT

->Find environment variable ANDROID_SDK_ROOT...

->ANDROID_SDK_ROOT not found

->Please enter the path of ANDROID_SDK_ROOT (or press Enter to skip):/opt/android-sdk-macosx

-> Add ANDROID_SDK_ROOT environment variable...

->Added ANDROID_SDK_ROOT=/opt/android-sdk-macosx

->Check environment variable ANT_ROOT

->Find environment variable ANT_ROOT...

->ANT_ROOT not found

->Find command ant in system...

->Path "/usr/local/bin" was found

-> Add ANT_ROOT environment variable...

->Added ANT_ROOT=/usr/local/bin

A backup file "/Users/hirota/.bash_profile.backup7" is created for "/Users/hirota/.bash_profile".

Please execute command: "source /Users/hirota/.bash_profile" to make added system variables take effect

$

うまくいけば .bash_profile に必要な設定が追加されているはずです。

一度ログインし直して設定を反映させます。これで実行する設定は完了です。

Android Virtual Device (ADV=シミュレーター) の設定

ここではシミュレーターで実行する手順を書きますが、Android アプリをシミュレーターで動かすのは大変なうえ重いので、本格的に開発する場合は Android の実機を用意することを強くお勧めします。

まず Android SDK Tools に含まれている android avd コマンでで Android Virtual Device Manager を起動します。

<span class="s1">$ <strong>cd /opt/android-sdk-macosx/tools</strong>
$ <strong>pwd</strong>
<span style="color: #339966;">/opt/android-sdk-macosx/tools</span>
$ <span style="color: #0000ff;"><strong>./android avd</strong></span></span>

$ cd /opt/android-sdk-macosx/tools

$ pwd

/opt/android-sdk-macosx/tools

$ ./android avd

[Device Definitions] を押して定義済みのテンプレートを使います。

[Nexus 4 by Google] を選んで、

このような設定にしました。

CPU を ARM (armeabi-v7a) にしないと動作しなかったので注意してください。どうも NDK が ARM 用のネイティブコードしか生成していないような気がします。（これ CPU が Intel の実機だとどうなるんだろう・・・）

[Android Virtual Devices] のページの戻って、[Start…] ボタンでこの設定の AVD を起動しておきます。自分の環境では起動するまで数分かかったので辛抱強く待ちます。

起動すると以下のようなウインドウが表示されます。

実行

上述の Android シミュレータ (AVD) が起動している状態で Cocos2d-JS プロジェクトのあるディレクトリに行って cocos run -p android と入力します。最初のビルドは数分かかるので辛抱強く待ちます。

$ <span style="color: #0000ff;"><strong>cd MyProject</strong></span>
$ <span style="color: #0000ff;"><strong>pwd</strong></span>
<span style="color: #339966;">/My/Test/MyProject</span>
$ <strong><span style="color: #0000ff;">cocos run -p android</span></strong>
<span style="color: #339966;">Running command: compile</span>
<span style="color: #339966;">Building mode: debug</span>
<span style="color: #339966;">Android platform not specified, searching a default one...</span>
<span style="color: #339966;">running: '/opt/android-sdk-macosx/tools/android update project -t android-22 -p /My/Test/MyProject/frameworks/runtime-src/proj.android'</span>

<span style="color: #339966;">Updated project.properties</span>
<span style="color: #339966;">Updated local.properties</span>
<span style="color: #339966;">Updated file /My/Test/MyProject/frameworks/runtime-src/proj.android/proguard-project.txt</span>
<span style="color: #339966;">It seems that there are sub-projects. If you want to update them</span>
<span style="color: #339966;">please use the --subprojects parameter.</span>
<span style="color: #339966;">Android platform not specified, searching a default one.
<span style="color: #000000;"> :</span>
<span style="color: #000000;"> :</span>
<span style="color: #000000;">(中略)</span>
<span style="color: #000000;"> : </span>
<span style="color: #000000;"> :</span>
-package:
[apkbuilder] Current build type is different than previous build: forced apkbuilder run.
[apkbuilder] Creating MyProject-debug-unaligned.apk and signing it with a debug key...

-post-package:

-do-debug:
 [zipalign] Running zip align on final apk...
 [echo] Debug Package: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/MyProject-debug.apk
[propertyfile] Creating new property file: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/build.prop
[propertyfile] Updating property file: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/build.prop
[propertyfile] Updating property file: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/build.prop
[propertyfile] Updating property file: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/build.prop

-post-build:

debug:

BUILD SUCCESSFUL
Total time: 12 seconds
Move apk to /My/Test/MyProject/runtime/android
build succeeded.
Running command: deploy
Deploying mode: debug
installing on device
<span style="color: #ff00ff;">running: '/opt/android-sdk-macosx/platform-tools/adb uninstall org.cocos2dx.MyProject'</span>

Failure [DELETE_FAILED_INTERNAL_ERROR]
<span style="color: #ff00ff;">running: '/opt/android-sdk-macosx/platform-tools/adb install "/My/Test/MyProject/runtime/android/MyProject-debug.apk"'</span>

1671 KB/s (10044151 bytes in 5.866s)
 pkg: /data/local/tmp/MyProject-debug.apk
Success
Running command: run
starting application
<span style="color: #ff00ff;">running: '/opt/android-sdk-macosx/platform-tools/adb shell am start -n "org.cocos2dx.MyProject/org.cocos2dx.javascript.AppActivity"'</span>

Starting: Intent { cmp=org.cocos2dx.MyProject/org.cocos2dx.javascript.AppActivity }
<span style="color: #000000;">$</span> 

</span>

$ cd MyProject

$ pwd

/My/Test/MyProject

$ cocos run -p android

Running command: compile

Building mode: debug

Android platform not specified, searching a default one...

running: '/opt/android-sdk-macosx/tools/android update project -t android-22 -p /My/Test/MyProject/frameworks/runtime-src/proj.android'

Updated project.properties

Updated local.properties

Updated file /My/Test/MyProject/frameworks/runtime-src/proj.android/proguard-project.txt

It seems that there are sub-projects. If you want to update them

please use the --subprojects parameter.

Android platform not specified, searching a default one.

:

(中略)

:

:

-package:

[apkbuilder] Current build type is different than previous build: forced apkbuilder run.

[apkbuilder] Creating MyProject-debug-unaligned.apk and signing it with a debug key...

-post-package:

-do-debug:

[zipalign] Running zip align on final apk...

[echo] Debug Package: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/MyProject-debug.apk

[propertyfile] Creating new property file: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/build.prop

[propertyfile] Updating property file: /My/Test/MyProject/frameworks/runtime-src/proj.android/bin/build.prop

-post-build:

debug:

BUILD SUCCESSFUL

Total time: 12 seconds

Move apk to /My/Test/MyProject/runtime/android

build succeeded.

Running command: deploy

Deploying mode: debug

installing on device

running: '/opt/android-sdk-macosx/platform-tools/adb uninstall org.cocos2dx.MyProject'

Failure [DELETE_FAILED_INTERNAL_ERROR]

running: '/opt/android-sdk-macosx/platform-tools/adb install "/My/Test/MyProject/runtime/android/MyProject-debug.apk"'

1671 KB/s (10044151 bytes in 5.866s)

pkg: /data/local/tmp/MyProject-debug.apk

Success

Running command: run

starting application

running: '/opt/android-sdk-macosx/platform-tools/adb shell am start -n "org.cocos2dx.MyProject/org.cocos2dx.javascript.AppActivity"'

Starting: Intent { cmp=org.cocos2dx.MyProject/org.cocos2dx.javascript.AppActivity }

$

うまくいけば先ほど起動しておいた Android シミュレーター上でサンプルアプリが実行されます！！

ここまであえて Eclipse を使わないで来ましたが、次回は Eclipse を使って開発する方法を紹介しようと思います。

ねずみハンターキャシーの開発に使用したツール

2015年6月6日 TOME Leave a comment

こんにちは。

聞かれてもないですけど自主的に『ねずみハンターキャシー』の開発に使用したツールの紹介をします。音楽と一部のグラフィック以外は個人開発なので、これから小規模のアプリを開発しようと考えている方の参考になれば幸いです。

機材

PC: Macbook Pro 13インチ 2.4GHz Core i5 メモリ8GB SSD 256GB

2014年の前半に買った Macbook Pro で2015年6月現在いまでもストレスなく動作しています。

ツール

Cocos2d-JS

無償の商業利用可能なアプリ開発プラットフォームです。Cocos2d-x に比べてイマイチ普及していませんが、JavaScript でブラウザ、iOS、Android などで動作するアプリが開発できる優れものです。日本語どころか英語の情報も最新のバージョンのものはあまり揃っていませんが、ソースがあるので大抵なんとかなります。

http://www.cocos2d-x.org/products（英語）

http://jp.cocos.com/products (日本語)

WebStorm

有償のWebサイト構築に特化したIDE（統合開発環境）です。IDEといっても自分はテキストエディタと認識しています（使いこなせてないのかな）。

JavaScript のコード補完について、いろいろなソフトを試しましたが WebStorm が一番でした。JavaScript が動的型付けのオブジェクト指向なスクリプト言語なので、コードの補完を実装するのは大変なんだと思いますが、WebStorm はその辺りをうまく実用的なレベルにまで作り込んでくれているようでした。

https://www.jetbrains.com/webstorm (英語サイト)

Tiled

無償の商業利用可能なマップエディタです。TMX形式で出力すれば Cocos2d-JS で読み込みことが可能です。

各ステージの背景は、マップチップを PNG ファイルで作成したものを Tiled で読み込み、TMX ファイルを作成しました。

http://www.mapeditor.org (英語サイト)

Photoshop

説明不要の有償画像加工ツールです。

主にタイトルロゴ、アイコン、スクリーンショット画像の作成に使用しました。

http://www.adobe.com/jp/products/photoshop.html

App Icon template (for Photoshop)

アプリ開発経験がある方はご存知だと思いますが、iOSのアイコンは様々な大きさのものを用意する必要があって、非常に面倒です。

このサイトにあるテンプレートを使うと、必要なサイズのアイコンを一気に作成してくれます！超便利でした！

http://appicontemplate.com/ios7

CLIP STUDIO PAINT PRO

有償のイラスト制作ソフトです。通称クリスタ。グラフィックを専門にされている方にとっては有名どころだと思います。自分はプログラマーなのでよくわかっていませんが。。

LINE スタンプが流行った時に、自分でも描いてみようと思ってクリスタ買ってしまいました。頑張って40枚描いたスタンプはリジェクトされてお蔵入りしましたが、それはまた別のお話。

Mac 用のドットエディターがいいのが見つからなかったので、今回はこれでドット打ちました。正直、ドットを本格的に打つには適していないと思います。Windows では EDGE とか D-Pixed とかあるんですけどね。。

http://www.clipstudio.net

Audacity

無償のオープンソースのサウンドデータ加工ツールです。

今回、効果音は素材サイトで探したり、自分の過去の作品で使用した音を使いまわしたりしましたが、Audacity でいろいろなエフェクトをかけたりトリミングしたり形式変換したりできるので、使いました。

BGMに関しても、ループ再生の際、微妙に無駄な間があったりすると聞き心地を損なうので、Audacity で微調整しました。

http://sourceforge.net/projects/audacity (英語サイト)

Chrome

無償のブラウザです。かなりブラウザとして有名なのですが、実は強力な JavaScript デバッグの機能を持っています。

今回は、Cocos2d-JS の JavaScript 部分の簡単なテスト／デバッグはほとんど Chrome 上で行いました。Chrome 上である程度動作が確認できた後、iOS 上で最終確認を行っていました。

https://www.google.co.jp/chrome/browser/desktop/index.html

MAMP

Webサーバー。Chrome 上で JavaScript を実行させる際に使いました。OS X や Cocos2d-JS 自体に Webサーバー機能が含まれているので、なくてもいいのですが、GUIで制御できるので個人的にはあると便利でした。

有償版もありますが、無償版で十分でした。

https://www.mamp.info/en/

Xcode

iOS アプリを作成するには必須の、Apple 純正の IDE (統合開発環境) です。Cocos2d-JS で動作するプロジェクトを、iOS デバイス／シミュレーター上で動作させるには必要です。

https://developer.apple.com/jp/xcode/downloads

Eclipse + ADT プラグイン

Android アプリ制作に特化した IDE は Eclipse +ADTプラグインか、Android Studio の２択になると思いますが、Cococs2d-JS が生成するプロジェクトに含まれているのは Eclipse 用の設定ファイルなので、Eclipse の方を使用しました。

しかし2015年6月現在、Android Stdio のほうも以前よりかなり使える様になってきているようなので、今から環境をつくるならどちらがよいかわかりません。要確認です。

ADT Plugin for Eclipseのインストール – Android入門　(JavaDrive様のサイト)
http://www.javadrive.jp/android/adt

何か抜けがあるかもしれないですが、思い出したら追加します！

アプリ

« 1 … 4 5 6 7 »