Make Local Happiness

自分の幸せは自分で作る!!!

AmazonDashButtonを使って、結婚式の披露宴で「プロポーズ応援謎解き」をやりました

f:id:iwate_takayu:20180429141814p:plain

先日友人の結婚式があり、 そこで、新郎がプロポーズをしたことがなかったという事で、 その手助けをするというストーリーでAmazonDashButtonを使った謎解きを作りました。

これは、以前私の結婚式にて謎解きを使ったビンゴゲーム「なぞときBINGO」があり、 私達も同じようなことで何かやりたいと話しが来てやることになりました。

どんな企画なのか?

2人の出会いから「さくら」をテーマにしてストーリを作りました。 「夜桜交流会」という花見がキッカケで出会うことができたので、今回はその時の状況を再現してプロポーズをやり直そうという企画にしました。

f:id:iwate_takayu:20180429143553j:plain

参加者のテーブルには数枚の謎と宝箱を用意しました。 謎を解いて出てきた数字で宝箱を空けると、中に「AmazonDashButton」が入っているので、 そのボタンを押すと、スクリーンに映し出された桜の映像がどんどん満開になっていくという仕掛けです。

f:id:iwate_takayu:20180429144518p:plain

全テーブルのボタンが押されると、桜が満開になる仕組みで、 満開になった状態で新郎新婦に入場してもらい、プロポーズを行ってもらいました。

感想

f:id:iwate_takayu:20180429143547j:plain

披露宴で結構年齢に幅があったので、全テーブルクリアできるか心配だったのですが、 意外と積極的に皆さん問題を解いていたのでよかったです。

制限時間が10分とかなりシビアだったので、 最後には「桜が満開になったらやりたいことを数字にすれば宝箱が開く」という謎解き関係なしの大ヒントで無事全チームクリアすることができました。

もちろん答えは「花見」→「873」ですね。

f:id:iwate_takayu:20180429143542j:plain

プロポーズの答えはもちろんOKだったので、 無事上手くいってよかったです。

あとは、事前に照明や音楽など、もう少し工夫すれば、さらに感動を生むことができたなーと思いました。 照明は最初から暗くしてスクリーンをみてもらえるようにとか、 クリアした時の音楽をもう少し、さくらをイメージしたものに変えてもらうとか、 式場の人にももう少し詳しく話しをしたほうがよかったです。

1番心配していたAmazonDashButtonが押しても反応しないという現象は、 本番ではほとんど障害は起きなかったのでホッとしました。

まだ売れる形にはできていないので、 これもテーマを変えて商品化できたらと思います。

もしほしい人や使って見たい方はTwitterにでもDMください。 タイミングが合えば反応できます。

「サーバーレスアプリケーション開発ガイド」の感想

f:id:iwate_takayu:20180408171338j:plain

ここ2、3年はインフラ周りをDynamoDBでAPIはAPIGatewayとLambdaを組み合わせで サーバーレスな構成で開発しています。

ただ、サーバーレスな構成はある意味まだ「ドリーム」的なところがあり、 実際にどんな使い方ができるのかの実施例はまだ少なく、私自身も試行錯誤してる部分があります。

最近ですが、AWSの西谷さんが、たまたまTwitterでサーバーレスの献本を募集していたので、 面識はなかったのですがツイートしてみたら、なんと頂けたので読んでみた感想を書いていきます。

西谷さん ありがとうございます!!!

感想

誰もが躓く、疑問に思う点を解消しながら手を動かしてサービスを作ることができる本

だと思いました。 サーバーレスを使ってみたい人は主にインフラというよりは、フロントもしくはサーバーサイドのコードを書いている方だと思うのですが、 サーバーレスの構成で何かを作るといった時に、Cognito、API Gateway、Lambda、DynamoDB、S3と幾つかのサービスを組み合わせてサービスを作っていく必要があり、結構敷居が高いと思っています。

それに加え、結構ハマるポイントも多く、まだまだ「とっつきづらい」と思っています。
しかし、この本を読んで手を動かせばSPAのシステムを簡単にサーバーレスの構成で作れると思いました。

私の独断と偏見によるこの本で紹介されていた良かった点を書いて行きます。

章立てとしては、以下のようになっています。

Chapter1 サーバーレスアプリケーションの概要
Chapter2 Amazon Web Service(AWS)利用の準備
Chapter3 インフラを自動化しよう
Chapter4 Twitterのリアルタイム分析をしよう
Chapter5 写真投稿サイトをシングルページアプリケーションで作ろう
Chapter6 サーバーレスアプリケーションのライフサイクル管理
Chapter7 サーバーレスアプリケーションのトラブルシューティング

なぜサーバーレスの構成にした場合にDynamoDBを使っているのか?

これは最初なぜなんだろうと誰もが思うと思います。 DynamoDBはNoSQLの一種で基本的にRDSのような柔軟なSQLが使えません。 さらにJOINもできません。 そのため、今までのテーブルの設計思想が使えません。 検索が貧弱のため、ユースケースに応じたテーブル、インデックス設計をする必要がでてきます。

実際にはRDSも使えるのですが、 運用を考えた上でDynamoDBを使った方がいい理由がChapter5のp.87-90に詳しく書いてあります。 もしDynamoDBを採用する際に、上司が適当にRDS使ったらと言っても対応することができます。

AmazonさんのドキュメントにはLambdaから利用するDBでなぜDynamoDBを利用した方がいいのかは、 詳しく説明してくれていないので、これは非常に助かります。

※ もう1点掘り下げてほしい点があるので記載します。次回作でお願いします! 自分で調べろよという話しですがw

DBへのアクセスを減らす手段として、通常はキャッシュを検討すると思うのですが、サーバレスでどうやってキャッシュの仕組みを入れていくのか?

CognitoUserPoolのセットアップ

ブラウザからCognitoUserPoolを利用した認証を行う場合に、 Clientの作成でシークレットの生成は行わない(GenerateSecret)設定をする必要があります。 今はエラーメッセージが改善されてすぐに気づくかもしれないですが、私は昔ハマった経験がありました。

github.com

When creating the App, the generate client secret box must be unchecked because the JavaScript SDK doesn't support apps that have a client secret.

Cognitoのトークンを利用したAPI認証について

Cognitoで認証を行うとアクセストークン、IDトークン、リフレッシュトークンと3種類のトークンが付いて来ますが、 それぞれ用途が異なっており、API GatewayAPIの認証を行う場合にどのトークンを使えば最初は迷うと思います。

Chapter5ではAPIの認証部分も細かく実装ベースで書かれているので、これもどのトークンで認証すればいいかは迷わず進めます。

SAMの使い方

Chapter6でSAMの仕様について詳しく書かれています。 aws-sam-localというローカル環境を作る機能があり、Cognito以外はローカルで試すことができます。

まとめ

AWS系の本だとAmazon Management Console(AWSの管理画面)を使ってポチポチ何かすることが多いのですが、 Cliを多用して、コードを沢山書いてサーバーレスのシステムを作る手順が踏める数少ない本だと思いました。

サーバーレスで何かサービスを作ってみたいという方にはとてもオススメの1冊だと思います。

同じサーバーレスネタで最近「aws-amplify」というGoogleのFirebaseみたいに裏側をまとめたツールも出てきているので、 時間ができたら試してみたいと思いました。

aws.github.io

「AWS Web Services 業務システム設計・移行ガイド」の感想

f:id:iwate_takayu:20180408131731j:plain

ここ最近技術書を読むことが無くなっていたのですが、作者の金澤さんから献本して頂き、久しぶりに勉強する機会をもらいました。

ありがとう!!

その昔、一緒に社内勉強会でAWSをメンバーに共有する会をやってたのが懐かしいなー、とか思いながら読んでいました。

金澤さんの記事はこちら
www.ketancho.net

この本は誰向けの本なのか?

本の内容としては結構地味だなーと思いつつも、 6章 移行テクニック、7章 運用監視の設計・実施はWEBにあまり出てこない情報が多いと感じました。

AWSでサービス開発しているけど、本番リリースするにはどうすれば?」という時に、 ネットワーク、環境の構築からデータの移行、運用までまとまっているので、 これから本番運用しなければいけないという方にもオススメできる内容だと思います。

なので、業務システムと書いてありますが、SIreに勤めている人以外でも読んでためになる書籍だと思います。
IAMの権限管理とか、VPCの設定とか、Organizationsの設定などは、AWSを使って本番利用していれば誰でも使う機能だと思うので。

感想

この本を読んで、AWSの知らないサービスや機能が増えていることに驚きました。 ここ最近はServerlessFrameworkで利用する機能ばかり使っていたので、 CognitoやDynamoDB、Lambda、API Gateway周りはある程度わかっているのですが、 他はキャッチアップができていませんでした。

VPC周りで「NatGateway」がサービスとして登場していたり、 「StrageGateway」を使ってNFSにする機能、 AMC(管理画面)からの操作を記録する「CloudTrail」、 セキュリティの診断を行う「Inspector」など、 運用で欠かせない様々なツールがリリースされていることを知りました。

ほんとAWSはサービス多すぎるし、毎年新しいサービス出るので、 実際に利用しているサービスや興味があるサービス以外はキャッチアップするのがホント大変ですよね。

この本はすぐ読んで何か環境や設定を試す用途というよりは、 まさにタイトルの通り「業務システムを設計・移行」を行う上で必要なAWSの機能を知ることができる本だと思いました。 Sireで働いている方などは目に鱗な情報ばかりな気がします。

Snowboalなんかは移行をする人以外はほとんど試さない機能なので、 検索しても情報は少ない機能だと思いました。

AWSを使ってシステムを近々設計、リリースするという方はぜひ一度読んでみてください。

create-react-appを使ってElectronをMacでビルドしてRaspberryPiで動作させる

f:id:iwate_takayu:20180212175359p:plain

みなさんはRaspberryPiでElectronのアプリを動かしたことがありますか? RaspberryPiは小型のPCとしてはかなり優秀で、「RaspberryPi3 model B」はメモリを1GB積んでCPUも4コア入っているます。 しかし、そんな高スペックなRaspberryPiでも簡単に動かすことができないのがElectronです。

Electronとはクロスプラットフォームで動作するアプリを作るためのフレームワークですが、 RaspberryPiでも動作させることができます。 以前にRaspberryPiでElectronアプリを自動起動させるための記事も書いたことがあるのですが、 これを試した皆さんならお気づきかと思いますが、RaspberryPi上でのElectronのbuildは時間がかかり過ぎるのです。

ganeza.hatenablog.com

私の開発しているシステムはMacでBuildを実行した場合は数分で終わります。

しかし、RaspberryPiでは3時間もかかるのです。

正直3時間待って本番用のビルドがコケた際には本当に時間が無駄ですし、 トライアンドエラーがなかなかできないので困っていました。

そこでMacでRaspberryPi用にビルドできないかと考えました。 普段GUIの開発はReactを利用しているので、 今回はcreate-react-appを使ってRaspberryPi用にElectronアプリをビルドし起動させるところまで行いました。

create-react-appでElectronアプリを起動する

※ 事前にcreate-react-appのインストールをしてください

こちらの記事を参考にelectron-packagerのインストールまで進めてください

qiita.com

RaspberryPi用にビルドする

Electronアプリをビルドする方法

Electronをpackage化するライブラリは2種類あります。 electron-builderを利用した場合は、インストール型のアプリができます。 今回は手軽に実行したら、そのままアプリが起動する方が嬉しいので、electron-packagerを利用します。

package.jsonを修正する

packageというコマンドを追加します。 package化したフォルダはreleaseフォルダに格納されます。 RaspberryPiのアーキテクチャuname -aで確認することができます。

  "scripts": {
    "package": "electron-packager . electron-react-app --platform=linux --arch=armv7l --overwrite --prune=true --out=release"
  }

RaspberryPiで実行する

$ yarn run build
$ yarn run package

$ zip -r release/electron-react-app-linux-armv7l.zip release/electron-react-app-linux-armv7l/
$ scp release/electron-react-app-linux-armv7l.zip pi@raspberrypi.local:/home/pi/

# connect raspberry pi
$ ssh pi@raspberrypi.local
$ unzip electron-react-app-linux-armv7l.zip
$ cd electron-react-app-linux-armv7l
$ chmod +x electron-react-app
$ DISPLAY=:0 ./electron-react-app

まとめ

Macでbuildしたアプリをraspberrypi上で起動できるので開発が捗るようになりました。 今回作成したリポジトリはこちらになります。

github.com

みなさまよいElectron開発ライフを!

はじめての読書会で「開眼!Javascript」を読んだ

f:id:iwate_takayu:20180202001455j:plain

最近会社のメンバーと読書会をはじめました。 週に1回カフェで30分で1章から3章ほど読み進め、残りの30分で呼んだ部分で意見を言い合うというのをやっています。

これが意外と面白いです。

今回読んだ「開眼!JavaScript」はJavaScriptの言語仕様について解説してくれている本のため、 私にとっては少し退屈で最後まで読めるか心配になる本だったのですが、
時間が決まっていること、意見を言い合うことで楽しく進めることができ、合計5回で読み終えることができました。

呼んだ中で気づいた点について書いていきます。

作者はCodyさんと気づく

本書にはCodyオブジェクトやクラスが多様されるので、嫌でもCodyさんが著者と気づきます。

第1章 JavaScriptオブジェクト

コンストラクター関数という呼び方を知らなかった

デフォルトのプロパティとメソッドを持ったオブジェクトを生成するためのクッキーの抜き型のようなものです。

※ 以下のコードは本書とは異なり、ES6に対応させた形で記載しています。 アロー関数ではコンストラクタとして使用はできないため、functionを使用しています。

const Person = function(living, age, gender){
  this.living = living;
  this.age = age;
  this.gender = gender;
  this.getGender = () => { return this.gender; };
};

const cody = new Person(true, 33, 'male');
console.log(typeof cody);
console.log(cody);
console.log(cody.constructor);

null, undefined, 'string', 0, true, falseはオブジェクトではなくプリミティブ型

プリミティブ型は値そのものが保存される。 オブジェクトの場合は、参照が渡されるため参照元が変更されると参照先も変更される。 よく、オブジェクトを更新する場合に、変数を引き継いた場合に、 値が参照渡しになっている場合があるので注意です。

オブジェクの変更ではObject.assignで新しくオブジェクトを作成、 配列の場合はmapで新しい配列を作成すると安心です。

// プリミティブ型の場合

let myString = 'foo';
let myStringCopy = myString;
myString = null;

console.log(myString, myStringCopy); // 出力:'null "foo"'

// オブジェクトの場合

let myArray = [0];
let myArrayCopy = myArray;
myArray.push(1);

console.log(myArray, myArrayCopy); // 出力:'[0,1] [0,1]'

第2章 オブジェクトとプロパティを扱う

ブラケット記法

※ブラケット記法というのを初めて知りました。

const cody = new Object();
cody.living = true; // ドット記法
cody["living"] = false; // ブラケット記法

delete演算子でグローバルオブジェクトが削除できるわけ

delete演算子はプロパティを削除することができる。 そのため、varやconst、letで宣言した変数は削除できないが、 宣言せずに定義した変数はグローバル(this)のプロパティとなるため、deleteで削除できる。

const a = 1;
b = 1;

delete a; // 削除されない
delete b; // 削除される

第7章 スコープとクロージャ

classではクロージャーが実装できない? functionでクロージャーは作成できるのですが、 classを使ってクロージャー(内部に隠蔽する変数を保持する実装)を作成する方法はなさそうです。 ※ もし実現できる方法あれば教えてください

function版

const Foo = function() {
  let count = 0;
  
  this.add = () => {
    count++;
  }
  this.get = () => {
    return count;
  }
}

const a = new Foo();
const b = new Foo();

a.add();
a.add();
a.get(); // 2
a.count; // undefined

b.get(); // 0

class版

① functionと同じように書く  ⇒ 定義できない。そもそもエラーになります。

class Foo {
  let count = 0;

  get() {
    return count;
  }
  add() {
    count++;
  }
}

コンストラクター内でcountを定義する  ⇒ addやgetのメソッドからcountが参照できない

class Foo {
  constructor() {
    let count = 0;
  }
  
  get() {
    return count;
  }

  add() {
    count++;
  }
}

const a = Foo();
a.get() //エラーになる

コンストラクターのメンバー変数にcountを入れる  ⇒ privateな変数ではなくなる  

class Foo {
  constructor() {
    this.count = 0;
  }
  
  get() {
    return this.count;
  }

  add() {
    this.count++;
  }
}

const a = Foo();
a.add()
a.get() // 1
a.count // 1

まとめ

普段の業務では気づいているんだけど、 わりとなんでそうなっているのかわからないような処理が明文化されているので頭の整理になりました。

最近は綺麗にコードが書けるように意識していたので、ちょうどいいタイミングで読めてよかったです。読んでいて沢山の気付き与えてくれ、議論も活発になり後半は30分以上かかるときもありました。

読書会だからこそ読めた本だと思うので、 これからもちょっととっつきづらそうな本は読書会のテーマで乗り切ろうと思います。

ValueDomainで取得したドメインを使い無料でメールアドレスを作成できるMailgunがすごい

みなさんは独自ドメインのメールアドレスをどうやって作成していますか?

今まで、Wordpressでサイトを作る際には、ロリポップを使っており、 ロリポップにはメールサービスが付いてきたので良かったのですが、 例えばFirebaseを利用しサービスを作るさいにはメールアドレスはどうやって取得しようと悩んでいました。

有料であれば、GoogleAppsを利用するのが一番簡単で普段使いなれたメール環境が手に入るのでいいのですが、 できれば無料でほしいと思い探したところ、、

Mailgun」を見つけました!

Maingunとは?

https://www.mailgun.com/

メールの送受信をAPIで提供しているサービスで月に10000件まで配信無料です。 独自ドメインの設定ができ、Routesという受信したメールアドレス毎に操作を決める機能とメーリングリスト機能があるので、 独自ドメインのメールアドレスが作成できて、そのアドレス宛のメールは別のメールに転送することができます。

これが無料なので結構すごいですよね。

独自ドメインのメールアドレスを作成する

Maingunに登録する

こちらから登録を行います。 ※ カード情報は登録しなくても使えます。

https://signup.mailgun.com/new/signup

ドメインの設定

登録完了後、「Add A Domain」のボタンが表示されるので押して、ドメイン設定画面に遷移します。

f:id:iwate_takayu:20180130233255p:plain

自分のホームページのtakayuki-ito.meのアドレスを作っていきます。

f:id:iwate_takayu:20180130233742p:plain

登録するとDNSレコードの修正箇所を教えてくれるので、ValueDomainの画面から以下のように入力していきます。

f:id:iwate_takayu:20180130234311p:plain

txt takayuki-ito.me v=spf1 include:mailgun.org ~all
txt mailo._domainkey.takayuki-ito.me k=rsa;p=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
mx mxa.mailgun.org. 10 takayuki-ito.me
mx mxb.mailgun.org. 10 takayuki-ito.me
cname email.takayuki-ito.me mailgun.org.

f:id:iwate_takayu:20180130234913p:plain

DNSの設定が終わったら、再度Mailgunの画面から「Domain Verification & DNS」のリンクをクリックし、 設定が完了しているかのチェックに進みます。

f:id:iwate_takayu:20180130235409p:plain

「Check DNS Records Now」のボタンをクリックして、TXTとMXのレコードの横にあるマークが緑になれば完了です。

f:id:iwate_takayu:20180130235802p:plain

Routesの作成

「info@takayuki.me」に送信されたメールを私の普段使用しているメールアドレスに転送する設定をしていきます。

Expression Type:Match Recipient
Recipient:info@takayuki-ito.me
Actions:Forward
     自分のメールアドレスを記載

f:id:iwate_takayu:20180131001439p:plain

  以下の設定で登録をして完了です。
これで独自ドメインのメールアドレスが作成できました。

最近お金について考えることが増えてきた

f:id:iwate_takayu:20171125095949j:plain

先週末はCoincheckの騒動もありで、騒がしい週末でしたね。 実は私もNEMは少しばかりですが持っていたので、 Coincheckどうなるんだろうと思っていました。

結果的には結構稼いでいたのかな? 自社保有の資金で払えるようです。

私の資金が少しでも戻ってくるのもそうですが、 仮想通貨の取引所の中でCoincheckスマホのアプリが使いやすかったので倒産しないでよかったです。

ここ最近は人と会ったときには仮想通貨の話しが出ることが多く、 その流れでNISAや投資の話しをすることが増えてきました。

年齢も徐々に上がってきたこともあると思いますが、 投資に回せるお金と時間が増えてきたってことかもしれないです。

私自身も社会人になった頃から、申し訳ない程度に株には手を出してはいました。
ただ、ロクに調べずに単純に自分が使っているサービスを作っている会社の株を買っていたので、 そんなに儲かるはずもなく、特に知っているけど興味がそれほどあるわけではないという感じでした。

それが、最近はビットコインが2年で約30倍に値上がりしたり、 「億り人」という投資によって1億円もの利益を得た方の話しがあると、、、 興味がでてくるんですよね。

けしからんやつなんです。
とりあえず、高リスクな「仮想通貨」と税制優遇もありリスクの低い「つみたてNISA」を利用してみようと思いました。

仮想通貨は利益があっても、税金の割合が高く、 約40%利益から持って行かれるので、 まずは非課税枠のある、つみたてNISAの方を優先してやるべきですね。

「つみたてNISA」は毎年で40万円まで非課税投資枠があり、 20年間は投資から得られる分配金や譲渡益が非課税になるという制度です。 なので今までのNISAで非課税投資枠だった120万円よりも一時的には減ったように見えますが、 合計の非課税投資枠はつみたてNISAは800万円(20年)でNISAは600万円(5年)とつみたてNISAの方が増えています。

制度については詳しくは、金融庁のHPをご覧ください。 www.fsa.go.jp

何に投資するかですが、いかにも楽できそうなこちらの本を読みました。
押し売りしない感じなんですが、ちゃんと銘柄は載せておいてくれる本なので、行動に移しやすいと思いました。

実際は投資の時間よりも個人サービス開発していたいので、 アクテイブファンドよりも勝率の高いと言われるインデックスファンドもしくはETFからやってみようと思います。 アクティブファンドの約6割〜7割はインデックスファンドには勝てないそうです。

会社作って稼いでお金に不自由しない暮らしをしたかったのですが、 現実では銀の弾丸はないのでコツコツ行こうと思います。