phonegapを使ってhtml5で開発したwebアプリをbuildする方法

phonegapでremote buildする

tyranoscript v5でios,androidはphonegapなどでbuildしてねと書いてあったので、やってみました。

https://tyrano.jp/dl/v5

$ sudo npm -g install phonegap cordova
$ phonegap create test com.example.test2 Test
$ cd test
# html5(index.htmlファイル群)はwww/に置く
$ cp -rf ../yui/* www/
$ vim config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "cf.syui.game"
    versionCode = "10"
    version     = "1.0.0" >
  <name>yui</name>
	<platform name="ios" />
	<platform name="android" />
  <description>
      novel game yui.
  </description>
  <author href="https://syui.cf" email="[email protected]">
      syui
  </author>
</widget>

$ phonegap serve -p 1313
$ phonegap remote build ios

phonegapはadobeのアカウントが必要になります。また、phonegap buildするにもios dev(apple)のkey(p12)を登録する必要があり、これにはapple-storeでappを配布するときに使われる開発者登録が必要です。

https://build.phonegap.com/apps

cordovaでbuildする

xcodeや実機がある場合、cordovaでbuildできます。phonegapはあくまでcloudでremote buildするためのものです。

$ cordova create test
$ cd test
$ cordova platform add ios
$ cordova compile ios

# 更新
$ vim www/
$ cordova prepare ios

$ ls ./platforms/ios

$ open -a Xcode ./platforms/ios/yui.xcodeproj

実機でappを起動している様子

アイコンを調整したり、画面サイズを調整したりする必要がありますが、難しくはありません。アイコンはcordovaに倣ってファイルを指定してやればいいのでしょう。画面サイズはtyranoscriptのほうで調整すればokだと思います。ただ、ストア配布に関しては、dev登録などのハードルが高いですし、めんどうです。また配布したところでプレイする人はほとんどいないでしょう。なので、今のところ考えていません。

追記

アイコンは、res/ios/に画像ファイルを置いて、xcodeのimages.xcassets/AppIconにていけましたが、画像の透過度をなしにすることやサイズを用意することでやっと適用されました。これは、platforms/ios/xxx/images.xcassetsにあります。root dirを編集して、$ cordova prepare iosでも反映されます。

https://resizeappicon.com/

ウィンドウの調整は、www/data/scenario/first.ksにてメッセージウィンドウを変更すると良い感じですが、背景画像などを調整することでも可能だと思います。

www/data/system/Config.ksでの調整は無理でした。