Ma11 kintoneハンズオン tokyo

kintone ハンズオン体験

サイボウズ株式会社

#kintone

自己紹介

北川恭平（きたがわきょうへい）

システムコンサルティング本部に所属し、 Developer むけに kintone を普及させる活動をしています。

開発者向けイベントを企画したり、技術サイトの運営をしたり、会社のブログに記事を書いたりしてます。

1-4 月までアメリカのサンフランシスコで支社の立ち上げ支援をしていました。

• 埼玉県春日部市出身• 中野区在住

Details Favorite• 野球• 読書• 麻雀• コーヒーを挽く• 鰹節を削る• カレーをスパイスから作る

アジェンダ

▌kintone アプリ作成

▌kintone REST API ハンズオン

▌kintone JavaScrip ハンズオン

▌kintone をハッカソンで使う準備

3

本資料の URLhttp://bit.ly/1Qe4MSI

4

http://bit.ly/1Qe4MSI

ハンズオンに必要となる環境

▌PC▌ネットワーク環境

▌kintone のアカウント（開発者ライセンス or お試し環境）

5

アジェンダ





6

kintone アプリの作成

▌主に 3 種類の方法で、すぐにアプリを作成可能

7

① アプリストアから選ぶ

②Excel ファイル

から作る

③ はじめからつくる

シナリオ

▌自分の今いる地点の近くのお気に入りのレストランを検索するシステムを作成する。※時間がないので、今回はスマホアプリは作成しません。

8

アプリ作成の流れ

1. kintone へログインする

2. kintone アプリを作成する

3. CSV を kintone アプリにインポートする

9

1.kintone へログインする

10

kintone アプリ作成

ログイン画面にアクセス

11

https:// サブドメイン .cybozu.com/

ログイン画面にアクセス

12

申請時のメールアドレスでログイン

ログイン完了

クリックして kintone にアクセス

ユーザー情報の管理や cybozu.com 全体に影響する設定

メンテナンス等のお知らせ

13

2.kintone アプリを作成する

14


新デザイン設定

本ハンズオンは新デザイン前提ですすめます

kintone システム管理 > 新旧デザインの切り替えよりご変更ください

15

ポータル

16

機能の切り替え

自分が作業者のタスク

アカウントやシステムの設定

クリックしてアプリを作成

通知

アプリの作成方法を選ぶ

17

アプリの名前を入力

任意の名前を入力して保存します。例）レストラン情報アプリ

18

一般設定をクリック

「一般設定」でアイコンやデザインを選びます。

19

一般設定

20

好きなアイコンを選びます。画像をアップロードする事もできます。

一般設定

21

アプリグループを使うとアクセス権を一括で設定できます。Public→ 公開用、 Private→ 自分用

アプリの説明を記載しておくと、一覧画面に表示されます。

フォームの編集をクリック

22

「フォームの編集」で画面設計を行います。

フォームの編集

23

• フィールドをドラッグ & ドロップして配置や並び順の変更ができます。

• フィールドの端をドラッグするとサイズが変更できます。• 「歯車アイコン > 設定」から属性の設定ができます。

完成形

24

アプリ情報詳細

25

フィールド名フィールドコードフィールドタイプ

レストラン名 Name 文字列 (1 行 )リンク Link リンク

備考 Details 文字列 (複数行 )住所 Address 文字列 (1 行 )緯度 lat 数値

経度 lng 数値

一覧の追加をクリック

「一覧の追加」で一覧画面に表示する項目を選びます。

26

一覧の追加

一覧の表示形式を選び、表示するフィールドを設定します。絞り込みにより、一部のレコードだけ表示する事もできます。

27

一覧の追加

28

例として「レストランリスト」と設定します。

設定完了

これで kintone アプリの設定は完了です。設定完了をクリックして、保存してくださ

い。

29

アプリを確認します

30

データの登録

データの削除

3.CSV を kintone アプリにインポートする

33


CSV をダウンロード（サンプル）

http://bit.ly/1Qe4MSI34

レストラン情報アプリ_Sample.csv

http://bit.ly/1Qe4MSI

読み込む

35

ダウンロードした CSV を選択

36

ファイルの先頭行

37

フィールドの対応付け

38

ファイルの読み込み完了

39





40

REST API ハンズオン流れ

1. 環境準備

2. API トークンの準備

3. curl コマンドで情報の取得 (1件 )4. curl コマンドで情報の取得 (queryあり )5. curl コマンドで情報の登録

6. curl コマンドで情報の更新

41

REST API

42

▌kintone をバックエンドのデータベースとしての利用する際に有効

REST API

REST API

▌レコードの取得・追加・更新・削除

▌スペースの作成・更新

▌デプロイ（アプリ作成・設定変更）

43レストラン情報アプリ

レストラン情報登録

レストラン情報取得

API に関する情報

▌REST API の共通仕様

http://goo.gl/CLH3ST

▌フィールド形式

http://goo.gl/55Nhk9

44






1. 環境準備

45

REST API ハンズオン

準備

▌curl コマンドを使える環境

例： Cloud9

46

cloud9 でプロジェクトを作成

47

ターミナルを開く

48

curl

49

▌curl で kintone にアクセスするうえでの基本的なオプションは以下です。

curl -X < メソッド > -H <ヘッダー情報 > -d < パラメータ >

2.API トークンの準備

50


API トークンの設定

51

API トークンの設定

▌レコード閲覧、レコード追加、レコード編集をチェック

52

保存を忘れずに

53

3.curl コマンドで情報の取得(1件 )

54


アプリ番号の確認

▌取得したいアプリのアプリ番号を URL より確認

55

https://example.cybozu.com/k/306/

レコード番号の確認

▌取得したいレコードのレコード番号を確認

56

情報まとめ

▌curl コマンドよりこのレコードのデータを取得しますアプリ番号 :306

レコード番号 :12

サブドメイン :example

API トークン :H0XFs7YgeGz2GtkKBoZjNj5ddfEZ7s5Pmi2uNcrK

57

curl コマンドの使い方：curl -X < メソッド > -H <ヘッダー情報 > -d < パラメータ >

リクエスト情報

▌データ取得リクエスト URI : https://example.cybozu.com/k/v1/record.json

クエリ文字列： app=306&id=12

HTTP メソッド : GET

リクエストヘッダー : X-Cybozu-API-Token:H0XFs7YgeGz2GtkKBoZjNj5ddfEZ7s5Pmi2uNcrK

58

▼レコードの取得 (GET)https://cybozudev.zendesk.com/hc/ja/articles/202331474#step1

https://cybozudev.zendesk.com/hc/ja/articles/202331474#step1


レコード番号を指定して取得

▌コマンド ( 完成版 )

curl "https://example.cybozu.com/k/v1/record.json?app=306&id=12" -X GET -H "X-Cybozu-API-Token:H0XFs7YgeGz2GtkKBoZjNj5ddfEZ7s5Pmi2uNcrK"

※この場合、 content-Type の指定は不要です。

59

結果

▌成功した時のレスポンス

{"record":{"更新日時":{"type":"UPDATED_TIME","value":"2015-09-14T05:40:00Z"},"作成者":{"type":"CREATOR","value":{"code":"Administrator","name":"Administrator"}},"$revision":{"type":"__REVISION__","value":"1"},"文字列__1行_":{"type":"SINGLE_LINE_TEXT","value":"日本橋お多幸本店"},"更新者":{"type":"MODIFIER","value":{"code":"Administrator","name":"Administrator"}},"lng":{"type":"NUMBER","value":"139.772"},"record_no":{"type":"RECORD_NUMBER","value":"12"},"リンク":{"type":"LINK","value":"http://retty.me/area/PRE13/ARE15/SUB1503/100000006250/"},"文字列__複数行_":{"type":"MULTI_LINE_TEXT","value":"大正13年創業の純関東風おでんの店「日本橋お多幸本店」。名物は、茶飯の上におでんのつゆをかけ、その上に豆腐を乗せた「とうめし定食（￥650）」。とろけるような豆腐の下に、甘辛いたれがしみ込んだご飯がまた何とも美味しい。おでんも濃いめの味付けでお酒が進む。"},"作成日時":{"type":"CREATED_TIME","value":"2015-09-14T05:40:00Z"},"Address":{"type":"SINGLE_LINE_TEXT","value":"東京都中央区日本橋2-2-3２丁目２番地３"},"$id":{"type":"__ID__","value":"12"},"lat":{"type":"NUMBER","value":"35.6823"}}}

60

4.curl コマンドで情報の取得(queryあり )

61


クエリを指定してレコードを取得 ( たいめいけんを取得 )

62

アプリ番号の確認

▌取得したいアプリのアプリ番号を URL より確認

63

https://example.cybozu.com/k/306/

クエリ

▌今回はレストラン名 ( フィールドコード name) が”たいめいけん”のフィールドを取得します

64

Name = “ たいめいけん”


▌データ取得 ( クエリで条件を指定 )リクエスト URI : https://example.cybozu.com/k/v1/records.json

クエリ文字列： app=306&query=name= “ たいめいけん“

HTTP メソッド : GET


65

▼レコードの一括取得 (GET)https://cybozudev.zendesk.com/hc/ja/articles/202331474#step2





クエリでレコードを指定してレコードを取得

▌コマンド ( 完成版 )curl "https://example.cybozu.com/k/v1/records.json?app=306&query=Name=\" たいめいけん \"" -X GET -H "X-Cybozu-API-Token:H0XFs7YgeGz2GtkKBoZjNj5ddfEZ7s5Pmi2uNcrK"※この場合、 content-Type の指定は不要です。

※ クエリ内のダブルクウォートは、 \ でエスケープしてください。

66

結果

▌成功した時のレスポンス

{"records":[{"Name":{"type":"SINGLE_LINE_TEXT","value":" たいめいけん"},"更新日時":{"type":"UPDATED_TIME","value":"2015-09-14T05:40:00Z"},"作成者":{"type":"CREATOR","value":{"code":"Administrator","name":"Administrator"}},"Link":{"type":"LINK","value":"http://retty.me/area/PRE13/ARE15/SUB1503/100000009459/"},"$revision":{"type":"__REVISION__","value":"1"},"Details":{"type":"MULTI_LINE_TEXT","value":"言わずと知れた名店"},"作成日時":{"type":"CREATED_TIME","value":"2015-09-14T05:40:00Z"},"Address":{"type":"SINGLE_LINE_TEXT","value":"東京都中央区日本橋１丁目１２番地１０"},"lng":{"type":"NUMBER","value":"139.7756"}," 更新者":{"type":"MODIFIER","value":{"code":"Administrator","name":"Administrator"}},"record_no":{"type":"RECORD_NUMBER","value":"13"},"$id":{"type":"__ID__","value":"13"},"lat":{"type":"NUMBER","value":"35.6826"}}],"totalCount":null}

67

5.curl コマンドで情報の登録

68


新しくデータを登録してみましょう

69

項目フィールドコードデータ

レストラン名 Name サイボウズカフェ

リンク Link http://cybozu.co.jp/備考 Details コーヒーがおいしい

住所 Address 東京日本橋タワー28F

緯度 lat 35.6826経度 lng 139.7723※ 画像はイメージ

です。


▌データ登録リクエスト URI : https://example.cybozu.com/k/v1/record.json

HTTP メソッド : POST


content-Type:application/json

リクエストボディ : {"app":306,"record":{"Name":{"value":" サイボウズカフェ "},"Link":{"value":"http://cybozu.co.jp"},"Details":{"value":" コーヒーがおいしい "},"Address":{"value":"東京日本橋タワー "},"lat":{"value":35.6826},"lng":{"value":139.7723}}}

70

▼レコードの取得 (POST)https://cybozudev.zendesk.com/hc/ja/articles/202166160

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

クエリでレコードを指定してレコードを取得

▌コマンド ( 完成版 )curl "https://example.cybozu.com/k/v1/record.json" -X POST -H "X-Cybozu-API-Token:H0XFs7YgeGz2GtkKBoZjNj5ddfEZ7s5Pmi2uNcrK" -H "content-Type:application/json" -d '{"app":306,"record":{"Name":{"value":" サイボウズカフェ "},"Link":{"value":"http://cybozu.co.jp"},"Details":{"value":" コーヒーがおいしい "},"Address"{"value":"東京日本橋タワー "},"lat":{"value":35.6826},"lng":{"value":139.7723}}}'

※body の文字列はシングルクウォートでくくって、ダブルクウォートをエスケープしましょう

71

結果

▌レスポンスと登録されたレコード

72

{"id":"16","revision":"1"}

レスポンス

レコード

5.curl コマンドで情報の更新

73


登録したデータを更新してみましょう

74


レストラン名 Name サイボウズカフェ

< 変更前 >


レストラン名 Name ボウズカレー

< 変更後>


▌データ登録リクエスト URI : https://example.cybozu.com/k/v1/record.json

HTTP メソッド : PUT


content-Type:application/json

リクエストボディ : {"app":306," ,“id":16," record":{"Name":{"value":" ボウズカレー "}}}

75

▼レコードの取得 (POST)https://cybozudev.zendesk.com/hc/ja/articles/201941784



レコード更新

▌コマンド ( 完成版 )curl "https://example.cybozu.com/k/v1/record.json" -X PUT -H "X-Cybozu-API-Token:H0XFs7YgeGz2GtkKBoZjNj5ddfEZ7s5Pmi2uNcrK" -H "content-Type:application/json" -d '{"app ":306,"id":16,"record":{"Name":{"value":" ボウズカレー "}}} '

※body の文字列はシングルクウォートでくくって、ダブルクウォートをエスケープしましょう

76

結果

▌レスポンスと更新されたレコード

77

{"revision":"2"}

レスポンス

レコード





78

JavaScript API

79

▌kintone をフロントエンドのインターフェースとして利用する際に有効

JavaScript

JavaScript API

▌イベントハンドラ（一覧、表示、追加、編集、削除）

▌画面上の値を取得・設定

▌REST API の実行

▌外部 API の実行

レストラン情報アプリ

連携

JavaScript ハンズオン流れ

1. アプリの変更

2. サンプルコード適用

81

JavaScript ハンズオン

今回は、レストラン情報アプリの「住所」を取得して地図にピンを立てます

82

1. アプリの変更

83


新しくフィールドを追加します

84

フィールド名フィールドコード

フィールドタイプ

- Map スペース

レコード番号 record_no レコード番号

一覧「レストランリスト」にレコード番号を追加します

85

設定完了を忘れずに

86

2. サンプルコード適用

87


cybozu.com developer network サンプル

▌顧客訪問リストを地図にピン表示する

88https://cybozudev.zendesk.com/hc/ja/articles/202341964


developer network のサンプルをエディタにコピー

89

保存

▌文字コード「 UTF-8 」、ファイル名「 map.js 」として保存

90

JavaScript の適用

▌アプリの管理画面「詳細設定」より作成したファイルを読み込ませる

91

カスタマイズ適用確認

▌レコード一覧画面と詳細画面で地図が表示される

92

< レコード一覧画面 >

< レコード詳細画面 >

ハンズオンまとめ

▌自分の今いる地点の近くのお気に入りのレストランを検索するシステムを作成する。→ 今回は、 kintone でレストラン DB の構築、データの出し入れを確認！

GPS と組み合わせれば完成するはず。（実際作ってはいません…）

93





94

開発者ライセンスcybozu.com developer network

1年間無料ライセンス

※ アカウント登録が必要です

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

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

API ドキュメント

kintone API ドキュメント

Tipscybozu.com developer network

kintone API活用ノウハウ

集

おすすめ Tips


▌ハッカソンで kintone を使おう！


kintone をよろしくお願いします。ご清聴ありがとうございました。

Technology

Ma11 kintoneハンズオン tokyo