Bubbleで作ったアプリをiOSネイティブアプリにする方法
こんにちは、タデです。
Bubbleで作ったアプリをiOSのネイティブアプリにする方法をご紹介したいと思います。
Bubbleと書いていますが、URLを指定するだけなのでWebサイトであればネイティブアプリ化できる可能性があります。
必要なもの
必要なものとしては以下のものになります。
- Mac
- Xcode
- CocoaPods
- Bubbleのアプリ
「Mac」と「Xcode」はiOSのアプリを作るためには必須になります。
「Bubbleのアプリ」ですが、このアプリはリリースしていないプレビューのものでも使用可能です。もしネイティブアプリ化を試してみたいだけなら、Yahoo!などのWebサイトのURLでも代用可能です。
使用するツール Jasonelle
ネイティブ化するのに Jasonelle というツールを使います。
このツールではデフォルトでデモアプリを表示するようになっていますが、デモアプリの設定を上書きしてBubbleのアプリを表示するようにします。
ネイティプアプリの作成
ネイティブアプリの作成手順は以下のようになります。
Xcodeのインストール
XcodeはiOSでアプリを作るときの開発ツールです。
XcodeはApp Storeから無料でインストールできるので、インストールしてください。
CocoaPodsのインストール
CocoaPodsはJasonelleで使用するプログラムをダウンロードするために必要になります。
インストールするには、「ターミナル」を起動し、次のコマンドを実行します。
$ sudo gem install cocoapods
Jasonelleのセットアップ
まずJasonelleをダウンロードします。Jasonelle Releases を表示し、「Jasonelle v2.0 – November 2019」の「jasonette-ios.zip」をダウンロードします。
ダウンロードしたjasonette-ios.zipを展開します（以降、ダウンロードフォルダで展開したものとして話を進めます）。
ターミナルを起動し、次のコマンドを実行します。
$ cd ~/Downloads/jasonette-ios-master/xcode
$ pod install
$ open Jasonette.xcworkspace
これで、Xcodeが起動します。Xcodeを起動するときにダイアログが表示されますが「Open」ボタンを押してください。
一旦、デフォルトで入っているデモアプリでネイティブアプリが起動するか確認します。
Xcodeの左上にある三角形のマークをクリックしてください。
すると、シミュレータが起動し、デモアプリが表示されます（時間がかかります）。
Bubbleアプリをネイティブアプリ化
次にデモアプリをBubbleのアプリに切り替えます。XcodeでJasonette/App/hello.jsonを開いてください。
左上にツリーが表示されていなければフォルダのアイコンをクリックすれば、ツリーが表示されます。
hello.jsonを以下のように書き換えます。
アプリのURLを６行目の「<<<アプリのURLをここに入れる>>>」の代わりに入れてください。
{
"$jason": {
"body": {
"background": {
"type": "html",
"url": "<<<アプリのURLをここに入れる>>>",
"action": {
"type": "$default"
}
}
}
}
}
これで、再度、ネイティブアプリを起動するとBubbleのアプリが表示されます。
設定のカスタマイズ
「ネイティブアプリの作成」だとアプリ名とアイコンがデモアプリのままになってます。
アプリ名の変更
アプリ名の変更は Jasonette/Config/info.plist を修正します。
まず左上のフォルダアイコンをクリックし、ツリーから Info.plist を選択します。そうすると右の方に一覧が表示されるので、「Bundle name」を変更します。
ネイティブアプリを起動し、そのまま終了すると、シミュレータのアプリ名が先ほど設定した名前に変わっています。
アイコンの変更
アイコンの設定画面は、左上のフォルダアイコンをクリックし、Jasonette/Config/Media.xcassetsを選択し、その右側にある一覧から AppIcon を選択すると、右側にアイコンの一覧が表示されます。
設定するアイコンのサイズは、赤枠で囲っているアイコンであれば、アイコンの下にある「2」とそのさらに下にある「60pt」をかけた「120×120」になります。
ファイルはドラッグ・アンド・ドロップで設定することができます。
以上で、Bubbleアプリのネイティブアプリ化の方法は終了です。