元々はこちらで紹介されている方法です。
How to handle loading and error state in a generic way?

ローディング中にコンテンツを覆うモーダルウィンドウ。

const LoadingModal: React.FC = () => (
  <Dialog open>
    <ProgressImage />
  </Dialog>
);

エラーメッセージを表示するダイアログ。

import { ApolloError } from 'apollo-client';

interface ErrorModalProps {
  error: ApolloError;
  onClose(): void;
}

const ErrorModal: React.FC<ErrorModalProps> = ({ error, onClose }) => {
  const [open, setOpen] = useState<boolean>(!!error);
  const handleClose = () => {
    setOpen(false);
    onClose();
  };

  return (
    <Dialog open onClose={handleClose}>
      {error.message}
      <Button onClick={handleClose}>
        close
      </Button>
    </Dialog>
  );
};

PropsでuseQueryORuseMutateのステータス値を受け取り、必要に応じてダイアログを表示するコンポーネント。

interface HandleQueryProps {
  loading: boolean;
  error?: ApolloError;
}

const HandleQuery: React.FC<HandleQueryProps> = ({
  loading,
  error,
  children,
}) => {
  const onError = ()=> {
    setOpen(false);
    // 必要に応じてリダイレクトなど
  };

  return (
    <>
      {children}
      {loading && <LoadingModal />}
      {error && <ErrorModal error={error} onClose={onError} />}
    </>
  );
};

HandleQueryコンポーネント利用例。

const SameComponent: React.FC = () => {
  const { data, loading, error } = useQuery(QUERY);

  return (
    <HandleQuery loading={loading} error={error}>
      <ChildComponent data={data} />
    </HandleQuery>
  );
}

参考情報

APOLLO DOCS > Client(React) > Error handling
React > Error Boundary

Select2はjQueryのプラグインで、要素のドロップダウンリストにさまざまな表現や機能が加えられます(「jQuery: プラグインSelect2で要素のドロップダウンリストを操作する」参照)。ただ、デフォルトでは、やたらと幅の狭いドロップダウンリストになってしまうようです(図001)。CSSなどで、あらかじめ幅を定めておくのがよいでしょう。

図001■やたらと幅の狭いドロップダウンリスト

ドロップダウンの幅をリスト項目に合わせる

とはいえ、せっかくJavaScriptコードで扱うのですから、リスト項目に合わせて幅を動的に調整してはしい場合もあるでしょう。そのときには、select2()メソッドにつぎのようなふたつのオプションを渡してください。

$('#select2').select2({
    dropdownAutoWidth: true,
    width: 'auto'
})

これでドロップダウンは、リスト項目の長さに合わせた幅になります(図002)。以下のサンプル001をCodePenに公開しました。なお、コードの中身については、「jQuery: プラグインSelect2で要素のドロップダウンリストを操作する」をお読みください。

図002■リスト項目の幅に合ったドロップダウン

サンプル001■ jQuery + Select2 : Drop-down list with width adjusted

See the Pen jQuery + Select2 : Drop-down list with width adjusted by Fumio Nonaka (@FumioNonaka) on CodePen.

選択された項目に幅を合わせる ー width

widthオプションをautoに定めると、ドロップダウンリストが選択された項目の幅になります(図003)。

$('#select2').select2({
    // dropdownAutoWidth: true,
    width: 'auto'
})

図003■ドロップダウンリストが選択された項目の幅に合う

これだけでよさそうに思えたかもしれません。けれど、選択されていない項目に長いテキストがあったら、ドロップダウンに収まらず見切れてしまいます。このオプションは、あくまで選択された項目をしっかり見せるというだけです。

ドロップダウンのリスト幅を合わせる ー dropdownAutoWidth

選択された項目はさておき、ドロップダウンのリスト幅を調整するのがオプションdropdownAutoWidthです。値をtrueに定めれば、すべての項目が収まるようにリスト幅が決まります(図004)。

$('#select2').select2({
    dropdownAutoWidth: true,
    // width: 'auto'
})

図004■ドロップダウンのリスト幅を項目に合わせる

ということですので、ドロップダウンの幅を項目に合わせて動的に決めるには、ふたつのオプションが必要なのです。

CSSで幅が正しく設定できない

Select2サイトによると、CSSで幅が正しく設定できないことがあるようです。その場合には、インラインでstyle属性により幅を定めることが勧められています。そのときwidthオプションに与える値はresolveです。

$('#select2').select2({
    width: 'resolve'
})

<select id="demo" style="min-width: 300px"></select>

Slackはさまざまなカスタマイズ機能を持っているのが魅力のツールです。例えばBotを作ったり、カスタムのslash commandを作ったりすることで、プラットフォームの拡張ができます。

Slack Botの作り方はいくつかあるのですが、Slackのリッチな機能を最大限に引き出すには、SlackからのWebhookを受けることが必要になってきます。すなわち、ボタンなどが付いたリッチなメッセージの投稿は難しくないのですが、投稿したメッセージのボタンやメニュー操作は、SlackからWebhookの形で通知される仕組みになっています。

※ この辺りの仕組みの詳細については、まとまっている記事がいくつもあるので省略します。

• Slack Botの種類と大まかな作り方
• slackで単純なボタン付きメッセージを送る

Slackは当然publicなサービスなので、インターネット経由でWebhookが飛んできます。これを受けて処理するためには、Bot用の公開APIサーバを書くことになるでしょう。

公開サーバ？ 何か問題でも？

それじゃあ、単にサーバを立てればいいじゃないかというのはもっともですが、サーバを公開するのはいくつか面倒な点があります。

• 公開サーバはセキュリティリスクがある
  • もちろん、ちゃんと管理すればいいのですが、publicに露出するものが増えると相応にリスクが増加してしまうのはどうしようもないことです。できればやりたくありません
• とりわけ会社業務で使う場合、イントラネットにある社内システムや社内ネットワークとの接続性を考慮する必要が出てくる
  • 当然、Botであるからには、社内のいろいろなものと連携させたくなります。

SlackのRTM APIというWebSocketベースのAPIでchatメッセージを受信する場合には、こういった悩みは発生しませんでした（メッセージをpullするAPIを使うので、基本的にインターネットへ接続できるBot実行環境がありさえすればよかった）。できる限りそのお手軽さを保ったまま、セキュリティなどの煩雑な問題をコントロールする方法がないか、ということを考えたくなります。

そうだプロキシしよう

というわけで、次のようなシステムを考えることにしました。

• Webhookを直接Botサーバに流すのではなく、プロキシ（リバースプロキシ）を経由させる
• プロキシは単にリクエストを横流しするのではなく、リクエストの検証を行い、不正なリクエストを弾く
  • Slackから事前に払い出された秘密鍵を元に、指定の手順でHMACを計算することで、リクエストの正当性の検証が可能です
  • Verifying requests from Slack
  • SDKがあるので、Slack社オフィシャルの実装をそのまま引っこ抜いてくることができます

具体的には、AWSのAPI GatewayとLambdaを組み合わせた、簡単なプロキシを書きます。

パターンとして変則的ではありますが、結果的にAWSのDDoS対策ホワイトペーパーで述べられている、API Gatewayに公開箇所を絞るというプラクティスに沿っているように思います。

Typically, when you must expose an API to the public, there is a risk that the API frontend could be targeted by a DDoS attack. To help reduce the risk, you can use Amazon API Gateway as a “front door” to applications running on Amazon EC2, AWS Lambda, or elsewhere.
By using Amazon API Gateway, you don’t need your own servers for the API frontend and you can obfuscate other components of your application. By making it harder to detect your application’s components, you can help prevent those AWS resources from being targeted by a DDoS attack.

実装例

今回は（ちょっと慣れない言語なのですが）Node.jsでlambdaを書いてみることにします。
フレームワークとしてserverless frameworkを使うとお手軽にAPI Gateway + Lambdaの構成を作ることができました。

https://github.com/saka1/slack-webhook-gatekeeper

バックエンドのSlack App名に対応したURLパスに対してWebhookが飛んでくると、秘密鍵を使ってWebhookの検証をします。あらかじめ、Slack App名と秘密鍵の対応関係はparameter storeに入れておきます。正当なWebhookだった場合にはupstreamにリクエストを飛ばしてプロキシ動作をします。URLパスは複数登録することができるように作りました。

学んだこと

• AWSのparameter storeはあんまり高速ではなさそう（getに数百msかかる？）だったので、lambdaでキャッシュしたほうが無難そうでした
• プロキシとBotは1:Nの関係にあるため、プロキシシステムは全てのBot Appの秘密情報を管理しないといけなくなります（そうしなければリクエストの検証ができません）
  • 理想的ではないので、何かうまい回避方法があればなあと思っています

API Gatewayからlambdaを呼ぶには「lambda統合」「lambdaプロキシ統合」の2つがあるらしいのですが、前者を使ったほうがよさそうでした。というか飛んでくるWebhookの検証でHMAC計算が入るため、1バイトでもゴミが入ると正しく動きません。そもそも前者は用途に対して複雑すぎました。

まとめ

この記事では、Slack Botの前段に置くプロキシシステムを検討し、その実装までをやってみました。ざっくり机上で検討 → ざっと実装した割には案外使えそうなものが考案できて、個人的には満足しています。

はじめに

こんにちは！@70days_jsです。

オブジェクト(プロトタイプベース)を使って飼育ゲームを作りました。
飼育するのは黒い玉です。（たまに希少種として色違いが生まれるよう設定）

58日目。(2019/12/15)
よろしくお願いします。

サイトURL

https://sin2cos21.github.io/day58.html

やったこと

黒い球を飼育するゲームを作りました。(gif)↓

何が起きているか箇条書きします。

1. 玉は画面内のみ動ける
2. 玉には寿命がある（寿命を終えると消える）
3. 玉は1/10以下の確率で色違いが生まれてくる
4. 玉は檻を外すボタンを押すと画面外へ移動できる（topをすぎるとbottomに戻る、左右も同じ)

html↓

 <body>
    <canvas id="canvas"></canvas>
    <input type="button" value="檻を外す" id="button" />
    <input type="button" value="増やす" id="create" />
  </body>

css↓

* {
  margin: 0;
  padding: 0;
}
#canvas {
  display: block;
  background: white;
}

#button {
  position: absolute;
  top: 10px;
  left: 10px;
}
#create {
  position: absolute;
  top: 10px;
  left: 100px;
}

JavaScript（かなり長いです。162行）↓

//全体で使う変数宣言（カンマ区切りで変数宣言が可能！！）
let canvas = document.getElementById("canvas"),
  button = document.getElementById("button"),
  create = document.getElementById("create"),
  canvasContext = canvas.getContext("2d"),
  radius = 10,
  hairetu = [], //obj格納用の配列
  width = window.innerWidth,
  height = window.innerHeight,
  number = 2,
  maxLife = 500,
  flag = true;

//_____画面サイズ変更に対応するための処理___________
canvas.width = width;
canvas.height = height;

window.addEventListener("resize", function resize() {
  Width = window.innerWidth;
  height = window.innerHeight;
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

//檻をつける or つけないに対応するための処理
button.addEventListener("click", function() {
  if (flag) {
    flag = false;
    button.value = "檻をつける";
  } else {
    flag = true;
    button.value = "檻を外す";
  }
});

//Animalを増やす処理
create.addEventListener("click", createAnimal);

//_______________初期化__________________________
function Animal(canvasContext, positionX, positionY) {
  this.canvasContext = canvasContext;
  this.initialize(positionX, positionY);
}

Animal.prototype.initialize = function(positionX, positionY) {
  this.positionX = positionX;
  this.positionY = positionY;
  this.starLife = Math.ceil(maxLife * Math.random());
  this.life = this.starLife;
  if (Math.ceil(Math.random() * 10) === 1) {
    this.color = {
      r: 0,
      g: Math.floor(Math.random() * 255),
      b: Math.floor(Math.random() * 255),
      a: 1
    };
    this.velocity = {
      x: Math.random() * 10,
      y: Math.random() * 10
    };
    this.rare = 1;
  } else {
    this.color = {
      r: 200,
      g: 0,
      b: 0,
      a: 1
    };
    this.velocity = {
      x: Math.random() * 8,
      y: Math.random() * 8
    };
    this.rare = 0;
  }
};
//_________________各種メソッド_____________________
function render() {
  canvasContext.clearRect(0, 0, width, height);
  canvasContext.globalCompositeOperation = "lighter";
  hairetu.forEach(function(obj) {
    obj.render();
  });
  requestAnimationFrame(render); //自動でアニメーションしてくれる関数
}

Animal.prototype.render = function() {
  this.draw();
  this.updatePosition();
  this.updateParams();
  if (flag) {
    this.limitPosition();
  } else {
    this.connectPosition();
  }
};

Animal.prototype.draw = function() {
  ctx = this.canvasContext;
  ctx.beginPath();
  ctx.arc(this.positionX, this.positionY, radius, Math.PI * 2, false);
  ctx.fillStyle = this.updateParams();
  ctx.fill;
  ctx.fill();
  ctx.closePath();
};

Animal.prototype.updatePosition = function() {
  this.positionX += this.velocity.x;
  this.positionY += this.velocity.y;
  var ratio = this.life / this.starLife;
  this.color.a = 1 + ratio;
  this.life -= 1;
};

Animal.prototype.updateParams = function() {
  var col = this.color.r + ", " + this.color.g + ", " + this.color.b;
  var g = this.canvasContext.createRadialGradient(
    this.positionX,
    this.positionY,
    0,
    this.positionX,
    this.positionY,
    radius
  );
  g.addColorStop(0, "rgba(" + col + ", " + this.color.a * 1 + ")");
  g.addColorStop(0.5, "rgba(" + col + ", " + this.color.a * 0.8 + ")");
  g.addColorStop(1.0, "rgba(" + col + ", " + this.color.a * 0 + ")");
  return g;
};

Animal.prototype.limitPosition = function() {
  if (this.positionX > width - radius || 0 >= this.positionX - radius)
    this.velocity.x = -this.velocity.x;
  if (this.positionY > height - radius || 0 >= this.positionY - radius)
    this.velocity.y = -this.velocity.y;
};

Animal.prototype.connectPosition = function() {
  if (this.positionX < 0) this.positionX = width;
  if (this.positionX > width) this.positionX = 0;
  if (this.positionY < 0) this.positionY = height;
  if (this.positionY > height) this.positionY = 0;
};

//______________実行__________________________
function createAnimal() {
  var startPositionX = Math.random() * width,
    startPositionY = Math.random() * height;
  if (0 > startPositionX - radius) startPositionX += radius;
  if (startPositionX >= width - radius) startPositionX -= radius;
  if (0 > startPositionY - radius) startPositionY += radius;
  if (startPositionY >= height - radius) startPositionY -= radius;
  obj = new Animal(canvasContext, startPositionX, startPositionY);
  hairetu.push(obj);
  if (obj.rare === 1) alert("希少種が生まれました！");
}

for (var i = 0; i < number; i++) {
  createAnimal();
}

render();

大体のやることはコメントに書いています。

ポイントを説明してみると、寿命はオブジェクトを削除しているのではなく、alpha値を0にしただけです。（つまり見えないだけで動いてはいる）↓

Animal.prototype.updatePosition = function() {
...
var ratio = this.life / this.starLife;//←ratioの比率はマイナスに増えていく
this.color.a = 1 + ratio;//←マイナスを足しているのでalpha値が0に近づき見えなくなる
this.life -= 1;
};

希少種が1/10以下の確率で生まれてくる部分はこれです。↓

if (Math.ceil(Math.random() * 10) === 1) {
...

ceilは切り上げをしています。randomは0~1までの値を返すので、1/10以下の確率ということになります。

メモ

今日勉強したことのメモを書いておきます。

主題: コールバック関数について

• Q. コールバック関数の引数は誰が入れている？
  • ex: hoge.addEventListener('click', fuga(e));
  • 　　　　　　　　　　　　　　　　　　↑このeは誰が？
• A. 呼び出し元の関数（この例だとaddEventListenerが入れている)
• 対処法: 混乱の原因はライブラリで知らぬ間に処理が行われいることにある。のでライブラリを調べるしかない

補足:
- Q. ちなみに呼び出し元の関数の名前は？
- A. 高階関数

function hoge(){ function(){} };

↑高階関数（呼び出し側）　↑コールバック関数（呼び出される側）

感想

コールバックの引数は今までずっと疑問だったので、理解することができてよかったです。

最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。

参考

JavaScript中級者への道【5. コールバック関数】
ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまで(← 本を借りました。リンクはamazonページです)

大変勉強になりました。ありがとうございます！

この記事は「PWA Advent Calendar 2019」の18日目の記事です。

今年の春、Progressive Web Apps や Firebase の練習がてら、英単語学習ソフトを開発しました。
(が、そのまま放置していた)

作りっぱなしももったいないので、アドベントカレンダーに乗じてご紹介します。

• ベーシック英単語800

以下のような特徴があります。

• Vue.js を利用したMPA(Multi-page Application)
• Progressive Web Apps 対応。Windows10/スマホにインストールして、オフラインで動作。
• 英単語の発音をクリックして確認できる (Web Speech API 利用)
• Firebase のHosting機能を利用して公開
• 選択肢と回答をランダムに生成。英単語アプリにありがちな「同じ選択肢と回答が繰り返され、出題パターンを覚えてしまう」ことがないようにした。(800の4乗x10問で、組み合わせは4兆通りぐらい？)

開発中のメモをもとに、いくつか備忘録を記述します。

Web Speech API による英語音声の確認

アプリを起動すると、英単語と4つの選択肢が表示されます。英単語をクリック・タップすると、英語の発音を確認できます。
Speech Synthesis API という、Web Speech APIの音声合成機能を利用しました。

          pronounce: function () {

            // confirm English word's pronounciation

            let u = new SpeechSynthesisUtterance();
            u.lang = 'en-US';
            u.text = document.getElementById('englishWord').innerHTML;
            u.volume = "1";
            speechSynthesis.speak(u);

          }

※Speech Synthesis API の使い方については拙稿「Web Speech API を 利用して 英単語の音声確認をするアプリを作る」にまとめました。

Service Worker によるデータキャッシュ

html・CSS・効果音などのアセットファイル類を、Service Worker でまとめてキャッシュしています。

バージョンをキャッシュのキーとして登録。バージョン情報に更新があった場合、キャッシュパージ後、ファイルをキャッシュしなおすようにしました。

const CACHE_NAME = `BasicEnglish800-${version}`;

---- 中略 ----

// Service Worker へファイルをインストール

self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function (cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// リクエストされたファイルが Service Worker にキャッシュされている場合
// キャッシュからレスポンスを返す

self.addEventListener('fetch', function (event) {
  if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin')
    return;
  event.respondWith(
    caches.match(event.request)
      .then(function (response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
      )
  );
});

// Cache Storage にキャッシュされているサービスワーカーのkeyに変更があった場合
// 新バージョンをインストール後、旧バージョンのキャッシュを削除する
// (このファイルでは CACHE_NAME をkeyの値とみなし、変更を検知している)

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => Promise.all(
      keys.map(key => {
        if (!CACHE_NAME.includes(key)) {
          return caches.delete(key);
        }
      })
    )).then(() => {
      console.log(CACHE_NAME + "activated");
    })
  );
});

※Service Workerの使い方や詳細については拙稿「Progressive Web Apps (PWA) 学習者のメモ その1 　(Service Worker)」にまとめました。

Vue.js で問題を生成、回答記録を追跡

Vue.js を利用して、回答数を記録。
最初に１０問分の英単語・選択肢・回答を、ランダムに生成。
配列に単語・回答・選択肢のデータを格納。
問題を解いて「次へ」をクリック・タップすることで、配列を切り替え、次の問題を表示。
１問解くたびに、次の問題へ切り替え。

10問終了後に正誤のデータを確認し、回答を記録するようにしました。

      const vm = new Vue({
        el: '#el',
        data() {
          return {
            arr: answerList,
            count: 0,
            choice: quizList,
            result: [],
          }
        },
        methods: {
          check: function (event) {

            // check user's answer each by each

            let target = document.getElementById("answerOptions");

            target.setAttribute('style', 'pointer-events: none;');
            let rightAnswer = this.arr[this.count].Japanese;
            let chosenAnswer = event.target.innerHTML;

            if (rightAnswer === chosenAnswer) {

              correctSound.play();
              message.innerHTML = "正解!";
              addAnswer("○");

            } else {

              wrongSound.play();
              message.innerHTML = "残念!";
              addAnswer("×");

            }

            this.count === 9 ? complete() : unComplete();
          },

※Vue.js を利用した回答の切り替え（＝配列の切り替え）については、拙稿「Vue.js で 配列とJSONの切り替え表示を行う」にまとめました。

振り返り

一つ一つは単純なコードですが、組み合わせることで、それなりにアプリとして形になった気がしました。

できれば

• Firebase のユーザー認証を利用して、リアルタイムDBに回答記録を保存
• 全アプリユーザーの間で、どの単語の誤答率が高いか、統計を取る

までやってみたかったのですが、時間切れで実装できず。
Firebaseの利用はHostingのみとなりました。

そのうち時間を作ってチャレンジしてみたいと思います。

備考

以下のサイトのデータ・情報を元に開発しました。

• 英単語データ
  • 「800ベーシック英単語」
• ランダムな配列生成ロジック
  • 「m2」

前回、PlayCanvasのレイキャストの設定について知ってみる、でレイキャストについて話しました。

他のUnityやThree.jsでも通じるようなレイキャストの設定方法だったんじゃないかなと思います。

今回はPlayCanvasの事例の一つでBMW i8のコンフィギュレーターがあるのですが、
ここのドアなどで使用されているレイキャストの四角形…

これ、DOMじゃん

前回紹介したレイキャストの例ではElementComponentとEntityを配置してその座標を参照してレイキャスト処理を行なっていました。
３Dオブジェクトの3次元座標とカーソルの2次元座標を演算してレイキャスト処理を行い実装していました。
そこでは、screenToWorld()を使っていました。

今回は、「3次元座標を参照して2次元座標に反映する」、的なことを行います。

試しに前回のレイキャストの記事で説明したものと今回のDOMを追従させる方法をデモってみました。

• 緑がDOM
• 黄がEntity
• 赤がElementComponent

になっていて、それぞれクリックでリアクションを返すようにしています。
https://playcanv.as/p/SYcc55E4/

基本的にやることはElementComponentと同じ方法を使っています。
このElementComponentをDOMに置き換えた感じですね。

コードは以下の感じですね。

var DomHotspot = pc.createScript('domHotspot');

DomHotspot.attributes.add("cameraEntity", {type: "entity", title: "Camera Entity"});

DomHotspot.prototype.initialize = function() { // init
    this.directionToCamera = new pc.Vec3();
    this.defaultForwardDirection = this.entity.forward.clone();

    this.btn = document.createElement("div");
    document.body.appendChild(this.btn);
    this.btn.style.position = "fixed";
    this.btn.style.width = "30px";
    this.btn.style.height = "30px";
    this.btn.style.background = "#ffffff";
    this.btn.style.transition = "opacity .5s";
    this.btn.style.zIndex = 10;
    this.btn.addEventListener("mousedown",function(){ this.style.background = "#333333"; });
    this.btn.addEventListener("mouseup",function(){ this.style.background = "#ffffff"; });
};

DomHotspot.prototype.update = function(dt) { // update
    var worldPos = this.entity.getPosition();
    var screenPos = new pc.Vec3();

    this.cameraEntity.camera.worldToScreen(worldPos, screenPos);

    this.directionToCamera.sub2(this.cameraEntity.getPosition(), this.entity.getPosition());
    this.directionToCamera.normalize();
    var dot = this.directionToCamera.dot(this.defaultForwardDirection);

    if (dot < 0) {
        this.btn.style.opacity = 0;
    } else {
        this.btn.style.opacity = 1;
    }

    this.btn.style.transform = "translate(" + screenPos.x + "px," + screenPos.y + "px)";
};

initializeをみてわかりますが、DOMの設定は即興ものなので悪しからず…

sub2とかnormalizeとかdotとかで表示非表示を切り替えていますがその説明は前回の記事から引用しますね。

表示非表示しているのは、カメラとEntityの3次元座標を減算し、その値とEntityのz軸ベクトルを内積演算した結果が0以下の場合は非表示、0以上は表示しているようです。
正直どう言う計算をしているのかわからないかもしれませんが、フローだけ説明すると…
sub2()でカメラとEntityの3次元座標を減算しているのは、カメラの方向を求めています。
こうして求めたカメラの方向をベクトルに変換するためにnormalize()を使って正規化します。
ベクトルの正規化については、ググると色々出てきますので3Dの勉強がてら調べるといいかもしれません。
そして正規化したカメラのベクトルとEntityのz軸ベクトルをdot()を使って内積を求めていきます。

このDOMのポジションを指定する上で一番重要なのが以下です。

var worldPos = this.entity.getPosition();
var screenPos = new pc.Vec3();

this.cameraEntity.camera.worldToScreen(worldPos, screenPos);

このworldToScreen()、他で使用されているscreenToWorld()の逆のことをやっています。
今までは2次元座標を3次元座標に変換していましたが、今回は3次元座標を2次元座標に変換します。

変換した値を何か処理することもできるのですが、BMW i8のプロジェクトのスクリプトを見てみると…
なんとこの値をそのままtransfrom: translate()に入れるだけで良いみたいです。

this.btn.style.transform = "translate(" + screenPos.x + "px," + screenPos.y + "px)";

これだけでいいなんて……
なんて楽なんだ…

このscriptを空っぽのEntityなんかに当てて使います。

なんとjsの行数は40未満で出来ていることに驚きました。
かつ、エディターからどこにDOMを配置させるのか視覚的に見れるのも良いですね。

前回から通してレイキャストについて調べてみました。
なかなか難しく感じてしまっていましたが、こう実装してみる意外と簡単に出来てしまうんだなって思いました。

これで、Web３Dコンテンツをたくさん作れるようになれるかなー

はじめに

これはVue Advent Calendar 2019の16日目の記事です。

最近、Vue.jsのプラグインを作ってNPMパッケージとして公開する機会がありました。Vueのプラグインを作るのもNPMパッケージを公開するのも初めてでしたが、意外と手軽にできたので、「OSSはなんか敷居が高そうだ...」と思っているエンジニアにもオススメです。

今回、TypeScriptでVueプラグインを実装し、NPMに公開するためのテンプレートを用意してGithubに公開しました。この記事では、そのテンプレートの紹介をします。

テンプレートのご紹介

vue-plugin-ts-templateというテンプレートを用意しました。
中身は本当にシンプルで、一般的なtypescriptのプロジェクトでちょっとだけ実装したコードが入っているだけのものになります。

案外、TypeScriptやeslint、prettierの導入が面倒だったりするので、Vueのプラグインの作り方というよりかは開発環境を一発で作れるという意味の恩恵のほうが強いかもしれません。

プラグインの実装〜NPMパッケージの公開まで

流れはREADMEに書いてありますが、英語になっているので改めて日本語で解説していきたいと思います。

0. 要件

NPMパッケージとして公開するにあたり、NPMのアカウントが必要になるので、公開しようと思う人は作っておくようにしましょう。
また、typescriptはtscでコンパイルしているのでグローバルにインストールしておくと良いでしょう。

1. packageの初期化と依存関係のインストール

まずはテンプレートをダウンロードして依存関係をインストールしましょう。
NPMに公開する際には、パッケージのいろんな情報を入力する必要があります。
下記のコマンドを実行すると、コマンドライン上でインタラクティブに質問が出てくるので自分のパッケージにあったものに修正していきましょう。

$ yarn install
$ yarn init

こんな具合に入力していきます。

• テンプレートには初めから設定値が入っているので、使う場合は上書きしてください。 keywordsは聞かれないようなので、直接package.jsonを編集する必要があります。
• endopointはデフォルト（index.js）で大丈夫です。tsconfig.jsonでビルドファイルをプロジェクト直下のindex.jsとして出力するようにしています（好みに応じて変えてください）。

2. プラグインの実装

Vueプラグインの実装方法については公式サイトが参考になります。
srcフォルダ内でTypeScriptを書いてください。
テンプレート内ではLoggerをインスタンスメソッドとして追加しています。

https://github.com/gyarasu/vue-plugin-ts-template/blob/master/src/index.ts

src/index.ts

import _Vue from 'vue';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const log = (value: any): void => {
  console.log(value);
};

export default {
  install(Vue: typeof _Vue): void {
    Vue.prototype.$log = log;
  }
};

ちなみに、公開したパッケージはこんな感じで使えます。

main.js

import Vue from 'vue';
import VueLogger from 'vue-logger'; // 公開するパッケージ名

Vue.use(VueLogger);

App.vue

<script>
export default {
  mounted() {
    this.$log('component is mounted!');
  }
};
</script>

3. ビルド

npmスクリプトとしてビルドコマンドも用意しています。

$ yarn build

これだけです。

4. コミット&プッシュ&タグ作成

ビルドまで終わったらNPMに公開できる状態になります。
NPMに公開してるバージョンとGithubのコードのパージョンは揃っていたほうが都合がいいと思うので、公開する前にコードをコミット・プッシュして、バージョンがわかるタグを打っておくようにしましょう。
package.json内にあるバージョン情報も必要に応じて更新しましょう。

5. NPMへの公開

ここまでくればあとは公開するのみです。
プロジェクト直下（package.jsonがいるディレクトリ） で下記のコマンドを実行すればOKです。

$ npm adduser 
$ npm publish ./

npm adduserでは、登録済みのNPMアカウントでログインを行います。
ここでログインしたアカウントにパッケージが追加されることになるので、会社用・仕事用で使い分けている場合などは注意しましょう。

まとめ

Vueでなにかする場合に、プラグインとして使える機能があると結構便利です。
また、プラグインの作成もそんなに難しいものではないですし、OSS活動を始めるにはもってこいの題材かもしれません。
便利なプラグインを作ってVueを盛り上げていきましょう！！

この記事はtomowarkar ひとりAdvent Calendar 2019の15日目の記事です。

はじめに

HTML5を使った3分で作れるクソアプリシリーズ。

Webブラウザから取れる情報ってめちゃくそあるんやで!!

デモページ(スマホで開いてね)

AndroidのChromeでの動作は確認しているよ

https://tomowarkar.github.io/blog_content/motion/mobile.html

コード

デバイスの方向(加速度)を取得して閾値を超えたらバイブレーションをさせるってだけ。

改良すれば振ったか振ってないかの判定もできました(判定ガバガバだったけど)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1.0" />
  <title></title>

  <script>
    window.addEventListener("devicemotion", e => {
      x = e.accelerationIncludingGravity.x;
      y = e.accelerationIncludingGravity.y;
      z = e.accelerationIncludingGravity.z;

      if (z > 9) {
        navigator.vibrate(30);
      } 

      let result = document.getElementById("result");
      result.innerHTML =
        "X：" + Math.round(x * 10) / 10 + "<br>" +
        "Y：" + Math.round(y * 10) / 10 + "<br>" +
        "Z：" + Math.round(z * 10) / 10 + "<br>"
    }, true);
  </script>
</head>

<body>
  <div id="result">vibration</div>
</body>

</html>

おわりに

以上明日も頑張ります！！
tomowarkar ひとりAdvent Calendar Advent Calendar 2019

参考

Vibration API
デバイスの方向の検出

Reduxってなに？

ReduxとはReactと相性が良いフレームワークのことです。
Redux単体で利用することも可能ですが、ReactとReduxの組み合わせは鉄板でしょう。
stateを容易に管理することの出来るReduxですが、大規模なアプリケーションになればなるほど効果を発揮してくれそうです。

Reduxアプリを構成する機能ってなに？

Reduxを使ったアプリはAction,Reducer、Storeによって構成されています。

Actionとは

何がおきたのかという情報を持つオブジェクトです。

ActionをStoreへ送信（dispatch）すると、Storeのstateが変更されます。
stateの変更ではActionが必ず必要となります。
stateへ通じるルートを攻略する第一段階、まるで門番のような立ち位置の機能ですね。

const action = {
  type: 'SET_wanko',
  text: 'トイプードル'
};

Actionではどういうタイプのアクションなのかを明示するためtypeプロパティが必要となります、他と区別できないと何がなんだかわからなくなりますもんね。

逆に言えばこのActionはその程度の情報しか持っておらず、どのようにstateを変更するのか知らない存在なのです。

Reducerとは

上記したSET_wankoというタイプのアクション受けて、storeから受け取ったstateを変更して返す純粋関数です。
Reducer内では引数変更したり、API呼び出したり、Math.random()等の純粋関数以外の関数を呼び出してはいけません。
結果が毎回同一になるような操作しか扱えないのです。

stateをどう変更するのかactionでは決めれなかったことを指定しています。

function triming(state = [], action) {
  switch (action.type) {
    case 'SET_wanko':
      return state.concat([{ text: action.text, completed: false }]);

    default:
      return state;
  }
}

Storeとは

Storeとはアプリケーションの全てのstateを保持するオブジェクトです。

dispatchされたActionと保持するstateをreducerに渡してstate変更に一役買う立場の存在で、ボスのような風格ですね。
Storeの複製はダメです、ボスは一人だけなのです。
又、stateの変更は必ずActionを経由してください、バグの特定が困難になるのを防ぐためです。
ボスに会うためにはまず名乗って（Action type）からが礼儀ってもんです。

// Action
const action = {
  type: 'SET_wanko',
  text: 'トイプードル'
};

// Reducer
function triming(state = [], action) {
  switch (action.type) {
    case 'SET_wanko':
      return state.concat([{ text: action.text, completed: false }]);

    default:
      return state;
  }
}

// Store
const store = Redux.createStore(triming);

// Actionをdispatchする
// Reducerであるtodosが実行され、Storeが保持しているstateが変更される。
store.dispatch(action);

// stateを取得する
console.log(store.getState()); 

Next.jsでcookieを扱うのは大変

Next.jsなどのサーバーサイドレンダリング(以下SSR)をしているフレームワークでcookieを扱うのは面倒くさいですよね。
その理由の一つとして、同じコードでもSSRの場合とクライアントでレンダリングしている場合で挙動が違うということがあります。
例をお見せしましょう

クライアントでレンダリングしている場合

console.log(document.cookie); // accessToken=test1234;

SSRの場合

console.log(document.cookie); // ReferenceError: document is not defined

原因

クライアントサイド(ブラウザ)でレンダリングしている時は、ブラウザに保存されているcookieにアクセスできるが,
SSRの時はブラウザに保存されているcookieにアクセスできません。

SSRの時にcookieを扱うには

SSRでcookieの情報はここに入っています

index.tsx

const TestPage: NextPage<Props> = (props) => {
    return <div>test</div>
}

TestPage.getInitialProps(ctx) {
    // ここ
    console.log(ctx.req.headers.cookie) // accessToken=test1234;     

    return {};
}

同じライブラリをクライアントとSSRで共有していたりすると、条件分岐などが大変ですね
そんな時に nookies を使います
https://www.npmjs.com/package/nookies

使い方

以下の例で示すようにクライアントサイドの場合ctxを渡さずに、SSRならctxを渡せば、cookieをオブジェクトに整形して返してくれます。

tool.ts

import { parseCookies } from 'nookies';
import { NextPageContext } from 'next';

export function printCookie(ctx?: NextPageContext) {
    const cookie = parseCookies(ctx);
    console.log(cookie) // { accessToken: 'test1234' }
}

また、cookieの追加もクライアントとSSR分け隔てなく行ってくれます

set_cookie.ts

import { setCookie, destoroyCookie } from 'nookies';
import { NextPageContext } from 'next';

export function setCookie(ctx?: NextPageContext, token: string) {
        setCookie(ctx, 'accessToken', token, {
            maxAge: 30 * 24 * 60 * 60,
        });
}

// ついでにcookie削除(動作確認してません)
export function destoroyCookie(ctx?: NextPageContext) {
    destroyCookie(ctx, 'accesstToken')
}

ライブラリを読んでみた(箇条書きです！)

https://github.com/maticzav/nookies

nookies/src/index.ts

const isBrowser = () => typeof window !== 'undefined' // 今の環境がSSRかクライアントサイドレンダリングか調べてるらしいです

.
.

if (ctx && ctx.req && ctx.req.headers && ctx.req.headers.cookie) { 
    return cookie.parse(ctx.req.headers.cookie as string, options) // SSRだったらctx.req.headers.cookieに入っているcookieをparseして返却
} 

.
.

if (isBrowser()) { 
   return cookie.parse(document.cookie, options) //クライアントだったらdocument.cookieにあるcookieをparseして返却
} 

.
.

ctx.res.setHeader('Set-Cookie', cookiesToSet) // SSRならレスポンスヘッダーにcookieをセットする

.
.

if (isBrowser()) { |
    document.cookie = cookie.serialize(name, value, options) // クライアントならクッキーをセット
}

まとめ

以上です。いかがでしたでしょうか？
参考になりましたら幸いです。

概要

こんにちは、先日AWSのre:Inventで発表されたAWS Amplify DataStoreがめちゃくちゃ便利すぎて驚きを隠せない、都内でフロントエンドエンジニアをしていますかめぽんです。
今まで、VueやNuxtでの開発がメインでやってきておりましてReact、Nextでの開発経験が少なくまたTypescriptでなにか出来ないかなと探しておりました。
最近だとモバイル開発のためのAWSのサービスをインテグレートしたAWS版firebaseのようなAmplifyというサービスが出ています。内容をみてみると、何やら爆速でサーバーレスアプリケーションが出来そうだなと感じたので、Next.js + AmplifyでTodoアプリを作ってみました。巷では、Nuxt.js + firebaseの組み合わせの記事がかなり多かったですが、こちらのアーキテクチャでも実装出来たのでその方法を体系的にまとめて見ました。
Next + Amplifyでの開発がなんとなくわかるようになると思うので、ぜひ最後まで読んでいただけると嬉しいです。

Next.jsとは

こちらはもはや説明不要かもしれませんが、ZEIT社が開発したサーバーサイドレンダリング対応のwebアプリケーションを構築できるReact製フレームワークです。

pages配下の自動ルーティングやダイナミックルート、SPA/SSRに始まり静的サイトジェネレートなアプリはもちろん、最近だとゼロコンフィグでTypescriptがそのまま使えたり、AMP対応、apiディレクトリによるapiの実装などかなりDXがよくなってきています。もちろん導入も手軽にできるので開発スピードを格段に高めることが出来ます。

AWS Amplifyとは

AWS AmplifyはAWSのサービスを仕様したmBaasの一種で、webアプリケーション作成、設定、開発をかなり簡単にすることが出来、スケーラブルでもあるためサービスの規模に応じてオートスケールさせることも可能です。似たようなサービスではgoogle社のfirebaseがあります。バックエンドの資材を自分で準備しなくてもAmplifyのコマンドで必要なソースコードやモデルなどを準備してくれます。本来であれば、設定やプロビジョニング、分析などを全て自前で行っていかなければいけませんが、選択したもに関してAmplifyはそれらを管理してくれます。認証、オフラインデータ、解析、プッシュ通知、AR/VR、botなどを必要に応じてAWSサービスをアプリケーションに対してインテグレートします。

Next.js + Amplifyは何が嬉しいのか

初期開発スピードの爆速化

昨今では、マーケットの変化が非常に早くユーザーニーズも目まぐるしく変わっています。それに加えて、サービスやプロダクトにおける提供すべきUXも何が適切かわかりにくくなってきている中で、ビジネスサイドと開発サイドで共通認識として持っていなければならないのが仮説検証を高速に回し、フィードバックをUXに還元することです。DX時代とその未来における「ユーザーエクスペリエンス」についての基本を抑えるという記事を書かせていただいたのですが、サービスのローンチだけでなくそこに至る検証もスピード感を持って行うことが重要です。そこで、技術選定やアーキテクチャをどうするのかは悩む部分だと思いますが、いかに早く社会実装するかという観点で見るのそれ自体は早く解決すべき問題です。もちろん軽視すべき問題ではないというのが前提です。

そういった中で、Next.js + Amplifyの組み合わせはそれを解決することができると考えています。両者の環境構築で必要な時間は、独自で設計に応じてAWSサービスの選定をしたり構築することに比べても時間がかからずすぐにlocalhostなどで確認出来ますし、必要に応じてバックエンドサービスを提供してくれます。

適切な型やモデルを定義した上でのオートスケール

Next.jsではゼロコンフィグでTypescriptを動かせますし、AmplifyではAppSyncというサービスを含んでいてGraphqlでのデータのやりとりをします。そこで、必要なデータの型を定義してくれるのでフロントエンドとバックエンドで共通で型を使用することが容易です。
フレームワークが何かよりも最重要ビジネスルールは何かを抑える方が大事で、それを定義した上でオートスケールできるのでデータの保全性を担保しつつ希望に応じて対応することが出来ます。

Next.jsのセットアップ

早速Next.jsのセットアップを始めていきます。

ディレクトリ構成

最終的なディレクトリ構成は以下のようになっています。実際のディレクトリから必要な部分だけ掲載してますので、全ファイルを確認したい場合はGithubにコードを準備してますのでぜひ参考にしてみてください。amplifyとgraphqlディレクトリに関しては以降のAWS Amplifyのセットアップにて自動生成されます。

├─ amplify
│  ├─ #current-cloud-backend
│  │  ├─ amplify-meta.json
│  │  ├─ api
│  │  │  └ todo
│  │  │   ├─ build
│  │  │   ├─ parameters.json
│  │  │   ├─ resolvers
│  │  │   ├─ schema.graphql
│  │  │   ├─ stacks
│  │  │   └─ transform.conf.json
│  │  └─ backend-config.json
│  ├─ backend
│  │  ├─ amplify-meta.json
│  │  ├─ api
│  │  │  └ todo
│  │  │   ├─ build
│  │  │   ├─ parameters.json
│  │  │   ├─ resolvers
│  │  │   ├─ schema.graphql
│  │  │   ├─ stacks
│  │  │   └─ transform.conf.json
│  │  ├─ awscloudformation
│  │  │  └ nested-cloudformation-stack.yml
│  │  └─ backend-config.json
│  └─ team-provider-info.json
├─graphql/
│ ├─queries.ts
│ ├─mutations.ts
│ ├─subscriptions.ts
│ └─schema.json
├─pages/
│ ├─index.tsx
│ └─todo.tsx
├─components/
│ └─templates/
│   ├─head.tsx
│   └─navigation.tsx
├─store/
├─aws-exports.js
├─package.json
├─.gitignore
├─next.config.js
├─next-env.d.ts
└─tsconfig.json

必要なモジュールのインストールとpackage.jsonの編集

作業ディレクトリが出来たら、以下コマンドで必要なモジュールの準備をしましょう。

npm install --save react react-dom next
npm install --save-dev @types/node @types/react

インストール出来きたら、package.jsonのscriptsを以下のように編集します。

package.json

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }

各種コンポーネントの準備

ここでは、共通で使うコンポーネントの定義をします。ナビゲーション用とhead部用のコンポーネントを準備します。

navigations.tsx

import * as React from 'react';
import Link from 'next/link'

const Navigation: React.FC = () => {
  return (
    <div>
      <Link href="/">
        <p>Index</p>
      </Link>
      <Link href="/about">
        <p>About</p>
      </Link>
      <Link href="/todo">
        <p>Todo</p>
      </Link>
    </div>
  )
}
export default Navigation

head用のコンポーネントに関してはお好みで設定してみてください。

head.tsx

import * as React from 'react'
import Head from 'next/head'
import info from '../../package.json'

const defaultOGURL = ''
const defaultOGImage = ''

interface Props {
  title: string,
  description?: string,
  url?: string,
  ogImage?: string,
}

const head: React.FC<Props> = props => {
  return (
    <Head>
      <meta charSet="UTF-8" />
      <title>{props.title || ''}</title>
      <meta name="description" content={props.description || info.description} />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta property="og:url" content={props.url || defaultOGURL} />
      <meta property="og:title" content={props.title || ''} />
      <meta
        property="og:description"
        content={props.description || info.description}
      />
      <meta name="twitter:site" content={props.url || defaultOGURL} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:image" content={props.ogImage || defaultOGImage} />
      <meta property="og:image" content={props.ogImage || defaultOGImage} />
      <meta property="og:image:width" content="1200" />
      <meta property="og:image:height" content="630" />

      <link rel="icon" sizes="192x192" href="/static/touch-icon.png" />
      <link rel="apple-touch-icon" href="/static/touch-icon.png" />
      <link rel="mask-icon" href="/static/favicon-mask.svg" color="#49B882" />
      <link rel="icon" href="/static/favicon.ico" />
  </Head>
  )
};

export default head

pagesの準備

次にpagesコンポーネントの準備です。

pages/index.tsx

import * as React from 'react';
import Head from '../components/templates/head'
import Navigation from '../components/templates/navigation'

const Index: React.FC = () => {
  return (
    <div>
      <Head title="Index page" />
      <Navigation />
      <p>Hello world</p>
      <p>Index</p>
    </div>
  )
}
export default Index

pages/todo.tsx

import * as React from "react";
import Head from '../components/templates/head'
import Navigation from '../components/templates/navigation'

const Todo = () => {

  return (
    <div>
      <Head title="todo" />
      <Navigation />
      <h2>Todo with amplify</h2>
    </div>
  )
};

export default Todo;

この状態で npm run devのコマンドを実行し、http://localhost:3000/にアクセスしてみましょう。以下のような画面にが表示されたら成功です。試しに/todoにもアクセスしてみてtodoページが表示されるかもみてみましょう。

Next.jsの準備は一旦以上です。

AWS Amplifyのセットアップ

Amplifyのインストールと初期セットアップ

なにはともあれ、amplify/cliのグローバルインストールをします。

npm install -g @aws-amplify/cli

インストールが完了したら、amplify -vでバージョンを確認しましょう。以下のような表記になっていたらインストール完了です。

Scanning for plugins...
Plugin scan successful
3.17.0

次にAWSアカウントの紐付けを行います。コンソールにて

amplify configure

とコマンドを打つとIAMユーザーを作成するためにブラウザが立ち上がります。アカウントがあればログイン、なければ新規作成を行いましょう。

accessKeyIdとsecretAccessKeyIdが順番に出るので、それをIAMユーザーの作成画面に貼ります。

画面を進めて行くとIAMユーザー作成画面側にアクセスキーIDが表示されるので、コンソール側に貼り付けてEnterを押します。Profile nameを決めた後、Enterを押しSuccessfully set up the new user.のメッセージが出たら完了です。

Amplifyをプロジェクトで扱えるようにする

ここからは実際にNext.js上でamplifyを使っていく流れを説明していきます。
amplifyバックエンドの様々なサービスを扱えるようにするため、各種リソースをプロジェクトフォルダ内に作成します。
以下コマンドを打ってみましょう。

amplify init

以下のように、使用言語やフレームワーク、ディレクトリ情報などをインタラクティブ形式で進めていきます。

Initializing project in the cloud...のメッセージが出るとバックエンドの資材を初期化＆準備し始めるので待ちましょう。
Your project has been successfully initialized and connected to the cloud!が出たら準備が整う合図になります。

バックエンドAPI（Graphql）の準備

次にAPIの準備をするために、以下コマンドを打ちます。

amplify add api

そうすると、プロジェクト内で扱うapiの種類や名前、スキーマの設定をインタラクティブに決めていきます。今回はGraphqlを使用していきます。
以下、質問例になります

GraphQL schema compiled successfullyのメッセージが出たら、Graphqlでのapi実行に必要なファイル等が自動生成されます。そのあと、schemaファイルに変更をかけたいならば自分で編集します。今回は以下の形式のスキーマにします。

type Todo @model {
  id: ID!
  description: String
  isDone: Boolean
}

次に以下コマンドでデプロイをします。

amplify push

ここでも以下のようにインタラクティブに質問を進めていきます。

デプロイが完了すると、バックエンドのリソースが自動生成されます。

Next.jsとamplifyの結合

必要なバックエンドリソースが揃ったら、いよいよNext.jsの実装に入っていきます。
まずは必要なnpmモジュールをインストールします。

npm install --save @aws-amplify/api @aws-amplify/core @aws-amplify/pubsub

次にNext.jsのセットアップの時に作ったpages/todo.tsxを編集します。

基本的にamplifyモジュールのインポートとconfigの処理をかけます。amplifyの処理を書きたいときは基本的にpagesで以下の処理をかけておきます。

pages/todo.tsx

import Amplify from '@aws-amplify/core';
import PubSub from '@aws-amplify/pubsub';
import API, { graphqlOperation } from '@aws-amplify/api';

import awsmobile from '../aws-exports';

Amplify.configure(awsmobile);
API.configure(awsmobile);
PubSub.configure(awsmobile);

次に使用したバックエンドapiを使えるようにします。graphqlで作っているので、そこからquery、mutations, subscriptionsをimportします。ここでは全てインポートしてますが、実際には使う分だけで大丈夫です。

pages/todo.tsx

import { createTodo, deleteTodo, updateTodo } from '../graphql/mutations';
import { getTodo, listTodos } from '../graphql/queries';
import { onCreateTodo, onUpdateTodo, onDeleteTodo } from '../graphql/subscriptions';

少しだけ説明すると、QueryとMutaionsは従来のCRUDに対応させると以下のようになります。

昨日	CRUD	graphql
作成	CREATE	Mutation
取得	READ	Query
更新	UPDATE	Mutation
削除	DELETE	Mutation

加えてgraphqlではSubscription（購読）というものがあります。これは、端的にいうとサーバー側からのPushのようなものです。バックエンド側のデータに変更がかかった場合などに検知をして値を知らせてくれるものです。

Queryの使い方

query.ts

export const getTodo = `query GetTodo($id: ID!) {
  getTodo(id: $id) {
    id
    description
    isDone
  }
}
`;

importしたlistTodosのクエリを以下のようにAPI.graphql(graphqlOperation)を使ってアクセスします。通信が成功するとdataに取得した値が入ってくるのでそれをpropsで渡したり、リストレンダリング用のローカルステートに渡してあげるとReact側でレンダリングすることが出来ます。

Todo.getInitialProps = async (props) => {
  const data = await API.graphql(graphqlOperation(listTodos));
  return {...props, ...data};
};

Mutationsの使い方

mutations.ts

export const createTodo = `mutation CreateTodo($input: CreateTodoInput!) {
  createTodo(input: $input) {
    id
    description
    isDone
  }
}
`;

こちらは登録用のファンクションです。API.graphql(graphqlOperation(createTodo, inputData));にて第一引数にMutatio、で第二引数で登録するデータを入れます。

pages/todo.ts

const submitTodo = async (list: Array<string>, todo: string) => {
  const id = Math.floor(Math.random() * Math.floor(1000))
    const inputData = {
    input: {
      id,
      description: todo,
      isDone: false
    }
  }

    try {
    await API.graphql(graphqlOperation(createTodo, inputData));
  } catch (e) {
    console.log(e);
  }
};

Subscriptionの使い方

subscription.ts

export const onCreateTodo = `subscription OnCreateTodo {
  onCreateTodo {
    id
    description
    isDone
  }
}
`;

pages/todo.tsx

API.graphql(graphqlOperation(onCreateTodo)).subscribe({
    next: e => {
        // 購読する値の取得
        const todo = e.value.data.onCreateTodo

        // 値をセットする処理を書く
        ...
    }
})

Todoアプリの実装

以下に今回の実装例を載せておきます。

pages/todo.tsx

import * as React from "react";
import { useState } from 'react';
import Amplify from '@aws-amplify/core';
import PubSub from '@aws-amplify/pubsub';
import API, { graphqlOperation } from '@aws-amplify/api';

import awsmobile from '../aws-exports';
import {
  createTodo,
  deleteTodo,
  updateTodo
} from '../graphql/mutations';
import { getTodo, listTodos } from '../graphql/queries';
import { onCreateTodo, onUpdateTodo, onDeleteTodo } from '../graphql/subscriptions';

import Head from '../components/templates/head'
import Navigation from '../components/templates/navigation'

Amplify.configure(awsmobile);
API.configure(awsmobile);
PubSub.configure(awsmobile);

interface TodoType {
  id: number,
  description: string
  isDone: boolean
}

interface DataProp {
  data: {
    listTodos?: {
      items: Array<TodoType>
    }
  }
}

const Todo = (props: DataProp) => {
  const { items: todoItems } = props.data.listTodos;

  const [todo, setTodo] = useState('');
  const [list, setList] = useState([]);

  // 新規追加でTodoを追加する
  const submitTodo = async (list: Array<string>, todo: string) => {
    const id = Math.floor(Math.random() * Math.floor(1000))
    const inputData = {
      input: {
        id,
        description: todo,
        isDone: false
      }
    }
    try {
      await API.graphql(graphqlOperation(createTodo, inputData));
    } catch (e) {
      console.log(e);
    }
  };

  // 既存のTodoを削除する
  const deleteItem = async (id) => {

    const deleteData = {
      input: {
        id
      }
    }

    try {
      await API.graphql(graphqlOperation(deleteTodo, deleteData));
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <div>
      <Head title="todo" />
      <Navigation />
      <h2>Todo with amplify</h2>
      <input style={{
        border: 'solid 1px #ddd',
        padding: 10,
        borderRadius: 4,
        fontSize: 18,
        WebkitAppearance: 'none',
        color: '#333'
      }} value={todo} type="text" placeholder="please write todo" onChange={e => setTodo(e.target.value)} />
      <button style={{
        padding: 10,
        background: '#F06292',
        color: '#eee',
        borderRadius: 4,
        fontSize: 18,
        WebkitAppearance: 'none'
      }} onClick={() => submitTodo(list, todo)}>add Todo</button>
      <ul className="ListContainer">{
        todoItems.map( item => (
          <li key={item.id} className="ListItem">
            <span className="title">{item.description}</span>
            <span>{item.isDone}</span>
            <input type="button" value="delete" onClick={() => deleteItem(item.id)} />
          </li>
        ))
      }</ul>
    </div>
  )
};

Todo.getInitialProps = async (props) => {

  const data = await API.graphql(graphqlOperation(listTodos));

  try {
    const client = API.graphql(graphqlOperation(onCreateTodo));
    if ("subscribe" in client) {
      client.subscribe({
        next: e => {
          console.log(e);
        }
      });
    }
  } catch (e) {
    console.error(e);
  }

  return {...props, ...data};
};

export default Todo;

試しにあらかじめ以下のようにデータをセットしておきます。（このデータ自体はGraphqlでポストしておいたデータになります。）

その状態で、npm run devでサーバーを起動して/todoにアクセスしてみてTodoが表示されていれば成功です。

まとめ&感想

ここまで最後ま目を通していただいてありがとうございます。

巷ではサーバーレスWebアプリケーション開発はおそらく非常に人気で、Nuxt.js + Firebaseの情報が非常に多く見受けられます。非常に便利で僕も好きな技術の一つですが、逆にNext.jsがあまり無くバージョンアップにより魅力的な昨日が増えてきています。また、React製なのでVueに比べると 壊しやすいと感じていまして、それでいうとNext.jsもかなりアリかなと思っております。
AWS Amplify自体も元は一つ一つのAWSサービスから成り立っているため使いやすさだけでなくスケーリングやSLAの面でも非常におすすめかと思います。

しかしながらどの技術選定においても、仮説検証を高速に回し、フィードバックをUXに還元することが大事かなと思っています。その選択肢の一つとして非常に魅力的なので今後少しづつ使っていければと思います。

参考

https://aws-amplify.github.io/docs/js/api
https://qiita.com/G-awa/items/a5b2cc7017b1eceeb002

はじめに

アルプ株式会社でフロントエンドをしているmura-と申します。
弊社サービスのSaaSを管理するtoBむけプラットフォーム ScalebaseではReactを使ってフロントを構築しており、最近話題になっているhooksも導入しています。
昨年から発表はありましたが、今年の2月に、正式にhooksが利用できるようになったReact v16.8.0がリリースされました。

hooksはReact界にとってかなり良いインパクトを残し、hooksとはなにか、どう便利なのかという記事や話題をたくさん目にするようになったと思います。
hooksを導入することのメリット自体は調べればたくさんでてきますが、この記事ではReactの今まで提供されたコンポーネント変遷を交えて、最終的になぜhooksが導入されもてはやされるようになったかという視点で説明していきます。

TL;DR

忙しい方は 今までの問題点とhooksが解決すること をご覧ください

Reactの変遷

基本的なComponentの定義

hooksを駆使したものを除き、Componentの定義には createClass() と React.Component を継承したClassでの定義があります。

React.createClassを使った、React初期のComponentの定義

Class構文に対応している他の言語であれば、Component指向にしようとするとClassで表現するのを思いつきますが、当時Class構文に対応したES2015がまだ正式にリリースされてなかったのもあり、React.createClass() でClass構文を使わずComponentを作成するメソッドが用意されていました。

See the Pen Use React Create Class by Kazuki Murahama (@mura-the-looper) on CodePen.

createClassによる定義でも今と同じようにライフサイクルメソッドやStateの初期値、渡すPropsなどを引数のオブジェクトに定義する必要がありました。

当時はVisual Studio CodeがなくTypeScriptもサポートされてなかったですし、普通のエディタでカジュアルに触ると、長大なオブジェクトの定義でカンマのつけ忘れなどでsyntax errorを起こしてしまうも多くあったことを覚えています。

React.Componentを継承したClassBasedなコンポーネントの定義

Reactは、v0.13から正式にES2015のClass構文に対応しました。

React.ComponentをextendsしてClassを定義すると、そのClassのインスタンスメソッドとしてライフサイクルメソッドを定義できます。creactClassと同じく各インスタンスは render() が必ず実行されます。

See the Pen Use React Class based component by Kazuki Murahama (@mura-the-looper) on CodePen.

Classですので、constractorになにか処理をさせたり、Stateをインスタンス変数として定義できます。

定義において基本的には、React.createClassでやっていたことがClassで書けるようになったことにより、よりComponentらしく書けるようになりました。

※ライフサイクルメソッドはv16.3から大きく変更しています。
参考: React v16.3 changes

パフォーマンスを考慮したコンポーネントの定義

React.Component だけだとシンプルに書きたい場合やパフォーマンスを考慮したときに難点がでてきました。それを解消するためのStateless Functional Componentと React.PureComponent が用意されました。

関数で定義するStateless functinal compnentの定義の仕方

Classを使って書けるのは開発者としては嬉しいですが、Stateすら持たず、ただ render() だけしたいだけのComponentなど、通常のClassによる定義がオーバースペックになる場合がありました。

そこでシンプルでカジュアルに定義できるStateless functional component (SFC)がv0.14で用意されました。

See the Pen StatelessFunctinalComponent by Kazuki Murahama (@mura-the-looper) on CodePen.

JSXをreturnする関数を書けばいいだけなのでだいぶ見通しもいいです。メモリを確保する必要がないことと、React自体がSFCのパフォーマンスを最適化させているのでパフォーマンス的にも向上がはかれます。( 45%速くなった事例もあるようです。)

ただし、個人的には大きなデメリットがあり、SFCを定義したあとでStateをもたせたくなった場合、通常のClassに書き換えざるを得ず大変でした。だったら、最初から通常のComponentを定義しよう、と思っている人もいたのではないかと思います。

React.PureComponentを使ったコンポーネントの定義

Reactでは親のコンポーネントのStateが変わったときなど、その下に含まれる子コンポーネントまで再描画されます。仮に子コンポーネントに渡しているPropsに差分がなくても、再描画してしまうので、子コンポーネントで難しい計算などをしていた場合パフォーマンスに影響がでたりします。shouldComponentUpdate() を使うことでコンポーネントを再描画しないようフラグをたてることができますが、毎回それを書くのは手間ですし忘れます。

v15.3でリリースされた React.PureComponent は、基本的には React.Component と変わらないのですが、自動的に shouldComponentUpdate() を実行して必要以上に再描画しないよう、取り計らってくれます。（ただし、Shallowな比較なのでObjectやArrayのPropsを渡している場合は注意が必要です）

hooksが登場するまでに使われていたComponentと用途のまとめ

諸々経緯があり、いろんなComponentが用意されていますが、hooksが登場するv16.8以前は、通常は下記のような用途で使われていました

Componentの種類	用途	備考
React.createClass()による定義	ES2015などモダンな環境でない場合に使われる。そうでなければ通常使わない。	最近はReactDOMのようにReact本体からも切り離されている
React.Componentを継承したClass	Stateをもったり、親Componentとして使われる。通常使われるComponent。
Stateless Functional Component (関数Component)	Stateを持たない、難しいことをさせたりしないテンプレートのような用途で使われる。
React.PureComponentを継承したClass	Stateをもち、子コンポーネントなどで複雑な計算などをする場合使われる。	v16.6で追加された React.memo() を使えば, Stateさえ持たなければSFCでも役割を担うことができるようになった。もちろん通常のComponentで shouldComponentUpdate() を定義すれば同等なことができるのでプロジェクト次第では使われてないかもしれません。

Componentに共通する振る舞いを与える

ここまでComponent自体について紹介しましたが、定義したComponentに対して、ロジックが一元化された任意の振る舞いやデータを与えたいケースもあります。Componentに任意の振る舞いを与えるために、どうしてきたかということも紹介します。

React.createClass() にのみ存在したMixin

Mixinはかなり便利な機能でした。reactのライフサイクルメソッドとして、componentDidMount や comoponentDidUpdate などがありますが、任意のComponentに好きに振る舞いを注入させることができました。

React.jsのmixinについて

Highr-order Componentを使って振る舞いを与える

ClassBasedなReactではMixinがサポートされなくなりました。Mixinは問題があり ますし、公式でもHigher−order Componentを使えとアナウンスされてました。

Higher-order Component(HoC)自体はReact自体の機能ではなく、あるComponentにPropsや機能などを渡して返すためのイディオムです。Redux Reactの connect() など、ライブラリが作るデータや機能を、Componentに渡すときなどによく使われる手法です。

// react reduxのconnectを使ってReduxのStateやPropsを渡す
connect()(MyComponent)
connect(mapState)(MyComponent)
connect(
  mapState,
  null,
  mergeProps,
  options
)(MyComponent)

See the Pen abzZQrg by Kazuki Murahama (@mura-the-looper) on CodePen.

HoCに関する詳細は下記をごらんください。

高階（Higher-Order）コンポーネント

render propを使って振る舞いを与える

Reactが提供する render prop というものを使って振る舞いを与えることもできます。
render propとHoC、好きな方法を使うことができますが、HoCは名前衝突したり記述が煩雑になったりしますし、型の定義が大変ですのでrender propの方が書きやすいとは思います。

See the Pen RenderPropsComponent by Kazuki Murahama (@mura-the-looper) on CodePen.

hooksを使ったComponentの定義と、今までの問題点とhooksが解決すること

ここまで、長くなってしまいましたが今まで紹介したことを踏まえて、hooksを比較してみます。

hooksで定義したComponent

hooksを使うと、下記のようにComponentが定義できます。

See the Pen React Functional Component by Kazuki Murahama (@mura-the-looper) on CodePen.

まず、大きな点として、React.Componentを使ってClassとして定義しなくて良くなった点が大きいです。

Stateless functinal component（SFC）について先程紹介しましたが、Functional Componentなのに状態を持つことができるようになった、と言うことができます。ここでは仕組みについて言及はしませんが、reactは useState などのAPIを提供したおかげで、関数コンポーネントでStateを扱うことができるようになりました。

また、今まで componentDidMount などで扱っていたであろう、コンポーネントに対する副作用も useEffect などを使って表現できます。

ただそれだけ、といえばそれだけなのですが、今までのReactの問題点を考えるとかなりインパクトがあることがわかります。

今までの問題点とhooksが解決すること

• 今までのReactの問題点
  • どのコンポーネントを使っていくか都度考えないといけない。
    • SFCを定義したとしてもあとからStateをもたせたくなってClassに書き換える手間がある。
    • PureComponentを使ったとしても結局最適化できない場合があり shouldComponentUpdate() を定義する手間が発生する。など
  • ライフサイクルメソッドの複雑・煩雑さ
    • 一番最初に動作するライフサイクルメソッドはどれか、どのライフサイクルメソッドで副作用がおきるか、関連するロジックであってもライフサイクルごとに定義しないといけないので、いろんなロジックが混ざるとかなり複雑になりバグを生む。
  • Wrapper Hell
    • HoC, render propなどを駆使したとて結局、Componentのネストが深くなってしまい可読性がおちる

※上記は主観もふくまれますので hooksが実装された動機もごらんください

• hooksが解決すること
  • Componentは基本的にすべてFunctional Componentを使って定義してよい
  • ライフサイクルメソッドから開放され、ロジックはreturnするJSXの前にすべて表現できる そのおかげで下記のメリットがある
    • コードは上から下に実行され、宣言的に書ける
    • ロジック部分を明確にわけることができ、一元的に扱える
      • 独自のhooks (custom hooks)も定義できる
    • 状態を直接扱えるため、HoCやrender propを使う必要がなく、Wrapper hellを避けることができる
      • ライブラリもhooksに対応していればそのライブラリが提供する値や関数を直接扱える

先に紹介したReact Reduxも hooksを提供しており connect() を使う必要がなく下記のように扱えます。

import React from 'react'
import { useSelector } from 'react-redux'

export const CounterComponent = () => {
  const counter = useSelector(state => state.counter)
  return <div>{counter}</div>
}

さらなるhooksについての概要はこちらをごらんください
フック早わかり

hooksの問題点

銀の弾丸は存在しませんが、やはりhooksも同様です。下記のような問題点があります

• Stateが変更されたとき、従来と同じくComponentは再描画される。上から下に実行されるがゆえに、値や関数を必要に応じてメモ化する必要がある。メモ化をうまく扱えないと無限ループを起こしてしまう可能性もある。
• hooksは制限があり、いつでもどこでも動かせるわけではない。例えばif文のなかで useEffect() は実行できない。
• メモ化などを含め、新たな考え方が必要になるため、hooksは難しいと感じるケースもある

注意

Context APIなどここでは紹介しきれてないこともたくさんありますがご容赦ください。

おわりに

個人的にも今までComponentの設計やHoC、render prop、Wrapper Hellなど様々なことに悩まされてきましたが、hooksを使うことでかなり見通しのよいComponentを定義できるようになったと実感しています。すべてのライブラリがhooksを提供するわけではありませんが、よく使われている主要なライブラリもhooksを提供しはじめてます。hooksを使うにはReactのバージョンアップしないといけないなどの手間もあると思いますが、それを差し引いてもメリットが大きいのでまだ導入してない方はぜひ使ってみてください。
なにか間違ってる箇所とかありましたらツッコミいただけますと幸いです！※特にサンプルコードは作り込む時間ががが

弊社のサービスScalebaseでも、絶賛hooksに書き換え中です。興味ある方、お手伝いいただける方はぜひご連絡ください！技術に関するお話だけでも大歓迎です。
twitter: https://twitter.com/mura_cx

JavaScript 2 Advent Calendar 2019 の15日目の記事です。

TL;DR

• 京都市の施設予約のサイトを刷新して欲しい

Background

サークルで毎月京都市の体育館の抽選に応募しているのですが、一日ずつ抽選予約しなければならないのでとても大変...。
だいたい1月あたり10日程度の抽選予約をするのですが、1アカウントで完了するのに15〜20分ほどかかる...。
サークル内でアカウントがだいたい20アカウントほどあり、手分けしているにせよ 20垢x20分=400分 を全員が無駄に負担していることになるので、どうにか自動化して世界を平和にしたい。

と思って、自動化を始めたのですが、サイトがなかなかにレガシーでとても大変だったので、自動化の流れを puppeteer の一つのユースケースとしてつらつらと書いていきます。

そしてこのbotが動かなくなるのは良いので強く本サイトの改善を京都の片隅より祈っております...

※ puppeteerに関しての基本的なことは特に書かないので 公式ドキュメント をご参照ください

※ 抽選が毎月1日〜9日なので抽選自体の全体のキャプチャーが取れませんでした。来月の抽選時に更新するかもしないかもしれません。

自動化したサイト

京都府・市町村共同 公共施設案内予約システム
https://g-kyoto.pref.kyoto.lg.jp/reserve_j/core_i/init.asp?SBT=1

URLで察するASP.NET。別に悪いとは言っているわけではないが、個人的にはなかなかいい思い出がありません。
ちなみにドメインのルート(https://g-kyoto.pref.kyoto.lg.jp/ )に以下のような画面が表示されます。

なんだろう...一周回って、Health CheckをRootでやってるのかな？、と見ることができる人もいるかもしれない。

あとは不要な処理をしようとするととてもユーザーを不安にさせる文言がみれます。

不正なアクセスはドキッとするのでやめてほしいです。

なんとなく辛そうな予感がしてくる。

Flow

基本的には以下のようなユーザー操作ができれば抽選予約はできそうです。

puppeteer.launch({ headless: false }).then(async browser => {
  // サイトに遷移
  // ログイン
  // 施設選択
  // 日付選択
  // 利用用途入力
  // 確定
})

headless: false に関しては突然別のwindowを開いて謎に内容をsyncする場面があり、 headlessでは対処できなかったのでfalseにしています。後ほどその場面がでてきます。

実装

サイトに遷移

特に問題なく、サイトに遷移します。

const pages = await browser.pages()

// 0番目のタブ
const page = pages[0]

// サイトに遷移
await page.goto('https://g-kyoto.pref.kyoto.lg.jp/reserve_j/core_i/init.asp?SBT=1')

ログインする

まずはログインをしないと予約までできないのでログインします。
1. TOPでマイメニューボタンを押す
2. formを入力してログインをする
だけです。

マイメニューボタンを押す

ボタンを押したいのでコードをみます。

f...fra...frameset!!!!

個人的には初めて使っているサイトをみたのですが、framesetはHTML5でサポートしていません。(僕が小学生くらいのときでもiframe使ってた気が...)
このframesetがあるおかげで簡単に書けるボタンのクリックが中のフレームを参照しなければなりません。
そしてこの処理はすべての画面で同じ構成です。
この構成をするのであれば中のframeのURLのみが変わるかと思いきや、ページ自体のURL遷移がある場合とframe内のみ更新される場合がありました。
なので毎回処理のたびにpageからframeを参照する必要があります。

frameを参照する

// サイトに遷移

// 画面(frame)のロードを待つ
await page.waitFor('frame')

// frameの取得 (絶対にあると仮定)
const frame = page.mainFrame().childFrames()[0]

これでやっとframe内のコンテンツにアクセスできます。
すべてのコンテンツがframe内にあるのですべての(click, type, select..等)の処理でframeを参照する必要があります。

やっとコンテンツにアクセスできるようになったのでマイメニューのボタンを押したいのでdevtoolでどう押すか要素の確認をします。


type='image'...!! 最近使わない人が多いと思います。
そして、 onclick='i40_click();return false;'。
すべての関数に i01_click〜iNN_clickの関数が仕様書にガッチリ書かれていたのか、ASP.NET関連の話なのかはわかりませんが、jQuery以前の時代につくられた感じはします。
できれば name でボタン選択したかったのですが、TOPページのすべてのボタンが name='btn_riyouhouhou_click' です。
判断できるものがないので、ここはしょうがなく

マイメニューボタンのクリック

// サイトに遷移
// frameの取得

// マイメニューボタンをクリック
frame.click('input[value="マイメニュー"]')

です。
あまり参照にマルチバイトは使いたくないですし、valueにマルチバイトは使わないほうが良いと個人的には思います。

ログインする

やっとログインができそうです。
formにid, passwordを入力して、OKボタンを押せば良さそうです。

ここは意外と普通ですね。

id,passwordを入力

await frame.type('input[name="txt_usr_cd"]', USER_ID)
await frame.type('input[name="txt_pass"]', USER_PASSWORD)

OKボタンを押します。

こういう name を求めていましたが、value　が全角のスペース込の "Ｏ　Ｋ" なのがとてもユニークです。

OKボタンをクリック

await frame.click('input[name="btn_ok"]')

前途多難なログインが完了しました。

施設選択

TOPから施設名検索ページへ移動します。もうおなじみです

await frame.click('input[value="施設名検索"]')

フルで施設名を入力して、所在地を指定せずに検索すればよさそうです。
以下が、テキスト入力と選択するボタンです

このページでは cmdXXX_click の命名規則のようです。

// 施設名入力
await frame.type('input[name="txt_keyword"]', FACILITY_NAME)

// 所在地を指定せずに検索ボタンを押す
await frame.click('input[name="btn_shortcut"]')

つぎのページで検索結果が出てくるので施設のリストから "抽選" ボタンをクリックします。

基本的には抽選結果がひとつだけでてくるという想定ですがこのinputにはnameが存在しません。
幸いpuppeteerが優秀なのでaltで指定します。

await frame.click('input[alt="抽選予約画面へ"]')

施設選択が完了しました。

日付選択

UIをみて分かる通り最難関です。
ユーザー操作のflowとしては
1. 年度選択
2. 月選択
3. 日選択
4. 施設内の使いたい場所選択
5. 時間帯選択
6. コートの面数選択
7. 次へボタンをクリック
の７段階です。

年・月・日付のテキストには、全てに同じクラスがつけられていて、判断ができない状態だったのでXPathで文字列を検索してクリックします。

const year = "予約年"
const month = "予約月"
const day = "予約日"

const escapeXpathString = (str: string) => {
  const splitedQuotes = str.replace(/'/g, `', "'", '`)
  return `concat('${splitedQuotes}', '')`
}

// 任意のテキストリンクをクリックする関数
const clickByText = async (page: puppeteer.Page, text: string) => {
  const frame = page.mainFrame().childFrames()[0]
  const escapedText = escapeXpathString(text)
  const linkHandlers = await frame.$x(`//a[contains(text(), ${escapedText})]`)
  if (linkHandlers.length > 0) {
    linkHandlers[0].click()
  } else {
    // throw error
  }
}

// 年選択
await clickByText(`${year}年`) 
await frame.waitFor() // loadを待つ

// 月選択
await clickByText(`${month}月`)
await frame.waitFor() // loadを待つ

// 日選択
await clickByText(`${day}`)
await frame.waitFor() // loadを待つ

無事に申し込みたい日の申し込みたい時間の施設を選択すると山場です。
使いたいコートの領域を選択するために別windowでの操作が始まります。

browserから別のtargetが開かれると targetcreated というイベントが呼ばれるのでその中でハンドリングします。
closeされたときは targetdestroyed が呼ばれるのでメインwindowでそれをハンドリングします。

puppeteer.launch({ headless: false }).then(async browser => {
  // 別のtargetが開いた
  browser.on('targetcreated', async (target) => {
    const page = await target.page();

    // page内でalert等が呼ばれた際のイベント
    // 確認alertが何回も出てくるのですべてokを押す
    page.on('dialog', (dialog) => {
      dialog.accept();
    })

    if (/Lot_i/.test(target.url())) { // domainの確認
        // なぜか初期選択が可能になるまでに時間を要する(特にajaxをしているわけではない)
        await page.waitFor(2000);

        // コート一面を選択
        await page.select('select[name="men_1_1"]', '1');

        // なぜかセレクターを変更した後にreloadが走る
        // なぜか初期選択が可能になるまでに時間を要する(特にajaxをしているわけではない)
        await page.waitFor(2000);

        // コート確定 (ここでmainのwindowにsyncされるはず)
        await page.click('input[value="Ｏ　Ｋ"]');
    }
  })

  // 任意の時間帯が選択されているかを確認
  const isSelectedTimeSpan = (page: puppeteer.Page) => {
    // なぜかページ全体がリロードされるのでframeの再取得が必要
    const frame = page.mainFrame().childFrames()[0]
    return frame.evaluate(() => {
      return document.querySelectorAll('img[alt="選択中"]').length > 1;
    })
  }

  // コート選択のtargetが閉じた
  browser.on('targetdestroyed', async (target) => {
    // 一応URLでフィルター
    if (/Lot_i/.test(target.url())) {
      // たまに別windowで選択した内容がsyncされないのでsyncを確認
      if (await isSelectedTimeSpan(page)) {
        // つぎへを押して利用用途入力へ
        await frame.click(`input[alt="次へ"]`)
      } else {
        // もう一度コートを選択(日付を選択して別windowを開く)
      }
    }
  })
})

利用用途入力/確定

あとはだいたいようなコードを書けばよいので省略します。

特につまったポイント

• pageがrelaodされる場合とframeがreloadされる場合がある
  • puppeteerの各操作APIをwrapして毎回pageからframeを取得することで解決
  • つぎの操作をするために何を待つか、の判断が大変
• なぜか2秒またなければならないことがある
  • わからない。なにしてるの

まとめ

最初はAPI Requestをみて自動化しようと思いましたが、難解すぎたのでpuppeteerで実装する方向に舵を切りました。
レガシーなサイトに苦しめられつつもなんとか自動化できて全体の予約がワンクリック(ワン・コマンド)でできるようになりました。
時間としても全アカウントを回してだいたい30分前後。自動化してもそんなにかかるのかよ...とも思いましたが、APEX LEGENDSを30分プレイしている間に全部終わってくれるのでとても助かります。
単純作業を繰り返してみんなのサイコパスが曇らない、という点でとても良き開発でした。

面白いので京都市の施設予約サイトの中身をinspectorで覗いてみてください。
https://g-kyoto.pref.kyoto.lg.jp/reserve_j/core_i/init.asp?SBT=1

JavaScript 2 Advent Calendar 2019 の15日目の記事です。

TL;DR

• 京都市の施設予約のサイトを刷新して欲しい

Background

サークルで毎月京都市の体育館の抽選に応募しているのですが、一日ずつ抽選予約しなければならないのでとても大変...。
だいたい1月あたり10日程度の抽選予約をするのですが、1アカウントで完了するのに15〜20分ほどかかる...。
サークル内でアカウントがだいたい20アカウントほどあり、手分けしているにせよ 20垢x20分=400分 を全員が無駄に負担していることになるので、どうにか自動化して世界を平和にしたい。

と思って、自動化を始めたのですが、サイトがなかなかにレガシーでとても大変だったので、自動化の流れを puppeteer の一つのユースケースとしてつらつらと書いていきます。

そしてこのbotが動かなくなるのは良いので強く本サイトの改善を京都の片隅より祈っております...

※ puppeteerに関しての基本的なことは特に書かないので 公式ドキュメント をご参照ください

※ 抽選が毎月1日〜9日なので抽選自体の全体のキャプチャーが取れませんでした。来月の抽選時に更新するかもしないかもしれません。

自動化したサイト

京都府・市町村共同 公共施設案内予約システム
https://g-kyoto.pref.kyoto.lg.jp/reserve_j/core_i/init.asp?SBT=1

URLで察するASP.NET。別に悪いとは言っているわけではないが、個人的にはなかなかいい思い出がありません。
ちなみにドメインのルート(https://g-kyoto.pref.kyoto.lg.jp/ )に以下のような画面が表示されます。

なんだろう...一周回って、Health CheckをRootでやってるのかな？、と見ることができる人もいるかもしれない。

あとは不要な処理をしようとするととてもユーザーを不安にさせる文言がみれます。

不正なアクセスはドキッとするのでやめてほしいです。

なんとなく辛そうな予感がしてくる。

Flow

基本的には以下のようなユーザー操作ができれば抽選予約はできそうです。

puppeteer.launch({ headless: false }).then(async browser => {
  // サイトに遷移
  // ログイン
  // 施設選択
  // 日付選択
  // 利用用途入力
  // 確定
})

headless: false に関しては突然別のwindowを開いて謎に内容をsyncする場面があり、 headlessでは対処できなかったのでfalseにしています。後ほどその場面がでてきます。

実装

サイトに遷移

特に問題なく、サイトに遷移します。

const pages = await browser.pages()

// 0番目のタブ
const page = pages[0]

// サイトに遷移
await page.goto('https://g-kyoto.pref.kyoto.lg.jp/reserve_j/core_i/init.asp?SBT=1')

ログインする

まずはログインをしないと予約までできないのでログインします。
1. TOPでマイメニューボタンを押す
2. formを入力してログインをする
だけです。

マイメニューボタンを押す

ボタンを押したいのでコードをみます。

f...fra...frameset!!!!

個人的には初めて使っているサイトをみたのですが、framesetはHTML5でサポートしていません。(僕が小学生くらいのときでもiframe使ってた気が...)
このframesetがあるおかげで簡単に書けるボタンのクリックが中のフレームを参照しなければなりません。
そしてこの処理はすべての画面で同じ構成です。
この構成をするのであれば中のframeのURLのみが変わるかと思いきや、ページ自体のURL遷移がある場合とframe内のみ更新される場合がありました。
なので毎回処理のたびにpageからframeを参照する必要があります。

frameを参照する

// サイトに遷移

// 画面(frame)のロードを待つ
await page.waitFor('frame')

// frameの取得 (絶対にあると仮定)
const frame = page.mainFrame().childFrames()[0]

これでやっとframe内のコンテンツにアクセスできます。
すべてのコンテンツがframe内にあるのですべての(click, type, select..等)の処理でframeを参照する必要があります。

やっとコンテンツにアクセスできるようになったのでマイメニューのボタンを押したいのでdevtoolでどう押すか要素の確認をします。


type='image'...!! 最近使わない人が多いと思います。
そして、 onclick='i40_click();return false;'。
すべての関数に i01_click〜iNN_clickの関数が仕様書にガッチリ書かれていたのか、ASP.NET関連の話なのかはわかりませんが、jQuery以前の時代につくられた感じはします。
できれば name でボタン選択したかったのですが、TOPページのすべてのボタンが name='btn_riyouhouhou_click' です。
判断できるものがないので、ここはしょうがなく

マイメニューボタンのクリック

// サイトに遷移
// frameの取得

// マイメニューボタンをクリック
frame.click('input[value="マイメニュー"]')

です。
あまり参照にマルチバイトは使いたくないですし、valueにマルチバイトは使わないほうが良いと個人的には思います。

ログインする

やっとログインができそうです。
formにid, passwordを入力して、OKボタンを押せば良さそうです。

ここは意外と普通ですね。

id,passwordを入力

await frame.type('input[name="txt_usr_cd"]', USER_ID)
await frame.type('input[name="txt_pass"]', USER_PASSWORD)

OKボタンを押します。

こういう name を求めていましたが、value　が全角のスペース込の "Ｏ　Ｋ" なのがとてもユニークです。

OKボタンをクリック

await frame.click('input[name="btn_ok"]')

前途多難なログインが完了しました。

施設選択

TOPから施設名検索ページへ移動します。もうおなじみです

施設名検索へ

await frame.click('input[value="施設名検索"]')

フルで施設名を入力して、所在地を指定せずに検索すればよさそうです。
以下が、テキスト入力と選択するボタンです

このページでは cmdXXX_click の命名規則のようです。

施設名検索

// 施設名入力
await frame.type('input[name="txt_keyword"]', FACILITY_NAME)

// 所在地を指定せずに検索ボタンを押す
await frame.click('input[name="btn_shortcut"]')

つぎのページで検索結果が出てくるので施設のリストから "抽選" ボタンをクリックします。

基本的には抽選結果がひとつだけでてくるという想定ですがこのinputにはnameが存在しません。
幸いpuppeteerが優秀なのでaltで指定します。

抽選予約画面へ

await frame.click('input[alt="抽選予約画面へ"]')

施設選択が完了しました。

日付選択

UIをみて分かる通り最難関です。
ユーザー操作のflowとしては
1. 年度選択
2. 月選択
3. 日選択
4. 施設内の使いたい場所選択
5. 時間帯選択
6. コートの面数選択
7. 次へボタンをクリック
の７段階です。

年・月・日付のテキストには、全てに同じクラスがつけられていて、判断ができない状態だったのでXPathで文字列を検索してクリックします。

Date選択

const year = "予約年"
const month = "予約月"
const day = "予約日"

const escapeXpathString = (str: string) => {
  const splitedQuotes = str.replace(/'/g, `', "'", '`)
  return `concat('${splitedQuotes}', '')`
}

// 任意のテキストリンクをクリックする関数
const clickByText = async (page: puppeteer.Page, text: string) => {
  const frame = page.mainFrame().childFrames()[0]
  const escapedText = escapeXpathString(text)
  const linkHandlers = await frame.$x(`//a[contains(text(), ${escapedText})]`)
  if (linkHandlers.length > 0) {
    linkHandlers[0].click()
  } else {
    // throw error
  }
}

// 年選択
await clickByText(`${year}年`) 
await frame.waitFor() // loadを待つ

// 月選択
await clickByText(`${month}月`)
await frame.waitFor() // loadを待つ

// 日選択
await clickByText(`${day}`)
await frame.waitFor() // loadを待つ

無事に申し込みたい日の申し込みたい時間の施設を選択すると山場です。
使いたいコートの領域を選択するために別windowでの操作が始まります。

browserから別のtargetが開かれると targetcreated というイベントが呼ばれるのでその中でハンドリングします。
closeされたときは targetdestroyed が呼ばれるのでメインwindowでそれをハンドリングします。

利用コート面選択

puppeteer.launch({ headless: false }).then(async browser => {
  // 別のtargetが開いた
  browser.on('targetcreated', async (target) => {
    const page = await target.page();

    // page内でalert等が呼ばれた際のイベント
    // 確認alertが何回も出てくるのですべてokを押す
    page.on('dialog', (dialog) => {
      dialog.accept();
    })

    if (/Lot_i/.test(target.url())) { // domainの確認
        // なぜか初期選択が可能になるまでに時間を要する(特にajaxをしているわけではない)
        await page.waitFor(2000);

        // コート一面を選択
        await page.select('select[name="men_1_1"]', '1');

        // なぜかセレクターを変更した後にreloadが走る
        // なぜか初期選択が可能になるまでに時間を要する(特にajaxをしているわけではない)
        await page.waitFor(2000);

        // コート確定 (ここでmainのwindowにsyncされるはず)
        await page.click('input[value="Ｏ　Ｋ"]');
    }
  })

  // 任意の時間帯が選択されているかを確認
  const isSelectedTimeSpan = (page: puppeteer.Page) => {
    // なぜかページ全体がリロードされるのでframeの再取得が必要
    const frame = page.mainFrame().childFrames()[0]
    return frame.evaluate(() => {
      return document.querySelectorAll('img[alt="選択中"]').length > 1;
    })
  }

  // コート選択のtargetが閉じた
  browser.on('targetdestroyed', async (target) => {
    // 一応URLでフィルター
    if (/Lot_i/.test(target.url())) {
      // たまに別windowで選択した内容がsyncされないのでsyncを確認
      if (await isSelectedTimeSpan(page)) {
        // つぎへを押して利用用途入力へ
        await frame.click(`input[alt="次へ"]`)
      } else {
        // もう一度コートを選択(日付を選択して別windowを開く)
      }
    }
  })
})

利用用途入力/確定

あとはだいたい同じようなコードを書けばよいので省略します。

特につまったポイント

• pageがreloadされる場合とframeがreloadされる場合がある
  • つぎの操作をするために何を待つか、の判断が大変
  • puppeteerの各操作APIをwrapして毎回pageからframeを取得することで解決
• なぜか2秒またなければならないことがある
  • わからない。なにしてるの

まとめ

最初はAPI Requestをみて自動化しようと思いましたが、難解すぎたのでpuppeteerで実装する方向に舵を切りました。
レガシーなサイトに苦しめられつつもなんとか自動化できて全体の予約がワンクリック(ワン・コマンド)でできるようになりました。
時間としても全アカウントを回してだいたい30分前後。自動化してもそんなにかかるのかよ...とも思いましたが、APEX LEGENDSを30分プレイしている間に全部終わってくれるのでとても助かります。
単純作業を繰り返してみんなのサイコパスが曇らない、という点でとても良き開発でした。

面白いので京都市の施設予約サイトの中身をinspectorで覗いてみてください。
https://g-kyoto.pref.kyoto.lg.jp/reserve_j/core_i/init.asp?SBT=1

HTMLのtextarea でインデント、アンインデント

HTMLのtextareaでタブを入力すると次のフィールドにフォーカスが移動しますが、そのままタブを入力したい。ついでに複数行選択しているときは、まとめてインデントしたい。更にスペースでのインデント、アンインデントにも対応したい。
ということで、書いてみました。
作ってから IE/Edge で setRangeText がサポートされていない事に気づいたけれど、このまま載せておきます．．．

indent_sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" context="text/html; charset=UTF-8" />
  <meta charset="UTF-8" />
  <title>インデントのサンプル</title>
<script type="text/javascript">
'use strict';

window.onload = function() {
    const onKeyDown = function(ev) {
        if (((ev.keyCode != 9) && (ev.keyCode != 32)) || ev.ctrlKey || ev.altKey) { return true; }
        ev.preventDefault();
        const str = (ev.keyCode == 32) ? " " : "\t", TABWIDTH = 4, CRLF = [13, 10];
        let e = ev.target, start = e.selectionStart, end = e.selectionEnd, sContents = e.value, top = e.scrollTop;
        if ((start == end) || !sContents.includes("\n")) {
            e.setRangeText(str, start, end, "end");
            return;
        }
        if (CRLF.indexOf(sContents.charCodeAt(end - 1)) < 0) {
            for ( ; end < sContents.length; end++) {
                if (CRLF.indexOf(sContents.charCodeAt(end)) >= 0) { break; }
            }
        }
        for ( ; start > 0; start--) {
            if (CRLF.indexOf(sContents.charCodeAt(start - 1)) >= 0) { break; }
        }
        let v = sContents.substring(start, end).split("\n");
        for (let i = 0; i < v.length; i++) {
            if (v[i] == "") { continue; }
            if (!ev.shiftKey) {     //indent
                v[i] = str + v[i];
            } else {                //unindent
                if (str == "\t") {
                    for (let j = 0, c = " "; (j < TABWIDTH) && (c == " "); j++) {
                        c = v[i].substring(0, 1);
                        if ((c == " ") || (j == 0 && c == "\t")) { v[i] = v[i].substring(1); }
                    }
                } else if (v[i].substring(0, 1) == " ") {
                    v[i] = v[i].substring(1);
                }
            }
        }
        e.setRangeText(v.join("\n"), start, end, "select");
    }

    document.getElementById("txtSample").addEventListener("keydown", onKeyDown);
}
</script>
</head>
<body>
<ul>
<li>文字列を未選択でスペース → スペース入力</li>
<li>文字列を未選択でタブ → タブ入力</li>
<li>文字列を選択してスペース → スペースインデント</li>
<li>文字列を選択してタブ → タブインデント</li>
<li>文字列を選択してシフト＋スペース → スペースアンインデント</li>
<li>文字列を選択してシフト＋タブ → タブアンインデント</li>
</ul>
<textarea id="txtSample" rows="30" style="width:100%;resize:none;"></textarea>
</body>
</html>