主婦がアプリをリリースするまでの軌跡

自宅でお小遣い稼ぎをしたい主婦がアプリリリースを目指すブログです。

【Rails5】Rails5で自作のWebアイコンを使う

f:id:song-of-life1352607:20180314224659p:plain

こんにちは、まりんです。

うちの会社ではFontAwsomeがマストなんですが、

結構クライアントからこんなアイコン使って欲しい!といわれ、

そんなのねーよ!!という事が多々あるようです。

そしてこの前唐突に、上司から

アイコン作るスキル身につけて欲しいんだけど。

と言われました。

マジかよ!?

という事で、今回ちょっとやってみました。

「独自アイコンをWebアイコン化し、それをRails5で使ってみた。」

です。





概要

環境

使用アプリ

  • icomoon


今回は元素材はこちらでお借りしました。

icooon-mono.com

f:id:song-of-life1352607:20180709125300p:plain

使いたいアイコンのページからSVG形式でダウンロードしてください。


本当にアイコン作るところからやる場合は、

IllustratorInkscapeなど、SVGで出力できるアプリを使って作成して下さい。

(イラレは高いので私はInkscapeにしようと思っています。本業じゃないし。)


Webアイコン使用までの流れ

  1. 素材(SVG)をicomoonでWebアイコン化する

  2. Webアイコンをダウンロードして必要ファイルをアプリケーションに移動

  3. ファイルの移動先に合わせてダウンロードしたstyle.cssを書き換え

  4. assets/stylesheets/application.scssからimportで読み込む


詳細

それでは一つずつの詳細を説明します。

素材をWebアイコン化する

今回はicomoonというアプリを使って行います。

元となる素材をアップしてそこからダウンロードするだけでできるのでとてもお手軽です。


f:id:song-of-life1352607:20180709135805p:plain

①まずは左上のボタンから素材のファイルをアップロードします。

今回は1枚だけですが、複数アップロードすることが可能です。


②Webフォント化する素材を選択します。

ここでも複数選択が可能で、今後アプリで使用したいアイコンをまとめてダウンロードすれば、

オリジナルのアイコンリストを作れます。

今回はアップロードしたものの他に、追加したBrandsと言うライブラリのニンテンドーswitchのアイコンと、

デフォルトで表示されているIcoMoonのHomeアイコンを一緒にダウンロードしてみます。

*ちなみに写っていませんが、ページの一番下にライブラリ追加のリンクがあります。


③選択すると、下部の真ん中のSelectionの数が増えます。

④右下のボタンでWebアイコンを作成。

Webアイコン化するファイルの確認ページに飛びます。


f:id:song-of-life1352607:20180709140410p:plain

①ここで付いている名前がそのままアイコン使用時のクラス名になります。

アップロードしたアイコンが日本語になっているので編集します。

他にもアイコン画像をクリックすれば、拡大縮小や反転などの簡単な編集も可能です。

②編集、確認が終わったら右下のボタンでダウンロードして下さい。


必要ファイルをアプリケーションに移動

ダウンロードしたフォルダを解凍したら、必要なファイルをアプリケーションに移動します。

f:id:song-of-life1352607:20180709142837p:plain

必要なファイルは上記のfontsフォルダ下のものと、style.cssです。


railsアプリのvendor下に置きます。

vendorの中にassetsをまず作り、その下にfontsstylesheetsを作ります。

他にも何かダウンロードしたものを使うことがあるかもしれないので、

一応専用のフォルダをそれぞれ作ってそこに入れます。

  • vendor/assets/fonts/icomoon → fonts下のファイル

  • vendor/assets/stylesheets/icomoon → style.css




style.cssの書き換え

先ほど移動した構造に合わせて、ダウンロードしたstyle.css内のurlの部分を書き換えます。

f:id:song-of-life1352607:20180709150059p:plain

私はここの指定が不十分だったがために余計な時間や手間を使ってしまいました。

assetsなので、追加した専用フォルダ名からで大丈夫です。

*今回はRails5なのでconfigの方の設定は入りませんでした。

確認はしていませんが、もしかしたらRails4以下ではプリコンパイルなどの設定がいるかもしれません。

こちらで大変詳しく説明して下さっています。

qiita.com




application.scssで読み込む

最後にassets/stylesheets/application.scssからimportでライブラリを読み込みます。

f:id:song-of-life1352607:20180709150950p:plain

ここでも専用フォルダ名が必要になるのでご注意ください。

*直置きの場合は入りません。

以上で実際にviewで使用するまでの準備は完了です。


アイコンを使ってみる

viewでの使い方は、Font Awesomeなどのようにクラスにicon-~のアイコン名を入れて使います。

icomoonの場合は<span>にクラスをつけるようにしてください。

<div>
    <span class="icon-nightsky"></span>
</div>
<div>
    <span class="icon-home3"></span>
</div>
<div>
    <span class="icon-nintendoswitch"></span>
</div>

f:id:song-of-life1352607:20180709151743p:plain

無事表示できました。

まとめ

Webアイコン化して表示させるまでは簡単ですね。

問題はアイコンを作れるかどうかです。

画力も計算もデザイン能力も全く自信がないのですが。。。

それはさておき、途中にも書きましたがこれはRails5での方法になります。

Rails4以下ではvendorに置いたものをデフォルトで探してはくれなかったりするようなので、

おそらくconfig/initializers/assets.rbなどに設定する必要があるかと思います。


今回はこちらの記事を参考にさせていただきました。

machida.github.io