Kintone hands on
-
Upload
twilioforkwc -
Category
Business
-
view
381 -
download
4
description
Transcript of Kintone hands on
![Page 1: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/1.jpg)
サイボウズ株式会社 2014.9.26
~ハンズオン~
![Page 2: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/2.jpg)
1 Copyright (C) 2014 Cybozu
本日のゴール
![Page 3: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/3.jpg)
2 Copyright (C) 2014 Cybozu
kintoneで受付システムを作ろう
![Page 4: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/4.jpg)
3 Copyright (C) 2014 Cybozu
こんなやつです
![Page 5: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/5.jpg)
来店者入力用の画面
Copyright (C) 2014 Cybozu 4
![Page 6: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/6.jpg)
店舗用の画面(一覧)
Copyright (C) 2014 Cybozu 5
![Page 7: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/7.jpg)
店舗用の画面(詳細)
Copyright (C) 2014 Cybozu 6
![Page 8: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/8.jpg)
7 Copyright (C) 2014 Cybozu
構成
![Page 9: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/9.jpg)
Copyright (C) 2014 Cybozu 8
kintoneアプリ
来店者入力用の画面 店舗用の一覧画面 店舗用の詳細画面
1.電話番号を登録 2.確認 3.呼び出し
4.SMS送信
REST API � JavaScript �
REST API �
![Page 10: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/10.jpg)
9 Copyright (C) 2014 Cybozu
開発時に便利な情報
![Page 11: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/11.jpg)
cybozu.com developer network
Copyright (C) 2014 Cybozu 10
https://cybozudev.zendesk.com/
![Page 12: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/12.jpg)
• 動作環境 https://www.cybozu.com/jp/service/requirements.html
• kintone JavaScript APIのイジりかた https://cybozudev.zendesk.com/hc/ja/articles/201755040
• JavaScriptカスタマイズのデバッグをかんたんにするウラワザ https://cybozudev.zendesk.com/hc/ja/articles/201308690
• 本日の資料 – 基礎講座 https://github.com/asaga/twilio-kintone/blob/master/kintone_lecture.pdf
– ハンズオン https://github.com/asaga/twilio-kintone/blob/master/kintone_hands_on.pdf
Copyright (C) 2014 Cybozu 11
![Page 13: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/13.jpg)
JavaScript のデバッグ • ChromeやFirefoxの開発ツールが便利
– ブレークポイントの設定 – コンソールで出力内容を確認
Copyright (C) 2014 Cybozu 12
![Page 14: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/14.jpg)
タイムスケジュール
Step1 kintone アプリを作ろう 30分 Step2 詳細画面にボタンを置こう 30分 Step3 Twilio APIを使ってSMSを送ろう 30分 Step4 カスタマイズビューで来店者用の 入力画面を作ろう Step5 受け付け情報をkintoneに登録しよう
Copyright (C) 2014 Cybozu 13
![Page 15: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/15.jpg)
14 Copyright (C) 2014 Cybozu
Step1 kintone アプリを作ろう (目標:30分)
![Page 16: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/16.jpg)
kintone アプリを作ろう • アプリ名は任意の名前でOK。 • 一般設定はデフォルトで。 • 以下の内容でフィールドを配置します。
• 一覧の設定
Copyright (C) 2014 Cybozu 15
フィールドタイプ フィールド名 フィールドコード その他 文字列(1行) 名前 name 必須
数値 携帯番号 tel 必須 数値 人数 number 必須
ラジオボタン 席 seat テーブル、カウンター
一覧名 店舗用
レコード一覧の表示形式 表形式
項目 名前、人数、席
絞り込み 条件:すべてのレコード ソート:作成日時/昇順
![Page 17: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/17.jpg)
ヒント • アプリの作成手順
https://help.cybozu.com/ja/k/user/tutorial.html ※「アプリを作成する」辺りを参照
• カスタマイズビューの設定は後ほど行いますので、ここでは不要です。
Copyright (C) 2014 Cybozu 16
![Page 18: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/18.jpg)
17 Copyright (C) 2014 Cybozu
Step2 詳細画面にボタンを置こう
(目標:30分)
![Page 19: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/19.jpg)
詳細画面にボタンを置こう • JavaScriptを使って詳細画面にボタンを配置します。
• 最終的にはボタンがクリックされたらTwilio APIをコールしますが、ここではアラートを出すぐらいでOKです。
• JavaScriptファイル名は任意の名前で構いません。
Copyright (C) 2014 Cybozu 18
![Page 20: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/20.jpg)
ヒント • レコード詳細にもボタンを設置しよう! https://cybozudev.zendesk.com/hc/ja/articles/201952870
• 利用するJavaScript API – イベント処理
• kintone.events.on(event, handler(event)) http://goo.gl/rBtTuj
– レコード詳細画面が表示された時のイベント • app.record.detail.show http://goo.gl/9BxO0x
– メニューの右側の空白部分の要素を取得する • kintone.app.record.getHeaderMenuSpaceElement http://goo.gl/FGKvpY
Copyright (C) 2014 Cybozu 19
![Page 21: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/21.jpg)
20 Copyright (C) 2014 Cybozu
解答案
https://github.com/asaga/twilio-‐kintone
twilio-‐kintone-‐detail1.js
![Page 22: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/22.jpg)
21 Copyright (C) 2014 Cybozu
Step3 Twilio APIを使ってSMSを送ろう
(目標:30分)
![Page 23: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/23.jpg)
Twilio APIを使ってSMSを送ろう • Step2で作ったJavaScriptファイルを変更します。
• 詳細ボタンをクリックしたら、Twilio APIを実行し、SMSを送信します。
Copyright (C) 2014 Cybozu 22
![Page 24: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/24.jpg)
ヒント • レコードの値を取得する方法 https://cybozudev.zendesk.com/hc/ja/articles/202086734
• 他サービスのAPIからデータを取得してkintoneに表示してみよう https://cybozudev.zendesk.com/hc/ja/articles/201732490
• 利用するJavaScript API – 外部のAPIを実行する
• kintone.proxy(url, method, headers, data, callback, errback); http://goo.gl/MJphEU
Copyright (C) 2014 Cybozu 23
![Page 25: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/25.jpg)
ヒント • Twilio REST ウェブ サービス インターフェイス https://jp.twilio.com/docs/api/rest
• セキュリティ https://jp.twilio.com/docs/security
Copyright (C) 2014 Cybozu 24
![Page 26: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/26.jpg)
25 Copyright (C) 2014 Cybozu
解答案
https://github.com/asaga/twilio-‐kintone
twilio-‐kintone-‐detail2.js
![Page 27: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/27.jpg)
26 Copyright (C) 2014 Cybozu
Step4 カスタマイズビューで
来店者用の入力画面を作ろう
![Page 28: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/28.jpg)
カスタマイズビューで入力画面を作ろう • カスタマイズビューで来店者用の入力インターフェースを作ります。 (デザインは自由です)
• 「受け付け」ボタンをクリックした時の処理はStep5で作成します。
Copyright (C) 2014 Cybozu 27
![Page 29: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/29.jpg)
カスタマイズビューで入力画面を作ろう • 一覧名は「来店者入力用」と設定します。 • 一覧IDを控えておきます。 • 「ページネーションを表示する」チェックはオフにします。 • 絞り込み、ソートはデフォルトで。 • 解答案では以下の仕様としています。
Copyright (C) 2014 Cybozu 28
入力項目 type id 備考 名前 text visitor_name 電話 text visitor_tel 人数 text visitor_number 座席 radio visitor_seat idはnameとして指定 受け付け - btn_reserve Aタグ
![Page 30: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/30.jpg)
ヒント • カスタマイズビューを利用してみよう https://cybozudev.zendesk.com/hc/ja/articles/202905604
Copyright (C) 2014 Cybozu 29
![Page 31: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/31.jpg)
30 Copyright (C) 2014 Cybozu
解答案
https://github.com/asaga/twilio-‐kintone
twilio-‐kintone-‐customizeview.txt
![Page 32: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/32.jpg)
31 Copyright (C) 2014 Cybozu
Step5 受け付け情報をkintoneに登録しよう
![Page 33: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/33.jpg)
受け付け情報をkintoneに登録しよう • 「受け付け」ボタンがクリックされたら、
REST APIを使い、入力された情報をkintoneにレコード追加します。
• Step2,3で作成したJavaScriptファイルとはファイルを分ける事も可能です。
• JavaScriptファイル名は任意の名前で構いません。
Copyright (C) 2014 Cybozu 32
![Page 34: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/34.jpg)
ヒント • 入力値の取得にjQueryを使う事も可能です ※jQueryのURLをJavaScriptファイルとして指定します https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
• kintoneに送信するJSONデータの作り方 https://cybozudev.zendesk.com/hc/ja/articles/200295019
Copyright (C) 2014 Cybozu 33
![Page 35: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/35.jpg)
ヒント • 利用するJavaScript API
– イベント処理 • kintone.events.on(event, handler(event)) http://goo.gl/Bxlb2V
– REST APIリクエストを送信する • kintone.api(pathOrUrl, method, params, callback, opt_errback) http://goo.gl/nVS12K
– アプリの ID を取得する • kintone.app.getId http://goo.gl/CHZkxQ
• 利用するREST API – レコードの登録(1件)
• /k/v1/record.json http://goo.gl/PrjPHx
Copyright (C) 2014 Cybozu 34
![Page 36: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/36.jpg)
35 Copyright (C) 2014 Cybozu
解答案
https://github.com/asaga/twilio-‐kintone
twilio-‐kintone-‐index.js
![Page 37: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/37.jpg)
最後に補足 • Twilioの認証情報をJavaScriptに記述する必要があり、セキュリティ的に問題。
• ヘッダーやメニューの表示が不要。
• もっとkintoneの開発を試したくなった。
Copyright (C) 2014 Cybozu 36
kintoneの今後の機能強化にご期待下さい。
kintoneの今後の機能強化にご期待下さい。
開発者ライセンスをご提供しています。
![Page 38: Kintone hands on](https://reader034.fdocuments.net/reader034/viewer/2022052311/5579985bd8b42ae72b8b512c/html5/thumbnails/38.jpg)
37 Copyright (C) 2014 Cybozu
お疲れ様でした