itouhiroメモ帳: [Flash] Adobe AIR iOS App freecost

[Flash] Adobe AIR SDK 22でiOSアプリを無料で作成する freecost

動作確認環境：

macOS 10.10 Yosemite(2014)
iOS 9.3.2 (iPhoneSE 2016)
Adobe AIR SDK 22 with Compiler for Mac
Java7 SE for MacOS

[話者] Adobe AIR SDKというかFlashでiOSアプリを作成してみたい。まずは無料で試すぞ。

[合いの手] それって日本のWeb記事に全然情報がない‥‥。

[話者] 初めての AIR for iOS アプリケーションの作成を見ると、有料のiOS開発者登録すればできるとは書いてある。無料だとどうなのかな。やってみるだろ。

Mac側の設定だが、 [mac] iOSアプリを無料で作成するでXcode7を設定してiPhoneにインストールできることは確認済みだ。

install AIR SDK

まずはAIR SDKの導入。 https://helpx.adobe.com/jp/air/kb/archived-air-sdk-version.html で「Adobe AIR 22 SDK およびコンパイラ」をダウンロード。

[合いの手] 最新AIR SDKはver27だよ。なぜver22 ？

[話者] macOS 10.10 Yosemite(2014)という古めの環境を使うからな。あんまり新しくないほうが動作問題が起きにくいかも、と思った。

Terminalを起動して展開・設置。

macmini:foo foo$ pwd
    /Users/foo
macmini:foo foo$ cd Applications
macmini:Applications foo$ mkdir AIRSDK
macmini:Applications foo$ cd AIRSDK
macmini:AIRSDK foo$ pwd
    /Users/foo/Applications/AIRSDK
macmini:AIRSDK foo$ tar zxvf /Users/foo/share/AIRSDK_Compiler.tbz2 
    x AIR SDK Readme.txt
    ...

パスを通すよ。

macmini:AIRSDK foo$ env | grep PATH
    PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
macmini:AIRSDK foo$ vi ~/.bashrc
macmini:AIRSDK foo$ cat ~/.bashrc 
    alias ls='ls -aF'
    alias lv=less
    export PATH=$PATH:/Users/foo/Applications/AIRSDK/bin
macmini:AIRSDK foo$ . ~/.bashrc 
macmini:AIRSDK foo$ env | grep PATH
    PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/foo/Applications/AIRSDK/bin
macmini:AIRSDK foo$ mxmlc
    No Java runtime present, requesting install.
macmini:AIRSDK foo$

コンパイラーのmxmlcは呼べるようになったけど、Javaが必要だ。

install Java

http://www.oracle.com/technetwork/java/javase/archive-139210.html

Java SE 6見たがMac向けはない。 Java SE 7は64bit dmgがあった。Oracleプロファイルにログイン必要。取得した。 dmgダブルクリック→でてきたウィンドウのdouble click to installアイコンをダブルクリック。これでJavaインストールできた。

Javaが認識されるか確認だ。

macmini:~ foo$ /usr/libexec/java_home
    /Library/Java/JavaVirtualMachines/jdk1.7.0_80.jdk/Contents/Home
macmini:~ foo$ /usr/libexec/java_home -V
    Matching Java Virtual Machines (1):
        1.7.0_80, x86_64:   "Java SE 7" /Library/Java/JavaVirtualMachines/jdk1.7.0_80.jdk/Contents/Home
    /Library/Java/JavaVirtualMachines/jdk1.7.0_80.jdk/Contents/Home
macmini:~ foo$ java --version
    Unrecognized option: --version
    Error: Could not create the Java Virtual Machine.
    Error: A fatal exception has occurred. Program will exit.
macmini:~ foo$ mxmlc
    Adobe ActionScript Compiler (mxmlc)
    Version 2.0.0 build 354188
    Copyright 2004-2012 Adobe Systems Incorporated. All rights reserved.
    mxmlc [options] [defaultVar]
    詳細については、'mxmlc -help' を使用してください。
macmini:~ foo$

Javaも認識されてmxmlc使えるぞ。

build swf

初めての AIR for iOS アプリケーションの作成を見て、書いてあるとおりにHello WorldのAIRアプリを作成する。

macmini:~ foo$ cd share/2017app/air201710b/
macmini:air201710b foo$ ls
    ./      ../     HelloWorld.as
macmini:air201710b foo$ amxmlc HelloWorld.as 
    読み込みの設定 : /Users/foo/Applications/AIRSDK/frameworks/air-config.xml
    5.386 秒で /Users/foo/share/2017app/air201710b/HelloWorld.swf に 621 バイトが書き込まれました
macmini:air201710b foo$ ls
    ./      ../     HelloWorld.as   HelloWorld.swf
macmini:air201710b foo$

これでswfを生成した。

make icon images with GIMP

画像を作れというので、MacにGIMPをインストール。 https://www.gimp.org/downloads/ でNative Mac 2.8.22 dmgを入れる。

「GIMPは、開発元が未確認のため開けません」と出るので https://www.imamura.biz/blog/28014 を参考に、[システム環境設定 - セキュリティとプライバシー - 一般タブ - ダウンロードしたアプリケーションの実行許可 - このまま開く] で起動した。起動完了まで数分待たされる。

シングルウィンドウモードにすると操作がラク。

以下の4画像を作成。

アイコン 29x29.png 29x29px
アイコン 57x57.png 57x57px
アイコン 512x512.png 512x512px
起動画面イメージ Default.png 320x480px

make XML

HelloWorld-app.xml というXMLファイルを作成。

<?xml version="1.0" encoding="utf-8" ?> 
<application xmlns="http://ns.adobe.com/air/application/22.0" minimumPatchLevel="0"> 
    <id>example.com.sample201710b</id> 
    <name>Hello World iOS</name> 
    <versionNumber>0.0.1</versionNumber> 
    <filename>HelloWorld</filename> 
    <supportedProfiles>mobileDevice</supportedProfiles> 
    <initialWindow> 
        <content>HelloWorld.swf</content> 
        <title>Hello World!</title> 
    </initialWindow> 
    <icon> 
        <image29x29>29x29.png</image29x29> 
        <image57x57>57x57.png</image57x57> 
        <image512x512>512x512.png</image512x512> 
    </icon> 
</application>

この <id>example.com.sample201710b</id> の部分だが、文書には以下のように書いてある。

アプリケーション記述ファイルの作成 3. iOS Provisioning Portal で指定したアプリケーション ID と一致するよう、アプリケーション ID を変更します（ID の先頭のランダムなバンドルシード部分は含めないでください）。引用元: https://help.adobe.com/ja_JP/air/build/WSfffb011ac560372f3cb56e2a12cc36970aa-8000.html

iOS Provisioning Portalというのは有料の人が使える。無料の場合はどうすれば‥‥

https://forums.adobe.com/message/7835794#7835794 を参考に、ダミーアプリを作成した。

Xcodeで[File - New - Project - iOS - App - SingleViewApp]

 product name:  sample201710b
 organztn id:   example.com
 bundle id:     example.com.sample201710b

このbundle idを使えばいい。

このダミーアプリ作成時に Xcode情報入力画面（ソースコードは左のviewController.mとかdoubleclickで出る。情報画面は真ん中上のsample201710bをdoubleclickで出る）に no matching provisioning profiles found とあるので[fix issue]ボタン押下しておく。

別の話だが、文書でのXML例 <application xmlns="http://ns.adobe.com/air/application/2.7" minimumPatchLevel="0"> この2.7のままだとコンパイルで以下のエラーになる。

    /Users/foo/share/2017app/air201710b/HelloWorld-app.xml: error 305: Intial window content SWF version 33 exceeds namespace version http://ns.adobe.com/air/application/2.7

2.7 の部分をAIR SDKのバージョン、今回は 22.0 に書き換えればいい。

Mac上のシミュレーターで動作確認。 MacのTerminalで以下を入力。

macmini:air201710b foo$ adl HelloWorld-app.xml -screensize iPhone
    error while loading initial content

errorと出たけど（無視していいのか？） Mac上でウィンドウも一瞬表示されて正常動作ではあるようだ。

Provisioning Profile

iPhoneにインストールするためのipaファイル作成には、Apple開発用プロビジョニングプロファイルというのが必要だ。有料開発者ならダウンロードできるらしい。

無料の場合は先ほどの https://forums.adobe.com/message/7835794#7835794 を参考に、Xcodeから取得する。

[Xcode - Preference - Account - your] を選択。左下のネジをclick - Export account - Password入力（ここでは passwd）。

出力されたのは 201710.developerprofile 43KB バイナリーファイルだ。これを ios.mobileprovision として使えばいいらしい。

Secret Key

Apple開発用証明書と秘密キーというのも必要だ。無料の場合はMacの以下から取得する。

[Finder - Application - Utility - KeyChainAccess.app - 分類 - 自分の証明書 - 秘密鍵] これを右クリックして[書き出し] p12ファイルを取得。ios_private_key.p12 として使用する。

秘密鍵でない、証明書のほうは必要なのだろうか？　なくてもipaビルドはできるので今回は使わない。

build ipa

以下のコマンドでipaを作成できた。

macmini:air201710b foo$ adt -package -target ipa-debug -keystore ios_private_key.p12 -storetype pkcs12 -storepass passwd -provisioning-profile ios.mobileprovision HelloWorld.ipa HelloWorld-app.xml HelloWorld.swf 29x29.png 57x57.png 512x512.png Default.png 
macmini:air201710b foo$ ls -l
    -rw-r--r--   1 foo  staff      656 10 23 16:18 HelloWorld-app.xml
    -rw-r--r--   1 foo  staff      684 10 23 13:34 HelloWorld.as
    -rw-r--r--   1 foo  staff  8483767 10 23 16:18 HelloWorld.ipa
    ...

install ipa into iPhone

文書ではMacのiTunesアプリでipaをインストールすると書かれている。しかしこれは有料ならできるようだが、無料だとムリなようだ。

iTunesで[ipa doubleclick - インストール - 同期]してもiPhoneには表示されない。あとiTunesのAppタブに追加したアプリの削除方法がわからない。

https://docs.monaca.io/ja/monaca_ide/manual/deploy/non_market_deploy/#id4 見て、Xcodeで [Window - Device - InstalledAppにipaをD&D] でインストールできた。

other app

新アプリに新idを与えてipaを生成し、いきなりXcodeでipaインストールできないか試したがエラー。 Xcodeでダミーアプリをインストールして、iPhoneの[プロファイルとデバイス管理]に追加済みのidだけが、ipaインストール可能。

つまりXcodeで

[mac] iOSアプリを無料で作成する https://itouhiro.blogspot.jp/2017/10/mac-ios-app-xcode7-freecost.html

のやり方でダミーアプリsample201710bを、iPhoneにいったんインストール。するとiPhoneの[プロファイルとデバイス管理]の検証済みアプリに sample201710b が追加される。

そのダミーアプリのbundle idをXMLで<id>につけておけば、別アプリでもiPhoneにインストールできる。

install Starling App

[Flash] Starlingの学習 TouchEvent https://itouhiro.blogspot.jp/2017/05/flash-starling-touchevent.html で作成したswfをそのまま使いipaを作成、iPhoneにインストールしてみる。

sample201710c-app.xml

<?xml version="1.0" encoding="utf-8" ?> 
<application xmlns="http://ns.adobe.com/air/application/22.0" minimumPatchLevel="0"> 
    <id>example.com.sample201710b</id> 
    <name>
        <text xml:lang="en">StarlingTouch1</text> 
        <text xml:lang="ja">Starlingタッチ1</text> 
    </name>
    <versionNumber>0.0.1</versionNumber> 
    <filename>sample201710c</filename> 
    <supportedProfiles>mobileDevice</supportedProfiles> 
    <initialWindow> 
        <content>201705touch1.swf</content> 
        <title>sample201710c</title> 
        <renderMode>direct</renderMode>
        <fullScreen>true</fullScreen>
        <autoOrients>true</autoOrients>
    </initialWindow> 
    <icon> 
        <image29x29>29x29.png</image29x29> 
        <image57x57>57x57.png</image57x57> 
        <image512x512>512x512.png</image512x512> 
    </icon> 
</application>

ポイントは <id>example.com.sample201710b</id> をダミーアプリのbundle idと同じにしておくことだ。

これはiPhoneで撮ったスクリーンショット等倍。

[合いの手] 動作してるねー。でも文字がなんだか読みにくい。

[話者] Starlingで作ったアプリは、文字がbitmap表示になるからなー。もっと解像度高めに作るべきかも。

itouhiroメモ帳

2017-10-24

[Flash] Adobe AIR iOS App freecost