こんにちは、あらい＠料金プランチームです。最近自作キーボードに入門しました。この記事も左右に割れるカッコいいキーボード(※日本語配列) "JP60Split" で書いています。

この記事はChatwork Dev Day開催前の記事ラッシュのうちの1本です。Dev Dayは5日後の5/26に開催されます。

ツールを作りました

cwmh というWebアプリを作りました。これを使うとChatworkで自分へのメンションの履歴をいい感じで保存しておいて見返せるようになります。

cwmhはPHP+MySQLで構成されるOSSなWebアプリケーションです。~~デモサイトをherokuにデプロイしていますので、よければご利用ください。~~

2022-12-01 追記：デモサイトをシャットダウンしたためリンクを消しました。

注：これは新井個人が作ったツールであり、Chatwork社が公式にサポートするものではありません。

なぜ作ったか

複数の理由があります。

Chatworkに入社してもう4年目になりますが、実はまだ0からWebアプリを作ったことがありませんでした。PHPエンジニアを名乗るからには自分でWebアプリ作ってみたいです。ので、習作としたのが1つです。
普段は料金プランチームの一員としてChatworkの決済・課金・プラン周りの開発に従事していますが、たまには違う領域をやってみたい。ということで、これまで雰囲気しか知らなかったOAuth2認可フローのお勉強と実践の題材としました。
あとは単純に自分がほしい機能だったからです。

結果とても勉強になりましたし、自分のほしい機能ができたので良かったです。

こだわったポイント

Lumenを選んだこと

PHPのWebアプリフレームワークといえばLaravelは非常に有名です。PHPエンジニアとしてはキャッチアップしておきたい。しかし、最初からあんまりにもたくさんの概念・要素が入ってきて混乱→挫折する体験を過去にしていました。そこでLaravelベースのマイクロフレームワークであるLumenを使い、必要になった要素を1つずつ追加・有効にしていく方法を取りました。

最終的には、EloquentORMやセッションなど色んな機能を有効にしたので「最初からLaravelで良かったのでは」感があります。とはいえ学習過程としてはまあまあ良い選択肢でした。

セキュリティについて

このアプリはメンションをWebhookで受け取ることで動作しますが、当初はメッセージ内容をアプリ内に保存する予定でした。しかしメッセージは重要な機密情報です。ウッカリ保存したものが万が一にも流出するようなことは自分のプライドにかけて絶対に阻止したいです。そう考えると、メッセージを安全に保存することは趣味レベルプロジェクトとしてはいささか荷が重い。

そこで、Chatwork APIで履歴保存専用のチャットルームを作成し、そこにメッセージリンクを残す方式に切り替えました。これであればメッセージをアプリ内に保存する必要がなくなり、仮に何らかのインシデントが起きても情報漏洩するリスクが大幅に減りますし、使い勝手の点からもChatworkのプロダクト内からシームレスに履歴にアクセスできるようになって一石二鳥でした。

AGPLライセンス

OSSなWebアプリケーションは基本的に「誰でも改変・設置」することができます。ということは、悪意のある人がAPIトークンやメッセージを盗み見る目的でcmwhを設置したら……？　というケースが考えられるわけです。これは本質的に防ぐのが難しい問題ですが、とはいえ作者として何か利用者保護のための手を打てないかと思いました。

そこで私はcwmhのライセンスをAGPLv3にしました。

AGPLは雑にいうとソフトウェアの利用者にソースコードを公開する義務を課すライセンスで、ネットワーク経由の利用者にもこの制約が適用されるのが特徴です。つまり、もし悪意のある人がコードを改変して設置した場合には、設置と合わせて改変した部分を含むコードを公開しないといけないことになります。これが悪意のある改変・設置の抑止力になるのではという発想です。 *1

AGPLは強力なライセンスですが、cwmhはミドルウェアではなくアプリケーションなので、昨今のクラウドベンダーとOSSの関係におけるライセンスの諸問題とはちょっと事情が異なります。AGPLのこんな使い方アリでしょうか。

謝辞と参考情報

ここまでに書ききれなかったことを書きます。

Chatwork APIへのアクセスにはsun-asterisk/chatwork-phpを利用しました。Webhookの署名検証機能もあり大変便利でした。
OAuth2の勉強には主にこちらの資料を使いました。
1. 故都元ダイスケさんの「基礎からの OAuth 2.0」は全体の概略とシーケンス図が大変わかりやすかったです。これから勉強する人にまずおすすめしたい資料です。
2. 雰囲気でOAuth2.0を使っているエンジニアがOAuth2.0を整理して、手を動かしながら学べる本は名前の通りハンズオン形式で少しずつ理解を進めていけるのが良かったです。
Webhook受信エンドポイントを作ってデバッグするにはngrokが大変便利でした。SSLとサービス公開の面倒くささをまとめて解決してくれるサービスでした。
実は去年のCreator's Noteに同じメンション履歴を保存する仕組みを解説した記事がありました。こちらはノーコードで同じ仕組みを自作する方法についてハンズオン形式で書いています。こちらも合わせてご覧ください。
- 【ノーコード】通知用ルームに自分へのメンションをまとめてChatworkを使いこなそう！【Integromat】 - Chatwork Creator's Note

この場を借りてお礼申し上げます。ありがとうございました。

おわりに

Chatworkと連携するツールを作った話を書きました。

github.com

もしかすると「Chatworkの中の人なのだから、これが便利ならプロダクト自体に機能を実装したらいいんじゃないの？」と思われる方がいるかもしれません。ごもっともです。が、一方で過去「ほしいので実装する」の繰り返しが混乱を産み、その反省からProduct Managementの考え方がChatworkに導入された経緯があります。

Chatworkのように大勢の方に利用されるサービスでは、ユーザーのことを正しく知るのはとても難しいです。例えばチャットメッセージに対する操作では、私は「📎リンク」ボタンを多用するのですが、実際には「💬未読」（＝メッセージを未読に戻す）のボタンの方が約3倍近く多用されている事実がありました *2。これは自分の感覚が大多数のユーザーから乖離してることを示します。なので「自分がほしいものを作ればいい」という考え方は必ずしも正しくない。

しかし私はプロダクトの仕様検討すべてをProduct Manager任せにすることを潔しとしません。Chatwork社が大事にする価値観の1つにOwnership「自分ごとで行動する」があります。プロダクト自体を自分ごとで考えるからこそ「自分はこうしたい」「こうあってほしい」という理想は生まれるのです。今回作ったツールも作って終わり・使って終わりではなく、ツールで得られるユーザー体験の観点から社内にフィードバックしていきたいです。