読者です 読者をやめる 読者になる 読者になる

僕のYak Shavingは終わらない

車輪の再発明をやめたらそこには壮大なYakの群れが

Webエンジニアとして最低限の体裁を保つための結婚式入門

Wedding Hack

f:id:kazuph1986:20161224125705p:image

今年の9月に結婚式を上げました。

Webエンジニアとして長年生きてきた自分は、結婚式でも絶対面白いことをやろう!と思って、 人生で2, 3番目くらいには重要なイベントである結婚式にすらエンジニアとしての最低限のHackをやって来ました。

もし一生をものづくりをする人間として過ごすのなら、人生を振り返ったときに立ち戻る重要な瞬間が必要です。

僕に取ってはそれが「結婚式でWebエンジニアリングをする」でした。

新婚旅行よりもbuildersconを優先したことで一部で有名な僕ですが、 今回は結婚式でのHackを紹介します。

それではいきましょう!

ウェルカムボードでWebエンジニアリングする

最初は、結婚式中のコンテンツとして何かWebやハードウェアと連携するものをと思ったのですが、 流石に結婚式の本番中に失敗してしまっては、親族などに顔向けできません。

やるなら、そもそも失敗ないような設計をするべきです。

ということで僕はウェルカムボードをHackすることにしました。

ウェルカムボードとは、式場の入り口に置く招待者を最初に迎え入れるボードのことです。

人によってはものすごく簡素なものを用意していることもありますが、 新郎新婦の似顔絵だったり、友人につくってもらったり、二人の趣味のものを飾ったりと人それぞれです。

基本的には素通りされるものなので、そもそも失敗自体しづらいです。 弊社の回路エンジニアもウェルカムボードを回路基板で作成してLEDを点灯させたりしていました。

 完成品

みんなでつくるWelcome Board

f:id:kazuph1986:20161224130155g:plain

これだけだとよくわからないので、解説。

ディスプレイには予め「Welcome to our wedding reception!」と表示させておき、 基本的には新郎新婦の思い出社員をスライドショーさせておきます。

それだけだとつまらないので、横に置いてあるMacのカメラで写真が取れるようにしておきます。

そこで写真を撮影すると、メインのディスプレイに撮影した人たちが投影される仕組みです。

数秒後には元にスライドショーに戻りますが、このときの写真がどんどん追加されていくイメージです。

必要なのはディスプレイとMac一台と結婚式っぽく見せるための造花。

写真共有サイト

f:id:kazuph1986:20161224125736g:plain

こちらは単純にスマホブラウザから写真のアップロードができるサイトです。他の人がアップロードしたものも見れて、「1分前」 「10分前」など時系列で閲覧できます。

 

一応複数枚同時アップロードにも対応。

 

 実際どうだった?

待合室にこんな感じで置かれており、うちの共同創業メンバーや同僚が周りの人に紹介してくれたので、結構使ってもらえたみたいです。

f:id:kazuph1986:20161224125713p:image

※モザイク掛かってない二人はうちの会社の創業メンバー

なんだなんだと眺めていると他の人が撮影した写真が映るので、じゃあ自分もやってみようかという感じで 沢山の人が撮影してくれればいいなと思ってつくりましたが、その結果がこちら。

f:id:kazuph1986:20161224125722p:image

※人物が特定できないようにかなり解像度を下げてます。

全部で50枚くらい撮影してくれました!会場のスタッフの方が、待合室からさらに披露宴会場の入り口にも移動してくれたので、入退場含めさらに多くの人に使ってもらえました。

またこの時撮影した写真は、これまた結婚式のためのつくったお手製の写真共有サイトに リアルタイムに表示されるようになっていたので、花嫁の準備中に1人で見て(・∀・)ニヤニヤしてました。

やはり自分がつくったサービスが人に使われるのを見るのはうれしいことですね。

そして個人的に嬉しかったのが、嫁の両親が使ってくれていたこと。

しかも笑顔で。これを見た時にはなんというか「一つ認めてもらえたかな」と思えるような、そんな大事な瞬間でした。

どうやってつくったの?

ということで、どうやってつくったか見ていきます。

SAKURAのVPSを準備

元々持っていたのでそれをそのまま使いました。

CentOS 6.5でした。

MySQLじゃなくて、SQLiteでサクッと作るつもりだったので、そうします。

$ yum update -y$ yum install -y git vim make glibc-devel gcc gcc-c++ openssl-devel$ yum install -y sqlite-devel$ yum install -y ImageMagick$ useradd app

Install ruby

[root]$ yum install -y readline-devel [app]$ git clone git@github.com:tagomoris/xbuild.git$ xbuild/ruby-install 2.3.1 ~/local/ruby-2.3.1$ export PATH=$HOME/local/ruby-2.3.1/bin:$PATH※↑は.bashrcにも追記

Setup application

$ cd$ git clone git@bitbucket.org:kazuph/wedding-photo.git$ cd wedding-photo$ bundle install --without development test --path vendor/bundle

Nginx

$ yum install -y nginx

設置

server {    listen       80;    server_name  ore-wedding.com     location / {        proxy_pass          http://localhost:3000;        proxy_set_header    Host             $host;        proxy_set_header    X-Real-IP        $remote_addr;        proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;        proxy_set_header    X-Client-Verify  SUCCESS;        proxy_set_header    X-Client-DN      $ssl_client_s_dn;        proxy_set_header    X-SSL-Subject    $ssl_client_s_dn;        proxy_set_header    X-SSL-Issuer     $ssl_client_i_dn;        proxy_read_timeout 1800;        proxy_connect_timeout 1800;    }}
$ service nginx start$ chkconfig nginx on

起動

productionで起動するための設定

$ echo SECRET_KEY_BASE=`bundle exec rake secret` > .env$ bin/rails db:migrate RAILS_ENV=production$ bin/rails assets:precompile RAILS_ENV=production$ export $(cat .env | xargs) && bundle exec puma -C config/puma.rb -eproduction

exportなんとか〜&&ってやると.envにある値を全部展開してくれて、プログラム中に使えるようになります。 doenvに頼る必要がないので便利です。

pumaをinitで使う

このままだと、pumaが死んだらそのまま死んだままなので、その辺はinitさんにお願いします。

https://gist.github.com/niwo/4526179

自分はこれを使いました。以下のinstallが必要でした。

$ yum provides /lib/lsb/init-functions$ yum install redhat-lsb-core

設定ファイルはgistにあげてます。

https://gist.github.com/kazuph/b0d84d078cc23b8a6eb605bb15e08b2a

nginx basic auth

開発中はBasic認証で見えないようにしてました。

$ yum install -y httpd-tools$ cd /etc/nginx$ htpasswd -c .htpasswd wedding

/etc/nginx/conf.d/virtual.conf

server {    auth_basic "Restricted";    auth_basic_user_file /etc/nginx/.htpasswd;}

wedding photoアプリ

Rails5でつくりました。Versionは5.0.0。

Gemfileにはこれを追加しました。

gem 'carrierwave', '>= 1.0.0.beta', '< 2.0'gem 'mini_magick'gem 'exifr'gem 'materialize-sass'gem 'kaminari'

使ったJSファイルは、

  • webcam.js
  • material-photo-gallery.js
  • lodash.js

だけです。

残念ながらこの時点では僕がReact触ってなかったので、古き良きRailsアプリケーションという形で作成されてます。

ちなみにTurbolinksはONのままやりきりました。やはり画面の遷移がスムーズになるのは気持ちいいですね。

carrierwaveのuploaderは以下のような感じにしました。

app/uploaders/photo_uploader.rb

class PhotoUploader < CarrierWave::Uploader::Base  include CarrierWave::MiniMagick   storage :file   def store_dir    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"  end   # 回転対応   def fix_exif_rotation    manipulate! do |img|      img.tap(&:auto_orient)    end  end  process :fix_exif_rotation   process :resize_to_limit => [2048, 2048]   version :normal do    process resize_to_fit: [1024, 1024]  end   version :thumb, from_version: :normal do    process resize_to_fit: [200, 200]  end   def extension_whitelist    %w(jpg jpeg gif png)  end end

Welcome boardのjsはこんな感じでした。

app/assets/javascripts/welcome.js

$(document).on('turbolinks:load', function(event) {  if (controller !== "welcome") { return; }   // 画像のローテーション   $('#fullscreen').find('img:gt(0)').hide();  var imgAnimation = function() {    $('#fullscreen :first-child')      .fadeOut(1000)      .next('img')      .fadeIn(2000)      .end()      .appendTo('#fullscreen');  }  var imgInterval = setInterval(imgAnimation ,3000);   Webcam.set({    width: 320,    height: 240,    dest_width: 640,    dest_height: 480,    image_format: 'jpeg',    jpeg_quality: 90  });   Webcam.attach('#my-camera');   document.addEventListener("keydown" , function(e) {    var keyCode = e.keyCode;    if ( keyCode === 13 ) {      Webcam.snap(function(dataUri) {        console.log("Data URL: " + dataUri)         // 表示されるようにする         $('#fullscreen :first-child').fadeOut(100);        $('#fullscreen').prepend(''+dataUri+'" />');        clearInterval(imgInterval);        setTimeout(function() {          imgInterval = setInterval(imgAnimation ,3000);        }, 5000);         // Ajaxでサーバーに画像の送信         Webcam.upload( dataUri, '/welcome/create', function(code, text) {        });      });     }  });});

Webcam.jsに予め撮影画像のuploadメソッドが生えているのが便利でした。

webcamのuploadをrailsで使えるようにする

ただしそのままでは、WebCamで撮影した写真をアップロードできなかったので、Railsが発行しているcsrf-tokenを、 アップロード時のパラメーターに含めるようにだけ修正しました。

vendor/assets/javascripts/webcam.js

  var l = new FormData;  l.append(s, h, s + "." + i.replace(/e/, ""));  // 以下を追加   l.append('authenticity_token', $('meta[name="csrf-token"]').attr('content'));  o.send(l)

まとめ

ということで、結婚式にどんなハックをしたのか紹介してみました。

全部で3人日ちょいくらいでしたが、デザインにこだわっていたらもっとかかっていたかもしれません。

マテリアルデザイン便利だなーって思いつつ、当時でいうと久々Rails書けて楽しかったです。

あとpumaも始めてでしたが先人がいいものをたくさん用意してくれていたので、 ほぼ詰まらずにinit化くらいまではいけたかなと思います。あとhot deployも意識せずにできたりと、良いことが色々ありました。

嫁側の両親や親戚や招待した方々に、自分のことを知ってもらうのが目的でつくったので、それは達成できたかなと思います。

あと、自分側については一応僕は大学時代からこんなことをやっていたので「相変わらずだな」って思ってもらえてればいいなぁと。

ということで、当日までは結構ドキドキでしたがうまくいって良かったです。

結婚式がまだな方は是非参考にしてみてください!

Enjoy Wedding Hack!

 

---

ちなみにトップ画の一升瓶は、地元の酒造が出しているもので、通常の一升瓶が1.8Lに対して、2.5倍の4.5Lの大型サイズのものです。当日は二人の画像を貼るとともに、新郎新婦の場所に来てもらった人達に注ぎまくるという演出をやってました。

大変縁起がいいので、もし良ければこちらもどうぞ。

f:id:kazuph1986:20161224133226p:plain

益々繁盛 | 朝日山 | 朝日酒造株式会社

[Note ID: 7c63437b4789f87ffdc239e14e605d93]

2016-12-24 12:52:07

AtomとEvernoteを連携するever-notedownを使う

Vimプラグインであるmemolistで作成した技術メモが大量にDropBoxに入っているのですが、 プレビューが面倒だなぁって思っていて、VimからMarkdownをプレビューできるPreVimを使ってもいるのですが、ワンクッションおくのでうーんと思っていました。

Qiitaのインターフェースは好きなので、じゃあKobitoでも使うかぁって思ったのですが、なんとなく却下。 #ひどい

で、最近回りの人達がAtomを使い始めたので、自分も使ってみようと思って手を出しています。

今はまだ、Atom自体でコーディングをするつもりにはなれませんが、一旦はEvernoteへの連携のために使ってみようと思い。

ということで、今回はAtomEvernote連携パッケージである、ever-nodedownを使ってみます。

ソースコードもハイライトされてものがEvernoteにアップロードされるので、とても便利ですよ。

ever-notedownのインストール

atomにはコマンドラインを用いてパッケージをインストールする方法があることは知っているのですが、いやGUIだからむしろじゃまでしょ??って思って、普通に設定から入れます。

⌘, で設定を開いて +install からインストールします。

一応公式の手順があるので、それに従いましたがgitでの管理が必須化はわかりません。

$ ln -s path/to/your/folder ~/.atom/evnd$ cd ~/.atom/evnd$ echo "{}" > index.json$ cd path/to/your/folder$ git init------ Optional ------$ git add .$ git commit -m "Initial commit"

バグを修正する(日本語環境だけ?)

ということで、いきなりバグを踏みました。 もしかしたら海外のMacでは正常に動作するのかもしれませんが、僕の手元の環境ではだめでした。

cd~/.atom/packages/ever-notedownvim lib/evernote-helper.coffee

以下の様に変更して下さい。

-    cmd += "\tset newDate to date (m & \"/\" & d & \"/\" & y)"+    cmd += "\tset newDate to date (y & \"/\" & m & \"/\" & d)"

AppleScriptのdate関数に食わせる年月日の順番が違いました。

また、どうやらEvertnoteのnotebook対応が微妙だったみたいなので、その部分も修正します。

vim lib/note-prototypes/note-base.coffee
-    if options.notebook and @notebook? then queryString += " notebook:\"#{@notebook.name}\""+    if options.notebook and @notebook? then queryString += " notebook:\"受信箱\""

ever-notedownで作成した記事にNotebookを指定する箇所があるのですが、自分の場合はそこを指定してもお望みのノートブックへは保存できませんでした。悲しい。

僕がたまたまメインのBoxを受信箱にしているのでそうしましえ。 これで問題なく動きます。

使ってみる

ちなみにEvernoteもインストールされてないとだめです。

最初WebAPIを使って同期するのかな?と思ったら、Macに入れたデスクトップ版Evernoteアプリに対してAppleScript経由で操作をしているようでした。

AtomのMenu > Packages > Ever Notedown > New Note > Create Note NoteB

として最初のノートを開きます。

f:id:kazuph1986:20161223152803p:image

あとは、適当に編集して⌘Sで保存し、プレビューのEvernoteアイコンクリックで、Evernote側にも保存されます。

f:id:kazuph1986:20161223152812p:image

画像はどうなる?

最初自分で~/.atom/evnd 以下にインストールしないといけないのかなぁって思ったのですが、なんとFinderで画像を⌘Cした後に、編集エリアで⌘V するだけでした!!

f:id:kazuph1986:20161223152828p:plain

最高か。

Evernote上での見た目

試しにソースコードを貼ってみます。

## TODO: Implement this!##@subscriptions.add atom.config.observe 'ever-notedown.renderDiagrams', (toRender) =>#  if toRender and not window.evnd.chartsLibsLoaded#    chartsHelper ?= require './charts-helper'#    chartsHelper.loadChartsLibraries() @subscriptions.add atom.config.onDidChange 'ever-notedown.gitPath', (event) =>  newGitPath = event.newValue  reloadGitRepo = =>    @loadGitRepo newGitPath, null, (newStorageManager) =>      if newStorageManager?        window.evnd.storageManager = newStorageManager        @loadJSON (newNoteIndex) =>          window.evnd.noteIndex = newNoteIndex          if window.evnd.evndView? then window.evnd.evndView.refresh()          window.evnd.gitPath = newGitPath  dmsg = "Changing git repo path for EVND to #{newGitPath}"  if atom.config.get('ever-notedown.gitPathSymlink') then dmsg += " (symbolic link)"  atom.confirm    message: dmsg + "?"    buttons:      "Confirm": => reloadGitRepo()      "Cancel": => return      "Revert": =>        atom.config.set 'ever-notedown.gitPath', event.oldValue

Atom自体の表示はデフォでもかなりいい感じにハイライトされてますね。右のプレビューもいい感じです。

f:id:kazuph1986:20161223152816p:image

ではEvernote自体ではどうでしょうか?

f:id:kazuph1986:20161223152757p:image

いい感じです!当たり前かもですがプレビューと同じ見た目ですね。

ついでですが、先程の画像もちゃんとアップロードされて思った通りの場所に貼ってあります。

f:id:kazuph1986:20161223152822p:image

Evernote側を修正したらどうなる?

当然気になるやつですよね。

Evernote側を修正してみます。

f:id:kazuph1986:20161223152245p:plain

ありゃ、壊れちゃいました。

ただ、よく見ると単に全体が`<div>`で囲われただけで、エディタ側`<div>`を削除したら直りました、、、と思ったら色々コード部分の改行がおかしくなったりしているので、やらない方がいいかなと思いました。気が向いたら直します。

ご利用は計画的にという感じですが、ever-notedownが結構作り込まれていることがわかります。

Evernoteからはてなに投稿する

最初みたままモードからのコピペしかない?って思ったのですが、そのままやっても画像が反映されず。まあそうですよねーって思ってたのですが、なんと連携が可能みたいです。

f:id:kazuph1986:20161223152837p:plain

まず、はてなの記事編集画面を開き右にある設定から探すとEvernote連携があることがわかります。 ONにするとEvernoteの記事一覧が出てきて、貼り付けってするとべべってコピペされました。

f:id:kazuph1986:20161223152840p:plain

画像も最初は表示されませんが、徐々にアップロードされます。

ちなみにMarkdownモードやると完全に壊れて使い物にならないので、みたままモードでやるといいです。

当然ですが、AtomからEvernoteに保存したあとに、Evernote側でクラウドとの同期が終わっている必要があります。

まとめ

ever-notedown いい感じです。

実際この記事はever-notedownで書きましたが、個人Qiitaを手に入れたような快適さでした。

皆様も是非。

[Note ID: f91a1095ca8ec708f5908722220b6b32]

2016-12-23 15:27:15

Macをセーフブートするだけでストレージが12GB空いた。

before

f:id:kazuph1986:20161211142058p:plain

after

f:id:kazuph1986:20161211142048p:plain

Appが増えているのが不明だが、本当は元々もっと多かったはずなのに、正確に計算できてなかったものと思われる。

セーフブートの方法は、一度完全にシステムを終了してから、再度起動しShiftを押し続けるだけ。そのあと特に何もせずに再起動するだけでいい。

builderscon tokyo 2016の個人的な感想

f:id:kazuph1986:20161203094925j:plain

kazuph.hateblo.jp

自分の発表についての報告はしたのですが、12/3にあったbuildersconの個人的な感想を書いていきたいと思います。

OSSWindows で動いてこそ楽しい

builderscon.io

※スライドはリンク先にあります

見れました!生mattnさん。「まっつん」って呼び方で正解のようです。個人的にmattnさんに会える!が今回最大のモチベーションだったので、発表も見れて懇親会でも話せて感無量でした。

GoはWindowsに優しいとおっしゃってましたが、mattnパッチやmattnウェアの存在がやっぱり大きいのだろうなと、スライドから再実感しました。

全裸も最高でした。

動け!Golang 〜圧倒的IoTツール開発へようこそ〜

builderscon.io

お前かい、って感じですが、ちょっと個人的なエピソードを。

mattnさんの基調講演後の最初の発表を務めさせて頂きました。

メインホールのphpの発表の裏番組だったのですが、発表時間の前から隣の漫談による豪快な笑い声が聞こえて来ていて、「こっちは漫談やるひといないの?」みたいな圧力を受けつつ、時間ぴったりに発表開始させてもらいました。

スライド自体は1週間前に8割りほど作成していたのを前日の夜に再調整+発表練習をして臨んだという感じでした。 内容は完全に同業者向けになってしまったというか、IoTの製品を開発している工場はIoTになっていて、それをどうやって実現したのか、みたいな感じです。

実は1週間前にredmine.tokyoさんの方で発表させてもらっていて、スライドを使いまわせるかなって思ったけど、当然のごとくほぼすべてbuildersconのために書き直しました(被っていたのは最初くらい)。

buildersconのチケットを完全に買えず、このままではmattnさんを見れない><ということで、絶対に発表してやるぅ!と思っての応募でしたが、採用されて良かったです。

また過去のYAPC::Asiaに何度か登壇させてもらったり、企画も企業枠として運用していたりするので、個人的には結構思い入れが溜まっているなという感じです。

会社に余裕ができたら次は是非スポンサーしたいなぁという感じです。

会場写真

f:id:kazuph1986:20161203104618j:plain

f:id:kazuph1986:20161203115930j:plain

Automatic Smile Camera を作った話 - 親バカハックノススメ

f:id:kazuph1986:20161203120044j:plain

builderscon.io

どんな内容かなぁって思ったら完全にIoTでした。

BLEとWi-Fiが最初から積んであるIntel EdisonとWebCamを使って自分のお子さんの笑ったときの笑顔を機械学習で判定して、Slackに投稿するというもの。 一度OpenCVで顔が映ってる画像を選定し、その後Google Cloud Visionで笑顔の検知をさせているようでした。GCVにはAPIコールに制限があるようで、片っ端からGCVに送るのは難しいということで、一度OpenCVをかます必要があったとか。

これは自分でも是非やりたいなぁって思いました。 親ばかハックと言っていましたが、これは流行る!と思いました。

人工知能によってプログラムを有機化する

builderscon.io

天才なの・・・、って思って聞いていました。ステートマシンが多段になっていたり、AIを統括するAIが更に上にいて、ユーザーを生かさず殺さずうまいことやりくりしているという話とかすごい興味が湧きました。発表では(おそらくご自身が担当した?)ゲームの動画も交えて話してくださり、とてもわかり易かったです。

最初、最近流行りのDeep Learningみたいな話題かと思って聴きに行ったのですが、むしろDLの内容は全然なくて逆にゲームAIの壮大なまとめみたいな感じで、でも逆にそれが良かったです。DLの話はネットや本で大体追いつけそうですが、まさにここでしか聞けない「知らなかった、を聞く」発表だったと思います。

「片手間JavaScripter」にも知ってほしい、Vue.jsで実現するMVVMパターン、Fluxアーキテクチャとの距離

f:id:kazuph1986:20161203145225j:plain

builderscon.io

まさに自分は「片手間Javascripter」であり、フロントエンドの話は個人的にはちょっと業務からは遠くキャッチアップも遅れ気味だったので、この発表を聴いて追いつきたいみたいに思って聴きました。

そのときのツイートを載せます。

毎回ものすごくわかりやすいく、楽しみにしている発表だったので、聴けて良かったです。

そろそろプログラマーFPGAを触ってみよう!

f:id:kazuph1986:20161203153224j:plain

builderscon.io

タイトルずるい、って感じで始まった発表でしたが、自分もFPGA買ってみようかなと思えるくらいにはおもしろかったです。 特にJupyterでPythonFPGAできるPYNQはすごい魅力的に見えました。

会社にFPGAやっていた人がいるので、教えてほしい |д゚)チラッ

Bluetooth キーボードの作りかた採用

f:id:kazuph1986:20161203163840j:plain

f:id:kazuph1986:20161203164733j:plain

f:id:kazuph1986:20161203175707j:plain

f:id:kazuph1986:20161203180056j:plain

builderscon.io

完全にガチ。実際に触りましたが、ちゃんとキーボードでした。 左右分離型でかつ、左右のキーボードが重複しているものは世界にこれだけだと思うので、普通に自分がほしいと思いましたw

話を聞いてると本当に回路設計から全部自分でやっていて、自分は基本的には回路より上がメインの人間なので、普通に参考になりました。 一応数万円で出来たということで、大人の趣味としても魅力的です。勉強代としてもそこまで高くないし(ロングにやることを想定したら)。

あと全部OSSでやっていて、最後のSってソフトウェアだけど、それでハードウェアをつくり切っているのおもしろいなぁと。 懇親会でも色々話を聞けて面白かったです(・∀・)

最後に

builderscon最高!次回は1000人規模!

仕事でハードウェアをやっている会社は今回は(たぶん)弊社だけでしたが、他の方もハードウェアの発表してきており、どれもクオリティが高くてびっくりでした。

次回は自分以外の会社もIoTで台頭してきているのと牧さんのカンファレンスで発表しすぎな気がするので、 発表できないかもしれませんが、今後も是非参加させてください!

運営お疲れ様でしたm( )m

f:id:kazuph1986:20161203184912j:plain

IoT製品の生産でIoTする #builderscon / Akerun Advent Calendar 3日目

f:id:kazuph1986:20161203110527j:plain

これはAkerun Advent Calendar 3日目の記事です。 一昨日・昨日に引き続き kazuph が担当します(`・ω・´)ゞ これで一旦休憩です。

つい先程ですが、こんな内容を発表しました。

Akerunを製造する際のツールをIoTでつくったという話でした。

builderscon.io

会場の殆どの人がAkerun知っていたし、Twitterとかみると好評でだったみたい良かったです。 新婚旅行を早めて発表した甲斐がありました(汗)

ソースを使った説明が少なかった分は、今後のAdventカレンダーにご期待下さい!










ちなみに新婚旅行は京都でした。

f:id:kazuph1986:20161130174807j:plain

京都でした。

f:id:kazuph1986:20161201145838j:plain

京都でしたね。

f:id:kazuph1986:20161129172547j:plain

京都です。

f:id:kazuph1986:20161201111134j:plain

最高でした。

IoTの開発に必要なグルー思考 / Akerun Advent Calendar 2日目

これはAkerun Advent Calendar 2日目の記事です。 昨日に引き続き kazuph が担当します(`・ω・´)ゞ

今回は自分が日頃意識してる”グルー思考”の話をしたいと思います。 ポエム度高め注意です。

グルーは糊、組み合わせ思考で解決策を考え出す

glue / glu: / 接着剤、またはくっつけること

IoTは様々なレイヤーの組み合わせで実現していますが、そもそもなんでハードウェアをつくろうと考えたかで言えば、解決したい問題がありかつそれがソフトウェアだけでは解決困難なものだったからです。

「鍵をデジタルにしたい」

これを解決するために、きっと今までのようにWebエンジニアとして生きてきた自分の思考なら、ハードウェアを開発して解決しようということまでは考えなかったと思います。 今までは”自分ができること”に思考が支配されていましたが、それが仲間を集め「必要ならハードウェア開発することが可能」な状態になったことで、思考の幅がグンと上がりました。

つまり色々なスキルを”くっつけ”合うことで、できることが幅が広がったのです。

できないことへの無意識のフィルタリングを外す


人間は最適な解決策があっても、”自分”が”できる”じゃないと見て見ぬふりをしてしまうものです。 僕達が開発した「Akerun」というスマートロックは”みんな”で”できる”になったから発想として具体化し実際に世に出ました。 これは自分の頭だけでは実現できなかったことなので、素晴らしいことだなと思います。

ただし、もちろん最初は”できる”が本当の意味でできる状態ではなく”できそう”くらいから始まります。 “できそう”だったらまだいいのですが、”できない”と思ってしまっていることへは、はやり人間は対処が難しいです。

若いときは往々にして”できそう”が”できる!”に倒れてくれますが、年を取ると”できそう”なのに”できない”に倒しがちです。 その方が疲れないとか、お金がかからないとか、家庭が平和になりそうとか、そういう過去の経験則からそうやってしまいますが、それこそ老害への一歩ということで、もし”できそう”を”できない”に倒してしまっているときは”本当にできないか?”を自問自答したいと思います。

話がそれましたが、”できそう”では例え若くても”できない”と思ってしまったり、”できそう”だから挑戦してもやってみたら”できなかった”ということも多くあります(そうして丸くなる)。 それを解決する自分なりの方法は、「常に自分のできることを常に増やすように行動する」です。

“できそう”だなと思っても”できるかわからない”と人間は行動に移せない言い訳を探してしまいますが、”過去にできた”ことがある経験があると、一気に”できそうが””できる”に変わります。 過去に実際にはやったことがなくても似たようなことをやったことがあるだけでも違いますので、”できた”ことがなくても”できるだろう”くらいには昇格できると思います。 課題を見つけたときに“できそう”と思ったあと、できるだけ素早くそれが”できる”になる人はやはり強いです。

「Akerun」をつくったときも電子回路については大学時代に勉強したことがあったので、”できそう”が”できない”に倒れることはありませんでした。

学生時代に「今は意味はわからないかもしれないけど将来役に立つことがあるから」と先生に教わりながら勉強したことは無駄ではなかったんです笑 そのために常に今は使わないことでも色々勉強して触っておくことが重要かなと思います。

自分の立場を一歩捨てて思考してみる

自分は長いことWeb・iOSエンジニアとして活動してきて最後に組み込みをやりましたが、それによってエンジニアとしてはどっちつかずなアイデンティティになったと思います。 ただ一時期割りと長い期間iOSエンジニアをやっていたためか、思考が偏り課題を解決するためにiOSを使うケースが多かったとも思っています。

それは今もそうだし、実際社内の運用ツールをiOSで爆速で実装できるのでうまくことも多いのですが、そのせいで最高の解決策を導き出せてないと感じるときもあります。

細かい話でいうと、iOSはBLEデバイスに接続する場合にMACアドレスでフィルタリングできないのですが、Androidならできます。自分はAndroid自体の開発経験もあるのですが、今では相対的に慣れてないために選択肢に上げないことがほぼほぼです。

これはいつももったいないことだと思っていて、なにが最適な解決策なのかの前に自分のスキルを持ってきてしまっていることです。 ”iOSエンジニアとしての自分”を捨てれば今からでもちゃんとAndroidを習熟し直して、最適なツールをAndroidで書いてもいいのです。

何が言いたいかと言えば、何かをやるときに自分の立場や利益を大事にしてしまいがちですが、他の人にお願いすることで本当に価値のある解決策を導き出すこともあるということです。

今回のAkerunではまさにソフトだけでは解決できない問題をハードのメンバーとも一緒に解決しました。 スマホアプリだけでは解決できないけど、ハードをつくれば解決することは世の中には結構あります。

自分が一番得意な解決策に固執しつせず、多レイヤー、多分野、多視点で思考できるといいなぁと毎回思います。

まとめ

簡単ですが、自分が普段意識しているグルー思考について書いてみました。 一つのツールや一つのスキル、一つの思考にとらわれず常に自分を広げながら”できない”をことを減らす行動をすることで、IoTでの開発もスムーズに行くのかなと思います。

ということで今日のポエミーな話を終えたいと思います。

明日の担当も僕です!お楽しみに!

IoTの開発に必要なスキルセット Akerun Advent Calendar 1日目

IoTの開発に必要なスキルセット / Akerun Advent Calendar 1日目

記念すべきAkerun Advent Calendarの第一日目は、スマートロックロボット「Akerun」を開発している株式会社PhotosynthのCTOの @kazuph が担当させていただきます。

今回はBLEを含むIoT製品制作のための設計に必要な能力の話です!

まずすべてを見ることをあきらめて仲間を探す、そして頼る

どんなプロダクトもそうかもしれませんが、取り分けIoT製品はカバーしないといけない領域が普通のWeb系のプロダクトに比べて膨大です。

インフラやサーバーサイドでのアプリケーション開発の能力はもちろんのこと、Bluetooth Low Energy(以下BLE)を使うなら、BLE自体の規格の知識とiOSAndroid自体の開発スキルに加えてBLEまわりの開発スキルが必要です。

ここまででも全体の1/3〜1/5くらいのカバー度。

そして問題のハードウェア部分の知識は、IoTの”I”の部分の量かそれ以上あり、かつネット上に落ちてないことがほとんどです。

最近ではハードウェア関連の情報もネットに落ちる始めて来たかもしれませんが、大手メイカーの中にある情報はまだまだ大きく、何回もサイクルを回してきたなりの経験と実績があります。

そのような知識を今この瞬間Webエンジニアである人が集めようしても難しいものがあります。そして僕自身、習得のための膨大な年限をかけた車輪の再発明をする無駄を考えると、1人では匙を投げていたと思います。

だからこそ、IoTという製品をつくるときは仲間が重要です。

最近ではハードウェアのものづくりなどの知見を共有し合う品モノラボというコミュニティ(http://www.ashita-lab.jp/tag/%E5%93%81%E3%83%A2%E3%83%8E%E3%83%A9%E3%83%9C/)があったり、DMM.make AKIBAなど人と人をつなぐことでまさにネットだけでは習得できないであろう知識を得る場があります。

もしこれからハードウェアをインターネットに接続して何かやりたいと思っている人は、まずはすべてを自分でやろうとせずに、仲間(そうでなくても話の聞ける相談相手)を見つけるところから探してみてもいいかもしれません。

IoT製品のソフトウェアの設計

ということで、暗に僕自身はIoTのすべてを把握しているわけではないという言い訳を言う土台ができたところで、Web出身者である僕がIoT製品を設計・開発するために必要だったスキルセットを並べてみたいと思います。

Web関連の知識と実装経験全般

この辺はこのカレンダーに気づいて読んでくれている読者の人たちは大体Web系だろうということで雑にまとめます。 例えばAWSでサーバー構築して、Railsでアプリケーション開発ができ、ついでにスマホアプリの開発経験があれば十分です。

あとは、Webまわりの設計を過去にどれだけやっているかで、IoTのプロダクトについても同じような勘所で思考すれば設計できると思います。 結局は相手側の要件定義がしっかりしているかの話が重要だと思います。

(仕様上必要なら)BLEの知識と実装経験

BLE自体は必須というわけではありません。ハードウェア自体に3G/4GやWi-FI搭載させているケースも多いです。 ただし、IoTという言葉が流行る背景に、沢山のセンサーデバイスがBLEによってボタン電池程度でも実用的な稼働時間になった、という部分があるので、BLEも考慮することで届けたい価値の実現性が上がることがあります。

BLEではない通信規格ももちろんあるのですが、現在販売されているスマホにはBluetooth(BLE)しか積まれてないものが大半なので、スマホの連携まで考えると必須になって来ます。

ですので、デバイス自体の電池寿命やスマホとの連携を考慮する必要がないのなら、あまり必要にはなってこないかもしれません。 開発コストでいうならば、BLE自体の概念を理解し、ハード側のチップでの実装に加えiOS/AndroidでのBluetooth制御、そして多端末対応までも行うことを考えてもこれだけで膨大になります。 人件費含めた出費を抑えたいのならBLEありきの設計にそもそもしないということも考慮に入れてもらえればと思います。

組み込み(ファームウェア)の知識と実装経験

組み込みの場合は、まず仕様するチップ/マイコンを選定し、それで動作するようにCなどのプログラミングを行います。 ベースとしての組み込みC言語の知識に加えてチップごとの開発環境構築・独自の仕様の理解が必要です。

BLEのチップについても、チップの製造元によって完全に開発の方法が変わってきます。 この辺で使いやすいものを選ぶことで、後々の開発のスピードが変わってきます。

半年ペース後くらいには、また別の良いチップが発表されていたりするので、その時々で調査をし、自分たちの製品にとって最適なものを選ぶ必要があります。

電子回路の簡単な把握

電子回路の開発をする場合は、当然深い理解が必要なのですが、自分やらずに仲間に頼れる場合は、仲間が書いた回路図・アートワークを最低限”読める”必要があります。 自分は書かれた回路図を丁寧に回路エンジニアから教えてもらって、その時に大体ファームウェアを実装する上で必要な回路の知識は理解できました。 ほとんどをデジタルなロジックに落とし込むことが可能なので、「デバッグ」と「低消費電力化」に遭遇しなければ、ある程度動くものはできると思います。

遭遇したらあきらめて回路のエンジニアと一緒に降りていきましょう。

筐体の物理的な動作の理解

モーター駆動するような製品の場合は、”物理”のお時間になります。 実際に僕もホワイトボードにxy座標をプロットして、制約条件や、駆動の法則を数式に落とし込みファームウェアで実装するということがありました。

ただあまり臆することはなく、メカニカルなハードウェアも場所ごとにモジュール化してつくれるので、回路やファームウェアレベルだと抽象化されていることがほとんどです(例えばギアが複雑に収まっているギアボックスなどは、特に内部の動きのすべてを把握する必要はありません)。

最後にセキュリティ

勉強しましょう。Webの知識があればある程度ファームウェアなどでも応用は効きます。TLSの原理などもそのまま適用できるケースがあります。

そしてつくったらちゃんと有識者に検証してもらいましょう👀

まとめ

ということで、僕目線で必要そうに思ったことをおおざっぱにまとめて見ました。 ハードウェア目線なことは(特に製造)、できればもう一人いる別のエンジニアに詳しくまとめてほしいなぁと思っているので、お楽しみに!