デジタルサイネージで格安に動画を流す SmartSlider3 Pro-転送量をブラウザキャッシュで縮小化

本ページは広告が含まれています。気になる広告をクリック頂けますと、サーバ運営費になります(^^

100拠点ほどに展開しているデジタルサイネージです。本社コンテンツを流す部分に動画配信サイトVimeoを利用していたのですが、最近「帯域使い過ぎ」との事で、アカウントを停止させられてしまいました。

そこで、どうにかならんかと思っていたらSmart Slider3 Proにはmp4をそのまま流す方法があるので、購入して試してみたらうまくいったので、その報告です。

ロリポップの転送量上限
ブラウザによるキャッシュの参考
ブラウザにキャッシュさせる.htaccessの書き方
ブラウザキャッシュが有効になったか確認
mp4のキャッシュが効かない時の解決
ETagを使ってキャッシュ効率化
Smart Slider 3 ProでMP4を流す設定
最終的な.htaccess
検証
mp4にアクセス制限をかけたい
SSL化されたページでのhttp://を取得する問題

ロリポップの転送量上限

ロリポップエンタープライズプランを利用しています。

通信量は1日400GBまでです。かなり大きな値のように思いますが、100拠点からくるサイネージのダウンロード要求はかなりの通信量になります。

ここを気を付けてないと、またアカウント停止の憂き目にあってしまう。

同じデータを繰り返しダウンロードしてしまうので、ブラウザキャッシュに頼りたいと思います。

ブラウザによるキャッシュの参考

まず、３種類のファイル形式（MP4、FLV、F4V）をターゲットにして検証したところ、意外なことにキャッシュされないファイル形式があり、MP4形式はSafari以外はキャッシュされず、FLV、F4V形式はファイルサイズの違いによりキャッシュされました。

プログレッシブダウンロードの動画は、すべてキャッシュされるか検証

プログレッシブダウンロードの動画がキャッシュされるかという記事があり、面白いと思いました。Chromeではmp4ではキャッシュされないようです。

試しにやってみたら、mp4ファイルもちゃんとブラウザキャッシュから再生できることが分かりました。

ブラウザにキャッシュさせる.htaccessの書き方

mod_expiresを利用する

# BEGIN BrowserCache
<ifmodule mod_expires.c="">
ExpiresActive on
ExpiresByType video/mp4 "access plus 12 hours"
ExpiresByType image/png "access plus 12 hours"
ExpiresByType image/jpeg "access plus 12 hours"
ExpiresByType image/gif "access plus 12 hours"
ExpiresByType text/css "access plus 12 hours"
ExpiresByType text/javascript "access plus 12 hours"
</ifmodule>
# END BrowserCache

レンタルサーバで対応していない場合は　こんな書き方もできます

<pre># CACHE media files for 12hours
<files ~="" ".(gif|jpe?g|png|mp4)$"="">
  Header set Cache-Control "max-age=43201"
</files>
</pre>

この書き方本格的って感じたやつ

<ifmodule mod_expires.c="">
  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest "access plus 0 seconds"

# Your document html
  ExpiresByType text/html "access plus 0 seconds"

# Data
  ExpiresByType text/xml "access plus 0 seconds"
  ExpiresByType application/xml "access plus 0 seconds"
  ExpiresByType application/json "access plus 0 seconds"

# Feed
  ExpiresByType application/rss+xml "access plus 1 hour"
  ExpiresByType application/atom+xml "access plus 1 hour"

# Favicon (cannot be renamed)
  ExpiresByType image/x-icon "access plus 1 week"

# Media: images, video, audio
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/jpg "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType video/ogg "access plus 1 month"
  ExpiresByType audio/ogg "access plus 1 month"
  ExpiresByType video/mp4 "access plus 1 month"
  ExpiresByType video/webm "access plus 1 month"

# HTC files (css3pie)
  ExpiresByType text/x-component "access plus 1 month"

# Webfonts
  ExpiresByType application/x-font-ttf "access plus 1 month"
  ExpiresByType font/opentype "access plus 1 month"
  ExpiresByType application/x-font-woff "access plus 1 month"
  ExpiresByType image/svg+xml "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"

  <ifmodule mod_headers.c="">
    Header append Cache-Control "public"
  </ifmodule>

</ifmodule>

このページから

ブラウザキャッシュが有効になったか確認

Chromeの場合

ホームページを表示させ F12キーを押す

Networkタブをクリックした後で、再読み込みF5する

Cache-Control: 行が入っていれば成功です。

mp4のキャッシュが効かない時の解決

mp4のキャッシュが効かない事があります。

スライドショーで、自動的にmp4が再生するような仕様で利用していると、ブラウザキャッシュが効かないのは致命的です。よく確認しておいた方がいいです。

transferredが上がっていかなければキャッシュから読み込みされています。ここが上がっていく場合があります。ExpiresByType video/mp4で有効期限を切ってるのにキャッシュされない事があります。

ETagを使ってキャッシュ効率化

そんな時にサポートしてもらったのが etagの設定です。

ETag（エンティティタグ）は、HTTPにおけるレスポンスヘッダの1つである。これは、HTTPにおけるキャッシュの有効性確認の手段の1つであり、ETagを利用してクライアントから条件付きのリクエストを行うことができる。そうすることで、コンテンツが変わらなければレスポンスをすべて返す必要がなくなるので、キャッシュを効率化し、回線帯域を節約できるようになる。
HTTP ETag

ETagを含めた .htaccessの設定

<FilesMatch "\.mp4$">
    FileETag MTime Size
</FilesMatch>
<IfModule mod_mime.c>
    AddType video/mp4 .mp4 .m4v
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType video/mp4 "access plus 1 month"
</IfModule>

FileETagディレクティブ　HTTPレスポンスヘッダにETagフィールドを作成する

MTime：ファイルの最終更新時刻を使う

Size：ファイルの Byte 数を使う

私の環境ではこちらを使う事で無事にキャッシュからmp4が再生されるようになりました。

Smart Slider 3 ProでMP4を流す設定

Smart Slider 3 Proを購入すると、mp4を直接指定してビデオを流す事ができるようになります。

１．ブランクスライドを作成

２．Videoツールを配置

３．mp4ファイルを指定

４．AutoPlayにチェック

５．When Ended に Go to next slideを設定

６．Restart On Slide Change をONにする

これでMP4が流れるようになります。

最終的な.htaccess

#ForCache Etag
<FilesMatch "\.mp4$">
  FileETag MTime Size
</FilesMatch>

# BEGIN BrowserCache
<IfModule mod_expires.c>
  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest "access plus 0 seconds"

# Your document html
  ExpiresByType text/html "access plus 0 seconds"

# Data
  ExpiresByType text/xml "access plus 0 seconds"
  ExpiresByType application/xml "access plus 0 seconds"
  ExpiresByType application/json "access plus 0 seconds"

# Feed
  ExpiresByType application/rss+xml "access plus 1 hour"
  ExpiresByType application/atom+xml "access plus 1 hour"

# Favicon (cannot be renamed)
  ExpiresByType image/x-icon "access plus 1 week"

# Media: images, video, audio
  ExpiresByType video/mp4 "access plus 12 hours"
  ExpiresByType image/png "access plus 12 hours"
  ExpiresByType image/jpg "access plus 12 hours"
  ExpiresByType image/jpeg "access plus 12 hours"
  ExpiresByType image/gif "access plus 12 hours"
  ExpiresByType text/css "access plus 12 hours"
  ExpiresByType text/javascript "access plus 12 hours"

# HTC files (css3pie)
  ExpiresByType text/x-component "access plus 1 month"

# Webfonts
  ExpiresByType application/x-font-ttf "access plus 1 month"
  ExpiresByType font/opentype "access plus 1 month"
  ExpiresByType application/x-font-woff "access plus 1 month"
  ExpiresByType image/svg+xml "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"

  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>

</IfModule>
# END BrowserCache

検証

Windows10では、ネットワークの使用状況を、アプリケーションごとに表示する機能があります。設定がうまくいっているかどうか、しっかりと検証するため、サイネージを流しているPCで、通信がどれくらい発生しているかを確認します。

12時間ほど流していますが、Chromeの通信量は8MBから動かない状況で、これは確実にキャッシュから再生できているようです。

mp4にアクセス制限をかけたい

リファラーでアクセス制限する

SetEnvIf Referer "^http://hanako\.jp" ok_url
order deny,allow
deny from all
allow from env=ok_url

Smart Slider Proが設定してあるサイトからしかmp4ファイルにアクセスさせたくない場合は、リファラーによるアクセス制限が考えられます。

上記は hanako.jpにSmart Slider 3 Proが hanako.jpサイトに登録されている場合に、mp4を入れたディレクトリの .htaccess 設定です。

SetEnvIf Referer "^http://hanako\.jp" ok_url 
SetEnvIf Referer "^http://techlive\.tokyo" ok_url 
order deny,allow 
deny from all 
allow from env=ok_url

２つのドメインから許可したい場合は、上記のように記載する事ができます。

mp4ディレクトリ作成して、そのURLをSmart Slider Pro3に入れてあります。

# BEGIN BrowserCache
<FilesMatch "\.mp4$">
FileETag MTime Size
</FilesMatch>
<IfModule mod_mime.c>
    AddType video/mp4 .mp4 .m4v
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType video/mp4 "access plus 12 hours"
</IfModule>
# END BrowserCache

# For Access Control
SetEnvIf Referer "^http://hanako\.jp" ok_url
order deny,allow
deny from all
allow from env=ok_url