Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

tosite

July 27, 2019
Tweet

More Decks by tosite

Other Decks in Programming

Transcript

  1. はじめよう、

    ニコカレ!

    Agile Japan 2019 長崎サテライト with NaITE

    2019-07-27 Sat

    Naoto Teshima


    View full-size slide

  2. こんにちは


    View full-size slide

  3. わたし

    3


    View full-size slide

  4. 4

    わたし

    GMOペパボ

    ホスティング事業部

    ムームードメイングループ


    手島 尚人


    インターネット上では

    まおちゃという名前でJKやってます

    4


    View full-size slide

  5. 5

    わたし

    5


    View full-size slide

  6. わたし

    6

    最近は…

    Ruby on Railsとか

    Laravelとか

    書いてます

    6


    View full-size slide

  7. わたし

    7

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


    View full-size slide

  8. わたし

    8

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


    View full-size slide

  9. マネジメント

    仕事の進捗は

    チケット

    ガントチャート

    バックログ

    などでマネジメントしているかと思います

    9


    View full-size slide

  10. 皆さんマネジメント

    してますか?


    View full-size slide

  11. マネジメント

    仕事の進捗は

    チケット

    ガントチャート

    バックログ

    などでマネジメントしているかと思います

    11


    View full-size slide

  12. マネジメント

    特にアジャイルプラクティスには

    マネジメント用

    フレームワークが

    揃っており取り組むことは難しくないです

    12


    View full-size slide

  13. マネジメント

    どうすればもっと

    仕事の効率が上がる

    と思いますか?

    13


    View full-size slide

  14. マネジメント

    手当たり次第にいろいろな

    アジャイルプラクティスを

    取り入れてみる?

    14


    View full-size slide

  15. マネジメント

    強力なリーダーがいて

    トップダウンで

    タスクを管理する?

    15


    View full-size slide

  16. マネジメント

    スタープレイヤーがいて

    ボトムアップで

    提案していく?

    16


    View full-size slide

  17. マネジメント

    チームで協力して

    連携しつつプロジェクトを

    進めていく?

    17


    View full-size slide

  18. マネジメント

    18

    https://www.agilejapan.org/2019/session/keynote-03_GROOVE.pdf


    View full-size slide

  19. マネジメント

    基調講演でもこのような

    お話しがありましたね

    19


    View full-size slide

  20. マネジメント

    そのどれもが間違いではないと

    僕は思います

    20


    View full-size slide

  21. マネジメント

    そして同時にこう思います

    21


    View full-size slide

  22. マネジメント

    人はキモチで生きている

    生き物だと。

    22


    View full-size slide

  23. マネジメント

    気分が乗っているときは

    どこまででも仕事ができる気がするし


    気分が乗らないときは遅々として

    作業が進まないことだってあります

    23


    View full-size slide

  24. マネジメント

    キモチを仕事に持ち込む

    ことは悪いことでしょうか?

    24


    View full-size slide

  25. マネジメント

    僕はそうは思いません

    25


    View full-size slide

  26. マネジメント

    今、自分がどんなキモチなのか?

    最近どんな調子なのか?

    26


    View full-size slide

  27. マネジメント

    それが可視化できれば

    色々と対策が取れますよね

    27


    View full-size slide

  28. マネジメント

    大事なのは怒らないことではなく

    今、自分が

    怒っているという事実を自覚する

    ことだと思います

    28


    View full-size slide

  29. マネジメント

    そしてそのソリューションとして

    僕はニコカレを作ることにしました

    29


    View full-size slide

  30. マネジメント

    ニコカレとは元々、日本発祥の

    アジャイルプラクティスだと言われています

    30

    ニコニコカレンダー


    View full-size slide

  31. マネジメント

    日々の気持ちをアナログでカレンダーに書き込み

    チームメンバーのキモチの動きを把握するものです

    31


    View full-size slide

  32. マネジメント

    そこで思いました


    これ、
    Slack通知できるようにして

    キモチをグラフ化・可視化したら

    売れるんじゃね?と

    32


    View full-size slide

  33. https://github.com/tosite0345/nicocale.php

    マネジメント

    そんなこんなでニコカレを開発する

    運びとなったわけです

    33


    View full-size slide

  34. 突然ですが


    View full-size slide

  35. チームの4つの

    ステージについて

    ご存知ですか?


    View full-size slide

  36. マネジメント

    Agile Japan 2018
    長崎サテライト with NaITE

    の資料を見てみましょう

    36


    View full-size slide

  37. マネジメント

    37

    タックマンモデル


    View full-size slide

  38. マネジメント

    38


    View full-size slide

  39. マネジメント

    39


    View full-size slide

  40. マネジメント

    40


    View full-size slide

  41. マネジメント

    41


    View full-size slide

  42. マネジメント

    42


    View full-size slide

  43. マネジメント

    43


    View full-size slide

  44. マネジメント

    44


    View full-size slide

  45. マネジメント

    45


    View full-size slide

  46. マネジメント

    46


    View full-size slide

  47. マネジメント

    いいこと書いてるわ過去の僕…

    47


    View full-size slide

  48. マネジメント

    特に
    フォーミング期のチームに

    ニコカレを導入してもらいたい感があります

    48


    View full-size slide

  49. マネジメント

    どの期においても共通して重要なのは

    自分のキモチを素直に表現

    することかなと

    49


    View full-size slide

  50. マネジメント

    そのためにも一人ひとりの

    心理的安全性が

    確保された状態を

    作り出していきたいですよね

    50


    View full-size slide

  51. マネジメント

    心理的安全性を担保するためには

    コミュニケーションを
    活性化させていく必要がある

    と考えています

    51


    View full-size slide

  52. マネジメント

    ニコカレはその課題を解決するための

    ソリューションとなり得る

    のではないでしょうか

    52


    View full-size slide

  53. トップ画面

    54


    View full-size slide

  54. トップ画面

    55

    https://github.com/missive/emoji-mart


    View full-size slide

  55. 気をつけた点

    Emoji+キモチに分けて

    かんたんに登録できるようにした


    分けたのは
    グラフ化などの

    実装をかんたんにするため

    56


    View full-size slide

  56. https://github.com/missive/emoji-mart

    気をつけた点

    標準のEmoji以外にもEmoji-martを使用して

    いろんなEmojiを使えるようにした

    57


    View full-size slide

  57. 一覧画面

    58


    View full-size slide

  58. 気をつけた点

    キモチごとに色を付けるようにした

    59


    View full-size slide

  59. カレンダー画面

    60


    View full-size slide

  60. 設定画面

    61


    View full-size slide

  61. ユーザーSlack

    全体像

    63

    バックエンド

    (PHP)

    フロントエンド

    (Vuetify)

    問い合わせ

    フォーム

    CRON

    OAuthログイン

    各種通知

    定期的にAPI

    エンドポイントに

    アクセス

    開発用Slack

    通知

    エラー通
    知

    デプロイ

    Deployer


    View full-size slide

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

    64


    View full-size slide

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

    65


    View full-size slide

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

    便利なのでぜひ使ってください(宣伝)

    66


    View full-size slide

  65. ユーザー側

    67


    View full-size slide

  66. ユーザーSlack

    アプリケーション構成

    68

    バックエンド

    (PHP)

    フロントエンド

    (Vuetify)

    問い合わせ

    フォーム

    開発用Slack


    View full-size slide

  67. ユーザーSlack

    アプリケーション構成(ログイン)

    69

    ※ 2019年7月現在、Slackアカウントのログインのみ実装。

    バックエンド

    (PHP)

    フロントエンド

    (Vuetify)

    OAuthログイン※


    View full-size slide

  68. 気をつけた点

    OAuth認証を利用することにより

    個人情報をDBに持たないようにした

    70


    View full-size slide

  69. ユーザーSlack

    アプリケーション構成(通知)

    71

    バックエンド

    (PHP)

    フロントエンド

    (Vuetify)

    問い合わせ

    フォーム

    CRON

    各種通知

    定期的にAPI

    エンドポイントに

    アクセス

    開発用Slack

    問い合わせ通知

    エラー通知


    View full-size slide

  70. 通知一覧

    72

    登録後


    View full-size slide

  71. アプリケーション構成(通知)

    73

    バックエンド

    (PHP)

    フロントエンド

    (Vuetify)

    開発用Slack

    エラー通知


    View full-size slide

  72. エラー通知

    通知一覧

    74


    View full-size slide

  73. 気をつけた点

    Laravel5.6から

    ログ出力先をSlackに

    指定できるようになったので試した

    75


    View full-size slide

  74. config/logging.php

    .env

    アプリケーション構成(通知)

    76


    View full-size slide

  75. ユーザーSlack

    アプリケーション構成(通知)

    77

    バックエンド

    (PHP)

    フロントエンド

    (Vuetify)

    CRON

    各種通知

    定期的にAPI

    エンドポイントに

    アクセス


    View full-size slide

  76. 通知

    78

    リマインダー


    View full-size slide

  77. スクリプト

    トリガー

    アプリケーション構成(通知)

    79

    API


    https://nicocale.app/api/v1/reminders


    定期実行


    View full-size slide

  78. アプリケーション構成(通知)

    80

    問い合わせ

    フォーム

    開発用Slack

    問い合わせ通知


    View full-size slide

  79. お問い合わせフォーム

    アプリケーション構成(通知)

    81


    View full-size slide

  80. 問い合わせ

    通知

    82


    View full-size slide

  81. 気をつけた点

    Google フォームを使用した

    問い合わせフォーム自前で持ちたくなかった

    ラクしたかった…

    83


    View full-size slide

  82. スクリプト

    トリガー

    アプリケーション構成(通知)

    84

    問い合わせ時に

    発火


    View full-size slide

  83. 開発側

    85


    View full-size slide

  84. インフラ構成(デプロイ)

    86

    ※ デプロイにはDeployerを利用。

    バックエンド

    (PHP)

    フロントエンド

    (Vuetify)

    開発用Slack

    デプロイ通知

    デプロイ※

    Deployer

    Issue通知


    View full-size slide

  85. 気をつけた点

    Deployerを使って

    デプロイ後の諸作業

    (シンボリックリンク作成とか.envアップロードとかキャッシュのアレコレとか)

    をコード化した

    87

    Deployer


    View full-size slide

  86. デプロイ完了

    通知

    88


    View full-size slide

  87. Repository

    インフラ構成(CI)

    89

    開発用Slack

    結果通知

    Issue通知

    Push
 CIチェック
 OK
 マージ


    View full-size slide

  88. 気をつけた点

    デグレ起こさないよう、Pushするたびに

    CI側でユニットテストを実行

    する環境を整えた

    90


    View full-size slide

  89. 失敗時

    成功時

    CI実行結果

    91


    View full-size slide

  90. 通知

    92

    CI通知


    View full-size slide

  91. ハマったこと


    View full-size slide

  92. ハマったこと

    94


    View full-size slide

  93. ハマったこと

    Slackのアプリ審査

    通すの難しい・・・!

    95

    結局30回近くメールのやりとりしてなんとか公開までこぎつけました

    View full-size slide

  94. 今後の展望


    View full-size slide

  95. 今後の展望

    97


    View full-size slide

  96. 今後の展望

    などなど、今後も機能改修を

    進めていきたいと思っています!

    98


    View full-size slide

  97. 今後の展望

    ぜひ一度使っていただければ

    嬉しいです!

    99


    View full-size slide

  98. 今後の展望

    https://github.com/tosite0345/nicocale.php

    100


    View full-size slide

  99. 今後の展望

    皆さんのフィードバック

    お待ちしています😁

    101


    View full-size slide

  100. さいごに


    View full-size slide

  101. Thank you,
    we’re hiring!

    View full-size slide

  102. ご清聴ありがとう

    ございました


    View full-size slide