Posted Category プログラミング

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

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

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

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

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

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

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

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

ここまでできている

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

それではまたー

Posted Category プログラミング

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

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

LINE -> AWS API Gateway -> VPS -> LINE

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

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

LINE -> AWS API Gateway -> VPS -> LINE

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

Callback      : LINE -> AWS API Gateway -> AWS Lambda -> AWS SNS -> AWS SQS
Execute Batch : AWS SQS -> AWS Lambda -> Another API -> AWS SNS -> AWS SQS
Response Batch: AWS SQS -> AWS Lambda -> LINE

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

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


おわりに

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

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

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

Posted Category 生活

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

 

先日より、左手に装備品が増えました。あれです、アレ。

そう、ソレだよソレ!よくわかってるじゃん!

 

ソレは素敵な職人さんがヒアリングから作ってくれるお店でおねがいしました。

貴金属以外にも、財布やカバンなどの革製品を作っていたり、
お店の設備も自分たちで一部やっていたりなど、細かいとこまでコダワリが強かったです。

 

おなじ職人同士、どこか感じるところもあり、あまり迷うところもなく、
ぼくにしてはなかなか即決だったかと思います。

 

肝心のモノですが、外側は唐草模様です。
ちょっとわがままを言って内側に"マーク"もいれてもらっています。

 

装備すると実感がわいてきますね~ _(´ω`_)⌒)

 

と、いうことで、ぼくに遭遇した折には左手にも注目いただきたく思います。

今後ともよろしくお願いします。

 

 

追記)
公式な発表(?)はまたそのうちします、さようならー

 

Posted Category 生活

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

入社からいまのいままでは(非公式)なものをよしなにしていました。

JSオジサンとか、PHPオジサンとか、あるいは、ウェッブエンジニャー(=^・ω・^=)とか。
ついったーぷろふぃーるだと、「さまよう うぇっぶ えんじにゃー ฅ^._.^ฅ」とか書いてましたね。

…どちらかというと肩書というよりは、職種というか、そんなでした。

今年からちゃんとした肩書を装備することになりました。

ごみばこさんはごみばこさんなので、特に出していくつもりはないので、顔本でも訪ねてください(適当
各種もろもろで本名プレイしたときに付属してくることでしょう。

よーは、肩書を装備することになって、それ相応の火力を出していかないといけないんだよなーとびびってる、というお話にしたかっただけでした。完

あ、誕生日は3月なのでよろしくお願いしますね!!!!

Posted Category イベントとか, プログラミング

JSオジサン#6 2日目 で喋っていました。


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

最近はLaravelオジサン…ですかね。たーまーにJSオジサンしてます。
…いやいや、年齢的にはまだまだオジサンじゃなくて、お兄さんですよ。

JSオジサン#6 2日目

満員御礼!! JSオジサン #6 「まさかの3日間連続開催だよ!」2日目
https://atnd.org/events/71990

今回のJSオジサンも21cafeさんでの開催です。
いつもありがとうございます!そこそこキャパが広くて、スライドも見やすくて、立地もよし。快適環境です!

さて、今回のJSオジサンでは、言ってしまえば勉強会駆動開発のような「せっかくだから」精神で登壇者側に参戦しました。

せっかくチャンスがあるから。
せっかくElectronやってみたかったから。

せっかくだから作ってみた系の話をしました。

すこし解説をいれます。

ハイテンションキャラ

LT5分だし、Electron超感動したし、実際ほんとすごいから、
ハイテンションキャラで「サイコー感」を出していこう。

という思いのもとで、こういうスライドに仕上げました。
普段からこんなじゃないですよ!!!!!

偶然にも、ハイテンションノリが他の人と被っておらず、「Electron」という流行ネタも被らず、
いい感じに印象づけはできたのかなと思っていたりします。

社内ツール1

「なんとかかんとかーベイ」ってサービスの管理画面が、Flash製でもっさりでつらい。
というところから来ています。

当初はブックマークレット超がんばっていたのですが、人によっては動く動かないとかで、
こまめな対応や更新が面倒になってしまったので、いっそElectronでつくったろか、と。

いうのは実は後付けで、作ったのは一年前?とか、かなり前になります。
当時はnode-webkitを使って作ったのですが、「まあ、だいたいイメージ一緒だし…」というノリで入れました。

このときnode-webkitを触って、なんだかいい感じ!なんだけどなんだかなあ…
という気持ちがあったので、ここにきてElectronいい感じ!!という話を聞いてずっとやりたいと思っていたのでベストタイミングですね。

社内ツール2

Confuluenceのクライアントアプリです。

Qiitaで見かける、チャットワーククライアントアプリと同じように、
「webviewタグ」を使って、いわゆるガワネイティブと呼ばれる仕上がりにしています。

APIなんかも提供されているので、Confuluence内の色んなデータをばっさばっさ取れて、フルに画面を構築することも可能でしょう。ただGET系のリクエストは、JIRAやBitbucketなど、別のAtlassian製品を使ってると、そっちの情報が降ってきたり、 混在していたりすることもある(主にActivityStream)ので、扱いには気を付けないといけないこともあるかと思います。
オンプレの場合はちょっとわからないです…。ヘーシャはクラウドの方を利用しているので…。

そして、もしかしたら「最強のConfuluenceクライアント戦争」の到来…!?
参考:最強のTwitterクライアント戦争情報( http://r7kamura.hatenablog.com/entry/2015/08/25/154846


さてさてガワネイティブをしたとき、イケてない中身とかほしい機能を付けるためにもあれこれいじくりたくなりますよね?

ただ、Electronでは、Electronアプリを動かすプロセス、ウィンドウのプロセス、webviewのプロセス、といった具合に、それぞれの画面(?)は簡単にはつながっていないのです。
そんなとき、IPCと呼ばれるプロセス間通信の機能を使うことで…

うーん、長くなりそう…。このあとはまたどこかで書きます。


ツール2のConfuluenceクライアントアプリについては、、いかんせん急ごしらえな部分がおおく、正直見せられるようなものではない残念施構成なのでうーん。

そのうち、またElectronの話を書きます。
感動したので熱はしばらく冷めないことでしょう。

それではまたー(*'ω'*)


ア!1日目も参加者だったので、また参加レポあげます!!!

Posted Category イベントとか, プログラミング

ピクシブさんにて、土日通しの泊まり込みハッカソンでした。

途中でちょこっと寝てしまったようですが、ほぼほぼ完走しました。

(ただし成果がついてきているとは言っていない)

ありがとうピクシブさん。
ありがとうゲヒルンさん。
ありがとうオプティムさん。

Read more »

Posted Category 未分類

どーも4ヶ月ぶりになってしまったようです。

今年は更新頑張るぞー!なんていって早6ヶ月、まったくすすんでねーじゃん…!

いろいろあったりなかったりなので、まあまあ随時書いていくとして、一旦まとめましょうか。

  • 親御さんと夜ご飯食べました

    ドーモ、オツキアイサセテイタダイテマス。っていう会でした。

  • 事実上のスノボデートへ行きました

    12人くらいのグループで行ったんですけど、滑っている間はほぼずっと二人きりでした。

  • 富士急へ行きました

    二人でいくはじめてのお泊りデート。ほうとうが美味しかったのと、ガラス細工楽しかったです。素敵なオルゴールもよかったですねアレ。

  • ウチの父親とパスタランチ行きました

    ドーモ、オツキアイサセテイタダイテマス。っていう会でした。(その2)

  • 江ノ島へ行きました

    毎年彼女が行っているとのことで付いて行きました。猫と戯れるすばらしい一日でした。

  • 同居が始まりました

    いろんなものがマージされて、なんか、こう、すごいコスト抑えられている感があります。

 

充実した日々ダナー( ´ ω ` )

Posted Category 未分類

おひさしぶりです。ごみばこです。

新年あけていました。 今年もよろしくお願いします。

 

いやー、それにしても昨年はお楽しみでしたね!

昨年をさっくりまとめようと、twilogみたものの、イベントごとが多すぎて何をピックアップしたらいいのやら…

そして、ブログに書いてないことも、twitpicに巻き込まれて死んだ写真も、なんならツイッターにも顔本にも載せていないことが、たくさんたくさんあります。

ので!今年はブログやごみばこいんをよく更新する年にしたいなーとおもいました。

 

ちょっと前に、ごみばこいんのマルチプレイまだっすかーって煽られたのでそれからですかねー。。

すこしだけできています。すこしだけ。。 トップページに新機能を付けたいって話

 

がんばります。

Posted Category イベントとか

ドーモ、ごみばこです。

私立・プログラミングキャンプ 2014 東京大会
https://atnd.org/events/52713

こんなものに参加していました。
スタッフ側だったようです。

  が!9時集合なのに9時に起きて10時着という大失態。。
  ごめんなさいごめんなさい。。。

参加者みなさま、スタッフかたがた、お疲れ様でした!

会場提供してくださった オプティム さん。
ピザ提供してくださった ゲヒルン さん。
ありがとうございます!最高!!

Read more »

Posted Category 未分類

さってー。ひさびさにアナリティクスでもみてみっかー☆

いやさすがに、弱小だけどちょいちょいアクセス来てたし0ってことは…。
つーか、5月のハッカソンやったときとかそれなりに来たはず……えー……

 

 

 

 

 

 

まてまて、アクセスログはそれなりに残ってるのでは。

.

はい(真顔)

 

11日から気づいていたけど改めて確認したってワケです。

なんでしょうね。
サーバを移動したときにミスったとか、パフォーマンスあげようぜウェイってやったときにミスったか、くらいしか思いつかないですね。