技術的な話題 に関する投稿を表示しています

GPU で動く Tensorflow をセットアップする

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

こんにちは。ごみばこです。

ちょっと思い立って、TensorflowをGPUで動かしたくなったので、その構築メモを残しておきます。

カンタンなまとめ

  • AWS EC2 で g2.2xlarge を スポットインスタンスで使った
  • Tensorflow の学習データを 60GB の付属するストレージに置いた
  • crontab と aws-cli を使って定期的に AWS S3 に学習データ(の一部)を転送した
  • tensorflow と tensorflow_gpu を間違えるとかなしい
  • 2日くらいで試行錯誤した成果は得られなかった

 

マシンの調達

ローカルPCでも NVIDIA なグラフィックが搭載されているので実行はできたのですが、せっかくなので AWS を利用することにしました。インスタンスタイプとしては g2.2xlarge を利用しています。さらに、せっかくなので スポットインスタンス を利用したのですが、ちょっと高めの金額設定をして、2日ほど安定して稼働できました。高めとはいえ、普通に EC2 のオンデマンドインスタンスを立てるよりも圧倒的に安くできています。

オンデマンドインスタンス: $0.898 / 1時間
(参考:https://aws.amazon.com/jp/ec2/pricing/on-demand/

スポットインスタンス: およそ $0.09 - $0.15 / 1時間
(参考:https://aws.amazon.com/jp/ec2/spot/pricing/

入札前に過去の金額を見ていると、なぜか ap-northeash-1a のリージョンだけ天井価格?まで跳ねることがあるようだったので ap-northeast-1c を利用しました。

 

スポットインスタンスならではの注意点ですが、データ消失の可能性があったので、実際に学習を進めてみたとき、中間データを S3 にファイルとして保存するようにしていました。仕組みとしては crontab を利用して aws-cli を実行する程度のカンタンなものになっています。

Tensorflow 自体が中間データを保存・読み込みできるので、非常に便利でした!(※実際には TFLearn を利用)

 

また g2.2xlarge ならでは…?かわからないのですが 60GB ほどのストレージが付属しています。このストレージはそのまますぐに利用することが出来るのですが、マシンを再起動したりするとデータが消失するので Tensorflow の中間データや、出て来るログや、前処理した後などの一時ファイル置き場として利用していました。

 

環境構築

Linux + GPU 周辺に知識があるわけでもないので、参考になりそうで、よさそうな記事を探して、それどおりに進めたところ、実に上手く行きました。

(参考:http://qiita.com/yukoba/items/3692f1cb677b2383c983

// 下準備
$ sudo apt update
$ sudo apt upgrade -y

$ wget http://developer.download.nvidia.com/compute/cuda/repos/ubuntu1604/x86_64/7fa2af80.pub
$ cat 7fa2af80.pub | sudo apt-key add -

$ wget http://developer.download.nvidia.com/compute/cuda/repos/ubuntu1604/x86_64/cuda-repo-ubuntu1604_8.0.44-1_amd64.deb
$ sudo dpkg -i cuda-repo-ubuntu1604_8.0.44-1_amd64.deb
$ sudo apt update

$ sudo apt install -y linux-generic
$ sudo apt install -y cuda nvidia-367
$ sudo reboot

$ sudo apt remove -y linux-virtual
$ sudo apt-get -y autoremove

$ rm 7fa2af80.pub cuda-repo-ubuntu1604_8.0.44-1_amd64.deb

// bashrcに追加
$ vi ~/.bashrc

export PATH="/usr/local/cuda-8.0/bin:$PATH"
export LD_LIBRARY_PATH="/usr/local/cuda-8.0/lib64:$LD_LIBRARY_PATH"

// 確認
$ nvidia-smi

// CuDNN の追加
//
// NVIDIA Developer に登録するとダウンロードできる
// https://developer.nvidia.com/
//
// ローカル PC でダウンロードして scp などで転送するとよい

$ tar xzf cudnn-8.0-linux-x64-v5.1.tgz
$ sudo cp -a cuda/lib64/ /usr/local/lib/
$ sudo cp -a cuda/include/ /usr/local/include/
$ sudo ldconfig

$ rm -R -f cuda cudnn-8.0-linux-x64-v5.1.tgz

// grub編集
// 12行目
sudo vi /etc/default/grub

GRUB_CMDLINE_LINUX="systemd.unit=multi-user.target"

$ sudo update-grub
$ sudo reboot

// 後処理
$ sudo apt-get clean

CuDNN をインストールするとき NVIDIA Developer に登録しなくてはいけなかったところがちょっとつまりかけたところです。登録するときいくつか分野?を選べるのですが、適当なものを選んでもダメで「Accelerated Computing with NVIDIA ComputeWorks」で登録する必要がありました。ここまで行くと nvidia 系のコマンドが利用できるようになり GPU の動作具合を確認することができます。

 

Python + Tensorflow の準備

こちらも Python に詳しいわけではないので、良さそうな記事をいくつか見ながら統合した結果で進めました。

// pip で入れる python ライブラリに必要なライブラリ、ツールを入れる
$ sudo apt-get install -y libpng-dev libjpeg-dev libhdf5-serial-dev libatlas-base-dev libopenblas-dev build-essential autoconf libtool pkg-config

// python3 を入れる
$ sudo apt-get install -y python3-pip

// aws-cli を入れる
$ sudo apt-get install -y awscli

// pip を更新する
$ sudo pip3 install -U pip

// 公式サイトを要確認し Tensorflow を入れる
// https://www.tensorflow.org/get_started/os_setup#pip_installation
$ sudo pip3 install -U https://storage.googleapis.com/tensorflow/linux/gpu/tensorflow_gpu-0.12.1-cp35-cp35m-linux_x86_64.whl

// 各種ライブラリを入れていく
// tflearn Tensorflow のラッパ。カンタンに Tensorflow を扱うことができるようになる。
// pandas  カンタンに csv を扱える
// Image   画像処理を行う
// h5py    Tensorflow が高速に動くために必要らしい
// scipy   科学技術計算ライブラリ。Tensorflow が高速に動くために必要らしい
$ sudo pip3 install -U tflearn
$ sudo pip3 install -U pandas
$ sudo pip3 install -U Image
$ sudo pip3 install -U h5py
$ sudo pip3 install -U scipy

// もう一度入れ直すと numpy が早くなるらしい...?未検証
$ sudo pip3 install -U --force-reinstall numpy

// g2.2xlarge の場合 60GB がついてくるのが /mnt
// ここにテンポラリを用意していく
$ sudo mkdir /mnt/tmp/

// 学習データの記録
$ sudo mkdir /mnt/tmp/checkpoint/

// Tensorflow が動作していく様子を web 上で確認できるようにするため
$ sudo mkdir /mnt/tmp/tensorboard/

// 全許可!
$ sudo chmod 777 -R /mnt/tmp/


// Tensorflow の動作確認
// GPUに関する出力がもりもりでてくるとOK
$ python3
> import tflearn

途中 Tensorflow を入れるところで、うっかり違うバージョンの Python 、 CuDNN の URL を指定すると動作しません。さらに GPU を利用しないバージョンをこれまたうっかり選んでしまうと CPU で動作する Tensorflow が入ってしまい GPU が使えません。pip3 list などで確認をしても Tensorflow としか出てこないのでどちらが入っているか確認するのがわかりづらく…。。

実際に import tensorflow とかを実施し、GPU 初期化したよ!という結果を見るのが一番でしょうか。

 

肝心の成果は…?

ここまでで、環境構築が出来たので、あとは MNIST のチュートリアルなどをすすめると、ディープラーニングの凄さ、GPU の凄さを体験できます。

ぼくはディープラーニングって何者?を体験したかったので MNIST チュートリアルをして、以前思いついていたレシートの判別(https://gomiba.co.in/blog/archives/587)をやってみてました。ニューラルネットワークやアルゴリズムがよく分からず、それっぽくニューラルネットワークを組んでみたのですが、思ったように loss が下がらず。。これはデータや組み方が悪いんだなーと思い、ディープラーニングむずかしいね、という結論でインスタンスを終了しました。

費用は2日間で $2 くらいでしたが何の成果もあげられませんでした!(もうちょっとがんばろう)

Regexp::Trie を PHP に移植した

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

こんにちは。ごみばこです。

packagist に公開してあるので composer require regexp-trie:dev-master とでもしたらすぐに使うことができます。

sters/regexp-trie - Packagist

 

use RegexpTrie\RegexpTrie;

$regexpTrie = RegexpTrie::union([
    'C','C#','C++','Clojure','CoffeeScript','CommonLisp',
    'Java','JavaScript','JScript','J#','JSX',
    'Perl','PHP','PostScript','PowerShell','Python',
]);

var_dump($regexpTrie->toRegexp());
// =>
//     /(?:C(?:(?:\+\+|lojure|o(?:ffeeScript|mmonLisp)|#))?|J(?:ava(?:Script)?|S(?:cript|X)|#)|P(?:erl|HP|o(?:stScript|werShell)|ython))/

これは正規表現において Wikipedia や はてなキーワード のような、多数のキーワードを同時に処理しようとすると、選択が多数になるものができあがり、非常にパフォーマンスが悪いものを、トライ木を使って解決するためのものです。

元ネタはこのあたり。

このトライ木による正規表現の生成ですが、ご覧のとおり Perl や Ruby ではすでに作られているようで PHP には特に見当たらなかったので Ruby のものから翻訳してみました。( Perl のソースはちょっと分からないところだらけ過ぎてつらかったので… )

追)PHP には特に見当たらなかったと思っていたのですが packagist を見たらそれっぽいものがありました。。

s9e/regexp-builder - Packagist

ちゃんと実装を追っていないのですが Regexp::Asemble っぽい挙動をしているような…?

最近 paiza やってる

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

強い転職意識があるとかそういうわけじゃないんだけど、スキルチェックがてら、どんな会社があるのかなあと思いぼちぼちとやりながら会社の様子を見ている。たまに見知った会社が出てきて、金額これくらいかーとか、うまく見せてるなーとか、勉強になることが多い。社会を知ろう。

 

paiza とは

ITプログラマー・エンジニア転職のpaiza https://paiza.jp/

いわゆる Top Coder 的な、アルゴリズムな問題が出されるので、好きな言語で解いたものを提出すると自動で採点がされる。それによって自分のランクが決まり、会社からのオファーを受ける、会社にオファーできる。自分の希望もかけるので、しっかりとした面接が良いとか、カジュアル面談とか、選べるっぽい。また業態や言語なども選べ、自分の希望に近い会社からのオファーが来やすそう。

逆に企業側としては、書いているコードが見れるので、その人がどれくらい慣れているのか、どんなコードを書くのか、といったところを見られる模様。

そういったエンジニア転職コンテンツを活用しつつ、よりユーザ確保を狙ってだと思うが、「コードガールこれくしょん」とか「もし次の常駐先が女子エンジニアばかりだったら」という美少女キャラ推しなコンテンツも増えてきている。ぼくはあまりそっち方面に興味は沸いておらずやってはいないのだが。

 

paiza でコードのどんなところが見られるのか

ぼくの場合、こういったところのコードって業務コードと異なるものを書いてしまう。自分が出せる最速の最善策で出していくので、業務としてはそのコードだめじゃね?とか、半ば強引にやっているような箇所があったりすることも多い。

といったときに、企業側の人はそんなコードを見てどんなことを知ろうとしているのかなーとか、単純に気になる。気になるが、転職意識も強くはないので、カジュアル面談に行くことも申し訳ないなあと思っている次第。

もしかしたらぼくの場合がそうであるだけで、ガチで paiza を使う人たちは圧倒的な業務コードを書いているのだろうか。どなたかこっそりおしえてください。

 

というわけで paiza 楽しいよ

いうても競技系のサービスであることに変わりはなく。

そこに合わせて、企業からのスカウトが来たり、点数が出たり、ランキングが出たり、実績というか、凄いんだぞ!!!感が見えるあたりがとても楽しい。それもそうだし、ランク別に問題レベルが分かれていて、自分のレベルにあったチャレンジをしていけるところもあって、チャレンジした問題のランクと回答時間を眺めて、スキルアップしていってるなあというのを実感するのが一番良いと思っている。なので、ぼくは C ランク全部!とかじゃなくて、まばらにポチポチやっています。

あ、オファーについては企業の人たちにはごめんなさいしないといけないですね。

ちなみにぼくはいま、B ランク問題は安定して正解取れていて、A ランク問題が1勝3負くらい。S ランク問題も1つやったところ不正解だったけど、なんだかちょっと頑張ったらいけそうな気がしていて、次にやる時間を取ることをしみにしているところです。なお PHP で。 ある程度いくとこまで行ったら別の言語でもトライしたいなーと思ってます。

 

 

paiza の宣伝記事みたくなってしまったけど、paiza の人ではないし、宣伝してくれ!ってわけでもないよ。

Web Audio API と IBM Bluemix のワトソン君で音声認識(追記あり)

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

こんにちはごみばこです。

この記事はteratailの「Bluemixアドベントカレンダー」の参加記事として書かれました。

昨日は yutori_828 さんによる「クラウドx IoT女子会で推し(二次元)の話をしてきた」でした。
クラウドx IoT女子会で推し(二次元)の話をしてきた – ユニバーサルIoT女子文明

やりたいこと

最近いろいろな人と話すことが多く、手書きなりPCなりスマホなりでメモしているものの、すべてメモしているわけではありませんし、覚えていないことも多くあります。じゃあお手軽にメモするソリューションないかなあというところで、パッと思い浮かんだのが録音×音声認識です。

スマホで録音しつつ、音声認識しつつ、クラウド上にメモすることができれば最高なのでは…?

こんなところから始まっています。

できたもの

こんなかんじのやつ。

watson_audio

※編集していません。クリックしてからしゃべっています。
※5秒録音→文字起こし→5秒録音→文字起こし→... という処理になっています。

使ったもの

IBM Bluemix

アドベントカレンダーのテーマにもなっている、IBMが提供するAPIやPaaSといったサービスの総称です。

簡単に登録手順をおさらいしておきます。

Bluemix への登録

bluemix_register

以下の URL から Bluemix への登録ができます。

https://console.ng.bluemix.net/registration/

僕の場合は IBM ID を登録してから Bluemix をしましたが、Bluemix だけの登録もできるようです。

登録するとメール認証が求められます。メールからリンクを踏むと登録完了です。ここから30日間はトライアルということで無料で Bluemix のすべて(?)の機能を使うことができます。思う存分に楽しみましょう!

アプリケーションの登録

Bluemix では Cloud Foundry アプリ と呼ばれる、heroku のような、環境が整っていてコードを自由に設置することができる、PaaS を利用することで、Web サイトを制作することができます。

Cloud Foundry アプリは以下のような手順で登録していきます。

アプリケーションの画面を開いて新規追加。

bluemix_app

テンプレートが選べるので使いたいものを選びます。僕はPHPを選択しています。

bluemix_app_template

あとは勝手に環境が作られ、アプリケーションが動き始めます。すごい。

bluemix_app_run

この画面上で「アプリの表示」を押すと、ブラウザでその Cloud Foundry アプリの URL が開かれます。この URL で確認をしていくことになります。

IBM Bluemix Watson

IBM Bluemix には Watson という人工知能なAPI群があります。この中に Speech to Text という音声認識を行うことのできるAPIがあります。ここに対して、音声データを送ることで、Watsonが解析し、最適な文章を取得することができます。

Watson のすごいポイントは、英語だけでなく、日本語にも対応し、さらに漢字変換もされているところです。

中身に詳しいわけではありませんが、いくつか結果を見ての推測ですが、音声をある程度区切り区切りにし、それぞれに対する適切な文章を機械学習なもので割り出しているようです。その文章はすでに漢字変換されているものなので、変換されている文章が取得できるのでは?と思っています。さらに出来上がった文章の前後関係を見て、補正し、最終的により整合性の高そうな文章を提供している……のかなあ、なんて。

Watsonを利用するには、まず、Bluemix上でWatsonを接続する必要があります。

アプリケーションを開いたとき、サイドメニューに「接続」があります。これを開くと次のような画面が開き、接続したサービスの一覧が表示されます。

bluemix_app_connect

新規接続を選び、画面をよしなに進めていくと、Watson を選べる画面になります。ここでは Speech to Text を選択しました。
ほかにもたくさんサービスがあって面白そうですね;)

bluemix_app_connect2

そうすると、先ほどの接続したサービス一覧に出てくるようになり、認証情報を得ることができます。

bluemix_app_connect3

認証情報に書かれている情報をもって以下のようなAPIを実行することになります。


※Speech to Text の例

■HTTP リクエスト
○URL
https://stream.watsonplatform.net/speech-to-text/api/v1/recognize?continuous=true&model=ja-JP_BroadbandModel

○HTTP ヘッダ
Authorization: Basic {base64_encode("username:password")}
Content-Type: {audio content type}

※ HTTP ヘッダの例
Authorization: Basic dGVzdDp0ZXN0
Content-Type: audio/wav

○HTTP メソッド
POST


■HTTP レスポンスの例
{
  "results": [
    {
      "alternatives": [
        {
          "confidence": 0.106,
          "transcript": "うん "
        }
      ],
      "final": true
    },
    {
      "alternatives": [
        {
          "confidence": 0.32,
          "transcript": "看板 見る "
        }
      ],
      "final": true
    }
  ],
  "result_index": 0
}

API詳細な説明については公式ドキュメントを見るとよいでしょう。

Speech to Text - API | IBM Watson Developer Cloud

Web Audio API と MediaStream Processing API

録音の部分では、スマホで、という想定ではありますが、やはり世界はWebに集約されるよう動いている(?)ので、ここはWebの資産を利用しましょう。

Web Audio APIを利用すると、音声に関する取り扱いを行うことができます。
そこに合わせて MediaStream Processing API を利用することで、ブラウザのみで動画や音声の記録ができます。

組み合わせることで、録音したデータをバイナリとして取得することができます。

作業していて、ちょっとだけ詰まったのですが、Chrome ではいつからか https な URL でないと Web Audio API を利用することができませんでした。音も隠さないといけない情報なので、というところだと思います。録音して外に送るってときに、パスワードとか個人情報とか社内機密をしゃべっているようなデータを http で送るとかめっちゃ怖いですよね…笑

詳しい仕様や実装などは僕もあまり詳しくないので、詳細はこちらの記事を参考にしました。

Media Capture and Streams と Web Audio API で実現する録画・録音・ WAVファイルの生成 | CYOKODOG

IBM Bluemix DevOps Services

Bluemix に初めて登録して、アプリケーションを登録したところで、いろいろ眺めていたのですが、 heroku のような、PaaSの触感がありました。

コードをデプロイするにはCLIを入れてね!なんて書いてあったのですが、ちょっとローカルPCにあれこれ入れるのは避けたいなあと思い、ひとまずなるべく手をかけずに…。

と思っていたら、Git からデプロイできるそうなので、そちらを試してみました。リモートリポジトリが提供されて、ローカルのコードを Push したらデプロイされる、といったものを想像していたのですが、それだけの機能ではありませんでした。

アプリケーションの Git を有効化すると「コードの編集」というボタンが現れます。

まさか、と思い押してみると、そこにはかっこいいオンラインエディタが…!

bluemix_web_editor

この中では、コードの編集はもちろんのこと、Gitの操作も行うことができます。そして何より、編集して、そのままデプロイができます。これにより、とりあえずBluemixを試す、という動きをサクサク行っていくことができました。

bluemix_web_editor2

まとめ

結果として出来上がったものは、微妙な精度ではあるものの、IBM Bluemix を初めて触ってみて、便利そうなところを体感するには十分でした。

ばーーーっと書いてみた程度のものですが、gistに貼ってあります。試してみたい方はどうぞ!

https://gist.github.com/sters/46e042e5976b6244119baaf26b096e82

登録してから30日間は無料で使えるので、もうしばらく無料枠の間に遊んでみようと思います。Speech to Text 以外の Watson API も、画像認識を始め言語に関するものなど、楽しそうなものが多いので、あんなものやこんなものが作れるんじゃないだろうか、なんて思っています。

追記:ドキュメントを眺めていたら WebSocket をつなげるそうなので、それを使えるとさらに良いかも…!

明日以降もお楽しみに! -> Bluemixアドベントカレンダー

フォント変えたよ

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

普段見慣れない、なんだかでこぼこしたフォントだったのでよさそうなやつを指定しておいた。

調べると「2016年最強のフォント指定はこれだ!」「俺が考えたイマドキのフォント指定」みたいな記事ばかりでなかなか面白さがある。

だいたい同じなんだけども。

いじょ。(やまなしおちなし)

レシートの文字判別した捗るんじゃないのって思った

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

MNISTで手書きの数字認識できるじゃないっすか

あれをこう広げていって、レシートの写真を撮ると自動で項目と値段を割り振ってくれるような何かとかあったらスゲー面白いと思うんですよ

 

え?

 

ああ、そうですね、クラウドソーシングでレシート入力しているソリューションとかありますよね、知ってる知ってる

そういうアプリあるよねわかるわかる。

 

でもそれだと時間差あるじゃないですか。

それになんだかこう、他人に見られるわけじゃないですか、なんかこう嫌な人いるんじゃないですかね、きっと。

いや、わかんないですけど

 

というわけで、話題の「人工知能」と掛け合わせるんですよ、バカウケ間違いなしツールになりそう(適当)

 

「人工知能を使ってあなたのレシートを解析し、いつどこで何を購入したのか、自動で家計簿をつけてくれます」

「人工知能がお買い物や節約、出費に関するアドバイスを提供してくれます」

やばそう。

 

とりあえずトイレに籠ってレシート眺めてどうしたらいけそうか考えてたけど、思った以上にレシートの文字列って大きさバラバラすぎて辛いなーって思った。ので誰か任せた。

Dropbox の Public なフォルダで Web ページのホスティングができなくなって

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

タイトルどおりです。

ちょっと前までできていたのですが、最近できなくなったようです。

Dropbox で簡単に自分のサイトを作ろう!みたいな記事も一時期はやっていましたが、今やそれらも全滅ですねきっと。

ごみばこいんでも、ヘッダーメニューの「倉庫」は Dropbox の Public フォルダを利用していたのですが、だめになってしまったので、いったんメニューから消しておきました。まあ、大したものはないのでいいのですが…。あ、 Unity のものなんかはたまに見せたりするので、見えるようにしないとダメかなあ…。

 

でもって、解決方法あるのかと思ってしまったので、ググってみたらこんなものが。

https://www.reddit.com/r/webhosting/comments/55qye7/dropbox_html_alternative/

要するに

・Dropbox は HTML のレンダリングをやめたよ  (←レンダリング…??)
https://htmldrop.com/ とかっていう外部サービスを使うといいよ!
・いやいや Github Pages なら無料だしこっち使おうぜ!

▼2017/10/06追記

htmldrop というサービスは終了してしまったようです…?

代わりになりそうなのを見つけたのでここへ> BoxHop - Website hosting with Dropbox

▲追記ここまで

と、いうことらしいです。

まあ、とりあえずごみばこいんの倉庫ページは消えたままでいいや。

最近のやったこと

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

機械学習してる気持ちになっている

雑にTensorflowからこの世界に入門したけど、わからなさすぎたので
Python+scikit-learnから出直そうとしている。

https://www.tensorflow.org/

http://scikit-learn.org/stable/

そしてこのあたりを読んだ。

[amazonjs asin="4873116988" locale="JP" title="実践 機械学習システム"]

[amazonjs asin="B01HGIPIAK" locale="JP" title="Python機械学習プログラミング 達人データサイエンティストによる理論と実践 impress top gearシリーズ"]

用語や仕組みがわかってきたので、一段と楽しくなってきた。

機械学習すげーーーーーー

 

AWSぽちぽちしてる

某所でLINEBOTやろうぜ!みたいな話になって、環境用意することになった。
Terraformを使いたかったので、いい感じに使ってAWSぽちぽちした。

TerraformでAPIGatewayとEC2をもりもり立てて、Itamaeでプロビジョニングした。

https://www.terraform.io/

http://itamae.kitchen/

これがめっちゃ楽しすぎて、LINEBOTの記憶がない…。

 

 

エンジニアってたのしいなー

ぼくのぼくによるぼくのためのマークダウンエディタを作ってるところだからちょっと待って

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

こんにちは、ごみばこです。

世の中にはさまざまなマークダウンエディタがあります。

そして、ふつうのエディタにも、プラグインとしてマークダウン機能を搭載することができるものも多々あります。

しかし、どれも自分のほしい機能が整っていないので、自分で作る事にしました。
地産地消!!(違)

ほしい機能としては、こんなところでしょうか……。

  • 画面が2分割されてエディタとプレビューが並べて見れる
    • いま編集している箇所までいい感じにスクロールしてくれる
  • azuさんのtextlint(http://textlint.github.io/)による文字列のlintをしたい
    • ルールを状況によって切り替えたり変更したりしたい
    • 怒られているポイントをハイライトしてほしい
  • "プロジェクト"で縛られず、自由にファイルを開け閉めしたい
    • ※atomはこれでNG
  • タブにしたい
  • 整形されたHTMLをコピーしたい
  • emojiも使いたい
  • 軽快に動いてくれる

イメージはkobitoがすごい近いです。あれにtextlintが乗った感じです。
http://kobito.qiita.com/win

というところで、Electronでさくさく作ってます。で、エディタっぽい動きまではできました☆
デザインも細かい機能もさっぱりや……、というわけで、これからブラッシュアップですね!><

ここまでできている

ちょっと時間がとれてなさ過ぎてアレなんですけど、もうちょっと出来上がってきたら、いろいろ出していきますかねー。

それではまたー

話題のLINE BOTでちょっとだけ遊んでみた

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

目次

  • ムムッ!8秒に1人登録者が増えるんです!
  • 実装について
  • SSLが通らない
  • API Gatewayの設定を間違える
  • でばっぐがむづかしい
  • 画像サイズ制限
  • 構成上の問題
  • おわりに

Qiitaやはてブでよく見るほどに巷で話題のLINE BOTですが、私も参戦してみました。

BOT API Trial Accountのご紹介 | LINE BUSINESS CENTER

ムムッ!8秒に1人登録者が増えるんです!

できたbotがこちらです。
13000133_1058043724268365_4544060361943443361_n

顔写真を送るとムムッなカードを結合して送り返してくれます。

ちゃんと複数人も認識してます。

1460689208363

(社内の人に協力してもらいました。ありがとうございます!)

出来たこのbotを公開したい気持ちはやまやまですが、ムムッな版権や、アーキテクチャやら実装の問題もあってちょっとNGです。

コードなら公開できるので、またのちほど。。

実装について

LINE BOTのコールバックとして、画像の場合はテキストとは異なるデータがやってきます。
そのとき、LINE側に対してメッセージIDでリクエストをすると、そのデータに紐づくコンテンツ(画像、動画、スタンプ…)を受け取ることができます。
(詳細はドキュメント参照: LINE Developers - BOT API - API reference

こうして受け取った画像をそのまま顔認識に送っています。この部分には、Face++というサービスを利用しています。

Face++: Leading Face Recognition on Cloud

戻ってきた情報には、顔の位置を始め、目の位置や口の位置、さらには表情データなども含まれています。
この顔の位置、目の位置を計算し、カードの画像に対してサイズ調整・回転を施して、合成しています。

出来上がった画像を、LINEに送信することで、BOTのレスポンスになります。


はてさて、参戦していくなかで、初めてやることだらけで非常にわくわくするとともに、
すごい詰まったことがいくつかあったので、それらを書き綴っておきます。

SSLが通らない

LINE BOTには、コールバックとしてSSLなURLを指定しなければいけません。
しかし、すでに各所で話題に上がっているように、Let’s Encryptでは通信の確立がうまくできないいようです。

そこで、今回はAWSのAPI Gatewayを利用してみることにしました。

Amazon API Gateway (API を容易に作成・管理) | AWS

「ひとまず試してみる」というこで構成としては以下のようになっています。

<span class="hljs-constant">LINE </span>-> <span class="hljs-constant">AWS API Gateway </span>-> <span class="hljs-constant">VPS </span>-> <span class="hljs-constant">LINE</span>

API Gatewayの設定を間違える

これは完全にうっかりミスです。

LINE BOTのコールバックはPOSTメソッドで飛んでくるのですが、GETメソッドしかAPI Gatewayに登録してなくて、数時間を無駄にしました。。ちゃんとドキュメントを読もう!

また、API Gatewayでは指定したHTTPヘッダがプロキシされていくので、シグネチャについても指定しないといけません。

でばっぐがむづかしい

LINEでメッセージや画像を送ってはサーバのログをみて、という結構無駄な開発作業をしていました。

よくよく考えれば、メッセージやりとり部分は後で繋ぐようにし、コアな処理を別に実装したほうがよいですきっと。
メッセージやりとりをあとで繋ぐようにすることで、LINE以外にも各種bot系に組み込むことも簡単にできると思います。
そしてテストも書きやすくなるので…。。

画像サイズ制限

これもドキュメント読もう案件です。。

LINEにメッセージを送る際、画像はJPEG限定、1024px x 1024px以下にしないといけないようです。
また、プレビュー用の画像を用意する必要があり、こちらもJPEG、240px x 240px以下にしないといけません。

どちらの画像もURLとしてアクセスできる場所に設置し、そのURLをLINEに伝えることでbotが送信してくれます。

構成上の問題

いまはお試しということで、コールバックへのリクエストが来たら、メッセージを送信を含むすべての処理をしています。しかし、この方法では、人が増えてきたときにサーバ負荷が上がり、快適なレスポンスが得られなくなってしまいます。
(※現状でも顔認識や画像処理でラグがあるので快適とそうでないのぎりぎりくらいです。。)

どうすれば快適なレスポンスが得られるかについては、すごい分かりやすく深い記事が上がっています。

大量メッセージが来ても安心なLINE BOTサーバのアーキテクチャ - Qiita

今の構成は以下のようになっています。

<span class="hljs-constant">LINE </span>-> <span class="hljs-constant">AWS API Gateway </span>-> <span class="hljs-constant">VPS </span>-> <span class="hljs-constant">LINE</span>

これを・・・例えばこう、えいやっと・・・

<span class="hljs-constant">Callback </span>     <span class="hljs-symbol">:</span> <span class="hljs-constant">LINE </span>-> <span class="hljs-constant">AWS API Gateway </span>-> <span class="hljs-constant">AWS Lambda </span>-> <span class="hljs-constant">AWS SNS </span>-> <span class="hljs-constant">AWS SQS</span>
<span class="hljs-constant">Execute Batch </span><span class="hljs-symbol">:</span> <span class="hljs-constant">AWS SQS </span>-> <span class="hljs-constant">AWS Lambda </span>-> <span class="hljs-constant">Another API </span>-> <span class="hljs-constant">AWS SNS </span>-> <span class="hljs-constant">AWS SQS</span>
<span class="hljs-constant">Response Batch:</span> <span class="hljs-constant">AWS SQS </span>-> <span class="hljs-constant">AWS Lambda </span>-> <span class="hljs-constant">LINE</span>

うーん、どうなんでしょうかね…w

あとは記事に書かれているように、メッセージに対する並列処理をできるようにすると、快適なレスポンスが得られるようになってくるのかなあ、と思います。


おわりに

Facebookもメッセンジャーbotやるよ!と発表があったように、botの波が来ています。

みなさんが開発したり運営しているようなWebサービスであったり、流行りつつあるIoT、TensorFlowといった機械学習、などなどなどに加えたメッセンジャー系botのコラボは、きっと新たなユーザー獲得やユーザー体験をもたらすと思います。

まずは触ってみて、どんなことができそうかを考えていくときっと楽しいとおもいます!

1 2 3 4 5 6 7 8 9 10 11 12 13