カスタマイズビューとCSSフレームワークでオリジナルのビューを作る方法

（著者：ニシム電子工業株式会社　山下 竜）

kintoneにCSSも適用しやすくなって、挑戦中の方もいらっしゃるのではないでしょうか？そして、出来ればkintoneらしくファストに仕上げるために、CSSフレームワーク（有名どころはBootstrapやFoundation等）の利用を考えられた方も少なくないかと思います。私もそうでした。

今回は、CSSフレームワークのひとつ「Foundation」をカスタマイズビューに適用してブログ風のビューに仕上げる方法をご紹介します。社内のブログや連絡掲示板としてお使い頂けるのではないかと思います。

CSSフレームワーク利用時の注意点（所感あり）について

CSSフレームワークの利用ですが、kintoneへの利用時には次の注意点を感じています。

• 元々Webページ全体のスタイルを決めるものが多いため、kintoneにおけるスタイルを適用する範囲を指定するのに工夫が必要
• 読み込んだ瞬間にスタイルが変更されるので、読み込むタイミングも重要

これらの解決策は、今回次のように考えました。

• カスタマイズビューでの利用が主になると思われるので、CSSフレームワークをカスタマイズビュー内で読み込み、いたずらに他の画面に影響を与えないようにします。つまり、あえて「JavaScript/CSSカスタマイズ」の設定でフレームワークは読み込みません
• それでも影響を与える可能性のある部分は、CSS上書きで解消します
• 多数あるCSSフレームワークの中でもkintoneへのいたずらな影響が少ないと思われ、サンプルも充実している「Foundation」を利用します

アプリの準備

次のフィールドを含むアプリをご準備ください。

コードの適用方法

• HTMLの適用方法としては、「一覧」の設定で「レコード一覧の表示形式」で「カスタマイズ」を選択し、「HTML」のテキストエリアに「HTMLソースコード」を貼り付けます。また、「一覧」の設定画面で「ページネーションを表示する」にチェックを入れておいてください。
• JavaScriptの適用方法としては「JavaScriptソースコード」をsample.js等ファイル名を付けて保存し、「PC用のJavaScriptファイル」にアップしてください。

出来上がりイメージ

ブログや連絡掲示板の用途では、kintoneの標準機能である「カテゴリー」を組合せるのも記事の整理等に有用だと思います。

カスタマイズビューHTMLソースコード

HTMLソースコードの説明

概ね次の4部構成になっています。

• FoundationのCSS読み込み
• Foundationのカスタマイズビュー以外への影響を解消
• カスタマイズビューのHTML本体
• $(document).foundation関数の呼び出し

ここでは2、3番目の項目について簡単にご説明します。

【Foundationのカスタマイズビュー以外への影響を解消】　

カスタマイズビューでFoundationフレームワークを読み込むことで、他の画面（他の一覧、レコード詳細・登録・編集等）への影響は解消できますが、カスタマイズビュー内にも影響が残るのでこれをCSS上書きで解消します。方法としては、「ページ全体への影響を解消するCSS」の後に、「カスタマイズビューはCSSフレームワークを適用するためのCSS」という順番で記載します。カスタマイズビューの範囲を指定するために、ここでは「kintone-custom-view」というidを与えたDiv要素でカスタマイズビュー内を括っています。

カスタムビュー以外へのFoundationの影響を解消する部分ですが、1つ例を示します。kintone全体では「margin-left」が元々「0rem」なので、前者の指定をします。次に、Foundationでは「1.1rem」が指定されていたので、カスタムビュー内（#kintone-custom-viewの範囲）では「1.1rem」になるよう指定しなおしています。

その他も同様の処理です。

【カスタマイズビューのHTML本体】

Foundationの公式サンプルやドキュメントを参考にしながら、レイアウトを記載していきます。今回はレコードデータを関連付けたいので、event.recordsが使えるように、「一覧」の設定で「ページネーションを表示する」にチェックを入れておきます。また、動的な要素の制御はJavaScriptカスタマイズで行います。

JavaScriptソースコード

JavaScriptソースコードの説明

主なポイントは次の通りです。

• カスタマイズビューで読み込んでいないライブラリ群(JavaScript)のロード
• 動的に変化する記事内容やニュースをList要素でカスタマイズビュー（HTML）に追加
• 「Foundation」の利用のために、jQueryをロードしていることを利用して、DOM操作をjQueryで記述

注意事項

今回の注意点は次の通りです。

• 筆者はMacintoshのGoogle Chromeで動作確認を行っています。
• 今回はCSSフレームワークとして「Foundation 5」を用いていますが、対応ブラウザ、ライセンス等利用に関する制限は各自でご確認ください。
• 今回外部ライブラリを無償CDNからロードしていますので、継続性等については公式サイトをご確認ください。

最後に

CSSフレームワーク「Foundation 5」を用いた画面カスタマイズ、いかがでしたでしょうか？CSSフレームワークの利用は、デザインが苦手でもそれなりの見た目を手に入れることができますし、kintoneのファストさとの相性も良いと思います。

今回は簡単な例をご紹介しましたが、CSSフレームワークのGrid等基本機能とkintoneのAPI等を駆使すればkintoneでポータルサイトを作り上げることもできます。皆さまの参考になれば幸いです。

このTipsは、2014年4月版で確認したものになります。

デモ環境

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

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