はじめに

今までは真面目に開発していたが、少しふざけたものを作ってみようと思い、今回のChrome拡張を作ってみました。

それと以前拝見した以下の記事や

ｶﾀｶﾀｶﾀｯﾀｰﾝを可視化した

やAtomのactivate-power-modeに影響され、今回作るChrome拡張を決めました。

リリースしたChrome拡張概要

textareaやinput上でキータイプをするとエフェクトが表示されます。
先ほど紹介したChrome拡張と同様の仕様ですね。

そこにactivate-power-modeのコンボのような連続したキータイプの際に別のエフェクトを発生させます。

キータイプを500ms以内の間隔で連続３０回以上タイプした後にエンターキーを押すとセリフと効果音が表示されます。

タイプするたびにlocalstorageにタイプした時間と連続タイプ数を保存します。

Jojo experience - chromeウェブストア

作り方

ソースは以下のリポジトリにあります。
temori1919/jojo_experience

今回はcontent_scriptsスクリプトという形式で作成します。

manifest.json

{
  "manifest_version": 2,
  "name": "Jojo experience",
  "version": "1.0.0",
  "description": "スタンド使いになれるChrome Extensionです",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "jquery.min.js",
        "soundEffect.js",
        "caretposition.js"
      ]
    }
  ],
  "web_accessible_resources": [
    "images/*"
  ],
  "permissions": [
    "storage"
  ]
}

キャレット位置の取得にcaretposition.jsというjsライブラリを使用させていただきました。

[jQuery対応] textareaのキャレット座標(XY座標)を取得するjavascriptライブラリを作った

soundEffect.js

document.onkeydown = e =>　{

  const current = document.activeElement

  if (e.key === 'Backspace') {
    return true
  }
  if (current.type === 'textarea' || current.type === 'text' || current.type === 'search') {
    (async () => {
      // タイピング時間の記録
      let type_time = localStorage.type_time
      // タイピング数のカウント
      let type_count = localStorage.type_count

      // タイピングの感覚が500ミリ秒以下ならタイピング数をカウントする
      if (type_time !== undefined && type_count !== undefined && (new Date().getTime() - type_time) < 500) {
        localStorage.type_count = parseInt(type_count) + 1
      } else {
        localStorage.type_count = 1
      }

      localStorage.type_time = new Date().getTime()

      const isEnter = e.key === 'Enter'
      // キャレットの位置の取得
      const caretPosition = Measurement.caretPos(current)

      let prefix = isEnter ? 'ora2' : 'ora'
      let imgUrl = chrome.extension.getURL('images/' + prefix + '.png')

      // オラ
      let image = await appnedCss('images/' + prefix + '.png', isEnter ? rand(80, 100) : rand(10, 20), caretPosition.top + rand(-10, 10), caretPosition.left + rand(-10, 10))
      image = await animateRemove(image, isEnter, caretPosition)

      // タイプカウントの回数が30以上でエンターをタイプしたらセリフと効果音を表示
      if (isEnter && type_count > 30) {
        localStorage.type_count = 1
        // 時
        image = await appnedCss('images/toki.png', rand(80, 100), caretPosition.top, caretPosition.left, 400)
        image = await animateRemove(image, isEnter, caretPosition, 200)

        // エフェクト
        image = await appnedCss('images/effect' + rand(1, 4) + '.png', rand(80, 100), caretPosition.top, caretPosition.left, 600)
        await animateRemove(image, isEnter, caretPosition)
      }
    })()
  }
}

/**
 * 乱数生成
 *
 * @param min
 * @param max
 * @returns {number}
 */
function rand(min, max) {
  return Math.floor(Math.random() * (max - min) + min)
}

/**
 * imgをappend
 *
 * @param imgUrl
 * @param size
 * @param top
 * @param left
 * @param delay
 * @returns {Promise<any>}
 */
function appnedCss(imgUrl, size, top, left, delay) {
  return new Promise(resolve => {
    delay = delay === undefined ? 0: delay
    setTimeout(() => {
      imgUrl = chrome.extension.getURL(imgUrl)
      img = $(`<img width="${size}">`)
      img.attr('src', imgUrl)
      img.css({
        'position': 'absolute',
        'top': top,
        'left': left,
        'zIndex': 100000
      })
      $('body').append(img)
      resolve(img)
    }, delay)
  })
}

/**
 * imgのアニメーションと削除
 *
 * @param img
 * @param isEnter
 * @param positon
 * @param delay
 * @returns {Promise<any>}
 */
function animateRemove(img, isEnter, positon, delay) {
  return new Promise(resolve => {
    delay = delay === undefined ? 0: delay
    setTimeout(() => {
      const size = isEnter ? rand(80, 100) : rand(10, 20)
      img.animate({
        'top': positon.top + rand(-40, 40),
        'left': positon.left + rand(-40, 40),
        'width': size + (isEnter ? rand(30, 50) : rand(10, 20)),
        'opacity': 0
      }, 1000, () => {
        img.remove()
      })
      resolve(null)
    }, delay)
  })
}

本体はES2017で書いています。
コメントは適当なのでご容赦下さいw

キータイプするとタイプした時間とキータイプ回数がカウントUPされます。
前回時間とタイプした時間が500ms以内ならカウントUP、それ以外なら1を保存します。

それとimgを追加してアニメーションで表示しています。
また、エンターが押された後の処理はasync awaitで直列的に処理させるようにしています。

最後に

ちょっとふざけたものを作りたくて、今回の拡張をリリースしました。
正直邪魔にしかならない拡張機能なので、お試しで入れた場合は少し使って削除するのがいいと思いますww

興味がある方は追加してみて下さい。

Jojo experience - chromeウェブストア

Flutter web でアプリを試作してみた の処理部分を 生 JS の Web worker にくくりだしました。

• JavsScript の Functionコンストラクタ を使いたかった
• 生だとどういう型が動くのか知っておきたかった

からです。この文章は、主に後者のメモです。

まとめ

• Web worker へは、JSON で渡した（思考停止）
• Web worker から Uint8Array を返すと、ByteBuffer にキャストできる形で返ってくる。
• ByteBuffer を asInt8List で Int8List にし、 必要に応じて sublist で List<int> を切り出して使用した。

今回の Web worker の入出力

• 入力： 試行回数と、フィルタの構成（JSON）
• 出力： フィルタをパスした回数と、そのサンプル群

Web worker 部（処理側）

web/filter.js を置いておくと、webdev serve で参照でき、webdev build 時に build/filter.js にコピーしてくれます。

入力は、Enum の index への変換などが必要で、JSONで渡すことにしました。
処理は、汎用的な話ではないのでざっくり載せておきます。

web/filter.js

/* 前略 */
self.addEventListener('message', function (e) {
  // 指定された試行回数と、フィルタを元に、ランダムな局面を生成しパスする回数を数える
  const param = JSON.parse(e.data);
  const trials = param.trials;
  const filters = param.filters;
  const testFunc = makeTestFunc("yama", filters);
  var samples = [], passedCount = 0;
  const yama = Array.from(initYama);
  for (var i = 0; i < trials; ++i) {
    yama.shuffle();
    if (testFunc(yama)) {
      ++passedCount;
      if (samples.length < 100) {
        samples.push(Array.from(yama));
      }
    }
  }

それで、flutter_web に結果を返すのがこちらの部分。
配列をそのまま返すと、プロセス間のコピーが生じて遅くなるので、Transferable な形で返す。
所有権の移動だけになるらしい。shared なのは未だ無さそう。

最初、パスした回数などもバイナリに埋め込まないと駄目かと思ったのですが、
普通にオブジェクトを渡せば、flutter 側で Map で受け取れるので、
重たいデータだけ変換してやると良いと思います。

web/filter.js

  // Transferable に変換してコピーのロスを減らす
  const result = new Uint8Array(samples.length * 32);
  var offset = 0;
  for (var i = 0; i < samples.length; ++i) {
    const yama = samples[i];
    for (var j = 0; j < 32; ++j) {
      result[offset + j] = yama[j];
    }
    offset += 32;
  }
  self.postMessage({ passedCount: passedCount, samples: result.buffer }, [result.buffer]);
}, false);

この文章を書いていて、最終的に Uint8Array が固定長で良くなったので、Array に push してるのを直接、
Uint8Array に保存すれば無駄が無くなることに気がついた。

Flutter 部（呼び出し側）

呼び出しは postMessage、結果の受け取りは onMessage.listen で行う。

配列の結果は ByteBuffer にキャストすれば良かった。print(msg.data["samples"]) すると NativeByteBuffer だと言われましたが、問題なくキャストできているようなのでこれ以上深堀りしていない。

ByteBuffer を asInt8List で Int8List にしておき、
必要に応じて sublist で List<int> を切り出して使用した。

lib/main.dart

final w = Worker("filter.js");
w.onMessage.listen((msg) {
  final passedCount = msg.data["passedCount"] as int;
  final samples = msg.data["samples"] as ByteBuffer; /* NativeByteBuffer */
  setState(() {
    _passedCount = passedCount;
    _samples = samples.asInt8List();
    /* （中略） */
w.postMessage(jsonEncode({"trials": _trials, "filters": _filters}));

ReactのJSXでも子要素を定義できますが、これが結構面白いものでした。

自作エレメントにも子要素

ReactのJSXでは、（DOMを組み立てるものである以上当然ですが）<div>の中に<a>を書いて、そしてさらに文字列を書き込む、ということが可能です。

そして、これはHTML由来のエレメントだけでなく、自作のコンポーネントでも実現可能です。

function SomeWrapper({children}) {
  return(
    <div className="some-class">
      { children }
    </div>
  );
}

このように、子要素はchildrenというPropとして渡ってきます。

childrenの中身が知りたくて

では、このchildrenには何がどのような形式で来るのでしょうか。JSXの変換先であるReact.createElementのソースコードに当たってみました。挙動はchildrenの数によって違います。

• 0個…childrenにはpropとして渡したchildrenが（もしあれば）渡される
• 1個…childrenには唯一のchildren引数がそのまま渡される¹
• 2個以上…childrenには引数で渡されたものが配列に詰め込まれる

公式な操作方法

現実問題として、今からchildrenの実装を変えてしまうということは互換性問題などを考えれば可能性は薄いのですが、公式にはchildrenのデータ形式は「非公開」ということになっています。そこで、childrenを操作するためのReact.Childrenというユーティリティ関数群があります（リファレンス）。

• React.Children.map…childrenの各要素に対して関数を実行して、結果を配列で得る。
• React.Children.forEach…childrenの各要素に対して関数を実行する。
• React.Children.count…childrenの個数を返す
• React.Children.toArray…childrenを本物の配列に変換して返す
• React.Children.only…childrenが1つのJSXエレメントであることを保証する

なお、forEach、map、toArrayで処理する際に、キーは子要素間で一意となるようなものがReact側で振られます。また、子要素として<React.Fragment>を渡した場合、1つものとして扱われます。

childrenとReact.memo

今のところ、React.createElementをキャッシュするような仕組みはないので、<br />のようなシンプルなJSX要素であっても、2回の実行でオブジェクトとして一致することはありません。さらに、上述のように複数の子要素をもたせた場合、childrenの配列を生成しますので、このインスタンスも一致しません。

そして、PureComponentやReact.memoはchildrenを特別扱いしませんので、（文字列1つだけ指定するような例外的なケースは別として）childrenを指定するようなコンポーネントでは、メモ化は利かないということになってしまいます。

対策としては、

• 子要素を取るコンポーネントを使う側の場合、「コンポーネント+子要素」全体を1つのコンポーネントとして、それをメモ化する
• 子要素を取るコンポーネントを作る場合、メモ化を諦める

などが考えられます。そして、children以外でも、表示する文字列をpropで取る場合に、「HTMLタグで装飾したい」とその場で書いたJSXを渡せば同じ事態となります。こちらについては、React.useMemo、クラスのプロパティ、外側で変数に定義するなど、同じJSXインスタンスを使い回す形として対応が可能かと思います。

---

1. Context.Consumerなどで子要素代わりにコールバックを書くことがありますが、1個なので関数がそのままchildrenに入る形となっています。 ↩

※記事最下部あたりにHTMLファイルの内容が掲載されております。

前回はマウスのイベントを取得し、それをもとにマウスが投下され動き続けている間中は線を描画するという動作を設定しました。
あのままでは質素なので、機能を増やしてみましょう！

チュートリアル続き

ちょっとだけ前回の復習です！
前回記述したコードの主要部分はこんな感じですね！

    canvas.addEventListener('mousemove', draw_canvas);

    canvas.addEventListener('mousedown', function(e) {
      drawing = true;
      var rect = e.target.getBoundingClientRect();
      before_x = e.clientX - rect.left;
      before_y = e.clientY - rect.top;
    });

    canvas.addEventListener('mouseup', function() {
      drawing = false;
    });

    function draw_canvas(e) {
        if (!drawing){
        return
        };

        var rect = e.target.getBoundingClientRect();
        var x = e.clientX - rect.left;
        var y = e.clientY - rect.top;

        context.lineCap = 'round';
        context.strokeStyle = 'black';
        context.lineWidth = '10';

        context.beginPath();
        context.moveTo(before_x, before_y);
        context.lineTo(x, y);
        context.stroke();
        context.closePath();

        before_x = x;
        before_y = y;
    }

マウスイベントに対する挙動を設定し、更に主要動作としてdraw_canvas()関数を生成しました！この関数の中では、「新しい点を打っては線を引く」このような動作を連続的に行っていましたね！

今回は機能を充実させていこうと思いましたが、コードべた貼り芸の都合上、とってもスクロールが大変な記事になってしまうので、とりあえず消しゴム機能だけ実装してみたいと思います！

まずはページ内に切り替え用ボタンを設置

    <input type="button" value="ペン" id="pencil" class="active" onClick="init.tool(1)">
    <input type="button" value="消しゴム" id="eraser" onClick="init.tool(2)">

・いみ
ぺんとけしごむがほしいとねんじます。

canvasタグの上でも下でもいいので（内部はＮＧ）、ペンボタンと消しゴムボタンとを実装します！
HTMLコードについては基本的に割愛しますが、jsコード部とリンクしてくる部分に関しては説明していこうと思います！
classの部分は『active』という字面からなんとなく察しがつきますが、デフォルトでペンが有効化されるようにしてあります！
『onClick』は、関数名を指定してあげることでクリック→関数を動作というようなスクリプトが実現できます！

onClick="[関数名]"

では今回関数名として指定されている『init.tool()』とはなんでしょうか？実はこれはそのままinit.tool()関数を呼び出しという意味です！
これに関してはjsコード部の解説にて正体が判明します。
正直なところ推奨された記述方法なのかは分かりません！！！！！！！！！

ではjsで消しゴム機能を実装していきましょう！！！

    var pen = document.getElementById('pencil');
    var era = document.getElementById('eraser');

・いみ
ぺんとけしごむをつくってあげます。

これを記述する場所はdraw_canvas関数のすぐ下で問題ありません。（中はＮＧ）
「document.getElementById()」に関しては、Part1あたりでやりましたのでお分かりですね！IDで指定したHTML要素を取得します。

続いての作業で、ちょっとしたテクニックを使います！initオブジェクトのプロパティとして、toolという関数を実装します。（わかりづらい）

init.tool = function(btnNum){
    // code here
    }

・いみ
けしごむとぺんのきりかえをするかんすうをつくります。

jsを触り始めて日が浅いので、こういう書き方が適切かは正直分からないですが、関数の中にある関数を呼び出す方法があまりよくわからなかったので、こんな感じにしました。
initオブジェクトのメソッドとして、toolという関数を実装しています。ちなみに引数としてbtnNumという変数を受け取ります。
この数字によって、消しゴムとペンの切り替えを行います。
ではこの関数の中身を記述していきます。

      if (btnNum == 1){
        context.globalCompositeOperation = 'source-over';
        pen.className = 'active';
        era.className = '';
      }

      else if (btnNum == 2){
        context.globalCompositeOperation = 'destination-out';
        pen.className = '';
        era.className = 'active';

・いみ
1でぺん、2でけしごむになります。

こんな感じで、変数として1が与えられたらペンモード、2が与えられたら消しゴムモードといった感じに実装します。
ではglobal...みたいなやつはなんでしょうか！

context.globalCompositeOperation = '';

↓調べて一番上に出てきたサイトの文言

・source-over (default)
A over B。描画元イメージのうち、描画元イメージが不透明な部分が表示されます。それ以外の部分では描画先イメージが表示されます。
・destination-out
B out A。source-out と同じですが、描画元イメージの代わりに描画先イメージを使います。

次世代 HTML 標準 HTML5 情報サイト

なるほどなぁ・・・・・・・・・・・・・・・・・・・・・
正直全く理解できなかったので、消しゴムのほうの「destination-out」だけでも理解しようともう少し調べた結果、こちらにギリ私の知能でもわかるように書いてありました。

destination-out
描画先 Canvas の内容は、新たな図形と重なり合わない部分だけが残ります。新たな図形も含めて、他の領域は透明になります。

前半部分は相変わらずよく分かりませんが、後半の文に注目です。「新たな図形も含めて、他の領域は透明になります」
・・・このオプションを指定して描画すると、透明な線を描くってことはなんとなく分かります・・・なんとなく・・・。

実は、これでもう消しゴム機能は実装できています。試してみましょう！

表示するHTMLファイルは以下の通り。

<!DOCTYPE html>
<html lang="ja">
<head>
<script type="text/javascript">
function init(){
    var canvas = document.getElementById("mycanvas");
    var context = canvas.getContext('2d');
    var drawing = false;
    var before_x = 0;
    var before_y = 0;
    canvas.addEventListener('mousemove', draw_canvas);

    canvas.addEventListener('mousedown', function(e) {
      drawing = true;
      var rect = e.target.getBoundingClientRect();
      before_x = e.clientX - rect.left;
      before_y = e.clientY - rect.top;
    });

    canvas.addEventListener('mouseup', function() {
      drawing = false;
    });

    function draw_canvas(e) {
        if (!drawing){
        return
        };

        var rect = e.target.getBoundingClientRect();
        var x = e.clientX - rect.left;
        var y = e.clientY - rect.top;

        context.lineCap = 'round';
        context.strokeStyle = 'black';
        context.lineWidth = '10';

        context.beginPath();
        context.moveTo(before_x, before_y);
        context.lineTo(x, y);
        context.stroke();
        context.closePath();

        before_x = x;
        before_y = y;
    }

    var pen = document.getElementById('pencil');
    var era = document.getElementById('eraser');
    // 鉛筆と消しゴムの切り替え
    init.tool = function(btnNum){
    // クリックされボタンが鉛筆だったら
      if (btnNum == 1){
        context.globalCompositeOperation = 'source-over';
        pen.className = 'active';
        era.className = '';
      }
    // クリックされボタンが消しゴムだったら
      else if (btnNum == 2){
        context.globalCompositeOperation = 'destination-out';
        pen.className = '';
        era.className = 'active';
      }
    }
}
</script>   
<meta charset="utf-8">
<title>ＴＵＴＯＲＩＡＬ</title>
</head>
<body onload="init();">
    <canvas id="mycanvas" width="500" height="300" style="border:#1C1C1C solid 2px"></canvas>
    <input type="button" value="ペン" id="pencil" class="active" onClick="init.tool(1)">
    <input type="button" value="消しゴム" id="eraser" onClick="init.tool(2)">
</body>
</html>

では表示してみます。
（AWS Cloud9のプレビュ画面で、背景色が灰色になってるのは無視してください）

ペンボタン、消しゴムボタンが実装され、ボタンを投下することで切り替えを行うことができます。

最後に

今回はお絵描き機能の拡張を行いました！興味のある方はこちらを参考に、全消し機能や線の太さ、色の変更機能を実装してみてください！
それでは次回はタッチ機能を実装してみたいと思います！
なんだか筆圧に近づいてきた気がするぞ（？）！！！

参考サイト様

次世代 HTML 標準 HTML5 情報サイト：http://www.html5.jp/canvas/ref/property/globalCompositeOperation.html
合成とクリッピング：https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Compositing)
canvasで作るお絵描きツール：https://kigiroku.com/frontend/canvas_draw.html

非同期処理の順序制御。良く使うパターンなので、切り出してみました。

たとえば、ユーザ入力要素(inputとか)が変更されると、APIにアクセスして、返ってきた値を、反映させるような場合。API処理にかかる時間は不定なので、戻ってくる順番がずれて、表示がおかしくなる場合があります。これを防ぐ処理です。

class AsyncOutOfOrderError {}
class AsyncCommitter {
  requestId = 0;
  commitId = 0;
  async run(callback) {
    this.requestId += 1;
    const currentRequestId = this.requestId;
    const value = await callback();
    if (currentRequestId <= this.commitId) {
      throw new AsyncOutOfOrderError();
    }
    this.commitId = currentRequestId;
    return value;
  }
}

使うときは、

try {
  const value = await this.asyncCommitter.run(async () => {
   // ここに制御対象の処理
  });
  // ここに正常に終了したときの処理
} catch (error) {
  if (!(error instanceof AsyncOutOfOrderError)) {
    throw error;
  }
  // ここに順番がおかしくなったときの処理（あれば）
}

もしかしたら、run(callback, onSuccess, onErrror) とかの方が使いやすいかもしれません。

皆さん、これに相当する処理、どうさされてますか？同等の機能を持つライブラリを知っている人がいたら教えてもらえると幸いです。

はじめに

正確な名前が分からなかったり、検索項目が多い場合サジェストは非常にUXの質を高めてくれます。

今回はTypescriptとVueで簡単にサジェストの表示を実装したのでその記録を残しておきます。

今回利用するのがこちらです。

vue-simple-suggest

vue-simple-suggestのインストール

まずはvue-simple-suggestをインストールしましょう。

yarn add vue-simple-suggest

これでインストール完了しました。

これだけだとインポートしたときに方エラーが出てしまいます。型の定義ファイルにvue-simple-suggestを宣言しておきましょう

shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

declare module 'vue-simple-suggest';

実装

最終的なコードは以下のようになります。

<template>
  <vue-simple-suggest
    v-model="chosen"
    :list="simpleSuggestionList"
    :filter-by-query="true"
    :styles="autoCompleteStyle"
    display-attribute="firstName"
  >
    <template slot="misc-item-above">
      <h5>ユーザー一覧</h5>
      <tr>
        <th>ファーストネーム</th>
        <th>ラストネーム</th>
      </tr>
    </template>
    <tr slot="suggestion-item" slot-scope="{ suggestion }">
      <td>{{ suggestion.firstName }}</td>
      <
td>{{ suggestion.lastName }}</td>
    </tr>
  </vue-simple-suggest>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import VueSimpleSuggest from "vue-simple-suggest";
import Button from "@/components/Atoms/Button.vue";
import "vue-simple-suggest/dist/styles.css";

@Component({
  name: "FormWIthSearch",
  components: {
    Button,
    VueSimpleSuggest
  }
})
export default class FormWIthSearch extends Vue {
  private chosen: string = "";
  private autoCompleteStyle: {} = {
    vueSimpleSuggest: "position-relative",
    inputWrapper: "",
    defaultInput: "form-control",
    suggestions: "position-absolute list-group",
    suggestItem: "list-group-item"
  };
  public simpleSuggestionList() {
    return [
      { id: 1, firstName: "タロウ", lastName: "サトウ" },
      { id: 2, firstName: "ジロウ", lastName: "イノウエ" },
      { id: 3, firstName: "サブロウ", lastName: "タナカ" }
    ];
  }
}
</script>

順番に説明します。

ボタンは別コンポーネントから読み込んでいますが普通のボタンと思っていただいて構わないです。

CSSにはBootstrapを利用しています。

各プロパティの説明です。

chosenには選択したオプションの値が入ります。今回はfirstNameを指定しています。またこの値から検索で絞り込みます。

続いてautoCompleteStyleです。テキストボックスやサジェストの下に表示されるリストのクラスを付与することができます。

CSSは通常通りお好みのやり方であてていただければ大丈夫です。

simpleSuggestionListでリストの配列を返して検索リストとして割り当てます。

これは一点注意でデフォルトの状態ではidを付けなければエラーがでます。

また私の場合はオブジェクトのfirstNameを検索対象としています。display-atributeを指定しないとデフォルトでは配列に文字列を入れなければなりません。

さらにvue-simple-suggest内でslot="misc-item-above"をタグにつけるとheaderを付けたりできます。

他にもオプションはまだまだたくさんあります。詳しくはgihubのREADMEを読んでみましょう。

まとめ

今回はVueによるサジェストの実装をしました。UXを向上させるには必須ので機能です。

このプラグインを活用して爆速でサジェストを実装しましょう。

はじめに

ブログを見やすくして、構造化させるのに必須の項目「目次」を設定したのでその方法を記録に残したいと思います。

いちいち自分でマークダウンの目次を書くのが面倒くさいので自動で目次を生成してくれる良さそうなプラグインないかなと思いました。

最初はgatsby-transformer-remarkに標準で搭載されている機能を利用しようとしたのですが、リンクがうまく効かずに404エラーが出てしまっています。

そこで今回利用したのが「gatsby-remark-toc」です。

これを利用することで一瞬でマークダウンに目次を導入することができました。今回はその方法を紹介します。

gatsby-remark-tocの設定

まずはgatsby-remark-tocをインストールしましょう

yarn add gatsby-remark-toc 

インストールしたら次にgatsby-config.jsの設定をします。gatsby-remark-tocを追加してオプションを設定します。

headerには目次上部に出てくる見出しの名称を設定します。私は無難に「目次」と表示させます。

includeに対しては.mdファイルが存在して目次を表示させたいディレクトを指定します。これで指定したファイルのみに目次を表示させられるようになりました。

gatsby-config.js

{
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-toc',
            options: {
              header: '目次',
              include: ['src/pages/blog/*.md'],
           },

たったこれだけで目次の表示は完了です。お疲れ様でした。

これで問題なく目次の構造を作成してHTMLとして上部に出力することができます。ただし、デザインは入っていないので各自で自由にcssを作成して、反映するようにしましょう

まとめ

以上で目次の設定は完了です。非常に簡単でした。

皆さんもgatsby-remark-tocを利用して爆速で目次をマークダウンに作成してみましょう！

はじめに

Firebase をバックエンドに使ったWebアプリの開発にあたり
「定期実行されるcronサービスを使いたい」
「クライアントアプリからジョブを設定したい(API使いたい)」
と思い、調べたところ Google Cloud Platform の Cloud Scheduler が良さげさったので使ってみました。

cronサービスは他にもいくつかありますが、Cloud Schedulerの特徴としては

• 無料枠がある（1アカウントあたり3タスク）
• APIが提供されており、HTTP経由でジョブの設定、変更が可能である
• GCPの他のサービスとの親和性が高い※

などかなと思います。

※ Cloud Functions for Firebaseであれば、Cloud Schedulerの機能をラップしたメソッドを使って定期実行ができるそうです。参考: Firebase Cloud Functionsの定期実行が、それ単体で簡単にできるようになった！ - Qiita

本記事は、Node.jsでCloud SchedulerジョブをAPIを使って設定し、 Cloud Functions for Firebase を実行する方法の備忘録です。

事前準備

GCPに登録

Cloud Schedulerは Google Cloud Platform が提供するサービスです。無料使用枠はありますが使用には登録が必要なため、予め登録しておきましょう。
登録完了後、APIを使うためのプロジェクトを作成してください。

APIを有効化

APIを使用するため、 コンソールのAPIライブラリからCloud Schedulerを検索しAPIを有効化しておきます。
今回はCloud FunctionsもAPI経由で実行するため、Cloud Functions APIも有効化しましょう。

Google Cloud API認証用の環境設定

Google Cloud APIの使用にはOAuth認証が必須です。
事前にGCPのサービスアカウントと、秘密鍵を含むJSONファイルを作成し、それを用いて認証を行います。
こちらを参考に、サービスアカウントの作成〜環境変数の設定までを実施します。

Cloud Pub/Sub の設定

Cloud Schedulerでジョブを作成する際、定期実行するジョブの種類（ターゲット）を以下の選択肢から設定する必要があります。

• Cloud Pub/Sub
• HTTP
• App Engine HTTP

今回はCloud Scheduler → Cloud Pub/Sub → Cloud Functions の順で実行するので、予めPub/Subの設定と実行される関数を準備しておきます。
まず、最終的に実行されるCloud Functionsの関数を functions.pubsub で作成します。トピック名は後ほど設定します。

const functions = require('firebase-functions');

exports.handlePubSubTrigger = functions
  // トリガーとなるPub/Subのトピックを指定する
  .pubsub.topic('[トピック名]')
  // Pub/SubからPUSHがあったときの処理
  .onPublish(async (event, context) => {
    const pubsubMessage = event.data;
    console.log(Buffer.from(pubsubMessage, 'base64').toString());
  });

次に、前段で作成した関数をトリガーするPub/Subのトピックおよびサブスクリプションを作成します。作成は Google Cloud SDK からCLIで作成できるほか、GCPのコンソール画面からも作成可能です。こちらを参照しつつ

1. トピック作成後、トピック名を実行する関数に設定
2. サブスクリプションのエンドポイントURLに実行する関数のURLを指定

を行います。

APIを使ってみる

事前準備が完了したら、実際にCloud Scheduler APIを使ってジョブを作成してみます。
なお、Google Cloud API リクエストの実装方法として
1. 単純にHTTPリクエストを発行する
2. クライアントライブラリ( Google APIs Node.js Client )を使う

の2パターンあり、今回は使い勝手のいい後者を採用します。
ジョブ作成するCloud Functionsの関数は以下になります。プロセスとしては、

1. GCPのOAuth認証
2. Cloud Schedulerジョブの新規作成(APIのリクエスト)

の2つです。

const functions = require('firebase-functions');
const { google } = require('googleapis');

exports.createSchedulerJob = functions.https.onRequest(
  async (req, res) => {
    // ①GCPのOAuth認証
    const client = await google.auth.getClient({
      scopes: ['https://www.googleapis.com/auth/cloud-platform'],
    });

    // ②ジョブの新規作成
    const projectId = '[PROJECT_ID]'; // プロジェクトID
    const locationId = '[LOCATION_ID]'; // ロケーション名(Cloud Functionsのデフォルトはus-central1)
    const topicName = '[TOPIC_NAME]'; // トリガーするPub/Subのトピック名
    const jobName = '[JOB_NAME]'; //作成するCronジョブ名

    const request = {
      parent: `projects/${projectId}/locations/${locationId}`,
      resource: {
        name: `projects/${projectId}/locations/${locationId}/jobs/${jobName}`,
        schedule: '0 7 * * 1-5', // 定期実行する時刻 今回は月~金のAM7:00に設定
        pubsubTarget: {
          topicName: `projects/${projectId}/topics/${topicName}`,
          data:  Buffer.from('Cron triggered.').toString('base64'),
        },
      },
      auth: client,
    };
    // APIリクエスト
    cloudScheduler.projects.locations.jobs.create(request, (err, response) => {
      if (err) {
        console.error(err);
        return;
      }
      return response.data;
    });
  },
);

① GCPのOAuth認証

まず、クライアントライブラリのauth.getClient()メソッドを使ってOAuth認証を行います。

このとき、scopesの設定が必要になります。
スコープとはアプリケーションに許可するAPI操作の権限の範囲で、これを認証時に明記する必要があります。
各APIに必要なスコープはAPIのドキュメントにAuthorization Scopesとして記載されています。今回はCloud Schedulerに必要なhttps://www.googleapis.com/auth/cloud-platformを指定します。

const client = await google.auth.getClient({
  scopes: ['https://www.googleapis.com/auth/cloud-platform'],
});

補足ですが、auth.getClient()は開発環境において前段で準備した秘密鍵のJSONファイルをよしなに参照してくれるので、コード内で認証ファイルをインポートするなどの必要はありません。クライアントライブラリを使うのにはこうした利点があります。

② Cloud Schedulerジョブの新規作成

OAuth認証後、Cloud Schedulerのジョブを作成します。ジョブの作成には projects.locations.jobs.create を使います。

リクエストとして以下の項目を設定します。

• parent …ジョブを作成するプロジェクト。
• resource.name …ジョブの名前。projects/~で始まるパスの形で設定。
• resource.schedule … ジョブの設定時刻。 unix-cron 文字列形式で設定。
• resource.pubsubTarget … トリガーするPub/Subトピックの設定。topicNameとdataを必須で設定する。dataはBase64エンコードする。
• auth … 前段で取得した認証情報

なお、resource.pubsubTarget の箇所はトリガーするターゲットに応じてプロパティが変わるので注意してください。

const projectId = '[PROJECT_ID]'; // プロジェクトID
const locationId = '[LOCATION_ID]'; // ロケーション名(Cloud Functionsのデフォルトはus-central1)
const topicName = '[TOPIC_NAME]'; // トリガーするPub/Subのトピック名
const jobName = '[JOB_NAME]'; //作成するCronジョブ名

const request = {
  parent: `projects/${projectId}/locations/${locationId}`,
  resource: {
    name: `projects/${projectId}/locations/${locationId}/jobs/${jobName}`,
    schedule: '0 7 * * 1-5', // 定期実行する時刻 今回は月~金のAM7:00に設定
    pubsubTarget: {
      topicName: `projects/${projectId}/topics/${topicName}`,
      data:  Buffer.from('Cron triggered.').toString('base64'),
    },
  },
  auth: client,
};
// APIリクエスト
cloudScheduler.projects.locations.jobs.create(request, (err, response) => {
  if (err) {
    console.error(err);
    return;
  }
  return response.data;
});
},

無事ジョブが作成されると、レスポンスで作成されたジョブの情報が返却されます。

③ ジョブの変更

一度作成したジョブを変更する際は projects.locations.jobs.patch を使います。
以下の例では、先程作成したジョブの設定時刻を7時から8時に変更します。

const client = await google.auth.getClient({
  scopes: ['https://www.googleapis.com/auth/cloud-platform'],
});
const projectId = '[PROJECT_ID]'; // プロジェクトID
const locationId = '[LOCATION_ID]'; // ロケーション名(Cloud Functionsのデフォルトはus-central1)
const jobName = '[JOB_NAME]'; // 更新するCronジョブ名

const request = {
  name: `projects/${projectId}/locations/${locationId}/jobs/${jobName}`,
  updateMask: 'schedule',
  resource: {
    schedule: '0 8 * * 1-5', // AM8:00に設定変更
  },
  auth: client,
};

cloudScheduler.projects.locations.jobs.patch(request, (err, response) => {
  if (err) {
    console.error(err);
    return;
  }
  return response.data;
});

作成時と異なるのはpubsubTargetが不要となる点と、リクエストにupdateMaskを指定する点です。
updateMaskはジョブのどのフィールドを更新するかを指定するパラメータです。設定しないと更新されないので必ず設定します。

おわりに

API経由でcronジョブをスケジューリングするような記事があまりなかったので、参考になれば幸いです。
内容に誤りや改善点があればコメントいただけるとありがたいです！

参考記事

• Firebase Cloud Functionsで定期実行してみる - Qiita
• Cloud Functions for Firebase の関数をスケジューラから定期的に呼び出す - Qiita

ある日の出来事...

.vueでレイアウトちょっと変えただけだけどいちおうテストしとこうっと。

やぁ！

yarn run test:unit

結果はどうかな？

...なんかめちゃめちゃやんけ！！

Uncovered Lineの表示もソースコードと全然合っていません。

こんな時は慌てず騒がず（騒いだけど...）キャッシュをクリアしましょう。

うりゃ〜！

yarn run test:unit --clearCache
$ vue-cli-service test:unit --clearCache
Cleared /var/folders/2l/gq85xz3j06x5y3rzsmlnq8vr00172j/T/jest_uvl

みたいになります。

再びテストします！やぁ！！

yarn run test:unit

ばっちりですね。

今日必要になったので。
とりあえず以下でできました↓

const nestViewer = (obj, prefix = '') => {
  for (const key in obj) {
    if (typeof obj[key] == 'object') {
      if (Array.isArray(obj[key])) {
        obj[key].forEach((item, index) => {
          if (typeof item != 'object') {
            console.log({ key: `${prefix && prefix + '.'}${key}[${index}]`, value: item })
          } else {
            nestViewer(item, `${prefix && prefix + '.'}${key}[${index}]`)
          }
        })
      } else {
        nestViewer(obj[key], `${prefix && prefix + '.'}${key}`)
      }
    } else {
      console.log({ key: `${prefix && prefix + '.'}${key}`, value: obj[key] })
    }
  }
}

こんな感じの地獄のようなObjectがあったとして

{
  "a": 1,
  "b": [4, 5, 6],
  "c": {
    "a": 7,
    "b": [8, 9, 10],
    "c": {
      "a": 11,
      "b": [12, 13, 14],
      "c": {
        "a": 15,
        "b": [16, 17, 18],
        "c": {
          "a": 19,
          "b": [20, 21, 22],
          "c": {
            "a": 23,
            "b": [24, 25, 26],
            "c": {}
          }
        }
      }
    }
  },
  "d": [
    {
      "a": 7,
      "b": [8, 9, 10],
      "c": {
        "a": 11,
        "b": [12, 13, 14],
        "c": {}
      }
    }
  ]
}

実行結果

{key: "a", value: 1}
{key: "b[0]", value: 4}
{key: "b[1]", value: 5}
{key: "b[2]", value: 6}
{key: "c.a", value: 7}
{key: "c.b[0]", value: 8}
{key: "c.b[1]", value: 9}
{key: "c.b[2]", value: 10}
{key: "c.c.a", value: 11}
{key: "c.c.b[0]", value: 12}
{key: "c.c.b[1]", value: 13}
{key: "c.c.b[2]", value: 14}
{key: "c.c.c.a", value: 15}
{key: "c.c.c.b[0]", value: 16}
{key: "c.c.c.b[1]", value: 17}
{key: "c.c.c.b[2]", value: 18}
{key: "c.c.c.c.a", value: 19}
{key: "c.c.c.c.b[0]", value: 20}
{key: "c.c.c.c.b[1]", value: 21}
{key: "c.c.c.c.b[2]", value: 22}
{key: "c.c.c.c.c.a", value: 23}
{key: "c.c.c.c.c.b[0]", value: 24}
{key: "c.c.c.c.c.b[1]", value: 25}
{key: "c.c.c.c.c.b[2]", value: 26}
{key: "d[0].a", value: 7}
{key: "d[0].b[0]", value: 8}
{key: "d[0].b[1]", value: 9}
{key: "d[0].b[2]", value: 10}
{key: "d[0].c.a", value: 11}
{key: "d[0].c.b[0]", value: 12}
{key: "d[0].c.b[1]", value: 13}
{key: "d[0].c.b[2]", value: 14}

以上

今日必要になったので。
とりあえず以下でできました↓

const nestViewer = (obj, prefix = '') => {
  for (const key in obj) {
    if (typeof obj[key] == 'object') {
      if (Array.isArray(obj[key])) {
        obj[key].forEach((item, index) => {
          if (typeof item != 'object') {
            console.log({ key: `${prefix && prefix + '.'}${key}[${index}]`, value: item })
          } else {
            nestViewer(item, `${prefix && prefix + '.'}${key}[${index}]`)
          }
        })
      } else {
        nestViewer(obj[key], `${prefix && prefix + '.'}${key}`)
      }
    } else {
      console.log({ key: `${prefix && prefix + '.'}${key}`, value: obj[key] })
    }
  }
}

こんな感じの地獄のようなObjectがあったとして

{
  "a": 1,
  "b": [4, 5, 6],
  "c": {
    "a": 7,
    "b": [8, 9, 10],
    "c": {
      "a": 11,
      "b": [12, 13, 14],
      "c": {
        "a": 15,
        "b": [16, 17, 18],
        "c": {
          "a": 19,
          "b": [20, 21, 22],
          "c": {
            "a": 23,
            "b": [24, 25, 26],
            "c": {}
          }
        }
      }
    }
  },
  "d": [
    {
      "a": 7,
      "b": [8, 9, 10],
      "c": {
        "a": 11,
        "b": [12, 13, 14],
        "c": {}
      }
    }
  ]
}

実行結果

{key: "a", value: 1}
{key: "b[0]", value: 4}
{key: "b[1]", value: 5}
{key: "b[2]", value: 6}
{key: "c.a", value: 7}
{key: "c.b[0]", value: 8}
{key: "c.b[1]", value: 9}
{key: "c.b[2]", value: 10}
{key: "c.c.a", value: 11}
{key: "c.c.b[0]", value: 12}
{key: "c.c.b[1]", value: 13}
{key: "c.c.b[2]", value: 14}
{key: "c.c.c.a", value: 15}
{key: "c.c.c.b[0]", value: 16}
{key: "c.c.c.b[1]", value: 17}
{key: "c.c.c.b[2]", value: 18}
{key: "c.c.c.c.a", value: 19}
{key: "c.c.c.c.b[0]", value: 20}
{key: "c.c.c.c.b[1]", value: 21}
{key: "c.c.c.c.b[2]", value: 22}
{key: "c.c.c.c.c.a", value: 23}
{key: "c.c.c.c.c.b[0]", value: 24}
{key: "c.c.c.c.c.b[1]", value: 25}
{key: "c.c.c.c.c.b[2]", value: 26}
{key: "d[0].a", value: 7}
{key: "d[0].b[0]", value: 8}
{key: "d[0].b[1]", value: 9}
{key: "d[0].b[2]", value: 10}
{key: "d[0].c.a", value: 11}
{key: "d[0].c.b[0]", value: 12}
{key: "d[0].c.b[1]", value: 13}
{key: "d[0].c.b[2]", value: 14}

以上

画像をドラッグ＆ドロップでアップロード
＆
画像をドラッグ＆ドロップで並び替える
方法をご紹介します！

用途

webサイトとかで、施設に画像を結びつけて、かつ、それをソート順で表示したいとかあるときに使えるよ。

ついでに画像も削除できます。
ついでに画像に説明文も登録できます。

参考サイト

https://codepen.io/malkafly/pen/gbVYZb
↑ほぼこれを丸パクリです。ありがとうございます！！！

使うプラグイン

• みんな大好きDropzoneJS
• jQuey UIのSortable 私はここからyarnで追加しました

コード

html側

<form method="post" action="/api/v1/facility-image/upload/" id="my-awesome-dropzone" class="image-upload-area dropzone">
    <input type="hidden" name="client_id" value="{{ $facility->id }}"></div>
</form>

<ul class="visualizacao sortable dropzone-previews"></ul>
<div class="preview" style="display:none;">
    <li>
        <div>
            <div class="dz-preview dz-file-preview">
                <img class="facility-image" data-dz-thumbnail />
                <input type="text" class="caption">
                <button type="button" class="btn btn-info caption-button" data-image-id="">説明文登録</button>
                <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                <div class="dz-error-message"><span data-dz-errormessage></span></div>
            </div>
        </div>
    </li>
</div>

javascript側

import Dropzone from 'dropzone'

require('es-jquery-sortable')

let myDropzone = {}

dropzoneSetting()

//画像の並び替え
$(document).ready(function(){
    let group = $('.sortable').sortable({
        group: 'sortable',
        onDrop: function($item, container, _super) {
            var data = group.sortable('serialize').get()
            _super($item, container)

            //DB上の並び順を更新する
            axios.post('/api/v1/facility-image/update-order/', {
                    data: data,
                })
                .catch((error) => {
                    swal('', '並び順の更新に失敗しました', 'error')
                    console.log(error)
                })
        }
    })
})

/**
 * dropzone.jsの処理
 * 
 */
async function dropzoneSetting() {
    Dropzone.autoDiscover = false

    //最大ファイルアップロードサイズ
    let maxFileSize = 3

    //企業ID
    let clientId = $('#client-id').data('clientId')

    myDropzone = new Dropzone('.image-upload-area', {
        url: '/api/v1/facility-image/upload/',
        params: {
            client_id: clientId,
        },
        dictDefaultMessage: 'ここにファイルをドラッグ＆ドロップ、または、クリックしてファイルを選択',
        dictRemoveFile: '',
        dictCancelUpload: '',
        dictFileTooBig: 'ファイルサイズは' + maxFileSize + 'MBまで',
        dictInvalidFileType: 'JPEG,PNGのみ可能',
        addRemoveLinks: true,
        maxFilesize: maxFileSize,
        acceptedFiles: 'image/*',
        parallelUploads: 1,
        uploadMultiple: false,
        previewsContainer: '.visualizacao', 
        previewTemplate : $('.preview').html(),
        renameFile: (file) => {
            let fileName = new Date().getTime() + '_' + file.size

            let extension = file.name.split('.').pop()
            return fileName + '.' + extension
        },
    })

    //アップロードに失敗した場合
    myDropzone.on('error', async function(file, errorMessage) {
        //ファイル数が多い場合
        if(errorMessage === '最大8ファイルまでしか添付できません') {
            myDropzone.removeFile(file)
            swal('', errorMessage, 'warning')
        } else if(errorMessage === 'セッションが切れました。もう一度ログインしてください。') {
            await swal('', 'セッションが切れました。もう一度ログインし直してください。', 'warning')
            location.replace(location.href)
        }
    })

    //画像を削除したときに、サーバー上のファイルも削除する
    myDropzone.on("removedfile", function(file) {
        let imageId = file.imageId

        //画像ID
        axios.get('/api/v1/facility-image/delete-by-image-id/' + imageId)
            .catch((error) => {
                console.log(error)
            })
    })

    //既存の画像が表示されたときに情報を追加する
    myDropzone.on("addedfile", function(file) {
        $('.dz-preview').each(function() {
            let imageId = $(this).children('.caption-button').data('imageId')

            //画像IDが設定されていない場合のみ追加する
            if(!imageId) {
                let imageId = file.imageId

                //今回追加した画像の場合は飛ばす
                if(!imageId) {
                    return
                }

                $(this).children('.caption-button').data('imageId', imageId)

                let caption = file.caption
                $(this).children('.caption').val(caption)

                $(this).parents('li').data('imageId', imageId)
            }
        })
    })

    //新しい画像がアップロードされたときに、画像IDを追加する
    myDropzone.on("success", function(file, response) {
        $('.dz-preview').each(function() {
            let existImageId = $(this).children('.caption-button').data('imageId')

            //画像IDが設定されていない場合のみ追加する
            if(!existImageId) {
                let imageId = response
                $(this).children('.caption-button').data('imageId', imageId)
                $(this).parents('li').data('imageId', imageId)
            }
        })
    })

    //すでに保存されている画像を表示する
    $('.exist-image').each(function() {
        let path = $(this).data('path')
        let info = {
            name: '',
            size: '',
            imageId: $(this).data('id'),
            caption: $(this).data('caption')
        }
        myDropzone.emit("addedfile", info)

        if(path) {
            myDropzone.emit("thumbnail", info, path)
        } else {
            let base64 = 'data:' + $(this).data('type') + ';base64,' + $(this).data('binary')
            myDropzone.emit("thumbnail", info, base64)
        }

        myDropzone.emit("complete", info)
    })

    //画像の説明文を登録
    $(document).on('click', '.caption-button', function() {
        let input = $(this).prev()

        axios.post('/api/v1/facility-image/save-caption/', {
                caption: input.val(),
                image_id: $(this).data('imageId'),
            })
            .then(() => {
                swal('', '説明文を登録しました', 'success')
            })
            .catch((error) => {
                swal('', '説明文の登録に失敗しました', 'error')
                console.log(error)
            })
    })
}

まとめ

php側（私はLaravel使用しています）は、自分で実装してくださいね。
cssも自分で書いてね。

全然コードの説明してなくて、すみません。
いや、こういうの毎回やろうと思ったときに、過去のソースひっぱってくるの大変なので、Qiitaに置きました...

※前編はこちらやで。

ハスケル子「引き続き、JavaScriptとElm・・・」
ハスケル子「そしてVue.jsもちょこっと比べてみましょう」

オブジェクト（のようなもの）

JavaScriptのオブジェクト

const takashi = {
    displayName: "たかし",
    age: 36,
    height: 173,
    weight: 73
};

ワイ「displayNameとかageとかが、プロパティいうやつやな」
ワイ「takashi.ageとかすると、プロパティの値にアクセスできんねん」

Elmのレコード

takashi =
    { displayName = "たかし"
    , age = 36
    , height = 173
    , weight = 73
    }

ワイ「Elmではレコードいうねんな」
ワイ「JSのオブジェクトとけっこう似てるな」
ワイ「displayNameとかageとかのことは」
ワイ「フィールドっていうんやな」
ワイ「JSと同じくtakashi.ageって書けばフィールドの値にアクセスできんねん」

オブジェクトのプロパティを更新

JavaScriptのオブジェクト

takashi.age = 37;
takashi.weight = 83;

ワイ「constで宣言した再代入不可なオブジェクトでも、プロパティは変更できてまうんやな」

Elmのレコード

newTakashi =
    { takashi | age = 37, weight = 83 }

ワイ「Elmでは全ての値が不変やからtakashi.age = 37みたいな上書きはできひんねん」
ワイ「せやから、1つ歳をとって10Kg太ったnewTakashiという新しいレコードを作る形になる」
ワイ「元々のtakashiは36歳のまま、別に存在すんねん」

ドキュメントの書き方

JavaScript （JSDoc）

/**
 * @param  {Number} num
 * @param  {String} str
 * @return {String}
 */
function displayNumber (num, str) {
    return num + str;
}

ワイ「関数の使い方が分かりやすいように」
ワイ「引数や戻り値の型をコメントで書いたりすんねんな」
ワイ「まぁ、実装とズレてても動くから、努力目標やけどな・・・」

Elmの場合は型で表現

displayNumber : Int -> String -> String
displayNumber num str =
    String.fromInt num ++ str

ワイ「displayNumber : Int -> String -> Stringいうのは」
ワイ「このdisplayNumberいう関数は」
ワイ「引数としてInt型の値とString型の値を受け取って」
ワイ「戻り値としてString型の値を返す」
ワイ「そんな関数ですよ〜っていう」
ワイ「型注釈いうやつや」

ワイ「しかも、この型注釈で書いた通りに実装せえへんと」
ワイ「ちゃんとコンパイルエラーが出て教えてくれんねん」
ワイ「TYPE MISMATCH（型の不一致）です〜、言うてな」

ワイ「つまり、強制力のある注釈や！」

ビューの書き方

Vue.jsの場合（単一ファイルコンポーネント）

<template>
  <div class="container">
    <button>増やす</button>
    <input type="text">
    <button>減らす</button>
  </div>
</template>

ワイ「ほぼhtmlやな」
ワイ「読みやすいな」

Elmの場合

view model =
    div [ class "container" ]
        [ button [] [ text "増やす" ]
        , input [ type_ "text" ] []
        , button [] [ text "減らす" ]
        ]

ワイ「このdivとかbuttonていうのがタグ名やね・・・？」

ハスケル子「まあそうなんですけど」
ハスケル子「タグ名というより、れっきとしたElmの関数です」
ハスケル子「関数なので───」

joinButton =
    button [] [ text "参加する" ]

ハスケル子「───こんな感じで変数に格納すれば」
ハスケル子「それだけでコンポーネントみたいに使えますし」

commonButton buttonText =
    button [] [ text buttonText ]

ハスケル子「↑こう、引数としてテキストを受け取る関数にすれば」
ハスケル子「propsを受け取って表示するタイプのコンポーネントもサクッと作れます」

ワイ「おお」
ワイ「コンポーネントも関数そのものやから、コードの中で自然に使えるな」

ハスケル子「そうなんです」
ハスケル子「リスト¹の分だけ回してli要素を生成したい、なんて場合も簡単です」

イベントリスナ登録（のようなもの）

Vue.jsの場合

<button @click="incrementFunc">増やす</button>
<input type="text">
<button @click="decrementFunc">減らす</button>

ワイ「見たままやな」
ワイ「ボタンをクリックするとincrementFuncかdecrementFuncという」
ワイ「関数が実行されんねんな」
ワイ「関数はmethodsの中に書いとけばええんや」

Elmの場合

button [ onClick Increment ] [ text "増やす" ]
, input [ type "text" ] []
, button [ onClick Decrement ] [ text "減らす" ]

ワイ「こう書いておけば、このボタンをクリックした時に・・・？」

ハスケル子「IncrementまたはDecrementというメッセージが生み出されます」

ワイ「メッセージ・・・？」
ワイ「そのメッセージはどこで受け取るん？」

ハスケル子「状態の更新内容を定義するupdateっていう関数で受け取ります」

update msg model =
    case msg of
        Increment ->
            { model | int = model.int + 1 }
        Decrement ->
            { model | int = model.int - 1 }

ハスケル子「Incrementというメッセージが来たら」
ハスケル子「model・・・つまりVuexでいうstoreのstateみたいなもんですね」
ハスケル子「要はmodelイコール状態です」
ハスケル子「そのmodelの中のintを1増加させます」
ハスケル子「メッセージがDecrementだった場合は1減らす感じですね」
ハスケル子「そして、それによって生成された新しいmodelを戻り値として返すって感じです」

ワイ「ほえ〜、新しいmodel、つまり新しい状態を返すと」
ワイ「それがリアクティブにビューに反映されるっていうこと？」

ハスケル子「そうです」

ワイ「そうなんやね〜」
ワイ「Elmって、VueとかReactみたいに仮想DOMを内蔵してたんやね」
ワイ「あとVuexやRedux相当の機能もか」

ハスケル子「そうです」
ハスケル子「っていうかVuexもReduxも、Elmの影響を受けてます」
ハスケル子「Elmというか、今みたいなThe Elm Architectureというパターンの影響ですね」
ハスケル子「しかもElmはとってもシンプルなので」
ハスケル子「学習コストが低くて、やめ太郎さんにピッタリです」

ワイ「どういう意味やねん」

ハスケル子「オンラインエディタでさっきのカウンタのサンプルコードを色々いじってみると」
ハスケル子「更に分かると思いますよ」

ワイ「やってみるわ」
ワイ「おおきにやで、ハスケル子ちゃん」

ハスケル子「Vue勉強しててもReact勉強してても」
ハスケル子「副作用を起こさないように、とか」
ハスケル子「純粋な・・・つまり参照透過的な関数を書こう、とか」
ハスケル子「色んなドキュメントに書いてあるんですよ」
ハスケル子「じゃあ、そういう風にしか書けないElmやりゃあいいんですよ」

ワイ「お、おう・・・」
ワイ「前向きに検討するわ・・・」
ワイ「っていうか、今回JSやVueと比較したおかげでElmの文法がかなり分かったから」
ワイ「普通に読み書きできそうやな・・・」
ワイ「やってみるで！」

〜おしまい〜

---

1. 配列みたいなやつやで。 ↩

経緯

WKWebViewを使用したWebページの表示・遷移をしていた際にアプリが落ちた。

window.open().location.hrefで別ウィンドウを表示しているのが悪いらしい。

一律で自画面遷移にしてしまえwってことでやってみた。

やったこと

以下のスクリプトをWKNavigationDelegateのfunc webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)内で実行。

window.open()がwindowを返すようにすることで、window.open().location.hrefがwindow.location.hrefとなるようにしたら自画面遷移になった。

スクリプト

window.open = function (open) {
  return function(){
    return window;
  };
}(window.open);

コード

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
  webView.evaluateJavaScript("window.open = function (open) { return function(){return window;};}(window.open);")
}

環境を構築するメリット

eslint

• 一定のコーディングルールを儲けることができる為、コードレビュー負担の削減や可読性の向上を期待できます。
• プラグインを設定することで即時エラーを確認することができる為、開発スピードを向上できます。

prettier

• コードフォーマット機能を備えており、コードフォーマットの統一による可読性の向上を期待できます。
• インデント等を気にせずプログラミングが可能な為、開発スピードを向上できます。

huskey

• コミット時に追加ファイルをeslintとprettierによる自動修正が可能。
• 自動修正できない場合は、コミット時にエラーがある場合はエラー内容が出力されコミットができない。
• 定めた条件をクリアしたものだけがコミットできる為、レビュアーの負担を軽減できます。

eslint prettier huskey で作る簡単環境構築

導入する際の、基本的な構築手順を記載します。
導入後に、必要に応じてルールの追加やプラグインの追加も可能です。

1. eslintをinstall

npm install eslint  --save-dev

2. eslintの初期化

./node_modules/eslint/bin/eslint.js init

いくつか質問されるので、好みやプロジェクトに合わせて選択する。
→ eslintの設定ファイル .eslintrc(ファイル形式選択可能) が作成される。
※ style guideについてはいくつか選択肢がありますが、迷ったら最初は厳しすぎない Standard がオススメです。

3. prettierをinstall

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

4. eslintrcファイルにprettierの設定を追加

extends

  "extends": [
    "plugin:prettier/recommended"
  ]

extends（配列）に設定を追記します。

rule

  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": false
      }
    ]
  }

シングルクォートとセミコロンの設定を追加してます。
ここに追加したいルールを追加することでカスタマイズ可能です。

カスタマイズ例

  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": false
      }
    ],
    "no-var": "error",
    "prefer-const": "error",
    "object-shorthand": "error",
    "prefer-arrow-callback": "error"
  }

5. huskey lint-staged をinstall

npm install husky lint-staged  --save-dev

6. huskeyの設定追加

package.json に追加

{
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

"scripts": {...},などと同階層に追加します。

おまけ. VSCode (Visual Studio Code) で保存時自動修正

1. プロジェクトルート配下に、.vscodeディレクトリを作成
2. .vscode 配下に下記ファイルを配置

setting.json

{
  "eslint.nodePath": "./node_modules/eslint/bin/eslint.js",
  "eslint.autoFixOnSave": true
}

TL;DR

• VueのプロジェクトにJestによる環境を構築するためにやったことをまとめた
• Jestについては説明しない

ディレクトリ構成

├── jest.config.js
├── package.json
├── src
│   ├── js
│   │   ├── components
│   │   └── main.js
│   └── sass
├── tests
│   └── unit
└── webpack.config.js

パッケージのインストール

とりあえず基本的なものをインストールします。

$ npm i -D @vue/test-utils jest vue-jest babel-jest

package.jsonにテストを走らせるためのタスクを追加します。

package.json

"scripts": {
  "test:unit": "jest"
}

Jestの設定をする

jest.config.js

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    "^.+\\.jsx?$": "babel-jest"
  },
  transformIgnorePatterns: ["node_modules/"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/js/$1"
  },
  testMatch: [
    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
  ]
};

試してみる

$ npm run test:unit

> vue.build@1.0.0 test:unit /Users/xxx/project/vue-jest-test
> jest

 PASS  tests/unit/example.spec.js
  HelloWorld.vue
    ✓ renders props.msg when passed (15ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.206s, estimated 5s
Ran all test suites.

スナップショットテストを導入する

$ npm i -D jest-serializer-vue

jest.config.js

jest.config.jsに以下を追加する。

module.exports = {
  ...
  snapshotSerializers: ["jest-serializer-vue"]
  ...
};

追加後のjest.config.js

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    "^.+\\.jsx?$": "babel-jest"
  },
  transformIgnorePatterns: ["node_modules/"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/js/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: [
    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
  ]
};

結果

$ npm run test:unit

> vue.build@1.0.0 test:unit /Users/xxx/project/vue-jest-test
> jest

 PASS  tests/unit/SampleComp.spec.js
  SampleComp.vue
    ✓ renders props.text when passed (16ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 written, 1 total
Time:        1.429s
Ran all test suites.

実行すると、tests/unit/__snapshots__以下にsnapshotのファイルが格納される。

参考

Snapshot Testing

カバレッジを表示させたい場合

jest.config.jsに以下を追加する。

module.exports = {
  ...
  "collectCoverage": true,
  "collectCoverageFrom": ["src/js/**/*.{js,vue}"]
  ...
};

追加後のjest.config.js

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    "^.+\\.jsx?$": "babel-jest"
  },
  transformIgnorePatterns: ["node_modules/"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/js/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: [
    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
  ],
  testURL: "http://localhost/",
  "collectCoverage": true,
  "collectCoverageFrom": ["src/js/**/*.{js,vue}"]
};

エラーが出る場合

Cannot read property 'bindings' of nullとのエラーが出る場合、

$ npm i -D @babel/preset-env

.babelrcを下記の通り修正する。

{ "presets": ["env"] }
↓
{ "presets": ["@babel/preset-env"] }

Upgrade to Babel 7: Cannot read property 'bindings' of null

参考

Vue Test Utils + Jest でVue.jsの単体テストを行う
Configuring Jest

　スライドを作ったらトランジションアニメーションも入れたいところです。とりあえず基本のフェードイン/フェードアウトを入れてみます。どんどんメソッドチェーンが長くなるので、一つ一つ区切って理解していくと良いと思います。

フェードイン/フェードアウト

　前回のコードを元に追加していきましょう。
　ふわっと出したり消したい場合は reveal() を使います。 present.slide().reveal().interval() のように適当な位置に差し込みます。スライド開始でフェードインさせたいので、 slide() の後ろに reveal() を入れています。ここで一つ注意が必要で、トランジションの単位でも end() を入れる必要があるということです。ここではスライドが切り替わるタイミングでフェードアウトさせたいので、スライド区切りの end() の手前にもう一つ end() を入れています。

　以下のコードでは一枚目のスライドのみにフェードイン/フェードアウトを適用しています。 end() を削除してみて動作の違いを確認してみて下さい。

　また、同じようにして二枚目もフェードイン/フェードアウトさせるようにしてみて下さい。

present.slide().reveal().interval({
  width: 2,
  expr: function (emit, x, i, time) {
    emit(x, 0);
  },
  items: 1,
  channels: 2,
}).line({
  color: 0x3090FF,
  width: 10,
}).end().end()
  .slide().interval({
    width: 128,
    expr: function (emit, x, i, time) {
      var d = Math.sin((x + time) * 2);
      emit(x, d * .5);
    },
    items: 1,
    channels: 2,
  }).line({
    color: 0xFF3090,
    width: 10,
  });

パラメータの指定

　遷移の期間を少し短くしてみましょう。 reveal({ duration: 0.1 }) のようにパラメータを渡してみましょう。 duration のデフォルト値は 0.3 なので三倍早くなるはずです。他にも色々なパラメータがあるので、ドキュメントを見ながら試してみて下さい。

コード全体

　二枚目のスライドにも reveal() を適用したコード全体は下記の通りです。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>MathBox - XYZW Test</title>
    <script src="../../build/mathbox-bundle.js"></script>
    <link rel="stylesheet" href="../../build/mathbox.css">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    </head>
    <body>
    <script>
     mathbox = mathBox({
         plugins: ['core', 'controls', 'cursor'],
         controls: {
         klass: THREE.OrbitControls
         },
     });
     three = mathbox.three;

     three.camera.position.set(2.3, 1, 2);
     three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);

     view = mathbox.cartesian({
         range: [[-6, 6], [-1, 1], [-1, 1]],
         scale: [6, 1, 1],
     });

     present = view.present({
         index: 1
     })

     if (window == top) {
         window.onkeydown = function (e) {
         switch (e.keyCode) {
             case 37:
             case 38:
             present.set('index', present.get('index') - 1);
             break;
             case 39:
             case 40:
             present.set('index', present.get('index') + 1);
             break;
         }
         }
     }

     present.slide().reveal({
         duration: 0.1,
     }).interval({
         width: 2,
         expr: function (emit, x, i, time) {
         emit(x, 0);
         },
         items: 1,
         channels: 2,
     }).line({
         color: 0x3090FF,
         width: 10,
     }).end().end()
        .slide().reveal({
            duration: 0.1,
        }).interval({
            width: 128,
            expr: function (emit, x, i, time) {
            var d = Math.sin((x + time) * 2);
            emit(x, d * .5);
            },
            items: 1,
            channels: 2,
        }).line({
            color: 0xFF3090,
            width: 10,
        });

     present.grid({
         stroke: 'dashed',
     });
    </script>
    </body>
</html>

※ほぼ自分用メモ。
e-Gov法令APIでは，法令に書式等が含まれている場合，その書式の画像やPDFを一つのZIPに纏めたものをBase64文字列にしたものを，ImageData要素のテキストとして返します。
そこで，このBASE64文字列から元のファイルを復元し，たとえばHTML内に表示したりすることが考えられます。
ImageData要素からのテキストの取り出しはまぁ後でやるとして，とりあえずファイルをちゃんと取り出すところまで。
法技研六法に組み込んだら，もうちょっと丁寧に書き直すかも。

1. Base64文字列をバイナリに変換
2. バイナリ文字列をUint8Arrayに変換
3. Zlib.Unzipを使って，2.のUint8Arrayを解凍
4. 解凍したものに含まれる各ファイル（Uint8Arrayになっている）をBase64文字列に変換
5. Base64文字列ファイルを，HTMLに埋め込む。

1. Base64文字列をバイナリに変換

var imageData = "UEsDBBQACAgIAJx4204AAA（中略）AAAA";
var binaryString = atob(imageData);

2 バイナリ文字列をUint8Arrayに変換

var u8a = Uint8Array.from(binaryString.split(""), e => e.charCodeAt(0))

3. Zlib.Unzipを使って解凍

var unzipped = new Zlib.Unzip(u8a);

4. 各ファイルをBase64文字列に変換

var b64s = [];
var filenames = unzipped.getFilenames();
for(var i in filenames ){
    var buffer = unzipped.decompress( filenames[i] );
    var arr = Array.from(buffer, e => String.fromCharCode(e)String.fromCharCode(e)).join(""));
    b64s[i] = arr.join("");
}

5. HTMLに埋め込む（PDFの場合）

for(var i in b64s){
  var obj = document.createElement("object");
  obj.setAttribute("type", "application/pdf" );
  obj.setAttribute("data", "data:application/pdf;base64,"+b64s[i]);
  obj.setAttribute("width", "100%");
  obj.setAttribute("height", "100%");

  document.body.appendChild(obj);
}

参考文献：
-http://var.blog.jp/archives/62330155.html
-https://github.com/imaya/zlib.js
-https://qiita.com/katzueno/items/c490361c3274d0108e7d
-https://stackoverflow.com/questions/43234936/providing-the-object-tag-with-data-directly
-https://www.e-gov.go.jp/elaws/pdf/houreiapi_shiyosyo.pdf

※記事最下部にHTMLファイルの内容が掲載されております。

マウスのクリックや投下状態（これらはマウスイベントと言われています）を検知して、実際に絵を描くことができるページを作ってみましょう！

今回はこちらの参考サイト様を頼りにプログラムを作っていきます！
ではいきましょう！

※こちらの記事は、本チュートリアル記事Part1をお読みになった方か、canvasの前提知識をある程度持っている方向けに書かれております。

チュートリアル続き

まずはPart0、1でやってきた流れをさらっと復習

<body onload="init();">
  <canvas id="chokowa" width="500" height="300"></canvas>
</body>

Canvas領域を定義！

<script>
  function init() {
    // code here.
  }
</script>

init関数を定義！Canvasスクリプトコードを書き込むのはこの中でしたね！

ここからjsコードの解説に移ります！

var canvas = document.getElementById('chokowa');
var context = canvas.getContext('2d');

これもPart1の通りです！IDをトリガーにしてcanvas領域を有効化、そのcanvas領域にcontextという図形の概念的なものを設置します！

復習は以上！ついにお絵描きツールの設定を行っていきます！

var drawing = false;
var before_x = 0;
var before_y = 0;

・いみ
いちぎょうめはまだおえかきしてないっていみです。
にぎょうめとさんぎょうめは、むずかしいおはなしになります。
きゃんばすではふるいてんとあたらしいてんをつないでせんにするので、ここではふるいてんをせっていしています。

1行目に関してはとりあえず抽象的な理解だけしておきましょう！drawing、つまり線を書いている状態かどうかを判定する変数です。デフォルトはもちろんfalse＝書いてない状態ですね！

2、3行目ですが、これに関してはそれはそれは深いお話で、、、
まず、マウスを利用したcanvasを利用したお絵描きツールは多くの方々に作られています。
そしてそれらの線描画（＝お絵描き）の原理のほとんどは「さっきまでマウスポインタが置かれていた点」と「今マウスポインタが置かれている」を『線で繋ぐ』というものです。
今回作るお絵描きツールも例にもれず同じ原理を採用しています。
ここまできたら想像できるでしょうか・・・！このbefore_○というのは「さっきまでマウスポインタが置かれていた点」の定義にあたります！

Canvasお絵描きツールの基礎概念を理解した（？）ところで、マウスイベントによる動作を定義していきます。

canvas.addEventListener('mousemove', draw_canvas);

canvas.addEventListener('mousedown', function(e) {
  drawing = true;
  var rect = e.target.getBoundingClientRect();
  before_x = e.clientX - rect.left;
  before_y = e.clientY - rect.top;
});

canvas.addEventListener('mouseup', function() {
  drawing = false;
});

・いみ
まうすをおしたりはなしたりうごかしたりしたときのせっていをしています。

一気に来ましたね！まずは状況の把握から！！！
「canvas.addEventListener(...」という行が三つありますね！そしてそれぞれその後に『mousemove』、『mousedown』、『mouseup』などと書いてあります！
これら三つに関しては察しがつきましたでしょうか！それぞれ、『マウスが動いているとき』、『マウス（の右クリック）が投下されたとき』『マウスの投下が解除されたとき』のイベントのことです！

では、「addEventListener()」とは・・・？
（その前のcanvasはもう分かりますね！canvasオブジェクトに対してaddEventListener()で行われる処理を適用するという意味あいです！）

理解するにあたって、一番下のmouseupイベントの部分が分かりやすいと思うので、そこを基準に解説していきます！

canvas.addEventListener('mouseup', function() {
  drawing = false;
});

・いみ
まうすがはなれたらせんをかくのをやめます。

そもそもaddEventListener()は、次のように定義されています！

[オブジェクト名].addEventListener('[イベント]', [イベントを検知した場合に実行する関数])

[イベント]というのは様々で、上記のマウスが動く、投下される、投下が解除される・・・といったものの他に、タッチ操作可能デバイス上でタッチされた、タッチされたままスライドされた、タッチが離れた・・・などもあり、それぞれmouse○○、touch○○といった名前が定義されています。
（イベント種については、また別の機会にまとめてみたいと思います）
よって先述のコードは
「描画領域(canvasオブジェクト)上でマウスの投下が解除(mouseup)された場合、描画を無効化(drawing = false;)するという動作を行う」
という処理になります！
分かりやすく言うと、「紙からペンが離れた場合、インクを落とすのをやめる」ということになります！当たり前ですね！！！

それでは改めてmousemoveとmousedownに関するコードも見ていきましょう！

canvas.addEventListener('mousemove', draw_canvas);

canvas.addEventListener('mousedown', function(e) {
  drawing = true;
  var rect = e.target.getBoundingClientRect();
  before_x = e.clientX - rect.left;
  before_y = e.clientY - rect.top;
});

・いみ
まうすがうごいたらあるかんすうをじっこうします。それはまだひみつです。
まうすがくりっくされたらいかのどうさをします。

前者はマウスが動いている間中、draw_canvasという関数を利用するということですね！わかりやすい！
（恐らくdraw_canvas関数の中には、連続的に点と点を繋ぎ合わせるような処理が書かれているんだろなぁ・・・的な想像はつきましたでしょうか！？）

後者はマウスが投下された際の処理が記述されていますね。
まずは描画状態を有効化（drawing = true;）、マウスが投下された。つまり紙にペン先が触れている状態なので当然ですね！

では↓は何をしているのでしょうか！

  var rect = e.target.getBoundingClientRect();
  before_x = e.clientX - rect.left;
  before_y = e.clientY - rect.top;

・いみ
まうすのいちにいんくがおちるようにします。

このコードに関しては流用するにしても形式を変えて使うことはないと思うので、簡単に説明いたします！
まずコンピュータの画面上におけるxy座標の対応ですが、領域の左上が(x,y)=(0,0)となっており、右方向に行くにつれてxが増加し、下方向に行くにつれてyが増加していきます！
しかし！canvas上でマウスイベントを取り扱うにあたっては、canvas領域の左上を(x,y)=(0,0)としたいですよね！1行目の「e.target.getBoundingClientRect()」では、イベントが起きた要素（＝target、今回はcanvasオブジェクトですね！）の座標を取得します。
それをclientX,Y、すなわちクライアントのマウスポインタの絶対座標から差し引くことで、相対座標を取得し、canvas領域の左上を(x,y)=(0,0)と考えられるようにするわけです！

（英語サイトですが、x,y座標の考え方はこちら。
ついでにgetBoundingClientRect()についてはこちらに分かりやすく書いてありました！）

とっても長くなりましたが、次に移ります。

    function draw_canvas(e) {
        //code here
    }

先ほどmousemoveの際にひょっこり登場していたdraw_canvas()関数について解説していきます。「マウスを投下して動かしている間描画を行う」という、言ってしまえば線描画のメイン動作を記述していきます！
（もちろん投下せずに動かしている間の処理も考えてあげなければいけません！）

    function draw_canvas(e) { 
        // 追記！
        if (!drawing){
        return
        };
    }

まずはボタンが押されていない場合の処理から・・・！
これは言わずもがなですね。drawingがtrueでない（描画が無効である）ならばそのまま返します。

それでは本格的な処理！！！

    function draw_canvas(e) {
        if (!drawing){
        return
        };
        // 追記！
        var rect = e.target.getBoundingClientRect();
        var x = e.clientX - rect.left;
        var y = e.clientY - rect.top;
    }
}

mousedownの時の処理と同じですね！rectを使って、マウスポインタの相対座標で考えられるようにしてあげます。

描画する際に引く線について定義してあげましょう

    function draw_canvas(e) {
        if (!drawing){
        return
        };

        var rect = e.target.getBoundingClientRect();
        var x = e.clientX - rect.left;
        var y = e.clientY - rect.top;
        // 追記！
        context.lineCap = 'round';
        context.strokeStyle = 'black';
        context.lineWidth = '10';
    }

下2行はPart1で解説しましたが、lineCapは初登場ですのでちょっとだけ。簡単に言えば線の終端です。roundなので端が丸い線種にしたってことですね！

それではここからが本番というか「点と点を連続的に繋いでいく」動作を記述していきます。

    function draw_canvas(e) {
        if (!drawing){
        return
        };

        var rect = e.target.getBoundingClientRect();
        var x = e.clientX - rect.left;
        var y = e.clientY - rect.top;

        context.lineCap = 'round';
        context.strokeStyle = 'black';
        context.lineWidth = '10';
        // 追記！
        context.beginPath();
        context.moveTo(before_x, before_y);
        context.lineTo(x, y);
        context.stroke();
    }

さて、1行目はPart1で登場しましたが、初期化的な何か！という雑な説明をしていたと思います！まあ実際ほんとに初期化的な何かなのですが、この5行を連続的に見ていくと理解が深まるというか分かりやすいと思いますので、流れを簡単に書きます！

context.beginPath();　で現在のパスを初期化
↓
context.moveTo(before_x, before_y);　でパスの開始座標を指定
↓
context.lineTo(x, y);　で座標を指定し、開始座標とパスを形成
↓
context.stroke();　でパスを先ほど定義した線種として有効化

『パス』というのは、ある2点をリンクさせる線のことですね！

「マウスが動いたら以前置かれていた座標点と今の座標点を繋ぐ」ところまでできました。
もし次もまた連続してmousemoveイベントが発生するとしたら、その時の「以前置かれていた座標点」は、「今の座標点」ということになりますよね！なので、以下のコードを追記します。

    function draw_canvas(e) {
        if (!drawing){
        return
        };

        var rect = e.target.getBoundingClientRect();
        var x = e.clientX - rect.left;
        var y = e.clientY - rect.top;

        context.lineCap = 'round';
        context.strokeStyle = 'black';
        context.lineWidth = '10';

        context.beginPath();
        context.moveTo(before_x, before_y);
        context.lineTo(x, y);
        context.stroke();
        context.closePath();
        //追記！
        before_x = x;
        before_y = y;
    }

・いみ
まえにまうすがいたばしょといままうすがいるばしょをせんでつなげます。

これでdraw_canvasは完成です！動いたら点を繋ぐ、これを連続的に行うことができますね！

ここまでで、投下される、離される、動く、マウスのイベントによる動作を定義し、線も引かれるようにしました。
つまりもうCanvas領域上でお絵描きができちまうんだ！！！！！！！！！！！！！
さっそくやってみましょう！！！！！！！！！！！！！！！！！

ちなみにここまでのHTMLファイルの全貌はこんな感じ。

chokowa.html

<!DOCTYPE html>
<html lang="ja">
<head>
<script type="text/javascript">
function init(){
    var canvas = document.getElementById("chokowa");
    var context = canvas.getContext('2d');
    var drawing = false;
    var before_x = 0;
    var before_y = 0;
    canvas.addEventListener('mousemove', draw_canvas);
    canvas.addEventListener('mousedown', function(e) {
      drawing = true;
      var rect = e.target.getBoundingClientRect();
      before_x = e.clientX - rect.left;
      before_y = e.clientY - rect.top;
    });
    canvas.addEventListener('mouseup', function() {
      drawing = false;
    });
    function draw_canvas(e) {
        if (!drawing){
        return
        };     
        var rect = e.target.getBoundingClientRect();
        var x = e.clientX - rect.left;
        var y = e.clientY - rect.top;       
        context.lineCap = 'round';
        context.strokeStyle = 'black';
        context.lineWidth = '10';  
        context.beginPath();
        context.moveTo(before_x, before_y);
        context.lineTo(x, y);
        context.stroke();
        context.closePath();
        //追記！
        before_x = x;
        before_y = y;
    }
}
</script>   
<meta charset="utf-8">
<title>ＴＵＴＯＲＩＡＬ</title>
</head>
<body onload="init();">
    <canvas id="chokowa" width="500" height="300" style="border:#1C1C1C solid 2px"></canvas>
</body>
</html>

ではレッツお絵描き！！！！！！！！！

やったぜ。

でもまだ消しゴムとかがないので質素ですね。

最後に

ようやく消せない・色変えられない・線の太さ変えられない・ブラシとか何もないと4拍子揃ったワクワクドキドキお絵描きツールの完成です！
タッチ対応は後回しにして、次回は機能を充実させていきますか！

参考サイト様

canvasで作るお絵描きツール：https://kigiroku.com/frontend/canvas_draw.html
canvasにおけるx,y座標：http://www.andrewsmyk.com/mobiledev/week-04/
getBoundingClientRect()についてのとっても分かりやすい記事：https://cartman0.hatenablog.com/entry/2015/06/29/022301)に分かりやすく書いてありました！