プリキュアの支援ツール作ることで学んだIT
こんにちはぱちおです。
4月末にプリキュアのためのプリキュアによるプリキュア版生放送ツールを作りました
備忘録
そのときに使った技術関連の備忘録です。チラ裏
大まかに
Railsの全コードはGithubにあります(無我夢中で書いたやつだからもちのろんで汚いので誰か怒って)
GitHub - patioglass/precure_watch: #precureのツイートを生放送風に流し、ローカルコメントができるプリキュア実況サービス
前座話(飛ばしてもいい)
なんで作ったのか
前記事の付け加えみたいな(前記事が雑すぎる)
(わざわざハッシュタグ追うのもなんかアレ)
プリキュア専用垢とかならいいんですけどね!そんなわけないので
みんな面白いからみて
なーんて言ってもみんな「面白そうだけどなぁ」「プリキュアねーw」「正直どれから見ていいか」
""今みろ!!今!!""
やっぱ女児アニメとして確立いるせいで意見を共有する窓口だったり、どこにプッシュすればいいかわからないところもあったり・・・
たしかに、突然知り合いが「ぷいきゅあ〜〜」って言い始めたら嫌ですよね。僕は好きです
まぁこんな苦悩してるのも前作「Go!プリンセスプリキュア」が最高and最高ほどの名作だったにも関わらず、私の周囲の人間はみてくれなくて悲しかったってところなんですよね
良すぎてBDぽちったくらいですまじ
ぁぁああ人生で初めて映画以外のBD買ってしまったぁああお金があああでもこれすごい幸せだ(真顔) pic.twitter.com/QfsbG5d2wc
— ぱちお (@patioglass) 2016年4月22日
そんな時なんとなくニコニコがプリパラを配信してるのをみてたら、コメントが楽しそうなんですねほんと
「プリキュアもしろ💢」
・・・プリキュアもすればいいんだ!(天才のソレ)
ていう流れで今回の「プリティーウォッチ」が作られました✌️
ここから備忘録(遅い)
まず、どういった形ですべきか
あぁこれはWebですわ
で、せっかくなんで色々新しいことに挑戦したいので、今までずっと避けていたVPSを借りて一から作ってみようということで
これでけってーい!
まずはどのVPSかっていうことで今回は「 ConoHa - GMOの高性能オールSSDクラウド」を利用しました
サーバーはデフォルトの最小のやつでぽちぽちとサーバー追加していけばいいですね。めっちゃ楽だった
次にわざわざコンソール開いてそこで作業・・・が嫌なのでSSHの設定をします
まぁなんて嬉しい記事でしょう
これを元に手元で作業できるようにします
ついでにRailsプロジェクトを手元のSublimeでしたいのでSFTPを使って楽しましょう
次に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」でれば成功!
Sublimeのときに設定しましたが、iptablesを変更してhttpの通信を許可します
sudo vi etc/sysconfig/iptablesで開き
-A INPUT -p tcp --dport 80 -j ACCEPT
を追加
このあとは、Nginxの設定ファイルを書き、Railsアプリへパスを通しunicornを橋渡しとして設定する。みたいな流れです
まずRailsアプリを作ってみましょう
rubyをいれるまで
付け加えてこれが必要だった
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をする
はい神記事〜〜〜
どうやらRailsでWebsocketするときはwebsocket-railsっていうのを使えばいいらしい
Redisインストールの項からですね
Redisのインストールはここ参考
スタンドアロンで起動して実際簡単なチャットを作ってみましょうねー
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の機能をバックグラウンドで動かす必要あり
ということでまたもや神記事な
これをそのままWebsocketに投げる感じです
そしてできました
@patioglass 様子です pic.twitter.com/DunAza8ItG
— ぱちお (@patioglass) 2016年4月30日
挙動としてはニコ生のソレに近づきました。
現状の問題が
コメント多すぎて読めない
コメント多すぎて重くなる
すさまじきプリキュアおじさんの力・・・・
ニコ生がアリーナとか分けてる理由もわかるって話ですね
なのでコメントの流れに対して制限をかけられるような設定機能が今後の課題かなと
あと録画勢用にログ再生とかできるようにしたいですね(現在進行中
そんなこんなで久々に長い記事を書いてもう疲れました。1ヶ月前のことくらい簡単にかけるやろって思ったけど全然かけないわこれたぶん50%くらいしか思い出せてない
備忘録はもっと早めにつけようね
ちゃんちゃん
あ
プリキュアみんな見てね