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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

こんにちは 

Slide 3

Slide 3 text

わたし  3 

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

5  わたし  5 

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

突然ですが 

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

マネジメント  38 

Slide 39

Slide 39 text

マネジメント  39 

Slide 40

Slide 40 text

マネジメント  40 

Slide 41

Slide 41 text

マネジメント  41 

Slide 42

Slide 42 text

マネジメント  42 

Slide 43

Slide 43 text

マネジメント  43 

Slide 44

Slide 44 text

マネジメント  44 

Slide 45

Slide 45 text

マネジメント  45 

Slide 46

Slide 46 text

マネジメント  46 

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

画面 

Slide 54

Slide 54 text

トップ画面  54 

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

一覧画面  58 

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

カレンダー画面  60 

Slide 61

Slide 61 text

設定画面  61 

Slide 62

Slide 62 text

構成 

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

ユーザー側  67 

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

通知一覧  72  登録後 

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

エラー通知  通知一覧  74 

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

通知  78  リマインダー 

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

問い合わせ  通知  82 

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

開発側  85 

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

デプロイ完了  通知  88 

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

通知  92  CI通知 

Slide 93

Slide 93 text

ハマったこと 

Slide 94

Slide 94 text

ハマったこと  94 

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

今後の展望 

Slide 97

Slide 97 text

今後の展望  97 

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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