Android
HTML5
iOS
Dart
Flutter
DartDay 6

Dart x Flutter で、作成したAndroidアプリをGoogle Playに登録してみた

More than 3 years have passed since last update.

Dart x Flutter で作成したAndroidアプリをGoogle Playに登録してみました。本文ではそのノウハウを紹介します。

umiuni2d_demo_01.png

Dart x Flutter は、あなたが持つ、さまざまな問題を解決します。太字のところだけでも目を通してもらえるれば幸いです。






Dart x Flutter での開発は快適!!


Dart x Flutter は マルチプラットフォーム

まだまだ、 FlutterはAlpha版ですが、Dart x Flutter を利用する事で、Mac, Linux, Android, iOS 上で動作するアプリがつくれます。

現時点では、Mac, Linux, iOSのアプリを作成するには、Flutterのソースからビルドする必要があるのですが、Androidに関してはワンコマンドでAndroidアプリを生成できます。


ワンコマンド、futter apk とするだけで一瞬でAPKが作成される。

Dart x Flutter のビルド時間は異様に短いです。一瞬です。Dart VM が直接動作するので、DartのソースコードをAndroidに転送するだけで動作します。

このため、煩わしいビルド時間から解放されます。


Dart VMが直接走るので超高速 & 起動が早い

Dart VMが直接動作するので、WebView上でJavaScriptが動作するのと比較すると高速に動作します。 Dart x Chrome x PhoneGap を利用した環境と比較すると顕著でした。高速で起動し、快適に動作します。

これによって、PCのブラウザーで動作しているゲームをスマートフォンに移植する際の、パフォーマンスへの調整時間が短縮されます。

※ iOSはAOTコンパイル


ロウスペックのPCでも軽快に動作する開発環境!!

開発環境はATOMがお薦めです。 Flutter x Dartでは、EclipseやAndrood Studioといった重い開発環境をいれなくても快適に開発できます。

https://dart-atom.github.io/dartlang/






まずは試してみましょう。

※ これはMacの場合です。

## Dart SDKのインストール

brew tap dart-lang/dart && brew install dart --devel

## Flutter のインストール
git clone https://github.com/flutter/flutter.git -b alpha
emacs ~/.bash_profile
export PATH=`pwd`/flutter/bin:$PATH
source ~/.bash_profile

## Androidの設定
brew install android-sdk
emacs ~/.bash_profile
export ANDROID_HOME=/usr/local/opt/android-sdk
source ~/.bash_profile

## アプリが依存するパッケージをインストール
pub get
pub upgrade

## kyorohiroが作成したサンプルをダウンロード
git clone https://github.com/kyorohiro/doc_2dgame.git
cd demo/mino

## APK 生成
flutter apk

開発環境が整っている場合であれば、"flutter apk" とコマンドを入力するだけです。このコマンドを入力してもらえた方はわかると思いますが。一瞬で完了します。






Google Play へリリースするための、プラスワン

まだ、Flutter は、アルファ版のため、ワンコマンドで、Google PlayにリリースするためのAPKを生成する事ができません。今回、私はapktoolを使って生成しました。


 アイコンを追加と署名を剥がす


(1) apktoolをダウンロード

http://ibotpeaches.github.io/Apktool/


(2) apkを解凍

java -jar apktool_2.0.2.jar d app.apk


(3) マニフェストにアイコンを追加

"android:icon="@mipmap/ic_launcher"" を追加します。

emacs AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest android:versionCode="1" android:versionName="0.0.1" package="info.kyorohiro.umiuni2d.demo.mino" platformBuildVersionCode="22" platformBuildVersionName="5.1.1-1819727"
xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET" />
<application android:icon="@mipmap/ic_launcher" android:label="Wonder Minon" android:name="org.domokit.sky.shell.SkyApplication">
<activity android:theme="@android:style/Theme.Black.NoTitleBar" android:name="org.domokit.sky.shell.SkyActivity" android:launchMode="singleTask" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:hardwareAccelerated="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>


(4) アイコンファイルを追加

解凍したAPK上で、以下のような配置になるようにアイコンファイルを追加します。

./app/res/mipmap-hdpi

./app/res/mipmap-hdpi/ic_launcher.png
./app/res/mipmap-mdpi/ic_launcher.png
./app/res/mipmap-xhdpi/ic_launcher.png
./app/res/mipmap-xxhdpi/ic_launcher.png
./app/res/mipmap-xxxhdpi/ic_launcher.png


(5) APKを再結合する。

java -jar apktool_2.0.2.jar b app


(6) Good!!

これで、無事、署名無しのAPKを生成する事ができました。






ほそく


Memo : Flutter x Dart

kyorohiroがFlutterについて、学習した事を記載しているメモ

https://kyorohiro.gitbooks.io/hello_skyengine


Umiuni2D

今回のサンプルアプリ

https://github.com/kyorohiro/doc_2dgame


Dart x Flutterの公式サイト

http://flutter.io/


QiitaのFlutter 関連の記事

http://qiita.com/takyam/items/4cfed5318da880276d98


Sample: Apk for Google Play

https://play.google.com/store/apps/details?id=info.kyorohiro.umiuni2d.demo.mino


Sameple :Html5 version

http://kyorohiro.github.io/umiuni2d/mino2/web/main.html


ATOM Plugin

https://dart-atom.github.io/dartlang/


Thanks!

umiuni2d_demo_2.png

最後まで、読んでいただきまして、ありがとうございました。

(ref http://pixiv.me/kyorohiro)

(ref https://play.google.com/store/apps/details?id=info.kyorohiro.umiuni2d.demo.mino)





Kyorohiro Work

http://kyorohiro.strikingly.com/