exports.handler = (event, context, callback) => {
    var request = require('request');

    //ヘッダーを定義
    var headers = {
        'Authorization':'Bearer ' + process.env.ACCESS_TOKEN // Lambdaの環境変数で指定
    }

    //オプションを定義
    // ORGANIZATION_IDはO-ddddd-dddddみたいなフォーマットID
    // AKEURN_IDはA1XXXXXXみたいなフォーマットのID
    var options = {
      url: 'https://api.akerun.com/v3/organizations/' + process.env.ORGANIZATION_ID + '/akeruns/' + process.env.AKERUN_ID + '/jobs/unlock', 
      method: 'POST',
      headers: headers,
    }

    //リクエスト送信
    request(options, function (error, response, body) {
        console.log("Done Akerun Unlock Request");
        console.log(body);
    })

    callback(null, 'done ;)');
};

Lambdaのコンソールで環境変数が指定できるので、クレデンシャルは隠蔽してます。またLambdaだとrequest モジュールがないので、ローカルで一度npm install的なことをして、メインのjsファイルとnode_modulesをzipで固めてアップロードします。

mkdir test_dir
yarn init
yarn add request
touch index.js
zip -r test.zip index.js node_modules

アップロード後はコンソールに展開され、そのまま編集できます。右上の保存ボタンを押し、テストボタンを叩くと、実際に処理されます。

その後、冒頭のサイトの手順に従ってAWS IoT 1 clickサービス上でデバイスとLambda関数の紐付けをすれば完成です！

注意点

Lambdaがテスト時は成功するがButton経由では発生しない場合は、タイムアウトしている可能性がある（実際デフォの3秒から30秒に増やしたらリクエストされるようになりました）

実際の動作

正直AWSボタンを押してから開くまで10秒程度かかりますが、そのほとんどがAWSボタンがWi-Fiにつながるまでの時間でした。瞬時に開けたいニーズには応えられませんが、ポケットに入れておいて近くなったらボタンを押すみたいな感じの使い方なら問題なさそうです。

近況報告

僕とあともう一人のエンジニアの2つのプロポーザルが通りbuildersconにて発表できることが決まりました！

builderscon.io

どちらの発表もガチガチハード系（ものづくり）になります！ご期待下さい！

募集

フォトシンスでは一緒にものづくりができるエンジニアを募集してます！！！

www.wantedly.com

2018-06-28

draw.io で書いた画面設計書いてみたらストレスフリーになった〜続・gitbookで設計書を作成したら最高だった話

こんにちは

フォトシンスでソフトウェア開発のマネージャーをやっている @ishturky です。

今日のエントリーは、以前書いた「gitbookで設計書を作成したら最高だった話」の続きです。

akerun.hateblo.jp

こんなコメントいただいております。

f:id:photosynth-inc:20180628135633p:plain

はい。これはとても悩ましいですね。僕自身もとても悩んでまさに試行錯誤していました。

今回は、「draw.io」というツールを使ったらとても連携しやすかったのでご紹介します。

draw.io

about.draw.io

どんなツール？

ざっくり以下です

VisioやCacooなどに代表されるお絵かきツールです
ブラウザ上で動きます（Desktop版もあり）
Drag and Drop で図を配置して線でつなぎます。フローチャートやワイヤフレームなどなど色んな用途に。
いろんなステンシル（テンプレ）が用意されています（スマホ画面やAWSのアイコンなど）。もちろん自作を追加も可
保存は Web上（Google docs、OneDrive、Dropboxなど） ※ 使ってませんが、Desktop版ならローカル保存も可能な模様
画像形式でエクスポート可能

良くも悪くも期待値通りという感じです。

操作感

やや直感性に欠ける感じがしますが、慣れれば問題ないレベルです。（自分はVisio経験者）

ちょっともっさりです

価格

無料です。そうです。無料です。大事なことなので（ry

どこが良かったのか

ここまではあるあるツールなのですが、僕が一番気に入ったのはこれです。

画像形式で直接GitHub にコミットできる

f:id:photosynth-inc:20180628142655p:plain

画像ファイルのエクスポート先としてGitHubを選ぶと、OAuth で認証します。認証できたらアカウントが権限をもっているリポジトリ⇢ブランチ⇢保存パスの順に指定できます。

GitHubにコミットできると、なぜいいのか

前回のgitbookのエントリで書いたように、僕らは gitbookで書いた設計書をGitHubで管理しています。

Before

今までの運用だと

ドローイングツールで画像を作成 or 編集
保存
ローカルにファイルをエクスポート
ローカルでgit commit
git push

という手順でした。これが編集のたびに発生します。結構だるい。だるいとどうなるかというと、コミット漏れが発生します。編集したくなくなります。メンテされてない設計書の出来上がりです。

After

draw.ioで画像を作成 or 編集
保存
github にコミット

これは完全にストレスフリーです。イイ！

gitbook の設計書からの参照の仕方

コミットされた図が反映される
設計書から編集画面に直接いける

と気持ちいいので、僕は↓のように書いて画像を参照してます

 # ほげらの画面設計
 
[![ほげらの画面設計](image/HogeraDesign.png)](https://www.draw.io/#drawio編集画面のURLを貼り付ける)

最後に

webツールがGitHubとネイティブで連携するとこんなに気持ちいいものなのかと。直接の性能も重要ですが、親和性って大事ですね。

皆さんの設計書が継続的に生き続けられるきっかけになれば幸いです。

募集

フォトシンスでは一緒にものづくりができるエンジニアを募集してます！！！

www.wantedly.com

2018-01-09

Google Home と Akerunで簡単スマートオフィス

CTOの@kazuphです（この記事は前年のアドベントカレンダーの居残りエントリーです(汗)）。

Google Home、みなさん買いましたか？

僕という意味では会社で2台、家用に1台購入して遊んでいます。 HomeごとにGoogleのアカウントを分けて管理できるので、プライバシーも守られていていい感じです。

うちの会社では元々数台のChromeCastを使って遊んだり業務用に使っていましたが、ここにGoogle Homeを加えたときにどうなるかやってみました。

やりたいこと

手っ取り早くAkerunと連携したい
受付に人が来たら音声で教えてほしい

ということでやってみましょう。

Akerun連携する

Akerunで開閉があったらGoogle Homeが教えてくれるようにしてみましょう。

今回は全部ができる一つのプログラムを書くのではなく、一つのことをする複数のプログラムを掛け合わせてて作成します。

Akerunで投稿があったらSlackに通知する

方法はいくつかあります。

YahooさんのmyThingsを使う(プログラミングなし)
公開版のAkerun 履歴 APIを使う
(中の人のみ)社内向けのAkerun APIを使う

myThingsさんの方法が簡単です。ですが、こちらである程度制御したかったので、今回は社内向けのAPIでやってしまいましたのでソースは割愛(え)。

Slackの通知を見てGoogle Homeにテキスト送信

ここでは特定のSlackチャンネルの投稿があったらGoogle HomeのAPIを叩くことを考えます。言わば中継役です。

今回はGASで実装してみました。

doPostで

Slackからのoutgoingのwebhookのmessageを受け取り
ローカルネットワーク内で立ち上がってるサーバーのngrok上でのURLの受け取り

をやっています。

テキストで受け取った場合は、それをそのまま後述するngrokで公開されているURLにポストします。ngrokのURLは起動時に毎回変わるので、今回はそのURLを中継役のGASにpostすることで、プログラムを書き換えなくても自動で連携するようにしています。

function doPost(e) {
  if ("AAAAAA..." === e.parameter.token) { 
    var text = e.parameter.text;
    text = text;
    return request(text);
  }
  if ("BBBBBB..." === e.parameter.token) {
    var url = e.parameter.url; 
  　　 var sheet = getSheet("google home api");
    sheet.getRange(2,1,1,1).setValues([[url]]); // getRange(開始行、開始列、行数、列数)
    return "ok";
  }
} 

function request(text) {
  try {
   var sheet = getSheet("google home api");
   var url = sheet.getRange(2,1,1,1).getValues()[0][0] + '/google-home-notifier';
  　　var urlFetchOption = { 
    　　　　'method' : 'post',     
    　　　　'contentType' : 'application/x-www-form-urlencoded', 
    　　　　'payload' : { 'text' : text}  
  　　}; 
 
  　　var response = UrlFetchApp.fetch(url, urlFetchOption); 
  　　return response; 
  } catch (e) {
    var sheet = getSheet("gaslog");
    sheet.appendRow([e]);
  }
}

function getSheetApp() {
  return SpreadsheetApp.openById("<NGROKのURLを保存しているシートのID>");
}

function getSheet(name) {
  var sheetApp  = getSheetApp();
  var sheet     = sheetApp.getSheetByName(name);
  return sheet;
}

このGASのスクリプトもスクリプトエディタの「公開＞ウェブアプリケーションとして導入…」から公開しておきます。AAA...とBBB...となっているトークンはそれぞれ、SlackのWebhookとGoogle Home側のネットワークに自前で立てたサーバーからのトークンを設定してください。

Google Homeでのテキストの受け取り

今回はGoogle Homeと同一のネットワークにいるラズパイにソースコードを置き作成しました。google-home-notifierとngrokが便利すぎますね。

var express = require('express');
var googlehome = require('google-home-notifier');
var ngrok = require('ngrok');
var bodyParser = require('body-parser');
var app = express();
const serverPort = 8091; // default port

var deviceName = 'Google Home';
var ip = 'XXX.XXX.XXX.XXX'; // default IP

googlehome.device(deviceName, 'ja').accent('ja').ip(ip); // 日本語で喋ってもらうために必要

var urlencodedParser = bodyParser.urlencoded({ extended: false });

app.post('/google-home-notifier', urlencodedParser, function (req, res) {

  if (!req.body) return res.sendStatus(400)
  console.log(req.body);

  var text = req.body.text;

  if (req.query.ip) {
     ip = req.query.ip;
  }

  var language = 'pl'; // default language code
  if (req.query.language) {
    language;
  }

  googlehome.ip(ip, language);

  if (text){
    try {
      googlehome.notify(text, function(notifyRes) {
        console.log(notifyRes);
        res.send(deviceName + ' will say: ' + text + '\n');
      });
    } catch(err) {
      console.log(err);
      res.sendStatus(500);
      res.send(err);
    }
  }else{
    res.send('Please GET "text=Hello Google Home"');
  }
})

app.listen(serverPort, function () {
  ngrok.connect(serverPort, function (err, url) {
    // GASにngrokのURLを通知する
    request.post('<GASの公開URL>', {form:{token:"BBBBBB...", url: "url"}})
  });
})

まとめ

駆け足でしたが、Google HomeとAkerunを連携する方法を紹介してみました。実装上はSlackを経由する必要はない例でしたが、Slackにも通知した上でGoogle Homeにも喋って欲しいケースはあるかなと思いこちらの方法を採用しました。手順は多いですが、段階を踏むのでデバッグも便利です。

弊社ではKitayo...じゃなかった、receptionistを使っていて、Slackで受付情報をもらっているので、合わせて執務室内のGoogle Homeに音声で教えてもらうと便利なのかなと思っています（音声でそれを聞いた結果誰がどう受付対応するのかという話が別でありますが）。

ラズパイや不要なPCがあれば、任意のテキストを喋るGoogle Home APIを簡単につくれるので、色々な連携には便利なのかなと思いまいた。皆様も是非やってみてください。

告知

弊社ではエンジニアを募集しています！

www.wantedly.com

2018-01-08

僕が考えるサラリーマンエンジニアに必要な「設計力」

はじめに

こんばんは。Akerunエンジニア @ishturk です

今回はポエムです。

スタートアップで働くサラリーマンエンジニアがソフトウェア開発を実現するために大事だと思う技術について書いてみます。

うそっ私の技術力、低すぎっ

f:id:photosynth-inc:20180108193938j:plain

（数年前に新卒で入社した頃の僕の話です）

新卒入社したてほやほやの僕は当然、技術ゼロでした。当然自信もへったくれもない。技術力にあふれるエンジニアがいっぱい。

目をキラキラ（どちらかというとギラギラ）させていた僕は思いました。

「この人達はめちゃめちゃいろんなことを知っているんだろうな。たくさん勉強せねば」

ところがどっこい。入社して数ヶ月の僕は気づきました。

「あれ、（プログラム言語のことなら）知識そんなに変わんなくね？」

しかし、彼らには間違いなくプロダクトを完成させる力があります。僕には無理です。何が違うのでしょう。

製品を完成させるために必要なもの

製品、いわゆるプロダクトやサービスを完成させるには、知識だけでは足りないのです。

いろんな知識を掛け算した「技術」が必要なのです。

たとえば

アルゴリズムに詳しい人は「技術がある」か？否。「知識がある」ですね。

アルゴリズムに詳しい
言語仕様をちゃんと知っている
Linuxのコマンドをいっぱい知っている
プロトコルを理解している
暗号化理論について語れる
デザインパターン賢者

などなど。

これらはすべて「知識」です。

知識を製品に変える技術 = 設計力

設計と一言にいってもいろいろありますが、僕の経験からは、「どの知識」を採用して「どう組み合わせるか」を「最適化」したものを「アウトプット」するスキルだと思っています。

ここで「最適化」という言葉をあえて使っているのは理由があって、サラリーマンエンジニアなら、開発対象には必ずプロダクトコンセプトや、納期、生存期間があります。

重要な部分は緻密に設計し、納期にミートする内容で設計し、生存期間の長いソフトウェア（またはその一部）の場合はメンテしやすい工夫をする。重要じゃない部分は工数最低限になるように設計する。これが設計力。

そして、「アウトプット」。

形はなんでもいいです。設計書でもUML図だけでもコードスケルトンでも。あ、ソースコードでもいいかな（ガソリン投下）

「アウトプット」がないとどれだけスバラシイ設計でも0点になってしまいます。（ただの妄想だもの）

そして、レベルアップするにはアウトプットを繰り返すことが非常に重要だと僕は感じています。

使う技術

設計するには当然「知識」が必要ですが、設計しているスコープのすべてを完璧に知るのは不可能ですよね。

社内（あるいは委託先）にその道のスペシャリストがいたらもう最高。ぽいっと丸投げしちゃいましょう。

OSSや、ロイヤリティを払ってライブラリを使用するのもいいでしょう。

丸投げできない場合は、有識者じゃなくていいので、複数のエンジニアで意見交換をしましょう。

周りをうまく使うのも大事な技術ですね。（リソース管理の話ではないです。）

重要なのは、無理して自分だけでやろうとしないこと。じっくり煮込んだクソコードが出来上がります。

実装力

「設計できていればその通り実装するだけでしょ」そう言い放つマネージャー職もいますね。きっと現役時代はクソコードを量産してきたことでしょう。今日は深く掘りませんが、以下に僕が意識しているキーワードを挙げておきます。

「わかりやすく書く」（短く書くではない）
「バグを潜ませないように書く」
「あらゆるパターンに対応する」
「適度に手を抜く」

自分の技術、確認してみませんか？

僕がいままで一緒に仕事をしてきたエンジニアでイケてる方々はほぼ例外なく、「アウトプット」が上手い人達でした。

なぜなら、「アウトプット」をすると「フィードバック」があるから。そこでブラッシュアップされ、知識が増える。

何度も「アウトプット」をすることでみせ方もうまくなる。

「アウトプット」とあわせて、「レビュー」することは、クオリティをあげる目的だけでなく、技術レベルをあげるのにも非常に有効です。

僕らはスタートアップです

僕は、新卒で入社した大手企業を退職し、現在はスタートアップでエンジニアをやってます。

駆け出しのスタートアップの場合、同じレイヤーのエンジニアが社内にいることは稀でしょう。

それでも（だからこそ）設計レビュー・コードレビューは重視したいと思ってます。毎回、新しい発見があり、

誰かに説明するだけで自身で気づくことも多いです。人間だもの。

ひとりで全部やる時代は終わっています。

社内外のエンジニアと、どうコミュニケーションしていくかでエンジニアライフも、大きく変わると感じています。

告知

弊社ではエンジニアを募集しています！

www.wantedly.com

2017-12-26

gitbookで設計書を作成したら最高だった話

こんにちは。Akerunエンジニアの @ishturk です。

Akerun Advent Calendarの記事です。

今日は設計書の話です。

設計書をどんなツールで書くかは、僕らソフトウェアエンジニアの尽きない悩み（楽しみ）ですね。

最近はまったツールが最高に良かったので紹介させてください。

僕のツールに求める要件は以下です。

編集がカジュアルにできる
UMLが書ける。あとから編集できる（画像での貼付けは編集できないのでNG）
バージョンの管理ができる
好きになれる（重要）

変遷と pros/cons

MS Word

pros

良くも悪くもスタンダードなツールですね。

だれでも編集できるのが強みです。

Visioと組み合わせれば、UMLも後から編集可能です

cons

Visioは標準にするには少々値が張ります。

バイナリ形式なのでバージョン管理はしづらいです。

ページが増えたり画像を貼ったりすると重くなって詰みます。

sphinx

pros

テキストベースなのでバージョン管理しやすいです

マークダウンで書けるのもいいです

色々な記法が用意されているので、巨大な設計書も頑張ればスマートに書けます

plantumlとの親和性が高いです

ちゃんとメンテされている

cons

（主観ですが）カジュアルさがちょっと足りない感じ（ごめんなさい）

Google Docs

pros

Wordライクに編集できるので学習コストが低いです

UMLを扱うにはplantuml gizmoのプラグインがgoodです

クラウドなので同時編集ができるのもいいです

バージョン管理は独自機能で（一応）できます

cons

外部サービスなのでそもそも許可してもらえないことが多いですね

こちらも、ページが増えたり画像を貼ったりすると重くなって詰みます

gitbook

pros

テキストベースなのでバージョン管理しやすいです

マークダウンで書けます

plantumlとの親和性が高いです。他のpluginも豊富です

gitとの親和性が高い（gitbookだし）のもいいです

カジュアルさがちょうどいい。僕的にはココがツボ

cons

今のところ不満がないです

gitbook 導入

gitbook とは

Markdown で書かれたドキュメントをツリー形式のhtml文書に変換するツールセット
ビルド、サーバー機能を持つ
ツリーの作り方がシンプル（対 sphinx 比
プラグインに対応
node で動く

導入

nvm + node をいれる

node のバージョンは v5.12 推奨(v6系でも動くらしい)

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
nvm install v5.12
nvm use v5.12

gitbook 導入

npm でinstall します。 npm自体のinstallは省略

npm install -g gitbook-cli

ドキュメントのビルド

tree 構造

.
├── README.md
├── SUMMARY.md
├── book.json
├── docs
└── node_modules

README.md : トップページになります。
SUMMARY.md : ドキュメントツリーを記載するファイル
book.json : 設定ファイル。pluginもココに書く
docs : ユーザーファイルを追加するディレクトリ（SUMMARY.mdで自由に決めてね）
node_modules : nodeですから

README.md を設定しておくと、githubでみても、READMEとして表示されるので、一元管理できるのもいいです。

ビルド

ディレクトリのルートでビルドします。デフォルトはhtmlです。pdfとかも吐けます。

gitbook build

ファイルの追加

この例では、docs/下に文書を作成、配置します。

SUMMARY.md の例。ネストできます。

1 # SUMMARY
2
3 * [概要設計](docs/README.md)
4   * [ほげらの章](docs/hogera.md)

plugin の追加

plugin の導入自体はnpmで。（ちゃんとやるならbuildした時に不足しているpluginをinstallするようにしてね）

たとえばplantumlだと、

npm install gitbook-plugin-uml

導入したら使用するpluginを、book.json に記載します

 1 {
 2     "plugins": ["uml","-search"],
 3     "pluginsConfig": {
 4         "uml": {
 5             "format": "svg",
 6             "charset" : "UTF-8",
 7             "nailgun": false
 8         }
 9     }
10 }

ドキュメントの配信

ローカルので実行

gitbook serve

とすると、webサーバーになってブラウザで閲覧できるようになります

デモ

f:id:photosynth-inc:20171226105330g:plain

Jenkins + git (github) webhook

gitのコミットでwebhookを引っ掛けてファイルを取得すればドキュメントの自動更新を設定できます。

Jenkinsが導入されているサーバーにgitbookも導入してあげれば、簡単に設定できますね。

gitbookのserver機能を使えば、自前のwebサーバーも不要です。

簡単にチームで設計書を共有できて、最高でした。

おわりに

また新しいものが出たらいろいろ試したいですが、しばらくはgitbookでイイ気がしてます。

告知

弊社ではエンジニアを募集しています！

www.wantedly.com

追記

画面遷移などの画像を設計書と一緒に管理する話を投稿しました

akerun.hateblo.jp

2017-12-25

大人がAkerunでIoT鬼ごっこしてみたら最高に楽しかった

Akerun Advent Calendar21日目の記事です。

※ 本記事は Photosynthエンジニアが主催しているイベント記事です。Akerunを本来の目的以外に使用しないでください。

今回はフォトシンス社員有志で、オトナのガチ鬼ごっこをやってきた報告です。

ところで、フォトシンスはIoTサービスを提供している最先端の会社です。

したがって普通の鬼ごっこで満足できるはずがありません。

鬼ごっこもIoTじゃないとね。ええ。

というわけで

Akerun で鬼ごっこしてみた

f:id:photosynth-inc:20171224230320j:plain

今回の戦場はこちら

SWEET GLASS @北軽井沢

f:id:photosynth-inc:20171224230842j:plain

f:id:photosynth-inc:20171224231058p:plain

参加者登録

Akerunには、写真と名前を設定する機能があります。

f:id:photosynth-inc:20171224231218j:plain

この機能を使って参加者を登録してみましょう。

参加してくれた猛者たち。

f:id:photosynth-inc:20171225090740p:plain

ルール

鬼は逃げまどう人々のAkerunをアプリであけて捕獲ください
捕獲したらSlackで通知が飛びます
捕獲されたら鬼に変わります。10秒間その場でフリーズして再開してください
15分経過で鬼だった人が負けです

ルール説明です。真面目に聞いてます。

若干ろくろを回しているのがゲームマスターのぼくです。

f:id:photosynth-inc:20171224232138j:plain

やってみた

鬼はスマホ片手に追いかけてます。

f:id:photosynth-inc:20171225151947p:plain

BLEで捕まえるのでこんな光景も。

f:id:photosynth-inc:20171225152022p:plain

捕まったらslackで通知が飛びます。IoTです。ゲームマスターは走らなくても誰が鬼なのか監視できますね。楽でいいですね。

f:id:photosynth-inc:20171224232850p:plain

f:id:photosynth-inc:20171224232741p:plain

やってみた考察

楽しい
走っているとBLEでなかなか接続できない。これは想定外でした。Central、Peripheral双方が移動していることで、掴みが悪くなっていそうです。
大人がAkerunとスマホをもって鬼ごっこをしていると、こどもたちが興味津々にみてくる（が声はかけられない
大人がAkerunとスマホをもって鬼ごっこをしていると、若者たちも興味津々にみてくる（が声はかけられない
楽しい

事件発生

疲れ果ててコテージに向かっていた参加者たちですが、

「あれ、、、鍵がない。。。」

なんと、はしゃいでいるうちに鍵を落としてしまったようです。（実話）

f:id:photosynth-inc:20171224234000p:plain

今回は幸いすぐにみつかりました。

ですが、物理鍵ってこわいですね。

スマホで鍵をあけられたらいいのに。

後付で設置できたらいいのに。

ん？そんなIoT製品あったような？（ステマ）

Akerun設置してみた

f:id:photosynth-inc:20171224233714j:plain

f:id:photosynth-inc:20171224233831j:plain

ばっちり設置できました。もちろん原状回復できます。外出時の鍵の受け渡しも不要になりました。最高か。（ステマ）

おわりに

北軽井沢でもAkerunがばっちり使えることがわかりましたね。また、IoTのエンターテインメント的な可能性を感じました。

あと、SWEET GLASS さんはとっても快適に楽しめたのでぜひ皆様遊びに行ってください。

告知

弊社ではエンジニアを募集しています！

www.wantedly.com

2017-12-24

Akerunをクリスマス仕様にする（前編）デザイナーとの懸け橋ツールで捗った話

こちらは Akerun Advent Calendar 2017の記事です。

聖なる夜にこんばんは。 yuyakmです。

クリスマスということで、日々接するAkerun Proをクリスマス仕様にしてみたいと思います。

今回は、クリスマスといえばイルミネーションといういことで、LEDパターンを変えてみたいと思います！

製品の点灯パターンについてはこちらの動画をご覧ください。

youtu.be

Akerun ProのLED仕様

①フルカラーのLEDを4灯搭載

左上                   右上
LED1(R, G, B)         LED4(R, G, B)

左下                   右下
LED2(R, G, B)         LED3(R, G, B)

②各 RGBは8bit(0-255)の幅で明るさを設定することができる

ディスプレイのように任意の色を表現することができます。

スペック上は、256 * 256 * 256 = 16,777,216通りの色が表現できます。

③4灯のLEDの色を個別に更新できる

例えば、20msecおきに色を更新することでリフレッシュレートが50Hzのディスプレイのようにふわっと点灯させたり色をじわーっと変える表現ができます。

点灯パターンを考える

今回は、3つの点灯パターンをこんな感じに変更してみたいと思います。

1. 接続時

→赤・緑のクリスマスカラーでふわっと点灯

2. 施錠時

→赤・黄のイルミネーション風点滅をした後に、サンタ帽イメージカラー（赤・白）で点灯して消える

3. 解錠時

→緑・黄のイルミネーション風点滅をした後に、もみの木イメージカラー（緑・白）で点灯して消える

点灯パターンをつくってみる

@ishturk さんが便利なツールをつくってくれているのでそれを使ってつくります。タイトな開発スケジュールの中、こういう社内連携用の機能もサクッとつくって提案してくれてホント最高。 f:id:photosynth-inc:20171224220613j:plain

点灯パターン検討の流れ

1. スプレッドシートでデータ作成

自動的にPro用データに変換してくれる！

2. 作成されたPro用データを専用Proに流し込む

確認＆調整がエンジニアなしでできる！

3. 完成したら@ishturkさんにOTAイメージをつくってもらって実機で運用

いつも近くにいて一瞬でやってもらえるのもありがたい…

作成データ例

こんな感じでセルに値を入れるだけでできます。

リフレッシュのインターバル時間も入力できるので表現の幅が広がる～ f:id:photosynth-inc:20171224220619j:plain

点灯させてみた

こんな感じになりました

youtu.be

けっこうクリスマスっぽい！雪が積もったもみの木（解錠）とサンタ帽（施錠）に見えないこともない。

色の変化のスピードや微妙なグラデーション変化を何度かトライして改善しました。

また、今回の試行錯誤で24Hz(fps)以下にすると映像と一緒で明確にカクカク感を感じることを実感。

社内向けに適当に作った割には良いのではないでしょうか。

ただし施錠パターンについては、最初はサンタ帽に見えたけど今はモンスターボールにしか見えない…

製品でLED点灯パターンを考える上でのTIPS

今回はネタ記事ですが、TIPS的なことをざっくり紹介します。

そもそもLEDに頼りすぎない

LEDのインジケーターで表示できる情報量には限りがあるので、できるだけシンプルな方が良いです。アクセシビリティの観点で、色がわからない・光が見えない人でも使えることを考慮しましょう。

微妙な色の違いはユーザーは気づかない前提で考える

例えば、赤と朱色で意味が違うことに気づいてもらうのは難しいです。色にメッセージ性を持たせたい場合は、明確に色が違うと感じるレベルで色を変えると良いです。

色のパターン例

LEDで色に意味を持たせる場合の色の選び方を紹介します。例えば、電話で使い方を説明する場合に言葉で説明しても認識がずれにくいと思います。

＜基本＞

◯赤（R:100%, G:0%, B:0%）
◯緑（R:0%, G:100%, B:0%）
◯青（R:0%, G:0%, B:100%）
◯黃（R:100%, G:100%, B:0%）
△紫（R:100%, G:0%, B:100%）（赤紫や青紫に偏ることがあるので避けた方が無難かも）

これをベースにしてデザイナーの意図する色に微調整すると良いのではないでしょうか。

＜NG＞

✕白（R:100%, G:100%, B:100%）

→RGBのそれぞれを100%で点灯しても人間の視覚上白に見えるバランスで点灯するとは限らないため環境光の色温度等によっても影響を受ける（青白く見えたりオレンジ色に見える）ため

✕シアン（R:0%, G:100%, B:100%）

→青と混同されるおそれがあるため

※勿論、グラデーションの表現をしたり微妙な色味を調整するのはOKです

モニタのRGBとLEDの色は違うと認識する

RGBの値が同じなら同じ色になるわけではありません。AkerunProでは実機の発色を見ながら調整しました。

個体差による色のバラつきがあることを認識する

モノなので多かれ少なかれ色のバラつきは生まれます。細かいことを言うと、同じ基板上の4灯のLEDも全く色や明るさで光ることはできません。仕様の時点で色のバラつきの許容度は大きい方が良く、色を管理したい場合は別途検査やキャリブレーションの方法を考えましょう。

少しでも電池持ちを良くするために

*  点灯時間をできるだけ短くする
*  必要最低限の明るさにする
*  消費電力が大きい色は長時間点灯させない

白（255, 255, 255）＞黄（255, 255, 0）＞青（0, 0, 255）＞赤（255, 0, 0）の順番で消費電力が大きい。

まとめ

デザイナーとエンジニアの架け橋となるツールをつくることで生産性アップ
エンジニアなしで気軽にトライできる環境があることで生まれるものがある

次回は筐体の装飾的にクリスマス感を上げた記事を紹介したいと思います。

求人

フォトシンスでは、他レイヤーと協力しながら一緒にものづくりができるエンジニアを募集しています！ www.wantedly.com

やりたいこと

必要なもの

前提

AWS IoT Button Enterpriseのアクティベート

Lambda経由でAkerunを開閉する

注意点

実際の動作

近況報告

募集

こんにちは

draw.io

どんなツール？

操作感

価格

どこが良かったのか

GitHubにコミットできると、なぜいいのか

Before

After

gitbook の設計書からの参照の仕方

最後に

募集

やりたいこと

Akerun連携する

Akerunで投稿があったらSlackに通知する

Slackの通知を見てGoogle Homeにテキスト送信

Google Homeでのテキストの受け取り

まとめ

告知

はじめに

うそっ 私の技術力、低すぎっ

製品を完成させるために必要なもの

たとえば

知識を製品に変える技術 = 設計力

使う技術

実装力

自分の技術、確認してみませんか？

僕らはスタートアップです

告知

変遷と pros/cons

MS Word

pros

cons

pros

cons

pros

cons

gitbook

pros

cons

gitbook 導入

gitbook とは

導入

nvm + node をいれる

gitbook 導入

ドキュメントのビルド

tree 構造

ビルド

ファイルの追加

plugin の追加

ドキュメントの配信

ローカルので実行

デモ

Jenkins + git (github) webhook

おわりに

告知

追記

Akerun で 鬼ごっこしてみた

今回の戦場はこちら

参加者登録

ルール

やってみた

やってみた考察

事件発生

Akerun設置してみた

おわりに

告知

Akerun ProのLED仕様

①フルカラーのLEDを4灯搭載

②各 RGBは8bit(0-255)の幅で明るさを設定することができる

③4灯のLEDの色を個別に更新できる

うそっ私の技術力、低すぎっ

Akerun で鬼ごっこしてみた