【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

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

 

🖌️ まとめ

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

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



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

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




【Mac】プレビューで画像をコピペして保存すると白黒(グレー)になる件 🎨

便利な macOS プレビューアプリですが、

絵を描いて保存した瞬間になぜか白黒になるものがある。

このように丸を描いて保存すると、

こうなってしまいます。

上に画像をコピペで貼り付けした場合もグレーになってしまいます。

エクスポートしても同じ。

画像の形式の話だろうけど、どうしたらいいのか。

👉 プレビューからコピーした画像が白黒にな… - Apple コミュニティ hatena-bookmark

👉 saving Preview annotations color - Apple Community hatena-bookmark

 

🎨 画像形式を確認する

元画像は w.png。

プレビューの [ツール] - [インスペクター] で。

「Gray」と表示されてるのが気になります。

コマンドラインでも見てみます。


❯ file w.png
w.png: PNG image data, 300 x 300, 1-bit grayscale, non-interlaced

❯ identify w.png
w.png PNG 300x300 300x300+0+0 8-bit Grayscale Gray 2c 346B 0.000u 0:00.024

❯ pngcheck w.png
OK: w.png (300x300, 1-bit grayscale, non-interlaced, 97.0%).

「grayscale (グレースケール)」とどれも表示されています。

👉 pngcheck - verifies the integrity of PNG, JNG and MNG files

 

🎨 ImageMagick でPNG形式を変換する

以下で変換できるようです。

You need to supply PNG24, PNG8 or PNG32 prefix if planning to use this canvas to layer colour images over. Without it, it creates a Grey colour space. I used 32, as I need "varying degrees of transparency for each pixel"

このキャンバスを使用してカラー画像を重ねる場合は、PNG24、PNG8、または PNG32 プレフィックスを指定する必要があります。これがないとグレーの色空間が作成されます。 私の場合は、各ピクセルの透明度を変える必要があるので 32 を使用しました。


convert w.png png32:w.png

👉 Create blank image in Imagemagick - Stack Overflow hatena-bookmark

上記コマンドを実行して変換後、確認してみます。


❯ file w.png
w.png: PNG image data, 300 x 300, 8-bit/color RGBA, non-interlaced

❯ identify w.png
w.png PNG 300x300 300x300+0+0 8-bit sRGB 1294B 0.000u 0:00.000

❯ pngcheck w.png
OK: w.png (300x300, 32-bit RGB+alpha, non-interlaced, 99.6%).

「graayscale」という文字は消えています。

再度、赤い丸を描いて保存するといけました!

 

🎨 まとめ

最初に開くファイルの形式が保存時に影響する。

ちなみに、ImageMagick が対応してるのは以下。


❯ identify -list format | grep PNG
      JNG* PNG       rw-   JPEG Network Graphics
      MNG* PNG       rw+   Multiple-image Network Graphics (libpng 1.6.39)
      PNG* PNG       rw-   Portable Network Graphics (libpng 1.6.39)
             See http://www.libpng.org/ for details about the PNG format.
    PNG00* PNG       rw-   PNG inheriting bit-depth, color-type from original, if possible
    PNG24* PNG       rw-   opaque or binary transparent 24-bit RGB
    PNG32* PNG       rw-   opaque or transparent 32-bit RGBA
    PNG48* PNG       rw-   opaque or binary transparent 48-bit RGB
    PNG64* PNG       rw-   opaque or transparent 64-bit RGBA
     PNG8* PNG       rw-   8-bit indexed with optional binary transparency

しかし、プレビューアプリだけで完結できないものか。

以下の記事がわかりやすく解説されていました。

👉 ImageMagick で PNG の形式を変換 - awm-Tech hatena-bookmark



【Mac】OS標準 プレビュー アプリで画像を新規作成する方法 🎨

いいアプリ見つけた。

Mac標準ソフト「プレビュー」には、図形や線、テキストなどを挿入できるマークアップ機能が搭載されています。しかし、同機能は既存の画像のみに適用できるほか、同ソフトでは新規ファイルも作成できません。それでも簡単な図を作成するために別のペイントツールをダウンロードしたくないという人には、このソフトがオススメです。コンテクストメニューから起動して新規画像のサイズや色を指定すると、画像を作成して自動的に「プレビュー」を開き、マークアップ機能を使えるようになります。

👉 「プレビュー」用の新規ファイル作成|MacFan hatena-bookmark

と思ったら、なぜか動かないので。

 

🎨 ImageMagick で

定番コマンドラインツールをインストールしておきます。


brew install imagemagick


👉 ImageMagick – Convert, Edit, or Compose Digital Images hatena-bookmark

以下のようなコマンドを使います。


convert -size 200x200 xc:white canvas.png

👉 macos - Create PNG/JPG file with commandline on Mac - Stack Overflow hatena-bookmark

これで真っ白な画像ファイルが生成できます。

 

🎨 ショートカットで開く

画像サイズを選択するようにして、先ほどのコマンドをショートカットに仕込みます。


cd ~/Desktop
convert -size {Chosen Item} xc:white {Chosen Item}.png
open -a Preview {Chosen Item}.png

これで、[サイズ選択] → [画像作成] → [プレビューを開く] の流れが実行できます。

サイズや作成先ディレクトリや拡張子はお好みで。

あと、日本語でOS設定している人は open -a するアプリ名が「プレビュー」なのかも。

 

🎨 保存すると白黒になってしまう

ショートカット内コマンドで作成する白キャンバス画像の形式が影響してカラーのまま保存できない。

PNG32:というように作成するファイル名の前にプレフィックスをつけるといい。

ショートカット内コマンドで作成する白キャンバス画像の形式が影響してカラーのまま保存できない。

これでカラーのまま保存できるようになります。

👉 【Mac】プレビューで画像をコピペして保存すると白黒(グレー)になる件 🎨 hatena-bookmark

 

🎨 まとめ

なぜ、Preview は新規キャンバス作成ができないのか。

「プレビュー」ではなくなるからかな。


【Mac】マウスクリックだけでターミナルを開いて好きなコマンドを実行するショートカット

あらかじめ登録しておいたよく使うコマンド群を選択クリックして実行します。

キーボードなしで使えます。

 

💻 AppleScript


Mac 上のターミナルアプリ「iTerm」を起動して、

  ↓

キーボードから文字を入力して実行する。

という操作をスクリプトで実装しています。


on run argv
  set cmd to (item 1 of argv)
  tell application "iTerm"
    create window with default profile
    delay 2
    tell current session of current window
      write text cmd
    end tell
  end tell
end run

どのアプリでも起動したあと、どんな文字でも入力できるので、使い回しができるスクリプトだと思います。

 

💻 ショートカット

上のスクリプトをショートカット内に入れます。

よく使う「引数などのついた」コマンドたちはリスト化して選択できるようにしておきます。

【Mac】マウスクリックだけでターミナルを開いて好きなコマンドを実行するショートカット

Apple ショートカットは簡単なダイアログや選択リストがあらかじめ用意されているので便利ですね。

 

💻 まとめ

しかし、AppleScript ってドキュメントが少ないです。

tell - end tell は入れ子で書いた方が分かりやすいです。



【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