テキストアニメーションで Progress Indicator

久しぶりに使ってみたら進化していました。

👉 【KMM】KDoctor って生きてるの? hatena-bookmark

こんな経過表示。

progressSymbols

おされなのでコードを見てみます。


private val progressSymbols = listOf("⣷", "⣯", "⣟", "⡿", "⢿", "⣻", "⣽", "⣾")
private fun ProducerScope<String>.showDiagnosticProgress(title: String) = launch {
    var progressIndex = 0
    while (isActive) {
        progressIndex = (progressIndex + 1) % progressSymbols.size
        val symbol = progressSymbols[progressIndex]
        send("\r[$symbol] $title")
        delay(60)
    }
}

👉 kdoctor/Doctor.kt at master · Kotlin/kdoctor · GitHub hatena-bookmark


"⣷", "⣯", "⣟", "⡿", "⢿", "⣻", "⣽", "⣾"

点字用の文字を使ってアニメーションにしているようです。

👉 Braille pattern dots-12456 - Wikipedia hatena-bookmark

bash にしてみます。


Text Animation using Braille pattern dots

かわいいです！

\r (キャリッジリターン) ってこんな使い方があるんですね！

👉 キャリッジ・リターン - Wikipedia hatena-bookmark

絵文字が意図しない白黒で表示される ➡️ - Unicode Variation Selector

一部の絵文字が白黒の記号と表示される場合があります。

カラーの絵文字と思いきや白黒。


Text("\u2B06\u27A1\u2B07\u2B05\u2195")

直接コードに絵文字埋め込むと意図通りに表示される。


// ブラウザ上でもうまく表示されないものがある。
Text("⬆️➡️⬇️⬅️↕️")

コードはわかりやすく Android Jetpack Compose にしています。

IDEのエディター上からコード内に直接絵文字を書くことができる感じもありますが、編集時にイラッとすること多いので直接書きたくありません。

これは、デバイスやOSやアプリが使用しているフォントだけに依るものなのでしょうか。

私の端末では、白黒とカラー両方の矢印を見たような気がする。

 

➡️ 調べてみる

この記事。

👉 Emoji displayed as monochrome symbol? 🤔 The Unicode variation selector hatena-bookmark

まとめると以下。

一部の記号は、意図しない白黒、またはカラー絵文字として表示される。

Unicode Variation Selector を使うとある程度制御できる。

Unicode Variation Selector を使用しない場合はシステム次第。

絵文字ピッカーには Unicode Variation Selector が含まれないものもある。

Mac の絵文字ピッカーや Emojipedia は Unicode Variation Selector が含まれています。

Unicode Variation Selector には  U+FE0E (VS15)と U+FE0F(VS16) が定義されている。

VS15 を追加すると白黒テキスト、VS16 はカラー絵文字が表示されます。

ここに挙げられている、Macの絵文字ピッカー (Control + Command + Space) でみると以下。右クリックで文字情報見れます。


⬆️
up arrow
Unicode: U+2B06 U+FE0F, UTF-8: E2 AC 86 EF B8 8F

⬇️
down arrow
Unicode: U+2B07 U+FE0F, UTF-8: E2 AC 87 EF B8 8F

➡️
right arrow
Unicode: U+27A1 U+FE0F, UTF-8: E2 9E A1 EF B8 8F

⬅️
left arrow
Unicode: U+2B05 U+FE0F, UTF-8: E2 AC 85 EF B8 8F

↕️
up-down arrow
Unicode: U+2195 U+FE0F, UTF-8: E2 86 95 EF B8 8F


⬆︎
UPWARDS BLACK ARROW
Unicode: U+2B06 U+FE0E, UTF-8: E2 AC 86 EF B8 8E

⬇︎
DOWNWARDS BLACK ARROW
Unicode: U+2B07 U+FE0E, UTF-8: E2 AC 87 EF B8 8E

➡︎
BLACK RIGHTWARDS ARROW
Unicode: U+27A1 U+FE0E, UTF-8: E2 9E A1 EF B8 8E

⬅︎
LEFTWARDS BLACK ARROW
Unicode: U+2B05 U+FE0E, UTF-8: E2 AC 85 EF B8 8E

⬍
UP DOWN BLACK ARROW
Unicode: U+2B0D, UTF-8: E2 AC 8D

同様に、以下からコピーした絵文字も Variation Selector きちんと入ってます。

👉 📙 Emojipedia — 😃 Home of Emoji Meanings 💁👌🎍😍 hatena-bookmark

入ってないツールや絵文字サイトもありますので注意です。

 

➡️ 試してみる

String がどうなってるか拡張関数を作っておきます。



これを使って詳細見てみます。


"⬆➡⬇⬅↕".printUnicodeEscapeSequences()

"⬆︎➡︎⬇︎⬅︎↕︎".printUnicodeEscapeSequences()

"⬆️➡️⬇️⬅️↕️".printUnicodeEscapeSequences()

"⬆️".printUnicodeEscapeSequences()

"➡️".printUnicodeEscapeSequences()

"⬇️".printUnicodeEscapeSequences()

"⬅️".printUnicodeEscapeSequences()

"↕️".printUnicodeEscapeSequences()

結果。


⬆➡⬇⬅↕
\u2B06\u27A1\u2B07\u2B05\u2195

⬆︎➡︎⬇︎⬅︎↕︎
\u2B06\uFE0E\u27A1\uFE0E\u2B07\uFE0E\u2B05\uFE0E\u2195\uFE0E

⬆️➡️⬇️⬅️↕️
\u2B06\uFE0F\u27A1\uFE0F\u2B07\uFE0F\u2B05\uFE0F\u2195\uFE0F

⬆️
\u2B06\uFE0F

➡️
\u27A1\uFE0F

⬇️
\u2B07\uFE0F

⬅️
\u2B05\uFE0F

↕️
\u2195\uFE0F

 

➡️ まとめ

異体字セレクタ (いたいじセレクタ、英: Variation Selectors) は、Unicode および ISO/IEC 10646 (UCS) における、文字の字体をより詳細に指定するためのセレクタ (選択子) である。

👉 異体字セレクタ - Wikipedia hatena-bookmark

矢印の場合カラー絵文字をある程度強制したい場合の Kotlin 文字列 Unicode 記述は、

「Unicode Variation Selector の \uFE0F (VS16) を文字シンボルの後につける。」


⬆️➡️⬇️⬅️↕️
\u2B06\uFE0F\u27A1\uFE0F\u2B07\uFE0F\u2B05\uFE0F\u2195\uFE0F

Jetpack Compose で書くと以下。


Text("\u2B06\uFE0F\u27A1\uFE0F\u2B07\uFE0F\u2B05\uFE0F\u2195\uFE0F")

逆に、白黒にしたい場合は、\uFE0E (VS15) をつければよい。

別に、layout.xml だろうが strings.xml だろうが同じ。

あと、ちなみに、いつも話題に上がる国旗とか。


🇯🇵
\uD83C\uDDEF\uD83C\uDDF5

👨‍👩‍👧‍👧
\uD83D\uDC68\u200D\uD83D\uDC69\u200D\uD83D\uDC67\u200D\uD83D\uDC67

なげえ。

👉 【Kotlin】絵文字を含む Unicode 文字列の文字数をカウントする方法と文字ごとの構成要素 hatena-bookmark

Android Studio Flamingo 隠された新デザイン「New UI」を有効化する2つの方法 🐦

安定版「Android Studio Flamingo | 2022.2.1」にアップデートしてがっかりしていましたが。

👉 Android Studio Flamingo | 2022.2.1 安定版公開される hatena-bookmark

元々、IDEA Intellij に入ってた「New UI」ですが、

Update: The beta version of the new UI is available to all users in the 2022.3 release.
Go to Settings | Appearance & Behavior | New UI to enable it.

👉 Take Part in the New UI Preview for Your JetBrains IDE | The IntelliJ IDEA Blog hatena-bookmark

今現在「Android Studio Flamingo | 2022.2.1」では、デフォルトで無効化しているようで、実際には機能は同梱されてるようです。

有効化してみましょう。

 

🐦 Registry から適用する

上部メニューから、


[Help]

  ↓

[Find Action]

  ↓

[Registry...]

  ↓

[ide.experimental.ui.***] をチェック

以下のように進んでいきチェックを入れたら Android Studio 再起動です。

How to enable Android Studio new ui

GUI部分のテーマやアイコンが新しいものになり、構成もすっきりした感じになります。

または、キーボードショートカットからでも、Registry 画面にいけます。

👉 How to enable Android Studio new ui - Stack Overflow hatena-bookmark

 

🐦 プラグインを使う

このツイート。


WEBページから .jar をダウンロードして、Plugins から import します。

Enable new UI
Android Studio 2022.2 has a new UI that can be unlocked with a plugin. While the official plugin is in closed beta, we’ve made an equivalent plugin that does the job and unlocks the new UI with the same settings and new color schemes.

👉 Hueflake for Android Studio · Hueflake hatena-bookmark

こちらも再起動で綺麗に適用されます。

 

🐦 まとめ

どこか具合が悪いのか、未検証なのか謎ですが、新デザインでまあモチベーションは上がります。

問題あるようなら戻したいと思います。