2018年3月28日水曜日

FlutterでAndroidとiOSそれぞれに実機で実行させてみた

最近β版が出たばっかりのFlutter。
まだまだBluetoothなどのサポートがされていないことから
Flutterのみですべてのニーズに答えることはまだ難しそうですが、
実際ロードマップに対応予定となっておりますし、
面白そうな試みではあったわけで実際試してみました!

Flutter自体はマルチプラットフォームで開発できるわけですが、
iOSアプリケーションはXcodeを経由する都合上、
macOSが必要となるため、hackintosh Macが必要となります。

    環境

  • MacBook Air (11-inch, Mid 2011)
    • 1.6 GHz Intel Core i5
    • 4 GB 1333 MHz DDR3
    • Intel HD Graphics 3000 384 MB
    • macOS Sierra 10.12.6
    • Xcode 9.2
    • Android Studio 3.0.1
    • Visual Studio Code 1.21.1
  • Galaxy S8 (SM-F950FD)
    • 2.3 GHz Exynos Octa 8895
    • 4 GB RAM (詳細不明)
    • Mail-G71
    • Android 7.0
  • iPhone 6 plus(A1524)
    • 1.4 GHz Apple A8 Processor
    • 1GB(LPDDR3)
    • iOS 11.2.6 (15D100)
  • ※iPhoneにおいてはWikipediaを参照

XcodeAndroid Studioをいれておいてください。
(これは他のわかりやすいサイトをググってくださいm(_ _)m)

brew も入ってない人は入れてください。

Flutter自体の導入は公式を参考にしてください。

今回はVSCodeを使って環境構築してみました。

まず、例の如くDart CodeFlutter Snippets for vscodeを導入していきましょう。
それぞれ導入して再読み込みしたら、つぎにCommandキーと,を同時押ししてVSCodeの設定画面を
開きます。

画像の右側のエディタに注目してください。
私の場合はFlutterをhomeディレクトリの下にインストールしたのでこのように記述しています。

VSCodeの設定はこれで以上です。

あとはflutter doctorなりの依存関係などを解決すれば準備完了のはずです。

ではVSCodeのコマンドパレットをひらいて、New Projectしてみましょう!!


ここでプロジェクト名を指定しますが
Androidアプリのみ作成予定の方はいいですが、
iOSアプリを作成する方はできるだけオリジナリティのある方がいいです

...まぁいくらでも修正できますが(笑)


そしたらこんな感じで生成されます。

ここでAndroid端末をつないでみましょう!

そしたら右下に端末の名前が表示させると思われます。

Controlとshiftと@を同時押しするとVSCode内蔵のterminalが開くので
flutter run
と入力してください。
そしたら後は待つだけ!!


では、
つぎは問題のiOS編です。

まずXcode開きましょう!!


そこからメニューバーのfileタブからOpenをクリックすると
Xcodeのプロジェクトフォルダの選択を求められるので、
先程、Flutterにて自動生成されたiosという名前のフォルダーを選択します。


ここで急に思い出したので書き出しますが、
Xcode初めての方はAppleアカウントをXcodeに紐付ける必要があります。

Xcodeの環境設定(Preferences...)をクリック


Accountsタブをひらいてログインしてごにょごにょ…

ではここでFlutterの設定の方に戻りましょう!!



ここで先程設定したアカウントを設定しましょう。

あとBundle identifierですが、これは多分世界中でかぶらせては行けない感じなので、
完全にオリジナルのものを設定しないと書き込み時にエラーがでるので
気をつけてください!!


これでXcodeの設定はオッケーです。

あとはVSCodeのほうのterminalで
flutter run
をするとiOS端末に書き込まれます。

※iOS端末のほうは設定画面からデベロッパー認証しないと起動しないので注意してくださいね(^_^;)


こんな感じでどうでしょう??

hackintosh Macユーザーの方々、どうです?
一度お試しあれ〜(*^_^*)


いや〜やっぱり長くなってしまいましたねぇ
でも一つのソースでiOS端末とAndroid端末を同時に開発できるのは
非常に魅力的です。
ただ、Dartに関する情報が少ないのが玉に瑕ってところです。
GoogleはAndroidの次期OSにもFlutterを採用するとも言っている
ようなので、触っておいても無駄にはならないと思います。

あと、DartはJavaScriptの代わりとしても使えるので
実は結構優秀だったりして…?

|д゚)チラッ<ROSDartはよ