こんにちは、えんぞーです。
自分の好きなアイコンを選んで自分だけのアイコンフォントが作成できる「IcoMoon」っていうサービス知ってますか？
WEB制作でアイコンを使いたいときなんかに非常に便利です。
で、その「IcoMoon」を利用してZooper Widgetで使用するアイコンフォントを作っちゃおうぜって言うのが今回の趣旨。
以前記事にした「【Android】「Zooper Widget」と「Tasker」で画面回転の切替スイッチを作る」の回で只の四角形をボタンにしていた部分が気になって気になってしょうが無かったので思い切ってアイコン化。
ついでに前々から付けようと思っていたWifiのON・OFFスイッチも追加しました。
icoMoonでフォントファイルを作る
Zooperではパーツ毎にフォント指定出来る事はZooperを使っている方であれば知っていると思います。
主にデジタル時計の表示であったり文字列表示だったりとフォントを変更する箇所はそんな所かと思います。
フォントファイルでアイコン表示出来ればサイズを変えても綺麗ですし、何かと使い易いです。
icoMoonにてフォントに含めたいアイコンを選択する
まずはicoMoonにアクセス。
するとアイコンがずら～っと並んでいるかと思いますので「選択ツール」を選んでフォントファイルに入れたいアイコンを選択しましょう。
この時点で自分で作ったアイコン（SVG形式かJSON形式）がある場合はここで読み込ませることが出来ます。
今回はテストも兼ねてIllustratorでパパッと作ったアイコンファイルを読み込ませて見ます。
左からローテート（画面回転）ON用、OFF用、Wifi用アイコンとなります。
Wifi用のアイコンにOFFが無いのは「色で表現すればいいや」という妥協のためです。
Illustratorでこういったものを作る場合はアートボード毎にアイコンを作成しておいてSVG出力時に「各アートボードごと」のチェックを入れておけばアートボード毎にファイルが作られるので楽です。
さて、ファイルを読み込ませた後は「Font」ボタンをクリックしてフォントの作成画面に移動します。
フォント作成画面に来たら対応するキーを編集しましょう。
「a」という文字列のフォントはこれ。っていう感じでキーボードの文字列に対応させます。
上記画像の赤枠の部分に対応するキーを入力しましょう。今回の例では分かり易い様にという事で数字の1～3を指定しています。
ここまで完了したらフォントファイルは完成ですので「Download」ボタンを押してダウンロードして下さい。
ttfファイルをZooperで使える様にAndroidに転送する
ダウンロードしたファイルはZipで圧縮されているので、解凍します。
あとは「fonts」フォルダの中にttfファイルが入っているのでそれをZooperWidgetのFontフォルダに転送しましょう。
ちなみにこんな感じのフォントファイルになっています。
数字の1、2，3の部分だけアイコンになってますね。
サンプルとして今回作ったフォント置いておきますのでとりあえず試して見たい時等に使って見て下さい。
“サンプルフォント” をダウンロード enzonet.ttf – 182 回のダウンロード – 4 KB
Androidへのttfファイルの転送はいつものように「Airdroid」が便利です。
転送する場所は「sdcard/ZooperWidget/Fonts」となります。（環境によってはsdcardでは無いかも）
これでZooper側の設定から作成したフォントの呼び出しが可能になりました。
後はパーツ毎にフォント設定を変更して「テキスト」パーツであれば値を「1」にすることで先程のアイコンが表示される事になります。
Zooperで作成したON・OFFスイッチをアイコンに変更
前回の記事で作ったON・OFFスイッチを今回のアイコンフォントで置き換えました。
前回の記事では短径パーツで作ったスイッチ部分をテキストパーツにして、今回作ったアイコンフォントを指定しました。
やっていることは前回と同じなんですが、一点だけ「高度なテキスト内容」の中身だけ説明します。
中身としては
$#Trote#=1?1:2$
このような式となります。（#Trote#は変数になります。詳しくは前回の記事をご覧下さい。）
#Trote#が1だったら、「1」で違ったら「2」を表示するっていう内容になります。
で、このテキストパーツのフォントに先程作ったフォントを指定することでアイコンが表示されるという寸法です。
結果、出来上がったものとしては
このような感じとなりました。
アイコンをタップする事でON・OFFの切替が出来る様になっています。
とりとめのないまとめ
如何でしょうか。手間と言えば手間なのですが、IconMoonには最初から様々なアイコンが登録されていますのでちょっとしたボタンを作るのであればこのようなやり方も有りだと思います。
今回は独自にアイコンを作って登録したので手間が掛かっているように見えますが、用意されているもので良い場合は選んでフォントをAndroidに送るだけです。
興味が出た人は色々とやってみましょう＾＾
