MacBookPro
macOS Monterey Ver.12.5.1
Xcode Ver.13.4.1　※Xcodeはインストール済みとします

Flutterについて

FlutterはGoogle社の開発したモバイル向けのフレームワークです。一番の特徴はマルチプラットフォームに対応している点で、一度の開発でiOS、Android等のアプリが作れるため、コストの削減になるかと思います。言語はDartという、これもGoogle社で開発した言語を使用します。

手順１．Android Studioダウンロード＆インストール

以下リンクよりAndroid Studioをダウンロードし、インストールを行います。
https://developer.android.com/studio

手順２．Flutter SDKダウンロード＆配置

以下リンクより「flutter_macos_3.3.0-stable.zip」をダウンロードします。
https://docs.flutter.dev/get-started/install/macos
ダウンロード後、解凍した「flutter」フォルダを任意の場所に配置します。例えばユーザフォルダ直下など。

手順３．パスを通す

flutterをコマンドで使用できるようにパスを通します。パスの通し方はシェルの種類により変わってきますが、ここではbashを前提とした説明となります。シェルの種類はターミナルで以下コマンドを実行することで確認できます。
echo $SHELL
bashだとして、、まずユーザフォルダの配下にある「.bash_profile」というファイルを開きます。なければ作成します。開いたら以下を追記して保存します。
export PATH="$PATH:[配置したflutterフォルダのパス]/bin"
私の場合、flutterフォルダをユーザフォルダ直下に置いたので例えば以下のようになります。
export PATH="$PATH:/Users/lumimac/flutter/bin"
その後、以下コマンドでflutterを配置したパスが表示されればOKです。
which flutter

手順４．flutter doctor実行

ターミナルで以下コマンドを実行します。
flutter doctor
おそらくいくつか×がついたエラーが表示されると思います。私の場合３つのエラーが表示されました。１つずつ解決法をご説明します。

①cmdline-tools component is missing
Android StudioのSDK Managerを開き「Android SDK＞SDK Tools」タブを開きます。開いたら画面下部「Hide Obsolete Packages」のチェックを外し、
「Android SDK Command-line Tools(latest)」と「Android SDK Tools(Obsolete)」にチェックを付けてOKを押します。

②Some Android licenses not accepted.
以下コマンドを実行します。実行すると途中で何度か「y/n」の入力を求められますが全て「y」を入力します。
flutter doctor --android-licenses

③CocoaPods not installed
以下コマンドを実行します。
sudo gem install cocoapods

全て対応したら再度 flutter doctor を実行して、全てのエラーが解消されたことを確認できればOKです。

手順５．プラグインインストール

Android StudioのPluginsより、検索欄で「flutter」を入力し、「Flutter」をインストールします。
インストールするとボタンが「Install」から「Restart IDE」に変るので「Restart IDE」を押してAndroid Studioを再起動すればOKです。

プロジェクト作成

以上で導入が完了しました。試しに新規でプロジェクトを作成してみます。

Android StudioのProjectsから「New Flutter Project」を選択します。

続いて「Flutter」を選択して「Next」へ。

続いてProject nameを適当に入力して「Finish」するとプロジェクトが作成されます。Project locationはプロジェクトが作られる場所で、適宜変更します。デフォルトだとユーザフォルダ配下に「StudioProjects」というフォルダができて、その直下にプロジェクトが作成されます。

実行

シュミレータで実行してみます。まず、画面上部より「Open iOS Simulator」を選択します。

そうするとシュミレータが起動されます。起動したら、画面上部の再生ボタン（三角記号）を押して実行します。

ビルドにやたらと時間がかかりますが、、ひとまず実行できました。新規でプロジェクトを作っただけですが、簡単な画面デザインと実装が入っています。右下＋ボタンを押すと画面中央のカウンタがアップします。

まとめ

導入までは難しくありませんでした。これから色々と試してみようと思います。気になるのが画面のデザインの仕方や、Dartはどうなのか、どこまでFlutterでできてどこからネイティブじゃないとできないのか、とか。今後、そこらへんを試しつつ記事にできたらと思います。

今日は、iOSのアプリを作ってみたいけどどうやって作ればよいか・・という初級者の方へ向けて、「もぐら叩きアプリ」を作る動画を、解説を交えつつご紹介したいと思います。
動画は↓こちらのリンクからご覧いただけます。
【Swift・初級】もぐら叩きアプリを作ってみよう！

開発環境

まず準備するものとして、Macが必要となります。MacはAirでも可能ですが、スペック面で重く感じるかもしれません。できればProがおすすめです。
またツールとしてはXcodeが必要です。XcodeはAppStoreより無料でダウンロードできます。これが容量を30GB以上必要とするので、空き容量にはご注意を。。

初期設定

動画でいうと0:56「2.初期設定」が、おそらく何をやっているのかよくわからないかもしれませんが。。ひとまずはこういうものだと捉えていただければと思います。
１点だけ、Storyboardを削除しているのですが、これは私の個人的な開発思想が反映されています。Storyboardというのは、そこで１つ１つの画面を定義して、更に画面の遷移の仕方をそこで設計するものです。それが個人的に扱い辛く感じておりまして、Storyboardを使わずに画面を作って、画面の遷移はプログラムで制御するようにしています。ここは人によるところだと思いますので、これが正解ではないことをご理解いただければと思います。

画面デザイン

動画でいうと6:15「6.画面デザイン」からが画面のデザインになります。
画面のデザインが実はけっこう厄介です。なぜかというと、iPhoneにも色々な機種があり、機種によりディスプレイの大きさが異なります。どの機種で表示してもバランスよく配置する必要があります。そのために必要な技術がAutoLayoutです。
動画の中で、項目を配置する際、上からの距離とか左からの距離なんかを設定していますよね？それがAutoLayoutの設定になります。動画の中ではシンプルに上からや左からの距離を設定していますが、例えば、画面のちょうど中央になるよう設定するとか、全体の30%の距離になるよう設定するとか、この項目の左端に合わせるよう設定するとか、ケースバイケースで様々な設定を要します。始めのうちはAutoLayoutがうまくいかず泣かされると思います。。

プログラミング

動画でいうと19:21「10.プログラミング」からがプログラミングになります。
言語はSwiftです。ひと昔前はiOSの開発といえばObjective-Cでしたが、今はSwiftが主流です。
動画でのポイントは、プロパティと変数です。プロパティは日本語だと属性になるのですが、例えば「人間」には「性別」「年齢」「身長」などいったプロパティを持っています。そこに付随した様々な情報です。今回はisHiddenというプロパティを扱っています。これはその物を表示する・しないという情報を表します。その値は参照するだけでなく、変更することも可能です（プロパティによっては変更不可なものもありますが）。今回はそれを変更して、モグラ画像を消したり、逆に穴画像を表示したりしました。
また変数というのは様々な値を格納する器のようなものです。器には必ず型を持っています。例えばIntという型は数字だけしか格納できません。Stringという型は文字列だけしか格納できません。今回tensuという変数を作りました。これの型は何なんだと思われたかもしれませんが、、Swiftでは明示的に型を定義しなくても、宣言した時点で値を設定すると自動的にその型を判断して決めてくれます。tensuは↓始めに「0」を設定しました。そうするとInt型になります。
private var tensu = 0

まとめ

気づいたら非常に長い文章になっていたので、ここでまとめます。
この動画は、今までアプリを作ってみたいけど難しそうと思われている方が、自分でも作れるんだ！というのを実感してもらえたらなという思いで作りました。そういう方々の少しでも力になれたら幸いです。