runAppを読む
Flutter

runAppを読む

Flutterにおいてmain関数で実行されるrunApp関数の実装を読んでいきます。 参照バージョン: Flutter 2.8.0 ドキュメントコメントの確認引数のウィジェットを広げて画面に貼り付ける。画面全体を埋めるようにウィジェットに制約を与える。片側に寄せたり中央に配置する場合はAlignやCenterウィジェットを利用する。runAppを2回呼ぶと前回のウィジェットを画面から切り離し、新しいウィジェットが利用される。runAppの実装void runApp(Widget app) {  WidgetsFlutterBinding.ensureInitialized()    ..scheduleAttachRootWidget(app)    ..scheduleWarmUpFrame(); } WidgetsFlutterBinding.ensureInitializedstatic WidgetsBinding ensureInitialized() {    if (WidgetsBinding.instance == null)      WidgetsFlutterBinding();    return WidgetsBinding.instance!;  } WidgetsFlutterBinding.ensureInitializedは作成・初期化されたWidgetsBindingのインスタンスを返します。main関数でrunApp以前にWidgetsFlutterBinding.ensureInitializedを実行することがよくありますが、最初の実行でWidgetsFlutterBinding()イニシャライザが実行されインスタンスが作成されます。2回目以降は初期化された WidgetsBinding.instance が既に作成されており、それを返すだけの挙動になります。このイニシャライザは親クラスのBindingBaseで定義されています。BindingBaseはシングルトンサービスを提供するmixinのベースクラスです。initInstancesで初期化を行いinitServiceExtensionsで必要があればobservatory service extensionを初期化しています。WidgetsFlutterBindingは以下のmixinを付与されています。

キーボード

Moonlanderをカスタマイズしたらさらにお気に入りのキーボードになった

プログラマにとってキーボードはとても重要なものです。HHKB、UHK、KINESIS Freestyle Proを経て現在私はZSA Technology LabsのMoonlanderを使用しています。 Moonlanderは初期状態でも入力しやすいキーボードですが、より良い設定を求めていくつかカスタマイズしてみました。 現在の状態が以下の写真です。 脚Moonlanderには脚が片側に一つついてきます。内側奥の足です。その脚と親指クラスターを下に折り曲げる感じにすると内側をチルトすることができます。しかし親指クラスターを下にするとキーが遠くなって、それほど大きくない私の手ではキーに届かなくなってしまいます。 ということで内側手前の黒い脚を3Dプリンタで出力して取り付けました。設計図はMoonlanderのCommunity Creationsのリンクから取得することができます。私は3Dプリンタを持っていないのでDMM.makeを利用して出力しました。どの素材が良いのか分からなかったのでABSライクを選択して2本で7000円程度でしたが、より安いナイロンでもよかったように思います。また、表面のザラつきを取るために磨く手間がありました。 この黒い脚を使うことで、親指クラスターを上げつつ内側をチルトすることが可能になり、腕がさらに楽になりました。 キーキャップMoonlanderの初期キーキャップは刻印されたものを選択したのですが、無刻印キーキャップを追加で購入しました。購入した無刻印キーキャップはスカルプになっていて、各段がそれぞれ独自の角度で傾斜していて入力しやすい形状になっています。初期状態の無刻印もスカルプなら初めから無刻印にしておけばよかったように思います。実際はどうなんでしょう。 中段のホームポジション用の印がついたキーキャップも含まれていました。 ちなみに中段キーが二つ余分に含まれていた(おそらくホームポジションの印を使いたくない時のため)ので、最下段の右二つのCmdキーとOptionキーは余った中段キーを逆さに取り付けて親指で押しやすいようにしています。 スカルプは上段や下段に伸ばしたり曲げたりした指で押しやすい傾斜がついているので、確かに入力しやすい感じがします。 キーボード自体も結構なお値段ですがこのキーキャップ、$100です。結構します。 キースイッチ購入時にキースイッチはもっとも軽くクリック感のないものということでKailh Silverを選択しました。が、結構音がするし、ミスタッチが若干多いように思いました。 そこでこの二つの問題を解決するためにKailh

Flutter

AppBarの高さを高くしてタイトルなどを下寄せする

FlutterのAppBarのHeightを長くして戻るボタンやタイトルを下寄せする仕様が発生したので実装してみた。 Scaffold( appBar: PreferredSize( preferredSize: const Size.fromHeight(100), child: Column( children: [ const Spacer(), AppBar( title: Text('Title'), ), ], ), ),高さを100にしてAppBarの上にSpacerを入れてAppBarを下寄せしている。

Ghostに目次を表示する
Ghost

Ghostに目次を表示する

本ブログはGhost(Pro)を利用しています。目次を表示すると読みやすいと思い簡単に表示できるようにしました。 ライブラリとCSSをヘッダ・フッタにインジェクトする目次を自動的に表示するためのライブラリとCSSを利用します。 cdnjs.comのtocbot.min.jsをCopy Script Tagボタンでコピーします。これをサイトのフッタにペーストします。 同じくtocbot.cssをCopy Link Tagボタンでコピーしてサイトのヘッダにペーストします。 Activateコードをフッタに記述する以下のActivateするためのコードをサイトのフッタに記述します。.gh-contentはデフォルトテーマ用なので適宜変更します。 <script> tocbot.init({ tocSelector: '.toc', contentSelector: '.gh-content', hasInnerContainers: true }); </script>目次を表示したいコンテンツにHTMLを記述する目次を表示したいコンテンツに以下のコードをHTMLで挿入します。これで目次が挿入されます。 <aside class="toc"></aside>さらにカスタマイズするにはHow to add a table

FlutterKaigiにプロポーザルを提出しました

FlutterKaigiにプロポーザルを提出しました

FlutterKaigiのプロポーザル応募最終日にプロポーザルを提出しました。 DCIアーキテクチャの紹介とFlutter/Dartでの実装方法 以前からモバイルアプリ開発においてさまざまなアーキテクチャパターンの紹介がなされてきました。しかしたとえばMVVMではモデルで実装すべきコードがViewModelに書かれ、ViewModelの責務が過大になってしまうプロジェクトをいくつか見てきました。私が経験したプロジェクトでは正しくViewModelが実装されている方が珍しかったです。 この原因の1つにモデルの実装方法が分からないということがあるように思いました。DCIアーキテクチャはMVCやMVVMなどのモデルの実装に関するアーキテクチャパターンです。DCIアーキテクチャを学ぶことでより良いモデルの実装を行うことができるようになります。 さて、プロポーザルは採用されるでしょうか。

VSCodeでコメント化したら次の行へ自動で移動する
VSCode

VSCodeでコメント化したら次の行へ自動で移動する

IntelliJなどのJetBrains IDEではショートカットキーでコメント化するとカーソルが自動で次行へ移動しますがVisual Studio Codeは移動しません。結構不便なのでVSCodeでも自動で移動するように設定しました。 macros extensionを導入します。settings.jsonに下記のコードを追加します。editor.action.commentLineに設定してあるショートカットキーとWhen式(editorTextFocus && !editorReadonly)をmacros.commentLineに設定します。editor.action.commentLineのショートカットキーは削除します。 "macros": { "commentLine": [ "editor.action.commentLine", "cursorDown" ] }settings.jsonの一部これでコメント化するとカーソルが次行に移動するようになります。