はじめに
プロデルは、日本語で書けることの他に、インタプリタ型の言語という点で大変重宝しています。プロデルデザイナ上でデザインしたウィンドウをその場で実行させて実際の挙動を確認しながら開発を進めることができるので、急な依頼があっても即席のアプリを作成して迅速に対応できたことが何度かありました。
要件
急にレクリエーション活動の企画を振られました。
・スポーツ系の活動
・参加していない方も会場（プレイルーム）の外から観戦できるようにしたい
・本番まで残り半日
これを次の内容で実施することとします。
・フットゴルフという競技があるそうなので、それをアレンジしてボールを手で投げるハンドゴルフとします。
・スマホをWEBカメラにして、会場外にテレビ中継します。
手法
テレビ中継は、
・使っていないスマホにipwebcamをインストール
・PCをテレビにHDMIケーブルで接続
・ポータブルのWi-Fiルーター（バッファローWMR-433Wなど）でPCとローカル接続
・PC側でVLC media playerからipwebcamのストリームを開く
これだけでできましたが、スコア、順位を表示して途中経過を分かるようにしたいところです。ゴルフ中継のような字幕を付けて本物感を演出できれば、盛り上がることでしょう。字幕部分をプロデルで作ります。
字幕をプロデルで
ウェブブラウザ部品からVLCのウェブプラグインを呼び出せばウィンドウ内に動画を表示できそうに思われたのですが、動作を検証している余裕がありませんので、背景が透明のウィンドウを最大化したVLCウィンドウの上に重ねて表示させることにします。
プロデルデザイナでウィンドウにそれらしくラベルを配置します。メニューバーやタスクバーは見えなくしたいので、画面の上下に黒い帯を入れて隠します。
少し長くなりますが、スコア、順位表示の処理を書き加えて次のようなものができました。
メイン画面を表示する
待機する
メイン画面とは
氏名id=1
順位一覧は、{}
ウィンドウを継承する
はじめの手順
初期化する
ディスプレイは、画面の1番目を取得したもの
メイン画面の幅を、ディスプレイの幅に変える
メイン画面の高さを、ディスプレイの高さに変える
右端字幕一覧は、{右上字幕,右上字幕２,ライブ字幕}
右端字幕一覧を要素にそれぞれ繰り返す
要素の横を、([ディスプレイの幅]-[要素の幅]-20)に変える
繰り返し終わり
上マスクの幅を、ディスプレイの幅に変える
下マスクの幅を、ディスプレイの幅に変える
下マスクの縦を、([ディスプレイの高さ]-[下マスクの高さ])に変える
氏名字幕の横を、([ディスプレイの幅]-[氏名字幕の幅])/2に変える
氏名字幕の縦を、(ディスプレイの高さ-下マスクの高さ-氏名字幕の高さ-10)に変える
スコア字幕の横を、([氏名字幕の横]+[氏名字幕の幅])に変える
スコア字幕の縦を、(ディスプレイの高さ-下マスクの高さ-スコア字幕の高さ-10)に変える
氏名一覧は、{「東京 太郎」、「大阪 はな子」、「名古屋 仁美」、「福岡 一郎」、「仙台 次郎」}
氏名一覧を要素にそれぞれ繰り返す
スコア一覧の「[要素]」は、「0」
繰り返し終わり
氏名字幕の内容を、氏名一覧(氏名id)に変える
スコア字幕の内容を、スコア一覧の「[氏名一覧(氏名id)]」に変える
順位字幕を隠す
終わり
初期化する手順
ーー自動生成された手順です。ここにプログラムを書き加えても消える場合があります
この背景色を「黒」に変える
この実質大きさを｛559,391｝に変える
この透明色を「黒」に変える
この最前面を○に変える
この種類を「縁無し」に変える
この最大化ボタンを×に変える
この最小化ボタンを×に変える
この内容を「メイン画面」に変える
この文字色を「白」に変える
初期化開始する
順位字幕というラベルを作る
その位置と大きさを｛24,162,353,40｝に変える
その内容を「ラベル3」に変える
そのフォントを「源真ゴシックP Bold,24,太字」に変える
その移動順を9に変える
その文字色を「#010101」に変える
その背景色を「Gainsboro」に変える
スコア字幕というラベルを作る
その位置と大きさを｛374,228,59,42｝に変える
その内容を「0」に変える
そのフォントを「源真ゴシックP Bold,20.25,太字」に変える
その見た目を「システム」に変える
その文字配置を「中央」に変える
そのアクセスキー表示を×に変える
その移動順を7に変える
その文字色を「#C00000」に変える
その背景色を「MediumBlue」に変える
下マスクというパネルを作る
その位置と大きさを｛0,273,532,119｝に変える
その移動順を8に変える
その文字色を「白」に変える
その背景色を「#010101」に変える
氏名字幕というラベルを作る
その位置と大きさを｛106,228,271,42｝に変える
その内容を「選手名」に変える
そのフォントを「源真ゴシックP Bold,20.25,太字」に変える
その見た目を「システム」に変える
その文字配置を「中央」に変える
そのアクセスキー表示を×に変える
その移動順を6に変える
その文字色を「#010101」に変える
その背景色を「Gold」に変える
上マスクというパネルを作る
その位置と大きさを｛0,0,442,54｝に変える
その移動順を7に変える
その文字色を「白」に変える
その背景色を「#010101」に変える
パネル1というパネルを作る
その位置と大きさを｛12,60,218,83｝に変える
その移動順を6に変える
その文字色を「白」に変える
その背景色を「OliveDrab」に変える
ラベル1というラベルをパネル1へ作る
その位置と大きさを｛82,0,94,40｝に変える
その内容を「13Y」に変える
そのフォントを「源真ゴシックP Bold,24,太字」に変える
その文字配置を「中央」に変える
そのアクセスキー表示を×に変える
その移動順を5に変える
その文字色を「白」に変える
その背景色を「OliveDrab」に変える
ラベル2というラベルをパネル1へ作る
その位置と大きさを｛82,33,122,40｝に変える
その内容を「PAR18」に変える
そのフォントを「源真ゴシックP Bold,24,太字」に変える
その文字配置を「中央」に変える
そのアクセスキー表示を×に変える
その移動順を6に変える
その文字色を「白」に変える
その背景色を「OliveDrab」に変える
現況字幕というラベルをパネル1へ作る
その位置と大きさを｛3,5,73,73｝に変える
その内容を「1」に変える
そのフォントを「源真ゴシックP Bold,36,太字」に変える
その文字配置を「中央」に変える
そのアクセスキー表示を×に変える
その移動順を4に変える
その文字色を「#404040」に変える
その背景色を「#E0E0E0」に変える
右上字幕２というラベルを作る
その位置と大きさを｛284,102,271,42｝に変える
その内容を「世界の強豪、ここに集合」に変える
そのフォントを「源真ゴシックP Bold,20.25,太字+斜体」に変える
その見た目を「システム」に変える
そのアクセスキー表示を×に変える
その移動順を5に変える
その文字色を「白」に変える
その背景色を「黒」に変える
ライブ字幕というラベルを作る
その位置と大きさを｛482,162,65,36｝に変える
その内容を「LIVE」に変える
そのフォントを「源真ゴシックP Bold,20.25,太字」に変える
その見た目を「システム」に変える
その文字配置を「中央」に変える
そのアクセスキー表示を×に変える
その移動順を4に変える
その文字色を「黒」に変える
その背景色を「白」に変える
右上字幕というラベルを作る
その位置と大きさを｛374,60,181,42｝に変える
その内容を「＊＊杯オープン」に変える
そのフォントを「源真ゴシックP Bold,20.25,太字+斜体」に変える
その見た目を「システム」に変える
そのアクセスキー表示を×に変える
その移動順を1に変える
その文字色を「白」に変える
その背景色を「黒」に変える
初期化終了する
終わり
キーが押された時の手順
もしこの時のキー名が「Escape」なら
メイン画面を最小化する
他でもしこの時のキー名が「→」なら
もし氏名id<氏名一覧の個数なら
氏名idを増やす
そうでないなら
氏名id=1
もし終わり
氏名字幕の内容を、氏名一覧(氏名id)&「さん」に変える
スコア字幕の内容を、スコア一覧の「[氏名一覧(氏名id)]」に変える
他でもしこの時のキー名が「↑」なら
臨時一覧は、{}
結果文字列は、「 ★結果★[改行]」
氏名一覧を要素にそれぞれ繰り返す
臨時一覧に、スコア一覧の「[要素]」を追加する
繰り返し終わり
スコア集計は、臨時一覧から重複を消したもの
スコア集計を、小さい順に並び替える
値は、1
スコア集計を要素にそれぞれ繰り返す
臨時一覧２は、臨時一覧から要素を完全一致で探したもの
順位は、値&「位」
もし臨時一覧２の個数>1なら順位は、順位&「T」
臨時一覧２を要素２にそれぞれ繰り返す
結果文字列は、結果文字列&順位&「 」&氏名一覧(要素２)&「さん 」&スコア一覧の「[氏名一覧(要素２)]」&[改行]
繰り返し終わり
値を増やす
繰り返し終わり
順位字幕の内容を、結果文字列に変える
順位字幕の横を、([ディスプレイの幅]-[順位字幕の幅])/2に変える
順位字幕の縦を、200に変える
順位字幕の高さを、400に変える
順位字幕を表示する
他でもしこの時のキー名が「↓」なら
順位字幕を隠す
もし終わり
終わり
スコア字幕がクリックされた時の手順
入力画面のタイトルは、「スコア登録」
入力画面で「スコアを入力してください」を入力させる
もし入力画面のキャンセルでないなら
スコア字幕の内容を、入力画面の内容に変える
臨時は、スコア一覧の「[氏名一覧(氏名id)]」+入力画面の内容
スコア一覧の「[氏名一覧(氏名id)]」は、臨時
もし終わり
終わり
終わり
VLCを起動させておいて、上記コードを実行させるとこんな感じになります。
終わりに
やっつけ感ありありのハリボテですが、本物のスポーツイベントのように楽しんでいただけました。プロデルがなかったらこの時間で本物感を出すのは難しかっただろうと思います。その場その場で必要なアプリを手軽に作って行ける、プロデルにはそんな強みがあると思います。