【ImageMagick】グラデーションな色で塗りつぶした縁取り極太テキスト画像って使えるよな

こういうやつ。背景は透明。

コピペで貼り付けるだけでサムネとかSNS画像を作成できます。



 

🖌️ 作り方

ImageMagick で作ります。


brew install imagemagick

まず、透明背景画像を作成します。


magick -size 2000x200 xc:none \
output.png

透明な画像が生成されました。

グラデーションな色で塗りつぶした縁取り極太テキスト画像って使えるよな

続いてこれにテキストを書き込みます。

フォントは「LINE-Seed-JP_OTF-ExtraBold」、フォントの輪郭の線の色と太さは「white」、「10」とします。


magick -size 2000x200 xc:none \
-font LINE-Seed-JP_OTF-ExtraBold \
-pointsize 160 \
-fill none -stroke white -strokewidth 10 \
-annotate +10+160 "お手軽簡単!" \
output.png

グラデーションな色で塗りつぶした縁取り極太テキスト画像って使えるよな

グラデーションな色で塗りつぶした縁取り極太テキスト画像って使えるよな

👉 LINE Seed hatena-bookmark

さらに、この輪郭線の上に「black」で「2」の線を重ねます。


magick -size 2000x200 xc:none \
-font LINE-Seed-JP_OTF-ExtraBold \
-pointsize 160 \
-fill none -stroke white -strokewidth 10 \
-annotate +10+160 "お手軽簡単!" \
-fill none -stroke black -strokewidth 2 \
-annotate +10+160 "お手軽簡単!" \
output.png

グラデーションな色で塗りつぶした縁取り極太テキスト画像

グラデーションな色で塗りつぶした縁取り極太テキスト画像って使えるよな

さらに、この上に、グラデーションの色「red-orange」で塗りつぶされたテキストを重ねます。


magick -size 2000x200 xc:none \
-font LINE-Seed-JP_OTF-ExtraBold \
-pointsize 160 \
-fill none -stroke white -strokewidth 10 \
-annotate +10+160 "お手軽簡単!" \
-fill none -stroke black -strokewidth 2 \
-annotate +10+160 "お手軽簡単!" \
-tile "gradient:red-orange" \
-annotate +10+160 "お手軽簡単!" \
output.png

グラデーションな色で塗りつぶした縁取り極太テキスト画像

グラデーションな色で塗りつぶした縁取り極太テキスト画像って使えるよな

最後に、不要なまわりの透明部分を取り除きます。


magick -size 2000x200 xc:none \
-font LINE-Seed-JP_OTF-ExtraBold \
-pointsize 160 \
-fill none -stroke white -strokewidth 10 \
-annotate +10+160 "お手軽簡単!" \
-fill none -stroke black -strokewidth 2 \
-annotate +10+160 "お手軽簡単!" \
-tile "gradient:red-orange" \
-annotate +10+160 "お手軽簡単!" \
-trim \
output.png

グラデーションな色で塗りつぶした縁取り極太テキスト画像って使えるよな

 

🖌️ まとめ

変更になりそうなパラメータは引数にしておきます。

あと実行後は、プレビューで開いてすぐ確認できるようにしておきます。



お好みの各引数は選択肢として ショートカットにしておけばターミナルを使う必要もない。

それなりのデザイン的なアプリで作るのもいいですが、ササっと作りたい人はどうぞ。




【WordPress】ダッシュボードの Jetpack 統計 のグラフが読み込み中のまま表示されない 😩

表示されなくなるんです、管理画面のアクセス数のグラフ。

ダッシュボードの Jetpack 統計 のグラフが読み込み中のまま表示されない

 

😩 管理画面新機能に切り替えてから発生

管理画面のどこかで「新機能に切り替えますか」と表示されたので「はい」を押してから、表示できなくなった。

ので、以前の機能に戻す。


管理画面メニュー

 |

Jetpack

 |

設定

 |

トラフィック

 |

Jetpack 統計

 |

「新しい Jetpack 統計情報のエクスペリエンスを有効化」をOFF

ダッシュボードの Jetpack 統計 のグラフが読み込み中のまま表示されない

直接行くなら、URLは以下です。


https://your.wordpress.host/wp-admin/admin.php?page=jetpack#/settings?term=stats

 

😩 400 Bad Request もよく表示される不具合

再度、ONにしようとすると、


設定の更新中にエラーが発生しました。 JsonParseError

と表示されたり、

以下ように表示されて管理画面や公開サイト部分にもアクセスできなくなったり。

「新しい Jetpack 統計情報のエクスペリエンスを有効化」をOFF


400 Bad Request
Request Header Or Cookie Too Large

クッキーを削除するまで管理画面にアクセスできません。

消すしかないので以下から。


chrome://settings/clearBrowserData

 

😩 まとめ

何が原因なのか謎。

根本的に解決はしていません。

一体、なんなんすかね。


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


print(len("👩‍👧‍👦"))
# 5

絵文字1文字の長さが「5」。

コードポイントの個数ですね!

 

😀 文字を数える

データを15文字で作ります。

この文字をカウントするのは、re でどう書くのか分からなかったので、ライブラリを使いました。

👉 regex 2022.10.31 on PyPI - Libraries.io hatena-bookmark

Matching a single grapheme \X
The grapheme matcher is supported. It conforms to the Unicode specification at http://www.unicode.org/reports/tr29/.

👉 mrabarnett/mrab-regex hatena-bookmark


print(len(regex.findall(r'\X', data)))
# 15

正しくカウントできました!

 

😀 文字の構成(要素)を確認する

作ったデータを使って、各文字に含まれるコードポイントを確認するスクリプトを書いて実行してみます。


dump(data)

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

うまくそれぞれの絵文字の構成要素が分かるようになりました。

 

😀 まとめ

Python ではコードポイントをそのまま \UXXXXXXXX の形式で書けるので便利。

Kotlin では以下から。



GitHub Emoji Unicode Full Emoji List - shortcode | code point | escape-sequence

絵文字の「ショートコード」は各プラットフォームごとに異なるので困ったものです。

GitHub でショートコードが用意されている絵文字は、最新の Unicode 絵文字バージョンではないようですが、Facebook、Twitter など大手プラットフォームで直接を生貼りでも問題なく使えるような雰囲気です。

👉 Emojis - GitHub Docs




「GitHub ショートコード」と「Unicode コードポイント」、「Unicode エスケープシーケンス」をスクリプトで一覧にして書き出しておきます。

一番左の「emoji」カラムは絵文字クリックから Emojipedia に飛べます。




👉 Python vs Kotlin Unicode Escape Sequence (エスケープシーケンス) の記述 hatena-bookmark


【ChatGPT】Git comit message (コミットメッセージ) をサクッと簡単に作る macOS ショートカットと OPENAI プロンプト 🤖

Git のコミットメッセージに


- 英語で書くか日本語で書くか
- 絵文字を入れるか入れないか
- prefix を付けるか付けないか

という面倒な話はすべて解決します。

以下の動画のようなショートカットツールです。



 

🤖 プロンプト

ここがポイントです。


Create 10 git commit messages in English for the following changes in the following format. The emoji should be one of the github-shortcode characters that matches your changes.

Format: "emoji :github-shortcode: prefix:commit-message" 
Change Description: "アプリ起動時間のの短縮"

これをベースに会社や上司やプロジェクトの環境によって書き換えればいけます。


- 10
- English
- emoji
- shortcode
- prefix

ここらが変更対象の単語となるでしょう。

 

🤖 ChatGPT API

ChatGPT API を使うには課金登録して OPENAI_API_KEY が必要です。

macOS/iOS ショートカットアプリは、コンポーネントに


- WEB クライアント
- JSON パーサー

の機能を含む「Get Content of URL」という部品があらかじめ用意されています。

しかも、


- リクエストメソッド
- リクエストヘッダー
- リクエストボディ

を GUI からノーコードで設定できるので便利です。

 

🤖 ダウンロード

ショートカットは無料で公開できて、だれでもダウンロードして利用することがきます。


👉 Git Commit Message 😄 hatena-bookmark

[編集] から OPENAI_API_KEY を貼り付けると利用可能になります。

 

🤖 まとめ

ChatGPT API を使うには課金登録が必要ですが、この程度の利用ではいくらコミットしてもジュース1本分の金額には届きません。

実際に使いながら WEB API クライアントのプログラミング実装の基本を学ぶにも最適な教材になると思います。

今回は、厳格なプログラム作成に集中したあとに、ふんわりとしたコミットメッセージ作成はなんとなくつらく思えるので作ってみました。

この記事は、以下のプロジェクトのプロンプトにインスパイアされています。


    Refer to the provided git diff or code snippet and provide a suitable commit message.

    When reviewing the diff or code, focus on identifying the main purpose of the changes.
    Are they fixing a bug, adding a new feature, improving performance or readability, or something else?
    Use this information to craft a concise and detailed gitmoji commit message that clearly describes what the provided code or diff does.

    Describe the change to the best of your capabilities in one short sentence. Don't go into too much detail.

    When reviewing a diff, pay attention to the changed filenames and extract the context of the changes.
    This will help you create a more relevant and informative commit message.
    Here are some examples of how you can interpret some changed filenames:
      - Files or filepaths that reference testing are usually related to tests.
      - Markdown files are usually related to documentation.
      - Config file adjustments are usually related to configuration changes.

    Here is a list of gitmoji codes and their descriptions of what they mean when they are used: """
    ${gitmojis}
    """

    Try to match the generated message to a fitting emoji using its description from the provided list above.
    So go look in the descriptions and find the one that best matches the description.

    Always start your commit message with a gitmoji followed by the message starting with a capital letter.
    Never mention filenames or function names in the message.

    Don't do this:
      - :bug: Fix issue in calculateTotalPrice function
      - :zap: Improve performance of calculateTopProducts function
      - :lipstick: Refactor styling for calculateCartTotal function
      - :memo: Update documentation for getProductById function

    Do this:
      - :bug: Fix issue with shopping cart checkout process
      - :zap: Improve performance of search functionality
      - :lipstick: Refactor styling for product details page
      - :memo: Update documentation for API endpoints

    ${
      context
        ? `
          Refer to the provided additional context to assist you with choosing a correct gitmoji
          and constructing a good message: """
          ${context}
          """
        `
        : ''
    }

    Here is the provided git diff or code snippet: """
    ${prepareDiff(diff, minify)}
    """

👉 Generate your gitmoji commit message 👋 hatena-bookmark