2014/02/10

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

警告!! この記事の内容は古いです。アプリ化する場合は以下の記事を参考にして下さい。



最新版 ティラノスクリプトのアプリ化
http://shikemokumk.hateblo.jp/entry/2016/03/15/111922



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

Androidアプリ化の手順はこちら

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

Mac PC

が必要です。

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

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

Xcodeをインストール

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













無料ですので、手順にそってインストールを完了してください

phoneGapのインストール

次にPhoneGapというツールをインストールします。
以下のURLがphonegap の公式サイトになります。

http://phonegap.com/

執筆時点の最新バージョンはphonegap3.3ですので、そのバージョンを元に解説していきます。

phonegap を使用するには nodejs が必要です。
以下のサイトから入手してインストールしてください。

http://nodejs.org/




INSTALL ボタンをクリックしてパッケージをインストールしてください。
後は他のMacアプリと同様にインストールを完了してください。

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

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


真っ黒い画面が出てきたかと思います。



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

(1)phonegap のインストール


sudo npm install -g phonegap

(2)アプリの作成(myappという名前で作っておきます)
phonegap create myapp com.myapp "myapp"
cd myapp
phonegap plugin add org.apache.cordova.media

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



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

そこで
phonegap build ios

と打ちます。

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

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




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


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



いかがでしょう。
アプリ化の準備は以上です。

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

その他、小ワザとして

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


Deployment Info の部分を上記のようにすると
横固定のゲームになります。その他、時計や電池バーの表示制御なども可能になります。


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


;ScreenRatio = fix;

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