前回の記事 - 非Javascriptエンジニアのための「Javascriptの比較演算子」

ITエンジニアのアクマちゃん(@akumachanit)デモ！
この記事は非JavascriptエンジニアのためのJavascript入門　3日遅れのひとり Advent Calendar 2019の記事デモ！

この記事はJavaScript 「再」入門をベースに書いているデモ。

１日サボってしまったデモ...!気を取り直して今日は制御構文についてデモ！

今回紹介する制御構文

• 空文
• ブロック文
• ラベル文
• break文
• continue文

次回紹介するもの

• if...else文
• for文
• switch文

ループ構文は次回、エラー処理のtry文はいつかエラーについてやる時に説明するデモ。

空文

;

空文は、文が必要な箇所で文を明示的に「書かない」時に使う文デモ。
わけがわからないデモね。例を出すデモ。

for (i = 0; i < arr.length; arr[i++] = 0);

for文の後にはループ内で処理する文が期待されているデモ。
それを書かないことでforのカッコ内の処理（正確にはカッコ内の3つ目の式）だけを実行できるデモ。

「文が期待されている場所で文を書かない」
これは次の項のブロック文の「1つの文しか書けない箇所に複数の文を書く」というのと対の機能を持つと言えるデモね。

ブロック文

ブロック文は{}で囲んだ0個以上の文をグループ化することができるデモ。

{
    let a = 1;
    let b = 2;
}

変数の回で紹介した通り、let, constはブロックスコープを持っているデモが、varはブロックスコープを持っていないので注意デモ！

let foo = 1;
{
    let foo = 2;
}
console.log(foo); // 1

var bar = 1;
{
    var bar = 2;
}
console.log(bar); // 2

ブロック文は後述のif...else文やwhile文、for文などの制御フロー文と使われることが多いデモ。

let a = false;
if (a) {
    console.log("foo"); // 実行されない
    console.log("bar"); // 実行されない
}

ブロック文を使わないと1文しか制御できないデモね。

let a = false;
if (a) 
    console.log("foo"); // 実行されない
    console.log("bar"); // 実行されてしまう

ラベル文

ラベル文は文に予約語ではない任意のラベルをつけられるデモ。

block1: {
    // block1とラベル付けされたブロック文
}

branch: if (true) {
    // branchとラベル付けされたif文
}

ラベル文は後述のbreakとcontinueで指定することができるデモ。

break文

break文を使用するとループ、switch文、ラベル文を中断して次の処理に制御を移すことができるデモ。

while文を中断してみるデモ。

while (true) {
    if (a) {
        break; // whileが中断されて次の処理に移行します。
    }
}

aがtrueになるとループから抜けるデモ。

次はラベルを指定してみるデモ。

lab1: {
    lab2: {
        lab3: {
            console.log('begin')
            break labX; //ここでlab1~3を指定
            console.log('1');
        }
        console.log('2');
    }
    console.log('3');
}

// break lab1を指定した場合の出力
'begin'
// break lab2を指定した場合の出力
'begin'
'3'
// break lab3を指定した場合の出力
'begin'
'2'
'3'

指定したラベルのブロック文が中断されて次の処理に移っているデモね。

continue文

continue文はループの現在反復中の文(ブロック)を終了して、次の反復をスタートするデモ。ラベルを指定している場合は、ラベルが指定されているループの次の反復をスタートするデモ。
具体的には、while文では条件式にジャンプするデモ。for文では更新式までジャンプするデモ。

while (true) {
  console.log('loop');
  if (true) {
    break;
  }
}
console.log('finish.');

あとがき

今回はif...else、forとwhile以外の制御構文を紹介したデモ。
今回紹介したブロック文やbreak, continue文は次回の制御構文で活躍するデモね！

参考

JavaScript 「再」入門
文と宣言

みなさんこんにちは@y_temp4です。

自分は現在フリーランスのエンジニアとして主にフロントエンドの開発を行っており、これまでに複数の Vue/Nuxt の案件に携わってきました。

というわけで今回は、いくつかの Nuxt プロジェクトに関わってきて得た知見についてシェアしていければなと思います！

想定読者

この記事は以下のような方を想定読者として書いています。

• Nuxt を導入すべきか迷っている/新規プロジェクトで Nuxt の利用を検討している
• Nuxt の構成で迷っている
• Nuxt の利用について興味がある

Nuxt でプロジェクトを初める条件

まずはじめに Nuxt のプロジェクトを初める条件ですが、基本的に Nuxt はフロントエンドのフレームワークであり、バックエンドと疎結合な作りになっていることが望ましいです。いわゆる SPA を作る感じですね。

ですので、新規にプロジェクトを立ち上げる際は、バックエンドは完全に API サーバーとしてフロントエンドと分離させるような設計にすべきでしょう。

例えば、自分が初めて Nuxt のコードを書いた際はバックエンド API が AWS の Lambda + API Gateway でした。

参考：【ALIS のシステム】サーバサイドアーキテクチャ：その１ 〜ALIS サーバサイド構成〜 | ALIS

余談：なぜ SPA で開発するのか

本記事のメインの話題とは話が逸れるので詳しくは書きませんが、SPA で開発する必要性・メリデメに関しては、以下のスライドが参考になるかと思います。

私たちはなぜ SPA で開発するのか / Why you choose SPA - Speaker Deck

Nuxt プロジェクトの構成で意識すべきこと

Nuxt のプロジェクトをいくつか見てきた感想として、自分が一番思うのは「Nuxt の仕組みに沿った形で作ったほうが良い」ということです。まぁフレームワークを使う上で、フレームワークの仕組みに乗っかったほうがいいのは当然かも知れませんが、フロントエンドの構成はよりバックエンドよりもおざなりになりがちかなと感じています。

例えば Nuxt にはモジュールという概念があり、これを用いることによってある程度品質の担保された機能を実装できます。

また、Nuxt のプロジェクトに元から用意されたディレクトリ構造くらいは守るようにしましょう。

Nuxt は変化の速度が早いフレームワークであるので、独自に実装した箇所がバージョンアップの追従の足枷になるケースがよくあります。ですので、Nuxt の機能を逸脱したことをやろうとする場合、それにそこまでする価値があるか・既存の仕組みで実現できないか、よく検討した方が良いと感じています。

TypeScript の導入

Nuxt における TypeScript の導入は、基本的に以下の公式ドキュメントに沿えば OK です。

Nuxt TypeScript

しかし、それ以外の細かい点で TypeScript 導入を行う際につまずいたポイント等があるので、今回はそれについて列記します。

Nuxt をプログラムで使う際の設定

「Nuxt.js をプログラムで使う」にあるように、通常のnuxt-tsコマンドではなく Express などから Nuxt を動かしているケースでは、@nuxt/typescript-buildの関係でうまく動作しないことがありました。

おそらくすぐに改善されるかとは思いますが、この記事の執筆時点での解決方法を記述しておきます。

import tsModule from '@nuxt/typescript-build'

...

  if (config.dev) {
    await nuxt.moduleContainer.addModule(tsModule)
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }
...

メインの部分以外はよくあるコードと同じなので省略します。このコードはtypescript-build/test/module.test.tsを参考に書きました。

Lint について

見落としがちですが、Nuxt での eslint の設定は@nuxtjs/eslint-config、もしくは TS を使う際は@nuxtjs/eslint-config-typescriptを使うと、.eslintrcをスッキリとした形で記述できます。

.eslintrc.js

module.exports = {
  extends: ['@nuxtjs/eslint-config-typescript']
}

ただ、2019 年 11 月に TypeScript の 3.7 が出ましたが、このパッケージのアップデートは TS3.7 への対応が少し遅く、ちょっとだけやきもきしたのを覚えています。

今後 TS 等の追従に伴い@nuxtjs/eslint-config-typescriptのアップデートが待てない方は、中の実装まで一応確認しておいたほうがいいかもしれません。

さいごに

Nuxt のプロジェクトに関わってきて思ったのは、やはり Nuxt は比較的簡単にはじめられる反面、フロントエンドのよくある規則等を把握しておかないとすぐに破綻するリスクもある、ということです。

今後、Vue に関しては Vue のバージョン 3 にてComposition APIが導入されこれが使われるようになると、おそらくより設計力が求められるようになるのではないか、と感じています。

Nuxt のプロジェクトでも Composition API を考慮した実装が追加されていくでしょうから、この辺は意識しておく必要があります。

個人的に Composition API は今ある Vue の問題（主に型周り）を解決しうる素晴らしい仕組みかと思いますが、規約等をきちんと決めて開発を始めないと既存のコードよりも実装のつらみが出てくることが予想されます。

参考：Vue Composition API のコラムっぽいもの集 - mya-ake com

繰り返しになりますが、今後 Nuxt の開発をする方はこの辺の流れの変化にも対応できるように意識しつつ開発を進めていくことをオススメします！

---

さいごに、この記事が参考になった方はぜひいいねしていただけますと幸いです！

最後まで読んでいただき、ありがとうございました ?

あわせて読みたい：Nuxt.js を用いた新規事業開発を半年以上経験して得た知見 - Qiita

解決したい課題

• 複数の用途の WEB サーバ (EC2) が ELB (ALB) 配下に存在しているが、順番にメンテナンス画面を出すのに時間がかかってしまう (Jenkins などで順番にデプロイ)
  • 複数の環境のソースコード上にあるメンテナンス時間を修正して、都度デプロイしないといけない環境など
• ALB に存在する リクエストルーティング を使ってメンテナンス画面を出す方法もあるが、1024 文字の制限があるので、最小限の HTML かテキストの出力しかできない

解決案

• メンテナンス用の S3 + CloudFront + route53 (ここでは maintenance.hapitas.jp と定義) をたてる
  • CloudFront は GET, HEAD, OPTIONS 以上を許可
  • CloudFront は Cache Based on Selected Request Headers を Whitelist とし、Access-Control-Request-Headers Access-Control-Request-Method Origin を Whitelist Headers として登録 (同一ドメイン、スキームでアクセスするなら不要)
  • S3 上では CORS 制限をはずす
    • バケットの [Permissions] 設定の [CORS configuration] で下記の内容を登録 (同一ドメイン、スキームでアクセスするなら不要)

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

• S3 バケットに maintenance.json ファイルを以下の内容で配置

{
  "start_date": "Fri, 13 Dec 2019 21:00:00 +0900",
  "end_date": "Fri, 13 Dec 2019 22:00:00 +0900"
}

• S3 バケットにこだわったデザインの HTML (mainte.html) を配置 (適当ですがｗ)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no">
    <title>こだわったメンテ画面</title>
</head>
<body>
<div>
    <h1>ただいまメンテナンス中です</h1>
    <div id="mainte-period"></div>
    <p>ご不便をおかけしてしまい申し訳ございませんが、<br>
        メンテナンス完了までしばらくお待ちください。</p>
</div>
<script id="template" type="text/x-jquery-tmpl">
<div id="mainte-period">
    <p>実施期間： ${start} ～ ${end}<br>
    期間中はすべてのサービスがご利用いただけません。</p>
</div>
</script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script>
"use strict";
$(function(){
    var maintenance = {
        template: $('#template'),
        targetHtml: $('#mainte-period'),
        init: function() {
            this.getJson().done(function(data) {
                var start = false;
                var end = false;
                if (typeof data.start_date == 'string' || typeof data.end_date == 'string') {
                    if (maintenance.isMainteNow(data.start_date, data.end_date)) {
                        start = maintenance.generateFormat(data.start_date);
                        end = maintenance.generateFormat(data.end_date);
                    }
                }
                if (!start || !end) {
                    return false; // do nothing.
                }
                maintenance.targetHtml.replaceWith(maintenance.template.tmpl({"start": start, "end": end}));
            });
        },
        isMainteNow: function(start, end) {
            if (!start || !end) {
                return false;
            }
            var now = new Date();
            var start = new Date(start);
            var end = new Date(end);
            return start.getTime() <= now.getTime() && now.getTime() <= end.getTime();
        },
        generateFormat: function(string) {
            var dateObject = new Date(string);
            var year = dateObject.getFullYear();
            var month = dateObject.getMonth() + 1;
            var date = dateObject.getDate();
            var hours = dateObject.getHours();
            var minutes = dateObject.getMinutes();
            var week = [ "日", "月", "火", "水", "木", "金", "土" ][dateObject.getDay()];
            return year + '年' + month + '月' + date + '日 ' + ' (' + week + ') ' + ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2);
        },
        getJson: function() {
            var deferred = $.Deferred();
            var date = new Date();
            $.ajax({
                type: 'GET',
                url: 'https://maintenance.hapitas.jp/maintenance.json?' + date.getTime(),
                dataType: 'json',
                success: deferred.resolve,
                error: function(xhr, textStatus, errorThrown) {
                    console.log(xhr, textStatus, errorThrown);
                    deferred.reject(xhr, textStatus, errorThrown);
                }
            });
            return deferred.promise();
        }
    };
    maintenance.init();
});
</script>
</body>
</html>

• ALB の リクエストルーティングの優先度は default action の手前の優先度で ルールを追加 (※ default action より優先度は下げられないため、手前に配置する。ただし、非メンテ時は default action に重要なアクションがあると困る → derault action と同じ内容のルールを Source IP 0.0.0.0/0 でメンテナンスのルールより手前に追加しておく)
  • IF に Source IP を 0.0.0.0/0 とする
  • THEN に Return fixed response をいれ Response code: 503, Content-Type: test/html, Response body に以下をいれる (なんと 301 文字)

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"></head><body><script onload="$.ajax({type: 'GET',url: 'https://maintenance.hapitas.jp/mainte.html',dataType: 'html',success: function(data) {document.write(data);}});" src="https://code.jquery.com/jquery-latest.min.js"></script></body></html>

これで準備は完了！
メンテ時は json のメンテ開始日、終了日をいれ、上記レスポンスの優先度を一番上に上げるだけ
緊急メンテで、開始日、終了日が決まっていない場合は、 json の更新はせず、優先度を上げればOK

解決したい課題

• 複数の用途の WEB サーバ (EC2) が ELB (ALB) 配下に存在しているが、順番にメンテナンス画面を出すのに時間がかかってしまう (Jenkins などで順番にデプロイ)
  • 複数の環境のソースコード上にあるメンテナンス時間を修正して、都度デプロイしないといけない環境など
• ALB に存在する リクエストルーティング を使ってメンテナンス画面を出す方法もあるが、1024 文字の制限があるので、最小限の HTML かテキストの出力しかできない

解決案

• メンテナンス用の S3 + CloudFront + route53 (ここでは maintenance.hapitas.jp と定義) をたてる
  • CloudFront は GET, HEAD, OPTIONS 以上を許可
  • CloudFront は Cache Based on Selected Request Headers を Whitelist とし、Access-Control-Request-Headers Access-Control-Request-Method Origin を Whitelist Headers として登録 (同一ドメイン、スキームでアクセスするなら不要)
  • S3 上では CORS 制限をはずす
    • バケットの [Permissions] 設定の [CORS configuration] で下記の内容を登録 (同一ドメイン、スキームでアクセスするなら不要)

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

• S3 バケットに maintenance.json ファイルを以下の内容で配置

{
  "start_date": "Fri, 13 Dec 2019 21:00:00 +0900",
  "end_date": "Fri, 13 Dec 2019 22:00:00 +0900"
}

• S3 バケットにこだわったデザインの HTML (mainte.html) を配置 (適当ですがｗ)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no">
    <title>こだわったメンテ画面</title>
</head>
<body>
<div>
    <h1>ただいまメンテナンス中です</h1>
    <div id="mainte-period"></div>
    <p>ご不便をおかけしてしまい申し訳ございませんが、<br>
        メンテナンス完了までしばらくお待ちください。</p>
</div>
<script id="template" type="text/x-jquery-tmpl">
<div id="mainte-period">
    <p>実施期間： ${start} ～ ${end}<br>
    期間中はすべてのサービスがご利用いただけません。</p>
</div>
</script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script>
"use strict";
$(function(){
    var maintenance = {
        template: $('#template'),
        targetHtml: $('#mainte-period'),
        init: function() {
            this.getJson().done(function(data) {
                var start = false;
                var end = false;
                if (typeof data.start_date == 'string' || typeof data.end_date == 'string') {
                    if (maintenance.isMainteNow(data.start_date, data.end_date)) {
                        start = maintenance.generateFormat(data.start_date);
                        end = maintenance.generateFormat(data.end_date);
                    }
                }
                if (!start || !end) {
                    return false; // do nothing.
                }
                maintenance.targetHtml.replaceWith(maintenance.template.tmpl({"start": start, "end": end}));
            });
        },
        isMainteNow: function(start, end) {
            if (!start || !end) {
                return false;
            }
            var now = new Date();
            var start = new Date(start);
            var end = new Date(end);
            return start.getTime() <= now.getTime() && now.getTime() <= end.getTime();
        },
        generateFormat: function(string) {
            var dateObject = new Date(string);
            var year = dateObject.getFullYear();
            var month = dateObject.getMonth() + 1;
            var date = dateObject.getDate();
            var hours = dateObject.getHours();
            var minutes = dateObject.getMinutes();
            var week = [ "日", "月", "火", "水", "木", "金", "土" ][dateObject.getDay()];
            return year + '年' + month + '月' + date + '日 ' + ' (' + week + ') ' + ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2);
        },
        getJson: function() {
            var deferred = $.Deferred();
            var date = new Date();
            $.ajax({
                type: 'GET',
                url: 'https://maintenance.hapitas.jp/maintenance.json?' + date.getTime(),
                dataType: 'json',
                success: deferred.resolve,
                error: function(xhr, textStatus, errorThrown) {
                    console.log(xhr, textStatus, errorThrown);
                    deferred.reject(xhr, textStatus, errorThrown);
                }
            });
            return deferred.promise();
        }
    };
    maintenance.init();
});
</script>
</body>
</html>

• ALB の リクエストルーティングの優先度は default action の手前の優先度で ルールを追加 (※ default action より優先度は下げられないため、手前に配置する。ただし、非メンテ時は default action に重要なアクションがあると困る → derault action と同じ内容のルールを Source IP 0.0.0.0/0 でメンテナンスのルールより手前に追加しておく)
  • IF に Source IP を 0.0.0.0/0 とする
  • THEN に Return fixed response をいれ Response code: 503, Content-Type: test/html, Response body に以下をいれる (なんと 301 文字)

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"></head><body><script onload="$.ajax({type: 'GET',url: 'https://maintenance.hapitas.jp/mainte.html',dataType: 'html',success: function(data) {document.write(data);}});" src="https://code.jquery.com/jquery-latest.min.js"></script></body></html>

これで準備は完了！
メンテ時は json のメンテ開始日、終了日をいれ、上記レスポンスの優先度を一番上に上げるだけ
緊急メンテで、開始日、終了日が決まっていない場合は、 json の更新はせず、優先度を上げればOK

Twitter の連続ツイートのテキストをプレーンなテキストでメモしたくなった時に、コピーが難しかったので作りました。

⚠注意点⚠

法と良識の範囲でのご利用をお願いします。

スクリプト全体

{
  const targetDom = document.querySelectorAll('div[lang="ja"][dir="auto"]');

  const checkLF = () => {
    if(navigator.platform.indexOf("Win") != -1) {
      return "\r\n";
    }else{
      return "\n";
    }
  };

  const logText = () => {
    if (!targetDom) {
      alert(`ツイートの取得に失敗しました`);
      return false;
    }
    const maxTweets = 30;
    const resultAlertText = `処理が完了しました。ログをご確認ください。`;
    let resultText;
    let lineFeedCode = checkLF();

    for (let i = 0; i < targetDom.length; i++) {
      const tmpText = targetDom[i].textContent;
      resultText = resultText + lineFeedCode + tmpText;
      if(maxTweets < i){
        resultAlertText = `処理が完了しました。ログをご確認ください。${maxTweets}ぐらい以降のツイートは取得していません。`;
        break;
      }
    }

    console.log(resultText);
    alert(resultAlertText);
  };

  logText();
}

使い方

1. Twitter の Web 版の画面を Chrome で開いてください。
2. console にコード全体をコピペして Enter キーを押してください。
3. コンソールにテキストが表示されます。適当にコピーしてご利用ください。

Q & A

連続ツイートのテキストの一部しか取得できない。

環境によって違うようですが、一度に取得できるツイート数に上限があるようです。
適当に表示箇所を変更して再度お試しください。

日本語以外取得できない。Twitter にログインしていないと取得できない。

以下の部分を適切なセレクタに変更してご利用ください。

  const targetDom = document.querySelectorAll('div[lang="ja"][dir="auto"]');

UI は作らないのか？

あまり簡単に使えるようにすると、いろいろと問題がありそうなので、あえて不便にしています。

Riot.js Advent Calendar 2019 の13日目が空いていたので埋めます。

はじめに

前回のRiot.js v4 HTMLのテンプレートエンジンにPugを使うで、@riotjs/compilerのregisterPreprocessorで自由にテンプレートを登録できるということがわかりました。

これを検証してみようと思います。

動きを確認

まずはデフォルトのテンプレートエンジンの動きがどうなっているかを確認。
https://github.com/riot/compiler/blob/master/src/preprocessors.js

/riot/compiler/blob/master/src/preprocessors.js

export const preprocessors = Object.freeze({
  javascript: new Map(),
  css: new Map(),
  template: new Map().set('default', code => ({ code }))
})

なるほどなるほど、引数で受け取ったcodeを元になんやかんやして、{ code: "最終的なコード" }を返せば良さそうですね。
デフォルトでは何もしないこともわかりました。

動きを確認するために、適当に登録してみます。

webpack.config.js

const path = require('path');
const compiler = require('@riotjs/compiler');

// カスタムテンプレートを登録
compiler.registerPreprocessor('template', 'step_count', (code, options) => {
  console.log("Hello World!!");
  console.log("code:", code);
  console.log("options:", options);
  return {
    code: code
  };
});

module.exports = {
  mode: 'development',
  //mode: 'production',

  entry: './src/scripts/index.js',
  output: {
    path: path.resolve(__dirname, 'app/scripts'),
    filename: 'bundle.js',
    publicPath: '/scripts/',
  },

  devtool: 'inline',
  //devtool: 'source-map',

  module: {
    rules: [
      {
        test: /\.riot$/,
        exclude: /node_modules/,
        use: [{
          loader: '@riotjs/webpack-loader',
          options: {
            hot: true, // set it to true if you are using hmr
            // add here all the other @riotjs/compiler options riot.js.org/compiler
            template: 'step_count'
          }
        }]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

package.json

{
  "name": "riotv4-custom-template-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production --devtool source-map",
    "start": "webpack-dev-server --inline --watch --hot --colors --content-base app/ --open-page index.html --historyApiFallback true -d --port 4500"
  },
  "keywords": [],
  "author": "KAJIKEN <kentaro@kajiken.jp> (http://kajiken.jp)",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/preset-env": "^7.7.6",
    "@riotjs/compiler": "^4.5.3",
    "@riotjs/hot-reload": "^4.0.0",
    "@riotjs/webpack-loader": "^4.0.1",
    "babel-loader": "^8.0.6",
    "riot": "^4.7.1",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

npm run buildでビルド。

ビルド中のログ

> webpack --mode production --devtool source-map

Hello World!!
code: <app>
  <p>{ props.message }</p>
</app>

options: { tagName: null,
  fragments: null,
  options:
   { template: 'step_count',
     file:
      'c:\\nodeapp\\riotv4-custom-template\\src\\scripts\\app.riot',
     scopedCss: true,
     hot: true },
  source: '<app>\r\n  <p>{ props.message }</p>\r\n</app>\r\n' }
Hash: b56824acee93ca59aa1d
Version: webpack 4.41.2
Time: 1403ms

動いていますね！
ファイルパスもoptionsから取れるので、コミットするなどファイルを使って何かすることもできそうです。

ステップカウント

とりあえずステップ数(とは名ばかりの行数)を計測してみます。

webpack.config.js

// カスタムテンプレートを登録
compiler.registerPreprocessor('template', 'step_count', (code, options) => {
  console.log(`*** Step Count *** ${ (new String(options.options.file)).replace(/.*\\/, "") }:${ code.split("\n").length }`);
  return {
    code: code
  };
});

ビルド中のログ

> webpack --mode production --devtool source-map

*** Step Count *** goodbye.riot:6
*** Step Count *** message.riot:22
*** Step Count *** hello.riot:4
*** Step Count *** app.riot:9
Hash: 6dc6caa7dcd7ec4463ef
Version: webpack 4.41.2
Time: 2757ms

モールス信号HTMLテンプレートエンジン

webpack.config.js

const path = require('path');
const compiler = require('@riotjs/compiler');

// モールス信号パターン
const pattern = {
  "・－": "a",
  "－・・・": "b",
  "－・－・": "c",
  "－・・": "d",
  "・": "e",
  "・・－・": "f",
  "－－・": "g",
  "・・・・": "h",
  "・・": "i",
  "・－－－": "j",
  "－・－": "k",
  "・－・・": "l",
  "－－": "m",
  "－・": "n",
  "－－－": "o",
  "・－－・": "p",
  "－－・－": "q",
  "・－・": "r",
  "・・・": "s",
  "－": "t",
  "・・－": "u",
  "・・・－": "v",
  "・－－": "w",
  "－・・－": "x",
  "－・－－": "y",
  "－－・・": "z",
  "・－－－－": "1",
  "・・－－－": "2",
  "・・・－－": "3",
  "・・・・－": "4",
  "・・・・・": "5",
  "－・・・・": "6",
  "－－・・・": "7",
  "－－－・・": "8",
  "－－－－・": "9",
  "－－－－－": "0",
  "－・・・・－": "-"
};

// モールス信号解読
const decode = target => target.split(" ").map(word => pattern[word] || word).join("");

// モールス信号テンプレートを登録
compiler.registerPreprocessor('template', 'morse', code => {
  var reg = /(<\/{0,1})(.+?)(>)/g;
  var match;
  var ret = code;
  while ((match = reg.exec(code)) !== null) {
    ret = ret.replace(match[0], `${ match[1] }${ decode(match[2]) }${ match[3] }`);
  }
  console.log(ret);
  return {
    code: ret
  };
});

module.exports = {
  mode: 'development',
  //mode: 'production',

  entry: './src/scripts/index.js',
  output: {
    path: path.resolve(__dirname, 'app/scripts'),
    filename: 'bundle.js',
    publicPath: '/scripts/',
  },

  devtool: 'inline',
  //devtool: 'source-map',

  module: {
    rules: [
      {
        test: /\.riot$/,
        exclude: /node_modules/,
        use: [{
          loader: '@riotjs/webpack-loader',
          options: {
            hot: true, // set it to true if you are using hmr
            // add here all the other @riotjs/compiler options riot.js.org/compiler
            template: 'morse'
          }
        }]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

app.riot

<・－ ・－－・ ・－－・>
  <・－－・>{ props.message }</・－－・>
</・－ ・－－・ ・－－・>

hello.riot

<－－ －・－－ －・・・・－ ・・・・ ・ ・－・・ ・－・・ －－－>
  <・・・・ ・－－－－>Hello World!!</・・・・ ・－－－－>
</－－ －・－－ －・・・・－ ・・・・ ・ ・－・・ ・－・・ －－－>

goodbye.riot

<－－ －・－－ －・・・・－ －－・ －－－ －－－ －・・ －・・・ －・－－ ・>
  <・－－・>Goodbye World!!</・－－・>
</－－ －・－－ －・・・・－ －－・ －－－ －－－ －・・ －・・・ －・－－ ・>

message.riot

<－－ －・－－ －・・・・－ －－ ・ ・・・ ・・・ ・－ －－・ ・>
  <－・・ ・・ ・・・－>{ props.message.slice(0, 1).toUpperCase() }{ props.message.slice(1) } World!!</－・・ ・・ ・・・－>
</－－ －・－－ －・・・・－ －－ ・ ・・・ ・・・ ・－ －－・ ・>

ビルド！

ビルド中のログ

> webpack --mode production --devtool source-map

<my-goodbye>
  <p>Goodbye World!!</p>
</my-goodbye>

<my-message>
  <div>{ props.message.slice(0, 1).toUpperCase() }{ props.message.slice(1) } World!!</div>
</my-message>

<my-hello>
  <h1>Hello World!!</h1>
</my-hello>

<app>
  <p>{ props.message }</p>
</app>

Hash: 8b904bfcedfcd87ff364
Version: webpack 4.41.2
Time: 2239ms

モールス信号HTMLテンプレートエンジンここに爆誕！

はじめに

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

canvas内でボールが動き続けるものを作りました。
MDNにあるゲームを参考にしています。

今日は56日目。(2019/12/13)
よろしくお願いします。

サイトURL

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

やったこと

こんなことをやりました。（gif）↓

丸いボールがゆっくり動いています。
真ん中にある四角に入ると、ボールの色と大きさが変わり、軌道が消えます。
スペースキーを押すとボールのスピードが上がります。

html↓

  <body>
    <div>
      spaceを押した回数（ペースアップ）: <span id="spaceClick">0</span>回
    </div>
    <canvas id="myCanvas" width="480" height="320"></canvas>
  </body>

canvasを使っています。

css↓

canvas {
  background: rgba(255, 255, 255, 0.5);
  border: solid 1px black;
}

canvasのレイアウトを変えたぐらいです。

JavaScript↓

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 5; //ボールの大きさ
var x = canvas.width / 2; //開始位置 X
var y = canvas.height / 3; //開始位置 Y
var dx = 1;
var dy = -1;
let color = "red";
let count = 0;
let spaceClick = document.getElementById("spaceClick");
document.addEventListener("keydown", space, false);

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.rect(220, 140, 50, 50); //x, y , 幅、高さ

  if (x > 220 && x < 270 && (y > 140 && y < 190)) {
    randomBallSize();
    randomRGB();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }
  ctx.fillStyle = color;
  ctx.fill(); //実行
  ctx.closePath();
}

function draw() {
  if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
    dx = -dx;
  }
  if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
    dy = -dy;
  }
  drawBall();
  x += dx;
  y += dy;
  requestAnimationFrame(draw);
}

//setInterval(draw, 10);

function space(e) {
  count++;
  spaceClick.innerHTML = count;
  if (e.keyCode == 32) {
    let fugou = Math.sign(dx);
    if (fugou === 1) {
      dx++;
    } else {
      dx--;
    }
    let fugou2 = Math.sign(dy);
    if (fugou2 === 1) {
      dy++;
    } else {
      dy--;
    }
    console.log("fugou: " + fugou);
  }
}

function randomRGB() {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  let rgb = "rgba(" + r + ", " + g + "," + b + ", .5)";
  color = rgb;
}

function randomBallSize() {
  let ball = Math.floor(Math.random() * 8);
  ballRadius = ball + 3;
}

draw();

drawBall()関数でボールを描いています。
中にあるif文は

if (x > 220 && x < 270 && (y > 140 && y < 190)) {

真ん中の四角の位置です。
この中に入ると

randomBallSize();
randomRGB();
ctx.clearRect(0, 0, canvas.width, canvas.height);

ボールのサイズを変更、色を変更、軌道を消します。

スペースキーの方はイベントリスナーで実装しています。

document.addEventListener("keydown", space, false);

変数dxとdyは速さを調整する変数で、これら絶対値を上げていくことでボールの速度を速くしています。

最後に、

requestAnimationFrame(draw);

この関数↑でアニメーションのフレームレートを自動で判断しています。
setInterval()よりこっちの方が効率よくていいですね。

感想

やっぱりゲームみたいな描画系はcanvasを使うべきなんだなと思いました。
canvasだとチャートとか、他にも色々作れそうなので勉強してみようかな。。

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

参考

1.仕上げ - ゲーム開発 | MDN

MDNさん今回もお世話になりました！ありがとうございます！

はじめに

昨年度の FOSS4G Advent Calendar 2018 22日目で、Cesium と 3D Tiles について紹介しました。また、社内のテックリード会でも同様の内容で紹介しましたので、紹介できる内容に絞って、情報を展開したいと思います。地味にいいね！があるので参考になれば幸いです。

Cesium について

Cesium は、3D のビューワーエンジンで、Cesium js と Cesium ion で構成されています。

• Cesium JS
  • Web 上の 3D マップ用の JavaScript ライブラリ
• Cesium ion
  • ストリーミング用に3D データをタイリングし、配信するためのサービス

3D データは Cesium ion にてストリーミング用に最適化され、Cesium JS で可視化されます。

3D データについて

3D Viewer の場合は、３D データの扱いが課題になる場合があるかと思います。
例えばドローンで撮影した点群データなどのデータを表示したい。データが大きい場合、ブラウザで表示する場合はパフォーマンスなども影響するといった問題があるかと思います。

それらの課題を解決する手法として、3D データの扱いとして、Cesium では 3D Tiles、imagery、Terrain という技術を採用しています。

具体的には、以下のファイルを 3D Tiles としてサポートしています。

• glTF (.gltf, .glb)
• CityGML (.citygml, .xml, .gml)
• KML/COLLADA (.kml, .kmz)
• LASer (.las, .laz)
• COLLADA (.dae)
• Wavefront OBJ (.obj)

1. Cesium がサポートしているファイルと描画機構

2. Cesium がサポートしているサービス群

3D Tiles について

• 3D Tiles は、写真測量、3D Buildings、BIM/CAD、Point Clouds などの 3D 地理空間コンテンツをストリーミングおよびレンダリングするために設計されており、空間データの構造とタイルフォーマットを定義しています。

  • https://github.com/AnalyticalGraphicsInc/3d-tiles
  • OGC (Open Geospatial Consortium) にも採用
  • OGC は、500以上の機関で、地理空間のコンテンツとサービス、センサーWebとIoT、GISデータ処理、データ共有に関する標準規格の開発と実装を行っています。

• 3D の地理空間データとして、地形データ、建物データ、CAD （または BIM） モデル、写真測量のモデル、ポイントクラウドなどのデータを 3D Tiles に変換します。

  • 変換された 3D Tiles は、軽量でかつ最適化されているため、サイズが大きい 3D データでもストレスなく Web で配信することが可能
  • 例えば、4.48 GB の LAS ファイルは、0.64 GB まで圧縮されると公式のサイトでも紹介

3D Tiles の仕様

• 3D Tile は、空間データの構造を持ったバイナリデータと JSON ファイルの２つのタイルセットで構成されています。
• タイルセットでは、メタデータとタイル オブジェクトの情報をタイルセットとして、JSON ファイルに記述されています。
• 次のいずれかの形式でレンダリングが可能なコンテンツとして配信が可能

フォーマット	用途
Batched 3D Model (b3dm)	Heterogeneous 3D models. テクスチャ化された地形や表面、3D 建物の外部と内、大規模なモデルなど
Instanced 3D Model (i3dm)	3D model instances. 木、風車、ボルト
Point Cloud (pnts)	大量の点群データ
Composite (cmpt)	異なる形式のタイルを1つのタイルに連結

• 個々のタイルは、Feature Table や Batch Table などの形式固有のコンポーネントを持つ binary blob.
• コンテンツは、建物や樹木を表す 3Dモデル、点群内のポイントなど、一連の機能を参照。各フィーチャには、タイルの Feature Table に格納している位置と外観のプロパティがあり、Batch Tableに保存されているアプリケーション固有のプロパティがある。
• クライアントは、実行時に各機能を選択し、可視化または分析のためにプロパティを取得することができる。
• Batched 3D Model および Instanced 3D Model 形式は、3D コンテンツの効率的な伝送のために設計されたオープンな仕様である glTF に基づいて構築されている。
• これらの形式のタイルコンテンツは、バイナリボディにジオメトリとテクスチャ情報を含む glTF が埋め込まれている。

3D Tiles の仕様：https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification

glTF について
https://www.khronos.org/gltf/

-	-	-
3Dモデル対応	Khronos Group による Web 上の3D モデルの業界標準フォーマットである glTF に対応	glTF (The GL Transmission Format)とは、OpenGL系のAPI (WebGL, OpenGL ES, OpenGL) と親和性の高い、ランタイム用途向けのアセットフォーマット ※glTFファイル（.gltf）、バイナリのglTFファイル（.glb）の直接参照が可能

3D Tiles で使用されている技術

• 3D コンテンツを表現するフォーマットとして、glTF (GL Transmission Format)、また、Google が開発した Draco というオープンソースの 3D データ圧縮ライブラリを使用。
• Cesium では、Draco を glTF に拡張して、Draco 圧縮モデルと 3D タイルセットを Cesium で扱うことが可能
  以下は　Cesium のブログでも紹介されていましたが、Draco 圧縮を使用したことでレンダリングが早くなっていることが分かるかと思います。

glTF 2.0　（gzipped）	Draco　圧縮を使用した　glTF 2.0　（gzipped）
タイルサイズ：738 MB	タイルサイズ：149 MB
ロード時間：18.921秒	ロード時間：10.548秒

※ 画像はデモ用のため 2 倍速になっています。

3D Tiles の表示例

• 3D Tiles のデータセット（点群データ）
  • pointCloudDraco.pnts
  • tileset.json

Cesiumでの 3D Tile のロードは、次のようになります。

var viewer = new Cesium.Viewer('cesiumContainer’); 

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ 
    url : 'http://localhost:8003/tilesets/pointCloud/tileset.json’ 
      })); 

viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, -0.5, 0));

CESIUM ion について

こちらの 3D Tiles のサービスを使用する場合は、CESIUM ion という Cesium が提供している 3D プラットフォームに登録して使用することができます。また、オンプレスでこれらのサービスも使用することができますが、Cesium とのビジネス上の契約が必要になるそうです。
Cesium ion の構成を以下に示します。

• asset.cesium.com
  • ユーザーがアップロードしたデータを保存し、3D タイルセット、画像、地形、glTF、KML、および CZML（これらをまとめてアセットと呼びます）を提供する。
• api.cesium.com 
  • ion REST API。アカウントやアセット管理に使用される。3D Tiling を開始し、ジオコーディング、サーバーベースの分析、およびユーザーが 3Dマッピングアプリケーションを作成するために必要ものを提供する。
• cesium.com
  • 3Dコンテンツのアップロードと管理、Cesium World Terrain などのコンテンツへのアクセス、および（最終的に）インタラクティブな地図作成と地理空間分析を実行するためのシングルページアプリケーション（SPA）

CESIUM ion の詳細については、Cesium のブログでも紹介されていますのでご参照下さい。

最後に

Cesium では、3D 地理空間コンテンツの仕様として、３D Tiles が採用されていますが、Esri では、i3s という仕様があります。こちらも ３D Tiles と同様に 3D コンテンツに特化しており、OGC にも採用されています。私が知る限り、両者を明確に比べたものは今のところないように思えます。
今後 3D コンテンツの扱いがますます重要になってくると思いますので、このあたりの技術に関してはキャッチアップしていく必要があると感じています。

これはPython Advent Calendar 2019の13日目の記事です。

Python要素薄めになっちゃったけど、スクレイピングの文脈でPythonよく出てくる気がするから許してください

概要

• (自分なりの)スクレイピングシステム構築方法のベストプラクティス的なものがちょっとだけ定まった
• 公開していろいろ意見を聞いてみたい
• たぶんウェブデベロッパーがスクレピングやるときに知っておくとちょっとだけ幸せになるかもしれない
• 誰かの役に立てればいいなあ(希望)

構築方法の重要な点

重要な点は以下の2点

1. DOMにアクセスしてデータを取得するスクレイピングする処理部分はJavaScriptを使う(とくにウェブデベロッパーの方は)
2. Chrome, ChromeDrive, Seleniumとかのスクレピング環境にはDockerとかを使う

構成図は以下のような感じです。(OSとか書いてないけど、だいたいのイメージ)
Pythonの部分は任意でSeleniumを叩ければなんでもいいです。(以下のPythonはSeleniumを使うモノとして読み替えてください)

JavaScriptを使ってスクレイピング処理

スクレピング関係のシステムを作るときにめんどくさいのはライブラリ選定だったりします。

個人的にPythonは好きだったりするので、昔はPyQueryとかBeautifulSoupを触っていました。

しかし、結構かなり面倒くさいです。

どういう風にセレクタを書けばいいのかググって実行して、ミスって、修正して、...みたいな感じなります。

最終的な結論が「Chrome Developer ToolsでJSのセレクタを書いて、欲しい情報を取得するJSを書いて、それをSeleniumから実行させる」です。(これが一番楽だと思います。)

(おそらくjQueryを触ったことがある人なら一番とっつきやすいはず)

以下のようなかんじ。

res = driver.execute_script(driver, """
    return (() => {
        // 以下をChrome Developmer Toolsでいろいろ試して作成する
        let tmp = [];
        $(".sample-area li a").each( (idx, element) => tmp.push($(element).attr("href")) )
        return tmp
    })()
""")

Chrome Developmer Toolsは以下のようなやつ。F12とか押したらでます。(Consoleタブを開くとJSがページ内で実行できます)
簡単な話、クラス情報とか丸コピして$(".class").text()とかやるだけでデータとってこれたりします。

これをライブラリの特有の関数でいろいろやろうと思うとめんどくさいのはなんとなくわかるとおもいます。

また、スクリプトがJSなのでスクレイピングライブラリに依存せずに、移植も楽です。

Chrome, ChromeDrive, Seleniumとかのスクレピング環境にはDockerとかを使う

ChromeDriverの設定とかChromeとのバージョンの相性とかいろいろやるのは人生の無駄遣いです。
Dockerとか環境をまるっともってこれるものを使いましょう。

単純なHTML,CSSのみで構成されているサイトならcurlとかで引っ張ってきてやるのもいいと思います。(単純なウェブサイトなら←ここ重要)
サーバーサイドでレンダリングされていても、内部のJSでわりとなんかゴリゴリいじってるサイトは多いです。

Python + Chrome + ChromeDrive + Seleniumの構成のサンプルを作ってみたのでスターをつけてもらうと喜びます。↓
https://github.com/redshoga/python-selenium-container

実装の流れ

1. スクレピングで取得したいデータ、場所を明確にする。
2. Chrome Developer Toolsでその取得したいデータが取得できるスクリプトを作成。
3. Seleniumで作ったスクリプトを動かしてデータを煮るなり焼くなりする。

おわり

ﾏｻｶﾘﾀﾞﾆｹﾞﾛｰ>???　 ??

この記事の続きになります

そういえば、JavaScriptでリアルタイム通信のゲームってどうやって作るのってなったとき。

概要

JavaScriptでリアルタイム通信するゲームを作る

JavaScriptはよく触ってるけど、そういえばリアルタイムの通信/対戦ゲームってどうやって作るのってなった時に参考になるかもしれないです。
PlayCanvasでマルチ対戦のゲームを作るために今回はPhotonというネットワークエンジンを使用して作成します。役割としては描画の部分はPlayCanvas、リアルタイム通信の部分についてはPhotonを使用して作っていきます。

今回デモとして作成したこちらのゲームは[WASD]で移動ができるシンプルなゲームとなっております。
２窓などをしていただければ一人でも遊べます。

PhotonとPlayCanvas
[W A S D]で移動(スマホはタッチで飛ぶだけ)#playcanvas #２窓https://t.co/mPDM21Lfme

— はが (@Mxcn3) December 13, 2019

PlayCanvasについて

PlayCanvasはJavaScriptで記述されたWebGLのエンジンで、最近GitHubのスター数が5000を超えました。
OSSのEngineと、SaaS型のエディターを兼ね備えているゲームエンジンです。engineについては、Three.js, Babylon.jsなどに似た使い方を使用することができます。エディターはビジュアルエディターとコードエディターがあり、エディターはクラウド上でプロジェクトの作成から公開までが出来るもので、FBXやOBJといった3Dモデルの素材については、ブラウザへドラッグアンドドロップをすることでGUIから操作・配置ができるエディターとなっております。

Photonについて

Photonについては、Unity多く使われているようですが、JavaScriptのSDKもありますので、Photon JavaScript SDKを使用してマルチ対戦のゲームを作っていきます。

Photonは20CCU（同時接続）までであれば、無料で使用できます。

https://www.photonengine.com/ja/photon

PlayCanvasでリアルタイム通信をするをプロジェクト をこのような形で作ってみました。

init.js

起動Photonの起動を行っています。index.html, style.cssを読み込みUIのセットアップも行います。

app.js

app.jsにてPhotonとPlayCanvasの同期をしています。Photonには様々なライフサイクルで発行されるイベントがありますが、今回使用したものについて説明します。

/*jshint esversion: 6, asi: true, laxbreak: true*/
const App = pc.createScript('app');

App.prototype.initialize = function() {
    this.photon = this.app.root.children[0].photon;
    this.photon.setLogLevel(999);
    this.photon.onJoinRoom = () => {
        Object.values(this.photon.actors).map(event => {
            const { isLocal, actorNr } = event;
            if (isLocal) {
            } else {
                const entity = new pc.Entity();
                entity.addComponent("model", {
                    type: "box"
                });
                entity.setPosition(0, 1, 0);
                entity.tags.add(`${actorNr}`);
                this.app.root.addChild(entity);
            }
        });
    };

    this.photon.onActorJoin = event => {
        const { isLocal, actorNr } = event;
        if (isLocal) {
        } else {
            const entity = new pc.Entity();
            entity.addComponent("model", {
                type: "box"
            });
            entity.setPosition(0, 1, 0);
            entity.tags.add(`${actorNr}`);
            this.app.root.addChild(entity);
        }
    };

    this.photon.onEvent = (code, content, actorNr) => {
        const entities = this.app.root.findByTag(`${actorNr}`);
        const [entity] = entities;

        switch (code) {
            case 1: {
                const { x, y, z } = content;
                entity.setLocalPosition(x, y, z);
                break;
            }
            case 2: {
                const { x, y, z, w } = content;
                entity.setLocalRotation(x, y, z, w);
                break;
            }
            default: {
                break;
            }
        }
    };
};

photon.onJoinRoom

onJoinRoomはルームに入った際の処理になります。今回のような作りでは呼ばれるタイミング
- ルームを新しく作ったとき
- 既存のルームに入る時

1. ルームに入った時
2. 他のプレイヤーを取得
3. 新しいエンティティ("Model:Box")としてゲーム画面に配置

// 1.ルームに入った時
this.photon.onJoinRoom = () => {
    //2. 他のプレイヤーを取得
    Object.values(this.photon.actors).map(event => {
        const { isLocal, actorNr } = event;
        if (isLocal) {
        } else {
            // 新しいエンティティを作成
            const entity = new pc.Entity();
            entity.addComponent("model", {
                type: "box"
            });
            // 新しく生成したエンティティのポジションの設定とタグを付与している
            entity.setPosition(0, 1, 0); // x, y, z
            entity.tags.add(`${actorNr}`);
            // PlayCanvasの画面上に配置する
            //3. 新しいエンティティ("Model:Box")としてゲーム画面に配置
            this.app.root.addChild(entity);
        }
    });
};

photon.onActorJoin

onActorJoinは自分の入っているルームに他のプレイヤーが参加してきたときの処理になります。

1. 他のプレイヤーが入ってきた時
2. 新しいエンティティを作成
3. 新しいエンティティ("Model:Box")としてゲーム画面に配置

// 1.他のプレイヤーが入ってきた時
this.photon.onActorJoin = event => {
    // isLocal: 自分であるかの判定
    // actorNr: 入った順に1から振られる、ユニークな番号
    const { isLocal, actorNr } = event;
    // 自分自身であるかの判定
    if (isLocal) {
    } else {
        //  2. 新しいエンティティを作成
        const entity = new pc.Entity();
        entity.addComponent("model", {
            type: "box"
        });
        // ポジションとタグを設定
        entity.setPosition(0, 1, 0);
        entity.tags.add(`${actorNr}`);
        // 3. 新しいエンティティ("Model:Box")としてゲーム画面に配置
        this.app.root.addChild(entity);
    }
};

photon.onEvent

onEventは、今回はplayer.jsにより、データが送信された場合に呼び出されます。

1. actorNrのタグを元にエンティティを検索
2. CodeによってPositionかRotationかの判定を行う

this.photon.onEvent = (code, content, actorNr) => {
    // 1. `actorNr`のタグを元に`エンティティ`を検索
    const entities = this.app.root.findByTag(`${actorNr}`);
    const [entity] = entities;

    //2. `Code`によって`Position`か`Rotation`かの判定を行う
    switch (code) {
        case 1: {
            const { x, y, z } = content;
            entity.setLocalPosition(x, y, z);
            break;
        }
        case 2: {
            const { x, y, z, w } = content;
            entity.setLocalRotation(x, y, z, w);
            break;
        }
        default: {
            break;
        }
    }
};

player.js

Player.jsはキーボードの操作が押された際にPhotonサーバーにデータを送るものになります。

/*jshint esversion: 6, asi: true, laxbreak: true*/
const Player = pc.createScript("player");

// PlayCanvas Editor上で使用するためにAttributesを作成
// Attributesの説明
// https://developer.playcanvas.com/ja/user-manual/scripting/script-attributes/

Player.attributes.add("moveSpeed", { type: "number", default: 0.1 });
Player.attributes.add("rotateSpeed", { type: "number", default: 2 });

const move = (direction, entity, self) => {
    const { photon } = self;
    switch (direction) {
        case "up": {
            entity.translateLocal(0, 0, -self.moveSpeed);
            break;
        }
        case "down": {
            entity.translateLocal(0, 0, self.moveSpeed);
            break;
        }
        default: {
            break;
        }
    }
    // send position
    // コード番号 1で現在のEntityのポジションを送信
    photon.raiseEvent(1, entity.getLocalPosition());
};

const rotate = (direction, entity, self) => {
    const { photon } = self;

    switch (direction) {
        case "left": {
            entity.rotate(0, -self.rotateSpeed, 0);
            break;
        }
        case "right": {
            entity.rotate(0, self.rotateSpeed, 0);
            break;
        }
        default: {
            break;
        }
    }
    // send rotation
    // コード番号 2で現在のEntityのポジションを送信
    photon.raiseEvent(2, entity.getLocalRotation());
};

Player.prototype.initialize = function () {
    this.photon = this.app.root.children[0].photon;
    if (this.app.touch) {
        this.app.touch.on(
            pc.EVENT_TOUCHSTART,
            () => {
                const { photon } = this
                const { x, y, z } = this.entity.getPosition();
                this.entity.rigidbody.teleport(x, y + 0.5, z);
                photon.raiseEvent(1, this.entity.getLocalPosition());

                photon.raiseEvent(2, this.entity.getLocalRotation());


            },
            null
        );
    }
};


// update code called every frame
Player.prototype.update = function (dt) {
    const { keyboard } = this.app;
    // 移動のキーが押されていたら
    if (keyboard.isPressed(pc.KEY_W) || keyboard.isPressed(pc.KEY_UP)) {
        move("up", this.entity, this);
    } else if (keyboard.isPressed(pc.KEY_S) || keyboard.isPressed(pc.KEY_DOWN)) {
        move("down", this.entity, this);
    }

    // 回転のキーが押されたら
    if (keyboard.isPressed(pc.KEY_A) || keyboard.isPressed(pc.KEY_LEFT)) {
        rotate("right", this.entity, this);
    } else if (keyboard.isPressed(pc.KEY_D) || keyboard.isPressed(pc.KEY_RIGHT)) {
        rotate("left", this.entity, this);
    }
};

photon.raiseEvent

RPCs and RaiseEvent

raiseEventを使用して任意のタイミングでデータの送信を行います。今回は移動が行われた時と回転が行われた際に現在の場所を送信しています。

raiseEvent(eventCode, data, options)

型はそれぞれ

 eventCode:number
 object: object
 options: object

移動時

    ....
    // send position
    // コード番号 1で現在のEntityのポジションを送信
    photon.raiseEvent(1, entity.getLocalPosition());
};

回転時

    ...
    // send rotation
    // コード番号 2で現在のEntityのポジションを送信
    photon.raiseEvent(2, entity.getLocalRotation());
};

参考

raiseEvent - Photon Document

initialize

PlayCanvasのスクリプトのライフサイクルには、スクリプト一度だけ呼び出されるinitialize、毎フレーム呼び出されるUpdateがあります。

1. Photonのプロパティを代入
2. タッチされた際に発火するイベントの定義

Player.prototype.initialize = function () {
    // Rootエンティティからphotonプロパティを取得
    // 1. Photonのプロパティを代入
    this.photon = this.app.root.children[0].photon;

    // タッチ操作が可能だったら
    if (this.app.touch) {

    // タッチ操作が行われたら
    // PlayCanvas: タッチについて
    // https://support.playcanvas.jp/hc/ja/articles/227190908

    // 2. タッチされた際に発火するイベントの定義
    // PlayCanvas: イベント種類について
    // https://developer.playcanvas.com/ja/user-manual/scripting/communication/
        this.app.touch.on(
            pc.EVENT_TOUCHSTART,
            () => {
                const { photon } = this
                const { x, y, z } = this.entity.getPosition();
                this.entity.rigidbody.teleport(x, y + 0.5, z);
                // コード1で現在のポジションを送信
                photon.raiseEvent(1, this.entity.getLocalPosition());
                // コード2で現在の回転を送信
                photon.raiseEvent(2, this.entity.getLocalRotation());


            },
            null
        );
    }
};

update

updateはフレームごとに呼ばれます

1. 移動のキーが押されていたら
2. 回転のキーが押されたら

3. Player.prototype.update = function (dt) {
   const { keyboard } = this.app;
   // 1. 移動のキーが押されていたら
   if (keyboard.isPressed(pc.KEY_W) || keyboard.isPressed(pc.KEY_UP)) {
       // 移動
       move("up", this.entity, this);
   } else if (keyboard.isPressed(pc.KEY_S) || keyboard.isPressed(pc.KEY_DOWN)) {
       // 移動
       move("down", this.entity, this);
   }
   
   // 2. 回転のキーが押されたら
   if (keyboard.isPressed(pc.KEY_A) || keyboard.isPressed(pc.KEY_LEFT)) {
       // 回転
       rotate("right", this.entity, this);
   } else if (keyboard.isPressed(pc.KEY_D) || keyboard.isPressed(pc.KEY_RIGHT)) {
       // 回転
       rotate("left", this.entity, this);
   }
   };
   

前回
そういえば、JavaScriptでリアルタイム通信のゲームってどうやって作るのってなったとき。

以下PlayCanvas開発で参考になりそうな記事の一覧です。

• PlayCanvas入門- モデルの作成～ゲームに入れ込むまで
• JavaScriptでスロットを実装する。【PlayCanvas】
• 3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】
• PlayCanvasのコードエディターでes6に対応する
• Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった
• PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む

その他の記事はこちらになります。
- AR年賀状を作る
- React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す
- PlayCanvasのエディター上でHTML, CSSを組み込む方法
- 【iOS13】新しくなったWebVRの使い方

PlayCanvasのユーザー会のSlackを作りました！

少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

日本PlayCanvasユーザー会 - Slack

この記事の続きになります

そういえば、JavaScriptでリアルタイム通信のゲームってどうやって作るのってなったとき。

概要

JavaScriptでリアルタイム通信するゲームを作る

JavaScriptはよく触ってるけど、そういえばリアルタイムの通信/対戦ゲームってどうやって作るのってなった時に参考になるかもしれないです。
PlayCanvasでマルチ対戦のゲームを作るために今回はPhotonというネットワークエンジンを使用して作成します。役割としては描画の部分はPlayCanvas、リアルタイム通信の部分についてはPhotonを使用して作っていきます。

今回デモとして作成したこちらのゲームは[WASD]で移動ができるシンプルなゲームとなっております。
２窓などをしていただければ一人でも遊べます。

PhotonとPlayCanvas
[W A S D]で移動(スマホはタッチで飛ぶだけ)#playcanvas #２窓https://t.co/mPDM21Lfme

— はが (@Mxcn3) December 13, 2019

PlayCanvasについて

PlayCanvasはJavaScriptで記述されたWebGLのエンジンで、最近GitHubのスター数が5000を超えました。
OSSのEngineと、SaaS型のエディターを兼ね備えているゲームエンジンです。engineについては、Three.js, Babylon.jsなどに似た使い方を使用することができます。エディターはビジュアルエディターとコードエディターがあり、エディターはクラウド上でプロジェクトの作成から公開までが出来るもので、FBXやOBJといった3Dモデルの素材については、ブラウザへドラッグアンドドロップをすることでGUIから操作・配置ができるエディターとなっております。

Photonについて

Photonについては、Unity多く使われているようですが、JavaScriptのSDKもありますので、Photon JavaScript SDKを使用してマルチ対戦のゲームを作っていきます。

Photonは20CCU（同時接続）までであれば、無料で使用できます。

https://www.photonengine.com/ja/photon

PlayCanvasでリアルタイム通信をするをプロジェクト を作ってみました。

Photon SDKのドキュメント

Photon JavaScript SDKのドキュメント

PlayCanvasのプロジェクト

PlayCanvasはクラウド上でスクリプトを管理します。

init.js

起動Photonの起動を行っています。index.html, style.cssを読み込みUIのセットアップも行います。

app.js

app.jsにてPhotonとPlayCanvasの同期をしています。Photonには様々なライフサイクルで発行されるイベントがありますが、今回使用したものについて説明します。

/*jshint esversion: 6, asi: true, laxbreak: true*/
const App = pc.createScript('app');

App.prototype.initialize = function() {
    this.photon = this.app.root.children[0].photon;
    this.photon.setLogLevel(999);
    this.photon.onJoinRoom = () => {
        Object.values(this.photon.actors).map(event => {
            const { isLocal, actorNr } = event;
            if (isLocal) {
            } else {
                const entity = new pc.Entity();
                entity.addComponent("model", {
                    type: "box"
                });
                entity.setPosition(0, 1, 0);
                entity.tags.add(`${actorNr}`);
                this.app.root.addChild(entity);
            }
        });
    };

    this.photon.onActorJoin = event => {
        const { isLocal, actorNr } = event;
        if (isLocal) {
        } else {
            const entity = new pc.Entity();
            entity.addComponent("model", {
                type: "box"
            });
            entity.setPosition(0, 1, 0);
            entity.tags.add(`${actorNr}`);
            this.app.root.addChild(entity);
        }
    };

    this.photon.onEvent = (code, content, actorNr) => {
        const entities = this.app.root.findByTag(`${actorNr}`);
        const [entity] = entities;

        switch (code) {
            case 1: {
                const { x, y, z } = content;
                entity.setLocalPosition(x, y, z);
                break;
            }
            case 2: {
                const { x, y, z, w } = content;
                entity.setLocalRotation(x, y, z, w);
                break;
            }
            default: {
                break;
            }
        }
    };
};

photon.onJoinRoom

onJoinRoomはルームに入った際の処理になります。今回のような作りでは呼ばれるタイミング
- ルームを新しく作ったとき
- 既存のルームに入る時

1. ルームに入った時
2. 他のプレイヤーを取得
3. 新しいエンティティ("Model:Box")としてゲーム画面に配置

// 1.ルームに入った時
this.photon.onJoinRoom = () => {
    //2. 他のプレイヤーを取得
    Object.values(this.photon.actors).map(event => {
        const { isLocal, actorNr } = event;
        if (isLocal) {
        } else {
            // 新しいエンティティを作成
            const entity = new pc.Entity();
            entity.addComponent("model", {
                type: "box"
            });
            // 新しく生成したエンティティのポジションの設定とタグを付与している
            entity.setPosition(0, 1, 0); // x, y, z
            entity.tags.add(`${actorNr}`);
            // PlayCanvasの画面上に配置する
            //3. 新しいエンティティ("Model:Box")としてゲーム画面に配置
            this.app.root.addChild(entity);
        }
    });
};

photon.onActorJoin

onActorJoinは自分の入っているルームに他のプレイヤーが参加してきたときの処理になります。

1. 他のプレイヤーが入ってきた時
2. 新しいエンティティを作成
3. 新しいエンティティ("Model:Box")としてゲーム画面に配置

// 1.他のプレイヤーが入ってきた時
this.photon.onActorJoin = event => {
    // isLocal: 自分であるかの判定
    // actorNr: 入った順に1から振られる、ユニークな番号
    const { isLocal, actorNr } = event;
    // 自分自身であるかの判定
    if (isLocal) {
    } else {
        //  2. 新しいエンティティを作成
        const entity = new pc.Entity();
        entity.addComponent("model", {
            type: "box"
        });
        // ポジションとタグを設定
        entity.setPosition(0, 1, 0);
        entity.tags.add(`${actorNr}`);
        // 3. 新しいエンティティ("Model:Box")としてゲーム画面に配置
        this.app.root.addChild(entity);
    }
};

photon.onEvent

onEventは、今回はplayer.jsにより、データが送信された場合に呼び出されます。

1. actorNrのタグを元にエンティティを検索
2. CodeによってPositionかRotationかの判定を行う

this.photon.onEvent = (code, content, actorNr) => {
    // 1. `actorNr`のタグを元に`エンティティ`を検索
    const entities = this.app.root.findByTag(`${actorNr}`);
    const [entity] = entities;

    //2. `Code`によって`Position`か`Rotation`かの判定を行う
    switch (code) {
        case 1: {
            const { x, y, z } = content;
            entity.setLocalPosition(x, y, z);
            break;
        }
        case 2: {
            const { x, y, z, w } = content;
            entity.setLocalRotation(x, y, z, w);
            break;
        }
        default: {
            break;
        }
    }
};

player.js

Player.jsはキーボードの操作が押された際にPhotonサーバーにデータを送るものになります。

/*jshint esversion: 6, asi: true, laxbreak: true*/
const Player = pc.createScript("player");

// PlayCanvas Editor上で使用するためにAttributesを作成
// Attributesの説明
// https://developer.playcanvas.com/ja/user-manual/scripting/script-attributes/

Player.attributes.add("moveSpeed", { type: "number", default: 0.1 });
Player.attributes.add("rotateSpeed", { type: "number", default: 2 });

const move = (direction, entity, self) => {
    const { photon } = self;
    switch (direction) {
        case "up": {
            entity.translateLocal(0, 0, -self.moveSpeed);
            break;
        }
        case "down": {
            entity.translateLocal(0, 0, self.moveSpeed);
            break;
        }
        default: {
            break;
        }
    }
    // send position
    // コード番号 1で現在のEntityのポジションを送信
    photon.raiseEvent(1, entity.getLocalPosition());
};

const rotate = (direction, entity, self) => {
    const { photon } = self;

    switch (direction) {
        case "left": {
            entity.rotate(0, -self.rotateSpeed, 0);
            break;
        }
        case "right": {
            entity.rotate(0, self.rotateSpeed, 0);
            break;
        }
        default: {
            break;
        }
    }
    // send rotation
    // コード番号 2で現在のEntityのポジションを送信
    photon.raiseEvent(2, entity.getLocalRotation());
};

Player.prototype.initialize = function () {
    this.photon = this.app.root.children[0].photon;
    if (this.app.touch) {
        this.app.touch.on(
            pc.EVENT_TOUCHSTART,
            () => {
                const { photon } = this
                const { x, y, z } = this.entity.getPosition();
                this.entity.rigidbody.teleport(x, y + 0.5, z);
                photon.raiseEvent(1, this.entity.getLocalPosition());

                photon.raiseEvent(2, this.entity.getLocalRotation());


            },
            null
        );
    }
};


// update code called every frame
Player.prototype.update = function (dt) {
    const { keyboard } = this.app;
    // 移動のキーが押されていたら
    if (keyboard.isPressed(pc.KEY_W) || keyboard.isPressed(pc.KEY_UP)) {
        move("up", this.entity, this);
    } else if (keyboard.isPressed(pc.KEY_S) || keyboard.isPressed(pc.KEY_DOWN)) {
        move("down", this.entity, this);
    }

    // 回転のキーが押されたら
    if (keyboard.isPressed(pc.KEY_A) || keyboard.isPressed(pc.KEY_LEFT)) {
        rotate("right", this.entity, this);
    } else if (keyboard.isPressed(pc.KEY_D) || keyboard.isPressed(pc.KEY_RIGHT)) {
        rotate("left", this.entity, this);
    }
};

photon.raiseEvent

RPCs and RaiseEvent

raiseEventを使用して任意のタイミングでデータの送信を行います。今回は移動が行われた時と回転が行われた際に現在の場所を送信しています。

raiseEvent(eventCode, data, options)

型はそれぞれ

 eventCode:number
 object: object
 options: object

移動時

    ....
    // send position
    // コード番号 1で現在のEntityのポジションを送信
    photon.raiseEvent(1, entity.getLocalPosition());
};

回転時

    ...
    // send rotation
    // コード番号 2で現在のEntityのポジションを送信
    photon.raiseEvent(2, entity.getLocalRotation());
};

参考

raiseEvent - Photon Document

initialize

PlayCanvasのスクリプトのライフサイクルには、スクリプト一度だけ呼び出されるinitialize、毎フレーム呼び出されるUpdateがあります。

1. Photonのプロパティを代入
2. タッチされた際に発火するイベントの定義

Player.prototype.initialize = function () {
    // Rootエンティティからphotonプロパティを取得
    // 1. Photonのプロパティを代入
    this.photon = this.app.root.children[0].photon;

    // タッチ操作が可能だったら
    if (this.app.touch) {

    // タッチ操作が行われたら
    // PlayCanvas: タッチについて
    // https://support.playcanvas.jp/hc/ja/articles/227190908

    // 2. タッチされた際に発火するイベントの定義
    // PlayCanvas: イベント種類について
    // https://developer.playcanvas.com/ja/user-manual/scripting/communication/
        this.app.touch.on(
            pc.EVENT_TOUCHSTART,
            () => {
                const { photon } = this
                const { x, y, z } = this.entity.getPosition();
                this.entity.rigidbody.teleport(x, y + 0.5, z);
                // コード1で現在のポジションを送信
                photon.raiseEvent(1, this.entity.getLocalPosition());
                // コード2で現在の回転を送信
                photon.raiseEvent(2, this.entity.getLocalRotation());


            },
            null
        );
    }
};

update

updateはフレームごとに呼ばれます

1. 移動のキーが押されていたら
2. 回転のキーが押されたら

3. Player.prototype.update = function (dt) {
   const { keyboard } = this.app;
   // 1. 移動のキーが押されていたら
   if (keyboard.isPressed(pc.KEY_W) || keyboard.isPressed(pc.KEY_UP)) {
       // 移動
       move("up", this.entity, this);
   } else if (keyboard.isPressed(pc.KEY_S) || keyboard.isPressed(pc.KEY_DOWN)) {
       // 移動
       move("down", this.entity, this);
   }
   
   // 2. 回転のキーが押されたら
   if (keyboard.isPressed(pc.KEY_A) || keyboard.isPressed(pc.KEY_LEFT)) {
       // 回転
       rotate("right", this.entity, this);
   } else if (keyboard.isPressed(pc.KEY_D) || keyboard.isPressed(pc.KEY_RIGHT)) {
       // 回転
       rotate("left", this.entity, this);
   }
   };
   

前回
そういえば、JavaScriptでリアルタイム通信のゲームってどうやって作るのってなったとき。

以下PlayCanvas開発で参考になりそうな記事の一覧です。

• PlayCanvas入門- モデルの作成～ゲームに入れ込むまで
• JavaScriptでスロットを実装する。【PlayCanvas】
• 3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】
• PlayCanvasのコードエディターでes6に対応する
• Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった
• PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む

その他の記事はこちらになります。

• AR年賀状を作る
• React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す
• PlayCanvasのエディター上でHTML, CSSを組み込む方法
• 【iOS13】新しくなったWebVRの使い方 ### PlayCanvasのユーザー会のSlackを作りました！ 少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

日本PlayCanvasユーザー会 - Slack