月: 2023年4月

Mermaid記法でドキュメントを書いてgithubで管理する

ドキュメントを管理する上で色んな選択肢がありますが、Mermaid記法というのがあり、図をマークアップのように書けます。Mermaid記法はgithubでサポートされており、図のプレビューに対応しているのでMarkdown記法と組み合わせて使うことでドキュメントが見やすくなります。またMermaid記法のドキュメントを書くときはVSCodeのプラグインがあるので書きながらプレビューを見たりすることが可能です。

図の一例を下記に記載します。

フローチャート
```mermaid
graph TD;
    A-->B;
    B-->C;
    C-->A;
```
シーケンス図
```mermaid
sequenceDiagram
    participant A
    participant B
    A->>B: Attack A to B
    loop defence
      B->>B: defence loop
    end
    B->>A: Attack B to A 
```
Gitグラフ
```mermaid
gitGraph
    commit
    branch develop
    commit
    checkout main
    commit
```
ガントチャート
```mermaid
gantt
dateFormat YYYY-MM-DD
title タイトル
excludes weekdays 2022-12-30

section A section
完了 :done, task1, 2023-01-01, 2023-01-02
作業中 :active,  task2, 2023-01-08, 3d
未来のタスク :  task3, after task2, 2d
```

日付が近すぎると日付が重なって表示される…

クラス図
```mermaid
classDiagram
    classA --|> classB: ラベル
    classA <|--|> classB
    classC *--*   classD
    classE o--o   classF
    classG <-->   clasH
    classI --     classJ
    classK <..>   classL
    classM <|..|> classN
    classO ..     classP
```
ER図
```mermaid
erDiagram
    END_USER ||--o{ PROVIDER : places
    END_USER }|..|{ OBSERVER : uses
```
円グラフ
```mermaid
pie 
    title タイトル
    "nice" : 40
    "bad" : 60
```

これ以外にも図の種類や書き方があるので詳細は公式サイトを見たほうが良さそうです。

https://mermaid.js.org/intro/


[Android] ビルドスクリプトの標準がGroovyDSLからKotlinDSLになりました

https://android-developers.googleblog.com/2023/04/kotlin-dsl-is-now-default-for-new-gradle-builds.html

今までAndroidStudioで新しいプロジェクトを作成するとGroovyDSLでビルドスクリプトが書かれていまいたが、多くのライブラリがKotlinファーストになっている中、ビルドスクリプトもKotlinで書くようになりました。

KotlinDSLは約3年前からAndroidStudioで使える状態にはなっていましたが、AndroidStudio Giraffe previewからAndroidアプリ開発の標準ビルドスクリプトとして利用されます。


[Android] AndroidViewの一部をJetpackComposeにする

AndroidViewで実装していたGUIをJetpackComposeに移行していく場合、一度に全てのGUIを移行するのは難しいですし、少しつづリリースしたい時もあるかと思います。その場合はGUI一つづつJetpackComposeにしていくとJetpackComposeに移行しやすいです。

今回はAndroidView内にあるFloatingActionButtonをJetpackComposeにします。build.gradle.ktsに下記のライブラリを追加します。

implementation("androidx.compose.ui:ui:1.1.1")
implementation("androidx.compose.material3:material3:1.0.1"

バージョンは2023年4月時点なので適宜変更してください。またjetpackComposeはKotlinのバージョンと依存関係があるので適切なバージョンを選択してください。Kotlinのバージョンアップによってはgradleのバージョンやhiltのバージョンも変更が必要になるかもしれません。

AndroidViewのレイアウトXMLは必要な部分のみ書きます。JetpackComposeに置き換えたいViewをComposeViewとしてレイアウトXMLに入れます。ファイル名はfragment_compose.xmlとします。

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 他のView -->
    
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/fab"
        android:layout_margin="@dimen/fab_margin"
        android:padding="@dimen/fab_padding"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"/>

    <!-- 他のView -->

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Fragment側のコードも必要な部分のみ抜粋します。

class ComposeFragment : Fragment() {
    private var _viewBinding: FragmentComposeBinding? = null
    private val viewBinding get() = _viewBinding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _viewBinding = FragmentComposeBinding.inflate(layoutInflater, container, false)
        viewBinding.fab.setContent { Fab() }
        return viewBinding.root
    }

    @Composable
    fun Fab() {
        ExtendedFloatingActionButton(
            expanded = true,
            onClick = { /* fabがクリックされた時の処理 */ },
            icon = { Icon(Icons.Filled.Add, null) },
            text = { Text(text = "表示する文字列") },
        )
    }
}

ComposeView.setContent { }でComposableを指定するところがポイントですね。これを繰り返すことでAndroidViewからJetpackComposeに少しづつ移行できそうです。