Embed Size (px)
Citation preview
ステップアップハンズオンアプリの作成から
Javascript カスタマイズによる外部連携まで
2016/11/11 kintone Café JAPANkintone Café 愛媛 沖 安隆
資料 URL ： http://bit.ly/2fuaMOG
ステップアップ？• 今回のハンズオンは、 kintone の基本操作から再確認するハンズオンです• D&D でフィールドを配置するところから、 JavaScript でカスタマイズして外部連携するところまでやってみます• 最後まで出来なくても、持ち帰って復習が可能ですので、気楽に進めましょう
やる事一覧① 詳細画面でテーブルを集計するアプリを作ります
条件に一致した数値だけ集計するカスタマイズをします② 一覧画面でレコードを集計して、アラートで表示します
レコードが 500 件を超えても集計できるようにします③ ボタンを詳細と一覧のページに追加します。ボタンを押すと①と②の数値を表示します④ ボタンを押すと slack に投稿できるようにします
やる事一覧1. 可能なら、 slack から kintone のフィールドを読み出す設定をします2. 時間的に無理なら、 slack から kintone へレコードを追加するデモをご紹介します3. それも無理なら、質疑応答を優先します
やる事一覧スライドの 1 枚目にも書いてましたが、カスタマイズに使う JavaScript のファイルなどは、下記URL で配布しています。事前にダウンロードをお願いします。
資料 URL ： http://bit.ly/2fuaMOG
① テーブルを集計するアプリを作ります
① テーブルを集計するアプリを作ります
① テーブルを集計するアプリを作りますざっくりと手順を紹介
① テーブルを集計するアプリを作りますざっくりと手順を紹介
① テーブルを集計するアプリを作りますざっくりと手順を紹介
① テーブルを集計するアプリを作りますざっくりと手順を紹介
① テーブルを集計するアプリを作りますざっくりと手順を紹介
① テーブルを集計するアプリを作ります1. テーブル内の数値を集計するなら、自動計算で集計関数を使うのが簡単2. 数値フィールドなら数字以外の入力が出来ないので、入力チェックにも標準で対応3. あれ？ JavaScript カスタマイズ不要・・・？4. ・・・・・だと、物足りないと思うので。。。
① テーブルを指定条件で集計するアプリを作ります
① テーブルを指定条件で集計するアプリを作ります
① テーブルを指定条件で集計するアプリを作ります
① テーブルを指定条件で集計するアプリを作りますできあがり
① テーブルを指定条件で集計するアプリを作りますソースはこんな感じ
① テーブルを指定条件で集計するアプリを作ります色々触ってみると、気づくことがありませんか？
• 文字や数値を変えても、集計値は変わらない• テーブルに追加しても、集計値は変わらない• 保存しても、集計値は変わらない
• そこで、文字を変えた時に再集計するようにしてみましょう。
① テーブルを指定条件で集計するアプリを作ります
① テーブルを指定条件で集計するアプリを作ります
① テーブルを指定条件で集計するアプリを作りますソースはこんな感じ
① テーブルを指定条件で集計するアプリを作ります• 今回は、イベントを追加して、編集時に文字列＿ 1 行＿が変更された時も、計算するようにしました• この様に、複数イベントの指定が自由に出来るようになると、ドンドンと使いやすくなります• ただし、編集と新規作成で別イベントだったりと、結構細かく分かれているので、間違えないようにしましょう
② レコードを集計するカスタマイズをします
② レコードを集計するカスタマイズをします出来上がりイメージ
② レコードを集計するカスタマイズをします
② レコードを集計するカスタマイズをします数値が 0 になるとか表示されないなどの場合は、フィールドコードを確認してください
② レコードを集計するカスタマイズをしますソースはこんな感じ
② レコードを集計するカスタマイズをします1. この集計の対象となるのは、現在表示されている一覧です2. 複数ページに跨るような場合は集計できません3. なので、全レコードを集計するように変えてみます
② 全レコードを集計するカスタマイズをします
② 全レコードを集計するカスタマイズをします500 件を超えて集計できてます絞り込みなど、条件設定も可能です
② 全レコードを集計するカスタマイズをしますソースはこんな感じ
③ ボタンを詳細と一覧のページに追加します
③ ボタンを詳細と一覧のページに追加します詳細ページに追加
③ ボタンを詳細と一覧のページに追加します
③ ボタンを詳細と一覧のページに追加しますボタンを押すと数値の値を表示します
③ ボタンを詳細と一覧のページに追加しますソースはこんな感じ
③ ボタンを詳細と一覧のページに追加しますボタンを新デザインにするにはこうします
③ ボタンを詳細と一覧のページに追加します新デザインになりました
③ ボタンを詳細と一覧のページに追加します一覧ページに追加
③ ボタンを詳細と一覧のページに追加します
③ ボタンを詳細と一覧のページに追加しますボタンを押すと集計値を表示します
③ ボタンを詳細と一覧のページに追加しますボタンを押すと集計値を表示します
④ ボタンを押すと slack に投稿できるようにします
④ ボタンを押すと slack に投稿できるようにしますリンクを押します
④ ボタンを押すと slack に投稿できるようにしますslack で、 Incoming Webhook の設定をします
④ ボタンを押すと slack に投稿できるようにしますWebhook URL をコピーします
④ ボタンを押すと slack に投稿できるようにしますcustomize4-1.js へ貼り付けます
④ ボタンを押すと slack に投稿できるようにしますボタンを押すと、 slack へ投稿します
④ ボタンを押すと slack に投稿できるようにしますソースはこんな感じ
④ ボタンを押すと slack に投稿できるようにします
④ ボタンを押すと slack に投稿できるようにしますボタンを押すと、 slack へ投稿します
お疲れ様でしたー
実は。。。。
今までのカスタマイズは全て公式サイトの Tips などで紹介済みの内容です
今回の内容以外にも色々と紹介されていますので是非ご覧ください！
引用元記事一覧レコード編集イベント – cybozu developer networkhttp://bit.ly/2egLyUdレコード一覧イベント – cybozu developer networkhttp://bit.ly/2fiBCGWPromise を利用したモダンなアプリの全レコード取得の書き方 – cybozu developer networkhttp://bit.ly/2fbdEzBTwilio で連絡先に一斉発信（電話 /SMS） – cybozu developer networkhttp://bit.ly/2fybaKh
引用元記事一覧kintone から Slack に通知を送る方法http://bit.ly/2fw2lQQSlack から手軽に kintone へレコード登録する方法http://bit.ly/2fdr8ea
