革命のブログ

フレボワークスの社員がブログを通じて情報発信します。

MacでFlutterの開発環境を構築する(2020.11)

f:id:frevo-works:20201116143606p:plain

はじめに

Flutterに触る機会があったので、開発環境構築手順をまとめました。

ゴール

VSCodeを使って、実機によるデバッグができるようにする。

実行環境

  • macOS 10.14.6 Mojave
  • VSCodeインストール済み

Flutterのセットアップ

以下のサイトにアクセスし、Flutter SDKをダウンロードします。

flutter.dev

f:id:frevo-works:20201116134637p:plain

ダウンロード完了後、解凍し、~/develop に移動します。

~/.bash_profileに以下の記述を追記します。

export PATH=$PATH:/home/<ユーザ名>/develop/flutter/bin

.bash_profileの編集内容を反映します。

source ~/.bash_profile

以下のコマンドを実行し、flutterの開発環境の状況を確認します。

flutter doctor

以下のような結果が表示されます。

[✓] Flutter (Channel stable, 1.22.4, on Mac OS X 10.14.6 18G103 darwin-x64, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ 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:
        sudo gem install cocoapods
[!] Android Studio (not installed)
[!] VS Code (version 1.50.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

左に表示されている記号の意味は以下のとおりです。
[✓] :OK
[✗] :NG
[!] :WARN

今回はFlutterアプリを実機で確認できるところまでなので、 Androidに絞りたいと思います。 iOSでも確認したい場合は、Xcodeのセットアップを行うようにしてください。

Android SDKのセットアップ

以下のサイトからAndroid Studioのインストーラをダウンロードします。

developer.android.com

f:id:frevo-works:20201116135317p:plain

ダウンロード完了後、インストーラを実行します。

VSCodeのセットアップ

VSCode上でプラグインで「flutter」をインストールします。

f:id:frevo-works:20201116140017p:plain

実機のセットアップ

利用する実機で開発者向けオプション、USBデバッグが有効になっているか確認します。

以下のページを参考にしてください。

developer.android.com

実機とPCをUSBで接続します。接続した際に実機側でUSBの利用目的を選択するダイアログが表示されたら、 ファイル転送モードを選択するようにしてください。

以下のコマンドを実行し、実機が認識できているか確認します。

flutter devices

以下のように表示されれば認識できている状態です。

1 connected device:

Pixel 4a (mobile) • 07311JEC209765 • android-arm64 • Android 11 (API 30)

もし、以下のようなメッセージが表示された場合は、以下の3点を確認してください。

No devices detected.

Run "flutter emulators" to list and start any available device emulators.

If you expected your device to be detected, please run "flutter doctor" to diagnose potential issues. You may also try increasing the time to wait for connected devices with the --device-timeout flag. Visit https://flutter.dev/setup/ for
troubleshooting tips.
  • 開発者向けオプションが有効になっているか
  • USBデバッグが有効になっているか
  • USB接続時の利用目的がファイル転送になっているか

動作確認

flutter doctor を実行して、以下のような結果が表示されたら準備完了です。

[✓] Flutter (Channel stable, 1.22.4, on Mac OS X 10.14.6 18G6032 darwin-x64, locale ja-JP)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ 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:
        sudo gem install cocoapods
[!] Android Studio (version 4.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.51.0)
[✓] Connected device (1 available)

VSCode上で、コマンドパレット(command+shift+p)を開き、「Flutter: New Project」を選択します。

プロジェクト名は「helloworld」にします。プロジェクトが作成されると、以下のようなディレクトリ構成が表示されます。

f:id:frevo-works:20201116141104p:plain

VSCodeの右下に、接続中の実機が表示されていることを確認し、F5でデバッグを実行します。

f:id:frevo-works:20201116141504p:plain

※初回ビルド時は多少時間がかかります。

ビルドが完了すると、実機に以下のような画面が表示されます。

f:id:frevo-works:20201116141825p:plain

これで、開発環境の構築は完了です。

では、Flutter開発をエンジョイしてください。

なぜ、テストが書けないのか

はじめに

みなさん、テストは書いていますか?

私は今までいくつかのプロジェクトに参画してきましたが、テストコードがしっかり書かれているところはありませんでした。 実際、私も最近になってテストコードのメリットをだいぶ感じられるようになったので、書けるところから実践している状況です。

では、なぜ書いていないのか、書けないのか。原因は大きく分けて3つあります。

続きを読む

【お知らせ】夏季休暇について

お取引先各位

 

今年度の夏季休暇は以下の通りとなりますので、お知らせ致します。

自:2020年8月8日(土)~至:2020年8月16日(日)※土日・祝日含む

 

弊社は、現在、新型コロナウィルス感染防止の為、原則在宅テレワークを推奨しております。

お電話が繋がり難くなっており、大変ご迷惑をお掛けしておりますが、ご理解の程、

宜しくお願い申し上げます。

尚、緊急連絡に関しては、お問合せページからの、ご連絡をお願い申し上げます。

リモートワークの取り組みと所感

こんにちは。久しぶりの投稿となります。斉藤です。

新型コロナウイルスの感染拡大に伴う緊急事態宣言が発令されて2週間となりました。

大変な世の中となっておりますが、弊社で行っている取組みとリモートワークになった所感を共有します。

続きを読む

10時半に出勤してみたら幸せだった話

f:id:frevo-works:20200218142200j:plain
フリー写真素材ぱくたそ

どうも小野です。

弊社はフレックスタイム制度が正式に導入されているわけではありませんが、就業規則に記載されている就業開始時刻の前後1時間の範囲内であれば、スケジュールに予定として登録することで可能になっています。通常は9時半開始なので、8時半〜10時半の間でシフトが可能です。もちろん、早出、遅出の分、終了時刻も変わります。ここはフレックスと同じです。

私は毎週水曜日は子供の習い事のお迎えがあるため、30分早出(9時出勤)してたのですが、今まで遅出をしたことはなかったので、今回、1時間遅出をしたらどうなったか検証しました。

メリット1 朝の時間が有効活用できる

普段は子供が登校するまで、子供の相手をするので自分の時間がなかなか取れません。1時間遅出にすることで、朝の時間を有効活用することが出来ます。

ちなみにこの日行ったことは、以下の通りです。

  • 30分ほどランニング
  • シャワーを浴びる
  • ニュース番組を20分ほど視聴

このように、有意義な朝を過ごすことができ、「1時間という時間」以上の価値があると感じました。

メリット2 通勤ラッシュを避けられる

通勤ラッシュ時間帯は大体7:30〜9:30あたりなので、1時間遅出にすることで、通勤ラッシュの時間帯が過ぎたあとに通勤することができます。

座席には確実に座れるわけではありませんが、空いているのでとても快適です。 ストレスの原因の1つとして、満員電車があるので、これが解決できるのはだいぶ大きいです。

メリット3 帰宅ラッシュを避けられる

朝ほどではありませんが、帰宅ラッシュも避けられます。これは遅出をしたことによって、業務時間も後ろに延びるためです。 仕事終わった後にまた満員電車もきついですよね。このストレスからも開放されます。

さいごに

そもそも出社しないリモートワークが一番望ましいのですが、社員の状況が見えないなどの不安もあり導入しづらい部分もあるので、まずはフレックス導入をして日々のストレスから開放されましょう。 弊社では、リモートワークも作業報告をするという条件付きで行っています。

Developers Summit 2020に参加してきました

f:id:frevo-works:20200214164901j:plain

どうも、小野です。

毎年恒例である、翔泳社主催の「Developers Summit 2020」(通称デブサミ)に行ってきました。

event.shoeisha.jp

今回のテーマは、

「ともにつくる」

です。

場所は昨年と同様、目黒にある雅叙園でした。今回のようなジャンルを問わないイベントは各業界の人が集まってくるので、会場はとても混み合っていました。 来場者数に対しての、会場のキャパが足りてないように感じました。

今回、私が参加したセッションは以下の通りです。

  • 常識を破壊するティール組織とエンジニアリング組織論
  • 質とスピード
  • 「ともにつくる」を実践するドメイン駆動設計
続きを読む