development
development

大手飲食店様 – 企画イベント用WEBサービス開発

Javascript Canvasを利用した画像加工処理のスクラッチ開発

 

イベントの企画は通ったものの、目標リリースまでの期間がタイトで・・
というお客様よりご相談をいただきました。

 

ご依頼をいただいた時点では、システム設計もまだ済んでいないということで、約1ヶ月という短期間の中でシステム設計面や要件の実現方法などを含め、まずはご提案からという形でスタートさせていただきました。

 

主な要求
1. 特定のスポットのみで利用できるようにしたい
2. 期間限定イベントのため、アクセス集中が見込まれるので極力サーバ負荷を軽減したい
3. サービス利用者が撮影した写真とおしゃれなアイテムを自由にアレンジして加工できるようにしたい

 

1. 特定のスポットのみで利用できるようにしたい
要望にあった機能をすべて満たしたいという方針もあり、アプリケーション側で制御するには工数が足りませんでした。
そこで、過去の実績を参考にお客様のインフラ担当者様との打合せを重ね、インフラ側のみで制御いただくよう内容のご提案と相談をさせていただき実現いたしました。

 

2. 期間限定イベントのため、アクセス集中が見込まれるので極力サーバ負荷を軽減したい
今回のイベントでは、個人情報や登録内容を管理する必要はなかったため、データベースは利用しませんでした。
代わりに、静的なHTMLを生成することにより、コンテンツを管理する方針となりました。

サーバ負荷のネックになり得た画像加工処理は、Canvasを利用して実装することで軽減を行いました。
必要なリソース群は極力CDNサービスを利用しており、今回は Amazon Web Services(AWS)の Amazon S3 と Amazon CloudFront の組合せにより開発させていただきました。

 

3. サービス利用者が撮影した写真とおしゃれなアイテムを自由にアレンジして加工できるようにしたい
メインとなる画像加工処理では、仕様面で細かい要求があったため外部ライブラリを利用せずスクラッチで開発しました。

 

その他、特定のスポットに移動して集客を募ることが目的のため、利用者をスマートフォンに限定することやコンテンツ公開期間の制御などを実施いたしました。