8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[FileMaker]ボタンアイコンをSVG形式で自作する

Last updated at Posted at 2018-12-01

昨年のカレンダーに初参加させていただきましたので、2018年こそ良いネタ書くぞと意気込んでポチッとしましたが、
性懲りも無く、どこに需要があるか分からない小ネタを投下します:sweat_smile:

FileMakerのボタンアイコン

FileMaker 14以降、ボタンにアイコンが設定できるようになりました。
スクリーンショット 2018-09-28 23.55.15.png

デフォルトで用意されているアイコンもあるのですが、自分で好きなアイコンを使いたい場合は、左下の + プラスボタンからアイコンファイルを登録することができます。
スクリーンショット 2018-09-28 23.55.49.png

登録できるのが、PNG形式 か SVG形式の2種類。
PNG形式は簡単ですが、アイコンの大きさや色を変える等が効かないので、レイアウト作る際にちょっと物足りなさを感じます。
SVG形式だと、そういった変更も自由自在にできるので、画像作成のソフトを使わずに作れないものかと試行錯誤してみました。

Icon Maneger

http://www.indats.com/KnowledgeCenter/
無料なので勝手に紹介してしまっていますが、アメリカはソルトレイクシティのInDats社のサイトにあるこちらのツールをまずは黙ってダウンロード。
もうこれだけで事足りるかもしれません。
たくさんのSVGアイコンがFileMaker向けに最適化された形で入手できます。
InDats社様、素敵なツールを公開していただき、ありがとうございます。

フリーのSVGアイコン素材

「SVG アイコン フリー」とかって検索すると、素材をゲットできるサイトがいくつか出てきます。
SVG形式のファイルをテキストエディタ等で開くとこんな感じ。
スクリーンショット 2018-11-04 18.20.00.png

なーんか頭痛くなってきそうな文字の羅列がいっぱいです。
このファイルをFileMakerに登録すれば事足りそうなんですが、読み込みできなかったり、拡大・縮小や色変更ができない場合があるので、FileMaker向けに最適化したSVGファイルに変換してやります。

先ほどのIcon Manegerの方に登録していきます。
スクリーンショット 2018-11-04 18.23.03.png
Utility_Iconというレイアウトに移り、レコード作成で追加していきます。
PathDataのフィールドに、テキストエディタで開いているSVGのpathのd値をコピペします。

<path class="st0" d="hoge hoge">
pathが複数あれば、一つ目のpathから最後のpathの " まで丸ごとコピーすると上手くいきます。(いかない時もある...)

スクリーンショット 2018-11-04 18.45.33.png

Generated_SVGのフィールドに自動計算で値が入ります。
右上のX、Y、Width、Heightのフィールドも同じように設定していきます。
だいたい初めの方に定義されてます。

viewBox="0 0 512 512"

右から順番に入れます。
スクリーンショット 2018-11-04 18.47.57.png

左上のプレビューにアイコンが表示されました!
あとはNameとTagsに適当な値を入れておけば、Icon Managerへの登録は完了です。
Favoriteのフラグを立てておけば、後でまとめてエクスポートしやすいですよ。

同じように、画像データからも変換ツール等でSVG形式へ変換して、パス値を取ってこれればアイコン化できます。

わざわざこんな面倒くさいことやんなくても・・・とも思いますが:sweat_smile:
画像データをレイアウトに貼り付けるよりも、SVGアイコンの方が表示も速かったりすんのかな?という淡い期待からよく使う画像はアイコン化させています。
ただし効果検証はやってません。完全に自己満の世界です。。。

8
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?