はじめに

ひゃっはー（☝ ՞ਊ ՞）☝　この間歯医者に診て頂いた奥歯が痛むWillです。

皆様、『カスタマイズビュー』という名前はご存知でしょうか。ちょくちょくkintone界隈では聞く言葉ですが、とても便利なビューです。 developer networkの『はじめようシリーズ』でもカスタマイズビューの使い方の記事 を紹介しています。

developer networkのTipsにも掲載している下記のかっちょいーUIを提供しているカスタマイズはカスタマイズビューで実現されています。

• ・Tips: SpreadJS(グレープシティ株式会社)
• ・Tips: Wijmo[ウィジモ](グレープシティ株式会社)
• ・Tips: Ignite UI (インフラジスティックス・ジャパン株式会社)

　 今回はこのブログでカスタマイズビューの紹介をしたいと思います。

カスタマイズビューとは

まず『ビューってなんだ！？』という初歩的なところから行きましょう。ビューは、下記のようにデータの一覧が閲覧出来るページのことを指します。
※言語設定が英語だと「View」ですが、日本語での製品内の表記は「一覧」です。以降「一覧」と呼びます。

kintoneを普段から業務で使用されている方は良く見るページですね。いわゆる、『表形式』の一覧です。エクセルっぽいデータの表示ですね。

一覧の追加は、アプリの設定画面の『一覧を追加』から設定することが出来ます。クリックすると、一覧の作成画面が表示され、色々とオプションが表示されます。

この画面では、レコード一覧の表示方法を三種類の中から選択することができます。
左から『表形式』、『カレンダー形式』、『カスタマイズ』と表示されており、『カスタマイズ』を選択すると、下記のような画面になります。

・・・この画面で何をするべきか全くわからない・・・＿|￣|○ ｶﾞｸｯ
というリアクションをする方は多いと思います。安心して下さい。私がいます(☝ ՞ਊ ՞)☝ とりあえず手を動かしてみましょう！一覧に名前だけ付けて、保存してみます！

・・・！？ な、何も表示されない・・・！？ʅ(◔౪◔ ) ʃ ﾅｯ、ﾅﾝﾀﾞｯﾃｰ

はい、そうなんです、カスタマイズビューは初期設定のままにするとこんな感じなんです。何も表示されません。世知辛いですね。
でも大丈夫です。とりあえずまた設定画面に戻りましょう。 設定画面から『設定済みの一覧』のドロップダウンから先ほどの一覧を選択すると、一覧の編集画面に遷移します。

さて、この一覧の内容を良く見てみると、『HTML』と記載されている箇所がありますね。 そうなんです。HTMLを記載しないと、カスタマイズビューは何も表示されないのです。
なので、まず手始めに簡単なHTMLを書いてみましょう。 上手く書けたら保存をして、一覧を確認して見ましょう！

先ほど書いたHTMLがポツンと表示されましたでしょうか。カスタマイズビューに記載したHTMLがこのようにkintoneのビューに表示されるのがカスタマイズビューです。

もちろん、HTMLの内容を変更すれば一覧に反映されます。

書いたものが表示されるだけなの？

上記のようにHTMLだけ記載するだけだと使いみちがほぼないですね。ほぼ無いですね！(⑅∫°ਊ°)∫

何故かと言うと、kintoneのアプリに溜めたデータの活用が出来ていないからです。アプリに溜めたデータを活用し、自分好みに表示出来るのがカスタマイズビューの醍醐味になります。

でも、どうやってアプリのデータを活用出来るのでしょうか？
実はカスタマイズビューを設定した後にJavaScriptのカスタマイズでデータを引っ張ってきて表示する必要があります。

kintoneカスタマイズを体験したことがある人は聞き覚えがあると思いますが、kintoneには『レコード一覧イベント』があります。レコードの一覧画面が表示された時に、レコード一覧のデータがオブジェクトに格納され、そのデータを活用することが出来ます。これはもちろんカスタマイズビューでも同じことです。このデータを上手く整形して、上手くHTMLと組み合わせてカスタマイズビューに表示させることが出来ます。

まとめますと、カスタマイズビューを使うとアプリの中のデータを自分の好きな用に表示させることが出来ます。
developer network ではカスタマイズビューのTipsをいくつか紹介しています。読んで頂けると、イメージが掴めると思います。

• ・カスタマイズビューとCSSフレームワークでオリジナルのビューを作る方法
• ・レコードに登録された添付ファイルをカスタマイズビューに表示してみよう
• ・101件以上を「さらに表示」ボタンを使って表示する
• ・AngularJSを使ってオリジナルのビューをつくる方法

余裕がある方は、是非チャレンジしてみてください！

カスタマイズしてみたもの

今回は営業日報のアプリを作成し、それ用のカスタマイズビューを作成してみました。
まず、シンプルな営業日報アプリをいちから作りました。作成者、往訪先、日付、商談のステータスと往訪内容が記載されています。 表形式で見ると下記のようになります。

ずらーっと情報が載っていて、とてもまとまった感じがします。
kintoneでチームの情報を共有するのって良いですね！

ただ、情報が多ければ多いほど読むものが必然的に多くなってきます。往訪の状況を把握したいマネージャー層にとっては、全ての往訪内容の情報を読むのはかなり単調な作業になってしまわないでしょうか。

なので、少しでも楽しく閲覧出来るようにカスタマイズビューに挑戦してみました。

格好良さ、スケールの大きさと実用性を優先してみたら、下記の用なものが出来上がりました。

（´-`）.｡oO（これが・・・宇宙規模の営業日報・・・！）

おわりに

いかがでしたでしょうか。これから冒険出来そうな気持ちになれたら幸いです。 ソースは私のGithubのレポジトリに載せました。
まだツメが甘い部分があるので、お試ししたい方は出来れば自分の開発者環境にあててみてください。
開発環境が無い方は是非申し込んで見ましょう！

設定は上手くいったら、こんな感じになります。カスタムビューのビューIDはJavaScriptの方でも指定しているので、そこはコードを変更しておいてください。

コードの実装ですが、こちらのサイトを参考にさせて頂きました
【イベントレポ】映画とJS vol.0 映画のワンシーンをJavascriptで作ってみよう！に参加しました。 #‎eigatojs

技術者向けサイト

cybozu.com developer network にユーザ登録をすると、下記のメンバー登録特典があります！ ★メンバー登録特典★
- コミュニティに投稿やコメントしたり、Tips に質問できます。
- API のアップデート情報の通知を受け取ることができます。
- 5ユーザー、1年間無償の開発者ライセンスを申し込むことができます。
- [★New] Tipsやサンプルの動きを確認できるデモサイトを利用することができます。
- [★New] HTTP Client Tool for kintoneを利用することができます。