flutter始め方メモ

MacbookProを新しくしたのでFlutterを始めから入れるためのメモを書いておきます。

Flutter自体のダウンロード

Flutter SDK自身はこちらからで任意のプラットフォームのZipをダウンロード

docs.flutter.dev

開発環境として以下のようなディレクトリを考える。下記の例はMac。

＋ ~/Documents/
＋
＋　　　＋ーー /dev
＋　　　＋　　　※ここで開発
＋
＋ーー /libs
　　　　※ここにFlutter SDKをインストール

※libディレクトリをホームにしてるのはiCloudから外すため。

インストールページには以下のように書いているのでディレクトリ等を読み替えて実行

cd ~/development
unzip ~/Downloads/flutter_macos_2.8.1-stable.zip

以下が読み替えで実行したもの、libディレクトリに/flutter というディレクトリが作成されています。

cd ~/libs
unzip ~/Downloads/flutter_macos_2.8.1-stable.zip

FlutterSDKへパスを通す

この/flutterディレクトリへパスを通しますが、インストールページでは以下のように紹介しています。

export PATH="$PATH:`pwd`/flutter/bin"

ただし、インストールページでも書いてますが、これだとセットしたターミナル限定のパスになってしまうため、.bash_profileなどに追加しておくと良いです。ページによると echo $SHELLで利用するシェルがわかるのでそれ用のファイルに書いておきます。購入したMacは/bin/zshと表示されるので.zshrcファイルに記述します。

.zshrc

export PATH="$PATH:`pwd`/libs/flutter/bin"

保存した後は source ~/.zshrc で反映されます。

flutter doctor の実行

flutter doctorを実行していきますがこれが出たら素直にインストール

しかしながら今回購入したMacはM1チップのCPUでFlutterはM1チップを対応中（2021/12現在）のためこんなメッセージが出ることがあります。

% flutter doctor
 Bad CPU type in executable

その場合は以下のコマンドでM1が解釈できるバイナリにする必要があります。なんかアグリーしてくれと言われるので"A"でエンターすればいいです。

% softwareupdate --install-rosetta
I have read and agree to the terms of the software license agreement. A list of Apple SLAs may be found here: http://www.apple.com/legal/sla/
Type A and press return to agree: A
2021-12-21 18:42:46.297 softwareupdate[6137:213942] Package Authoring Error: 002-23768: Package reference com.apple.pkg.RosettaUpdateAuto is missing installKBytes attribute
Install of Rosetta 2 finished successfully
% 

気を取り直してflutter doctor してみます。

% flutter doctor
Running "flutter pub get" in flutter_tools...                       9.6s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on macOS 12.0.1 21A559 darwin-arm, 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, please use
      `flutter config --android-sdk` to update to that location.

[✗] 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 see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] Connected device (1 available)

なんか色々でましたが[X]がついている項目を[✓]になるように直していけばいいです。バッテンついた下あたりを読めば大体やることは書いてあります。最近のものは親切ですね。

Android toolchain

Android SDKが見つからないので以下からAndroid Studio をインストールしてねということらしい

https://developer.android.com/studio/index.html

ダウンロード後、インストールして初回に起動した際に色々設定があり、Android SDK Componentがインストールされます。
インストール後、再度flutter doctorを実行してみます。あれ？まだあるみたいですね。cmdline-tools がないのと、Android license を許諾してないとのこと

[!] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    ✗ 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 license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

cmdline-tools component is missing

これは単純にAndroid StudioでSDK Managerを表示し「Android SDK Command-line Tools(latest)」にチェックを入れて「Apply」するだけです。

Android license status unknown

以下のコマンドでいくつかライセンスを受け入れるか確認してくるのであとは"y"を入力する簡単なお仕事です。

flutter doctor --android-licenses

さて、もう一度 flutter doctorをしてみるとAndroidのエラーや警告は消えてるはずです。

Xcode - develop for iOS and macOS

iOS側のエラー/警告はXcodeの未インストールと、CocoaPodsの未インストールなのでチャチャっとインストールします。

インストール後、flutter doctorを実行するとXcodeのライセンスを受け入れる必要があるよ。sudo xcodebuild -licenseを実行してねと出るのでサクッと実行しておきます。

You have not agreed to the Xcode license agreements, please run 'sudo xcodebuild -license' from within a Terminal window to review and agree to the Xcode license agreements.

CocoaPodのインストールは

sudo gem install cocoapods

% flutter doctor            
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on macOS 12.0.1 21A559 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] Connected device (1 available)

flutter にパス通したらflutter doctorコマンド実行してXがついたところを読んで対応、またflutter doctorを実行を繰り返せばいいよん

Android Studioの設定

Andorid StudioにFlutterのプラグインを入れます

メニューから「Preference」を押し、ダイアログが表示されるので「Plugin」を表示。
FlutterとDartで検索してプラグインを入れます。

あとは今までのFlutterアプリのプロジェクトを開くなり新規に作るなりFlutter生活のスタートです。

flutter image_gallery_saver のメモ

Flutterでギャラリーに画像を保存する際のライブラリ

pub.dev

本家のExampleに書いてる通りなのだけれどもメモ

ライブラリのインストールはインストールページに書いてあるとおりだけど・・・

pub.dev

Androidの場合Manifest.xmlのApplicationタグ内に以下を書く必要があったり、

android:requestLegacyExternalStorage="true"

場合によりuses-permissionタグを書く必要があったりと色々なサイトで解説とかされています。

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

ただ、これらを追加しただけではストレージへのパーミッションをユーザーから得ないと以下のようなエラーが出て画像が保存できません。

android java.io.FileNotFoundException: open failed: EACCES (Permission denied)

まぁ考えてみれば当たり前だったのですが・・・上記のタグはあくまでもこのアプリで画像にアクセスするって宣言で許可はユーザーから得ないと行けないわけで。

Exampleページに書いてあるとおり画面を表示する際でもパーミッションを許可するようリクエストを出す必要があります。

Map<Permission, PermissionStatus> statuses = await [
      Permission.storage,
    ].request();

雪の華を吹いてみました

掲題の通りです。

www.youtube.com

いい曲で色々な人がフルートで吹いているので自分もと思い吹いてみました。

ローソンのネットプリントシールで遊ぶ

こんにちは、なにか作るものがないかといつもウズウズしてます。いつもウズウズしてます。あっちを見てはこれは作れるか、、、これは何かできるか、、、そんなことを考えながら生活してます。

以前からローソンのネットプリントでシールが作れる事を知っており、なにかつくってみたいなぁと思ったのでやってみました。

公式のこちらを参考に絵を作ってみます。

www.lawson.co.jp

サイズ	縦横	料金
L版	89mm * 127mm	200円/ 枚
2L版	127mm * 178mm	300円/ 枚
スクエアサイズ	127mm * 127mm	250円/ 枚

はじめに作ってみたのがこちら

ベタ塗ずん子さんもどうぞ、あまり色が見えないので肌色がこれでいいか分からんのですが

ネットワークプリントにファイルを登録しました。
ユーザー番号: 8Q5BDM5ZBA
有効期限: 2021-12-19 16時頃まで
#networkprint #ネットワークプリント pic.twitter.com/gUWrtBCPYK

— あるかなむJP・おっさん (@arcanum_jp) 2021年12月11日

でもこれ、印刷してみるとこんな感じでうまく行かず・・・もしかして↑のツイートで印刷してしまった方がいるんではないかしら？申し訳ない。

どうやらサイズを2L版で作成したにも関わらず印刷はL版でやったというホント馬鹿みたいなミスだったり公式の言うサイズ一杯データを作ったら行けないらしい。

そして試行錯誤の上こんなのができました。一つ一つの幅は3mmでどれぐらい見えなくなるか。

これを見ると上下左とも2mm位削られるみたいですね、右側に至っては青い帯が消えてるので4mm以上削られている。

最終的にできたのがこちら。

マグネットシートで遊べるようにする

これを一手間かけていきます。

１００円ショップ（セリア）でこんなものを買ってきて・・・

商品	金額
マグネットシート	110円（税込み）
キラキラデコシール	110円（税込み）
はがきセルフラミネート	110円（税込み）

これは急遽作ったずん子さん。これをいらない部分を切って、、、

キラキラデコシールに貼って、、、

キラキラデコシールをマグネットシートに貼ってからセルフラミネートします。

あとはいらない部分をカッターかハサミで切ったらおしまい。

今日は金曜日だったのできりたんキラキラ金曜日。

早速ですが冷蔵庫に貼ってみます。とてもよい。

今回は切る部分のガイドを作らずにフリーハンドで切ったのでちょっと手作り感満載ですが、、とてもおもしろかったです。

ちゃんちゃん

天空の城ラピュタから「君をのせて」をフルートで吹いてみました

掲題の通りです。さっぱり登録者数が増えず僕はどこかの孤島に住む孤独なおじさんになりそうです。ウィルソーーーーーーーーン！！

youtu.be

自分も登録してるこの方のプレイを聴いてベラボウにうめぇな・・・曲も難しくなさそうだし、、、やってみるか・・・となりました。

www.youtube.com

この頃は練習場所も確保できずしょうがなくてテレワークなのでお昼休みを使って家で録音しました。

家で吹いて近所迷惑になるかなと思い、家の押し入れの中（正確にはクローゼットみたいな押し入れで立って吹けるので便利）で録音しました。こんな感じ。

フルートって意外と物凄い音が通る楽器なので練習場所には苦労するのです。金管のようにミュートってできないので。

子供に聞くと別に外には漏れてないよ？っては聞くのですが色々と気持ちの面で怖いので押し入れで吹いたりしてます。

しかしこの曲、吹くと気持ちが良い。

しかしオッサン楽器吹いても人気出ないので受肉したらいいのですかね？Vになって公開したい。（切実）

ジョギング中の考え事

そう、、やつは見えた、、１００mぐらい先だろうか、あの角を曲がっていったのが見えたんだ。確かにやつはジョガーに違いない、ジョガー特有のTシャツに長袖を着てジョガー特有の短パンの下にレギンスを着るファッションだ。帽子もかぶってやがる。決定だ！

走るリズムは殆ど自分と同じ、、タッタッタ・・・わずかに自分の方が速い感じもする。１Kmほどやつについていった時点で少し近づけた。とその時である。向こうから車が来る。自分は安全のために走るのはゆっくりにして車を見送る。

あぁ、また１００mほどまで遠くなった。

にしてもなかなか追いつけないな・・実はもしかして彼はゲームのゴーストみたいなもんであろうか・・・以前は自分も速さを求めていたのでその頃の幻影が見えるのである。それはそれで問題だ・・・医者に行かねばならんのだが。

そこで４Kmを走った通知がスマホから来る。１Kmあたり６分を切っているそうだ。

こりゃ速い、いつもより速い。自分はだいたい１Kmあたり７分台を目標にしている。

セーブしながら走ると言うのをやっている。その自分が６分を切る事態・・・

以外にやつは速いのだ。アレにつられて走っていたようだ。いかんいかん・・・

でもね、いつも７分台と言ってもいつものコースで信号機２回ほど止まる事があってそれで平均７分台になっているのでもしかすると７分を切るぐらいが自分の実力かもしれない。にしても速いのだ・・・６分を切るのは・・・

今年はオリンピックの年で１位の選手を追う２位の選手なんかをジュース飲みながら鼻ホジホジして見てたんだ・・・あと少しなのにな・・・あと１００mか・・・

彼の気持ちが今自分はよくわかった。この１００mが辛いのである。長い戦いの中でペースを守りつつライバルに近づいていく。じわりじわり、それはヒョウが獲物を追いかける前にじわりじわりと近づくあれに近い。ダッシュは一瞬だ、一瞬で追いついて終わる。それを確実にするためにペースを守るのだ。いつもよりちょっと速いペースを。

走ってる最中は暇なのでこんな事を思いながら今日は走ってた。

VAIO Zの電源消失問題（暫定解決）

長年使ってきたVAIO Zなんだけどここ１年ほど充電がうまくできない。あぁ電源コードが断線したのかな・・・と思っていたのだけれどもうどうも違う。

どうやら電源コードと本体側が接触する部分が、本体側で劣化したために一部接触不良を起こしていたらしい。

いや、もう古いVAIO Zでさ、さっき確認したら2016年9月15日配達とある。減価償却も済んでもう引退だろｗｗｗ

このVAIO Zについては購入時よりものすごく苦労させられた機体で、購入して設定してさて使うかと文章を書いてみるとIMEがものすごく反応が悪い。簡単な漢字変換にも10～20秒かかるという有様。IME側の学習機能がONになっているからか？と思いその手のものは一切無くす。

あとは突然のブルースクリーン。一週間に２～３回はブルースクリーン。これはサポートに連絡したらVAIO側の更新プログラムで直ったけど。

最大の難点はこのフニャフニャキーボード。誤打鍵が多すぎてねホントモバイルでは使い物にならないVAIO Zだった。普段は別のキーボードを付けて使用しています。

んで、今回の話題の電源。これは他のPCとは見たこともない電源の形状で、２年で逝きました。充電がうまくできなくなった。電源を付けてガムテでビッチリ固定してたら先日まではまぁ充電できていたんだけどそれも限界。

ほんとね、開発者問い詰めたいと思いましたよ？VAIOは弁当箱VAIOより前から使ってたけどホント新機種が出るたびにだんだん使いづらくなっていった。なんでこんな商品作ったの？って。この機種でもうVAIOはもうオサラバかなってなりました。さよならVAIO

しかし本当の死が訪れるまで（PCのSSDが死ぬまで）は使い続けますのでという事で暫定的な修理をば・・・（やっと本題になる。ほんと憎しみしか出ない機種だった）

電源の接触不良

見た感じ、下記のような風になってると思われる。本体側にあるプラス側の凸が経年劣化でうまく出てこなくなったと思われる。これは予想なんだけどコード側がとても焦げている感じがしたので何かしらのショート？で電源側のプラス突起が動かなくなったのではないかなと。

もう突起が動かないのであれば下駄履かせて接触するしかないのかなと、、、こんな感じを思いついた。電源コード側にハンダを乗せて無理やり接触させるって寸法。

手術の時間

で実際やってみた。いやこれ失敗したらもう起動しないわけで・・・しかし心を鬼にしてやった。。。下記のようにハンダを一部乗せて溶かして終わり。

実際にはハンダを盛った後、ヤスリで削ったりというのはありましたがこんな感じでうまく通電するようにはなったので電源をもうガッチリつけっぱなしにしました。

奥さん、、オペは成功です。とりあえず延命は出来た。