日	場所	トレーニング内容
2019年2月9日(土)	-	休養
2019年2月10日(日)	-	休養
2019年2月11日(月)	ジム	ベンチプレス：10.0kg×3セット、20.0kg×2セットスミスマシン（インクライン）：0kg×4セットラットプルダウン：15.0kg×3セットディップス：4セットダンベルカール：3.0kg×4セットサイドレイズ：3.0kg×10セット
2019年2月12日(火)	自宅	スタンディングカーフレイズ：3セットスクワット：3セット
2019年2月13日(水)	-	休養
2019年2月14日(木)	自宅	プランク：2セットサイドプランク：4セット
2019年2月15日(金)	自宅	腕立て伏せ：8セット

この週は連休に予定が入っていたので、初めて土日ともにトレーニングなしとなりました。
こうなると実際相当痛いのですが、間にちょこちょこ自宅トレを挟めているので、そこまで大きなトレーニング不足にならずに済んでいると思います。

今回のように予定があってジムに行けないっていうことは今後も十分ありえますし、旅行などで長期間外出することもありえるので、自宅トレや自重トレのバリエーションは増やしていかないといけないなと感じています。

「忙しいからジムに行けなくてトレーニングできなかった」

っていう言い訳から卒業して、

「忙しくてジムに行けてないけど、しっかりトレーニングできてるよ！」

って言えるようになりたいですね。

2019年に取り組んでいる筋トレはこちら↓

tatsuyashi.hatenablog.com

2019-03-04

Coderを使ってブラウザ上でAngularアプリケーションを開発してみる

Angular Coder IT

f:id:tatsuyashi:20190304124442p:plain:w500

先日、こんなブログを見つけました。

qiita.com

CoderというVisual Studio Codeをブラウザ上で使えるサービスがあるそうです！（情報ありがとうございます！）

coder.com

私はメインPCがデスクトップでサブPCにChromebookを使っているのですが、Chromebookを使って開発ができると便利だなぁと思っていたのでこれは非常に朗報でした。

※一応、USBにUbuntuを入れてChromebookから使えるようにしていますが、Chromebook自体がスペックを抑えめにされているのでローカル開発にはあまり向いていません。

今回はCoder上でAngularのアプリケーションを1から作ってローカルで動作確認まで実施しましたので手順を紹介したいと思います。

プロジェクト作成
Node.jsをマウント
yarnのインストール
Angular CLIのインストール
Angularプロジェクト作成
開発サーバー起動
感想

プロジェクト作成

sample-angularというプロジェクトを作ってみます。

f:id:tatsuyashi:20190304111554p:plain:w500

これでプロジェクトができます。

Node.jsをマウント

デフォルトではNode.jsは入っていなかったので、Node.jsを入れてnpmを使えるようにします。

VS Codeの画面が開いたら、[Ctrl + Shift + P]でコマンドパレットを開き、「mount」と入力しEnterを押します。

f:id:tatsuyashi:20190304112158p:plain:w500

すると、マウント可能な言語とバージョンの一覧が表示されるのでNode.jsの最新版を選択します。

f:id:tatsuyashi:20190304112359p:plain:w400

f:id:tatsuyashi:20190304112503p:plain:w400

Node.jsが使えるようになります。

yarnのインストール

yarnを使いたい方は先ほどのブログにやり方が載っていますので参考にしてみてください。

記載の通りコマンドを打つと問題なくyarnがインストールできます。

Angular CLIのインストール

Angularを開発するならまずはAngular CLIが必要です。

ターミナルを[Ctrl + `]で開き、

npmの場合は

npm install -g @angular/cli

yarnの場合は

yarn global add @angular/cli

Angularプロジェクト作成

（小ネタ）単純にng newコマンドだけでも良いですが、Coder上にプロジェクトフォルダを切ってしまっているので、ここにAngularプロジェクトを展開するようにします。

ng new sample-angular --directory ./ --skipGit true

--directory ./と書くことで、カレントディレクトリ上にAngularプロジェクトが展開されるようになります。

開発サーバー起動

Angularのプロジェクトが作成できたので、開発サーバーを起動してローカルから繋いでみたいと思います。

通常のng serveではさすがにローカルから繋げられないので以下のようにして起動します。

ng serve --host 0.0.0.0 --port 3000 --disableHostCheck true

ホストを0.0.0.0、ポートを3000で起動します。
ポートは他に80や8080などいくつか用意されていますが、おなじみの4200がなさそうだったのでWebpackでよく使う3000にしました。
また、それだけだとページを表示したときに「Invalid Host Header」とエラーが表示されてしまいますので、--disableHostCheck trueをつけています。

起動中など、重い処理が動いてCPUやメモリを多く消費すると右下に「Fast Time」を勧めるメッセージが表示されます。

f:id:tatsuyashi:20190304120003p:plain:w400

Fast Timeは一時的にコンテナのスペックを大幅に上げることができる機能で、無料プランであっても5時間までは使えるそうです。

今回はFast Timeを使わずにいこうと思います。

サーバーが起動したら、左側の[CDR.co]アイコンをクリックします。
すると、現在起動中のサーバーが表示されます。

f:id:tatsuyashi:20190304115738p:plain:w400

このURLをクリックすると、ブラウザでURLを開きます。

f:id:tatsuyashi:20190304120656p:plain:w500

ページが正しく表示されました。

LiveReloadも正しく動くので、Coder側でコード変更するとサーバーが再起動してブラウザがリロードされます。

感想

使ってみた感想をいくつかあげてみます。

【良かった点】

導入が非常に簡単
コンテナベースなので、ミスっても捨てたりするのが簡単

【気になった点】

画面の動作1つ1つが少しもっさりしている（Containerへの切り替えやVSCodeでファイルを開いた際）
プロジェクトを削除してもソースが残っている？ →VSCodeで開いたときのプロジェクトが、削除した方のプロジェクトが選択されている

今回はAngularで試してみましたが、この調子だとReactやVueでも全く問題なく開発ができそうですね。
いくつか気になる点はありますが、Chromebookでもストレスなく開発できるのでこれから作業が捗りそうです。

こういうオンラインのIDEがこれからどんどん増えてくれるとありがたいですね。

2019-03-04

ReactNative+ExpoでAndroid端末へプッシュ通知を送るその②〜AWS Lambdaを使ってプッシュ通知〜

Android ReactNative AWS IT

Expoを使用して開発するReactNativeアプリから各端末へプッシュ通知を送る仕組みを開発しています。

前回の記事では、Expoを使ったプッシュ通知に必要なExpoプッシュトークンを取得するところまで書きました。↓

tatsuyashi.hatenablog.com

今回は、取得したプッシュトークンを使用して実際にプッシュ通知を送る方法を記載します。
なお、バックエンドは全てAWSにしているため、今回はAWS Lambdaを使ってプッシュ通知を送ってみました。

プッシュ通知の流れ
AWS Lambda (Node.js) でプッシュ通知
- 準備
- コード
まとめ

プッシュ通知の流れ

プッシュ通知を送るまでの流れは下記の3ステップです。

Expoプッシュトークンを取得
取得したExpoプッシュトークンをユーザ情報と紐付けるようにしてデータベースに保存
Expoプッシュトークンを利用してプッシュ通知　←今回はココの説明

AWS Lambda (Node.js) でプッシュ通知

Node.jsでLambdaを書いてプッシュ通知をしようと思います。

Expoからプッシュ通知を送るためのSDKが各言語向けに用意されているのでそれを使用します。ちなみにNode.jsの他にはPython、Ruby、Go、Elixir、PHPなどのSDKが有志によって用意されています。

Push Notifications - Expo Documentation

実はNode.js向けSDKのGithubのREADMEのサンプルコードにほぼ答えが載ってるのでした。

github.com

上記を参考にして使ったLambdaのソースを抜粋して載せていきます。

準備

expo-server-sdkを追加します。

npm install expo-server-sdk

外部モジュールに依存するのでLambdaはインラインではなくZip形式にしたものをアップロードします。

コード

完全に公開できるものではないので、一部抜粋となりますがご了承ください。

const { Expo } = require('expo-server-sdk');

// Create a new Expo SDK client
let expo = new Expo();

exports.handler = async (event, context) => {
    // 通知メッセージを取得
    const messages = await getMessages(event);
    
    // 通知する
    const tickets = await sendPushNotifications(messages);

    // 通知結果を保存する（必要に応じて）
    await saveTickets(tickets);
}

const getMessages = async (event) => {
    // ここに通知するメッセージを取得する処理を書く
    ...
    
    return [
        // 1つ1つのメッセージは以下の形式で
        {
                to: pushToken, // Expoプッシュトークン
                sound: 'default',  // 通知時の音を鳴らすかどうかの設定
                title: title,  // 通知タイトル
                body: body  // 通知本文
            }
    ]
}

const sendPushNotifications = async (messages) => {
    // The Expo push notification service accepts batches of notifications so
    // that you don't need to send 1000 requests to send 1000 notifications. We
    // recommend you batch your notifications to reduce the number of requests
    // and to compress them (notifications with similar content will get
    // compressed).
    let chunks = expo.chunkPushNotifications(messages);
    let tickets = [];

    // Send the chunks to the Expo push notification service. There are
    // different strategies you could use. A simple one is to send one chunk at a
    // time, which nicely spreads the load out over time:
    for (let chunk of chunks) {
        try {
            let ticketChunk = await expo.sendPushNotificationsAsync(chunk);
            console.log(ticketChunk);
            tickets.push(...ticketChunk);
            // NOTE: If a ticket contains an error code in ticket.details.error, you
            // must handle it appropriately. The error codes are listed in the Expo
            // documentation:
            // https://docs.expo.io/versions/latest/guides/push-notifications#response-format
        } catch (error) {
            console.error(error);
        }
    }
    return tickets;
}

const saveTickets = async (tickets) => {
    // ticketsをデータベースに保存するような処理
}

上記ソースコードで言うと、sendPushNotificationsメソッドがプッシュ通知を送るメイン処理となります。

その前にgetMessagesメソッドでプッシュ通知の対象データを返してあげます。 1つ1つのメッセージに設定できる項目は下記に載っています。

Push Notifications - Expo Documentation

最後にsaveTicketsメソッドでプッシュ通知の結果をデータベースに保存します。
この処理を行っている理由ですが、SDKのREADMEには以下のコードも併記されています。

// Later, after the Expo push notification service has delivered the
// notifications to Apple or Google (usually quickly, but allow the the service
// up to 30 minutes when under load), a "receipt" for each notification is
// created. The receipts will be available for at least a day; stale receipts
// are deleted.
//
// The ID of each receipt is sent back in the response "ticket" for each
// notification. In summary, sending a notification produces a ticket, which
// contains a receipt ID you later use to get the receipt.
//
// The receipts may contain error codes to which you must respond. In
// particular, Apple or Google may block apps that continue to send
// notifications to devices that have blocked notifications or have uninstalled
// your app. Expo does not control this policy and sends back the feedback from
// Apple and Google so you can handle it appropriately.
let receiptIds = [];
for (let ticket of tickets) {
  // NOTE: Not all tickets have IDs; for example, tickets for notifications
  // that could not be enqueued will have error information and no receipt ID.
  if (ticket.id) {
    receiptIds.push(ticket.id);
  }
}

let receiptIdChunks = expo.chunkPushNotificationReceiptIds(receiptIds);
(async () => {
  // Like sending notifications, there are different strategies you could use
  // to retrieve batches of receipts from the Expo service.
  for (let chunk of receiptIdChunks) {
    try {
      let receipts = await expo.getPushNotificationReceiptsAsync(chunk);
      console.log(receipts);

      // The receipts specify whether Apple or Google successfully received the
      // notification and information about an error, if one occurred.
      for (let receipt of receipts) {
        if (receipt.status === 'ok') {
          continue;
        } else if (receipt.status === 'error') {
          console.error(`There was an error sending a notification: ${receipt.message}`);
          if (receipt.details && receipt.details.error) {
            // The error codes are listed in the Expo documentation:
            // https://docs.expo.io/versions/latest/guides/push-notifications#response-format
            // You must handle the errors appropriately.
            console.error(`The error code is ${receipt.details.error}`);
          }
        }
      }
    } catch (error) {
      console.error(error);
    }
  }
})();

プッシュ通知でエラーになった場合はなんらかの対応をしないといけないらしく、そのために上記のようなreceiptの取得処理を行わないといけないようです。

ただ、処理を行うにしても今回のLambdaとは別のLambdaにすべきで、プッシュ通知そのものとは切り離すべきですね。

まとめ

以上のようにして、Lambdaを使ってExpo経由でプッシュ通知を送ることができました。

今回のLambdaはDynamoDB StreamsをトリガーとするLambdaを書いていますが、プッシュ通知を送るケースとしては他にも

Kinesisを使ったリアルタイムストリーム処理
CloudWatchの定時実行イベント

などのトリガーでLambdaを動かすことがあると思いますので、そういったケースで今回のコードが参考になれば幸いです。

2019-02-26

IFTTT入門〜【超簡単】3分でGoogle HomeとGoogleスプレッドシートを連携してみる〜

IFTTT IT

f:id:tatsuyashi:20190226005821j:plain:w300

Webサービスを簡単に繋ぐことができるIFTTT(イフト)というサービスをご存知でしょうか？

世の中には様々なWebサービスが存在していますが、それらを組み合わせることで人々の「やりたいこと」を実現するのがIFTTTです。

今回は初めてIFTTTを使ってみるということで、手始めにGoogle Home (Google Assistant)とGoogle スプレッドシートを連携させてみましたので紹介したいと思います。

所要時間はアカウント登録から連携完了まで約3分です。

【今回のゴール】
以下のような連携をするのを今回のゴールとします。

Google Home (Google Assistant) で「OK Google、今日の運勢は○位でした」と話す
Google Home (Google Assistant) が「今日は運勢は○位だったのですね」と返事する
自分のGoogleドライブにあるスプレッドシートに今日の順位を記録する

IFTTTって？
アカウント登録
アプレット作成
- IF This の設定 (Google Assistant)
- Then Thatの設定 (Googleスプレッドシート)
さっそく試してみる
まとめと感想

IFTTTって？

冒頭でも書きましたが、「2つのWebサービスを繋ぐ」のがIFTTTです。

ifttt.com

IF This Then Thatを略してIFTTT(イフト)と呼ばれていて、思想としては非常にシンプルです。

IF A Then B
（Aのとき、Bを行う。）

このAをトリガー、Bをアクションと言います。

このWebサービスの組み合わせはアプレットと呼ばれていて、世界中のユーザーが作った様々なレシピが公開されています！

ですので、自分がやりたいことがあればまずはレシピを探してみるのが良いと思います。

ちなみにIFTTTで連携可能なサービスはざっと数百種類はありそうなので、主要なサービスは網羅されていると考えて良いです。

アカウント登録

まずはアカウント登録をします。

公式サイトへアクセスして登録してください。

GoogleかFacebookで登録ができるので、私はGoogleで登録しました。

アプレット作成

アカウントを作成したら画面の左上にある「My Applet」をクリックします。

f:id:tatsuyashi:20190226015439p:plain:w500

「New Applet」をクリックします。

f:id:tatsuyashi:20190226015654p:plain:w500

IF This の設定 (Google Assistant)

まずはGoogle Assistantへの音声入力をトリガーとする設定を行います。

「[+]this」をクリックします。

f:id:tatsuyashi:20190226020111p:plain:w500

サービスを検索し、「Google Assistant」を選択します。

f:id:tatsuyashi:20190226020604p:plain:w500

「Connect」をクリックすると、Googleアカウントの連携を求められるので許可します。

f:id:tatsuyashi:20190226020901p:plain:w500

Google Assistant用のトリガーとしては4種類用意されています。

・Say a simple phrase (変数なし)
・Say a phrase with a number (数字の変数が1つ)
・Say a phrase with a text ingredient (テキストの変数が1つ)
・Say a phrase with a number and a text ingredient (数字とテキストの2つを変数とする)

今回のように数字を変数にする場合、Say a phrase with a numberとSay a phrase with a text ingredient がどう違うのかがよくわからないですが、
数字が来るということが決まっている前者だと認識がよくなるんでしょうかね？

ということで、今回は「Say a phrase with a number」を選択します。

f:id:tatsuyashi:20190226021853p:plain:w500

Google Assistantに認識させるフレーズを入力します。
数字の変数が入るところは「#」を入力します。

※「#」の前後に半角スペースが必要です

f:id:tatsuyashi:20190226023358p:plain:w500

フレーズは最大3つまで登録できます。

f:id:tatsuyashi:20190226023438p:plain:w500

Google Assistantからの返事を入力します。ここでも「#」が使えます。

f:id:tatsuyashi:20190226023547p:plain:w500

最後に言語を「Japanese」に変更して「Create Trigger」をクリックします。

f:id:tatsuyashi:20190226023126p:plain:w500

これでトリガーの設定は完了です。

Then Thatの設定 (Google スプレッドシート)

次にスプレッドシートに書き込むアクションの設定を行います。

「[+] that」をクリックします。

f:id:tatsuyashi:20190226023819p:plain:w500

サービスを検索し、「Google Sheets」を選択します。

f:id:tatsuyashi:20190226024004p:plain:w500

「Connect」をクリックすると、Googleアカウントの連携を求められるので許可します。

f:id:tatsuyashi:20190226024259p:plain:w500

Google スプレッドシートのアクションとしては以下の2つが用意されています。

Add row to spreadsheet
Update cell in spreadsheet

今回は記録を新しい行として追加したいので「Add row to spreadsheet」を選択します。

f:id:tatsuyashi:20190226024620p:plain:w500

スプレッドシートに書く内容を設定します。

ファイル名を設定します。一応ここでも変数が使えるみたいです。

f:id:tatsuyashi:20190226024916p:plain:w500

行に書く内容を設定します。
CreatedAtはタイムスタンプでNumberFieldは「変数」にあたります。

f:id:tatsuyashi:20190226025100p:plain:w500

Googleドライブのフォルダを指定して「Create action」をクリックします。

f:id:tatsuyashi:20190226025217p:plain:w500

最後に内容を確認して、「Finish」をクリックします。

「Recieve notifications when the Applet runs」を選択しておくと、アプレット実行時に通知を受け取れます。

f:id:tatsuyashi:20190226025509p:plain:w500

これでアプレット作成が完了しました！

f:id:tatsuyashi:20190226025739p:plain

さっそく試してみる

Google HomeまたはスマートフォンのGoogle Assistantに話しかけてみた結果がこちらです。

f:id:tatsuyashi:20190226030556p:plain:w400

IFTTTで設定した通りの返事をしてくれていますね！

次にGoogleドライブですが、Googleフォルダが作成されて「占い記録」というファイルが作成されています。

f:id:tatsuyashi:20190226030800p:plain:w400

ファイルを開くと、

f:id:tatsuyashi:20190226030845p:plain:w400

こちらもIFTTTで設定した通りに記録されていますね！

まとめと感想

いかがだったでしょうか？

はっきり言って超絶簡単です。IFTTTはスマホアプリも用意されているので、今回のような簡単な連携であればスマホで簡単に作成できます。

IFTTTは1つのトリガーで1つのアクションしかできないが故に複雑なことはできませんが、シンプルにサービスを繋ぐだけであれば非常に強力です。

また今回のようにGoogle HomeやAmazon Echoなどのスマートスピーカーやスマートホームとの相性も良いと思うので、アイデア次第で生活を非常に便利にできるのじゃないかなと思います。

ちなみに、IFTTTではWebhooksが使えるので自作のAPIとも連携できたりします。そうなると可能性は無限に広がるのですが、またそれはやってみたときに書きたいと思います。

1位 そんなバナナ風味

2位 めろめろメロン風味

3位 キャラメル珈琲風味

4位 初恋のいちご風味

5位 南国パイン風味

6位 ぴちぴちハッピーチ風味

7位 すっきリンゴ風味

8位 激うまチョコ風味

お試しパックで先に試すのが吉

愚者は経験に学び、賢者は歴史に学ぶ

失敗は成功のもと

他の人が代わりに失敗してくれてるという考え

人の失敗に感謝し、自分の成功に活かす

ある程度基礎知識があれば参考書と模擬試験だけで十分

参考書は安定の2冊

合格対策 AWS認定ソリューションアーキテクト - アソシエイト

徹底攻略 AWS認定 ソリューションアーキテクト ー アソシエイト教科書

模擬試験は必須

とにかくコンピューティング、ネットワーク、ストレージ、データベースを覚えること

コンピューティング

ネットワーク

ストレージ

データベース

ユースケースにいかに紐付けられるかが問われる

試験の時間配分は気にする必要なし

（余談）試験中にトラブルがあっても乱されないように

最後に（＋証拠）

2019年に取り組んでいる筋トレはこちら↓

プロジェクト作成

Node.jsをマウント

yarnのインストール

Angular CLIのインストール

Angularプロジェクト作成

開発サーバー起動

感想

プッシュ通知の流れ

AWS Lambda (Node.js) でプッシュ通知

準備

コード

まとめ

IFTTTって？

アカウント登録

アプレット作成

IF This の設定 (Google Assistant)

Then Thatの設定 (Googleスプレッドシート)

さっそく試してみる

まとめと感想

1位そんなバナナ風味

2位めろめろメロン風味

3位キャラメル珈琲風味

4位初恋のいちご風味

5位南国パイン風味

6位ぴちぴちハッピーチ風味

7位すっきリンゴ風味

8位激うまチョコ風味

徹底攻略 AWS認定ソリューションアーキテクトーアソシエイト教科書

Then Thatの設定 (Google スプレッドシート)