HTML5 Japan Cupに「PetTime」というWebサービスを応募しました
HTML5 Japan Cupに応募したので、一応ブログにも書いとこう。
【PetTime -ぺっとたいむ-】
・サイトURL
・応募ページ
https://5jcup.org/works/53b169256bb223aa5c00142e
（※以下、上記ページのコピペです）
ブラウザから自宅のペットとビデオチャットできるWebサービスです。
インストール不要、ブラウザのみで使用できます。
使い方はログインし、自宅のPCと外出先のPCでそれぞれ通話ページを開くだけ！
自動的に自宅とビデオチャットが始まります。
また、自宅のペットから飼い主のあなたに発信することができます。
ペットが「ワン」と吠えると、あなたのTwitterアカウントにDMが届きます。 （PCのマイクで一定以上の音を拾った場合に通知されます。）
DMに記載されているリンクをクリックすることで、ビデオチャットが開始されます。
使用技術
- WebRTC（ビデオチャット）
- Skyway（WebRTCを簡単に使用するAPI）
- Web Audio API（ペットの声で発信）
- FuelPHP（サーバサイド）
- Heroku（公開サーバ）
- Opauth（Twitter認証に使用したライブラリ）
感想
今回使用したWebRTCは、現状はChrome(iOSを除く)およびFirefoxのみ対応してます。
スマホから見たいよ！ってのがすごくあるんだけど、iPhoneからはまだムリ。。。
appleさんお願いします！
そして、こんな簡易なサービスを作るのにもまだまだ時間がかかりすぎる。
特に今回は、SkywayとかTwitterとか特定のドメインじゃないと動かないやつの実装をするのに、いちいちgitでpushして、Heroku上で確認とかやってしまったので、超非効率でした。どうするのが正解だったんだろう。
もっとサクサク作れるようになりたい。
HerokuがPHPに正式対応したのでFuelPHP動かしてみた
これまでHerokuでPHPの設定をいじるにはbuildpackという仕組みを使っていましたが、必要なくなりました。
操作手順を一通りメモ。
環境構築手順
1.fuelphpのプロジェクト作成
oil create [プロジェクト名]
2.gitで管理するために
不要なものを削除
rm -rf .git .gitmodules *.md docs fuel/core fuel/packages
削除したコアファイルをサブモジュールとして追加
git submodule add git://github.com/fuel/core.git fuel/core
git submodule add git://github.com/fuel/oil.git fuel/packages/oil
git submodule add git://github.com/fuel/auth.git fuel/packages/auth
git submodule add git://github.com/fuel/parser.git fuel/packages/parser
git submodule add git://github.com/fuel/orm.git fuel/packages/orm
git submodule add git://github.com/fuel/email.git fuel/packages/email
3. .gitignoreを編集
/composer.lockの行を削除
これをしないとherokuにpushしたときに、次のエラーが出てしまいます。
Your composer.json specifies dependencies, but no composer.lock was found, please check it into your repository along with composer.json!
4.Procfileの作成
ルートにファイル名Procfileを作成。apacheかNginXかと、Document Rootが指定できます。
web: vendor/bin/heroku-php-apache2 public/
参考：https://devcenter.heroku.com/articles/custom-php-settings#setting-the-document-root
5.composer.json
ルートにこのファイルがあれば、herokuがPHPを使用すると判断します。
mbstringなどの拡張もここで指定できます。
FuelPHPのプロジェクトには最初からルートにcomposer.jsonが配置されているので、そのまま使用します。
ここでハマってしまったのですが、push時にはエラーにならないのですが、webからアクセスをするとApplication Errorで何も表示されませんでした。
heroku logsでログを確認するとbash: vendor/bin/heroku-php-apache2: No such file or directoryとエラーが出ており、herokuのプロセス自体が起動していませんでした。
Procfileを使用する場合はそのままでは動かずcomposer.jsonを書き換える必要がありました。
公式のドキュメントをよく読むとvendor/binのパスはheroku側でComposerにて設定されているそうで、composer.jsonにconfigの項があると、これが上書きされてしまうみたいです。（Symfonyとかも同じ現象になるみたい）
下記のbin-dirの設定を追記することで解決！
"config": {
"bin-dir": "vendor/bin",
"vendor-dir": "fuel/vendor"
},
参考：https://devcenter.heroku.com/articles/php-support
6.herokuにcommit & push
heroku openでfuelPHPのスタートページが表示されれば完了！
まとめ
今回は超時間がかかってしまいましたが、次回からはさくっとfuelPHPの環境が構築できそうです。
参考サイト
http://kayakuguri.github.io/blog/2014/06/11/heroku-php/
http://qiita.com/L_e_k_o/items/956bd92645769dece5e7
関連する記事
ビジュアルコーディング練習日記001〜ランダムに線を引く〜
fladdictさんのブログを読んで触発されたので、今さらながらprocessingを触ってみてます。
頭に思い描いた動きを、すぐにコードにできるようになりたい。
とりあえず、以前購入していたProcessingでアートしよう！な本が家に転がりっぱなしだったので、これをやってみます。
体系的にアートの勉強。いいじゃないですか。
ジェネラティブ・アート -Processingによる実践ガイド
- 作者: Matt Pearson,久保田晃弘,沖啓介
- 出版社/メーカー: ビー・エヌ・エヌ新社
- 発売日: 2012/12/21
- メディア: 単行本（ソフトカバー）
- クリック: 9回
- この商品を含むブログ (7件) を見る
まず、ランダム性を操る術を身につける。
世の中には完全にランダムなものはほとんど無いそうです。
ランダムの中に垣間見える法則、数学って美しい。
まずは完全なランダム
ランダムな数を加算
パーリンノイズを使用
サインの3乗＋パーリンノイズ
乱数の5乗
単純に線を引くだけでも、奥が深い。
毎日短時間でも練習を続けたいと思います。
自分の結婚式に写真投稿サイト作ってみた話。
私事ですが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からだとちょっと見るに耐えなかったかな。。。事前の検証が大事だと痛感しました。
とはいえゲストが悪ノリで写真を何枚も投稿してくれたり、とか少しでも楽しめて頂けたようでよかった！
プライベートの時間だけでこういうの作るとすごい時間がかかってしまいました。１日でなんか作って公開してる人とかほんと尊敬します。もっと早くホイホイっと作れるようになりたい。
さて人生の一大イベントも無事？終えることができました。これからも精進して参りますので、何卒よろしくお願いします（←固い）
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返せ！
動画作成サービス"Animoto"の使い方
前回の記事で紹介した、写真や動画を選ぶだけで超簡単にハイクオリティなムービーを自動で作ってくれるサービス、Animoto！
今回はiPhoneアプリからムービーを作成した際のレビューです。
まず起動画面。
ログインせずに作ることもできます。
無料アカウントの場合は制限があります。
ログインにはFacebookのアカウントが使えます。
ログインすると今まで自分が作ったムービーの一覧画面が表示されます。
右上の「CREATE VIDEO」を押して早速作ってみましょう。
カメラロールの写真が表示されるので、ムービーに使用する写真をどんどん選んで行きます。
選び終わったら、ムービーのテンプレートとBGMを選択！
テンプレートごとにサンプルを見ることができます。
BGMに使える曲もかなりたくさんのものがありました。
カテゴリ分けされているので、選びやすいです。
CDジャケット部分をタップすると試聴できます。
ムービーのタイトルを入力すれば完成！！たったこれだけ！
ムービーのレンダリングが始まります。
できたら登録したメールアドレスに完成の通知メールがきます。
だいたい2〜3分あれば出来上がります。
出来上がりのムービーはこちら！
ただの親バカムービーですが、良かったらご覧ください笑
動画作成サービス"Animoto"で自分の結婚式用のムービーを作ってみた
私事ですが、実は先日結婚式を挙げました。 節約のためもあり、色々と手作りでやったので、がんばって準備したなぁというのが一番の思い出なのですが(笑)
今日はその中でもムービーについての話です。
結婚式にムービーは必須
どうやら最近の結婚式にはムービーがいっぱい必要なようで、 僕の結婚式でも、
- オープニングムービー（披露宴開始前）
- プロフィールムービー（お色直し中）
- エンドロール（退場後）
の３本用意しました。
当初は全部手作りで用意するつもりだったのですが、 他の印刷物などの準備で全然手が回らず。。。 オープニングムービーだけは一応撮影〜編集を自分たちでやったのですが、 プロフィールムービーは外注、そしてエンドロールは今回のAnimotoで作成したムービーを背景にして、上に文字だけ自分で入れました。
Animotoとは
写真や動画を選ぶだけで、超簡単にハイクオリティなムービーを自動で作ってくれるサービスです。 類似のサービスにはMagistがあります。
どちらも、PCのWEBブラウザ or スマホアプリから写真を選んでアップするだけで、動画を作る事ができます。 動画は用意されたテンプレートの中に写真や動画をはめ込んだものが自動生成されます。 僕はAnimotoの方のテンプレートが気に入ったので、Animotoを使って作りました。
仕上がりはこんな感じ
つい３日前くらいに結婚式当日にカメラマンさんに撮って頂いた写真が届いたので、ダイジェストムービーを作ってみました。 BGMも好きな曲をアップロードして使うことができます。
料金体系
１ヶ月約4000円で何本でも作れます。 HD画質の素材が欲しかったので、１ヶ月だけ有料アカウントにアップグレードしました。 外注したムービーが23000円だったので、破格ですね！ 今回僕が外注した制作会社は、音楽と映像の尺をピッタリ合わせてくれたり、いい感じにテキストを挿入してくれるところはいいのですが、結局ムービー自体はテンプレートに写真を入れ込むだけなので、クオリティは正直あまり変わらないんじゃないかと思いました。 これは、映像制作会社も商売あがったりですね。
まとめ
結婚式や出し物、ちょっとしたムービー制作はこれで十分です！ 日常の写真をちょっとしたムービーにして残すような用途にも使えそうです。 今回のように、背景動画素材として使うのもアリ！ この価格で、このクオリティの動画がすぐに作れるなんて革命ですね！
