Font Awesome を使ってメニューにかっこいいアイコンを配置する方法

フォローする

(著者:クローバ株式会社 門屋 亮

はじめに

こんにちは。クローバの門屋です。みなさん kintone をカスタマイズしてますか? 2016年1月のアップデートで、いよいよ新デザインが正式版になったようです。
主要なアップデート(2016年1月)

これまでヘッダーをカスタマイズして独自のボタンなどを設置していた方などは、デザインの変更で見た目がどうなるか気になるのではないでしょうか。
いっそのこと、この機会にボタンを新デザインっぽくしてしまいましょう。

メニューのカスタマイズ

メニューのカスタマイズとは

kintoneでは、JavaScriptを使うことでレコード一覧画面やレコード詳細画面のメニューをカスタマイズすることができます。たとえば、レコード一覧画面の右側の空白要素を取得するには、 kintone.app.getHeaderMenuSpaceElement() メソッドを使います。
メソッドの詳細についてはこちらをご覧ください。
https://cybozudev.zendesk.com/hc/ja/articles/201942004#step4

カスタマイズの準備

今回は、「カレンダーアプリのメニューに航空券の予約ボタンを配置する」という架空のカスタマイズを実施したいと思います。航空券の予約機能の実装方法が知りたいという方は申し訳ありませんがご自身で調べてください。

アプリストアからカレンダーアプリを追加したところです。

アプリの設定画面を開いて、おもむろにプラグインの設定を行います。JSEditプラグインが利用できることが前提です。JSEditってなに?という方はこちらの記事を合わせてご覧ください。

kintone上でカスタムJSやCSSを編集できるプラグイン「JSEdit for kintone」を使ってみよう

JavaScriptの編集

JavaScriptファイルを新規作成して、以下のコードを入力します。

sample.js

ついでに画面下のライブラリから、jQueryを選択しておきます。保存ボタンをクリックしてレコード一覧画面を開くと、メニューが以下のようになるはずです。

予約ボタンが追加されました! しかし、周囲のデザインから浮いて見えてしまいます。

CSSでカスタマイズを行う

続いてCSSで見た目を直してみます。JavaScriptと同様にJSEditでPC用のCSSファイルを新規追加して、編集、保存します。

sample.css

なんとなくそれっぽくなりました。しかし他はアイコンなのに、このボタンだけ文字というのが不自然です。それらしいアイコンを画像ファイルとして公開しておけばよいのですが、あいにくkintone ではインターネットに公開できる画像をアップロードする場所がありません。

そこで、FontAwesomeの出番です!

まず、JSEditのCSSの編集画面で、ライブラリからFontAwesomeを選択して保存します。

次に、先ほどのJavaScriptを以下のように編集します。

sample.js

それっぽい飛行機アイコンが表示されました。周囲のデザインとまったく違和感がありません。

使い方

アイコンを表示したい部分に、<i>タグを挿入することで、さまざまなベクターアイコンを利用することができます。指定の方法は、クラス名に”fa fa-[アイコン名]”と記述するだけです。今回はfa-planeという飛行機アイコンを使いました。

アイコン名はこちらのページから参照することができます。

現在605個のアイコンが用意されています。

終わりに

FontAwesomeを使うと、他にもたとえばフィールドの値によってレコードのアイコンを変えたりするようなカスタマイズが可能になります。Cybozu CDNには他にも便利なライブラリがそろっていますので、用途に合わせて利用してみてはいかがでしょうか。

デモ環境

https://dev-demo.cybozu.com/k/166/

※デモ環境についての説明はこちら

コメント

ログインしてコメントを残してください。
Powered by Zendesk