Laravelでタスク管理アプリを作る~タスク登録・表示機能~
Laravelでタスク管理のWebアプリを作ってみました！
今回はタスク名と期限を入れるような簡単なものです。
完成イメージはこんな感じです。
Laravelの環境構築とDBのマイグレーションはこちらの記事を参考にしてください。 coxcox.hatenablog.com
MVCモデルを使ってタスクの表示・追加ができるようにしていきます。
MVCモデルとは？
Model・View・Controllerの頭文字をとったもので、プログラミングの処理を3つの役割に分けて実装する方法です。
タスク一覧を表示できるようにする
ルーティングを追加する
タスク一覧を表示できるようにするため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です！
一覧表示ができるようになったら、タスクを追加できるようにします！
タスクを追加できるようにする
ルートを追加する
タスクを追加する画面を表示する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_atとupdated_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です！
今回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ユーザーグループリーダー（日本、シンガポール、タイ、フィリピン、韓国）が主体となって進めていきました。
日本からは今回のイベントの発起人である伊藤博美さんをはじめ、スピーカー3名、LT2名を含む計9名が参加！日本パワーも見せることができました！
そして私はスタッフ・スピーカーとして参加してきました！
スタッフとして
・LTの募集やスポンサーの募集ページの作成・連絡
なんだ簡単じゃん！と思うかもしれないですが、グローバルでの開催になるため、作成ページは全て英語。。
英語が苦手な私にとってはちょっとした文章でも一苦労なのでした。。
・当日
当日はスピーカー以外にも、会場設営や受付、各セッションでのタイムキーパーもやったりしてました。
スピーカーとして
Raspberry Pi に Alexa Voice Service（AVS）を入れて Alexa デバイスを作ってみたよ！という話をしてきました。
日本でのAlexaの注目度についてやRaspberry Piの紹介、Raspberry Pi に Alexa Voice Service（AVS）を入れてサンプルアプリケーションを作るまでの話、応用編として早押しクイズを作ってみた話をしました。
スライドはこちら
早押しクイズの作り方についてはこちらの記事に書いていますのでご覧ください！
coxcox.hatenablog.com
当日の様子
SNSをフォローしよう！
なんだかおもしろそう！と興味を持ってくださった方は以下のSNSをフォローしてみてください！
Webサイト：https://aawa.info/
Facebook：https://www.facebook.com/groups/AWSAsianWomen/
Twitter：https://twitter.com/AWSAsianWomen
今回のイベントではシンガポール在住の日本人の方々とも交流することができ、とても刺激を受けました。
英語が苦手な私ですが、海外の方が積極的に話しかけてくれて、私の言いたいことを汲み取ろうとしてくれて、英語が少し好きになりました。これからも継続的に英語の勉強は頑張っていこうと思ったのでした。
また懇親会ではこのイベントを継続したい！という話もあり、次はタイでやろうか！なんていう話もしました。ということで、これからますますおもしろくなっていきそうです！
Alexa on Raspberry Piで早押しクイズを実装する！
Alexaスキルを自分で作って、Alexa on Raspberry Piで早押しクイズを実装してみました！
早押しクイズの流れ
ゲームのプレイヤーは2人の設定
- プレイヤーが早押しクイズを起動する
- Alexaがクイズを出す
- 正解がわかったプレイヤーはボタンを押す
- どのプレイヤーがボタンを押したのかを識別する
- ボタンを押したプレイヤーに答えを促す
- プレイヤーが回答する
- 回答が間違っていれば解答権を渡す、正解であればクイズを終了する
今回難しかったのが手順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ピン
ボタンを押したプレイヤーを識別するためのプログラムを作成する
プレイヤーを識別するプログラムは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
そして、完成したスキルがこちらです！
①ユーザーがスキルを起動したあとの応答
スキルを起動した際の応答を記載します。
②クイズの内容
出題するクイズを記載します。今回はAWSのサービスに関する問題を出すことにします。
③プレイヤーを識別するための設定
player1とplayer2を識別できるようにします。
④プレイヤーを識別して、解答を促す
③のinteractionを使ってプレイヤー名を識別し、解答を促すようにします。
⑤クイズの正解を設定
クイズの正解となる解答を記載します。
⑥不正解だった場合の設定
不正解だった場合は「ブッブー」と鳴らし、他のプレイヤーに解答を促します。
⑦正解だった場合の設定
正解だった場合は「ピンポン、ピンポーン」と鳴らします。
⑧スキルの終了
正解だった場合は、スキルを終了します。
最後にスキル名を設定します。
「Publish」>「Skill Invocation」にスキルを起動するワードを入力します。
今回は「cloud buzzer game」としました。
スキルを作成したら、Alexaにアップロードします。
早押しクイズをやってみる！
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」でもお話させてもらいました！
こちらもご覧いただければと思います^^
今回はサンプルなので、問題を1つしか設定しませんでしたが、Googleスプレッドシートと連携すれば複数の問題を順番に出せるようになると思います。
そちらはまた別の機会に試してみたいと思います！
AWS認定試験 DevOps Engineer - Professional にチャレンジ！
タイトルの通り、先日AWSの認定試験である「DevOps Engineer - Professional」を受けたので、どんな勉強をしたのかを残しておきます。
最初に試験結果を書いておくと不合格でした・・。
750点が合格ラインのところ730点というあと一歩というところでした・・悔しい！！
DevOps Engineer - Professional ってどんな試験？
2019年2月に問題が改定されていますのでご注意を！
試験の合格ライン
750点/1000点
試験時間
190分
試験問題数
75問
試験の受験料
300 USD
試験内容の概要
CI/CD、Blue/Greenデプロイメント、運用プロセスを自動化する、ログシステムの実現などなど
詳細な概要はこちらの試験ガイドをご確認ください。
試験ガイド
私のDevOps経験歴
2013年〜2017年
前職はSIerの会社で、AWSのインフラ設計・構築を主にやってました。
インフラだったので、DevOpsに関わるAWSで使ったことのあるサービスといったら、CloudFormationやCloudWatchくらいでした。
開発経験は運用スクリプトを作ってたくらいでシェルしか触ったことがありませんでした。しかも、Gitを使ったソース管理はしていなかったですし、開発環境も特になかったのでvimでゴリゴリ開発してましたw
あとはちょっと趣味で、Lambdaを触っていたのでPythonやNode.jsを書いたことがあるくらいです。
2016年
そんな中、5冠（当時の認定試験の数は5つでした）を目指し、実務経験少なかったですが、勉強してDeveloper – Associate と SysOps 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ラーニングがあることを発見！しっかりチェックしないとダメですね。
言語：英語
サンプル問題：あり
字幕がないので、英語がちょっと・・という方には辛いかもしれません。私も英語できないので、とりあえずサンプル問題だけ解きました。
試験を受けてみて
時間が足りない・・
とにかく時間が足りず、あとで確認したい問題もほとんど見直す時間がありませんでした。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 Pi は Raspberry Pi 3 Model B+ です。
Amazon Developer で製品登録を行う
下記のサイトにアクセスし、「ログイン」をクリックします。 https://developer.amazon.com/ja/alexa-voice-service
Amazon Developerのアカウントでログインします。
メニューから「Alexa」> 「Alexa Voice Service」を選択します。
メニューから「製品」を選択します。
「製品を作成する」ボタンから製品の情報を登録します。
「製品情報」に以下のように情報を入力します。
「LWA セキュリティプロファイル」で「プロフィールを新規作成する」をクリックし、セキュリティプロファイルを新規作成します。
※既に存在する場合は、任意のセキュリティプロファイルを選択してください。
Raspberry Piで必要になるプロファイル情報をダウンロードします。
「他のデバイスやプラットフォーム」タブに移り、「クライアントID名」を入力し、「一般ID」をクリックします。
すると、クライアントIDが生成されるので、「ダウンロード」をクリックします。
最後に「これらの書面に合意します：〜」にチェックを入れ、「完了」をクリックします。
これで製品の登録ができました！
Rapberry PiへAVSをインストールする
まずは、Raspberry PiにSSHで接続した状態でスワップを確保しておきます。
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
AVSとAlexaアカウントを連携しますよと言われるので、「Allow」をクリックします。
「Success!」が表示されれば認証完了です！
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を接続する
下記の回路図を参考に、部品を配置していきます。
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です！
公式の手順には「1時間もあれば終わるよ〜」って書いてありましたが、色々ハマって1日かかりました・・。 Raspberry Pi 2もサポートしているらしいのですが、うまくいかなかったので推奨のRaspberry Pi 3で試してみたらうまくいきました。
Raspberry PiのセットアップからSSH接続できるまで
せっかくのGWなので、普段やらないことをやってみよう！と思い、Raspberry Piで遊んでみることにしました！
今回は初期のセットアップからSSH接続までをまとめておきます。
必要なもの
- Raspberry Pi
- microSDカード
- カードリーダー（microSDカードが入るもの）
準備ができたら早速Raspberry Piのセットアップを行いましょう！
Raspbianのダウンロード
Raspberry PiのOSとなるRaspbianをダウンロードします。
下記のURLにアクセスし、zipファイルをダウンロードします。 www.raspberrypi.org
ダウンロードにかなり時間がかかるので、その間に次の手順に進みましょう！
SDカードのフォーマット
カードリーダーにmicroSDカードを差し込み、「ディスクユーティリティ」の画面を開きます。
外部ボリュームを選択し、「消去」をクリックします。
名前は任意、フォーマットは「MS-DOS（FAT）」を指定し、「消去」をクリックします。
しばらくすると、消去が終わるので「完了」をクリックします。
フォーマットが完了したら、「マウント解除」をクリックします。
これでフォーマットは完了です！
OSの書き込み
次はSDカードにOSを書き込んでいきます。
SDカードの書き込みにはbalenaEtcherというツールが便利なのでこちらを使います。 下記のURLからダウンロードしてください。
最初の手順で行ったRaspbianのダウンロードが終わったら、zipファイルを解凍してimgファイルを指定します。
ドライブにはSDカードが指定されていることを確認し、「Flash!」をクリックします。
書き込み中・・
「Flash Complete!」が出れば書き込み完了です！
SSH接続を有効にする
OSの書き込みを行っただけではSSH接続を行うことはできません。
再度「ディスクユーティリティ」の画面を開きます。
先ほどマウントを解除したので、「マウント」をクリックしてもう一度マウントします。
「ターミナル」を開き、空の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といったネーミングを生成してくれます。
これは便利！ということで早速Phpstormに導入してみました！
codicのアカウントを作成する
下記URLへアクセスして、アカウントを作成します。
https://codic.jp/signup
codicのプロジェクトを作成する
アカウントを登録すると、メールが送られてきます。
メール本文に記載されているURLにアクセスし、プロジェクトを作成します。
codicのAPIトークンを取得する
左のメニューにある「APIステータス」のアイコンをクリックします。
「アクセストークン」に記載されているAPIトークンをコピーします。
Phpstormにプラグイン「Codic Plugin」をインストールする
Phpstormを起動して、メニューから Preferences > Plugins を開きます。
プラグインのCodic Pluginをインストールします。
インストールが終わったら、「Restart IDE」でPhpstormを再起動します。
codicのAPIトークンを設定する
Phpstormが再起動したら、メニューから Preferences > Codic Pluginを開きます。
先ほど取得したcodicのAPIトークンを入力し、「OK」をクリックします。（Projectsはアクセストークン設定後に選択可能です）
これでcodicが利用できるようになりました！設定はとても簡単ですね！
codicを使ってみる！
いよいよ、codicで関数名を生成してみます。
Cmd + Shift + D でcodicのポップアップが開きます。
何も入力していない状態でも利用できますし、事前に日本語で入力した名前を変換することもできます。
気を付けること
Codic Pluginのアクセストークンの設定は現在開いているプロジェクトにのみ有効
複数のプロジェクトで使用したい場合は、プロジェクトごとに設定が必要です。
APIリクエストの制限
APIリファレンスに記載されていますが、APIリクエストに制限があります。
アクセス制限 リソースを公平に分配するために、一定時間にアクセス可能な回数に制限があります（レートリミットと言います）。最大アクセス数はプラン毎に異なります。最大アクセス数を超えてしまった場合は、APIステータスのページよりリセットしてください。
現在のプランはフリープランのみで、APIリクエストは100/1時間あたり ※リソースを有効活用するために100を下限として変動します。となっているようです。
やっている最中にAPIリクエストの上限に達してしまったのですが、リセットする方法がわかりませんでした・・。
もし知っている人がいれば教えてください！！
今回初めてcodicを使ってみましたが、いつも関数名に悩んでしまうので私にとっては救世主のようなツールでした！
意外とすぐにAPIリクエスト上限に引っかかってしまったので、フリープランのアカウントだと仕事では使えないかもしれないです・・が！Web画面からだと制限なく使えそうなのでこれからも重宝しそうです！
