kintone わいわい会 vol5 はじめてのカスタマイズ...からの、迷い方 の資料です。

1. KINTONE
わいわい会
VOL.5
は じ め て の カ ス タ マ イ ズ … か ら の 、 迷 い 方

2. 自己紹介
• 二宮雅宏
– コミクリ 塩尻オフィス
– 最近の興味はブロックチェーン
– 古いウィスキーが好き

3. 今日やること
• kintoneカスタマイズの整理
• JavaScriptによるkintoneカスタマイズ体験
• 学習を進めるうえでのアドバイス
• 家庭教師やります（宣伝）

4. カスタマイズ？

5. kintoneカスタマイズ
外部連携
JavaScript
カスタマイズ
CSS
カスタマイズ
プラグイン
Webhook
kintone JavaScript API
kintone REST API
kintone
コマンドライン

6. SCENARIO
• 新人のAさんは、kintoneによる業務改善をB部長から命じられました。
• Aさんは旅費精算のパッケージを導入し、全社の旅費精算フローを効率化を提案し、
見事採用されました。

7. WORK
• ご自分の環境でログインします。
• アプリを一つ新規作成します。
– お勧めのアプリから、 を選択します。
– 何件かダミーデータを作ります。この時、申請者＝上長＝自分のアカウントにします。
– 作成したレコードをそれぞれ「申請」し、ステータスを「申請中」にします。

8. WORK

9. SCENARIO
• 試験導入の翌月、B部長からお呼びが！！
• ぶちょ：「Aくん、これは、いちいち一人ずつ承認しないといけないのかね？」
• A：「はい、部長に内容を精査いただ」
• ぶちょ：「ボタン一つでまとめて承認できないかね」
• A：「はい、かしこまりました。」

10. CUSTOMIZED IMAGE
まとめて承認

11. WORK
• カスタマイズの出番です。
• はじめに、開発環境を整えましょう。
• 作成したアプリに、JSEdit for kintoneを追加します。
– kintoeシステム管理→プラグイン→読み込む
– アプリの設定→プラグイン

12. WORK
• JavaScriptをコーディングしましょう
• 新規作成→customize.js
• プログラムをコピペ
• 保存
(function() {
"use strict";
kintone.events.on('app.record.index.show', function(event){
kintone.app.getHeaderMenuSpaceElement().innerHTML =
'<button id="apploval_button" class="kintoneplugin-button-normal">まとめて承認</button>';
const apploval_button = document.getElementById("apploval_button");
apploval_button.addEventListener('click', function(el){
let updateRecords=[];
let j=0;
for(let i=0; i<event.records.length; i++){
let record = event.records[i];
if(record.ステータス.value==='申請中') {
updateRecords[j]=
{
id: record.$id.value,
action: '承認',
revision: record.$revision.value,
}
j++;
}
}
let params = {
app: kintone.app.getId(),
records: updateRecords,
};
kintone.api(kintone.api.url('/k/v1/records/status', true), 'PUT', params)
.then(function(resp){
console.log(resp);
alert("まとめて承認しました");
location.reload(true);
})
.catch(function(err){
alert(err);
console.log(err);
});
});
});
})();

13. WORK

14. SCENARIO
• A：「部長！できました。」
• ぶちょ：「おー、これだよこれ。けどさ、ボタンカッコ悪くない？」
• A：「・・・はい。」

15. WORK
• kintoneのデザインに合わせたCSSを設定します。

16. 学習を進めるうえでのアドバイス
• chromeのデベロッパーモードを使いこなそう。
• チュートリアルから入る
– 用語の名前付けが微妙なので、迷子にならないよう注意。
• kintone界隈、全体的にそう。
– ページによってコーディングスタイルがかなり違うが、我慢する。
• promise
– 一つ目の壁
• モバイル
– あきらめるのが吉
• ブラウザ依存
– IE11案件＋babel使えない縛り→ ・・・・
• コマンドライン版で間に合っちゃうことが意外と多い。

17. コミュニティが結構活発

18. 次回予告
• 6/6（木） kintoneわいわい会Vol.6 テーマ募集中！