2019-07-27 AgijeJapan2019 長崎サテライト with NaITE

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. ご清聴ありがとう
ございました