日常英語のようなLiveCode 6プログラミングを学習 / 中高生のプログラミング教育

14: マルチメディア２

この章の概略

QuickTime Player オブジェクトのビデオ・ファイル設定、コントローラー（Controller）の有無、バファー（Buffer）について。

ビデオのランニングタイム。LiveCodeの時間ファンクション、シェル（shell）を使ったタイムゾーンの時間の取得など少し時間の話。

オープンソース版の「LiveCode Community Server」のインフォ。

ボタンのアイコンをイメージにして、カスタムにします。

スクロールバーとサウンドのボリューム調整。

プログレスバーの作成とトラブルの対処。

この章で使うイメージ、サンプル・スタックをダウンロードしてください。
http://kenjikojima.com/livecode/download/multiMedia14.zip

クイックタイム・プレイヤー

最近はWindowsでも、ほとんどQuickTimeがプレインストールされていますが、念のため「the qtVersion」でバージョンを調べてみます。QuickTimeがインストールされていないと「0」が返されます。

if the qtVersion <= 6 then answer "You need QuickTime 7 or later."
　もしQTバージョンが６以下だったら、「QuickTime 7以上が必要です」と応えなさい。

古いバージョンのQuickTimeは、フラッシュ・ファイルも再生できましたが、セキュリティ上の理由ということで、いつからでしたか再生できなくなっています。現在の私のマシーンは、ビデオ編集のためのQuickTime 7 と、QuickTime Player 10 を入れているので、「the qtVersion」では「7.6.6」が返されます。Mac OSでは「7.6.6」、Windowsは「7.7.4」が現在配布されているので、インストールされていないユーザーには「バージョン7以上が必要」と表記すれば良いかと思えます。

普通こういうチェックはスタックが開かれた直後に行われて、QuickTimeがインストールがされていなかったら機能しないアプリケーションだったら、アラートの後にプログラムを終了させます。メイン・スタックでもメイン・スタックのカード１でも、どちらのスクリプト・エディターに入れても良いです。

on openStack
   if the qtVersion <= 6 then 
      answer "You have to install QuickTime 7 or later." &cr& \
            "Sorry, I'm going to quit."
      quit
   end if
end openStack

ニュー・メインスタック（New Mainstack）をFileメニューから作ってください。スタックの「name」も「title」も「QuickTime」としておきます。名前（name）は、LiveCodeでリザーブされている言葉はできるだけ避けたほうが良いですが、「QuickTime」はリザーブされていません。ツール・パレットから「QuickTime Player」をカード上にドラッグ＆ドロップします（下図）。

「Player」インスペクターの「Source（fileName）」を見ると、LiveCodeアプリに入っているリソースから「Sample.mov」がすでにリンクしてあります（上図）。「Sample.mov」は、プレイヤー・オブジェクトに見えるブルーのイメージだけの「MOVファイル」です。「QuickTime Player がサポートするメディア形式 http://support.apple.com/kb/HT3775?viewlocale=ja_JP 」がアップルのサイトにありますから参照してください。私の場合ビデオは、オリジナルを「MOV」で作って、その後「MP4」に変換、オーディオは「MIDI」か「MP3」を使う事が多いです。「MIDI」はQuickTimeではもう公式にはサポートされていませんが、LiveCodeで再生はできます（このチュートリアルはLiveCodeコミュニティ版についてのみ書いています）。

プレイヤー・オブジェクトは、必ずファイルをリンクさせます。インスペクターで「Sample.mov」を他の「MP4」ファイルに変えてみます。「Source（fileName）」の右端にあるフォルダーのアイコン（上図）をクリックすると、ファイルをセレクトするダイアログが出ます（下図）。前章で使ったサンプル・ビデオ「myVideo.mp4」のあるフォルダーを開いても、ファイルは選べません。プレイヤー・オブジェクトはデフォルトで「QuickTime Movies（MOVフォーマット）」だけが選べる設定になっているため、「Format」を「All Files」に変更します（下図）。

これで「myVideo.mp4」が、プレイヤーにリンクして映し出されます。これをスクリプトで書いてみます。「All Files」ではなく「MP4ファイル」のみが選べるダイアログにしました。

answer file "Choose a MPEG-4 Video:" with type "MPEG-4 |mp4"
if it is not empty then set the fileName of player 1 to it

　「MPEG-4ビデオを選びなさい」とある「MPEG-4」のファイルが選べるダイアログを開きなさい。
　もし「it」が空でなければ、プレイヤー１のファイルネームを「it」に設定しなさい。

プレイヤー・オブジェクトの下に見えるコントローラーで、プレイとストップと音量が操作できます。プレイヤー・オブジェクトのインスペクターを開いて見ると、上から「Buffer」「Controller」「Controller toggle」「Focus with keyboard」がセットできるようになっています。「Buffer」は後ほど説明します。デフォルトでは「Controller」がチェックされていてますが、チェックを外すと、プレイヤー・オブジェクトのコントローラーが消えます。コントローラーがない状態では、普通のイメージなのかビデオなのか、ユーザーが判断しにくいと思えたら、「Controller toggle (showBadge)」にチェックを入れると、上図のようなバッジ・アイコンがイージの左下に現れます。コントローラーをなくすとビデオ画面の天地が少し短くなります。ビデオ画面のオリジナル・サイズは「11: ２種類のイメージ」の時にも使った、「formattedWidth」と「formattedHeight」で求める事ができます。

put the formattedWidth of player 1 , the formattedHeight of player 1

イメージの時のようにサイズを変えたかったら、この２つを求めて比率で調整します。正しい画面比率でコントローラーを見せるには、天地を「formattedHeight（オリジナル）」より20ピクセル大きくしてください。

ビデオの長さ、時間の話

ビデオの長さ（時間）は「duration　デュレイション」から求めます。

put the duration of player 1

をメッセージ・ボックスから送ると「21082」が返されました。秒にするには、ムービーの１秒間のタイムスケール（timeScale）から換算します。

put the timescale of player 1

このプレイヤーのタイムスケールは「600」で返されましたから、１秒の 600 分の１と言う単位からこのビデオのデュレイション（duration）ができている事が分かります。

put (the duration of player 1) / 600

秒数「35.136667」が返されるので、35.14秒と言う事になります。

コンピュータは非常に高速で処理をするので、日常私たちが使っている時間の分や秒だけでは補えきれません。LiveCodeでは「second(s)　秒」よりも小さな単位の「tick(s)　ティクス」と「millisecond(s)　ミリセコンズ」で、それを補っています。「tick」は１秒の 60 分の１の単位です。「millisecond」は１秒の 1000 分の１の単位です。「second(s)」、「tick(s)」、「millisecond(s)」はファンクション（function）としてもキーワード（keyword）としても使われます。ファンクション（function）として

put the milliseconds

put the ticks

put the seconds

を各行メッセージ・ボックスから送ると、非常に大きな数字を返してきます。これはどちらもグリニッチ標準時（Greenwich Mean Time）1970年１月１日の午前0時0分0秒からの、ミリセコンズ（milliseconds）とティックス（ticks）、セコンズ（seconds）を返した数字で、ユニックス・タイム（Unix time）と呼ばれる時間です。

ついでなので、現在の日にちや時間のファンクションを書いておきます。

the date 
　「6/7/13」を返します。
the long date 
　「Friday, June 7, 2013」を返します。
the abbreviated date
　「Fri, Jun 7, 2013」を返します。
the time 
　「4:03 PM」を返します。
the long time 
　「4:03:21 PM」を返します。
the abbreviated time 
　「4:03 PM」を返します。
put the internet date
　「Fri, 7 Jun 2013 16:03:21 -0400」を返します。
　曜日、日付、時刻に続いて最後に、グリニッチ標準時との時差

インターネットに関わって来ると、世界各地のローカル・タイムを知る必要がいろいろな場面で出てきます。LiveCodeの言葉「the internet date」で自分のいる時間帯を知る事もできますが、Unixシステムで使われるコマンドラインを、LiveCodeのシェル（shell）と言うファンクションを使って、世界各地のローカル・タイムを知る事ができます。シェル（shell）のこのコマンドラインは、Mac OSのターミナルで使われるものと同じで、Windowsの環境では使えません。WindowsのLiveCodeのシェル（shell）は、DOSコマンドが使えます。もしクロスプラットフォームで開発していたら、プラットフォームが「Windows」でなければ、と言う「if文」を始めに使います。

-- もしプラットフォームがWindowsでなければ
if the platform is not "Windows" then 
      put "Asia/Tokyo" into $TZ     -- 都市名を$TZに入れる
      put shell("date") into JSTime 
      put "America/New_York" into $TZ     -- 都市名を$TZに入れる
      put shell("date") into EDTime 
      put "Japan Standard Time: " & JSTime & \
                  "Eastern Daylight Time: " & EDTime
end if

　　日本の標準時（JST = Japan Standard Time）
　　　「Sat Jun  8 19:37:27 JST 2013」
　　アメリカ東海岸時間（EDT = Eastern Daylight Time）
　　　「Sat Jun  8 06:40:02 EDT 2013」が返されます。

使われているドル・サイン「$」はUnixシステムの環境を指し示すキャラクターです。「$TZ」に都市名を入れて、「shellファンクション」のパラメータを「date」にすると、Unixで設定されたタイムゾーンの時間が返されます。ここでは「Asia/Tokyo」と「America/New_York」の２つだけののタイムゾーンですが、英語ウィキペディアの「List of tz database time zones http://en.wikipedia.org/wiki/List_of_tz_database_time_zones 」でタイムゾーンのリストが見ることができます。

「shell」を使ったUnixコマンドは、LiveCodeの使えるLinux、Macサーバーで特に重宝します。
オープンソース版の「LiveCode Community Server」は
http://downloads.livecode.com/livecode/server/ からダウンロードできます。
インストール等のインフォは http://livecode.com/developers/guides/server/

Windowsでタイムゾーンを取得するDOSコマンドを、私は知りません。Windowsでは「shell」を使うとコンソール・ウインドウズが開かれてしまうので、それを閉じる設定を始めに行います。Windowsの「shell」で「date」を取得する例文です。

set the hideConsoleWindows to true
put shell("date")

　　The current date is: 2013/06/08 
　　Enter the new date: (yy-mm-dd)

の２行が返されます。

コントローラーを使わないクイックタイム・プレイヤー

コントローラー（Controller）をオフにしたプレイヤーは、インスペクターの「Foucus with keyboard」にチェックを入れていれば、キーボードのスペース・バーでプレイ、ストップができます。しかしそれでは少し心もとないと感じた場合、「Play」「Pause」「Stop」のボタンを別に作る事ができます。ツール・パレットから「Play」「Pause」「Stop」を作ります（下図）。

名前（name）は「tPlay」レイベル（label）は「PLAY」
名前（name）は「tPause」レイベル（label）は「PAUSE」
名前（name）は「tStop」レイベル（label）は「STOP」にしました。

-- 「PLAYボタン」に入れるスクリプト
on mouseUp
   play player 1
end mouseUp

-- 「PAUSEボタン」に入れるスクリプト
on mouseUp
   set the paused of player 1 to true
end mouseUp

-- 「STOPボタン」に入れるスクリプト
on mouseUp
   stop player 1
end mouseUp

特に説明の必要もないくらにシンプルです。しかしこれだと「PAUSEボタン」と「STOPボタン」の違いが明確ではありません。プレイヤーをストップさせた時点で、ビデオを始まりか終わりに持って来ると言う方法を取ります。現在のビデオの位置（時間）は「the currentTime of player 1」で得る事ができますから、カレント・タイム（currentTime）を「0」にセットすれば、ユーザーがストップのクリッックでビデオの位置（時間）は最初に設定されます。

--「STOPボタン」に入れるスクリプト
on mouseUp
   stop player 1
   set the currentTime of player 1 to 0
end mouseUp

　赤文字が追加するスクリプトです。

ボタンをイメージにしてカスタムに

http://kenjikojima.com/livecode/download/multiMedia14.zip
ボタンにイメージのアイコンを表示させます。それぞれダウンロード・ファイルに３種類のイメージを用意しました。１）普通の状態のボタン。２）マウスが被さった時のボタン。３）クリックされた時のボタンの３種類です。今回は四角にしていますが、PINGかGIFFの透明イメージを作れば、丸にでも三角でも、好きな形ができます。（PINGの方が仕上がりはきれいです）

Fileメニューの「Import As Control > Image File...」からカード上にイメージをインポートすると、カードの中央にイメージが現れます。インポートしたイメージは、ユーザーが見えない場所、例えば「Xのマイナスロケーション」とかに移動させれば良いのですが、アイコン・イメージを沢山必要な場合、私はアイコン専用のカードを作ってそこに並べて置く事が多いです。必ずそうしなければいけないと言う事ではありません。

イメージをインポートしたら、目的のボタンのインスペクターで「Show name」のチェックを外します。もしイメージに透明部分がある時は「Opaque」のチェックも外して、透明なバックグラウンドのボタンにします。

インスペクターの「Icons & Border」を開いて、「Icon」の右端のマジック・ワンドのようなアイコンをクリックすると（下図）

イメージ・ライブラリーが開きます。メニューから「This Stack」を選ぶと、このスタックにインポートしたイメージのリストが出ます。

このイメージのライブラリーは、正しいイメージを表示しない事が時々あります（下図）。マウスを被せた時に出て来るツールチップは、インポートしたイメージの「ID」です。アイコンとして表示するイメージをクリックで選んだら、「OK」で「Icon　アイコン」がセットされます。

インスペクターの「Icon」に出て来る数字は、イメージの「ID」です（下図 1022）。IDが分かっていれば、イメージ・ライブラリーを開かずにIDをタイプできます。次にハイライト（Hilite Icon）のアイコンを同じ方法で、フーバー（Hover Icon）のアイコンも同じにセットします。フーバー（Hover）はマウスがターゲットの上を通過した時に反応します。イメージを表示させたボタンは、「Three D」「Border」「Hilite border」も必要がないので、チェックを外します（下図）。

注意：IDは、イメージをスタックにインポートした時の状態によって、このチュートリアルに書いてあるナンバーとは違っている場合があります。

イメージ・サイズがピッタリとボタンのサイズに合うように「Size & Position」を開いて、Width も Height も「Fit content」をクリックして調整してください。

同じ作業を「PAUSE」「STOP」のボタンでも行います。

少し試してください。手順通り進めていたら、うまく行っているはずです。これで３つのボタンのそれぞれの機能は完成ですが、「PLAY」をクリックしてビデオが始まったら、「PLAY」を「PAUSE」にするという事もできるはずです。つまり「PLAY」と「PAUSE」を１つにまとめて、ボタンは２つだけに整理しても良いわけです。

手順としては、「PLAY」と「PAUSE」のスクリプトを１つにまとめて、切り替えでアイコンのイメージを変えます。アイコンのイメージは「ID」でセットされていますから、「PLAY」と「PAUSE」で使っているイメージの「ID」を調べなくてはいけません。上で見たようにボタンのインスペクターを開ければ、それぞれの「ID」は知る事ができます。また直接インポートしたイメージのインスペクターで「ID」が分かります（下図）。

「PLAY」のIDは「icon = 1022, hiliteicon = 1023, hovericon = 1021」で
「PAUSE」のIDは「icon = 1025, hiliteicon = 1026, hovericon = 1024」です。
テストに「iconTest」と言うボタンを作って、メッセージ・ボックスから送ってみます。「button」は短縮形の「btn」を使っています。

set the icon of btn "iconTest" to 1025
　「PAUSE」の普通のボタンがセットされます。
set the icon of btn "iconTest" to 1022
　「PLAY」の普通のボタンがセットされます。

「PLAY」と「PAUSE」のスクリプトを１つにして、アイコンが切り替わるボタンにします。

-- button "tPlay" に入るスクリプト
on mouseUp
   if the icon of btn "tPlay" is 1022 then
      play player 1                            -- ビデオが動き始める
      set the icon of btn "tPlay" to 1025      -- イメージ "PAUSE"
      set the hiliteIcon of btn "tPlay" to 1026
      set the hoverIcon of btn "tPlay" to 1024
   else
      set the paused of player 1 to true    -- ビデオがポウズで止る
      set the icon of btn "tPlay" to 1022   -- イメージ "PLAY" 
      set the hiliteIcon of btn "tPlay" to 1023
      set the hoverIcon of btn "tPlay" to 1021
   end if
end mouseUp

これで、ボタン「PAUSE (tPause)」は、必要なくなりましたから削除してください。実はもうひとつ修正しなくてはいけない箇所があります。ボタン「tPlay」のアイコンが「PAUSE」の時、ボタン「STOP」がクリックされる可能性があるので、「STOP」がクリックされたらボタン「tPlay」のアイコンは必ずイメージ「PLAY」に戻さなくてはいけません。

-- button "tStop" に入るスクリプト
on mouseUp
   stop player 1
   set the currentTime of player 1 to the endTime of player 1
   set the icon of btn "tPlay" to 1022   -- イメージ "PLAY"
   set the hiliteIcon of btn "tPlay" to 1023
   set the hoverIcon of btn "tPlay" to 1021
end mouseUp

カスタム・コマンドにしてカードにまとめる

さて、機能的にはこれでも良いですが、IDナンバーが違っているだけの、同じようなスクリプトが幾つかダブっていますね。これをまとめたカスタム・コマンドにして、カードのスクリプト・エディターに入れる事にしましょう。今の処はそう複雑でもないコードですが、少し入り組んで来ると、カスタム・コマンドやカスタム・ファンクションで引き出せた方が都合の良い事も多いですし、読み返してもすっきりとします。スクリプトはまとめる習慣をつけておきましょう。カスタム・コマンドが何かよく覚えていなかったら「09: 算数クイズ２」を読み返してください。

カスタム・コマンドは「iconSet」と言う名前にしました。パラメータは４つあります。上のスクリプトを見ると「btn "tPlay"」が幾つもダブっています。全部「PLAY」ボタンなので、カスタム・コマンドの中でも「btn "tPlay"」を使う事もできますが、あるいは後から他のボタンのアイコンも変える必要が出て来る可能性もあるので、こういう場合はできるだけ汎用で使える形にしておくのが得策です。下に書いた緑文字の１行目コマンド名「iconSet」の次にある「pBtnName」は、アイコンを変えるターゲットのボタン名です。

-- カードのスクリプト・エディターに入れるカスタム・コマンド
command iconSet pBtnName, pIconID, pHiliteID, pHoverID
   set the icon of btn pBtnName to pIconID
   set the hiliteIcon of btn pBtnName to pHiliteID
   set the hoverIcon of btn pBtnName to pHoverID
end iconSet

次の３つのパラメータ「pIconID, pHiliteID, pHoverID」は、オリジナル・イメージのIDナンバーです。ボタン「tPlay」のスクリプトをカスタム・コマンド「iconSet」を使って書き換えます。

-- ボタン「tPlay」の書き換えたスクリプト
on mouseUp
   if the icon of btn "tPlay" is 1022 then
      play player 1
       iconSet "tPlay", 1025, 1026, 1024   -- カスタム・コマンド
   else
      set the paused of player 1 to true 
       iconSet "tPlay", 1022, 1023, 1021   -- カスタム・コマンド
   end if
end mouseUp

-- ボタン「tStop」の書き換えたスクリプト
on mouseUp
   stop player 1
   set the currentTime of player 1 to the endTime of player 1
   iconSet "tPlay", 1022, 1023, 1021   -- カスタム・コマンド
end mouseUp

これでずいぶんスッキリしてきました。「PLAY」「STOP」ボタンもビデオ画面の中に入れられたら、レイアウト的にはスッキリする時もありますね。エディット・ツールで「PLAY」と「STOP」ボタンを、プレイヤー・オブジェクトの上に移動させてください。レイヤーでは確かにボタンの方が上にあるのに、ビデオ画面の中に隠れてしまいます。

プレイヤーのインスペクターに「Buffer　バファー」というのがあります（上図）。LiveCodeのプロパティとしての正確な言葉は「alwaysBuffer」です。「Buffer　バファー」は何かの衝撃を和らげるという意味なのですが、「alwaysBuffer」を「true」にすることで、ビデオ画面を描く為にイメージのメモリーを短時間蓄えておく処理で起きるフリッカー（ちらつき）を、和らげる働きをします。「PLAY」と「STOP」ボタンを、プレイヤー・オブジェクトの上に移動させた時に、見えなくなってしまったのは、そのフリッカーのせいだからです。インスペクターの「Buffer　バファー」にチェックを入れておけば、ボタンは見えるようになります。これはアイコンのボタンだけでなく、他のグラフィック等のオブジェクトにも有効です。「alwaysBuffer」を「true」にすると、バッジ（Budge）は見えなくなるので、「Controller toggle（showBadge）」はtrueにしても働きません。

サウンドのボリューム調整

サウンドのボリューム調整を作ります。いろいろなボリューム調整の形体はありますが、今回はツール・パレットからスライダー（Slider）をドラッグ＆ドロップして使います。スライダーのオブジェクト名は「scrollBar」で、そのスタイル（style）を「scale」に設定した形を取っています。「scale」はインスペクターの「Type」では「Slider」となっていて、ちょっと混乱しやすいですね。オブジェクト・スクロールバー（scrollBar）はスケール（scale）の他に、スタイル（style）を「scrollbar（グループ・イメージ等をスクロールさせる）」と「progress（作業の進行状況を視覚化する）」に設定できます。スライダー（Slider）はデフォルトでは横位置なので、インスペクターの「Orientation」を「Verticle」にして、タテの設定に直します（下図）。

ボリュームのスクリプトに行く前に、スクロールバー（scrollbar）をスライドした時の数字を設定しておきます。サウンドの調整には「playLoudness」を使って「0　ゼロ」から「100」までの設定ができますから、最大を「100」最小（無音）を「0」にしますが、タテ位置のスライダーは天がスタート・バリュー（Start value）で、地（下の位置）がエンド・バリュー（End value）ですから、インスペクターに「100」と「0」を入れてください（上図）。通常のスタート・バリューの反対にしないと、扱いにくいボリューム調整になってしまいます。

Current Value(現在の値）はスクロールバー（scrollbar）をスライドさせる都度変わっていますから、設定の必要はありません。インスペクターの表示で「Current Value」としているプロパティは、LiveCodeでは「thumbPosition」と言います。英語の「thumb」は親指の事ですが、スクロールバーの丸い移動する印をサム（thumb）と言って、そのポジション（position）を「thumbPosition」と呼んでいます。「thumbPosition」は長いので、短縮形の「thumbPos（サンポス）」が、LiveCodeデベロッパーの間では普通に使われます。現在のサンポス（thumbPos）をメッセージ・ボックスから聞いてみましょう。

put the thumbPos of scrollBar 1
　スクロールバー１（scrollbar 1）のサンポス（thumbPos）を返しなさい。

スタート・バリュー（Start value）を「100」にしているので、サム（thumb）をトップに持って行くと「100」を返します。ボリューム設定の言葉「playLoudness」で設定してみます。

set the playLoudness to 100
　これで最大ボリュームです。
set the playLoudness to 0
　これで最小ボリュームで無音です。

これで設定できますが、これはシステムのボリューム設定ですから、個々の「player 1」のボリューム設定にします。以下がスクロールバー１（scrollbar 1）に入れるスクロプトです。

on mouseUp
   set the playLoudness of player 1 to the thumbPos of me
end mouseUp

　オン　マウスアップ
　　　プレイヤー１の音量を私のサンポス（thumbPos）に設定しなさい。
　エンド　マウスアップ

「me」と書いているのは「scrolbar 1　（sb 1）」と同じです。

スクロールバー１（scrollbar 1）のトップにスクエア・ボタン（Square Button）を置いて「最大」とレイベル（Label）に書いて、サイズはできるだけ小さく、ボトムには「無音」としたスクエア・ボタン（Square Button）を置きます。プロパティはそれぞれ好みでも良いのですが、私はボーダーを取って、ハイライトにした時のカラーをシルバーにしました（下図）。

-- ボタン「最大」に入れるスクリプト
on mouseUp
   set the thumbPos of sb 1 to 100
   set the playLoudness of player 1 to 100
end mouseUp

-- ボタン「無音」に入れるスクリプト
on mouseUp
   set the thumbPos of sb 1 to 0
   set the playLoudness of player 1 to 0
end mouseUp

プログレス・バー

ダウンロードしたスタック「quickTime.livecode」を参照してください。

これから書くプログレス・バー（Progress Bar）の設定は、中級入門くらいに属する内容かもしれません。ここではビデオの時間経過を視覚化するサンプルで作っていますが、大量のデータを処理して行く経過などでも、よく見られるプログレスバーですから、考え方をだいたいでも理解しておくのが良いかと思います。

ツールパレットからプログラス・バー（Progress Bar）をプレイヤーの下に置いて、左右はプレイヤー・オブジェクトと同じ長さにします（上図）。名前（Name）は「timeBar」としました。オブジェクトのプログレス・バー（Progress Bar）は、オブジェクトのスクロールバー（scrollbar）のスタイル（style）をプログレス（progress）としたもので、設定するプロパティはスライダー（slider）とほとんど同じです。考え方としては、プログレス・バー（Progress Bar）のエンドバリュー（endValue）を、ビデオの長さ（時間 = duration）にして、ビデオのカレントタイム（currentTime）をプログレス・バーのサンポス（thumbPos）に設定して行けば良い事になります。このサンプルでは100ミリセコンド（milliseconds）毎に、バーの進行状況を書き換えて行きます。

100ミリセコンド（milliseconds）毎にバーの進行状況を書き換えると言う事は、同じステートメントを１０分の１秒毎にコンピュータに送り続けなくてはいけません。LiveCodeには「idle」と言うメッセージ・ハンドラーもありますが、こういう場合より効率が良く、負担も少ない「send コマンド」を使います。

カスタム・コマンドの名前は「videoTimer」としました。カードのスクリプト・エディターに書きます。だいたいの構成と説明（緑文字）を下に書きました。

1) command videoTimer    --  これはカスタム・コマンド「videoTimer」です
2)   send videoTimer to me in 100 milliseconds
3)   put the result into lVideoTimerID
4)   -- 実行されるステートメントがこの後に来る
     set the thumbpos of sb "timeBar" to the currentTime of player 1
5)   -- ストップする時の条件とその処理
　　　if the thumbpos of sb "timeBar" is the endValue of sb "timeBar" then
　　　　　　-- コマンド「videoTimer」キャンセル
　　　　　　-- プレイヤーのストップ、アイコン変更等
　　　end if
6) end videoTimer   --  カスタム・コマンド「videoTimer」終わり

1) これはカスタム・コマンド「videoTimer」です。
2)「videoTimer自身」に「videoTimer」を100ミリセコンド毎に送り（send）続けます。
3) 送った結果（the result）をIDとして「lVideoTimerID」に取得して、送り続けるのをストップする時に、そのIDをキャンセルします。「lVideoTimerID」は、他のメッセージ・ハンドラー内でも使えるように、他のオブジェクトやカード、サブ・スタックにまたがるようでしたらグローバル・コマンド、または同じオブジェクト内ならローカル・コマンドにします。上のだいたいの構成（緑文字）では、まだそれは書いていません。
4) 100ミリセコンド毎に実行されるステートメントで、プレイヤーの進行している時間（currentTime）とスクロールバー（sb）「timeBar」のサンポス（thumbPos）を同じ値にセットします。スタートする前にスクロールバーの最後の数字（endValue）を、ビデオの時間の長さ（duration) とを同じ数字に設定してあります。
5) 「timeBar」のサンポス（thumbPos）のエンドバリュー（endValue）と、プレイヤーの進行している時間（currentTime）が同じになったら、IDとして取得している「lVideoTimerID」をキャンセルして、プレイヤーをストップします。その他、アイコン、ビデオ等を「PLAY」の初期設定に戻します。
6) カスタム・コマンド「videoTimer」終わり

カスタム・コマンド「videoTimer」全文（カードのスクリプト・エディターに書き込む）

local lVideoTimerID   -- カード内の全てのハンドラーで使えるようにローカルにする
command videoTimer
   send videoTimer to me in 100 milliseconds
   put the result into lVideoTimerID
   set the thumbpos of sb "timeBar" to the currentTime of player 1
   if the thumbpos of sb "timeBar" is the endValue of sb "timeBar" then
      cancel lVideoTimerID   -- コマンド「videoTimer」キャンセル
      set the thumbpos of sb "timeBar" to 0
      set the currentTime of player 1 to the 0
      stop player 1
      iconSet "tPlay", 1022, 1023, 1021
   end if
end videoTimer

カード上にあるボタン「PLAY」のスクリプトは、カスタム・コマンド「playVideo」にしてカード内に移動します。

-- ボタン「PLAY」に書くスクリプト
on mouseUp
  playVideo
end mouseUp

カード上にあるボタン「STOP」のスクリプトは、カスタム・コマンド「stopVideo」にしてカード内に移動します。

-- ボタン「PLAY」に書くスクリプト
on mouseUp
  stopVideo
end mouseUp

カスタム・コマンド「playVideo」全文（カードのスクリプト・エディターに書き込む）

command playVideo
   set the endValue of sb "timeBar" to the duration of player 1
   if the icon of btn "tPlay" is 1022 then
      play player 1
      iconSet "tPlay", 1025, 1026, 1024
      videoTimer    -- コマンド「videoTimer」始め
   else
      cancel lVideoTimerID   -- コマンド「videoTimer」キャンセル
      set the paused of player 1 to true 
      iconSet "tPlay", 1022, 1023, 1021
   end if
end playVideo

カスタム・コマンド「stopVideo」全文（カードのスクリプト・エディターに書き込む）

command stopVideo
   cancel lVideoTimerID   -- コマンド「videoTimer」キャンセル
   stop player 1
   set the currentTime of player 1 to the 0
   iconSet "tPlay", 1022, 1023, 1021
   set the thumbpos of sb "timeBar" to 0
end stopVideo

「send ... to me」を使ったテストでよく起こるトラブルは、スクリプトのバグでエディターが開いて実行が途中で止っても、「sendコマンド」が送り続けられて、ストップできないと言う事があります。カスタム・コマンドを「send」した結果（the result）を入れた「ID（ここでは lVideoTimerID）」を、もしグロ−バル（global）で宣言していれば、メッセージ・ボックスから

cancel gVideoTimerID

を送れば、ストップされます。しかし上のようなローカル（local）の場合は、オブジェクト内（この例ではカード内）で実行されなければ、ローカル（local）は有効ではありません。こういう場合はメッセージ・ボックスのペンディング・メッセージ（Pending Messages）を開いて（上図赤丸）、「Update」をするとペンディングされているメッセージが現れますから、「Cancel All」をクリックしてすべてキャンセルさせてストップします。

Tips

クロスプラットフォームでQuickTimeを使うアプリは念のため、メイン・スタックを開く時にQuickTimeのバージョン・チェックで、QuickTimeがインストールされているかチェックした方が良いです。

デフォルトの QuickTime Player オブジェクトは、インスペクターで「MOVファイル」が設定されていますが、フォーマットを変更する事で「MOVファイル」以外のビデオがセットできます。

QuickTime Player オブジェクトのコントローラーを取り外し取り付けは、「formattedHeight」を求めてコントローラーは天地20ピクセルで調整します。

普通にビデオを映している状態に他のオブジェクトを乗せると、フリッカーのためオブジェクトが隠れてしまいます。プレイヤーの「alwayBuffer」をtrueに設定すると、他のオブジェクトが見えるようになります。

「tick」は１秒の 60 分の１、「millisecond」は１秒の 1000 分の１の単位です。

ビデオの時間の換算は、デュレイション（the duration of player name）/タイムスケール（the timescale of player name）から求められます。

アイコン用にインポートしたイメージは、ユーザから見えない処でしたらどこにでも置けて、アイコンとしてはIDナンバーでセットします。

イメージ・ライブラリー（Image Library）の「This Stack」は、正しいイメージが表示できない事があります。

イメージをセットしたとオブジェクトのサイズを一致させるのは、インスペクターの「Size & Position」で「Fit Content」をクリックします。

同じスクリプトが他のオブジェクトで何カ所も使われる時は、カスタム・コマンド、カスタム・ファンクションにまとめます。

プログレスバー等の「send ... to me」を使うカスタム・コマンドが途中で止ってしまったら、メッセージ・ボックスのペンディング・メッセージ（Pending Messages）を開いて、「Cancel All」でストップさせる。

この章で新しく出て来た言葉

qtVersion

ファンクション（function) システムにインストールされているQuickTimeのバージョン

the qtVersion

openStack

メッセージ（message) スタックが開かれた直後にカードに送られる

on openStack
　　answer "Hi!"
end openStack

quit

コマンド（command）アプリケーションを終了させる

quit

showBadge

プロパティ（property）プレイヤーのバッジ・アイコンを表示

set the showBadge of player "myMovie" to true

duration

プロパティ（property）サウンドまたはムービーの時間

put the duration of player 1

timescale

プロパティ（property）サウンドまたはムービーの１秒間に繰り返す数

put the duration of player 1 / the timescale of player 1

milliseconds

キーワード（keyword) １秒の 1000 分の１

send videoTimer to me in 100 milliseconds

milliseconds

ファンクション（function) コンピュータのシステムがスタートしてからのミリセコンド

put the milliseconds

ticks

キーワード（keyword) １秒の 60 分の１

wait for 10 ticks

ticks

ファンクション（function) コンピュータのシステムがスタートしてからのティク

put the ticks

seconds

キーワード（keyword) 秒の単位

wait for 2 seconds

seconds

ファンクション（function) コンピュータのシステムがスタートしてからの秒数

put the seconds

date

ファンクション（function) 今日の日付を返す

time

ファンクション（function) 現在の時間を返す

abbreviated

キーワード（keyword) date, time ファンクションの短縮形を指示する

put the date
put the long date
put the abbreviated date
put the internet date

platform

ファンクション（function) LiveCodeが走っているオペレーション・システム

put the platform

shell

ファンクション（function) UnixやDosのコマンド・ラインを実行する

put the platform

player

オブジェクト（object) ムービーやサウンドを表示する

play player "myMovie"

paused

プロパティ（property) ムービーやサウンドを一時的に停止する

set the paused of player 1 to true

currentTime

プロパティ（property) ムービーやサウンドの経過時間

set the currentTime of player 1 to 0

startTime

プロパティ（property) ムービーやサウンドの始まりの時間

set the startTime of player 1 to 0

endTime

プロパティ（property) ムービーやサウンドの終わりの時間

set the startTime of player 1 to 2000

icon

プロパティ（property) ボタンに表示するイメージ

set the icon of btn "tPlay" to 1025

hiliteIcon

プロパティ（property) ボタンがハイライトの時に表示するイメージ

set the hiliteIcon of btn "tPlay" to 1026

hoverIcon

プロパティ（property) ボタンの上をマウスが通過したの時に表示するイメージ

set the hoverIcon of btn "tPlay" to 1024

playLoudness

プロパティ（property) サウンドのボリュームを特定する

set the playLoudness to 100
set the playLoudness of player 1 to 40

thumbPosition

プロパティ（property) スクロールバーの移動できるサム（thumb）の位置　短縮形：thumbPos

scrollbar

オブジェクト（object) ポジションやセッティングを指し示す　短縮形：sb

set the thumbPosition of scrollbar 1 to 100
set the thumbPos of sb 1 to 0

local

コマンド（command)
バリアブル（variable）をローカルとして（オブジェクト内どこでも）使えるように宣言する

local lVideoTimerID
local lVariable1, lVariable2, lVariable3

global

コマンド（command) バリアブル（variable）をグローバルとして（メイン・スタック、サブ・スタック内どこでも）使えるように宣言する

global gVideoTimerID
global gVariable1, gVariable2, gVariable3

buffer [動詞：（衝撃などを）和らげる]
controller [名詞：制御・操作する器具]
toggle [名詞：切り替えスイッチ]
focus [名詞：焦点]
duration [名詞：継続（時間）]
tick [名詞：（時計の）カチカチという音, 瞬間]
abbreviate [動詞：（語を）省略する]
hover [動詞：（鳥、昆虫などが上を）舞う, 浮かぶ]

統合開発環境：LiveCode 6プログラミング 初心者開発入門

無料オープンソース版「LiveCode Community Edition」の初級から中級のチュートリアルです。 このチュートリアルは、中学・高校生からプログラミングが始めての方達を対象にして、Mac&Winのアプリを同時に作ります。

14: マルチメディア２

クイックタイム・プレイヤー

もしQTバージョンが６以下だったら、「QuickTime 7以上が必要です」と応えなさい。

「MPEG-4ビデオを選びなさい」とある「MPEG-4」のファイルが選べるダイアログを開きなさい。 もし「it」が空でなければ、プレイヤー１のファイルネームを「it」に設定しなさい。

ビデオの長さ、時間の話

「6/7/13」を返します。

「Friday, June 7, 2013」を返します。

「Fri, Jun 7, 2013」を返します。

「4:03 PM」を返します。

「4:03:21 PM」を返します。

「4:03 PM」を返します。

「Fri, 7 Jun 2013 16:03:21 -0400」を返します。 曜日、日付、時刻に続いて最後に、グリニッチ標準時との時差

日本の標準時（JST = Japan Standard Time） 「Sat Jun 8 19:37:27 JST 2013」 アメリカ東海岸時間（EDT = Eastern Daylight Time） 「Sat Jun 8 06:40:02 EDT 2013」が返されます。

The current date is: 2013/06/08 Enter the new date: (yy-mm-dd)

コントローラーを使わないクイックタイム・プレイヤー

赤文字が追加するスクリプトです。

ボタンをイメージにしてカスタムに

「PAUSE」の普通のボタンがセットされます。

「PLAY」の普通のボタンがセットされます。

カスタム・コマンドにしてカードにまとめる

サウンドのボリューム調整

スクロールバー１（scrollbar 1）のサンポス（thumbPos）を返しなさい。

これで最大ボリュームです。

これで最小ボリュームで無音です。

オン マウスアップ プレイヤー１の音量を私のサンポス（thumbPos）に設定しなさい。 エンド マウスアップ

プログレス・バー

Tips

この章で新しく出て来た言葉

ファンクション（function) システムにインストールされているQuickTimeのバージョン

メッセージ（message) スタックが開かれた直後にカードに送られる

コマンド（command）アプリケーションを終了させる

プロパティ（property）プレイヤーのバッジ・アイコンを表示

プロパティ（property）サウンドまたはムービーの時間

プロパティ（property）サウンドまたはムービーの１秒間に繰り返す数

キーワード（keyword) １秒の 1000 分の１

ファンクション（function) コンピュータのシステムがスタートしてからのミリセコンド

キーワード（keyword) １秒の 60 分の１

ファンクション（function) コンピュータのシステムがスタートしてからのティク

キーワード（keyword) 秒の単位

ファンクション（function) コンピュータのシステムがスタートしてからの秒数

ファンクション（function) 今日の日付を返す

ファンクション（function) 現在の時間を返す

キーワード（keyword) date, time ファンクションの短縮形を指示する

ファンクション（function) LiveCodeが走っているオペレーション・システム

ファンクション（function) UnixやDosのコマンド・ラインを実行する

オブジェクト（object) ムービーやサウンドを表示する

プロパティ（property) ムービーやサウンドを一時的に停止する

プロパティ（property) ムービーやサウンドの経過時間

プロパティ（property) ムービーやサウンドの始まりの時間

プロパティ（property) ムービーやサウンドの終わりの時間

プロパティ（property) ボタンに表示するイメージ

プロパティ（property) ボタンがハイライトの時に表示するイメージ

プロパティ（property) ボタンの上をマウスが通過したの時に表示するイメージ

プロパティ（property) サウンドのボリュームを特定する

プロパティ（property) スクロールバーの移動できるサム（thumb）の位置 短縮形：thumbPos

オブジェクト（object) ポジションやセッティングを指し示す 短縮形：sb

コマンド（command) バリアブル（variable）をローカルとして（オブジェクト内どこでも）使えるように宣言する

コマンド（command) バリアブル（variable）をグローバルとして（メイン・スタック、サブ・スタック内どこでも）使えるように宣言する

13: マルチメディア１

15: メニュー、タブ・パネル

ⓒ 小島健治 / Kenji Kojima

統合開発環境：LiveCode 6プログラミング初心者開発入門

無料オープンソース版「LiveCode Community Edition」の初級から中級のチュートリアルです。
このチュートリアルは、中学・高校生からプログラミングが始めての方達を対象にして、Mac&Winのアプリを同時に作ります。

　もしQTバージョンが６以下だったら、「QuickTime 7以上が必要です」と応えなさい。

　「MPEG-4ビデオを選びなさい」とある「MPEG-4」のファイルが選べるダイアログを開きなさい。　もし「it」が空でなければ、プレイヤー１のファイルネームを「it」に設定しなさい。

　「6/7/13」を返します。

　「Friday, June 7, 2013」を返します。

　「Fri, Jun 7, 2013」を返します。

　「4:03 PM」を返します。

　「4:03:21 PM」を返します。

　「4:03 PM」を返します。

　「Fri, 7 Jun 2013 16:03:21 -0400」を返します。　曜日、日付、時刻に続いて最後に、グリニッチ標準時との時差

　　日本の標準時（JST = Japan Standard Time）　　　「Sat Jun 8 19:37:27 JST 2013」　　アメリカ東海岸時間（EDT = Eastern Daylight Time）　　　「Sat Jun 8 06:40:02 EDT 2013」が返されます。

　　The current date is: 2013/06/08 　　Enter the new date: (yy-mm-dd)

　赤文字が追加するスクリプトです。

　「PAUSE」の普通のボタンがセットされます。

　「PLAY」の普通のボタンがセットされます。

　スクロールバー１（scrollbar 1）のサンポス（thumbPos）を返しなさい。

　これで最大ボリュームです。

　これで最小ボリュームで無音です。

　オン　マウスアップ　　　プレイヤー１の音量を私のサンポス（thumbPos）に設定しなさい。　エンド　マウスアップ

プロパティ（property) スクロールバーの移動できるサム（thumb）の位置　短縮形：thumbPos

オブジェクト（object) ポジションやセッティングを指し示す　短縮形：sb

コマンド（command)
バリアブル（variable）をローカルとして（オブジェクト内どこでも）使えるように宣言する