2014-05-29

自分の結婚式に写真投稿サイト作ってみた話。

私事ですが3月末に結婚式を挙げました。

入籍してから約1年後になってしまいましたが、皆様のおかげで何とか増税前に滑り込めました（笑）

節約のためもあり、招待状やらムービーやら会場の飾りやら、色んなものを2人で手作りしました。

で、まぁWEBエンジニアをさせて頂いてるので、折角だし、何かエンジニアぽいものも作ろうということで、ゲストに式中の写真を投稿してもらうサイトを作ってみた。というお話です。

概要

実際作ったものがこちら。

・写真投稿サイト

http://da20140329.herokuapp.com/snap

※投稿された写真はゲストの顔がいっぱい写っているので、人が写っていない当日の写真に置き換えています。

※投稿はDBに保存されないようにしてます。

・プロジェクターに表示する写真ビューワー

http://da20140329.herokuapp.com/viewer/wedding_snap.html

ゲストに式中の写真を投稿してもらい、それがそのまま会場のプロジェクターに写されるという内容です。

当初は写真コンテストみたいにして、上位の人に景品をあげる出し物？をやろうかと思って作っていたのですが、ゲストに順位をつけるのってビミョーという嫁の意見もあり、単純に写真＋一言コメントをプロジェクターに写して、ゲスト皆に見てもらえるオマケコンテンツになりました。

当日は47枚の写真を投稿して頂きました！

ゲストが全員で60人弱だったので、全員とまではいかないですが、同年代の友人にはけっこう使ってもらえたのかな？

当日投稿して頂いた方、ありがとうございました！

折角作るなら、ということで勉強せんとなぁと思ってた技術を色々試しに使って作ったので、使った技術、ツール、サービス等を以下にまとめてみました。

使用した技術・ツールなど

サーバサイド

FuelPHP

http://fuelphp.com/

まずはフレームワーク。イケてるPHPerが使うフレームワークと聞いて選定。

PHP5.3〜対応、軽くてシンプルなのがウリです。

シンプルといいつつ、DB操作のクラスの機能は充実してて、SQLを意識しなくても簡単にデータの取得、保存などができました。便利！

今回のような単純な掲示板サイトを作るには充分すぎます。

メソッドチェーンを使った書き方とか、流行りな感じで書けます。

Heroku

https://id.heroku.com/login

PaaSです。非公式ではありますがPHPを動かせます。

無料でサービスを公開できます。

僕は有料にはなりますが、念のため結婚式当日だけメモリを512MBから1Gに変更しておきました！簡単にサーバのスペックを変更できるのはクラウドならではですね！

HerokuではGitでデプロイを行いますが、GitクライアントにはSourceTreeを利用しました。win & macに対応しており、無料です。

Amazon S3

http://aws.amazon.com/jp/s3/?nc1=h_ls

Herokuはマルチテナントなので、再起動が定期的にかかり、その度にアップロードしたファイルは消えてしまいます。

そこで画像保存先として、Amazon S3を利用しました。クラウドストレージサービスです。APIを通してPHPから簡単にファイルの保存ができました。

アカウントを作って１年間は無料で使えます。今回はその期間内で利用したので0円！

フロントエンド

Sass + Compass

http://sass-lang.com/

http://compass-style.org/

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

http://japan.unity3d.com/

投稿画像をサーバから取得して、プロジェクターに投影するためのビューワーをUnityで作成しました。

GUI上で3D空間上の位置を調整できるので、さくっと3Dコンテンツが作れます。

無料版でもWin用、Mac用のネイティブアプリを書き出せるので、Mac用に書き出したものをMac Book Pro上で起動し、会場のプロジェクターに映しました。

解像度の設定画面があるので、プロジェクターに接続した際もトラブルなくできました。

もうすぐUnity5が出ますね！楽しみ！

テスト

BrowserStack

http://www.browserstack.com/

マルチブラウザのテストに使ったWebサービス。BrowserStackのサーバ上で動いているエミュレーターをブラウザ越しに操作できるというサービスです。

これでAndroidの端末の動作確認をやりました。

ただしあくまでもエミュレーター。実機でのテストが一番です。直前で自分のiPhone4実機でテストしてはじめて、前述のcanvasをbase64化する処理のところでブラウザが落ちてしまうという現象に気が付きました。

反省とまとめ

キモだったブラウザから写真投稿のところですが、HTML5で実装されている画像処理が汚く、さらにブラウザが落ちないギリギリまで画像サイズを落としているので、かなり画像が荒く、ジャギジャギになってしまいました。iPhoneからだとちょっと見るに耐えなかったかな。。。事前の検証が大事だと痛感しました。

とはいえゲストが悪ノリで写真を何枚も投稿してくれたり、とか少しでも楽しめて頂けたようでよかった！

プライベートの時間だけでこういうの作るとすごい時間がかかってしまいました。１日でなんか作って公開してる人とかほんと尊敬します。もっと早くホイホイっと作れるようになりたい。

さて人生の一大イベントも無事？終えることができました。これからも精進して参りますので、何卒よろしくお願いします（←固い）

2014-05-28

vagrant1.5でrubyのエラー

今年のGWは、タイトルの通りの現象に悩まされて過ぎ去りました。しかも記事を公開し忘れて５月もはや終わり。。。

vagrant＋chefで環境構築するのがオサレだときいたので試してみていたのですが、 vagrant initコマンドでエラー。超序盤で躓きました。エラーはこんなの。

$ vagrant init
/Applications/Vagrant/embedded/gems/gems/vagrant-1.5.4/lib/vagrant/util/platform.rb:124:in `downcase': invalid byte sequence in Windows-31J (ArgumentError)
    from /Applications/Vagrant/embedded/gems/gems/vagrant-1.5.4/lib/vagrant/util/platform.rb:124:in `block (2 levels) in fs_real_path'
    from /Applications/Vagrant/embedded/gems/gems/vagrant-1.5.4/lib/vagrant/util/platform.rb:123:in `each'
    from /Applications/Vagrant/embedded/gems/gems/vagrant-1.5.4/lib/vagrant/util/platform.rb:123:in `block in fs_real_path'
    from /Applications/Vagrant/embedded/gems/gems/vagrant-1.5.4/lib/vagrant/util/platform.rb:122:in `each'
    from /Applications/Vagrant/embedded/gems/gems/vagrant-1.5.4/lib/vagrant/util/platform.rb:122:in `fs_real_path'
    from /Applications/Vagrant/embedded/gems/gems/vagrant-1.5.4/lib/vagrant/environment.rb:119:in `initialize'
    from /Applications/Vagrant/bin/../embedded/gems/gems/vagrant-1.5.4/bin/vagrant:155:in `new'
    from /Applications/Vagrant/bin/../embedded/gems/gems/vagrant-1.5.4/bin/vagrant:155:in `'

macに入れてるrubyのバージョンが悪いんだと踏んで、rbenvで色んなバージョンのrubyを入れてみましたが、結局エラーは消えず。。。 vagrantのバージョンを古い1.3.5にしてみると動きましたが、1.5以上じゃないと、berkshelfというchefを便利に使うツールが対応していない！

結局問題のplatform.rbにデバッグコードを入れて、原因を探ってみると、カレントディレクトリのパスを取得するところでルートにマルチバイトのディレクトリ名があったのが原因でした

$ ls /
Applications
CoreSyncInstall.log
Developer
Library
Network
System
Users
Volumes
bin
cores
dev
etc
home
mach_kernel
net
nullnull
opt
private
sbin
tmp
usr
var
繝ｦ繝ｼ繧ｵ繧吶?繧ｹ繧吶き繧吶う繝医ｙ縺ｨ諠??ｱ 【コイツ！！】

実際は/Library/Documentation/User Guides and Information.localizedへのショートカットでした。 Finderで見ると「ユーザーズガイドと情報」。こんなもん置いた覚えないんだけど、 mac買ったときからずっとあったのか？？

とりあえず、このディレクトリを移動させると無事動きました。僕のGW返せ！

2014-05-01

動画作成サービス"Animoto"の使い方

iOSアプリ映像レビュー

前回の記事で紹介した、写真や動画を選ぶだけで超簡単にハイクオリティなムービーを自動で作ってくれるサービス、Animoto！

今回はiPhoneアプリからムービーを作成した際のレビューです。

まず起動画面。

ログインせずに作ることもできます。

無料アカウントの場合は制限があります。

ログインにはFacebookのアカウントが使えます。

ログインすると今まで自分が作ったムービーの一覧画面が表示されます。

右上の「CREATE VIDEO」を押して早速作ってみましょう。

カメラロールの写真が表示されるので、ムービーに使用する写真をどんどん選んで行きます。

選び終わったら、ムービーのテンプレートとBGMを選択！

テンプレートごとにサンプルを見ることができます。

BGMに使える曲もかなりたくさんのものがありました。

カテゴリ分けされているので、選びやすいです。

CDジャケット部分をタップすると試聴できます。

ムービーのタイトルを入力すれば完成！！たったこれだけ！

ムービーのレンダリングが始まります。

できたら登録したメールアドレスに完成の通知メールがきます。

だいたい2〜3分あれば出来上がります。

出来上がりのムービーはこちら！

ただの親バカムービーですが、良かったらご覧ください笑

KUPPY THE MOVIE

2014-04-20

動画作成サービス"Animoto"で自分の結婚式用のムービーを作ってみた

iOSアプリ結婚式映像レビュー

私事ですが、実は先日結婚式を挙げました。節約のためもあり、色々と手作りでやったので、がんばって準備したなぁというのが一番の思い出なのですが(笑)

今日はその中でもムービーについての話です。

結婚式にムービーは必須

どうやら最近の結婚式にはムービーがいっぱい必要なようで、僕の結婚式でも、

オープニングムービー（披露宴開始前）
プロフィールムービー（お色直し中）
エンドロール（退場後）

の３本用意しました。

当初は全部手作りで用意するつもりだったのですが、他の印刷物などの準備で全然手が回らず。。。オープニングムービーだけは一応撮影〜編集を自分たちでやったのですが、プロフィールムービーは外注、そしてエンドロールは今回のAnimotoで作成したムービーを背景にして、上に文字だけ自分で入れました。

Animotoとは

http://animoto.com/

写真や動画を選ぶだけで、超簡単にハイクオリティなムービーを自動で作ってくれるサービスです。類似のサービスにはMagistがあります。

どちらも、PCのWEBブラウザ or スマホアプリから写真を選んでアップするだけで、動画を作る事ができます。動画は用意されたテンプレートの中に写真や動画をはめ込んだものが自動生成されます。僕はAnimotoの方のテンプレートが気に入ったので、Animotoを使って作りました。

仕上がりはこんな感じ

つい３日前くらいに結婚式当日にカメラマンさんに撮って頂いた写真が届いたので、ダイジェストムービーを作ってみました。 BGMも好きな曲をアップロードして使うことができます。

Wedding Memories

料金体系

１ヶ月約4000円で何本でも作れます。 HD画質の素材が欲しかったので、１ヶ月だけ有料アカウントにアップグレードしました。外注したムービーが23000円だったので、破格ですね！今回僕が外注した制作会社は、音楽と映像の尺をピッタリ合わせてくれたり、いい感じにテキストを挿入してくれるところはいいのですが、結局ムービー自体はテンプレートに写真を入れ込むだけなので、クオリティは正直あまり変わらないんじゃないかと思いました。これは、映像制作会社も商売あがったりですね。

f:id:sp_ice:20140420104319p:plain