Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017

「kintone evaCamp 2017」発表資料

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

kintone JSコーディングの玄人化を目指して - kintone evaCamp 2017

  1. 1. kintone JSコーディングの 玄人化を目指して 株式会社ジョイゾー 山下竜 kintone evaCamp Nov 7th 2017
  2. 2. ⾃⼰紹介 株式会社ジョイゾー 山下 竜 (Yamaroo) kintoneエバンジェリスト kintone Café 東京⽀部メンバー IT DART隊員 2014年、界隈初のkintone転職 100%kintoneでご飯を⾷べている 今年70日間サンフランシスコに 福岡県⼤牟⽥市出⾝ コミュニティ 主な属性
  3. 3. 会社紹介 ü会社名 株式会社ジョイゾー ü所在地 東京都江東区⽊場6−6−2 ü設⽴ 2010年12⽉20⽇(8期⽬) ü従業員数 11名(kintoneエバンジェリスト2名) ü主な事業 kintone導⼊⽀援、サイボウズOffice/ガルーン 構築⽀援 kintone案件にフルコミット!
  4. 4. ⾃⼰紹介 developer.cybozu.io developer.kintone.io 日米合わせて1,000 アクティビティ間近
  5. 5. ⾃⼰紹介 [ASCII.jp] IoTも得意なジョイゾー山下竜氏、 70日間の北米勤務で見たモノとは? [同人誌]kintoneで始めるIoT サイボウズ商店 @Cybozu Daysで 販売
  6. 6. 今⽇ご紹介する⽞⼈化ポイント • そろそろ⽌めよう!APIの同期処理 • ESLintで構⽂チェック! • 51-modern-default.cssでスタイル設定! • 実践!セキュアコーディング
  7. 7. そろそろ⽌めよう! APIの同期処理
  8. 8. やめられないXMLHttpRequestの同期処理 「複数のレコードをループして取得するワザ (https://developer.cybozu.io/hc/ja/articles/201501294) 」より
  9. 9. やめられないXMLHttpRequestの同期処理 「複数のレコードをループして取得するワザ (https://developer.cybozu.io/hc/ja/articles/201501294) 」より デフォルトは勿論”true”
  10. 10. XHRの同期処理、アラート出てますよね? [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. コンソールにアラート 出てますよね?
  11. 11. kintone.api()を使う • XMLHttpRequestをやめて、kintone.api()を使おう • 実⾏順序を制御したければ、kintone.Promiseを組み合わせる ただ、非同期でXMLHttpRequestを使うのはアリだし、kintone JavaScript APIで 出来ないことは、非同期XMLHttpRequestを使う
  12. 12. ファイル処理はXHR⾮同期処理で! ファイルのアップロード ファイルのダウンロード
  13. 13. レスポンスヘッダが欲しい時には⾮同期XHR? • kintone.api()は、ヘッダとステータスコードを返さない • 2017/11のアップデートで追加になる気になるヘッダ • X-ConcurrencyLimit-Limit: 同時接続数上限の上限値 • X-ConcurrencyLimit-Running:現在の同時接続数の情報
  14. 14. レスポンスヘッダが欲しい時には⾮同期XHR? ⾮同期XHRによるレコード取得APIのリクエスト コンソールで実行した結果 レスポンスヘッダ
  15. 15. ESLintで構⽂チェック!
  16. 16. 「リンティングツール」 「構⽂チェック」とは?
  17. 17. リンティングツール • コードスタイルの⼀貫性を保つ:スペース、インデント、ブレース(波括 弧)の配置などのコードスタイルの問題をリンターで確認できる。チーム の同意を得たコーディングスタイルを設定ファイルに記述しておけば⾃動 的に確認できる • 潜在的エラーや良くないパターンを⾒分けられる:リンターは、重複変数、 到達不能コード、無効な正規表現の可能性があるエラーを発⾒するため、 より⾼度な確認に使⽤できる。リンターの警告で、ランタイム前にエラー を修正できる • 品質を強化する:⼈とは常に⼿抜きをしたくなるものなので、プロジェク トの特定のスタイルガイドに従うときはツールで強化することが⼤切だ。 作成⼿順にリンティングツールが備わっている場合は、プロジェクトの開 始を⽌めるか、未修整エラーがあるならリポジトリにコミットする • 時間を節約する:上の3点から得られる主なメリットはリンターが開発中 の⼿間を省くことだ。ブレースについて同僚と⾒当違いの議論に貴重な時 間を費やすことなく、初期段階で1〜2個のバグを発⾒する 潜在的な問題を自動検出 (https://www.webprofessional.jp/up-and-running-with-eslint-the-pluggable-javascript-linter/) より
  18. 18. ⼀般的なJavaScriptの構⽂チェックツール • JSHint • JSLint • ESLint jswatchdogで利用されている
  19. 19. kintone JavaScriptに特化した構⽂チェック jswatchdog eslint-config-kintone
  20. 20. jswatchdog • 2015/4 リリース • 内包ツール • JSHint(構⽂チェック) • ESLint(構⽂チェック) • JSPrime(脆弱性チェック) • コードをコピペして診断 現在メンテ停止の様子
  21. 21. • 2016/9 リリース • ESLintベース • コマンドやエディタで診断 eslint-config-kintone 新しく整備されたこちらを使う
  22. 22. ESLint、eslint-config-kintoneを使おう! • ESLintにeslint-config-kintoneを追加 • lint⾮対象プロパティをglobalsに指定 • 独⾃ルールをrulesに指定 .eslintrc.jsの例
  23. 23. 51-modern-default.cssで スタイル設定!
  24. 24. 51-modern-default.css • kintoneプラグイン開発ユーティリティのひとつとして提供さ れている • プラグインに限らずkintoneのJSカスタマイズで利⽤すると⾒ た⽬をそれっぽくできる
  25. 25. 51-modern-default.cssのスタイルを設定 テキストボックス スタイルなし 51-modern-default.css適用 チェックボックス セレクトボックス ラジオボタン ボタン
  26. 26. 51-modern-default.cssのスタイルを設定 テーブル スタイルはあるけど、 制御するJSの準備が 面倒
  27. 27. 実践!セキュアコーディング
  28. 28. セキュアコーディングガイドライン • クロスサイトスクリプティングを防ぐ • クロスサイトリクエストフォージェリを防ぐ • 通信にHTTPSを使⽤する • 取得したデータは適切に保管する • JavaScript カスタマイズ利⽤時のその他の注意点 • サービスへの影響を考慮する セキュアコーディングガイドライン(https://developer.cybozu.io/hc/ja/articles/201919400) 」より
  29. 29. セキュアコーディングガイドライン • クロスサイトスクリプティングを防ぐ • クロスサイトリクエストフォージェリを防ぐ • 通信にHTTPSを使⽤する • 取得したデータは適切に保管する • JavaScript カスタマイズ利⽤時のその他の注意点 • サービスへの影響を考慮する セキュアコーディングガイドライン(https://developer.cybozu.io/hc/ja/articles/201919400) 」より カスタマイズする人の 注意ポイント 似たようなトピックで 「Security Best Practices for Bot Builders (https://www.slideshare.net/MaxFeldman4/security-best-practices-for-bot-builders) 」 もわかりやすい!
  30. 30. ⼀般的なXSS対策 • HTMLエスケープする • &、<、>、”、ʼ • HTMLエスケープしなくても安全になるような書き⽅をする • element.textContent、$(element).text()、$(element).val() を使 う • element.innerHTML、$(element).html()、 $(element).append() を使わない • aタグの⽣成時にはHTMLエスケープに加えて encodeURIComponentも必要
  31. 31. XSS対策の課題 • 対策の難しさ • ⼊⼒が数値だけなのでエスケープは不要っぽい?等の判断が難しいこ とがある • レビュー時の難しさ • どこでエスケープされているかの確認が⾯倒だったりする
  32. 32. kintoneで起きうるXSS • フィールドのラベルにスクリプトが仕込まれる • レコードのフィールドの値にスクリプトが仕込まれる • カスタマイズで⾜したテキストボックスにスクリプトが⼊⼒さ れる
  33. 33. kintoneでXSSを起こしてみる フィールドのラベルにスクリプトが仕込まれる
  34. 34. レコードのフィールドの値にスクリプトが仕込まれる kintoneでXSSを起こしてみる
  35. 35. kintoneでXSSを起こしてみる カスタマイズで⾜したテキストボックスにスクリプトが⼊⼒される
  36. 36. kintoneでXSSを起こしてみる
  37. 37. BetterなXSS対策 • HTMLエスケープしなくても安全になるような書き⽅をする • element.textContent、$(element).text()、$(element).val() を使 う • element.innerHTML、$(element).html()、 $(element).append() を使わない • HTMLの⽣成が⼤きくなる際にはテンプレートエンジンを利⽤ する • jsRenderのようなテンプレートエンジンの利⽤ • React、Vue等のフレームワークにはその機能が元々備わっている • Underscore、lodash等のユーティリティの機能を利⽤
  38. 38. テンプレートエンジンを使ったHTML⽣成 「フィールドのラベルにスクリプトが仕込まれる」への対策
  39. 39. 素敵な kintone JSライフを!

×