やったこと

Google APP Scriptでマネーフォワードからのメールを定期取得
LINE Notify APIを使用してメール本文をLINEに通知

なぜやるのか

• 不正利用やサービスの解約し忘れで意図せず引き落とされてないか怖い
• できるだけリアルタイムに通知を受け取りたい
• 複数のクレジットカードを使用しているので、それぞれの明細を把握するのは手間
• Gmail見る頻度低いので日常的に目に触れるLINEに通知したい

なぜGoogle APP Scriptか

• マネーフォワードにLINE通知機能はない
• IFTTTはLINE通知できるが、Gmailをアクション元に設定できない
• ZapierはGmailをアクション元に設定できるが、LINE通知できない

--> 仕方ないのでGoogle APP Scriptで書く

本題

Gmail側の設定で送信元メールアドレスがマネーフォワードのメールにラベルを付ける

ラベルを付けるとlabel:"ラベル名"で検索できるようになります。

LINE通知に必要なトークンを取得する

LINEに通知はLINE Notify APIを使用します。

以下の記事が分かりやすく説明されていました。
[超簡単]LINE notify を使ってみる

Google APP Scriptで直近30分間に受信したラベルのついたメールを取得してLINEに通知

以下のコードを書く。

var lineToken = "ラインのトークン"
var interval = 30
var label = "ラベル名(今回はmoney_forward)"

function fetchMoneyForwardMail() {
  //取得間隔
  var now = Math.floor(new Date().getTime() / 1000);
  var time = now - (60 * interval);
  var searchCond = '(label:' + label + ' after:' + time + ')';

  var thread = GmailApp.search(searchCond);
  var messages = GmailApp.getMessagesForThreads(thread);
  var formattedMsgs = [];
  for (var i = 0; i < messages.length; i++) {
    formattedMsgs[i] = "\n【date】: " + messages[i].slice(-1)[0].getDate() +
      "\n【Subject】: " + messages[i].slice(-1)[0].getSubject() +
      "\n【Body】: \n" + messages[i].slice(-1)[0].getPlainBody().slice(0, 200);
    return formattedMsgs;
  }
}

function send_line(message) {
  var payload = {
    'message': message
  };
  var options = {
    "method": "post",
    "payload": payload,
    "headers": {
      "Authorization": "Bearer " + lineToken
    }
  };
  UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}

function main() {
  newMessages = fetchMoneyForwardMail()
  if (newMessages && newMessages.length > 0 && newMessages.length < 50) {
    for (var i = newMessages.length - 1; i >= 0; i--) {
      Logger.log(newMessages[i])
      send_line(newMessages[i])
    }
  }
}

Google APP Scriptの時間ベースイベントで上記処理を30分に一度実行する

以下のように設定します。
GASのスクリプトを指定した時間に自動で実行する方法

以上です！

こんにちは、wattak777です。

一ファイルを送信する、というサンプルは幾つかあるのですが、requestとform-dataを組み合わせて送る場合、複数ファイルの場合、例えばforループで送るようにしても1つ目、2つ目、3つ目と送りきる前にどんどん送ってしまうため同期的に送ることが出来ません。

なので、ちょっとサンプルを作ってみました。

サーバー側はmulterを使った以下のサンプル。

server.js

var express = require( 'express' ) ;
var app = express() ;
var multer = require( 'multer' ) ;

app.post('/file_upload', multer({dest: ファイルを置くパス}).single('my_file'), function (req, res) {
    console.log(req.file.path, req.file.originalname) ;
    res.sendStatus(200) ;
});

var server = app.listen(12345, function() {
    console.log("listening at port %s", server.address().port) ;
});

で、本題のクライアント側は以下の実装。
request-promiseを使って同期的に送るようにしました。

client.js

const fs = require('fs') ;
const request = require('request-promise') ;

const FileNameList = [
    'test1.bin',
    'test2.bin',
    'test3.bin'
] ;
var FileNameIndex = 0 ;

var returnCode = httpPost() ;

function httpPost() {
    const FormData = {
        my_file: {
            value: fs.createReadStream(ファイルのパス + FileNameList[FileNameIndex]),
            options: {
                filename: FileNameList[FileNameIndex],
                contentType: 'application/octet-stream'
            }
        }
    }

    const options = {
        uri: "http://サーバーのIPアドレス:12345/file_upload",
        formData: FormData,
        method: 'post',
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }

    var response = request(options)
        .then( function(body) {
            console.log( 'then :' + body ) ;
            onEnd() ;
        })
        .catch( function(err) {
            console.log( 'catch error :' + err ) ;
        }) ;
    return response.statusCode ;
}

function onEnd() {
    console.log( 'Index ' + FileNameIndex + ' is finish.' ) ;
    FileNameIndex = FileNameIndex + 1 ;
    if ( FileNameIndex >= FileNameList.length ) {
        console.log( 'End Operation.' ) ;
    } else {
        var res = httpPost() ;
    }
}

console.log( 'Start Operation.' ) ;

とやると、クライアント側の表示は以下のようになります。

$ node client.js
Start Operation.
then :OK
Index 0 is finish.
then :OK
Index 1 is finish.
then :OK
Index 2 is finish.
End Operation.

インプットボックスの文字数制限

最近、インプットボックスの文字数制限を実装する必要があり、日本語入力中の挙動で結構はまりました。とある方のアドバイスで解決したので、備忘録として残しておこうと思います。アドバイスしてくださった方、ありがとうございました。なお、今回はVue.jsでの実装で直面した問題でしたが、Vue.js以外でも(JavaScriptなら)同様のことが起こりうると思います。(より良い実装の情報があれば、ぜひ教えてください。)

シンプルにmaxlengthを指定した実装

以下ソースコードで問題ないと思いきや...

ソースコード

html

<div id=app>
  <input type="text" v-model="test" maxlength="5">
  {{test}}
</div>

Vue.js

const app = new Vue ({
  el: '#app',
  data: {
    test:''
  }
})

もし、挙動を試してみたい方は、以下codepenからお試しください。

See the Pen This form can't restrict max length on Japanese language input by Yasunori MATSUOKA (@YasunoriMATSUOKA) on CodePen.

微妙な状況に

しかし、この実装では日本語入力中に未確定状態では最大文字数のmaxlengthを超えた部分についてもインプットボックスに表示されてしまうという状況に悩まされていました。(Enter押す等して確定すれば、maxlength以降の文字は消えるのですが、その前の未変換の状態や変換中はmaxlength以上の文字が入力できているような印象をユーザーに与えてしまうという点で微妙な状況でした。)

解決策

inputイベント時にevent.target.valueの長さをチェックし、maxlengthを超えている場合はinput boxからフォーカスを外す(event.target.blur()する)

解決策のソースコード

html

<div id=app>
  <input type="text" v-model="test" maxlength="5" @input="onInput">
  {{test}}
</div>

Vue.js

const app = new Vue ({
  el: '#app',
  data: {
    test:''
  },
  methods: {
    onInput (event) {
      console.log('onInput', event)
      if (event.target.value.length > event.target.getAttribute("maxlength")) {
        event.target.blur()
      }
    }
  }
})

無理矢理感は否めませんが、これで、maxlengthを超えた際は、自動的に対象のinput boxからフォーカスが外れ、日本語入力が強制的に確定され、maxlength以降の仮入力中の文字がinput boxに表示されることが無くなりました。

試してみたい方は、以下のcodepenでお試しください。

See the Pen Restrict max length on Japanese language input by Yasunori MATSUOKA (@YasunoriMATSUOKA) on CodePen.

試したがうまくいかなかったもの

keydownイベント時にevent.target.valueの長さをチェックし、maxlengthを超えている場合はイベントを無効化する

うまくいかなかった実装のソースコード

html

<div id=app>
  <input type="text" v-model="test" maxlength="5" @keydown="onKeyDown">
  {{test}}
</div>

VUe.js

const app = new Vue ({
  el: '#app',
  data: {
    test:''
  },
  methods: {
    onKeyDown (event) {
      console.log('onKeyDownEvent', event)
      if (event.target.value.length >= 5) {
        if (event.code !== "Backspace" && event.code !== "Delete" && event.code !== "ArrowRight" && event.code !== "ArrowLeft" && event.code !== "ArrowUp" && event.code !== "ArrowDown" && event.code !== "PageUp" && event.code !== "PageDown" && event.code !== "Enter" && event.code !== "Space" && event.code !== "Tab") {
          event.preventDefault()
          console.log('preventDefault', event)
        }
      }
    }
  }
})

IME ONの状態での入力中に、入力をJavaScriptで制御するのは難しいようで、半角英数ならば意図した通に動くものの、日本語入力中には意図した通り動作させることができませんでした。
試してみたい方は、以下codepen上でお試しください。

See the Pen Try to apply max length restriction on input Japanese language (don't work well) by Yasunori MATSUOKA (@YasunoriMATSUOKA) on CodePen.

まとめ

半角英数で完結する言語うらやましい...日本語入力等のIME ONにする必要がある言語はこういうとき大変...

こんにちは、wattak777です。

一ファイルを送信する、というサンプルは幾つかあるのですが、requestとform-dataを組み合わせて送る場合、複数ファイルの場合、例えばforループで送るようにしても1つ目、2つ目、3つ目と送りきる前にどんどん送ってしまうため同期的に送ることが出来ないため、ちょっとサンプルを作ってみました。

サーバー側はmulterを使った以下のサンプル。

server.js

var express = require( 'express' ) ;
var app = express() ;
var multer = require( 'multer' ) ;

app.post('/file_upload', multer({dest: ファイルを置くパス}).single('my_file'), function (req, res) {
    console.log(req.file.path, req.file.originalname) ;
    res.sendStatus(200) ;
});

var server = app.listen(12345, function() {
    console.log("listening at port %s", server.address().port) ;
});

で、本題のクライアント側は以下の実装。
request-promiseを使って同期的に送るようにしました。

client.js

const fs = require('fs') ;
const request = require('request-promise') ;

const FileNameList = [
    'test1.bin',
    'test2.bin',
    'test3.bin'
] ;
var FileNameIndex = 0 ;

var returnCode = httpPost() ;

function httpPost() {
    const FormData = {
        my_file: {
            value: fs.createReadStream(ファイルのパス + FileNameList[FileNameIndex]),
            options: {
                filename: FileNameList[FileNameIndex],
                contentType: 'application/octet-stream'
            }
        }
    }

    const options = {
        uri: "http://サーバーのIPアドレス:12345/file_upload",
        formData: FormData,
        method: 'post',
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }

    var response = request(options)
        .then( function(body) {
            console.log( 'then :' + body ) ;
            onEnd() ;
        })
        .catch( function(err) {
            console.log( 'catch error :' + err ) ;
        }) ;
    return response.statusCode ;
}

function onEnd() {
    console.log( 'Index ' + FileNameIndex + ' is finish.' ) ;
    FileNameIndex = FileNameIndex + 1 ;
    if ( FileNameIndex >= FileNameList.length ) {
        console.log( 'End Operation.' ) ;
    } else {
        var res = httpPost() ;
    }
}

console.log( 'Start Operation.' ) ;

とやると、クライアント側の表示は以下のようになります。

$ node form2_promise.js
Start Operation.
then :OK
Index 0 is finish.
then :OK
Index 1 is finish.
then :OK
Index 2 is finish.
End Operation.

顔認識がjsだけでもそれなりに動くのを今更知ったので触ってみた。
顔晒すのに抵抗感がある古い人間なので文中画像少なめです。

成果物

Git: https://github.com/engabesi/face-nicolas
GithubPages: https://engabesi.github.io/face-nicolas/

やること

• expressでlocalhostを建てる
• face-api.jsで顔の矩形を取る
• 顔に画像を被せる
• GithubPagesにdeploy

face-api.js

今回顔認識に使うライブラリはこちら
https://github.com/justadudewhohacks/face-api.js
jsだけでそれなりの精度とパフォーマンスを出せます。
複数人も認識可能。
ランドマークや表情、顔認証も出来ます。
demoはこちら
https://justadudewhohacks.github.io/face-api.js/face_and_landmark_detection/

注意点

face-api.jsはWebGLを使用しています。
その為ブラウザの設定でハードウェアアクセラレーションをオフにしている場合上手く動作しない可能性があります。

expressでlocalサーバーを建てる

android等でも気軽にテストするためにまずはlocalhostで動作するようにします。
後にgithubPagesも利用したいため、以下の構成にします。

構成

root/
├─ app.js
└─ docs/
    ├─ index.html
    ├─ images/
    └─ js/
       ├─ index.js
       └─ lib/
          ├─ face-api.min.js
          └─ models/
             ├─ tiny_face_detector_model-shard1
             └─ tiny_face_detector_model-weights_manifest.json

face-api.min.js, 及びmodels内ファイルは以下のrepoから取ってきます
https://github.com/justadudewhohacks/face-api.js/tree/master/dist
https://github.com/justadudewhohacks/face-api.js/tree/master/weights

expressを導入します。

shell

yarn init -y
yarn add express

docs\index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer src="./js/lib/face-api.min.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      canvas {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <video id="video" width="720" height="560" autoplay muted></video>
    <script defer src="js/index.js"></script>
  </body>
</html>

app.js

const express = require("express");
const app = express();

const path = require("path");
app.listen(8080, () => {
  console.log("Running at Port 8080...");
});

app.use(express.static(path.join(__dirname, "docs")));

app.use((req, res) => res.sendStatus(404));

これでshellにnode app.jsと打ち、http://localhost:8080/ にアクセスするとページが開きます(今は真っ白)

webcamera設定

docs\index.js

const startVideo = async video => {
  try {
    const constraints = { audio: false, video: {} };
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    video.srcObject = stream;
  } catch (error) {
    console.error(error);
  }
};

(async () => {
  const video = document.querySelector("video");
  await startVideo(video);
})();

これでlocalhostを開くとwebcameraの映像が取れているはずです。

顔の矩形を取る

まずmodelを読み込みます。

docs\index.js

+ const loadModels = async () => {
+   await Promise.all([
+    faceapi.nets.tinyFaceDetector.loadFromUri(`/js/lib/models`)
+  ]);
+ };

  (async () => {
    const video = document.querySelector("video");
+   await loadModels();
    await startVideo(video);
  })();

次に顔を認識して矩形描画処理を追加します。

docs\index.js

(async () => {
  const video = document.querySelector("video");
  await loadModels();
  await startVideo(video);
// --- ADD ---
  video.addEventListener("play", () => {
    // overlay canvas作成
    const canvas = faceapi.createCanvasFromMedia(video);
    document.body.append(canvas);
    const displaySize = { width: video.width, height: video.height };
    faceapi.matchDimensions(canvas, displaySize);

    const tinyFaceDetectorOption = {
      // default 416
      inputSize: 224,
      // default 0.5
      scoreThreshold: 0.5
    };
    setInterval(async () => {
      const results = await faceapi.detectAllFaces(
        video,
        new faceapi.TinyFaceDetectorOptions(tinyFaceDetectorOption)
      );
      if (results.length <= 0) return;
      // 検出結果をcanvasのサイズにリサイズ
      const resizedResults = faceapi.resizeResults(results, displaySize);
      // canvasの内容をクリア
      canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
      // 矩形描画
      faceapi.draw.drawDetections(canvas, resizedResults);
    }, 100);
  });
// --- ADD ---
})();

これでscoreが記載された矩形が顔に被さって表示されるようになります。

顔に画像を被せる

検出結果から座標を取ってその位置に画像を被せてみます。

docs\index.js

(async () => {
  const video = document.querySelector("video");
+ // 画像セットアップ
+ const image = new Image();
+ image.src = `/images/cage_neutral.png`;
  await loadModels();
  await startVideo(video);
  video.addEventListener("play", () => {
    const canvas = faceapi.createCanvasFromMedia(video);
    document.body.append(canvas);
    const displaySize = { width: video.width, height: video.height };
    faceapi.matchDimensions(canvas, displaySize);
    const tinyFaceDetectorOption = {
      // default 416
      inputSize: 224,
      // default 0.5
      scoreThreshold: 0.5
    };
    setInterval(async () => {
      const results = await faceapi.detectAllFaces(
        video,
        new faceapi.TinyFaceDetectorOptions(tinyFaceDetectorOption)
      );
      if (results.length <= 0) return;
      const resizedResults = faceapi.resizeResults(results, displaySize);
      canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
-     // faceapi.draw.drawDetections(canvas, resizedResults);
+     resizedResults.forEach(detection => {
+       // 矩形のtopはデコあたりなので調整
+       const marginVal = 0.4;
+       // 矩形の情報はdetection.boxに格納されている
+       const width = detection.box.width;
+       const height = detection.box.height * (1.0 + marginVal);
+       const x = detection.box.x;
+       const y = detection.box.y - detection.box.height * marginVal;

+       canvas.getContext("2d").drawImage(image, x, y, width, height);
+     });
    }, 100);
  });
})();

これで自分の顔に画像を貼り付けることが出来ました。
他にもmodelやdetection時に.with~~とするだけで表情やランドマーク等の情報を取れます。
詳しくは公式README参照。自分のgitにあげている物にも画像調達に飽きて中途半端になっていますが表情を取るコードも記載してあります。

GithubPages

コードをrepositoryに上げたら
repository > settings > Options > GithubPages > Sourceを
master branch /docs folderにすればGithubPagesにデプロイすることが出来ます。
だから、ディレクトリ名をdocsにする必要があったんですね。

注意点

上記コードでは画像のpathを直打ちしています。
github.ioにデプロイする場合は問題ありませんが、github.io/SUB_REPO/にデプロイした場合、ルートURLがgithub.io扱いとなり、SUB_REPOが飛ばされてしまってpathがおかしくなってしまいます。
jekyllの使用をgithubは推奨していますが試して遊ぶだけの場合ちょっと面倒です。
暫定対策としてpath前に直接SUB_REPO名をくっつけてあげると一応動きます。

まとめ

たった数分でブラウザ完結の顔認識ができるなんて素晴らしい世の中になりました。
現状のコードだとスマートフォンで見た場合矩形がものすごく横長になってしまっているのでその辺の対応をしだすとヘビーになるかもしれませんがちょっと遊んで見るぐらいだと非常に有用だと思います。

他にもclmtrackr.jsやpico.js、更にはChromeの機能だけでできるShape Detection API等様々なライブラリがありますので是非触って遊んでみてください。

先日、 Tynder という、TypeScript/JavaScript用のスキーマ検証ライブラリを公開しました。

Tynder は、TypeScriptのサブセット＋独自の拡張文法から成るDSLによって

1. 型の検査
2. 単独の項目の必須・値の長さ・範囲や文字列パターンの検証
3. 複数項目の相関や整合性検証の一部 (Union typeによる)

を宣言的に行うことができます。
また、カスタムエラーメッセージを表示することができます。

今回はTynderを使用して、kintoneアプリのフィールド値を宣言的に検証したいと思います。

動機

kintoneは、標準で項目の必須チェック、文字列項目の文字数レンジチェック、数値項目のレンジチェック機能等を備えていますが、やや複雑な条件でのチェックを行うためには、JavaScriptによるカスタマイズを行う必要があります(例えば、条件付き必須、文字列のパターンマッチ)。
しかし、イベントハンドラ(または、分離した関数)で手続き的にチェックを記述するのは、可読性が低く、また、チェック対象のデータはフィールド型等のメタデータも含んでおり、データの階層が深く、正直触りたくありません。

完成イメージ

サブテーブルを含む各フィールドに検証エラーのエラーメッセージを表示します。
以下のサンプルでは、敢えて標準の必須項目等は設定していませんが、必須などのエラーが表示されました。

設定方法

アプリの設定画面から、以下のJavaScriptファイルを追加してください。

• tynder.min.js
• lib.js (下述)
• app.js (下述)

コード

lib.js

// `event.record`をメタデータ(フィールド型等)を含まない普通のデータに変換します
function mapRecord(rec) {
    const ret = {};
    const keys = Object.keys(rec);
    const subTableMapper = x => mapRecord(x.value);
    for (const k of keys) {
        switch (rec[k].type) {
        case 'NUMBER':
            ret[k] = typeof rec[k].value === 'string' ?
                Number(rec[k].value.replace(/[,]/g, '')) :
                rec[k].value;
            break;
        case 'SUBTABLE':
            ret[k] = rec[k].value.map(subTableMapper);
            break;
        default:
            ret[k] = rec[k].value;
            break;
        }
    }
    return ret;
}

// サブテーブルのブランク行を削除します(新規行のみ)
function removeBlankTableRow(rec, tableFieldCode) {
    const validRecs = [];
    for (const r of rec[tableFieldCode].value) {
        if (r.id !== null) {
            validRecs.push(r);
            continue;
        }
        const keys = Object.keys(r.value);
        for (const k of keys) {
            const q = r.value[k];
            if (q.value !== void 0 && q.value !== null && q.value !== '') {
                validRecs.push(r);
                break;
            }
        }
    }
    rec[tableFieldCode].value = validRecs;
    return rec;
}

// フィールドにエラーメッセージを表示します
function displayValidationErrorMessages(event, ctx) {
    for (const m of ctx.errors) {
        const dp = m.dataPath.split('.').map(x => x.split(':').slice(-1)[0]);
        const fieldCode = dp[0];
        if (m.dataPath.includes('repeated).')) {
            const index = /\.\(([0-9]+):repeated\)\./.exec(m.dataPath);
            if (index) {
                const subFieldCode = dp[dp.length - 1];
                event.record[fieldCode].value[Number(index[1])].value[subFieldCode].error = m.message;
            }
        } else {
            if (event.record[fieldCode]) {
                event.record[fieldCode].error = m.message;
            }
        }
    }
    event.error = 'Validation error';
    return event;
}

app.js

// アプリのレコード型を定義します
// interfaceの各フィールドは、kintoneアプリのフィールドコードと一致させてください
const definition = `
/** サブテーブル */
interface Table {
    itemName: string;
    itemValue: number;
}

/** 全ステータス共通のフィールド */
interface AppBase {
}

/** アプリ (ステータス1) */
interface App1 extends AppBase {
    @minLength(2)
    name: string;
    amount: number;
    table: Table[];
}
// レコードのステータス毎に定義を持てば、殆どの条件付きチェックは
// 条件分岐を含まない形の分解できる
`;

// イベントハンドラ
kintone.events.on('app.record.edit.submit', function(event) {
    event.record = removeBlankTableRow(event.record, 'table');

    // スキーマ検証を行います
    const schema = tynder.compile(definition);
    const ctx = {checkAll: true, schema};
    const validated = tynder.validate(mapRecord(event.record), tynder.getType(schema, 'App1'), ctx);
    if (! validated) {
        const errText = JSON.stringify(ctx.errors, null, 2);
        console.error(errText);

        // エラーを表示します
        displayValidationErrorMessages(event, ctx);
    }
    return event;
});

さいごに

書かなくて良いコードは書かずに、楽しくプログラミングしたいですね?

MapBox GL のサンプルにカスタムマーカーがあるので、それを参考に「ラベル付きのマーカー」を実現してみた。

動作するサンプルはこちら。

• MapBox GL JS Marker with label / JSFiddle - Code Playground

ソースコード

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title></title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css' rel='stylesheet' />
  <link rel="stylesheet" type="text/css" href="./index.css" media="screen">
  <style>
  </style>
</head>
<body>

<div id='map'></div>

<template id="marker">
  <div class="marker-container">
    <span id="title" class="marker-title"></span>
    <img id="marker-icon" src="https://img.icons8.com/ios-filled/40/0000FF/marker.png">
  </div>>
</template>

<script src="./index.js"></script>

</body>
</html>

index.css

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.marker-container {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  cursor: pointer;
}

.marker-title {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marker-icon {
  height: 30px; 
  width: auto; 
  background-size: cover;
}

.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-popup-content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

index.js

const geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
    type: 'Point',
      coordinates: [-77.032, 38.913]
    },
    properties: {
      title: 'Mapbox',
      description: 'Washington, D.C.'
    }
  },
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-122.414, 37.776]
    },
    properties: {
      title: 'Mapbox',
      description: 'San Francisco, California'
    }
  }]
};

const map = new mapboxgl.Map({
  container: 'map',
  center: [-96, 37.8],
  zoom: 3,
  style: {
    "version": 8,
    "sources": {
      "OSM": {
        "type": "raster",
        "tiles": ['http://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
        "tileSize": 256
      }
    },
    "layers": [{
      "id": "OSM",
      "type": "raster",
      "source": "OSM"
    }]
  }
});

geojson.features.forEach(marker => {

  // Create element for marker from template
  const template = document.getElementById('marker');
  const clone = document.importNode(template.content, true);
  const el = clone.firstElementChild;

  clone.getElementById('title').innerHTML = marker.properties.description;

  new mapboxgl.Marker(el, { anchor: 'bottom' })
    .setLngLat(marker.geometry.coordinates)
    .setPopup(new mapboxgl.Popup({ offset: 60, anchor: 'bottom' }) // add popups
    .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
    .addTo(map);
});

1. マーカーとして使用する HTML 要素を template タグで用意しておきます。
2. マーカーごとに template から要素を生成(importNode で複製しないと同じ要素が使い回されるので注意)してラベルを設定、その要素から MapBox の Marker を生成します。

※地図を OpenStreetMaps にしているのは、MapBox の地図を表示するには AccessToken を設定する必要があるためです。

参考

• Add custom markers in Mapbox GL JS | Help | Mapbox
• mapbox-gl.jsでOSMを表示 - hinosita's diary

本記事では Redux を使用した場合の React コンポーネントに対するテスト方法を考察します。

Redux に接続された React コンポーネントは、コンポーネント内のプロパティを Redux Store の state と同期させています。 Redux に強く依存しているコンポーネントをどのように Testable にしていけば良いのでしょうか。記事のタイトルは、t-wada 先生の言葉をお借りして、Testable Redux とつけさせていただきました。

純粋な React コンポーネントをテストする

さて、まずはじめに純粋な React のコンポーネントに対するテスト方法を振り返ってみます。Facebook に習えば、jest の公式ドキュメントでも紹介されている jest と enzyme を組み合わせた方法が一般的でしょう。

以下のようなシンプルなコンポーネントを例として使用します。

count を保持する state をもち、onClick で state を変更します。簡単のために Functional Component とし、State Hooks を使用します。後のテストのために各タグにはカスタムデータ属性（data-test）を付与しておきます。プロダクションビルドでカスタムデータ属性を取り除く方法もあります。こちらの記事にて詳細に解説されていました。

import React, { useState } from "react";
export default () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h3 data-test="count">count: {count}</h3>
      <button data-test="count-up" onClick={() => setCount(count + 1)}>⬆︎</button>
      <button data-test="count-down" onClick={() => setCount(count - 1)}>⬇︎</button>
    </div>
  );
};

これに対するテストは以下のように記述できます。初期値が 0 であること、ボタンをクリックして 1 に変わることを確認します。

import React from "react";
import { shallow } from "enzyme";
import Counter from "./PureReactCounter";

import testConfigure from "../../testConfigure";
testConfigure();

const sel = (id: string) => `[data-test="${id}"]`;
describe("<Counter /> コンポーネント", () => {
  const Component = shallow(<Counter />);
  it("ボタンをクリックしてカウントアップする", () => {
    expect(Component.find("h3").text()).toEqual("count: 0");
    Component.find(sel("count-up")).simulate("click");
    expect(Component.find("h3").text()).toEqual("count: 1");
  });
});

なお、testConfigure には以下を記述しておきます。enzyme を使用する場合のお約束のようなものです。enzyme の installationにて解説されています。

import Enzyme from "enzyme";
import EnzymeAdapter from "enzyme-adapter-react-16";
export default () => Enzyme.configure({ adapter: new EnzymeAdapter() });

結果は 8ms でした。このテストでは shallow() を使用しています。Shallow レンダリングは、コンポーネントをユニットテストの範囲でテストできるように制限します。テストが子コンポーネントの動作を間接的にアサートしないようにしてくれます。コンポーネントは子コンポーネントに依存させず、常にステートレスに保つことによって Shallow レンダリングによるテストができ、高速です。

 PASS  src/components/PureReactCounter.test.tsx
  <Counter /> コンポーネント
    ✓ ボタンをクリックしてカウントアップする (8ms)

ちなみに、mount() は完全な DOM レンダリングを行います。DOM API とやり取りする可能性のあるコンポーネントである場合や、より高次のコンポーネントにラップされているコンポーネントをテストする必要がある場合に最適です。ただしその一方で多くの依存関係を考慮することによりテストに要する時間は増える傾向にあります。

 PASS  src/components/PureReactCounter.test.tsx
  <Counter /> コンポーネント
    Shallowレンダリング
      ✓ ボタンをクリックしてカウントアップする (8ms)
    Fullレンダリング
      ✓ ボタンをクリックしてカウントアップする (8ms)

結果として実行時間はほとんど変わりませんでした。これは今回実装したコンポーネントが他のコンポーネントや API などと依存していないシンプルなコンポーネントであるためです。

Redux の使用を開始する

さて、先ほど実装したコンポーネントは、count を保持する state をもち、onClick で state を変更していました。この count という state を Redux の store で管理します。実装例を紹介する前に Redux のライフサイクルのおさらいをしましょう。

1. View: ユーザが操作を行い、handleClick() などのイベント起動 function が実行される。
2. ActionCreater: イベント起動 function は ActionCreater を通して action を生成する。
3. Dispacther: action は Dispater に渡され、Reducer に流れる。
4. Reducer: Reducer は action の type に応じて新しい state を返却する。

説明の粒度は荒いですが、おおまかにこのような流れで Redux による状態の管理が行われます。

さて、ディレクトリ構成は以下のようにして実装を進めていきます。

src/
├── index.tsx
├── App.tsx
├── components
│   ├── Counter.tsx
│   └── Counter.test.tsx
└── store
    ├── actions
    │   └── counterActions.ts
    ├── reducers
    │   └── counterReducer.ts
    └── store.ts

Action (actions/counterActions.ts)

Action の定義を行います。今回はカウントアップとカウントダウンする２種類の action があるので事前に定義しておき、他のファイルから参照できるようにしておきましょう。

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";

export interface ICountReducerAction {
  type: typeof INCREMENT | typeof DECREMENT;
}

Reducer (reducers/counterReducer.ts)

Reducer は飛んできた action の type に応じて state 返却する処理を書くのでした。INCREMENT の場合は +1、DECREMENTの場合は -1された新しい state を返却しています。

import {
  ICountReducerAction,
  INCREMENT,
  DECREMENT
} from "../actions/counterActions";

const initialState = 0;
const counterReducer = (state = initialState, action: ICountReducerAction) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
};
export default counterReducer;

Store

先に定義した reducer を束ねて、storeを作成しましょう。今回 reducer は１つですが、複数使用することになることも考慮して combineReducers() を使用しています。

import { createStore } from "redux";
import { combineReducers } from "redux";
import counterReducer from "./reducers/counterReducer";
const reducer = combineReducers({ count: counterReducer });
export default createStore(reducer);

Component から Redux の store を参照する

Redux の state を View に表示できるようにコンポーネントを実装していきましょう。まず初めに純粋に Redux の store を直接参照するような実装を考えます。

ReactDOM.render() を store から subscribe() します。

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./store/store";

const render = () => ReactDOM.render(<App />, document.getElementById("root"));
render();
store.subscribe(render);

コンポーネントは以下のように実装します。この場合はどうでしょう、テストは容易でしょうか。

import React from "react";
import store from "../../store/store";
import { INCREMENT, DECREMENT } from "../../store/actions/counterActions";

export default () => {
  const count = store.getState().count; // store から直接参照する
  return (
    <div>
      <h3 data-test="count">count: {count}</h3>
      <button onClick={() => store.dispatch({ type: INCREMENT })}>⬆︎</button>
      <button onClick={() => store.dispatch({ type: DECREMENT })}>⬇︎</button>
    </div>
  );
};

テストコードを振り返ってみましょう。このままでは Redux の store を参照ができないため、ボタンをクリックした後に発火するはずの Reducer が起動しません。結果として count は 0 のままです。

const sel = (id: string) => `[data-test="${id}"]`;
describe("<Counter /> コンポーネント", () => {
  describe("Shallowレンダリング", () => {
    const Component = shallow(<Counter />);
    it("ボタンをクリックしてカウントアップする", () => {
      expect(Component.find("h3").text()).toEqual("count: 0");
      Component.find(sel("count-up")).simulate("click"); // Redux store の state が変更されない
      expect(Component.find("h3").text()).toEqual("count: 1"); // 0 のまま
    });
  });
  describe("Fullレンダリング", () => {
    const Component = mount(<Counter />);
    it("ボタンをクリックしてカウントアップする", () => {
      expect(Component.find("h3").text()).toEqual("count: 0");
      Component.find(sel("count-up")).simulate("click");
      expect(Component.find("h3").text()).toEqual("count: 1");
    });
  });
});

テスト結果（クリックして開く）

 FAIL  src/components/DirectAccessReduxStore.test.tsx
  <Counter /> コンポーネント
    Shallowレンダリング
      ✕ ボタンをクリックしてカウントアップする (11ms)
    Fullレンダリング
      ✕ ボタンをクリックしてカウントアップする (6ms)

  ● <Counter /> コンポーネント › Shallowレンダリング › ボタンをクリックしてカウントアップする

    expect(received).toEqual(expected) // deep equality

    Expected: "count: 1"
    Received: "count: 0"

      13 |       expect(Component.find("h3").text()).toEqual("count: 0");
      14 |       Component.find(sel("count-up")).simulate("click");
    > 15 |       expect(Component.find("h3").text()).toEqual("count: 1");
         |                                           ^
      16 |     });
      17 |   });
      18 |   describe("Fullレンダリング", () => {

      at Object.<anonymous> (src/components/DirectAccessReduxStore.test.tsx:15:43)

  ● <Counter /> コンポーネント › Fullレンダリング › ボタンをクリックしてカウントアップする

    expect(received).toEqual(expected) // deep equality

    Expected: "count: 1"
    Received: "count: 0"

      21 |       expect(Component.find("h3").text()).toEqual("count: 0");
      22 |       Component.find(sel("count-up")).simulate("click");
    > 23 |       expect(Component.find("h3").text()).toEqual("count: 1");
         |                                           ^
      24 |     });
      25 |   });
      26 | });

      at Object.<anonymous> (src/components/DirectAccessReduxStore.test.tsx:23:43)

Redux と React のコンポーネントが強く依存する関係になっており、React のコンポーネント単体としてテストしづらくなっています。この構成を変えていきましょう。まずは React と Redux の間の依存関係を切り離す方法を考えます。

react-redux の connect() を使用して React と Redux の依存を引き剥がず

最も代表的な実装パターンとして react-redux の connect() を使用する方法が挙げられます。これは、コンポーネントをマウントする時点で子コンポーネントや依存関係にある構成要素を考える必要がなく、シンプルです。

Counter コンポーネントと Redux store が強い依存関係にある実装から、なるべく疎結合になるように配慮します。いわゆる DI (Dependency Injection) の考え方にしたがって、Counter コンポーネントの store を外から props として注入できるように変更します。ただ単に props によって注入するだけではなく、Redux store との接合は connect() によって行います。詳細な手続きは公式チュートリアルを参照しましょう。このようなコンポーネントを HOC (Higher Order Component) と呼びます。詳細はこちらの記事が参考になります。

import React from "react";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import { INCREMENT, DECREMENT } from "../../store/actions/counterActions";

interface ICounterState {
  counter: number;
}

interface ICounterProps {
  count: number;
  increment: any;
  decrement: any;
}

// props として store を流し込んで DI できるるようにする。
export const Counter = (store: ICounterProps) => {
  const { count, increment, decrement } = store;
  return (
    <div>
      <div data-testid="count">count: {count}</div>
      <button onClick={increment}>⬆︎</button>
      <button onClick={decrement}>⬇︎</button>
    </div>
  );
};

const mapStateToProps = (state: ICounterState) => ({
  count: state.counter
});
const mapDespatchToProps = (dispatch: Dispatch) => ({
  increment: () => dispatch({ type: INCREMENT }),
  decrement: () => dispatch({ type: DECREMENT })
});

// 第一引数の mapStateToProps は component に渡す props を制御する
// 第二引数の mapDespatchToProps は reducer を呼び出して、redux で管理している state を更新する
// Counter は取得したデータを props として扱いたい component を指定する
export default connect(mapStateToProps, mapDespatchToProps)(Counter);

さて、ここまでできれば勝てる気がしてきました。テストを書きます。

import React from "react";
import { mount, shallow } from "enzyme";
import { Provider } from "react-redux";
import { createStore } from "redux";
import sinon from "sinon";
import ConnectedCounter, { Counter } from "./ReactRedux";
import { reducer } from "../../store/store";
import testConfigure from "../../testConfigure";
testConfigure();
const sel = (id: string) => `[data-test="${id}"]`;
describe("<Counter /> コンポーネント", () => {
  describe("Shallowレンダリング", () => {
    const props = {
      count: 0,
      increment: sinon.spy(), // カウントアップするボタンを押した挙動を確認するためにスパイを差し込む
      decrement: sinon.spy()
    };
    const shallowComponent = shallow(<Counter {...props} />);
    it("ボタンをクリックしてカウントアップする", () => {
      expect(shallowComponent.find("h3").text()).toEqual("count: 0");
      shallowComponent.find(sel("count-up")).simulate("click");
      expect(props.increment).toHaveProperty("callCount", 1);
    });
  });
  describe("Fullレンダリング", () => {
    const getWrapper = (mockStore = createStore(reducer, { count: 0 })) =>
      mount(
        <Provider store={mockStore}>
          <ConnectedCounter />
        </Provider>
      );
    it("ボタンをクリックしてカウントアップする", () => {
      const wrapper = getWrapper();
      expect(wrapper.find("h3").text()).toEqual("count: 0");
      wrapper.find(sel("count-up")).simulate("click");
      expect(wrapper.find("h3").text()).toEqual("count: 1");
    });
  });
});

上記のテストでは、Shallow レンダリングと Full レンダリングの２つの方法でテストを記述しました。

Shallow レンダリングでは Redux の store を含めず、コンポーネント単体でテストを行います。そのため、カウントアップするボタンを押した際のハンドラ関数は simon.spy() を使用してスパイを差し込んで挙動を確認します。

一方で、Full レンダリングの場合は Redux の store だけをモックとして作成し、<Provider>の store に DI します。こちらの手法の方が Redux の store を含めたテストにはなるのですが、実行時間が増える傾向にあるため注意が必要です。ちなみに実行時間を比較すると以下のようになります。

 PASS  src/components/container/ReactRedux.test.tsx
  <Counter /> コンポーネント
    Shallowレンダリング
      ✓ ボタンをクリックしてカウントアップする (9ms)
    Fullレンダリング
      ✓ ボタンをクリックしてカウントアップする (44ms)

mount するのはインテグレーションテストだユニットテストではない、shallow の方が高速だ、などの論争があります。個人的な意見ですが、チーム開発を行う上ではシンプルかつ可読性を維持したテストコードを書いた方がむしろチームとしてアジリティが上がるのではないかと考えています。学習コストも高いですしね。
それでもプロダクトコードの量が大きくなるにつれて、テストの実行時間の増加によりアジリティが下がるケースもあります。shallow レンダリングと full レンダリングの実行時間の差は ms 程度ですが、塵も積もれば山となるということです。テストの方針を決めるのは難しいですね。

Redux Hooks を使用してコード量を減らす

怠惰で傲慢な我々は、現状に満足することはありません。上に挙げた実装は React と Redux の依存関係を引き剥がすことで、Shallow レンダリングによるテストが実現できるようになりました。その一方で少し複雑な実装をしなければならないように感じます。この章では Redux Hooks を使用して簡単に記述できる方法をご紹介します。

React の Hooks API は、Functional コンポーネントに対してローカルコンポーネントの state を使用できるようになる優秀な機能です。react-redux でも、既存の connect() を使用して実装された HOC (Higher Order Component) の代わりとして Hooks API を提供するようになりました。これを使用すると、前章の実装のようにコンポーネントをにラップして HOC を作るような面倒な作業は必要ありません。Redux store に subscribe して action を dispatch できます。

導入は非常に簡単です。useSelector() と useDispatch() を使用しましょう。

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { INCREMENT, DECREMENT } from "../../store/actions/counterActions";

export default () => {
  const count = useSelector((state: any) => state.count);
  const dispatch = useDispatch();
  const increment = () => { dispatch({ type: INCREMENT })};
  const decrement = () => { dispatch({ type: DECREMENT })};
  return (
    <div>
      <h3>count: {count}</h3>
      <button data-test="count-up" onClick={increment}>⬆︎</button>
      <button data-test="count-down" onClick={decrement}>⬇︎</button>
    </div>
  );
};

コードがとても短くなりました。かなりスマートです。あれ？　でもおかしいですね、少し振り返ってみましょう。connect() を使用して HOC を作ったときには純粋な React コンポーネントと Redux との依存関係を引き剥がすことに成功していました。今回、Redux Hooks を使用した実装では、また依存関係が強くなってしまいました。これでは Full レンダリングを行うようなテストしか記述できません。

describe("<Counter /> コンポーネント", () => {
  describe("Fullレンダリング", () => {
    const getWrapper = (mockStore = createStore(reducer, { count: 0 })) =>
      mount(
        <Provider store={mockStore}>
          <ConnectedCounter />
        </Provider>
      );
    it("ボタンをクリックしてカウントアップする", () => {
      const wrapper = getWrapper();
      expect(wrapper.find("h3").text()).toEqual("count: 0");
      wrapper.find(sel("count-up")).simulate("click");
      expect(wrapper.find("h3").text()).toEqual("count: 1");
    });
  });
});

Redux Hooks でも Redux と React を分離する

基本的な考え方は今までと同様です。Redux と接続する部分を DI できるようにすれば OK です。useSelector() と useDispatch() を使用している箇所を外に出してやりましょう。

import { useSelector, useDispatch } from "react-redux";
import { IRootState } from "../../store/store";
import { INCREMENT, DECREMENT } from "../../store/actions/counterActions";
import { Dispatch } from "redux";

interface ICounterProps {
  count: number;
  increment: Dispatch;
  decrement: Dispatch;
}
export const Counter = (props: ICounterProps) => {
  const { count, increment, decrement } = props;
  return (
    <div>
      <h3>count: {count}</h3>
      <button data-test="count-up" onClick={increment}>⬆︎</button>
      <button data-test="count-down" onClick={decrement}>⬇︎</button>
    </div>
  );
};

export default (props: any) => {
  const count = useSelector<IRootState>(state => state.count);
  const dispatch = useDispatch();
  const _props = {
    count,
    increment: () => dispatch({ type: INCREMENT }),
    decrement: () => dispatch({ type: DECREMENT }),
    ...props
  };
  return <Counter {..._props} />;
};

当然といえば当然ですが、テストコードは　react-redux の connect() を使用した場合の実装と同じになります。

テストコード（クリックして開く）

const sel = (id: string) => `[data-test="${id}"]`;
describe("<Counter /> コンポーネント", () => {
  describe("Shallowレンダリング", () => {
    const props = {
      count: 0,
      increment: sinon.spy(),
      decrement: sinon.spy()
    };
    const shallowComponent = shallow(<Counter {...props} />);
    it("ボタンをクリックしてカウントアップする", () => {
      expect(shallowComponent.find("h3").text()).toEqual("count: 0");
      shallowComponent.find(sel("count-up")).simulate("click");
      expect(props.increment).toHaveProperty("callCount", 1);
    });
  });
  describe("Fullレンダリング", () => {
    const getWrapper = (mockStore = createStore(reducer, { count: 0 })) =>
      mount(
        <Provider store={mockStore}>
          <ConnectedCounter />
        </Provider>
      );
    it("ボタンをクリックしてカウントアップする", () => {
      const wrapper = getWrapper();
      expect(wrapper.find("h3").text()).toEqual("count: 0");
      wrapper.find(sel("count-up")).simulate("click");
      expect(wrapper.find("h3").text()).toEqual("count: 1");
    });
  });
});

さいごに

結局のところ、どのアプローチを採用した場合も実際の Redux store を使用した React コンポーネントのテストは高速です。Redux の設計は、Action、Reducer、State のそれぞれが互いに分離される方法のため、テストに非常に適しています。
このように Dependency Injection しやすい設計のもと Redux が作られているので、このようなシンプルな構造を取ることができました。今回はご紹介できませんでしたが、Redux Saga や Redux Thunk を使用した場合のアーキテクチャでも同様にテストはシンプルに記述できます。React をとりまくエコシステムは素晴らしいですね。

Rails+WebpackerのJavaScriptでAxiosを使うときは、POSTやPATCHで送信する際にCSRF対策用のトークンを指定する必要があります。送信のたびに指定するのは面倒なので、あらかじめ設定しておきましょう。

AxiosのInterceptorsの機能を使います。送信前にHTTPメソッドがPOST, PUT, PATCH, DELETEだったら、meta要素からトークンを取り出してHTTPヘッダにセットします。ここではjQueryを使っています。

サンプル: https://github.com/kazubon/blog-rails6-vuejs

app/javascript/axios_config.js

import Axios from 'axios';

Axios.interceptors.request.use((config) => {
  if(['post', 'put', 'patch', 'delete'].includes(config.method)) {
    config.headers['X-CSRF-Token'] = $('meta[name="csrf-token"]').attr('content');
  }
  return config;
}, (error) => {
  return Promise.reject(error);
});

このJavaScritptをどこかで動かします。とりあえずapplication.jsに入れとけばいいでしょう。

app/javascript/packs/application.js

import '../axios_config';

あとは、ふつうにAxiosが使えます。

import Axios from 'axios';

Axios.post('/entries.json', { entry: this.entry });

概要

　住所から、そこのGPS座標（ジオタグ）を提供するWebサービスと、逆にGPS座標から住所名を提供するサービスがありますね。
　Google Maps の API などがありますが、無償で利用できるものとして、次の２つを選択しました。

住所やランドマーク名をGPS座標に変換するサービス

　Geocoding.jp
　住所だけでなく、ランドマーク名で、GPS座標が XML 形式で提供されます。

GPS座標から住所を求める

　農研機構の簡易逆ジオコーディングサービス
（従来の「https://www.finds.jp/」 は、2020年４月１日から完全に https://aginfo.cgk.affrc.go.jp/index.html.ja に移行するとのことですが、既にこのURLが使えるようになっています。）
　GPS座標を渡すと、住所が JSON 形式で提供されます。

ソース

　このソースは OS X の「スクリプトエディタ.app」の JavaScript で書いています。
これをスクリプトエディタで新規に JavaScript としてコピペして、ユーザーディレクトリ、ライブラリー、script フォルダーに保存しておくと、メニューバーのスクリプトアイコンから直接起動できて便利です。

住所やランドマークからGPS座標を求める JavaScript

adrs2gps_java.scpt

// 住所等から緯度、軽度を求める
// https://www.geocoding.jp/　のサービスを利用
// 戻り値は XML 形式

var app = Application.currentApplication()
app.includeStandardAdditions = true

var baseURL = 'https://www.geocoding.jp/api/?q='

var adr = app.displayDialog("住所またはランドマーク名を入力", {defaultAnswer: ""}).textReturned
var ascAdr = encodeURIComponent(adr)
var URL = baseURL + ascAdr

var ans = app.doShellScript('curl -s ' + URL)

if (ans.indexOf('error') > 0) {
    app.displayDialog('該当する住所が見つかりませんでした。')
    } else {
    var jyuusho = ans.split('<address>')[1].split('</address>')[0]
    var ido = ans.split('<lat>')[1].split('</lat>')[0]
    var keido = ans.split('<lng>')[1].split('</lng>')[0]
    app.displayDialog(jyuusho + 'の緯度,経度は\r' + ido + ', ' + keido + ' です。\r緯度,経度をクリップボードにコピーします。')
    app.setTheClipboardTo(ido + ',' + keido)
}

GPS座標から住所を求める JavaScript

gps2adrs_java.scpt

// 緯度、軽度から住所を求める
// https://www.finds.jp/ → https://aginfo.cgk.affrc.go.jp/ws/rgeocode.php　のサービスを利用
// 2020/4/1 以降は「https://aginfo.cgk.affrc.go.jp/ws/rgeocode.php」に完全移行
// 戻り値は JSON 形式

var app = Application.currentApplication()
app.includeStandardAdditions = true

var baseURL = '"https://aginfo.cgk.affrc.go.jp/ws/rgeocode.php?json\&'
var latlon = app.displayDialog("緯度,経度を入力", {defaultAnswer: ""}).textReturned
var lat = latlon.split(',')[0]
var lon = latlon.split(',')[1]
var URL = baseURL + 'lat=' + lat + '\&lon=' + lon + '"'
var ans = app.doShellScript('curl -s ' + URL)
var jsonData = JSON.parse(ans)
var adrs = ''
switch (jsonData['status']) {
    case 400: app.displayDialog("データを取得できませんでした。"); break;
    case 200:
    case 202:
        var pname = jsonData['result']['prefecture']['pname']
        if (pname !== undefined) adrs = adrs + pname
        var mname = jsonData['result']['municipality']['mname']
        if (mname !== undefined) adrs = adrs + mname
        try {var sect = jsonData['result']['local'][0]['section'] }
        catch(e) {}
        if (sect !== undefined) adrs = adrs + sect
        try {var hnumb = jsonData['result']['local'][0]['homenumber'] }
        catch(e) {}
        if (hnumb !== undefined) adrs = adrs + hnumb
        try {var aza = jsonData['result']['aza'][0]['name'] }
        catch(e) {}
        if (aza !== undefined) adrs = adrs + aza
        app.displayDialog(lat + ', ' + lon + 'の住所\r' + adrs + '\nをクリップボードにコピーします。')
        app.setTheClipboardTo(adrs)
}

サンプルコード

サンプルコード前半の input 要素にて、全角英数と半角ｶﾀｶﾅを排除するバリデーションを実施。
サンプルコード後半の script 要素にて、排除する範囲の文字を表示。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>The pattern attribute</title>
</head>
<body>
  <form method="get">
    <input
      type="text"
      name="foo"
      size="32"
      title="全角英数と半角ｶﾀｶﾅは入力不可"
      placeholder="ｱｲｳｴｵ１２３４５"
      pattern="^[^\uFF10-\uFF19\uFF21-\uFF3A\uFF41-\uFF5A\uFF61-\uFF9F]*$"
      required
    >
    <input type="submit" value="送信">
  </form>

<script>
document.write('全角数字: ');
for(let c=0xFF10; c<=0xFF19; c++){
  document.write(String.fromCodePoint(c));
}
document.write('<br>');
document.write('全角英字(大文字): ');
for(let c=0xFF21; c<=0xFF3A; c++){
  document.write(String.fromCodePoint(c));
}
document.write('<br>');
document.write('全角英字(小文字): ');
for(let c=0xFF41; c<=0xFF5A; c++){
  document.write(String.fromCodePoint(c));
}
document.write('<br>');
document.write('半角カタカナ: ');
for(let c=0xFF61; c<=0xFF9F; c++){
  document.write(String.fromCodePoint(c));
}
document.write('<br>');
</script>
</body>
</html>

実行結果

実行環境: macOS Catalina + Google Chrome 79.0.3945.130

入力前の表示

未入力で送信ボタンを押した場合

排除する文字が含まれている状態で送信ボタンを押した場合

この例では title 属性で指定したテキストも表示されているが、このあたりの表示デザイン等はブラウザ依存になっている。「指定されている形式で入力してください。」が他のブラウザでは異なる文言になっていたり、「全角英数と半角ｶﾀｶﾅは入力不可」というテキストが表示されなかったりするので注意。

排除する範囲の文字

今回のバリデーションで排除する文字の一覧 (サンプルが script 要素で出力している内容)。

全角数字: ０１２３４５６７８９
全角英字(大文字): ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
全角英字(小文字): ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ
半角カタカナ: ｡｢｣､･ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝﾞﾟ

Unicode コードポイントによる範囲。

• 全角数字: 0xFF10 〜 0xFF19
• 全角英字(大文字): 0xFF21 〜 0xFF3A
• 全角英字(小文字): 0xFF41 〜 0xFF5A
• 半角カタカナ: 0xFF61 〜 0xFF9F

参考資料

• HTML Standard - The pattern attribute
• HTML5におけるinput要素のpattern、type属性のおさらい - Qiita
• Unicode一覧 F000-FFFF - Wikipedia
• 半角カナ - Wikipedia

初めに

　自分の勤めている職場で、GASを使用した職場内の業務効率化をするプログラムの改善を自分がした際に行ったことをこの記事で挙げます。もしGasを使ってバックエンドっぽいことをしたい方は参考にしてみてください。（バックエンドといっても、SpreadsheetをDBみたいに使うだけです。あれ、これってバックエンドて言えなくね？）

本題

今まで使用していた表の機能

• スタッフごとに一か月間の日勤（昼間に働く）の時間、夜勤の時間、休憩時間の情報を取得し、表をGoogleSpreadsheetのシートへ作成・表示する。
• スタッフの勤務状況はGoogleカレンダーで管理されているので、スタッフの勤務状況はGoogleカレンダーIDから取得する。
• もし新規のスタッフの勤務状況を追加または既存のスタッフの勤務状況を削除して表を作成する際は、GASのコードへ直接追加するスタッフ名とそのカレンダーIDを追加するか、削除するスタッフ名とそのカレンダーIDを削除しなくてはいけない。⇒GASを扱える人がいないと追加と削除が難しい

改善する際の要件

• 表を作成する際に、もしスタッフを追加または削除する場合はGASのコードへじかに書き込まなくても良い状態にする。

ではどうするか

SpreadSheatにDBの役割を持ったシートを作る。そこへ表に必要なスタッフ名とそのカレンダーIDを登録することで、もし追加または削除が起きた際でも該当者のシートへの追加または削除をすることにより対応する。

実際のコード

ただ関数の中に処理を書き込んでもよかったのですが、それだと面白くないし処理の変更にも対応しにくいので、行う処理ごとにMVC的な役割を持たせ、役割ごとに関数内の処理を定めてみました。（実際のファイル名はcode.gasですが、そのままここでコードを見せると文字の色が変わらず見づらいので、ファイル名をcode.jsにしています。）

Model

基本的にここではクライアント(表の作成者)からのデータの取得、DB周りの処理を行います。
ここで行うことは以下の７つです。

1. DBの追加に関するクライアントからの入力値を取得する。
2. DBの削除に関するクライアントからの入力値を取得する。
3. クライアントからの入力を基にスタッフの追加を実行する。
4. クライアントからの入力を基にスタッフの削除を実行する。
5. 表の作成に関するクライアントからの入力値を取得する。
6. 表を作成する際に必要なデータをDBから取得する。
7. DBからスタッフ名とそのカレンダーのIDのデータを取得する。

GASでのコード

code.js

//1. DBの追加に関するクライアントからの入力値を取得する。
function getStaffInfo() {
  const name = Browser.inputBox('登録者の名前を入力してください','お名前', Browser.Buttons.OK_CANCEL);
  switch(name) {
    case 'cancel':
     Browser.msgBox("処理を終了します。");
     break;

    case "":
     Browser.msgBox("名前が空です。処理を終了します。",Browser.Buttons.OK);
     break;

    default:
      const getId = Browser.inputBox('登録者のカレンダーIDを入力してください。','ID', Browser.Buttons.OK_CANCEL);
      switch(getId) {
        case 'cancel':
          Browser.msgBox("処理を終了します。");
          break;

        case "":
          Browser.msgBox("カレンダーIDが空です。処理を終了します。",Browser.Buttons.OK);
          break;

        default:
          return [name, getId];
      }
  }
}

//2. DBの削除に関するクライアントからの入力値を取得する。
function getStaffName() {
  const name = Browser.inputBox('該当者の名前を入力してください','お名前', Browser.Buttons.OK_CANCEL);
  switch(name) {
    case 'cancel':
     Browser.msgBox("処理を終了します。");
     break;

    case "":
     Browser.msgBox("名前が空です。処理を終了します。",Browser.Buttons.OK);
     break;

    default:
     return name;
  } 
}

//3. クライアントからの入力を基にスタッフの追加を実行する。
function writeDB(sheet, array) {
  let n = 1;

  while(sheet.getRange(n, 1).getValue()) {
    n++;
    continue;
  } 

  for(let i=0; i < array.length; i++) {
         sheet.getRange(n, i+1).setValue(array[i]);
        }
}

//4. クライアントからの入力を基にスタッフの削除を実行する。
function deleteDB(sheet, name) {
  let n = 1;

  while(sheet.getRange(n, 1).getValue() !== name) {
    if(sheet.getRange(n, 1).getValue() === "") {
       Browser.msgBox("該当者がいません。処理を終了します。",Browser.Buttons.OK);
       return;
     }
      n++;
      continue;
    }
   sheet.deleteRow(n);
}

//5. 表の作成に関するクライアントからの入力値を取得する。
function getTime() {
  const year = Browser.inputBox('YYYYの形式で入力してください。例 2018','取得年', Browser.Buttons.OK_CANCEL);
  if (year == 'cancel'){
    Browser.msgBox("処理を終了します。",Browser.Buttons.OK);
    return;
  }
  if (year.match(/^20[0-9].$/) == null){
    Browser.msgBox("入力形式が違います。最初からやり直してください。",Browser.Buttons.OK);
    return;
  } else {
    const month = Browser.inputBox('MMの形式で入力してください。例 04 ','取得月', Browser.Buttons.OK_CANCEL);
    if (month == 'cancel') {
      Browser.msgBox("処理を終了します。",Browser.Buttons.OK);
      return;
    }
    if (month.match(/^(01|02|03|04|05|06|07|08|09|10|11|12)$/) == null) {
       Browser.msgBox("入力形式が違います。最初からやり直してください。",Browser.Buttons.OK);
       return;
    }
    return [year, month];
  }
 }

//6. 表を作成する際に必要なデータをDBから取得する。
function getInfoFromDB(sheet) {
  let info = {};
  let n = 1;

  while(sheet.getRange(n, 1).getValue() !== "") {
    const key = sheet.getRange(n, 1).getValue();
    const value = sheet.getRange(n, 2).getValue();
    info[key] = value;
    n++;
    continue;
  }
  return info;
}

//7. DBからスタッフ名とそのカレンダーのIDのデータを取得する。
function getResult(info, year, month) {
  let result = {}
  const startDay = new Date(year +'/'+ month + '/'+ 1);
  const lastDay = new Date(startDay.getFullYear(), startDay.getMonth() + 1,0, 0);//このままでは月の最終日が含まれない
  lastDay.setDate(lastDay.getDate()+1);//月の最終日を含める

  for(let key in info) {
       const calendar = CalendarApp.getCalendarById(info[key]);
       const events = calendar.getEvents(startDay, lastDay);
       let day = 0;
       let night = 0;
       let rest = 0;
       let money = 0;
    //スタッフごとの日勤の時間と夜勤の時間の合計を求める
     for(let i=0; i<events.length; i++) {
          const endTime = events[i].getEndTime().getHours();
          const workEnd = (events[i].getEndTime().getHours()*60 + events[i].getEndTime().getMinutes())/60;
          const workStart = (events[i].getStartTime().getHours()*60 + events[i].getStartTime().getMinutes())/60;
       //夜勤の場合
          if(endTime > 22.0) {
           day += workEnd - workStart - 1.0;
           night += workEnd - 22.0;
          } else {
       //日勤の場合
           day += workEnd - workStart;
          }
       //休憩時間の合計を求める
          const str = events[i].getDescription();//イベントの説明欄から休憩時間を取得
          const convert = str.replace(/[０-９]/gi, function(s) { return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);});//全角数字を半角文字へ変換

          switch(convert) {
            case '休憩：30分':
              rest += 0.5;
              break;

            case '休憩：1時間':
              rest += 1.0;
          }
         }
    //スタッフの月の給料を求める
       money += (day - rest)*1000 + night*1250;

       result[key] = {'day':day, 'night':night, 'rest':rest, 'money':money};    
      }
  return result;
}

View

ここでは行うのは、表をSpreadsheetへ作成することとSpreadsheetのバーに関数を登録することです。

GASでのコード

code.js

//関数の登録
function onOpen() {
  const myMenu=[
    {name: "スタッフを登録する", functionName: "addData"},
    {name: "スタッフを削除する", functionName: "deleteData"},
    {name: "勤務時間と給料の合計を出力", functionName: "resultController"}
  ];

   SpreadsheetApp.getActiveSpreadsheet().addMenu("メニュー",myMenu); 
}

//表の作成
function createResultTable(sheet, year, month, result) {
 sheet.getRange(2, 2).setValue(year+'年'+month+'月');
 sheet.getRange(3, 2).setValue('スタッフ名');
 sheet.getRange(3, 3).setValue('通常勤務時間');
 sheet.getRange(3, 4).setValue('夜間勤務時間');
 sheet.getRange(3, 5).setValue('休憩時間');
 sheet.getRange(3, 6).setValue('今月の給料');
 sheet.getRange(3, 7).setValue('※通常勤務・休憩：1000円/h、夜間勤務：1250円/1hで換算');
 sheet.getRange(3, 2, 1, 5).setBackground('#fff2cc');

 let i = 1;
 for(let key in result) {
      sheet.getRange(3+i, 2).setValue(key);
      sheet.getRange(3+i, 3).setValue(result[key]['day']);
      sheet.getRange(3+i, 4).setValue(result[key]['night']);
      sheet.getRange(3+i, 5).setValue(result[key]['rest']);
      sheet.getRange(3+i, 6).setValue(result[key]['money']);
      i++;
     }
}

Controller

ここではModelとViewの処理を結びつけます。（Controllerとして扱っても良いのかな？）

GASでのコード

code.js

//DBの追加に関するController
function addData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('DB');
  const info= getStaffInfo();

  if(info == null) return;

  writeDB(sheet, info);
}

//DBの削除に関するController
function deleteData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('DB');
  const name = getStaffName();

  if(name == null) return;

  deleteDB(sheet, name);
}

//表の作成のController
function resultController() {
 let box;
  //年と月を取得
  box = getTime();
  if(box == null) return;//
  const timeData = {'year':box[0], 'month':box[1]};

  //DBシートからスタッフの勤務データを取得
  const sheetDB = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('DB');
  const staffData = getInfoFromDB(sheetDB);

  //記入の対象のシートを取得
  const sheet = SpreadsheetApp.getActiveSheet();

  //スタッフごとで勤務時間と給料の合計を取得
  const result = getResult(staffData, timeData['year'], timeData['month']);

  //表の作成
  createResultTable(sheet, timeData['year'], timeData['month'], result);
}

終わりに

　LaravelなどでMVCを扱おうと思ってもそんなに気軽にできないけど、GASであれば手軽＆実用的にMVC（っぽいもの）を扱えるので、バックエンドの学習の一環としてGASをやるのは面白いな～と思いました。
実際のバックエンドを触るのも面白いですが、今後もGASでWebアプリケーションとかを作ってみるなどして、お手軽疑似バックエンドで遊んでみようと思います。