WEB拍手ぱちぱちっと
Clap/拍手

01.MENU
Blog  / ブログ
Videos  / 動画
Pictures  / 絵
Game Materials  / 素材
SS(ShortStory)  / 小ネタ

02.MENU
Novels  / 小説
Chat  / チャット
BBS  / 掲示板
Others  / その他
Old Top  / 旧Top

Traffic Jam Products


愛すればこそiあればこそ

ごきげんよう。

おせんべいは南部せんべい派のmです。(何

おせんべいを食べたいのですが九州ですと南部せんべいがないのが難点です…。

(青森のせんべい)

 

今日は天気も良かったですし、観葉植物の土を買ってきて土いじりしてました。

パキラを育てていますが、虫もつきませんしてもかかりませんしとても良いですw

 

カラオケ9時間の代償は大きかった

先週、ひょんなことから9時間カラオケでI wanna be a 最強ヒーローしたりとか幾億の星が消え去っていくのを見送ったり手を振ったりよかったねしたりと休み無しでみんなで歌いまくっていました。

仕事で声が出なかったらどうしよう、なんて冗談めかしていたのですが……

なんと!!

まさかの日曜日~木曜日あたりまで声がヘロッヘロでした(爆

会社の皆さんには「風邪ひいてしまいまして……」と説明しましたが……。

本当はサヨナラを抱きしめたりヒラリヒラリ飛んでったりしてたせいですっ(核爆

ちなみにメンバー全員同じ感じでした(^-^;

 

BBSで紹介してもらった「It's my life」が面白かった

BBSにて「It's my life」というマンガを紹介していただきまして読んでいました。

ファンタジーほのぼの系マンガです。

35歳、騎士団退役した隊長が夢のマイホームを購入しのほほーんと生活する話です。

そこに幼女がやってきて家を壊したり、幼女を襲いに竜人がやってきて家を壊そうとしたり、幼女を取り返しにお姉ちゃんが来て家を壊そうしたりとします。

このあらすじを読んで分かる通り、全て物語の中心を握っているのが家のマンガです!!(ぅぉぃ

 

この漫画を読んでいると、オジサマ萌えに目覚めますw

30半ばの主人公ですが、これまたおちゃめなのです。

おちゃめなんだけどやるときはカッコイイ!! これぞクールなオジサマですねw

 

そして、カラーは絵に目を奪われます。本当に目を奪われます。

厚塗りの神様ですっ><

 

金曜日は肉食の会に行っていた

金曜日は肉肉していましたw

最初はみんなでダーツ&ビリヤードバーに行こうとなっていたのですが、なぜかみんな肉肉言い始めてお肉のお店へ。

がっつりいただいてきました~!

f:id:m_training:20160410184928j:plain

 

みんなで食べたのですが、じゃんけんで一番勝ったmが一番大きなお肉をいただきました!

これはおいしい~っ!

モグモグ~っ!

これはおいしい

モグモグ

これは……おいしい……

モグ……モグ……

これは……

モグ……

こ……こ……

モ……ぐぐ……

 

これ無理っ!(ぉ

大きすぎて例のごとく食べきれなかったという(^-^;

4人以上くらいでじゃんけんをするときは、グー、パー、グー、チョキな順番で出すと何故か勝つことが多いですw

 

WEB拍手レス!

>おっちゃんさん

おっちゃんさん、こんにちは~!

「このすば」も終わってしまいましたね。

mはやっぱりめぐみん派でしたw 可愛いったらありゃしませんw

 

4人で9時間は、歌っていた時はまだいける、まだいけると思っていたのですが、翌日以降死んでいました(^-^;

しかもみんな持ち歌が多すぎて9時間でもまだまだ入りましたからね~。

喉はもうずーっとヘロヘロでございました><

 

おっちゃんさんもカラオケに行った時は9時間歌わないように注意です!(爆

 

 

LINE BOT APIで英単語の翻訳を教えてくれるBOTを実装した話

ごきげんよう。スパゲティはスプーンの上で巻かない派、mです!(何

 

先日は『LINE Loginを実装』しました。

今日はLINE BOT API Trial Accountの実装のお話ですw

【LINE】メッセージングAPIのオープン化に先駆け、先着1万名限定でBOTアカウントを自由に開発できる「BOT API Trial Account」の無償提供を開始 | LINE Corporation | ニュース

 

LINE BOT APIとは、いわゆるBOTです。

例えば、LINEでお天気を聞いたらお天気を返してくれるとか、喫茶店を聞くと近くの喫茶店を教えてくれるアカウントです。

私はお仕事でよく英単語を調べたりしますので、今回はLINE BOT APIで英単語を聞いたら英語を教えてくれるBOTを作ってみましたw

 

そんなわけで『教えて!英単語!』リリースです!

英語→日本語のみです。

英語の語尾変換にもある程度対応しています。

 

QRコード

f:id:m_training:20160409211404p:plain

↓こんな感じ

f:id:m_training:20160409211320p:plain

画像は描き下ろしましたw あ!中学校の英語の教科書『New Horizon』よりエレン先生ですw

f:id:m_training:20160409211431p:plain


How to draw an anime character 180【アニメ絵の描き方】

 

ではでは!

早速LINE BOT APIの作り方にいってみましょう!

 

LINE BOT API Trial Accountを実装した

まずはBusiness Centerにアカウントを作らなければなりません。

作り方は、先日の私の『LINE Loginを実装してみた - Traffic Jam』の記事が参考になるかと思います。

  1. ログイン
  2. Business Centerの認証メールを完了させる
  3. アカウント、企業情報を入力する
  4. ビジネスアカウントを作成する(ここの画像と名前がBOTのそれになります)
  5. ビジネスセンター作成後にBOT API Trial accountを作成する

簡単に書くとこうなりますw

BOT APIは先着1万名なので早めが良さそうです。

 

作るとこんな感じになっています。

では、BOT APIの設定に入ります。

この設定で大大大苦戦しましたっ(滝涙

f:id:m_training:20160409212512p:plain

 

LINE BOT APIを設定しよう

BOT APIの「使う」をクリックすると設定画面に移動できます。

 

 

f:id:m_training:20160409212955p:plain

こんな感じになります。

ビジネスアカウントの画像と名前が設定されています。

 

そして恐らく最大の難所!!

Callback URLです!!

私の周り、何人が個々で阿鼻叫喚のうめきをあげたことでしょうか……

 

LINE BOTのCallback URLを設定しよう

LINE BOTのCallback URLの第一の難所

https』でなければなりません!

なのでhttpsを使える場所がないといけません。

そして……『FreeSSLは蹴られる』

ここが阿鼻叫喚ポイントですね……。

Lets encryptなどはアウトだったとのことです(^-^;

こちら、OKになったようです。(2016/4/26現在)

以下プレスリリースより

4月15日より、LINE BOT API Trial Accountで利用できる SSL 認証局に StartSSL と Let's Encrypt を追加しております。詳細情報は、以下URLにて、公開しております。

https://developers.line.me/bot-api/getting-started-with-bot-api-trial#register_callback_url

 

もしお手軽に試すのでしたら、フリーでhttpsが使えるwebscript.ioが良いかもしれません。

私も試しましたがwebscript.ioで簡単にオウム返しbotが作れました。

この方のページが参考となるでしょう。

yamamotomanabu.hatenablog.com

LINE BOTのCallback URLの第ニの難所

https://milk0824.sakura.ne.jp:443/linebot

なぜかポート番号を書かないといけません(^-^;

マニュアルに目を通す方だと書いているので気づきますが、「httpsだろぅ」で進めてしまう人は混乱しますw

……そしてエラーメッセージで「specified」を「sepcified」とスペルミスしていることに気づいてしまうmだったのでしたw(ここ、何回も見ることになったので…)

 

LINE BOTのCallback URLの第三の難所にして最大の難所!

LINE BOTを作ったのは良いんだけど、反応がない!

ログを見てもアクセスされている様子がない!

レスポンスが全く帰ってこない!!

 

今日、mも体験しましたし、私の周りも「私のワンちゃんボットから反応がないっ」とか「独り言いってるだけなんだけど」といった感じになっていました。

 

私も苦戦してたのですが……

Callback URLを設定してから反映されるまでとても遅いのです!!

これでした(^-^;

少し放っておいて30分後くらいに「こんにちは」といったら反応が返ってきましたw

プログラマーの皆さんは基本一秒単位でコールしちゃいますので、設定後は珈琲を飲んでアニメを見てから話しかけてみましょう。

 

Server IP WhitelistにCallback URLのIPを設定しよう

あと、ボットが呼び出すプログラム(Callback urlで設定した場所)のIPをwhite listに登録しなければなりません。

white listとは、決められたIPにしかアクセス出来ない仕組みです。

左側のメニューから『Server IP Whitelist』を選んでください。

f:id:m_training:20160409215040p:plain

ここに、Callbackで使用するサーバーのIPアドレスを追加しましょう。

最後の「24」はサブネットマスクと呼ばれるものです。

24の場合は先頭から3箇所は固定で、最後の場所が0~254まで使用できます。

まぁ、最低24から設定してくれ、と書いていますのでおとなしく24にしておきましょうw

使うサーバーのアドレスがわからない場合は、ネットで調べることも出来ますし、コマンドプロンプトで「nslookup ドメイン名」で検索できるかと思います。

 

これで難しい設定は終わりです!

callback urlの件がありますので、設定後はお茶でも飲んでくつろいでいれば良さそうです。

 

callbackをphpで実装しました

実装は大体こんな感じです。

  1. メッセージを取得する。
  2. メッセージから送り主とテキストを取得する
  3. 送信データを設定する
  4. ヘッダを設定する
  5. 送信する

みなさん苦戦するのはSSLとCallbackで、そこを抜けたら何とかなりますw

では私がかいた『教えて!英単語!』のプログラムをベッタリ貼り付けておきますw

アマチュアですのでコードの汚さはちょっとだけ勘弁して下さいねっ(ぉ

require("english12000.php");
function searchWord($word, $englishDB){	
	$word = mb_strtolower($word);
	$changedWord = exchangeWord($word);
	//完全一致で検索
	$returnValue = findWord($word, $englishDB);
	//なかったら変更後のワードで検索
	if(!$returnValue){
		$returnValue = findWord($changedWord, $englishDB);
	}
	//それでも無かったら部分一致
	if(!$returnValue){
		$returnValue = stristrWord($changedWord, $englishDB);
	}
	//それでも無かったら謝る
	if(!$returnValue){
		$returnValue = cantFind();
	}
	return $returnValue;
}

//語句判定
function findWord($word, $englishDB){
	if(isset($englishDB[$word])){
		return makeFindTalk($word, $englishDB[$word]);
	}
	return null;
}

//見つけた時のトーク作成
function makeFindTalk($word, $value){
	$serifu = array(
		$word . "ね\n" . $value,
		$word . "かしら\n" . $value,
		$word . "ですね\n" . $value,
		$word . "…" . $word . "と\n" . $value,
		$word . "かぁ…たしか…\n" . $value,
		$word . "はこんな感じね\n" . $value
		);
	return $serifu[rand(0, count($serifu) - 1)];
}

//部分一致検索
function stristrWord($word, $englishDB){
	$returnValue = null;
	while(list($key,$value) = each($englishDB)){
		if(stristr($key, $word)){
			$returnValue = makeFindTalk($key, $value);
			break;
		}
	}
	return $returnValue;
}

//いじめられた時の先生の反応
function cantFind(){
	$serifu = array(
		"ごめんなさい、先生その英語がわからないの…\n勉強不足かしら…",
		"どういう意味かしら……\nちょっとわからないわね",
		"えと、えと、調べてるけど出てこなくて……",
		"わ、わたしの辞書にその字はないかも……",
		"な、なにかしらね、その単語……\nごめんなさい、パソコンで調べて><",
		"え!?\nええと……ちょっとわからないわね……",
		"うーん、これでもないし…それでもないし…な、なんでしょうね。あは、あはは……ごめんね><",
		"その単語は昔聞いたんだけど……ごめんなさい……。",
		"あうう……わたしの辞書に載ってなくて……ごめんなさい",
		"えと、えと、調べてるけど出てこなくて……"
		);
	return $serifu[rand(0, count($serifu) - 1)];
}

//単語をルールにそって変更
function exchangeWord($word){
	if(preg_match('/ies\z/', $word)){
		return str_replace('ies', 'y', $word);
	}
	else if(preg_match('/es\z/', $word)){
		return str_replace('es', '', $word);
	}
	else if(preg_match('/ed\z/', $word)){
		return str_replace('ed', '', $word);
	}
	else if(preg_match('/ing\z/', $word)){
		return str_replace('ing', '', $word);
	}
}

////////////////////////////////////ここから本体

//ユーザーからのメッセージ取得
$json_string = file_get_contents('php://input');
$jsonObj = json_decode($json_string);
//送ってきた相手のmid取得
$to = $jsonObj->{"result"}[0]->{"content"}->{"from"};
//メッセージ取得
$text = $jsonObj->{"result"}[0]->{"content"}->{"text"};
//辞書検索
$text = searchWord($text, $englishDB);

//返信データ作成
$response_format_text = [
	'contentType' => 1,
	"toType" => 1,
	"text" => $text
	];
//このへんは固定データです。
//toは配列型じゃないとうまくいきません><
$post_data = [
	"to" => [$to],
	"toChannel" => "1383378250",
	"eventType" => "138311608800106203",
	"content" => $response_format_text
	];

$ch = curl_init("https://trialbot-api.line.me/v1/events");
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($post_data));
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
    'Content-Type: application/json; charser=UTF-8',
    'X-Line-ChannelID: ご自分のチャンネルID',
    'X-Line-ChannelSecret: ご自分のチャンネルシークレット',
    'X-Line-Trusted-User-With-ACL: ご自分のmid'
    ));
$result = curl_exec($ch);
curl_close($ch);
    

こんな感じです。

メッセージの受信と送信本体は下のちょっとした部分だけですw

データの受信

$json_string = file_get_contents('php://input');
$jsonObj = json_decode($json_string);
$to = $jsonObj->{"result"}[0]->{"content"}->{"from"};
$text = $jsonObj->{"result"}[0]->{"content"}->{"text"};

 

***

 

file_get_contentsで取得です。

そこからfromでメッセージを送ってきた人のmidを取得します。

またtextで送信されたメッセージを取得します。

 

相手に送るメッセージを作成

$response_format_text = [
'contentType' => 1,
"toType" => 1,
"text" => $text
];


$post_data = [
"to" => [$to],
"toChannel" => "1383378250",
"eventType" => "138311608800106203",
"content" => $response_format_text
];

 

***

 

どの値も固定なのであまり気にする必要はありませんw

まずは上の部分。

LINEにメッセージを送信するときは……

contentTypeは1

toTypeもuserですので1

textは送信したいテキストです。

公式マニュアルをぺたり。

f:id:m_training:20160409221422p:plain

https://developers.line.me/bot-api/api-reference

 

***

 

続いて下の方。送る相手についての設定です。

toの部分は送る相手のmidです。

ここ、ただの"to" => $toにするとコケます><

配列の形(最大は150人みたい)でなければダメそうです。

"toChannel" => "1383378250",
"eventType" => "138311608800106203",

ここも固定の数字です。

contentに関しては上の方で設定したメッセージを使いましょう。

f:id:m_training:20160409221828p:plain

メッセージの送信

$ch = curl_init("https://trialbot-api.line.me/v1/events");
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($post_data));
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Content-Type: application/json; charser=UTF-8',
'X-Line-ChannelID: ご自分のチャンネルID',
'X-Line-ChannelSecret: ご自分のチャンネルシークレット',
'X-Line-Trusted-User-With-ACL: ご自分のmid'
));
$result = curl_exec($ch);
curl_close($ch);

 

***

 

この辺は色々なページを参照して作成していますので悪しからずです(^-^;

皆さんの真似でcurlを使用します。

curlは……ヘッダとか色々つけてhttpで色々できるよ!という代物……だと思います!

たぶん!(ぉ

 

さて。送る先はこのAPIです。

URL

https://trialbot-api.line.me/v1/events

 

メソッド

POST

 

ヘッダ

 

  • Content-Type: application/json; charser=UTF-8
  • X-Line-ChannelID: ご自分のチャンネルID
  • X-Line-ChannelSecret: ご自分のチャンネルシークレット
  • X-Line-Trusted-User-With-ACL: ご自分のmid

 

これらを設定しましょう。

全部LINE BOT APIの設定部分に書かれている情報です。

 

f:id:m_training:20160409220758p:plain

 

 

これで無事、メッセージを送ったら先生がお言葉を返してくれるBOTの出来上がりですw

f:id:m_training:20160409171415j:plain

f:id:m_training:20160409222520p:plain

デバッグが面倒くさいけれどどうすればいいの?

エラーログなどがないので、デバッグがつらいです……。

なので私は、まず自分のLINEのmidの取得をしました。

これは先日の『LINE Loginを実装』の副産物ですw

ログインすることでmidがとれましたのでw

それを送信の際の「to」に設定して、直接phpを実行しました。

callbackで呼ばず直接プログラムを叩く場合、whitelistも関係なしに呼び出すことができます。

叩くだけで「ぴろろん」とLINEが飛んできますw

 

実際にcallbackが反応するのはサーバーのログが取れなかったので、webscript.ioでcallbackが呼ばれているか確認していました。

ぜんぜん呼ばれず悪戦苦闘してました><

 

LINE Loginを実装してみた

 

ごきげんよう。たらこは焼きタラコ派のmです(何

 

Twitterログイン、Facebookログインにつづいて「LINEログイン」が現れましたねw

今日は早速それを使ってみましたのでご紹介したいと思いますw

 

 ↓自分のサービスに実装を反映しました

アイコレ! コレクション共有SNS

いったん取り下げますmm

 

LINE Loginを実装してみた

アカウントを作ろう

まずはアカウント作成です。

Business Centerというところからできるようです。

business.line.me

1. ログインボタン

f:id:m_training:20160408012521p:plain

 

このあと、

2.ログイン画面が表示されます。

3.そのあとにアカウント情報と企業情報を埋めます。

……キャプチャ撮り忘れました><

 

4.そしたら次はお目当てのLINE Loginを選択!

f:id:m_training:20160408012740p:plain

5.LINE Loginの説明をよんで、利用開始を押すと……今度は『ビジネスアカウント』なるものの作成が始まります。これは……なんだろうw

ここに設定した画像と名前が、LINE Loginの認証表示の時の絵と名前になるようです。

 

f:id:m_training:20160408012911p:plain

f:id:m_training:20160408013141p:plain

 

6.完了すると、また選択ですっ! はい、LINE Loginを選びますw

f:id:m_training:20160408013233p:plain

 

7.そして利用開始ボタンをポチります。

f:id:m_training:20160408013339p:plain

 

LINE Login Channelを作ろう

8.ここからLINE Loginの設定のようです。

空白を埋めていきます。

Application Typeは、今回はWebでのログインなので『WEB』を選びました。

Contact mailing list addressは、連絡用メールかと思われます。

終わったらCreateを押しましょう。

f:id:m_training:20160408013418p:plain

9.続いてTechnical configurationを選択します。

 

f:id:m_training:20160408013702p:plain

 

10.そこで、callbackのURLを指定します。

f:id:m_training:20160408013806p:plain

注意!!

ここは『https』でなければなりません!

あと、プログラム内の『redirect_uri』と一致していなければなりません!

ここで凄く苦戦していたのです……。

 

これでLINE Loginを使うための準備は完了です!

 

プログラムを実装しよう

では早速実装です!

Login画面呼び出し

LINE Loginの呼び出しをするときは簡単です。

テストなので、簡単にhtmlを書いてみました。

f:id:m_training:20160408014149p:plain

 

URLはこれです

https://access.line.me/dialog/oauth/weblogin

 

response_type

"code"で固定のようです。

 

client_id

channel IDが入ります。これは先程のチャンネル作成画面に書かれています。

 

redirect_uri

ログインした後戻ってくるURLです。

URLエンコードしましょう!

https必須です!

チャンネルの時のTechnical configurationのところと同じ場所にしましょう!

 

state

オプションらしいです。何か値を引き継ぎたい時に使うのが良いでしょう。

ここはURLエンコードしてはいけないとのことです。

 

ドキュメントはこんな感じです。

f:id:m_training:20160408014710p:plain

https://developers.line.me/web-login/integrating-web-login

 

callback.php

では、ログインした後に戻ってくるページです。

構成的には以下です。

1.ログインに成功すると『code』が戻ってきます。(errorならerrorCodeが帰ってきます)

2.戻ってきた『code』を使って、APIを呼び出す。

3.APIから戻ってきた値を見て煮るなり焼くなり好きにする。

 

私はこんなかんじで書いてみました。phpです。

	session_start();
	$code = $_GET['code'];
	echo "Code= " . $code;

	$url = "https://api.line.me/v1/oauth/accessToken";
	// POSTデータ
    $data = array(
        "grant_type" => "authorization_code",
        "client_id" => "チャンネルID",
        "client_secret" => "チャンネルシークレット",
        "code" => $code,
        "redirect_uri" => "リダイレクトする場所(使わなくてもよさ気…?)"
    );
    $data = http_build_query($data, "", "&");
    $header = array(
		"Content-Type: application/x-www-form-urlencoded",
		"Content-Length: ".strlen($data)
	);
	$context = array(
        "http" => array(
                "method"  => "POST",
                "header"  => implode("\r\n", $header),
                "content" => $data
        )
     );
	$res = file_get_contents($url, false, stream_context_create($context));

	$token = json_decode($res, true);
	if(isset($token['error'])){
		echo 'ログインエラーが発生しました。';
		echo "error" . $token['error'];
		echo $token['error_description'];
		exit;
	}

	while(list($key,$value) = each($token)){
		echo $key.' -> '.$value;
	}

こんな感じです~

 

URL

https://api.line.me/v1/oauth/accessToken

メソッド
POST

header

Content-Type: application/x-www-form-urlencoded

データは……

f:id:m_training:20160408020733p:plain

公式よりw

codeのところで、ログインした時に帰ってきた値をつかいます。

redirect_uriはこのときは使わないかもしれません。

 

実行!

では実行です!!

f:id:m_training:20160408015844p:plain

ボタンはこんな感じに。(私が描きましたw)

それを……

ポチッとな!

f:id:m_training:20160408020001p:plain

そうすると、LINEのログインページに移動します。

LINEに設定したメールアドレスとパスワードを入力です。

ログイン!

f:id:m_training:20160408020056p:plain

すると規約がでました!

なお、絵はゲーム系に使うと怒られる系の絵だったのでこまりんに変更ですw

そして『同意する』

すると……

f:id:m_training:20160408020420p:plain

しっかり値が戻ってきましたねw

モザイクだらけでゴメンナサイw

 

返ってきたデータの意味は……

f:id:m_training:20160408020913p:plain

こんな感じですね。

『mid』でユーザー識別が出来そうです。

なのでこれを使って登録などすれば良さそうです。

 

ここから更にいっぱいデータがほしい時はREST APIになるらしいです。

 

2016/4/9追記

LINEの名前(displayName)とLINEのプロフィール画像を取得

 LINEの名前と画像は取得できないの?という意見をいただきましたので、その取得も書いておきます~。

 

名前と画像の取得は簡単で、headerにアクセストークンを設定して

https://api.line.me/v1/profileにアクセスするだけですw

URL

https://api.line.me/v1/profile

メソッド

GET

header

Authorization: Bearer アクセストークン

コードはこんな感じでしょうか。

 

    function getProfile($access_token){
		$url = "https://api.line.me/v1/profile";
		$context = array(
	        "http" => array(
	                "method"  => "GET",
	                "header"  => "Authorization: Bearer ". $access_token
	        )
	     );
		$res = file_get_contents($url, false, stream_context_create($context));
		return json_decode($res, true);
	}

	session_start();
	$code = $_GET['code'];

	
	$url = "https://api.line.me/v1/oauth/accessToken";
	// POSTデータ
    $data = array(
        "grant_type" => "authorization_code",
        "client_id" => "チャンネルID",
        "client_secret" => "チャンネルシークレット",
        "code" => $code,
        "redirect_uri" => "リダイレクトするURL(いらな気…?)"
    );
    $data = http_build_query($data, "", "&");
    $header = array(
		"Content-Type: application/x-www-form-urlencoded",
		"Content-Length: ".strlen($data)
	);
	$context = array(
        "http" => array(
                "method"  => "POST",
                "header"  => implode("\r\n", $header),
                "content" => $data
        )
     );
	$res = file_get_contents($url, false, stream_context_create($context));

	$token = json_decode($res, true);
	if(isset($token['error'])){
		echo 'ログインエラーが発生しました。';
		echo "error" . $token['error'];
		echo $token['error_description'];
		exit;
	}

	$profile = getProfile($token['access_token']);
	echo "profile:" . $profile['displayName'] ;
	echo "status message:" . $profile['statusMessage'] ;
	echo 'image: <img src="' . $profile['pictureUrl'] . '/large" alt="" /> .';
    

 

そうすると、以下のものが返ってきます。

f:id:m_training:20160409011327p:plain

https://developers.line.me/restful-api/api-reference

displayNameがLINEに表示される名前です。

midは識別IDみたいなものです。

statusMessageは、あのリストに表示される時の文字ですw

pictureUrlはプロフィールの画像です。

largeとsmallがあるようですね。

f:id:m_training:20160409011507p:plain

 

 実行してみると……

f:id:m_training:20160409011609p:plain

こんな感じでLINEの名前とプロフィール画像、そしてステータスメッセージが取得できましたw

 

 

ガイナ立ちの金剛さん【艦これ】【厚塗り】

ごきげんよう。

近頃パンには「ハチミツミソ」を塗って食べているmです!(何

門司港のはちみつ屋さんで見つけて買ったんですよw

味は……甘いようなしょっぱいようなですw(まんま

 

金剛デースッ!【ガイナ立ち】【厚塗り】

mはアニメ塗りの人というのが定着しています。

ですが!

それを打ち破るべく厚塗りをしてみましたw

……そんな崇高な思いがあるわけではなく、不意に「やってみよっと」と思っただけですw(ぉ

 

ちなみに厚塗りとは。

色を何度も塗り重ねてゆく手法かな、と。

アニメ塗りの場合は最初から線画を完成させてから色を載せます。

厚塗りでは色を乗せながら線を引いたりと、塗りながら絵を整えていき完成させていきます。

 

厚塗りは重厚感あふれる塗り方。

どのような絵を描きましょう……と思った所でmの頭にはすでにロボットソングが流れていましたw(グレンラガンあたりです)

ならばこう「バーンッ!!」と来る構図だとモヤモヤ妄想。

で、構想を固めましたがmは、ずーーーっとアニメ塗りの人で他の塗り方をしたことがありません。

どう塗ればいいかよくわかっていませんがお絵かき講座や好きな人の絵をしばらく眺めてイメージイメージです。

 

それから気合い一発絵をカキカキですw

うららかな春の日差し、窓辺から見える桜を優雅に楽しみつつ

 

f:id:m_training:20160404074041p:plain

 

金剛デースッ!!

 

全身はこんなかんじ。

f:id:m_training:20160404074950p:plain

 

出てきた途端「勝ったな……」くらいな感じの絵を描きたかったんです(爆

もちろん出てきた時は主題歌が流れるかデンドンデンドンに決まっています(核爆

 

もうすこし慣れたらイメージする迫力を絵に落とせる……ようになったらいいなですw

 

で、こんな変遷を経て描いてます

f:id:m_training:20160404075455p:plain

f:id:m_training:20160404075527p:plain

f:id:m_training:20160404075549p:plain

 

レイヤー1枚に色を載せて描いたのですが、やっぱりレイヤー分けはしたほうが書きやすいです(^-^;

 

カラオケオールした

mが金剛さんを描いている時。

「mさんカラオケいこー」

となったので……夜6時から朝3時過ぎまで、9時間歌ってきましたw

4人でしたが、みんなアニソン好きですので安心なカラオケです(一般な方とは気を使いますからね~

もちろんmは腕を組んで仁王立ち気分ですので、最初からJam Projectを入れて絶叫しまくりです(爆

年代故か、サイレントメビウスとかウテナとかYou get burningとか懐かし曲がw

友達の寝起きでリセット(懐かしきらき☆すた)が可愛かったです(爆

そこにmがW-infinityを入れたりして場が大混乱ですw

今回はカラオケ好きな人が多かったせいか、曲を予約しようとしたら

「予約がいっぱいで予約できません」

の表示が!(何曲入れてるんだ

後半に僕だけがいない街とか入れていましたが、夜2時位だとさすがに本気で酸欠でした><

 

さて。

今日も声がでないのです(^-^;

お仕事にこの声でいくとはっ(滝汗

 

 

 

 

紙に描いた絵を簡単にデジタル化できるBamboo Spark レビュー & 実際に描いた様子

ごきげんよう。

土曜日はカラオケオールの予定が入っているmです!(何

 

カロリーQueenを駄菓子を食べながら熱唱しないとですねw

さて。

mが駄菓子食べたい食べたいと言っていたら会社にまさかの……

f:id:m_training:20160330091108j:plain

きなこ棒支給!!(ぉ

もちろん当たりが出たらもう一本もらえますよw

 

紙に描いた絵をボタン一発でデータ化『Bamboo Spark』 レビュー

みなさんはアナログで描いた絵やミーティングの内容をデータ化したいと思ったことはないでしょうか?

思ったら吉日。

ひたすら紙をスキャナに入れてピーガガガガと読み込むことを2回くらい繰り返すと

「うん! もういいや!」

となるのですよねw(体験談

 

そこで登場したのが「Bamboo Spark」です!

バンブーブレードではないですよ(古

Bamboo Sparkは、その上で、A5くらいの紙にペンで絵を描いたり文字を書いたりしたあと、ボタン一発でデータ化できちゃうスゴイツールです。

以下公式より。

https://store.wacom.jp/user_data/packages/default/img/detail/bamboo_spark/img2.jpg

 

公式や店頭では「ミーティングで~」と歌われていますが……

これは絵かきにとってのツールではないでしょうか!?

気になったmは早速ゲットしてみました。

 

開封の儀の巻!

仕事が終わった後に勇み足で向かったのはヨドバシカメラ

ペンタブレットコーナーで説明ビデオと一緒に売っていたので直ぐにわかりますw

……マウスコーナーで迷って店員さんにペンタブコーナーを聞いたのは内緒です(爆

 

Bamboo Sparkは「タブレットスリーブ」タイプと「ガジェットポケット」タイプの2つが売っています。

これは単純に左側のポケットの形です。

ipadをくっつけやすくするのか、それともスマホを入れるようなポケットが欲しいか、といったところです。

mはスマホ管理をしたかったので「ガジェットポケット」をゲットしました。

f:id:m_training:20160330202558j:plain

はい! こんな感じですw

早速開けてみます。ドキドキ。

f:id:m_training:20160331220543j:plain

中も可愛らしいですw

付属品はというと。

f:id:m_training:20160330202856j:plain

 

  • クイックスタートガイド
  • 換えの芯2本と替える時の道具。
  • 充電用USBケーブル

 

気をつけなければいけないのですが、USBは充電のためについています。

mは勘違いしていたのですがデータ転送用ではありません。

データを転送するためにはBluetooth4.0に対応したスマホが必要です。

そして本体!!

f:id:m_training:20160331220722j:plain

こんな感じです。

タブレットを入れるケースみたいですね。

これに

  • 専用のペン

がついています。

左側を折り返して使おうとする人が多いかと思いますが、真ん中の折り目がモッコリしてしまうので書きにくくなってしまいそうです。

 

f:id:m_training:20160331215130j:plain

ペン先が気になる人も多いかと思いますのでこの写真をばw

ペンはひとことで言うとボールペンですw

書き味も完全にボールペンのそれですw

別に電池などは必要ありませんし、紐なども繋がっていないペンです!

(すごい昔は電池入れたりケーブルがつながっていたりしたものです…)

ペンは持ってみるとそれなりに重量感があります。

 

早速使ってみる!の巻

使う前に、データを送る側のスマホにアプリをインストールする必要があります。

Bamboo sparkのアプリはiOS/Androidそれぞれが出ています。

ストアからダウンロードすると、最初に設定の方法が説明されます。

それにしたがって動かせばペアリング終了です。

これでボタン一発でデータ転送ができるようになります。

 

ではでは!

電源を入れてペンをズババババーと走らせました。

f:id:m_training:20160330222553j:plain

紅魔族随一の魔法の使い手、めぐみん!!

我が必殺の最強魔法、爆裂魔法を操る!

 

とまぁ、こんな感じで頭おかしい娘を描いてみました(ぅぉぃ

そして転送ボタンを……

ぽちっとな!

するとさくっとスマホに転送されました。

どれどれw

f:id:m_training:20160331223217g:plain

 

おおおおおおおおおおおおおおおおおおお!!!

しっかりと絵が記録されていますっ!

書いている順番までしーっかりと記録されていますーーー><

ちょっと感動してしまいましたw

クラウドにも登録しておけば、絵がクラウドに保存されますのでPCに落とすときに楽ちんでしたw

 

感想

まず、紙はなんでもいいという点が良しです。

付属の紙がなくなったら100禁で調達できそうです。

 

ペン

ボールペンです。

完全にボールペンです。

書き味もそれです。

 

描いてみた感じ

ほぼほぼ描いた線を記録してくれます。

紙の絵と実際にデータ化された絵を見ても違和感はなしです。

その昔、二階調化してphotoshopに読み込んだ時の絵を彷彿とさせます。

入りや抜きの筆圧感知は弱そうです。

なので髪の毛などをふわりと描く人はつらいかもしれません。

mのようにアニメ絵を描く人は問題なしですw

あと、少し広い机などで描く必要ありです。

カバーが厚めで後ろに折り曲げてしまうと浮いてしまって絵が書きにくいです。

 

使い道

アナログでペンを走らせて絵を描きたい!という人向けかと思います。

ペンはボールペンみたいですので、こちらも慣れが必要です。

 

お仕事で絵を書いている人も良いかもしれません。

担当さんにラフを見せる時なんて、これでサラサラ~っと描いて共有してあげると直ぐかも知れませんねw

 

mは昔イベント会場で即興で絵を書いていましたが、たまに

「こ、これは会心の出来! とっておきたかった!」

みたいなことがありました。

イベント会場で頼まれた絵をサクッと紙の上に描いてデータはスマホに転送、絵は相手に渡す……なんてこともできそうですねw

 

あと、mのようにお絵かき講座をたくさん書いている人はストロークの保持されるのがありがたいですよねw

 

……公式ではミーティングなどで、と書かれていましたが、そっちは普通の紙やPCでいいかも……(ぉ

アナログ絵がベストの使いみちかと思いましたw

 

 

ワコム Bamboo Spark with tablet sleeve CDS600PG

ワコム Bamboo Spark with tablet sleeve CDS600PG

 

 

ワコム Bamboo Spark with gadget pocket CDS600GG

ワコム Bamboo Spark with gadget pocket CDS600GG

 

 

 

 

 

 

ごちうさ展にいった!

ごきげんよう。国家ではない方の鳥の歌を聞いている、mです!

ダンクーガノヴァの方ですw 

こちらも良い曲なので是非聞いてみてくださいw

 

ではでは、mの週末の動きを見てみましょう(何

 

週末!土曜日!

土曜日はというと、勉強会にお呼ばれされており行ってきていました!

午前と午後で別々の勉強会ですw

そこは置いておいて(ぅぉぃ!

勉強会後の懇親会ですw

よく「なんで懇親会いくの?」と聞かれることがあります。

様々な勉強会に行ってわかったことは、生の情報交換、気取っていない正確な情報の取得(発表資料はカッコイイ場所を切り出して、泥臭い部分を省く場合も多いです)、様々なバラエティに富んだ話、それぞれの理論の多角的解釈の議論、そしてクラスタ形成については自由議論ができる懇親会でしかできません。

もし知識を得るために勉強会に参加、問題解決の糸口のために勉強会参加をするのであれば懇親会で聞いたほうが様々な角度のお話を得ることができます。

で。

 

f:id:m_training:20160326215813j:plain

日本酒ソムリエなる方がいらっしゃるお店で飲んでいましたw

今回集まったメンバーが私も含めて日本酒好きメンバーでして(^-^;

日本酒ソムリエはフルーティなお酒から甘口、辛口のお酒、私達のワイワイした要望に答えたお酒を持ってきてくださるっ!

そんな日本酒を「デカンタでっ!」とデカンタ(3合ほど?)で飲んで飲んで飲んでおりましたw

みんなで飲みながらチーム形成論、ジェネラリスト(幅広く深い知識を持っている人)、振り返り技術(プロジェクトやお仕事後の振り返りはしていますか?)、成果を出すためにチームとして行うこと、成果の見せ方etcの話を聞いたりおしゃべりしたりしておりましたw

ワイワイおしゃべりしていたらあっという間に12時!

…………!!

6時間も飲んでいましたっ(核爆

恐らく日本酒も一人8合~9合(1升は飲んでいないと信じたい)くらい飲んでいましたw

久しぶりにフラフラまで飲んでおりました(ぅぉぃ

 

日曜日は心がぴょんぴょんするんじゃ~

「mさん! ごちうさ展があるから行きましょう!」

なんて誘われて、日曜日は前日に8合くらい日本酒を飲んでいたにも関わらず、心がぴょんぴょんする場所へ向かいましたw

場所は小倉(こくら)という場所だったのですが

「どうせだから門司港まで行きましょうよ!」

となりまして門司港まで行ってまいりました。

門司港は旧財閥などの歴史的建造物が多く残る街で、レトロ調の建物がたくさんあります。

そして……コスプレするときの撮影にピッタリなスポットなのです!!

なぜかって対象っぽい建物が一杯あるからですw

↓駅です。

f:id:m_training:20160327144730j:plain

↓旧財閥のお家?

f:id:m_training:20160327120143j:plain

港を歩いていると、コスプレイベントもやっていまして、写真をパシャパシャと撮ってきたりしておりましたw

ローゼンメイデンのコスをしている方々がいらっしゃったのですが、門司の町並みにぴったりなのです!

あの手のアニメは撮影するなら門司が良さそうです。

 

門司の焼きカレー

あと門司と言ったら名物は焼きカレーです!

f:id:m_training:20160327203622j:plain

パエリア鍋で作った野菜たっぷり焼きカレーです♪

作りたてのグツグツといった様子、上にのせたチーズがトロリととろけています!

カレーは辛すぎず、かといって甘いわけでもなくとってもマイルドです。

中のご飯は半分が玄米、半分が白米となっていてヘルシー仕様になっているのも素敵なのです。

お肉なんかもふわふわ、癖もなくやわらかいっ

途中まで食べた後、上の卵にスプーンを運びました。

その卵を割ると半熟卵が~っ!

卵の黄身のマイルドさと周りのカレーが調和して素敵なお味になっちゃうのですっ><

そしてそしてパエリア鍋ですのでお鍋の縁の方のご飯がおこげになっているのですよね。

そのおこげの部分がまた、パリパリして美味しいのです~~~っ!

門司港に来たら焼きカレーは是非一度お試しあれですw

 

あと、他にメロンパンや「お肌ぷりぷりになるって!」なんと言いながらハチミツなんかを買って歩いていましたw

 

さて本命!

ごちうさ展!

f:id:m_training:20160327152318j:plain

小倉のあるあるcity

mは実はそこまでごちうさは見てなかったりしました。

けれどmの友達が大ファンで、会社PCの背景がチノちゃんなくらいなのですw

その友達と「心がぴょんぴょんするんじゃ~」と言いながら突撃ですw

 

f:id:m_training:20160327164248j:plain

さっそく大きなパネルでお出迎えですw

ここでもはしゃいで写真を撮りまくっておりましたw

友達なんて

「mさん、私ココアちゃんと並ぶから撮って!!」

とまぁ、ノリノリでした(爆

(※mはチノちゃん派です)

 

中では原画などが置かれていて、mなんかは絵描き視点で

「これ、鉛筆書きなのかな、PC使わないのかな?」

みたいに見ていたりしていましたw

f:id:m_training:20160327231703j:plain

 

ホラー4D映画を見た

ごちうさ展と並んで、6分間の360度4Dの映画をやっていました。

そこでなんと、ホラーをやっていたのでそれを見ることに!

一緒に見るグループはなく、ちょうどmたち3人だけでした。

シアターは半径3mくらいの小さな場所で、中に小さな椅子が何個も並んでいます。

そして360度ぐるりと周るようにスクリーンがついています。

 

上映が始まりました。

映しだされたのは廃屋になった病院です。

分かる人でしたら「Silent hill」の裏世界を思い出してくださればそれです。

飛んでくる虫などが3Dなので丸で目の前にいるみたいに……!

そこで小さな女の子が泣いています。

それを見ているとどんどん視点が下がっていって床に顔がつくぐらいになった時……

大きなハサミを持ったオバケが猛烈に走ってきてハサミで首を真っ二つにっ!!

その瞬間mの友達が

「きゃああああーーー!!」

という大絶叫とともに椅子からひっくり返る事案が発生っ!!

しかもひっくり返った勢いでmの股に頭ごと突っ込むという謎事態にッ!w

もちろん映画はとまりませんので友達が股のところできゃーきゃー言いながら、mがその友達の頭を太ももではさみながらひぃやーひぃやーと言っている……言うなれば阿鼻叫喚状態になっていました(核爆

…………

……

6分後。映画終了。

「……ぐすぐす……」

と友達泣いておりました(^-^;

 

気を取り直してカフェ!

元気を出そう!ということでマチアソビカフェにレッツゴーですw

マチアソビカフェでもごちうさとコラボをやっていて、各キャラの珈琲やお菓子を出しています。

f:id:m_training:20160327171403j:plain

mはもちろんチノちゃんを頼んで、友達がココア、リゼと言った感じ。

そしてこれがメニューに合ったのですよ!!

甘兎庵の黄金の鯱スペシャルっ!

f:id:m_training:20160327172035j:plain

抹茶に黒蜜、白玉、そしてたい焼きですっ!

ホラー映画で元気がなくなっていた友達も写真を撮りながら元気復活です!

その友達、嬉しそうにココアちゃんのココアを飲みながら鯱スペシャルを食べて

ココアを飲みながら鯱スペシャルを……

……

「あ、あ、あますぎて、も、もうむり……」

ですよね!(爆

このパフェをココアを飲みながら食べるのは無謀!

そんなわけでmもぱくぱくw(というか食べたかったw

友達と二人であーんしているところを写真に撮りつつ、大騒ぎしながら食べておりましたw

 

WEB拍手レス!

たくさんの拍手をありがとうございます!

毎度毎度、いろんな謎のことを書いているココTraffic Jamですが、これからもやっぱりいろんな謎のことを書き続けますw

もしお暇な時にでも、ちらりと遊びに来てくださるとmはとっても嬉しいですw

 

『ノベルゲームを作ろう』リリース!

ごきげんよう。

秘密く・だ・さ・いを歌っても誰もわかってくれないmです(何

むしろわかるほうがスゴイ気がします(核爆

 

3連休最終日は、窓辺で春の日差しを浴びながら紅茶を飲みながら本を読んでいました。

うららかな陽気と紅茶でのんびり。

幸せですw

 

土曜日はというと、新規オープンのカフェのお手伝いに行っていました!

売り子さんをやっておりまして風船を配ったりしていましたw

小さい子が前まで来て「ピンクのくださいっ」というのがむちゃくちゃ可愛かったのですw

 

『ノベルゲームを作ろう』リリース!

 

http://milk0824.sakura.ne.jp/web_maker/

f:id:m_training:20160321225615p:plain

 

 

簡単にノベルゲームが作れて、PCのブラウザはもちろんのこと、Android / iPhoneでもプレイが可能な「ノベルゲームを作ろう」をリリースいたしました!

パチパチパチ!

『お手軽にノベルゲームが作れる』

というのが売りですw

 

その昔TJでは『うぇぶげーメイカー』というものを作っていましたが、それのスマホ対応版です。

ずっと製作を止めていたのですが、BBSに書き込みがありまして再稼働しましたw

 

スマホでノベルゲームを簡単プレイ!

f:id:m_training:20160321225955p:plain

ノベルゲームはスマホでぽちぽちやりたいですよねw

そのようなわけでスマホにも対応です!

ブラウザで動きますのでAndroidはもちろんのこと、iPhoneでもプレイ可能です。

Androidは機種によって著しく重いときがあるのでここは要改善です(^-^;

 

サンプルゲームです。

※音が出るので要注意!!

f:id:m_training:20160321230316p:plain

佳奈多とNO!RYO!大会

http://milk0824.sakura.ne.jp/services/web_maker_ver2/little02.html

 

スクリプトも簡単!

f:id:m_training:20160321230420p:plain

スクリプトを書いたことがある人ならわかるかもしれませんが……

ノベルゲームのスクリプト(演出指示)を書くのってすごく大変なのです!

ほとんどプログラムですから(^-^;

 

なので「ノベルゲームを作ろう」では、日本語のまま簡単に書けるように工夫していますw

 

ちなみにサンプルゲームはこちらに大漁にございますw

小ネタ

http://milk0824.sakura.ne.jp/doukana/web/ss/koneta/index.php

 

WEB拍手レス!

たくさんの拍手をありがとうございます~!

サモンナイト6,やはりみなさん気になっているようですねw

>教えてくださった方

遊びに来てくださってありがとうございます!

はいっ、ごめんなさい><

ラグナ、ではなくマグナですよねっ><

ううう。うっかりでした……。

2ではトリスとネスにばかり気を取られておりまして、男主人公に全然かまってあげてなかったです(^-^;

サモンナイト6だと、ギアンとラージュが育てると強いキャラかと思いますよw

 

 

>田吾作さん

田吾作さん、いらっしゃいませー!

企画は特にそんな感じですよね。

手を動かさないで頭だけで考えようとするとまとまらなかったり、そもそも浮かばなかったり。

手を動かすと「おっ、これは……そうだ、こうすれば……おおおっ、これは!!」なんてなっていきますよねw

あれがまた楽しいです!

Official LINE Account
友だち追加
@hgf7288s