【元記事をASCII.jpで読む】

ジョイゾー代表の四宮氏とkintoneエバンジェリストの山下氏に教えを乞う

 JavaScriptの知識があれば、「設定」画面の「JavaScript/CSSでカスタマイズ」から設定することで、kintoneをカスタマイズできる。筆者はコードを書けないのだが、「cybozu developer network」にいくつかサンプルコードが公開されており、まずはお試しとしてチャレンジしてみた。

 しかし、ウェブに情報が少なく、素人には何をどうしていいのかさっぱりわからない。適当にいじってみるが、ほとんどエラーになるか、なんとかエラーを消しても思うように動作しない。時々時間のあるときにチャレンジするが、ギブアップするということが続いていた。

 そこで、昨年筆者が経営する飲食店で開催した「kintone Cafe 東京 Vol.6 in 原価BAR」(「第25回 飲食店の悩みをkintoneで解決」をテーマにハッカソン開催!」を参照)で知り合った、株式会社ジョイゾー代表の四宮靖隆氏に相談を持ちかけてみた。株式会社ジョイゾーは、サイボウズ製品に関するコンサルティングやシステム開発を手がけ、kintoneプラグインの開発・販売も行なっている。kintoneのプロ集団と言える。

 オフィスに伺うと、代表の四宮氏に加えて、サイボウズ認定kintoneエバンジェリストである山下竜氏が対応してくれた。kintoneプラグインの開発者に、既存のJavaScriptのセットアップというど初心者向けの操作方法を聞くというのはトゥーマッチすぎるが、困っているのでご協力を仰いだ。

 「cybozu developer network」内の「サンプル」で公開されている「kintone JavaScript API」の中に「To Doをガントチャートで表示する」とか「ログインユーザーが担当しているレコードに背景色をつける」など地味に便利そうなJavaScript APIがいくつも公開されている。今回は、その中から「OpenStreetMapで写真の位置情報を表示する」の導入にチャレンジしてみようと思う。

 フリーで利用できるOpenStreetMapというサービスを利用し、写真の撮影地を表示するというものだ。まずは、アプリを作成する。最低限必要になるのは、写真をアップロードする「添付ファイル」フィールドと、地図を表示する「スペース」フィールドだけ。それぞれ、フィールドコードは「pic」「map」としておく。

 続いて「設定」タブから「JavaScript/CSSでカスタマイズ」を開く。ここで、「PC用のJavaScriptファイル」や「PC用のCSSファイル」を設定するのだ。ウェブページを見ながら、URLを該当箇所にコピーしていく。「PC用のJavaScriptファイル」にコピーする際、「順番も重要なので、上から1つずつコピーしていくこと」と山下氏。CSSにひとつと「PC用のJavaScriptファイル」に3つのURLをコピーした。「スマートフォン用のJavaScriptファイル」用の設定がないなら、ないままでOKとのこと。その場合は、スマホアプリではJavaScriptが動作しなくなる。

 続いて、コードをコピーし、メモ帳などにペースト。保存ダイアログでファイル名を「sample.js」に変更する。さらに、「文字コード」のプルダウンメニューから「UTF-8」を選択して、「保存」をクリックする。すると、保存場所にテキストファイルではなく、JavaScriptのファイルが作成される。このファイルを「PC用のJavaScriptファイル」の一番下に追加して完了だ。アプリを更新し、新規レコードを追加してみると、無事地図が表示された!

 アプリを起動すると、登録されているレコードを撮影した場所が表示される。レコードを開くと、その写真を撮影した場所が示される。複数枚の写真をアップロードしてもOKだ。撮影したカメラやスマホ、利用している環境によっては場所を示すジオタグという情報がない、もしくは削除され地図がでないこともあった。

 初回は手間取ったJavaScriptの追加だが、一通りの操作をわかってしまえば、もう次からは迷わず設定できそう。いろいろと便利なJavaScriptを探し、片っ端から試してみようと思う。

公開されているJavaScriptをコピペでkintoneにインストールしてみる