これまで弊社では、短中期のタスクはTodoist、中長期の案件管理はJootoと、2つのツールを使い分けていました。Todoistはサクッと書けて便利、Jootoはガントチャートで全体を見渡せて便利——それぞれ良いところはあるのですが、使い分けているうちに「あのタスク、どっちに書いたんだっけ」となる場面が増えてきました。ツールが2つに分かれている分、それぞれの弱点も別々に抱えることになります。
だったら両方のいいとこ取りで、Web制作会社であるHONOKAの業務フローに合わせたツールを自分たちで作ってしまおう。そう思って作ったのが「HONOKA Tasks」という社内ツールです。今回はその開発の裏側を書いておきます。
既存ツールで感じていた課題
TodoistとJootoに限らず、市販のツールやExcelのチェックシートを組み合わせて使う中で、いくつか共通の不満がありました。
- 案件とタスクがうまく紐づかない（汎用ツールはWeb制作特有の「案件ごとのチェックリスト」に合わない）
- Excelで作ったチェックリストを都度メールで共有する手間
- 誰がどの案件をどこまで進めているか、パッと見て分からない
- 連絡はチャットワーク、管理はExcel、と情報があちこちに分散している
解決したかったのは、案件の進行状況をカンバンで一覧できて、案件ごとの残タスクはチェックリスト形式で管理できて、担当者への通知も自動化される、社内メンバーだけのシンプルなツールでした。
あえて自社開発を選んだ理由
AsanaやNotionのような優れたツールがある中で、あえて自分たちで作ることにしたのには理由があります。
業務フローにぴったり合わせたかった。
既存ツールは汎用的すぎて、「残タスクチェックリスト」や案件ごとのクライアント管理のような、Web制作会社特有の使い方がしっくりきませんでした。
長期的なコスト。
メンバー数が増えたときのSaaSの月額を考えると、一度作ってしまえばサーバー代だけで済む自社開発の方が長い目で見て合理的だと判断しました。
データを自社で持ちたかった。
案件情報やクライアント情報を外部サービスに預けることへの抵抗感もありました。
技術スタックもシンプルに保っています。エックスサーバーで動かす前提でPHP＋MySQL、フレームワークは使わずVanilla JS。ReactやVueを使わなかったのは、AIと一緒にコードを生成・修正していくときに、フレームワークの複雑さがかえってノイズになると判断したからです。LaravelやSymfonyも、社内ツールの規模にはオーバースペックだと考えて見送りました。
AIとの役割分担
このツールはゼロからAIと一緒に作りました。使い分けはこんな感じです。
- Claude：仕様の壁打ち、設計の相談、仕様書の作成、バグの原因調査
- Cursor：コードの実装、既存コードへの機能追加
- Claude Code：細かい修正、バグフィックス、新機能の実装
セッションをまたいでも文脈を引き継げるよう、`SPEC.md`を常に最新に保つルールにしていて、実装するたびに更新し、次のセッションの最初にそれを渡す、というサイクルを回しています。「前回何を作ったか」を毎回説明する手間がなくなり、かなりスムーズになりました。
最初から完成イメージがあったわけではなく、「タスク管理ツールがほしい」という漠然とした要望から、壁打ちを通して少しずつ仕様を固めていきました。「工数記録も必要か？」→「今の規模では不要」、「時間指定リマインダーは？」→「Cronの仕組み上、今は後回し」、「メール返信でコメントできる機能は？」→「エックスサーバーの制約と運用リスクを考えると今は不要」。AIとの対話で「やること・やらないこと」を整理できたのが大きかったです。
ハマったこと
きれいに進んだ部分だけでなく、実際にハマった話も書いておきます。同じ構成で作る人の参考になれば。
エックスサーバーのPHPバージョン違い
WebはPHP 8.2で動いているのに、SSH（CLI）側はPHP 8.0のままでした。気づかずComposerでライブラリをインストールしようとして、`google/apiclient`がPHP 8.1以上を要求するため何度もエラー。`/opt/php-8.2.28-2/bin/php composer.phar`とフルパスを指定することで解決しました。エックスサーバーでComposerを使うときは、PHPのバージョンを明示するのが鉄則だと学びました。
Google Calendar APIの404が消えない
OAuthトークンは取得できているのに、カレンダーへのイベント登録が404エラーになり続けました。原因はAPI自体が有効化されていなかったこと。認証（OAuth）とAPI有効化は別の設定だというのを、身をもって理解しました。
さらに特定のグループカレンダーへの書き込みでも404が出続け、CLIから直接叩くとうまくいくのにWeb経由だとダメという謎の状況に。最終的には`primary`（メインカレンダー）に書き込む方針に切り替えて解決しました。
サーバー移行期のSSH取り違え
旧サーバーと新サーバーが混在していた移行期に、間違ったサーバーにComposerをインストールしてしまい、「vendorフォルダがない」というエラーで少し原因究明に時間がかかりました。複数サーバーを扱うときはSSH接続先をこまめに確認する、これも教訓です。
template literalの中に`</script>`が混入
PHPファイルの中にJSを書いていたため、template literal（バッククォート）の中に`</script>`という文字列が含まれると、HTMLパーサーが誤動作するバグに遭遇しました。コメントの描画をtemplate literalではなくDOM操作で書き直すことで解決しています。
メール本文の文字化け
日本語のメール本文が「確認▽る」のように化ける問題がありました。原因はメールサーバーが長い行を折り返す際、マルチバイト文字の途中でぶつ切りにしていたこと。`Content-Transfer-Encoding: base64`を指定して本文をbase64エンコードすることで解決しました。
ダウンロードファイル名が「download.xlsx」になる
Excelファイルをダウンロードしても中身に関わらず「download.xlsx」という名前になってしまう問題。`Content-Disposition`ヘッダーをRFC 6266準拠に修正し、JS側のダウンロード方式も`download`属性からfetch＋Blob URL方式に変更して解決しました。
実装した機能
カンバン＋ガント＋ToDoの3ビュー。
案件管理にはカンバン、スケジュール把握にはガント、個人タスクにはToDoサイドバー、と用途によって切り替えられる構成にしました。
ユーザーカラーによる担当者識別。
各ユーザーに色を設定し、カンバンカードの左枠線やアバター、ToDoのチェックボックスに反映。誰が担当しているか、色でパッと分かるようにしています。
残タスクチェックリスト。
「公開前にfaviconを設定したか」「CF7の送信先を確認したか」といった定型チェック項目を、案件ごとの「グループ→タスク項目」の2階層で管理できるようにしました。テンプレート機能で、よく使うチェックリストを一括適用できます。担当者は社内ユーザーだけでなく、外部の協力会社さん向けに自由入力欄も用意しました。
メール通知の設計。
担当割り当てやコメント・メンションは即時通知、期限3日前・前日・当日・超過は毎朝9時のCronで定期通知、と2種類に分けています。メールのリンクから該当のモーダルが直接開くディープリンクも実装し、「メールを見る→アプリを開く→該当タスクを探す」の手間を省きました。
定期ToDo機能。
「毎月最初の平日に請求書送付」「毎週月曜に週次報告」のような定型タスクを自動生成します。「毎月最初の平日」の判定は単純なCron設定では表現できないため、PHPスクリプト側で今日が条件に合う日かを判定する方式にしています。
「やらないこと」も決めた
時間指定リマインダーはCronの頻度を上げる必要があり現状の期限通知で十分、メール返信でのコメントはエックスサーバーの制約と運用リスクを考えると費用対効果が合わない、工数記録は今の規模では不要、Slack通知はメール通知で十分カバーできている——機能を詰め込みすぎず、シンプルに保つことを意識しました。
最初はPC専用で作り始めましたが、「現場で確認したい」というニーズに応えて、後からボトムナビやハンバーガーメニュー、全画面モーダルなどスマホ対応も追加しています。
振り返って
AIと一緒に作ったことで、仕様を言語化する力が上がったと感じています。「この機能は必要か？」を壁打ちすることで判断も速くなりました。PHPやJSを自分で書かなくても、仕様を伝えることでシステムが完成する、というのは数年前には考えられなかったことです。
自社開発は初期の開発時間がかかりますし、バグ対応や保守も自分たちでやる必要があります。正直、AIなしでは難しかったと思います。逆に言えば、AIがあれば非エンジニアでも社内ツールを自分で作れる時代になった、ということでもあります。
今後は案件・タスク横断の検索機能や、進捗率の自動計算あたりを追加していく予定です。
