20150715 kintone Café 大阪 Vol.3 カスタマイズハンズオン
?
2 likes?7,827 views
7/15（水）に開催された kintone Café 大阪 Vol.3 JavaScriptを使ったカスタマイズハンズオンの資料です。
20150715 kintone Café 大阪 Vol.3 カスタマイズハンズオン
- 2. ? 自己紹介 ? カスタマイズの前に??? ? JavaScriptを使ってカスタマイズしてみよう ? ハンズオンで利用するアプリの準備 ? カスタマイズその① バリデーション ? カスタマイズその② 住所から地図表示 あじぇんだ 2
- 3. 池上 緑（いけがみ みどり） アールスリーインスティテュート ? よく間違われますが正真正銘のエンジニア ? 肩書きはクラウドエンジニア ? kintone専属（？）エンジニアです！ ? 6/1にJOINしてまだまだひよっこです＞＜ ? 活動はこのあたりに書いてあるので見てね！ https://www.r3it.com/community/ 個人では??? ? パイ投げしたりMCやってたりレイヤーやってたりJKなってたりいろい ろ（ ? 最近はどりぃって呼んでくれる人も増えてるので 初めての方は どりぃ（＾ω＾）で覚えてください！(?????） 自己紹介 @p52_rocca p526CA 3
- 4. ところでみなさん 4
- 8. データの取り込み 外部システムとの連携 ? kintoneと他のシステムとの データ連携が可能 ? 他のシステムのデータをkintoneに 取り込む ? kintoneに蓄積したデータを他のシ ステムに渡す JavaScript/CSSを利用した 画面のカスタマイズ ? 標準では搭載されていない機能 を利用することが可能に！ ? CSSでkintoneのデザインを変 更したりすることも 8 カスタマイズってどんなこと？
- 10. ? 標準機能で出来ないことができる！ ? cybozu.com developer networkにサンプル コードがたくさん掲載されているので、それを参 考にするとわかりやすいかも。 ? わからないことはサイボウズの中の人やエバン ジェリストの人にたくさん質問しよう！ ? みんなで一緒に学べばカスタマイズも怖くない よ！ JavaScriptでカスタマイズしてみよう 10 cybozu.com developer network https://cybozudev.zendesk.com/hc/ja
- 13. ハンズオンで利用するアプリの準備② 13 画面右上の歯車マークから 「kintoneシステム管理」 を選択します。 kintoneシステム管理画面の 「アプリ」＞「アプリテンプレート」 を選択。
- 19. バリデーションって何？ 19
- 22. ???その前に 22
- 24. kintoneにおけるJavaScriptのルール 24 ? 拡張子は.jsで保存 ? ファイル名の拡張子は表示しておいたほうが良い。 ? じゃないとテキストとかで保存されててスクリプト 動かないよ！なんてことも… ? 文字コードはUTF-8で保存 ? 異なる文字コードで保存すると文字化けする原因 に！ ? 即時関数パターンで記述（後述） ? strictモードを使用する（後述）
- 25. 即時関数パターンとは 25 ? 下記のような書き方 ? {}内に処理の内容を記述する ? ルールのようなものなので覚えてしまったほうが良 いかも。 ? 関数を定義するのと同時に実行もする。 ? 関数って何？って人はわかる人に聞いてね＞＜
- 26. strictモードとは 26 ? “use strict”と宣言する ? 記述ミス防止目的 ? 使うものは明示的に「使う」って宣言して使っ てね！って意味
- 27. kintoneのイベント処理① 27 ? kintoneにはkintone独自のイベントがある https://cybozudev.zendesk.com/hc/ja/sections/2 00418540 ? レコード一覧イベント（表示、保存、変更など） ? レコード表示イベント（詳細画面表示、削除前など） ? レコード追加イベント（表示、保存など） ? レコード編集イベント（表示、保存など） ? グラフ表示イベント （PC用のみ）
- 28. kintoneのイベント処理② 28 ? レコード追加イベント ? （例）app.record.create.submit →レコード追加画面で保存するタイミング ? レコード編集イベント ? （例）app.record.edit.submit →レコード編集画面で保存するタイミング ? レコード一覧イベント ? （例）app.record.index.edit.submit →レコード一覧画面で保存するタイミング
- 33. 編集が終わったら 33
- 49. JavaScriptのアップロード 49 ? 地図表示には、2つファイルが必要になります。 ? ol37gmap-custom.js（編集したもの） ? 地図表示に利用するOpenLayerライブラリ https://js.cybozu.com/openlayers/v3.7.0/ol.js