自分の結婚式に写真投稿サイト作ってみた話。
私事ですが3月末に結婚式を挙げました。
入籍してから約1年後になってしまいましたが、皆様のおかげで何とか増税前に滑り込めました（笑）
節約のためもあり、招待状やらムービーやら会場の飾りやら、色んなものを2人で手作りしました。
で、まぁWEBエンジニアをさせて頂いてるので、折角だし、何かエンジニアぽいものも作ろうということで、ゲストに式中の写真を投稿してもらうサイトを作ってみた。というお話です。
概要
実際作ったものがこちら。
・写真投稿サイト
※投稿された写真はゲストの顔がいっぱい写っているので、人が写っていない当日の写真に置き換えています。
※投稿はDBに保存されないようにしてます。
・プロジェクターに表示する写真ビューワー
ゲストに式中の写真を投稿してもらい、それがそのまま会場のプロジェクターに写されるという内容です。
当初は写真コンテストみたいにして、上位の人に景品をあげる出し物？をやろうかと思って作っていたのですが、ゲストに順位をつけるのってビミョーという嫁の意見もあり、単純に写真＋一言コメントをプロジェクターに写して、ゲスト皆に見てもらえるオマケコンテンツになりました。
当日は47枚の写真を投稿して頂きました！
ゲストが全員で60人弱だったので、全員とまではいかないですが、同年代の友人にはけっこう使ってもらえたのかな？
当日投稿して頂いた方、ありがとうございました！
折角作るなら、ということで勉強せんとなぁと思ってた技術を色々試しに使って作ったので、使った技術、ツール、サービス等を以下にまとめてみました。
使用した技術・ツールなど
サーバサイド
FuelPHP
まずはフレームワーク。イケてるPHPerが使うフレームワークと聞いて選定。
PHP5.3〜対応、軽くてシンプルなのがウリです。
シンプルといいつつ、DB操作のクラスの機能は充実してて、SQLを意識しなくても簡単にデータの取得、保存などができました。便利！
今回のような単純な掲示板サイトを作るには充分すぎます。
メソッドチェーンを使った書き方とか、流行りな感じで書けます。
Heroku
PaaSです。非公式ではありますがPHPを動かせます。
無料でサービスを公開できます。
僕は有料にはなりますが、念のため結婚式当日だけメモリを512MBから1Gに変更しておきました！簡単にサーバのスペックを変更できるのはクラウドならではですね！
HerokuではGitでデプロイを行いますが、GitクライアントにはSourceTreeを利用しました。win & macに対応しており、無料です。
Amazon S3
Herokuはマルチテナントなので、再起動が定期的にかかり、その度にアップロードしたファイルは消えてしまいます。
アカウントを作って１年間は無料で使えます。今回はその期間内で利用したので0円！
フロントエンド
Sass + Compass
SassはCSSメタ言語の１つです。コンパイルしてcssファイルを生成でき、通常のcssには無い便利な機能が使えます。（変数、関数etc）
CompassはSassを更に便利に使うフレームワークです。
Compassを使うと、クロスブラウザ対応した角丸や透明度などが１行でかけてしまいます。
こんな感じで。
@import "compass";
p{
@include inline-block; @include box-shadow( 0,0,10px,#a82f34);
@include opacity(.5);
}
実装時はPreprosというGUI付きのコンパイラを使いました。
無料でwinもmacも対応しています。
ファイルを追加しておけば、自動的にコンパイルしてくれます。PCに直接sassやcompassを入れる必要も無く、オプションもGUI上で設定できるため、Sass導入の際に役に立ちます。
File APIとCanvasを使った投稿フォーム
今回の投稿サイトはスマホでの利用を想定しています。
スマホで撮影した2MB近い画像を、3G回線でアップロードするにはムリがあるので、HTML5のFile APIとCanvasを利用してクライアント側で画像のリサイズを行っていました。
改めて記事にしたいと思いますが、iOSで画像が潰れるバグや、jsでcanvasをbase64エンコードするときに ブラウザが落ちるといった不具合に遭遇し、なかなか一筋縄では行きませんでした。
やはりスマホのWebアプリってしんどい。
Unity
投稿画像をサーバから取得して、プロジェクターに投影するためのビューワーをUnityで作成しました。
GUI上で3D空間上の位置を調整できるので、さくっと3Dコンテンツが作れます。
無料版でもWin用、Mac用のネイティブアプリを書き出せるので、Mac用に書き出したものをMac Book Pro上で起動し、会場のプロジェクターに映しました。
解像度の設定画面があるので、プロジェクターに接続した際もトラブルなくできました。
もうすぐUnity5が出ますね！楽しみ！
テスト
BrowserStack
マルチブラウザのテストに使ったWebサービス。BrowserStackのサーバ上で動いているエミュレーターをブラウザ越しに操作できるというサービスです。
これでAndroidの端末の動作確認をやりました。
ただしあくまでもエミュレーター。実機でのテストが一番です。直前で自分のiPhone4実機でテストしてはじめて、前述のcanvasをbase64化する処理のところでブラウザが落ちてしまうという現象に気が付きました。
反省とまとめ
キモだったブラウザから写真投稿のところですが、HTML5で実装されている画像処理が汚く、さらにブラウザが落ちないギリギリまで画像サイズを落としているので、かなり画像が荒く、ジャギジャギになってしまいました。iPhoneからだとちょっと見るに耐えなかったかな。。。事前の検証が大事だと痛感しました。
とはいえゲストが悪ノリで写真を何枚も投稿してくれたり、とか少しでも楽しめて頂けたようでよかった！
プライベートの時間だけでこういうの作るとすごい時間がかかってしまいました。１日でなんか作って公開してる人とかほんと尊敬します。もっと早くホイホイっと作れるようになりたい。
さて人生の一大イベントも無事？終えることができました。これからも精進して参りますので、何卒よろしくお願いします（←固い）
