Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
41
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@kyorohiro

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

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といった重い開発環境をいれなくても快適に開発できます。




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

※ これは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をダウンロード

(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の公式サイト

QiitaのFlutter 関連の記事

Sample: Apk for Google Play

Sameple :Html5 version

ATOM Plugin

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/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
41
Help us understand the problem. What are the problem?