Kintone hands on
2 likes1,500 views
2014年9月26日開催の「Twilio x kintone ハンズオン」の資料になります。 kintoneアプリからTwilio経由でSMSを送信する内容で、資料の中にソースコードなどが紹介されています。
Kintone hands on
- 2. 本日のゴール Copyright (C) 2014 Cybozu 1
- 3. kintoneで受付システムを作ろう Copyright (C) 2014 Cybozu 2
- 4. こんなやつです Copyright (C) 2014 Cybozu 3
- 5. 来店者入力用の画面 Copyright (C) 2014 Cybozu 4
- 6. 店舗用の画面（一覧） Copyright (C) 2014 Cybozu 5
- 7. 店舗用の画面（詳細） Copyright (C) 2014 Cybozu 6
- 8. 構成 Copyright (C) 2014 Cybozu 7
- 9. 来店者入力用の画面 店舗用の一覧画面 店舗用の詳細画面 1.電話番号を登録 2.確認 3.呼び出し REST APIJavaScript kintoneアプリ 4.SMS送信 REST API Copyright (C) 2014 Cybozu 8
- 10. 開発時に便利な情報 Copyright (C) 2014 Cybozu 9
- 11. cybozu.com developer network https://cybozudev.zendesk.com/ Copyright (C) 2014 Cybozu 10
- 12. • 動作環境 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
- 13. JavaScript のデバッグ • ChromeやFirefoxの開発ツールが便利 – ブレークポイントの設定 – コンソールで出力内容を確認 Copyright (C) 2014 Cybozu 12
- 14. タイムスケジュール Step1 kintone アプリを作ろう 30分 Step2 詳細画面にボタンを置こう 30分 Step3 Twilio APIを使ってSMSを送ろう 30分 Step4 カスタマイズビューで来店者用の 入力画面を作ろう Step5 受け付け情報をkintoneに登録しよう Copyright (C) 2014 Cybozu 13
- 15. Step1 kintone アプリを作ろう （目標：30分） Copyright (C) 2014 Cybozu 14
- 16. kintone アプリを作ろう • アプリ名は任意の名前でOK。 • 一般設定はデフォルトで。 • 以下の内容でフィールドを配置します。 フィールドタイプ フィールド名 フィールドコード その他 文字列（1行） 名前 name 必須 数値 携帯番号 tel 必須 数値 人数 number 必須 ラジオボタン 席 seat テーブル、カウンター • 一覧の設定 一覧名 店舗用 レコード一覧の表示形式 表形式 項目 名前、人数、席 絞り込み 条件：すべてのレコード ソート：作成日時/昇順 Copyright (C) 2014 Cybozu 15
- 17. ヒント • アプリの作成手順 https://help.cybozu.com/ja/k/user/tutorial.html ※「アプリを作成する」辺りを参照 • カスタマイズビューの設定は後ほど行いますの で、ここでは不要です。 Copyright (C) 2014 Cybozu 16
- 18. Step2 詳細画面にボタンを置こう （目標：30分） Copyright (C) 2014 Cybozu 17
- 19. 詳細画面にボタンを置こう • JavaScriptを使って詳細画面にボタンを配置しま す。 • 最終的にはボタンがクリックされたらTwilio API をコールしますが、ここではアラートを出すぐ らいでOKです。 • JavaScriptファイル名は任意の名前で構いません。 Copyright (C) 2014 Cybozu 18
- 20. ヒント • レコード詳細にもボタンを設置しよう！ 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
- 21. 解答案 https://github.com/asaga/twilio-‐kintone twilio-‐kintone-‐detail1.js Copyright (C) 2014 Cybozu 20
- 22. Step3 Twilio APIを使ってSMSを送ろう （目標：30分） Copyright (C) 2014 Cybozu 21
- 23. Twilio APIを使ってSMSを送ろう • Step2で作ったJavaScriptファイルを変更 します。 • 詳細ボタンをクリックしたら、Twilio API を実行し、SMSを送信します。 Copyright (C) 2014 Cybozu 22
- 24. ヒント • レコードの値を取得する方法 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
- 25. ヒント • Twilio REST ウェブ サービス インターフェイス https://jp.twilio.com/docs/api/rest • セキュリティ https://jp.twilio.com/docs/security Copyright (C) 2014 Cybozu 24
- 26. 解答案 https://github.com/asaga/twilio-‐kintone twilio-‐kintone-‐detail2.js Copyright (C) 2014 Cybozu 25
- 27. Step4 カスタマイズビューで 来店者用の入力画面を作ろう Copyright (C) 2014 Cybozu 26
- 28. カスタマイズビューで入力画面を作ろう • カスタマイズビューで来店者用の入力イン ターフェースを作ります。 （デザインは自由です） • 「受け付け」ボタンをクリックした時の 処理はStep5で作成します。 Copyright (C) 2014 Cybozu 27
- 29. カスタマイズビューで入力画面を作ろう • 一覧名は「来店者入力用」と設定します。 • 一覧IDを控えておきます。 • 「ページネーションを表示する」チェックはオフにします。 • 絞り込み、ソートはデフォルトで。 • 解答案では以下の仕様としています。 入力項目 type id 備考 名前 text visitor_name 電話 text visitor_tel 人数 text visitor_number 座席 radio visitor_seat idはnameとして指定 受け付け - btn_reserve Aタグ Copyright (C) 2014 Cybozu 28
- 30. ヒント • カスタマイズビューを利用してみよう https://cybozudev.zendesk.com/hc/ja/articles/202905604 Copyright (C) 2014 Cybozu 29
- 31. 解答案 https://github.com/asaga/twilio-‐kintone twilio-‐kintone-‐customizeview.txt Copyright (C) 2014 Cybozu 30
- 32. Step5 受け付け情報をkintoneに登録しよう Copyright (C) 2014 Cybozu 31
- 33. 受け付け情報をkintoneに登録しよう • 「受け付け」ボタンがクリックされたら、 REST APIを使い、入力された情報を kintoneにレコード追加します。 • Step2,3で作成したJavaScriptファイルと はファイルを分ける事も可能です。 • JavaScriptファイル名は任意の名前で構い ません。 Copyright (C) 2014 Cybozu 32
- 34. ヒント • 入力値の取得に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
- 35. ヒント • 利用する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
- 36. 解答案 https://github.com/asaga/twilio-‐kintone twilio-‐kintone-‐index.js Copyright (C) 2014 Cybozu 35
- 37. 最後に補足 • Twilioの認証情報をJavaScriptに記述する必要 があり、セキュリティ的に問題。 kintoneの今後の機能強化にご期待下さい。 • ヘッダーやメニューの表示が不要。 kintoneの今後の機能強化にご期待下さい。 • もっとkintoneの開発を試したくなった。 開発者ライセンスをご提供しています。 Copyright (C) 2014 Cybozu 36
- 38. お疲れ様でした Copyright (C) 2014 Cybozu 37