note

文字入りPNGをサクッと作る ImageMagick がサクッとM1に入らなかった話

WebサイトにPrivacyPolicyのページを設置することになりました。偶然にも依頼が2件です。

１件は複業でご依頼いただいたものでsquarespaceのサイトに設置、もう１件はGooglePlayStoreからです。

GooglePlayStoreの方は、２年前にストアにだした（誰にも使われてない）アプリにプラポリが書いてあるサイトが必要とのことで、GithubActions+GithubPages+Hugoで制作中なのですが、これがけっこう大変かつ楽しいので、構築が完了したら記事にしようと思います（でも割ける時間があまりないため気長にやる）

squarespace は、ニューヨーク発のWebサイトビルダーで、使った感じ WordPress みたいなモノです。

squarespaceで作成したページに、お問い合わせ用のメールアドレスを掲載するのですが、もらった別のサイトの見本のメアド部分がSVGファイルでした。長方形の図形に文字が表示されていて、文字自体は選択できない状態です。

私のSVGファイルの知識は、開くと数字で埋め尽くされているベクター画像とかいうやつ、、レベルです。AffinityDesignerで作ればいいかーとサクッと作ってみたものの（AffinityDesignerの知識もあんまりないのですが）、エクスポートしたSVGファイルは文字列が選択できてしまいました。長方形の画像を後ろにおいてその上に文字を重ねてレイヤーを結合！とかラスタライズとやらをしてみたのですが、文字が選択できちゃう。

困ったー。別の方法でやってみよう。

Procreateで長方形画像+文字列の画像を作成し、PSDファイルのエクスポート、それをXDに読み込ませてSVGに出力する。うーんダメ。

いつもお世話になっている（依頼元の）エンジニアさんに相談したら、PNGでも全然おっけい！ImageMagickで簡単にできるよ！と教わりました。

では、早速インストール。

🍄 % brew install imagemagick
Error: Cannot install under Rosetta 2 in ARM default prefix (/opt/homebrew)!
To rerun under ARM use:
    arch -arm64 brew install ...
To install under x86_64, install Homebrew into /usr/local.

arch -arm64 を付けるのよー、と言われるがまま

🍄 % arch -arm64 brew install imagemagick
 :
 :
Error: python@3.9: the bottle needs the Apple Command Line Tools to be installed.
  You can install them, if desired, with:
    xcode-select --install

今度は Command line tools が必要なのよー！ と言われる。

xcode入れてるけどどゆことー

🌼 % sudo xcodebuild -license
Password:
Xcode and Apple SDKs Agreement
 :
By typing 'agree' you are agreeing to the terms of the software license agreements. Type 'print' to print them or anything else to cancel, [agree, print, cancel]

同意してー と書いてあるので agree して、もっかい brew..

🌼 % arch -arm64 brew install imagemagick
 :
 :
Error: python@3.9: the bottle needs the Apple Command Line Tools to be installed.
  You can install them, if desired, with:
    xcode-select --install

だめだー。

以下でツールが入っているか確認できるみたい。

🍄 % pkgutil --pkg-info=com.apple.pkg.CLTools_Executables

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

なんだ、入っていなかっただけなのか。 xcode-select --install する。（これは、Macのバージョンアップをしたときに毎回やったほうが良いらしい。たぶん）

🍄 % xcode-select --install
xcode-select: note: install requested for command line developer tools

ダイアログが表示される→インストール→同意する。

ちょっと時間かかる。

インストールが終わったら、もう一度 brew..

🌼 % arch -arm64 brew install imagemagick
 :
 :
==> Installing imagemagick
==> Pouring imagemagick--7.1.0-20.arm64_big_sur.bottle.tar.gz
🍺  /opt/homebrew/Cellar/imagemagick/7.1.0-20: 805 files, 32.9MB
==> Running `brew cleanup imagemagick`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).

今度はエラーなく終了🙌

それでは早速使ってみましょー。わくわく..

使えるフォントを確認する。

🌼 % magick -list font

Arial.ttf にしよう。

🌼 % convert -font /System/Library/Fonts/Supplemental/Arial.ttf -pointsize 32 label:test test.png

できたーーー🎊

分かりづらいので、色をつける。（カラー一覧は、magick -list color）

🌼 % convert -font /System/Library/Fonts/Supplemental/Arial.ttf -fill pink -background gray -pointsize 32 label:Sample color.png

ふーーーー

疲れた。

けど、これ楽ちんですね。またひとつ賢くなりました。

（文字列が選択できないSVGの画像は、どうやって作ったのだろうか...）

-note