kViewerのカスタマイズ例（Google Map）
会社の隣の人には意外にも不評なこのブログですが、最近はRaspberry Pi関連のトピックへのアクセスが多いようで、嬉しい限りです。ご覧頂いている皆さま、ありがとうございます。
さて、今回はサイボウズスタートアップスさんからリリースされているkintone連携サービス「kViewer」のカスタマイズ例をご紹介したいと思います。
kViewerは、kintoneのデータやグラフを外部に公開できるサービスです。 kintoneと同じように30日間の無料トライアルも可能です。
（公式サイトより）
完全公開から、アクセス制限（パスワード認証、IPアドレス）、公開期間等の設定に加え、kintoneと同じようにJavaScriptやCSSの埋め込みによるカスタマイズまでできるようになっています。ですので、CMS、掲示板的な使い方が向いているように感じますが、見た目等は自在に作り込むことが出来ます。
今回は、kintoneのサンプルにある「顧客訪問リストを地図にピン表示する」でも使われているGoogle Maps APIを用いたkViewerカスタマイズをご紹介したいと思います。データとしては、kintoneの勉強会「kintone Café」の開催情報を利用し、地図上の開催地にピンを立てていきたいと思います。対応するkintoneアプリもこちらに公開させてもらっています。
まずは出来上がりイメージです。
【Before：従来のkViewerの画面】
従来のkViewerの画面は、kintoneの通常の画面に似たようなものですね。
【After：JavaScriptとCSSによるカスタマイズ】
（実際の公開ページはこちら）
やはり、地図が入ると豪華に見えますね。今回はピンをクリックするとバルーンが出るオマケをつけています。早速ですが、サンプルコードは次の通りです（GitHubで公開中）。
JavaScriptもベタに書くことになりますが、kintoneでJavaScriptカスタマイズをやったことがある方は、同じ要領でカスタマイズできると思います。kViewerならではのポイントを挙げるとすれば、ページやライブラリの読み込みを待つ処理を入れる必要があるところだと思います。window.addEventListener("DOMContentLoaded", function() {から数行ですね。また、サンプルではよく使うjQueryを取込んでいますが、今回は使っていません。
ちなみに手こずったのは、データバインドです。kViewerでは現状kintoneのようにデータバインドする関数・APIがありませんので、表から取り出すことにしました。ここでクロスブラウザ（innerTextとtextContent）に紐つく問題の顕在化です。getElementText()で項目名前後の改行と空白を取り除くようにして解決しています。
最後に、kViewerはホームページへ埋め込むためのiframeタグのコードを発行してくれます。このブログの横幅の制約上、ちょっと苦しい配置ですが実際に張り込んでみました。
ちょっと長くなりましたが、kViewerでのページカスタマイズを考えられている方の参考になれば幸いです（サンプルのご利用に際しては自己責任でお願い致します）。
