[Site] 音声機能 その3

タグ :

作成サイト「koweboo」についてまとめるシリーズです。
今回はユーザーがアップロードする「音声」の処理についてまとめます。
かなり長くなるので何回かに分けて書きます。
今回は前記事に続いて「音声一覧表示」についてです。

作成サイト内の関連箇所 — 「こうぇ一覧

情報の追加

一覧へ表示する情報の内容として以下の内容に変更します。

  • お題タイトル
  • 音声タイトル
  • 音声アップロードユーザー名
  • 音声再生機能
  • 音声へのコメント
  • コメント投稿数
  • コメントフォーム

音声のタイトル、ユーザー名、再生機能は前記事で表示済みですので、お題情報とコメント機能を追加します。
CSSでのデザイン性は後回しにして、とりあえずデータを表示させてみます。

テーブルの追加

音声へのコメントを保存用のテーブルを追加します。

[VoicesComments]
フィールド名 名称 説明
id コメントID 主キー
user_id ユーザーID コメント投稿ユーザーID
voice_id 音声ID コメント対象の音声ID
comment コメント文 投稿されたコメント文
modified 投稿日時 コメント投稿された日時

テーブルを作成したら、モデルのみを Bake で生成します。
生成されたモデル(VoicesComment.php)は特に変更しなくてもいいです。
音声のモデル(Voice.php)に以下のアソシエーションを追記します。

public $hasMany = array(
	'VoicesComment' => array(
		'className' => 'VoicesComment',
		'foreignKey' => 'voice_id',
		'dependent' => false,
		'conditions' => '',
		'fields' => '',
		'order' => '',
		'limit' => '',
		'offset' => '',
		'exclusive' => '',
		'finderQuery' => '',
		'counterQuery' => ''
	)
);

表示一覧の作成

ビューファイル(index.ctp)を以下のように変更します。

<div class="voices index<?php echo $genre_id;?>">
<div class="genre">
<h3><?php echo __('Genre'); ?></h3>
<ul>
<a href="<?php echo PAGE_VOICE ?>">すべて</a>
<a href="<?php echo PAGE_VOICE.'/index/1' ?>">セリフ</a>
<a href="<?php echo PAGE_VOICE.'/index/2' ?>">歌</a>
<a href="<?php echo PAGE_VOICE.'/index/3' ?>">朗読</a>
<a href="<?php echo PAGE_VOICE.'/index/4' ?>">BGM</a>
</ul>
</div>
<h2><?php echo __('Voice List'); ?></h2>
<?php foreach ($voices as $voice): ?>
<p>お題:<?php echo $voice['Request']['title']; ?></p>
<p>タイトル:<?php
	echo $this->Html->link(
		$voice['Voice']['title'],array(
			'action' => 'view',
			$voice['Voice']['id']
		)
	);
?></p>
<p>投稿者:<?php
	echo $this->Html->link(
		$user[$voice['Voice']['user_id']]['name'], array(
			'controller' => 'users',
			'action' => 'view',
			$voice['Voice']['user_id']
		)
	);
?></p>
<audio src=<?php echo VOICE_FILEPATH.$voice['Voice']['filename'].VOICE_FILEEXT; ?> preload="auto"></audio>
<?php
	echo $this->Form->create('VoicesComment', array(
		'method' => 'get',
		'class' => 'commentform'
	));
	echo $this->Form->hidden('user_id', array(
		'value'=>$voice['Voice']['user_id']
	));
	echo $this->Form->hidden('voice_id', array(
		'value'=>$voice['Voice']['id']
	));
	echo $this->Form->input('comment', array(
		'type' => 'search',
		'value' => '',
		'style' => 'width:300px;',
		'placeholder' => __('Max length is 150')
	));
	echo $this->Form->end(__('Submit!'), array(
		'type' => 'submit'
	));
?>
<p>コメント数:<?php echo $comcnt[$voice['Voice']['id']]; ?></p>
<ul>
<?php if (!empty($voice['VoicesComment'])): ?>
<?php foreach ($voice['VoicesComment'] as $comment): ?>
<li><p><?php echo $comment['comment']; ?></p>
<p><?php
	echo $this->Html->link(
		$user[$comment['user_id']]['name'], array(
			'controller' => 'users',
			'action' => 'view/'.$comment['user_id']
		)
	);
?>
<?php echo $comment['modified']; ?></p></li>
<?php endforeach; ?>
<?php else: ?>
<li><?php echo __('Comment is nothing'); ?></li>
<?php endif; ?>
</ul>
<?php endforeach; ?>

14行目で「お題タイトル」を表示しています。

33行目〜53行目にてコメント投稿用フォームになります。
フォームに必要な情報としては、音声ID、ユーザーID、コメント文と送信ボタンになります。

54行目でコメント投稿数を表示します。

55行目〜72行目で投稿されたコメントを表示します。
コメントが無い場合は「コメントはありません」と表示するようにしています。

データ取得

上記の表示に必要なデータを取得する処理をコントローラ(VoicesController.php)の「index()」へ記述します。

public function index($genre_id = null) {
	/* コメント投稿時 */
	if ($this->request->is('post')) {
		if($this->request->data['VoicesComment']['comment']) {
			$this->VoicesComment->create();
			if (!$this->VoicesComment->save($this->request->data)) {
				$this->Session->setFlash(__('The Comment could not be saved. Please, try again.'));
			}
			$this->redirect(array('action'=>'index'));
		}
	}
	/* 音声情報取得 */
	$this->Voice->contain('User', 'Request', 'VoicesComment');
	$this->Voice->recursive = 0;
	$param = array();
	if($genre_id) {
		// ジャンル指定
		$param += array(
			'conditions' => array(
				'Request.genre_id' => $genre_id
			)
		);
	}
	$this->paginate = $param;
	$voices = $this->paginate();
	if(empty($voices)) {
		$this->Session->setFlash(__('投稿がありません。'));
	}
	$this->set('voices', $voices);
	$this->set('genre_id', $genre_id);

	/* コメント数取得前の初期化 */
	$comcnt = $voice_id = array();
	foreach ($voices as $voice) {
		$comcnt[$voice['Voice']['id']] = 0;
		$voice_id[$voice['Voice']['id']] = $voice['Voice']['id'];
	}
		
	/* ユーザー名取得 */
	... 省略 ...

	/* コメント数取得 */
	$comments = $this->VoicesComment->find('list', array(
		'conditions' => array('VoicesComment.voice_id' => $voice_id),
		'fields' => 'voice_id'
	));
	foreach ($comments as $com) {	// コメント数カウント
		$comcnt[$com]++;
	}
	$this->set('comcnt', $comcnt);
}

3行目〜11行目はコメント投稿時の処理になります。
投稿ボタンをクリックした時のみこの処理を実行し、コメント登録されます。

13行目で先程アソシエーションしたコメントテーブルの内容を取得するようにしています。

43行目〜49行目でコメント投稿数を取得します。

※ユーザー名取得処理は前記事を参照してください。

表示は以下になります。

site_voice_index_2

後は CSS でデザインをキレイにすれば完成です。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed