はじめに

3年ぶりの投稿です。
最近、Codepenなどを使ってCanvasで遊んでいるのですが、Canvasの画像・動きを動画として残せないかと考えるようになりました。
調べてみると、CCapture.jsなど、Canvasから動画を生成するライブラリがあるようなので、Herokuを使って、簡単なCanvas動画生成サービスを作ってみました。

作ったもの

成果物　　　：CapCanvas
ソースコード：Github

Canvasから動画を生成するWebサービスを試作してみました。https://t.co/Nd265nEUGw pic.twitter.com/sweoAaaEZt

— t_mat (@t_mat) March 2, 2019

使い方

htmlヘッダーに以下の行を追加します。なお、idはcanvasのid、fpsはフレームレート、timeは録画時間(ms)を指定します。
'C'キーを推すとCanvasのキャプチャが開始され、録画終了後、動画(webm)がダウンロードされます。
<script type="text/javascript" src="https://capcanvas.herokuapp.com/capcanvas/id=app&fps=60&time=10000"></script>


実装

■JavaScript
Jsは、CCaputureのサンプルコードを参考に、以下のように実装しました。なお、$URL、$ID、$FPS、$TIMEはサーバー側で文字列に置換します。

CapCanvas.js

window.onload = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "$URL";
document.body.appendChild(script);
};
window.addEventListener('keydown', event => {
if(event.key=='c'||event.key=='C'){
let canvas=document.getElementById("$ID");
startCapture(canvas,$FPS,$TIME);
}
});
let startCapture=function(canvas,fps,time){
let cap=new CCapture({format:'webm',framerate: fps,verbose: true});
let render=function(){
requestAnimationFrame(render);
cap.capture( canvas );
};
requestAnimationFrame(render);
cap.start();
setTimeout(function(){
cap.stop();
cap.save();
},time);
};

■サーバー
サーバー側はリクエストパラメータを解析し、CapCanvas.jsを書き換えて送信します。
個人的にお気に入りのSpark Frameworkで作成しています。

Main.java

package net.termat.webapp.capcanvas;

import static spark.Spark.get;

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.URL;
import java.util.HashMap;
import java.util.Map;
import java.util.Optional;

import spark.ModelAndView;
import spark.Spark;
import spark.template.mustache.MustacheTemplateEngine;

public class Main {
    private static String code;

    public static void main(String[] args) {
        Spark.staticFileLocation("/public");
        code=getJs();
        Optional<String> optionalPort = Optional.ofNullable(System.getenv("PORT"));
        optionalPort.ifPresent(p -> {
            int port = Integer.parseInt(p);
            Spark.port(port);
        });

        get("/", (request, response) -> {
            Map<String, Object> model = new HashMap<>();
             return new ModelAndView(model, "index.mustache");
        }, new MustacheTemplateEngine());

        get("/capcanvas/:param", (request, response) -> {
            try{
                String url="https://capcanvas.herokuapp.com/js/CCapture.all.min.js";
                Map<String,String> map=paramMap(request.params("param"));
                String id=map.get("id");
                String fps=map.get("fps");
                String time=map.get("time");
                response.status(200);
                String ret=new String(code);
                ret=ret.replace("$URL", url);
                ret=ret.replace("$ID", id);
                ret=ret.replace("$FPS", fps);
                ret=ret.replace("$TIME", time);
                return ret;
            }catch(Exception e){
                e.printStackTrace();
                response.status(400);
                response.type("application/json");
                return "";
            }
        });

    }

    private static String getJs(){
        try{
            URL url=Main.class.getResource("CapCanvas.js");
            BufferedReader br=new BufferedReader(new InputStreamReader(url.openStream()));
            StringBuffer buf=new StringBuffer();
            String line=null;
            while((line=br.readLine())!=null){
                buf.append(line);
            }
            return buf.toString();
        }catch(Exception e){
            return "";
        }
    }

    private static Map<String,String> paramMap(String param) throws Exception{
        Map<String,String> ret=new HashMap<String,String>();
        String[] p=param.split("&");
        for(int i=0;i<p.length;i++){
            String[] k=p[i].split("=");
            if(k.length<2)continue;
            ret.put(k[0], k[1]);
        }
        return ret;
    }
}

デプロイ

herokuへは、heroku-maven-pluginを使用してデプロイしました。
Port番号の解決に気が付かず、実際に動作させるまで2～3時間かかってしまいました。

タイトルままですが、firebaseとvueでソーシャルログインを実装しました。

各ルーター側の.vueに影響がないようにしました。

firebaseなのでここでホスティングもしてます。

実際にログインもできます。

https://authentication-sample-001.firebaseapp.com/

プロジェクトはこちら

https://github.com/qoAopx/firebase_vue_authentication

タイトルままですが、FirebaseとVueでソーシャルログインを実装しました。

各ルーター側の.vueに影響がないようにしました。

Firebaseなのでここでホスティングもしてます。

実際にログインもできます。

https://authentication-sample-001.firebaseapp.com/

プロジェクトはこちら

https://github.com/qoAopx/firebase_vue_authentication

JSを勉強し始めた人向けの記事です。

今っぽい感じの配列やオブジェクトのコピーのやり方を記載します。（今=2019年です）

配列のコピー

配列

const array1 = [ 1, 2, 3 ]
const arrayCopy = [ ...array1 ]

スプレッド構文を使うことでconcatとかsliceとかforとかを使わずに書けます。

オブジェクトのコピー

オブジェクト

const obj1 = { a: 1, b: 2 }
const objCopy = { ...obj1 }

こちらもスプレッド構文を使ってコピーできます。Object.assignを使わずに書けます。

注意点

どちらもShallow copyです。

Deep copyではありません！

まとめ

自分はこの方法を知らなかったので、初めてこの書き方を知ったときはシンプルさに驚きました。

スプレッド構文はコピー以外にもいろいろと便利なので知らなかった場合は詳細を調べてみることをオススメします！

参考

スプレッド構文 - MDN

みんな大好きInternetExplore11のJavaScriptを、みんな大好きなExcelのVBAから動かします。

なにが嬉しいの？

・現在、表示されているIEのJavaScriptの保持している変数の中身を出力できるよ！
・無理やりJavaScriptで例外を発生させたときの挙動を確かめられるよ！
・サーバー側のソースコードを書き換えずにローカル環境でJavaScriptの関数をテスト用に置き換えられるよ！

ExcelVBAなので、手足を縛ってプログラムを開発するのが性癖なマゾい会社でも使えるよ！やったぜ！

環境

InternetExploere
Windows10
Office16 Excel 32bit

なお、64bitのExcelを使っている箇所はlongでなく、longPtrとかにしないと動かないと思うけど、ぶっちゃけ64bitマシン支給するようなブルジョワジーの組織だったらVisualStudio使わせてもらってC#で書いた方がいいと思います。

サンプル

IEAuto.bas

 Option Explicit

' Microsoft HTML Object Libraryを参照設定すること

Private Declare Function EnumWindows Lib "user32" (ByVal lpEnumFunc As Long, ByVal lParam As Long) As Long
Private Declare Function EnumChildWindows Lib "user32" (ByVal hWndParent As Long, ByVal lpEnumFunc As Long, ByVal lParam As Long) As Long

Private Declare Function GetClassName Lib "user32" Alias "GetClassNameA" (ByVal hwnd As Long, ByVal lpClassName As String, ByVal nMaxCount As Long) As Long
Private Declare Function RegisterWindowMessage Lib "user32" Alias "RegisterWindowMessageA" (ByVal lpString As String) As Long
Private Declare Function SendMessageTimeout Lib "user32" Alias "SendMessageTimeoutA" (ByVal hwnd As Long, ByVal msg As Long, ByVal wParam As Long, ByVal lParam As Long, ByVal fuFlags As Long, ByVal uTimeout As Long, lpdwResult As Long) As Long
Private Declare Function ObjectFromLresult Lib "oleacc" (ByVal lResult As Long, riid As Any, ByVal wParam As Long, ppvObject As Object) As Long

Private mIEWndList As Collection
Private Type UUID
  Data1 As Long
  Data2 As Integer
  Data3 As Integer
  Data4(0 To 7) As Byte
End Type

' MSHTML.IHTMLDocumentのキャッシュを検索する
Public Sub RefreshBrowserCache()
    Set mIEWndList = New Collection

    Call EnumWindows(AddressOf EnumIEWndProc, 0)
End Sub
' 指定の名称を含むタイトルのブラウザを検索する
Public Function FindBrowser(ByVal title As String) As MSHTML.IHTMLDocument2
    Dim r As MSHTML.IHTMLDocument2

    If mIEWndList Is Nothing Then
        Call RefreshBrowserCache
    End If

    Set r = FindBrowserInCache(title)
    If Not r Is Nothing Then
        Set FindBrowser = r
        Exit Function
    End If

    Call RefreshBrowserCache
    Set FindBrowser = FindBrowserInCache(title)

End Function

' キャッシュの中から指定の名称を含むタイトルのブラウザを検索する
Private Function FindBrowserInCache(ByVal title As String) As MSHTML.IHTMLDocument2
    Dim d As MSHTML.IHTMLDocument2
    For Each d In mIEWndList
        If InStr(d.title, title) > 0 Then
            Set FindBrowserInCache = d
            Exit Function
        End If
    Next

End Function



' コールバック関数
Private Function EnumIEWndProc(ByVal hwnd As Long, lParam As Long) As Boolean
    Const FRAME_NAME = "IEFrame"
    Const FRAME_NAME_EDGE = "TabWindowClass" 'Edgeの場合のクラス名

    Dim strClassName As String * 128
    Dim lngRet As Long

    strClassName = ""
    Call GetClassName(hwnd, strClassName, 128)
    Dim c As String
    c = Left(strClassName, Len(Trim(strClassName)) - 1)
    If c = FRAME_NAME Or c = FRAME_NAME_EDGE Then
        EnumChildWindows hwnd, AddressOf EnumIEServerWndProc, 0
    End If
    'Debug.Print "[" & Trim(strClassName) & "_]"
    EnumIEWndProc = True
End Function

' コールバック関数
Private Function EnumIEServerWndProc(ByVal hwnd As Long, ByVal lParam As Object) As Long
    Const SERVER_NAME = "Internet Explorer_Server"
    Dim strClassName As String * 128
    Dim lngRet As Long
    Dim doc As MSHTML.IHTMLDocument2

    strClassName = ""
    Call GetClassName(hwnd, strClassName, Len(strClassName))
    If Left(strClassName, Len(Trim(strClassName)) - 1) = SERVER_NAME Then
        Set doc = GetHTMLDocument(hwnd)
        If Not doc Is Nothing Then
            mIEWndList.Add doc
        End If
    End If
    EnumIEServerWndProc = 1
End Function

Private Function GetHTMLDocument(ByVal hwnd As Long) As MSHTML.IHTMLDocument2
    Dim doc As MSHTML.IHTMLDocument2
    Dim lMsg As Long
    Dim lRet As Long
    Dim hr As Long
    Dim IID_IHTMLDocument As UUID

    With IID_IHTMLDocument
        .Data1 = &H626FC520
        .Data2 = &HA41E
        .Data3 = &H11CF
        .Data4(0) = &HA7
        .Data4(1) = &H31
        .Data4(2) = &H0
        .Data4(3) = &HA0
        .Data4(4) = &HC9
        .Data4(5) = &H8
        .Data4(6) = &H26
        .Data4(7) = &H37
    End With
    lMsg = RegisterWindowMessage("WM_HTML_GETOBJECT")
    If lMsg <> 0 Then
        SendMessageTimeout hwnd, lMsg, 0, 0, &H2, 1000, lRet
        If lRet <> 0 Then
            If ObjectFromLresult(lRet, IID_IHTMLDocument, 0, doc) = 0 Then
                Set GetHTMLDocument = doc
            End If
        End If
    End If
End Function

サンプル

Public Sub test()
    Dim b As MSHTML.IHTMLDocument3
    Dim w As Object

    Set b = IEAuto.FindBrowser("Google")
    If b Is Nothing Then
        Debug.Print "見つからない"
        Exit Sub
    End If

    Dim r As Variant
    Dim elems As MSHTML.IHTMLElementCollection
    Dim elem As MSHTML.IHTMLElement
    Set elems = b.getElementsByName("btnK")
    Debug.Print elems.Item(0).getAttribute("value")

    ' 以下のような感じでJavaScriptにアクセスできるがEdgeの場合はアクセス違反になる
    ' 管理者権限も無駄
    Dim testId As Variant
    testId = Timer
    b.parentWindow.execScript ("function x() { result = 5+5+4; console.log('TEST'); var d = document.createElement('div'); d.id = 'test_elem" & testId & "'; d.innerHTML  = result; document.getElementsByTagName('body').item(0).appendChild(d); }; x();")

    Set elem = b.getElementById("test_elem" & testId)
    Debug.Print elem.innerHTML

End Sub

解説

IEのウィンドウハンドルからMSHTML.IHTMLDocumentを取得してあとはよくあるIEの自動操作をしています。
IHTMLDocumentに変換できるウィンドウのクラス名は「Internet Explorer_Server」です。
IE11の場合は「IEFrame」クラスの子ウィンドウになっています。
Edgeの場合は「TabWindowClass」クラスの子ウィンドウになっています。

プログラムとしては「IEAuto.FindBrowser("Google")」でタイトルにGoogleを含むものを検索してIHTMLDoucmentを取得します。
あとは、exeScriptでJavaScriptをたたくことが可能ですが、関数の仕様として戻り値を取得することはできません。

そのため、JavaScriptから値をVBAに返す場合は、テスト用の要素に書き込むといいでしょう。

なお、すくなくとも当方の環境だとexeScriptはEdgeだとアクセス違反になりました。

参考

Cant create HTML document from Hwnd using C#
https://stackoverflow.com/questions/20873885/cant-create-html-document-from-hwnd-using-c-sharp

【2017年1月版】Microsoft Edgeを操作するVBAマクロ(DOM編)
https://www.ka-net.org/blog/?p=7921

はじめに:

・GTMコンバージョンリンカー
・gtagでset linker
いずれかの方法で、クロスドメインの設定が必要になります。

※Googleアナリティクスの_gacというクッキーも使える。この投稿では一旦省略します。

① Googleタグマネージャーで設定する場合

・ドメイン間のリンクの有効可にチェック
・カンマつなぎで、複数ドメインを登録する
・ドメインまたぎの瞬間がフォームの送信(カートに入れた瞬間にドメインが変わる場合など)の時には、「装飾フォーム: true」にする必要あり
　(これが結構罠。デフォルトtrueではダメなんか...)
・トリガーはページビュー: All pages

② gtagでset linkerの設定する場合

・以下のコードでドメイン間のリンクを有効にしてあげます。
・が、かならず gtag('js', new Date());よりも早く呼ぶ必要があります。
(テストしましたが、クッキー引き継げなかったです。これも罠。)

...
gtag('set', 'linker', {
  'domains': ['exampleA.com', 'exampleB.com'],
  'decorate_forms': true // trueにしておきましょう。
});
gtag('js', new Date());
...

よって、最終的な形はこうなります。

<script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}  
  gtag('set', 'linker', {
    'domains': ['exampleA.com', 'exampleB.com'],
    'decorate_forms': true
  });   
  gtag('js', new Date());
  gtag('config', 'AW-XXXXXXXX');
</script>

③ 本当にクロスドメインでクッキーを引き継げているのか？の検証

Google広告にて、コンバージョン計測に活用できるファーストパーティークッキーは2つです。
・_gcl_aw (Google広告のクッキー)
・_gac  (※アナリティクスのクッキーです。アカウントのリンクが必要)

よって、「自動タグ設定にて付与された_gcl_aw / _gacを、ドメインAからドメインBに引き継げているかどうか」の検証が必要ですね。

④ 検証方法

手順1. gclid付与(広告クリックの状態を疑似的に再現)

「?gclid=xxxxx」とドメインAにてURLに付与

手順2. クッキー確認

デベロッパーツールにて、「_gcl_aw」というクッキーが生成されたか確認
※_gcl_aw=xxxxx(gclidで付与した値) という形式のクッキーです

手順3. ドメインを移動して、URLのクエリを確認

ユーザーと同じ導線でドメインBへ。URLに「?_gl=1*xxxxxx*_gcl_aw*xxxxx」というクエリが付くのを確認してください！(この中にクッキーの情報が入っているイメージ)

手順4. ドメインBでクッキーを確認

ドメインBにて、手順2でチェックしたクッキーと同じものが引き継がれていれば、ドメインBへのファーストパーティークッキーの引き継ぎ完了です。

プラグイン SUGOI!Cookies: gclid tester for Google Ads

SUGOI!Cookies: gclid tester for Google Ads

・手動での検証方法が面倒なので、プラグインを作ってみました。 気になる方は試してみてください。
・あくまで個人の趣味で開発してますが、バグがあれば直すので一報いただけると嬉しいです。随時改善中です。

⑤ 補足: コンバージョンデータ送信時のHTTP通信を見てみる 

　- もし本当の本当に「コンバージョン計測時にファーストパーティークッキーのデータを送信できているのかどうか」気になるのであれば、コンバージョン計測時のHTTPリクエストを確認してみましょう。

手順1　コンバージョンのHTTPリクエストを探す

デベロッパーツール=> Network
=> www.googleadservices.com/pagead/conversion/ で検索

手順2　ファーストパーティークッキーが送られているか確認

この通信にて、「_gcl_aw / _gac」が送信されていれば安心です。

まとめ

・Google広告のコンバージョン計測で使えるファーストパーティーは「_gcl_aw」「_gac」の2つ。今回は「_gcl_aw」をクロスドメインで引き継ぐための話でした。

・クッキーを渡す側(ドメインA)、もらう側(ドメインB)のいずれもで、
　「GTM」 OR 「gtag」でのクロスドメイン設定の実装が必要になります。

以上です！

参考資料:
コンバージョン トラッキングの実装を検証する

Google アナリティクスによるウェブサイトでの Cookie の使用

Google 広告の自動タグ設定が正常に機能するか確認する

ドメインをまたぐカスタマー ジャーニーを測定する

はじめに:

やりたいこと

・Safariブラウザでもコンバージョン計測がしたい。
　日本のiPhone普及率を考えると、ここは無視できないところ。

そのために

・ファーストパーティークッキー(後述しますが、_gcl_aw/_gac)を生成する。
・広告をクリックした直後のランディングページと、コンバージョン計測したいページのドメインが異なる場合(クロスドメイン)、特別な方法でクッキーを渡してあげる必要がある。

しかし

・Googleの資料を見ても、クロスドメイントラッキングの話がなかなかない。
(これ解決しないと、ITP対応できないでしょうに！)
・Google 広告のコンバージョンをトラッキングする方法
こんなん読んでも、ファーストパーティー、どころか、クッキーの「ク」の字もない。

そこで、

参考資料:
　・コンバージョン トラッキングの実装を検証する
　・Google アナリティクスによるウェブサイトでの Cookie の使用
　・Google 広告の自動タグ設定が正常に機能するか確認する
　・ドメインをまたぐカスタマー ジャーニーを測定する

ここらの資料をすべてまとめてみました。

ドメインをまたいでクッキーの引継ぎをするために

・GTMコンバージョンリンカー
・gtagでset linker
いずれかの方法で、クロスドメインの設定が必要になります。

① Googleタグマネージャーで設定する場合

・ドメイン間のリンクの有効可にチェック
・カンマつなぎで、複数ドメインを登録する
・ドメインまたぎの瞬間がフォームの送信(カートに入れた瞬間にドメインが変わる場合など)の時には、「装飾フォーム: true」にする必要あり
　(これが結構罠。デフォルトtrueではダメなんか...)
・トリガーはページビュー: All pages

② gtagでset linkerの設定する場合

・以下のコードでドメイン間のリンクを有効にしてあげます。
・が、かならず gtag('js', new Date());よりも早く呼ぶ必要があります。
(テストしましたが、クッキー引き継げなかったです。これも罠。)

...
gtag('set', 'linker', {
  'domains': ['exampleA.com', 'exampleB.com'],
  'decorate_forms': true // trueにしておきましょう。
});
gtag('js', new Date());
...

よって、最終的な形はこうなります。

<script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}  
  gtag('set', 'linker', {
    'domains': ['exampleA.com', 'exampleB.com'],
    'decorate_forms': true
  });   
  gtag('js', new Date());
  gtag('config', 'AW-XXXXXXXX');
</script>

③ 本当にクロスドメインでクッキーを引き継げているのか？の検証

Google広告にて、コンバージョン計測に活用できるファーストパーティークッキーは2つです。
・_gcl_aw (Google広告のクッキー)
・_gac  (※アナリティクスのクッキーです。アカウントのリンクが必要)

よって、「自動タグ設定にて付与された_gcl_aw / _gacを、ドメインAからドメインBに引き継げているかどうか」の検証が必要ですね。

④ 検証方法

手順1. gclid付与(広告クリックの状態を疑似的に再現)

「?gclid=xxxxx」とドメインAにてURLに付与

手順2. クッキー確認

デベロッパーツールにて、「_gcl_aw」というクッキーが生成されたか確認
※_gcl_aw=xxxxx(gclidで付与した値) という形式のクッキーです

手順3. ドメインを移動して、URLのクエリを確認

ユーザーと同じ導線でドメインBへ。URLに「?_gl=1*xxxxxx*_gcl_aw*xxxxx」というクエリが付くのを確認してください！(この中にクッキーの情報が入っているイメージ)

手順4. ドメインBでクッキーを確認

ドメインBにて、手順2でチェックしたクッキーと同じものが引き継がれていれば、ドメインBへのファーストパーティークッキーの引き継ぎ完了です。

プラグイン SUGOI!Cookies: gclid tester for Google Ads

SUGOI!Cookies: gclid tester for Google Ads

・手動での検証方法が面倒なので、プラグインを作ってみました。 気になる方は試してみてください。
・あくまで個人の趣味で開発してますが、バグがあれば直すので一報いただけると嬉しいです。随時改善中です。

⑤ 補足: コンバージョンデータ送信時のHTTP通信を見てみる 

　- もし本当の本当に「コンバージョン計測時にファーストパーティークッキーのデータを送信できているのかどうか」気になるのであれば、コンバージョン計測時のHTTPリクエストを確認してみましょう。

手順1　コンバージョンのHTTPリクエストを探す

デベロッパーツール=> Network
=> www.googleadservices.com/pagead/conversion/ で検索

手順2　ファーストパーティークッキーが送られているか確認

この通信にて、「_gcl_aw / _gac」が送信されていれば安心です。

※Googleアナリティクスのクロスドメイン設定ができている、かつ、アカウントのリンクができている場合、_gacというクッキーも活用できます。

まとめ

・Google広告のコンバージョン計測で使えるファーストパーティーは「_gcl_aw」「_gac」の2つ。今回は「_gcl_aw」をクロスドメインで引き継ぐための話でした。

・クッキーを渡す側(ドメインA)、もらう側(ドメインB)のいずれもで、
　「GTM」 OR 「gtag」でのクロスドメイン設定の実装が必要になります。

以上です！

デモ

↓2019/03/02

↓1998/11/11

特徴

• archive.is, archive.org, gyo.tc, googleのキャッシュ、と計四か所から魚拓のURLを探します!
• vue.js製（やってみたかった）

なぜ作ったか

ハテブで魚拓コメがトップだったりして、需要を感じた。
後普通に自分が使いたかった。
そして、Qiitaユーザーの皆さんも必要性を感じてくださっている事と思います^^。

どう作ったか

Chorome拡張はHTML+CSS+javascriptの基本セットで作れます。
ファイル構成は以下のようになりました。

• manifest.json（どの拡張でも必須）
• popup.js
• popup.html
• popup.css
• jquery
• vue.js
• icons(フォルダ。配下にicon16.png, icon48.png, icon128.png)

詳しく見ていきましょう。
manifest.jsonは、Chrome拡張のまとめ役みたいな感じ。

manifest.json

{
    "name": "FindGyotaku in Console",
    "version": "0.0.1",
    "manifest_version": 2,//2で固定する
    "permissions": ["tabs", "http://*/", "http://*/"],//tabsはアクティブなタブのURLを取得するため、http://*/,https://*/はChrome拡張からすべてのサイトへのアクセスを許可するために必要
    "description": "Show all Gyotaku",
    "icons": {
        "16": "icons/icon16.png",
        "48": "icons/icon48.png",
        "128": "icons/icon16.png"
    },
    "browser_action": {
        "default_popup": "popup.html"//ここでpopupのhtmlを指定
    }
}

そして、popup.jsが今回の大事ポイントです。

popup.js

let vue;
//https://gyo.tc/から
function findGyotakuByUrl(url) {
    return new Promise(resolve => {
        console.log("findGyotakuByUrl Started");
        $.get("https://gyo.tc/" + url, null,
            function (data) {
                console.log(data);
                let gyotakuList_ = new DOMParser()
                    .parseFromString(data, "text/html")
                    .querySelectorAll("[id^=fish]");
                resolve(gyotakuList_)
            },
            "html"
        );
    })
}
//https://archive.is/から
function findInternetArchiveByUrl(url) {
    return new Promise(resolve => {
        $.get(`https://archive.is/${url}`, function (data) {
            let rowsList =
                new DOMParser()
                    .parseFromString(data, "text/html")
                    .querySelectorAll("[id^=row]");
            let archivesList = [];
            rowsList.forEach(row => {
                archivesList.push(
                    Array.from(
                        row.querySelectorAll("[style^=text\\-decoration\\:none]")
                    )
                )
            });
            resolve(archivesList.flat());
            console.log(`flatten archivesList is ${archivesList.flat()}`);
        })
    })
}
//googleのwebcacheから
function findGoogleCache(url) {
    return new Promise(resolve => {
        $.get(`http://webcache.googleusercontent.com/search?q=cache:${url}`, function () {
            resolve(`http://webcache.googleusercontent.com/search?q=cache:${url}`);
        })
    })
}
//http://web.archive.orgから
function findWaybackMachineLatest(url) {
    return new Promise(resolve => {
        //limit=-1で最新
        $.get(`http://web.archive.org/cdx/search/cdx?limit=-1&fl=timestamp&url=${url}`, function (timestamp) {
            resolve(`https://web.archive.org/web/${timestamp}/${url}`);
            console.log(`waybackMachine response(latest) is ${timestamp}`);
        })
    })
}
//http://web.archive.orgから
function findWaybackMachineOldest(url) {
    return new Promise(resolve => {
        //limit=1で最古
        $.get(`http://web.archive.org/cdx/search/cdx?limit=1&fl=timestamp&url=${url}`, function (timestamp) {
            resolve(`https://web.archive.org/web/${timestamp}/${url}`);
            console.log(`waybackMachine response(latest) is ${timestamp}`);
        })
    })
}

console.log("popup.jsLoaded");

chrome.tabs.query({
    active: true,
    currentWindow: true
}, function (tabsArray) {
    console.log(`currentUrl is ${tabsArray[0].url}`);

    findGyotakuByUrl(tabsArray[0].url).then((gyotakuList) => {
        console.log(gyotakuList);
        gyotakuList.forEach(element => {
            vue.items.push(element)
        });
        vue.isLoadingGyotaku = false
    }).catch((err) => {
        console.log(err);
        vue.isLoadingGyotaku = false
    });
    findInternetArchiveByUrl(tabsArray[0].url).then((archivesList) => {
        console.log(archivesList);
        archivesList.forEach(element => {
            vue.items.push(element)
        });
        vue.isLoadingArchives = false
    }).catch((err) => {
        console.log(err);
        vue.isLoadingArchives = false
    });
    findGoogleCache(tabsArray[0].url).then((googleCacheUrl) => {
        console.log({
            href: googleCacheUrl
        });
        vue.items.push({
            href: googleCacheUrl
        });
        vue.isLoadingGoogleCache = false
    }).catch((err) => {
        console.log(err)
    });
    findWaybackMachineLatest(tabsArray[0].url).then((waybackMachineUrl) => {
        console.log({
            href: waybackMachineUrl
        });
        vue.items.push({
            href: waybackMachineUrl
        });
        vue.isLoadingWaybackMachine = false
    }).catch((err) => {
        console.log(err)
    });
    findWaybackMachineOldest(tabsArray[0].url).then((waybackMachineUrl) => {
        console.log({
            href: waybackMachineUrl
        });
        vue.items.push({
            href: waybackMachineUrl
        });
        vue.isLoadingWaybackMachine = false

    }).catch((err) => {
        console.log(err)
    });

});

$(function () {
    vue = new Vue({
        el: '#example-1',
        data: {
            items: [],
            isLoadingGyotaku: true,
            isLoadingArchives: true,
            isLoadingGoogleCache: true,
            isLoadingWaybackMachine: true,
        }
    })

});

分割して解説します。

function findGyotakuByUrl(url) {
    return new Promise(resolve => {
        $.get("https://gyo.tc/" + url, null,
            function (
                let gyotakuList_ = new DOMParser()
                    .parseFromString(data, "text/html")
                    .querySelectorAll("[id^=fish]");
                resolve(gyotakuList_)
            },
            "html"
        );
    })
}

↑要するにスクレイピングですね。javascriptではquerySelectorが便利です。
https://gyo.tc/ 以下にURLを投げると魚拓一覧が返るので、開発者ツールから頑張って解析しました。

function findInternetArchiveByUrl(url) {
    return new Promise(resolve => {
        $.get(`https://archive.is/${url}`, function (data) {
            let rowsList =
                new DOMParser()
                    .parseFromString(data, "text/html")
                    .querySelectorAll("[id^=row]");
            let archivesList = [];
            rowsList.forEach(row => {
                archivesList.push(
                    Array.from(
                        row.querySelectorAll("[style^=text\\-decoration\\:none]")
                    )
                )
            });
            resolve(archivesList.flat());
        })
    })
}

↑こちらもhttps://archive.is/ 以下にURLを投げると魚拓一覧が返るので、こちらも開発者ツールから頑張って解析しました。
Array.flat()はMDNで分かるように実験的なヤツで、配列を好きな次元に均せる関数です。デフォルトで一次元なのでそのまま使用しました。

function findGoogleCache(url) {
    return new Promise(resolve => {
        $.get(`http://webcache.googleusercontent.com/search?q=cache:${url}`, function () {
            resolve(`http://webcache.googleusercontent.com/search?q=cache:${url}`);
        })
    })
}

↑言うことなし。思ったより簡単。

function findWaybackMachineLatest(url) {
    return new Promise(resolve => {
        //limit=-1で最新
        $.get(`http://web.archive.org/cdx/search/cdx?limit=-1&fl=timestamp&url=${url}`, function (timestamp) {
            resolve(`https://web.archive.org/web/${timestamp}/${url}`);
        })
    })
}

function findWaybackMachineOldest(url) {
    return new Promise(resolve => {
        //limit=1で最古
        $.get(`http://web.archive.org/cdx/search/cdx?limit=1&fl=timestamp&url=${url}`, function (timestamp) {
            resolve(`https://web.archive.org/web/${timestamp}/${url}`);
            console.log(`waybackMachine response(latest) is ${timestamp}`);
        })
    })
}

↑apiが有って助かりました。
WaybackMachineのアーカイブは膨大なので最古＆最新のみ取得しています。
limit=1で最古、limit=-1で最新を指定、fl=timestampでレスポンスをtimestampのみに限定します。
WaybackMachineはtimestampとURLを指定すると（珍しく）個別ページのURLが分かるので、timestampだけで十分なのです。

$(function () {
    vue = new Vue({
        el: '#example-1',
        data: {
            items: [],//以下デフォルト値を指定しています
            isLoadingGyotaku: true,
            isLoadingArchives: true,
            isLoadingGoogleCache: true,
            isLoadingWaybackMachine: true,
        }
    })

});

index.html

<p v-if="isLoadingGyotaku">
    魚拓から読み込んでいます
</p>

↑出ましたvue.js！読み込み中のメッセージを出しています。
vue.jsを使うと、HTMLとjs間でバインディングができます。
例えば、

HTMLのv-if属性にisLoadingGyotakuを指定
↓
js側でvueインスタンス作成(vueのdata属性に、isLoadinGyotakuをメンバにしたオブジェクトを付けたもの)
↓
vue.isLoadingGyotakuにアクセスできるように&
vue.isLoadingGyotakuがv-if="isLoadingGyotaku"とバインドされる

って感じ。
つまり、isLoadingGyotaku=trueならpタグが見えて、falseなら見えなくなる！
これは素晴らしいですね。本当に素晴らしい。
ほかにもいろいろな属性が有ります。だいたいv-が付く。

<ul>
    <li v-for="item in items">
        <a href="{{ item.href }}" target='_newtab'>
            {{ item.href }}
        </a>
    </li>
</ul>

↑v-forとか。見つかったURLを表示するために使っています。
{{}}はテンプレートリテラルみたいに使えます。
↓ラスト

chrome.tabs.query({
    active: true,
    currentWindow: true
}, function (tabsArray) {
    console.log(`currentUrl is ${tabsArray[0].url}`);

    findGyotakuByUrl(tabsArray[0].url).then((gyotakuList) => {
        console.log(gyotakuList);
        gyotakuList.forEach(element => {
            vue.items.push(element)

        });
        vue.isLoadingGyotaku = false
    }).catch((err) => {
        console.log(err);
        vue.isLoadingGyotaku = false
    });
    findInternetArchiveByUrl(tabsArray[0].url).then((archivesList) => {
        console.log(archivesList);
        archivesList.forEach(element => {
            vue.items.push(element)
        });
        vue.isLoadingArchives = false
    }).catch((err) => {
        console.log(err);
        vue.isLoadingArchives = false
    });
    findGoogleCache(tabsArray[0].url).then((googleCacheUrl) => {
        console.log({
            href: googleCacheUrl
        });
        vue.items.push({
            href: googleCacheUrl
        });
        vue.isLoadingGoogleCache = false
    }).catch((err) => {
        console.log(err);
        vue.isLoadingGoogleCache = false
    });
    findWaybackMachineLatest(tabsArray[0].url).then((waybackMachineUrl) => {
        console.log({
            href: waybackMachineUrl
        });
        vue.items.push({
            href: waybackMachineUrl
        });
        vue.isLoadingWaybackMachine = false
    }).catch((err) => {
        console.log(err)
        vue.isLoadingWaybackMachine = false
    });
    findWaybackMachineOldest(tabsArray[0].url).then((waybackMachineUrl) => {
        console.log({
            href: waybackMachineUrl
        });
        vue.items.push({
            href: waybackMachineUrl
        });
        vue.isLoadingWaybackMachine = false

    }).catch((err) => {
        console.log(err)
        vue.isLoadingWaybackMachine = false
    });

});

↑async/awaitで見やすくなるのは分かってるんだけどね……面倒なのでそのまま。
chrome.tabs.queryで今見てるタブのURLを取得後、非同期×5を回しています。
chrome.系はChrome拡張の時しか使えないapiで、ほかにも色々便利です。

はまったポイント

最初

let fuga = true
vue = new Vue({
        el: '#example-1',
        data: {
            isLoadingGyotaku: fuga,
        }
    })
fuga = false//バインドされてるはずなのに動かない!!!

って事が有って大変でしたね。本当は

vue = new Vue({
        el: '#example-1',
        data: {
            isLoadingGyotaku: true,
        }
    })
vue.isLoadingGyotaku = false//バインドされてて動く!!!

で良かったっていう。公式ドキュメントをちゃんと読みましょう。

後、動作確認にevent pagesを使ってしまって、popupのみで動くapiを動かせなかったりとか……
popupページで検証する方法を知らなかったとか……（左クリックでポップアップされたのを右クリ）

計何時間使ったでしょうかね。今はどうでも良いけど。

最後に

2020/04に大学生になる(浪人しなければ!)ので、良かったらインターンに誘ってください。
github:https://github.com/negitorogithub
gmail:bakeratta35@gmail.com

お読み頂きありがとうございました。　～～旦⊂(･∀･ )

react-templates

• wixが提供しているライブラリ(http://wix.github.io/react-templates/)
• reactのテンプレート箇所を".rt" 拡張子ファイルとして切り分け、コンパイルしテンプレートとして出力する。
• HTML感覚で書ける。
• お試し: http://wix.github.io/react-templates/fiddle.html

install

https://www.npmjs.com/package/react-templates

npm i -g react-templates

gulp: https://www.npmjs.com/package/gulp-react-templates

npm i gulp-react-templates

gulp task code

サンプル

const gulp = require('gulp');
const rt = require('gulp-react-templates');
const rename = require("gulp-rename"); // 出力ファイル名を変更するため

const rt_path = './src/rt/*.rt';

gulp.task('rt', () => {
  return gulp.src(rt_path)
    .pipe(rt({ modules: 'es6' })) // 吐き出す際の出力フォーマットを選択
    .pipe(rename(name_info => {
      const new_basename = name_info.basename.replace('.rt', ''); // '.rt'を''に置換
      name_info.basename = new_basename;
    }))
    .pipe(gulp.dest('./src/templates'));
});

gulp.task("watch", () => {
  return gulp.watch(rt_path, gulp.series(['rt']));
});

Command line Interface

source: https://github.com/wix/react-templates/blob/gh-pages/docs/cli.md

先ほどの出力する際のoptionの例を以下に記載

// temp.rt
<h2>Hello React</h2>

// es6
// rt [file.rt|glob]* -m es6
import * as React from 'react';
import * as _ from 'lodash';
export default function () {
    return React.createElement('h2', {}, 'Hello React');
}

// commonJS
// rt [file.rt|glob]* -m commonJS
'use strict';
var React = require('react');
var _ = require('lodash');
module.exports = function () {
    return React.createElement('h2', {}, 'Hello React');
};

// none (default)
// rt [file.rt|glob]*
var tempRT = function () {
    return React.createElement('h2', {}, 'Hello React');
};

reactに組み込む

▼ こんなrtファイルを書いて

// temp.rt
<h2>Hello react-templates</h2>

▼ コンパイル(es6)してこんな感じにして

// temp.js
import * as React from 'react';
import * as _ from 'lodash';
export default function () {
    return React.createElement('h2', {}, 'Hello react-templates');
}

▼ importしてrenderのなかでreturnする

// App.js
import React, { Component } from 'react';
import Temp from './templates/temp.js';

class App extends Component {
  render() {
    return Temp();
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

ブラウザに Hello react-templates が出力されればok

参考

• https://github.com/wix/react-templates#template-directives-and-syntax
• https://qiita.com/ushisantoasobu/items/2746065be3f04c81bda4

Ruby の each_slice、PHP の array_chunk みたいなやつです。
例えば [1, 2, 3, 4, 5, 6, 7] を3個ずつに分けて [[1, 2, 3], [4, 5, 6], [7]] を作りたい場合に使えます。

TypeScript

function chunk<T>(arr: T[], size: number) {
    return arr.reduce(
        (newarr, _, i) => (i % size === 0 ? [...newarr, arr.slice(i, i + size)] : newarr),
        [] as T[][]
    )
}

chunk([1, 2, 3, 4, 5, 6, 7], 3) // -> [[1, 2, 3], [4, 5, 6], [7]]

JavaScript

function chunk(arr, size) {
    return arr.reduce(
        (newarr, _, i) => (i % size === 0 ? [...newarr, arr.slice(i, i + size)] : newarr),
        []
    )
}

理由

誰でも知識は０からスタート

方法

1. 調べる
2. 作る
3. 発信する
4. 1~3を継続する

※だいたいの職業において、上記が通じると思います

デモ(動画)

やりたいこと

上記のGIF通り、
カテゴリーが選択されたと同時に、親カテゴリーに紐づく子カテゴリーが出てくるようにしたい。
入れ子構造については以下を参照
【追記予定】awesome_nested_setを使った入れ子構造のDB設計

　実装概要

jQueryのajaxメソッドを使って、カテゴリーが選択されたら子カテゴリーがappendされるようにした。

　コード

routing

route.rb

Rails.application.routes.draw do
  root 'products#new'
  resources :products,  only: [:create] do
<!-- 今回はsearchアクションをajaxメソッドで叩きます-->
    collection do
      get 'search'
    end
  end
end

view

new.html.haml

= form_for @product do |f|
  = f.label :name
  = f.text_field :name, placeholder: "商品名を入力"

  #cat
    = f.select :category_id, Category.roots.map {|i| ["#{i.name}", i.id]}, { selected: @product.category_id, include_blank: true }, {id: "l_category"}

js

category.js

$(document).on('turbolinks:load', function() {

  // Mカテゴリーのselectを追加するHTML
  var cat_seach = $("#cat");

  function appendMselect() {
    var html =  
    `<select name="product[category_id]" id="m_category">
        <option value>---</option>
    </select>`
    cat_seach.append(html)
  }

  // Sカテゴリーのselectを追加するHTML
  function appendSselect() {
    var html =  
    `<select name="product[category_id]" id="s_category">
        <option value>---</option>
    </select>`
    cat_seach.append(html)
  }

  // Mカテゴリーのoptionを追加するHTML
  function appendMcat(m_cat) {
    $("#m_category").append(
      $("<option>")
        .val($(m_cat).attr('id'))
        .text($(m_cat).attr('name'))
    )
  }

  // Sカテゴリーのoptionを追加するHTML
  function appendScat(s_cat) {
    $("#s_category").append(
      $("<option>")
        .val($(s_cat).attr('id'))
        .text($(s_cat).attr('name'))
    )
  }

  // Lカテゴリーが選択された時のアクション
  $("#l_category").on('change', function() {
    l_cat = $(this).val()
    $("#m_category").remove()
    $("#s_category").remove()

    // ajaxでリクエストを送信
      $.ajax({
        type: "GET",
        url: "/products/search",
        data: {l_cat: l_cat},
        dataType: 'json'
      })
      // doneメソッドでappendする
      .done(function(m_cat) {
        appendMselect()
        m_cat.forEach(function(m_cat) {
          appendMcat(m_cat)
        })
      })
    })

// Mカテゴリーが選択された時のアクション
  $(document).on('change', "#m_category", function() {
    m_cat = $(this).val()
    $("#s_category").remove()

    $.ajax({
      type: "GET",
      url: "/products/search",
      data: {m_cat: m_cat},
      dataType: 'json'
    })
    .done(function(s_cat) {
      appendSselect()
      s_cat.forEach(function(s_cat) {
        appendScat(s_cat)
      })
    })
  })
})

controller

categories_controller.rb

<!--関係ないアクションは省略しています-->
  def search
    if params[:l_cat]
      @m_cat = Category.find(params[:l_cat]).children
    else
      @s_cat = Category.find(params[:m_cat]).children
    end
    respond_to do |format|
      format.html
      format.json
    end
  end

jbuilder

search.json.jbuilder

json.array! @m_cat do |m_cat|
  json.id   m_cat.id
  json.name m_cat.name
end

json.array! @s_cat do |s_cat|
  json.id   s_cat.id
  json.name s_cat.name
end

勉強になったところ

optionタグの追加の方法

optionの追加

$("#m_category").append(
      $("<option>")
        .val($(m_cat).attr('id'))
        .text($(m_cat).attr('name'))
    )
  }

こういう風に書くことで、selectタグのoptionが追加できることを知りました。
始めはselectを追加すればいいじゃん！と思ってましたが、配列形式で渡ってくるため、配列の中身分selectが増えてしまい、上手な方法が浮かばなかったので、こちらの方法にしました。

参考記事
・jQuery でセレクトボックスのプルダウン項目（option 要素）を追加／削除する方法
https://webllica.com/jquery-select-option-add-del/

まとめ

なんとか狙った機能は実装できましたが、MカテゴリーとSカテゴリーで二回書いているようなコードになっているので、リファクタリングしたいけどどうしていいのかわからん・・・

車輪の再発明です

CSV の仕様

RFC 4180

改行は CRLF でなければならないそうです。

実装例

function parseCSV(d) {
    let t = d.replace(/\r\n$/u, '')
    const r = [[]]
    let c = 0
    let l, m, n
    while ([l, m, n] = /^(|[^",](?:[^,\r]|\r[^,\n])*\r?|"(?:[^"]|"")*")(,|\r\n|$)/u.exec(t)) {
        if ('"' === m[0] && '"' === m[m.length - 1]) m = m.slice(1, -1)
        r[c].push(m.replace(/""/gu, '"'))
        if (!n) break
        if (',' !== n) r[++c] = []
        t = t.substring(l.length)
    }
    return r
}

実装例2

\n や \r も改行とみなす方が便利かと思います。

function parseCSV(d) {
    let t = d.replace(/(\r?\n|\r)$/u, '')
    const r = [[]]
    let c = 0
    let l, m, n
    while ([l, m, n] = /^(|[^",][^,\r\n]*|"(?:[^"]|"")*")(,|\r?\n|\r|$)/u.exec(t)) {
        if ('"' === m[0] && '"' === m[m.length - 1]) m = m.slice(1, -1)
        r[c].push(m.replace(/""/gu, '"'))
        if (!n) break
        if (',' !== n) r[++c] = []
        t = t.substring(l.length)
    }
    return r
}

jQueryの超初歩を備忘録としてメモしておきます。
言語を複数使っていると、書き方がこんがらがってしまったりするので、
『どう書くんだったかな』となった時用です〜(^o^)

基本的な書き方

$('セレクタ'・ 'id' ・ 'class').メソッド;
htmlで使用しているセレクタ等を指定して、そのセレクタ等にメソッドを実行する。
以下のコードは、h1を徐々に隠せ！というコード。

$(function() {
  $('h1').fadeOut();
});

ちなみに書き出しのfunctionですが、HTMLの読み込みが完了してからjQueryの操作を開始するようにという指定です。

$(function() {
  //
});

下のような書き方もできますが、長いのでどちらかというと前者の方が使われますね。

$(document).ready(function(){
  //
});

イベントのタイミングを指定する

$('セレクタ'・'id'・'class').イベント(function(){ hogehoge });
htmlで使用しているセレクタ等を指定して、そのセレクタ等に実行するメソッドを、
発火タイミングを指定して設定する。
以下のコードは、id=hide-text要素がクリックされたら、id=textを下から上にアニメーションで表示させて！というコード。

$(function(){
  $('#hide-text').click(function(){
    $('#text').slideUp();
  });
});

自身を指定する

$(this)
発火イベントの時に自身を指定すると、イベントが起こった要素を取得することができる。
以下のコードは、クリックされたリストのcssを変更して！というコード。

$(function(){
  $('li').click(function(){
    $(this).css('color', 'red');
  });
});

変数を宣言する

同じjQueryオブジェクト（これまでで$()で宣言したもの）を複数回使う時は、変数にしましょう！
処理が高速化されます。
いちいち$()と宣言していると、そのオブジェクトを都度読みにいきますが、変数にしていればそのオブジェクトを読みにいかず、変数に格納されているデータを使うからです。
変数宣言にはvarを使います。
以下のコードは \$('div') を\$divに格納しています。
jQueryオブジェクトを格納する時は、わかりやすいように先頭に$をつける慣習があります。

var $div = $('div');

メソッドチェーン

同じfunction内でメソッドを何回も使いたい場合、メソッドチェーンを使えばスマートに書くことができます。
例えば以下のようなコードは、cssとfadeOutを同じthisに対して使っている場合です。

$(function(){
  $('li').click(function(){
    $(this).css('color', 'red');
    $(this).fadeOut();
  });
});

これは以下のようにメソッドチェーンを使って書くことができます。

$(function(){
  $('li').click(function(){
    $(this).css('color', 'red').fadeOut();
  });
});

冗長ではなく綺麗になっていますね！

下階層の要素を取得

find()とchildren()がある。
find()は、要素の下階層にある指定した要素を取得する。
children()は、要素の"1階層下"の指定した要素を取得する。

<div is="wrapper">
  <a href="#">リンク1</a>
  <p>
    <a href="#">リンク2</a>
  </p>
</div>

$(function(){
  $('#wrapper').find('a')
});
//リンク1とリンク2が取得できる

$(function(){
  $('#wrapper').find('a')
});
//リンク1だけ取得できる

初級編は以上です！
中級編もまとめています(^^)/

はじめに

Puppeteerを使ってみたら、とても簡単にブラウザ操作が自動化できたことに感動しました。
セットアップの方法とよく使うPuppeteerのAPIについてまとめましたので、これから使ってみようかなと思っている方の参考になれば嬉しいです。

Puppeteerとは

Puppeteer

読み方は「ぱぺてぃあ」。日本語だと人形使いという意味です。
Chromeブラウザを操作できるNodeのライブラリで、Chrome DevToolsのチームが開発を行っています。

Puppetterの特徴

ブラウザ操作ができるツールとしては、Selenium Webdriverが有名です。
Selenium Webdriverとの違いは、Puppeteerはヘッドレスブラウザを使うことができるので、高速に動作させることができます。
また、PuppeteerはChromeのブラウザしか操作ができません。

使ってみる

セットアップ

Node.jsが動く環境が必要です。

$ npm i puppeteer

サクッと試したいだけならPuppeteerがWebツールを提供してくれているので、そちらを使うと便利です。

Try Puppeteer

テストを書く

簡単なテストシナリオを書いてみます。
下記はGoogleのトップページに遷移して、画面のスクリーンショットを撮るテストシナリオです。

test.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com');
  await page.screenshot({path: 'screenshot.png'});

  await browser.close();
})();

ベースはこんな感じです。
Browserのインスタンスを作成した後にPuppeteerのAPIを使って、ページ内のリンクをクリックして別ページに遷移したり、フォームを操作したり、ブラウザを操作していきます。

テストを実行する

下記コマンドを実行します。

$ node test.js

よく使うAPI

指定したURLにアクセスする

page.goto('https://www.google.com/');

クリック

page.click('input[type="submit"]');

クリックする要素の指定には、CSSセレクタを使用します。指定したセレクタが存在しない場合は、エラーになります。

$ node test.js
UnhandledPromiseRejectionWarning: Error: Node is either not visible or not an HTMLElement at ElementHandle._clickablePoint

フォーム操作

<form method="post" action="/update">
  <label for="name">名前</label>
  <input type="text" name="name" id="name">
  <label for="email">メールアドレス</label>
  <input type="text" name="email" id="email">
  <label for="gender">性別</label>
  <select id="gender" name="gender">
    <option value="m">男性</option>
    <option value="f">女性</option>
  </select>
  <label for="inquire">問い合わせの内容</label>
  <input type="radio" name="inquire" value="1" id="inquire_1"> 商品に関する問い合わせ
  <input type="radio" name="inquire" value="2" id="inquire_2"> その他
  <input type="submit" value="送信">
</form>

例えば上記のフォームを操作するAPIは以下のとおりです。

// テキストフィールドに値を設定する
page.type('input[name="name"]', 'kanoe');
page.type('input[name="email"]', 'kanoe@xxxx.xxx');
// プルダウンから選択する
page.select('#gender', 'f');
// ラジオボタンを選択する
page.click('#inquire_1');

デバイス切り替え

Puppeteerには既にデバイスのリストを定義しているので、そちらを使って切り替えると便利です。
定義されているデバイスは下記コードから確認できます。
https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
// iPhone6を指定してみる
const iPhone = devices['iPhone 6'];

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.ozmall.co.jp/');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

デバイスを指定する方法以外にも、page.setUserAgentを使うことでUserAgentを直接指定することも可能です。

page.setUserAgent('Mozilla/5.0 (Linux; U; Android 4.0; en-us; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30');

待機

用途としては、JavaScriptのeventが起きるまで待機するために使うことが多いAPIです。

// imgタグが見つかるまで待機、見つかったらconsoleにログを出力する
page.waitFor('img')
    .then(() => console.log('gazou attayo!'));
// 1s待機
page.waitFor(1000)

画面のキャプチャ

// fullPageのオプションを指定すると、フルページでスクリーンショットが撮れる
page.screenshot({path: 'example.png', fullPage: true});

特定の要素に対して操作する

特定の１要素だけ取得して操作する場合は、page.$evalを使います。

// itemクラスを持つ最初の要素のテキストを取得する
const tab = await page.$eval('.item', el => el.textContent);

ページ内のセレクタを全て取得したい場合は、page.$$evalを使う必要があります。

// ページ内の複数のセレクタの内、特定の要素だけをクリックする
page.$$eval('#nav > .item', tabs => {
  tabs.filter(tab => tab.textContent === 'Contact')[0].click();
});

感想

UIテストを書くとき、Selenium Webdriver + 何かしらのテストフレームワークでテストをかくことが多いと思います。
わたしも、以前Selenium WebdriverとCodeceptionを使ってE2Eテストを構築したことがあるのですが、ブラウザのドライバの仕様に引っ張られて苦労することが多々ありました。
PuppeteerはChrome開発チームが開発していることもあって、ストレスなくブラウザ操作が実現できるのがとてもよかったです。あと環境構築もとても簡単なので、ちょっと試したい時にすぐ使えるのは便利だなーと思いました。

動画の設置

<video> 要素の記述

htmlの基本的な記述は以下の通り。
<video>要素のsrc属性で動画のパスを指定します。動画再生に非対応の古いブラウザ用に、代替テキストや画像を用意するとよいと言われています。その場合は、<video>要素内に記述します。

index.html

<video src="./hoge.mp4">
  <p>ご使用のブラウザでは動画再生に対応していません</p>
</video>

HTML5以降では、<video>要素内に<source>要素を記述し、複数のソースを指定することが可能です。その場合は、上から順に<source>をみていき、再生可能なものが利用されます。

index.html

<video>
  <source src="./hoge.mp4" type="video/mp4">
  <source src="./hoge.webm" type="video/webm">
　<p>ご使用のブラウザでは動画再生に対応していません</p>
</video>

<video> 要素に指定できる属性

<video> 要素のcontrols属性を使用することで、ブラウザに用意されたコントローラを使用することができます。インターフェースはブラウザに依存します。
コントローラーは使用せず、JavaScriptで操作する場合の記述は、次のセクションにまとめています。

index.html

<video src="./hoge.mp4" controls>
  <p>ご使用のブラウザでは動画再生に対応していません</p>
</video>

その他、 <video>要素には、以下の属性を指定できます。

属性	機能	値
autoplay	ロードされたら自動的に再生を開始	なし
loop	ループ再生する	なし
muted	デフォルトで音量をゼロにする	なし
preload	データのプリロードについての指定	"none"/"metadata"/"auto"
poster	データが再生可能になるまでに表示させる画像	画像のパス
width	高さ	整数値
height	幅	整数値

参考: https://developer.mozilla.org/ja/docs/Web/HTML/Element/video

JavaScriptでの動画再生

JavaScriptで動画を操作する場合の主要な記述を以下にまとめています。

動画の再生操作

index.html

<video id="video" src="./hoge.mp4">
  <p>ご使用のブラウザでは動画再生に対応していません</p>
</video>

main.js

var v = document.getElementById('video');
//再生
v.play();
//一時停止
v.pause();
//ロード
v.load();

play()

paused 属性をfalseに設定する、必要に応じリソースをロードする、再生を開始する

pause()

再生を中断する、paused属性をtrueに設定する、必要に応じリソースをロードする

load()

要素をリセットする、新たなリソースを選択しロードを開始する

JavaScriptでの再生位置の取得

main.js

//再生位置の取得
v.addEventListener('timeupdate', function() {
  if (v.currentTime !== 0) {
    console.log(timeConvert(v.currentTime));
  } else {
    console.log('0:00');
  }
})
//数値型から”00：00”表記への変換（秒、ミリ秒の場合）
function timeConvert(time) {
  var sec = Math.floor(time);
  var msec = ((time - sec) * 100).toFixed(0);
  return sec + ':' + msec;
}

currentTimeプロパティ

再生位置を数値型データ（秒単位）で返す

durationプロパティ

メディアの再生時間を数値型データ（秒単位）で返す

再生状態に関するプロパティ

• played: 再生が完了した時間の長さを表す
• paused: 再生が一時停止されているかどうかをBoolean値で表す
• ended: 再生が終了しているかどうかをBoolean値で表す
• error: 直近で発生したメディアのダウンロード中のエラーをerrorオブジェクトで返す

再生の設定に関するプロパティ

• loop: 繰り返し再生の有効・無効をBoolean値で表す
• controls: 再生をコントロールするユーザインタフェースの表示・非表示をBoolean値で表す
• preload: メディアをプリロードすべきか指定する、none、metadata、autoのいずれかの値をとる
• autoplay: htmlのautoplay属性を反映し、Boolean値で表す

再生状態に関するイベントハンドラ

• play: 再生が開始したとき
• timeupdate: 再生位置が変化したとき
• pause: 再生が中断したとき
• playing: 再生中断状態から、ふたたび再生可能になったとき
• waiting: 次のフレームの受信を待っているとき
• ended: 再生が完了したとき
• error: 再生中にエラーが発生したとき
• abort: エラー以外の原因で再生が停止したとき

メディアの読み込みステータスの取得

readyStateプロパティ

メディアリソースの読み込みの状態を取得する。戻り値は以下の通り。

• 0 :HAVE_NOTHING
  リソースに関するいかなる情報も利用できない状態

• 1: HAVE_METADATA
  リソースの情報（ビデオ要素の場合、ビデオの高さ・幅など）を取得済み、再生位置に関するデータは未取得

• 2: HAVE_CURRENT_DATA
  再生位置に関するデータは取得済み、再生位置より先のフレームデータは未取得

• 3: HAVE_FUTURE_DATA
  再生位置より先のフレームデータも取得済みで、早送りができる状態

• 4: DONE（完了）
  3の状態で、なおかつ、十分なデータがロードできていて、このまま再生しても、再生位置が読み込みデータを追い越さないような状態

networkStateプロパティ

メディアリソースの読み込みのネットワークの状態を取得する。戻り値は以下の通り。

• 0: NETWORK_EMPTY
  リソースに関するいかなる情報も利用できない状態
  （redayStateプロパティのHAVE_NOTHINGと同じ状態）

• 1: NETWORK_EMPTY
  要素がアクティブではあるが、ネットワークは使用されていない状態　（リソースが取得できている）

• 2: NETWORK_LOADING
  リソースの読み込み中

• 3: NETWORK_NO_SOURCE
  リソースが見つからない

ロード状態に関するイベントハンドラ

index.html

<video id="video">
  <source src="./hoge.mp4" type="video/mp4">
  <p>ご使用のブラウザでは動画再生に対応していません</p>
</video>
<p id="state"></p>

main.js

document.addEventListener('DOMContentLoaded', function() {
  var v = document.getElementById('video');
  var state = document.getElementById('state');
  //ロード開始
  v.addEventListener('loadedmetadata', function() {
    state.textContent = 'ロードを開始しました';
  })
  //読み込み完了
  v.addEventListener('loadeddata', function() {
    state.textContent = '読み込み完了しました';
  })
  //再生可能
  v.addEventListener('canplay', function() {
    state.textContent = '再生可能です';
  })
  //再生中
  v.addEventListener('playing', function() {
    state.textContent = '再生中です';
})

参考

https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement

https://javascript.info/object

オブジェクトの左側と右側の読み方がわからなかったので、JSの基礎を調べる。
{a: hoge}みたいなやつ

結論

{key: value}でした。

---

ぐぐるワード
js object

検索結果一番目
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
オブジェクトだけど、このオブジェクトじゃない。次。

ぐぐるワード
js object keys

検索結果一番目
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

The Object.keys() method returns an array of a given object's own property names, in the same order as we get with a normal loop.
うーん、ちょっと理解に苦しむ。次、

ぐぐるワード
js object key value pairs

検索結果２番目
https://javascript.info/object
これっぽい。

An object can be created with figure brackets {…} with an optional list of properties. A property is a “key: value” pair, where key is a string (also called a “property name”), and value can be anything.

keyとvalueのペアですっぽいこと言ってる。

これは５分で見つけた。いい感じ。

https://cointrader.co.jp/botdev/

勉強中です

疑問

const {trade} = require('cointrader')

はい、意味が分かりません

---

ググったワード
const {}

検索結果４番目
https://ushumpei.hatenablog.com/entry/2016/06/29/032906

複雑で理解できませんでした。が、
・分割代入である
・分割代入 - JavaScript | MDN＜＝このページをみればよい
ということがわかりました。

---

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

オブジェクトの分割代入という項目を発見
これこれ、こういうのが欲しいの

簡単な例

var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true

---

完全に理解した。超簡単に書くと

{a} = {a: "hoge"}

で、右辺にオブジェクト、左辺にオブジェクトのキーを書けば、値を取得できる。
ここで、objectってkeyとvalueのペアであっているのかという疑問が生じる。。。
私の頭は容量が少なすぎて、簡単な言葉で説明できないと記憶してくれません。てことで後で調べる。

ということで試しにオンラインエディタで実行

https://playcode.io/online-javascript-editor

const {a} = {a: "hello"}
console.log(a);

---
hello

はい、OK
ここまで１０分でできたOK、OK
てことで次はObjectについて。

https://cointrader.co.jp/botdev/

勉強中です

疑問

const {trade} = require('cointrader')

はい、意味が分かりません

---

ググったワード
const {}

検索結果４番目
https://ushumpei.hatenablog.com/entry/2016/06/29/032906

複雑で理解できませんでした。が、
・分割代入である
・分割代入 - JavaScript | MDN＜＝このページをみればよい
ということがわかりました。

---

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

オブジェクトの分割代入という項目を発見
これこれ、こういうのが欲しいの

簡単な例

var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true

---

完全に理解した。超簡単に書くと

{a} = {a: "hoge"}

で、右辺にオブジェクト、左辺にオブジェクトのキーを書けば、値を取得できる。
ここで、objectってkeyとvalueのペアであっているのかという疑問が生じる。。。
私の頭は容量が少なすぎて、簡単な言葉で説明できないと記憶してくれません。てことで後で調べる。

ということで試しにオンラインエディタで実行

https://playcode.io/online-javascript-editor

const {a} = {a: "hello"}
console.log(a);

---
hello

はい、OK
ここまで１０分でできたOK、OK
てことで次はObjectについて。

HTML canvas & Javascript を使った画像の切り抜き「Crop」のサンプルコードです。

ブラウザ上で画像を加工しようとしたら、canvas しかないわけですが、
いちばんやりたいのは「切り抜き：Crop」なんだけど、まぁ、シンプルなコードがほしかったのに無いわけで。
無いときは自分で作るのがエンジニアの掟なわけです。

切り取る（crop） Demo

中央の枠の中を切り出すタイプ。先に切り出す枠を決めておいて、画像の方を確認しながら切り出す。
なんと言いますか、マウスで角から角へドラッグしたり、枠をつまんで移動するUIよりも、このほうが直感的でわかりやすいし、スマホとかタブレットにも向いているUIだと思うのです。

Crop してますか？

実際に触ってみてもらうのが早いでしょう。⬇︎

• canvas 上で、マウスをドラッグすると切り抜く場所を変えられます。
• canvas 上で、マウスのホイールをグリグリすると拡大率が変わります。
• 「CROP」ボタンで、赤枠の部分が切り抜きされます。
• 上部の「A」「B」「C」のボタンで画像が変わります。

See the Pen HTML crop canvas by yamazaki.3104 (@yamazaki3104) on CodePen.

実際のコードがこちら

Qiita を見ているひとたちに、細かい解説は不要だとは思うので、ざっと概要のみ書く

• 主な canvas は編集用の id='cvs' と、ボタン「CROP」を押したあとに編集結果が入る id='out' の２つ

• ボタン「A」「B」「C」は入力画像の変更を行う load_img() を呼ぶだけ。読み込まれた画像は img に入っていて、img は読み出すだけで加工はしない。

• スライダーは id='scal' 画像の拡大縮小率を変えられるように用意したが、最終的にホイールイベントに対応したので、UIとしてはあまり役に立っていないかもしれない

• 画像の切り抜き処理は drawImage() がやってます

特に難しいことは何もやっていない、平凡なコードだと思っています。マウスのドラッグで画像の位置を変えるコードがいちばん大変だった、、、とはいっても、HTMLも入れて90行程度なので、、、まぁ、半日くらいの作業量でしょうか。

<html>
<body>
<button onclick="load_img('https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300')">A</button>
<button onclick="load_img('https://www.mozilla.org/media/img/logos/firefox/logo-quantum-wordmark-white.bd1944395fb6.png')">B</button>
<button onclick="load_img('')">C</button><br>
<input id='scal' type='range' value='' min='10' max='400' oninput="scaling(value)" style='width: 300px;'><br>
<canvas id='cvs' width='300' height='400'></canvas><br>
<button onclick='crop_img()'>CROP</button><br>
<canvas id='out' width='200' height='200'></canvas>
<script>
    const cvs = document.getElementById( 'cvs' )
    const cw = cvs.width
    const ch = cvs.height
    const out = document.getElementById( 'out' )
    const oh = out.height
    const ow = out.width

    let ix = 0    // 中心座標
    let iy = 0
    let v = 1.0   // 拡大縮小率
    const img  = new Image()
    img.onload = function( _ev ){   // 画像が読み込まれた
        ix = img.width  / 2
        iy = img.height / 2
        let scl = parseInt( cw / img.width * 100 )
        document.getElementById( 'scal' ).value = scl
        scaling( scl )
    }
    function load_img( _url ){  // 画像の読み込み
        img.src = ( _url ? _url : 'https://1.bp.blogspot.com/-AoQB8vIvlcw/W8BOcXcEQ6I/AAAAAAABPZM/rXNbol90tXcxBZBlXsg__xix03b_F4nqwCLcBGAs/s800/pet_cat_omoi_sleep_man.png' )
    }
    load_img()
    function scaling( _v ) {        // スライダーが変った
        v = parseInt( _v ) * 0.01
        draw_canvas( ix, iy )       // 画像更新
    }

    function draw_canvas( _x, _y ){     // 画像更新
        const ctx = cvs.getContext( '2d' )
        ctx.fillStyle = 'rgb(200, 200, 200)'
        ctx.fillRect( 0, 0, cw, ch )    // 背景を塗る
        ctx.drawImage( img,
            0, 0, img.width, img.height,
            (cw/2)-_x*v, (ch/2)-_y*v, img.width*v, img.height*v,
        )
        ctx.strokeStyle = 'rgba(200, 0, 0, 0.8)'
        ctx.strokeRect( (cw-ow)/2, (ch-oh)/2, ow, oh ) // 赤い枠
    }
    function crop_img(){                // 画像切り取り
        const ctx = out.getContext( '2d' )
        ctx.fillStyle = 'rgb(200, 200, 200)'
        ctx.fillRect( 0, 0, ow, ow )    // 背景を塗る
        ctx.drawImage( img,
            0, 0, img.width, img.height,
            (ow/2)-ix*v, (oh/2)-iy*v, img.width*v, img.height*v,
        )
    }

    let mouse_down = false      // canvas ドラッグ中フラグ
    let sx = 0                  // canvas ドラッグ開始位置
    let sy = 0
    cvs.onmousedown = function ( _ev ){     // canvas ドラッグ開始位置
        mouse_down = true
        sx = _ev.offsetX
        sy = _ev.offsetY
    }
    cvs.onmouseout =
    cvs.onmouseup = function ( _ev ){       // canvas ドラッグ終了位置
        if ( mouse_down == false ) return
        mouse_down = false
        draw_canvas( ix += (sx-_ev.offsetX)/v, iy += (sy-_ev.offsetY)/v )
    }
    cvs.onmousemove = function ( _ev ){     // canvas ドラッグ中
        if ( mouse_down == false ) return
        draw_canvas( ix + (sx-_ev.offsetX)/v, iy + (sy-_ev.offsetY)/v )
    }
    cvs.onmousewheel = function ( _ev ){    // canvas ホイールで拡大縮小
        let scl = parseInt( document.getElementById( 'scal' ).value )
        document.getElementById( 'scal' ).value = scl + _ev.wheelDelta
        scaling( scl + _ev.wheelDelta )
        return false // イベントを伝搬しない
    }
</script>
</body>
</html>

動作確認環境

いまのところ

• Chrome バージョン: 72.0.3626.109（Official Build） （64 ビット）
• Safari バージョン 12.0.2 (14606.3.4)

でしか確認してません。ごめんなさい。
他の環境で確認できたら、追記します。

2019/03/03: 追記
Firefox 65.0.2 で確認したらホイールのイベントが取れてなかった、、、なぜ？？
（原因不明の助）

takeWhile に参照透過でない式を渡すのは良くない。

上記が分かっていれば下記を読む必要はありません。

経緯

React開発ノウハウメモ（随時更新）
上記記事を読んで unsubscribe を componentWillUnmount に書かない方法を知ったので調べてみた。¹

takeWhile はメモリリークの原因になり得る。

takeWhile は値が来たときのみ実行されるので値が来なければ unsubscribe されない。
無駄なネットワーク通信やDBへのアクセスを続けてしまう。
takeWhile は値に応じて処理を続けるべきか決まる場合で使うべき。

Observable を流れる値と関係なく処理を止めたいなら unsubscribe を呼ぶか takeUntil を使う。

テストしてみる

実際に試してみるためのコードを書いた。
それらで下記の 3 つの関数を使っている。

utils.ts

// s 秒待つ
const sleep = (s: number) => new Promise(r => setTimeout(r, s * 1000))
// タイムスタンプをつけてログを出す
const log = (...v: any[]) => {
    const ts = (performance.now() / 1000) | 0
    console.log(...v, `(${ts})`)
}
// キャンセルできる Observable を生成
const make = (name: string) => {
    return new Observable<number>(s => {
        let canceled = false
        const push = (v: number) => {
            log(name, 'sub1', v, '- canceled', canceled)
            s.next(v)
        }
        Promise.resolve().then(async () => {
            push(12) // すぐに 12 を渡す
            await sleep(10) // 10 秒待ってから
            push(13) // 13 を渡す
            push(14) // 14 を渡す
        })
        return () => {
            log(name, 'unsub1')
            canceled = true
        }
    })
}

テスト内容

上記 make で Observable を生成したのち 1 秒後に処理を止める。

unsubscribe する

一般的なやりかたであると思われる。
問題なく動いている。

test1.ts

const test1 = async () => {
    const read = make('test1').pipe(
        tap(v => log('test1', 'sub2', v)),
    ).subscribe()
    await sleep(1)
    read.unsubscribe()
}
test1() /*
test1 sub1 12 - canceled false (0)
test1 sub2 12 (0)
test1 unsub1 (1)
test1 sub1 13 - canceled true (10)
test1 sub1 14 - canceled true (10)
*/

takeWhile を使う

1 秒後に止めようとしたが、その後 9 秒経って次の値が来るまで止まっていない。

test2.ts

const test2 = async () => {
    let alive = true
    make('test2').pipe(
        takeWhile(() => alive),
        tap(v => log('test2', 'sub2', v)),
    ).subscribe()
    await sleep(1)
    alive = false
}
test2() /*
test2 sub1 12 - canceled false (0)
test2 sub2 12 (0)
test2 sub1 13 - canceled false (10)
test2 unsub1 (10)
test2 sub1 14 - canceled true (10)
*/

takeUntil を使う

問題なく動く。

test3.ts

const test3 = async () => {
    const unsub = new Subject<void>()
    make('test3').pipe(
        takeUntil(unsub),
        tap(v => log('test3', 'sub2', v)),
    ).subscribe()
    await sleep(1)
    unsub.next()
    unsub.complete()
}
test3() /*
test3 sub1 12 - canceled false (0)
test3 sub2 12 (0)
test3 unsub1 (1)
test3 sub1 13 - canceled true (10)
test3 sub1 14 - canceled true (10)
*/

unsubscribe と takeUntil 、どちらを使うべきか？

こちらの記事 (英語)では takeUntil がオススメされている。

手続き的な unsubscribe よりも宣言的な takeUntil が良いという判断だろうか？

補足

React と RxJS を組み合わせる場合

大規模なアプリなら redux-observable を、小規模なら rxjs-hooks を使うことを勧める。
古い React を使っているなら recompose も良い。

---

1. useEffect のある今の React で componentWillUnmount のような古い方法を使う必要はないと思う。 ↩