（著者：山下 竜）
はじめに
kintoneにCSSも適用しやすくなって、挑戦中の方もいらっしゃるのではないでしょうか？そして、出来ればkintoneらしくファストに仕上げるために、CSSフレームワーク（有名どころはBootstrapやFoundation等）の利用を考えられた方も少なくないかと思います。私もそうでした。
今回は、CSSフレームワークのひとつ「Foundation」をカスタマイズビューに適用してブログ風のビューに仕上げる方法をご紹介します。社内のブログや連絡掲示板としてお使い頂けるのではないかと思います。
出来上がりイメージ
デモ環境
こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/171/
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
アプリの準備
次のフィールドを含むアプリをご準備ください。
|
フィールド名（例） |
フィールドコード |
フィールドタイプ |
|
タイトル |
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月版で確認したものになります。
こちらを参考に作成しているのですが、添付ファイルの画像を表示させることはできませんでしょうか？
mikanさん
お世話になっております。cybozu.com developer network事務局です。
下記Tipsをご参考いただくと実現できるのではないでしょうか？
「レコードに登録された添付ファイルをカスタマイズビューに表示してみよう」
https://cybozudev.zendesk.com/hc/ja/articles/203126440
お世話になっております。
こちらのサンプルを参考に作成しようと思っているのですが、
説明通り同じように設定しても、レコードが表示されませんが、
何か原因があるのでしょうか。
お手数ですが、ご確認の程、宜しくお願い致します。
Nao様
developer network事務局です。
手元の環境（Windows Chrome/Mac Chrome）で確認しましたが正常に表示されましたので、kintoneのアップデートによる影響は受けていないようです。
考えられる原因として以下のいずれかに当てはまる点はあるでしょうか。
上記に当てはまるものがなければ、以下をご教示いただけますか。
開発者ツールやエラーについては以下の記事をご参照ください。
動かない？そんな時はデバッグをしてみよう！入門編 https://cybozudev.zendesk.com/hc/ja/articles/207613916
お世話になっております。
早速のご回答ありがとうございます。
ご指摘いただいた、考えられる要因を全て確認しましたが、問題ございまんでした。
1.Windows10Pro/Chrome最新Ver
2.スクリーンショット(※デモのTips画面)
3.開発者ツールエラーメッセージ
お手数でございますが、ご確認お願い致します。
Nao様
開発者ツールのエラーを拝見しますとネットワーク上の原因でjQueryがロードできないようです。
以下の画面を参考に、URL指定でCybozu CDNを利用することをお試しくださいますでしょうか。
手元の環境では画面と同じ"https://js.cybozu.com/jquery/3.1.1/jquery.min.js"を指定して解決しました。
＜参考＞Cybozu CDN https://cybozudev.zendesk.com/hc/ja/articles/202960194
またエラーが出ましたら同様のスクリーンショットとともにご連絡くださいますか。
よろしくお願いいたします。
お世話になっております。
早速のご回答ありがとうございます。
ご教授いただいた通り、URLで指定したところ、問題なく表示ができました。
おそらく、社内のファイヤーウォール等のセキュリティで除外されていたようです。
ありがとうございました。
お世話になっております。
こちらのサンプルにて、
サブテーブルの値も表示したいのですが、どのように行ったらよいのでしょうか？
度々の質問で恐縮でございますが、ご教授宜しくお願い致します。
Nao様
JavaScriptの記事の中身を作成する箇所で、サブテーブルの値を表示するようにすれば良いと思います。
サブテーブルの値の取得方法については、以下のTipsが参考になります。
https://cybozudev.zendesk.com/hc/ja/articles/202422244
KBG 様
cybozu developer network 事務局でございます。
こちらの環境(Chrome)にて記事中のソースコードの動作を確認したところ、
空欄は生じませんでした。
KBG 様のコード内に不要な div 要素などがないか、ご確認をお願いいたします。
このコメント欄は、記事の誤り・不具合に対するフィードバックの場となっております。
個別の技術的な質問は cybozu developer コミュニティのご利用をお願いいたします。
お世話になっております。カスタマイズビューについてお聞きしたいのですが、カスタマイズビューにルックアップを表示させることは可能でしょうか
布目 様
お世話になっております。cybozu developer network 運営でございます。
カスタマイズビューを用いた場合、
ルックアップフィールドなどのkintoneのフォームを直接表示することはできません。
HTMLとJavaScriptをもちいることで同等の機能をもったカスタマイズ自体は可能かと思われますが、
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。