#作った動機

oculus goを買ってVRを本格的に見始めたが、DMMのVR作品の画質などに個体差がありすぎて、レビューで画質などに言及がない作品を買う時に躊躇することが多かったので評価項目に画質や距離感・小人化(分かる人には分かる)などを追加したレビューサイトを作ればより充実したVRライフが送れると思ったから。

##サービスの概要

下記のように評価項目がありレビューを投稿できる。

投稿をすると下記のようになる

#技術について

###DMM API

  gem 'ruby-dmm', '~> 0.2.0'

bundle install

適当にtaskを作ってDMMAPIから情報を取得

dmm.rake

 task get_info: :environment do
   #DMMアフィリエイトプログムに登録して取得
   api_key = ENV["dmm_api_key"]
   affi_id = ENV["dmm_affiliate_id"]
   cli = DMM.new(:api_id => api_key, :affiliate_id => affi_id, :result_only => true)
   
   #キーワードにマッチする情報を取得
   response = cli.product(:site => 'FANZA', :keyword => "キーワード",:floor_code => 'videoa')

   #適当に返ってきたデータから欲しい情報を抜き出す
   #リファレンスはhttps://affiliate.dmm.com/api/v3/itemlist.html
   (response.result[:items] || []).each do |item|
     title = item[:title]
     img = item[:imageURL][:small]
     video = Video.create(title: title, img: img)
     actresses = item[:iteminfo][:actress]
     actresses.each do |actress|
       actress_id = actress[:id].to_s
       name = actress[:name]
       video.actresses.build
       actress_model = Actress.find_or_create_by(name: name, actress_id: actress_id)
       video.actresses << actress_model
       video.save
     end
   end
  end

上記のような感じでDMMAPIから返ってきた情報を保存する。

##Vue.js

ratingを追加するpostなどの機能をaxiosを利用して追加

api.js

  import axios from 'axios';
  ///csrftokenをセット//////////
  const csrfToken = document.querySelector('meta[name="csrftoken"]').getAttribute('content')
  axios.defaults.headers.common['X-CSRF-Token'] = csrfToken

  export function createRating(rating) {
    return axios.post(`/ratings`, rating)
        .then(function (response){
            return response.data
        })
        .catch(function(error){
            console.log(error);
        })
  }

starレーティング機能を追加するために
yarn add vue-star-rating
そしてrating追加機能をjsファイルに

ratingPost.js

  import Vue from 'vue/dist/vue.js';
  import StarRating from 'vue-star-rating'
  const Api = require('./api')

  const app = new Vue({
    data: {
      rating: {
        content: 0,
        picture: 0,
        distance: 0,
        body: "",
      },
    },
    methods: {
      createRating: function(event) {
        if(0 < this.rating.content && 0 < this.rating.picture && 0 < this.rating.distance){
          Api.createRating(this.rating).then(function(response){
            //適当にメッセージなど
          })
        } 
      },
    }
  })

そしてviewにstarレーティングを追加

_rating-form.html.erb

  <div class="input-field>
    内容
    <star-rating v-model="rating.content" v-bind:increment="0.5" v-bind:star-size="25" >
    画質
    <star-rating v-model="rating.picture" v-bind:increment="0.5" v-bind:star-size="25" >
    距離感
    <star-rating v-model="rating.distance" v-bind:increment="0.5" v-bind:star-size="25" >
  </div>
  <div class="input_field">
    <textarea-autosize
        placeholder="コメント(なしでもいい)"
        v-model="rating.body"
        :min-height="30"
        :max-height="350"
        @blur.native="onBlurTextarea"
        class="input_rating-body"
    ></textarea-autosize>
  </div>
  <div>
    <button @click.prevent="createRating($event)" class="btn-rating-submit">
      送信 
    </button>
  </div>
  
  ##import js file
  <%= javascript_pack_tag 'ratingPost' %>

rails+Vue.jsはほぼほぼ下記のサイトのコースを参考に。
https://gorails.com/
https://www.udemy.com/ruby-on-rails-react-angular/

##見た目

Bootstrapなどを使用せずゴリゴリCSSを書く。
star、paginationなどもCSSで。
HomeはYouTubeとDMMを意識した雰囲気にShow pageはRotten Tomatoesを参考に。

##adminなど

punditやadministrateなど使ってみたかったgemを使ってサクッと
https://gorails.com
上記のサイトをチュートリアルに
コードはdev.toのgithub(適当にpolicy.rbやdashboard.rbを検索)を参考にして半日くらいで知識ゼロから導入できた。
https://github.com/thepracticaldev/dev.to

##備考
女優やランキングなどの一覧機能やユーザーページなども時間があれば追加予定でまだ基本機能以外未完成。
お手数ですがレビューの書き込みのためにログインが必要(twitterでもできる)

##感想

今月からサブスクし始めた
https://gorails.com (多分日本語対応多分なし)
がVueからadministrateなどのgemの導入まですごく参考になった。
その他のエピソードもデプロイからパフォーマンス向上テクニック、はたまたRails自体にプルリクを送ってマージされるなどといった幅広い内容が揃っていてコス(月額19ドル)が最高でパも超最高。

やっぱりjqueryよりVueの方が見通しがよくてすち。

###サイトのURLは
####https://www.dmmnovr.com/

古いアカウントで登録してしまって現在のアカウント連携できないのでtwitterも宣伝。更新情報も追記する予定。
Hobbyist@hobbyprogrammerで探せば見つかるのでよかったらフォローして下さい。

oculusはavを見なくてもNetflixを見る人は是非買って欲しいくらいおすすすめ。

##参考
Vue
https://gorails.com
https://www.udemy.com/ruby-on-rails-react-angular/
adminなど
https://gorails.com
https://github.com/thepracticaldev/dev.to
quiitaのdmmapiの記事(現在はなぜか見つからない)