はじめに 本記事は エムティーアイ Advent Calendar 2021 の1日目の記事です。 Flutterの開発環境を構築する方法を紹介します。 ちなみに業務ではFlutterを一切触っていません。 昨日行われた FlutterKaigi のハンズオンで初めてFlutterを触り、その準備時に行ったことを残します。 環境 OS：macOS Big Sur 11.6 ハード：MacBook Air (M1, 2020) Flutter：2.5.1 開発環境の構築 公式ドキュメントに沿ってFlutterの開発環境を構築します。 Flutter SDKのダウンロード 以下のページから、使いたいバージョンのFlutter SDKをダウンロードします。 特に決まりがなければ、Stable channelの最新を使うのがいいと思います。 ダウンロードが完了したら解凍します。 場所はどこでもいいですが、本記事では公式ドキュメント通り ~/development フォルダを作成して、そこに展開します。 以下はStable channelの 2.5.1 を解凍する例です。 $ cd ~ $ mkdir development $ cd development/ $ unzip ~/Downloads/flutter_macos_2.5.1-stable.zip Flutter SDKのパスを通す Flutter SDKを展開したら、パスを通します。 私はBashを使っているので .bash_profile に以下を追記します。 .bash_profile + export FLUTTER_HOME="${HOME}/development/flutter" + if [ -d "${FLUTTER_HOME}" ]; then + export PATH="${FLUTTER_HOME}/bin:$PATH" + fi .bash_profile を再読み込みし、 flutter --version でバージョンが出力されたらOKです。 $ source ~/.bash_profile $ flutter --version Flutter 2.5.1 • channel stable • https://github.com/flutter/flutter.git Framework • revision ffb2ecea52 (2 months ago) • 2021-09-17 15:26:33 -0400 Engine • revision b3af521a05 Tools • Dart 2.14.2 どうやらDartもFlutter SDKに同梱されているようです。 flutter doctorを実行する flutter コマンドが使えるようになったら flutter doctor を実行して、他にインストールすべき依存関係がないか確認します。 太字で×が付いたタスクがあればそれを実行します。 $ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.5.1, on macOS 11.6 20G165 darwin-arm, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) [!] Xcode - develop for iOS and macOS ✗ CocoaPods not installed. CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions. [✓] Chrome - develop for the web [!] Android Studio ✗ Unable to find bundled Java version. [✓] Android Studio (version 2020.3) [✓] VS Code (version 1.60.0) [✓] Connected device (1 available) ! Doctor found issues in 2 categories. 最初は4つ×があったのですが、2つ解決したので2つのみ×が出力されています。 でも解決した2つとも覚えているので、それらの対応を紹介します。 ちなみに私はXcodeとAndroid Studioをインストール済でした。 未インストールの人は、インストールから行ってといわれると思います。 Android SDK Command-line Toolsがインストールされていない 以下のエラーが出力された場合、Android SDK Command-line Toolsがインストールされていません。 [!] Android toolchain - develop for Android devices (Android SDK version 30.0.3) ✗ cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details. Android Studioから「Android SDK Command-line Tools (latest)」をインストールすればOKです。 Androidのライセンスに同意していない 以下のエラーが出力された場合、Androidのライセンスに同意していません。 [!] Android toolchain - develop for Android devices (Android SDK version 30.0.3) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses エラーの内容通り flutter doctor --android-licenses を実行し、必要なライセンスにすべて同意します。 $ flutter doctor --android-licenses 3 of 7 SDK package licenses not accepted. 100% Computing updates... Review licenses that have not been accepted (y/N)? y Accept? (y/N): y 再度コマンドを実行して「All SDK package licenses accepted.」が出力されればOKです。 $ flutter doctor --android-licenses All SDK package licenses accepted.======] 100% Computing updates... CocoaPodsがインストールされていない 以下のエラーが出力された場合、CocoaPodsがインストールされていません。 [!] Xcode - develop for iOS and macOS ✗ CocoaPods not installed. CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions. 私はrbenv + BundlerでCocoaPodsを管理したいので、こちらのエラーは無視しました。 Flutterによる開発ではCocoaPodsをグローバルインストールするのが一般的なのでしょうか？ もし知っている人がいたら教えてほしいです。 Android Studioに同梱されているJDKが見つからない 以下のエラーが出力された場合、Android Studioに同梱されているJDKが見つかりません。 [!] Android Studio ✗ Unable to find bundled Java version. 結論からいうと、こちらのエラーは解決できませんでした。 解決方法をご存知の人がいたら教えてほしいです。 参考までに試したことを残しておきます。 どこかのタイミングでAndroid Studioに同梱されているJDKのパスが変わったのが原因だと思い、その対応を行いました。 - /Applications/Android\ Studio\.app/Contents/jre/jdk/Contents/Home + /Applications/Android\ Studio\.app/Contents/jre/Contents/Home 私はAndroidアプリ開発以外でJavaを使わないため、 .bash_profile で JAVA_HOME にAndroid Studioに同梱されているJDKをセットしてパスを通します。 以前の jdk を含んだパスを指定します。 .bash_profile + export JAVA_HOME=/Applications/Android\ Studio\.app/Contents/jre/jdk/Contents/Home + if [ -d "${JAVA_HOME}" ]; then + export PATH="${JAVA_HOME}/bin:$PATH" + fi このままだとパスが見つからないので、以前のパスにシンボリックリンクを貼ります。 $ cd /Applications/Android\ Studio\.app/Contents/jre $ ln -s ../jre jdk $ ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk $ cd - これで JAVA_HOME をセットしてパスを通せたのですが、それでも解決されませんでした。なぜでしょうか…。 Android Studioプラグインのインストール Android StudioにFlutterのプラグインをインストールします。 プラグインの「Marketplace」タブを開き、「flutter」で検索すると簡単にインストールできます。 Dartのプラグインが必要だといわれるので、「Install」を押下します。 Android Studioを再起動し、「Installed」タブに「Dart」と「Flutter」があればOKです。 ちなみにどちらのプラグインもOSSで開発されています。 おまけ: Flutter SDKの管理ツール 本記事ではFlutter SDKを手動で管理していますが、それだと複数のプロジェクトで異なるバージョンを使いたいときに困ります。 Flutterには fvm や asdf などの管理ツールがあり、これらを使うことで手動管理のデメリットを解消できます。 TwitterでFlutter SDKをどのように管理しているかアンケートを取ってみました。 結果はfvmが最も多かったです。 ただasdfも流行ってきているとのことなので、各管理ツールのメリットやデメリットを調査し、プロジェクトに合ったツールを選定するのがよさそうです。 おわりに まだ不十分なところもありますが、Flutterの開発環境が構築できました！ FlutterでUIを気持ちよく組み立てていきましょう 以上 エムティーアイ Advent Calendar 2021 の1日目の記事でした。 参考リンク https://twitter.com/the_uhooi/status/1465571548463464451?s=20 1. Flutter 環境構築 · FlutterKaigi/atomic_design_handson Wiki flutter doctorで「Unable to find bundled Java version.」となる場合の解決法

[概要] ①Dockerインストール編の後続記事となります。 　Dockerインストール編 Dockerをインストールした後。Dockerファイルを作成してみよう！ [作業] 作業用フォルダの作成 Dockerファイルを作成する前に、作業用フォルダを作ろう。 1, Finderを開いて、ユーザーディレクトリに、[LocalServer]フォルダを作成 2, [LocalServer]直下に、[app]フォルダも、ついでに作成 ※フォルダ名は任意 Dockerファイルとは Dockerファイルとは、大きく2点を理解できればとりあえずはOKなのかなとは思います。 [Dockerイメージ] Dockerイメージとは、Dockerコンテナを作る上で必要なファイル群である。 Dockerイメージは、以下にゴロゴロ落ちています。 docker hub 今回は、このDockerイメージを使用して、Dockerコンテナを作成することが目的です。 ※Dockerイメージは自身で作成することも可能 ※今回使用するのは、Dockerイメージ「python:3.7.4」 [Dockerコンテナ] Dockerコンテナとは、Dockerイメージを元に作成されるものとなります。 イメージとしては、コンテナという大きな箱に必要な複数のイメージファイルが入っている。 <大まかな流れ> 1, Dockerイメージを定義 2, Dockerイメージを元に、コンテナを作成 3, 上記コンテナを用途に合わせて「起動・停止」する Dockerファイルの作成 1, テキストファイルで、ファイル名「Dockerfile」を以下の内容で作成する。 FROM python:3.7.4 ARG project_dir=/app/ WORKDIR $project_dir RUN pip install flask CMD [“python” “local_server.py”] <定義命令> FROM：ベースとなるDockerイメージの指定 ARG：dockerfile内で使用できる変数を定義できる 　　　※使ってみた WORKDIR：作業用ディレクトリを指定　 　　　　　　※指定しない場合はroot直下が指定される RUN：コンテナビルド時に、コンテナ内でコマンドを実行する 　　　[pip install flask]は、Flaskをインストールするためのコマンドであり 　　　※Flaskは、「PythonのWebアプリケーションフレームワーク」である CMD：コンテナのデフォルトの実行コマンドを定義する 2, 上記ファイルを作成したら、[localServer]フォルダ直下に保存しよう。 LocalServer / Dockerfile [参考] ・ https://blog.codecamp.jp/programming-docker-image-container ・ https://programing-school.work/docker-image/

mac ではext4でフォーマットされたHDDを読み書きすることができない。読み書きするには、有料のソフト(extFS for Mac by Paragon Software)を購入する必要があるようだが、読むだけであれば、フリーのソフトウェアであるext4fuseをインストールすること可能である。ext4fuseを利用してmacでもext4を読むことができたので、ここではその方法について記す。 ==環境 - Mac Pro (2019) - mac OS Monterey 12.0.1 ==インストール 以下のページを参考にして、ext4fuse をインストールした。 https://qiita.com/shimizumasaru/items/88e3713eb3fce05a6246 具体的には、任意のディレクトリで ext4fuse.rb (上記のHPの記述をコピペ)をエディタで作成し、そのディレクトリで以下のコマンドを実行。 $ brew install --formula --build-from-source ./ext4fuse.rb ==マウント マウント方法を記す。以下のHPを参考にした。 https://qiita.com/sameyasu/items/bc937fc70f536ef84ee7 (1) diskutil list でマウントしたいHDDのボリュームとパーティション名を確認する。 $ diskutil list /dev/disk2 (external, physical): #: TYPE NAME SIZE IDENTIFIER 0: GUID_partition_scheme *8.0 TB disk2 1: Linux Filesystem ⁨⁩ 8.0 TB disk2s1 この場合、/dev/disk2s1 をマウントすれば良いことがわかる。 (2) マウントポイントとなるディレクトリを作成（ここでは、mt/ というディレクトリを作成した） $ mkdir mt (3) マウントする ext4fuseは以下のコマンドで実行する。 $ ext4fuse マウントするディスク　マウント先 具体的には、以下のコマンドを用い、ルートでマウントする。 $ sudo ext4fuse /dev/disk2s1 ~/mt -o allow_other なお、以下のように、一般ユーザーでマウントしようとすると、/dev/disk2s1にパーミッションがないためマウントできない。 $ ext4fuse /dev/disk2s1 ~/mt -o allow_other disk_open: /dev/disk2s1: Permission denied (4) アンマウントは通常のumountコマンド でOK。 $ sudo umount ~/mt 以上。

開発に Visual Studio Code を使う前提です。 Windows の場合 Android Studio をインストールしておく。 Visual Studio Code をインストールしておく。 Visual Studio 2019 をインストールして C++ デスクトップ開発環境をインストールしておく (Windows デスクトップアプリの開発をする場合) flutter 公式から zip をダウンロードして展開する。適当なフォルダに置く。 SDK/flutter/bin に PATH を遠す。 flutter doctor してみる。 sdkmanager がないといわれたとき： Android Studio の SDK Manager を開いて、SDK Tools のタブから Android SDK Command-line tools にチェックを入れて Apply を押す。ライセンスに同意するように言われたら同意する。 上の画面は mac のだけど windows でも同じ。 Android SDK のライセンスに同意していないと言われたとき： > flutter doctor --android-licenses とやって、すべてに Y で答える。 ADK Manager で仮想デバイスを作る これをしなくてもアプリのビルドはできるけど、何もないと動作確認ができない。 Android SDK の AD AVD Manager で仮想デバイスをひとつ作っておく。デフォルトのものから選んでもいい。 仮想デバイスの Android のバージョンを何か選ぶ必要がある。迷ったら、とりあえず最新バージョンを選んでおけば良い。 Windows のデスクトップ開発もするとき $ flutter config --enable-windows-desktop としておく。 Visual Studio Code の設定 flutter のプラグインをインスールする。 F1 を押して flutter と入れると、flutter new project と表示されるので、それを選ぶ。 その次の段階で、Android SDK のインストールフォルダを指定しろと言われるかもしれない。その場合は、<ユーザのフォルダ>/AppData/Android/SDK を指定する。 flutter の SDK の場所も指定するように言われるかもしれない。その場合も flutter を置いた場所を指定する。 それから Application を選ぶと、アプリケーションの雛形が作成される。 右下に青色で NO DEVICE と書かれているところで、Android の仮想デバイスを何か選ぶ。ここで Windows Desktop を選ぶと、Windows 用のバイナリを吐く。 VSCode でターミナルを開いて、 > flutter run とする。選んだ仮想デバイス用のバイナリが生成されて、仮想デバイスかデスクトップのアプリが自動的に起動する(はず)。 必要のに応じて Android Studio 側に flutter のプラグインを入れるなどする。 Mac の場合 手順自体は同じ。 Android Studio をインストールする。 Xcode をインストールする (最新版にしておく) flutter 公式から zip をダウンロードして展開する。適当なフォルダに置く。 SDK/flutter/bin に PATH を遠す。 flutter doctor してみる。 Xcode をゼロからインストールしたとき たぶん下記コマンドの実行が必要 $ sudo xcode-select —switch /Applications/Xcode.app/Contents/Developer $ sudo xcodebuild -license CocoaPods が無いといわれたとき $ sudo gem install cocoapods とする。このとき、ruby のバージョンが 3.x でないと gem がうまく動かずにエラーになることがある。mac にプリインストールされているデフォルトのバージョン (2.x系) では少なくとも失敗する。 対処としては、rbenv をインストールして、ruby のバージョンを 3 以上にしてから gem を実行する。brew と gem の更新も必要になるかもしれない。 brew の update $ brew update $ brew upgrade 場合によっては下記を先にする必要がある。 $ git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow $ git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow rbenv のインストール $ brew install rbenv $ rbenv install -l 2.6.9 2.7.5 3.0.3 $ rbenv install 3.0.3 $ rbenv 3.0.3 .bash_profile に下記を追加して、ターミナルを起動しなおす。 export PATH="$PATH:$HOME/.rbeng/bin" eval "$(rbenv init - bash)" これでバージョンが入れかわるはず。 $ ruby -v 3.0.3 gem の update $ sudo gem install rubygems-update cocoapod のインストール $ sudo gem install cocoapods これで flutter doctor しても怒られないはず。 mac のデスクトップ開発もするとき $ flutter config --enable-macos-desktop としておく。 Android Studio の設定 このあたりは Windows と基本的には同じ。 Visual Studio Code の設定 このあたりも Windows と同じ。 参考 7分で出来た！FlutterでFirebase Authパッケージを使って認証を超簡単実装！ flutterの環境構築しようとしたらハマった話 罠回避メモ Windows の Visual Studio は 2019 でないとダメぽい。 windows で管理者でないユーザの PATH は「Windows システムツール」の「コントロールパネル」から「ユーザアカウント」を選んで、そこにある「環境変数」から変更する。デバイスのほうから変更すると、管理者の PATH しか変更できない。 VSCode のターミナルのデフォルトが Command Prompt になってることがある(デフォルト?)。Power Shell とか Git Bash とかに変更しておく (ほうが幸せ)。 PATH を変更した場合は VSCode 自体を再起動しないとダメぽい。

はじめに 自分は仕事でもプライベートでもMacユーザで、もう10年くらいMacをメインに使っていてWindowsはXP以来触ってなかった。 そんな自分が、なぜWindowsパソコンを購入しようかと思ったのは、生活に変化が欲しかったから。もちろんM1 Macの性能は知っていたがスルー。 キー配列の戸惑い Macは⌘キーがメインの修飾キーなのだが、WindowsはCtrlがメインの修飾キーだ。そこにギャップがある。 普通のWindowsのキーボードではCtrlは左端にあり、Macの⌘キーに相当する場所には、Winキーが配置されているので、はじめはコピペさえストレスがMaxだった。 出来るだけPCはデフォルトで使っていく主義なのだが、流石に仕事のMacを辞めるわけにはいかないので、Windowsを出来るだけMacのキー配列に寄せるようにした。 使ったソフトウェアが下記3つ Change Key 特定のキーを変換してくれるソフトウェア。レジストリを書き換えててくれるみたいで、常駐するアプリもなくて良い。 Win→Ctrl Ctrl→Win CapsLock→Ctrl Google IME IMEの設定でキーを割り当ててることができる。 変換→IME無効化 無変換→IME切り替え AutoHotKey これは10年前も利用していたソフトウェア。 できればデフォルトで使いたいんだけど、 ＜Ctrl-h＞＝backspaceは脳では制御できないレベルに染み込んでいる設定なので、backspaceだけは設定した。 Windowsの感想 Windows11を使っているが、画面もきれいで使い勝手が良い。ただ、このQittaの記事書いている時に感じたのが、ブラウザのエディタ画面はアンチエイリアスかかってなさそうで、Windowsだなって感じがした。 買ったPCがタッチパネル対応で画面をタッチで操作できるのが良い。利用用途によってはトラックパッドではなく、タッチパネルのほうが直感的に操作しやすい場面は多々あるので、Macにはない点でQOLが上がった気がする。iPadは使わなくなってきた。