読者です 読者をやめる 読者になる 読者になる

【2016年度版】Cordovaでアプリ化する (ios編)

☆専用のアプリ化用ツール「ティラノプレイヤー」が公開されています。

この記事の方法は古いですので、ご注意ください。

最新のアプリ化手順は以下となります。

shikemokumk.hateblo.jp

 

=====================

ティラノスクリプトで作成したゲームをアプリ化する方法を解説します。
専門的な知識は不要です。だれでもiphoneipad 向けにアプリを作成することができます。

Androidアプリ化の手順は以下を参照してください

shikemokumk.hateblo.jp

 

まず、iphoneアプリ化するのに、必要なものとして

Mac PC

が必要です。

はい。Windowsではiphoneアプリは作れません。MacBook等を手に入れよう。もしくは借りよう!

これさえあれば、後は以下の手順で作っていくだけです。
それでは、アプリ化を進めていきましょう。

 Xcodeをインストール

まずは、Macに最新版のXcodeをインストールする必要があります。
Xcodeとは、Macでソフトウェア開発を行うためのソフトウェアです。
それでは、AppStoreを開いて、「xcode」と検索してください 。

 

f:id:shikemokumk:20160315105342p:plain

 

上記画面のようなツールが見つかると思います。

無料ですので、インストールを進めて下さい。

 

cordovaのインストール

次にcordovaというツールをインストールします。

以前はphonegapと呼ばれていました。

以下のURLが公式サイトとなります。

https://cordova.apache.org/

 

cordovaを使用するには nodejs が必要です。

以下のサイトから入手してインストールしてください。

 

https://nodejs.org/

 

 

f:id:shikemokumk:20160315110038p:plain

ダウンロードしてインストールを完了させて下さい。

 

続いて、アプリ化を実行していきます。
最初にデスクトップなどの適当な場所にフォルダをつくってください。
ここでは、iphoneという名前として説明していきます。

作成したフォルダをツールバーにある黒いアイコン(画像参考)にドラッグ&ドロップしてください。

 

f:id:shikemokumk:20160315110147p:plain

 

すると、真っ暗な文字だけの画面が現れると思います。

 

f:id:shikemokumk:20160315110233p:plain

画面が出てきたら、以下のコマンドを順番に実行してください。
コピペで貼り付けて、エンターキーを押します。

①cordovaのインストール

sudo npm install -g cordova

 

②アプリの作成(今回はmyappという名前で作ります)

以下を1行コピペするたびにエンターを押して下さい。

cordova create myapp com.myapp "myapp"

cd myapp

cordova platform add ios

 

次にティラノスクリプトのプロジェクトフォルダを用意してください。
以下の画像のように、先ほど作成してiphone/myapp以下のwwwというフォルダに
ティラノスクリプトのプロジェクト以下のファイルをすべて上書きしてください

f:id:shikemokumk:20160315111126p:plain

 

さて、ここまでくるとあと少しです。
もう一度コンソール画面(黒いウィンドウ)に戻ってください。

そこで

 

cordova build ios

 

と打ちます。

すると、myapp/platforms/ios/myqpp.xcodeproj

というファイルが作成されていると思いますので、実行してください。
Xcodeが起動します。

f:id:shikemokumk:20160315111331p:plain

f:id:shikemokumk:20160315111348p:plain

 

あとは、画面左上部分から、再生する機種 (iphone Retina(3.5inch)) 等 を確認して再生ボタンを押してください。

 

f:id:shikemokumk:20160315111418p:plain

さて、いかがでしょう。
以下のようにゲームが開始されましたね。

f:id:shikemokumk:20160315111439p:plain

f:id:shikemokumk:20160315111439p:plain

 

アプリ化の準備は以上です。

ここから、実機での確認やAppStoreでの販売などについては
他の解説サイトがたくさんありますので、そちらでご確認願います。
(次回、このサイトでも追記します)

その他、小ワザとして

ゲームを縦、横に固定したい場合は

 

f:id:shikemokumk:20160315111528p:plain

 

さらに、昨今のスマートフォンでは画面サイズが一定ではありません。
そのため、作成したゲームのサイズによっては画面に黒い空きスペースができるかと思います。
縦横比を無視して画面いっぱいに拡大したい場合はティラノスクリプトのプロジェクトフォルダ system/Config.tjs の中にある


;ScreenRatio = fix;

の部分を fit に変更することで画面いっぱいに拡大できます。

 

よくあるエラー対応

■音がならない場合

iphoneアプリで使えるのはmp3 か m4a 形式となります。

スクリプトを編集して該当する形式が指定されているか確認してくだs台。

 

■コマンドの途中でエラーが出て進めない

以前、nodejs や cordovaをインストールした事があるマシンの場合、エラーが出ることがあるようです。

以下のファイルを消してから、もう一度nodejs や cordovaのインストールをやり直すとうまくいくことがあります。

 

【削除するファイル】

rm -rf /usr/local/lib/node_modules/

上でもうまくいかない場合は下も削除

rm -rf /Users/ユーザ名/.node-gyp/
rm -rf /Users/ユーザ名/.node_repl_history
rm -rf /Users/ユーザー名/.npm/