show.html.slim in resizing-rails-0.3.0

- old
+ new
@@ -19,28 +19,34 @@
         dt.col-2 HEVC
         dd.col-10
           a.card-link.hevc-url.data-copy-url href='#'
             | Copy URL
     li.list-group-item
-      label.form-label for='copy-tag' コピー用のタグ（このサイト内だけで有効です）
-      textarea#copy-tag class='form-control' rows='10'
-        | <div id='video-#{@video.id}'></div>
+      h4 コピー用のタグ
+      h5 スタイルシートとJavaScriptの読み込み（共通）
+      | app/views/layouts/application.html.slim へ以下を追加
+      pre.bg-light
+        textarea class='form-control' rows='3'
+          | = stylesheet_link_tag 'resizing/rails', media: 'all'
+            = javascript_include_tag "resizing/rails"
+
+      h5 HTML & JavaScriptの場合:
+      textarea class='form-control' rows='10'
+        |
+          <div data-video-url="video-#{@video.id}"></div>
           <script>
-          document.addEventListner('DOMContentLoaded', function () {
+          window.addEventListner('DOMContentLoaded', function () {
             video = new Resizing.Rails.Video("#{@video.data_self_url}", document.querySelector('video-#{@video.id}'))
             video.fetch()
           })
           </script>
-
-      p
-        | ※スタイルシートとJavaScriptの読み込みが必要です。
-      b 例：
-      br
-      | app/views/layouts/application.html.slim へ以下を追加
-      pre.bg-light
-        code
-          | = stylesheet_link_tag 'resizing/rails', media: 'all'
-            = javascript_include_tag "resizing/rails"
+      h5 ERBの場合:
+      textarea class='form-control' rows='5'
+        | # Controller内で該当のレコードを取得する
+          @video_record = Resizing::Rails::Video.find(#{@video.id})
+          &nbsp;
+          # View内でHelperを使ってタグ出力する
+          <%= Resizing::Rails::VideosHelper.resizing_video_tag(@video_record) %>
 
 javascript:
   document.addEventListener('DOMContentLoaded', function() {
     progress = new Resizing.Rails.ProgressBar(document.querySelector('.progress-bar'), 0, 100)
 