2017-02-03

Riot.js 勉強会2回目を開催してネタ作りで仕事を頑張った話


Riot.js 勉強会の第2回を開催してきました!

Riot.js 勉強会 @Tokyo #2 

今回も盛況で、参加枠の100名は一瞬で埋まってしまい、参加できなかった方もいらっしゃるくらい注目度がある良いイベントを開催できて嬉しいです!参加して頂いた皆様ありがとうございます!!

当日の様子

今回もriot.jsコアコミッターのcognitomさんに公式発表な基調講演みたいなお話をして頂いたのと、1回目で発表した人は下がってどんどん新しい人に登壇してもらおうという意図で新たに2名発表して頂きました。


会社後輩のいまけいのデータバインディング話は皆に知ってもらいたい良い発表だったし、room03さんのサーバーレスな話も皆気にしないとダメなサーバー構成のお話で良かったし、cognitomさんの発表はriot.jsの便利な周辺ツールやv4で更に良くなる実装についてワクワクするお話をして頂けました。

勉強会用に用意して貰った🍣

LT では僕を含めた4名が発表して頂けました。チーム開発でスクラムに上手くRiot.jsを組み込んだ話や、僕のv2からv3へのマイグレーション芸、あとで聞いたんですが未踏プロジェクトに採択されてる案件の発表や、導入に向いてるかどうかの線引きの仕方の話等をして頂けました!

楽しかったし、少ない情報交換の場としてとても役に立つ良い場を作れたので今後も引き続き開催したいと思います!!


LTのネタ作りドリブンで仕事を頑張った

今回はAMESTAGEで使っているRiot.jsのバージョンが古かったので、パフォーマンス改善など良いこと盛りだくさんの新しいバージョンにマイグレーションするというネタを思いついて期限付きの大変な発表をしようと頑張ってみました。



発表資料はこんな感じの手書き表紙を作ってみました☺
内容ですが、THEノンフィクションの実際にぶつかったエラーや修正していてとても気持ちよくなった新バージョンでの実装について正直な感想を書いています。

この改修でAMESTAGEにもたくさんのメリットがありました。

・TOPページの表示速度がザックリ1/4に短縮された
・タグのライフサイクルが改善されたおかげで全体的な動作が安定した
・イベント周りが改善したおかげで放送中のコーナーやギフト送信のパフォーマンスが格段に向上した

全体的にかなりサクサク動くようになったし、コードも書きやすくキレイになったのでとても気持ちよかったです。

上記スライドについての細かい話は別途ブログに書けたらなぁと思ってたりしますが、同じ問題にぶつかったりして困った方はお気軽にTwitterや Riot.jsのslack で 79yuuki までご連絡ください!

次のネタ作りは HMR (hot module replacement) 的なことが出来る riot/hot-reload でもスタイルガイドに導入してみようかなぁ。(フラグ)

2017-01-13

ストウブ鍋とスモークチップで手軽に燻製出来て僕は今幸せです

友人夫婦がこんなことをやってて大変けしからん!と思ってたらどんどん煽ってきて


とか

とか、バンド組もうぜ!くらい気軽にスゴイ飯テロしてくるものだから、ストウブ鍋を買ったのに持て余していたし燻製ができるのを思い出したので、ついカッとなって次の瞬間にはウッドチップと網を買っていました。


あとストウブ鍋というのは密閉性の高い重たいお鍋です。ご飯が炊けたり、スペアリブが作れたり、今回みたいな燻製をやっても煙がほぼもれない(お線香より少ない)くらいしっかりした有名なお鍋です。


こういう料理ができるそうなので、燻製以外の用途でも買っても重宝するかと!(僕は持て余してたけどw)「STAUB(ストウブ) 見た目にも美味しいレシピ まとめ。


スモークチキンを作ってみた

仕込み

チップと網が届き、ちょっと小腹がすいたので、深夜に鶏肉があったのを思い出しておもむろに仕込みを始めました。


鶏肉さんです。水気を取ります。燻製するときは水気が残っていると酸っぱく仕上がってしまうそうです。塩コショウでササッと味付けした肉の水気をクッキングペーパーで丁寧に吸収していきます。


クッキングペーパーで包んで、冷蔵庫で15〜20分ほど寝かせて置きました。


燻製!

いざ燻製。鍋の内側が茶色く汚れてしまうので、僕はアルミホイルで鍋と蓋の内側を全部覆ってしまいました。


そこにスモークチップを鍋の底が薄く埋まるくらい敷いて


この網を置きます。


置いてみた感じはこう↑ 写真撮り忘れたんですが、この後この網を一旦外して、肉の油がチップに落ちないようにチップの上にまた油受け用のアルミホイルを簡単に被せました。


蓋を閉めるとこんな感じ。しっかりしてるので本当に煙が漏れてきません!
チップだけでしばらく中火で熱して煙が出てくるまでチラチラ蓋を開けながら確認しました。(5〜10分くらいですでに良いかほりが。。)

調理!

蓋を開けて先程仕込んでた肉を投入します。


これが


こうなって


こうじゃ!

燻すのは15分くらい。燻しただけなのにものすっごい良い香りです。
これだけだと中まで火が通ってない感じなので、最後にオリーブオイルで軽くソテーしてあげました。


そして実食へ・・・

美味しすぎてまたまた写真を撮るのを忘れました。とにかく燻製された旨味が恐ろしいほど出ていて、いつの間にかビールを開けているくらい美味しかったです。

先人の知恵をお借りすると、



らしいので、今回はめちゃくちゃ上手く行って絶対に良い旦那さんになるなと思えるくらいだったのですが、酸っぱくなったときは試してみたいと思います。

今回はスモークチキンをやってみましたが、ちょっと検索かけるだけでも他にも王道のベーコン、ゆで卵、チーズ、ナッツ類、魚介・・・様々な燻製レシピがありました。

人を呼んで宅飲みを最近するようになったんですが、これは良い趣味になりそうです。本当に美味かったのでもっと燻製試したいし是非遊びに来て下さい😋

ああ…最近料理好きなのが判明したので鍋だと物足りなくなって、燻製器本当に手を出しそうでこわい。低温調理も気になるナァ。。。(´Д`)ハァ…

2017-01-02

2016年のシチク、2017年の紫竹。

毎年年末に書いてたけど年末まで忙しかったのでダラダラさせてもらって、年明けですが2016年振り返りと2017年に向けて色々書いてみました。下書き書いてたら Bitcoin が 120000円を超えました。仮想通貨元年ですね^^

2016年振り返り

AMESTAGE


2016年を語る上で外せないのが AMESTAGE に異動したこと。
2/2 から異動して、Webサーバーからブラウザに出るとこまで全部やるWeb版制作担当になった。最初はWeb版は一人だけで、動画サービスは初めてだったので周辺技術キャッチアップから、Riot.js を選んでみたり、0からの Web フロントエンド実装でした。

やればやるほど身になる時期が始まって、異動してから今日までずっとクライマックスみたいな状態でした。
チームメンバーはいい人ばかりで、仕事は楽しいし、本当に凄くやりやすい。

異動以前に遊びまくってた一環で、アイドルヲタク活動してた事がチームに良い影響を与えられたし、僕の妙に親しげな雰囲気もチーム飲み会を増やせたらしく、プラスになってよかったなぁと思いました。人生なにが役に立つかわかりませんね。

正月も1つプルリク出すくらい、仕事に集中出来ている感じです。もっと成功させたい。そんな一心でやれていて、こんなこともありましたが本当に頑張らせて頂いています。

Riot.js と情報発信


Riot.js にとてもお世話になりました。 AMESTAGE で使っているんですが、2016年の三が日に、友人夫婦の家に邪魔しに行かせて貰って、Riot.js を遊びで触ってから丸一年仕事で触ることになりました。

AMESTAGE をリリースした後は Riot.js の勉強会が世の中に無かったので自身で主宰したり、Riot.js の Showcase に載せてもらえたり、勉強会にお呼ばれして登壇させてもらったり、技術ブログもこのブログに書いたり会社ブログに書かせてもらったり。

情報発信みたいなところでかなり良い活動ができたなぁと思いました。
この前話してきた勉強会では、当日のアンケートで一番評判が良かったとかどうとか。とても素晴らしい体験をさせてもらえたので、本当にやってみて良かったです。
(まだ相談ベースだけども、また本も書かせていただけるかも。)

セブで半月、スペインで半月旅行してみた


セブでは友達が会社をやっていて、その仕事を手伝いがてら、コンドミニアムに泊めてもらって色んな休みを全部使って半月生活してみました。

フィリピンは島ごとに言葉が違うくらいなので、公用語として英語が採用された国らしいです。語学留学ではないですけど、似たような生活が出来たのも良かったです。
会社でメンバーに Scala を教えてみたり、クラブでレディボーイからの逆ナンでちゃんと話し続けてみたり、パスポートを紛失して英語が出来ないと帰れないし死ぬ、みたいなことをやってなんとかする力がつきました。

1月に行ったんですが、正月みたいな時期に Sinulog (写真のやつ)という祭りがあってめちゃくちゃ楽しかったです。今年も行こうか悩み中です。代休取れそうだし。



スペインは9月にまた半月行って、アントニオ達とグラナダで合流するまで暇な時間をマドリード→トレド→(マドリード経由)→バルセロナ→グラナダ→マラガっていう交通機関の乗り継ぎだったり、全部 Airbnb でスペイン人家族の家の1室を借りてウルルン旅行滞在記みたいなことしてみたり。

英語でなんとかする力はついたかもしれないけど、スペインでは英語が通じない事が多かったので、バルとかでの酒飲みスペイン語だけちゃんと勉強して行ったら十分過ごせました。
現地で会社同期のお兄ちゃんと仲良くなったり、知らないおじさんとレアルマドリードの試合見たり、世界遺産の街に泊まったり、スペイン人の友達に会いに行ったり、毎日色んなバルをはしごし続けたり。楽しすぎた。。

海外旅行は大体のところに一人で行けちゃうなと感じられたと共に、英語力を少しは鍛えられたけどまだまだ全然駄目なので、学ぶきっかけが得られてとても良い年だったなという感じです。

30歳になった


と言っても見た目とかは多分、そんなに変わらない。

変わったかなと思うのは、周りからの評判。これは会社のおかげとしか言いようがない。
30歳を目前にして掲げられた「せめて、大人らしく。」という遅すぎる目標は、今日色んな人に変わったと言ってもらえた理由の一つだなぁと実感しました。

「大人になる = 面白くなくなる」みたいのを履き違えていたというか、本当に恥ずかしいのだけども「痛い」ってのを無くすだけで良かったのだと実感した1年でした。感謝。

そんな僕を尻目に親友がみんな結婚したっていうのも2016年でした。結婚式の出し物系準備に帆走し、業務と並行しながら親友の人生で1度のイベントを心から祝うために沢山の時間をかけました。めでたい。僕が結婚したらみんな祝ってくれよな^^

その他いろいろ


若干痛さが残ってますが、AMESTAGE のおかげでものづくりの精神が蘇ったのか、ハロウィンとクリスマスで被っていた星のかぶりものに車用のテープLEDを縫い付けて光らせてみたり、LINEbotを作って、LINE beacon と合わせて作った helloworld 的なエントリーが一部で話題になったりしました。

会社の Swift 研修にも参加させてもらい、5日間の座学とその間の課題・復習、2泊3日の課題開発合宿の集中的な研修で Swift が書けるという入り口に立つことができました。機会があれば、Swift 開発を仕事でやってみたいなぁ。

あとはペルソナ5がめちゃくちゃ面白くて生活が乱れたり、大掃除に片付けコンサルを頼んでみて収納から見直してめちゃくちゃ部屋がきれいになっていったり細々と色々ありました。

逆に2015年に比べて全然遊んでないです。4月にDJしたくらいで、土日の予定がほとんど無かった気がする。そういう年。

去年の振り返り

去年掲げたのはこの4つ。

  • 人間性を捧げる
  • デザイン
  • 英語・他プログラミング言語
  • せめて、大人らしく。

簡単に総括すると、人間性は常識の範囲内で捧げられたのかなぁと思いました。
デザインは特に絵を描くみたいな事より、Atomic Design みたいなフロントエンド実装とデザインの橋渡し的な所で頑張れたと思います。
英語は合計1ヶ月海外に行けたし、フロントエンドJSとSwiftが書けるようになったので他プログラミング言語もOK。
大人らしくという点ではまだまだだなぁと思う点もある中、色んな人に変わったと言ってもらえてるので及第点というところではないでしょうか。

2017年はどうするか


  • もっと情報発信をする。
  • 去年学んだことの深掘り。
  • 続、大人らしく。
  • サクセス。

もっと情報発信をする

ブログをもっと書こうと思いました。エンジニアとしても、一個人としても、自分のマーケティングが大事だなと思ったからです。態度で伝えるのが下手なので、定期的にこうやって文字に落とす。

去年学んだことの深掘り

Riot.js も英語も Swift もデザインも、どれも身にはなってきたけどまだまだ中途半端。せっかく入り口まできたのでもうちょっと先まで勉強したい。

続、大人らしく

まだまだこれも1年意識したくらいで変わるものではないので引き続き。

サクセス

サクセスしたい。売れたい。そろそろ当てたい。という野望です。当てましょう。

最後に

2016年は本当に仕事一色な良い年になりました。2017年は何か大きな良い知らせができるように頑張ります。今年もよろしくお願い致します!


2016-12-07

AMESTAGE を支える Riot.js とその構成について紹介

この記事は Riot.js Advent Calendar 2016 の 7 日目の記事です!!


Riot.js で芸能人とあそべる生放送サービス AMESTAGE というのを作っていて、動画サービスだったり、芸能人と一緒に遊べるクイズやコメント・ランキングといった各種機能盛りだくさんなせいか、そこそこ規模が大きくなってきました!


是非遊んでみてください!!


そんな AMESTAGE での Riot.js との付き合い方について、どういう構成でやっているかをサーバー構成からビルド方法、Atomic Design というデザイン手法の導入、Flux な構成までザックリ紹介してみようかなと思います!


基本構成

Node.js で Web サーバーを建てて、API サーバーやログイン基盤とのやり取りをまとめています。API サーバーを直接ブラウザからは叩きに行かず、 Web サーバーに実装した API を必ず介してデータを取得しています。

最近あった「リクルートテクノロジーズのフロントエンド開発 2016」という記事のBackend for Frontend なサーバー構成に似た状態です。

サーバーサイドレンダリングはほぼやってませんが、ロボットからのアクセスに対して riot.js の機能を使って SEO 向けページを用意していた事もありました。
テンプレートエンジンは ECT を利用しており、Riot.js のレンダリングを待ちたくないヘッダー等の簡単なマークアップはそちらで済ませてしまっていたりします。

コーディング

Babel を使っています。eslint でコーディングルールを管理し、babelrc, eslintrc の設定に riot のプラグインなどを追加しています。あとは editorconfig も追加しています。(エディタはvimが多め)

ビルド周り

Riot.js は gulp を使ってコンパイルしたものをブラウザから読み込ませています。ファイルを分けている各 js は Browserify を利用して1つにまとめています。

Browserify を使うときは注意が必要で、今の構成でビルドするには Browserify + Babelify + Riotify だけで動きはするのですが、これだとファイルが増えていったときに watch しながら実装していると、1ビルド毎に何十秒もかかってしまい、開発効率が悪くなってしまいます。

なので差分ビルドができるように、 watchify というものを追加します。差分ビルドだと、import (require) しているファイルたちを毎回全部くっつけてた処理が、変更のあったファイルのみ再ビルドされるだけになるので2〜3秒とかほんの僅かな時間でビルド可能になります。これやらないと、本当に死ぬので是非お試しください。

ポイントは browserify で作るエントリーポイントを少なく(出来れば1つに抑える)構成すると開発もスムーズに行くと思います。今からやるのであれば、 WebPack を試してみるのも良いのではないでしょうか。

その他 gulp ではサーバー起動と watch からの js / css ビルド or minify 処理がメインです。sourcemap 作ったりとかとか。


Flux

Riot.js の Observable を使ったシンプルな flux を実現しています。Redux とかは使ってなくて、お手製です。でも Redux 等も良いと思います。
Riot.js を使ったコンポーネント志向な造りになるときは、Flux なデータの受け渡しはとても相性が良いです。ぜひ導入しましょう。

文章だけでは難しいですが、イベント名と紐付いた store を1つのオブジェクトに登録して、context みたいな形で riot.mixin してどのタグからでも同じデータを見れるようにして使っています。


Flux の実装については簡単に説明すると View から実行された action で API の結果だったり、渡したいデータを決まったイベント名で trigger して、dispatch にデータを渡します。

dispatcher に登録した store にそのイベント名で受けたデータを反映させ、 store にはデータが保存されるので、view では store のデータを引っ張ってきたり監視して変更を反映させたりするだけとなっています…

…がやっぱり分かりづらいので細かい実装などについては、直接ご相談いただければお話させていただきますのでお気軽にご連絡ください^^


Atomic Design と Style Guide

色んな勉強会などでお話させてもらってる Atomic Design ですが、こちらは components というディレクトリ以下に Atoms, Molecules, Organisms という単位でそれぞれを管理しています。以前会社ブログに書かせてもらったこの記事でも紹介していますが、具体的にはこんな感じ。

components/
├── Atoms
│   ├── follow-button
│   │   ├── _follow-button.scss
│   │   ├── follow-button.tag
│   │   └── example.tag
│   └── atom-component-name
│       ├── _atom-component-name.scss
│       ├── atom-component-name.tag
│       └── example.tag
├── Molecules (Atomsと同じ構成)
├── Organisms (Atomsと同じ構成)
├── styleguide
│   ├── style-guide-item.tag
│   ├── styleguide.html
│   └── style-guide.js
...

それぞれはコンポーネント本体、そのscss、example.tagには Style Guide での使われ方や表示に必要なテストデータが入ってます。
example.tag ファイルの実装は、Style Guideでの見え方の他に、サイズやその他種類など、同コンポーネントでの表示パターンをなるべく網羅するように記載しています。

今後はこのexample.tag のデータに紐付いてテストもまとめて書けたらなぁと妄想しています・・・(´・ω・`)

開発時は gulp style と実行すると style guide 用のサーバーが立ち上がり、コンポーネントの見た目を作るときはそれを見ながら実装できます。

Atomic Design と Style Guide については今までにも勉強会などで話させてもらった資料などを公開していますのでそちらも合わせて御覧ください!

勉強会に登壇した話とデザインエンジニアリングについて

Riot.js 勉強会を主催しました


スタイルの当て方について

riot.js の tag 内でも sass は使えるのですが、コンポーネント実装をやっていく上で複雑な動作があるものに関してはマークアップが長くなったりと色々不便があったり、スクリプトまで書くと全体的に長くなってしまうなという印象がありました。
なので sass ファイルを別にしています。あえて .tag 内に書いていません。

例えば、 atom-icon.tag みたいなコンポーネントがあったとしたら、_atom-icon.scss を同ディレクトリに置いて、そのタグ名で以下のようにスタイルを記述していきます。

atom-icon {
  height: 100px;
  width: 200px;
}

こうすることで直感的にこのタグ内でのスタイルだけに集中して書くことができるので、riot.js v3ではデフォルトになった scoped な書き方が出来ます。
class 名なども、コンポーネント間で完結するのでかぶること無く(もし被っても子タグclass 名の方が強いので問題になったことがない)BEMのような管理をしなくて済むのでとても見通しが良いです。

各 components の sass は gulp-sass と gulp-sass-glob を使って1つのファイルにまとめてから minify などしてます。共通して使ってる色や数値は変数にして共通して使えるように利用しています。


その他ライブラリについて

jQuery 系を使ってません。DOM 操作がそもそもそんなにやること無いのと、class の付け替えや DOM の切り替えなんかは riot.js の機能だけで十分出来てしまうからです。
無駄なファイル読み込みが減るので、思い切って使うこと自体をやめてみました。

あとは bugsnag でバグ確認したりとか、色々楽しく動くサービスだったりするので必要なアニメーション系ライブラリを導入予定です。anime.js とか。現時点ではコーナーやギフトと言われるアニメーションは css をコツコツ手付けでやってたりします。


テスト準備中。。

言い訳になるので理由は言いませんがテストが今無くて準備中です。。使おうと思ってるのは Riot.js でも使われてるので karma-riot を考えてます。

コンポーネント単位でのスタイル確認は Style Guide でやってます。まだ構想なのですが、今後はこの Style Guide 確認と一緒に karma のテストが書けたらなと思っています。
Style Guide 自体が今 AMESTAGE 用に作られているので、しっかり外部 module 化して、オープンソースにしたりとかも出来たら良いな…とかとか(妄想)React にある Storybook 的なやつがとても良さそうなので、それに近いものを…!


まとめ

ざざっと全体像を書くことになってしまったので、詳細について端折りすぎた感じが申し訳ないのでどこかで書くか発表するか、質問・リクエストくださいw

これらの構成自体は全然正解ではないし、このあともどんどん改良していこうと思ってるものなので意見があれば是非ご連絡ください!選定理由や細かい実装についての相談などもどしどしお待ちしてまーす^^


明日は cognitom さんの「 ES6 で書くRiot - Rollup編」です! Rollup も良さそうですよねぇ〜〜😋

2016-11-06

勉強会に登壇した話とデザインエンジニアリングについて


Forkwell さんの勉強会で登壇させて頂きました!フロントエンド最前線という感じの攻めた勉強会だったのですが、話した内容の反響がとても良かったというお話です。


撮っていただいた写真

資料について

こちらが発表した資料になります!


内容ですが、過去にも話した AMESTAGE で使っている Atomic Design について触れているものになります。

Web Components っていうのはかなりイケていて、 Atomic Design っていうのはコンポーネント志向で Web を作っていく上でとっても良い指標なので、みんな是非取り入れてみてくださいね!ツールに振り回されずに、もっと上のレイヤーでものづくりしたらよいのでは?という内容になっております。 

フロントエンド最前線な勉強会について思ったこと

資料の中にもありますが、JavaScript 界隈の技術の移り変わりはとてつもなくて本当に忙しないというか、追いかける気が失せる人が多いのも本当にわかります。
僕自身も、フロントよりもサーバーをずっとやってきて、リクエストを受けてレスポンスを返すだけの簡単なお仕事だなぁと思ってエンジニアしてきていたので、ちょっと辛かったのを覚えています。

そんな中、この資料を寝そうになりながら作っていて思ったのは、フロントエンドエンジニアというかWebエンジニアというか、見た目を作っていくエンジニアすべてに共通する認識として、我々はツールより、デザインについて考えることは沢山有るのではないかということです。

デザインエンジニアリング

僕はこういうものづくりについて、デザインエンジニアリングという考え方を持っています。デザインエンジニアリングというのは僕が今とても興味がある分野で、テクニカルクリエイターという物もCA社にはありますがそういう感じなのかなぁと思っています。

エンジニアなんだけどデザインについて知らないと出来ない世界。そっちに向けてスキルを伸ばせたらみんな幸せになれるのになぁという気持ちを込めて、今回呼ばれたフロントエンド最前線という勉強会のテーマについて考えました。フロントエンドを作っていく以上、ただ依頼されて作らないと駄目なもの以外はデザインについて興味がないっていうのは致命的なエラーなんじゃないのかっていうのを最近感じています。

まとめ

そんなこと言ってますが、フロントエンドで使う技術は使いやすいイケてるモノを選び、それを選ぶセンス自体はやっぱり今回の様な勉強会や日々のデザインについて語る機会がエンジニアにも必要だなぁと思います。なので勉強会に行くのは超重要。

でも見失わないでほしいのは、誰のためにいつまでに何を作っているのか?というのを常に考えて行くのがオナニーにならず、良いフロントエンドエンジニア人生なんじゃないかなと思った発表でした!ブーーーメラン!!!!!!!!!!!!!

2016-11-02

ハロウィンなのでLEDテープを使った工作をやってみました

今年もハロウィンが終わりましたね🎃



僕は昔は全然ハロウィンとかしなかったんですが、去年、一昨年と連続して楽しめるようになったクチです👻

仮装とかはあんまり気合いを入れていなくて、クリスマスの時に買った星の被り物がシンプルなのにキラキラしてて楽しい気持ちになれるのでお気に入りで良く被っています🌟

今回は前から使ってみたかったLEDテープを使ってこの星をバージョンアップさせ、去年よりより楽しい気持ちでハロウィンに臨むことにしました💪

早速ですが完成版はこんな感じです。



動画はこんな感じ。



星の周りにLEDテープを手縫いで縫い付けて、コントローラなどを星の中に安全ピンで固定しています。リモコン対応しているので、受光部を首元からこっそり出し、リモコン経由で16色と4パターンの点灯パターンに切り替える事が出来ます。


作り方紹介



LED周りで必要なパーツ類は以下のとおりです。

  • LEDテープ :今回はカラフルにしたかったのでRGBタイプのモノで2mのを買いました。4000円ちょっとくらい。
  • コントローラー:リモコン付きで、12Vの電源とつなげると色の制御をしてくれます。他にも音楽連動タイプとかもあって、そっちを買っておくべきだったなとちょっと後悔しました。これも2000円くらいだったような。。
  • 電池ボックス:今回は電源を持ち歩きたかったので12V出すために単三電池を8つ直列につなげて出力をまかないました。ちょっと重い。歩いてるときはパーカーを着てフードに入れてました。3日間ハロウィンで使ったけど夜だけつけたり消したりしてなんだかんだずっと8本だけで耐えられました。
電力が12V必要なのは、本来は車などでの利用を想定しているからっぽいです。タクシーのドアについてるやつとか。


LEDテープはこんな感じで等間隔でLEDが付いているのと、その間に4つ並んではんだがついている所で同じモノがつながっているだけです。


4つのはんだが並んでいるのと同じく、LEDテープの端には4つの穴が空いた端子があります。




電源側には同じく4本のピンがあり、先程の4つの穴に挿入できるようになっています。4本あるのはRGBへの電力供給3つと、GRDがあるからっぽいです。
LEDテープの反対側には同じピンがあって、間で増幅することで延長することも出来ます。



あとは電源がこんな感じで電線が出ているのではんだづけします。




最後は丁寧に一縫い一縫い地道に星の周りに縫い付けて行きます。。外周2mもあったのですが、アニメを見ながら2時間位で完成しました。


ハロウィンは光ると目立つ

友達のゾンビメイド達とPSVRで遊ぶ人の仮装の人(PSVRの人も自作してて強い)


去年一昨年と同じ星を付けて渋谷を歩いたときはちょっとシュールでただの雑な荒川アンダーザブリッジの星コスプレみたいになって生暖かい目で見られてましたが、今回は眩しいほどの光量とカラフルな発光パターンでテレビにも映ったらしいし街の反応もとても良かったみたいで良かったです。

みんな趣向を凝らした仮装が沢山あった中で、「あードンキで買ったのね。」みたいな感じになってしまっていたところを、こういった工作で少しだけグレードアップさせられたのはとても楽しかったです。

今回は使ってみたかったLEDテープの仕組みも分かったし、もっと高価なやつだとチームラボさんの展示とかでやってたみたいなプログラミング制御とかもできるみたいなので試してみたいなと思ったりしました。

はー色々忙しかったのにやったし酒飲みすぎて体調が悪い!しばらくはおとなしく過ごしたいと思います。。今度はクリスマスにお会いしましょう🌟

2016-10-09

LINE beacon で玄関に近づいたら天気教えてくれる LINE bot 作ってみた



LINE DEVELOPER DAY 2016 で貰った beacon 使ってなんかつくってみよ〜と思ったので、なんか作ってみることに。

良く家出る直前に「今日雨降るんだっけ?」と思って天気調べたりするのがめんどくさいので、玄関に置いた beacon に近づいたら LINE 通知で天気を教えてくれる bot を作ってみることにしました。

作り方


手順はこんな感じ

  1. LINE@ のアカウントを作る
  2. LINE の Developer Trial に登録して Message API を使えるようにする
  3. LINE@ アカウントを Bot 設定 ON にして API と連動させる
  4. LINE beacon の設定 URL から Beacon を LINE@ アカウントと連動させる
  5. サーバーを立ててやりたい実装しつつ、 Web hook (callback URL) を作って LINE@ に設定する
  6. Beacon の電源を ON する
  7. スマホの LINE 設定で beacon 利用を許可する
  8. 作った LINE@ と友達になる
  9. Beacon に近づけてみる…!
LINE@のアカウントを作って、開発権限とって、Beaconとそれぞれを連動させて、サーバー立てて動かすって感じです。かんたん!

大体はこのページの「 Messaging API をはじめる」 「Developer API を始める」の2つから設定とかを探していけばイケます!(他にも探したら同じような記事あるのでわからなかったら探してみてね)


(サーバーは https じゃないと駄目だったりしたので heroku で Node.js 書いて作りました。)

作った天気教えてくれる bot について

通常 Messaging API 連動した LINE@ アカウントと友だちになってメッセージを送ると "type": "text" みたいな形のデータが POST で届きます。Beacon に近づいたら届くデータの場合は "type": "beacon" になっているだけです。今回はこの beacon イベントが届いたときに OpenWeatherMap API を叩いて天気をとってきたりして返事しています。


おまけなんですが、OpenWeatherMap API で返ってくるデータが全部英語で、それを日本語に翻訳したものをかんたんにモジュール化して GitHub と npm に公開したので良かったら使ったり直したりしてください^^



LINE beacon の可能性

LINE が Beacon 事業をやるのは素晴らしいことだと思います。昔 BLE 買ってきて、連動するアプリを作ろうとしたことがあるんですが、やっぱり専用のアプリをインストールさせたりする手間などがかかったりするので残念でした。でもこれらを LINE がやるとなると話は別で、LINE は今日本人のスマホには大体インストールされているので Beacon 専用のアプリをインストールする手間がゼロになります。これがスゴイ。可能性が広がりまくりです。

そして LINE Beacon 自体の可能性ですが、現状"近づいたら通知する"という機能しかないのと(中の人いわく"離れたら通知する"機能も付けたいらしいけど)、それによって生まれる便利な生活のイメージはまだまだ未知数な気がしています。

今回作った「玄関に近づいたら今日傘がいるかどうか知る為に天気を教えてくれる」というものは、日々の生活の中で「いつも家出る直前に天気アプリ開いていて面倒だなぁ」っていう問題を解決できました。普通に天気アプリ開いたらいいじゃんってのも分かるんですが、決まった時間に通知するわけでもなく、玄関に近づいたら勝手に教えてくれるというのが気持ちいいわけです。

これからあるなぁって思うのは、ハチ公とかの待ち合わせスポットにBeacon仕込ませてもらって、待ち合わせ中の人たちに Beacon 経由で有用な情報を送りつけるとか、そういうことができるようになるんだと思います。新しい広告プラットフォームみたいな使い方。それ以外だと今回作ったみたいな生活をちょっと便利にする秘書的な、最近も発表があった Google Home みたいな使い方が増えてくるんじゃないでしょうか。

まとめ

LINE で bot を初めて作ってみたんですが、大体1〜2時間くらいで完成しました(実装は雑だけど)。このブログにまとめる時間のほうがかかっていたような気がしますw それくらいかんたんな LINE bot と Beacon の設定と開発。API もシンプルだし、"何をやるか"について考える時間をもっと割くべきだなと思いました。

賞金1000万の LINE bot のアワードもあるみたいだし、これからどんどん盛り上げて行きたいみたいなのでこのビッグウェーブに乗るのも結構いいかもしれませんね。なんか出してみようかなヽ(´ー`)ノ