はじめに
こんにちは。クローバの門屋です。
みなさんkintoneをカスタマイズしてますか?
2016年1月のアップデートで、新デザインが正式版になりました。
主要なアップデート(2016年1月)
これまでヘッダーをカスタマイズして独自のボタンなどを設置していた方などは、デザインの変更で見た目がどうなるか気になるのではないでしょうか。
いっそのこと、この機会にボタンを新デザインっぽくしてしまいましょう。
デモ環境
デモ環境
で実際に動作を確認できます。
ログイン情報は
cybozu developer networkデモ環境で確認してください。
メニューのカスタマイズ
メニューのカスタマイズとは
kintoneでは、JavaScriptを使うことでレコード一覧画面やレコード詳細画面のメニューをカスタマイズできます。
たとえば、レコード一覧画面の右側の空白要素を取得するには、kintone.app.getHeaderMenuSpaceElement() メソッドを使います。
メソッドの詳細については、
メニューの上側の要素を取得するを確認してください。
カスタマイズの準備
今回は、「カレンダーアプリのメニューに航空券の予約ボタンを配置する」という架空のカスタマイズを実施したいと思います。
航空券の予約機能の実装方法が知りたいという方は申し訳ありませんがご自身で調べてください。
アプリストアからカレンダーアプリを追加したところです。
アプリの設定画面を開いて、おもむろにプラグインの設定をします。
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 から確認できます。
現在605個のアイコンが用意されています。
終わりに
FontAwesomeを使うと、他にもたとえばフィールドの値によってレコードのアイコンを変えたりするようなカスタマイズが可能になります。
Cybozu CDNには他にも便利なライブラリがそろっていますので、用途に合わせて利用してみてはいかがでしょうか。