【Gracenote Rhythm API】世界最大級音楽ビッグデータGracenoteのAPIで楽曲をレコメンド

2014年12月2日

Pocket

gracenote_thumb

GracenoteのデータはiTunes、Spotifyなど、皆さんもお馴染みの音楽アプリやサービスで使われています。
音楽サービスを始めるならなくてはならないGracenote!!世界最大級の音楽ビッグデータを持つGracenoteのRhythm APIを使って楽曲をレコメンドしてみました!
 
またまた、ハッカソンの話なのですが、GracenoteのAPIは、MUSICIANS HACKATHONとTechCrunch Tokyo Hackathon 2014に参加した時に使わせていただいた、私たちTicaLabお気に入りのAPIです!
情報量が多いので使い道もさまざまで、今までハッカソンだけでもGracenoteを使用した面白いソフトウェアがたくさん作られています。
では、さっそく使ってみましょう。今回は、Rhythm APIを利用してみました。
 
 

APP作成

GracenoteのAPIを利用するためには、まずアカウントを作成しなくてはいけません。
さっそくアカウントを作りましょう。
GracenoteのDeveloperサイトにアクセスし、アカウントを作成して下さい。
Gracenote | Developer Portal
 
アカウント作成が完了したらAPPを作成します。
gracenote1
 
App Nameの名前を入力し、Create Appをクリックします。
gracenote2
 
APPが作成されました。
gracenote4
Client IDは後で使用します。
 
 

ユーザーIDを取得する

user.xmlというファイルをデスクトップに作成します。
user.xmlの中に下記のコードを記入して保存してください。
CLIENT IDのところは、先ほどのCLIENT ID(XXXXXXX-◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯)を入力してください。

<QUERIES>
  <QUERY CMD="REGISTER">
    <CLIENT>CLIENT ID</CLIENT>
  </QUERY>
</QUERIES> 

 
ターミナルを起動します。

//デスクトップに移動
$ cd Desktop
$ curl -d @user.xml https://cXXXXXXX.web.cddbp.net/webapi/xml/1.0/

“XXXXXXX”のところはCLIENT IDのハイフン前の7桁の数字を入れます。
すると下記のようなレスポンスが返ってきます。
 

<RESPONSES>
 <RESPONSE STATUS="OK">
   <USER>△△△△△△△△△△-■■■■■■■■■■■■■■■■■■■■■</USER>
 </RESPONSE>
</RESPONSES>

USERのタグの中に放っているユーザーIDを使用するのでメモしておいてください。
 
 

Rhythm APIで使えるムード、ジャンル、年代を調べる

今回は、Rhythm APIを使用しますのでムード、ジャンル、年代のIDが欲しいので一覧を調べます。
Rhythm APIでは曲名、アーティスト名、ジャンル、年代、ムードなどで楽曲を選曲できるAPIです。
Rhythm API | Gracenote
下記のURLを叩くと一覧情報が返ってきます。
 
ジャンル一覧を見る
”https:/cXXXXXXX.web.cddbp.net/webapi/xml/1.0/radio/fieldvalues?fieldname=RADIOGENRE&lang=jpn&client=CLIENT ID&user=USER ID”
 
gracenote3
 
ムード一覧を見る
”https:/cXXXXXXX.web.cddbp.net/webapi/xml/1.0/radio/fieldvalues?fieldname=RADIOMOOD&lang=jpn&client=CLIENT ID&user=USER ID”
 
年代一覧を見る
”https:/cXXXXXXX.web.cddbp.net/webapi/xml/1.0/radio/fieldvalues?fieldname=RADIOERA&lang=jpn&client=CLIENT ID&user=USER ID”
 
 

ジャンルで楽曲を検索

ジャンルで検索してみたいと思います。
先ほど調べたIDを使用して検索します。
とりあえずポップのジャンルを検索。

<?php
$genre_coad = 36056; //ジャンルーポップのID
$xml = "https://c634880.web.cddbp.net/webapi/xml/1.0/radio/create?genre=" . $genre_coad ."&lang=jpn&return_count=10&client=CLIENT ID&user=USER ID";//ファイルを指定
$xmlData = simplexml_load_file($xml);//xmlを読み込む

echo "<pre>";
var_dump($xmlData);
echo "</pre>";
?>

ポップのジャンルの楽曲データが10曲取得できました。
 
 

ムードで楽曲を検索

ムードで検索してみたいと思います。
センチメンタルのムードを検索。

<?php
$mood_coad = 65324; //ムードーセンチメンタルのID
$xml = "https://c634880.web.cddbp.net/webapi/xml/1.0/radio/create?mood=" . $mood_coad . "&lang=jpn&return_count=10&client=CLIENT ID&user=USER ID";//ファイルを指定
$xmlData = simplexml_load_file($xml);//xmlを読み込む

echo "<pre>";
var_dump($xmlData);
echo "</pre>";
?>

センチメンタルのムードの楽曲データが10曲取得できました。
 
 

年代で楽曲を検索

年代で検索してみたいと思います。
2010年代を検索。

<?php
$era_coad = 42877; //年代ー2010年代のID
$xml = "https://c634880.web.cddbp.net/webapi/xml/1.0/radio/create?era=" . $era_coad . "&lang=jpn&return_count=10&client=CLIENT ID&user=USER ID";//ファイルを指定
$xmlData = simplexml_load_file($xml);//xmlを読み込む

echo "<pre>";
var_dump($xmlData);
echo "</pre>";
?>

2010年代の楽曲データが10曲取得できました。
 
 

気分で楽曲レコメンドDEMO

上記の検索を使ってジャンル、ムード、年代を選んで楽曲をレコメンドしてくれるデモを作ってみました!
楽曲再生にはiTunes APIを使用しています。
 
DEMO
 
HTML

<?php
$submit_flg = false;

if($_POST['submit']){

	$submit_flg = true;

	$genre_id = htmlspecialchars($_POST['genre'],ENT_QUOTES);
	$mood_id = htmlspecialchars($_POST['mood'],ENT_QUOTES);
	$era_id = htmlspecialchars($_POST['era'],ENT_QUOTES);

	$xml = "https://c634880.web.cddbp.net/webapi/xml/1.0/radio/create?focus_popularity=1000&genre=" . $genre_id . "&mood=" . $mood_id . "&era=" . $era_id . "&lang=jpn&return_count=10&client=CLIENT ID&user=USER ID";//ファイルを指定
	$xmlData = simplexml_load_file($xml);

}

//ジャンルリスト
$xml = "https://c634880.web.cddbp.net/webapi/xml/1.0/radio/fieldvalues?fieldname=RADIOGENRE&lang=jpn&client=CLIENT ID&user=USER ID";
$genre_xmlData = simplexml_load_file($xml);

//ムードリスト
$xml = "https://c634880.web.cddbp.net/webapi/xml/1.0/radio/fieldvalues?fieldname=RADIOMOOD&lang=jpn&client=CLIENT ID&user=USER ID";
$mood_xmlData = simplexml_load_file($xml);

//年代
$xml = "https://c634880.web.cddbp.net/webapi/xml/1.0/radio/fieldvalues?fieldname=RADIOERA&lang=jpn&client=CLIENT ID&user=USER ID";
$era_xmlData = simplexml_load_file($xml);
?>

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	
	<title>Gracenote DEMO</title>

	<!-- js -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	
</head>
<body>

<form action="" method="post">

	<div>
		ジャンル
		<select name="genre">
			<?php foreach ($genre_xmlData->RESPONSE->GENRE as $genre_list) : ?>
				<option value="<?php echo $genre_list[0]['ID']; ?>"><?php echo $genre_list[0][0]; ?></option>
			<?php endforeach; ?>
		</select>
	</div>
	
	<div>
		ムード
		<select name="mood">
			<?php foreach ($mood_xmlData->RESPONSE->MOOD as $mood_list) : ?>
				<option value="<?php echo $mood_list[0]['ID']; ?>"><?php echo $mood_list[0][0]; ?></option>
			<?php endforeach; ?>
		</select>
	</div>
	
	<div>
		年代
		<select name="era">
			<?php foreach ($era_xmlData->RESPONSE->ERA as $era_list) : ?>
				<option value="<?php echo $era_list[0]['ID']; ?>"><?php echo $era_list[0][0]; ?></option>
			<?php endforeach; ?>
		</select>
	</div>
	<input type="submit" name="submit" value="検索">

</form>

<?php if($submit_flg) : ?>

	<div class="player">
		<div class="image"></div>
		<p class="play_title"></p>
		<p class="play_artist"></p>
	</div>

	<ul>
		<?php 
		$track_no = 0;
		foreach ($xmlData->RESPONSE->ALBUM as $music) : 
			$track_no++;
		?>
			<li id="track_<?php echo $track_no; ?>">
				<p class="title"><?php echo $music->TRACK->TITLE; ?></p>
				<p class="artist"><?php echo $music->ARTIST; ?></p>
			</li>
		<?php endforeach; ?>
	</ul>
<?php endif; ?>
</body>
</html>

focus_popularity=1000としているのですが、曲のポピュラー度を制御しています、。
数値が大きくなるほどポピュラー度が高くなります。
 
JS

var track_count = 1;

var artist_name = $('#track_1').children('.artist').html();
var music_title = $('#track_1').children('.title').html();

// 検索する
search({
  term: artist_name + ' ' + music_title,
  limit: 1,
  entity: 'song',
  country: 'JP',
});

//iTunes APIから楽曲を取得する
function search(options) {

  var params = {
    lang: 'ja_jp',
    entry: 'music',
    media: 'music',
    country: 'JP',
  };

  if (options && options.term) {
    params.term = options.term;
  }

  if (options && options.limit) {
    params.limit = options.limit;
  }

  $.ajax({
    url: 'https://itunes.apple.com/search',
    method: 'GET',
    data: params,
    dataType: 'jsonp',

    success: function(json) {
      showData(json, options);
    },

    error: function() {
      console.log('itunes api search error. ', arguments);
    },
  });
};

//取得した楽曲を表示
var music_url = "";
var TARGET;
var showData = function(json) {

	if(json.results.length == 0){

		track_count++;

		artist_name = $('#track_' + track_count).children('.artist').html();
		music_title = $('#track_' + track_count).children('.title').html();
        	
		// 検索する
		search({
		term: artist_name[data_key] + ' ' + music_title[data_key],
		limit: 1,
		entity: 'song',
		country: 'JP',
		});

	 }else{
  
	    for (var i = 0, len = json.results.length; i < len; i++) {

	      var result = json.results[i];

	      music_url = result.previewUrl;

	      var html = '<audio id="sound" src="' + result.previewUrl + '" controls />';
	      $('.player').children('audio').remove();
	      $('.player').append(html);
	      var html = '<img src="' + result.artworkUrl100 + '">';
	      $('.player').children('.image').empty().append(html);

	      $('.player').children('.play_artist').html(artist_name);
	      $('.player').children('.play_title').html(music_title);

	      TARGET = document.getElementById('sound');

	      play();

	      track_count++;
	    }

	}

}

function play(){
    TARGET.play();
    timeupdate();
}

function timeupdate(){
    TARGET.play();
    TARGET.addEventListener("timeupdate", function() {
  
        if(TARGET.currentTime == TARGET.duration){

        	artist_name = $('#track_' + track_count).children('.artist').html();
			music_title = $('#track_' + track_count).children('.title').html();
        	// 検索する
			search({
			  term: artist_name + ' ' + music_title,
			  limit: 1,
			  entity: 'song',
			  country: 'JP',
			});
        }

    }, true);
}

 
 
 

他にもざまざまな方法で楽曲をレコメンドできるので、いろいろ試してみてください。
自分専用に好みの検索のかけ方をプログラミングして楽曲レコメンドアプリを作ってもいいかもしれません!
http://www.gracenote.com/?language=ja

続きを読む

【Spotify WEB API】SpotifyのWEB APIを使って楽曲を取得し再生する

2014年12月1日

Pocket

spotify_thamb

海外では大人気の音楽ストリーミングサービス『Spotify』
日本上陸も目前!?のはずなので、いち早くSpotifyのAPIの使い方を解説したいと思います!
Spotify WEB APIを利用して検索をかけたり、プレイヤーを埋め込んだりしてみました。
 
先日、
MUSICIANS HACKATHONに参加したのですが、参加者は期間限定でSpotifyのプレミアム会員になれるのです!
これは使わなくては損だということで、ハッカソンではSpotifyとGracenoteのAPIを利用してサービスを作りました!!
今回のハッカソンで私はGracenote使用部分を作成していたので、Spotifyの部分は担当していないのですが、勉強のためにSpotifyも個人的に実験してみました。
 
 
Spotify Web API – Spotify Developer
 
 
 

アプリ作成

まず、Spotifyのログインします。
Spotify DeveloperのMy Applicationsのページでアプリを作成します。
アプリ作成
 
“CREATE AN APP”をクリックします。
spotify1
アプリが作成されました。
Application NameとApplication Descriptionを入力し、”CREATE”をクリックします。
spotify2
 
Redirect URIsを設定します。
spotify3
見えないように伏せていますが、Client IDとClient Secretが表示されているはずです。
Client IDとClient Secretはあとで使います。
 
 

情報取得

アプリの作成が終わったので、次に使用ファイルをダウンロードします。
Spotify DeveloperサイトのWeb API -> Code Exampleページでさまざまなサンプルコードが見れます。
今回は、spotify-web-api-phpを利用しますので、下の方にあるjwilsson/spotify-web-api-phpをクリックし、spotify-web-api-phpのzipファイルをダウンロードします。
https://github.com/jwilsson/spotify-web-api-php
 
spotify4
 
ダウロードしたファイルを解凍し中にあるsrcフォルダを任意の場所に置きます。
私は、spotifyをいうファルダを作成しその中にsrcフォルダを入れましたので、それで解説していきます。
 
spotifyフォルダの中にdemo.phpというファイルを作り、下記のコードを書きます

<?php
require 'src/SpotifyWebAPI.php';
require 'src/Request.php';
require 'src/Session.php';
require 'src/SpotifyWebAPIException.php';

$session = new Session(
'SPOTIFY_CLIENT_ID', //APPのCLIENT_IDを入れる
'SPOTIFY_CLIENT_SECRET', //APPのCLIENT_SECRETを入れる
'SPOTIFY_REDIRECT_URI' //APPのRedirect URIsを入れる
);
$api = new SpotifyWebAPI();

if (isset($_GET['code'])) {
    $session->requestToken($_GET['code']);
    $api->setAccessToken($session->getAccessToken());

    print_r($api->me());
} else {
    header('Location: ' . $session->getAuthorizeUrl(array(
        'scope' => array('user-read-email', 'user-library-modify')
    )));
}
?>

 
実行するとログイン画面が表示されます。
spotify6
 
ログインするとログインしたアカウントのユーザー情報が取得でき、表示されます。
ログインすると他のユーザーのプレイリストを見れたり、ログインした人のプレイリストにトラックを追加したり、さまざまなことができるようになります。
 
 

プレイリスト作成デモ

ユーザー『pixiesofficial』のプレイリストを一つ取得して、トラックを表示させるデモを作ってみました。
Spotifyのアカウントお持ちの方はログインすると見れます。
 
DEMO
 
spotify7
 
コード

<?php
require 'src/SpotifyWebAPI.php';
require 'src/Request.php';
require 'src/Session.php';
require 'src/SpotifyWebAPIException.php';

$session = new Session('SPOTIFY_CLIENT_ID', 'SPOTIFY_CLIENT_SECRET', 'SPOTIFY_REDIRECT_URI');
$api = new SpotifyWebAPI();

if (isset($_GET['code'])) {
    $session->requestToken($_GET['code']);
    $api->setAccessToken($session->getAccessToken());

    //pixiesofficialというユーザー名でプレイリストを一つ取得
    $playlists = $api->getUserPlaylists('pixiesofficial', array(
        'limit' => 1
    ));
    //取得したプレイリストのIDを変数へ代入
    $playlist_id = $playlists->items[0]->id;

    //pixiesofficialというユーザー名での$playlist_idのトラックを取得
    $tracks = $api->getUserPlaylistTracks('pixiesofficial', $playlist_id);

} else {
    header('Location: ' . $session->getAuthorizeUrl(array(
        'scope' => array('user-read-email', 'user-library-modify')
    )));
}

?>


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
</head>
<body>

	<?php foreach ($tracks->items as $track) : ?>
	       <!-- Spotify埋め込み -->
		<iframe src="https://embed.spotify.com/?uri=spotify:track:<?php echo $track->track->id; ?>" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>

	<? endforeach; ?>

</body>
</html>

 
 

楽曲を検索デモ

会員じゃない人がログインしないでも見れる検索方法もあります。
楽曲を検索してヒットしたトラックのプレイヤーを作成します。
 
DEMO
 
 
コード

<?php
require 'src/SpotifyWebAPI.php';
require 'src/Request.php';
require 'src/Session.php';
require 'src/SpotifyWebAPIException.php';

$submit_flg = false;

if($_POST['submit']){

	$submit_flg = true;

	$artist = htmlspecialchars($_POST['artist'],ENT_QUOTES);
	$title = htmlspecialchars($_POST['title'],ENT_QUOTES);

	$api = new SpotifyWebAPI();

	//キーワードの含まれるトラックを検索
	$tracks = $api->search($artist . '  ' . $title, 'track',array(
    'limit' => 1
));

	//トラックのIDを変数へ代入
	$track_id = $tracks->tracks->items[0]->id;

}


?>

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
</head>
<body>

<form action="" method="post">
	アーティスト<input type="input" name="artist"><br>
	曲名<input type="input" name="title"><br>
	<input type="submit" name="submit" value="検索">
</form>

<?php if($submit_flg) : ?>
	       
		<iframe src="https://embed.spotify.com/?uri=spotify:track:<?php echo $track_id; ?>" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>

<?php endif; ?>

</body>
</html>

 
 
Spotifyは、まだ日本に入ってきてないサービスですのす。プレミアム会員になるには対応している国のクレジット情報が必要ですので、現状日本ではまだしばらく全てのAPIは利用できない状態です。

続きを読む

【Edison+Node.js】Node.js+MRAAでArduinoを操作してみた

2014年11月28日

Pocket

edison_thamb3_2

Node.jsでArduinoを操作するには、MRAAというIntelが提供しているライブラリを使います。MRAAは、ArduinoやEdisonのI/OをPython/JavaScript/C++/Cの言語から簡単に操作できるライブラリです。
今回は、デジタル出力とアナログ入力をNode.jsで操作してみます。
 
前回の
【Intel(R)Edison × Arduino】WiFi接続してArduinoでデータ送信しPHPで受け取るでWiFi接続はしたので、続きから説明します!

準備物

Edison
Arduino Expansion Board(Arduino拡張ボード)
Arduino Base Shield
Light sensor(光センサー)
LED
MicroUSBケーブル
電源ケーブル
PC
WiFi環境
 
 

1.MRAAセットアップ

ターミナルでEdisonにログインし、 /etc/opkg/mraa-upm.confというファイルを作成する。

# cd /etc/opkg/
# vi mraa-upm.conf

mraa-upm.confファイの中に
“src mraa-upm http://iotdk.intel.com/repos/1.1/intelgalactic”と入力する。
下記を実行

# opkg update
# opkg install libmraa0

これでMRAAのセットアップOKです。
 
 

2.Node.jsでデジタル出力

13ピンにLEDを刺します。
edison2
 
ターミナルで”nodejs”という作業用ディレクトリを作ります。
そこにファイルを作成していきます。

# mkdir nodejs
# cd nodejs
# vi test.js

test.jsというファイルを作成し、中に下記のコードを書いていく。

var mraa = require("mraa"); //MRAA読み込み
var led = new mraa.Gpio(13); //デジタル入力ピン13を変数に代入

led.dir(mraa.DIR_OUT); 
led.write(1); //LEDを光らす

書き終えたら、Node.jsを動かします。

# node test.js

成功したら、LEDが光ります。
 
 

3.Node.jsでアナログ入力

アナログ入力A0に光センサーを繋げます。
edison15
 
先ほどのコードは消してしまって、test.jsに下記のコードを書いていきます。

var mraa = require("mraa");
var light = new mraa.Aio(0); //アナログA0ピンを変数へ代入

function lightRead(){

	var lightValue = light.read(); //光センサーん値取得

	console.log(lightValue);

	setTimeout(lightRead, 1000); //1秒毎に取得

}
lightRead();

test.jsを実行すると、ターミナル上に光センサーで取得した値が1秒毎に表示されます。
Node.jsを停止させるときは、controlキー+cで停止します。
 
 

入力、出力両方使う

先ほど書いたコードを合わせて、暗くなるとLEDが光り明るいとLEDが消えるようにしました。

var mraa = require("mraa");
var led = new mraa.Gpio(13);
var light = new mraa.Aio(0);
led.dir(mraa.DIR_OUT);

function lightRead(){

	var lightValue = light.read();

	console.log(lightValue);

	if(lightValue < 10){
		led.write(1);
	}else{
		led.write(0);
	}

	setTimeout(lightRead, 100);

}
lightRead();

 
 
 
とりあえず簡単ではありますが、サーバーと連携させてArduinoを操作することができました!!
MRAAの参考コードなど下記のサイトでいろいろ見れます。
https://github.com/intel-iot-devkit/mraa/tree/master/examples
 
 
【超小型Linux Intel(R)Edison】EdisonをセットアップからArduinoでLチカまでやってみた
【Intel(R)Edison × Arduino】WiFi接続してArduinoでデータ送信しPHPで受け取る
【Arduino入門 第一弾】Webデザイナーでもできる電子工作~LED点滅~

続きを読む

【Intel(R)Edison × Arduino】WiFi接続してArduinoでデータ送信しPHPで受け取る

2014年11月18日

Pocket

edison_thamb2

極小のサーバーが作れるIntel(インテル)のEdisonにはWiFiも積んであるので、別途WiFiルーターが不要でネットに接続できます!
これを使えば、よりコンパクトなIOTの開発が実現できます!!
今回はIntelのEdisonを使用して、任意のサイトにWiFi接続してみました。
 
前回
超小型Linux Intel(R)Edison】EdisonをセットアップからArduinoでLチカまでやってみたでEduisonのセットアップは済ませてあるので、引き続きEdisonでWiFi接続の方法をご説明いたします。
 
 
 

準備物

Edison
Arduino Expansion Board(Arduino拡張ボード)
Arduino Base Shield
Light sensor(光センサー)
MicroUSBケーブル
電源ケーブル
PC
WiFi環境
 
 

ネットワークのIPアドレス変更

ネットワーク環境設定を開いて
[Edison]を選択します。
何も設定していない状態だと、オレンジになっていると思います。
edison10
IPv4の設定を[手入力]を選択します。
IPアドレスに”192.168.2.2”を設定します。
サブネットマスクを”255.255.255.0”を設定します。
edison11
 
 

EdisonのWiFi設定

ターミナルを立ち上げて前回と同じように

# screen /dev/tty.usbserial-A402IY3C 115200 -L

を入力してEdisonにログインします。

# configure_edison --wifi

と入力しEnterを押し、WiFiの読み込みが終わるまでしばらく待ちます。
読み込みが終わると、WiFiの候補があがりSSIDを聞かれます。
edison12
中から接続したいWiFiの番号を入力しEnterを押ます。

Is SSID correct? [Y or N]: y
Password must be between 8 and 63 characters.
What is the network password?: WiFiのパスワード

パスワードも入力します
 
 

ArduinoでWiFi接続

Arduino IDEを立ち上げ、ファイル -> スケッチの例 -> WiFi -> WiFiWebClientを開きます。
edison13
 

char ssid[] = "yourNetwork"; //  your network SSID (name) 
char pass[] = "secretPassword";    // your network password (use for WPA, or use as key for WEP)

の箇所を書き換えます。
”yourNetwork”にSSID、
”secretPassword”にWiFiパスワードを書きます。
スケッチにエラーがなければ、Edisonに書き込みます。
シリアルポートを開き、しばらくして
googleの情報が返って来たらWiFi接続成功です。
edison14
 
 

任意のサイトに値を渡す

先ほどのWiFiWebClientのファイルをさらに書き換えていきます。

//char server[] = "www.google.com";    // name address for Google (using DNS)
char server[] = "ホスト";

googleのアドレスが記入されている箇所を接続したいURLのホストネーム入力します。
 

if (client.connect(server, 80)) {
    Serial.println("connected to server");
    // Make a HTTP request:
    //client.println("GET /search?q=arduino HTTP/1.1");
    client.println("GET /接続先のパス?q=GETで渡したい値 HTTP/1.1");
    //client.println("Host: www.google.com");
    client.println("Host: 先ほど入力したホスト名");
    client.println("Connection: close");
    client.println();
}

接続に成功した場合、データを送信します。
これだけでWEBサイトに渡したい情報を渡せます。
 
 

光センサーから取得した値をWEBサイトに渡してPHPで受け取り保存してみます

サーバー上にedison.phpというファイルを作成します。
data.txtファイルをedison.phpと同じディレクトリに作成します。
edison.phpに以下のコードを書きます。
 
edison.php

<?php 
$text = htmlspecialchars($_GET['light'], ENT_QUOTES, 'UTF-8');

//ファイル書き換え
$fp = fopen('data.txt', "w");

if (fwrite($fp,  $text) === FALSE){
    echo('Error');
}else{
    echo('Success!!');
}

fclose($fp);

?>

 
EdisonボードにArduino Base Shieldを乗せます。
アナログ入力A0に光センサーを接続します。
edison15
 
Arduino IDEで下記のコードをEdisonに書き込みます。
Arduino

#include <SPI.h>
#include <WiFi.h>

char ssid[] = "SSID"; //  your network SSID (name) 
char pass[] = "パスワード";    // your network password (use for WPA, or use as key for WEP)
int keyIndex = 0;            // your network key Index number (needed only for WEP)

int status = WL_IDLE_STATUS;
// if you don't want to use DNS (and reduce your sketch size)
// use the numeric IP instead of the name for the server:
//IPAddress server(74,125,232,128);  // numeric IP for Google (no DNS)
char server[] = "ホストネーム";

const int LIGHT = A0; //光センサー
int LIGHT_val = 0; //光センサーの値を入れる変数

// Initialize the Ethernet client library
// with the IP address and port of the server 
// that you want to connect to (port 80 is default for HTTP):
WiFiClient client;

void setup() {
  //Initialize serial and wait for port to open:
  Serial.begin(9600); 
  while (!Serial) {
    ; // wait for serial port to connect. Needed for Leonardo only
  }
  
  pinMode(LIGHT,INPUT); //光センサーをインプットに設定
  
  // check for the presence of the shield:
  if (WiFi.status() == WL_NO_SHIELD) {
    Serial.println("WiFi shield not present"); 
    // don't continue:
    while(true);
  } 

  String fv = WiFi.firmwareVersion();
  if( fv != "1.1.0" )
    Serial.println("Please upgrade the firmware");
  
  // attempt to connect to Wifi network:
  while (status != WL_CONNECTED) { 
    Serial.print("Attempting to connect to SSID: ");
    Serial.println(ssid);
    // Connect to WPA/WPA2 network. Change this line if using open or WEP network:    
    status = WiFi.begin(ssid, pass);
  
    // wait 10 seconds for connection:
    delay(10000);
  } 
  Serial.println("Connected to wifi");
  printWifiStatus();
  
  Serial.println("\nStarting connection to server...");
  // if you get a connection, report back via serial:
  if (client.connect(server, 80)) {
    Serial.println("connected to server");
    
    LIGHT_val = analogRead(LIGHT); //光センサーの値取得
   
    String PostTex = "GET /headphone/edison.php?light=";
    PostTex.concat(LIGHT_val);
    PostTex.concat(" HTTP/1.1");
    
    // Make a HTTP request:
    client.println(PostTex); //サイトに値を渡す
    client.println("Host: ホストネーム");
    client.println("Connection: close");
    client.println();
  }
}

void loop() {
  // if there are incoming bytes available 
  // from the server, read them and print them:
  while (client.available()) {
    char c = client.read();
    Serial.write(c);
  }

  // if the server's disconnected, stop the client:
  if (!client.connected()) {
    Serial.println();
    Serial.println("disconnecting from server.");
    client.stop();

    // do nothing forevermore:
    while(true);
  }
}


void printWifiStatus() {
  // print the SSID of the network you're attached to:
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());

  // print your WiFi shield's IP address:
  IPAddress ip = WiFi.localIP();
  Serial.print("IP Address: ");
  Serial.println(ip);

  // print the received signal strength:
  long rssi = WiFi.RSSI();
  Serial.print("signal strength (RSSI):");
  Serial.print(rssi);
  Serial.println(" dBm");
}

 

シリアルポートを開き、「Success!!」と表示されれば成功です。
data.txtファイルの中身を見てみると光センサーから取得した値が入っているはずです。
 
 
 

とりあえず簡単に値を渡しましたが、Nodejsを使うともっとスムーズに値を渡すことができます。
私は、はじめはArduinoで値を渡していたのですが、遅いし挙動がおかしかったです。
でも、インテルの方にNodejsでの値の渡し方を教わり、実行してみるとすごいスムーズに動くようになりました。
 
とりあえずセットアップ中心にご紹介してみましたが、Edisonの良いところってサーバー部分だと思うので、
また、余裕があればNodejsやらPythonやらでなんか作ってみたいと思います!
 
 
超小型Linux Intel(R)Edison】EdisonをセットアップからArduinoでLチカまでやってみた
【Edison+Node.js】Node.js+MRAAでArduinoを操作してみた
【Arduino入門 第一弾】Webデザイナーでもできる電子工作~LED点滅~

続きを読む

【超小型Linux Intel(R)Edison】EdisonをセットアップからArduinoでLチカまでやってみた

Pocket

edison_thamb

極小のサーバーが作れるIntel(インテル)のEdisonを使用してみました!
EdisonはPython, Node.js/HTML5 (XDK), C/C++, Arduinoの様々な言語で開発が可能です!今回は、Edisonを使用できるようにセットアップして、Arduinoの言語でLEDを光らせるまでをご説明します。
全てMacでの説明となります。
 
前回
Arduino入門 第一弾】Webデザイナーでもできる電子工作~LED点滅~でAruinoでLED点滅までご説明したのですが、今回、先日参加したTechCrunch Tokyo Hackathon 2014でEdiosnを使用して開発したので、せっかくなので勉強しようと思い忘れないようにまとめました。
 
 
 

準備物

Edison
Arduino Expansion Board(Arduino拡張ボード)
MicroUSBケーブル
電源ケーブル
PC
LED
 
 

1.EdisonをArduino拡張ボードに取り付ける

コネクタをはめ込んで、ナットで締めます。
しっかりはまっていないと動作しないので、浮いたところがないようにします。(私は浮いているのに気付かなくて「なんで動かないの」って困っていました・・・)
edison1
 
 

2.接続

電源ケーブルをつなぎEdisonの電気を入れます。
パワーコネクタに近い方のUSBコネクタ(J16)にMicroUSBケーブルを接続し、ボードとPCをつなぎます。
FinderにEdisonがドライブが表示されていれば接続成功です。
edison3
 
 

3.Linuxイメージの転送 & アップデート

まず、Edisonに入っているファイルを全て消します。
ターミナルを立ち上げて、下記のコマンドを実行します。

cd /Volumes/Edison
rm -rf *
rm -rf \.*
ls 

“ls “で何も表示されなければ削除OKです。
 
下記ののサイトから Edison Yocto complete image をダウンロードしてください
Edison – Software Downloads
edison4
ダウンロードしたLinuxイメージファイルをEdisonのドライブの中に解凍します。(”edison-image-rel1-maint-rel1-ww42-14 2”フォルダの中身全てをEdisonに入れる)
edison5
 
MicroUSBケーブルを、パワーコネクタから遠い方(J3)に差します。
ターミナルで下記のコマンドを実行し、Edisonにログインします。

# screen /dev/tty.usbserial

と入力しTabキーを押すと自動で候補が出てきます。
続きに”115200 -L”と入力しEnterを押します。

# screen /dev/tty.usbserial-A402IY3C 115200 -L
# edison login:  root
# reboot ota

パスワードは設定されていないのでrootと入力しEnterを押します。
ログインできたら”# reboot ota”でEdisonのLinuxイメージを書き込みます
書き込みが成功すると,再度ログインプロンプトが表示されます。
 
 

4.Edison用Arduino IDEをダウンロード

Edison用のArduino IDE “Arduino Software 1.5.3 – Intel 1.0.4 Mac OSX”を下記からダウンロードし、任意のディレクトリに展開してください。
Edison – Software Downloads
edison6 
 

5.Arduino IDEの設定

MicroUSBケーブルをパワーコネクタに近い方(J16)につなぎます。
Arduino.appを立ち上げます。
ツール -> マイコンボードを開き、”Intel® Edison”を選択します。
ツール -> シリアルポートを開き、”/dev/cu.usbmodemXXXX”を選択します。
これでEdisonを通信できるようになりました。
edison7
edison8
 
 

6.LEDを点滅させる

LEDをpin13とGNDに刺します。
edison2
新しいスケッチを作成し、下記のスケッチを書き込みます。

const int LED = 13;

void setup(){
  pinMode(LED,OUTPUT);
}

void loop(){
  digitalWrite(LED,HIGH);
  delay(500);
  digitalWrite(LED,LOW);
  delay(500);
}

LEDがチカチカ光れば成功です!!
コードの説明は、【Arduino入門 第一弾】Webデザイナーでもできる電子工作~LED点滅~で詳しくしています。
 
 

補足

何回もEdisonに書き込んで、Arduinoスケッチの転送に失敗するなどEdisonの動作がおかしくなってきた場合、/var/logの下のファイルを根こそぎ削除することで回復することがあります。
原因は、ログファイルが大きくなりすぎて空きディスクスペースがなくなるためです。(Intelさんからのご説明です)
 
 
 

初めて触った時はいろいろ詰まったのですが、まとめてみればそんなに難しいことをやってるわけではないですね・・・。
ハッカソンでよっぽど焦っていたのか、電源が取れていなかったりUSBの指す場所を間違えているという凡ミスに気づかないでずっと詰まっていたりといろいろあったので、とりあえずUSBの指し口にはご注意ください。
 
今回は、LEDを光らせるだけだったので、「別にArduinoでいいじゃん」って思われたかもしれませんが、ここからが本番!
Edisonだからできることをいろいろやっていきます!
次回は、EdisonでWifi接続をしてみたいと思います!
 
 
【Intel(R)Edison × Arduino】WiFi接続してArduinoでデータ送信しPHPで受け取る
【Edison+Node.js】Node.js+MRAAでArduinoを操作してみた
【Arduino入門 第一弾】Webデザイナーでもできる電子工作~LED点滅~
 
 
参考サイト:Intel Flashing Edison (wired) – Mac

続きを読む

あがり症の人がプレゼンで緊張をほぐす考え方

Pocket

presentation

人前に出ると緊張してしまう、話すのが苦手という方は結構いるのではないでしょうか。
とはいえ、プレゼンやスピーチなど人前で話さないといけないこともあります。
そんな人におすすめの緊張を和らげる考え方をご紹介します。
 
今回、なぜこんな記事を書いたかというと、実は、先日ハッカソンに参加してしてきたのですが、最終発表の時に緊張してしまい何をしゃべっているかわからない状態になり、プレゼンを大失敗してしまいました・・・。
普段から緊張しやすいのですが、「会社の代表としてこのままではいけない」と思い、少しでも緊張しない方法を調べ私的に考えまとめてみました!!
 
 
 

自分だけが緊張しているわけではないと思う

プレゼンなどで、人前で話す時に緊張するのは当たり前です。
人前でも緊張していないという人は、そうそういないでしょう。
緊張すると周りが見えなくなってしまいます。周りにいる人を見て「この人だって緊張している」と思えば、周りを見る余裕ができます。また、誰でも緊張することを理解することによって、「自分が特別緊張しているわけではない」、「緊張するのが普通なんだ」と緊張への苦手意識がうすれ、安心感をえられます。

良い部分を見つけ自信を持つ

自信がないとつい声が小さくなってしまったりして、良いプレゼンができずにさらに自信喪失という悪循環に陥ってしまいます。
しかし、自信を持つことはそう簡単にできることではないことでしょう。なので、一つ人より勝ってると思えるところを探してそこを強調して話しましょう。例えば、声が綺麗だと褒められたことがあるという人は、声に意識して話すと丁寧に話せることへ繋がるかもしれません。また、サービス、プロダクトなどのプレゼンの場合には、ここはすっごくこだわったというところだけを意識してみましょう。あれもこれもと考えると緊張したら余計に混乱して話せなくなってしまいます。なので、本当に伝えたいところだけ一つを集中して伝えよとすれば、「だからこれのためにこれをして」などと関連で色々話が進みやすくなるでしょう。

ジェスチャーを使う

体の緊張は精神にも影響を与えます。
ライブなどでパフォーマンスする人やスポーツ選手ももちろん緊張しています。しかし、体を動かすことによって体が温まりだんだん緊張がほぐれていきます。
プレゼンでガチガチになってしまう人は、マイクをがっしり握って棒立ちになってしまっているのではないでしょうか。
だからといって走ったり運動するわけにはいかないので、ジェスチャーを使って少しでも体をほぐしましょう。
広いプレゼンスペースなら少し歩きながら説明していくのも手です。

人の目を気にしない

”見られてる”と思うことで自分自身が評価されてる、試されてると考え「上手く話そう上手く話そう」と考え、話す内容から気がそれてしまいます。
少し消極的な考え方かもしれませんが、「誰も自分のことなんてそんなに見てない」、「大して期待なんてしてない」、「失敗してもどうせされも覚えてない」と上手くいかなくても大丈夫いう意識を持てます。
「失敗しても自分の評価が下がるわけじゃない。もし上手く話せれば評価が上がってラッキー。」くらい捉えればプレッシャーかた解放されて、話す内容に集中できるのでしょう。

意気込まない

自分にとって重要なことほど緊張してしいます。
面接で緊張するのは、「この会社に入りたい」、「重要な分岐点なんだ」などと意気込みすぎ”失敗しないように”とばかり考えてしまうのが一つの原因でしょう。
「失敗しても人生終わるわけじゃない」と、少し楽に考えるようにしましょう。

緊張を楽しむ

普段、緊張する機会なんてそんなにないことでしょう。せっかくの機会を楽しまなきゃ損です!
「うまくやらないと」とばかり考えて、ワクワクした気持ちより不安な気持ちが勝っているせいで緊張してしまいます。
ジェットコースターを乗るときも多少緊張しますよね。しかし、その緊張はこれから起こることへの期待などのワクワク感からだと思います。それと同じように、「人前に立って話せるなんて普段じゃ味わえないエキサイティングな時間なんだ」と思ったら、不安な気持ちも少しは和らぐのではないでしょうか。
「人に注目されてるの気持ち良い!!!」くらいに思えたらすごくいいですね。

 
 
写真素材:
Flickr

続きを読む

【Arduino入門 第一弾】Webデザイナーでもできる電子工作~LED点滅~

2014年10月23日

Pocket

arduino_1

理工学を学んでない人、プログラミングに初挑戦という人でも簡単に入門しやすい電子工作ボードがアツイですね!
そこで今回は、Arduinoに挑戦してみました!
Arduinoの言語はCがベースですが、Arduino用の関数が多数用意されているので、難解とされるC言語がぜんぜんできない人でもプログラムしやすいです。
 
 
 

準備物

Arduino UNO
LED
USBケーブル
パソコン
 
 

IDEインストール

IDEはパソコン上でArduinoのプログラムを扱えるソフトウェアです。
http://arduino.cc/en/Main/SoftwareでArduinoのアプリをインストールします。
arduin_dl
それぞれお使いの環境に合ったソフトをインストールします。私は、Macを使用しているの『Mac OS X』をインストールします。
 
ArduinoとパソコンをUSBケーブルで繋ぎます。
先ほどインストールしたIDEを立ち上げ、使用ポートの設定をします。
ツール -> シリアルポート -> cu.usbmodem1421を選択します。
arduin_port
 
 

Arduino UNO基盤説明

arduin_bord
デジタル出入力ピン:入力、出力として使います。HIGH/LOWで設定が可能。
アナログ入力ピン:アナログの値で出力が可能です。
アナログ出力ピン:センサーなどからアナログの値を取ります。
LED:ピン13と連動しています。
 
 

回路を組む

今回はとりあえずLEDだけなので、回路を組むわけではないですが・・・。
デジタル出力ピン13にLEDのプラス極を刺し、マイナス極を隣のGNDに刺します。
LEDは長い方がプラス極、短い方がマイナス極です。
arduin_led
arduin_kairo
 
 

プログラムを組む

Arduinoでは、プログラムをスケッチといいます。
下記のプログラムを入れてみます。

const int LED = 13;

void setup(){
  pinMode(LED,OUTPUT);
}

void loop(){
  digitalWrite(LED,HIGH);
}

プログラムを書き終えたら、検証のボタンを押します。
arduin_botton
プログラムにエラーがなければ、下のエリアに「コンパイル終了」という文字が出ます。
エラーがなければ、書き込みボタンを押します。
「マイコンボードへの書き込みが終了しました」という文字が出ればArduinoのボードに書き込みが完了です。
arduin_error
無事LEDが光りました!!
点滅させたいので、プログラムを書き変えます。

const int LED = 13;

void setup(){
  pinMode(LED,OUTPUT);
}

void loop(){
  digitalWrite(LED,HIGH);
  delay(500);
  digitalWrite(LED,LOW);
  delay(500);
}

このプログラムをArduinoに書き込みます。
点滅しました!!
arduin_light
 
 

プログラム説明

const int LED = 13; //①

void setup(){  //②
  pinMode(LED,OUTPUT);  //③
}

void loop(){  //④
  digitalWrite(LED,HIGH);  //⑤
  delay(500);  //⑥
  digitalWrite(LED,LOW);  //⑦
  delay(500);
}

①ピン13に接続されていることをLEDという定数に代入しています。
②setupという関数を定義しています。この中には、初期設定のようなことをかきます。
③定数LEDは出力(OUTPUT)という設定をしています。
■pinMode(pin,value)
pinがOUTPUTかINPUTか設定
④Arduinoの電源がついている間ループします。
⑤LEDを点灯させます。
■digitalWrite(pin,value)はオンかオフを設定できます。
valueは、HIGHかLOWが入ります。
⑥光らせたい時間を設定します。
■delay(time)
プログラムを停止させる時間をミリ秒で設定します。
⑦LEDを消します。

 
 
 
簡単にArduinoでLEDの点滅が実装できました!

続きを読む

【シルクスクリーン】自宅で本格シルクスクリーンをやってみた 〜プリント〜

2014年10月20日

Pocket

silkscreen2

『自宅で本格シルクスクリーンをやってみた 〜版制作〜』に引き続き、今回はシルクスクリーンの本命プリントをしていきます!
今回はシルクスクリーンでポストカードを作ります。
 
 
 

準備物

バインダー(水性インク)
サンカラー
スキージ
プリントしたいもの(ポストカード)
zyunbi4
 
 
 

インクを作る

もともと色付きのバインダーも売っているのですが、お値段が少し高くなるので透明のバインダーに色を付けるインクを混ぜます。
今回使用しているバインダーは田中直染料店で”バインダーCS”と”サンカラー10色セット”を購入しました。”バインダーCS”は一番一般的なインクです。主に白色の物にプリントするときに使用します。黒色や濃い色にプリントした場合は、マットバインダー、又はホワイトバインダーを使用します。
 
プリントするのに必要な分量のバインダー器にとり、そのバインダーにサンカラーを入れ、よく混ぜ合わせます。
インク制作はこれだけです。
 
 

版にインクをのせる

プリントしたいものの上に版を置きます。
今回は、ポストカードにプリントします。
プリントしたい位置に柄を合わせて、柄にかぶらない場所にインクをのせます。
このとき柄部分にのせると、インクが染み込んでしまうかもしれないので、柄の外にのせます!
インクが固い場合は、柄の上にのせても大丈夫です。
今回使用しているバインダーは少し柔らかいので、もし、固めが良い場合はバインダーの粘度を上げる増粘剤が売っているので、増粘剤を使用すると良いです。
ink
 
 

プリントする

インクを置いたところから少し上にスキージを置き、45度くらい手前に傾けます。
そこから、一気に手前までスキージを引きます。
引くスピードがゆっくりだとにじむので素早く引きましょう。
print
版を上げるとプリントされていると思います。
版は何回かプリントできるのですが、できるだけこまめに水で洗ってインクを洗い流してください。
水性インクは、インクが乾きやすいので、インクが付いたまま版を放置しているとインクが固まって目詰まりお引き起こしてしまいます。
 
 

完成

これでオリジナルポストカードの完成です!
他の版も作って2色でやってみました!
postcardpostcard2
 
 
 
けっこう大変でしたけど、家でも本格的なシルクスクリーンを楽しめます!
オリジナルグッズの制作に役立てて頂ければ光栄です。
 
1.自宅で本格シルクスクリーンをやってみた 〜版制作〜

続きを読む

【Xcode6 SwiftでiPhoneアプリ開発入門】Swiftで簡単なプログラムを組んでみる

2014年10月16日

Pocket

swift_img12

iPhoneアプリ開発言語のObjective-Cは、今までの言語とは全く違い、取っ付きにくいとされてきました。新しく出た言語Swiftは、取っ付きやすく開発が簡単ということです!!!
そんな訳で、iPhoneアプリ開発言語のSwiftの参考が続々と登場しているので、便乗してSwiftを使ってみました。
今回は、とりあえず触れてみるということで、ボタンを押して文字が変わるという機能を作ってみました!
 
 
 

Xcodeインストール

まずApp Storeで『Xcode6』を検索してインストールします。
赤い四角の中のアイコンがXcodeです。
swift_shot1
 
 

プロジェクトを作る

Xcodeをインストールしたらさっそく新規プロジェクトを作っていきます!
Xcodeを立ち上げると下のような画面が出ます。
「Create a new Xcode project」をクリックします。
swift_shot2
 
「Create a new Xcode project」をクリックしたら、下のような画面になるので、「Single View Application」をクリックします。
swift_shot3
 
・Product Nameにプロジェクトの名前を付けます。
 とりあえず、今回は「testApp」と付けます。
・Languageは「Swift」を選択します。
・Organization Identifierに会社名などを入れます。
 アプリをリリースする時に必要なので、入れないでも大丈夫です。
swift_shot16
 
これでプロジェクトができました。
下記のような画面が表示されます。
必要なファイルなどが、自動的に任意のフォルダにできています。
swift_shot4
 
 

パーツを配置する

いよいよ作っていきます!
ナビゲーターエリア(左サイドバー)の「testApp」ディレクトリの中にある「Main.storyboard」をクリックすると、真ん中の画面が下記のように変わります。
ここにボタンなどのパーツを配置していきます。
swift_shot5
 
ユーティリティエリア(右サイドバー)の下の方にある①のアイコンがをクリックするとパーツを選べるウィンドウが表示されます。
まず、「Label」と検索します。すると、Labelのパーツがヒットするので、LabelのパーツをView Controllerの中にドラッグし、配置します。
swift_shot6
 
Labelをダブルクリックしてテキストを変更します。
swift_shot7
 
次は、Buttonのパーツを配置します。
先ほど同様、ドラッグして配置します。
swift_shot8
 
 

プログラムを書く

プログラムを書いてみましょう。
上のツールバーにある赤い四角の中のアイコンをクリックするとソースコードが表示されます。
swift_shot9
 
Labelをクリックして、「control]」キーを押しながら挿入したいソースコードのところにドラッグします。
すると、小さな吹き出しが出てくるので、設定をします。
・Connectionは「Outlet」を選択。
・Nameはとりあえず「testText」と付けます。
「Connect」をクリックすると、コードが追加されます。
swift_shot10
 
Buttonも同様に「control]」キーを押しながら先ほど挿入したコードの下にドラッグします。
・Connectionは「Action」を選択。
・Nameはとりあえず「testButton」と付けます。
するとLabelとは違ったコードが挿入されます。
swift_shot11
 
先ほど挿入したButtonのコードの中に

testText.text = "ボタンを押しました"

というコードを追加します。
swift_shot12
 
 

シミュレーターで見てみる

ツールバーの左上にある赤い四角の中のアイコンをクリックするとシミュレーターが立ち上がります。
swift_shot15
 
先ほど、作った画面が表示されます。
「Button」をクリックしてみます。
swift_shot13
 
クリックすると、Labelが「ボタンを押しました」というテキストに変われば成功です!!
swift_shot14
 
 

プログラム説明

 @IBOutlet weak var testText: UILabel! //①
    
 @IBAction func testButton(sender: AnyObject) { //②
     testText.text = "ボタンを押しました" //③
 }

①で指定のLabelをtestTextという変数に代入しています。
②Buttonを押した時のアクションのfunctionを作ります。
③ボタンが押された時のイベントを書きます。
先ほど、Labelを代入した変数testTextのテキストを変更します。
 
 
とりあえず、ボタンを押すと文字が変わるプログラムを組んでみました。
今回は、あまりSwiftのプログラムに触れていないので、次はコードをばりばり書いていきたいですね!!

続きを読む

【シルクスクリーン】自宅で本格シルクスクリーンをやってみた 〜版制作〜

2014年10月10日

Pocket

silkscreen

本格的なシルクスクリーンが自宅でできたら良いと思いませんか?
ホームセンターで売ってる物で露光機を作って、オリジナルの版を作ってみました。
シルクスクリーンプリントができれば、オリジナルTシャツやトートバッグ、ポスターなどオリジナルグッズを格安で作れます!
 
 
 

準備物

感光乳剤(SD-04)
バケット
版(紗を張っているもの)
プリントしたい柄を書いたトレーシングペーパー
蛍光灯(露光機)
nyuzaizyunbirokouki
露光機はホームセンターで売っている木で枠を作って、中に蛍光灯を入れてアクリル板を乗せています。
蛍光灯の灯具もホームセンターで売っているコンセントで簡単に付けれる物です。
 
 
 
※今回説明する行程は、全て紫外線の当たらない場所で行ってください!!
だからといって暗闇で作業するのは無理ですよね!
一番良いのは、写真を現像する部屋についてる赤いライトのような光がいいのですが、けっこうお値段しますし、使う機会がなさすぎるのでわざわざ買うのはちょっと・・・だと思うので、代用にLEDのライトでも大丈夫です。
LEDの光は、紫外線が少ないらしいので、100円ショップで売っているLEDライトで照らしながらやってもいいと思います!
 
 

版制作に大事な感光のしくみ

感光液は、紫外線に当たると硬化します。
ですので、露光することによって、紗に塗った感光液を固めています。
柄の部分は黒色で光を通さないので、柄の部分だけ感光液が固まらないので、洗い流すと柄の部分だけ抜け落ちます。
黒で光を通さなければいいので、トレーシングペーパーでなく黒の画用紙とかでも大丈夫ですよ。
このしくみを理解していれば、失敗してもなんとなく失敗の原因がつかめると思います。
もし、柄が抜けない場合は、露光し過ぎ又は露光するまでに紫外線に当たってしまい感光液が硬化してしまっている可能性が高いです。
逆に柄以外のところまで抜け落ちるときは、露光時間が足りなくて感光液が硬化しきっていなかったということがあります。
他にも、失敗の原因は、感光液を分厚く塗りすぎたやしっかり乾燥していなかったということもあります。

 
 
 

1. 感光液を塗る

オススメの乳剤はSD-04です。
この乳剤なら露光時間がアバウトでも割ときれいに柄が抜けるので、自宅でやるようなきちんとした設備が整ってない場合でも使いやすいです。
http://premiumt.jp/item/detail/SD40.html
乳剤をバケットに入れて裏表薄く塗ります。
ポイントは、紗に乳剤がピッタリつくまで、バケットを傾けてから上にスライドさせます。傾けすぎると垂れてしまうので、垂れない程度に。
バケットも買ったら、大きさによりますが安くて1000円はするので、浅いタッパーとかでも代用できます。
nuru
 
 

2. 乾かす

暗所でしっかり乾かします。
このとき、絶対に日光や蛍光灯のような光に当てないでください!!!
完全に乾いてないと失敗の原因になります。
布団乾燥機など使って乾かすと乾きが早くてオススメです!
私は、8時間くらい乾かしています。
kawakita
乾いたらこんな感じの色になります。

 
 

3. 露光する

いよいよ柄を版に焼き付けます。
アクリル版の上に<トレーシングペーパー → 版>の順に置きます。
光が漏れない為にその上に黒い画用紙を置いて一番上に重しを乗せます。
露光機のスイッチを入れます。
この露光機の場合、約10分露光します。
露光機によって露光時間が変わってきます。
この場合は、蛍光灯2本ですが、蛍光灯をもっと増やし光を強くするなら露光時間を減らした方がよいでしょう。
逆に蛍光灯1本の場合は露光時間を長くした方が良いかもしれません。
乳剤と露光機によって露光時間は変動するので、最初は失敗するかもしれません。
今回ご紹介した乳剤は割と露光時間が長めなので、他の乳剤をお使いの方は、その乳剤の露光時間に則り露光してください。
シルクスクリーンの版制作で一番難しいところは露光だと思います。
一度、ピッタリの時間を見つけたら次からは、楽チンなので頑張ってください。
rokou2
rokou

 
 

4. 洗い流す

露光が終わったら、版を洗います。
結構強い水圧で洗い流して大丈夫です。
シャワーの水を最大にして洗い流すのがオススメです。
洗っていると柄の部分が抜けていくと思います。
もし抜けにくいところがあった場合は、歯ブラシやスポンジで少しこすると抜けやすくなります。

 
 

版 完成

これで版は、完成です!
もう紫外線に当てても大丈夫ですよ。
むしろ、版を強くする為に日光に少し当てた方が、版が長持ちします。
han

 
 

次回は作った版でいよいよ印刷します!

2.自宅で本格シルクスクリーンをやってみた 〜版制作〜

続きを読む

このサイトについて


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

エアゼ ホームページ