まおちゃんず | #iOS | #Android ファショ通

【スマホ・カメラ不要】Mac上でQRコードをスクリーンキャプチャ→テキスト化するスクリプト

最終更新日時 : 2023-02-27 18:15

パソコンの画面に表示されたQRコードを読み取るときの


スマホを手に取る

  ↓

カメラや読み取りアプリを起動

  ↓

カメラをパソコン画面に向ける

  ↓

読み取り

  ↓

テキストを確認する

  ↓

...

だるいですね!

■ ChatGPT に聞いてみる

以下は、Macで選択範囲をコピーして、その中に含まれるQRコードを読み出し、テキストとQRコードを表示するBashスクリプトです。QRコードの読み出しにはzbarコマンドを使用しています。


#!/bin/bash

# 選択範囲をクリップボードにコピーする
screencapture -i -c -o

# クリップボードにコピーされた画像を一時ファイルに保存する
tmp_file=$(mktemp -t qr_code.XXXXXXXXXX).png
pbpaste -Prefer "public.png" > "$tmp_file"

# zbarを使用してQRコードを読み出す
barcode=$(zbarimg --quiet --raw "$tmp_file")

if [ -n "$barcode" ]; then
    # QRコードのテキストを表示する
    echo "QR Code Text: $barcode"
    # QRコードを作成して表示する
    qrencode -o - "$barcode" | display -
else
    echo "No QR code found in selection."
fi

# 一時ファイルを削除する
rm "$tmp_file"

このスクリプトでは、qrencodeコマンドを使用して、QRコード画像を作成して表示しています。QRコードが検出されなかった場合には、「No QR code found in selection.」と表示します。

このスクリプトをファイルに保存し、実行可能な権限を与えてください。また、zbarコマンドとqrencodeコマンドがインストールされている必要があります。QRコードを表示するためには、ImageMagickパッケージが必要です。

実行すると、クリップボードに範囲指定で画面キャプチャはできます。

しかし、pbpaste でクリップボード内画像データから正しく画像ファイルを生成できませんでした。

■ クリップボード内画像データからファイルを生成する

以下の記事を参考に一時ファイルの生成を行います。


osascript <<EOF
set png_data to the clipboard as «class PNGf»
set the_file to open for access POSIX path of (POSIX file "/tmp/image.png") with write permission
write png_data to the_file
close access the_file
EOF

👉 MacOSでクリップボード上の画像を保存するスクリプト - 神和電子

これで、クリップボードにコピーした画像PNGファイルデータから画像ファイルを作成できるようになりました。

■ QRコードの解析してテキスト化する

続いて、QRコード読み込みしてテキスト化ツールをインストールします。

👉 ZBar/ZBar: Clone of the mercurial repository http://zbar.hg.sourceforge.net:8000/hgroot/zbar/zbar
👉 mchehab/zbar: ZBar is an open source software suite for reading bar codes from various sources, including webcams. As its development stopped in 2012, I took the task of keeping it updated with the V4L2 API. This is the main repository for it. There's a clone at at LinuxTV.org, and another one at gitlab.


❯ brew install zbar


❯ zbarimg -h
usage: zbarimg [options] <image>...

scan and decode bar codes from one or more image files

options:
    -h, --help      display this help text
    --version       display version information and exit
    -q, --quiet     minimal output, only print decoded symbol data
    -v, --verbose   increase debug output level
    --verbose=N     set specific debug output level
    -d, --display   enable display of following images to the screen
    -D, --nodisplay disable display of following images (default)
    --xml, --noxml  enable/disable XML output format
    --raw           output decoded symbol data without converting charsets
    -1, --oneshot   exit after scanning one bar code
    -S<CONFIG>[=<VALUE>], --set <CONFIG>[=<VALUE>]
                    set decoder/scanner <CONFIG> to <VALUE> (or 1)

ファイルから読みとるようなので以下のサンプルQRコードファイル hello.png を読ませて出力を確認しておきます。


❯ zbarimg --quiet hello.png
QR-Code:こんにちは、QRコード!

❯ zbarimg --quiet --raw hello.png
こんにちは、QRコード!

簡単で便利ですね。

■ 修正する

以上を組み合わせて、前述の ChatGPT によるコードを修正しました。

いけました!

Mac では、ショートカット.app から使うと便利です。

Mac メニューバーからショートカットを使ってスクリプトを実行する方法
👉 https://t.co/n3jDr2o2mA #mac #プログラミング pic.twitter.com/0I7Urqwu7i

— chanzmao (@maochanz) March 3, 2023

■ まとめ

ChatGPT て少しデータが古い感じはありますが、動かないとしても、最初からググるよりも、明らかに早くコードを作成できます。

👉 画像ファイルをMacのコマンドラインで表示する - ごずろぐ

Kotlin で Jetpack Compose, Retrofit を使って API リクエスト、JSON パースして、グリッド表示するコードをファイル別に表示して

最終更新日時 : 2023-02-26 17:09

Kotlin で Jetpack Compose と Retrofit を使って API リクエスト、JSON パースして、グリッド表示するためには、以下のようにファイルを分けることができます。

1. API リクエストを行うための Retrofit インターフェースを定義するファイル


interface ApiService {

    @GET("/photos")
    suspend fun getPhotos(): List<Photo>
}

2. API レスポンスを表すデータクラスを定義するファイル


data class Photo(
    val id: Int,
    val title: String,
    val url: String
)

3. API レスポンスをパースして、表示するための画面を定義するファイル


@Composable
fun PhotoGrid() {
    val photos by remember { mutableStateOf<List<Photo>>(emptyList()) }

    LaunchedEffect(Unit) {
        val apiService = Retrofit.Builder()
            .baseUrl("https://jsonplaceholder.typicode.com")
            .addConverterFactory(Json {
                ignoreUnknownKeys = true
            }.asConverterFactory("application/json".toMediaType()))
            .build()
            .create(ApiService::class.java)

        photos = apiService.getPhotos()
    }

    LazyVerticalGrid(cells = GridCells.Adaptive(minSize = 128.dp)) {
        items(photos) { photo ->
            Card(
                modifier = Modifier.padding(4.dp),
                shape = RoundedCornerShape(8.dp),
                elevation = 4.dp
            ) {
                Column(
                    Modifier
                        .fillMaxWidth()
                        .height(128.dp)
                        .padding(8.dp)
                ) {
                    Text(
                        text = photo.title,
                        style = MaterialTheme.typography.subtitle1,
                        maxLines = 2,
                        overflow = TextOverflow.Ellipsis
                    )
                    Spacer(modifier = Modifier.weight(1f))
                    CoilImage(
                        data = photo.url,
                        contentScale = ContentScale.Crop,
                        modifier = Modifier.fillMaxSize()
                    )
                }
            }
        }
    }
}

4. 上記の画面を表示するための Activity もしくは Fragment を定義するファイル


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PhotoGrid()
        }
    }
}

以上のように、ファイルを分けることで、API リクエストやパース、表示を分離し、コードを見やすく、メンテナンスしやすくすることができます。

■ 感想

ただ、一行問いかけただけ。

ChatGPT で、ここまで書けるとは。

Kotlin 今どきよくある JSON リクエストからのパース https://t.co/031uPDFOXX #json #プログラミング

— chanzmao (@maochanz) June 9, 2023

Excel / Spreadsheet / Numbers の列の文字列を一括でQRコードで表示する方法

最終更新日時 : 2023-02-25 11:06

Google Chart API を使ったりプラグインやエクステンションを使ったりする方法もありますが、通信を使わずに完全にローカル処理のみで表示します。

パスワードやシークレットキーなどセキュリティ的に最重要な文字列をQRコードで表示したいこともありますよね。

🔑 準備

Pure python QR Code generator を使います。


pip install qrcode

👉 lincolnloop/python-qrcode: Python QR Code image generator

今回は、サンプルデータとして以下のCSVファイルを作成しました。


title,url
blog,https://android.benigumo.com
facebook,https://www.facebook.com/androidbenigumocom
twitter,https://twitter.com/maochanz

🔑 作成する

CSVファイルをExcel系アプリ(Apple Numbers)で開きます。

QRコードで表示したい列をコピーします。

以下をターミナルで実行すると連続で表示されます。


for uri in $(pbpaste); do qr "$uri";echo "$uri\n\n"; done

以上です。

次回は、これをパスワードマネージャーデータの移行に使います。

#iOS | #Android ファショ通

Swift を身に付けていく過程の記録、最新ニュースや使い方、iPhone、Mac、Android、Python なども。

【スマホ・カメラ不要】Mac上でQRコードをスクリーンキャプチャ→テキスト化するスクリプト

■ ChatGPT に聞いてみる

■ クリップボード内画像データからファイルを生成する

■ QRコードの解析してテキスト化する

■ 修正する

■ まとめ

Kotlin で Jetpack Compose, Retrofit を使って API リクエスト、JSON パースして、グリッド表示するコードをファイル別に表示して

1. API リクエストを行うための Retrofit インターフェースを定義するファイル

2. API レスポンスを表すデータクラスを定義するファイル

`data class Photo( val id: Int, val title: String, val url: String )`

3. API レスポンスをパースして、表示するための画面を定義するファイル

4. 上記の画面を表示するための Activity もしくは Fragment を定義するファイル

■ 感想

Excel / Spreadsheet / Numbers の列の文字列を一括でQRコードで表示する方法

🔑 準備

🔑 作成する

■ ChatGPT に聞いてみる

■ クリップボード内画像データからファイルを生成する

■ QRコードの解析してテキスト化する

■ 修正する

■ まとめ

1. API リクエストを行うための Retrofit インターフェースを定義するファイル

2. API レスポンスを表すデータクラスを定義するファイル data class Photo( val id: Int, val title: String, val url: String )

3. API レスポンスをパースして、表示するための画面を定義するファイル

4. 上記の画面を表示するための Activity もしくは Fragment を定義するファイル

■ 感想

🔑 準備

🔑 作成する

2. API レスポンスを表すデータクラスを定義するファイル

`data class Photo( val id: Int, val title: String, val url: String )`