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

フォローする

(著者:ニシム電子工業株式会社 山下 竜

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

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

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

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

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

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

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

アプリの準備

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

フィールド名(例)

フィールドコード

フィールドタイプ

タイトル

title

文字列1行

投稿者

author

文字列1行

投稿日

postedDate

日付

内容

article

文字列複数行フィールド

レコード番号

recordNum

(レコード番号)

 

コードの適用方法

  • 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/

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

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

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

ログインしてコメントを残してください。
Powered by Zendesk