cybozu developer network

カテゴリー内の他の記事

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

(著者:山下 竜

はじめに

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

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

出来上がりイメージ

image01.png

デモ環境

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

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

アプリの準備

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

フィールド名(例)

フィールドコード

フィールドタイプ

タイトル

title

文字列 (1行)

投稿者

author

文字列 (1行)

投稿日

postedDate

日付

内容

article

文字列 (複数行)

コードの適用方法

HTML

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

image02.png

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

※1行目で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等ファイル名を付けて保存してください。

 

image03.png

JavaScriptソースコードの説明

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

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

注意事項

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

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

最後に

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

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

 

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

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
mikan

こちらを参考に作成しているのですが、添付ファイルの画像を表示させることはできませんでしょうか?

Avatar
cybozu development team

mikanさん
お世話になっております。cybozu.com developer network事務局です。
下記Tipsをご参考いただくと実現できるのではないでしょうか?
「レコードに登録された添付ファイルをカスタマイズビューに表示してみよう」
https://cybozudev.zendesk.com/hc/ja/articles/203126440

Avatar
Nao

お世話になっております。

こちらのサンプルを参考に作成しようと思っているのですが、

説明通り同じように設定しても、レコードが表示されませんが、

何か原因があるのでしょうか。

お手数ですが、ご確認の程、宜しくお願い致します。

Avatar
cybozu Development team

Nao様

developer network事務局です。

手元の環境(Windows Chrome/Mac Chrome)で確認しましたが正常に表示されましたので、kintoneのアップデートによる影響は受けていないようです。

考えられる原因として以下のいずれかに当てはまる点はあるでしょうか。

 

  • フォームの設定で、フィールドコードが正しくない(特に、レコード番号のフィールドコード"recordNum"の変更は忘れやすいかと思います)
  •  一覧の設定で、「ページネーションを表示する」にチェックしていない
  •  レコードにデータが入っていない

 

上記に当てはまるものがなければ、以下をご教示いただけますか。

  1. OS/ブラウザ
  2. 一覧が表示されているスクリーンショット
  3. ブラウザの開発者ツールに表示されているエラーメッセージ 

   開発者ツールやエラーについては以下の記事をご参照ください。

   動かない?そんな時はデバッグをしてみよう!入門編 https://cybozudev.zendesk.com/hc/ja/articles/207613916

Avatar
Nao

お世話になっております。

早速のご回答ありがとうございます。

ご指摘いただいた、考えられる要因を全て確認しましたが、問題ございまんでした。

1.Windows10Pro/Chrome最新Ver

2.スクリーンショット(※デモのTips画面)

3.開発者ツールエラーメッセージ

お手数でございますが、ご確認お願い致します。

 

Naoにより編集されました
Avatar
cybozu Development team

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

またエラーが出ましたら同様のスクリーンショットとともにご連絡くださいますか。

よろしくお願いいたします。

Avatar
Nao

お世話になっております。

早速のご回答ありがとうございます。

ご教授いただいた通り、URLで指定したところ、問題なく表示ができました。

おそらく、社内のファイヤーウォール等のセキュリティで除外されていたようです。

ありがとうございました。

Avatar
Nao

お世話になっております。

こちらのサンプルにて、

サブテーブルの値も表示したいのですが、どのように行ったらよいのでしょうか?

度々の質問で恐縮でございますが、ご教授宜しくお願い致します。

Avatar
cybozu Development team

Nao様

JavaScriptの記事の中身を作成する箇所で、サブテーブルの値を表示するようにすれば良いと思います。

サブテーブルの値の取得方法については、以下のTipsが参考になります。

https://cybozudev.zendesk.com/hc/ja/articles/202422244

Avatar
cybozu Development team

KBG 様

cybozu developer network 事務局でございます。

こちらの環境(Chrome)にて記事中のソースコードの動作を確認したところ、

空欄は生じませんでした。

KBG 様のコード内に不要な div 要素などがないか、ご確認をお願いいたします。

このコメント欄は、記事の誤り・不具合に対するフィードバックの場となっております。

個別の技術的な質問は cybozu developer コミュニティのご利用をお願いいたします。

Avatar
布目

お世話になっております。カスタマイズビューについてお聞きしたいのですが、カスタマイズビューにルックアップを表示させることは可能でしょうか

Avatar
cybozu Development team

布目 様

お世話になっております。cybozu developer network 運営でございます。

カスタマイズビューを用いた場合、
ルックアップフィールドなどのkintoneのフォームを直接表示することはできません。
HTMLとJavaScriptをもちいることで同等の機能をもったカスタマイズ自体は可能かと思われますが、

恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。

よろしくお願い致します。

サインインしてコメントを残してください。