[2019/07/27]はじめよう、ニコカレ！

Agile Japan 2019 長崎サテライト with NaITE
https://nagasaki-it-engineers.connpass.com/event/125262/

Transcript

1. はじめよう、
 ニコカレ！
 Agile Japan 2019 長崎サテライト with NaITE
 2019-07-27 Sat
 Naoto Teshima

2. こんにちは

3. わたし
 3

4. 4
 わたし
 GMOペパボ
 ホスティング事業部
 ムームードメイングループ
 
 手島 尚人
 
 インターネット上では
 まおちゃという名前でJKやってます
 4

5. 5
 わたし
 5

6. わたし
 6
 最近は…
 Ruby on Railsとか
 Laravelとか
 書いてます
 6

7. わたし
 7
 ref: https://kimromi.hatenablog.jp/entry/2019/02/23/225740 
 7

8. わたし
 8
 ref: https://kimromi.hatenablog.jp/entry/2019/02/23/225740 
 8

9. マネジメント
 仕事の進捗は
 チケット
 ガントチャート
 バックログ
 などでマネジメントしているかと思います
 9

10. 皆さんマネジメント
 してますか？

11. マネジメント
 仕事の進捗は
 チケット
 ガントチャート
 バックログ
 などでマネジメントしているかと思います
 11

12. マネジメント
 特にアジャイルプラクティスには
 マネジメント用
 フレームワークが
 揃っており取り組むことは難しくないです
 12

13. マネジメント
 どうすればもっと
 仕事の効率が上がる
 と思いますか？
 13

14. マネジメント
 手当たり次第にいろいろな
 アジャイルプラクティスを
 取り入れてみる？
 14

15. マネジメント
 強力なリーダーがいて
 トップダウンで
 タスクを管理する？
 15

16. マネジメント
 スタープレイヤーがいて
 ボトムアップで
 提案していく？
 16

17. マネジメント
 チームで協力して
 連携しつつプロジェクトを
 進めていく？
 17

18. マネジメント
 18
 https://www.agilejapan.org/2019/session/keynote-03_GROOVE.pdf

19. マネジメント
 基調講演でもこのような
 お話しがありましたね
 19

20. マネジメント
 そのどれもが間違いではないと
 僕は思います
 20

21. マネジメント
 そして同時にこう思います
 21

22. マネジメント
 人はキモチで生きている
 生き物だと。
 22

23. マネジメント
 気分が乗っているときは
 どこまででも仕事ができる気がするし
 
 気分が乗らないときは遅々として
 作業が進まないことだってあります
 23

24. マネジメント
 キモチを仕事に持ち込む
 ことは悪いことでしょうか？
 24

25. マネジメント
 僕はそうは思いません
 25

26. マネジメント
 今、自分がどんなキモチなのか？
 最近どんな調子なのか？
 26

27. マネジメント
 それが可視化できれば
 色々と対策が取れますよね
 27

28. マネジメント
 大事なのは怒らないことではなく
 今、自分が
 怒っているという事実を自覚する
 ことだと思います
 28

29. マネジメント
 そしてそのソリューションとして
 僕はニコカレを作ることにしました
 29

30. マネジメント
 ニコカレとは元々、日本発祥の
 アジャイルプラクティスだと言われています
 30
 ニコニコカレンダー

31. マネジメント
 日々の気持ちをアナログでカレンダーに書き込み
 チームメンバーのキモチの動きを把握するものです
 31

32. マネジメント
 そこで思いました
 
 これ、 Slack通知できるようにして
 キモチをグラフ化・可視化したら
 売れるんじゃね？と
 32

33. https://github.com/tosite0345/nicocale.php
 マネジメント
 そんなこんなでニコカレを開発する
 運びとなったわけです
 33

34. 突然ですが

35. チームの4つの
 ステージについて
 ご存知ですか？

36. マネジメント
 Agile Japan 2018 長崎サテライト with NaITE
 の資料を見てみましょう
 36

37. マネジメント
 37
 タックマンモデル

38. マネジメント
 38

39. マネジメント
 39

40. マネジメント
 40

41. マネジメント
 41

42. マネジメント
 42

43. マネジメント
 43

44. マネジメント
 44

45. マネジメント
 45

46. マネジメント
 46

47. マネジメント
 いいこと書いてるわ過去の僕…
 47

48. マネジメント
 特に フォーミング期のチームに
 ニコカレを導入してもらいたい感があります
 48

49. マネジメント
 どの期においても共通して重要なのは
 自分のキモチを素直に表現
 することかなと
 49

50. マネジメント
 そのためにも一人ひとりの
 心理的安全性が
 確保された状態を
 作り出していきたいですよね
 50

51. マネジメント
 心理的安全性を担保するためには
 コミュニケーションを 活性化させていく必要がある
 と考えています
 51

52. マネジメント
 ニコカレはその課題を解決するための
 ソリューションとなり得る
 のではないでしょうか
 52

53. 画面

54. トップ画面
 54

55. トップ画面
 55
 https://github.com/missive/emoji-mart

56. 気をつけた点
 Emoji+キモチに分けて
 かんたんに登録できるようにした
 
 分けたのは グラフ化などの
 実装をかんたんにするため
 56

57. https://github.com/missive/emoji-mart
 気をつけた点
 標準のEmoji以外にもEmoji-martを使用して
 いろんなEmojiを使えるようにした
 57

58. 一覧画面
 58

59. 気をつけた点
 キモチごとに色を付けるようにした
 59

60. カレンダー画面
 60

61. 設定画面
 61

62. 構成

63. ユーザーSlack
 全体像
 63
 バックエンド
 (PHP)
 フロントエンド
 (Vuetify)
 問い合わせ
 フォーム
 CRON
 OAuthログイン
 各種通知
 定期的にAPI
 エンドポイントに
 アクセス
 開発用Slack
 通知
 エラー通 知
 デプロイ
 Deployer

64. LOLIPOP!マネージドクラウド
 64

65. LOLIPOP!マネージドクラウド
 65

66. LOLIPOP!マネージドクラウド
 便利なのでぜひ使ってください（宣伝）
 66

67. ユーザー側
 67

68. ユーザーSlack
 アプリケーション構成
 68
 バックエンド
 (PHP)
 フロントエンド
 (Vuetify)
 問い合わせ
 フォーム
 開発用Slack

69. ユーザーSlack
 アプリケーション構成（ログイン）
 69
 ※　2019年7月現在、Slackアカウントのログインのみ実装。 
 バックエンド
 (PHP)
 フロントエンド
 (Vuetify)
 OAuthログイン※

70. 気をつけた点
 OAuth認証を利用することにより
 個人情報をDBに持たないようにした
 70

71. ユーザーSlack
 アプリケーション構成（通知）
 71
 バックエンド
 (PHP)
 フロントエンド
 (Vuetify)
 問い合わせ
 フォーム
 CRON
 各種通知
 定期的にAPI
 エンドポイントに
 アクセス
 開発用Slack
 問い合わせ通知
 エラー通知

72. 通知一覧
 72
 登録後

73. アプリケーション構成（通知）
 73
 バックエンド
 (PHP)
 フロントエンド
 (Vuetify)
 開発用Slack
 エラー通知

74. エラー通知
 通知一覧
 74

75. 気をつけた点
 Laravel5.6から
 ログ出力先をSlackに
 指定できるようになったので試した
 75

76. config/logging.php
 .env
 アプリケーション構成（通知）
 76

77. ユーザーSlack
 アプリケーション構成（通知）
 77
 バックエンド
 (PHP)
 フロントエンド
 (Vuetify)
 CRON
 各種通知
 定期的にAPI
 エンドポイントに
 アクセス

78. 通知
 78
 リマインダー

79. スクリプト
 トリガー
 アプリケーション構成（通知）
 79
 API
 
 https://nicocale.app/api/v1/reminders 
 
 定期実行

80. アプリケーション構成（通知）
 80
 問い合わせ
 フォーム
 開発用Slack
 問い合わせ通知

81. お問い合わせフォーム 
 アプリケーション構成（通知）
 81

82. 問い合わせ
 通知
 82

83. 気をつけた点
 Google フォームを使用した
 問い合わせフォーム自前で持ちたくなかった
 ラクしたかった…
 83

84. スクリプト
 トリガー
 アプリケーション構成（通知）
 84
 問い合わせ時に
 発火

85. 開発側
 85

86. インフラ構成（デプロイ）
 86
 ※　デプロイにはDeployerを利用。
 バックエンド
 (PHP)
 フロントエンド
 (Vuetify)
 開発用Slack
 デプロイ通知
 デプロイ※
 Deployer
 Issue通知

87. 気をつけた点
 Deployerを使って
 デプロイ後の諸作業
 （シンボリックリンク作成とか.envアップロードとかキャッシュのアレコレとか）
 をコード化した
 87
 Deployer

88. デプロイ完了
 通知
 88

89. Repository
 インフラ構成（CI）
 89
 開発用Slack
 結果通知
 Issue通知
 Push
 CIチェック
 OK
 マージ

90. 気をつけた点
 デグレ起こさないよう、Pushするたびに
 CI側でユニットテストを実行
 する環境を整えた
 90

91. 失敗時
 成功時
 CI実行結果
 91

92. 通知
 92
 CI通知

93. ハマったこと

94. ハマったこと
 94

95. ハマったこと
 Slackのアプリ審査
 通すの難しい・・・！
 95
 結局30回近くメールのやりとりしてなんとか公開までこぎつけました 

96. 今後の展望

97. 今後の展望
 97

98. 今後の展望
 などなど、今後も機能改修を
 進めていきたいと思っています！
 98

99. 今後の展望
 ぜひ一度使っていただければ
 嬉しいです！
 99

100. 今後の展望
 https://github.com/tosite0345/nicocale.php
 100

101. 今後の展望
 皆さんのフィードバック
 お待ちしています😁
 101

102. さいごに

103. Thank you, we’re hiring!
104. ご清聴ありがとう
 ございました