javascript split

文字列を分割

<script>
	str = "チャート,ニュース,優待";
	array = str.split(",");
	for(var i in array){
		document.write(i + ":"+ array[i] + " <br>");
	}
</script>

escape と unescape

<script>
var career = 'ドコモ';
console.log(career);
var result = escape(career);
console.log(result);
</script>

document.cookie

cookieをsetする

<script>
document.cookie ="key01=value01;";
</script>

複数セット

<script>
document.cookie ="keyA=valueA;";
document.cookie ="keyB=valueB;";
</script>

<script>
var cookieString = document.cookie;

function getCookie(key){
	var cookieString = document.cookie;

	var cookieArray = cookiString.split(";");

	for (var i=0; i<cookieKeyArray.length; i++){
		var targetCookie = cookieKeyArray&#91;i&#93;;

		targetCookie = targetCookie.replace(/^\s+|\s+$/g, "");

		var valueIndex = targetCookie.indexOf("=");
		if(targetCookie.substring(0, valueIndex) == key){
			returnn unescape(targetCookie.slice(valueIndex + 1));
		}
	}
	return "";
}
</script>

cookieを取得して配列にする

<script>
var str = document.cookie;

function getCookieArray(){
	var arr = new Array();
	if(document.cookie != ''){
		var tmp = document.cookie.split('; ');
		for(var i=0; i<tmp.length; i++){
			var data = tmp&#91;i&#93;.split('=');
			arr&#91;data&#91;0&#93;&#93; = decodeURIComponent(data&#91;1&#93;);
		}
	}
	return arr;
}

console.log(getCookieArray());
</script>

わかったような、わかってないような。
passの指定

document.cookie = 'data=123; path=/hoge/';
<script>
var expire = new Date();
expire.setTime(expire.getTime() + 1000 * 3600 * 24);
document.cookie = 'data=123; expires=' + expire.toUTCString();
</script>

vagrantでのlocation.hostとlocation.hostname

locationオブジェクトのhostプロパティは、現在ページURLのホスト情報(ホスト名とポート番号)を参照

http://192.168.33.10:8000で、
location.hostnameは「192.168.33.10」
location.hostは「192.168.33.10:8000」
location.portは「8000」

location.hostnameで動かないな、と思っていたら、location.hostでしたね。

MP4(m4a)とbps

MP4とは、MPEG-4形式の圧縮動画データを格納するファイル形式の一つて、静止画像や字幕といったデータはもちろんMPEGによって定義されたデジタル音声と動画をひとつのファイルに保存することができるコンテナ形式。MP4はApple社のメディア技術QuickTimeのファイル形式を元に策定されたISO/IEC 14496 Part 12の派生フォーマットで、従来のQuickTime形式の多くを踏襲した構造となっている。

mp3は音声を圧縮するときの方式(フォーマット)で,できあがったファイルの拡張子もmp3。 mp4は動画と音声を両方格納するための枠組み

192kbps以上ならたいていはmp3が高音質になるらしい。中には,128kbpsくらいで逆転することもあるとのこと。

ビットレートが高ければ高いほど、画質・音質が向上。
192kbpsとは1秒間に192kビットのデータが走っていること。

レコチョクはm4aを使われてますね。

audio/mpeg

MPEGは「音声、映像関連の規格」
MP3は「音声データを扱うときの規格のひとつ」
MIMEタイプは「ファイルの種類を表す情報」

mp3ファイルはaudioタグで囲う

<h1>MP3の再生</h1>
<audio src="test.mp3" controls></audio>

PHPで浜崎あゆみの昔のアルバムを聞きまくろう

10個リクエストを送ります。
重複してレスポンスが返ってくるので、array_uniqueで重複を削除します。

<?php

require 'vendor/autoload.php';

$session = new SpotifyWebAPI\Session(
    'id',
    'secret',
    'http://192.168.33.10:8000/callback/'
);

$api = new SpotifyWebAPI\SpotifyWebAPI();

$count = 10;

if (isset($_GET&#91;'code'&#93;)) {
    $session->requestAccessToken($_GET['code']);
    $api->setAccessToken($session->getAccessToken());


    $tracks = $api->search('浜崎あゆみ', 'track', array(
        'limit' => $count
        ));
 
// print_r('<pre>');
// var_dump($tracks);
// print_r('</pre>');
    for($i=0; $i<$count; $i++){
        $track_id&#91;&#93; = $tracks->tracks->items[$i]->album->id;
    }


    // print_r($track_id);
} else {
    $options = [
        'scope' => [
            'user-read-email',
        ],
    ];

    header('Location: ' . $session->getAuthorizeUrl($options));
    die();
}

$track_id = array_unique($track_id);
foreach($track_id as $value){
    echo "<iframe src=\"https://embed.spotify.com/?uri=spotify:album:".$value."\" width=\"300\" height=\"380\" frameborder=\"0\" allowtransparency=\"true\"></iframe>";
}
?>

あ、これは結構いい。昔の曲が聞ける。

LUNA SEA行ってみよう。 mothersはかっこよかった。

一曲全部じゃないのが惜しいが。

PHPで浜崎あゆみを聞いてみよう

spotify api
$api->searchでtrackが返ってきます。

<?php
require 'vendor/autoload.php';
$session = new SpotifyWebAPI\Session(
    'id',
    'secret',
    'http://192.168.33.10:8000/callback/'
);

$api = new SpotifyWebAPI\SpotifyWebAPI();
if (isset($_GET&#91;'code'&#93;)) {
    $session->requestAccessToken($_GET['code']);
    $api->setAccessToken($session->getAccessToken());
    $tracks = $api->search('浜崎あゆみ', 'track', array(
        'limit' => 1
        ));
    $track_id = $tracks->tracks->items[0]->album->id;
    print_r($track_id);
} else {
    $options = [
        'scope' => [
            'user-read-email',
        ],
    ];
    header('Location: ' . $session->getAuthorizeUrl($options));
    die();
}
// print_r('<pre>');
// var_dump($tracks);
// print_r('</pre>');
?>
<h1>spotify</h1>
<iframe src="https://embed.spotify.com/?uri=spotify:album:<?php echo $track_id; ?>" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>

まあまあいいんだけど、全部サビ前からサビの30秒位なんだよな。
1曲全部聞けないと、物足りない感が尋常ではない。

あ、iframeこんな感じです。うーん、違うな。やっぱりイントロから聞けないと絶対ダメでしょ。

spotify api invalid redirect uri

index.php

$session = new SpotifyWebAPI\Session(
    'client id',
    'client secret',
    'http://192.168.33.10:8000/callback'
);

spotify

invalid URIのレスポンスが返ってくるため、stackoverflowを見ていたら、

stackoverflow
https://stackoverflow.com/questions/32956443/invalid-redirect-uri-on-spotify-auth
app.js:
var redirect_uri = ‘http://localhost:8888/callback’;
Spotify > My application:
http://localhost:8888/callback/

それでもエラーで
なんでだろうと思っていたら、
myappとlocalで、callback urlは完全一致(バックスラッシュ)にしないといけないようです。
http://192.168.33.10:8000/callback/
http://192.168.33.10:8000/callback/

泣きたくなってきた。

mysql テーブル連携

まず、一つ目のテーブルを作くってデータを入れます。

create table cake.base(
	id int unsigned auto_increment primary key,
	code int,
	name varchar(255)
);

insert into base(code, name) values
('3689', 'イグニス'),
('4579', 'ラクオリア創薬'),
('3825', 'リミックスポイント');

二つ目のテーブルを作って、こちらにもデータを挿入。

create table cake.data(
	id int unsigned auto_increment primary key,
	code int,
	price int,
	time datetime default null
);

insert into cake.data(code, price, time) values
('3689', '3240', now()),
('3689', '3245', now()),
('3689', '3250', now()),
('3689', '3245', now());

INNER JOINでカラムを指定して結合する
SELECT base.code, base.name, data.price, data.time FROM base INNER JOIN data ON base.code = data.code;

OUTER JOIN
SELECT base.code, base.name, data.price, data.time FROM base LEFT OUTER JOIN data ON base.code = data.code;
dataが入っていないラクオリア創薬、リミックスポイントもselectされます。

更にテーブルを連結する場合も、joinでok
create table cake.market(
id int unsigned auto_increment primary key,
code int,
market varchar(255)
);

insert into market(code, market) values
(‘3689’, ‘マザーズ’),
(‘4579’, ‘ジャスダック’),
(‘3825’, ‘東証二部’);

SELECT base.code, base.name, data.price, data.time, market.market FROM base JOIN market ON base.code = market.code JOIN data ON base.code = data.code;