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

（著者：山下 竜）

はじめに

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

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

出来上がりイメージ

デモ環境

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

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

アプリの準備

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

フィールド名（例）	フィールドコード	フィールドタイプ
タイトル	title	文字列 (1行)
投稿者	author	文字列 (1行)
投稿日	postedDate	日付
内容	article	文字列 (複数行)

コードの適用方法

HTML

「一覧」の設定で「レコード一覧の表示形式」で「カスタマイズ」を選択し、「ページネーションを表示する」にチェックを入れます。
※「ページネーションを表示する」にチェックを入れると、カスタマイズ形式の一覧画面でkintone JavaScript APIのevent.recordsが使用できます。

「HTML」のテキストエリアに下記の「HTMLソースコード」を貼り付けます。Foundationの公式サンプルやドキュメントを参考にコーディングします。

※１行目でCSSを読み込んでいますが、原則としては「JavaScript / CSSでカスタマイズ」画面でCSSを適用します。今回は「JavaScript / CSSでカスタマイズ」でCSSを読み込むとkintone全体のCSSに影響を及ぼすため、HTML内にCSSを読み込むコードを記述しています。

JavaScript

JavaScriptは以下を追加します。

※今回のカスタマイズでは動的なUIを使用しないため、foundation.min.js やコード内の$(document).foundation();がなくても動作します。

• URL指定で追加
  • https://js.cybozu.com/jquery/3.6.1/jquery.min.js
  • https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js
• アップロードで追加
  • 下記ソースコードをsample.js等ファイル名を付けて保存してください。

JavaScriptソースコードの説明

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

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

注意事項

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

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

最後に

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

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

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