実践！JavaScriptカスタマイズ
2 likes2,899 views
2015/10/17に開催されたkintone Café 札幌 Vol.6でのハンズオン資料です
![イベントの記述例
35
(function() {
"use strict";
// 追加画面表示時イベント
kintone.events.on(['app.record.create.show'], function (event) {
// …
return event;
});
// 追加・編集画面表示時イベント
kintone.events.on(['app.record.create.show',
'app.record.edit.show'], function (event) {
// …
return event;
});
// 詳細画面表示時イベント
kintone.events.on(['app.record.detail.show'], function (event) {
// …
return event;
});
})();](https://image.slidesharecdn.com/javascript-151018042445-lva1-app6892/85/JavaScript-35-320.jpg)
![イベント発生時に実行できる操作の例
37
(function() {
"use strict";
// 追加画面表示時イベント
kintone.events.on(['app.record.create.show'], function (event) {
event[‘record‘][‘住所’][‘value’] = ‘自動入力’; // 値の書き換え
return event;
});
// 追加・編集画面表示時イベント
kintone.events.on(['app.record.create.show‘,
'app.record.edit.show‘], function (event) {
event[‘record’][‘住所’][‘disabled’] =true; // 入力不可
return event;
});
// 詳細画面表示時イベント
kintone.events.on(['app.record.detail.show'], function (event) {
// …
return event;
});
})();](https://image.slidesharecdn.com/javascript-151018042445-lva1-app6892/85/JavaScript-37-320.jpg)
![イベント発生時に実行できる操作一覧
38
操作内容 サンプルコード 一覧 表示 追加 編集
フィールドの値を書き換える event[‘record’]['文字列']['value'] = 'ほげほげ'; ● ● ●
フィールドの編集可／不可を設定する event[‘record’]['文字列']['disabled'] = true; ● ● ●
フィールドにエラーを表示する event[‘record’]['文字列']['error'] = 'エラーです！'; ● ● ●
レコードにエラーを表示する event.error = 'エラーです！'; ● ● ●
フィールドの表示／非表示を切り替える kintone.app.record.setFieldShown('文字列', false); ● ● ●
ルックアップの取得を自動で行う
event[‘record’]['ルックアップ']['value'] = '0001';
event[‘record’]['ルックアップ']['lookup'] = true;
● ●
※最新の情報は公式のリファレンスをご参照ください](https://image.slidesharecdn.com/javascript-151018042445-lva1-app6892/85/JavaScript-38-320.jpg)
![フィールド要素取得の例
39
(function() {
"use strict";
// 追加画面表示時イベント
kintone.events.on(['app.record.create.show'], function (event) {
event[‘record’][‘住所’][‘value’] = ‘自動入力’; // 値の書き換え
return event;
});
// 追加・編集画面表示時イベント
kintone.events.on(['app.record.create.show‘,
'app.record.edit.show‘], function (event) {
event[‘record’][‘住所’][‘disabled’] =true; // 入力不可
return event;
});
// 詳細画面表示時イベント
kintone.events.on(['app.record.detail.show'], function (event) {
var elm = kintone.app.record.getFieldElement(‘氏名');
elm.style.fontWeight = 'bold';
return event;
});
})(); ★ここで一旦ファイルを保存](https://image.slidesharecdn.com/javascript-151018042445-lva1-app6892/85/JavaScript-39-320.jpg)
![kintone REST API リクエスト
43
操作内容 関数
REST APIリクエストを送信する
kintone.api('/k/v1/record', 'GET', {app: 1, id: 5}, function(resp) {
//成功時の処理
console.log(resp);
}, function(resp) {
//エラー時の処理
console.log(resp);
});
URL を取得する（クエリ文字列無し） kintone.api.url('/k/v1/records');
URL を取得する（クエリ文字列付き） kintone.api.urlForGet('/k/v1/records', {app: 4,fields: ["record_no"]});
CSRFトークンの取得 kintone.getRequestToken();
※最新の情報は公式のリファレンスをご参照ください](https://image.slidesharecdn.com/javascript-151018042445-lva1-app6892/85/JavaScript-43-320.jpg)
![郵便番号→住所変換をやってみよう！
52
// 郵便番号変更時の処理
kintone.events.on(['app.record.create.change.郵便番号',
'app.record.edit.change.郵便番号'], function(event) {
var zipcode = event.record['郵便番号']['value'];
var address = event.record['住所']['value'];
var url = 'http://api.zipaddress.net/?zipcode=' + zipcode;
// kintone.proxyで非同期処理
kintone.proxy(url, 'GET', {}, {}, function(body, status, headers) {
if (status == 200) {
var response = JSON.parse(body);
if (response['code'] == 200) {
var record = kintone.app.record.get(); // 非同期の場合はこれ
record['record']['住所']['value'] = response['data']['fullAddress'];
kintone.app.record.set(record); // 非同期の場合はこれ
}
}
},
function(body) {
alert('住所取得エラー');
});
return event;
});](https://image.slidesharecdn.com/javascript-151018042445-lva1-app6892/85/JavaScript-52-320.jpg)
実践！JavaScriptカスタマイズ
- 1. サイボウズ公認kintoneエバンジェリスト ラジカルブリッジ 代表 斎藤 栄 kintone Café 札幌 Vol.6 #kintonecafe ～プロこそkintone！超ファストインテグレーション体験ハンズオン～ 2015/10/17 実践！JavaScriptカスタマイズ
- 2. 自己紹介 2 • 1971年 札幌市生まれ • 小６からパソコンに触れ、大学卒業まで札幌で過ごす • 1993年 NTTデータ通信株式会社（首都圏） • 1996年 株式会社データクラフト（札幌） • 2012年 ラジカルブリッジ設立（札幌） • 2014年より kintoneエバンジェリスト として活動中 代表／ IT 活用アドバイザー “クラウドおじさん” 斎藤 栄 ～ ITでみんなに“WAKU WAKU”を ～ サイボウズ公認
- 7. ベストチーム365 サービスプラン 【わくわくプラン】 ¥89,890 【にこにこプラン】 ¥252,500 初回訪問・試作無料 訪問改修１回 初回訪問・試作無料 訪問改修３回 60日間の利用サポート 初回訪問・試作無料 7 リーズナブルな理由 見積なし 見積作業をしている間にアプリができてしまうため、料金体系をメニュー化しました。 仕様書なし 一般的なシステム開発作業で多くの時間を要する仕様書の作成を省きました。 分業なし 営業、SE、プログラマという分業体制ではなく、一人の担当者が全ての作業を行います。 サイボウズ社のkintoneを基盤としているため、短期間で複数のアプリを構築できます。 ※金額は全て税別です。 ※別途kintoneの利用契約が必要となります。 ※札幌市内及び近郊のお客様を想定しています。遠方のお客様の場合、Skypeによる ネットミーティングにて対応させていただきます。
- 9. ベストチーム365 導入事例 地方独立行政法人 佐賀県医療センター好生館様 予約台帳 • 予約前に空き状況がわかる • カレンダー形式や一覧形式な ど多様な見方ができる • 実績集計の自動化 • 受付担当者の業務負荷を削減 Before After 業務効率化 ペーパーレス 9 地域の連携医療機関からの紹介患者を対象とした 診療予約管理 • 電話で問い合わせないと空き状況が確認できない • 紙の台帳が手元にないと空き状況の問い合わせに 回答できない • 紙の台帳を元に「来院予定者リスト」「月別予約 実績」などのExcel帳票を別途作成しなければな らない（二重・三重の入力） • 受付担当者の業務負担が増加 北海道と佐賀県の間で たった2回のSkypeミーティングで完成！
- 10. 料金表・オプション 10 オプション項目 内 容 料 金 追加訪問改修 【にこにこプラン】の枠内に収まりきらなかった訪問 改修作業を追加で承ります。 ¥40,000／回 リモート保守・サポート 構築したアプリの軽微な改修やkintone全般の利用サ ポートを承ります。（リモートでの対応となります） ¥10,000／時間 または 月額¥15,000（月4時間まで） オプション わくわくプラン にこにこプラン ベストチーム365 サービス利用料金 ¥89,890 ¥252,500 初回訪問・試作 無 料 訪問改修 １回 ３回 リモート保守・サポート 無し 60日間 kintone利用料金 ※30日間無料試用可 ※最低契約数5ユーザー ※サイボウズ社に直接 お支払ください。 ライトコース 月額 ¥780／ユーザー スタンダードコース ※API利用ありの場合はこちら 月額 ¥1,500／ユーザー 料金表 ※金額は全て税別 ※訪問型サービスのため、基本的には札幌市内及び近郊のお客様を想定しております。 遠方のお客様の場合、Skypeによるネットミーティングにて対応させていただきます。
- 11. お支払い方法 11 お支払い方法 お支払方法 備 考 現金 最終訪問時にお支払ください。 クレジットカード 最終訪問時にその場でカード決済を行いますのでクレジットカードをご用意ください。 ※VISA, MASTER, AMEXのみ 銀行振込（都度請求） 請求書発行日より14日以内に振込をお願い致します。 ※振込手数料はお客様負担とさせていただきます 銀行振込（月締請求） ※取引実績のあるお客様のみ 月末締にて請求書を発行させていただきますので、翌月末までにお支払ください。 ※振込手数料はお客様負担とさせていただきます カジュアルなSI
- 12. kintone Café 12 kintone Caféは、まだkintoneに触れたことの無い方から、 より高度なカスタマイズを行いたいと考えているプロフェッ ショナルの方まで幅広い層を対象に、 楽しく学び・教え合う ことで、kintoneの魅力や活用法をみんなで共有するための 勉強会コミュニティです。
- 13. 全国に広がるkintone Caféの輪 2013/12/7 札幌 Vol.1（起源） 2014/5/16 札幌 Vol.2 2014/10/25 札幌 Vol.3 2015/3/14 札幌 Vol.4 2015/6/4 札幌 Vol.5 2015/10/17 札幌 Vol.6 2014/5/29 福岡 Vol.1 2014/7/11 福岡 Vol.2 2014/10/24 福岡 Vol.3 2015/4/17 福岡 Vol.4 2015/6/24 福岡 Vol.5 2015/8/29 福岡 Vol.6 2015/10/24 福岡 Vol.7 2014/5/30 土佐 2015/5/30 高知 Vol.2 2014/7/5 弘前 #1 2015/1/29 京橋 Vol.1 2015/4/6 京橋 Vol.2 2014/8/1 千葉（第1回） 2014/9/3 千葉（第2回） 2014/12/12 千葉（第3回） 2014/8/21 横浜 Vol.1 2014/8/11 釧路 2014/9/12 松江 #1 2014/9/2 Seoul #1 2014/9/24 松山 #1 2015/9/26 愛媛 Vol.1 2014/9/25 神戸 Vol.1 2015/5/25 神戸 Vol.2 2014/9/28 Okinawa #1 2015/2/11 沖縄 Vol.2 2015/10/10 沖縄 Vol.3 2014/10/22 京都 #1 Korea 3ヶ国 18都道府県 57回開催！※2015/10/17までの予定含む 2014/11/21 北九州 Vol.1 2014/12/3 @chiba みずいろ会館※女性限定 2015/1/30 新潟 Vol.1 2015/7/4 新潟 Vol.2 2014/12/15 八王子 Vol.1 2015/2/19 八王子 Vol.2 13 kintone Café 創始者です！ 2015/1/24 仙台 Vol.1 2015/3/7 仙台 Vol.2 2015/4/4 仙台 Vol.3 2014/12/11 荻窪 Vol.1 2015/1/26 荻窪 Vol.2 2014/7/23 東京 Vol.1 2015/2/20 東京 Vol.2 2015/7/24 東京 Vol.3 2015/9/4 東京 Vol.4 2015/2/13 出雲 Vol.1 2015/3/4 大阪 Vol.1 2015/5/19 大阪 Vol.2 2015/7/15 大阪 Vol.3 2015/9/18 大阪 Vol.4 2015/6/17 名古屋 Vol.1 2015/6/25 大分 Vol.1 2015/9/29 鹿児島 Vol.1 札幌支部・運営事務局 斎藤 栄 USA 2015/10/6 Grand Canyon Vol.1
- 14. 2015/10/6 kintone Café Grand Canyon Vol.1 14
- 15. 2015/10/6 kintone Café Grand Canyon Vol.1 15 USA!
- 16. 2015/10/6 kintone Café Grand Canyon Vol.1 16 USA! USA!
- 17. 2015/10/6 kintone Café Grand Canyon Vol.1 17 USA! USA! USA!
- 18. kintone Café 2015 18 • kintone Café 札幌 （ラジカルブリッジ 斎藤さん） • kintone Café 仙台 （スマイル 熊谷さん） • kintone Café 東京 （ジョイゾー 四宮さん、山下さん） • kintone Café 新潟 （アイティー・プラス・ワン 星野さん） • kintone Café 名古屋（コラボスタイル 河野さん） • kintone Café 京都 （KYOSO 辻さん） • kintone Café 大阪 （アールスリーインスティテュート 金春さん） • kintone Café 神戸 （カフーツ 伊藤さん） • kintone Café 三重 （コムデック 生田さん） • kintone Café 愛媛 （アイムービック 沖さん） • kintone Café 高知 （タイムコンシェル 片岡さん） • kintone Café 福岡 （AISIC 久米さん） • kintone Café 熊本 （AQM 高岡さん） • kintone Café 大分 （東九州ラボラトリー 松井さん） • kintone Café 鹿児島（CoCoDigi 富田さん） • kintone Café 沖縄 （村濱さん） ※太字は運営事務局メンバー • 1月、『kintone Café 運営事務局』を 設立 • 支部組織化（10/17現在、16支部） 公式サイト kintonecafe.com 勉強会への参加 ＆ジョイン歓迎！
- 20. kintone Café メディア掲載 20 2015/3/3 日経ITpro “圧力団体”目指す、ユーザー・SIer共同で 「kintone」利用者コミュニティーを組織化 http://itpro.nikkeibp.co.jp/atcl/column/14/346926/022700183/ 2015/2/23 ASCII.jp×クラウド コミュニティ立ち上がりの瞬間、7人のkintoneマンが語ったこと http://ascii.jp/elem/000/000/982/982469/ 2015/5/21 BCN Bizline ＜畔上編集長が今、いちばん気になるクラウド＞ 「kintone Café」運営事務局座談会 SIerが語るkintoneの魅力とビジネスチャンス http://biz.bcnranking.jp/article/serial/notice_c/1505/150521_139428.html 2015/8/25 ASCII.jp×クラウド kintone×Bluemix対談、 エバンジェリストがPaaSの可能性を語る！ http://itpro.nikkeibp.co.jp/atcl/column/14/346926/022700183/
- 23. kintoneの高度なカスタマイズとは？ 23 1. API連携（サーバーとしての利用） 2. JavaScriptカスタマイズ （クライアントとしての拡張） 3. プラグインによるカスタマイズ ➡ JSカスタマイズ相当の高度なカスタマイズ を簡単に利用できるようにする仕組み スタンダード コース限定
- 24. kintoneの高度なカスタマイズとは？ 24 JavaScript API REST API kintone.proxy() 外部システム・アプリ Webサービス • UI（見た目）の操作 • 複数アプリのデータ参照・操作（REST API） • 外部からのデータ参照・操作 • 外部Webサービス(WebAPI) の参照・操作 APIがあるから 高度なカスマイズもOK！ kintoneプラグイン
- 25. kintoneプラグイン《Movable Type 連携》 25 提供元：ラジカルブリッジ ※無償 http://radical-bridge.com/product/kintone-mt-plugin.html kintoneで管理している商品情報などのデータを Movable Type経由でWebサイトに公開 ➡Webに公開するためだけのコピペ作業が不要に ➡kintoneのワークフローとの組み合わせも容易 カスタムフィールドに対応 スマホからも投稿できる MTのDBにパブリッシュしてしまうのでkintone のAPIリクエスト数制限を気にしなくて良い kintone.proxy() • 記事の投稿・更新・削除 Movable Type (Data API 1.0)
- 26. クラウド電話API ～ Twilio × kintone 26 ・初期費用無料、月額の通話・通信料のみ ・例えばコールセンターの構築 ・アウトバウンド／インバウンド ・IVR（自動音声応答）、CTIの構築 ・音声録音 ・SMS通知 ・他システム連携 × 例えば、コールセンターっぽいものも作れちゃう
- 27. cybozu.com developer network 27 cybozu.com の開発者コミュニティ https://cybozudev.zendesk.com/hc/ja/ ・APIリファレンス ・オンラインコミュニティ(Q&A) ・Tips ・サンプルプログラム ・開発者ライセンス
- 28. cybozu.com developer network 28 kintone API リファレンス https://cybozudev.zendesk.com/hc/ja/categories/200147600 ・kintone API 共通 ・REST API 仕様 ・JavaScript API
- 29. cybozu.com developer network 29 開発者ライセンス https://cybozudev.zendesk.com/hc/ja/articles/200720464 • 有効期間１年間 • やめると言うまで １年毎の自動更新！
- 31. JavaScriptカスタマイズの基本 31 アプリの設定 ＞ 詳細設定 ＞ JavaScript / CSSでカスタマイズ
- 32. JavaScriptカスタマイズの基本 32 基本的な注意点 • JSファイルはUTF-8で記述 • 拡張子は.js • 改行コードはMacのCRだとダメなはず
- 33. JSカスタマイズの基本的なお作法 33 1.お約束 (function() { // ここに処理を書く })(); 変数のスコープをこのJS内に限定するた めの即時実行無名関数（般若心経みたい...）
- 34. JSカスタマイズの基本的なお作法 34 2.基本的な記述手順 イベント発生 ➡ なんらかの処理 例） 一覧表示時 ➡ 値によって文字色を変える 追加・編集画面表示時 ➡ 自前のボタンを表示する ➡ ボタンが押されたらhogehoge... 新規保存時 ➡ 独自ルールの番号を自動採番する
- 35. イベントの記述例 35 (function() { "use strict"; // 追加画面表示時イベント kintone.events.on(['app.record.create.show'], function (event) { // … return event; }); // 追加・編集画面表示時イベント kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function (event) { // … return event; }); // 詳細画面表示時イベント kintone.events.on(['app.record.detail.show'], function (event) { // … return event; }); })();
- 36. イベント一覧 36 分類 イベント イベントタイプ （PC用） イベントタイプ （スマートフォン用） レコード一覧 レコード一覧画面表示後イベント app.record.index.show mobile.app.record.index.show 「保存ボタン」クリック時イベント app.record.index.edit.submit × インライン編集開始時イベント app.record.index.edit.show × フィールド値変更時イベント app.record.index.edit.change. <フィールドコード> × レコード削除前イベント app.record.index.delete.submit × レコード表示 レコード詳細画面表示時イベント app.record.detail.show mobile.app.record.detail.show レコード削除前イベント app.record.detail.delete.submit × プロセス管理のアクション実行イベント app.record.detail.process.proceed × レコード追加 レコード追加画面表示時イベント app.record.create.show mobile.app.record.create.show 保存実行前イベント app.record.create.submit × フィールド値変更時イベント app.record.create.change. <フィールドコード> × レコード編集 レコード編集画面表示時イベント app.record.edit.show mobile.app.record.edit.show 保存実行前イベント app.record.edit.submit × フィールド値変更時イベント app.record.edit.change. <フィールドコード> × グラフ表示 グラフ表示時イベント app.report.show × ※最新の情報は公式のリファレンスをご参照ください
- 37. イベント発生時に実行できる操作の例 37 (function() { "use strict"; // 追加画面表示時イベント kintone.events.on(['app.record.create.show'], function (event) { event[‘record‘][‘住所’][‘value’] = ‘自動入力’; // 値の書き換え return event; }); // 追加・編集画面表示時イベント kintone.events.on(['app.record.create.show‘, 'app.record.edit.show‘], function (event) { event[‘record’][‘住所’][‘disabled’] =true; // 入力不可 return event; }); // 詳細画面表示時イベント kintone.events.on(['app.record.detail.show'], function (event) { // … return event; }); })();
- 38. イベント発生時に実行できる操作一覧 38 操作内容 サンプルコード 一覧 表示 追加 編集 フィールドの値を書き換える event[‘record’]['文字列']['value'] = 'ほげほげ'; ● ● ● フィールドの編集可／不可を設定する event[‘record’]['文字列']['disabled'] = true; ● ● ● フィールドにエラーを表示する event[‘record’]['文字列']['error'] = 'エラーです！'; ● ● ● レコードにエラーを表示する event.error = 'エラーです！'; ● ● ● フィールドの表示／非表示を切り替える kintone.app.record.setFieldShown('文字列', false); ● ● ● ルックアップの取得を自動で行う event[‘record’]['ルックアップ']['value'] = '0001'; event[‘record’]['ルックアップ']['lookup'] = true; ● ● ※最新の情報は公式のリファレンスをご参照ください
- 39. フィールド要素取得の例 39 (function() { "use strict"; // 追加画面表示時イベント kintone.events.on(['app.record.create.show'], function (event) { event[‘record’][‘住所’][‘value’] = ‘自動入力’; // 値の書き換え return event; }); // 追加・編集画面表示時イベント kintone.events.on(['app.record.create.show‘, 'app.record.edit.show‘], function (event) { event[‘record’][‘住所’][‘disabled’] =true; // 入力不可 return event; }); // 詳細画面表示時イベント kintone.events.on(['app.record.detail.show'], function (event) { var elm = kintone.app.record.getFieldElement(‘氏名'); elm.style.fontWeight = 'bold'; return event; }); })(); ★ここで一旦ファイルを保存
- 40. 情報取得① 40 分類 取得情報 関数 アプリ アプリID kintone.app.getId(); レコード一覧情報 レコード一覧のクエリ文字列 kintone.app.getQueryCondition(); レコード一覧のクエリ文字列 （order by, limit, offset付き） kintone.app.getQuery(); フィールド要素 kintone.app.getFieldElements('文字列'); メニューの右側の空白部分の要素 kintone.app.getHeaderMenuSpaceElement(); メニューの下側の空白部分の要素 kintone.app.getHeaderSpaceElement(); 関連レコード一覧の参照先のアプリID kintone.app.getRelatedRecordsTargetAppId('関連レコード一覧'); ルックアップの参照先のアプリID kintone.app.getLookupTargetAppId('ルックアップ'); ヘッダーの下側の空白部分の要素 （スマートフォン用のみ） kintone.mobile.app.getHeaderSpaceElement(); レコード詳細情報 レコードID kintone.app.record.getId(); レコードの値 kintone.app.record.get(); kintone.mobile.app.record.get(); レコードに値をセット kintone.app.record.set(); kintone.mobile.app.record.set(); フィールド要素 kintone.app.record.getFieldElement('文字列'); メニューの右側の空白部分の要素 kintone.app.record.getHeaderMenuSpaceElement(); スペースフィールドの要素 kintone.app.record.getSpaceElement('space1');
- 41. 情報取得② 41 分類 取得情報 関数 レコード詳細情報 メニューの下側の空白部分の要素 kintone.app.getHeaderSpaceElement(); 関連レコード一覧の参照先のアプリID kintone.app.getRelatedRecordsTargetAppId('関連レコード一覧'); ルックアップの参照先のアプリID kintone.app.getLookupTargetAppId('ルックアップ'); ヘッダーの下側の空白部分の要素 （スマートフォン用のみ） kintone.mobile.app.getHeaderSpaceElement(); ユーザー情報 ログインユーザーの情報 kintone.getLoginUser(); ユーザーの情報 （ユーザーエクスポートAPI） https://(サブドメイン名).cybozu.com/v1/users.json UIデザイン デザインのバージョン kintone.getUiVersion(); ※最新の情報は公式のリファレンスをご参照ください
- 43. kintone REST API リクエスト 43 操作内容 関数 REST APIリクエストを送信する kintone.api('/k/v1/record', 'GET', {app: 1, id: 5}, function(resp) { //成功時の処理 console.log(resp); }, function(resp) { //エラー時の処理 console.log(resp); }); URL を取得する（クエリ文字列無し） kintone.api.url('/k/v1/records'); URL を取得する（クエリ文字列付き） kintone.api.urlForGet('/k/v1/records', {app: 4,fields: ["record_no"]}); CSRFトークンの取得 kintone.getRequestToken(); ※最新の情報は公式のリファレンスをご参照ください
- 44. 外部APIの実行 44 操作内容 関数 外部のAPIを実行する kintone.proxy('https://*****.***.net', 'GET', {}, {}, function(body, status, headers) { //成功時の処理 console.log(status, JSON.parse(body)); }, function(body) { //エラー時の処理 console.log(JSON.parse(body)); }); ※最新の情報は公式のリファレンスをご参照ください
- 45. JSを動かすアプリを作成 45 フィールド名 フィールドタイプ フィールドコード 氏名 文字列（1行） 住所 郵便番号 文字列（1行） 郵便番号 住所 文字列（1行） 住所 アプリ名：名簿アプリ 保存したJSファイルを アップロードして設定完了
- 50. 解決策②：JSEdit for kintone プラグインを使う 50 1. cybozu.com developer network > サンプル > kintone プラグイン よりダウンロード 2. kintoneシステム管理 > プラグイン より JSEdit for kintoneプラグインを読み込む 3. 名簿アプリの アプリの設定 > 詳細設定 > プラグイン でJSEdit for kintoneを追加 10/9に発表 されたばかり！
- 51. 郵便番号→住所変換をやってみよう！ 51 1. 郵便番号の値変更時イベント 2. 住所検索APIに郵便番号を投げて住所を取得 外部APIの実行：kintone.proxy()・・・非同期 3. 取得した住所を住所フィールドにセット http://zipaddress.net/
- 52. 郵便番号→住所変換をやってみよう！ 52 // 郵便番号変更時の処理 kintone.events.on(['app.record.create.change.郵便番号', 'app.record.edit.change.郵便番号'], function(event) { var zipcode = event.record['郵便番号']['value']; var address = event.record['住所']['value']; var url = 'http://api.zipaddress.net/?zipcode=' + zipcode; // kintone.proxyで非同期処理 kintone.proxy(url, 'GET', {}, {}, function(body, status, headers) { if (status == 200) { var response = JSON.parse(body); if (response['code'] == 200) { var record = kintone.app.record.get(); // 非同期の場合はこれ record['record']['住所']['value'] = response['data']['fullAddress']; kintone.app.record.set(record); // 非同期の場合はこれ } } }, function(body) { alert('住所取得エラー'); }); return event; });
- 53. kintone × Amazon API Gateway × AWS Lambda 53 Amazon API Gateway AWS Lambda 数値1 数値2 数値1 数値2 ＋ 合計 【デモ】 贅沢な足し算をやってみた
- 54. ちょっと宣伝 54
- 56. kintoneプラグイン《カレンダーPlus》 56 10/16 リリース 試用ライセンス 有償ライセンス アプリ起動時や予定登録時に警告表示 1～20名まで 税別 ¥39,800 21～50名まで 税別 ¥59,800 51名～無制限 税別 ¥79,800 警告表示なし サポートあり アップデート通知 サポートなし 期間制限・機能制限無し http://radical-bridge.com/product/calendarPlus.html kintone カレンダーPlus 検 索
- 58. 冬に向けていろいろなイベントに登場させていただきます 58 11/6 cybozu.comカンファレンス2015 東京 @ホテルニューオータニ（東京） kintoneハンズオン講師 11/12 JAWS-UG 札幌 in AWS Cloud Roadshow 2015 @ニューオータニイン札幌 kintoneパネリスト参加 11/13 Eight Meet Up Tour in 札幌 @SHARE Eight × kintone のお話で登壇 11/20 cybozu.comカンファレンス2015 大阪 終了後の kintone Café 大阪 Vol.5 LT参加 11/30 kintone Café 札幌 Vol.7 + JAWS-UG 札幌 合同開催 12/4 kintone devCamp 2015 @サイボウズ本社（東京） kintone × Twilio連携ハンズオン講師 12/9 某社kintoneセミナー登壇（札幌）
- 59. お疲れ様でした 59