読者です 読者をやめる 読者になる 読者になる

ぱちおのいろいろ。

プログラミング、イラスト、作曲、アニメ等好きな事や近況報告とかアウトプットしたい時に使います。

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

こんにちはぱちおです。

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

patioglass.hatenablog.com

備忘録

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

大まかに

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

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

前座話(飛ばしてもいい)

なんで作ったのか

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

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

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

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

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

みんな面白いからみて

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

""今みろ!!今!!""

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

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

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

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

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

プリキュアもしろ💢」

・・・プリキュアもすればいいんだ!(天才のソレ)

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

ここから備忘録(遅い)

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

あぁこれは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

アニメーション部をsetIntervalで処理してしまうと非アクティブのときのメモリ消費がとても激しいので、setIntervalではなくrequestAnimationFrameを使う感じがいいです。ほんとに全然違うんで

Twitterハッシュタグ取得

TwitterStream使ってハッシュタグ取得したものをデータベース保存→Websocketに流す

そのためにTwitterStreamの機能をバックグラウンドで動かす必要あり

ということでまたもや神記事な

qiita.com

これをそのままWebsocketに投げる感じです

そしてできました

挙動としてはニコ生のソレに近づきました。

現状の問題が

  • コメント多すぎて読めない

  • コメント多すぎて重くなる

すさまじきプリキュアおじさんの力・・・・

ニコ生がアリーナとか分けてる理由もわかるって話ですね

なのでコメントの流れに対して制限をかけられるような設定機能が今後の課題かなと

あと録画勢用にログ再生とかできるようにしたいですね(現在進行中

そんなこんなで久々に長い記事を書いてもう疲れました。1ヶ月前のことくらい簡単にかけるやろって思ったけど全然かけないわこれたぶん50%くらいしか思い出せてない

備忘録はもっと早めにつけようね

ちゃんちゃん

プリキュアみんな見てね