定義してあるので、実装の追加も容易に行えます。開発中に、横スクロールだけでなく、縦スクロールで、もっと口コミが見れたらいいよね、って事で、機能が追加され、もっと見るボタンが設置されました。このようになっています。実装することになっても、対応は簡単です。利用してスムーズに開発する事が出来ました。最終的なコードは以下のようになりました。}}最後にアクトインディでは、一緒に働いてくれるエンジニアを募集しております。morishitaです。それぞれ作らないといけないなんてネイティブアプリ開発は大変だなぁといつも横目でちら見しております1。単なるショートカットではなくネイティブアプリ同様に扱われるようになってきています2。それでも、端末の機能をほぼ制限なく使え、カメラやセンサやNFCなどを利用した3ネットとリアルのよりリアル寄りのアプリケーションを開発できるネイティブアプリの自由さはいいなぁと思うことがあります。Webアプリのようにネイティブアプリを開発できる、AndroidもiOSもワンコードですと謳う開発環境やフレームワークはこれまでもありましたが、スマホの2大プラットフォーマーの1つGoogleを中心に開発が進められているものが出てきました。それがFlutterです。真打ち登場かもしれません。いうことで、ちょっと触ってみました。して開発されています。flutter.io次の特徴を謳っています。PerformanceiOSとAndroidの両方で完全なネイティブパフォーマンスを提供また、実装言語にはDartを採用ししています。Packagesで探して利用することもできます。このエントリではVSCodeでFlutterによるアプリ開発するためのセットアップからサンプルアプリの動作確認までやってみます。上でのセットアップの流れです。向けにビルドする必要があり、それぞれビルドするためのツールチェインが必要になります。そのためにインストールします。インストールしましょう。インストールしているでしょう。インストールしてしまうのが手っ取り早いし簡単です。Developersつづいて、iOS。インストールしましょう。インストールお待ちかね、Flutterのインストールです。ファイルをダウンロードして展開するだけです。いうディレクトリができます。それを任意の場所に配置します。~/Libraryの下に置いています。コマンドが使えるようになっているはずです。doctorを実行しましょう。私の環境では次の様な結果が出力されました。内の必要なモジュールがチェックされます。[!]がついた項目が問題のある項目です。これらを解消していきます。doctorの結果の次の部分ですが、これは何やらライセンスに同意していないと注意されています。--android-licensesを実行して同意すれば解決です。pluginをインストールします。問題ないですが、予めこれらのプラグインをインストールしていたためです。同様のメッセージが出るので、それに従います。ついても解決方法が示されています。brewのパッケージインストールコマンドが示されているので、順に実行します。doctorの結果の場合、次のコマンドを実行します。無い環境だと自動的にpython2がインストールされます。pipが含まれないので、途中でコケます。documentationを参考にインストールして再実行すれば解決します。cocoapodsのインストールには結構時間がかかるのでご注意を。Doctorが解決方法も示してくれるのでそれに従っていけば割とスルッとできると思います。Doctorの出力で次のように指摘されています。プラグインがインストールされていないだけです。1.27.2)なので、次のプラグインをインストールしましょう。Projectを実行してみてください。次のようなダイアログが表示されると思います。プロジェクト名を聞いてきたら、飛ばして次に進んでいいです。SDKボタンをクリックして設定します4。Doctorを実行します。devicesは気にしなくていいです。Flutterプラグインから接続できる端末がないと行っているだけです。エミュレータを起動すれば解決します。Doctorの結果がきれいになったところでセットアップは終了です。サンプルプロジェクトで動作確認さて、セットアップが終わったところで、サンプルを実行してみましょう。今度はプロジェクト名を聞いてくるので、適当に入力して保存する場所を選択したら、ファイル群が生成されプロジェクトが初期化されます。この時点で、簡単なアプリのコードが含まれています。表示されているのでクリックするとコマンドパレットに選択肢が表示されます。最初から選択できるのではと思います。選択するとエミュレータが起動します。Newを選択すると自動的に作成されて起動します。作成するにはエミュレータのシステムイメージが必要です。Imageをインストールすると、作れるようになります。Newを実行すると次の仮想デバイスが作成されます。実行エミュレータの準備ができたらサンプルアプリを動かしてみましょう。選択できるようになっています。選択して、実行するとプロジェクトがビルドされエミュレータで実行されます。サンプルアプリは右下の+ボタンをクリックすると数字がカウントアップするだけのシンプルなものです。Pageの文字列を書き換えたり、UIの色を変更ししてみると、すぐにエミュレータで実行されているアプリに反映されます。特徴のホットリロードですね。以上でサンプルアプリの動作確認も終了です。バージョンが0.7.2から0.8.3上がってしまいました。いいのでアップデートも試してみました。upgradeコマンドで可能です。upgradeの実行の様子はちょっと長いので折りたたみます。興味ある方は開いて見てください。--versionでバージョンを確認します。2.1.0-dev.3.1.flutter-760a9690c2ちゃんと上がっていますね。アップデート後、VSCodeからアプリを起動してみましたが問題ありません。アップデートも簡単です。まとめ難しいハマりどころはなく、VSCodeでFlutter環境は作れます。アップデートも難しくありませんでした。VSCodeを使うのは微妙な気もしないではないですが、選択肢があるのは良いことではないでしょうか。2が出たところなので実戦投入には十分な検証が必要だと思うのですが、プロトタイピングしてみる程度なら十分使えそうです。ホットリロードは小気味よく、Web開発感覚でアプリ開発できそうです。最後にアクトインディではWebでもアプリでも、インフラでもいろいろやりたいエンジニアを募集しています。両プラットフォームへの配慮は必要ですし、時には作り分けたりする必要もありますが。↩プッシュ通知欲しさに開発されたほぼWeb版と変わらない(しかも全面的にUIはwebviewだったりするような)ネイティブアプリはAndroidに於いては減ってくるだろうなぁと個人的に思っています。↩ブラウザでもだいぶサポートされてきていますが、安定性やパフォーマンス含め広く一般的に使える状況まではもう少し掛かりそうですね。置いている場合、ファイル選択ダイアログでこのディレクトリが表示されなくて選択できないかもしれません。~/Libraryを実行すると表示されるようになります。