色々メモ

技術系のメモとかを書いておきます

できるさ！チーフー！

この記事は SmartHR Advent Calendar 2024 シリーズ2 の23日目の記事です。

昨日の記事は、シリーズ1は @naoyuki70snow さんの 初めてモブプログラミング/スウォーミングを体験した感想 #リモートワーク - Qiita 、　シリーズ2は ushiboy さんの アプリケーションコードの構造によってテストコードをどう書くか でした。

モブプロ・スウォーミングの貴重な体験談や、フロントエンドのテストコードの実践的な書き方など、どちらも参考になりました！

Warning

この記事には先日公開されたモアナと伝説の海2の話があります。話の核心には触れていませんが、1ミリもネタバレしてほしくない方は、映画を見た後に読んでください。

はじめに

SmartHRでは開発チームに、プレイヤーとして開発に貢献しつつ、チームメンバーの評価や成長支援、チームが最大の成果を出せるよう支援していくチーフという役割があります。

この記事では、2023年10月から所属チームのチーフになり、この1年ちょっとの間にやってしまったたくさんの失敗と、改善に向けて試行錯誤してきたこと、少しだけ上手く行ったことを紹介したいと思います。これまで私はPjM的なことはやったことがあったものの、ピープルマネジメントの経験はなく、初めての挑戦でした。まだまだ道半ばで、「これをやったらうまくできました！~Happy End~」では全然ありません。ようやくのぼり始めたばかりのこの果てしなく遠いマネジメント坂をよ…という感じですが、同じような悩みを抱えた誰かの助けになれれば幸いです。

ちなみにこの記事では心の持ちよう的な話になるので、マネジメント手法的なことは出てきません。来年マネジメント力が53万になったらもっといい記事が書けるはずです…。

たくさんの失敗

そういえば、皆さん先日公開されたモアナと伝説の海2を見ましたか？ 私は昨日子どもたちと見に行きました。面白かったです。

前作はモアナ1人で旅立つ物語でしたが、今作では仲間がいます。最初はバラバラで皆やりたい放題だった仲間を何とかまとめて旅を続けるものの、大きな困難に何度も襲われます。そこでモアナが「上手く行ったと思ったら状況が変わって駄目になる、ここに来るまで私は何も成し遂げられなかった」的な事(たぶん…最近記憶力があやしいので、ちょっと違ってたらごめんなさい)を言って落ち込むシーンがあるのですが、「「「「「「わかる」」」」」」と思い泣きました。

これまでエンジニアとして携わっていた開発も山あり谷ありでしたが、マネジメントをはじめたこの1年、爆速回転するコンパスを持ちながら大荒れの海を航海している気持ちでした。

一瞬晴れ間が見えて、飛魚のアーチをくぐって宝島が見えたと思ったら、次の瞬間には高波に襲われ真っ暗な海の中へ、の繰り返しでした。

ちなみにマウイが励ましてくれる時の曲がすごくよかったのでどうぞ。(あれ、チーフー…？チーフ…？)

www.youtube.com

たぶんこの大荒れの海は永遠に続いていくことなのだろうと思いますが、私はこの1年、高波を超えるために必要な舵の切り方を色々間違ってしまったな、と反省しています。まず、そのうちのいくつかを紹介しようと思います。

信頼関係の構築

チーフになった当初、まだ入社1年未満で、右と左がおぼろげにわかってきた…という時期だったのもあり、周りの意見の方が正しく、私の意見より重視した方がよい、という思考に陥ってしまっていました。

そのため、自分の主張はあまりはっきり表明せず、他のメンバーの意見を受け入れるだけになってしまうことがよくありました。

メンバーから見ると、主体性がなく、周りの意見に流されがちで頼りなく見えていただろうなと思います。

その結果、メンバーからの信頼を得るのが難しい状況になってしまいました。

開発とマネジメントのバランス

初めてのマネジメントの業務に手一杯になってしまい、開発業務にほとんど入れず、一方で何かチームにFBしなきゃいけない…という焦りを抱えていました。

焦りから、あれこれ横からチームに提案してみたりしたのですが、普段開発に入っていないため納得感を持ってもらうことに時間がかかったり、トップダウンな雰囲気でメンバーを戸惑わせてしまうこともありました。

また、元々コードを書いていたい人間なので、コードを書けない期間はちょっと辛さもありました。

目標管理むずかしい問題

SmartHRでは期初に目標を設定して、半年後の期末にその目標の達成度から評価する制度になっています。良い目標ができれば、チームとしてもより大きな成果を出せる重要な要素の1つになると思っています。

ちなみにここで良い目標と言っているのは

  • 組織(所属チームだけでなく、その上位組織も含めて)の目指す姿にアラインできている
  • 個人の成長にもつながっている

という2つの要素を満たせている目標のことです。

チーフはメンバーが良い目標設定とその達成ができるようサポートする必要があるのですが、私は全然上手くできませんでした。

基本的にメンバー本人に目標を設定してもらうので、トップダウンで設定される訳では無いのですが、本人の成長につながる目標だったり、組織として目指すところにアラインできるようにする観点からのサポートは、普段メンバーを観察しているチーフの腕の見せ所なのだろうと思っています。

また、半年間、目標達成できるようなサポートを通して、メンバーの成長支援をしていく必要もあるのですが、日々の業務に追われてしまい、殆ど何もできず、メンバーの自律駆動に任せっきりになるということもありました。

取り組んだこと

上記の失敗は、だいたいチーフになって半年くらいまでの出来事でした。船は大破してメンバーにも迷惑をかけ、自分のメンタルも大根おろしになるしという状況になったので、何とかできないかと試行錯誤しました。

社内のコーチングを受講してみた

大荒の海を進まなくてはならないのに、私の手元のコンパスは壊れていて、爆速回転をするばかりでした。このコンパスを直すために、丁度社内でコーチングのクライアント募集していたので、藁にもすがる思いで応募しました。

このコーチングの体験が本当に良かったです。全10回のセッションを通して、私の壊れているコンパス(どんなチーフになりたい？どんなチームを目指したい？)が徐々に直っていきました。

コーチングでは、何かを教わったりするわけではなく、自分自身の中にある答えを引き出してくれる、というものになります。

詳しくは↓のリンクを参照してみてください。 coach.co.jp

コーチングで気付いたことの実践

コーチングで、自分の進みたい方向や改善に向けた取り組みの方向が見えてきたので、試行錯誤しつつ実践もしていきました。

ちゃんと自分の意見を言う

何を当たり前の事を…という感じですが、当時は自分の意見は価値がないと思ってしまい、周りの意見が正しいので尊重すべき、となってしまっていました。 でもそれは尊重しているわけではなく、その場をただ収めようとしているだけに過ぎなかったのです。

そんな事を繰り返していると、自分の意見とコンフリクトした時に、「自分はこうじゃないと思うが、でもそれは間違っているのかも…。でも本当に？」と混乱に陥り、1人で勝手に自分の首を絞める状況を生み出してしまっていました。

また、チーフという役割に過剰な責任を感じてしまっていた部分もありました。間違った発言をしてはいけないというプレッシャーを勝手に感じていました。SmartHRではチーフはあくまで役割であり、メンバーと上下関係にあるものでもありません。対等なメンバー同士として、違う意見はすり合わせていけばよかったし、間違った事を言っても教えて貰えばよかっただけでした。

この辺りの自己開示はメンバーの時はできているつもりでしたが、チーフになってからは上手くできていなかったなと反省しています。

あまり過度に心配しない

急な状況の変化に対しても過剰にネガティブに捉えてしまい、不安を抱えがちでした。

コーチングで不安を感じた時は、不安の棚卸しをすると良いよと聞いたので、不安が頭がどうにかなりそうになったら書き出して棚卸ししてみるようにしています。

すると、意外と不安に感じていたことは数個しかなく、それぞれに対しても対応策を考えられて、不安が減る、というサイクルができています。

また、チーフになって以降、仕事ができない自分をずっと責め続けていましたが、落ち着いて考えると、物事を常に100%完璧にこなせることはなく、上手く行くこともあれば、上手く行かないこともあるわけです。

上手く行っているならOKだし、上手く行かない時は、不安の棚卸しで考えた対応策をお守りに、過剰に不安にならず、「まぁ〜なんとかなるだろう〜」と楽観的に考えるように気をつけています。(気をつけている時点でちょっとアレですが、まぁ…)

周囲を気にしすぎない

コーチングを受けていて、周りに視点が行きがちになっていて、気にしすぎている、という気付きがありました。例えば、「どんなチームにしたいか？」というような質問を受けたときも「メンバーがxxxなチームになっているとよさそう」というように、「私が」どうしたいという考えが最初に出てきませんでした。

マネジメントをする立場としては、メンバー視点で考えるのは大事なことですが、私の場合はそれが過剰で、「私がどうしたいか」がブレブレになってしまっていました。

何かがあった時、まずは自分としてどうしたいのか、それを最初に出してから、考え始めるくせをつけるようにしています。

少し改善したこと

コーチングを受けて行動を変えていったり、これまでの反省を踏まえて改善の試行錯誤を続けています。

100%何もかも上手く行っている！とは言えないのですが、少しずつ良い方向には船を進められつつあるかも、と思っています。

メンバーからの信頼

メンバーの入れ替わりもあったのですが、ゼロからプラスの関係を構築するのはできているのではと思っています。

自己開示を徹底するようにしたこと、相手の意見を受け止めつつも、自分の意見ははっきり表明することを心がけています。ただ、私自身、会話の瞬発力が無いので、その場では上手く伝えられない事も多いのですが、気付いた段階ですぐに訂正したり、再度伝えるようにしています。

私が相手を理解しようとするだけではなく、相手にも私を理解してもらえるような関係づくりを目指しています。

開発とマネジメントのバランス

マネジメントの仕事を上手くやろうとしすぎて、開発にも入れず、結局マネジメントも上手く行かない、という悪循環に陥っていました。コーチングの中で、私がどんなチーフを目指したいのか？を考えた時に、開発にもしっかりコミットしながらマネジメントできる人を目指したい！と思ったので、やることを取捨選択しつつ、開発も入りながらマネジメントもやっています。

半年前よりがっつりコードを書ける時間も増えて、開発の事に関しても解像度高く改善の動きもできているので、今のところハッピーハッピーです。ただ、どうしても勤務時間でカバーしようとしてしまうので、もっと業務の移譲などをしていかないといけないなと思っており、今後の課題です。

目標管理むずかしい問題

これまでの流れでお分かりかと思いますが、目標の話は何もありませんでしたね！ここはまだ何も解決できていません…。

やっとチーフとしてやる事がわかってきた、という段階なので、ここから、もっとメンバーの成長をどんどん支援していき、チームとして最大の成果が出せるようにやっていかなくては、と思っています。

目標管理、詳しい方がいたらアドバイスを360日24時間募集しています。

まとめ

この1年を振り返りながらまとめてみましたが、ヨチヨチマネジメント赤ちゃんがやっと立った〜〜〜くらいなので、しんどい山はここからまたたくさんあるのだろうなと思っています。

ただ、私のそばにラップで励ましてくれるマウイはいませんが、私が道に迷い迷走を続ける中暖かく見守り、手厚いフォローをしてくれる上長の方々、こんな私でも信頼してくれるメンバー、コーチングで色々な気づきくれたコーチ、フルリモートで仕事をしている私を支えてくれる家族がいるのでなんとかやっていけそうです。大根おろしになったメンタルも、今は大根もちになりました。

そういえばマウイってドゥエイン・ジョンソンが声優なんですね。 息子が最近ドゥエイン・ジョンソンの顔真似をしてくれるのですが、めちゃくちゃ似ていて可愛いです。

また悩んだら息子にドゥエイン・ジョンソンの顔真似をしてもらったり、きんに君のチーフーダンスを踊って元気だして頑張ります。

www.youtube.com

RubyKaigiに13年ぶりに参加しました

この度RubyKaigi2024に参加してきました。

最後の現地参加したのが2011の練馬開催以来だったので、13年ぶりの参加でした。 2011年以降は子育て&遠方な事もあり、中々参加できる余裕がなく、参加されている方を見ては楽しそうだな〜と思ったりしていました。

今年は地元での開催で、子どもも一人でお留守番できる年齢にもなったという事もあり、思う存分参加することができてとても良かったです！ここ数年はオンライン視聴していたので、なんとなく雰囲気は分かっていたつもりでしたが、現地で実際に浴びる熱量は凄まじいものがありました。オンラインでは摂取できない栄養がありました。 初参加の時の「なにもわからないけど楽しい〜〜〜！」の気持ちを久しぶりに取り戻せた気がします。

印象に残ったセッション

真面目に書いたほうはこちら: tech.smarthr.jp

Writing Weird Code

スライド: rubykaigi2024_keynote_tompng.pdf - Google ドライブ
ソースコード: GitHub - tompng/selftrick2024

最高のキーノートでした。13年前に参加したRubyKaigiで買った「Rubyで作る奇妙なプログラミング言語」を読んで「Rubyってすごいな!!」と思ってドキドキした記憶があるのですが、今回も「Rubyってやっばりすごいな!!」と思ってドキドキしました。

前半の奇妙なコードたちもさっぱりわからなかったのですが、後半のSelfTRICK2024はもう怒涛の展開でした。BitmapなのにRubyのスクリプトとは!?!?下の方にDecoderがあってちょっと緑色に調整している…など何をやっているのかさっぱりわからない…となりました。でもRubyの奥深さや計り知れないパワーをめちゃくちゃ感じる発表でした。これはもうWeird Code入門するしかない…！

ちなみになんとなく13年前の「Rubyで作る奇妙なプログラミング言語」の著者のyharaさんの講演を見返したら、今でも通じるRuby上達のための大事な話をしていてよかったです。
Road to the Ruby Master | RubyKaigi 2011(July 16 - 18)

Long journey of Ruby standard library

スライド: Long journey of Ruby standard library RubyKaigi 2024 - Speaker Deck

Rubyの標準ライブラリのお話でした。
Ruby1.8の時が一番多くて今(3.3)の倍近くの130個あったというのにびっくりしました。また、その経緯の「昔はダイアルアップで接続していたので、限られた時間で何度もダウンロードするより、Rubyにまとめて入っていたほうがよい」という方針も興味深かったです。
普段良く使うライブラリやGemにまつわる話ということで、結構内容がすんなりイメージできて身近に感じられる発表でした。

今後はdefault gemsをbundled gemsにしていく方針のようでした。(サプライチェーンアタックやgem/Rubyのメンテナンスなどの理由とのこと。) bundled gemsに移行するgemは警告がでるとのことなので、気をつけて警告をチェックしておいたほうがよさそうです。

Namespace, What and Why

スライド: Namespace, What and Why - Speaker Deck

絶賛開発中らしいNamespaceのお話でした。Namespaceがあると、ライブラリごとのバージョンの依存関係で衝突が起こってしまうことが解決したり、2つのアプリを同時に動かす(モジュラーモノリス的な話？)ことが可能になるようです。

BGデプロイも簡単にできるようになるかも？という話も小耳に挟んだので、まさに夢の機能という感じでした。楽しみです。

An adventure of Happy Eyeballs

スライド: An adventure of Happy Eyeballs - Speaker Deck

しおいさんの説明がとてもわかりやすくて、現状のSocketライブラリの課題から、それを解決するためのHappy Eyballsの仕組みまで理解できた気がします。 現状だとIPv4とIPv6の接続が可能な状況の時に、IPv6を試す→ダメだったらIPv4で接続しようとするけども、IPv6の接続の応答がない時にタイムアウトを待つ必要があり、時間がかかってしまう課題があるとのこと。そこで、並列に接続を試みて、先に接続成功した結果を返せるようにする、という仕組みのようでした。 その仕組をRubyのコードにするところまでわかりやすく説明してくださっていて、なるほどな〜となりました。実装後実行時間が増えてしまった部分もあるようですが、最悪のケースを解消するために、一定パフォーマンスが落ちるのはしかたがないとの判断のようです。 今後Ruby3.4で有効になるとのことハッピーエンド！と思いきや、TCPSocketの方はこれから対応予定とのことで、俺達の戦いはこれからエンドでした。

Leveraging Falcon and Rails for Real-Time Interactivity

Falconというサーバー&live gemとRailsでゲームを作るお話でした。
リアルタイムな通信の歴史の紹介も興味深かったです。
asyncまわりの説明もわかりやすくて、英語力5でリスニング全然ダメダメなのですが、それでもなんとなく理解できました(多分…！)

Does Ruby Parser dream of highly expressive grammer?

スライド: Does Ruby Parser dream of highly expressive grammar? - Speaker Deck

LramaというLALRパーサージェネレータの開発のお話でした。
とりあえずparse.yはとんでもない魔境らしいという印象しかなかったのですが、かなり見通しがよくなっているらしい…ということがわかりました。 パーサーまわり、まったく分かっていないのですが、parameterizing ruleよさそう(というか、これまでそれができなかったのは確かにつらそう…)という感じでした。 文法拡張でもっと整備しやすいparse.yに生まれ変わる日も近そうなのかも？と思いました。

Squeezing Unicode Names into Ruby Regular Expressions

Rubyの正規表現でunicode文字プロパティを指定できるようにするかつ、長いnameの場合のメモリ節約のお話でした。
英語力がなくて理解があやしいのですが、近いnameをまとめることでメモリ節約するようにしている感じでした。Xの感想で、決まり字だとおっしゃっている方がいたので、なるほど〜となりました。

Lightning Talks: Enjoy Creative Coding with Ruby

スライド: Enjoy Creative Coding with Ruby (RubyKaigi2024) - Speaker Deck

「自分が楽しむためのプログラミング」というのが最高〜〜〜！と思いました。 もちろん業務で、良い設計とは…可読性保守性のあるコードを…と考えながら書くのも楽しいではあるのですが、たまにも思うままに書いてみて、偶然なんかいいのが生まれた〜〜！！みたいなことも楽しそうです。 トークの最後に実際にクリエイティブコーディングで生成された画像にアクセスできたのですが、XのTLがいろいろな海の画像で埋め尽くされていたのも凄く良かったです。

私の手元で開いた画像

(以下力尽きたので一旦箇条書きの下書きのみで…近日中に清書します…)

Ruby Committers and the World

  • frozon string literalが要らなくなるかも
  • async/awaitの話。Rubyでいる？なんか動かないからasyncつけるのあるある
  • RBSを同じファイルに書くかどうかを会場でアンケートを取っていた

Matz Keynote

  • performance重要(大事なことなので4回…)
  • Ruby遅い言語じゃない(大事)
  • Rubyのコミュニティのちからすごいな
  • Ruby2の構想があったんだな〜
  • Namespace楽しみすぎる

セッション以外の感想

関連イベント

Okinawa.rbのMeetUP

day0にOkinawa.rbのMeetUPに参加しました。

okinawarb.doorkeeper.jp

GraphQL(grpahql-ruby)がテーマの会でした。GraphQLは少し業務で触った程度の知識しかなかったのですが、実際の活用例やセキュリティの設定例(アンチパターン例)、resolverをconcurrent-rubyで並行に動かす話などが聞けてとても面白かったです！ neko+@B4Aさんの「気づいたらN+1が発生していて、は？になる」という気持ち、めっちゃわかる…となりました。ログがカオスとかも、あるあるなんだな〜と思って聞いていました。

こちらはさくらインターネットさんからいただいためちゃかわちんすこうです。

さくらインターネットさんからいただいたちんすこう

会社関係

初めて会社のブースに参加しました！ 緊張しましたが、会社の業務に興味があり、いつか提携してみたいという方とお話できたり、 昔一緒のプロジェクトで働いていた方が会いに来てくださったりと、 色々な方と交流できて良かったです！

tech.smarthr.jp

day2の夜は会社のDrinkUpのイベントにスタッフとして参加しました。 ちょっと前半席に混ざり損ねて、参加者の方と交流できずだったのですが、 後半はちょこっとお話できてよかったです。

その他

開催前日の大雨が嘘のように晴れてよい天気でした。

本当はもっと会場付近の写真とか、晴れている沖縄っぽい写真を撮っておけばよかったのですが、地元なので何も珍しくなく写真を撮る考えに至らず……。とりあえず入口だけは撮っていました。

なはーと入口の写真

来年に向けて

  • 松山！行きたい！
  • 英語頑張りたい…(毎年言っている気がする)

What’s New in Flutter 2を読んだメモ

Flutter2のキャッチアップするために What’s New in Flutter 2 を読んだので、そのメモです〜

medium.com

Web

  • webのサポートが安定版になったよ
    • HTMLレンダラーに加えて、CanvasKitベースのレンダラーも追加したよ
    • これでコードの再利用性も高まる

Sound Null Safety

  • Dart 2.12に追加された機能で、Flutter2でも完全対応された
  • nullable型とnon-nullable型を区別することで型システムを強化してる
  • null safeのパッケージ開発者はマイグレーションガイドを見て移行してね

Dartのドキュメントでもあった Dart is a sound language. の sound の意味がよくわからなかったけど、堅牢とか健全とかいうニュアンスっぽい

refs: types - What is a sound programming language? - Stack Overflow

Desktop

  • 早期リリースフラグ(β版？)として安定版でも利用できるようになったよ
  • 今年後半に安定版リリースの予定
  • テキスト編集やマウス操作の検知、スクロールバーあたりが強化されたっぽい
  • コマンドライン引数の処理が可能になった
  • IMEも有効にできるようになった

Flutter Folio scrapbooking app

  • いろんな画面サイズや入力方法に対応するにはどうしたらいいか、という疑問に答えるために、Flutter Folioスクラップブックアプリを作成したよ
  • 単一コードベースで複数のプラットフォームでいい感じに動作させる簡単な例になってる
  • このようなアプリをプラットフォーム適応型と呼んでる
  • 複数プラットフォーム対応するときに困ったらソースコードが参考になるかも

refs:

github.com

Google Mobile Ads to Beta

新しいiOSの機能

  • iOSまわりも色々新機能を追加したよ
  • xcodeを起動せずに、コマンドラインからIPAをビルドできるようになったよ
  • 他iOSウィジェットがいくつか追加されたよ
  • シェーダーやアニメーションまわりのパフォーマンス改善も引き続きやっているよ

新しいウィジェット: Autocomplete と ScaffoldMessenger

Add-to-Appによる複数のFlutterインスタンス

  • 既存のアプリにFlutterを追加する際の Add-to-App機能で、Flutterインスタンスを追加したときのメモリコストを大幅削減(99%ダウン)

Flutter Fix

Flutter DevTools

  • DevToolsの名前をFlutter DevToolsにしたよ
  • IDEでも例外が発生したときに、DevToolsのオプション指定の提案などをしてくれるようになった
  • 今はlayout overflowの例外にのみ対応しているけど、ゆくゆくは他の一般的な例外も同様にできるようにする予定
  • DevToolsを起動すると、タブ上にエラーバッジを表示して特定の問題を追跡しやすくしたりしている
  • もう一つの新機能は、表示されているよりも高い解像度の画像を簡単に見ることができる機能で、アプリのサイズやメモリの過剰使用を追跡するのに役立つ
    • この機能を有効にするには、Flutterインスペクタの「Invert Oversized Images」を有効する
    • 表示サイズより解像度が大幅に大きい画像が上下逆さに表示されるようになる
  • その他レイアウトまわりのデバッグが可能になったり、いろいろな機能を追加している

Android Studio/IntelliJ Extension

  • IntelliJ系のIDEのためのプラグインに色々新機能を追加したよ
  • プロジェクト作成ウィザードも新しくなった様子
  • M51
    • Flutter設定の変更
    • 新規プロジェクト作成のときはAndroidXが必須に
    • その他バグfixなど
  • M52
    • Android Studio 4.2以降、新しいプロジェクト作成ウィザードになった
  • M53
    • プロジェクト作成ウィザードでプラットフォーム選択できるようになった
    • Render overflowエラーが出たとき、通知をクリックすると原因のウィジェットがDevToolsに表示されるようになった
    • 今までコードの横に色のプレビューが強制表示されていたけど、カラーアイコンをクリックすると、デフォルトのカラーピッカーが立ち上がるようになった
    • ANSIカラーエスケープシーケンスを使ってIDEのコンソールの出力をカラー化することができるようになった
    • Flutter SnapのパスがLinuxの既知のSDKパスのリストに追加されたので、LinuxユーザはFlutterの設定が簡単になった
    • DevToolsのインストール時に問題が起きたとき、再インストールできるようになった
  • M54
    • DevToolsのサーバー起動を効率化
    • flutter attachの引数用のフィールドを追加
    • canary buildのベースが安定版に切り替わったので、なんか色々対応が必要らしい(よくわからなかった)

Visual Studio Code Extension

  • VSCode用の拡張機能も色々追加している(テストまわりとか)
  • DartのLSPサポートが投入されたので、色々便利になったっぽい
    • Dartだけじゃなく、pubspec.yamlやanalysis_options.yamlファイルの補完もサポートされている

DartPad updated to support Flutter 2

  • DartPadもFlutter2サポートされるようになった

Ecosystem updates

  • プラグインまわりも色々アップデートされているので、以前試してうまく行かなかった人はまた試してほしい
  • アプリクラッシュのレポートがほしいときは、sentryがFlutterアプリ用のSDKを公開したので検討するといいかも
  • プラグインたくさんあって検討が大変になってきたので、いろいろな指標や品質が高いパッケージに"Flutter Favorite"マークをつけたよ
  • pub.greenサイトで最近のバージョンで動くかもチェックできるようになったよ

目玉としてはWebが安定版になったのと、Desktopがベータ版になったあたりかなぁという印象。あとはDartがNULL安全になったので、Flutter2でもそれに完全対応したよというあたりも大きな変更っぽい。

あとは、前々からオートコンプリート機能実装のときに結構パッケージを探したりして手間がかかっていたので、 AutocompleteCore の追加は気になるところだなー。

パッケージ探しもなかなか大変だったので、 "Flutter Favorite"マークは参考になりそうで助かる。

ひとまず自作アプリのFlutter2対応を早く進めなくては💨

UdacityのBuild Native Mobile Apps with Flutterコースを受けてみる その2

結構日数が経ってしまいましたがその2です。 前回に引き続き、UdacityのFlutterコースの受講メモを書いていきます。 今回はFlutterの内部の動きやウィジェットの紹介の話(7〜11回)でした。

Udacityのコース www.udacity.com

7.Flutter's Reactive Framework

8.Flutter's Development Tools

  • ウィジェットの説明に入る前にFlutterの3つの開発ツールの紹介
  • ホットリロード
    • JITコンパイラが使われている時有効になる
    • 実機でもエミュレータでも使える
    • アプリを再起動したいときはAndroidStudioの緑色の三角ボタンを押す
  • ウィジェットインスペクタ
    • ChromeのWeb Inspectorみたいなもの
    • デバイスのピクセル、ウィジェット、ウィジェットツリー、アプリでウィジェットが生成されたコード行を行き来できる
    • インスペクタモードを使用するときはアプリが実行されている必要がある
    • AndroidStudioの view > tool windows から開く(もしくはウィンドウ右端のタブ)
    • Xのついた丸いアイコンが inspect ボタン
    • 2つの長方形のアイコンはプラットフォーム切り替えボタン
    • inspect ボタンを押してinspectモードにするとアプリの画面が青くなり、特定のウィジェットを検査できる
    • アプリ画面左下に出ている虫眼鏡アイコンをクリックすると、ウィジェットを選択できる
    • インスペクタを利用してウィジェットのパディング等の値を見ることができる
  • コードの自動整形
    • AndroidStudioの code>reformat code with dart format でdart形式でコードを自動整形できる

9. The Wonderful Things about Widgets

  • Widget
  • StatelessWidget
    • 不変
    • プロパティがfinalになっているので、一旦作成すると変更できない
  • StatefulWidget
    • ステートオブジェクトを持つ
    • 詳細は後で
  • Widgetがレイアウトでどのように使われるか
    • Widgetは一部のパラメータを解析してインスタンス化される
    • コンテナウィジェットはアプリの分割や既存のWidgetの修飾など色々な用途に使われるWidget
    • webでいうと、コンテナウィジェット=React Nativeのdivみたいなもの
    • コンテナウィジェットをカスタマイズするには、widthやheightなどのプロパティを入力していく
    • 殆どのWidgetは child または children プロパティを持っていて、Widgetを入れ子にするときに使う
    • child プロパティは paddingやマテリアルアプリなど、1つの子だけを持つwidgetに存在する
    • childrenプロパティは子にリストをとるような、column、ListViewウィジェットに存在する
    • 子を持たせなくてもよい(デフォルト動作)し、わざわざnullを入れたりする必要もない

10. Quiz: Explore Flutter Widgets

WIdgetの数がかなりたくさんあるので、しっかり覚えていかないとなーという感じでした。 Youtubeで公式が今週のウィジェットという動画を出しているので、こちらもチェックしていきたいです。

Flutter Widget of the Week - YouTube

次回は 11.Dissect Hello Rectangle から。

そろそろ手を動かすターンに入りそうなので楽しみです。

UdacityのBuild Native Mobile Apps with Flutterコースを受けてみる その1

Flutter Udacity

チュートリアルを一通り終えたので、おすすめされていたUdacityの Flutter コース(無料)を受けてみています。英語なので必死にメモを取りつつやっているので、ここに残しておこうと思います。

今回はイントロダクションから最初の演習まで。

チュートリアル flutter.dev

Udacityのコース www.udacity.com

1. Introduction

2.Why Flutter?

  • ユーザはスムーズなアニメーションや良いパフォーマンスを期待しているが、それだけでは成功するアプリとしては不十分
  • ユーザに愛されるアプリになるためには、品質やパフォーマンスを妥協せず、素早い新機能実装が求められる
  • Flutterは一つのコードで、各プラットフォームのバイナリを出力するので、開発効率とパフォーマンス両方を得られる

3.Why Dart?

4.Set Up Your Environment

5.Build a Flutter App

6. Quiz: Build the Hello Rectangle App(演習問題)

次は 7.Flutter's Reactive Framework から

MacでFlutterの環境構築(2020年7月)

Flutter 環境構築

9年ぶりの記事……😇

最近Flutterの勉強を始めたので、覚書き等投稿していきます。 まずは環境構築から。

公式サイトはこちら

flutter.dev

こちらの手順のままでも十分できるのですが、Xcodeまわり、AndroidのAVDマネージャまわりがちょっと変わっていました。

Flutter SDKの取得

macOS install - Flutter からダウンロード or バージョンを固定したくない場合は下記コマンドでリポジトリをgitからcloneします

$ git clone https://github.com/flutter/flutter.git

使っているshellの.rcファイルに↓を追記してflutterのパスを通します。

$ vi ~/.zshrc

# For Flutter
export PATH="$PATH:`SDKをダウンロード or git cloneしたディレクトリのパス`/flutter/bin"

Flutterは基本的に必要に応じて固有のバイナリファイルなどをダウンロードしますが、事前にすべてダウンロードしておきたいというような場合(インターネットに繋げない環境になるなど)は下記コマンドを実施しておきます。

$ flutter precache

Flutter doctorコマンド

Flutter doctorコマンドでは、必要なライブラリが不足していないかなどをチェックしてくれたりします。何かflutterコマンドでエラーが出たときは、とりあえずこのコマンドを実行するとよさそう。

まっさらの環境でここまで実施した時点でdoctorコマンドを実行すると、下記のようになるはずです。

$ flutter doctor
Downloading Dart SDK from Flutter engine dcc9a4048da890660f0880b4c2afed7c9470d335...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  255M  100  255M    0     0  3559k      0  0:01:13  0:01:13 --:--:-- 5705k
Building flutter tool...

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Downloading Material fonts...                                       2.4s
Downloading Gradle Wrapper...                                       0.3s
Downloading package sky_engine...                                   0.7s
Downloading flutter_patched_sdk tools...                           23.3s
Downloading flutter_patched_sdk_product tools...                    4.5s
Downloading darwin-x64 tools...                                    21.1s
Downloading libimobiledevice...                                     1.1s
Downloading usbmuxd...                                              0.3s
Downloading libplist...                                             0.3s
Downloading openssl...                                              0.7s
Downloading ios-deploy...                                           0.6s
Downloading darwin-x64/font-subset tools...                         1.0s
Downloading android-arm-profile/darwin-x64 tools...                11.4s
Downloading android-arm-release/darwin-x64 tools...                 1.1s
Downloading android-arm64-profile/darwin-x64 tools...               0.9s
Downloading android-arm64-release/darwin-x64 tools...               1.6s
Downloading android-x64-profile/darwin-x64 tools...                 0.9s
Downloading android-x64-release/darwin-x64 tools...                 1.0s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.21.0-2.0.pre.114, on Mac OS X 10.15.5 19F101,
    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.47.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

AndroidSDKまわり、AndroidStudio、Xcode、使えるデバイスが無いよ〜という結果になります そのあたりは次のセクションで入れていくので、いったんはこのままで次に進みます。

動作確認用のアプリを作る

次セクションでセットアップする環境の動作確認用にアプリを作っておきます

$ flutter create my_app

これでカウンターアプリが作成されます。

各プラットフォームの設定

MacではiOS/Android/Webの開発ができるので、最低各環境のうち1つのセットアップを完了させていきます。今回はiOSとAndroidのセットアップを説明していきます。

iOS

Xcodeのインストール

AppStoreからインストールします

Xcode

Xcode

apps.apple.com

インストールが終わったら、Xcodeを開くか、コマンドラインからライセンスの同意をおこないます。

f:id:todomasa:20200724173845p:plain

最新のコマンドラインツールを使うよう下記コマンドで設定します。

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

あとは、実機へのデプロイに使うためのgemをインストールしておきます。(今回実機へのデプロイ手順の説明は省いています。必要な方は macOS install - Flutter 参照してください)

$ sudo gem install cocoapods
$ pod setup

iOSシミュレータのセットアップ

下記コマンド(もしくはXcodeから)シミュレーターを開きます。

$ open -a Simulator

File>OpenDeviceから64bitデバイス(iPhone5s以上)を選択していることを確認します。公式サイトではHardware>Deviceとなっていますが、Xcode9からなくなっているメニューのため、Fileメニューから確認します。 f:id:todomasa:20200724174519p:plain

公式サイトでは、次にWindow > Scaleからサイズの調整の項目がありますが、こちらもXcode9からは、ドラッグして任意のサイズに変更できるようになったので、なくなっているメニューになります。

動作確認

シミュレーターを起動した状態で、動作確認用アプリのディレクトリに移動後下記コマンドを実行します

$ cd my_app
$ flutter run

Downloading ios tools...                                           12.0s
Downloading ios-profile tools...                                    7.3s
Downloading ios-release tools...                                   83.0s
Launching lib/main.dart on iPhone SE (2nd generation) in debug mode...

Running Xcode build...
 └─Compiling, linking and signing...                        59.1s
Xcode build done.                                           83.4s
Waiting for iPhone SE (2nd generation) to report its views...          4ms
Syncing files to device iPhone SE (2nd generation)...              182ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on iPhone SE (2nd generation) is available
at: http://127.0.0.1:50135/vCEgznKhEwY=/

シミュレーターを見るとカウンターアプリが表示されているはずです。 f:id:todomasa:20200724175052p:plain

Android

ここではAndroidStudioをインストールが必要になりますが、実際開発していく際は他のエディターを使うことも可能です。私はAndroidStudioを使っていますが、vim等も使えるようです。

AndroidStudioのインストール

Download Android Studio and SDK tools  |  Android Developers からAndroidStudioのダウンロード&インストールします。 初回起動時、AndroidStudioのセットアップウィザードが開くので、最新版のAndroidSDK,Android SDK Command-line Tools, and Android SDK Build-Toolsをインストールします(特に特別な事をしなくても勝手にインストールされるので、デフォルトのまま Next ボタンで進めて行けばよいです。

プラグインのインストール

Preferences > Plugins から、Flutter プラグインをインストールします(この時一緒に Dart のプラグインもインストールされます)

f:id:todomasa:20200724183539p:plain

Androidエミュレータのセットアップ

ハードウェアアクセラレーションの設定

AndroidStudioでAVD Managerを開きます。 AndroidStudioを開いた時に出るウィンドウの右下の Configure から AVD Manager を選択します。 f:id:todomasa:20200724175949p:plain (上記ウィンドウではなく、通常のコード編集ウィンドウが開いている場合は、 Tools > Android > AVD Manager から開きます)

AVD Managerが開いたら、 +Create Virtual Device... から新規作成を行います。 f:id:todomasa:20200724180236p:plain

Choose a device definition では、 Play Store が無いものを選ぶようにします。バグ？なのか、Play Store があるdeviceにすると、ハードウェアアクセラレーションが選択できなくなるためです…。(refs: https://stackoverflow.com/questions/53016119/why-cant-i-change-the-emulated-performance-graphics-setting-in-the-android-v )

f:id:todomasa:20200724180552p:plain

作成できたら、Verify Configuration の Emulated Performance で Hardware - GLES 2.0 を選択します。

f:id:todomasa:20200724181217p:plain

これでAVDの設定は完了です。

動作確認

まず下記コマンドでAndroidSDKのライセンスの同意を行います。

$ flutter doctor --android-licenses
Warning: File /Users/xxxx/.android/repositories.cfg could not be loaded.
6 of 7 SDK package licenses not accepted. 100% Computing updates...
Review licenses that have not been accepted (y/N)? y

1/6: License android-googletv-license:
---------------------------------------
Terms and Conditions

This is the Google TV Add-on for the Android Software Development Kit License Agreement.
(...中略...)
All SDK package licenses accepted

エミュレータを起動した状態で、動作確認用アプリのディレクトリに移動後下記コマンドを実行します

$ cd my_app
$ flutter run
Using hardware rendering with device sdk gphone x86 arm. If you notice graphics
artifacts, consider enabling software rendering with
"--enable-software-rendering".
Launching lib/main.dart on sdk gphone x86 arm in debug mode...
Checking the license for package Android SDK Build-Tools 28.0.3 in /Users/xxx/Library/Android/sdk/licenses
License for package Android SDK Build-Tools 28.0.3 accepted.
Preparing "Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)".
"Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)" ready.
Installing Android SDK Build-Tools 28.0.3 in /Users/xxx/Library/Android/sdk/build-tools/28.0.3
"Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)" complete.
"Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)" finished.
Checking the license for package Android SDK Platform 28 in /Users/xxx/Library/Android/sdk/licenses
License for package Android SDK Platform 28 accepted.
Preparing "Install Android SDK Platform 28 (revision: 6)".
Running Gradle task 'assembleDebug'...
"Install Android SDK Platform 28 (revision: 6)" ready.
Installing Android SDK Platform 28 in /Users/xxx/Library/Android/sdk/platforms/android-28
"Install Android SDK Platform 28 (revision: 6)" complete.                       "Install Android SDK Platform 28 (revision: 6)" finished.                       Running Gradle task 'assembleDebug'...                                          Running Gradle task 'assembleDebug'... Done                       232.2s (!)
✓ Built build/app/outputs/flutter-apk/app-debug.apk.
Installing build/app/outputs/flutter-apk/app.apk...                 1.4s
Waiting for sdk gphone x86 arm to report its views...               10ms
Syncing files to device sdk gphone x86 arm...                      269ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on sdk gphone x86 arm is available at:
http://127.0.0.1:56194/sN9MGqne9Qo=/

エミュレータにカウンターアプリが表示されればOKです。 f:id:todomasa:20200724181415p:plain

最後の確認

最後に flutter doctor コマンドを実行してみます。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.21.0-6.0.pre.3, on Mac OS X 10.15.5 19F101,
    locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.47.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

使えるデバイスが無いとは言われていますが、これはエミュレータ等を起動 or 実機を接続していないためなので、特に問題はありません。

これでiOS/AndroidのFlutterアプリの開発環境が構築できました 🙆‍♀️

レイアウトxmlファイルが開けない

Androidアプリ開発

私が遭遇したエラーではないですが、メモとして残しておきます。

レイアウトXMLファイルを開こうとすると、下記のようなエラーが出てファイルが開けない

エラーが発生しました。詳細については、エラー・ログを参照してください。

com.android.ide.eclipse.adt.internal.editors
.layout.configuration.ConfigurationComposite
.setFile(Lorg/eclipse/core/resources/IFile;)

Eclipse3.6でADTをバージョンアップすると出るらしいです。

そんな時はeclipseを-cleanオプションを付けて再起動すると解消されるかもです。