2024-02-18

「Markdown関連のノート」のまとめ

Markdown

基本的な記法

自分がよく使うMarkdown記法

mermaid

PlantUML

その他

VSCodeのmarkdownプレビューを自分好みにカスタマイズ！

2024-02-18

PlantUMLで配置図を書いてみた

Markdown PlantUML

自分がよく使いそうな機能
- 見た目
- 記述内容
要素の種類
- 見た目
- 記述内容
リンクの種類
- 見た目
- 記述内容

Markdownファイル内で、PlantUMLの図を挿入することが増えそうなので自分用のチートシートを作成しておくこのにしました。

参考：配置図の構文と機能

自分がよく使いそうな機能

見た目

記述内容

 ``` plantuml

@startuml

title 自分がよく使う記述

skinparam backgroundColor #eeeeee
scale 800 width

artifact アーティファクト {
  agent サンプルA as A #pink;line:red;line.bold;text:red
  agent サンプルB as B #line:red;line.bold;text:red
}
card カード {
  agent サンプルC as C #skyblue;line:blue;line.bold;text:blue
  agent サンプルD as D #line:blue;line.bold;text:blue
}

agent サンプルE as E

A -[bold]> B
B -[dashed]> C
C -[dotted]> D
D -[plain]-> E
E -[hidden]-> A
E ---> A

@enduml
 ```

要素の種類

見た目

記述内容

 ``` plantuml
@startuml

title 要素の種類

skinparam backgroundColor #eeeeee
scale 800 width


interface スタート
interface スタート2
interface スタート3
interface スタート4
interface スタート5
interface スタート6

actor アクター
actor "アクター/"
agent エージェント
artifact アーティファクト
boundary 境界

card カード
circle 円
cloud クラウド
collections コレクション
component コンポーネント

control コントロール
database データベース
entity エンティティ
file ファイル
folder フォルダ

frame フレーム
hexagon 六角形
interface インターフェイス
label ラベル
node ノード

package パッケージ
person 人型
queue キュー
rectangle 四角形
stack スタック

storage ストレージ
usecase ユースケース
usecase "ユースケース/"

スタート -[bold]-> アクター
スタート -[dashed]-> "アクター/"
スタート -[dotted]-> カード
スタート -[hidden]-> 境界
スタート -[plain]-> 円

アクター -[hidden]-> スタート2
"アクター/" -[hidden]-> スタート2
カード --[hidden]> スタート2
境界 -[hidden]-> スタート2
円 -[hidden]-> スタート2

スタート2 -->> クラウド
スタート2 --0 コレクション
スタート2 --^ コンポーネント
スタート2 --(0 コントロール
スタート2 --(0 データベース


クラウド -[hidden]-> スタート3
コレクション -[hidden]-> スタート3
コンポーネント -[hidden]-> スタート3
コントロール -[hidden]-> スタート3
データベース -[hidden]-> スタート3

スタート3 -0- エンティティ
スタート3 -0)- ファイル
スタート3 -(0- フォルダ
スタート3 -(0)- フレーム
スタート3 --> 六角形

エンティティ -[hidden]-> スタート4
ファイル -[hidden]-> スタート4
フォルダ -[hidden]-> スタート4
フレーム -[hidden]-> スタート4
六角形 -[hidden]-> スタート4

スタート4 --> インターフェイス
スタート4 --> ラベル
スタート4 --> ノード
スタート4 --> パッケージ
スタート4 --> 人型

インターフェイス -[hidden]-> スタート5
ラベル -[hidden]-> スタート5
ノード -[hidden]-> スタート5
パッケージ -[hidden]-> スタート5
人型 -[hidden]-> スタート5

スタート5 --> キュー
スタート5 --> 四角形
スタート5 --> スタック
スタート5 --> ストレージ
スタート5 --> ユースケース

キュー -[hidden]-> スタート6
四角形 -[hidden]-> スタート6
スタック -[hidden]-> スタート6
ストレージ -[hidden]-> スタート6
ユースケース -[hidden]-> スタート6

スタート6 --> エージェント
スタート6 --> アーティファクト
スタート6 --> "ユースケース/"

@enduml

 ```

リンクの種類

見た目

記述内容

 ``` plantuml

@startuml

title リンクの種類

skinparam backgroundColor #eeeeee
scale 800 width

node foo
agent bar1 #pink;line:red;line.bold;text:red
agent bar2
agent bar3
agent bar4
agent bar5

foo -[bold]-> bar1
foo -[dashed]-> bar2
foo -[dotted]-> bar3
foo -[hidden]-> bar4
foo -[plain]-> bar5

artifact アーティファクト {
    artifact アーティファクト2
    artifact アーティファクト3
    artifact アーティファクト4
    artifact アーティファクト5
    artifact アーティファクト6
    artifact アーティファクト7
    artifact アーティファクト8
    artifact アーティファクト9
    artifact アーティファクト10
    bar3 --> アーティファクト2
    bar3 --* アーティファクト3
    bar3 --o アーティファクト4
    bar3 --+ アーティファクト5
    bar3 --# アーティファクト6
}

アーティファクト4 -->> アーティファクト7
アーティファクト4 --0 アーティファクト8
アーティファクト4 --^ アーティファクト9
アーティファクト4 --(0 アーティファクト10

card カード {
  card カード2
  card カード3
  card カード4
  card カード5
}
アーティファクト8 -0- カード2
アーティファクト8 -0)- カード3
アーティファクト8 -(0- カード4
アーティファクト8 -(0)- カード5

@enduml

 ```

2024-02-18

PlantUMLで状態図を書いてみた

Markdown PlantUML

見た目
記述内容

Markdownファイル内で、PlantUMLの図を挿入することが増えそうなので自分用のチートシートを作成しておくこのにしました。

参考：配置図の構文と機能

見た目

記述内容

 ``` plantuml

@startuml

skinparam backgroundColor #eeffff

scale 600 width

state ユーザー操作可能 #pink {
  state pre #pink;line:red;line.bold;text:red :仮登録
  state main :本登録
  state cancel :退会
}

state ユーザー操作不可 #lightgreen {
  state reject #palegreen;line:green;line.dashed;text:green :管理者停止
}

[*] -> pre : 仮登録操作

pre --> main : 本登録操作
pre -r[#red,dotted]-> reject : アカウント停止操作

main --> cancel : 退会操作
main -r[#red,dotted]-> reject : アカウント停止操作

cancel -r[#red,dotted]-> reject : アカウント停止操作
cancel --> pre : 仮登録操作（利用再開）

reject -[dashed,#blue]-> [*] : 操作禁止解除


@enduml

 ```

2024-02-18

PlantUMLでシーケンス図を書いてみた

Markdown PlantUML

見た目
記述内容

Markdownファイル内で、PlantUMLの図を挿入することが増えそうなので自分用のチートシートを作成しておくこのにしました。

参考：配置図の構文と機能

見た目

記述内容

 ``` plantuml

@startuml

skinparam backgroundColor #eeffff
scale 600 width

title シーケンス図のサンプル

participant User

box "Internal Service" #LightBlue
participant A
participant B
end box

User -> A: DoWork
activate A #FFdddd

A -> A: Internal call
activate A #ffffbb

A -> B: << createRequest >>
activate B

B --> A: RequestCreated
deactivate B
deactivate A

== 待機 ==

group My own label
    A -> B : Log attack start
        loop 1000 times
            A -> B: Request
            activate B
            B -> B: 内部処理
            B -> A: Responce
            deactivate B
        end
    A -> B : Log attack end
end

...

alt successful case
A -> User: Done
else error case
A --> User: Error
end
deactivate A

@enduml

 ```

2024-02-17

VSCodeでPlantUMLを使うための環境構築

Markdown PlantUML

前提条件
参考サイト
手順
結果
さいごに

私は今まではmarkdownファイル内にmermaidでシーケンス図やブロック図を作成していたのですが、PlantUMLの方が多くのことができるらしいので、使ってみることにしました。

※ mermaidと違って環境構築が必要になります。

前提条件

OS	エディター
Windows10	VSCode

VSCodeのインストール手順等、基本的な部分は省略します。
VSCodeには以下のプラグインがインストールされています。
- Markdown Preview Enhanced

参考サイト

以下がPlantUMLの日本語サイトと、日本語サイト内のクイックスタートガイドページです。

一目でわかるPlantUML
- クイックスタートガイド

手順

動作確認用にPlantUMLの図表が書かれたmarkdownファイルを用意しておき、VSCode上のMarkdownファイルのプレビュー画面内にUMLが正しく表示がされるようにします。（いろいろ試行錯誤をしましたので、以下の手順の中に不要な工程があるかもしれませんがご了承下さい。）

手順０：準備（動作確認用のmarkdownファイルの作成）

環境構築が完了したことを確認するために、markdownファイルを作成しておきます。

# 動作確認用の記述です

以下でシーケンス図が表示されるはずです。

 ``` plantuml
@startuml
title シーケンス図
Webページ -> APIサーバー: リクエスト
APIサーバー --> Webページ: レスポンス
@enduml
 ```

<注意> 上記コードは「コードブロック表記部分の先頭」に半角スペースを入れています。（コードブロック記号を手軽にエスケープするための対応です。）コピペで使用する場合は「```」の前の半角スペースを削除して使用してください。

私の環境では以下のような画面が表示されます

まだプレビューが正しく表示されません。

手順１：Javaのインストール

Java8以上のバージョンのJavaがインストールされている必要があります。コマンドプロンプト等でjava -versionと入力すると、Javaのインストールの有無や、インストール済みのJavaバージョンを確認することができます。

以下が私のローカル環境での実行結果です。

>java -version
openjdk version "1.8.0_242"
OpenJDK Runtime Environment Corretto-8.242.08.1 (build 1.8.0_242-b08)
OpenJDK 64-Bit Server VM Corretto-8.242.08.1 (build 25.242-b08, mixed mode)

インストールされていない場合は、以下の手順でインストールすることができます。
- Java（Amazon Corretto 8）をインストールしてみた
  - インストール手順としては参考になると思いますが、バージョンが少し古いので新しいLTSバージョンの入手先を添付しておきます。Amazon Corretto Documentation

手順２：GraphVizのインストール

（注意）公式サイトには「Windows10以降の場合はインストール不用」とありましたが、私の環境ではこれをインストールしないと想定通り動きませんでした。

Test your GraphViz installation
Graphvizダウンロードページ
私は上記サイトからインストーラーを取得し、インストールを行いました。
- インストール時にPath登録を聞かれます。忘れずにPath登録してください。

手順３：VSCodeに拡張機能を追加する

以下のプラグインを追加します。

PlantUML：
- VSCode上でPlantUMLを処理するのに最低限必要なプラグインです。

PlantUML Previewer：
- 最終的にこれをインストールすることでプレビューが表示されました。ただし、決め手になったのか確認するためにプラグインをuninstallしたところプレビュー表示はされ続けました。（ナゾです。）

手順４：PlantUMLのjarファイルをセットする

次はPlantUML公式サイトからjarファイルを取得して、VSCodeに登録します。

4-1：公式サイトからjarファイルをDLする

以下が日本サイトのDLページです。広告が多いので惑わされないようにしてください。私はMITライセンスのjarファイルをDLしました。

PlantUML Downloads and Source Code

plantuml-mit-1.2024.3.jarという名称のファイルがDLされました。

4-2：jarファイルを適当なフォルダに保存する

保存したjarファイルをVSCodeに登録しますので、どこに保存したかを忘れないでください。

4-3：VSCodeの設定にjarファイルを登録する

VSCodeを起動して、設定画面を開き、保存したjarファイルを登録します。

セッティング画面はショートカットキー（「Ctrl+､」）で開くことができます。（メニューからだと「File ->Preferences->Settings」で開けます。）

Search settingsの領域にmarkdown-preview-enhanced.plantumlJarPathと入力してください。
Plantuml:Jarの項目に先ほど保存したjarファイルをフルパスで記載します。

結果

上記の作業を行うことでVSCode上でMarkdownファイルのプレビュー画面上にPlantUMLの表示を行うことができました。

さいごに

最終的にPlantuml:Jarの記述を削除し、PlantUML Previewerをuninstallしてもプレビューは表示されています。環境構築を実施したときは一度でうまくいかなかったので、上記手順を前後しながら作業を行いました。なので無駄な工程が混ざっているかもしれませんし、そもそも再現性が無いかもしれません。現時点でなぜプレビューが表示されているのかよくわかりません。

なので、もしうまくプレビューが表示できていない人がいるなら、いろいろ試してみてください。その際に上記手順で示した項目からいじってみるのが良いと思います。

誰かの参考になればうれしいです。

2024-01-07

flutterアプリに永続ストレージ（アプリキャッシュ）を追加する

Flutter

参考文献
shared_preferencesとは
- サポートされているデータ型
手順
- 手順１：shared_preferencesのパッケージを追加
- 手順２：実装

今回は、flutterアプリにshared_preferencesを利用して永続ストレージ機能を追加したいと思います。

参考文献

以下のパッケージを使用します。
- pub.dev
- 上記リンクのReadmeには細かい使い方の注意が記載されています。

shared_preferencesとは

上記リンクには一番最初に以下のような記述がありました。

単純なデータ用のプラットフォーム固有の永続ストレージをラップします (iOS および macOS の NSUserDefaults、Android の SharedPreferences など)。データは非同期でディスクに保存される可能性があり、書き込みが戻った後にディスクに保存されるという保証はないため、このプラグインは重要なデータの保存には使用しないでください。

Platform別のサポート状況とデータ保存先を記載しておきます。

Platform	Support	Storage location
Android	SDK 16+	SharedPreferences
iOS	11.0+	NSUserDefaults
Linux	Any	In the XDG_DATA_HOME directory
macOS	10.14+	NSUserDefaults
Web	Any	LocalStorage
Windows	Any	In the roaming AppData directory

サポートされているデータ型

上記READMEに記載されていた内容です
- Supported data types are int,double,bool,StringandList<String>.

手順

手順１：shared_preferencesのパッケージを追加

私はfvmを導入しているので以下のコマンドでパッケージを追加しました。
```
  fvm flutter pub add shared_preferences
```

コマンド実行結果

(省略)\training_app> fvm flutter pub add shared_preferences
Resolving dependencies...
  _fe_analyzer_shared 64.0.0 (65.0.0 available)
  analyzer 6.2.0 (6.3.0 available)
  flutter_lints 2.0.3 (3.0.1 available)
  js 0.6.7 (0.7.0 available)
  lints 2.1.1 (3.0.0 available)
  matcher 0.12.16 (0.12.16+1 available)
  material_color_utilities 0.5.0 (0.8.0 available)
  meta 1.10.0 (1.11.0 available)
  path 1.8.3 (1.9.0 available)
+ path_provider_linux 2.2.1
+ path_provider_platform_interface 2.1.1
+ path_provider_windows 2.2.1
+ platform 3.1.4
+ shared_preferences 2.2.2
+ shared_preferences_android 2.2.1
+ shared_preferences_foundation 2.3.4
+ shared_preferences_linux 2.3.2
+ shared_preferences_platform_interface 2.3.1
+ shared_preferences_web 2.2.2
+ shared_preferences_windows 2.3.2
  test_api 0.6.1 (0.7.0 available)
  web 0.3.0 (0.4.0 available)
  web_socket_channel 2.4.0 (2.4.1 available)
+ xdg_directories 1.0.4
Changed 12 dependencies!
12 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

手順２：実装

省略（実装したときに追記するかもしれない）

2024-01-07

flutterアプリにimmutableなデータ管理を簡単にするfreezedを追加する

Flutter

参考文献
freezedとは
使用するパッケージ
手順

今回は、flutterアプリにimmutableなデータ管理を簡単にするfreezedを追加したいと思います。

参考文献

以下のパッケージを使用します。
- pub.dev
- 上記リンクのReadmeには細かい使い方の注意が記載されています。

freezedとは

上記リンクには一番最初に以下のような記述がありました。

Welcome to Freezed, yet another code generator for data-classes/unions/pattern-matching/cloning. (データクラス/ユニオン/パターンマッチング/クローン作成のためのさらに別のコードジェネレーターである)

さらに原文の翻訳結果を記載しておきます

Dart は素晴らしいですが、「モデル」を定義するのは面倒な場合があります。次のことを行う必要があるかもしれません。

コンストラクター + プロパティを定義する

上書きtoString、、operator ==_hashCode

copyWithオブジェクトのクローンを作成するメソッドを実装する

逆シリアル化の処理

これらすべてを実装するには数百行かかる可能性があり、エラーが発生しやすく、モデルの可読性に大きな影響を与えます。

Freezed は、これらのほとんどを実装することで問題を修正し、ユーザーがモデルの定義に集中できるようにします。

私は「モデル定義やモデル管理のコードの大部分を自動生成してくれるコードジェネレータ」と理解しました

使用するパッケージ

以下のパッケージを使用します。
- pub.dev
- 上記リンクのReadmeには細かい使い方の注意が記載されています。

手順

手順１：freezedのパッケージを追加

私はfvmを導入しているので以下のコマンドでパッケージを追加しました。

  fvm flutter pub add freezed_annotation
  fvm flutter pub add dev:build_runner
  fvm flutter pub add dev:freezed
  # if using freezed to generate fromJson/toJson, also add:
  fvm flutter pub add json_annotation
  fvm flutter pub add dev:json_serializable

コマンド実行結果（freezed_annotation）

(省略)\training_app> fvm flutter pub add freezed_annotation
Resolving dependencies...
  _fe_analyzer_shared 64.0.0 (65.0.0 available)
  analyzer 6.2.0 (6.3.0 available)
  flutter_lints 2.0.3 (3.0.1 available)
  freezed_annotation 2.4.1 (from transitive dependency to direct dependency)
  js 0.6.7 (0.7.0 available)
  lints 2.1.1 (3.0.0 available)
  matcher 0.12.16 (0.12.16+1 available)
  material_color_utilities 0.5.0 (0.8.0 available)
  meta 1.10.0 (1.11.0 available)
  path 1.8.3 (1.9.0 available)
  test_api 0.6.1 (0.7.0 available)
  web 0.3.0 (0.4.0 available)
Changed 1 dependency!
11 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

コマンド実行結果（dev:build_runner）

(省略)\training_app> fvm flutter pub add dev:build_runner
Resolving dependencies...
  _fe_analyzer_shared 64.0.0 (65.0.0 available)
  analyzer 6.2.0 (6.3.0 available)
+ build_daemon 4.0.1
+ build_resolvers 2.4.2
+ build_runner 2.4.7
+ build_runner_core 7.2.11
+ built_collection 5.1.1
+ built_value 8.8.1
+ code_builder 4.9.0
+ fixnum 1.1.0
  flutter_lints 2.0.3 (3.0.1 available)
+ frontend_server_client 3.2.0
+ graphs 2.3.1
+ http_multi_server 3.2.1
+ http_parser 4.0.2
+ io 1.0.4
  js 0.6.7 (0.7.0 available)
  lints 2.1.1 (3.0.0 available)
  matcher 0.12.16 (0.12.16+1 available)
  material_color_utilities 0.5.0 (0.8.0 available)
  meta 1.10.0 (1.11.0 available)
+ mime 1.0.4
  path 1.8.3 (1.9.0 available)
+ pool 1.5.1
+ shelf 1.4.1
+ shelf_web_socket 1.0.4
+ stream_transform 2.1.0
  test_api 0.6.1 (0.7.0 available)
+ timing 1.0.1
  web 0.3.0 (0.4.0 available)
+ web_socket_channel 2.4.0 (2.4.1 available)
Changed 20 dependencies!
12 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

コマンド実行結果（dev:freezed）

(省略)\training_app> fvm flutter pub add dev:freezed
Resolving dependencies...
  _fe_analyzer_shared 64.0.0 (65.0.0 available)
  analyzer 6.2.0 (6.3.0 available)
  flutter_lints 2.0.3 (3.0.1 available)
+ freezed 2.4.6
  js 0.6.7 (0.7.0 available)
  lints 2.1.1 (3.0.0 available)
  matcher 0.12.16 (0.12.16+1 available)
  material_color_utilities 0.5.0 (0.8.0 available)
  meta 1.10.0 (1.11.0 available)
  path 1.8.3 (1.9.0 available)
+ source_gen 1.5.0
  test_api 0.6.1 (0.7.0 available)
  web 0.3.0 (0.4.0 available)
  web_socket_channel 2.4.0 (2.4.1 available)
Changed 2 dependencies!
12 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

コマンド実行結果（json_annotation）

(省略)\training_app> fvm flutter pub add json_annotation
Resolving dependencies...
  _fe_analyzer_shared 64.0.0 (65.0.0 available)
  analyzer 6.2.0 (6.3.0 available)
  flutter_lints 2.0.3 (3.0.1 available)
  js 0.6.7 (0.7.0 available)
  json_annotation 4.8.1 (from transitive dependency to direct dependency)
  lints 2.1.1 (3.0.0 available)
  matcher 0.12.16 (0.12.16+1 available)
  material_color_utilities 0.5.0 (0.8.0 available)
  meta 1.10.0 (1.11.0 available)
  path 1.8.3 (1.9.0 available)
  test_api 0.6.1 (0.7.0 available)
  web 0.3.0 (0.4.0 available)
  web_socket_channel 2.4.0 (2.4.1 available)
Changed 1 dependency!
12 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

コマンド実行結果（dev:json_serializable）

(省略)\training_app> fvm flutter pub add dev:json_serializable
Resolving dependencies...
  _fe_analyzer_shared 64.0.0 (65.0.0 available)
  analyzer 6.2.0 (6.3.0 available)
  flutter_lints 2.0.3 (3.0.1 available)
  js 0.6.7 (0.7.0 available)
+ json_serializable 6.7.1
  lints 2.1.1 (3.0.0 available)
  matcher 0.12.16 (0.12.16+1 available)
  material_color_utilities 0.5.0 (0.8.0 available)
  meta 1.10.0 (1.11.0 available)
  path 1.8.3 (1.9.0 available)
+ source_helper 1.3.4
  test_api 0.6.1 (0.7.0 available)
  web 0.3.0 (0.4.0 available)
  web_socket_channel 2.4.0 (2.4.1 available)
Changed 2 dependencies!
12 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

手順２：実装

省略（実装したときに追記するかもしれない）

手順３：コード生成

fvm flutter pub run build_runner build

コマンド実行結果

(省略)\training_app> fvm flutter pub run build_runner build
[INFO] Generating build script...
[INFO] Generating build script completed, took 442ms

[INFO] Precompiling build script......
[INFO] Precompiling build script... completed, took 7.3s

[INFO] Initializing inputs
[INFO] Building new asset graph...
[INFO] Building new asset graph completed, took 2.8s

[INFO] Checking for unexpected pre-existing outputs....
[INFO] Checking for unexpected pre-existing outputs. completed, took 1ms

[INFO] Running build...
[INFO] Generating SDK summary...
[INFO] 2.8s elapsed, 0/10 actions completed.
[INFO] 5.0s elapsed, 0/10 actions completed.
[INFO] 6.1s elapsed, 0/10 actions completed.
[INFO] Generating SDK summary completed, took 6.1s

[INFO] 7.2s elapsed, 18/34 actions completed.
[INFO] 8.3s elapsed, 30/46 actions completed.
[INFO] 16.5s elapsed, 43/54 actions completed.
[INFO] Running build completed, took 17.5s

[INFO] Caching finalized dependency graph...
[INFO] Caching finalized dependency graph completed, took 101ms

[INFO] Succeeded after 17.6s with 48 outputs (126 actions)

特にコードを実装していない状態でしたが、上記出力がありました