プリキュアの支援ツール作ることで学んだIT

こんにちはぱちおです。

4月末にプリキュアのためのプリキュアによるプリキュア版生放送ツールを作りました

patioglass.hatenablog.com

備忘録

そのときに使った技術関連の備忘録です。チラ裏

大まかに

Nginx
unicorn
Rails
websocket-rails
TwitterStream
canvasを利用したアニメーション

Railsの全コードはGithubにあります（無我夢中で書いたやつだからもちのろんで汚いので誰か怒って）

GitHub - patioglass/precure_watch: #precureのツイートを生放送風に流し、ローカルコメントができるプリキュア実況サービス

前座話（飛ばしてもいい）

なんで作ったのか

前記事の付け加えみたいな（前記事が雑すぎる）

まず、実際「プリキュアの盛り上がり」ってフォロワー内の人がハッシュタグで呟くかRTするかくらいでしか確認したことがなかったんですね

（わざわざハッシュタグ追うのもなんかアレ）

ついでに個人的Twitterの使い方としてハッシュタグでTLを荒らすのに少し抵抗がある人間なんです

プリキュア専用垢とかならいいんですけどね！そんなわけないので

みんな面白いからみて

なーんて言ってもみんな「面白そうだけどなぁ」「プリキュアねーw」「正直どれから見ていいか」

""今みろ！！今！！""

やっぱ女児アニメとして確立いるせいで意見を共有する窓口だったり、どこにプッシュすればいいかわからないところもあったり・・・

たしかに、突然知り合いが「ぷいきゅあ〜〜」って言い始めたら嫌ですよね。僕は好きです

まぁこんな苦悩してるのも前作「Go!プリンセスプリキュア」が最高and最高ほどの名作だったにも関わらず、私の周囲の人間はみてくれなくて悲しかったってところなんですよね

良すぎてBDぽちったくらいですまじ

ぁぁああ人生で初めて映画以外のBD買ってしまったぁああお金があああでもこれすごい幸せだ(真顔) pic.twitter.com/QfsbG5d2wc
— ぱちお (@patioglass) 2016年4月22日

そんな時なんとなくニコニコがプリパラを配信してるのをみてたら、コメントが楽しそうなんですねほんと

「プリキュアもしろ💢」

・・・プリキュアもすればいいんだ！（天才のソレ）

ていう流れで今回の「プリティーウォッチ」が作られました✌️

ここから備忘録（遅い）

まず、どういった形ですべきか

PC,スマートフォンからでも楽しみたい
映像を流すとまずい
実況の大元はハッシュタグ

あぁこれはWebですわ

で、せっかくなんで色々新しいことに挑戦したいので、今までずっと避けていたVPSを借りて一から作ってみようということで

「Nginx+unicorn+Rails」

これでけってーい！

f:id:patioglass:20160502094545j:plain

まずはどのVPSかっていうことで今回は「 ConoHa - GMOの高性能オールSSDクラウド」を利用しました

サーバーはデフォルトの最小のやつでぽちぽちとサーバー追加していけばいいですね。めっちゃ楽だった

f:id:patioglass:20160502100101p:plain

次にわざわざコンソール開いてそこで作業・・・が嫌なのでSSHの設定をします

qiita.com

まぁなんて嬉しい記事でしょう

これを元に手元で作業できるようにします

ついでにRailsプロジェクトを手元のSublimeでしたいのでSFTPを使って楽しましょう

lab.sonicmoov.com

次にConohaで作ったサーバーにNginxの環境を構築します

http://nginx.org/en/download.htmlから安定版をダウンロード

Gitとかpatchとかコンパイルまでに色々必要だったのでそれもインストールしながら進める

wget http://nginx.org/download/nginx-1.8.1.tar.gz
tar zxvf nginx-1.8.1.tar.gz 

yum install git
yum install patch
yum install gcc
yum install zlib1g-dev
yum -y install pcre-devel
yum install openssl-devel

git clone https://github.com/yaoweibin/nginx_tcp_proxy_module.git
patch -p1< nginx_tcp_proxy_module/tcp.patch
./configure --add-module=./nginx_tcp_proxy_module
make
make install

コマンドが /usr/local/nginx/sbin/nginx にあるらしいので、もっとたたきやすく

 ln -s /usr/local/nginx/sbin/nginx /sbin/nginx

あとはsudo nginxで起動できます。

conohaのIPアドレスにアクセスして「welcome to nginx」でれば成功！ f:id:patioglass:20160502112226p:plain

Sublimeのときに設定しましたが、iptablesを変更してhttpの通信を許可します

sudo vi etc/sysconfig/iptablesで開き

-A INPUT -p tcp --dport 80 -j ACCEPT

を追加

このあとは、Nginxの設定ファイルを書き、Railsアプリへパスを通しunicornを橋渡しとして設定する。みたいな流れです

まずRailsアプリを作ってみましょう

rubyをいれるまで

qiita.com

付け加えてこれが必要だった

yum install -y readline-devel

rails newをする

gem install rails 
sudo yum install sqlite-devel
rails new [プロジェクト名]

sudo yum install gcc-c++  
##これはtherubyracerのため

Gemfileにunicornを記述してbundle install！

次、unicornの設定!ここに助けられた！以上！

[Rails][CentOS6]Unicorn + NginxでRails4アプリ公開まで | Coffee Breakにプログラミング備忘録

Nginxのインストールの仕方が少し違うので記事先にある「/etc/nginx/conf.d」に移動して設定ファイルの操作は「/usr/local/nginx/conf/nginx.conf」にあると思うのでそこに直接書けばいいと思います

結局Nginxとunicornの設定よくわからんだけど動いたからいいか（震え声）

unicornの再起動→Nginxの再起動を忘れずに！

#unicornの起動(developent環境)
unicorn_rails -c config/unicorn.rb -E development -D
#殺す時
kill -9 `cat /tmp/unicorn.pid`

ps aux | grep nginx #nginxのプロセスを探してkillしにいく
sudo nginx

はいNginx+unicorn+Railsの最低環境までが終了

基盤が出来上がったところで、生放送のアプリケーションの作成について考えます。

リアルタイムにコメントしてクライアントに反映させたい→Websocket
コメントを流したい（アニメーション）→Canvas
Twitterのハッシュタグと連動させる→TwitterStream

みたいなところです。

Websocketをする

はい神記事〜〜〜

どうやらRailsでWebsocketするときはwebsocket-railsっていうのを使えばいいらしい

qiita.com

Redisインストールの項からですね

Redisのインストールはここ参考

Redisの最新版をyumでインスコした - Qiita

スタンドアロンで起動して実際簡単なチャットを作ってみましょうねー

bundle exec rake websocket_rails:start_server RAILS_ENV=development

ここでチャットができるようになったらあとはこのオブジェクトをCanvasに組み込んでやってニコ生風のコメントを流す機構を作る（正直Coffeeで進めてしまったの超めんどくさかったのでいずれ書き直したい）。流れる部分のみのところだけ(time_reder関数)

receiveしてきたコメントを配列(@comment_array)に格納してそいつをrequestAnimationFrameを用いてアニメーション実行しています。

右から左に流れる座標計算はDateによる時間の差で計算しています。

画面いっぱいにコメントが埋まる時を16個分として上から順に配置しています（17以上になったらランダム配置）

計算式は雑です。それっぽいの作っただけ。valueの中に画面幅とかのパラメーターがあると思ってください。

  time_render: () =>

    if @comment_array.length != 0
        date = new Date()
        @context.clearRect(0,0,@canvas.width,@canvas.height)
        @drawImages() #更新

    for i,value of @comment_array
        width_position = 画面幅-(date-メッセージの投稿時間)/コメントの流れる速さ

        if width_position-(メッセージの長さ+15) < -メッセージの長さ*2.5-15
            if 配置場所 < 16
                @comment_pos_array[(コメントの高さ/コメントの行間)-1] = false
            @comment_array.splice(i,1)
        
        @context.font = (コメントの高さ/3*2)+"px 'sans-serif'"
        @context.strokeStyle = '#FFFF00'
        @context.lineWidth = 2
        @context.shadowOffsetX = 0
        @context.shadowOffsetY = 0
        @context.shadowColor = "#000"
        @context.fillStyle = 'rgb(255,255,255)'
        @context.shadowOffsetX = 1
        @context.shadowOffsetY = 1
        @context.shadowBlur = 2
        @context.fillText(コメントの内容,width_position,コメントの高さ-コメントの行間/7)
    requestAnimationFrame　@time_render