どうも、すえきあおいです。

前回（FLutter開発-準備編-）に引き続き、今日はサンプルアプリをダウンロードしていきます。

超重要！サンプル選び

皆さん、いつも開発ってどうやってやってます？

私は自分が作りたいものに近いサンプルを入手して、そいつをカスタマイズしていく方法で進めてます。

これがいいのかわからないですが、

• 一から自分で作るより遥かに速い
• 明らかに自分より優秀な人が作ってるからセキュリティ面も安心
• カスタマイズしながらソースコード読むから勉強にもなる

などの理由から特にデメリットは感じていません。一石三鳥！素晴らしい！

ただ一点、サンプルが土台になるので、これが変に作り込んであったり複雑だったりするとカスタマイズする時死ぬほど苦労します。

なので、土台にするサンプルアプリは、できるだけシンプルなものを選ぶようにしましょう。

失敗例。

とは言え、サンプル選びは「やってみないとわからない」面があり、失敗することも多いです。そして失敗すると結構時間を無駄にします。

例えば、今回だと下記のゲームエンジン『Flame』にFlutterで実装した例とかチュートリアルがついてたので、まずはチュートリアル通りに実装してこれを動かして、そっからカスタマイズしていこうとしました。

flame-engine/flameA minimalist Flutter game engine. Contribute to flame-engine/flame development by creating an account on GitHub.

 github.com

が。

Error: The non-abstract class 'FlameBiding' is missing implementations for these members:

実行したらなんかエラーになってチュートリアルPART（１/５）で行き詰まりました。

まぁバージョン違いとかでよくある話ですね。Flutterみたいな新しいライブラリだと特に日々アップデートされていて新陳代謝が早いので半年前のコードがもう動かない、とかよくあります。

こういうのはハマると長くなるのでスッパリ諦めます。（仮にこれが解消できても、次のエラー、また次のエラーと延々トラブルシュートする羽目になることが多いw

見切りは速ければ速いほど良い。

成功。やっぱ公式がイチバン安心。

Flutter Samplesという公式サイトにデモが載っていたサンプルコードを入手し、まずはこいつを動かして、そっからカスタマイズしていくことにしました。

kevmoo/slide_puzzleThe classic slide (15) puzzle in Dart and Flutter. Contribute to kevmoo/slide_puzzle development by creating an account on GitHub.

 github.com

＜ダウンロード＆動かし方＞

ターミナルでサンプルコードをダウンロードするディレクトリに移動し、

①Flutter for webが動くように設定

$ flutter channel dev
$ flutter upgrade
$ flutter config –enable-web

②アプリをダウンロード、必要なライブラリを取得、実行

$ git clone https://github.com/kevmoo/slide_puzzle.git
$ cd slide_puzzle
$ flutter packages get
$ flutter run -d chrome

以上。とっても簡単。

よっしゃ、これをandroid studioにimportして動かしてみます。

はいキタコレ！

開始30分できっちり動くwebゲームアプリができました（笑）

何のゲームなのかよくわかりませんが、ちょっと触ってみたところパズルゲームぽいw

多分、「1」が左上で「15」が右下になるように、より少ない手数で並び替えるゲームですね。多分。難しそうだからやりませんが、2Dゲームには変わりないですね。

それではコイツをカスタマイズしていきます。

次回に続く！