kintoneカスタマイズハンズオン

2015年7月15日

アールスリーインスティテュート

いけがみ みどり

大阪 Vol.3

自己紹介

カスタマイズの前に・・・

JavaScriptを使ってカスタマイズしてみよう

ハンズオンで利用するアプリの準備

カスタマイズその① バリデーション

カスタマイズその② 住所から地図表示

あじぇんだ

2

池上 緑（いけがみ みどり）アールスリーインスティテュート

よく間違われますが正真正銘のエンジニア 肩書きはクラウドエンジニア kintone専属（？）エンジニアです！ 6/1にJOINしてまだまだひよっこです＞＜ 活動はこのあたりに書いてあるので見てね！

https://www.r3it.com/community/

個人では・・・ パイ投げしたりMCやってたりレイヤーやってたりJKなってたりいろい

ろ（ 最近はどりぃって呼んでくれる人も増えてるので

初めての方は どりぃ（＾ω＾）で覚えてください！(๑・౩・๑）

自己紹介

@p52_rocca

p526CA

3

ところでみなさん

4

具体的にkintoneのカスタマイズって

5

どんなことをさすと思いますか？

6

わたしkintoneのカスタマイズ

やったことあるよ！って人？

7

データの取り込み外部システムとの連携

kintoneと他のシステムとのデータ連携が可能• 他のシステムのデータをkintoneに

取り込む

• kintoneに蓄積したデータを他のシステムに渡す

JavaScript/CSSを利用した画面のカスタマイズ

標準では搭載されていない機能を利用することが可能に！

CSSでkintoneのデザインを変更したりすることも

8

カスタマイズってどんなこと？

今回はJavaScriptを使って

カスタマイズしてみるよ！

9

標準機能で出来ないことができる！

cybozu.com developer networkにサンプルコードがたくさん掲載されているので、それを参考にするとわかりやすいかも。

わからないことはサイボウズの中の人やエバンジェリストの人にたくさん質問しよう！

みんなで一緒に学べばカスタマイズも怖くないよ！

JavaScriptでカスタマイズしてみよう

10

cybozu.com developer network https://cybozudev.zendesk.com/hc/ja

さてそれでは本題のハンズオンへ

11

ハンズオンで利用するアプリの準備①

12

お持ちのアカウント（※ここでは開発者アカウントになります）

でログインします。

ハンズオンで利用するアプリの準備②

13

画面右上の歯車マークから「kintoneシステム管理」

を選択します。

kintoneシステム管理画面の「アプリ」＞「アプリテンプレート」

を選択。

ハンズオンで利用するアプリの準備③

14

読み込むテンプレートを指定します。

テンプレートを取り込むため「読み込む」を選択。

ハンズオンで利用するアプリの準備④

15

保存したテンプレート「kintoneCafe_osaka3.zip」を指定して

「読み込む」をクリック。※zipは解凍しないようにして下さい。

テンプレートが正常に読み込まれると右記のように表示されます。

ハンズオンで利用するアプリの準備⑤

16

テンプレートから読み込んだアプリを追加します。※ここではスレッド内に作成しています。

「テンプレートから選ぶ」を選択します。

ハンズオンで利用するアプリの準備⑥

17

先ほど読み込んだテンプレートが表示されますので、

「アプリを作成する」をクリック。

アプリが追加されました！

カスタマイズその①バリデーション

18

バリデーションって何？

19

（答え）正誤性チェック・・・みたいなもの。

20

実際にどんな動きになるか確認してみよう！

21

・・・その前に

22

kintoneにおけるJavaScriptの書き方のルールを学ぼう！

23

kintoneにおけるJavaScriptのルール

24

拡張子は.jsで保存

• ファイル名の拡張子は表示しておいたほうが良い。

• じゃないとテキストとかで保存されててスクリプト動かないよ！なんてことも…

文字コードはUTF-8で保存

• 異なる文字コードで保存すると文字化けする原因に！

即時関数パターンで記述（後述）

strictモードを使用する（後述）

即時関数パターンとは

25

下記のような書き方

{}内に処理の内容を記述する

• ルールのようなものなので覚えてしまったほうが良いかも。

• 関数を定義するのと同時に実行もする。

• 関数って何？って人はわかる人に聞いてね＞＜

strictモードとは

26

“use strict”と宣言する

記述ミス防止目的

使うものは明示的に「使う」って宣言して使ってね！って意味

kintoneのイベント処理①

27

kintoneにはkintone独自のイベントがある

https://cybozudev.zendesk.com/hc/ja/sections/200418540

• レコード一覧イベント（表示、保存、変更など）

• レコード表示イベント（詳細画面表示、削除前など）

• レコード追加イベント（表示、保存など）

• レコード編集イベント（表示、保存など）

• グラフ表示イベント （PC用のみ）

kintoneのイベント処理②

28

レコード追加イベント

• （例）app.record.create.submit

→レコード追加画面で保存するタイミング

レコード編集イベント

• （例）app.record.edit.submit

→レコード編集画面で保存するタイミング

レコード一覧イベント

• （例）app.record.index.edit.submit

→レコード一覧画面で保存するタイミング

kintoneのイベント処理③

29

kintoneにおいてデータの取得、登録、更新を行う場合、フィールドコードの指定が必要

https://cybozudev.zendesk.com/hc/ja/articles/202166330

フィールドコードの確認方法

30

フォームの編集画面の任意のフィールドの「設定」ボタンをクリックすると表示されます。

実際にJavaScriptを編集してみよう！！

31

カスタマイズ課題①

32

顧客リストアプリのフィールドコードを確認し、formcheck-custom.js のXXXX印に埋めてみましょう。

編集が終わったら

33

いよいよkintoneにアップロード

するよ！

34

JavaScriptのアップロード①

35

まず、アプリの設定画面を開きます。

JavaScriptのアップロード②

36

詳細設定の▼印をクリックすると、「JavaScript/CSSカスタマイズ」という項目が出てきますので、

こちらをクリック。

JavaScriptのアップロード③

37

「PC用のJavaSciptファイル」から「アップロードして追加」をクリックします。

JavaScriptのアップロード④

38

バリデーションで利用するformcheck-custom.jsを選択して保存して下さい。

※アップロード先は「PC用のJavaScriptファイル」となります。

JavaScriptのアップロード⑤

39

「設定完了」ボタンをクリックするとJavaSciptが反映されます。

JavaScriptが正常に動作するか確認しよう！

40

JavaScriptの動作確認

41

（新規レコード追加時）電話番号やFAX、メールアドレスを全角で入力してみる

（レコード編集時）メールアドレスの@を抜く、ドメインを抜いてみる...etc

図のようなエラーが発生すれば、正常にバリデーションが出来ている

ことになります！

カスタマイズその②住所から地図を表示する

42

スペースフィールドについて①

43

スペースフィールドには要素IDというものを指定することが可能。

このスペースフィールドの要素IDは「Maps」であることがわかります。※デフォルトでは空の状態であるため任意のIDを設定することも可能です。

スペースフィールドについて②

44

要素IDを下記のように指定することで、フィールドが取得でき、その中に更に別の要素を入れることが可能。

今回はこのスペースフィールドを

利用して

45

そのフィールドに地図を表示させてみたいと思います！

46

カスタマイズ課題②

47

顧客リストアプリのフィールドコードを確認し、ol37gmap-custom.js のXXXX印に埋めてみましょう。

編集できたらkintoneにアップロード

してみよう！

48

JavaScriptのアップロード

49

地図表示には、2つファイルが必要になります。

• ol37gmap-custom.js（編集したもの）

• 地図表示に利用するOpenLayerライブラリ

https://js.cybozu.com/openlayers/v3.7.0/ol.js

アップロードできたら地図が正常に表示されるか

確認してみよう！

50

JavaScriptの動作確認

51

レコード登録後に、以下のような地図が表示されれば

OKです！

ここからいろいろなカスタマイズに

挑戦してみて下さい！

52

すぺしゃるさんくす

53

ボウズマン画像の使用許可をくださったサイボウズの皆様

kintone Café大阪運営の皆様

ご参加頂いた皆様