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

はじめに

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

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

デモ環境

こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/166/

デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。

メニューのカスタマイズ

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

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という飛行機アイコンを使いました。

アイコン名はFind Icon with the Perfect Look & Feelから確認できます。