始めに

カウントアップのアニメーションは調べたらいくつかありましたが、最初はシャッフルされていて、1つずつ数字が確定するようなアニメーションは見つからなかったので記事にしました。（調べ方が悪いだけの可能性もありますが（汗））
以下にサンプルを載せます。データ周りが結構ややこしくなるかと思ったのですが、別に桁ごとにデータを持たなくても実装できたのでそこまで複雑ではありませんでした。

See the Pen 1つずつ数字が確定するサンプル by wintyo (@wintyo) on CodePen.

実装方法

桁数を取得する

最初にランダムに表示する桁数を目標の値から取得する必要があります。ネイティブで実装されていたら楽でしたが、なかったのでメソッド化します。

桁数の取得

/**
 * 桁数を取得する
 * @param {number} number - 数値
 * @returns {number} - 桁数
 */
function getDigits(number) {
  // 0の場合は1桁を返す
  if (number === 0) {
    return 1;
  }

  let digits = 0;
  while (number >= 1) {
    number /= 10;
    digits += 1;
  }
  return digits;
}

ランダムに数字を表示する

まずはシャッフル状態のアニメーションを作ります。アニメーションと言っても、ただintervalを使って表示する数字を差し替えているだけです。単純にランダムにするなら1回の乱数でいいですが、一桁ずつ確定していくことを踏まえて0～9の乱数を各桁ごと行います。各桁を算出できたら後は足し合わせます。各桁を上手く足せるようにべき乗を使用しています。
まとめると以下のようになります。今回は実装を楽するためにlodashのtimesとpadStartを使用しています。

ランダムに数字を表示する

const value = 2048;
const digits = getDigits(value);

window.setInterval(() => {
  // 各桁の数値を算出する
  const numbers = _.times(digits).map(() => {
    return Math.floor(10 * Math.random());
  });
  // 足し合わせる
  const displayValue = numbers.reduce((accumulator, number, index) => accumulator + (10 ** index) * number);

  // 0詰めで表示させる
  countElement.innerHTML = _.padStart(String(displayValue), digits, '0');
});

下の桁から確定していく

後は各桁の数値を算出する場所で表示したい値を出すか乱数を出すか場合分けをしたらいいです。

一部の桁だけ数字を固定する

const value = 2048;
const digits = getDigits(value);

let fixDigits = 1;  // 1桁目だけ数字を出す
window.setInterval(() => {
  // 各桁の数値を算出する
  const numbers = _.times(digits).map((index) => {
    // 固定したい桁の場合は最終値を返す
    if (index < fixDigits) {
      return Math.floor(value / (10 ** index)) % 10;
    }
    return Math.floor(10 * Math.random());
  });
  // 省略
});

イベントをつなぎあわせる

最後にsetTimeoutを使ってfixDigitsのところをカウントアップしていき、最後の桁までたどり着いたらintervalを止めて完成です。

終わりに

そもそも言葉がわからないというのもありますが、今回のようなアニメーションは探しても見つからなかったので記事にしました。数字の表示は他にもいろいろあるようで、リンクを貼っておくので興味があればそちらも参考にしてみるといいかもしれません。

それ以外の数字のアニメーション

• 数字のカウントアップを良い感じのアニメーションで実装したい
• 数字や文字をクルマの走行距離計のようにぐるぐる回転させて表示するスクリプト -Odometer
• パラパラめくれるフリップ式時計

つくったモチベーション

こんな経験ありませんか？
チャットでwを生やすも、顔は真顔、、、?
それが普通だと思いますが、テキストだけのやりとりに私は寂しさを感じることがあります?
（ もっと温度感のあるコミュニケーションがしたい、人を感じたい、、、 ）
そこで、私はProtoOut LINE Things ハッカソンを機会に、新しい体感型通信デバイスをプロトタイピングしてみることにしてみました！

https://protoout.connpass.com/event/135942/

「ギュtto」概要

”もふもふハートフルデバイス”「ギュtto」をプロトタイピング。
ぎゅっと抱きしめると、抱きしめてる間だけ、ハートをスマホに送ってくれて、
スマホからもボタンをクリックすることで、ぬいぐるみをバイブレーションさせることができます。

https://t.co/ziTVe4sSRB#prototyping#プロトタイピング

— taichi (@MakingEmo) 2019年7月14日

技術・素材

• LINE Things LIFF
• obnize
• サーボモータ
• 圧力センサー
• ぬいぐるみ

構成図

今後

取得した圧力センサーの値によって、LIFF上の表現を変えたい。

processingやcanvasで動的に表現したい
（現状はGIF画像を表示しているだけ）

ハード側のバイブレーション部分を機能させたい。

現状、サーボモータをバイブレーション機能として代用しているが、
もっとわかりやすくぬいぐるみがバイブするような実装がしたい

参考

https://qiita.com/n0bisuke/items/1f552f3508fe8cf22759

　言語によっては elseif なんていうのもありますが、「else if」と言われているものは、elseのときに実行する処理がif～だという超小ネタです。

「if や else は必ず {} で囲め」というコーディング規約に書いているのに、そのコーディング規約の中でもelseやifを……

if (/*条件*/) {
  // 略
} else if (/*条件*/) {
  // 略
}

……みたいに書かれていたりすると「こいつ分かってないな」と思ってしまいます。

もともとswiftで「クロージャ」について調べていました。するとJavaScriptでも同じ概念があるということで、記事数も多いJavaScriptで調べてみました。
特に感じたのが、クラスと似ているということ。そこでクラスとの違いの観点からクロージャの使い方についてまとめてみました。

イメージ

クロージャはクラスと同じようなことができ、比べるとこんなイメージです。

• クラスは「クラスの中に関数がある」
• クロージャは「関数の中に関数がある」

クラスの使い方

以前はJavaScriptにクラスという概念がなく、ES6で新しくクラスを作れるようになりました。
以下の例は、Userクラスを定義して名前を変更、取得する動きをします。

class User {
  constructor() {
    this._name = '太郎';
  }
  userName() {
    return this._name;
  }
  setName(name) {
    this._name = name;
  }
}
const user = new User();
console.log(user.userName()); //太郎
user.setName('次郎');
console.log(user.userName()); //次郎
console.log(user.name); //undefined

getやsetを関数の前につけるとゲッターとセッターにすることも機能としてありますが、今回はJavaのように書ける方を優先しているため使用していません。
プロパティはconstructor()内で定義するのがちょっと面倒でしょうか。
また_nameなど変数にアンダーバーを付けている理由は、プライベートな変数を表現するためです。ただし本当にプライベート変数になっているわけではなくconsole.log(user1._name)で取得できてしまいます。あくまでルールとしてこのようにすることもできます。個人的な話ですが、実はアンダーバーをつければ勝手にプライベート変数になると勘違いしていたんですよね。。。

クロージャの使い方

下の例は上のクラスの例と同じ動きです。

function funcUser() {
  let name = '太郎';

  return {
    getName: function() {
      return name;
    },
    setName: function(value) {
      name = value;
    }
  };
}

const user = new funcUser();
console.log(user.getName()); //太郎
user.setName('次郎');
console.log(user.getName()); //次郎
console.log(user.name); //undefined

クロージャのイメージは関数の中に関数があるです。この形を取ることで外側の関数＝クラスみたいな使い方ができます。
文法の説明ですが、関数の内部でも関数を書くことができるだけでなく、returnで関数を返すこともできます。さらにその返す関数をオブジェクト形式で関数を書くことで、呼び出し方が変数.関数名の形で実行することができます。newするところもクラスの書き方と同じですね。
しかも関数内の変数にはアクセスできないので（関数スコープ）、実質プライベートなプロパティを作ることもできます。

比較して

こうしてみるとクロージャの方が便利なのでは？と思いましたが、以下のようなデメリットもあります。

• 継承できない（クラスはできる）
• メモリリーク問題
• 他言語からきた人にとってとっつきにくい

なので基本的にはクラスを使った方が良く、クロージャは特殊な書き方の例として留めておくのが私の中での結論です。

参考

現代の JavaScript チュートリアル

はじめに

Chrome DevTools、とっても便利ですよね。
自分はそんなに使いこなせてないので、同僚エンジニアのディスプレイを覗き見ると「ま、またおれの知らないDevTools技使ってる……！」と驚かされることがよくあります¹。

今回は、自分が同僚から教えてもらった多くのスゴ技のうち、良く使うものを3つご紹介します。

なお、Chromeの話をしていますが、きっと他のブラウザにも似たような機能はあるかと思いますので、Chrome絶対使いたくないマンはぜひお気に入りのブラウザで探してみて下さい。

Javascriptの実行を途中で止める

DevTool上からブレークポイントを設定することができます。

ブレークポイントをご存じない方のために説明しておくと、「特定の場所まで来たら実行を一時停止する」機能です。
↑の例では 特定のDOM要素に変更があった時に実行を一時停止 させていますが、他にも

• コードの特定の行に差し掛かったら実行を一時停止する
• 特定のイベントが発火したら（例えば特定の要素のclickイベントが発火したら）実行を一時停止する

などが出来ます。
テスター的には上記例で挙げた 特定のDOM要素に変更があった時に実行を一時停止 が一番便利でしょう。

---

停止後は再生ボタンが表示され、停止を解除して次のブレークポイントまで実行したり、コードを1行ずつ実行（ステップ実行と呼びます）することもできます。

特定の操作を繰り返し実行する

Network タブを開くと、それ以降に発生した通信ログを全て記録してくれます。
SPAとかでAjax通信がたくさん発生するシーンでとても有効でしょう。
不具合の原因がフロントエンドにあるのかバックエンドにあるのかを突き止めるのに使ったりしています。

個人的にとても気に入っているのが、 Copy As Fetch という機能で、これはリクエストを Console タブに貼り付けて実行できる形でコピーしてくれます。
画面上の操作を繰り返し実行したい時に便利です。

例えば「コメントを100回投稿する」みたいなことをやりたい時に

• コメントを投稿する
• Network タブで該当のリクエストを探し出す
• Copy As Fetch でリクエストをコピーする
• Consoleにペーストする
• オラオラオラオラオラオラオラオラオラオラオラオラオラオラ（略）

みたいにすると簡単に量産することが出来ます²。

Cookieを見たり編集したりする

Application タブからStorageやCacheを見ることができます。
Storageというのはブラウザ内で保存しているデータのことです。
よくCookieとかLocalStorageとか聞くと思うんですが、まさしくそれのことです。

バグチケットを切った時に
「こちらの環境では再現しないですね」
「なんか変なCookieが残ったりしてないですかね」
などのように言われたら、とりあえず Application タブをチェックしてみましょう。

Cookie周りの不具合が発生したときは、Webアプリ側の操作でどのようにCookieの値が変わるのかを見ながらテストするとわかりやすいです。
また、値は編集可能ですので、直接編集して挙動を確認してみるのも良いでしょう。

不具合調査以外で自分が良く利用するユースケースでは、例えば言語設定をCookieに保存していたりする場合、 locale: ja となっているところを en に変更して言語を切り替える、みたいなことをしたりすることがあります。

---

1. ごくまれに、せっせとSlackの絵文字作ってるところに出くわすこともあります。 ↩

2. 実際にはCSRFトークンなどの関連でうまく動かないときもあります。 ↩

自作ライブラリを作った経緯

　ソフトを開発するにあたって、自作のライブラリを使用しています。
理由は、勉強のためと言うこともあるし、自分で作った方が痒い所に手が届くということがあるからです。宜しければ、ご覧ください。

jQueryライブラリ(github)

javascriptライブラリ

　javascript(jQUery)に関するライブラリ

　煩雑な処理をまとめたもの

　ClassLibCanvas.js

　　キャンバス描画に関するライブラリ

　ClassLibMath.js

　　計算に関するライブラリ

　ClassLibTime.js

　　日時操作に関するライブラリ

　ClassLibUtility.js

　　一般操作のライブラリ

　　配列関連、テーブル操作など

はじめに

前記事の「Winlogbeat 7.2.0の新機能: JavascriptプロセッサのSysmonモジュールを使ってイベントログを採取してみる」の続編です。

今回の記事ではそのJavascriptプロセッサ機能を利用してWindowsイベントログをElasticsearchへ転送する前にWinlogbeat側（エンドポイント側）でフィルタまたは加工する独自モジュールをJavascriptで書いてみます。

• hello, worldをフィールドへ書き込むHelloWorldモジュール
• PowerShell実行イベントログのBase64エンコードされたコマンド部分(-encオプション)をデコードしてからElasticsearchへ転送するモジュール

※Javascriptプロセッサはまだ新しい機能ですので仕様変更も今後予想されます。詳細は公式リファレンスを参照してください。

※本記事で扱うサンプルモジュールはこちらへ置いておきます。

評価環境

利用するソフトウェア

• OS: Ubuntu 18.04
• DNSサーバ: Dnsmasq (2.79)
• Elasticsearch (6.6.0)
• Kibana (6.6.0)
• Winlogbeat (7.2.0)
• Sysmon (v10.2)
• VMware Workstation Player等のVMソフトウェア
• Windows 10 (クライアントPC)

インストール方法や評価環境の構築の詳細は「標的型攻撃に対するJPCERT/CCのおすすめログ設定をElasticsearchで構築してみる - エンドポイントログ編（その２- Winlogbeat/Elasticsearch）」または前記事をご参照ください。

Hello Worldモジュール

まずはWindowsイベントログに「greeting: "hello, world!"」というフィールドを追加する単純なモジュールを書いてみましょう。以下のように非常にシンプルなコードを記述しファイル名をwinlogbeat-helloworld.jsとして保存します。

※UTF-8で保存した方がいいと思います。

winlogbeat-helloworld.js

function process(evt) {
    evt.Put("greeting","hello, world");
    return;
}

HelloWorldモジュールを配置

この自作モジュールのJavascriptファイル(winlogbeat-helloworld.js)を他のSecurityやSysmon標準モジュールと同じフォルダ構成で以下のように配置します。

C:\Program Files\winlogbeat-7.2.0-windows-x86_64\module\helloworld\config\winlogbeat-helloworld.js

「C:\Program Files\winlogbeat-7.2.0-windows-x86_64はWinlogbeat」のインストールディレクトリ、「helloworld\config」がモジュール用に作成したサブフォルダです。

このモジュールをWinlogbeatへ組み込んでイベントログをElasticsearchへ転送すると以下のようにgreetingフィールドが追加されています。

Elasticsearchへ加工されたイベントログ

...
{
    "_index" : "winlogbeat-7.2.0-2019.07.14",
    "_type" : "doc",
    "_id" : "klT27WsBgpTg8iKCzG_m",
    "_score" : 0.0,
    "_source" : {
         "@timestamp" : "2019-07-14T00:51:42.880Z",
         "message" : "Process Create:\nRuleName: \nUtcTime: 2019-07-14 00:51:42.880\nProcessGuid: {22052e76-7c9e-5d2a-0000-00106f766e00}\nProcessId: 7720\nImage: C:\\Windows\\System32\\PING.EXE\nFileVersion: 10.0.17763.1 (WinBuild.160101.0800)\nDescription: TCP/IP Ping Command\nProduct: Microsoft® Windows® Operating System\nCompany: Microsoft Corporation\nOriginalFileName: ping.exe\nCommandLine: \"C:\\WINDOWS\\system32\\PING.EXE\" www.youtube.com\nCurrentDirectory: C:\\Program Files\\winlogbeat-7.2.0-windows-x86_64\\\nUser: xxxxxxxxx\\xxx\nLogonGuid: {22052e76-11ef-5d2a-0000-002070890a00}\nLogonId: 0xA8970\nTerminalSessionId: 1\nIntegrityLevel: High\nHashes: SHA256=741AD992403C78A8A7DBD97C74FDA06594A247E9E2FA05A40BB6945403A90056,IMPHASH=8C3BE1286CDAD6AC1136D0BB6C83FF41\nParentProcessGuid: {22052e76-670e-5d2a-0000-001062cf5900}\nParentProcessId: 5152\nParentImage: C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe\nParentCommandLine: \"C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe\" ",
...
         "greeting" : "hello, world",
...
    }
},
...

自作モジュールを設定ファイルへ追加

Winlogbeatの設定ファイル（例: C:\Program Files\winlogbeat-7.2.0-windows-x86_64\winlogbeat.yml）へモジュール(winlogbeat-helloworld.js)を追加します。今回の例ではSysmonイベントに対してフィルタ・加工処理を行います。そのためwinlogbeat.event_logsの「name: Microsoft-Windows-Sysmon/Operational」フィールド配下へscriptプロセッサとして指定します。

winlogbeat.yml

#======================= Winlogbeat specific options ===========================
...
winlogbeat.event_logs:
  - name: Application
    ignore_older: 72h

  - name: System
...
  - name: Microsoft-Windows-Sysmon/Operational
    processors:
      - script:
          lang: javascript
          id: sysmon
          file: ${path.home}/module/sysmon/config/winlogbeat-sysmon.js
      - script:
          lang: javascript
          id: helloworld
          file: ${path.home}/module/helloworld/config/winlogbeat-helloworld.js
...

編集した設定ファイルをテスト

作成したモジュールと編集した設定内容をテストしておきます。

PS C:\Program Files\winlogbeat-7.2.0-windows-x86_64> .\winlogbeat.exe test config
Config OK

Elasticsearchへのネットワーク接続テストも行っておきましょう。

PS C:\Program Files\winlogbeat-7.2.0-windows-x86_64> .\winlogbeat.exe test output -e -d "*"

Winlogbeatを再起動

Winlogbeatサービスを再起動します。

PS C:\Program Files\winlogbeat-7.2.0-windows-x86_64> Restart-Service winlogbeat

Elasticsearchへ転送されたイベントログに上述のようにgreetingフィールドが追加されます。

HelloWorldモジュールの詳細

winlogbeat-helloworld.js

function process(evt) {
    evt.Put("greeting","hello, world");
    return;
}

モジュール記述は上記のように簡単です。process関数を記述するだけでWinlogbeatがイベントログ毎に呼び出してくれます。

各Windowsイベントログは元のXML形式からJSON形式へ変換された後で、process関数の引数へEventオブジェクト(evt引数)として一つずつ渡されます。Eventオブジェクトにはイベントログを操作するためのメソッドが用意されており、フィルタや加工処理に量できます。例えばHelloWorldモジュールではこのEventオブジェクトのメソッドであるevt.Put("フィールド名","フィールド値")と呼び出すことでイベントログ内へJSONフィールドを挿入追加しています。

※Eventオブジェクトの実体はこちらです。

Eventオブジェクトのメソッド

リファレンスによれば以下のメソッドがEventオブジェクトへ定義されています。

メソッド	説明
Get("フィールド名")	イベントログ(JSON)のフィールドを取得。戻り値はスカラー、オブジェクトまたはnull(見つからなかった場合)。取得するフィールド名を指定しない場合にはイベントログ全体がオブジェクトとして取得されます。
Put("フィールド名", "フィールド値")	イベントログ(Json)へフィールドを追加。すでにフィールドが存在する場合には値が上書きされます。追加されるフィールド値としてスカラー以外に設定可能なものについては後ほど検証してみます
AppendTo("フィールド名", "フィールド値")	配列形式のフィールドへ要素を追加します。ただし追加できるのは文字列値だけです。
Rename("旧フィールド名", "新フィールド名")	フィールド名をリネーム。
Delete("フィールド名")	フィールドを削除。
Cancel()	イベントログ全体を削除
Tag("タグ値")	タグフィールドへ（設定されていなければ）追加。

またイベントログ(Json)の各フィールドへはメソッドを利用しなくても<イベントオブジェクト>.fields.<フィールド名>という形式で直接アクセスすることもできます。

helloworld.js

function process(evt) {
    // イベントオブジェクトのフィールドへ直接アクセス
    evt.fields.greeting = "hello, world";
    return;
}

モジュールのデバッグ方法

テストコードを記述

モジュールのJavascriptコード内にtest()関数をテストプログラムとして記述することで、デバッグやテストを行うことができます。

winlogbeat-helloworld.js

// 実装したコード
function process(evt) {
    evt.Put("greeting","hello, world");
    return;
}

// テスト内容を記述する関数
function test() {
    //テストデータ（イベントログ）を生成
    var evt = new Event({
        message: "Windows event log message...",
    });

    // テストデータで実装コードをテスト
    process(evt);

    // テスト期待値の判定
    if (evt.Get("greeting") === "goodbye cruel world") {
        // 期待値と異なる場合には例外を投げる
        throw "expected greeting === hello, world";
    }
}

このtest()関数はWinlogbeatがモジュールをローディングするときに実行されます。そのため通常の設定ファイルテスト手順と同様に、以下のようにtest configを指定してwinlogbeat.exeを実行することでデバッグやテストを行うことができます。

テストOKの場合

PS C:\Program Files\winlogbeat-7.2.0-windows-x86_64> .\winlogbeat.exe test config
Config OK

では以下のようにgreetingへ「goodbye cruel world」と代わりに出力するようにしてみましょう。

winlogbeat-helloworld.js

// 実装したコード
function process(evt) {
    // hello, worldを別の値にしてみる
    evt.Put("greeting","goodbye cruel world");
    return;
}

// テスト内容を記述する関数
function test() {
    //Javascriptのオブジェクト型でテストデータ（イベントログ/JSON）を生成
    var evt = new Event({
        message: "Windows event log message...",
    });

    // テストデータで実装コードをテスト
    process(evt);

    // テスト期待値の判定
    if (evt.Get("greeting") === "goodbye cruel world") {
        // 期待値と異なる場合には例外を投げる
        throw "expected greeting === hello, world";
    }
}

以下のように「failed in test() function: expected greeting === hello, world at test」と例外が投げられエラーとなります。

テストNGの場合

PS C:\Program Files\winlogbeat-7.2.0-windows-x86_64> .\winlogbeat.exe test config
Exiting: Failed to create new event log. 
failed in processor.javascript: failed in test() 
function: expected greeting === hello, world at test 
(C:\Program Files\winlogbeat-7.2.0-windows-x86_64/module/helloworld/config/winlogbeat-helloworld.js:12:15(22))

ちなみにこのテストエラーのままでは以下のようにWinlogbeatサービスは起動しません。

PS C:\Program Files\winlogbeat-7.2.0-windows-x86_64> Start-Service winlogbeat
Start-Service : 次のエラーのため、サービス 'winlogbeat (winlogbeat)' を開始できません: コンピューター '.' でサービス 'w
inlogbeat' を開始できません。
発生場所 行:1 文字:1
+ Start-Service winlogbeat
+ ~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : OpenError: (System.ServiceProcess.ServiceController:ServiceController) [Start-Service],
   ServiceCommandException
    + FullyQualifiedErrorId : CouldNotStartService,Microsoft.PowerShell.Commands.StartServiceCommand

PowerShellのStart-Serviceコマンドレットはエラーを返します。

未定義またはgojaで未サポートのJavascript API呼び出し

WinlogbeatのJavascriptプロセッサのエンジンはgojaです。そのため通常のWebブラウザでサポートされているJavascriptのAPIが利用可能とは限らない点に注意が必要です。
※gojaはECMAScript 5.1ベース。

以下は未定義の関数hoge()を呼び出した例です。以下のようにエラー(「hoge is not defined at process」)となります。

winlogbeat-helloworld.js

function process(evt) {
    evt.Put("greeting","hello, world");
    // 未定義またはgoja未サポートのAPI呼び出し
    hoge();
    return;
}

function test() {
    var evt = new Event({
        message: "Windows event log message...",
    });
    process(evt);
    if (evt.Get("greeting") === "goodbye cruel world") {
        throw "expected greeting === hello, world";
    }
}

テスト実行結果

PS C:\Program Files\winlogbeat-7.2.0-windows-x86_64> .\winlogbeat.exe test config
Exiting: Failed to create new event log. 
failed in processor.javascript: 
failed in test() function: ReferenceError: hoge is not defined at process 
(C:\Program Files\winlogbeat-7.2.0-windows-x86_64/module/helloworld/config/winlogbeat-helloworld.js:3:9(10))

ただし、test()関数の延長でその未定義関数呼び出しのコード部分が実行されない場合には、エラーとはならないので注意が必要です。

winlogbeat-helloworld.js

function process(evt) {
    evt.Put("greeting","hello, world");
    // 未定義関数呼び出し部分が実行されない場合
    if(false){
        hoge();
    }
    return;
}

function test() {
    var evt = new Event({
        message: "Windows event log message...",
    });
    process(evt);
    if (evt.Get("greeting") === "goodbye cruel world") {
        throw "expected greeting === hello, world";
    }
}

テストOKになる

PS C:\Program Files\winlogbeat-7.2.0-windows-x86_64> .\winlogbeat.exe test config
Config OK

Winlogbeatサービスへのモジュールのローディングを確認する

Winlogbeatの設定ファイルでログレベルをdebugへ変更することでモジュールのローディングを確認することができます。

winlogbeat.yml

...
#================================ Logging =====================================

# Sets log level. The default log level is info.
# Available log levels are: error, warning, info, debug
# 以下をコメントアウト
logging.level: debug
...

Winlogbeat(例: C:\Program Files\winlogbeat-7.2.0-windows-x86_64\logs\winlogbeat)のログへ以下のように出力されます。

Winlogbeatのログ

2019-07-14T12:15:25.733+0900 DEBUG [processors] processors/processor.go:93  
Generated new processors: 
script=[type=javascript, id=, sources=C:\Program Files\winlogbeat-7.2.0-windows-x86_64/module/sysmon/config/winlogbeat-sysmon.js], 
script=[type=javascript, id=, sources=C:\Program Files\winlogbeat-7.2.0-windows-x86_64/module/helloworld/config/winlogbeat-helloworld.js]

winlogbeat-helloworld.jsがScriptプロセッサのモジュールとして認識されています。

console.log()関数でデバッグ情報などをログへ書き出す

consoleモジュールをローディングすることで、Javascriptでおなじみconsole.log()関数も使えます。ただし、出力先はWinlogbeatのイベントログファイルになります。

console.xxx()の記述例:

• console.debug("DEBUG: hello, world!");
• console.log("INFO: hello, world!");
• console.info("INFO: hello, world! %j", evt.fields);
• console.warn("WARN: [%s]", evt.fields.message);
• console.error("ERROR: %j", evt.fields);

以下はconsole.log()関数のサンプルプログラムです。

winlogbeat-helloworld.js

// consoleモジュールをローディング
var console = require("console");

function process(evt) {
    // Debugログでイベント（オブジェクト）全体を出力
    console.debug("process() called %j", evt.fields);
    evt.Put("greeting","goodbye cruel world");
    return;
}

function test() {
    var evt = new Event({
        message: "Windows event log message...",
        winlog : {
            provider_name : "Microsoft-Windows-Sysmon"
        }
    });
    process(evt);
    if (evt.Get("greeting") === "goodbye cruel world") {
        // Errorログを出力
        console.error("test() NG! %s",evt.fields.greeting);
    }else{
        console.log("test() OK!");
    }
    console.info("test() Done");
}

こちらもWinlogbeat(例: C:\Program Files\winlogbeat-7.2.0-windows-x86_64\logs\winlogbeat)のログへ以下のように出力されます。

Winlogbeatログ

...
2019-07-14T14:18:45.023+0900 DEBUG [processor.javascript] 
console/console.go:48   process() called {"message":"Windows event log message...","winlog":{"provider_name":"Microsoft-Windows-Sysmon"}}
2019-07-14T14:18:45.023+0900 ERROR [processor.javascript]
console/console.go:54   test() NG! goodbye cruel world
2019-07-14T14:18:45.023+0900 INFO [processor.javascript]
console/console.go:50   test() Done
...

イベントログをフィルタや加工するパイプラインを作成

processorモジュールを利用すると複数の関数で定義された処理を数珠つなぎにして、イベントログのフィルタや加工処理をパイプライン化することができます。

winlogbeat-helloworld.js

var console = require("console");
// processorモジュールをローディング
var processor = require("processor");

function process(evt) {

    // 処理１: helloメッセージをイベントログへ追加
    var addHello = function(evt) {
        evt.Put("hello","hello, world");
        console.debug("addHello() OK");
    }

    // 処理２: goodbyeメッセージをイベントログへ追加
    var addGoodbye = function(evt) {
        evt.Put("goodbye","goodbye cruel world");
        console.debug("addGoodbye () OK");
    }

    // processorモジュールのChain()メソッドでパイプラインを生成
    var pipeline = new processor.Chain()
        .Add(addHello)   // 処理１をパイプラインへ追加
        .Add(addGoodbye) // 処理２をパイプラインへ追加
        .Build()         // パイプラインを組み立て

    // パイプラインを実行
    pipeline.Run(evt);
    return;
}

function test() {
    var evt = new Event({
        message: "Windows event log message...",
        winlog : {
            provider_name : "Microsoft-Windows-Sysmon"
        }
    });
    process(evt);
    if (evt.Get("hello") !== "hello, world") {
        throw "expected goodbye !== hello, world";
    }
    if (evt.Get("goodbye") !== "goodbye cruel world") {
        throw "expected goodbye !== goodbye cruel world";
    }
    console.debug("test() Done");
}

パイプラインで処理１と処理２を実行し加工されたイベントログは以下のようになります。helloとgoodbyeのフィールドが追加されています。

パイプラインによる処理結果

      {
        "_index" : "winlogbeat-7.2.0-2019.07.14",
        "_type" : "doc",
        "_id" : "YFQS72sBgpTg8iKCw3VG",
        "_score" : 0.0,
        "_source" : {
          "@timestamp" : "2019-07-14T06:01:51.413Z",
          "hello" : "hello, world",
          "goodbye" : "goodbye cruel world",
...
          "message" : "Process Create:\nRuleName: \nUtcTime: 2019-07-14 06:01:51.413\nProcessGuid: {22052e76-c54f-5d2a-0000-001031f3a900}\nProcessId: 4132\nImage: C:\\Program Files\\winlogbeat-7.2.0-windows-x86_64\\winlogbeat.exe\nFileVersion: ?\nDescription: ?\nProduct: ?\nCompany: ?\nOriginalFileName: ?\nCommandLine: \"C:\\Program Files\\winlogbeat-7.2.0-windows-x86_64\\winlogbeat.exe\" -c \"C:\\Program Files\\winlogbeat-7.2.0-windows-x86_64\\winlogbeat.yml\" -path.home \"C:\\Program Files\\winlogbeat-7.2.0-windows-x86_64\" -path.data \"C:\\ProgramData\\winlogbeat\" -path.logs \"C:\\ProgramData\\winlogbeat\\logs\"\nCurrentDirectory: C:\\WINDOWS\\system32\\\nUser: NT AUTHORITY\\SYSTEM\nLogonGuid: {22052e76-11b2-5d2a-0000-0020e7030000}\nLogonId: 0x3E7\nTerminalSessionId: 0\nIntegrityLevel: System\nHashes: SHA256=16EECCE05D1A4B25CDA0442C743DCD912A1CB3C51BAB8A5E060A423C131E9ECB,IMPHASH=6DA7C12D70F874E2ABB391A456EB1EF0\nParentProcessGuid: {22052e76-11b2-5d2a-0000-00102cae0000}\nParentProcessId: 632\nParentImage: C:\\Windows\\System32\\services.exe\nParentCommandLine: C:\\WINDOWS\\system32\\services.exe",
...
}

他のプロセッサをパイプラインへつなぐ

Winlogbeatの標準プロセッサをこのパイプラインへつなぐことももちろんできます。

例えば以下の例ではConvertプロセッサを利用してフィールド名を大文字の文字列値へ変更しています。

var console = require("console");
// processorモジュールをローディング
var processor = require("processor");

function process(evt) {
    var addHello = function(evt) {
        evt.Put("hello","hello, world");
    }

    var addGoodbye = function(evt) {
        evt.Put("goodbye","goodbye cruel world");
    }

    var pipeline = new processor.Chain()
        .Add(addHello)
        .Add(addGoodbye)
        .Convert({ // Convertプロセッサをつなげる
            fields: [
                {from: "hello", to: "HELLO"}, // フィールド名を大文字の値へ変更
                {from: "goodbye", to: "GOODBYE"}
            ],
            mode: "rename",
            ignore_missing: true,
            fail_on_error: false,
        })
        .Build()

    pipeline.Run(evt);
    return;
}

function test() {
    var evt = new Event({
        message: "Windows event log message...",
        winlog : {
            provider_name : "Microsoft-Windows-Sysmon"
        }
    });
    process(evt);
    if (evt.Get("HELLO") !== "hello, world") {
        throw "expected goodbye !== hello, world";
    }
    if (evt.Get("GOODBYE") !== "goodbye cruel world") {
        throw "expected goodbye !== goodbye cruel world";
    }
}

 {
   "_index" : "winlogbeat-7.2.0-2019.07.14",
   "_type" : "doc",
   "_id" : "cFQ472sBgpTg8iKC8nZ3",
   "_score" : 0.0,
   "_source" : {
      "@timestamp" : "2019-07-14T06:42:59.844Z",
      "message" : "Process Create:\nRuleName: \nUtcTime: 2019-07-14 06:42:59.844\nProcessGuid: {22052e76-cef3-5d2a-0000-001054bbb200}\nProcessId: 2156\nImage: C:\\Program Files\\winlogbeat-7.2.0-windows-x86_64\\winlogbeat.exe\nFileVersion: ?\nDescription: ?\nProduct: ?\nCompany: ?\nOriginalFileName: ?\nCommandLine: \"C:\\Program Files\\winlogbeat-7.2.0-windows-x86_64\\winlogbeat.exe\" test config\nCurrentDirectory: C:\\Program Files\\winlogbeat-7.2.0-windows-x86_64\\\nUser: xxxxxxxxx\\xxx\nLogonGuid: {22052e76-11ef-5d2a-0000-002070890a00}\nLogonId: 0xA8970\nTerminalSessionId: 1\nIntegrityLevel: High\nHashes: SHA256=16EECCE05D1A4B25CDA0442C743DCD912A1CB3C51BAB8A5E060A423C131E9ECB,IMPHASH=6DA7C12D70F874E2ABB391A456EB1EF0\nParentProcessGuid: {22052e76-670e-5d2a-0000-001062cf5900}\nParentProcessId: 5152\nParentImage: C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe\nParentCommandLine: \"C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe\" ",
...
      "HELLO" : "hello, world",
      "GOODBYE" : "goodbye cruel world",
...
    }
 },

ちなみに標準のSysmonモジュールでもこのConvertプロセッサをパイプラインにつなげてWindowsイベントログのフィールド名をElastic Common Schema (ECS)へ変更するのに利用しています。

なお利用できる標準プロセッサの最新情報やラベル名はこちらのconstructors定義を見るとわかります（次期Winlogbeat 7.3.0ではBase64デコードプロセッサがサポートされそう？？？ UTF-8だけでなくUTF-16leの場合などもサポートされると嬉しいですね・・・笑）。

その他の標準モジュール

consoleモジュールとprocessorモジュールについてご紹介しましたが、他にもイベントログ解析に便利なモジュールが提供されています。

pathモジュール

pathモジュールはWindowsファイルパスをパーシングしてくれるモジュールです。

メソッド	説明
basename	ファイルパスからベース名（例：Exeファイル名）を取り出す
dirname	ファイルパスからフォルダ名を取り出す
extname	ファイル拡張子を取り出す
isAbsolute	絶対パスかどうかを判定
normalize	パスを正規化。例: 「C:\Windows\system32\..\system32\system32.dll」を「C:\Windows\system32\system32.dll」へ変換

winlogbeatモジュール

メソッド	説明
splitCommandLine	コマンドライン文字列をMicrosoft社から提供されているCommandLineToArgvW関数でパースおよび分割し配列化

いろいろな値型でフィールドへ追加してみる

EventオブジェクトのPut()メソッドでいろいろな形式で値を追加してみました。

winlogbeat-helloworld.js

var console = require("console");
var processor = require("processor");

function process(evt) {

  var putValueByMethod = function(evt) {

    var numberValue = 1;
    evt.Put("numberValue", numberValue);

    var stringValue = "hello, world";
    evt.Put("stringValue", stringValue);

    var boolValue = false
    evt.Put("boolValue", boolValue);

    var nullValue = null
    evt.Put("nullValue", nullValue);

    var undefinedValue = undefined
    evt.Put("undefinedValue", undefinedValue);

    var arrayValue = ["element1", "element2", "element3"];
    evt.Put("arrayValue", arrayValue);

    var objectValue = {
      key1: "value1",
      key21: "value2"
    };
    evt.Put("objectValue", objectValue);

    var objectArrayValue = [{
      KEY1: "VALUE1",
      KEY2: "VALUE2"
    }, {
      KEY3: "VALUE3",
      KEY4: "VALUE4"
    }]
    evt.Put("objectArrayValue", objectArrayValue);

    var objectObjectValue = {
      Key1: {
        Key2: "Value2",
        Key3: 1,
        Key4: true,
        Key5: [1, 2, 3, 4]
      }
    }
    evt.Put("objectObjectValue", objectObjectValue);
  }

  var putValueToFields = function(evt) {
    var objectObjectValueToFields = {
      Key1: {
        Key2: "ばりゅー１",
        Key3: 1,
        Key4: true,
        Key5: [1, 2, 3, 4]
      }
    }
    evt.fields.objectObjectValueToFields = objectObjectValueToFields;
  }

  var pipeline = new processor.Chain()
    .Add(putValueByMethod)
    .Add(putValueToFields)
    .Build()

  pipeline.Run(evt);
  return;
}

function test() {
  var evt = new Event({});
  process(evt);
  console.log("evt.fields: %j", evt.fields);
}

Elasticsearchへ格納された形式は以下です。特に問題なさそうですね！

{
  "_index" : "winlogbeat-7.2.0-2019.07.14",
  "_type" : "doc",
  "_id" : "HVSD72sBgpTg8iKCsXnz",
  "_score" : 0.0,
  "_source" : {
    "@timestamp" : "2019-07-14T08:05:09.682Z",
...
    "stringValue" : "hello, world",
    "arrayValue" : [
      "element1",
      "element2",
      "element3"
    ],
    "nullValue" : null,
    "undefinedValue" : null,
    "objectArrayValue" : [
      {
        "KEY1" : "VALUE1",
        "KEY2" : "VALUE2"
      },
      {
        "KEY4" : "VALUE4",
        "KEY3" : "VALUE3"
      }
    ],
    "objectObjectValueToFields" : {
      "Key1" : {
        "Key2" : "ばりゅー１",
        "Key3" : 1,
        "Key4" : true,
        "Key5" : [
          1,
          2,
          3,
          4
        ]
      }
    },
    "objectObjectValue" : {
      "Key1" : {
        "Key2" : "Value2",
        "Key3" : 1,
        "Key4" : true,
        "Key5" : [
          1,
          2,
          3,
          4
        ]
      }
    },
    "numberValue" : 1,
    "boolValue" : false,
    "objectValue" : {
      "key1" : "value1",
      "key21" : "value2"
    },
    "message" : "Process Create:\nRuleName: \nUtcTime: 2019-07-14 08:05:09.682\nProcessGuid: {22052e76-e235-5d2a-0000-00109799d600}\nProcessId: 5372\nImage: C:\\Program Files\\winlogbeat-7.2.0-windows-x86_64\\winlogbeat.exe\nFileVersion: ?\nDescription: ?\nProduct: ?\nCompany: ?\nOriginalFileName: ?\nCommandLine: \"C:\\Program Files\\winlogbeat-7.2.0-windows-x86_64\\winlogbeat.exe\" -c \"C:\\Program Files\\winlogbeat-7.2.0-windows-x86_64\\winlogbeat.yml\" -path.home \"C:\\Program Files\\winlogbeat-7.2.0-windows-x86_64\" -path.data \"C:\\ProgramData\\winlogbeat\" -path.logs \"C:\\ProgramData\\winlogbeat\\logs\"\nCurrentDirectory: C:\\WINDOWS\\system32\\\nUser: NT AUTHORITY\\SYSTEM\nLogonGuid: {22052e76-11b2-5d2a-0000-0020e7030000}\nLogonId: 0x3E7\nTerminalSessionId: 0\nIntegrityLevel: System\nHashes: SHA256=16EECCE05D1A4B25CDA0442C743DCD912A1CB3C51BAB8A5E060A423C131E9ECB,IMPHASH=6DA7C12D70F874E2ABB391A456EB1EF0\nParentProcessGuid: {22052e76-11b2-5d2a-0000-00102cae0000}\nParentProcessId: 632\nParentImage: C:\\Windows\\System32\\services.exe\nParentCommandLine: C:\\WINDOWS\\system32\\services.exe",
...
  }
},

サンプルモジュールを書いてみる

HelloWorldよりも少し実用的？なサンプルモジュールを書いてみます（笑）

PowerShellのBase64エンコードされたコマンドのデコードモジュール

PowerShellにはEncodedCommandオプション(-EncodedCommandまたは-enc)を利用してコマンド列をBase64文字列としてパッキングしてくれる機能があります。しかしこの形式でPowerShellのコマンドラインがSysmonログに含まれると分析しづらい時があります。そこでPowerShell.exeのオプションに-encオプションが指定された場合、そのオプション値のBase64文字列をデコードしてからElasticsearchへ転送するモジュールを作成してみます。

Base64エンコードされたコマンド例

エンコード前

powershell.exe -executionpolicy bypass Resolve-DnsName -Name www.youtube.com

エンコード後

powershell.exe -executionpolicy bypass -enc "UgBlAHMAbwBsAHYAZQAtAEQAbgBzAE4AYQBtAGUAIAAtAE4AYQBtAGUAIAB3AHcAdwAuAHkAbwB1AHQAdQBiAGUALgBjAG8AbQA="

複数のコマンドや引数からなる「Resolve-DnsName -Name www.youtube.com」の部分がBase64エンコードされて「UgBlAHMAbwBsAHYAZQAtAEQAbgBzAE4AYQBtAGUAIAAtAE4AYQBtAGUAIAB3AHcAdwAuAHkAbwB1AHQAdQBiAGUALgBjAG8AbQA=」と一かたまりにパッキングされています。

Base64デコードライブラリ

Base64デコードプロセッサは（Winlogbeatの開発リポジトリをのぞくと近い将来もしかしたら標準提供されるかもしれませんが）7.2には含まれていないため、Base64デコードライブラリとしてjs-base64を利用します。ただしES6のimport文が使えないのでモジュールソースコードへそのまま組み込みます（泣）。

サンプルソース

サンプルソースは以下の通りです。js-base64の部分は省略してありますが、HelloWorldモジュールを含めてこちらへあげておきます。

winlogbeat-psdecode.js

...
function process(evt) {
    // prosessorモジュールをローディング
    var processor = require("processor");
    // winlogbeatモジュールをローディング
    var winlogbeat = require("winlogbeat");

    // パイプライン処理１：-encオプション値があればBase64デコード
    var decodePsCode = function(evt) {
      var processName = evt.Get("process.name");
      var args = evt.Get("process.args");
      if ( !processName || processName.length < 1 || 
           !args || args.length < 3 || 
           processName.toLowerCase() !== "powershell.exe" ) {
          return;
      }
      for (var i = 0; i < args.length; i++) {  
          if (args[i].toLowerCase().indexOf("-enc") != -1 && i < (args.length - 1)) {
              var decodedArg = Base64.decode(args[i+1]);
              if( decodedArg && decodedArg.length > 0 ){
                evt.Put("winlog.decodedPsCode",decodedArg.replace(/\u0000/gi,'')); //ズルしてる・・・
                break;
              }
          }
      }
    }

    // パイプライン処理２：Base64デコードされたコマンドをパースして配列へ格納
    var splitPsCode = function(evt) {
        var psArgs = evt.Get("winlog.decodedPsCode");
        if (!psArgs) {
            return;
        }
        evt.Put("winlog.decodedPsCodeArgs", winlogbeat.splitCommandLine(psArgs));
    }

    // パイプラインを作成
    var pipeline = new processor.Chain()
        .Add(decodePsCode) // パイプライン処理１を登録
        .Add(splitPsCode)  // パイプライン処理２を登録
        .Build()

    // パイプライン処理を実行
    pipeline.Run(evt);
    return;
}

// テスト関数
function test() {
    var console = require("console");

    var evt = new Event({
      process : {
        name : "powershell.exe",
        args : [
          "powershell.exe",
          "-executionpolicy",
          "bypass",
          "-enc",
          "UgBlAHMAbwBsAHYAZQAtAEQAbgBzAE4AYQBtAGUAIAAtAE4AYQBtAGUAIAB3AHcAdwAuAHkAbwB1AHQAdQBiAGUALgBjAG8AbQA="
        ]
      },
      winlog: {
        event_id: 1
      }
    });
    console.debug("evt: %j",evt.fields);

    process(evt);
    console.debug("evt: %s",evt.Get("winlog.decodedPsCode"));
    console.debug("evt: %j",evt.Get("winlog.decodedPsCodeArgs"));

    if (evt.Get("winlog.decodedPsCode") !== "Resolve-DnsName -Name www.youtube.com") {
        throw "expected winlog.decodedPsCode === Resolve-DnsName -Name www.youtube.com";
    }

    console.debug("test() Done.");
}

自作モジュールを設定ファイルへ追加

Winlogbeatの設定ファイル（例: C:\Program Files\winlogbeat-7.2.0-windows-x86_64\winlogbeat.yml）へモジュール(winlogbeat-helloworld.js)を追加します。今回はSysmonイベントに対してフィルタ・加工処理を行うためwinlogbeat.event_logsの「name: Microsoft-Windows-Sysmon/Operational」フィールド配下へscriptプロセッサとして追加します。

winlogbeat.yml

#======================= Winlogbeat specific options ===========================
...
winlogbeat.event_logs:
  - name: Application
    ignore_older: 72h

  - name: System
...
  - name: Microsoft-Windows-Sysmon/Operational
    processors:
      - script:
          lang: javascript
          id: sysmon
          file: ${path.home}/module/sysmon/config/winlogbeat-sysmon.js
      - script:
          lang: javascript
          id: psdecode
          file: ${path.home}/module/psdecode/config/winlogbeat-psdecode.js
...

作成したモジュールと編集した設定内容をテストしておきましょう。

PS C:\Program Files\winlogbeat-7.2.0-windows-x86_64> .\winlogbeat.exe test config
Config OK

実行結果

実行した結果は以下の通りです。winlog.decodedPsCodeフィールドにBase64デコードした結果、そしてwinlog.decodedPsCodeArgsフィールドにそれをパースした結果が格納されています。

PowerShellのBase64コマンドのデコード結果(抜粋)

...
{
  "_index" : "winlogbeat-7.2.0-2019.07.14",
  "_type" : "doc",
  "_id" : "eVTF72sBgpTg8iKCSXqf",
  "_score" : 0.0,
  "_source" : {
    "@timestamp" : "2019-07-14T09:16:49.667Z",
...
    "winlog" : {
...
      "decodedPsCode" : "Resolve-DnsName -Name www.youtube.com",
      "decodedPsCodeArgs" : [
        "Resolve-DnsName",
        "-Name",
        "www.youtube.com"
      ],
...
    },
...
    "process" : {
      "pid" : 4824,
      "executable" : "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
      "args" : [
        "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
        "-executionpolicy",
        "bypass",
        "-enc",
        "UgBlAHMAbwBsAHYAZQAtAEQAbgBzAE4AYQBtAGUAIAAtAE4AYQBtAGUAIAB3AHcAdwAuAHkAbwB1AHQAdQBiAGUALgBjAG8AbQA="
      ],
...
},

PowerShellのBase64コマンドのデコード結果(イベントログ全体)

...
{
  "_index" : "winlogbeat-7.2.0-2019.07.14",
  "_type" : "doc",
  "_id" : "eVTF72sBgpTg8iKCSXqf",
  "_score" : 0.0,
  "_source" : {
    "@timestamp" : "2019-07-14T09:16:49.667Z",
    "user" : {
      "domain" : "xxxxx",
      "name" : "xxxxx"
    },
    "host" : {
      "os" : {
        "family" : "windows",
        "name" : "Windows 10 Pro",
        "kernel" : "10.0.17763.615 (WinBuild.160101.0800)",
        "build" : "17763.615",
        "platform" : "windows",
        "version" : "10.0"
      },
      "id" : "22052e76-721a-4007-86f6-6346e89d0c86",
      "hostname" : "xxxxx",
      "architecture" : "x86_64",
      "name" : "xxxxx"
    },
    "agent" : {
      "ephemeral_id" : "d34dbafc-8002-4bcc-8f51-8e1911fcd0f0",
      "hostname" : "xxxxx",
      "id" : "d4bdf3a8-1d7e-4c36-a259-2a2451b56656",
      "version" : "7.2.0",
      "type" : "winlogbeat"
    },
    "winlog" : {
      "process" : {
        "thread" : {
          "id" : 3908
        },
        "pid" : 2720
      },
      "record_id" : 1744334,
      "channel" : "Microsoft-Windows-Sysmon/Operational",
      "event_data" : {
        "FileVersion" : "10.0.17763.1 (WinBuild.160101.0800)",
        "LogonId" : "0xa8970",
        "TerminalSessionId" : "1",
        "Description" : "Windows PowerShell",
        "IntegrityLevel" : "High",
        "Product" : "Microsoft® Windows® Operating System",
        "OriginalFileName" : "PowerShell.EXE",
        "Company" : "Microsoft Corporation",
        "LogonGuid" : "{22052e76-11ef-5d2a-0000-002070890a00}"
      },
      "provider_name" : "Microsoft-Windows-Sysmon",
      "task" : "Process Create (rule: ProcessCreate)",
      "api" : "wineventlog",
      "decodedPsCode" : "Resolve-DnsName -Name www.youtube.com",
      "decodedPsCodeArgs" : [
        "Resolve-DnsName",
        "-Name",
        "www.youtube.com"
      ],
      "provider_guid" : "{5770385f-c22a-43e0-bf4c-06f5698ffbd9}",
      "opcode" : "情報",
      "computer_name" : "xxxxx",
      "version" : 5,
      "event_id" : 1,
      "user" : {
        "identifier" : "S-1-5-18",
        "name" : "SYSTEM",
        "domain" : "NT AUTHORITY",
        "type" : "User"
      }
    },
    "process" : {
      "entity_id" : "{22052e76-f301-5d2a-0000-00102a5ce600}",
      "pid" : 4824,
      "executable" : "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
      "args" : [
        "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
        "-executionpolicy",
        "bypass",
        "-enc",
        "UgBlAHMAbwBsAHYAZQAtAEQAbgBzAE4AYQBtAGUAIAAtAE4AYQBtAGUAIAB3AHcAdwAuAHkAbwB1AHQAdQBiAGUALgBjAG8AbQA="
      ],
      "working_directory" : "C:\\Program Files\\winlogbeat-7.2.0-windows-x86_64\\",
      "parent" : {
        "entity_id" : "{22052e76-670e-5d2a-0000-001062cf5900}",
        "pid" : 5152,
        "executable" : "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
        "args" : [
          "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
        ],
        "name" : "powershell.exe"
      },
      "name" : "powershell.exe"
    },
    "event" : {
      "created" : "2019-07-14T09:16:51.554Z",
      "kind" : "event",
      "code" : 1,
      "action" : "Process Create (rule: ProcessCreate)"
    },
    "hash" : {
      "sha256" : "de96a6e69944335375dc1ac238336066889d9ffc7d73628ef4fe1b1b160ab32c",
      "imphash" : "741776aaccfc5b71ff59832dcdcace0f"
    },
    "ecs" : {
      "version" : "1.0.0"
    },
    "log" : {
      "level" : "情報"
    },
    "message" : "Process Create:\nRuleName: \nUtcTime: 2019-07-14 09:16:49.667\nProcessGuid: {22052e76-f301-5d2a-0000-00102a5ce600}\nProcessId: 4824\nImage: C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe\nFileVersion: 10.0.17763.1 (WinBuild.160101.0800)\nDescription: Windows PowerShell\nProduct: Microsoft® Windows® Operating System\nCompany: Microsoft Corporation\nOriginalFileName: PowerShell.EXE\nCommandLine: \"C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe\" -executionpolicy bypass -enc UgBlAHMAbwBsAHYAZQAtAEQAbgBzAE4AYQBtAGUAIAAtAE4AYQBtAGUAIAB3AHcAdwAuAHkAbwB1AHQAdQBiAGUALgBjAG8AbQA=\nCurrentDirectory: C:\\Program Files\\winlogbeat-7.2.0-windows-x86_64\\\nUser: xxxxx\\xxxxx\nLogonGuid: {22052e76-11ef-5d2a-0000-002070890a00}\nLogonId: 0xA8970\nTerminalSessionId: 1\nIntegrityLevel: High\nHashes: SHA256=DE96A6E69944335375DC1AC238336066889D9FFC7D73628EF4FE1B1B160AB32C,IMPHASH=741776AACCFC5B71FF59832DCDCACE0F\nParentProcessGuid: {22052e76-670e-5d2a-0000-001062cf5900}\nParentProcessId: 5152\nParentImage: C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe\nParentCommandLine: \"C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe\" "
  }
},
...

まとめ

Winlogbeat 7.2.0の新機能であるJavascriptプロセッサ機能を使って独自モジュールを書いてみました。様々な処理をパイプライン化するのも容易であり、応用範囲が広がりそうですね。何よりも設定をJavascriptの構文で柔軟にサクッと書けるので非常にお手軽で便利です。

※Javascriptプロセッサはまだ新しい機能ですので仕様変更も今後予想されます。詳細は公式リファレンスを参照してください。

モーダルを作る際に面倒なのが、スクロールしたときの背景の固定。
別に背景が動いても直接問題が起きることはないのですが、やっぱり気にはなります。ユーザーにもこのサービス大丈夫かな...と余計な不安感を与えることにもなりますし。

ただ、この背景固定、一筋縄ではいかないのが面倒なところ。とくにiOSは他のデバイスと異なる挙動を示し、AndroidやWebではちゃんと固定されるのにiOSだけ上手くいかない...と悩んでいる人も多いと思います。

何か解決方法はないかと探していたところ、非常に便利なライブラリを見つけたので、それで対応することにしました。

Body Scroll Lockを使う

名前の通り、機能を有効にすることで背景のスクロールを無効にできるライブラリです。便利なのは、ページ全てをスクロール無効にするのではなく、指定したDOM内部だけはスクロールできるように設定できること。
モーダル内部はスクロールさせたい！なんてケースにも対応可能ということです。

githubでのスターも1400個以上ついていますし、ある程度安心して導入できるのもメリットですね。公式サイトはこちら↓

Body Scroll Lock

Body Scroll Lockの使い方

何はともあれ、まずはnpm/yarnでinstallしましょう。

npm install body-scroll-lock

次に、背景固定を行いたいページ（コンポーネント）でimportします。

import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';

名前からしてそのままですが、背景を固定したい場合はdisableBodyScrollを、解除したい場合はenableBodyScrollを使えばOKです。

たとえば、モーダルコンポーネントに使うならこんな感じ。

ModalLayout.vue

<template>
  <div class="modal-layer">
    <div class="modal">
      <slot />
    </div>
  </div>
</template>

<script>
import {
  disableBodyScroll,
  enableBodyScroll,
  clearAllBodyScrollLocks
} from 'body-scroll-lock';

export default {
  mounted() {
    const modal = document.querySelector('.modal')
    disableBodyScroll(modal)
  },

  beforeDestory() {
    clearAllBodyScrollLocks()
  }
}
</script>

ModalLayoutは親コンポーネントからv-ifで呼ばれる想定のコンポーネントです。
v-ifがtrueになったときにmounted()が走ることと、falseになるとbeforeDestoryが走ることを利用して、モーダルが表示されている場合にのみ背景が固定されるようにしています。

まとめ

非常にシンプルで使いやすいので、背景固定に困っているケースで便利です。モーダル系ライブラリとも簡単に組み合わせられそうなのも良さそうですね。

はじめに

ReactでHTMLを作成するまでは案外すんなりと行ったのですが、クリックした際に「それぞれの情報を持たせてモーダルを表示する」ことに苦労したので忘備録としてまとめておきます。
最終的にはこのような感じになります。
たくさんの方法を試したので不必要なものもあるかもしれません。
その点は指摘していただけると幸いです。
下の画像をクリックした際にその情報を表示させています。
表示させる内容は個人で変更してください。

1.gemの導入とインストール

この２つのgemをGemfileに加え、bundle installしてください

Gemfile

gem 'react-rails'
gem 'webpacker'

その後、それぞれインストールしてください

Terminal

$ bundle install
$ rails webpacker:install  
$ rails webpacker:install:react 
$ rails generate react:install

するとapp以下にapp/javascript/componentsフォルダが作成されます。
私自身、app/assets以下にJavascriptフォルダがあるのに大丈夫なのかと思いましたが、問題ありません。

2. application.html.hamlにtagを追加

application.html.hamlに以下の記述を加えてください

application.html.haml

= javascript_pack_tag 'application'

この際にTerminalでyarnがどうこうというエラーが出るかもしれません。
その場合$ yarn install等、各自で調べて解決してください。

これらでRails上でReactを使う準備ができましたので、いよいよjsファイルに記述していきます。

3. Components以下にjsファイルの作成

Components以下にApp.jsとGraduate.jsを作成します。
これらの名前は自分で決めてくださって結構です。
ではこちらのコードをコピーしてください

App.js

import React from 'react';
import Graduate from './Graduate';

const lessonList = [
  {
    name: '開成太郎(2017)',
    school: '一条高校',
    image: 'https://cdn.pixabay.com/photo/2018/01/03/12/33/graduation-3058263__480.jpg',
    introduction: '中学一年生の時は全然テストの点数を取れなかったけど、ここに通い始めて２ヶ月ほどで目に見えて点数が上がるようになりました',
  },
  {
    name: '開成花子(2016)',
    school: '奈良高校',
    image: 'https://image.shutterstock.com/image-photo/japanese-student-browse-job-information-260nw-1010242525.jpg',
    introduction: '学校の授業では物足りず、塾に通うことに決めました。塾では私に合わせた応用問題を別途用意してもらい、そのおかげで合格できました',
  },
  {
    name: '開成三郎(2019)',
    school: '郡山高校',
    image: 'https://image.shutterstock.com/image-photo/high-school-student-graduation-260nw-1242927238.jpg',
    introduction: '土曜日や日曜日も朝早くから開塾してくれたおかげでたくさんの勉強時間を確保することができました。',
  },
  {
    name: '開成四郎(2015)',
    school: '登美ケ丘高校',
    image: 'https://cdn.pixabay.com/photo/2017/02/05/00/08/graduation-2038864__480.jpg',
    introduction: '二年生まで部活一筋だったため、勉強の進捗度は他の人に比べて劣っていたけれど、その分個別に補習の時間を組んでくれたおかげで合格できました。',
  }
];

class App extends React.Component {
  render() {
    return (
        <div className="performance">
        {lessonList.map((lessonItem) => {
      return (
          <Graduate
            name={lessonItem.name}
            image={lessonItem.image}
            school={lessonItem.school}
            introduction={lessonItem.introduction}
            />
      );
    })}
      </div>
    );
  }
}

export default App;

それでは解説していきます。

import React from 'react';
import Graduate from './Graduate';

まずimportとは輸入という意味です。
その名の通り、一行目ではReactを二行目ではGraduateファイルを読み込んでいます。
このおかげでReactを使うことができ、またGraduateにパラメーター(props)を渡すことができます。

const lessonList = [
  {
    name: '開成太郎(2017)',
    school: '一条高校',
    image: 'https://cdn.pixabay.com/photo/2018/01/03/12/33/graduation-3058263__480.jpg',
    introduction: '中学一年生の時は全然テストの点数を取れなかったけど、ここに通い始めて２ヶ月ほどで目に見えて点数が上がるようになりました',
  },
  {
    name: '開成花子(2016)',
    school: '奈良高校',
    image: 'https://image.shutterstock.com/image-photo/japanese-student-browse-job-information-260nw-1010242525.jpg',
    introduction: '学校の授業では物足りず、塾に通うことに決めました。塾では私に合わせた応用問題を別途用意してもらい、そのおかげで合格できました',
  },
  {
    name: '開成三郎(2019)',
    school: '郡山高校',
    image: 'https://image.shutterstock.com/image-photo/high-school-student-graduation-260nw-1242927238.jpg',
    introduction: '土曜日や日曜日も朝早くから開塾してくれたおかげでたくさんの勉強時間を確保することができました。',
  },
  {
    name: '開成四郎(2015)',
    school: '登美ケ丘高校',
    image: 'https://cdn.pixabay.com/photo/2017/02/05/00/08/graduation-2038864__480.jpg',
    introduction: '二年生まで部活一筋だったため、勉強の進捗度は他の人に比べて劣っていたけれど、その分個別に補習の時間を組んでくれたおかげで合格できました。',
  }
];

この部分ではそれぞれのハッシュを配列に入れています。これをあとでmapメソッドで一つずづ表示させていきます。

class App extends React.Component {
  render() {
    return (
        <div className="performance">
        {lessonList.map((lessonItem) => {
      return (
          <Graduate
            name={lessonItem.name}
            image={lessonItem.image}
            school={lessonItem.school}
            introduction={lessonItem.introduction}
            />
      );
    })}
      </div>
    );
  }
}

この部分でComponentを作成しています。(extendsは広げるという意味)
ConmonentはJavascriptの関数のようなものです。
その中のreturnでHTMLを返し、表示させています。またこのような記法をJSXと言います。
また、JSXには約束事があり、複数の要素を返すことができません。なので図の場合、performanceクラスを親要素としその中に色々と要素を追加しています。

{lessonList.map((lessonItem)ではlessonListの数だけ繰り返し、returnを読み込んでいます。
return内でとすることでGraduateコンポーネントを呼び出しています。これが可能なのはimport Graduate from './Graduate';のおかげです。
sosite
呼び出す際にはname,school,image,introductionのパラメーターを渡しています。(props)
このパラメーターをGraduate.js側で使うわけです。ちなみにJSX内でjavascriptの記法を用いる際は中括弧が必要なため、中括弧内に書いてあります。

export default App;

App.jsの最後の行ですが、exportとは輸出という意味です。
これのおかげでHTMLファイルでApp.jsを呼び出すことができ、returnとして要素をHTMLに追加することができます。App.jsがGraduateを二行目でimportできているのもGraduate.jsで最後にexport default Graduate;としているからです。

Graduate.js

import React from 'react';

class Graduate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isModalOpen: false};
  }

  handleClickLesson() {
    this.setState({isModalOpen: true});
  }

  handleClickClose() {
    this.setState({isModalOpen: false});
  }
  render() {
    let modal;
    if (this.state.isModalOpen) {
      modal = (
        <div className='modal-area'>
        <div className='modal-inner'>
          <div className='modal-header'></div>
          <div className='modal-introduction'>
            <h2>{this.props.name}</h2>
            <p>{this.props.introduction}</p>
          </div>
          <button
            className='modal-close-btn'
            onClick={() => this.handleClickClose()}
          >
            とじる
          </button>
        </div>
      </div>
      )
    };

    return (
      <div className="graduate">
          <img className="graduate__image" src={this.props.image}
               onClick={() => {this.handleClickLesson()}}
          />
          <div className="graduate__school">{this.props.school} 合格!</div>
          <div className="graduate__student">{this.props.name}</div>
          {modal}
      </div>
    );
  }
}

export default Graduate;

この部分で、実際に表示されるHTMLを作成しています。App.jsから渡されたパラメータ(props)を使って書いていきます。

constructor(props) {
    super(props);
    this.state = {isModalOpen: false};
  }

新しくstate(状態)というものが出てきましたが、propsとstateは少し異なり、stateはそのComponent内で保持されるものであって、propsみたいにComponentからComponentに渡すことはできません。詳しくはこちら
この部分でモーダルの表示・非表示を管理しています。

  handleClickLesson() {
    this.setState({isModalOpen: true});
  }

  handleClickClose() {
    this.setState({isModalOpen: false});
  }

ここで先ほどのstateを関数(handleClickLesson or handleClickClose)が呼ばれた時に更新しています。この時に注意して欲しいのが、更新する際はsetStateとしないといけないことです。

let modal;
    if (this.state.isModalOpen) {
      modal = (
        <div className='modal-area'>
        <div className='modal-inner'>
          <div className='modal-header'></div>
          <div className='modal-introduction'>
            <h2>{this.props.name}</h2>
            <p>{this.props.introduction}</p>
          </div>
          <button
            className='modal-close-btn'
            onClick={() => this.handleClickClose()}
          >
            とじる
          </button>
        </div>
      </div>
      )
    };

ここでisModalOpenがtrueの場合のみ、変数modalに値を代入し、表示させます。
そしてモーダルの中にonClick={() => this.handleClickClose()}があると思いますが、このボタンを押すことでisModalOpenがfalseになり再び非表示になります。
またApp.jsからもらってきたパラメータ(props)を{this.props.name}とすることで代入することができます。
またReactではclassをclassNameと記載します。

return (
      <div className="graduate">
          <img className="graduate__image" src={this.props.image}
               onClick={() => {this.handleClickLesson()}}
          />
          <div className="graduate__school">{this.props.school} 合格!</div>
          <div className="graduate__student">{this.props.name}</div>
          {modal}
      </div>
    );

最後ですね。
この部分で常時表示させるHTMLをApp.jsからもらったpropsを使って作成しています。
そして{modal}の部分で先ほどの変数を代入しているわけですね。imgクラスにonClickが設定されているため、画像をクリックするとisModalOpenがtrueになり、値が代入されたmodalが表示されるわけです。
では最後にHTML側でApp.jsを呼んであげましよう。

hamlの場合は

index.haml.haml

= react_component("App")

htmlの場合は

index.html.erb

<%= react_component("App") %>

これで完成です。
CSSだけ記載しておきます。
お好みで変更してください。

stylesheet.css

.performance {
    .graduate {
      padding: 30px 0;
      display: inline-block;
      width: 25%;
      text-align: center;
      &__student {
        font-size: 15px;
        padding-top: 10px;
        text-align: right;
        padding-right: 20px;
      }
      &__school {
        font-size: 20px;
        padding-top: 10px;
      }
      &__image {
        cursor: pointer;
        height: 160px;
        width: 160px;
        border-radius: 50%;
      }
      .modal-area {
        z-index: 2;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
        .modal-inner {
          position: absolute;
          top: 8%;
          right: 0;
          left: 0;
          width: 480px;
          padding-bottom: 60px;
          margin: auto;
          background-color: rgb(255, 255, 255);
          .modal-header {
            margin-bottom: 60px;
          }
          .modal-introduction p {
            color: #5876a3;
            width: 384px;
            line-height: 32px;
            text-align: left;
            margin: 36px auto 40px;
          }
          .modal-close-btn {
            font-size: 13px;
            color: #8491a5;
            width: 200px;
            padding: 16px 0;
            border: 0;
            background-color: #f0f4f9;
            cursor: pointer;
          }
          .modal-close-btn:hover {
            color: #8491a5;
            background-color: #ccd9ea;
            transition: .3s ease-in-out;
          }
        }
      }
    }
  }

番外編

Click時にモーダルが表示されるが非表示にならない場合

モーダル実装時にモーダルが閉じないというバグが起こりました。
原因を調べてみると閉じるボタンを押した際に一回閉じてから再度開いています。
これがその時のコードです。

<div className="graduate"
     onClick={() => {this.handleClickLesson()}}>
          <img className="graduate__image" src={this.props.image}/>
          <div className="graduate__school">{this.props.school} 合格!</div>
          <div className="graduate__student">{this.props.name}</div>
          {modal}
      </div>

何が問題かというと一番の親要素であるgraduateにopenmodalを設定しているせいで、その子要素であるモーダル内のclossmodalを押した際に同時に親要素のopenmodalも呼ばれてしまうからです。
なのでそれぞれのClick機能は親要素、子要素の関係に注意しましょう。

参考資料

React公式HP
Progate
https://qiita.com/k-penguin-sato/items/e3cc04f787cf3254cfae
https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50

タイトルが「Reactアプリの枠組みの雛形を作ってみる」とありますが、本記事の目的は、以下のような複数のReactライブラリを一緒に使っても、それぞれのライブラリの機能がそこなわれることなく機能することを確認することです。

個人的には、antdが豊富なUIコンポネントを提供してくれているので、今後Material-UIに替えて使っていければなーと思っています。（中国発ですが、トランプ制裁とか関係ないですよね）immutable jsがリストから落ちていますが、今後の課題です。

• @loadable/component
• redux
• react-redux
• redux-logger
• redux-thunk
• react-router-dom
• connected-react-router
• antd
• styled-components

@loadable/component
Reactのコード分割を行うライブラリ。バンドルの肥大化対応。React code splitting made easy.

redux
A predictable state container for JavaScript apps.

react-redux
Official React bindings for Redux
「React Reduxの概要を理解する」

redux-logger
Logger for Redux。　reduxのstateログを出力するMiddleware。

redux-thunk
Thunk middleware for Redux.
actionとして非同期関数を指定することが可能になります。

react-router-dom
react-router

connected-react-router
A Redux binding for React Router v4 and v5
history methods (push, replace, go, goBack, goForward)のdispatch が、 redux-thunk と redux-sagaの両方に互換性を持ちます。
「react-router v4 と Redux」

antd
Ant Design of React
ReactのUIライブラリ。豊富なUIコンポネントを比較的簡単に使える。
「React UI library の antd について (1) - Button」

styled-components
Visual primitives for the component age
JSでstyleを記述するCSS in JSのライブラリ。

【補足】
実は本検証の過程で、redux-formをreact-router-domと一緒に使うと機能しないことが確認できました。reduxForm()とconnect()という2つのHOCで2重にラップした時に、propsが、最終的なコンポーネントにうまく伝わっていかない感じでした。結論としてはredux-formは使わずに、antdのForm.create()を使ってvalidateを行うようにしました。私の検証ミスかもしれませんが、丸一日試行錯誤した結果です。

１．インストール

以下のコマンドで環境構築OKです。

yarn create react-app antd-test
cd antd-test
yarn add @loadable/component
yarn add redux react-redux redux-logger redux-thunk
yarn add react-router-dom connected-react-router
yarn add antd styled-components

一応package.jsonも掲載しておきます。

package.json

{
  "name": "antd-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@loadable/component": "^5.10.1",
    "antd": "^3.20.2",
    "connected-react-router": "^6.5.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "redux": "^4.0.4",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "styled-components": "^4.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

２．画面イメージ

本アプリのページは、ホーム画面とユーザ登録画面、ログイン画面の3つです。ページ遷移も含めて以下に紹介します。

■ページ構成：上からヘッダー、コンテンツ、フッター

■ユーザ登録：コンテンツ=ユーザ登録画面

ユーザ登録が成功すると、3秒後にログイン画面に自動遷移します。

■ログイン：コンテンツ=ログイン画面

ログインが成功すると、3秒後にホーム画面に自動遷移します。

■ホーム：コンテンツ=ホーム画面（初期画面）

３．ソースツリー

以下がソースファイルのツリーになります。
containersディレクトリが重要です。その中でもLoginとRegisterがメインです。Loadable.jsがimportポイントとなります。index.jsがreact-reduxのcontainerであり、Register.jsとLogin.jsがcomponentとなります。index.jsがReduxの処理を行い、Register.jsとLogin.jsはReduxについては何も知らないことになっています。

$ tree src
src
├── App.js
├── actions
│   └── actions.js
├── components
│   ├── Footer.js
│   ├── Header.js
│   └── Wrapper.js
├── containers
│   ├── Home
│   │   ├── Loadable.js
│   │   └── index.js
│   ├── Login
│   │   ├── Loadable.js
│   │   ├── Login.js
│   │   └── index.js
│   ├── NotFoundPage
│   │   ├── Loadable.js
│   │   └── index.js
│   ├── Register
│   │   ├── Loadable.js
│   │   ├── Register.js
│   │   ├── Register.org2
│   │   ├── _Register.new
│   │   ├── _Register.org
│   │   └── index.js
│   └── input.js
├── createStore.js
├── form-style.css
├── index.js
└── reducers
    └── index.js

４．index.js

index.jsでReduxとreact-redux、connected-react-routerの初期設定を行います。

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'connected-react-router';
import createBrowserHistory from 'history/createBrowserHistory';
import App from './App'
import createStore from './createStore'

// connected-react-router - action経由でルーティングが可能、push,replace..
// historyを強化
const history = createBrowserHistory();
const store = createStore(history);

const dest = document.getElementById('root')

let render = () => {
  ReactDOM.hydrate(
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <App />
      </ConnectedRouter>
    </Provider>,
    dest
  )
}

render()

createStore.jsはreduxのオリジナルcreateStore.jsのラッパーです。ReducersとMiddlewareの設定を行います。

src/createStore.js

import { createStore as reduxCreateStore, combineReducers, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
import { routerMiddleware, connectRouter } from 'connected-react-router'
import * as reducers from './reducers'

// connected-react-router - action経由でルーティングが可能、push,replace..
// createStoreの再定義 - historyを引数で受け、connected-react-routerの利用を抽象化
export default function createStore(history) {
  return reduxCreateStore( // オリジナル createStore の別名
    combineReducers({
      ...reducers,
      router: connectRouter(history)
    }),
    applyMiddleware(
      logger,
      thunk,
      routerMiddleware(history)
    )
  );
}

reducersの定義です。
Redux storeは次の2つのstateを保持します。

• state.users[]: userオブジェクトの配列
• state.logined: ログインしているuserオブジェクト

src/reducers/index.js

export const users = (state = [], action) => {
  switch (action.type) {
    case 'ADD_USER': // *** userを追加
      return [
        ...state,    // *** 分割代入、stateに追加
        {
          email: action.user.email,
          name: action.user.name,
          password: action.user.password
        }
      ]
    default:
      return state
  }
}

export const logined = (state = {}, action) => {
  switch (action.type) {
    case 'ADD_LOGINED_USER': // *** userを追加
      return (
        {
          email: action.user.email,
          name: action.user.name,
          password: action.user.password
        })
    default:
      return state
  }
}

redux-thunkを使っているので、actionは非同期関数で定義しています。ただし非同期はsetTimeout()で模擬したものです
connected-react-routerを使っており、提供されるpush()はredux-thunkと互換性があります。push()を使って、ユーザ登録成功後にログイン画面へ、ログイン成功後にホーム画面へ、自動リダイレクトしています。

src/actions/actions.js

import { push } from 'connected-react-router';

const addUser = user => ({
  type: 'ADD_USER',
  user: user
})

const addLoginedUser = user => ({
  type: 'ADD_LOGINED_USER',
  user: user
})

export const asyncAddUser = values => {
  return (dispatch, getState) => {
    setTimeout( () => {
        dispatch(addUser(values))
        dispatch(push("/login"))
    }, 3000 );
  }
}

export const asyncLogin = values => {
  return (dispatch, getState) => {
    setTimeout( () => {
      const state = getState()
      for (const user of state.users) {
        if( user.email === values.email && user.password === values.password ) {
          console.log("login succeful!!!",values)
          dispatch(addLoginedUser(user))
          dispatch(push("/"))
          return
        }
      }
      console.log("login failed!!!",values)
    }, 3000 );
  }
}

５．App.js

App.jsはこのアプリのメインになります。サイト全体のページ構成を定義します。

• react-routerでRouteを定義します。
• 画面の枠組みを定義して、全体のstyleを実装します

styleはstyled-componentsを利用しているほか、antd.cssとform-style.cssを読み込んでいます。

App.js

import React, { Component } from 'react'
import styled from 'styled-components'
import { Switch, Route } from 'react-router-dom'

import Home from './containers/Home/Loadable'
import LoginPage from './containers/Login/Loadable'
import RegisterPage from './containers/Register/Loadable'
import NotFoundPage from './containers/NotFoundPage/Loadable'
import Header from './components/Header'
import Footer from './components/Footer'

import 'antd/dist/antd.css';
import './form-style.css';

const AppWrapper = styled.div`
  max-width: calc(768px + 16px * 2);
  margin: 0 auto;
  display: flex;
  min-height: 100%;
  padding: 0 16px;
  flex-direction: column;
  background: papayawhip;
  .btn {
    line-height: 0;
  }
`;

class App extends Component {
  render() {
    return (
      <AppWrapper>
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/login" component={LoginPage} />
          <Route exact path="/register" component={RegisterPage} />
          <Route path="" component={NotFoundPage} />
        </Switch>
        <Footer />
      </AppWrapper>
    );
  }
}

export default App;

form-style.cssはForm画面のstyle記述しています。ユーザ登録画面とログイン画面だけで読み込めばいいのですが、面倒なのでApp.js一か所で読み込んでいます。

src/form-style.css

.form-register-containers {
  width: 100%;
  margin: auto;
  max-width: 400px;
  padding: 50px 10px;
}

.form-register-containers .center {
  text-align: center;
}

.form-register-containers .ant-form-item-label {
  line-height: 1;
}

.form-register-containers .ant-form-item-with-help {
  margin-bottom: 0;
}

６．ユーザ登録

loadableを通して、containerコンポーネントのindex.jsを読み込みます。

src/containers/Register/Loadable.js

import loadable from '@loadable/component';
export default loadable(() => import('./index'));

index.jsはcontainerコンポーネントとして、react-reduxの設定を行い、connect()でcomponentをラップします。加えてantdのForm.create()でラップしています。
2つのHOCを使っているのですが、順番に注意してください。

src/containers/Register/index.js

import { connect } from 'react-redux'
import { asyncAddUser } from '../../actions/actions'
import Register from './Register';

import { Form } from 'antd';

function mapStateToProps(state) {
  return state
}

function mapDispatchToProps(dispatch) {
  return {
    onSubmit : values => {
        dispatch(asyncAddUser(values))
    }
  }
}

let myRegister = connect(mapStateToProps, mapDispatchToProps)(Register)
myRegister = Form.create({ name: 'register_form' })(myRegister);

export default myRegister

antdのFormを使って、ユーザ登録のform画面を定義しています。Form.create()でラッピングしているので、様々なvalidate関数を利用できます。

src/

import React from 'react';
import { Form, Input, Icon, Button } from 'antd';

class Register extends React.Component {

  state = {
    confirmDirty: false,
    autoCompleteResult: [],
  };

  componentDidMount() {
    // To disabled submit button at the beginning.
    this.props.form.validateFields();
  }

  handleSubmit = e => {
    console.log(this.props)
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Submit OK: ', values);
        this.props.onSubmit( values )
      } else {
        console.log('Submit NG: ', values);
      }
    })
  }

  handleConfirmBlur = e => {
    const { value } = e.target;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };

  compareToFirstPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && value !== form.getFieldValue('password')) {
      callback('Two passwords that you enter is inconsistent!');
    } else {
      callback();
    }
  };

  validateToNextPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  };

  render() {
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;

    // Only show error after a field is touched.
    const emailError = isFieldTouched('email') && getFieldError('email');
    const nameError = isFieldTouched('name') && getFieldError('name');
    const passwordError = isFieldTouched('password') && getFieldError('password');
    const confirmError = isFieldTouched('confirm') && getFieldError('confirm');
    const buttonDisable = getFieldError('email') || getFieldError('name') || getFieldError('password') || getFieldError('confirm')

    return(
      <Form onSubmit={this.handleSubmit} className="form-register-containers">
        <h1 className="center">
          ユーザ登録
        </h1>

        <Form.Item label="メールアドレス" validateStatus={emailError ? 'error' : ''} help={emailError || ''}>
          {getFieldDecorator('email', {
            rules: [ {type: 'email', message: 'The input is not valid E-mail!',},
                     { required: true, message: 'Please input your email!' }],
            })(
              <Input
                prefix={<Icon type="mail" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="email"
              />,
          )}
        </Form.Item>

        <Form.Item label="パスワード" validateStatus={passwordError ? 'error' : ''} help={passwordError || ''}>
          {getFieldDecorator('password', {
            rules: [ { required: true, message: 'Please input your password!' },
                     { validator: this.validateToNextPassword,} ],
            })(
              <Input
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="password"
              />,
          )}
        </Form.Item>

        <Form.Item label="確認パスワード" validateStatus={confirmError ? 'error' : ''} help={confirmError || ''}>
          {getFieldDecorator('confirm', {
            rules: [ { required: true, message: 'Please input your confirmPassword!' },
                     { validator: this.compareToFirstPassword,} ],
            })(
              <Input
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="confirmPassword"
                onBlur={this.handleConfirmBlur}
              />,
          )}
        </Form.Item>

        <Form.Item label="名前" validateStatus={nameError ? 'error' : ''} help={nameError || ''}>
          {getFieldDecorator('name', {
            rules: [{ required: true, message: 'Please input your name!' }],
            })(
              <Input
                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="name"
              />,
          )}
        </Form.Item>

        <Form.Item className="center">
          <Button
            type="primary"
            htmlType="submit"
            className="btn-submit"
            disabled = {buttonDisable}
          >
            ユーザ登録
          </Button>
        </Form.Item>
      </Form>
    )
  }
}

export default Register

７．ログイン

ログイン画面はユーザ登録画面と構成が全く同じです。説明も重複になるので、省略します。

src/containers/Login/Loadable.js

import loadable from '@loadable/component';
export default loadable(() => import('./index'));

src/containers/Login/index.js

import { connect } from 'react-redux'
import { asyncLogin } from '../../actions/actions'
import Login from './Login';

import { Form } from 'antd';

function mapStateToProps(state) {
  return state
}


function mapDispatchToProps(dispatch) {
  return {
    onSubmit : values => {
        dispatch(asyncLogin(values))
    }
  }
}

let myLogin = connect(mapStateToProps, mapDispatchToProps)(Login)
myLogin = Form.create({ name: 'login_form' })(myLogin);

export default myLogin

src/containers/Login/Login.js

import React from 'react';
import { Form, Input, Icon, Button } from 'antd';

class Login extends React.Component {

  componentDidMount() {
    // To disabled submit button at the beginning.
    this.props.form.validateFields();
  }

  handleSubmit = e => {
    console.log(this.props)
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        this.props.onSubmit( values )
      }
    })
  }

  render() {
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;

    // Only show error after a field is touched.
    const emailError = isFieldTouched('email') && getFieldError('email');
    const passwordError = isFieldTouched('password') && getFieldError('password');
    const buttonDisable = getFieldError('email') || getFieldError('password')

    return(
      <Form onSubmit={this.handleSubmit} className="form-register-containers">
        <h1 className="center">
          ログイン
        </h1>
        <Form.Item label="メールアドレス" validateStatus={emailError ? 'error' : ''} help={emailError || ''}>
          {getFieldDecorator('email', {
            rules: [ {type: 'email', message: 'The input is not valid E-mail!',},
                     { required: true, message: 'Please input your email!' }],
            })(
              <Input
                prefix={<Icon type="mail" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="email"
              />,
          )}
        </Form.Item>

        <Form.Item label="パスワード" validateStatus={passwordError ? 'error' : ''} help={passwordError || ''}>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your password!' }],
            })(
              <Input
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="password"
              />,
          )}
        </Form.Item>


        <Form.Item className="center">
          <Button
            type="primary"
            htmlType="submit"
            className="btn-submit"
            disabled = {buttonDisable}
          >
            ログイン
          </Button>
        </Form.Item>
      </Form>
    )
  }
}

export default Login

８．ホーム

ホーム画面は特にありません。

src/containers/Home/Loadable.js

import loadable from "@loadable/component";
export default loadable(() => import("./index"));

src/

import React from 'react';
import { Route, Link } from 'react-router-dom';

const Home = () => (
  <div>
    <h1>私のホームページへようこそ　！！！</h1>
    <ul>
      <li><Link to="/login">Login</Link></li>
      <li><Link to="/register">Register</Link></li>
    </ul>
  </div>
);

export default Home;

URLで指定されたページが見つからい場合は、以下のcomponentが表示されます。

src/containers/NotFoundPage/Loadable.js

import loadable from "@loadable/component";
export default loadable(() => import("./index"));

src/containers/NotFoundPage/index.js

import React from "react";

export default class NotFound extends React.PureComponent {
  render() {
    return <h1>This is the NotFoundPage Page!</h1>;
  }
}

９．ヘッダー／フッター

ヘッダーとフッターですが、特に説明は不要でしょう。

src/components/Header.js

import React from 'react';
import { Link } from "react-router-dom";
import { Breadcrumb } from 'antd';

function Header() {
  return (
    <Breadcrumb>
      <Breadcrumb.Item>
        <Link to="/">ホーム</Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Link to="/login">ログイン</Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        <Link to="/register">ユーザ登録</Link>
      </Breadcrumb.Item>
    </Breadcrumb>
  );
}

export default Header;

src/

import React from 'react';
import Wrapper from './Wrapper';

function Footer() {
  return (
    <Wrapper>
      <section>Footer footer Footer!!!</section>
    </Wrapper>
  );
}

export default Footer;

src/components/Wrapper.js

import styled from 'styled-components';

const Wrapper = styled.footer`
  display: flex;
  justify-content: space-between;
  padding: 3em 0;
  border-top: 1px solid #666;
`;

export default Wrapper;

今回は以上です。