YoutubeとTwitterの埋め込み機能の修正と実装

今日は既存のアプリに表題の機能を施しました。
youtubeとtwitterに始まるSNSや動画サービスを閲覧したり、twitterやfacebookを通してログインしたりするのは、もはや今のwebサービスに欠かせないものです。

---

見出しアイコンを動的にする

元々の自分のコードはこれで、htmlをベタ書きしている。

    elsif embed?
      if blockable.youtube?
        '<i class="fa fa-youtube-play"></i>'.html_safe
      else
        '<i class="fa fa-twitter"></i>'.html_safe
      end
    end

普通に記載するとエスケープ処理されてしまうので、html_safeメソッドでhtmlとして出力するようにしている。
参考url HTML特殊文字のエスケープ - Ruby on Rails入門

解答例のコードがこちら

  elsif embed?
      blockable.youtube? ? content_tag(:i, nil, class: 'fa fa-youtube-play') : content_tag(:i, nil, class: 'fa fa-twitter')
    end

まずは三項演算子を使って１行で記述している。 さらに、content_tagヘルパーを使用して:iとclass: 'fa fa-twitterといった引数を渡してhtmlとして出力している。
参考url content_tag | Railsドキュメント

ブロック追加時のアイコンを横並べにする

自分のコード

.sns-icons         
  i.fa.fa-youtube-play
  i.fa.fa-twitter

.sns-icons {
  float: left;
    }    

下のコードでもいける

div
  i.fa.fa-youtube-play
  i.fa.fa-twitter

 i.fa.fa-youtube-play(style='display: inline')
 i.fa.fa-twitter(style='display: inline')

twitter埋め込みを実装

自分の実装したコード

# app/views/shared/_embed_twitter.html.slim内
.embed-twitter
<blockquote class="twitter-tweet"><a href="#{embed.identifier}"></a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Slim表記にすると下のようなコードになる。

# app/views/shared/_embed_twitter.html.slim内
script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"
.embed-twitter
  blockquote.twitter-tweet
    a href="#{embed.identifier}"

参考url 【Twitter】埋め込み処理をAPIに投げずにローカルで行う - mizuff_diary

YouTubeの動画URLから、IDのみを抽出する

Rubyのメソッドを使って文字列をいじって抽出するので、これは色々な実装方法がある。 自分のコード

  def translate_url
    identifier.slice!(17, 28) if youtube?
  end

IDより前の文字列が共通&IDが11文字ということを利用して、slice!メソッドでIDの部分のみを切り取った。
しかしこれでは、動画が途中から再生されるような場合は対応できない。 そこで解答例のこのコードが有効

  def split_id_from_youtube_url
    # YoutubeならIDのみ抽出
    identifier.split('/').last if youtube?
      # lastで、切り取った複数の文字列の中からIDの部分に当たる最後の1つを選択してる。
  end

これなら 途中再生の場合も対応できる。