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

著者名: 門屋 亮 (External link) (クローバ株式会社)

目次

はじめに

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

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

デモ環境

デモ環境 (External link) で実際に動作を確認できます。
ログイン情報は cybozu developer network デモ環境 で確認してください。

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

kintone では、JavaScript を使うことでレコード一覧画面やレコード詳細画面のメニューをカスタマイズできます。
たとえば、レコード一覧画面の右側の空白要素を取得するには、 kintone.app.getHeaderMenuSpaceElement() メソッドを使います。
メソッドの詳細については、 メニューの上側の要素を取得する を確認してください。

カスタマイズの準備

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

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

アプリの設定画面を開いて、おもむろにプラグインの設定をします。
JSEdit プラグインを利用できることが前提です。
JSEdit っていなに?という方は kintone上でカスタムJSやCSSを編集できるプラグイン「JSEdit for kintone」を使ってみよう の記事を合わせて確認してください。

JavaScriptの編集

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

sample.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
/*
 * add button js sample program
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
jQuery.noConflict();
(function($) {
  'use strict';
  kintone.events.on('app.record.index.show', (e) => {
    const menu = kintone.app.getHeaderMenuSpaceElement();
    const $button = $('<button class="custom-button">予約</button>');
    $button.click(() => { /* 予約処理*/ });
    $(menu).append($button);
  });
})(jQuery);

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

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

CSSでカスタマイズを行う

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

sample.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
/*
 * button design css sample program
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
.custom-button {
    color: #a8a8a8;
    font-size: 32px;
    display: inline-block;
    padding: 0 16px;
    height: 48px;
    border: 1px solid #e3e7e8;
    background-color: #f7f9fa;
    text-align: center;
}

.custom-button:hover {
    color: #3498db;
}

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

そこで、FontAwesomeの出番です!

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

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

sample.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
/*
 * using FontAwesome sample program
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
jQuery.noConflict();
(function($) {
  'use strict';
  kintone.events.on('app.record.index.show', (e) => {
    const menu = kintone.app.getHeaderMenuSpaceElement();
    const $button = $('<button class="custom-button" title="予約"><i class="fa fa-plane"></i></button>');
    $button.click(() => { /* 予約処理*/ });
    $(menu).append($button);
  });
})(jQuery);

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

使い方

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

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

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

終わりに

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