iPhone6 曲がりやすいし割れやすい!?

2014年10月7日

Pocket

garasu

iPhone6が発売されてまだ一ヶ月も経っていませんが、いろいろ問題が続出していますね。
発売してすぐに「ポケットに入れていたら曲がった」という記事をよく目にしましたが、「落としたら画面が割れた」という報告の方が多い気がします。
というのも、私のiPhone6もつい先日割れてしまい、ネットで調べたところ「iPhone6を買って5分で落として割れた」など、割れたというたくさんの事例を目にしました。
これからiPhone6を買う人に注意しておきたいことを記事にしてみました。

iphone6

保証には必ず入りましょう

iPhone6は恐ろしく割れやすいです!
一度落としただけで、上の写真のような有様になってしまいました。
iPhone5では落としても傷がいく程度だと思っていたら痛い目に遭います。
iPhoneは携帯会社で修理できないので、Appleに修理を依頼することになります。
5分で全部が分かる!AppleCareの特徴とメリット
AppleCare
あんしん保証パック(SoftBank)
ケータイ補償サービス for iPhone & iPad(docomo)

ケースを付けましょう

個人的には、ケースをするのが嫌いなので、iPhone5の時もしていなかったのですが、
今回の画面が割れてしまい、さすがにケース買うかなって思いました。
ケースをするだけでもだいぶ衝撃を軽減できるのではないでしょうか。(・・・たぶん)

画面カバーを付けましょう

何やら衝撃吸収フィルムというのがあるようです。(修理の時に勧められました)
ちなみに私は傷防止のフィルムを貼ってましたが、悲惨なほどに割れました。
衝撃吸収フィルム

続きを読む

世界中のセレクトショップが集結するサービス『Farfetch』

2014年10月6日

Pocket

farfetch2

『Farfetch』は、海外のセレクトショップが多数出展しているオンラインマーケットです!
2014年7月に日本語版が出て、日本でも買い物がしやすくなりました。
日本では手に入らないレアなアイテムもここでなら手に入るかもしれません!
 
 
Farfetchのサイトはこちら
http://www.farfetch.com/jp/
 
 

Farfetchの特徴

セレクトショップごとに商品が出品されているので、お気に入りのショップで買い物できます。
 
 
Farfetchでは世界中のセレクトショップやブティックが集結し、ラグジュアリーなファッションブランドを展開しているので、ハイブランドが好きな方は見ているだけでも楽しいと思います!
セレクトショップごとの出品というところがミソかなと思います。
セレクトショップごとに取り扱っている商品にも値段差があり、商品のラインナップもさまざまで、世界のショップをウィンドウショッピングしているような感覚で、ショッピングを楽しめます。海外限定の商品も手に入れることができるかもしれません。
また、バイヤーの個性が表れ、人材発掘の場としても利用されているようです。
 
サイト内では特集ページが存在し、セレクトショップからのおすすめトレンド情報、カルチャー、最新ブランドニュースなどが掲載されています。
そこで、最新のファッション情報をキャッチしてから、お買い物しても良いかもしれません。
もちろんブランドやアイテムでの検索もかけれるので、「セレクトショップとか興味ない」という人もお買い物しやすいですよ。
 
購入の際はトラブルも増えているみたいなのでご注意を!!
なんせ海外のショップから買い物するので、送料や関税などのトラブルが出ているみたいです・・・。
 
ときどき送料無料キャンペーンやセールを行っているので、その機会に購入してみてはいかがでしょうか?

FarFetch

続きを読む

WEB上の音楽プレイリストを作って共有できるサービス『whyd』

2014年10月1日

Pocket

whyd

最近、音楽ストリーミングサービスが増えて、色々無料で音楽を聞けて便利な時代になりました。
今日は、YouTubeやSoundCloudなど、WEB上に落ちている音楽でプレイリストを作ったり、人と共有したりできる音楽サービスについてリポートします!
 
 
whydのサイトはこちら
http://whyd.com/
 
 
普段皆さんはどんなツールを使って音楽を聞いているでしょうか。 
whydでは、ウェブ上で音楽を保存して聞くことができます。 
 
個人的なwhydのポイント 
・ウェブ上でプレイリスト管理 
・YouTubeから引っ張ってこれる 
 

ウェブ上でプレイリストを作れる

「あの曲iTunesに入れるの忘れてた」なんてなっても、インターネットが通じるところならどこでもすぐに検索して聴くことができます。 
そして、検索して気に入った音楽や動画は自分でプレイリストを作って保存しておくことができます。 
お気に入りのプレイリストを一度作っておけば、ログインさえすれば家でも仕事場でも移動中でもそのプレイリストを流すことができます。
 

ウェブ上に落ちている音楽を引っ張ってこれる

私が魅力的に思ったのは、 
YouTubeやSoundCloudから音楽を読み込めるので、インディーズはもちろん、デビューしていないようなアーティストが聞けるということです!! 
マイナーなアーティストだと「レンタルCDもないし、でもCD買うほど聞きたい訳じゃないし」っていうことがあったのですが、ウェブ上に音源さえ落ちていれば、気になるアーティストのプレイリストを無料で作って聞けるのがいいなと思いました。 
whydで検索にほしい曲が引っかからなくても、YouTubeで気に入った曲があれば、そのURLをコピーして、whydの『Add track』のボタンを押して先ほどコピーしたURLをペーストすればトラックに追加できます! 
 

音楽を共有できる

作ったプレイリストは、人と共有でき、世界中の人に発信でき、また、世界中の人のプレイリストを聞くことができます。 
気になった曲を上げている人をフォローして、『Stream』でフォローした人の最近追加された音楽を確認したりできます。
さらに、iframeでプレイリストを埋め込むこともできるので、ブログなどに上げるのも便利です! 
前の記事の、「2014年に流行った 押さえておきたいバンドまとめ」でも、whydでプレイリストを作って埋め込んでいます。 
 

iPhoneで聴ける

もちろんアプリもあるので、iphoneでも他のアプリを使いながらwhydで音楽を流すこともできます! 
でも、YouTubeだと音質が悪いので、iphoneでイヤホンを付けて聞くとちょっと音質が気になります。 
個人的には、パソコンでBGMとして流しながら仕事するのが好きです。 
 
http://whyd.com/
 
 
ぜひ一度使ってみてください!

続きを読む

2014年に流行った 押さえておきたいバンドまとめ

2014年9月29日

Pocket

band

2014年も残り3ヶ月となりました。
「もうそのバンド知ってるよ!」って言う人も多いかもしれませんが、
話題に乗り遅れない為に、2014年注目されていたこれだけは知っておきたい人気のバンドをまとめてみました。
 
 

KANA-BOON


 
一度効いたら耳から離れない
2012年キューンレコードの20周年記念オーディションで4,000組の応募者の中から優勝し、ASIAN KUNG-FU GENERATIONのオープニングアクトを務めたことで話題になり、今年はメディアに引っ張りだこ!
一度効いたら耳からは慣れないフレーズで、若者を中心に大人気の大阪発バンドです。
Webサイト
http://www.kanaboon.com/
 
 

ゲスの極み乙女


 
バンド名とは裏腹にオシャレなサウンド
2014年にメージャーデビューしたばかりで、auのスマートフォン「isai FL」のCMソング、「アンテナ Antenna」のCMソングで使われ、今年絶対、耳にしているはずです!!
バンド名だけ聞くとキワモノバンドかと思っちゃいますが、ピアノが効いたオシャレなサウンドです!
Webサイト
http://gesuotome.com/
 
 

グッドモーニングアメリカ


 
メロディックなサウンドが心に響く
名前を聞いたことある人は多いのではないでしょうか。
結成13年目にして2013年5月にメジャー入りを果たした実力派バンド!
Webサイト
http://goodmorningamerica.jp/
 
 

パスピエ


 
印象派×ポップ・ロック バンド
『印象派×ポップ・ロック バンド』と、音楽だけでなくカルチャー全体としてアプローチし、現代風なテクノを貴重としたポップロックサウンドを奏でます。
ノリの良いテクノサウンドと女性ボーカルのボイスが癖になる注目のバンドです!
Webサイト
http://passepied.info/
 
 

キュウソネコカミ


 
サブカル好きならみんな知ってるはず
バンド名は、ファイナルファンタジーX-2に登場する装備アイテム「キューソネコカミ」に由来しているそうです。
キャッチーなサウンドに合わせた「2ちゃんのまとめを見ちゃうね」という歌詞や「DQNなりたい、40代で死にたい」というタイトルなど、現代人ならではなフレーズに親近感が湧いてしまう人も多いかもしれません。
Webサイト
http://02.mbsp.jp/kyuuso/
 
 

KEYTALK


 
正統派でカッコいい!
ライブ公演チケットが度々SOLD OUTし、今大注目のバンド!
Webサイト
http://keytalkweb.com/
 
 

tricot


 
超カッコいいガールズバンド
ガールズバンドといえばチャットモンチーやねごとのようなイメージがついつい出てきてしまいますが、ハスキーなボイスに独特な変拍子のサウンドが今までのガールズバンドのイメージを覆されます!
Webサイト
http://tricot.tv/
 
 

東京カランコロン


 
可愛い歌詞にメロメロ
2010年6月ディスクユニオンにて2ndデモCD取り扱い開始後、インディーズチャートで連続1位を獲得し、2013年にメージャーデビューを果たしました。
可愛い歌詞に共感している人も多いようです!
Webサイト
http://tokyokarankoron.com/
 
 

SHISHAMO


 
甘酸っぱい青春を思い出させる!
高校卒業したての早咲き3ピースバンド!
学生時代の淡い思い出を描いた歌詞に青春時代を思い出してください。
Webサイト
http://shishamo.biz/
 
 

きのこ帝国


 
甘酸っぱい青春を思い出させる!
オルタナやシューゲイザーに影響を受けたギターサウンド、優しい声が不思議な感覚に誘い込まれます。
Webサイト
http://www.kinokoteikoku.com/
 
 
 
これだけ押さえておけば、話題に乗り遅れないはず!!
というのも、『spotify』という紙サービスで洋楽ばかりBGMにしていたので、「最近の流行ってる邦楽バンドってどんなんだろー」と思い急いで調べた次第でございます・・・。
下に今回ピックアップした曲をプレイリストにまとめたので、作業用BGMにでもどうぞ!
 
 
 

続きを読む

three.jsで3Dデザインの作成

2014年9月26日

Pocket

l_060

最近のWebデザインは2次元表現のみならず、3次元表現が増えてきていますね!
3Dデザインと効くと敷居が高いと思いますが、three.jsを使うとあっと間に3Dデザインができます。
今回は、three.jsを使用して3Dで立体を描画してみましょう!
 
 

準備

まずは、three.jsを下記からダウロードします。
 
http://threejs.org/
 
ダウンロードしたフォルダ内のbuildフォルダにあるthree.min.jsのファイルを任意の場所に移し、htmlファイルで読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/three.min.js"></script>

 
 

基本用語

scene 3Dを表現する空間
geometry 描画するオブジェクトの形
material 描画するオブジェクトの素材
mesh 3Dオブジェクト
camera sceneを撮影するカメラ
renderer 作成したmeshをHTMLと紐付け表示させる

 
 

描画空間作成

では、早速コードを書いていきましょう。
HTML

<div id="three_d" style="width:500px; height:300px;"></div>

3Dを描画する場所を作ります。
 
JavaScript

//scene
var scene = new THREE.Scene();

図形が描かれる3D空間のsceneを作成。
 
 

オブジェクト作成

//cube
var geometry = new THREE.CubeGeometry(50,50,50); //----①
var material = new THREE.MeshLambertMaterial({color : "#2E2E2E"}); //----②
var cube = new THREE.Mesh(geometry,material); //----③
cube.position.set(0, 0, 0); //----④
scene.add(cube); //----⑤

①geometry(キューブ型)を作成。
②materialを作成。
③meshを作成。
④meshのポジションを設定。
⑤sceneに描画する。
 
 

カメラ作成

//camera
var camera = new THREE.PerspectiveCamera(45,width/height,1,1000); //----①
camera.position.set(100,100,200); //----②
camera.lookAt(cube.position); //----③

①cameraの写す領域を設定。
②cameraのポジションを設定。
③cameraの向いている方向を設定。この場合は、cubeの方に向けています。
 
 

renderer

//#three_dのサイズ取得
var width = $('#three_d').width();
var height = $('#three_d').height()

//renderer
var renderer = new THREE.WebGLRenderer(); //----①
renderer.setSize(width,height); //----②
renderer.setClearColor(0xeeeeee,1); //----③
document.getElementById('three_d').appendChild(renderer.domElement); //----④
renderer.render(scene,camera); //----⑤

①renderer作成。
②先ほどcameraで設定したサイズを設定。
③sceneの背景色を設定。
④#three_dにrendererを展開。
⑤表示する。
 
スクリーンショット 2014-09-17 23.59.38
 
このままだと光源がないので真っ黒なままです。
次に光源を足しましょう。
 

光源を作成

//light
var light = new THREE.DirectionalLight(0xffffff); //----①
light.position.set(200,600,0); //----②
scene.add(light); //----③
var ambient = new THREE.AmbientLight(0x1C1C1C); //----④
scene.add(ambient); //----⑤

①光源(light)の色を設定。
②lightのポジションを設定。
③lightをsceneに追加。
④AmbientLight(環境光)を設定。
⑤AmbientLightをsceneに追加。
 
スクリーンショット 2014-09-17 17.22.45
 
 

オブジェクトをアニメーションさせる

JavaScript

function render(){
	requestAnimationFrame(render); //----①
	cube.rotation.x += 1 * Math.PI / 180; //----②
	cube.rotation.y += 1 * Math.PI / 180; //----②
	cube.rotation.x += 1 * Math.PI / 180; //----②

	renderer.render(scene,camera);
}
render(); //----③

①アニメーションさせるためにrender()を呼び起こす。
②cubeをx、y、z方向に回転させる。
③render()を呼び起こす。
 
 

OrbitControls

色々な向きからオブジェクトを見れるようにcamera位置をカーソルで動かせるようにします。
ダウンロードファイルの中にあるOrbitControls.jsのファイルを任意の場所に移動し、読み込みます。
HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>

JavaScript

//controls
var controls = new THREE.OrbitControls(camera,renderer.domElement); //----①
controls.minDistance = 	10; //----②
controls.maxDistance = 1000; //----③

function render(){
	requestAnimationFrame(render);
	cube.rotation.x += 1 * Math.PI / 180;
	cube.rotation.y += 1 * Math.PI / 180;
	cube.rotation.x += 1 * Math.PI / 180;

	renderer.render(scene,camera);
	controls.update(); //----④
}
render();

①controlsを作成。
②近づける距離の最小値を設定。
③遠ざかれる距離の最大値を設定。
④controlsをアップデートする。
 
 
 

DEMO

上記のコードをまとめた物が下記です。
 
DEMO
 
 
HTML

<!DOCTYPE html>
<html>
<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="js/three.min.js"></script>
	<script src="js/OrbitControls.js"></script>
</head>
<body>
	<div id="three_d" style="width:500px; height:300px;"></div>
<body>
</html>

JavaScript

//#three_dのサイズ取得
var width = $('#three_d').width();
var height = $('#three_d').height()

//scene
var scene = new THREE.Scene();

//cube
var geometry = new THREE.CubeGeometry(50,50,50);
var material = new THREE.MeshLambertMaterial({color : "#2E2E2E"});
var cube = new THREE.Mesh(geometry,material);
cube.position.set(0, 0, 0);
scene.add(cube);

//light
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(200,600,0);
scene.add(light);
var ambient = new THREE.AmbientLight(0x1C1C1C);
scene.add(ambient);

//camera
var camera = new THREE.PerspectiveCamera(45,width/height,1,1000);
camera.position.set(100,100,200);
camera.lookAt(cube.position);

//renderer
var renderer = new THREE.WebGLRenderer()
renderer.setSize(width,height);
renderer.setClearColor(0xeeeeee,1);
document.getElementById('three_d').appendChild(renderer.domElement);
renderer.render(scene,camera);

//controls
var controls = new THREE.OrbitControls(camera,renderer.domElement);
controls.minDistance = 	10;   //近づける距離の最小値
controls.maxDistance = 1000;   //遠ざかれる距離の最大値

function render(){
	requestAnimationFrame(render);
	cube.rotation.x += 1 * Math.PI / 180;
	cube.rotation.y += 1 * Math.PI / 180;
	cube.rotation.x += 1 * Math.PI / 180;

	renderer.render(scene,camera);
	controls.update();
}
render();

 
 
 
他にも色々なオブジェクトを簡単に描画できるので、気になった人は色々試してみてください!

続きを読む

【芸術の秋堪能】この秋行きたいアート・デザインイベントまとめ

2014年9月22日

Pocket

アートイベント

最近めっきり涼しくなり秋を感じる今日この頃です。
秋といえば、食欲の秋。読書の秋。芸術の秋。
今回は、この秋に行きたい芸術の秋を堪能できるイベントをご紹介!
(個人的に行きたいイベントばかりですが・・・)

ヨコハマトリエンナーレ2014

横浜トリエンナーレ
横浜の港町で行われるかなり大きなアートイベント。
絵画、映像、インスタレーションなどたくさんのアートに一気に触れれるチャンスです。

エントランスをくぐるとマイケル・ランディ作『アート・ビン』が堂々と存在しています。
『アート・ビン』では、作品の中にゴミを入れる参加者を募集しているみたいなので、トリエンナーレに作家(?!)として参加してみてはいかがでしょうか。
またアーティスト・トークやワークショップなども楽しめます。
会期
8.1[FRI]〜11.3[MON] 
開場時間
10:00-18:00
※入場は閉場の30分前まで
(8月9日[SAT]、9月13日[SAT]、10月11日[SAT]、 11月1日[SAT]は20:00まで開場) 
会場
横浜美術館、新港ピア(新港ふ頭展示施設) 
Webサイト
http://www.yokohamatriennale.jp/2014/ 

TOKYO DESINERS WEEK 2014

デザイナーズウィーク
10万に以上を動員する、アート、デザイン、ファッション、音楽と盛りだくさんなクリエイティブフェスです。
イベントのメイン会場Creative Life展では、様々な企業が出展し情報を発信しており、ビジネスの場として新たな企業との交流のきっかけになるかもしれません。
また、手作りの作品を販売しているハンドメイドマーケットやフードコート、ミュージックライブ、ワークショップなど、一日たっぷり楽しめます。
テクノロジー×クリエイティブの最高峰 ロボット展など気になるブースが盛りだくさんです!
会期
10.25[FRI]〜11.3[MON]
開場時間
11:00-21:00
会場
東京都新宿区霞ヶ丘町2-3 明治神宮外苑絵画館前
Webサイト
http://www.tdwa.com/

Maker Faire 2014

maker faire
プロからアマまでが出展しており、新しいテクノロジーを利用したユニークな作が展示されています。
作品は実際に触ったり、体験したり、購入したりできます。
アート、デザインというよりはテクノロジーのイベントですが、様々な技術を駆使した作品があり
今、旬なテクノロジーの技術を生で見る良い機会かもしれません。
去年なんかは3Dプリンターを利用したブースが多かったですが、今年はどんな技術者たちが出展しているのか楽しみですね。
テクノロジーに興味がある人はきっと楽しめることでしょう。
会期
11.23[SUN]、11.24[MON]
開場時間
11.23[SUN] 12:00~19:00
11.4[MON] 10:00~18:00
会場
東京ビッグサイト
Webサイト
http://makezine.jp/event/mft2014/

TRANS ARTS TOKYO 2014

TRANS ARTS TOKYO
東京のど真ん中に出現した空き地を利用して行われるアートイベント。
気球の飛行や音楽ライブ、巨大アート作品展示、キャンプ体験、神田カレー&スポーツエキスポ、ファッションショーなど神田周辺の街で様々なクリエイティビティを楽しめます。
椿昇 + 室井尚作品「インセクト・ワールド-飛蝗」が展示されており、全長50mの飛蝗の体内をめぐるツアーもぜひ体験してみたいですね。
※プログラムに寄って開催日が異なりので、事前にしっかり公式HPでご確認を。
会期
9.20[SUN]~11.3[MON]
開場時間
日により異なる
会場
旧東京電機大学跡地:東京都千代田区神田錦町2-2
ワテラスコモン:東京都千代田区神田淡路町2-101
アーツ千代田3331:東京都千代田区外神田6-11-14
カフェ&和酒N3331 マーチエキュート神田万世橋:
東京都千代田区神田須田町1-25-4
Webサイト
http://makezine.jp/event/mft2014/

デザインフェスタ

デザインフェスタ
プロ、アマ問わず誰でも参加することができるアートイベントです。
絵画や、服、雑貨など本当に様々なジャンルの作品が出展、販売されており一日中見ていて飽きないでしょう。
会場内には、レストランなど食事スペースもあるので、見て回ってお腹が空いても大丈夫です!
デザインフェスタは定期的に開催していますが、この秋に訪れてみてはいかがでしょうか。
会期
11.8[SAT]~11.9[SUN]
開場時間
11:00~19:00
会場
東京ビッグサイト
Webサイト
http://designfesta.com/
 
 
 
アートやらテックやら混じってしまいましたが、とにかく秋はアートイベントがいっぱいですよ!
芸術に触れてこの秋を堪能してください。

続きを読む

【Web Audio API入門】音楽プレイヤー作成 第3弾

2014年9月19日

Pocket

PLANTILLA_FREEPIK

今回は、音楽データを視覚化します。
SoundCloudなど、音楽サイトなんかでよく見かけるアレを作ります。
これを作るとグッとプレイヤー感が上がりますよ。

波形を描画

波形を描画するには、canvasを使います。
なので、まずはhtmlにcanvasタグを記述しましょう。
HTML

<body>
    <p class="botton" onClick="play()">PLAY</p>
    <p class="botton" onClick="stop()">STOP</p>
    <p>Volume</p>
    <input id="volume" type="range" value="50" onChange="volumeChange()">
</body>
<canvas width="650" height="200"></canvas>

 
波形のデータを得るにはgetChannelDataメソッドを使います。
 
JavaScript

xml.onload = function() {
    if (xml.status === 200) {
        //引数を受け取る
        var arrayBuffer = xml.response;
        if (arrayBuffer instanceof ArrayBuffer) {
            var successCallback = function(audioBuffer) {
                //AudioBufferインスタンスを変数へ格納
                buffer = audioBuffer;

                var channelLs = new Float32Array(audioBuffer.length);

                //オーディオデータのチャンネル数が0以上のとき
		if (audioBuffer.numberOfChannels > 0) {
		    //getChannelDataメソッドで波形データ取得
		    channelLs.set(audioBuffer.getChannelData(0));
		}

                //10ミリ秒
                var n10msec = Math.floor(10 * Math.pow(10, -3) * context.sampleRate);

                //canvas
                var canvas = document.querySelector('canvas');
                var canvasContext = canvas.getContext('2d');
                //canvasをクリアにする
                canvasContext.clearRect(0, 0, canvas.width, canvas.height);

                //channelLsの長さだけループ
                for (var i = 0, len = channelLs.length; i < len; i++) {
                    //10ミリ秒ごとに描画
                    if((i % n10msec) === 0){
                        var x = (i / len) * canvas.width;
                        var y = ((1 - channelLs[i]) / 2) * canvas.height;
                        if(i === 0){
                            //canvasの描画初期位置
                            canvasContext.moveTo(x, y);
                        }else{
                            canvasContext.lineTo(x, y);
                        }
                    }
                }
                canvasContext.stroke();
            };

            var errorCallback = function() {
                window.alert('読み込みに失敗しました');
            };
 
            //ArrayBufferデコードする
            context.decodeAudioData(arrayBuffer, successCallback, errorCallback);
 
        }
    }
};

getChannelDataでチャンネルデータを配列で取得します。
その配列の数だけループさせ、10ミリ秒単位のところで、canvasを描画していきます。
1ミリ秒にすればさらに細かい波形になっていきます。
配列に格納されている数値(−1〜1)がY軸になります。
canvasの高さを1として考えます。
Y軸は下へ伸びるので、この波形では真ん中を0にしたいので、1からチャンネルの数値を引いて、
さらに波形は上下に動くので、canvasの高さが1なので割る2をします。
 
こんな感じの波形が描かれています。
スクリーンショット 2014-09-03 16.43.55
 
 

グリッド描画

次は、波形のグリッドを描いていきます。

xml.onload = function() {

    //〜〜〜〜〜〜〜省略〜〜〜〜〜〜〜〜〜

    //曲の秒数
    soundtime = Math.floor(audioBuffer.length / context.sampleRate);

    //1秒あたりのX軸へ動く数値
    xRate = canvas.width / soundtime;
    for(var i = 0; i < soundtime; i++){
	var x = xRate * i;
	if (i === 0) {
	    canvasContext.moveTo(x, canvas.height);
	} else {
	    if( i % 10 === 0 ){
		//10秒毎にグリッドを描画
		    canvasContext.fillRect(x, 0, 0.5, canvas.height);
	    }
        }
    }
    canvasContext.stroke();

    //〜〜〜〜〜〜〜省略〜〜〜〜〜〜〜〜〜
}

audioBuffer.lengthで曲の長さを取得できます。
でもそのままだと、値が違うので秒数にわかりやすく秒数にします。
そのためにはsampleRateでaudioBuffer.lengthを割ります。
sampleRateはオーディオの1秒あたりのサンプルフレーム数です。
あとは、秒数分ループさせてグリッドを入れたい秒数で描画していきます。
 
グリッドを足しました。
スクリーンショット 2014-09-03 16.43.29
 
 
 

DEMO

最後にデザインをちょっと入れて自作音楽プレイヤーの完成です。
 
DEMO
 
スクリーンショット 2014-09-03 16.50.57
 
HTML

<!DOCTYPE html>
<html>
<head>
    <!--jQueryを使用する-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="contents">
    <div class="audio_contents">
	<p id="playBotton" class="botton play" onClick="play()">PLAY</p>
	<p class="botton" onClick="stop()">STOP</p>
	<input id="volume" type="range" value="50" onChange="volumeChange()">
    </div>
    <canvas width="650" height="200"></canvas>
</div>
</body>
</html>

 
Javascript

window.AudioContext = window.AudioContext || window.webkitAudioContext || mozAudioContext; 
try {
    var context = new AudioContext();
} catch (error) {
    alert('このブラウザは未対応です');
}

 
var xml = new XMLHttpRequest();
//読み込むデータのURLを書く
xml.open('GET', '音楽ファイル', true);
xml.responseType = 'arraybuffer';
xml.onload = function() {
    if (xml.status === 200) {
        //引数を受け取る
        var arrayBuffer = xml.response;
        if (arrayBuffer instanceof ArrayBuffer) {
            var successCallback = function(audioBuffer) {
                //AudioBufferインスタンスを変数へ格納
                buffer = audioBuffer;

                var channelLs = new Float32Array(audioBuffer.length);

		//オーディオデータのチャンネル数が0以上のとき
		if (audioBuffer.numberOfChannels > 0) {
		    //getChannelDataメソッドで波形データ取得
                    channelLs.set(audioBuffer.getChannelData(0));
		}

		//10ミリ秒
		var n10msec = Math.floor(10 * Math.pow(10, -3) * context.sampleRate);

		var canvas = document.querySelector('canvas');
		var canvasContext = canvas.getContext('2d');
		//canvasをクリアにする
		canvasContext.clearRect(0, 0, canvas.width, canvas.height);

		//描画色設定
		canvasContext.strokeStyle='#50EAFF';
		//channelLsの長さだけループ
		for (var i = 0, len = channelLs.length; i < len; i++) {
		    //10ミリ秒ごとに描画
	            if ((i % n10msec) === 0) {
		        var x = (i / len) * canvas.width;
			var y = ((1 - channelLs[i]) / 2) * (canvas.height - 20) + 20;
			if (i === 0) {
			    //canvasの描画初期位置
			    canvasContext.moveTo(x, y);
			} else {
			    canvasContext.lineTo(x, y);
			}
                    }
		}
		//描画
		canvasContext.stroke();

		//曲の秒数
		soundtime = Math.floor(audioBuffer.length / context.sampleRate);

		//目盛り表示欄
		canvasContext.fillStyle = '#6e6e6e';
		canvasContext.fillRect(0, 0, canvas.width, 20);

		//1秒あたりのX軸へ動く数値
		xRate = canvas.width / soundtime;
		canvasContext.fillStyle = '#eee';
		for(var i = 0; i < soundtime; i++){
		    var x = xRate * i;
	            if (i === 0) {
			canvasContext.moveTo(x, canvas.height);
	       	    } else {
			if( i % 10 === 0 ){
                            //10秒毎にグリッドを描画
			    canvasContext.fillRect(x, 10, 0.5, canvas.height - 10);
			    canvasContext.fillText(i, x-7, 10);
			}else if(i % 2 === 0 ){
			    //2秒毎に目盛りを描画
       			    canvasContext.fillRect(x, 15, 0.3, 5);
			}
		    }
		}
		canvasContext.stroke();

            };
            var errorCallback = function() {
                window.alert('読み込みに失敗しました');
            };
 
            //ArrayBufferデコードする
            context.decodeAudioData(arrayBuffer, successCallback, errorCallback);
 
        }
    }
};
xml.send(null);


//始めからスタートのフラグをたてる
var first_flg = true;   

function play(){

    if($('#playBotton').hasClass('pause')){

        pause();

    }else if($('#playBotton').hasClass('play')){

        //AudioBufferSourceNodeを作成する
        source = context.createBufferSource();
        //bufferプロパティにAudioBufferインスタンスを設定
        source.buffer = buffer;
        //ループ
        source.loop = false; 
        //AudioBufferSourceNodeインスタンスをdestinationプロパティに接続
        source.connect(context.destination);

        //GainNodeを作成する
        gainNode = context.createGain();
        //sourceをGainNodeへ接続する
        source.connect(gainNode);
        //GainNodeをAudioDestinationNodeに接続
        gainNode.connect(context.destination);
        gainNode.gain.value = 4;

        source.start = source.start || source.noteOn;
        source.stop  = source.stop  || source.noteOff;

        //始めからの再生の場合
        if(first_flg){
    	    //スタート時間を変数startTimeに格納
    	    startTime = context.currentTime;
    	    replayTime = startTime;
    	    //停止されている時間を初期は0にしておく
    	    pausingTime = 0;
    	    first_flg = false;
        }else{
    	    //再スタート時間を変数replayTimeに格納
	    replayTime = context.currentTime;
	    //再スタートの時間からpauseした時間を引いて、停止されている時間の合計に足していく
	    pausingTime += replayTime - pauseTime;
        }

        //replayTimeからstartTimeとpausingTime引いた時間が曲のスタート時間
        var playTime = replayTime - startTime - pausingTime;

        //再生
        source.start(0,playTime);

        //クラスとテキスト変更
        $('.play').removeClass('play').addClass('pause').html('PAUSE');
    }
}

 
function pause() {	
    //止めた時間を変数pauseTimeに格納
    pauseTime = context.currentTime;
    source.stop(0);

    //クラスとテキスト変更
    $('.pause').removeClass('pause').addClass('play').html('PLAY');
}


function stop(){
    source.stop();
    first_flg = true;
    //クラスとテキスト変更
    $('.pause').removeClass('pause').addClass('play').html('PLAY');
}


function volumeChange(){
    //range属性のvalue取得
    var value = document.getElementById( "volume" ).value;
    //gainNodeの値に変更
    var volume = ( value / 10 ) - 1;

    //gainNodeに代入
    gainNode.gain.value = volume;
} 

 
CSS

.contents{
	width: 1000px;
	margin: 50px;
}
.audio_contents{
	border-radius: 5px 0 0 5px / 5px 0 0 5px;
	background-color: #ccc;
	float: left;
	height: 150px;
	padding: 25px;
	text-align: center;
	width: 300px;
}
.title{
	font-size: 16px;
	color: #4e4e4e;
}
.botton{
	border-radius: 5px;
	background-color: #4e4e4e;
	cursor: pointer;
	color: #eee;
	font-size: 13px;
	float: left;
	height: 45px;
	line-height: 50px;
	margin: 25px 25px 0;
	text-align: center;
	width: 100px;
}
#volume{
	margin-top: 40px; 
	width: 250px;
}
canvas{
	border-radius: 0 5px 5px 0 / 0 5px 5px 0;
	background-color: #4e4e4e;
}

シンプルではありますが、これを応用していけばかなり充実したプレイヤーが作れそうですね。
入門編は3回で終わりましたが、またいつかWeb Audio API中級編を書きたいと思います。
 
 
 
参考:WEB SOUNDER – Web Audio API 解説 -
 
 
 
【Web Audio API入門】音楽プレイヤー作成 第1弾
【Web Audio API入門】音楽プレイヤー作成 第2弾

続きを読む

【Web Audio API入門】音楽プレイヤー作成 第2弾

2014年9月15日

Pocket

aud0002-009 のコピー

音楽プレイヤー作成 第2弾です!
今回は、一時停止、音量調整機能を実装します。
 

音量調節

inputの属性rangeを使用してボリュームを調節するつまみを作ります。
rangeのValueは0から100までです。真ん中の50に初期値を設定します。
rangeが変更されたらvolumeChange()のファンクションが呼び出されます。
 
HTML

<body>
    <p class="botton" onClick="play()">PLAY</p>
    <p class="botton" onClick="stop()">STOP</p>
    <p>Volume</p>
    <input id="volume" type="range" value="50" onChange="volumeChange()">
</body>

 
音量を調整するにはGainNodeを使用します。
gainNodeのValue属性に音量の値を設定することによって音量を設定できます。
 
JavaScript

function play(){
     //〜〜〜〜〜〜〜省略〜〜〜〜〜〜〜〜〜

     //GainNodeを作成する
     gainNode = context.createGain();

     //sourceをGainNodeへ接続する
          source.connect(gainNode);

     //GainNodeをAudioDestinationNodeに接続
     gainNode.connect(context.destination);

     //音量を表記
     gainNode.gain.value = 3.0;

     //〜〜〜〜〜〜〜省略〜〜〜〜〜〜〜〜〜
}

function volumeChange(){
    //range属性のvalue取得
    var value = document.getElementById( "volume" ).value;
    //gainNodeの値に変更
    var volume = ( value / 10 ) - 1;

    //gainNodeに代入
    gainNode.gain.value = volume;
} 

range属性からvalueを取得し、gainNodeのvalueに代入します。
rangeのvalueをそのまま代入すると音がでかすぎるので、valueの値を10分の1にします。
gainNodeのvalueは-1で音がなくなるのでrangeが0のとき、gainNodeが-1になるようにvalueから-1をしています。
 
 

一時停止

再生をストップしたら、AudioBufferSourceNodeが削除されるので、次に再生を押しても始めからのスタートになってしまいます。
一時停止ができないプレイヤーは使い勝手が悪いので、一時停止機能を作っていきます。
 
実はstart()関数には、スタートする時間と、曲のどの位置からスタートするかを入れれるのです。
start(スタート時間,曲のスタートする位置の時間)と表記します。
とは言うものの、その時間は自分で計算しなくてはなりません。
 
少し複雑なコードになってきました。
 
HTML

<body>
    <p id="playBotton" class="botton play" onClick="play()">PLAY</p>
    <p class="botton" onClick="stop()">STOP</p>
    <p>Volume</p>
    <input id="volume" type="range" value="50" onChange="volumeChange()">
</body>

 
JavaScript

//始めからスタートのフラグをたてる
var first_flg = true;

function play(){

    if($('#playBotton').hasClass('pause')){

        pause();

    }else if($('#playBotton').hasClass('play')){

         //〜〜〜〜〜〜〜省略〜〜〜〜〜〜〜〜〜

         //始めからの再生の場合
        if(first_flg){
    	    //スタート時間を変数startTimeに格納
    	    startTime = context.currentTime;
    	    replayTime = startTime;
    	    //停止されている時間を初期は0にしておく
    	    pausingTime = 0;
    	    first_flg = false;
        }else{
    	    //再スタート時間を変数replayTimeに格納
    	    replayTime = context.currentTime;
    	    //再スタートの時間からpauseした時間を引いて、停止されている時間の合計に足していく
    	    pausingTime += replayTime - pauseTime;
        }

        //replayTimeからstartTimeとpausingTime引いた時間が曲のスタート時間
        var playTime = replayTime - startTime - pausingTime;

        //再生
        source.start(0,playTime);

        //クラスとテキスト変更
        $('.play').removeClass('play').addClass('pause').html('PAUSE');
    }
} 

function pause() {	
    //止めた時間を変数pauseTimeに格納
    pauseTime = context.currentTime;
    source.stop(0);

    //クラスとテキスト変更
    $('.pause').removeClass('pause').addClass('play').html('PLAY');
}

function stop(){
    source.stop();
    //初期値に戻す
    first_flg = true;
    //クラスとテキスト変更
    $('.pause').removeClass('pause').addClass('play').html('PLAY');
}

ここで重要なのがcontext.currentTime属性です。
context.currentTimeはcontextが作成された時点からの時間を取得します。
なので、再生ボタンを押した時間ではありません。
これがややこしいのですが、この時間をもとにスタートした時間やストップした時間を変数などに格納し、足したり引いたりして目的の数値を計算します。
再生ボタンにidをふり、play()が呼び出されたとき、id=”playBotton”がplayのクラスを持っていたら再生をpauseのクラスを持っていたら一時停止するように分岐しています。
 
 
 

DEMO

下記は今回の機能を追加したソースです。
 
DEMO
 
 
HTML

<!DOCTYPE html>
<html>
<head>
    <!--jQueryを使用する-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <p id="playBotton" class="botton play" onClick="play()">PLAY</p>
    <p class="botton" onClick="stop()">STOP</p>
    <p>Volume</p>
    <input id="volume" type="range" value="50" onChange="volumeChange()">
</body>
</html>

 
JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext || mozAudioContext; 
try {
    var context = new AudioContext();
} catch (error) {
    alert('このブラウザは未対応です');
}

 
var xml = new XMLHttpRequest();
//読み込むデータのURLを書く
xml.open('GET', '音楽ファイル', true);
xml.responseType = 'arraybuffer';
xml.onload = function() {
    if (xml.status === 200) {
        //引数を受け取る
        var arrayBuffer = xml.response;
        if (arrayBuffer instanceof ArrayBuffer) {
            var successCallback = function(audioBuffer) {
                //AudioBufferインスタンスを変数へ格納
                buffer = audioBuffer;
            };
            var errorCallback = function() {
                window.alert('読み込みに失敗しました');
            };
 
            //ArrayBufferデコードする
            context.decodeAudioData(arrayBuffer, successCallback, errorCallback);
 
        }
    }
};
xml.send(null);


//始めからスタートのフラグをたてる
var first_flg = true;   

function play(){

    if($('#playBotton').hasClass('pause')){

        pause();

    }else if($('#playBotton').hasClass('play')){

        //AudioBufferSourceNodeを作成する
        source = context.createBufferSource();
        //bufferプロパティにAudioBufferインスタンスを設定
        source.buffer = buffer;
        //ループ
        source.loop = false; 
        //AudioBufferSourceNodeインスタンスをdestinationプロパティに接続
        source.connect(context.destination);

        //GainNodeを作成する
        gainNode = context.createGain();
        //sourceをGainNodeへ接続する
        source.connect(gainNode);
        //GainNodeをAudioDestinationNodeに接続
        gainNode.connect(context.destination);
        gainNode.gain.value = 4;

        source.start = source.start || source.noteOn;
        source.stop  = source.stop  || source.noteOff;

        //始めからの再生の場合
        if(first_flg){
    	    //スタート時間を変数startTimeに格納
    	    startTime = context.currentTime;
    	    replayTime = startTime;
    	    //停止されている時間を初期は0にしておく
    	    pausingTime = 0;
    	    first_flg = false;
        }else{
    	    //再スタート時間を変数replayTimeに格納
	    replayTime = context.currentTime;
	    //再スタートの時間からpauseした時間を引いて、停止されている時間の合計に足していく
	    pausingTime += replayTime - pauseTime;
        }

        //replayTimeからstartTimeとpausingTime引いた時間が曲のスタート時間
        var playTime = replayTime - startTime - pausingTime;

        //再生
        source.start(0,playTime);

        //クラスとテキスト変更
        $('.play').removeClass('play').addClass('pause').html('PAUSE');
    }
}

 
function pause() {	
    //止めた時間を変数pauseTimeに格納
    pauseTime = context.currentTime;
    source.stop(0);

    //クラスとテキスト変更
    $('.pause').removeClass('pause').addClass('play').html('PLAY');
}


function stop(){
    source.stop();
    first_flg = true;
    //クラスとテキスト変更
    $('.pause').removeClass('pause').addClass('play').html('PLAY');
}


function volumeChange(){
    //range属性のvalue取得
    var value = document.getElementById( "volume" ).value;
    //gainNodeの値に変更
    var volume = ( value / 10 ) - 1;

    //gainNodeに代入
    gainNode.gain.value = volume;
} 

 
 
 
今回はコードの量の割には機能がしょぼい感じがしますが、とりあえずオーディオになってきましたね。
次回は、音楽データの視覚化についてリポートします。
 
 
 
【Web Audio API入門】音楽プレイヤー作成 第1弾
【Web Audio API入門】音楽プレイヤー作成 第3弾

続きを読む

実用性抜群!ハイクオリティな無料写真素材サイトまとめ8選

2014年9月10日

Pocket

ss

クオリティの高い写真素材を使用すれば、デザインのクオリティも格段にあがります。
実用性の高い無料写真素材サイトの中でも、よりクオリティが高くてデザインを底上げするサイトをご紹介します。

Unsplash




クオリティ・更新頻度・汎用性、何を取っても文句無しの定番サイトです。
ですが、ここにある写真素材は一日一回はどこかのサイトで見かけるほど人気なので、安易に使うとよく被りますのでご注意を。。
Unsplash

IM FREE




Flickrから集められたハイクオリティ写真がまとめられています。
個人的に写真の雰囲気が好きです。なにかと使いどころは多いです。カテゴリごとに分かれているのも便利です。
IM FREE

Picjumbo




カテゴリ分けもわかりやすく、幅広く使いどころがあります。
有料ですが、photoshopのプラグインもあるみたいです。
Picjumbo

JAY MANTRI




写真の種類が少しクセが強いですが、ハマればデザインのクオリティがグンとあがります。
JAY MANTRI

FOODIE’S FEED




食関連でクオリティの高い写真素材が欲しい時には、まず一番に見るサイトです。食の種類が限定されますが、使いどころは多いです。
FOODIE’S FEED

GRATISOGRAPHY




個性的な写真が多いので、ありきたりなイメージよりもインパクトを与えたい時にはおすすめです。
GRATISOGRAPHY

LITTLE VISUALS




風景写真が多いです。バックグラウンドに風景写真など使いたいなどに利用したい素材がそろっています。
LITTLE VISUALS

PEXELS




上記のサイトなどから写真素材を集めているサイトです。急ぎの時などはとりあえずここで探せば、求めているイメージにたどり着きやすいです。
PEXELS

続きを読む

【Web Audio API入門】音楽プレイヤー作成 第1弾

2014年9月2日

Pocket

picjumbo.com_HNCK0644 のコピー

色々な機能を盛り込める今あついWeb Audio APIを使って音楽プレイヤーを自作してみましょう!
Web Audio API入門編は三回に分けて、少しづつ作っていこうと思います。
HTML5から<audio>を使えるので、ただ音楽を再生するならそれを使えば一番簡単なのですが、Web Audio APIではエフェクトをかけたり音楽データを視覚化したり、高度な機能を実装できます。
 
 
今回はとりあえず再生するところまでやってみます。
 
 

AudioContextを作成する

AudioContextは構成ブロックであるAudioNodeの集合やそれらの接続を表すインターフェースでオーディオが入力から出力までの流れを定義します。
まずはAudioContextを作成します。

window.AudioContext = window.AudioContext || window.webkitAudioContext || mozAudioContext; 
	try {
	    var context = new AudioContext();
	} catch (error) {
	    alert('このブラウザは未対応です');
	}

作成に成功したら変数contextにAudioContextを代入しています。
作成に失敗したらアラートを出しています。
 

サウンドをロードする

音楽ファイルをWeb Audio APIへロードするには、XMLHttpRequestを使います。

var xml = new XMLHttpRequest();
//読み込むデータのURLを書く
xml.open('GET', '音楽ファイル', true);
xml.responseType = 'arraybuffer';
xml.onload = function() {
    if (xml.status === 200) {
        //引数を受け取る
        var arrayBuffer = xml.response;
        if (arrayBuffer instanceof ArrayBuffer) {
            var successCallback = function(audioBuffer) {
                //AudioBufferインスタンスを変数へ格納
                buffer = audioBuffer;
            };
            var errorCallback = function() {
                window.alert('読み込みに失敗しました');
            };

            //ArrayBufferデコードする
            context.decodeAudioData(arrayBuffer, successCallback, errorCallback);

        }
    }
};
xml.send(null);

AudioBufferSourceNodeを作成する

//AudioBufferSourceNodeを作成する
source = context.createBufferSource();

//bufferプロパティにAudioBufferインスタンスを設定
source.buffer = buffer;

//ループをオフにする
source.loop = false; 

//AudioBufferSourceNodeインスタンスをAudioDestinationNodeに接続
source.connect(context.destination);

AudioDestinationNode(destination)は音の出口です。
ソースを作成したらAudioDestinationNodeにつないで音が出力できるようにします。
※AudioBufferSourceNodeは使い捨てとなっているので、一度曲をストップするともう一度AudioBufferSourceNodeを作成しなくてはいけないです。
 

サウンドを再生する

//スイッチを入れる
source.start = source.start || source.noteOn;
source.stop  = source.stop  || source.noteOff;

//再生する
source.start(0);

停止するには下記のように表記します。

//停止する
source.stop(0);

 
 
 

DEMO

これらを一連の流れで書いたのが下記のソースです
 
DEMO
 

HTML

<!DOCTYPE html>
<html>
<body>
    <p class="botton" onClick="play()">PLAY</p>
    <p class="botton" onClick="stop()">STOP</p>
</body>
</html>

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext || mozAudioContext; 
try {
    var context = new AudioContext();
} catch (error) {
    alert('このブラウザは未対応です');
}

var xml = new XMLHttpRequest();
//読み込むデータのURLを書く
xml.open('GET', '音楽ファイル', true);
xml.responseType = 'arraybuffer';
xml.onload = function() {
    if (xml.status === 200) {
        //引数を受け取る
        var arrayBuffer = xml.response;
        if (arrayBuffer instanceof ArrayBuffer) {
            var successCallback = function(audioBuffer) {
                //AudioBufferインスタンスを変数へ格納
                buffer = audioBuffer;
            };
            var errorCallback = function() {
                window.alert('読み込みに失敗しました');
            };

            //ArrayBufferデコードする
            context.decodeAudioData(arrayBuffer, successCallback, errorCallback);

        }
    }
};
xml.send(null);

function play(){

    //AudioBufferSourceNodeを作成する
    source = context.createBufferSource();

    //bufferプロパティにAudioBufferインスタンスを設定
    source.buffer = buffer;

    //ループをオフにする
    source.loop = false; 

    //AudioBufferSourceNodeインスタンスをAudioDestinationNodeに接続
    source.connect(context.destination);

    source.start = source.start || source.noteOn;
    source.stop  = source.stop  || source.noteOff;

    //再生
    source.start(0);
}

function stop(){
    source.stop(0);
}

 
 
 
ざっくり再生までの流れをリポートしました。
次回は、一時停止や音量などの機能を付けていきます。
 
 
 
【Web Audio API入門】音楽プレイヤー作成 第2弾
【Web Audio API入門】音楽プレイヤー作成 第3弾

続きを読む

このサイトについて


『意識低い系女と高い系男の一年戦争』はクリエイティブ会社エアゼの代表2人が運営するブログです。エアゼは、アプリ・Web・IoT・インタラクティブコンテンツのデザイン・開発を手がけています。

エアゼ ホームページ