半日で「お絵かき水族館」アプリを作ったよ
土曜日に「お絵かき水族館」というのを知って感動したので、昨日の午前中にそれに似せたスマートデバイスアプリを作りました。
ちなみに「お絵かき水族館」はこちらの記事で知りました。
http://spotlight-media.jp/article/12079338295327316
「お絵かき水族館」は記事にも書いてありますが、
泳がせたい魚のテンプレートを選ぶ
↓
好きなように色を塗る
↓
スキャナで取り込む
↓
デジタル水族館（プロジェクタ？）に表示
という流れです。
大きな画面に自分が描いた魚が泳ぐとか、子供じゃなくてもテンション上がるんじゃないかな。
私は上がったw
今回アプリを作ったのはこれを気軽に親子で楽しんでもらえたらいいなと思ったのがきっかけです。
アプリの方はテンプレートは用意せず、好きなように描いたものをカメラで撮影するようにしました。
気軽に遊んでもらうにはそのほうが良いと思ったので。
動きのアニメーションは撮影後に選択するようになっています。
イカが魚のように動いたり、魚じゃないものも泳いだり。
いろいろと発想が広がるのではないかと思います。
アプリの流れは以下の通りです。
描いたイラストをカメラで撮影
↓
余分なところを削除
↓
動きのアニメーションを選択
↓
水槽に表示
実際に動かしてみたのが↓こちら。
Aquariume - YouTube
お聞き苦しいナレーションが入っていますが、そっと音声をオフにしてください。。。
今回制作にあたっては『Monaca』というモバイルアプリ開発プラットフォームを使いました。
http://monaca.mobi/ja/
初めて使ったけど、すごくわかりやすかったです。
半日でできたのはこれのおかげですね。
もっとかかると思ってたし。
この動画に対して少し反応をいただけたので、今後は公開に向けて作り込んでいこうかと思っています。
公開の前に「お絵かき水族館」を作ったチームラボさんに連絡した方がいいかな〜？
Ruby はじめました。
今更ながら Ruby をしっかりやってみようかと思いまして。
なにはなくとも環境構築から。
VirtualBox で開発環境を作ります。
最終的には以下のような構成になります。
CentOS 6.4
Apache 2.2.15
MySQL 5.5
Ruby 1.9.3
Ruby on Rails 3.2.16
Passenger 4.0.33
Ruby が 1.9.3 なのはあとあと使用するPaaSに合わせるためです。
CentOS6.4 の Vagrant box を使用します。
Vagrant Box は以下のサイトに一覧があるのでお好みのものを選んでください。
今回は『CentOS 6.4 x86_64 Minimal』を選びました。
これを使用して CentOS, Apache, MySQL を一気にインストールする Vagrantfile は以下になります。
gist8246522
正直まだ理解不足のためこれで良いのかわかりませんが、とりあえず自分好みの環境は作れました。
各種設定ファイルはあらかじめ用意したものをコピーしています。
ここから環境構築。
まずは Vagrant を立ち上げます。
$ vagrant up
少し時間がかかります。
Vagrant により VirtualBox が立ち上がったら SSH で接続します。
$ vagrant ssh
ここから root ユーザーに切り替えて作業を進めます。
root パスワードは【vagrant】です。
$ su - パスワード:
rbenv をインストール。
rbenv は Ruby のバージョン管理ツールです。
以前は rvm というのが主流だったそうな。
# git clone https://github.com/sstephenson/rbenv.git ~/.rbenv # echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile # echo 'eval "$(rbenv init -)"' >> ~/.bash_profile # exec $SHELL -l
続いて ruby-build もインストールします。
# git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
これで Ruby をインストールする準備ができました。
次に Ruby のインストールです。
rbenv でインストールできる Ruby のバージョンを確認します。
# rbenv install -l Available versions: 1.8.6-p383 1.8.6-p420 ・・・ ・・・
大量に出てくるので省略。
今回は冒頭でも書いた通り、1.9.3をインストールします。
ここも少し時間がかかります。
## Ruby インストール # rbenv install -v 1.9.3-p484 # rbenv rehash # rbenv global 1.9.3-p484 ## バージョン確認 # ruby -v ruby 1.9.3p484 (2013-11-22 revision 43786) [x86_64-linux]
Ruby のインストールが完了しました。
続いて Ruby on Rails をインストールします。
## RubyGem のアップデート # gem update --system # gem -v 2.2.0 # rbenv rehash ## Ruby on Rails 3系をインストール # gem install rails --no-ri --no-rdoc -v '~> 3.0' # rbenv rehash # rails -v Rails 3.2.16
ここまでやたらと『rbenv rehash』が出ていますが、これは環境の変更を適用させるためのものです。
変更があった場合には毎回必要になります。
ここで Ruby on Rails のアプリケーションを作成します。
# rails new /share/apps
/share はローカルと同期を取っているディレクトリになります。
その下に『apps』というアプリケーションを作成しました。
ローカルのディレクトリにもファイルやディレクトリが作成されます。
続いて Passenger をインストールします。
Passenger は Ruby を動かすための Apache モジュールです。
gem でインストールできます。
# gem install passenger --no-ri --no-rdoc -V # rbenv rehash
インストールが完了したら設定のコマンドを実行します
# passenger-install-apache2-module # rbenv rehash
画面に表示される通りに進めてください。
最後に環境に合わせた設定が表示されるので、Apache設定ファイルに記述します。
## Passenger の設定 # vi /etc/httpd/conf.d/passenger.conf ## バーチャルホスト設定 # vi /etc/httpd/conf.d/virtual.conf ## Apache 起動 # apachectl configtest Syntax OK # service httpd start Starting httpd: [ OK ]
ホームディレクトリは先ほど作成した Ruby on Rails アプリケーションのディレクトリを指定しました。
Vagrantfile で指定したIPアドレスにアクセスしてください。
Ruby on Rails アプリケーションのトップページが表示されます。
この段階では左上に表示されるはずのロゴ画像が表示されていません。
表示させるにはアセット（静的ファイル）をプリコンパイルする必要があります。
rake コマンドでプリコンパイル済みのアセットを作成します。
# cd /share/apps # rake assets:precompile rake aborted! Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes.
エラーが発生しました。
JavaScript を実行するための gem が足りないようです。
Gemfile に以下を追記してインストールします。
# vi Gemfile gem 'therubyracer' # bundle install
ふたたび rake 実行。
# rake assets:precompile /root/.rbenv/versions/1.9.3-p484/bin/ruby /root/.rbenv/versions/1.9.3-p484/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets
画像が表示されるようになりました。
以上で環境構築は完了です。
おかしなところ、こうしたほうがいいよ！というところがあればご指摘いただけるとうれしいです。
よろしくお願いします。m(_ _)m
