viliv S5:ImageMagickによるソフトキーボードのスキン作成

vilivS5のキーボードスキンを痛くした記事へのアクセスが妙に多いことに気が付きました。

今更どうして増えたのかと思ったら、いつの間にか2chのvilivスレにスキン記事のURLがさらされていたようです。
ちなみにキーボードスキン作成に関しては、当時スレでやっていた方のまねをしただけだったりしますが…まぁいいか。
今はなにやら作成ツールを作っている方もいるみたいなので、もう需要はなさそうな気がしますが、ImageMagickのCLIを叩いてvilivソフトウェアキーボードのスキンを作る方法のメモを公開してみます。
ImageMagickって何?という方はWikipediaの当該記事でも見てください。

目標


  1. 任意の画像を指定することでデフォルトのvilivソフトウェアキーボードの画像と指定画像を合成できること
  2. ここでいう合成とは、ソフトキーボードの文字がちゃんと見えかつ合成する画像が見えなくならない程度に、合成する画像の透明度を上げてからソフトキーボードの1枚絵に重ね合わせることを言います。
    つまり前の記事の画像のような感じにすることです。
  3. bmp化と1キーごとの画像への分割とファイル名の付与
  4. vilivソフトウェアキーボードのスキンは1枚画像ではなく、1キーずつ命名規則に従ってファイル名が付与されたbmp画像の集合です。そのため、合成した画像をbmp画像に変換しつつ1キーごとへ分割し、正しいファイル名を付与してあげる必要があります。

これらをImageMagickとWindowsのコマンドプロンプトで実現します。

準備


  1. ImageMagickのインストール
  2. Windowsマシンで使うので、Windows Binary Releaseをダウンロードします。
    いくつか種類がありますが、よくわからない人はQ16-windows-dllにしとけ、と書いてあるのでそうします。
    インストールの最後でconvertとimdisplayのテストがあります。
    テストがうまく行かない場合、ダウンロードページの下のほうに、何かうまくいかない時はMicrosoft Visual C++ 2008 SP1 再頒布可能パッケージ(x86)をインストールしてね、と書いてあるのでそうします。64bit版の場合はx64も入れるみたいですね。
  3. 合成したい画像の用意
  4. キーボード画像に合わせて、同じ縦横サイズか少し大きめの画像を用意するのがいいと思います。キー押下前後で画像を変えたい場合は2種類用意します。フォーマットはpng形式で、背景を透過させておくことをおススメします。なお、デフォルトのソフトキーボードを1枚絵にするとWxH=924x350ピクセルになるはずです。
  5. キーボード画像の準備
  6. お好きな画像を用意してください。押下前の画像と押下後の画像が必ず必要です。なお、デフォルトのキー画像から1枚絵を生成することも可能です。


処理の流れ


キーボード画像に任意の画像を合成する処理の内容を大まかに整理すると以下のようになります。
  1. 任意画像を用意する(キー押下前後で2通り用意しても良い)
  2. キーボード画像(1枚絵)の縦横サイズで任意画像の中央部分を切り出す
  3. 切り出した画像をキーボード画像と合成する
  4. 合成した画像を縦方向に真ん中で分割する(vilivソフトキーボードが右左でわかれているため)
  5. 分割したそれぞれについて、1キーあたりの幅x高さで分割しつつ、ファイル名付与。WxHとファイル名は次ステップで生成するキー以外はデフォルトキーボード画像の値を踏襲。
  6. 2個分で1キーとなるキー(スペースや全角半角キーなど)の画像をくっつけて生成
なお、この処理の後ろから3つを逆に行うことで、デフォルトの1キーごとの画像からキーボードの1枚絵を生成することができます。
  1. 2個分で1キーとなるキー(スペースや全角半角キーなど)の画像を真ん中で分割
  2. 右半分・左半分それぞれについて7x5個の画像をくっつける
  3. 左右をくっつける


うーん


なんかもう疲れたので、バッチファイルを貼っておきます。
vilivキーボードスキンを作りたい人は使ってくださって構いません。
うまくいかない場合は自己解決できる、という方のみお使いください。
↓の画像をクリックしてvilivS5KBD.zipをダウンロードしてください。

追記:
ImageMagick6.6.1-8-Q16-windows-x64-dll.exeのバイナリでは正常に動作しませんでした
この辺を参考にして1キーごとに分割するコマンドを書いたのですが、このあたりにかいてあるFilename Percent Escapesまたはfilename:labelが動かなくなっているような気がします(this may change in the future.って書いてあるから後者かも)。
ImageMagick-6.5.2-7-Q16-windows-dll.exeでは動作したので、たぶん6.5系では動くんじゃないかと思います。
ImageMagickをインストールする際には、FTPサイトからv6.4.8-4より新しくてなるべく古いバージョンを取得するようにしてください。



この記事へのコメント

この記事へのトラックバック