KEYPOINT – キー・ポイント株式会社 開発日誌

前々から、サムネイルのために、記事に画像をつけてくださいと言われているtです。
なので、ImageMagickでアイコンを作れるようにしました。毎回画像を考えたり、探したりするのは大変なので、コマンド一発でアイコンを作れるようにしました。

ImageMagickは、コマンドラインから利用できる、画像生成・編集ツールです。
主に、リサイズやぼかし処理など、複数の画像に対して、定型の処理を行いたい場合に利用されます。

今回は、ImageMagickを利用して、簡単なアイコンを生成するスクリプトを作成しました。

作成したスクリプトについて

今回は、次のようなアイコンを、スクリプトで生成します。

以下のように、スクリプト実行時の引数で、表示する文字と背景色を指定することができます。

早速スクリプトを見ていきます。それぞれの部分に分けて説明します。

settings部分

「settings」以下の項目では、変更可能な値を定義しています。

• icon_size: アイコンのサイズ
• border: アイコンの枠線の太さ
• font: フォント
• color: 文字色及び枠の色

環境によって、利用可能なフォントが変わるかと思います。
以下のコマンドを実行すると、利用可能なフォントの一覧が表示されますので、適宜変更してください。

variables部分

主に、settingで定義した値から、generate部分で使いやすい値にするための変数を定義しています。

generate部分

generate部分では、ImageMagickのconvertコマンドを使って実際に画像を生成しています。1行ずつ見ていきます。

「-size "${size}x${size}" -background $background_color」では、画像サイズと背景色を指定しています。

「-fill $color -font $font -gravity center label:$label」では、文字の描画を指定しています。
それぞれ、色、フォント、描画位置、描画文字を指定しています。
「label:$label」のように描画される文字の指定のときは、他と書き方が違い、コロンを使っているので気をつけましょう。

「-bordercolor $color -border $border」では、色と太さを指定して、枠線の描画を指定しています。
枠線を付けると、「-size」で指定した大きさより枠線の分だけ画像サイズが大きくなります。なので、予め14行目のsizeの定義で調整することで、最終的に出力される大きさを、icon_sizeと同じ大きさになるようにしています。

アイコンを生成する

上記のスクリプトを「generate_icon.sh」という名前で保存し、実行権限を与えてください。
そして、以下のコマンドを実行すると、画像が生成されます。

これで、アイコンの文字と色を指定するだけで、簡単にアイコンを生成できるようになりました。引数を変えるだけで、以下のようなアイコンを作ることができます。
コマンド一発でアイコンを生成できるようにしておけば、複数のアイコンのデザインを変えたいときも簡単です。

最後に

今回は簡単なアイコンの生成を行いましたが、ImageMagickを使いこなすことができれば、もっといろいろなアイコンが作れるかと思います。
興味を持たれた方は、ImageMagickについて調べて、もっと良いアイコンを作ってみてください。

開発ブログのサムネイルは、当分このコマンドで生成したアイコンを使っていこうと思います。

キー・ポイントでは、なんでもコマンド一発でこなすエンジニアを募集しています。