Naomi's notebook

Naomi's notebook

Ruby on Rails tutorial +alpha(5)マイクロポストもカレンダー上に表示&マウスオンでポスト表示

注意:この記事はメモなので、この記事に書いてあることをやっただけでは同じものができません。（大体の雰囲気は書いてあると思います。）

注意:全くのweb開発初心者なので、間違っているところなどがあるかと思いますが、教えていただけると嬉しいです。

naomi-notebook.hatenablog.com f:id:Naomi_Lilienthal:20200817135902p:plain だいぶ出来てきたので、今まで作った機能をおさらいして、次何をやるか考えます。考えて実装したら続きを書きます。

機能として必ず必要なもの

  • 当たり前ですが、eventを作成する画面を作る（とりあえずフォームで、それができたらもっと優れたやりやすい方式で）
  • eventを後から変更する画面を作る

使いやすさの面で必要そうなもの

  • eventをタイマーなどでリアルタイムに作成できるようにする(studyplusアプリのアレみたいなイメージです)
  • カレンダーをドラッグするなどしてもっと簡単に記録が作れるようにする
  • カレンダー上の予定をクリックすると編集画面が出てくる
  • eventtype>4とタイトルの組み合わせを自分で設定できるようにする
  • eventtype=1の睡眠データを集めてグラフかなんかに表示できるようにする

生活記録表として必要な要素

  • 睡眠とベットに入っているだけを分ける
  • all-dayに気分の記録ができるようにする→type=0の時jsonにallday属性を作ることで解決しました。

個人情報の扱い的に正しそうなもの

  • ログインした時やフォローされている時しかevents/(user_id)/eventsでjsonデータが返されないようにした方が個人情報的には良さそうです
  • 上に付随して、フォローされるのを許可制にできるようにする
  • マイクロポストもフォロワーにしか見られないようにする
  • 自分でアカウントが消せるようにする

スケーリングのために必要そうなこと

  • fullcalendarが/users/(user_id)/eventsにアクセスするときに全てのuser.eventsを取得するのではなく、endtimeがstartより後、またはstarttimeがendより前のもののみ取得する（whereとかを使えそう）

その他

  • micropostをチュートリアルで作っちゃったのでその有効な活用方法を考える笑→メモを残した時間がカレンダー上に表示され、それをクリックとかするとマイクロポストが表示される、とか…？

micropostが持て余し気味なのでmicropostを改造していこうと思います。

git checkout renew_micropost

まず、自分でないかつフォローしてないとmicropostをshowで表示しないようにします。(viewを変えればすぐできます。）

次に、自分またはフォローしている時にmicropost一つ一つの内容を返すページを作ります。micropostの内容をクリックするとmicropostのページに飛ぶようにしてみます。

def show
      @micropost = Micropost.find(params[:id])
      if current_user && ( @micropost.user_id == current_user.id || current_user.following.include?(@micropost.user_id ) )
        #フォローしていれば返す
        @micropost
      else
        redirect_to root_url
      end
    end

routes.rb

resources :microposts,          only: [:create, :destroy, :show]

次に、eventsと一緒にjson出力するようにします。

json.array!(@microposts) do |micropost|
    json.id micropost.id
    json.micropost true
    json.title "ポスト"
    json.start micropost.created_at
    json.end micropost.created_at
    json.color "lightblue" 
end

次に、micropost==trueの時はクリックしてもevent編集画面には飛ばないで、micropostの画面に飛ぶようにします

eventClick: function(info) {
if(info.event.extendedProps.micropost){window.location.replace("/microposts/"+info.event._def.publicId);}
        else{window.location.replace("/events/"+info.event._def.publicId+"/edit/");}
      }

次に、これをちょっと変えて画面内に表示するようにします。 jQueryのAjaxを使って外部HTMLの一部を抜き出し挿入する - Qiita

javascript - Jquery filter not working with jquery object - Stack Overflow

これらを参考にしました。(filterは子要素を見つけられないみたいだった…)

eventMouseEnter: function(info) {
        if(!info.event.extendedProps.micropost){return;}
        url="/microposts/"+info.event._def.publicId;
        $.get(url,{},
          function(data){
            var html= $($.parseHTML( data ));
            mnumber="#micropost-"+info.event._def.publicId
            $("#box_load").empty();
            $("#box_load").append(html.find(mnumber)[0]);
        });
      },
      eventMouseLeave: function(info) {
        if(!info.event.extendedProps.micropost){return;}
        $("#box_load").empty();
      }
#box_load {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 9999;
  box-sizing: border-box;
  word-wrap: break-word;
    top: 0;
    left: 0;
    overflow-y: auto;
  overflow-x: auto;
  background: white;
}

これでカーソルがポストの上にある時にポストをカレンダーに重ねて表示することができるようになりました。（本当はもっとかっこよくホバーしてくるように作りたいのですが、cssが難しい…）

f:id:Naomi_Lilienthal:20200817172844p:plain
マウスカーソルがカレンダー上のポストの上にある時の様子