おやゆびでおでストリーミング再生をする (応用編)

前々回(Mac編)前回(LinkStation)とおやゆびでお用の自宅内ストリーミングサーバー構築方法を説明してきましたが、どちらも基礎編ということでリスト表示のためのHTMLファイルを手作業で作成しました。この方法は準備は最低限ですが、後日動画ファイルを追加する度にHTMLファイルも更新しなければなりません。そこで本記事ではPHPというスクリプト言語を使った自動リスト作成環境の構築について解説します。PHPスクリプト一式はこちらで配布しますので、まずはMacやLinkStationでPHPを有効にします。以下、前提として前記事での設定が完了しているものとします。

■スクリプトファイルを準備する

下記のリンクよりダウンロードし、解凍しておきます。

[thumbvideo_server_201.zip]
[thumbvideo_server_101.zip] 旧バージョン

2014.06.12追記:iPhoneで横画面時にフォントサイズが大きくなってしまうのを修正しました。

2013.11.24追記:iOS7風デザインのVer2.0を公開しました。URLに「?t=dark」を追加することでダーク配色にすることも可能になりました。

1.0系から2.0系に更新する方法は本記事の末尾に掲載してあります。

■MacでPHPを有効にする

/etc/apache2/httpd.confという設定ファイルで無効になっているPHP機能を有効にするよう書き換えます。

  • アプリケーション->ユーティリティ->ターミナルを起動します。
  • 「sudo pico /etc/apache2/httpd.conf」とタイプしリターンを押します。パスワードを聞かれたら自分が普段Macにログインする時のパスワードを入力します。通らない場合は管理者権限がないのかも知れません。他の管理者ユーザのアカウントで作業して下さい。
配色は違うかも知れませんが、こんな感じの編集画面になります。余計なところを書き換えると正常に機能しなくなるので注意して進めて下さい。
  • Ctrl + Vで3画面ほど下へスクロールすると、「#LoadModule php5_module libexec/apache2/libphp5.so」という行が見つかるので、先頭の「#」を消します。
  • Ctrl + Oで上書き保存します(ファイル名を聞かれるのでそのままリターン)。
  • Ctrl + Xでエディタを終了します。画面がほぼ空白になったらターミナルは終了しても構いません。
  • 前々記事でチェックしたWeb共有のチェックボックスを一旦OFFにした後再びONにします(Webサーバーを再起動して設定を反映させます)
  • ダウンロードしたスクリプトセットを解凍して出てきた、index.php、video、icons、UiUIKITを前回作成したthumbvideoフォルダにコピーします。
  • 前回のHTMLファイルがindex.htmlの場合、index.phpよりも優先して読み込まれてしまうので、削除するか他の名前に変更しておきます。
  • 動画ファイルをvideoフォルダの中に移動します。
これで設定は完了です。「おやゆびでお」から前回と同じアドレスにアクセスしてみて下さい。こんな画面が表示されれば成功です。videoフォルダの下にサブフォルダを作って動画を分類してもOKです。
server2
表示例1:画面は近日リリース予定のおやゆびでお3.0を使用した場合
server2_dark
画面例2:ダーク配色にした場合
もし「Index of /furuta/thumbvideo」等と表示されてしまう場合はPHPが有効になっていません。もう一度手順を見直してみて下さい。

■LinkStationで利用する

LinkStationの場合、前回の設定で基本的にPHPも有効になっているので、下記の手順でファイルを配置します。

  • htdocsフォルダにindex.phpが作られているので、削除するか別の名前に変えておく。
  • ダウンロードしたスクリプトセットを解凍して出てきた、index.php、video、icons、UiUIKITを前回作成したthumbvideoフォルダにコピーします。
  • 動画ファイルをvideoフォルダの中に移動します。
これだけです。「おやゆびでお」から前回と同じアドレスにアクセスしてみて下さい。上記のような写真が表示されれば成功です。videoフォルダの下にサブフォルダを作って動画を分類してもOKです。

■使い方

  • mp4ファイルをタップすると再生されます
  • フォルダ名をタップすると移動します
  • 左上の「Back」ボタンで上位フォルダに戻ります
  • アドレス欄の右の矢印ボタンから「ホームに設定」を選ぶと、次回からそのページが最初に表示されます
  • 再生中にメモリが少なくなってくると、裏でブラウザ画面がリセットされ、戻った時に開いていたページや戻るボタン(「←」)の履歴がクリアされていることがあります。すみませんが現状では仕様とさせていただきます。
  • サーバー側でvideoフォルダの下にサブフォルダを作成して動画ファイルを分類保存できます。
  • mp4以外の拡張子のファイルが同じフォルダ内に混在していても大丈夫ですが、「おやゆびでお」上ではグレーアウトされタップできません。
上記の手順で当方の環境では動作に成功していますが、OSやファームウェアのバージョンによっては条件が違ってくるかも知れません。上手くいかない場合はコメント欄やTwitterなどでお知らせ下さい。
WindowsやLinux環境でも基本的にはPHPの実行環境さえあれば利用できるはずです。

■謝辞

本スクリプトは、簡単にiOSっぽい見た目のWebページを作成できるライブラリUiUIKit (Universal iPhone UI Kit)を使用させていただいております。この場をお借りしてお礼申しあげます。
Ver2.0からはUiUIKitは使用しなくなりました。

■Ver1.xからVer2系へアップデートする方へ

「video」フォルダ以外を上書きして下さい。iconsフォルダ内のgifファイルとUiUIKitフォルダは削除して構いません。

 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*