「ゆかり」外部曲リスト対応

縛りオフ用の曲リストを簡単に呼び出せるように、外部曲リストを使う方法をいくつか実装してみた。
3通りの実装方法を作ってみたので先に作ったものから説明していく。

１．JSON方式

曲リストを「ゆかり」内部でフルコントロールするために、JSON形式で曲リストを書きます。

例）

{   "title": "ラブライブ！サンシャイン！！曲一覧",   "category": [     {       "name": "1stシングル「君のこころは輝いているかい？」",       "song": [         {           "title": "君のこころは輝いてるかい？",           "artist": "Aqours",           "songinfo": [             "作詞：畑 亜貴 作曲：光増ハジメ 編曲：EFFY",             "2015年10月7日発売",             "Aqoursのデビューシングル"           ],           "file": [             {               "kind": "動画",               "filename": "【ニコカラＨＤ】君のこころは輝いてるかい？･改【ラブライブ！】_OnOff.mp4",               "flags": [                 "Movie",                 "OnVocal",                 "OffVocal"               ]             },             {               "kind": "動画",               "filename": "[Aqours]君のこころは輝いてるかい？_ラブライブ！サンシャイン！！_Live映像_Live-OffVocal-CD音源切替_（音源タイミング修正）.mp4",               "flags": [                 "Movie",                 "OnVocal",                 "OffVocal",                 "Live映像"               ]             }           ]         },         {           "title": "Step! ZERO to ONE",           "artist": "Aqours",           "songinfo": [             "作詞：畑 亜貴 作曲・編曲：高田暁",             "2015年10月7日発売",             "君のこころは輝いてるかい？ C/W"           ],           "file": [             {               "kind": "動画",               "filename": "[Aqours]Step！ ZERO to ONE_ラブライブ！サンシャイン！！_Live映像_Live-CD音源切替.mp4",               "flags": [                 "Movie",                 "Live音源",                 "OffVocal",                 "OnVocal",                 "Live映像"               ]             }           ]         },         {           "title": "Aqours☆HEROES",           "artist": "Aqours",           "songinfo": [             "作詞：畑 亜貴 作曲・編曲：渡辺和紀",             "2015年10月7日発売",             "君のこころは輝いてるかい？ C/W"           ],           "file": [             {               "kind": "動画",               "filename": "[Aqours]Aqours☆HEROES_ラブライブ！サンシャイン！！_Live映像_Live-CD音源切替.mp4",               "flags": [                 "Movie",                 "Live音源",                 "OffVocal",                 "OnVocal",                 "Live映像"               ]             }           ]         }       ]     },     {       "name": "青空Jumping Heart",       "song": [         {           "title": "青空Jumping Heart",           "artist": "Aqours",           "songinfo": [             "作詞：畑 亜貴 作曲:伊藤賢、光増ハジメ 編曲：EFFY",             "2016年7月20日",             "アニメ「ラブライブ！サンシャイン！！」第１期オープニングテーマ"           ],           "file": [             {               "kind": "動画",               "filename": "[Aqours]青空Jumping Heart_ラブライブ！サンシャイン！！アニメOP_OnOffr3.mp4",               "flags": [                 "Movie",                 "OnVocal",                 "OffVocal"               ]             }           ]         },         {           "title": "ハミングフレンド",           "artist": "Aqours",           "songinfo": [             "作詞：畑 亜貴 作曲：桑原聖 (Arte Refact) 編曲：酒井拓也 (Arte Refact)",             "2016年7月20日",             "青空Jumping Heart C/W"           ],           "file": [             {               "kind": "動画",               "filename": "[Aqours]ハミングフレンド._ラブライブ！サンシャイン！！【Live映像】_OnOff.mp4",               "flags": [                 "Movie",                 "OnVocal",                 "OffVocal",                 "Live映像"               ]             }           ]         }       ]     }   ] }

こんな風なテキストファイルを用意する。メモ帳で書くと泣きそうになるので JSON editor （例えばここ）とかで編集する。
これを「c:\xampp\htdocs\llss_mini.json」
として保存し、※要文字コードUTF-8形式
http://＜ゆかりのIP＞/limitlist.php?data=llss_mini.json
にアクセスすると
このようなリストが表示され、
青や緑のアイコンやファイル名が書いてある枠を押すことでリクエストまで飛べるようになっている。
また、設定画面で、
と設定しておくと、
上部メニューのいろいろ検索のなかに
もリストに入るための項目が表示されるようになる。

この方式が、リストの見やすさやボタンの押しやすさなどのユーザー操作性や、メニュー対応やカラオケ配信リクエスト、BGVリクエストなどに対応し、一番操作する側にとってやりやすいものになっています。
ただ、リストのJSON形式のテキストを作るのが大変なのが。。。。JSON Editorになれるとそこそこ楽に作れます。

2. 外部Webサーバー方式

トップページメッセージのついでにできるようにした、外部のWebサーバー（まあゆかり上のhtdocsの中のどこかでもいいんだけど）にゆかりに戻ってくるリンクを自力で作ってくる方式
「トップページメッセージの説明からコピペ」

トップ画面メッセージの応用

TOPページメッセージに自ホスト名置換文字列機能
・TOPページメッセージに#yukarihost#と書いておくと「ゆかり」が動作しているホスト名に置換。
リンク先にGET Methodでホスト名を渡したい時などに使えます。

たとえばサンプルとして

<?php

$songlist[] = array( 'kind' => 'movie', 'title' => '君の心は輝いているかい？' , 'filename'=>'[Aqours]君のこころは輝いてるかい？_ラブライブ！サンシャイン！！_Live映像_Live-OffVocal-CD音源切替.mp4', 'desc' => '歌 : Aqours, ラブライブ！サンシャイン！！1stシングル' );
$songlist[] = array( 'kind' => 'movie', 'title' => 'Step Zero to One' ,'filename'=>'[Aqours]Step！ ZERO to ONE_ラブライブ！サンシャイン！！_Live映像_CD音源切替.mp4', 'desc' => '歌 : Aqours, 君の心は輝いているかい？カップリング' );
$songlist[] = array( 'kind' => 'movie', 'title' => 'Aqours☆HEROES' ,'filename'=>'（仮作成）[Aqours]Aqours☆HEROES_ラブライブ！サンシャイン！！_Live映像_Live-CD音源切替.mp4', 'desc' => '歌 : Aqours, 君の心は輝いているかい？カップリング' );
$songlist[] = array( 'kind' => 'movie', 'title' => '恋になりたいAQUARIUM' ,'filename'=>'【ニコカラHD】恋になりたいAQUARIUM【ラブライブ!サンシャイン!!】Off Vocal.mp4', 'desc' => '歌 : Aqours, ラブライブ！サンシャイン！！2ndシングル' );
$songlist[] = array( 'kind' => 'movie', 'title' => '青空Jumping Heart' , 'filename'=>'[Aqours]青空Jumping Heart_ラブライブ！サンシャイン！！アニメOP_OnOffr3.mp4','desc' => '歌 : Aqours, ラブライブ！サンシャイン！！アニメ第1期オープニング' );
$songlist[] = array( 'kind' => 'haisin', 'title' => 'ハミングフレンド' , 'filename'=>'', 'desc' => '【配信】歌 : Aqours, 青空JumpingHeartカップリング' );

$alllist = array( 'itemname' => 'ラブライブ！サンシャイン！！' , 'songs' => $songlist);

$yukarihost = 'localhost';

if(array_key_exists("yukarihost", $_REQUEST)) {
$yukarihost = $_REQUEST["yukarihost"];
}

$yukarisearchlink='http://'.$yukarihost.'/search.php?searchword=';
$yukariconfirmlink='http://'.$yukarihost.'/request_confirm.php?shop_karaoke=1';
http://localhost/request_confirm.php?shop_karaoke=1

?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ラブライブ！サンシャイン！！曲リスト</title>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  
</head>

<body>
<?php
foreach($alllist as $key => $value){
    if($key === 'itemname' ){
        print '<h1>'.$value.'</h1>';
    }else if($key === 'songs' ){
        foreach($value as $songinfo){
             print '<div class="bg-info">';
             if($songinfo['kind'] == 'movie'){
               print '<h2 class="bg-primary">'.$songinfo['title'].'</h2>';
               $link = $yukarisearchlink.$songinfo['filename'];
               print '<p><a href="'.$link.'" class="btn btn-default" > この曲を予約 </a></p>';
               print '<p>'.$songinfo['desc'].'</p>';
             }else if($songinfo['kind'] == 'haisin' ){
               print '<h2 class="bg-primary">'.$songinfo['title'].'</h2>';
               print '<p><a href="'. $yukariconfirmlink . '&filename=' . $songinfo['title'] . '" class="btn btn-default"> この曲を配信で予約 </a></p>';
               print '<p>'.$songinfo['desc'].'</p>';
             }
             print '</div>';
        }
    }
}

?>

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

https://t.co/iZYGCGqZXL ＜実物はこちらからダウンロード可能

のようなものを作ってどこかのWebサーバーかゆかり動作PCの「c:\xampp\htdocs\」以下のどこか置いておく。
今回はllsonglist.phpという名前にしている。

トップ画面メッセージの設定に、さっきのPHPを置いたWebサーバへのリンクをこんな風に設定する。

トップページに、リンクが表示されるのでそちらをクリック

リンク先はこうなっている（こうなるように作った）

ここで例えば青空Jumping Heartの「この曲を予約」ボタンを押すとその曲の検索結果が表示（フルファイル名で検索しているので1つだけ見つかる)されるので以降、いつも通り予約できます。

llsonglist.phpの

$songlist[] = array( 'kind' => 'movie', 'title' => '君の心は輝いているかい？' , 'filename'=>'[Aqours]君のこころは輝いてるかい？_ラブライブ！サンシャイン！！_Live映像_Live-OffVocal-CD音源切替.mp4', 'desc' => '歌 : Aqours, ラブライブ！サンシャイン！！1stシングル' );

の行を増やせばどんどんリストを増やせるし、htmlを頑張れば見やすい画面にできるので、リスト作成の手間はちょっとは楽になる。
ゆかり側ではほとんど何もしない他人任せリスト機能だったりする。

3. 固定HTML方式

外部Webサーバー方式では、多少内部処理を行うものを作らないといけなかったけど、
完全に固定のHTMLのリストでゆかりのリクエスト用の画面に戻ってくる方式。

なんでもいいのでURLから外部のHTMLを取得。
TDタグの中が動画ファイルの拡張子で終わっているものをゆかりの検索結果かリクエスト確認画面へのリンクに変える

特定のフォルダの中のファイル一覧をHTML化するには
「FileInfoList」 http://njp.la.coocan.jp/software/fil/index.html
というソフトが使えます。

引数
listurl : リストのあるURL.相対パスでも絶対パスでもhttp://からはじまるフルパスでもいいはず
backconfirm : 戻り先を検索結果ページにするか、リクエスト確認ページにするか
1 : リクエスト確認ページに戻る。（リストのファイル名のファイルがなかった時の動作は保証できない（再生時スキップするはず）
1以外(もしくは無指定） : ファイル検索結果ページに戻る
listurlをリンクで記載する場合は URLendodeすること推奨 (http://urlencode.net/ 等を使って)

指定例「c:\xampp\htdocs\list\2017年秋アニメ.html」をトップページメニューで指定する場合
http://urlencode.net/ にて
「list/2017年秋アニメ.html」
は
「list%2F2017%94N%8FH%83A%83j%83%81.html」
とエンコードされるので

トップページメッセージなどに
<a href=”list3replace.php?listurl=list%2F2017%94N%8FH%83A%83j%83%81.html&backconfirm=0″ > 2017年秋アニメ </a>
と書けば、ファイル名が検索結果ページに戻ってくるリンクに変わる。
<a href=”list3replace.php?listurl=list%2F2017%94N%8FH%83A%83j%83%81.html&backconfirm=1″ > 2017年秋アニメ </a>
と書けば、ファイル名が検索結果ページに戻ってくるリンクに変わる。

例）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="FileInfoList 1.6.0.0">
<style type="text/css">
</style>
   <title></title>
</head>
<body>
   <div class="alignC">
       <p class="header"></p>
       <table border="1" align="center" summary="FileList">
           <tr class="header_background_color"><th class="header_nowrap" abbr="ファイル名">名前</th></tr>
           <tr><td class="item_nowrap partition_background_color">ラブライブ！</td></tr>
           <tr><td class="item_nowrap">[μ’ｓ]WonderFul Rush_ラブライブ！μ’ｓ5thシングル_OnOff.mp4</td></tr>
           <tr><td class="item_nowrap">Snow halation_ラブライブμ’ｓ2ndシングル_（OnVocal、OffVocal、２．５次元切替）_HD音源.mp4</td></tr>
           <tr><td class="item_nowrap partition_background_color">ラブライブ！サンシャイン！！</td></tr>
           <tr><td class="item_nowrap">[Aqours]君のこころは輝いてるかい？_ラブライブ！サンシャイン！！_Live映像_Live-OffVocal-CD音源切替.mp4</td></tr>
           <tr><td class="item_nowrap">[Aqours]青空Jumping Heart_ラブライブ！サンシャイン！！アニメOP_OnOffr3.mp4</td></tr>
       </table>
   </div>
</body>
</html>

このようなHTMLファイルを作成し、「c:\xampp\htdocs\list\ラブライブ！リスト.html 」というファイル名で保存する。

http://urlencode.net/ サイトで
「list/ラブライブ！リスト.html」は、「list%2F%83%89%83u%83%89%83C%83u%81I%83%8A%83X%83g.html」となることを確認
（※\を/に書き換えていることに注意）

設定画面のトップページメッセージに

<center>

<p> <a href="list3replace.php?listurl=list%2F%83%89%83u%83%89%83C%83u%81I%83%8A%83X%83g.html&backconfirm=0" > ラブライブ！シリーズ曲リスト </a></p>

</center>

と設定してみる。
トップページにリストへのリンクが現れ、
リンクの先に、リストが表示される。
たとえばここで、「青空Jumping Heart」のファイル名を押すと、
検索結果画面に移動して、以降いつもと同じように予約できる。

また、
設定画面のトップページメッセージに

<center>

<p> <a href="list3replace.php?listurl=list%2F%83%89%83u%83%89%83C%83u%81I%83%8A%83X%83g.html&backconfirm=1" > ラブライブ！シリーズ曲リスト </a></p>

</center>

と「backconfirm=1」として設定してみると、
同じようなリストの画面から、「君のこころは輝いてるかい？」のファイル名を押すと、
リクエスト確認画面に直接飛ぶようになる。（ファイルがなくてもリクエストできてしまうので、ファイルがないと再生しようとした際スキップされることになります。）
今後のサポート予定
・td以外のタグ（ ddとか）対応
・HTML内にリンクがあった場合、その先でも使えるようにする
など、余裕があれば。。。

This entry was posted on 2017年3月3日, 6:55 PM and is filed under Diary, PC関連, カラオケ, カラオケ動画, フリーソフト開発. You can follow any responses to this entry through RSS 2.0. You can skip to the end and leave a response. Pinging is currently not allowed.

日	月	火	水	木	金	土
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

ゆうのメモ書きページ Z