nuxt.js環境を構築する

福岡拠点の野田です。

サーバーサイドでレンダリングするSSR(Server Side Rendering)を次の案件で使うことにしました。API側は慣れ親しんだLaravel。

最初に悩むのが環境構築。
どうしようか、というところで参考にしたのが、次の記事。

LaravelとNuxt.jsを同一レポジトリで管理するときの構成https://www.wantedly.com/companies/roxx/post_articles/84615

client フォルダ以下に環境を作る例ですが、とても参考になりました。以下おっかけになりますが手順になります。

install -d client/pages/.gitkeep
install -d client/assets/.gitkeep
install -d client/components/.gitkeep
install -d client/layouts/.gitkeep
install -d client/middleware/.gitkeep
install -d client/plugins/.gitkeep
install -d client/static/.gitkeep
install -d client/store/.gitkeep

nuxtは起動フォルダ配下に.nuxtという一時ファイルを作成します。このため設定ファイルをclient以下に配置して、このフォルダを起動フォルダとします。

設定ファイル (nuxt.config.js)

module.exports = {
    srcDir: '../client/',

    server: {
        port: 5000, // デフォルト: 3000
        host: 'localhost', // デフォルト: localhost,
        timing: false
    },
    css: [
        'bootstrap/dist/css/bootstrap.css',
        'bootstrap-vue/dist/bootstrap-vue.css',
    ],
    plugins: [
        '@/plugins/bootstrap',
    ]
}

起動シェル(再起動シェル)は以下のような感じで作ります。

#!/bin/bash

export nuxt_count=`grep -a "" /proc/*/cmdline | xargs -P1 -r -0 | grep -s nuxt.config.js | grep -v -E '(grep|\.sh)' | wc -l`
while [ $nuxt_count -gt 0 ]
do
    ps aux |grep nuxt.config.js | grep -v -E '(grep|\.sh)' | gawk '{print $2}' | xargs -r kill -9
    sleep 1
    export nuxt_count=`grep -a "" /proc/*/cmdline | xargs -P1 -r -0 | grep -s nuxt.config.js | grep -v -E '(grep|\.sh)' | wc -l`
done

echo "" | ../node_modules/.bin/nuxt -c ./nuxt.config.js &

ちなみにecho “” | はjenkinsから呼び出したとき、標準入力を要求されたので、それ対策で入れています。

このシェルを実行することでnuxt.jsサーバーが起動します。

nuxtは素のvueでやるよりも以下の点で優れていると思います。

  • 自動でルーティングしてくれる。
  • レイアウト機構を持っている。
  • API連携の仕組みも実装しやすい形で持っている。

VueやReactやAngularは、マイクロサービスをつなげる糊の役割をしているフレームワークだと思います。これからもっと深く使っていきたいと思います。

JQコマンドをおぼえた

福岡拠点の野田です。久しぶりの投稿です。

ある案件でAWSを扱っており、ELBからインスタンスが切り離されたか確認してほしいと連絡がありました。生憎、AWS Consoleへの接続アカウントをもらっていない状態で調べられない…と思ったのですが、aws-cliがインストールされてあるサーバーがあることに気づき、そちらで確認してみました。

ELBの一覧を表示するコマンドは以下のようなものになります。

 aws --output json --region ap-northeast-1 elb describe-load-balancers

けれども、awsのコマンドで出てくる内容はjsonで縦に長い!必要な情報だけに整理したいときに役立つのがjq(恐らくjson queryの略)コマンドになります。jsonの中からDNSNameと紐づくインスタンスを見たい場合は、以下のようなクエリをjqに投げます。

 aws --output json --region ap-northeast-1 elb describe-load-balancers | jq -r '.LoadBalancerDescriptions[] | {DNSName, Instances}'

jqコマンドの基本は、配列のフィルターと生成。.から始まる要素がフィルターされる内容になります。{}や[]で配列を再構築します。詳しいやり方は以下をご参考ください。

すぐれものなのは、jsonからcsvを作れること。以下のような感じでフィルターと配列の再構築を利用すれば、@csvでcsvの作成も楽々です。

aws --output json --region ap-northeast-1 elb describe-load-balancers | jq -r '.LoadBalancerDescriptions[] | [.DNSName, .Instances[].InstanceId] | @csv'

zabbixと連携させたりとか、 レポート出力を簡易化できないかとか夢が広がりますよね?是非、jqを使ってより良いjsonライフを!

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/

こちらもご参考まで。

[Go] Go言語はじめました (#1):インストール

福岡拠点野田です。
気が付けば涼しい季節になりましたが、いかがお過ごしでしょうか。

Go 言語について動けていなかったため、重い腰を上げて取り組みたいと思います。Go言語でよく使われているのは、WebAPIやメール送信・集計などのバッチ処理だと思います。javaも高速に処理ができますが重量級なイメージがあります。起動もすばやく、軽量で高速に並列処理ができるのは大きな魅力があります。

第1回目となる今回はインストールを行います。

インストール

https://golang.org/dl/

インストールは至って簡単。ダウンロードしたファイルを解凍して配置するだけ。

.bash_profileなどにパスを追加してもらえればOKです。

GOROOT というのがダウンロードして配置したGo自体のインストール先になります。

GOPATH というのが各プロジェクトフォルダに相当します。ここで開発モジュールの配置先となり、コンパイルしてできた実行ファイルが $GOPATH/bin 以下に配置されます。

Go言語初心者に向けてどのように開発を進めていくのがよいかについて深堀していこうと思います。

ちなみに go get してエラーがでるときは OS のモジュールバージョンが古い可能性が高いです。yum upgrade してすべてのモジュールを更新しておきましょう。

[Laravel] 値検査(バリデーション)について

福岡拠点の野田です。
秋雨や台風が気になりますが、過ごしやすい日々が増えてきたと思います。
今日は、Laravel の値検査の仕組みについて取り上げようと思います。

Laravel には値検査を行う設計の方向性として大きく3つの選択肢があります。
・FormRequest を継承してリクエストフォームオブジェクトを作る
・ValidatesRequestsトレイトを使う
・Validator ファサードを使う

FormRequestを作る場合

Controller に対して Illuminate\Foundation\Http\FormRequest 型のメソッドインジェクションを指定しておくとそのメソッドに対応するURLが呼び出された際に値検査がかかるという仕組みになります。バリデーションの結果が false の場合、リクエスト値をセッションに保存して、リクエストを投げた前のページに戻ります。

とても便利な仕組みですが、都度、FormRequestを実装することになります。毎回似たようなコードを書くのは煩わしいですよね。そこで以下のような基底クラスを作成して継承して使いまわすことにします。この基底クラスは、自分のクラス名からバリデーションの設定を読み込んで動作する仕組みで動いています。

以下は、config/validation.php の記述例です。FormRequest実装クラス名をキーに設定を記述するとそれを読み込んでくれる仕掛けになっています。クラスの型を利用しつつ、リクエスト値の検査は設定ファイルを利用してカスタマイズしやすくします。

さらにテンプレート側に目を向けてみましょう。入力フォームのテンプレートは、エラー表示と「戻る」ボタンで遷移の両方を共通で実現している場合がほとんどだと思います。Laravel で用意されている old ヘルパーメソッドで取得できるのは、エラー時のセッションしかありませんので、以下のような記述をすることでエラー時のセッション値があれば、セッション値、なければリクエスト値をとる実装が可能です(old メソッドのデフォルト値にリクエスト値を設定する実装になります)。

エラーを表示する場合は以下で対応できます。

$errors->has(‘email’)や$errors->count()などもよく使うメソッドだと思います。エラーは MessageBag というクラスで定義されていますので、以下を参考にしていただければ幸いです。

https://laravel.com/api/5.6/Illuminate/Support/MessageBag.html

ValidatesRequestsトレイトを使う場合

FormRequest の処理のうち Controller 側の処理を切り出したものが ValidatesRequest になります。
Controller で use ValidatesRequest をすることで Controller 中で $this->validate() メソッドなどが使えるようになります。

以下 Laravel マニュアルページより

値検査に失敗すると Illuminate\Contracts\Validation\ValidationException が発生し、FormRequest 同様、前のページに戻ります。validateをかけるタイミングを調整できるため、リクエスト値の前処理が必要な場面や FormRequest の作成をしたくない場合に使われると思いますが、Validator ファサードの選択肢もあるため、相対的に利用する場面は少ないと思われます。

Validatorファサードを使う場合

Validator ファサードを使えば値検査部分だけを部品化して値検査をすることが可能です。バッチ系で値検査を行うときは直に呼び出して使うことが多いと思います。例えばCSVインポートバッチの入力値チェックなどはこの Validatorファサードの出番です。

上記は、config/validation.php で設定を外だししている例です。個別実装することももちろん可能ですが、ある程度共通化できるところは共通化しておくと良いでしょう。

まとめ

なんだかんだいいましたが、場面場面に応じて最適な値検査の方法を選択して実装していくとよいでしょう。その中で特に伝えたかったことが「設定ファイル化」という部分になります。値検査(バリデーション)というプログラムの課題の中でconfig/validation.php にまとめておく、HTML部品という課題の中で config/form.php にまとめておく、アプリケーション設定として、config/const.php にまとめておく、などなどです。後で入力チェックをまとめるときに個別の実装をみなくてよいのは、大きな助けになると思います。まだの方は、実装時の良い習慣としてプログラムの課題の設定ファイル化を是非やってみてください。

補足

以下補足になります。入力、確認、完了のような遷移がある場合のルーティングのTIPSです。通常、入力画面は、GETリクエスト、それ以外はPOSTリクエストとしていると思います。つい忘れがちですが、保存ページについては、GETも受け付けて入力画面に逃がすとよいと思います。戻すときの遷移でリロードして、MethodNotAllowedのエラーが見えてしまうとちょっとカッコ悪いですよね。

SkypeのメッセージをDBから眺める

福岡拠点の野田です。
暑い日が続きますが、いかがお過ごしでしょうか。

Skypeが新しくなって、だいぶ使いにくくなったなぁ、と感じます。履歴をコピーしたり検索することも不自由に感じることが多くなりました。備忘録的に残していた書き込みをWikiに転載するため、どうにかまとめてコピーすることができないかと思い、少し調べてみました。

現在 2018/08/06 Windows バージョンの Skype 履歴は以下のファイルに格納されていることを確認しました。

%localappdata%\Packages\Microsoft.SkypeApp_kzf8qxf38zg5c\LocalState\\skype.db

参考:Q.how do I export my chat history?
https://answers.microsoft.com/en-us/skype/forum/skype_win10-skype_messms-skype_instamessms/how-do-i-export-my-chat-history/20849b44-d68a-40f4-8cb8-6a2dc88e9e7e

テキストエディタで開いてみたところ先頭に「SQLite format 3」と記載されているではないですか。SQLiteは、パブリックドメインの軽量なRDBシステムです。SQLをサポートしており、Skypeに限らず、いろいろなアプリケーションのデータ保持に利用されています。

SQLiteファイルへの接続ですが、ODBCで接続する方法もありますが、今回はみんなが大好きな「A5:SQL Mk-2」を使っての接続を紹介します。A5:SQL Mk-2は、ER図も描けるとても優れたデータベースツールです。今回はこれを使ってファイルを参照します。

A5:SQL Mk-2
https://a5m2.mmatsubara.com/

step 1. データベースに追加

step 2. 左下の追加ボタンを押下

step 3. SQLiteを選択

step 4. skype.db を選択します。直に接続すると破損する可能性があるため、コピーしたファイルに繋ぎましょう。

step 5.ログイン認証は表示されますが、そのまま接続できます。

step 6.  messages が書き込みテーブルです。

これでスレッドの書き込みの検索、編集も思いのままです。
無事、スレッドからWikiへの転載も完了することができました。

ブロックチェーン勉強会@Fukuoka Growth Nextに参加

福岡拠点の野田です。
梅雨が空けそうでなかなか空けないですね。今日も福岡は雨です。

昨日、Fukuoka Groth Next で行われたブロックチェーンの勉強会に参加しました。ブロックチェーンは今後システム基盤技術として大きな可能性を秘めているのは周知のことだと思います。サービスをこれから開発しようとしている方、実際に音楽やゲームにブロックチェーンの仕組みを組み込んでサービスを提供している方、いろいろな話を伺いました。中でも落合渉悟さんが行動暗号経済学というものをテーマに話をされたのですが、最高に刺激的でした。

□Cryptoeconomics Lab
https://ce.mit.edu/

□行動暗号経済学(Cryptoeconomics)とは
https://crypto-times.jp/what-is-cryptoeconomics/

行動暗号経済学は、ブロックチェーンにおける人のインセンティブ・行動を理論を設計して、研究する学問になります。まだいろいろな課題があり、それを実際に仮想通貨といったサービスなどで実証して、日々、改良が続けられているようです。ブロックチェーンが生まれるきっかけとなった2008年から始まる「サトシ・ナカモト」の論文のことを「天才が天才に考えさせる」論文であったと評されていたのですが、やはりすごかったのだと、肌で感じました。

□ビットコイン原論
https://bitcoin.org/bitcoin.pdf

□ビットコイン原論(日本語版)
http://www.kk-kernel.co.jp/qgis/HALTAK/FEBupload/nakamotosatoshi-paper.pdf

私たちもシステムを作るとき裏付けする技術要素を組み合わせてサービスを作っています。単に使うだけでなく、その背景にあるものや仕組みを理解し、日々の探求心と研究心を忘れず業務に取り組もうと意識を新たにしました。

よく使うウィンドウズのショートカット

福岡拠点の野田です。GWは晴れ間もありましたが、ここ数日雨が続いていて梅雨が気になる今日この頃です。

今回はよく使うWindowsのショートカットを紹介したいと思います。
よく使うWindowsのショートカットといえば、ctrl + alt + delete がよく知られていますが、ほかにどんなものがあるかご存知ですか?

以下は、私がよく使うWindowsのショートカットです。

その1: ctrl + esc

アプリを開きたいときにスタートボタンをマウスで押すのは、面倒ですよね。そのまま開きたいアプリ名を入力するとアプリ検索をして実行することができます。cmd と入力すればコマンドプロンプトが、excel と入力すればエクセルを検索されるので、そのままエンターを押下すると開くことができます。

その2:windowボタン + L

席を外すとき、画面ロックをかけるのは面倒なもの。このショートカットを使えば楽々です。トイレに急がなければならないときもばっちりです。

その3:windowボタン + P

プロジェクターに映像が出ない!そんなときに使うコマンドです。出番は少ないですが、勉強会などでプレゼンするときは心強い味方です。

その4:windowボタン + tab

alt + tab を使った画面切り替えや alt + shift + tab の切り替え戻しパターンもよく使いますが、画面の開いた順にさかのぼりたいときはこれが良いと思います。

その5:windowボタン + D からの alt + F4

複合技です。デスクトップ表示してから alt + F4 を押すとシャットダウン/再起動ダイアログを表示することができます。window を開いているときに閉じるコマンドとして有名な alt + F4 ですが、デスクトップ表示している状態でこの技を使うとシャットダウンすることができます。

番外編

alt + space からの n 押下。
いま開いている画面を最小化したいときに使います。
そこのあなた!Youtubeを見ていて隠したい時に使っちゃいけないですよ!

ショートカットキーを使うことで作業効率も上がると思います。
何か良いコマンドを見つけたら是非教えていただければと思います。

[JavaScript]D3.jsでグラフを書こう!

福岡拠点の野田です。今日は、データ解析に欠かせない可視化を支援するツールとして、D3.jsの使い方を紹介します。

可視化をするとき、棒グラフだったり、線グラフを出力することが多いと思います。Python、Rなどを使った画像出力ももちろん簡単に実現できるのですが、凝った複雑なグラフを出そうとするとき、D3.jsで描くSVGの柔軟性には目を見張るところがあります。SVGは、Scalable Vector Graphicsの略でベクター情報のイメージデータになります。そのため、拡大しても非常に高精細に表示することができます。また、CSSやJavasciptでイベント制御も可能なため、凝った動きのあるグラフを実現できます。

D3.jsの最新版は、ver5.1.0(2018/05/02時点)になります。ver3.xからver4.xにアップデートした際に大きく変更があったため、今回は個人的にもなじみのあるver3.xでの使い方を紹介します。

使うためには、HTMLヘッダーに以下を組み込むだけ。とても簡単です。

ver3.x

 

ちなみにver5.xでは以下のような感じです。

ここからは、ver3.xでの記述例になります。
以下のような流れでグラフを表示します。

1) 領域確保

グラフを表示する領域を確保します。軸に値を表示するため、マージンを確保します。


2) スケール設定

値の描画変換を行うスケール(基準となる物差し)を指定します。のちにデータ描画でも使います。


3) 軸の描画

スケールをもとに軸を描画します。


4) 補助線の描画

必須ではないですが、指定することでぐっとクオリティがアップします。


5) データ値の描画

線グラフだったり、点グラフだったり、棒グラフなどデータを描画します。今回は、線グラフを扱います。

これでCSVを読み込むと以下のようなグラフを表示することができるようになります。

SVGは、HTMLと同じくXMLで記述されるDOM(文書オブジェクトモデル)の1種です。イベント処理も差し込むことができるため、HTMLと同様な感覚で動的処理を扱えるのは強みと思います。D3.js自体、jQueryなどと同様、DOM操作するための言語とも言えます。慣れが若干必要ですが、凝ったグラフの描けるは大きな魅力です。

これを機会にぜひ触れてみてください。

[PHP]Seleniumを使ってみよう(2)

福岡拠点の野田です。
前回「Seleniumを使ってみよう(1)」では、Selenium サーバーを立ち上げるところまで実施しました。
https://blog-s.xchange.jp/?p=418

今回はその続きです。
弊社では、PHPを使うことが多いので、その例を紹介します。
PHPがローカル環境にない方は、さくっとインストールしてください(環境変数にパスを通すのも忘れずお願いします)。
http://www.php.net/downloads.php

composerが入っていなかったら、インストールします。
https://getcomposer.org/doc/00-intro.md#installation-windows

任意のフォルダにcomposer.jsonを配置します。

facebook/webdriverは、curl関数を使うため、php_curlのエクステンションを有効にします。ほかにスクリーンショットの編集等でgdライブラリを使う場合がありますので、php_gd2のエクステンションを有効にします。
php.ini
;extension=php_curl.dll
;extension=php_gd2.dll

extension=php_curl.dll
extension=php_gd2.dll

ちなみに php.ini のある場所は、php -i で表示することができます。

cmd でDOSのターミナルを開いてcomposer.jsonを配置したフォルダでcomposer update を実行してください。必要なライブラリをインストールします。これでSeleniumを使ってテストを実行する準備が整いました。

サンプルコードを以下にアップしています。

https://github.com/nodat/php-selenium-tools

processor.php と scenario.yaml を composer.json のフォルダに配置してください。

以下のようなバッチを作成して実行することで動きます。

まだまだ粗削りですが、scenario.yaml を作りこんでいくことで E2E のテストを実現することができます(適宜、バージョンアップしていきます)。
細かい処理については、ソースコードを解析して見てください。