Rocro Inspecode Hands On with Bitbucket

Bitbucket + Rocro Hands-On Seminar 2017/11/01

1. ROCRO INSPECODE ハンズオン Bitbucket編 Rocro株式会社 峯尾 嘉征 2017/11/01
2. • 開発者向けサービス群 • https://rocro.com • GitHub / Bitbucketと連携 • 9/14 public beta開始 • 名前の由来 • アジャイル開発：イテレーションを回しながらソフトウェアをつくる • 回転させながらものをつくる道具 → ろくろ 2
3. Inspecode • 自動コードレビュー＆コード修正サービス • 約50種類の静的解析ツールをサポート • 一部の言語でユニットテストもサポート開始 • サポート言語： C, C++, Clojure, CoffeeScript, CSS, Go, HTML, Java, JavaScript, PHP, Python, Ruby, Scala, Shell, TypeScriptなど • Public Beta 3
4. What's New • 下記ツールを新規にサポート • Tailor(Swift) • Prospector(Python) • Prettier(CSS/JavaScript/TypeScript) • Unused(多言語対応) • Public Repositoryへの対応 • Bitbucketでも自動修正機能をサポート • レポートバッジ（詳細は後述） • Fixedステータス（詳細は後述） 4
5. ハンズオン資料 https://bitbucket.org/your-team/inspecode-hands-on 5 https://bitbucket.org/your-team/inspecode-hands- on/downloads/inspecode-hands-on-bitbucket_jp.pdf Click “ダウンロード” Download pdf
6. Agenda • セットアップと基本的な使い方 • rocro.ymlの追加 • 自動修正 • 入力分割 • バッジ 6
7. セットアップと基本的な使い⽅ 7
8. https://bitbucket.org/your-team/inspecode-hands- on を Fork ① Click “+” mark 8
9. https://bitbucket.org/your-team/inspecode-hands- on を Fork ② Click “Fork this repository” 9
10. https://bitbucket.org/your-team/inspecode-hands- on を Fork ③ Click 10
11. inspecode.rocro.com からサインイン Sign in with BitBucket 11
12. Authorize ROCRO Click 12
13. Repositories ページに移動 Click “Repositories” 13
14. レポジトリを登録 2. Back to “Reports” 1. Register “inspecode-hands-on” repository 14 ※repositoryが現れない場合は、右上の”Sync”ボタンを押してください
15. Report が生成されることを確認 15
16. Report Summaryを表示① Click “Report” 16
17. Report Summaryを表示② 17
18. File一覧を表示① Click “D” bar 18
19. File一覧を表示② ※「Filesタブ→プルダウンメニューでGrade Dを選択」 でも同じ画⾯に⾏けます。 19
20. 特定ファイルのIssue一覧を表示① Click 20
21. 特定ファイルのIssue一覧を表示② 21
22. 特定ファイルのIssue出現箇所を確認① Click “Source” 22
23. 特定ファイルのIssue出現箇所を確認② 23
24. Jobの履歴を表示① 24 Click “History”
25. Jobの履歴を表示② 25
26. Jobの詳細を表示① Click 26
27. Jobの詳細を表示② Click “golint” 27
28. Jobの詳細を表示③ golintのコンソールログを確認 28
29. rocro.ymlの追加 29
30. rocro.yml inspecode: gofmt: thresholds: num-issues: 0 options: [-s] go-test: thresholds: num-issues: 0 misspell: default golint: default rocro.ymlにより様々な設定が可能 左のrocro.ymlは、gofmt, golintで 1つでもissueが検出されたら Jobをfailさせる設定 Note: Notificationsの設定で “Only failure and recovery” を選択すると Jobのfailに気づきやすくなる 30 https://inspecode.rocro.com/help/configuration/tool.html#field-thresholds
31. rocro-ymlブランチをマージ① Click “ブランチ” 31
32. rocro-ymlブランチをマージ② Click “rocro-yml” 32
33. rocro-ymlブランチをマージ③ Click “マージ” 33
34. rocro-ymlブランチをマージ④ Click “マージ” 34
35. Threshold設定によりJobがFailしたことを確認① 35 Click “History”
36. Threshold設定によりJobがFailしたことを確認② 36 Click
37. Threshold設定によりJobがFailしたことを確認③ 37 gofmtがfailしたのを確認
38. 自動修正 38
39. rocro.yml inspecode: gofmt: thresholds: num-issues: 0 options: [-s] auto-fix: true go-test: thresholds: num-issues: 0 misspell: default golint: default gofmtのauto-fixを有効にして 先程のgofmt errorを自動的に修正する 39 https://inspecode.rocro.com/help/configuration/tool.html#field-auto-fix
40. auto-fixブランチをマージ① 40 Click “ブランチ”
41. auto-fixブランチをマージ② 41 Click “auto-fix”
42. auto-fixブランチをマージ③ 42 Click “マージ”
43. auto-fixブランチをマージ④ 43 Click “マージ”
44. Report Summaryを表示 2. Click “Report” 44 1. Click “Reports”
45. レポート画面からブランチ画面を表示 Click “Compare” 45 ※“Compare”が表⽰されない場合は、“History”から 最新のJobを選択して”View Report”ボタンを押してください
46. master@inspecode を master にマージ① Create ”マージ” 46
47. master@inspecode を master にマージ② Create ”マージ” 47
48. コミット履歴から Report Summary を表示① 48 Click “コミット”
49. コミット履歴から Report Summary を表示② 49 Click green icon
50. 修正された Issues を確認① Click “Number of Fixed Issues” 50
51. 修正された Issues を確認② 51
52. 自動修正によりFailed→Succeededになったことを確認① Click “History” 52
53. 自動修正によりFailed→Succeededになったことを確認② 53 Click
54. 自動修正によりFailed→Succeededになったことを確認③ 54
55. 入力分割 55
56. rocro.yml inspecode: gofmt: thresholds: num-issues: 0 options: [-s] auto-fix: true go-test: thresholds: num-issues: 0 misspell: default golint: - input: c* - ignore: c* golintの入力を分割して 並列化・高速化する ”c”で始まるファイル群と それ以外のファイル群に２分割 56
57. 参考：Multiple Configurations 57 inspecode: <tool>: input: <pattern> ignore: <pattern> https://inspecode.rocro.com/help/configuration/tool.html#multiple-configurations inspecode: <tool>: - input: <pattern> ignore: <pattern> - input: <pattern> ignore: <pattern> Single Configuration inputで入力パターンを指定（複数可） ignoreで除外パターンを指定（複数可） Multiple Configurations リスト形式で複数のconfigurationを 記述可能
58. divide-inputブランチをマージ① 58 Click “ブランチ”
59. divide-inputブランチをマージ② 59 Click “auto-fix”
60. divide-inputブランチをマージ③ 60 Click “マージ”
61. divide-inputブランチをマージ④ 61 Click “マージ”
62. golintが分割・並列実行されたことを確認① 62 Click “History”
63. golintが分割・並列実行されたことを確認② 63 Click
64. golintが分割・並列実行されたことを確認③ 64
65. バッジ 65
66. バッジ • READMEに貼るアイコン • ステータスバッジ • 最新のジョブのステータス（Succeeded, Failedなど）を表示 • クリックすると最新のジョブの詳細画面へジャンプ • レポートバッジ • 最新のレポートの５段階評価（A, B, C, D, F）を表示 • クリックすると最新のレポート画面へジャンプ 66
67. Settings 画面を開く Click “Settings” 67
68. Badges 画面を開く Click “Badges” 68
69. Markdownスニペットをコピー Copy this snippet 69
70. README.mdを編集① Click “ソース” 70
71. README.mdを編集② Click “README.md” 71
72. README.mdを編集③ Click “編集” 72
73. README.mdを編集④ 1. コピーしたスニペットを 8⾏⽬に貼り付ける 2. Click “コミット” 73
74. README.mdを編集⑤ Click “コミット” 74
75. レポートバッジを確認① Click “ファイルを表⽰” 75
76. レポートバッジを確認② バッジが表⽰される 76