柳谷智宣のkintoneマスターへの道 第48回

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

サイボウズ社が提供しているウェブサービス「kintone」は、一言で言うなら「簡単に自社の業務に適したシステムを作成できるクラウドサービス」だ。業務アプリを直感的に作成できるほか、社内SNSとしての機能も備えスピーディーに情報共有ができるなど魅力が盛り沢山だ。
本連載では、そんなkintoneの導入から基本機能の紹介、そしてアプリの活用法など、ビジネスの現場で役立つ情報を取り上げていく。第48回では、公開されているJavaScriptをコピペでkintoneにインストールしてみた。

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

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

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

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

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

「cybozu developer network」で公開されている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が動作しなくなる。

「OpenStreetMapで写真の位置情報を表示する」という機能をアプリに搭載してみたい

新しいアプリを作り、フィールドをドラッグ＆ドロップする

「設定」の「JavaScript/CSSでカスタマイズ」を開く

「cybozu developer network」からURLをコピーする

該当箇所にコピーして「保存」をクリックする

順番通りに、すべてのURLを追加する

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

コードを全部コピーする

メモ帳を開いてペーストする

ファイル名を「sample.js」にしたうえ、文字コードを「UTF-8」にして保存する

JavaScriptのファイルが作成される

「PC用のJavaScriptファイル」の一番下に追加する。ドラッグ＆ドロップでもOKだ

山下氏も別環境で一緒に作業しており、1手順ずつ教えてくれた

アプリを更新する

ジョイゾーの事務所内で撮影した写真をアップロードしたところ、無事地図が表示された！

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

アプリの起動画面。登録した写真の撮影場所を一覧できる

レコードの詳細画面でも確認できる

複数枚の写真をアップロードしてもOK

ジオタグが付いていないと、地図も表示されない

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

■関連サイト

• kintone（サイボウズ）