Rocro Inspecode Hands On

Transcript

1. ROCRO INSPECODE ハンズオン Rocro株式会社 峯尾 嘉征 2017/10/24

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への対応 • レポートバッジ • 今回のハンズオンで取り上げます • Fixedステータス • 今回のハンズオンで取り上げます 4

5. ハンズオン資料 https://github.com/your-org/websocket 5 https://github.com/your-org/websocket/releases/download/hands- on/inspecode-hands-on_jp.pdf Click “releases” Download pdf

6. Agenda • セットアップと基本的な使い方 • rocro.ymlの追加 • 自動修正 • 入力分割 •

   バッジ 6

7. セットアップと基本的な使い⽅ 7

8. https://github.com/your-org/websocket を Fork Click “Fork” 8

9. inspecode.rocro.com からサインイン Sign in with GitHub 9

10. Authorize ROCRO Click “Authorize rocro” 10

11. Repositories ページに移動 Click “Repositories” 11

12. レポジトリを登録 2. Back to “Reports” 1. Register “websocket” repository 12

    ※repositoryが現れない場合は、右上の”Sync”ボタンを押してください

13. Report が生成されることを確認 13

14. Report Summaryを表示① Click “Report” 14

15. Report Summaryを表示② 15

16. File一覧を表示① Click “D” bar 16

17. File一覧を表示② ※「Filesタブ→プルダウンメニューでGrade Dを選択」 でも同じ画⾯に⾏けます。 17

18. 特定ファイルのIssue一覧を表示① Click 18

19. 特定ファイルのIssue一覧を表示② 19

20. 特定ファイルのIssue出現箇所を確認① Click “Source” 20

21. 特定ファイルのIssue出現箇所を確認② 21

22. Jobの履歴を表示① 22 Click “History”

23. Jobの履歴を表示② 23

24. Jobの詳細を表示① Click 24

25. Jobの詳細を表示② Click “golint” 25

26. Jobの詳細を表示③ golintのコンソールログを確認 26

27. rocro.ymlの追加 27

28. rocro.yml inspecode: gofmt: thresholds: num-issues: 0 options: [-s] go-test: thresholds:

    num-issues: 0 misspell: default golint: default gofmt, golintで 1つでもissueが検出されたら Jobをfailさせる Note: Notificationsの設定で “Only failure and recovery” を選択すると Jobのfailに気づきやすくなる 28 https://inspecode.rocro.com/help/configuration/tool.html#field-thresholds

29. rocro-ymlブランチをマージ Click “New pull request” 29

30. base forkとして自分のレポジトリを選択 複数の選択肢が出る。必ずFork先の ⾃分のレポジトリを選択する。 30

31. masterとrocro-ymlをCompare master であることを確認 rocro-yml を選択する 31

32. プルリクエスト作成① Click 32

33. プルリクエスト作成② Click 33

34. マージ① Click 34

35. マージ② Click 35

36. Threshold設定によりJobがFailしたことを確認① 36 Click “History”

37. Threshold設定によりJobがFailしたことを確認② 37 Click

38. Threshold設定によりJobがFailしたことを確認③ 38

39. 自動修正 39

40. rocro.yml inspecode: gofmt: thresholds: num-issues: 0 options: [-s] auto-fix: true

    go-test: thresholds: num-issues: 0 misspell: default golint: default gofmtの自動修正機能を有効にする 40 https://inspecode.rocro.com/help/configuration/tool.html#field-auto-fix

41. auto-fixブランチをマージ Click “New pull request” 41

42. base forkとして自分のレポジトリを選択 複数の選択肢が出る。必ずFork先の ⾃分のレポジトリを選択する。 42

43. masterとauto-fixをCompare master であることを確認 auto-fix を選択する 43

44. rocro-ymlと同様にマージ 44

45. Report Summaryを表示 2. Click “Report” 45 1. Click “Reports”

46. レポート画面からプルリクエストを作成 Click “Compare” 46 ※“Compare”が表⽰されない場合は、“History”から 最新のJobを選択して”View Report”ボタンを押してください

47. プルリクエストを作成してmasterにマージ Create pull request and merge 47

48. 自動修正によりFailed→Succeededになったことを確認① Click “History” 48

49. 自動修正によりFailed→Succeededになったことを確認② 49 Click

50. 自動修正によりFailed→Succeededになったことを確認③ 50

51. Report画面へ戻る Click “View Report” 51

52. 修正された Issues を確認① Click “Number of Fixed Issues” 52

53. 修正された Issues を確認② 53

54. 入力分割 54

55. 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”で始まるファイル群と それ以外のファイル群に２分割 55

56. 参考：Multiple Configurations 56 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を 記述可能

57. divide-inputブランチをマージ Click “New pull request” 57

58. base forkとして自分のレポジトリを選択 複数の選択肢が出る。必ずFork先の ⾃分のレポジトリを選択する。 58

59. masterとdivide-inputをCompare master であることを確認 divide-input を選択する 59

60. rocro-ymlと同様にマージ 60

61. golintが分割・並列実行されたことを確認① 61 Click “History”

62. golintが分割・並列実行されたことを確認② 62 Click

63. golintが分割・並列実行されたことを確認③ 63

64. バッジ 64

65. バッジ • READMEに貼るアイコン • ステータスバッジ • 最新のジョブのステータス（Succeeded, Failedなど）を表示 • クリックすると最新のジョブの詳細画面へジャンプ

    • レポートバッジ • 最新のレポートの５段階評価（A, B, C, D, F）を表示 • クリックすると最新のレポート画面へジャンプ 65

66. Settings 画面を開く Click “Settings” 66

67. Badges 画面を開く Click “Badges” 67

68. Markdownスニペットをコピー Copy this snippet 68

69. README.mdを編集① Click “README.md” 69

70. README.mdを編集② Click 70

71. README.mdを編集③ 1. コピーしたスニペットを 8⾏⽬に貼り付ける 2. Click “Commit changes” 71

72. レポートバッジを確認 バッジが表⽰される 72