ボタンを個別のファイルに分けてコンポーネント化する [Flutter]

要点

• ボタンを定義する際、 onPressed の処理を渡せるようにするためにGestureTapCallback を使う

例：

login_button.dart

import 'package:sample_app/ui/atoms/app_text.dart';
import 'package:flutter/material.dart';

class LoginButton extends StatelessWidget {
  final GestureTapCallback onPressed;
  const LoginButton({Key? key, required this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      child: AppText.loginButtonText,
      style: OutlinedButton.styleFrom(
        primary: Colors.white,
        shape: const StadiumBorder(),
        side: const BorderSide(color: Colors.white),
      ),
      onPressed: () {
        debugPrint('Pressed LoginButton');
        onPressed();
        debugPrint('Completed onPressed() of LoginButton');
      },
    );
  }
}

呼び出す側: signup_page.dart

class SignupPage extends StatelessWidget {
  void keyboardArrowDownButtonEvent() {}

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: AppColors.signupWidgetBackground,
        body: Stack(
          children: [
            Align(
              alignment: const Alignment(1, -1),
              child: Padding(
                padding: Measure.paddingTopRight,
                child: LoginButton(onPressed: () {
                  Navigator.of(context).push<dynamic>(
                    HomePage.route(),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

参考

• flutter ボタンをコンポーネント化する | おゆばぶ
  • ただし、この記事では修正が必要： onPressed: onPressed → onPressed: onPressed()

VS Code のフォントを変更する

設定ファイル settings.json を編集することで Visual Studio Code (VS Code) のフォントを変更できる。

設定ファイルの場所

settings.json はそれぞれの OS で以下のディレクトリに用意されている。

Windows

C:\Users\USERNAME\AppData\Roaming\Code\User

macOS

~/Library/Application\ Support/Code/User

• スペースにはバクスラ \ 付けるの忘れずに

Linux

~/.config/Code/User

フォントファミリー

設定の fontFamily という項目を編集すると、フォントを変更できる。

例:

{
  "editor.fontFamily": "\"Cica\"",
  "terminal.integrated.fontFamily": "\"Cica\""
}

• editor.fontFamily
  • エディター用フォントファミリー
• terminal.integrated.fontFamily
  • ターミナル用フォントファミリー

指定のフォントで対応していない文字にはデフォルトのフォントが適用される。

形式

{
  "editor.fontFamily": "\"フォントファミリー１\", \"フォントファミリー２\", \"フォントファミリー３\""
}

• 左側が優先される
  • 左側に日本語非対応フォント、後続に日本語対応フォントを設定すると半角英数だけ前者になる
• , で区切られているが、全体として一つの文字列であることに注意

不具合

• 何度か設定の変更を繰り返していると、時々変更が反映されなかったり挙動が不安定になったりする
  • そういう場合は再起動してみると大体解決する

Fonts for Programming -- 最強のプログラミング用フォント 2021

フォントに求めるもの

• 読みやすい
  • 文字が潰れたり崩れたりしない
  • 連なる文字同士の間隔がちょうど良い
  • プロポーショナルではなく等幅
  • 似ている文字を混同しにくい
• 使いやすい
  • 導入が簡単
  • 理由がどうあれ実際にそのフォントを使いたいと思えるか

検証環境

• macOS Big Sur 11.5.2
• Visual Studio Code 1.59.1
• 2021/08/28 Sat 実施

検証方法

厳密に検証する方法を知らないので、主観的にざっくりとやっていく。 対象環境は次の通り。

• VS Code の統合ターミナル
• 過去に書いた複数の Markdown と Python スクリプト

対象環境でテスト文字列を表示させてフォントをよく眺め、順位付けを行う。各フォントの利点・欠点を挙げつつ、順位に納得がいくまで根気強く繰り返し検証・評価する。

簡易テスト

echo "Il1|0φΦoO~^
力カェエ工口ロ□一ー〜−二ニ
はばぱ
　燻製黴薔薇轟蟹
欢迎来到日本
歡迎來到日本
내를 건너서 숲으로
고개를 넘어서 마을로"

標準テスト

echo "abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
 !\"#$%&'()-^\@[;:],./\=~|`{+*}<>?_
Il1|0φΦoO~^
力カェエ工口ロ□一ー〜−二ニ
はばぱ
　燻製黴薔薇轟蟹
、。，．・：；？！゛゜´｀¨＾￣＿ヽヾゝゞ〃仝々〆〇ー―‐／＼～∥｜…‥
‘’“”（）〔〕［］｛｝〈〉《》「」『』【】＋－±×÷＝≠＜＞≦≧∞∴
♂♀°′″℃￥＄￠￡％＃＆＊＠§☆★○●◎◇◆□■△▲▽▼※〒→←↑↓〓
∈∋⊆⊇⊂⊃∪∩∧∨￢⇒⇔∀∃∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬ʼn♯♭♪
ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθ
ικλμνξοπρστυφχψωАБВГДЕЁЖЗИЙКЛМНО
ПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмн
опрстуфхцчшщъыьэюя
─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂
｡｢｣､･ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝﾞﾟ
①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ㍉㌔
㌢㍍㌘㌧㌃㌶㍑㍗㌍㌦㌣㌫㍊㌻㎜㎝㎞㎎㎏㏄㎡　㍻〝〟№㏍℡㊤㊥㊦㊧
㊨㈱㈲㈹㍾㍽㍼≒≡∫∮∑√⊥∠∟⊿∵∩∪
欢迎来到日本
歡迎來到日本
내를 건너서 숲으로
고개를 넘어서 마을로"

Markdown 上でテーブル記法が崩れないか確認

制約名	意味
NOT NULL	NULLを不許可
UNIQUE	重複を不許可
PRIMARY KEY	主キー制約（NOT NULL + UNIQUE）

リガチャについて

• リガチャ（合字）を利用したフォントは割と人気がある一方、本当にコーディング向きかは疑問
  • プログラム用リガチャはプログラマ向けではない | NUMBER-SHOT.NET
• ターミナルで編集するコードそのものに関係しない箇所にのみ適用されるんだったら気にならないんだけどな

半角英数記号フォント

• Roboto Mono - Google Fonts
• tonsky/FiraCode: Free monospaced font with programming ligatures
• ryanoasis/nerd-fonts: Iconic font aggregator, collection, & patcher. 3,600+ icons, 50+ patched fonts: Hack, Source Code Pro, more. Glyph collections: Font Awesome, Material Design Icons, Octicons, & more

日本語対応フォント

源ノ角ゴシック系

• Source Han Code JP
  • 「Source Code Pro」+「Source Han Sans JP（源ノ角ゴシック JP）」
  • 一般的な「全角 1 文字 = 半角 2 文字」の文字幅ではなく、「全角 2 文字 = 半角 3 文字」
    • 可視性が高い
    • ターミナル用フォントには向かない
  • macOS はバージョン末尾が R のバージョンを選ぶこと
    • SourceHanCodeJP.ttc を DL ＆インストール
• Myrica
  • ターミナル非対応
• Cica
• PlemolJP
• 白源 (はくげん／HackGen)
  • 文字間の余白が少なく、詰まって見える
  • Terminal で は の表示が崩れる
• Firge (ファージ)

M+系

• M+ FONTS
• edihbrandon/RictyDiminished: Ricty Diminished --- fonts for programming
• nv-h/Utatane: プログラミング用日本語等幅フォント Utatane
  • Cica のフォーク版

その他

源ノ角ゴシック系か M+ 系かわからんフォント

• be5invis/Sarasa-Gothic at v0.34.2
  • Chinese, Japanese, Korean に対応
  • データサイズが非常に大きい
    • Ver.0.34.2 の解凍後 12.84 GB
  • リガチャ対応
• Noto Sans CJK JP
  • Chinese, Japanese, Korean の3セットで日本語優先のフォント
• Takao Fonts in Launchpad
  • 独立行政法人 情報処理推進機構（略称IPA）によって開発されている日本語アウトラインフォント
  • ~ (チルダ) と ^ (ハット)が文字サイズによっては同じに見えることがある
  • Terminal で一部の全角記号が重なってしまう

評価

上の方にあるフォントほど評価が高くなるように並べ替えて結果を示す。

エディター用フォント

1. Cica
2. 🦌
3. 軽妙洒脱
4. ちっちゃい
5. 半角がちまちましてる
6. 可爱
7. FirgeNerd
8. 余白がちょうど良い
9. やや縦長かも
10. Myrica M
11. 線が細くて品がある
12. 半角の上品さはコードっぽさをかき消してる
13. 全角に一目惚れ
    • 日本語フォントとしては一番好み
14. Roboto
15. 🤖
16. コンパクト
17. コード感ある
18. Il の区別がつきにくい
19. Noto Sans CJK JP
20. 見やすい
21. コンパクト
22. コード感ある
23. Il の区別がつきにくい
24. Source Han Code JP
25. 見やすい
26. 幅がある
    • 幅取りすぎ
27. PlemolJP HS
28. 🍺
29. 半角が好みじゃない
30. Ricty Diminished Discord
31. 全角に一部分かりづらい文字がある
32. TakaoGothic
33. 半角が少し見づらいかも
34. 文字間が詰まりすぎに見える

Terminal 用フォント

1. Cica
2. エラーメッセージの強調で全角がややぼやけて見える
3. 中国の漢字が苦手？
   • 「欢迎」、「歡迎」それぞれの１文字目が２文字目より大きく見える
4. FirgeNerd Console
5. 太い、デカい、わかりやすい
6. 太さゆえの圧を感じる
7. ∈∋⊆⊇⊂⊃∪∩∧∨ が重なる
8. 縦長
9. HackGenNerd Console
10. 全角スペースが見えない
11. PlemolJP Console HS
12. Terminal で一部の全角文字が重なる
13. Noto Sans Mono CJK JP
14. Terminal で一部の全角文字が重なる
15. 「黴」が崩れる
16. Roboto Mono
17. Terminal で一部の全角文字が重なる
18. Myrica M
19. Terminal で一部の全角文字が重なる
20. Ricty Diminished Discord
21. Terminal で一部の全角文字が重なる

問題点

• 全角文字は Terminal 上の表示で問題が発生しやすい傾向
  • 特に警告文やエラー文で文字の潰れや重なりが生じやすい

🏅 選定結果

• エディタ用フォント : Cica
• ターミナル用フォント : Cica

Cica しか勝たん！

とはいえ５位以上は接戦だった。

Ref

• プログラミング用フォントの選び方とおすすめフォント | Output 0.1
• tsunesan3/awsome-jp-coding-fonts: Awsome Japanese Coding Fonts
• Best monospace code fonts for developers? | DigitalOcean

機密データを history 含め git リポジトリから削除する

間違えて機密データをコミットに含めてプッシュしてしまった場合に、BFG というツールを使ってそれをなかったことにする方法について説明する。

Install BFG

Prerequests

BFG を動かすには Java が必要なので、なければインストールしておこう。

Linux:

sudo apt update && sudo apt install default-jdk

BFG のインストール

以下の公式サイトからダウンロードする。

BFG Repo-Cleaner by rtyley

cd ~
curl -O https://repo1.maven.org/maven2/com/madgag/bfg/1.14.0/bfg-1.14.0.jar

.bash_profile や .zshrc などにエイリアスを追加する。

alias bfg='java -jar $HOME/bfg-1.14.0.jar'

これで bfg コマンドとして使えるようになる。

手順

１．機密データを削除するか一旦リポジトリ内にない状態にしてコミット

２．プロジェクト直下で次の bfg コマンドを実行

bfg --delete-files 機密データを含むファイル名

• ファイルパスではないことに注意

次のコマンドで対象の履歴が削除される。

git reflog expire --expire=now --all && git gc --prune=now --aggressive

機密データが削除されたら、変更を GitHub に強制的にプッシュする。

git push --force

Refs

• 機密データをリポジトリから削除する - GitHub Docs
• GitHub にコミットしたパスワード等個人情報の history 削除方法まとめ:How to delete history & cached view including sensitive data using git filter-branch command | あしたもネット
• BFG を使って git リポジトリから巨大なファイルを削除してみた - Qiita

Blimp Commands

Usage - Introduction | Blimp

# For a list of Blimp CLI commands
blimp help

# Log in to Kelda Blimp
blimp login

# Create and start containers
blimp up

# background run
blimp up -d

# Build images before starting containers
blimp up --build

# Delete your cloud sandbox
blimp down

# Clear volumes
blimp down -v

# Run a command in a service
blimp exec

# Expose a service (Public URLs)
blimp expose <SERVICE> <PORT>

# stop exposing the service
blimp expose --rm

# restarting services
blimp restart <SERVICE>

# getting logs
blimp logs

# starts a shell in a container
blimp ssh <SERVICE>
# <SERVICE> は docker-compose.yml 内で `services` 以下に記述したサービス名

# Copy files to and from services
blimp cp

jovyan って誰？

• jovyan は Jupyter コミュニティメンバーの代名詞
• 「木星の」「神の」「堂々とした」などの意味を持つローマ神話用語 jovian から転じて名付けられた

もうちょっと詳しく

jupyter の docker イメージとか jupyter 関連のツールを使っているとよく目にする jovyan って誰だろう？　

jupyter を使うようになってしばらく経つけども，そもそも人の名前なのか別の意味を持つ英単語なのかさえ知らない．

気になって調べてみると公式ドキュメントではっきりと説明されていた．

Community — Jupyter Documentation 4.1.1 alpha documentation

You may see the word Jovyan used in Jupyter tools (such as the user ID in the Jupyter Docker stacks or referenced in conversations. But what is a Jovyan?

In astronomical terms, the word “Jovian” means “like Jupiter”. It describes several planets that share Jupiter-like properties.

Much like the planet Jupiter and our solar system, the Jupyter community is large, distributed, and nebulous. We like to use the word Jovyan to describe members of this community. Jovyans are fellow open enthusiasts that use, develop, promote, teach, learn, and otherwise enjoy tools in Jupyter’s orbit. They make up the Jupyter community. If you’re not sure whether you’re a Jovyan, you probably are :-)

結構気になっている人は多かったようだ．

• Who is jovyan? · Issue #358 · jupyter/docker-stacks
• What is with the weird jovyan user? - General - Jupyter Community Forum

segmentation fault docker-compose up

Problem

On GCE Debian

❯ docker-compose up
zsh: segmentation fault  docker-compose up

Solution

GCE, Docker 環境で Segmentation fault の対処法 - Qiita

sudo apt update
sudo sysctl vm.overcommit_memory

Output:

❯ sudo sysctl vm.overcommit_memory
vm.overcommit_memory = 0

If you get vm.overcommit_memory = 0, change the setting with sudo sysctl vm.overcommit_memory=1:

❯ sudo sysctl vm.overcommit_memory=1
vm.overcommit_memory = 1

Then, you can use docker-compose up.

command not found: sysctl

If you get command not found: sysctl, install sysctl:

command-not-found.com – sysctl

sudo apt update
sudo apt install procps
sudo apt autoremove