「おやゆびでお」が「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の日本語変換の新仕様と一部アプリとの相性問題について

待望のiOS5が公開になりましたが、iPhoneとiPod touchの日本語変換時の予測変換候補の表示位置がかわったことで、一部のアプリ(というか結構多いんじゃないかと)で絶望的に使いづらくなっています。OSとしてはそう悪くない仕様変更なので、徐々に各アプリが画面レイアウトを修正対応していってくれれば鎮火する問題なんですが、日常の使い勝手を重視する方はそれらを待つのも手かも知れません。

例えばこれはFacebookアプリの画面。左は英語キーボード、右は日本語キーボードを表示した状態です。iOS5の日本語キーボードでは上部に予測変換候補枠が常時表示されるようになり、それがアプリの各ボタンにかぶってしまっています。

今まではどのキーボードでも固定サイズだった(予測変換候補は入力位置のすぐ下に出ていた)ので、それを基準にアプリの画面レイアウトを設計していたアプリは軒並みこの問題に遭遇しています。仮にここにボタンを置いていなくても、文章の最後の一行が選択できなかったりとやはり問題に。

下記はHootSuiteアプリの例。

写真の様にMenuボタンやあと何文字ツイートできるかのカウンターがキーボード上に出ていますが、やはりこれも日本語入力時は隠れて見たり押したりができなくなります。もちろん都度日本語以外のキーボードに切り替えれば普通に使えるんですが、やってみるとなかなかに不便でイライラします。またFacebookアプリはキーボードを切り替える度にカーソル位置が末尾にジャンプしてしまう仕様のようで、一度書いた文章の途中に文字を挿入することが事実上できなくなります。

この問題は日本語キーボード固有なので、海外産のアプリだと開発者が認識するのが遅れる可能性があります。実際、Facebookアプリは先日iOS5対応を謳うバージョンがリリースされましたがこの問題に関してはノータッチです。直して欲しい場合は積極的に報告した方が良いかも知れません。

σ(^^)自身もアプリ開発をしてますが、これはどうするのがいいんでしょうね。もちろん一番簡単なのはテキスト入力欄の下端を少し上にあげてやればいいんですが、日本語以外のキーボードやiOS4以前を使っている場合は貴重なスペースを無駄にしてしまいます。

Apple純正アプリはどう対処しているのでしょう?こちらは「メッセージ」(iMessage)アプリの例です。

なんと、キーボードが予測変換候補を表示すると、入力欄そのものが上にズレてくれます!さすが純正、抜かりはないですね。ただこれは自分で作ろうとすると地味に大変そうな予感。テキスト欄自体もダイナミックにサイズ可変でないといけないですし、このアプリのようにスクロールを前提としたものにはいいですが、それ以外だとどうかなという気もします。

プログラミング的にいうと、そもそもキーボードの言語モードってアプリ側から知ることができるんでしょうかね?iOS5でAPIが追加されてるのかな?各アプリがどう対応するか、API的にはどういう手段が使えるのか、少し見守っていきたいと思います。

おやゆびでおの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タブの中に今コピーしたファイルが見えると思います。