人生のヒント

私が経験したことが、誰かの人生のヒントになればと願い書きます。

Ruby On RailsでYoutubeをライトボックス表示する(colorbox)

スポンサーリンク

f:id:hinthint:20160911155810j:plain

今回は、jQueryプラグイン「Colorbox」を使ってYoutubeをライトボックス表示します。

下記サイトを参考にしました。

http://webdesignmagazine.net/javascript/colorbox_yutube/

 

1.インストール

下記サイトからモジュールをダウンロードします。

http://www.jacklmoore.com/colorbox/

 

rootでログインします。(URLは、サイトでの最新を記載してください。)

# wget https://github.com/jackmoore/colorbox/archive/master.zip

# apt-get install unzip

# unzip master.zip

# cp -R colorbox-master/jquery.colorbox.js /home/rails/work/foo/app/assets/javascripts/

# cp -R colorbox-master/example2/images/ /home/rails/work/foo/app/assets/

# chown -R rails:rails /home/rails

# su - rails

$ cd work/foo

$ vi config/initializers/assets.rb

 

config/initializers/assets.rbファイルに以下記述を記入します。

Rails.application.config.assets.precompile += %w( jquery.colorbox.js )

Rails.application.config.assets.precompile += %w( youtube.js )

Rails.application.config.assets.precompile += %w( colorbox.css.scss )

 

$ vi app/assets/javascripts/youtube.js

app/assets/javascripts/youtube.jsファイルに以下記述を記入します。

$(document).ready(function($){
  $(".youtube").colorbox({
    iframe:true,
    innerWidth:320,
    innerHeight:259
  });
});

 

$ vi app/assets/javascripts/application.js

app/assets/javascripts/application.jsファイルに以下記述を記入します。

//= require jquery.colorbox
//= require youtube

 

$ vi app/assets/stylesheets/colorbox.css.scss

app/assets/stylesheets/colorbox.css.scssファイルに以下記述を記入します。

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/

#colorbox, #cboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  max-width: none;
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
}

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left;
}

#cboxContent {
  position: relative;
}

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#cboxTitle {
  margin: 0;
}

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer;
}

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
  -ms-interpolation-mode: bicubic;
}

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}

#colorbox, #cboxContent, #cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/

#cboxOverlay {
  background: #fff;
  opacity: 0.9;
  filter: alpha(opacity = 90);
}

#colorbox {
  outline: 0;
}

#cboxContent {
  margin-top: 32px;
  overflow: visible;
  background: #000;
}

.cboxIframe {
  background: #fff;
}

#cboxError {
  padding: 50px;
  border: 1px solid #ccc;
}

#cboxLoadedContent {
  background: #000;
  padding: 1px;
}

#cboxLoadingGraphic {
  background: image-url("loading.gif") no-repeat center center;
}

#cboxLoadingOverlay {
  background: #000;
}

#cboxTitle {
  position: absolute;
  top: -22px;
  left: 0;
  color: #000;
}

#cboxCurrent {
  position: absolute;
  top: -22px;
  right: 205px;
  text-indent: -9999px;
}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */

#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  text-indent: -9999px;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -20px;
  background: image-url("controls.png") no-repeat 0 0;
}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */

#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0;
}

#cboxPrevious {
  background-position: 0px 0px;
  right: 44px;

  &:hover {
    background-position: 0px -25px;
  }
}

#cboxNext {
  background-position: -25px 0px;
  right: 22px;

  &:hover {
    background-position: -25px -25px;
  }
}

#cboxClose {
  background-position: -50px 0px;
  right: 0;

  &:hover {
    background-position: -50px -25px;
  }
}

.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious {
  right: 66px;
}

.cboxSlideshow_on #cboxSlideshow {
  background-position: -75px -25px;
  right: 44px;

  &:hover {
    background-position: -100px -25px;
  }
}

.cboxSlideshow_off #cboxSlideshow {
  background-position: -100px 0px;
  right: 44px;

  &:hover {
    background-position: -75px -25px;
  }
}

 

$ vi app/assets/stylesheets/application.css

 app/assets/stylesheets/application.cssファイルに以下記述を記入します。

//= require colorbox.css.scss

 

以下コマンドを実行します。

$ rake assets:clobber

$ rake assets:precompile

$ vi app/views/layouts/application.html.erb

 

app/views/layouts/application.html.erbファイルのheadタグ内でjavascript_include_tagより前になるように以下記述を記入します。

これらのURLは、お使いのFooTableのバージョンで使えるバージョンに変更してください。ブログ執筆時点では、これを使いました。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

以下コマンドを実行します。

$ /etc/init.d/unicorn restart

 

 

2.Youtubeをライトボックス表示する設定

予め、表示させたいYoutubeの埋め込みコードのURLを控えておく必要があります。

Youtubeの動画で右クリックして、「埋め込みコードをコピー」をクリックします。

f:id:hinthint:20160911080752p:plain

 

<iframe width="640" height="360" src="https ://www.youtube.com/embed/SAAQh5oZqWA" frameborder="0" allowfullscreen></iframe>

コピーした赤字箇所を更にコピーしておきます。

(YoutubeのURLは表示したいものに変更してください。このままではできません。)

 

$ vi app/views/users/index.html.erb

app/views/users/index.html.erbファイルを以下のように書き直します。

(YoutubeのURLは表示したいものに変更してください。このままではできません。)

<p id="notice"><%= notice %></p>

<h1>Listing Users</h1>

<a href="https ://www.youtube.com/embed/SAAQh5oZqWA" class="youtube" >YouTube</a>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.email %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New User', new_user_path %>

以下コマンドを実行します。

$ /etc/init.d/unicorn restart

 

Webブラウザでhttp://FQDN/userにアクセスして、YouTubeリンクをクリックして、ライトボックス表示されたら、完了です。

 

 

3.まとめ

サイトにYoutubeを埋め込んで表示させるのも良いんですが、レスポンスが遅くなることが考えられます。

サイトの表示をYoutubeのせいでレスポンスを遅くしたくない方は、ライトボックス表示することを検討してみてください。