Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20150715 kintone Café 大阪 Vol.3 カスタマイズハンズオン

5,531 views

Published on

7/15(水)に開催された kintone Café 大阪 Vol.3 JavaScriptを使ったカスタマイズハンズオンの資料です。

Published in: Technology
  • Be the first to comment

20150715 kintone Café 大阪 Vol.3 カスタマイズハンズオン

  1. 1. kintoneカスタマイズハンズオン 2015年7月15日 アールスリーインスティテュート いけがみ みどり 大阪 Vol.3
  2. 2.  自己紹介  カスタマイズの前に・・・  JavaScriptを使ってカスタマイズしてみよう  ハンズオンで利用するアプリの準備  カスタマイズその① バリデーション  カスタマイズその② 住所から地図表示 あじぇんだ 2
  3. 3. 池上 緑(いけがみ みどり) アールスリーインスティテュート  よく間違われますが正真正銘のエンジニア  肩書きはクラウドエンジニア  kintone専属(?)エンジニアです!  6/1にJOINしてまだまだひよっこです><  活動はこのあたりに書いてあるので見てね! https://www.r3it.com/community/ 個人では・・・  パイ投げしたりMCやってたりレイヤーやってたりJKなってたりいろい ろ(  最近はどりぃって呼んでくれる人も増えてるので 初めての方は どりぃ(^ω^)で覚えてください!(๑・౩・๑) 自己紹介 @p52_rocca p526CA 3
  4. 4. ところでみなさん 4
  5. 5. 具体的に kintoneのカスタマイズって 5
  6. 6. どんなことを さすと思いますか? 6
  7. 7. わたし kintoneのカスタマイズ やったことあるよ!って人? 7
  8. 8. データの取り込み 外部システムとの連携  kintoneと他のシステムとの データ連携が可能 • 他のシステムのデータをkintoneに 取り込む • kintoneに蓄積したデータを他のシ ステムに渡す JavaScript/CSSを利用した 画面のカスタマイズ  標準では搭載されていない機能 を利用することが可能に!  CSSでkintoneのデザインを変 更したりすることも 8 カスタマイズってどんなこと?
  9. 9. 今回は JavaScriptを使って カスタマイズしてみるよ! 9
  10. 10.  標準機能で出来ないことができる!  cybozu.com developer networkにサンプル コードがたくさん掲載されているので、それを参 考にするとわかりやすいかも。  わからないことはサイボウズの中の人やエバン ジェリストの人にたくさん質問しよう!  みんなで一緒に学べばカスタマイズも怖くない よ! JavaScriptでカスタマイズしてみよう 10 cybozu.com developer network https://cybozudev.zendesk.com/hc/ja
  11. 11. さてそれでは 本題のハンズオンへ 11
  12. 12. ハンズオンで利用するアプリの準備① 12 お持ちのアカウント (※ここでは開発者アカウントになります) でログインします。
  13. 13. ハンズオンで利用するアプリの準備② 13 画面右上の歯車マークから 「kintoneシステム管理」 を選択します。 kintoneシステム管理画面の 「アプリ」>「アプリテンプレート」 を選択。
  14. 14. ハンズオンで利用するアプリの準備③ 14 読み込むテンプレートを指定します。 テンプレートを取り込むため 「読み込む」を選択。
  15. 15. ハンズオンで利用するアプリの準備④ 15 保存したテンプレート 「kintoneCafe_osaka3.zip」を指定して 「読み込む」をクリック。 ※zipは解凍しないようにして下さい。 テンプレートが正常に読み込まれると 右記のように表示されます。
  16. 16. ハンズオンで利用するアプリの準備⑤ 16 テンプレートから読み込んだアプリを追加します。 ※ここではスレッド内に作成しています。 「テンプレートから選ぶ」を選択します。
  17. 17. ハンズオンで利用するアプリの準備⑥ 17 先ほど読み込んだテンプレートが 表示されますので、 「アプリを作成する」をクリック。 アプリが追加されました!
  18. 18. カスタマイズその① バリデーション 18
  19. 19. バリデーションって何? 19
  20. 20. (答え)正誤性チェック ・・・みたいなもの。 20
  21. 21. 実際に どんな動きになるか 確認してみよう! 21
  22. 22. ・・・その前に 22
  23. 23. kintoneにおける JavaScriptの書き方の ルールを学ぼう! 23
  24. 24. kintoneにおけるJavaScriptのルール 24  拡張子は.jsで保存 • ファイル名の拡張子は表示しておいたほうが良い。 • じゃないとテキストとかで保存されててスクリプト 動かないよ!なんてことも…  文字コードはUTF-8で保存 • 異なる文字コードで保存すると文字化けする原因 に!  即時関数パターンで記述(後述)  strictモードを使用する(後述)
  25. 25. 即時関数パターンとは 25  下記のような書き方  {}内に処理の内容を記述する • ルールのようなものなので覚えてしまったほうが良 いかも。 • 関数を定義するのと同時に実行もする。 • 関数って何?って人はわかる人に聞いてね><
  26. 26. strictモードとは 26  “use strict”と宣言する  記述ミス防止目的  使うものは明示的に「使う」って宣言して使っ てね!って意味
  27. 27. kintoneのイベント処理① 27  kintoneにはkintone独自のイベントがある https://cybozudev.zendesk.com/hc/ja/sections/2 00418540 • レコード一覧イベント(表示、保存、変更など) • レコード表示イベント(詳細画面表示、削除前など) • レコード追加イベント(表示、保存など) • レコード編集イベント(表示、保存など) • グラフ表示イベント (PC用のみ)
  28. 28. kintoneのイベント処理② 28  レコード追加イベント • (例)app.record.create.submit →レコード追加画面で保存するタイミング  レコード編集イベント • (例)app.record.edit.submit →レコード編集画面で保存するタイミング  レコード一覧イベント • (例)app.record.index.edit.submit →レコード一覧画面で保存するタイミング
  29. 29. kintoneのイベント処理③ 29  kintoneにおいてデータの取得、登録、更新を 行う場合、フィールドコードの指定が必要 https://cybozudev.zendesk.com/hc/ja/articles/20 2166330
  30. 30. フィールドコードの確認方法 30 フォームの編集画面の任意の フィールドの「設定」ボタンを クリックすると表示されます。
  31. 31. 実際にJavaScriptを 編集してみよう!! 31
  32. 32. カスタマイズ課題① 32  顧客リストアプリのフィールドコードを確認し、 formcheck-custom.js のXXXX印に埋めてみ ましょう。
  33. 33. 編集が終わったら 33
  34. 34. いよいよ kintoneにアップロード するよ! 34
  35. 35. JavaScriptのアップロード① 35 まず、アプリの設定画面を開きます。
  36. 36. JavaScriptのアップロード② 36 詳細設定の▼印をクリックすると、 「JavaScript/CSSカスタマイズ」 という項目が出てきますので、 こちらをクリック。
  37. 37. JavaScriptのアップロード③ 37 「PC用のJavaSciptファイル」から 「アップロードして追加」をクリックします。
  38. 38. JavaScriptのアップロード④ 38 バリデーションで利用する formcheck-custom.jsを選択して保存して下さい。 ※アップロード先は「PC用のJavaScriptファイル」となります。
  39. 39. JavaScriptのアップロード⑤ 39 「設定完了」ボタンをクリックすると JavaSciptが反映されます。
  40. 40. JavaScriptが 正常に動作するか 確認しよう! 40
  41. 41. JavaScriptの動作確認 41  (新規レコード追加時)電話番号やFAX、 メールアドレスを全角で入力してみる  (レコード編集時)メールアドレスの@を抜く、 ドメインを抜いてみる...etc 図のようなエラーが発生すれば、 正常にバリデーションが出来ている ことになります!
  42. 42. カスタマイズその② 住所から地図を表示する 42
  43. 43. スペースフィールドについて① 43  スペースフィールドには要素IDというものを指 定することが可能。 このスペースフィールドの要素IDは 「Maps」であることがわかります。 ※デフォルトでは空の状態であるため 任意のIDを設定することも可能です。
  44. 44. スペースフィールドについて② 44  要素IDを下記のように指定することで、フィー ルドが取得でき、その中に更に別の要素を入 れることが可能。
  45. 45. 今回はこの スペースフィールドを 利用して 45
  46. 46. そのフィールドに 地図を表示させて みたいと思います! 46
  47. 47. カスタマイズ課題② 47  顧客リストアプリのフィールドコードを確認し、 ol37gmap-custom.js のXXXX印に埋めてみま しょう。
  48. 48. 編集できたら kintoneにアップロード してみよう! 48
  49. 49. JavaScriptのアップロード 49  地図表示には、2つファイルが必要になります。 • ol37gmap-custom.js(編集したもの) • 地図表示に利用するOpenLayerライブラリ https://js.cybozu.com/openlayers/v3.7.0/ol.js
  50. 50. アップロードできたら 地図が正常に表示されるか 確認してみよう! 50
  51. 51. JavaScriptの動作確認 51 レコード登録後に、 以下のような地図が表示されれば OKです!
  52. 52. ここからいろいろな カスタマイズに 挑戦してみて下さい! 52
  53. 53. すぺしゃるさんくす 53 ボウズマン画像の使用許可をくださっ たサイボウズの皆様 kintone Café大阪運営の皆様 ご参加頂いた皆様

×