受賞作品　制作テクニック第一回　プレコンテスト　MVP作品　「YouTube Video Clipper」ファイルメーカー選手権に入賞した作品がどのように作られているのか、これから応募しようとしている人を初め、自分用にカスタマイズしたい人も気になるところ。今回は、プレコンテストでMVPに輝いた「YouTube Video Cliper」について、制作者の西村早苗さんに解説していただいた。気になる機能がどのように作られているのかを見ていこう。 ○YouTubeの操作をFileMakerの操作へ置き換えてみる参加の動機は私の会社（ファクトリー）は、Apple Store Shibyaでファイルメーカーのマンスリーイベントを開催しています。・見たい映像のキーワードを入れて検索する。・検索を実行し、キーワードに該当する映像に絞り込まれたYouTube の内容を表示する。記念すべき第一回目のイベントの中で、FileMaker Pro 8.5の新機・気に入った映像があれば、そのURLをデータベースに記録する。同 Clipperだったのです。得します。能紹介するデモンストレーション用に作ったのが、YouTube Video それから少しして、ファイルメーカー選手権のプレコンテストに参加してみませんか？というお話をいただきました。締め切りまで時間がないため、どうしたものかと考えたところ、コンテストに応募するにはちょうど良いプログラム(YouTube Video Clipper) 時にサイトのソースデータからタイトルやプレビューのURLなども取 ○データの表示と操作に必要な画面を考える・データベース起動時に表示するメニュー画面（図04：メニュー）があることに気づいたのです。イベント用だったので完成してない部分を作り込んで、操作上問題ないように少し手を加えてました。下準備このデータベースを作る前には、YouTubeについては少し下準備をする必要があります。いつもブラウザでYouTubeをどんなふうに利用しているのか?をイメージしながら、YouTubeのサイトの検索方法やソースデータから取得できるデータについて調べます。そして、FileMakerでの操作に置き換えたり、操作やデータを表示するのに必要な画面を考えます。（図01：キーワーを入れて検索／図02：リストから映像をクリック／図12：ソースデータ中の映像タイトル）図4 ・YouTubeからお気に入りの映像をクリッップするためのの画面（図 19：検索画面）図19 図1 ・クリップした映像をレコード単位で表示する画面（図06：詳細表示画図12 面）図2 図6 ファイルメーカー選手権「体験版で学ぶファイルメーカー初級講座」 Copyright © 2007 Mainichi Communications Inc. All rights reserved.　掲載記事の無断転載を禁じます。 001 ・各映像のプレビュー画面を蓄積されたレコードを一覧で表示する画面（図07：一覧表示画面） ◯4番目のステップでは、「 Webビューアの設定」ステップで［URLへ移動...］処理を設定し、「 Info07_SearchStart」フィールドで指定したURLで検索が実行され、該当するビデオが表示されます。（図10： [URLへ移動...]を選択）図7 画面ごとの処理や設定フィールドの定義は特殊なことはいっさい設定していないので、直接データベースのフィールド定義をみてもらうことにして、ここでは、各画面の処理内容やボタンに設定したスクリプトについて説明します。 ○処理が集中している検索用画面（図13：「Info_Search」レイアウト） Webビューアに表示されたYouTube上の映像をキーワードで検索し、気に入った映像があればクリップするための画面です。図10 STEP_04： Web ビューアの設定 [オブジェクト名: "webSearch"; URL: Info::Info07_SearchStart] 映像のクリップ検索して気に入った映像が見つかったら、クリップボタンで映像情報をデータベースに登録します。表示されたサイトのソースのから映像ファイルのパスやタイトル名などのテキストデータを抜き出すスクリプトが実行されます。次に、「Clip it」ボタンに設定した「InfoSearch_doClip」スクリプトを説明します。（図11：「InfoSearchdoClip」スクリプト）図13 キーワードで検索「Info08_SearchWord」にキーワードを入力した後、「Search」ボタンをクリックして初めて同じレイアウト上の「WebSearch」という名称のWebビューア上で検索が開始され、結果が表示されるようになっています。最初に「Search」ボタンに設定した「InfoSearch_doSearch」スクリプトを説明します。（図09：「InfoSearch_doClip」スクリプト）図11 ◯1番目のステップで現在の映像が表示されているURLを取得します。GetLayoutObjectAttribute関数を使って現在のWebビューアのエリアのオブジェクト名と「source」を指定することでURLの値を取得することができます。 STEP_01：図9 ◯ 1 番目のステップでは、 W e bビューアに値をセットする前に、変数を設定 [$url; 値:GetLayoutObjectAttribute ( "webSearch" ; "source" )] あらかじめ Yo u Tu b e 用の文字列を作成し、「 I n f o 」テーブルの ◯ 2 番目のステップでさらにサイトのソースデータを取得します。現在のYouTubeでは検索文字列の指定方法が変わったため、セット定することでサイトのソースデータを取得することができます。「Info07_SearchStart」フィールドにセットします。する値を以前の「"q="」から「"search_query="」と変更しました。 STEP_01：フィールド設定 [Info::Info07_SearchStart; "http://www. youtube.com-results?" & "search_query=" & Info:: GetLayoutObjectAttribute関数の2番目の引数に「content」を指 STEP_02：変数を設定 [$htmlString; 値:GetLayoutObjectAttribute ( "webSearch" ; "content" )] Info08_SearchWord] ファイルメーカー選手権「体験版で学ぶファイルメーカー初級講座」 Copyright © 2007 Mainichi Communications Inc. All rights reserved.　掲載記事の無断転載を禁じます。 002 ◯7番目のステップでは取得したURLから「watch?v=」を「v/」に置き換えます。YouTubeでは、「http://www.youtube.com/v/...」という形式すると映像だけのURLになります。取得した値は、「 http://www.youtube.com/watch?v=___映像名 ___」となっているため、これを「http://www.youtube.com/v/___ 映像名___」とします。 STEP_07：フィールド設定 [Info::Info05_CliipURL; Substitute ( Info::Info04_MainURL ; "watch?v=" ; "v/" )] 検索用のWebビューアの設定「Search」ボタンや「Clip it」ボタンと連動して機能するように、Web ビューアのオブジェクト名を付け、さらにWebアドレスにフィールドを指定します。オブジェクト名は「webSearch」と入力します。（図13：情報パレットのオブジェクト名に「webSearch」と入力する）また、W e b ビューアの W e b アドレスの欄に「 I n f o : : Info07_SearchStart」フィールドを指定します。（図14：Webビューアの設定でアドレスを指定） ◯10番目のステップでは、ソースの最初にある「<title>YouTube - 」で始まり、「 </title>」で終わるテキストテキストを取得します。これがタイトルのデータです。（図12：ソースデータのタイトル） Midle関数で使っている、$topPos変数の値は8番目のステップでセットされ、$endPos変数の値は9番目のステップでセットされます。図14 「Clip it」ボタンの作り方「Info_Search」レイアウトにある星形の「Clip it」ボタンは押したときにその形のまま反転します。実は、グラフィックソフトで星形を作ってレイアウトに配置してもボタンを押したときに星形に反転せず、四角く反転してしまいます。そこで、「 Clip it」ボタンがどうなっているのか説明します。グラフィックソフトで作った「Clip it」画像の上に、透明のオブジェクトがあり、それにクリップする機能が割り当てられています。その透明なオブジェクトのグループを解除します。透明のままだとわかりずらいので、色をつけてみてください。実は線ツールを使ってたくさんの縦線で根気よく星の形をつくっていることがわかります。（図21：図12 STEP_10：変数を設定 [$titelString; 値:Middle ( $htmlString ; $topPos + 17 ; $endPos - $topPos - 17 )] ◯18番目のステップではクリップした映像のソースデータからプレ中央の部分をまとめてドラッグしてみると）グループを解除するときにボタンに設定した内容が失われるので、あらかじめボタンをコピーしておき、レイアウト上の別の場所にドラッグしてグループ解除してみてください。この方法を利用すれば、他のグラフィックソフトで作成した不定形のグラフィックをその形のまま反転させることができます。ビューのURLを取得します。プレビューのURLは映像名の一部使っているため、「 youtube.com/ vi/___映像名___/2.jpg」となっている部分を14番目のステップ取得し、さらに直前の文字列から、「http:」で始まる位置を17番目のステップで取得します。 STEP_18：変数を設定 [$previewURL; 値:Middle ( $htmlString ; $topPos ; $endPos + Length ( $searchString ) $topPos )] ◯16番目のステップでは、プレビュー画像が一覧表のWebビューアのエリアの中央に表示されるための H T M Lソースを生成し、「Info09_DisplaySetting」フィールドにセットします。 STEP_20：フィールド設定 [ I n f o : : I n f o 0 9 _ D i s p l a y S e t t i n g ; " < h tml><body><center><img src=" & "\"" & Info: Info06_PreviewURL & "\"" & ></center></body></ html>"] ファイルメーカー選手権「体験版で学ぶファイルメーカー初級講座」 Copyright © 2007 Mainichi Communications Inc. All rights reserved.　掲載記事の無断転載を禁じます。図21 ○クリップした映像を表示（図15：「Info_Detail」レイアウト）ちょっと気をつかったのが、画面を切り替えるだけだと映像が再生されたままになるので、一覧表示へ切り替わるときや次のレコードに移動するときに、再生を止めるという処理を実行しています。例えば、「 LIST」ボタンに設定した「InfoDetail_toList」スクリプトを説明します。（図16：「InfoDetail_toList」スクリプト） 1番目のステップで「webClip」のWebビューア設定で［リセット］を選択します。さらに2番目のステップで0.5秒間処理を停止するようになっています。 003 サイトの仕様変更への対応 YouTubeに限らず、サイトの仕様が変更されることがあります。そのため、Webビューアを利用して特定のサイトを対象としたデータベースを作成する場合、定期的にチェックし、対応する必要があります。今回、この参加作品も一部を変更する必要がありました。また、取得するデータの扱い方が必ずしも一定ではないため、いろいろなパターンへ対応する必要があります。この作品では、YouTubeの映像に付属す図15 るプレビュー画像のURLを取得する処理で、以前のままだとURLが取得できないケースがあることに気がつきました。そのため、取得方法を変更しました。図16 ■注意事項 YouTube Video Clipperがファイルメーカー選手権月間MVPを受賞した後、YouTubeの仕様が一部変わったため、受賞時に掲載されていたYouTube Video Clipperでは検索ができなくなりました。本稿は、現在のYo u Tu b eの仕様に合わせて修正したYo u Tu b e Video Clipper ver.2を対象として書かれています。 YouTube Video Clipper ver.2をダウンロードの上、お読みください。 STEP_01： Web ビューア [オブジェクト名: "webClip"; 処理: リセット] ○プレビューの一覧表示（図17：「Info_List」レイアウト）この画面のW e bビューアにはクリップ時に生成されたプレビューのHTMLソースをセットしています。よく外部のファイルに保存した HTMLソースを表示するという方法がありますが、ここでは、保存せずに直接フィールド値を利用する方法で表示しています。そのために、HTMLソースの先頭にWindowsであれば「about:」、 Macであれば「data:text/html,」という文字列をつけることで、表示することができます。ただし、この方法ではHTMLソースの文字列が長いと表示できないケースがあります。 H T M Lソースの先頭文字列は、データベースの起動時に実行される「 S t a r t U p 」スクリプトでプラットフォームをチェックし $$headHTML変数にセットしています。（図18：「StartUp」スクリプト）図17 図18 STEP_02：変数を設定 [$$headHTML; 値:If ( Abs ( Get ( プラットフォーム) ) = 2 ; "about:" ; "data:text/html," )] ファイルメーカー選手権「体験版で学ぶファイルメーカー初級講座」 Copyright © 2007 Mainichi Communications Inc. All rights reserved.　掲載記事の無断転載を禁じます。プロフィール西村早苗（にしむら・さなえ）有限会社ファクトリー代表（http://www.factory-1987.co.jp） 1986年、自社ソフト開発や受託システム開発、デザイン、執筆業務、コンサルティングなどを行うファクトリーを立ち上げ、現在に至る。主な自社開発ソフトにNewton用インターネットメールソフト「i-mail」、4th Dimension用画像DB構築ツール「4D Image Filing Tools」、FileMaker Pro用画像DB構築ツール「Factory's FileMaker Plug-in」など多数。 FileMaker Proを主とした書籍および専門誌への執筆多数。FileMaker関連の著書に「ここまでできるファイルメーカーPro ヒント＆テクニック」「現場の必須テクニック FileMaker Pro 7の仕事術」、近著には「FileMaker Pro 8 &8.5 実用テクニック」がある。 004