Tips

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 には他にも便利なライブラリがそろっていますので、用途に合わせて利用してみてはいかがでしょうか。