Vuexの値の更新を監視したい

福岡拠点の宮里です。

vueのコンポーネントからvuexの値の更新を監視して、vuexの値の更新があったときにローカルのデータを更新したい場合どうすればいいの?と調べることがあったので備忘録として記事を書きます。

まずは、vuexの日本語ドキュメントを読みました。
vuexのStoreインスタンスメソッド’watch’が良さそうです。

watch(fn: Function, callback: Function, options?: Object): Function

fnが返す値をリアクティブに監視し、値が変わった時にコールバックを呼びます。fnは最初の引数としてストアのステートを、2番目の引数としてゲッターを受け取ります。 Vue のvm.$watchメソッドと同じオプションをオプションのオブジェクトとして受け付けます。

監視を止める場合は、返された unwatch 関数を呼び出します。

(vuex.vuejs.orgより引用)

うーん、vue.jsに慣れてないので上記の説明を読んでもよくわかりません。
store.watch()で引数に関数を渡して、関数の引数に監視したいstateの値を指定するみたいです。

うーん、もう一声。

‘vuex store.watch’で検索するとそれっぽい参考になりそうなコードがいくつか。
イメージはつかめてきたものの、ただ今回は、複数に分割したストアのモジュールのローカルステートを監視したかったので、mapGettersやmapStateで実際どう書けばいいのと悩むこと数十分。

ありました、ありました!
vue.js開発者の方のブログに「Watch for Vuex State changes!」という記事が!!
探してたのこれこれ!ありがとうございます!と参考にさせていただきましたm(_ _)m

四苦八苦しつつもなんとかこのかたちに落ち着きました。
this.$store.watch()の第一引数にステート/ゲッター、どちらを渡してもうまくいきそうです。

[Laravel]ルートとコントローラー

福岡拠点の香月です。

今回はルートとコントローラーを追加します。

ブラウザでURLリンクをクリックしたときにはそれに対応した画面が表示されますが、Webサーバー内ではそのURLに対して表示するデータをモデルから取得し、そのデータをビューで整形してHTMLとして表示します。このモデルとビューの橋渡し役がコントローラーの役目となります。また、要求されたURLをどのコントローラーで処理させるかを指定したのがルート(ルーティング)です。

では早速ルートから指定していきます。laravelプロジェクトのrouteフォルダにweb.phpがあります。これを開いて次のように編集しましょう。

アプリケーションのトップURL(http://server/)が呼び出されたときに、TopControllerクラスのindexメソッドを呼び出すように指定しています。
->name(‘top’)でこのルートに対して名前を付けています。ここでつけた名前は他の場所でURIを指定するときに使うことができます。

次はTopControllerの作成です。シェルで次のコマンドを実行します。

するとapp/Http/Controllers/TopController.phpにファイルが作成されます。
クラスメソッドとしてindex()を追加してあげましょう。

route\web.php内で直接指定していたようこそ画面の表示を、コントローラーを介して表示するように変更しただけのものですが、このようにしておくことでビュー(ここではようこそ画面)で表示したいデータをphpプログラムで集めて、計算して、整形して表示することができるようになります。

上のphp artisan make:controllerコマンドではオプションは指定していませんでしたが、–model=[Model]や–resourceオプションを指定することで、リソースコントローラを作成することができます。
こうすることで作成されるコントローラ用ファイルにindex(), create(), store(), show(), edit(), update(), destroy()の名前が付いた空のメソッドが一緒に作成されます。例えばStudentモデル用のリソースコントローラを作成するにはこう書きます。

また、リソースコントローラを使う場合はroute/web.phpのルート指定を次のようにすることで、URIとアクションが自動的に割り付けられたルーティングが完成します。

Route::resource()の1行で次のルーティングが完成します。

動詞 URI 対応メソッド ルート名
GET /students index students.index
GET /students/create create students.create
POST /students store students.store
GET /students/{student} show students.show
GET /students/{student}/edit edit students.edit
PUT/PATCH /students/{student} update students.update
DELETE /students/{student} destroy students.destory

これはいわゆるRESTful APIとして設定されており、必要なURIが揃っているのでリソース(≒モデル)のCRUD(Create, Read, Update, Delete)管理がはかどるでしょう。

リソースコントローラの考え方は他のWebフレームワークでも同様に使われています。Ruby on Railsでは「rails generate scaffold …」コマンドが使えて同じようなルートを生成してくれますし、CakePHPでもルート指定時にまとめて設定してくれる方法があります。これらからLaravelに来た人にとってはわかりやすいですよね。

[Laravel]シーダー

お久しぶりです。福岡拠点の香月です。

今回はシーダーです。
作成したテーブルに初期データやテストデータをを投入するときに使います。

前回からテーブルを2つ「subjects」「students」を追加しています。

マイグレーションファイルでフィールドを定義して

マイグレーション

これでテーブルが追加されました。
ではここに初期データを投入しましょう。Subjectテーブルは科目、Studentテーブルは生徒、Scoreテーブルは点数です。
まずはシーダーファイルを作成するために、make:seederコマンドを実行します。

すると、Laravelプロジェクトフォルダのdatabase/seedsフォルダにファイルSubjectSeeder.php、StudentSeeder.php、ScoreSeeder.phpが作成されます。

まずはSubjectシーダー。
作成されたシーダークラスファイルには run() メソッドが用意されています。シーダーが呼び出されるとこのメソッドが実行されるようになっているため、ここにデータ投入用プログラムを記述します。
上にuse App\Subject; を追加して、Subject Eloquentモデルを使えるようにするのを忘れずに。

Subjectクラスのインスタンスを作成して、フィールドに値を設定し、save()メソッドを呼ぶことでレコードが追加されます。
このプログラムでは$seeds配列の1つ1つが1レコードとなるようなプログラムになっています。

続いてStudentシーダー。こちらはモデルファクトリを使って、フィールド値をランダム生成します。フィールド値には日本語を使いたいので、config\app.phpを次のように修正。

次にファクトリコード用のファイルを作成します。

作成したファイルdatabase\factories\StudentFactory.phpを次のようにします。

$factory->define()の第二引数のクロージャで、Studentレコード1件分の情報としてフィールド名(キー)と値(バリュー)の配列を返すようになっています。$faker->lastName、$faker->firstName部分がランダム生成の部分。これ以外にもcity、phoneNumber、wordなどいろいろ使えます。便利。誕生日は2011/04/02~2012/04/01までの1年間でランダムに生成されるようにしました。

そしてdatabase\seeds\StudentSeeder.phpです。

モデルファクトリを使って20個のエントリを簡単に作成できます。

database\seeds\ScoreSeeder.phpはこう。

作成したSubject、Studentの全レコードを取得し、ループで回しながら作成していきます。

プログラムができたらシーダーを実行しましょう。実行コマンドはdb:seedです。
実行するクラス名を–class=オプションで指定します。

これは1つずつ実行するコマンドとなりますが、まとめて実行したい場合は最初から用意されているDatabaseSeederクラスを利用するとよいでしょう。
database\seeds\DatabaseSeeder.phpファイル内の run() メソッドからまとめて処理したいクラスを指定して、

db:seedコマンドをオプションなしで実行します。

これでデータ投入が完了しました。

[Laravel]追加のマイグレーション

福岡拠点の香月です。

前回はDBのマイグレーションを行いました。
既にマイグレーション実行済みのテーブルに変更を行いたい場合、アプリケーションが稼働する前であればロールバックしてマイグレーションをやり直せばいいのですが、本稼働後のバージョンアップなどでデータを棄損することなくテーブルにフィールドを追加したいことがあります。この場合、フィールド追加用のマイグレーションを実施することになります。

まずは前回と同じようにマイグレーションファイルを作成しましょう。

これによりdatabase/migrations/(日付)alter_scores_table.phpが作成されますので、ここに追加したいフィールドを記載します。

up()メソッドにマイグレーション実施時のコードとして、scoreフィールドをexam_dayの後ろに追加するようにしています。
もちろんクロージャの中では必要なフィールドを1つだけではなく複数記述できます。文字列フィールド、timestampフィールドなど用途に合わせて追加しましょう。
カラム修飾子には->after()を使用しています。これ以外にもnullを許容する->nullable()、コメント文字列を指定する->comment()などいろいろ使えますよ。

down()メソッドにはロールバック実施時に実行されるコードを記述します。ここ忘れがちなので注意!

マイグレーションファイルを作成したら、マイグレーションを実施します。

マイグレーションが実施されていないファイルを対象に実施されます。同じファイルが2度3度と実施されることはないので安心してください。
実行後に反映されたことを確認しましょう。

 

Gitlab第1歩

福岡拠点の宮里です。
社内用にGitlab環境を構築しました。

当初は、必要なミドルウェアをひとつひとつソースからインストールして、Gitlab環境を作ろうとしていたのですがこれが大変。今回はまっさらな環境に構築するというのと、ソースからインストールした場合は導入後の管理の手間もかかるという理由もあり、おとなしく公式パッケージからインストールすることにしました。

公式パッケージを使用すると、当たり前ですが本当に楽ちん。1時間ぐらいで初期設定まで完了します。

Gitlabの公式ドキュメントでも、わざわざ一番最初に”パッケージからインストールすることをおすすめするよ”と書いてあるのですが、ちゃんと言うこと聞いておけば良かったと今回本当に身に染みました。

Omnibusパッケージのインストールを検討する
ソースからのインストールは多くの作業とエラーが発生しやすいので、高速で信頼性の高いOmnibusパッケージのインストール(deb / rpm)を強くお勧めします。

(公式ドキュメントより引用)

あと、最低限の使用でもハードウェアリソースの要件が意外と高く、まず最初に導入するサーバーのスペックが要件を満たしているか確認することをおすすめします。スペックが足りてないと、インストールしたあとに500エラーが頻発します(/д\)

公式ドキュメントのインストール要件ページ

公式パッケージを使用するのであれば、やることは簡単です。

設定ファイルを修正後、Gitlabの再構成コマンドを実行します。

サーバーのIPへアクセスして、Gitlab管理ユーザーのパスワードを変更したらインストールは完了です。

公式ドキュメントをちゃんと読んで確認することはしっかり確認しよう、というお話でした。

Jmeterログを攻略する

福岡拠点の野田です。
最近ひさしぶりにJmeterを使って負荷テストをしました。

Jmeterから実行結果をログに出力することができますが、XMLかCSVかjmeter.propertiesで選ぶことができます。

XMLは、ページアクセスに起因する問合せをすべて記録することができます。一方、CSVにおいては、画像、CSS、JSなど付随情報は、明示してシナリオを作成していない限りログに記録することができません。そのため、出力はXMLで出力していたほうが広くログを残すことができます。ここは迷わずXMLを指定してください。

付随する関連ログをすべて残すためには、以下のsubresultsをtrueで指定します。

実行コマンドの例を提示します。

HTMLのみのログに残すためには以下のような処理で加工することができます。

※個別ログのtestResult+必要なXMLタグで含まれる範囲で絞り込み。その後、css/jpg/png/js/svg/gif/icoを排除。

ここまでは、XML最高!なのですが、実は大きな欠点があります。実は、XMLログからはHTMLレポートが作成できません。

そんなときどうしたらいいか。

XMLからCSVを作ればオッケーです。そこで使えるのが、XSLT。

jmeter_xml2csv.xslt

XMLからCSVを変換するコマンド例は以下。

XMLからCSVに変換したファイルを使って、以下のコマンドで晴れてレポートを作れるようになりました。

他にもコマンドラインからプラグインを呼び出すことも簡単にできます。
元のログから集計結果を得たいときは以下。

※利用にあたって、標準プラグインと呼ばれるjarライブラリをlib/ext 以下に配置する必要があります。
https://jmeter-plugins.org/downloads/old/

こちらもご参考まで。

すてきなLaradock

福岡拠点の宮里です。
Dockerを勉強し始めました!
DockerでLaravel開発環境を構築する場合に便利なLaradockというパッケージがあり、併せて勉強中です。

Laradockとは

PHP開発環境を構築できるDockerイメージのパッケージです。
DockerでLaravelプロジェクトを実行することに焦点を当てて開発されています。
Laravel以外にもSymfony、CodeIgniter、WordPress、Drupalなどの他のPHPプロジェクトもサポートしています。
officialのDockerイメージをベースに拡張したパッケージなので信頼性があるとのことです。

Laradockが魅力的なのは、なんといってもその豊富なソフトウェア群です。
build→upで必要なライブラリを都度追加・更新が行えます。

備忘録としてそのパッケージをリストアップしました。(2018年11月時点)

サポートしているソフトウェア(一部)

Portainer

Docker管理WebGUIツール
公式サイト: https://portainer.io/

Docker Registry

Dockerプライベートレジストリサーバ
Dockerドキュメント: https://docs.docker.com/registry/

Docker Web UI

DockerプライベートレジストリWebUI管理ツール
Github: https://github.com/kwk/docker-registry-frontend

MySQL

データベースサーバ
公式サイト: https://www.mysql.com/jp/

MariaDB

MySQL派生のオープンソースデータベースサーバ。
公式サイト: https://mariadb.org/

phpMyAdmin

MySQLサーバー管理ツール
公式サイト: https://www.phpmyadmin.net/

PostgreSQL

オープンソースデータベースサーバ。
公式サイト: https://www.postgresql.org/

pgAdmin

PostgreSQLサーバー管理ツール
公式サイト: https://www.pgadmin.org/

Microsoft SQL Server

データベースサーバ
公式サイト: https://www.microsoft.com/en-us/sql-server/sql-server-2017

Redis

オープンソースのメモリ内データ構造ストアで、データベース、キャッシュ、メッセージブローカーとして使用。NoSQLデータベースサーバ。
公式サイト: https://redis.io/

Aerospike

KVS。フラッシュ(SSD)に最適化したNoSQLデータベースサーバ。
公式サイト: https://www.aerospike.com/

Minio

Go言語製Amazon S3クラウドストレージサービスと互換性を持ったオブジェクトストレージサーバ。
公式サイト: https://docs.minio.io/

Apache2

世界中でもっとも多く使われているWebサーバ
公式サイト: https://httpd.apache.org/

Nginx

Webサーバ
公式サイト: https://nginx.org/en/

Caddy

Go言語で実装されたwebサーバ
公式サイト: https://caddyserver.com/

Varnish

HTTPアクセラレータ
公式サイト: https://varnish-cache.org/

Certbot

Let’s Encryptのクライアント
公式サイト: https://certbot.eff.org/

Laravel Echo Server

LaravelのSocket.IOサーバライブラリ
Laravel公式ドキュメント: https://laravel.com/docs/5.7/broadcasting
GitHub: https://github.com/tlaverdure/laravel-echo-server

Swoole

PHPネットワークフレームワーク。
公式サイト: https://www.swoole.co.uk/

Solr

オープンソースの全文検索エンジン
公式サイト: http://lucene.apache.org/solr/

Elasticsearch

Lucene基盤の分散処理マルチテナント対応オープンソースの検索エンジン。分散型RESTful検索/分析エンジン。
公式サイト: https://www.elastic.co/jp/products/elasticsearch

Kibana

Elasticsearch用ビジュアライズ/データ可視化ツール
公式サイト: https://www.elastic.co/jp/products/kibana

Grafana

データ可視化ツール。
対応ツール:Graphite、Prometheus、Elasticsearch、InfluxDB、OpenTSDB、MySQL、AWS Cloudwatch
公式サイト: https://grafana.com/

Metabase

オープンソースのデータ可視化ツール
対応:MySQL, Postgres, Mongo, SQL Server, AWS Redshift, Google BigQuery, Druid, H2, SQLite, Oracle, Crate, Google Analytics, Vertica
公式サイト: https://www.metabase.com/

NetData

サーバのリアルタイムパフォーマンスと健全性モニタリングツール
Github: https://github.com/netdata/netdata

Thumbor

画像のクロッピング、リサイズ、フィルタリング等の画像変換サーバー
公式サイト: http://thumbor.org/

Beanstalkd

オープンソースのメッセージキューイング。Laravelがサポート。
公式サイト: https://beanstalkd.github.io/

Beanstalk Console

PHP製Beanstalkd管理ツール
Github: https://github.com/ptrofimov/beanstalk_console

RabbitMQ

メッセージキューイング
公式サイト: https://www.rabbitmq.com/

HHVM

PHP実行環境
公式サイト: https://hhvm.com/

PHP-FPM

PHP FastCGI実装
公式サイト: https://php-fpm.org/
PHPドキュメント: http://php.net/manual/ja/install.fpm.php

JupyterHub

Jupyter Notebook用のマルチユーザーサーバ
公式サイト: https://jupyterhub.readthedocs.io/en/stable/

ICEcoder

PHP製のWebブラウザIDE。
公式サイト: https://icecoder.net/

Coding WebIDE

クラウドベースのWebIDE
公式サイト: https://ide.coding.net/

Codiad

PHP製のWebブラウザIDE。
公式サイト: http://codiad.com/

Theia

クラウド版Visual Studio Code
公式サイト: https://www.theia-ide.org/

Mailu

DockerベースのWebUI付きメールサーバ
公式サイト: https://mailu.io/

MailDev

Eメールテストツール。
SMTP Server + Web Interface for viewing and testing emails during development.
Github: https://github.com/djfarrelly/MailDev

MailHog

Go言語製Eメールテストツール。
Web and API based SMTP testing
Github: https://github.com/mailhog/MailHog

Selenium

ブラウザ自動化ツール
公式サイト: https://www.seleniumhq.org/

Blackfire

PHPプロファイリングツール。パフォーマンステストツール。結果をWebUIで確認できる。
公式サイト: https://blackfire.io/

Jenkins

Java製オープンソース継続的インテグレーションツール
公式サイト: https://jenkins.io/

GitLab

Gitリポジトリ管理
公式サイト: https://about.gitlab.com/

積極的に活用していきたいですね。

AWSでインスタンスを停止し、再起動した時にパブリックIPが割り振られない場合

AWS特訓中の宮里です。

AWSでインスタンスを作成したときに、少し困った現象があったため情報共有したいと思います。

AWSで作成したインスタンスを一旦停止後、ネットワークインターフェイスを追加し、再起動した後にパブリックIPが割り振られない現象が発生しました。

?????となりながら、再起動を何度か試すもパブリックIPは復活せず。
作成したばかりのインスタンスだったので、インスタンスを一から作成し直し、特に問題は起こりませんでした。
その後、気になったので原因を調べてみると、AWS公式のドキュメントに今回の現象の解答がありました。

下記、公式のドキュメントから一部引用します。

手動でパブリック IP アドレスをインスタンスに関連付けること、また、手動でインスタンスから割り当て解除することはできません。場合によって、パブリック IP アドレスはインスタンスから解放されたり、新しいインスタンスに割り当てられたりします。
インスタンスが停止または終了されると、インスタンスのパブリック IP アドレスは解放されます。停止していたインスタンスが再起動されると、そのインスタンスには新しいパブリック IP アドレスが送信されます。
VPC 内のインスタンスのパブリック IP アドレスが既に解放されている場合には、複数のネットワークインターフェイスがインスタンスにアタッチされていると、インスタンスに新しいパブリック IP アドレスは送信されません。

出典:
AWS ドキュメント「パブリック IPv4 アドレスと外部 DNS ホスト名」

インスタンスを再起動するときは、プライマリENI以外はインスタンスにアタッチしてはいけないということでした。。。

少しづつ身につけていきたいと思います。

プログラミング教育のテキスト yes!作りかけ。

だいぶん前から プログラミング教育を学校で開始するという話があり、2020年から義務教育で取り入れられるという事になりました。

そんな話もあり、Scratch+A4S+Arduinoを利用した教育用のテキスト(小学校高学年向け)を作ってみました。(ええ!もちろん作りかけです)

ScratchとA4s ( https://github.com/damellis/A4S )を組み合わせてArduino UNOを操作する環境を作り、その環境でのプログラミングを勉強するという内容にしています。

子供にプログラミングを教える、一緒にプログラミングを学ぶ時につかっていただければと思います。

#だれか資料を完成させてください!

テキスト

A4S-master2