黒木料理長の料理コーナー　ソースと解説

毎週木曜日の夜9時に公開されるYouTube番組【Girls Night Out】の中の黒木料理長の料理コーナーをいつも楽しみに観ていました。

通常の料理番組だと、料理テーマや材料が手が届かないものだったり、何を何グラムだとか、カップ何杯だとか、最も不明なのは大さじ何杯、小さじ何杯という調味料の計り方が出て来ますね。一体どれが大さじでどれが小さじなのかがわからない為手が出せないので、途中で視聴をやめてしまうことが多くあります。

このコーナーでは、そういうところがとてもわかりやすくて、おおざっぱで、とっかかり安いのです。実際にいくつかは自分でも作ってみました。

ところが、先日の2016年11月24日の回では、このコーナーがありませんでした。他の視聴者からもがっかりしたという声が多数上がっています。また再開されることを願ってやみません。

そこで、今回は、これまでの放送されたもの（GirlsNightOut第8回から第443回まで）をまとめてみました。YouTubeで再生しながら、開始タイムと終了タイムの記録をとり、これを秒に変換して、このコーナーだけを観ることができるように工夫してみました。

なお、今後またこのコーナーが復活した際には、データベース・テーブルにレコードを追加するだけで、その料理映像も観ることができるようにしてあります。

2017年3月30日のGirls Night Out番組終了にともない、一旦終わったかに見えた黒木料理長の料理コーナーが、2017年7月5日のハロ！ステ(Hello! Project Station)#226で突然復活しました。今後が楽しみです。

フローチャート

データベース

YouTube動画を時間範囲指定で映す為に必要な項目をデータベース・テーブルに格納しておきます。そのテーブル（gno_ryori）の構造をこのように設定しました。先頭のidをユニーク・キーに指定してあります。

ここで、youtube_urlというように、YouTube動画のURLという表現がありますが、実際には埋め込みコードとして使うので、URLそのままではありません。URLのwatchi?v=という箇所をembed/と置き換えています。

時間範囲は、開始秒と終了秒で指定します。しかし、YouTube動画を見ながらタイムラインで判るのは、何分何秒という単位です。これを秒に変換する為に十進BASICでこのようなプログラムを作って実行しました。

REM 分秒から秒への変換
PRINT "分,秒を入力してください。"
DO
   INPUT  PROMPT "分 = ":m$
   IF m$="x" THEN STOP
   INPUT  PROMPT "秒 = ":s$
   LET input_m=VAL(m$)
   LET input_s=VAL(s$)
   LET s_input=input_m*60 + input_s
   PRINT s_input;" 秒"
LOOP
END

phpソース

実際の文字コードはUTF-8ですが、ここではShift-JISにして表示します。

MVC	file name	概要
Controller	gno_ryori.php	プログラムの本体
Model	gno_ryori_model.php	各関数の定義
View	gno_ryori_list.php	料理一覧表示のhtmlを作る部分
	gno_ryori_main.php	YouTube動画を映す画面のhtmlを作る部分
	gno_ryori_tmpl.php	Webブラウザに送るhtmlを構成する枠組
	header.php	AvocadoMix共通ヘッダー
	footer.php	AvocadoMix共通フッター

controllers/gno_ryori.php

<?php
/*
 * 黒木料理長の料理コーナー
 */

class Gno_ryori extends Controller {

	function Gno_ryori()
	{
		parent::Controller();
		$this->load->helper(array('form', 'url'));
		$this->load->model('Gno_ryori_model');
		$this->output->set_header('Content-Type: text/html; charset=UTF-8');
	}

# 料理一覧の表示
	function index()
	{
		$data['list'] = $this->Gno_ryori_model->get_ryori_list();
		$data['main'] = $this->load->view('gno_ryori_list', $data, TRUE);
		$this->load->view('gno_ryori_tmpl', $data);
	}

# YouTubeの該当する部分を映す。
	function ryori($id = '')
	{
		$row = $this->Gno_ryori_model->get_ryori($id);

		$data['title'] = $row->title;
		$data['kai']= $row->kai;
		$data['ryori'] = $row->ryori;
		$data['seito'] = $row->seito;
		$data['youtube_url'] = $row->youtube_url;
		$data['start_s'] = $row->start_s;
		$data['end_s'] = $row->end_s;

		$data['main']	= $this->load->view('gno_ryori_main', $data, TRUE);
		$this->load->view('gno_ryori_tmpl', $data);
	}
}

?>

index()：データベース・テーブルgno_ryoriから読み出した料理一覧を表示します。

ryori(id="")：一覧のページから視聴ボタンを押して与えられたパラメータに該当するデータベース・テーブルのレコードを読み込んで、そのYouTube動画を時間指定範囲で映し出します。

models/gno_ryori_model.php

<?php
Class Gno_ryori_model extends Model
{
	function Gno_ryori_model()
	{
		parent::Model();
		$this->load->database();
	}

	//料理一覧を得る（id降順）
	function get_ryori_list()
	{
		$this->db->order_by('id','DESC');
		$query = $this->db->get('gno_ryori');
		return $query->result();
	}

	//料理レコードを得る
	function get_ryori($id)
	{
		$this->db->where('id', $id);
		$query = $this->db->get('gno_ryori');
		return $query->row();
	}


}
?>

このモデルではデータベースからの読み込みを担当します。

get_ryori_list()：idの降順に全レコードを読み込んで結果を返します。

get_ryori($id)：パラメータとして与えられたidのレコードを読み込んで結果を返します。

views/gno_ryori_list.php

<div id="main">
<h2>黒木料理長の料理コーナー</h2>
<p>YouTube番組【Girls Night Out】の中の黒木料理長の料理コーナーです。各行の右端にある「視聴」ボタンを押すと、該当するYouTube動画の料理コーナーのみが再生されます。</p>
<table>
<tr><th>回</th><th>タイトル</th><th>料理</th><th>実習生</th><th>視聴</th></tr>
<!-- ここから、php endforeachまで、各レコードを表示するループ -->
<?php foreach($list as $row): ?>
<tr>
<td class="R">第<?=$row->kai; ?>回</td>
<td><?=$row->title; ?></td>
<td><?=$row->ryori; ?></td>
<td><?=$row->seito; ?></td>
<td>
<?=form_open('gno_ryori/ryori/'. $row->id);?>
<input type="submit" value="視聴" />
<?=form_close();?>
</td>
</tr>
<?php endforeach; ?>
</table>
</div>

料理の一覧を表形式で表示します。

各行の右端には「視聴」ボタンをつくり、これを押すとコントローラgno_ryori内のryori関数にその行のidをパラメータとして引き渡すようにしています。

views/gno_ryori_main.php

<div id="main">
<h2>
<?=$title?>　黒木料理長の料理コーナー
</h2>
<h3>
第<?=$kai?>回　<?=$ryori?>　実習生：<?=$seito?>
</h3>
</div>
<div class="C">
<iframe width="854" height="480" src="<?=$youtube_url?>
?start=<?=$start_s?>
&end=<?=$end_s?>
&autoplay=1&showinfo=0&rel=0" frameborder="0" allowfullscreen>
</iframe>
<br />
<a href="../nengo/index.php/gno_ryori">料理一覧にもどる</a>
</div>

YouTube動画の画面上で右クリックすると表示される「埋め込みコードをコピー」を選択すると、その動画を別のhtml内で使うことができます。しかし、そのままでは通常のままの映像となります。そこで、追加のパラメータを使って時間範囲を指定するなどの工夫をするわけです。

start=：ここに書いた秒から動画が開始されます。
end=：ここに書いた秒で動画が終了します。
autoplay=1：これによって自動的に動画が再生されます。
showinfo=0：映像の上部に表示されるタイトル文字を非表示にします。

下部には「料理一覧にもどる」ボタンをつけてみました。

views/gno_ryori_tmpl.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>黒木料理長の料理コーナー</title>

<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="../favicon.ico" />
<link href="http://www.avocado.xii.jp/css/no_side.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="background">
<div id="container">

<?=$this->load->view('header');?>
<div id="contents">

<?=$main?>

</div><!-- end of contents -->

<?=$this->load->view('footer');?>
</div><!-- end of container -->
</div><!-- end of background -->
</body>
</html>

コントローラから与えられた$mainという変数の値によって、一覧のページのhtmlになったり、YouTube動画を映すページのhtmlになったりします。

実行

上の画像をクリックすると、料理の一覧が表示されます。試してみてください。

2016年11月29日　記

Page Top