Android JetpackCompose での OptionMenu - Alternative for OptionMenu in JetpackCompose

Android JetpackCompose で TopAppBar に入れるべく「メニューボタン」をどうするか。

こんな感じになりました。

今現在は、この Box + DropDownMenu でいこうかと思っています。

以下記事から。

A DropdownMenu behaves similarly to a Popup, and will use the position of the parent layout to position itself on screen. Commonly a DropdownMenu will be placed in a Box with a sibling that will be used as the 'anchor'.

DropdownMenu は Popup と同様の動作をし、親レイアウトの位置を利用して画面上に配置されます。DropdownMenu
は「アンカー」として使用される兄弟を持つ Box に配置されます。

👉 android - Jetpack compose popup menu - Stack Overflow hatena-bookmark


@Composable
fun MenuButton() {

  val context = LocalContext.current
  var expanded by remember { mutableStateOf(false) }

  Box {

    IconButton(onClick = { expanded = true }) {
      Icon(Icons.Filled.MoreVert, null)
    }

    DropdownMenu(
      expanded = expanded,
      onDismissRequest = { expanded = false },
    ) {
      DropdownMenuItem(
        onClick = {
          expanded = false
          context.startActivity(
            Intent(Intent.ACTION_VIEW, Uri.parse("https://platform.openai.com/account/usage"))
          )
        }
      ) {
        Text(text = "Usage")
      }
      Divider()
      DropdownMenuItem(onClick = {
        expanded = false
        context.startActivity(
          Intent(Intent.ACTION_VIEW, Uri.parse("https://platform.openai.com/docs/api-reference"))
        )
      }) {
        Text(text = "API reference")
      }
    }

  }

}

こんなところでしょうか。

TopAppBar にセットするなら、以下のように action へ。


TopAppBar(
  title = { Text("Simple TopAppBar") },
  navigationIcon = {
    IconButton(onClick = { /* doSomething() */ }) {
      Icon(Icons.Filled.Menu, contentDescription = null)
    }
  },
  actions = {
    MenuButton()
  }
)

汎用性を上げるなら引数を考慮して、labelaction のペアのリストを渡してループ、などするとよいです。

👉 DropdownMenu | androidx.compose.material  |  Android Developers hatena-bookmark



OpenAI ChatGPT の API_KEY を取得する方法

アカウント作成している方は取得できます。

以下のリンクにアクセスしてコピーです。

👉 Account API Keys - OpenAI API hatena-bookmark

OpenAI ChatGPT の API_KEY を取得する

あとは必要とする入力欄にペーストすればOKです。



ChatGPT の「表」をターミナルで表示する方法

ターミナルでコマンドラインで実行している人はこうなります。


サザエさんの登場人物を表で説明して

ChatGPT の「表」をターミナルで表示する方法

見づらいです。

Markdown がテキストとしてそのまま表示されていますね。

 

■ Markdown CLI「Glow」を使う

👉 charmbracelet/glow: Render markdown on the CLI, with pizzazz! 💅🏻 hatena-bookmark

以下のように使います。

echo "[Glow](https://github.com/charmbracelet/glow)"

Markdown 文字列を標準出力としてパイプで渡すと変換して表示してくれます。

ChatGPTの出力処理部分に追加して実行すると、

ChatGPT の「表」をターミナルで表示する方法

見やすい形で表示されました!

しかし、「デヴィ夫人」てサザエさんに出たん?