こぶろぐ。

Engineer / AWS / CYDAS

Laravelでタスク管理アプリを作る~タスク登録・表示機能~

Laravelでタスク管理のWebアプリを作ってみました!
今回はタスク名と期限を入れるような簡単なものです。

完成イメージはこんな感じです。 f:id:aym413:20190621144219g:plain:w400

Laravelの環境構築とDBのマイグレーションはこちらの記事を参考にしてください。 coxcox.hatenablog.com

coxcox.hatenablog.com

MVCモデルを使ってタスクの表示・追加ができるようにしていきます。

MVCモデルとは?

Model・View・Controllerの頭文字をとったもので、プログラミングの処理を3つの役割に分けて実装する方法です。

f:id:aym413:20190621193115p:plain:w500

タスク一覧を表示できるようにする

ルーティングを追加する

タスク一覧を表示できるようにするためGETメソッドのルーティングを設定します。

/routes/web.php

<?php

// タスクの一覧を取得する
Route::get('/', 'TaskController@index');

これで、第一引数にある / というパスへのリクエストを、第二引数のTaskControllerのindexメソッドにルーティングします。

モデルを作成する

Tasksテーブルに対応するモデルを作成します。
モデルの作成はartisanコマンドで作成できます。
Laradockのコンテナ上で実行します。

$ cd laradock
$ docker-compose exec --user=laradock workspace bash
/var/www$ php artisan make:model Models/Task
Model created successfully.

/app/Models/Task.phpが生成されていると思います。

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    //
}

モデルの中身は変えずにそのままで。

コントローラーを作成する

モデルと同様artisanコマンドでコントローラーを作成します。

$ docker-compose exec --user=laradock workspace bash
/var/www$ php artisan make:controller TaskController
Controller created successfully.

コントローラーにコードを追加していきます。
最初にTaskモデルを読み込み、ルーティングで定義したindexメソッドを追加します。
indexメソッドでは、Task::all();でDBに登録されているタスク一覧を取得し、view('tasks.index', [ 'tasks' => $tasks ]);で結果をタスク一覧表示用のビュー渡します。

<?php

namespace App\Http\Controllers;

use App\Models\Task;
use Illuminate\Http\Request;

class TaskController extends Controller
{
    /**
     * タスクの一覧を取得する
     */
    public function index()
    {
        $tasks = Task::all();

        return view('tasks.index', [
            'tasks' => $tasks
        ]);
    }
}

ビューを作成する

ブラウザに表示するためのビューを作成します。
モデルやコントローラーの様にartisanコマンドは使えないので、resources/views/tasks配下にindex.blade.phpを追加します。
レイアウトをいい感じにするためにBootstrapを使いました!
getbootstrap.com Bootstrapはheadの中にlinkタグを入れるだけで使うことができます。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

index.blade.phpの中身はこちらです。

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <div class="card" style="max-width: 500px; margin: 10% auto;">
        <h5 class="card-header">タスクの一覧</h5>
        <table class="table table-hover">
            <thead>
            <tr>
                <th scope="col">No</th>
                <th scope="col">タイトル</th>
                <th scope="col">期限日</th>
            </tr>
            </thead>
            <tbody>
            @foreach($tasks as $task)
                <tr>
                    <th scope="row">{{ $task->id }}</th>
                    <td>{{ $task->title }}</td>
                    <td>{{ $task->deadline }}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
        <a class="btn btn-primary" href="/add" role="button" style="margin: 20px;">タスクを追加する</a>
    </div>
</div>
</body>
</html>

タスクの一覧表示できるかテストしてみる!

コンテナを起動して、DBにテストデータを入れます。

$ docker-compose up -d nginx mysql workspace

ブラウザから「http://localhost」にアクセスしてみます。
テストデータが表示できればOKです!
f:id:aym413:20190621214845p:plain:w400

一覧表示ができるようになったら、タスクを追加できるようにします!

タスクを追加できるようにする

ルートを追加する

タスクを追加する画面を表示するGETメソッドとDBにタスクを追加するPOSTメソッドのルーティングを追加します。

/routes/web.php

<?php

// タスクを作成する
Route::get('/add', 'TaskController@showAddPage');
Route::post('/add', 'TaskController@addTask');

タスク追加画面のビューを作成する

resources/views/tasks配下にadd_task.blade.phpを追加します。
Laravelではフォームを作る際は必ずCSRF対策をする必要があります。
フォーム内に@csrfを追加すれば大丈夫です。この1行がないと419のエラーになります。
また、フォームのデータをコントローラーに送るにはname属性が必要になるので、お忘れなく!

add_task.blade.phpの中身はこちらです。

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <form action="/add" method="POST">
        @csrf
        <div class="card" style="max-width: 500px; margin: 10% auto;">
            <h5 class="card-header">タスクの追加</h5>
            <div class="card-body">
                <div class="form-group">
                    <label for="title">タイトル</label>
                    <input type="text" name="title" class="form-control">
                </div>
                <div class="form-group">
                    <label for="deadline">期限日</label>
                    <input type="text" name="deadline" class="form-control">
                </div>
                <button type="submit" class="btn btn-primary">追加</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>

コントローラーにメソッドを追加する

先ほど作成したTaskControllerにメソッドを追加します。

ビューから送られてきたデータはRequestクラスで受け取ることができます。
タスクのタイトルと期限日を$task->title$task->deadlineに代入します。
saveメソッドで新しいレコードがデータベースに挿入されます。saveが呼び出された時にcreated_atupdated_atのタイムスタンプは自動的に設定されるので、わざわざ設定する必要はありません!
データをDBに登録したあとは、タスク一覧画面に戻るようredirectさせます。

    /**
     * タスクを登録する
     *
     * @param Request $request
     * @return \Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
     */
    public function addTask(Request $request)
    {
        $task = new Task;
        $task->title = $request->title;
        $task->deadline = $request->deadline;

        $task->save();

        return redirect('/');
    }

タスクが追加できるかテストしてみる!

タスク追加画面からタスクを追加して、一覧画面にリダイレクトされるか確認してみましょう〜
本記事冒頭の完成イメージのようにできたらOKです!
f:id:aym413:20190621221241p:plain:w400


今回Laravelでタスク追加して一覧表示する簡単な画面を作ってみました!実際に作ったものが動くとやっぱり楽しいです^^
が、フォームのバリデーションやビューの共通化など、まだまだ改善の余地はありそうなので、引き続き頑張ります!!

グローバルのコミュニティイベント「Transcend to the World! Power of IT Women」に参加してきました!

少し前になりますが、2019/06/01(土)に開催されたAWS Asian Women’s Association によるコミュニティイベント Transcend to the World! Power of IT Women @シンガポール に参加してきました!

Transcend to the World! Power of IT Women とは?

アジア地域で活動するIT業界の女性エンジニアの合同イベント。
各国でAWSのユーザーグループの勉強会はありましたが、国を超えての女子会イベントは初でした!
運営メンバーも女性が中心となり、各国のAWSユーザーグループリーダー(日本、シンガポール、タイ、フィリピン、韓国)が主体となって進めていきました。

今回のイベント場所はシンガポールAWSオフィス。
f:id:aym413:20190614105232j:plain:w500

日本からは今回のイベントの発起人である伊藤博美さんをはじめ、スピーカー3名、LT2名を含む計9名が参加!日本パワーも見せることができました!

そして私はスタッフ・スピーカーとして参加してきました!

スタッフとして

・LTの募集やスポンサーの募集ページの作成・連絡
なんだ簡単じゃん!と思うかもしれないですが、グローバルでの開催になるため、作成ページは全て英語。。
英語が苦手な私にとってはちょっとした文章でも一苦労なのでした。。

・当日
当日はスピーカー以外にも、会場設営や受付、各セッションでのタイムキーパーもやったりしてました。

スピーカーとして

Raspberry Pi に Alexa Voice Service(AVS)を入れて Alexa デバイスを作ってみたよ!という話をしてきました。
日本でのAlexaの注目度についてやRaspberry Piの紹介、Raspberry Pi に Alexa Voice Service(AVS)を入れてサンプルアプリケーションを作るまでの話、応用編として早押しクイズを作ってみた話をしました。

f:id:aym413:20190614171612j:plain:w500
発表の様子

スライドはこちら

www.slideshare.net

早押しクイズの作り方についてはこちらの記事に書いていますのでご覧ください!
coxcox.hatenablog.com

当日の様子

f:id:aym413:20190614130849j:plain:w500
タイのユーザーグループが作成してくれたバナー

f:id:aym413:20190614171103j:plain:w500
テクニカルセッションを担当したスピーカー
f:id:aym413:20190614132015j:plain:w500
懇親会はピザパーティー

f:id:aym413:20190614170957j:plain
最後の全員で集合写真

SNSをフォローしよう!

なんだかおもしろそう!と興味を持ってくださった方は以下のSNSをフォローしてみてください!
Webサイト:https://aawa.info/
Facebookhttps://www.facebook.com/groups/AWSAsianWomen/
Twitterhttps://twitter.com/AWSAsianWomen


今回のイベントではシンガポール在住の日本人の方々とも交流することができ、とても刺激を受けました。
英語が苦手な私ですが、海外の方が積極的に話しかけてくれて、私の言いたいことを汲み取ろうとしてくれて、英語が少し好きになりました。これからも継続的に英語の勉強は頑張っていこうと思ったのでした。
また懇親会ではこのイベントを継続したい!という話もあり、次はタイでやろうか!なんていう話もしました。ということで、これからますますおもしろくなっていきそうです!

Alexa on Raspberry Piで早押しクイズを実装する!

Alexaスキルを自分で作って、Alexa on Raspberry Piで早押しクイズを実装してみました!

早押しクイズの流れ

ゲームのプレイヤーは2人の設定

  1. プレイヤーが早押しクイズを起動する
  2. Alexaがクイズを出す
  3. 正解がわかったプレイヤーはボタンを押す
  4. どのプレイヤーがボタンを押したのかを識別する
  5. ボタンを押したプレイヤーに答えを促す
  6. プレイヤーが回答する
  7. 回答が間違っていれば解答権を渡す、正解であればクイズを終了する

今回難しかったのが手順4「どのプレイヤーがボタンを押したのかを識別する」の部分です。
どのプレイヤーがボタンを押したのかをどうやってAlexaに送信するのかが思いつきませんでした。
なので今回はプレイヤーがボタンを押したら、プレイヤー名を音声出力して、Alexaに認識させるようにしました。

早押しクイズを実装する

Raspberry PiをAlexa対応デバイスにする

Raspberry PiにAlexa Voice Serviceを導入し、Alexaとして動かすところまではこちらの記事をご覧ください。
coxcox.hatenablog.com

Raspberry Piにボタンを繋げる

下記の回路図を参考にブレッドボードとボタンを繋げます。
青いボタンが6番のGNDピン12番のGPIO18ピン
赤いボタンが39番のGNDピン22番のGPIO25ピン
f:id:aym413:20190607221308p:plain

ボタンを押したプレイヤーを識別するためのプログラムを作成する

プレイヤーを識別するプログラムはGitHubに置いているのでこちらをRaspberry Piにダウンロードします。

$ git clone https://github.com/ayumi-k/avs-raspberrypi-buzzer-game.git

上記のコードはC++で書かれていますので、コンパイルします。

$ gcc -o player_indentified player_indentified.c -lwiringPi

このプログラムで青いボタンが押されたらplayer1を、赤いボタンが押されたらplayer2を音声出力するようにできます。

Alexaスキルの作成

今回はVoiceflowというノンコーディングでAlexaスキルを作れるサービスを使いました。
www.voiceflow.com

細かいvoiceflowの使い方はこちらを参照させてもらいました。
vf-handson-01.netlify.com

そして、完成したスキルがこちらです!
f:id:aym413:20190607224433p:plain

①ユーザーがスキルを起動したあとの応答
スキルを起動した際の応答を記載します。
f:id:aym413:20190607224625p:plain:w300

②クイズの内容
出題するクイズを記載します。今回はAWSのサービスに関する問題を出すことにします。
f:id:aym413:20190607225238p:plain:w300

③プレイヤーを識別するための設定
player1player2を識別できるようにします。
f:id:aym413:20190607233318p:plain

④プレイヤーを識別して、解答を促す
③のinteractionを使ってプレイヤー名を識別し、解答を促すようにします。
f:id:aym413:20190607234556p:plain:w300

⑤クイズの正解を設定
クイズの正解となる解答を記載します。
f:id:aym413:20190607234855p:plain:w300

⑥不正解だった場合の設定
不正解だった場合は「ブッブー」と鳴らし、他のプレイヤーに解答を促します。
f:id:aym413:20190607235318p:plain:w300

⑦正解だった場合の設定
正解だった場合は「ピンポン、ピンポーン」と鳴らします。
f:id:aym413:20190607235602p:plain:w300

⑧スキルの終了
正解だった場合は、スキルを終了します。
f:id:aym413:20190608001736p:plain:w300

最後にスキル名を設定します。
「Publish」>「Skill Invocation」にスキルを起動するワードを入力します。
今回は「cloud buzzer game」としました。
f:id:aym413:20190608000400p:plain

スキルを作成したら、Alexaにアップロードします。
f:id:aym413:20190608000116p:plain

早押しクイズをやってみる!

Alexa Voice Serviceのサンプルアプリを起動します。

$ sudo bash startsample.sh

また、別ターミナルでプレイヤーを識別するプログラムを起動します。

$ ./player_indentified


いよいよ、早押しクイズをやってみます!
Alexa, start cloud buzzer gameと話かけてみましょう〜

早押しクイズをやってみた動画がこちらになります↓
youtu.be

おまけ

本記事は先日行われた「AWS Asian Woman's Association - Transcend to The World! Power of IT Women」でもお話させてもらいました!
こちらもご覧いただければと思います^^

www.slideshare.net


今回はサンプルなので、問題を1つしか設定しませんでしたが、Googleスプレッドシートと連携すれば複数の問題を順番に出せるようになると思います。
そちらはまた別の機会に試してみたいと思います!

AWS認定試験 DevOps Engineer - Professional にチャレンジ!

タイトルの通り、先日AWSの認定試験である「DevOps Engineer - Professional」を受けたので、どんな勉強をしたのかを残しておきます。

最初に試験結果を書いておくと不合格でした・・。
750点が合格ラインのところ730点というあと一歩というところでした・・悔しい!!

DevOps Engineer - Professional ってどんな試験?

2019年2月に問題が改定されていますのでご注意を!

試験の合格ライン

750点/1000点

試験時間

190分

試験問題数

75問

試験の受験料

300 USD

試験内容の概要

f:id:aym413:20190522223647p:plain CI/CD、Blue/Greenデプロイメント、運用プロセスを自動化する、ログシステムの実現などなど
詳細な概要はこちらの試験ガイドをご確認ください。
試験ガイド

私のDevOps経験歴

2013年〜2017年
前職はSIerの会社で、AWSのインフラ設計・構築を主にやってました。
インフラだったので、DevOpsに関わるAWSで使ったことのあるサービスといったら、CloudFormationやCloudWatchくらいでした。
開発経験は運用スクリプトを作ってたくらいでシェルしか触ったことがありませんでした。しかも、Gitを使ったソース管理はしていなかったですし、開発環境も特になかったのでvimでゴリゴリ開発してましたw
あとはちょっと趣味で、Lambdaを触っていたのでPythonやNode.jsを書いたことがあるくらいです。

2016年
そんな中、5冠(当時の認定試験の数は5つでした)を目指し、実務経験少なかったですが、勉強してDeveloper – AssociateSysOps Administrator – Associate を取得しました。

2018年10月
現在の会社に入社してからは主にPHPを使ったアプリケーションの開発を行っています。初めてのアプリケーション開発で、GitHub、Circle CIやCodePipelineを使ったCI/CD、Dockerなどを勉強している最中です。

・・というわけで、 DevOpsの実務経験はほぼありません!

試験に向けてやったこと

公式のサンプル問題を解く

まずはどんな問題が出るのかを知るためにもサンプル問題を解くのがおすすめです。
サンプル問題

模擬試験の受験

模擬試験もなるべく早く受けるのがおすすめです。早く受ければ、どんな分野が弱いのかを把握できるので対策も打ちやすいです。
具体的な合格ラインは記載されていませんが、たぶん65%くらいで合格なのかなと思います。
・試験の合格ライン:65%(?)/100%
・試験時間    :60分
・試験問題数   :20問
・試験の受験料  :40 USD

Eラーニングの受講

ドキュメントを読むだけだとかなり辛いので、Eラーニングを受講しました。
主に2つのサイトを利用しました。

1.Udemy
Udemyは定期的にタイムセールをやっていて、お得に受講できるのでおすすめです。
英語のコースですが、字幕を出せるので少し理解しやすいかもしれないです。

AWS Certified DevOps Engineer - Professional 2019 www.udemy.com 言語:英語
サンプル問題:なし

問題改定に合わせたコースです。サンプル問題はないですが、試験を受けてみてこのコースに出てくるサービスは出てきたのでやって損はないと思います。


AWS Certified Devops Engineer - Professional (2018) www.udemy.com 言語:英語
サンプル問題:あり

サンプル問題が多く、最後のセクションには80問付いてきます。問題改定前のコースですが、大きくベースは変わらないので問題に慣れるためにもやりました。


2.AWSレーニン
試験を受ける2日前にAWSレーニングにもEラーニングがあることを発見!しっかりチェックしないとダメですね。
f:id:aym413:20190522233810p:plain 言語:英語
サンプル問題:あり

字幕がないので、英語がちょっと・・という方には辛いかもしれません。私も英語できないので、とりあえずサンプル問題だけ解きました。

試験を受けてみて

時間が足りない・・

とにかく時間が足りず、あとで確認したい問題もほとんど見直す時間がありませんでした。190分で75問なので、1問あたり2.5分で解く必要があります。プロの試験は問題文が長いものも多いので、問題の何が重要なのかを早く判断しなければいけません。
普段サンプル問題を解くときにはあまり時間を気にしていなかったので、試験勉強から時間配分を意識しながらやりたいと思いました。

ここ2,3年でリリースされたサービスも出てくる

あまり詳しく書くことはできないので、これから受ける方は先ほど紹介したUdemyのAWS Certified DevOps Engineer - Professional 2019をご覧いただき、どんなサービスが出るのか見ていただくといいと思います。
www.udemy.com


本記事と同じ内容をJAWS-UG 横浜支部でもお話してきました。

不合格なのにブログに残しておくなんてって感じですが、これから受ける人の為になれば嬉しいです。
今回はダメでしたがまたチャレンジしたいと思います!!

Raspberry PiにAlexa Voice Serviceを導入してAlexa対応デバイスにする

Raspberry PiにAlexa Voice Service(AVS)を組み込んで、Alexa対応デバイスとして使えるようにしてみます!
セットアップの手順はこちらの記事を参考にしてください。
coxcox.hatenablog.com

使用するRaspberry PiRaspberry Pi 3 Model B+ です。

Amazon Developer で製品登録を行う

下記のサイトにアクセスし、「ログイン」をクリックします。
https://developer.amazon.com/ja/alexa-voice-service

f:id:aym413:20190510121454p:plain

Amazon Developerのアカウントでログインします。
f:id:aym413:20190510121635p:plain:w300

メニューから「Alexa」> 「Alexa Voice Service」を選択します。
f:id:aym413:20190510121827p:plain

メニューから「製品」を選択します。
f:id:aym413:20190510122150p:plain

「製品を作成する」ボタンから製品の情報を登録します。
f:id:aym413:20190510122356p:plain

「製品情報」に以下のように情報を入力します。
f:id:aym413:20190510122716p:plain

「LWA セキュリティプロファイル」で「プロフィールを新規作成する」をクリックし、セキュリティプロファイルを新規作成します。
※既に存在する場合は、任意のセキュリティプロファイルを選択してください。
f:id:aym413:20190510123100p:plain

Raspberry Piで必要になるプロファイル情報をダウンロードします。
「他のデバイスやプラットフォーム」タブに移り、「クライアントID名」を入力し、「一般ID」をクリックします。
f:id:aym413:20190510124417p:plain

すると、クライアントIDが生成されるので、「ダウンロード」をクリックします。
f:id:aym413:20190510124613p:plain

最後に「これらの書面に合意します:〜」にチェックを入れ、「完了」をクリックします。
f:id:aym413:20190510124645p:plain

これで製品の登録ができました!
f:id:aym413:20190510123445p:plain:w300

Rapberry PiへAVSをインストールする

まずは、Raspberry PiSSHで接続した状態でスワップを確保しておきます。

pi@raspberrypi:~ $ sudo vi /etc/dphys-swapfile
変更前:CONF_SWAPSIZE=100
 ↓
変更後:CONF_SWAPSIZE=1024

スワップを有効にするためサービスを再起動します。

pi@raspberrypi:~ $ sudo systemctl restart dphys-swapfile

必要なファイルをダウンロードします。

pi@raspberrypi:~ $ wget https://raw.githubusercontent.com/alexa/avs-device-sdk/master/tools/Install/setup.sh \
wget https://raw.githubusercontent.com/alexa/avs-device-sdk/master/tools/Install/genConfig.sh \
wget https://raw.githubusercontent.com/alexa/avs-device-sdk/master/tools/Install/pi.sh

先ほどAVSの製品登録でダウンロードしたセキュリティプロファイルをローカルからRaspberry Pi側にコピーします。

$ scp config.json pi@raspberrypi.local:/home/pi

setup.shを実行します。「AGREE」を入力してくださいと言われるので、「AGREE」を入力してEnterキーを押下してください。
また実行途中でライセンス同意が求められるので、「yes」を入力してEnterキーを押下してください。

pi@raspberrypi:~ $ cd /home/pi/
pi@raspberrypi:~ $ sudo bash setup.sh config.json
################################################################################
################################################################################


AVS Device SDK Raspberry pi Script - Terms and Agreements


The AVS Device SDK is dependent on several third-party libraries, environments, 
and/or other software packages that are installed using this script from 
third-party sources ("External Dependencies"). These are terms and conditions 
associated with the External Dependencies 
(available at https://github.com/alexa/avs-device-sdk/wiki/Dependencies) that 
you need to agree to abide by if you choose to install the External Dependencies.


If you do not agree with every term and condition associated with the External 
Dependencies, enter "QUIT" in the command line when prompted by the installer.
Else enter "AGREE".


################################################################################
################################################################################
AGREE ←入力する
 :
Press RETURN to review the license agreement and update the files. _
 :
Do you accept this license agreement? [yes or no]:  yes ←入力する
 **** Completed Configuration/Build ***

トークンの認証

サンプルアプリを実行すると、トークンの認証をするように促されます。

pi@raspberrypi:~ $ cd /home/pi/
pi@raspberrypi:~ $ sudo bash startsample.sh
 :
##################################
#       NOT YET AUTHORIZED       #
##################################

################################################################################################
#       To authorize, browse to: 'https://amazon.com/us/code' and enter the code: XXXXX       #
################################################################################################

2019-05-05 06:40:52.106 [  4] 5 CBLAuthDelegate:handleRequestingToken
#################################################
#       Checking for authorization (1)...       #
#################################################

下記サイトにアクセスし、トークンを入力して「Continue」をクリックします。
https://amazon.com/us/code

f:id:aym413:20190510180637p:plain:w300

AVSとAlexaアカウントを連携しますよと言われるので、「Allow」をクリックします。
f:id:aym413:20190510180920p:plain:w300

「Success!」が表示されれば認証完了です!
f:id:aym413:20190510181025p:plain:w300

Alexaに話しかける

再度サンプルアプリを実行します。

pi@raspberrypi:~ $ cd /home/pi/
pi@raspberrypi:~ $ sudo bash startsample.sh
 :
########################################
#       Alexa is currently idle!       #
########################################

"Alexa, What time is it?"などと話しかけると、応答してくれると思います!

おまけ(呼びかけや発話に合わせてLEDを点灯させる)

公式のチュートリアルを参考にAlexaへの呼びかけや発話に合わせてRaspberry PiのLEDを点灯させるようにしてみました。
https://developer.amazon.com/ja/docs/alexa-voice-service/indicate-device-state-with-leds.html

Raspberry PiにLEDを接続する

下記の回路図を参考に、部品を配置していきます。
f:id:aym413:20190510203702p:plain

AVS Device SDKのファイルを編集する

LEDを点灯させるため、3つのファイルを編集します。

pi@raspberrypi:~ $ sudo vi /home/pi/avs-device-sdk/SampleApp/src/main.cpp
 :
20行目あたり
#include <cstdlib>
#include <string>

#include <wiringPi.h> ←追加
#define PIN_LED (24) ←追加

using namespace alexaClientSDK::sampleApp;
 :
50行目あたり
int main(int argc, char* argv[]) {
    wiringPiSetupGpio(); ←追加
    pinMode(PIN_LED, OUTPUT); ←追加

    std::vector<std::string> configFiles;
 :
pi@raspberrypi:~ $ sudo vi /home/pi/avs-device-sdk/SampleApp/src/UIManager.cpp
 :
15行目あたり
#include <iostream>
#include <sstream>

#include <wiringPi.h> ←追加
#define PIN_LED (24) ←追加

#include "SampleApp/UIManager.h"
 :
460行目あたり
void UIManager::printWelcomeScreen() {
    digitalWrite (PIN_LED, LOW); ←追加
    m_executor.submit([]() { ConsolePrinter::simplePrint(ALEXA_WELCOME_MESSAGE); });
}
 :
530行目あたり
void UIManager::microphoneOff() {
    digitalWrite (PIN_LED, HIGH); ←追加
    m_executor.submit([]() { ConsolePrinter::prettyPrint("Microphone Off!"); });
}
 :
550行目あたり
void UIManager::microphoneOn() {
    digitalWrite (PIN_LED, LOW); ←追加
    m_executor.submit([this]() { printState(); });
}
 :
575行目あたり
switch (m_dialogState) {
            case DialogUXState::IDLE:
                digitalWrite (PIN_LED, LOW); ←追加
                ConsolePrinter::prettyPrint("Alexa is currently idle!");
                return;
            case DialogUXState::LISTENING:
                digitalWrite (PIN_LED, HIGH); ←追加
                ConsolePrinter::prettyPrint("Listening...");
                return;
            case DialogUXState::EXPECTING:
                ConsolePrinter::prettyPrint("Expecting...");
                return;
            case DialogUXState::THINKING:
                digitalWrite (PIN_LED, LOW); ←追加
                ConsolePrinter::prettyPrint("Thinking...");
                return;
            case DialogUXState::SPEAKING:
                digitalWrite (PIN_LED, HIGH); ←追加
                ConsolePrinter::prettyPrint("Speaking...");
                return;
pi@raspberrypi:~ $ /home/pi/avs-device-sdk/SampleApp/src/CMakeLists.txt
 :
target_link_libraries(SampleApp "-lwiringPi") ←追加

サンプルアプリをビルドする

pi@raspberrypi:~ $ cd /home/pi/build/SampleApp
pi@raspberrypi:~ $ sudo make
pi@raspberrypi:~ $ cd /home/pi/
pi@raspberrypi:~ $ sudo bash setup.sh config.json

サンプルアプリを実行する

サンプルアプリを実行し、Alexaに話しかけてみます。

pi@raspberrypi:~ $ sudo bash startsample.sh

呼びかけや発話に合わせてLEDが点灯すればOKです!

drive.google.com


公式の手順には「1時間もあれば終わるよ〜」って書いてありましたが、色々ハマって1日かかりました・・。
Raspberry Pi 2もサポートしているらしいのですが、うまくいかなかったので推奨のRaspberry Pi 3で試してみたらうまくいきました。

Raspberry PiのセットアップからSSH接続できるまで

せっかくのGWなので、普段やらないことをやってみよう!と思い、Raspberry Piで遊んでみることにしました!

今回は初期のセットアップからSSH接続までをまとめておきます。

必要なもの

準備ができたら早速Raspberry Piのセットアップを行いましょう!

Raspbianのダウンロード

Raspberry PiのOSとなるRaspbianをダウンロードします。

下記のURLにアクセスし、zipファイルをダウンロードします。
www.raspberrypi.org

f:id:aym413:20190503175552p:plain

ダウンロードにかなり時間がかかるので、その間に次の手順に進みましょう!

SDカードのフォーマット

カードリーダーにmicroSDカードを差し込み、「ディスクユーティリティ」の画面を開きます。
外部ボリュームを選択し、「消去」をクリックします。
f:id:aym413:20190503180211p:plain

名前は任意、フォーマットは「MS-DOS(FAT)」を指定し、「消去」をクリックします。
f:id:aym413:20190503180311p:plain

しばらくすると、消去が終わるので「完了」をクリックします。
f:id:aym413:20190503180443p:plain

フォーマットが完了したら、「マウント解除」をクリックします。
f:id:aym413:20190503180609p:plain

これでフォーマットは完了です!

OSの書き込み

次はSDカードにOSを書き込んでいきます。

SDカードの書き込みにはbalenaEtcherというツールが便利なのでこちらを使います。
下記のURLからダウンロードしてください。

www.balena.io

最初の手順で行ったRaspbianのダウンロードが終わったら、zipファイルを解凍してimgファイルを指定します。
f:id:aym413:20190503181837p:plain

ドライブにはSDカードが指定されていることを確認し、「Flash!」をクリックします。
f:id:aym413:20190503181350p:plain

書き込み中・・
f:id:aym413:20190503182238p:plain

Flash Complete!」が出れば書き込み完了です!
f:id:aym413:20190503182303p:plain

SSH接続を有効にする

OSの書き込みを行っただけではSSH接続を行うことはできません。

再度「ディスクユーティリティ」の画面を開きます。
先ほどマウントを解除したので、「マウント」をクリックしてもう一度マウントします。
f:id:aym413:20190503182539p:plain

「ターミナル」を開き、空のsshファイルを作成します。

$ cd /Volumes/boot
$ touch ssh

Raspberry Piに接続

Raspberry Pi本体にSDカードを差し込み電源を入れると起動が始まります。

「ターミナル」を開き、下記のコマンドを実行します。
パスワードを聞かれるので、raspberryを入力し、Enterキーを押下します。

$ ssh pi@raspberrypi.local
pi@raspberrypi.local's password: 
pi@raspberrypi$

無事ログインできました!


以前もRaspberry Piで遊んだことがあったのですが、久々に使ってみると結構忘れていたので備忘録としてまとめました。
Raspberry PiとAlexaを組み合わせて遊んでみようかと思うので、お楽しみに〜!

変数名・関数名はもう考えなくていい!Phpstormにプラグイン「Codic Plugin」を使ってみた

変数名や関数名を付けるのに何にしようかな〜と悩んだ経験はありませんか?

「codic」というツールを使えば、日本語でユーザーを作成すると入力すると、createUserといったネーミングを生成してくれます。

codic.jp

これは便利!ということで早速Phpstormに導入してみました!

codicのアカウントを作成する

下記URLへアクセスして、アカウントを作成します。
https://codic.jp/signup

f:id:aym413:20190424222733p:plain:w300

codicのプロジェクトを作成する

アカウントを登録すると、メールが送られてきます。
メール本文に記載されているURLにアクセスし、プロジェクトを作成します。
f:id:aym413:20190424223346p:plain:w500

codicのAPIトークンを取得する

左のメニューにある「APIステータス」のアイコンをクリックします。
f:id:aym413:20190424223646p:plain

「アクセストークン」に記載されているAPIトークンをコピーします。
f:id:aym413:20190424224023p:plain

Phpstormにプラグイン「Codic Plugin」をインストールする

Phpstormを起動して、メニューから Preferences > Plugins を開きます。
プラグインCodic Pluginをインストールします。 f:id:aym413:20190424224541p:plain

インストールが終わったら、「Restart IDE」でPhpstormを再起動します。

codicのAPIトークンを設定する

Phpstormが再起動したら、メニューから Preferences > Codic Pluginを開きます。
先ほど取得したcodicのAPIトークンを入力し、「OK」をクリックします。(Projectsはアクセストークン設定後に選択可能です)
f:id:aym413:20190424224955p:plain

これでcodicが利用できるようになりました!設定はとても簡単ですね!

codicを使ってみる!

いよいよ、codicで関数名を生成してみます。
Cmd + Shift + D でcodicのポップアップが開きます。
何も入力していない状態でも利用できますし、事前に日本語で入力した名前を変換することもできます。

気を付けること

Codic Pluginのアクセストークンの設定は現在開いているプロジェクトにのみ有効

複数のプロジェクトで使用したい場合は、プロジェクトごとに設定が必要です。

f:id:aym413:20190424235526p:plain

APIリクエストの制限

APIリファレンスに記載されていますが、APIリクエストに制限があります。

https://codic.jp/docs/api

アクセス制限 リソースを公平に分配するために、一定時間にアクセス可能な回数に制限があります(レートリミットと言います)。最大アクセス数はプラン毎に異なります。最大アクセス数を超えてしまった場合は、APIステータスのページよりリセットしてください。

現在のプランはフリープランのみで、APIリクエストは100/1時間あたり ※リソースを有効活用するために100を下限として変動します。となっているようです。
やっている最中にAPIリクエストの上限に達してしまったのですが、リセットする方法がわかりませんでした・・。
もし知っている人がいれば教えてください!!


今回初めてcodicを使ってみましたが、いつも関数名に悩んでしまうので私にとっては救世主のようなツールでした!
意外とすぐにAPIリクエスト上限に引っかかってしまったので、フリープランのアカウントだと仕事では使えないかもしれないです・・が!Web画面からだと制限なく使えそうなのでこれからも重宝しそうです!