[おやゆびでお] 秘密フォルダに関して

おやゆびでお v1.5の新機能「秘密フォルダ」に関してのエントリです。

本機能は予め指定したプライベートな動画ファイルをリストに表示しない為のものです。実際にはDocuments/Secretというサブフォルダに移動しているだけで、高度な暗号化処理等はしていません。パソコンにつないである種のツールを使えば簡単に覗き見られてしまうのでご注意下さい。あくまでiPhone/iPad上での簡易なカモフラージュ機能です。

■使い方

本機能はその性質上、呼び出し方自体も少しわかりにくくしてあります。具体的には、「Local Files」画面右上のボタンをタップしてアクションシート(メニュー)が出た状態で3秒待ちます。するとメニューが裏メニューに切り替わります(写真)。iPadの場合はシート表示中にもう一度ボタンを押すことでも即時表示することができます。裏メニューから「秘密フォルダを表示」をタップし、初期パスコードとして0000を入力して下さい。それで秘密フォルダ表示状態になります(リスト上に「秘密フォルダ」というグループが追加されます)。更にもう一度右上のボタンをタップし、「表示/非表示切替」を選んで下さい。ナビゲーションバーが緑色に変わり、タップしたファイルが「秘密フォルダ」グループに移動します。秘密フォルダに属するファイルをタップすると「iTunesファイル共有」グループに戻ります。「暗証番号を変更」でお好きな4桁のパスコードを設定して下さい。なおパスコードを忘れた場合、リセットすることはできますが、秘密フォルダ内のファイルは削除されます。「秘密フォルダをロック」を選んだり、アプリを終了すると秘密フォルダは見えなくなります。

 

「おやゆびでお」が「Open In…」に対応しました

「おやゆびでお」のDocument Interaction(いわゆる「Open in…」)対応バージョンを開発していますがリリースされました。GoogReader等の強力なダウンロード機能を有するアプリで動画ファイルを取得し、それを「おやゆびでお」で視聴することができるようになります。ほぼ完成して動作テスト中ですので、現在審査中のiOS5対応バグフィクス版(v1.1.1)がリリースされる頃には審査に出せるんじゃないかと思っています。お楽しみに!

I am developing released a new version of “ThumbVideo” which support iOS Document Interaction (aka “Open in…”). You can use other app which enabled Doc Interaction such as “GoodReader” to download video file and then play it with “ThumbVideo”. It’s almost done and in the testing phase. I think a bug fix version for iOS5 (v1.1.1) will be approved within a few days. Then I will submit this new one. Please look forword to it! Have Fun!

 

 

 

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

前々回(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フォルダは削除して構いません。

 

おやゆびでおでストリーミング再生をする(LinkStation-基礎編)

前回のMac編に続き、今回は日本の代表的なNAS(ネットワークストレージ)であるBUFFALOのLinkStationを「おやゆびでお」の動画サーバーにする方法について解説します。前回の記事の「HTMLの作り方」までは同じなのでそちらをご覧頂いて、ビデオファイル(.mp4)とHTMLファイル(index.html)までは作っておいて下さい。

さてLinkStationといっても非常に多くのモデルが存在し、古いものになると今回説明するWebサーバー機能は利用できない場合があります。一概に対応しているかどうかは言えませんが、おそらく現行モデルの中でファームウェアが共通な、LS-XHL、LS-CHL、LS-WXL、LS-WSXL、LS-SL、LS-AVL、LS-VL、LS-WVL、LS-QVL、LS-XLシリーズなら大丈夫だと思います。それ以外の機種についてはサポートに「Webサーバー」機能がついているか問い合わせてみて下さい(Webアクセス機能ではなくWebサーバー機能です。PHPが使えるか、という聞き方でもいいかも知れません)。

1. thumbvideo用フォルダを作成する

shareなど適当な共有の1階層目に「thumbvideo」等の名前でフォルダを作成します。2階層より深いフォルダだと使用できないのでご注意下さい。

2. 管理画面でWebサーバー機能を有効にする

(写真はクリックで拡大)

 

  • ネットワーク->Webサーバー画面を開く
  • 「設定変更」ボタンをクリックすると上の写真の画面になる
  • 「Webサーバー機能」を「使用する」に
  • 「Webサーバー公開フォルダー」で先ほど指定したフォルダを選択する
  • 「保存」をクリック

3. ファイルをコピーする

もう一度作成したthumbvideoフォルダを開くと、cgi-bin、htdocs、logという3つのフォルダが出来ています。このうちのhtdocsの中にビデオファイルとhtmlファイルをコピーします。

4. おやゆびでおでアクセスする

「おやゆびでお」からアクセスするアドレスですが、
 「http://(IPアドレス):(ポート番号)/(ファイル名)」となります。それぞれの調べ方ですが、
  • IPアドレス: 管理画面の左側に表示されています(写真の青線の部分)
  • ポート番号: さきほど設定した通りです(標準では81)
  • ファイル名:自分で作成したhtmlファイルの名前です(index.htmlの場合は省略可)
となります。写真の例でいえば、
 「http://192.168.0.108:81/index.html」となります(ファイル名がindex.htmlの時)。
なお、前回のMac編でも同様ですが、このIPアドレスを「おやゆびでお」のホームページとしてブックマークしたとして、MacやLinkStationを再起動すると番号が変わる場合があります。毎回IPアドレスが変わらないようにするには、それらの機器で「DHCPを使用しない」設定にして固定IPアドレスを使う様にするか、(DHCPサーバーでもある)ブロードバンドルーターの方を設定して毎回同じ番号を割り振るように設定すると良いでしょう(どちらかといえばブロードバンドルーターで設定する方がトラブルになりにくいです)。やり方はお使いの機種によって違うので説明書などを参照してみて下さい。

おやゆびでおでストリーミング再生をする(Mac-基礎編)

「おやゆびでお」ではiTunesファイル共有でコピーした動画ファイルだけでなく、Webページ上にリンクされた動画を再生することができます。自宅のMac/PCやLinkStation等のNASをWebサーバーにして、そこに保存した動画ファイル一覧をHTMLで作って置けば、iPhoneやiPadの容量を気にすることなくいつでもお望みの動画を視聴することができます。

以下ではMacを使った方法を解説します。

技術的にはWebサーバーをインターネット上に公開すれば自宅外からもアクセスできますが、実際には通信速度の関係などで思うように再生されない場合があります。原則として自宅LAN内での使用を推奨します。また著作権的な問題のあるファイルをインターネットにパスワード制限等をせずに公開すると著作権者から多大な賠償金を請求されたり逮捕されたりということもあり得ますのでおやめ下さい。

■HTMLの作り方

ここではthumbvideoというフォルダの中に動画ファイルvideo1.mp4、video2.mp4、video3.mp3の3つのがあるとします。適当なテキストエディタソフト(テキストエディットでOK)で以下のように記述し、index.htmlといった名前で保存します。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>我が家の動画ライブラリ</title>
</html
<h2>我が家の動画ライブラリ</h2>
<ul>
  <li><a href="video1.mp4">ビデオ1</a></li>
  <li><a href="video2.mp4">ビデオ2</a></li>
  <li><a href="video3.mp4">ビデオ3</a></li>
</ul>
</body>
</html>

後半の<li>で始まる行の「video1.mp4」の部分が言うまでもなく動画のファイル名です。その後の「ビデオ1」が一覧で表示される名前です。ファイル名と同じでも構いません。この行を動画ファイルの数だけコピーして追加します。

Mac付属のテキストエディットで保存する場合、フォーマットに「Webページ(.html)」というそれらしいのがありますがこれは選ばないで、「標準テキスト」にして下さい。一旦index.txtといった名前で保存されるので、その.txtを.htmlに変更します。indexの部分はなんでもいいですが、半角英数字でつけます。保存されたファイルをダブルクリックしてSafariやInternet Explorer等が起動し、以下のような画面が表示されれば成功です。

我が家の動画ライブラリ

これを先ほどの動画と同じフォルダに保存します。

■Webサーバーを用意する(Mac編)

Macの場合は標準機能だけで対応できます。

  1. アップル->システム環境設定->共有を開く
  2. 写真の様に、「Web共有」をONに
  3. 「パーソナルWebサイトフォルダを開く…」をクリックし、開いたフォルダにthumbvideoフォルダ(中に動画とhtmlファイルが入っている)ごと移動する

この画面に表示されている2つのアドレスの上の方(この場合は「http://192.168.0.105/~furuta/」にフォルダ名とhtmlファイル名をつなげたものが「おやゆびでお」に入力するアドレスになります。つまりここでは、「http://192.168.0.105/~furuta/thumbvideo/index.html」ですね。ただし慣習としてファイル名がindex.htmlの場合は省略できるので、「…thumbvideo/」まででもOKです。

こんな感じ。アドレス欄の右にあるボタンからホーム画面として登録しておけば、次からは自動的にこのページが表示されます。

HTMLが書ける人は画面のデザインなど自由に凝ってみて下さい。

またMacのWake-on-LAN機能を有効にし、iPhoneアプリの「iNet ProiNet Pro - Network scanner - BananaGlue GmbH」等を設定しておけば、スリープしているMacをiPhoneから起こすことができるようになるので、動画を見たい時にいちいちMacのところまで電源ボタンを押しに行かなくて済んで便利でしょう。

 ■Windowsの場合は?

Windowsの場合は標準でWebサーバー機能がついていないのでやや面倒です。単に上記の様に手作業でリストhtmlファイルをするのであれば、04WebServerAN HTTP Serverで良いでしょう。将来的にフォルダ内の動画ファイルを自動でリストに追加するスクリプトまで使いたいのであれば、Apacheというやや高機能なWebサーバーソフトを使う事になるでしょう。いずれにせよネットや書籍で多くの解説が見つかると思うのでそれらを参考に挑戦してみて下さい。こちらでもできる限りサポートしていきたいと思います。

またhtmlファイルをWindowsのメモ帳で作る場合、「ファイルの種類」は「テキスト文書(*.txt)」でOKですが、「文字コード」を「UTF-8」にして下さい。ファイル名欄に「*.txt」という文字が入っているのを消し、「index.html」などとします。

 

おやゆびでおのiOS5上での不具合 (ThumbVideo bug on iOS5)

iOS5でおやゆびでお v1.1を使用した場合、垂直スライダーに下記の表示不具合が発生することが判明しています(表示の問題のみで操作は通常通りに行えます)。次バージョンでの修正を予定しております。ご迷惑をおかけしますが今しばらくお待ち下さい。

When you use ThumbVideo v1.1 with iOS5, some appearance problem about the  vertical slider will happen (You can use it as usual). I will fix it in next version. Please be patient.

正しい表示(Correct appearance)

iOS5での不具合発生時(wrong appearance on iOS5)

2回目の再生以降、スライダーの背景色が抜けてしまう。

The background color of slider becomes transparent, when you start the video at the 2nd time.

 

ThumbVideo v1.1 has released, how to use “Jog anywhere”

ThumbVideo version 1.1 has released.

The primary change is adding “Jog anywhere” function.

This is for mid-range jump ability longer than flick and preciser than the vertical slider. When you long-press anywhere on the video screen, the FF/REWIND icon will appear. Then draw a circle around the icon. the smaller circle is counted as 1 minute, bigger as 5 minute. The total jump minutes are shown at top of the screen. Turning clockwise increments the count (which results jump to forward direction), and counterclockwise for decrements (means move backward). When you release your finger, the playback point will change as the counter.

 

 

おやゆびでお v1.1 公開、どこでもジョグの使い方

おやゆびでお(英名: ThumbVideo)の1.1が公開されました。

主な変更は、以前のエントリでお伝えした「どこでもジョグ」機能の追加です(当初と若干操作方法が変わりました)。

フリックよりも長距離の移動をしたいけど、スライダーだと大雑把すぎる、という時の中距離移動用にと考案しました。動画再生中に好きな位置で長押しすると、写真のように「>>」マークが現れます。指を押さえたままその周りを囲むように円を描くジェスチャーをすると、一周毎に移動分数が加算されていき、指を離すとその分数だけジャンプします。時計回りで早送り、逆に回すと巻き戻し方向への移動となります。また移動分数は中心アイコンの直近で小さく円を描くと1分、少し離して大きく回すと5分になります。移動分数のプレビューは画面上部に表示されるのでそれを見て目的の分数をセットして下さい。

なお円を描いた時の周回カウントは円の下弦部で行います。ので、現状は2周半させても2周としかカウントされません。角度でもっと細かい計算をすることも可能ですが、なんとなく、1分と5分というわかりやすいカウントルールの方がシンプルでいいかなと思いこうしてます。この辺りの細かいチューニングはユーザさんのご意見も伺いつつ詰めて行きたいと思います。

 

 

How to copy your video files to ThumbVideo.

This is how you can copy your video files to ThumbVideo via “iTunes File Sharing”.

(Sorry, the screenshots are captured from Japanese version of iTunes.)

First, Connect your device to Mac/PC and start iTunes.

 

Click your device name from left sidebar. The right pain will change as the picture above.

 

Then click “App” with red arrow 2 and scroll the right pain to bottom (as the red arrow 3).

 

You may find the label “File Sharing” (or similar words in English) and App name list which iTunes File Sharing enabled. Choose “ThumbVideo” (as the red arrow 4). Then drag your video files from Finder (Mac) or Explorer (Windows) into the right pain (as the red arrow 5).

That’s all :-)

iTunesファイル共有ので動画ファイルを転送する方法

「おやゆびでお」にビデオファイルを転送する方法について質問を頂いたので図解で説明します。

これはiTunesファイル共有という機能を使います。お使いのMac/PCにiPhone/iPod touch/iPadを接続し、iTunesを起動して下さい。

左サイドバーの「デバイス」から自分の端末名をクリックすると、右側が写真の様に変わります。

次に赤矢印2の「App」をクリックし、写真の画面になったら、画面を下の方へスクロールします。

「ファイル共有」という見出しの下に、iTunesファイル共有に対応したアプリの一覧が見えてくるので、「おやゆびでお」または「ThumbVideo」を探してクリックします。この状態で、Finder(Mac)やエクスプローラー(Windows)からコピーしたいファイルを赤矢印5のエリアにドラッグ&ドロップします。

コピーが終わったら赤矢印1の端末名の右にあるイジェクトボタンをクリック接続を解除し、ケーブルを外し、「おやゆびでお」を起動してみて下さい。Localタブの中に今コピーしたファイルが見えると思います。