Kazuki Kodama

株式会社シアン, キレイレポート事業部

Hiroto Morooka

株式会社カミナシ, 代表取締役

Ryo Setoguchi

フリーランス, データアナリティクスや業務自動化/効率化など

Takuya Hidaka

株式会社スパインラボ, 株式会社コドモン

Shin Ando

株式会社LOGICA, アプリケーションエンジニア

Shogo Kurita

インバウンド向け飲食店予約サービス

■プロジェクト概要
多言語対応をしているWebの申し込みフォームから予約リクエストを受け取り、予約管理チームが予約管理システムを使い日本の飲食店の予約の代行をするというサービスです。

■開発対象
・予約リクエストサイト（React.js, Redux）
・予約管理システム（React.js, Redux）
・API（Spring Framework）
・バッチ（Spring Framework）

■自身の役割
予約リクエストサイト、予約管理システムの両システムのフロントエンドのメインコーダーを担当しました。
プロジェクトの立ち上げから参画し、フロントエンドの技術選定を致しました。
仮想DOMの魅力からReactを選定し、Reactとの相性の良さからReduxを選定しました。

■課題
予約管理システムはデザイナーがつかなかったので、私がデザインを考えなくてはならなかったことが課題でした。
それまでアダプティブデザインでの開発経験しかなかったのですが、プロジェクト構成の簡易化のためにレスポンシブデザインに挑戦しました。
具体的には予約詳細画面で、PC画面では項目名と項目が横並びのものをPhone画面では縦並びにするようなデザインを作成しました。
また要件にはありませんでしたが、予約検索結果をテーブルで並べ、カーソルが乗った予約の色を動的に変えるデザイン、予約検索欄に入力した条件を一括でリセットできるボタンの設置、予約編集の際に望まない文字が入れられた際に動的にエラーを表示するバリデートなどを実装しユーザーファーストを意識したUIになるように工夫しました。

■成果
両システムともシングルページアプリケーションで構築したので、高パフォーマンスを実現することができました。
React.jsの特徴であるコンポーネントを意識してシステムを構築したことで、わかりやすいソースコードになり、既存のコンポーネントを呼び出してコーディングできるようにしたので、後続の開発の負担を軽減することができました。
UIはユーザーファーストを意識して開発したので、予約管理のスタッフからUIを変更して欲しいという要望は0件にすることができ、使いやすいと好評をいただくことができました。

インバウンド向け飲食店予約サービス

■プロジェクト概要
クライアントの店舗にアプリを導入してもらうことで、複数のQRコード決済を導入することができるサービスです。
アプリの中で決済をしたいサービスを選択することでそのサービスのQRコードで決済することができます。
決済情報はクライアント用管理システムで管理することができます。

■開発対象
・API（Spring Framework）
・バッチ(Spring Framework）
・Web申し込みページ（Spring Framework）
・内部用管理システム（Spring Framework）
・クライアント用管理システム（Ruby on Rails, Vue.js）

■自身の役割
2年目から10人ほどの開発チームのサブリーダーに就任しました。
サブリーダーの役割として、開発チームの工数管理、詳細設計、開発インプットを行いました。
2年目から後輩が二人チームに参画したので、教育担当として指導しました。

■課題
開発チームのメンバーが控えめな人が多く、進捗の遅れの報告がギリギリになることが多かったのが課題でした。
各メンバーとのコミュニケーションを増やし、こまめに進捗を確認するようにすることで、コミュニケーションを取りやすい空気を生み、こちらが進捗を気にしていることが伝わったので、メンバーの方から進捗を報告してくれるようになりました。

■成果
サイクルの早いプロジェクトで、開発スケジュールがタイトな場面がよくありましたが、工数管理を適切に行うことができたので顧客の要望に答えることができました。
システムを全てわかりやすいシンプルなUIを意識して構築していたので、クライアントからの評価も高く、QRコード決済導入として業界トップクラスのシェアを実現できました。

QRコード決済導入サービス

■プロジェクト概要
外国人向けホテルのホームページの開発です。
ホームページ内に予約システムがあり、部屋の予約をすることが可能です。
WordPressのダッシュボードから予約の管理をすることができます。

■開発対象
・ホームページ（WordPress）
・予約システムプラグイン（Vue.js)

■自身の役割
フリーランスとして参画し、要件定義からコーディング、テスト、リリースまでを担当しています。

■課題
クライアントとの認識のズレが起きやすいことが課題でした。
打ち合わせやメールなどのコミュニケーションを積極的に行うように意識し、認識のズレを早期に気づけるようにしました。

■成果
PCI DSS(クレジットカード業界のセキュリティ基準)の改定に伴い、予約システムでのクレジットカード情報の非保持化をしなくてはならなくなり、外部サービスでクレジットカード情報を保持できる機能を実装しました。
予約システムをプラグインとして開発することで、ホテルがチェーン展開する際にホームページ作成が容易になることを実現しました。

ホテルホームページ

■プロジェクト概要
格安SIMやひかり接続サービスの、申し込みや会員ページを持ったWebサイトのリニューアルをするプロジェクトです。
内容を大別すると以下になります。
・Strutsとresinという古い構成だったシステムをSpringとTomcatの構成に置き換える
・レガシーなデザインをモダンなデザインでリニューアルする
・静的コンテンツと動的コンテンツのリポジトリの分離

■開発対象
・静的コンテンツ（HTML, CSS）
・申し込み画面（Vue.js）
・会員ページ画面（Nuxt.js）
・API（Spring Framework）

■自身の役割
開発チームのリーダーのポジションでした。
営業やサポートなどの他部門との調整や、スケジュール管理、開発の方針決定などを主に行いました。
開発チームは10名ほどの規模のチームで、週毎に目標を決めて進捗を管理しました。
10人もいるので全員の状況を把握するのが難しかったですが、短時間のミーティングを毎日設定し、問題や遅延はなるべく早くキャッチアップできるようにしました。
慢性的に開発が人手不足だったので、開発のサポートにも入りました。

■課題
開発もテストも非常に大規模だったため、試験不具合が序盤からかなり大量に出る事態になりました。
試験チームが類似の不具合を大量に報告する傾向が見られ、無駄な試験と報告に時間を使ってしまうことが課題でした。
報告された不具合を開発チームでまず横展開で確認し、不具合の影響範囲を試験チームに連携し、その範囲は試験を後回しにするというルールを建てつけることでその課題を解決しました。

プログラム面でも課題がありました。
初期の実装が、Springで作るAPIが1つのURLで受け取り、パラメータで実行内容を分けるように実装されておりソースも使い方も煩雑になってしまっていたことと、Vue側のAPI呼び出しも各Vueファイル毎に書かれており、API連携部分が非常に煩雑になっていると感じました。
SpringはAPI毎にURLを分け、Vue側はAPI呼び出しの共通モジュールを作成することで、API連携の部分をわかりやすくすることができたと思います。

■成果
脆弱性のあったStrutsからSpringに移行できたことでセキュリティが向上できました。
resinからTomcatへ移行し、サーバーの設定も最適化したことで、サイトのパフォーマンスが向上できました。
サイトが UI/UX も考慮されたモダンなデザインなったので、ユーザビリティが向上しました。
静的コンテンツと動的コンテンツを別リポジトリに分離できたため、複雑だったブランチ管理が単純になり、作業ミスが無くなりました。

格安SIM Webサイト リニューアル

■プロジェクト概要
会社内の別のプロジェクトでセキュリティインシデントが発生してしまい、各システムで脆弱性の点検とセキュリティの強化を実施することになりました。
私のチームの担当しているWebサービスはかなり大きな規模なので、人員を確保してチームを作り、セキュリティ強化を実施しました。

■開発対象
・申し込み画面（Vue.js）
・会員ページ画面（Nuxt.js）
・API（Spring Framework）

■自身の役割
PLとしてジョインしました。
10名の開発チームをまとめていました。
セキュリティ強化の内容の策定と優先度付けや、スケジュールの策定、進捗管理、リリース計画などを行いました。

■課題
修正範囲が非常に膨大になったので、リリースを3回に分割して実施する計画を立てていました。
1回目のリリースの際に、不具合を複数混入させる結果となってしまいました。
その結果を重大に受け止め、2回目、3回目のリリース日を後ろ倒しに調整し、1回目で発生した不具合の観点でのチェックと、修正内容の再レビューを実施しました。
その結果、軽微な修正をいくつか行いました。
入念にチェックを実施したので、2回目、3回目のリリースでは不具合が発生することなく終えることができました。

■成果
以下の観点でのセキュリティ強化ができました。
・なりすまし（データ改竄）によるリクエストの検知とエラーハンドリング
・連携している他システムからの不正データの検知とエラーハンドリング
・連携している他システムへのデータ登録の正当性担保

格安SIM Webサイト セキュリティ強化

■プロジェクト概要
格安SIMやひかり接続サービスの、申し込みや会員ページを持ったWebサイトの機能拡張プロジェクトです。
以下の機能を拡張しました。
・SIMの通信網の交換申し込み機能
・配布したコードでeSIMを申し込む機能

■開発対象
・申し込み画面（Vue.js）
・会員ページ画面（Nuxt.js）
・API（Spring Framework）
・基盤システム（別のチームの開発領域）

■自身の役割
PLとしてジョインしました。
自分の所属するフロントの開発だけでなく、基盤システムの開発も合わせ、開発全体のマネジメントを行いました。
立ち上がりのフェーズでは企画やカスタマーサポートからヒアリングをして要件定義をしました。
その後、決まった要件から各開発チームと話しながら基本設計をして、各開発チームに開発の依頼を出しました。
開発・試験中はスケジュール管理と課題解決に取り組みました。
最後にリリースの調整をしてサービスインまで実施しました。

■課題
リリース日が先に決まっている状態でプロジェクトがスタートしたのですが、要件定義をした段階で無理のあるボリュームだということが発覚しました。
プロジェクトとして危機感の薄い状態がしばらく続いたので私がアラートを上げました。
その後、要件の中から落とせる部分の調整と、リリース日の可能な範囲での後ろ倒しを早い段階でできたことで、調整したリリース日でのリリースは実現することができました。

■成果
Webサイトの機能拡張が実現できたことで、既存顧客満足度の向上と、新規顧客獲得のプロモーションに取り組むことが可能になりました。
また、試験チームが今まで試験したことのない領域の試験が多かったので、今後の試験に生かせるナレッジを蓄積することができました。（本件のナレッジの蓄積を試験設計の時に目標として立てていました。）