Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

YiiAdvent Calendar 2015Day 1
@livejam_db

Yii2 でプロモーション用の音楽トラックを一元管理するアプリを作る

Posted at

はじめに

個人的な趣味で、各音楽レーベルがプロモーション用に公開している音楽 (Bandcamp, SoundCloud, Vimeo, YouTube などに散らばっている) を一元管理するアプリを Yii2 で作っています。で、この記事では、そのアプリの一部分をよりシンプルにした形で書こうと思います。それでもわりとごちゃごちゃしてしまうかもですが、Yii2 でアプリを作る流れを少しでも感じ取っていただければ幸いです。

このアプリでできること

  • 曲の URL をユーザが入力すると、自動的に曲の情報をデータベースに保存する
  • 保存されたデータをリスト表示して、サムネイルをクリック(タップ)すると曲が再生される

使ったもの

  • PHP 5.6.16
  • MySQL 5.7.9
  • Yii Framework 2.0.7-dev
  • jamband/ripple 0.1.5

インストールと設定

Composer で Yii2 などをインストール:
(Composer や composer asset plugin などのインストール方法は公式ガイドの Yii をインストールする を参考にしてください)

cd /path/to/somewhere
composer create-project --prefer-dist yiisoft/yii2-app-basic basic
cd ./basic

で、今回は Yii の 2.0.7 以降の機能も少し使いたいので yiisoft/yii2 を dev-master にして、ついでに jamband/ripple もインストールするようにします。
( jamband/ripple は URL から曲の情報を取得したりするのに使います )

composer.json
{
    "require": {
        "yiisoft/yii2": "dev-master",
        "jamband/ripple": "*",
}

composer update

yii2basic というデータベースを作成:
( データベース名は任意のものでかまわない )

mysql.server start
mysql --login-path=xxxxxxx
mysql> CREATE DATABASE yii2basic;

アプリ側で DB の設定をする:
( ユーザ名、パスワードは自分の環境に合わせる )

config/db.php
return [
    'class' => 'yii\db\Connection',
    'dsn' => 'mysql:host=localhost;dbname=yii2basic',
    'username' => 'xxxxxxx',
    'password' => 'xxxxxxx',
    'charset' => 'utf8',
];

track テーブルの作成:
( 曲の情報をこのテーブルに挿入していきます )

./yii migrate/create create_track --fields=url:string:notNull,title:string:notNull,image:string:notNull,provider_name:string:notNull,provider_key:string:notNull

上記のやり方は Yii 2.0.7 以降で使えるやり方です (データベースマイグレーション) 。

各カラムは以下のような感じ:

  • url: 曲の URL
  • title: 曲のタイトル
  • image: 曲のサムネイル
  • provider_name: 曲を提供元 (Bandcamp, SoundCloud, Vimeo, YouTube のいずれか)
  • provider_key: 曲の ID

適用します:

./yii migrate

PHP ビルトインウェブサーバを起動:

php -S localhost:8080 -t /path/to/basic/web

ブラウザで localhost:8080 にアクセスします。「Congratulations!」と出れば OK です。あとデフォルトでは URL が若干汚いので以下の設定で綺麗にしておきます:

config/web.php
'components' => [
    // ...
    'urlManager' => [
        'enablePrettyUrl' => true,
        'showScriptName' => false,
    ],

これで準備は完了 :)

Track モデルの作成

  • http://localhost:8080/gii にアクセスし Model Generator の Start ボタンをクリック
  • Table Name に t と入力し候補の track をクリック
  • タブで Model Class に移動し、自動で Track と入力されているのを確認
  • Generate Relations のチェックを外す
  • Preview ボタンをクリックし Generate ボタンをクリック

これで Track モデルが作成されます。

Track モデルの中身を書いていく

Track モデルでは、URL から自動的に曲の情報を取得するコードとバリデーションルールを書いていきます。新たに作るメソッドは以下:

models/Track.php
public function setContents(\Goutte\Client $client) {
    // URL から自動で title, image, provider_name, provider_key を取得するコードを書く
}
public function validateUrl($attribute, $params) {
    // URL が曲の URL として正しいものかをチェックし
    // 正しくない場合はエラーメッセージを追加する
}
public function validateContent($attribute, $params) {
    // URL から曲の情報が取得できているかをチェックし
    // 取得できていない場合はエラーメッセージを追加する
}

まずは Track::setContents() から:

models/Track.php
use jamband\ripple\Ripple;
use Goutte\Client;

class Track extends \yii\db\ActiveRecord
{
    /**
     * @param Client $client
     * @return Track
     */
    public function setContents(Client $client)
    {
        $ripple = new Ripple($this->url);
        if ($ripple->isValidUrl()) {
            $ripple->request($client);

            if ($this->title === '') {
                $this->title = $ripple->title();
            }
            $this->image = $ripple->image();
            $this->provider_name = $ripple->provider();
            $this->provider_key = $ripple->id();
        }
        return $this;
    }

URL を Ripple に食わせて、それが正しい URL ならば曲の情報を自動取得して、各カラムにセットしている感じです。

バリデーションルール:

models/Track.php
public function rules()
{
    return [
        [['url'], 'required'],
        [['url', 'title'], 'trim'],
        [['url', 'title'], 'unique'],
        [['title'], 'string', 'max' => 200],
        ['url', 'validateUrl'],
        ['url', 'validateContent'],
    ];
}

public function validateUrl($attribute, $params)
{
    if (!(new Ripple($this->$attribute))->isValidUrl()) {
        $this->addError($attribute, '曲の URL が正しくありません。');
    }
}

public function validateContent($attribute, $params)
{
    if (!isset($this->image) || !isset($this->provider_key)) {
        $this->addError($attribute, 'URL から曲の情報が取得できません。');
    }
}

URL が曲の URL として正しいかを検証するものと、URL からちゃんと曲の情報が取得できているかを検証するものをカスタムなバリデーションルールとして定義しています。バリデーションの作り方は公式ガイドの 入力を検証する が参考になります。

TrackController とビューの作成

  • http://localhost:8080/gii にアクセスし CRUD Generator の Start ボタンをクリック
  • Model Class に app\models\Track と入力
  • Controller Class に app\controllers\TrackController と入力
  • Widget Used in Index Page の下をクリックして ListView に合わせる
  • Preview ボタンをクリックし Generate ボタンをクリック

これでコントローラとビューが作成されます。ついでに http://localhost:8080 にアクセスしたときに track/index を呼び出す形に変えておきます。

config/web.php
$config = [
    'id' => 'basic',
    'defaultRoute' => 'track', // 追加
    'basePath' => dirname(__DIR__),
    // ...

TrackController の中身を書いていく

モデルで書いた Track::setContents() をコントローラの actionCreate() と actionUpdate() で呼び出すようにします。

controllers/TrackController.php
use jamband\ripple\Ripple;
use Goutte\Client;

// この行を
if ($model->load(Yii::$app->request->post()) && $model->save()) {

// こう書き換える
if ($model->load(Yii::$app->request->post()) && $model->setContents(new Client())->save()) {

これでコントローラは OK です :)

曲を追加してみる

これで曲のいろんな情報がデータベースに自動で挿入されます ( 以下は例です ) 。

カラム 値
ID 1
Url https://linneshelvete.bandcamp.com/track/tjeresten
Title Linnés Helvete - Tjeresten
Image https://f1.bcbits.com/img/a3144407673_16.jpg
Provider Name Bandcamp
Provider Key 932292198

曲を再生してみる

再生するにあたって、以下のような流れをとりました:

  • 追加した曲のサムネイルをリスト表示する
  • サムネイルをクリックするとモーダルウィンドウが表示されて曲が再生される
  • 再生されている場合、ページ上部に現在再生されている曲のタイトルを表示する
  • そのタイトルをクリックすると現在再生されている曲がまたモーダルウィンドウで表示される
  • x アイコンをクリックすると再生はストップする (一時ではなく完全に)
  • 再生していても他の曲を探せるようにする (なにかしらの操作をしていても再生を停止させない)

最後は「ある程度」そうさせるくらいで。

TrackController::actionIndex() と views/track/index.php の修正

わかりやすくするために 1 ページに 2 件だけリスト表示する形に変更:

controllers/TrackController.php
$dataProvider = new ActiveDataProvider([
    'query' => Track::find(),
    'pagination' => ['pageSize' => 2], // 追加
    'sort' => false, // 追加
]);

サムネイルをギャラリー風に:

views/track/index.php
<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\widgets\LinkPager;
use yii\widgets\Pjax;
?>
<h1><?= Html::encode($this->title) ?></h1>
<p><?= Html::a('Create Track', ['create'], ['class' => 'btn btn-success']) ?></p>

<div id="track-embed"></div>
<div id="track-now" class="text-center"></div>

<?php Pjax::begin(['scrollTo' => 0]) ?>
    <div class="row">
        <?php $embedUrl = Url::to(['embed']) ?>
        <?php foreach ($dataProvider->models as $model): ?>
            <div class="col-xs-12 col-sm-6">
                <div class="thumbnail">
                    <?= Html::img(Html::encode($model->image), [
                        'class' => 'track-image',
                        'data-url' => $embedUrl,
                        'data-name' => $model->provider_name,
                        'data-key' => $model->provider_key,
                        'data-title' => $model->title,
                    ]) ?>
                    <div class="caption">
                        <h4><?= Html::a(Html::encode($model->title), Html::encode($model->url), [
                            'target' => '_blank',
                        ]) ?></h4>
                        <?= Html::a('View', ['view', 'id' => $model->id]) ?>
                    </div>
                </div>
            </div>
        <?php endforeach ?>
    </div>
    <?= LinkPager::widget(['pagination' => $dataProvider->pagination]) ?>
<?php Pjax::end() ?>

<?php
$this->registerJs(<<<'JS'
$(document).on('click', '.track-image', function() {
    var $el = $(this);
    $.ajax($el.attr('data-url'), {
        timeout: 10000,
        data: {
            name: $el.attr('data-name'),
            key: $el.attr('data-key')
        },
        context: {
            name: $el.attr('data-name'),
            title: $el.attr('data-title')
        }
    }).done(function(data) {
        $('#track-embed').html('<div class="fade modal" id="track-modal"><div class="modal-dialog">' +
            '<iframe src="' + data.embed + '" frameborder="0" allowfullscreen /></div></div>');

        var $modal = $('#track-modal');
        var $iframe = $modal.find('iframe');

        if (/^(Vimeo|YouTube)$/.test(this.name)) {
            $iframe.wrap('<div class="embed-responsive embed-responsive-16by9" />')
                .addClass('embed-responsive-item');
        } else {
            $iframe.attr({
                'width': '100%',
                'height': '120'
            });
        }
        $modal.modal('show');
        $('#track-now').html('<p><span id="track-now-title" /><span id="track-now-clear" /></p>');
        $('#track-now-title').text(this.title);
    }).fail(function(data) {
        alert('通信に失敗しました。');
    });
});
$(document).on('click', '#track-now-title', function() {
    $('#track-modal').modal('show');
});
$(document).on('click', '#track-now-clear', function() {
    $('#track-modal, #track-now').empty();
});
JS
);

インラインの JavaScript 部分は、サムネイルがクリックされると /track/embed に name, key のパラメータを付加して Ajax で GET リクエストします。成功すれば #track-embed 部分の HTML を組み立ててモーダルウィンドウを表示し、 #track-now 部分にタイトルを表示します。

TrackController::actionEmbed() のコードを書く

controllers/TrackController.php
use yii\web\Response;

/**
 * @param string $name プロバイダ名
 * @param string $key 曲の ID
 * @return mixed
 */
public function actionEmbed($name, $key)
{
    if (Yii::$app->request->isAjax) {
        $ripple = new Ripple();
        $ripple->setEmbedParams(Yii::$app->params['ripple.embed']['index']);

        Yii::$app->response->format = Response::FORMAT_JSON;
        return ['embed' => $ripple->embed($name, $key)];
    }
}

リクエストが Ajax 通信のものであれば、iframe の生成に必要な src を Ripple::embed() で組み立てて値を返します。また、埋め込み用のオプションを事前に設定しておくと、自動再生にしたり、見た目のカスタマイズが可能になります。Ripple::setEmbedParams() で設定します。例としては以下:

config/params.php
return [
    'ripple.embed' => [
        'index' => [
            'Bandcamp' => 'size=large/tracklist=false/artwork=small/',
            'SoundCloud' => '&auto_play=true&show_comments=false',
            'YouTube' => '?autoplay=1',
            'Vimeo' => '?autoplay=1',
        ]
    ],
];

スタイルの微調整

仕上げにスタイルを良い感じにします:

views/layouts/main.php
<!-- <?= Html::csrfMetaTags() ?> の下らへんに以下を追加 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
web/css/site.css
#track-now-title,
#track-now-clear {
  cursor: pointer;
}
#track-now-title:before,
#track-now-clear:before {
  font-family: FontAwesome;
  padding: 0 5px;
}
#track-now-title:before {
  content: "\f028";
}
#track-now-clear:before {
  content: "\f00d";
}
.track-image {
  width: 100%;
  cursor: pointer;
}

これでデモアプリは完成です :)

注意点

  • このデモアプリは端末によって曲の自動再生ができるものもあれば、そうでないものもあります
  • また PC 端末であっても YouTube などをバックグラウンドで再生させる Web サービスはよろしくないので、見せ方を工夫する必要があります

リンク

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?