■ はじめに

p5.js でスケッチを書く（描く？）のを何度か繰り返していると、なんだか同じようなコードを何度も書いてるなあ、と思う場面に遭遇します。そんなときは、再利用できそうな形でコードを書いて、また今度も使えるようにストックしておくと良いかもしれません。もし、そのストックを使う場面が再び訪れ、そのおかげで思いついたスケッチをスパッと作れたりすると、勝ったなガハハという気分になれます。¹

ここでは、私がよく使ったり使わなかったりするいくつかの共通処理を、個別の記事に分けて紹介していきたいと思います。一つ一つはあまり大した内容ではありませんが……。

この記事はいったん目次だけですが、人によっていろいろ前提が違うと思うので、下の方にもろもろの前提知識（主に文法）についても書きました。

■ 目次

（仮）
（個別の記事はこれからです）

• ランダム
• イージング
• タイマー
• 配列要素の組み合わせ
• 曲線
• 図形のトリミング
• ピクセル操作
• キーボードで移動
• 背景画像
• 画面拡大
• …

■ 環境

• JavaScript
  • ES2015（後述）
• p5.js
  • v0.10.2
  • 簡単のため、global mode（要するに普通のモード）を前提とします。
    　参考： Global and instance mode （公式Wiki）
    instance mode がよく分からんという人でも大丈夫ですが、
    global mode がどう動くのかは知っといたほうがいいかも（補足を追記するかもしれません）
• ブラウザ
  • たぶんどれでも大丈夫だとは思うけど、私は Chrome で確認しています。
  • 経験上 Edge はたまに怪しい

■ 注意事項

書こうとしている内容ですが、実際のところほとんどが

• もっとうまくやってくれるライブラリが存在する
• そもそも p5.js が向いていないかもしれない

のどちらかな気がします（ちゃんと調べてませんがたぶん）。

よって、主な対象読者は、寿命が無限であるなどの理由で長時間の無駄を許容できる仙人か、効率を度外視して過程を楽しむことを優先する変態か、もしくはその両方です。これはすなわち合理的経済人と対を成す理想的存在であり、現実のあなたにはそれぞれ個別の事情があることでしょう。（？）

■ 前提知識

ぜんぶ分かってないとダメとかではなくて（そんなに大層なコードは出てこない）、
初めて出くわしたときにギョッとしなければいいな、という諸々です。

ググるのが面倒な人のために例と説明も添えましたが、もっと優れた解説が多々あります。
しかも動作確認してないので、なんか違ったら後で直すかも。

JavaScript の基本文法

基礎的な概念やキーワードとその使い方

変数、関数（引数・戻り値）、データ型、演算子、値の比較、
if、for、switch、null、undefined、……

オブジェクト型

これは p5.js のサンプルコードで（表面的には）あまり出てこないかも？ と思ったので書きます。
※ var はこの連載では実際には使いません、後述の「ES2015」参照

object-example.js

var coordinates = {
  x: 20,
  y: 40
};

仮にこう書いたとき、coordinates.xやcoordinates.yで値を参照できます。
xやyのところは変数名と同様、好きな名前を使える。
参考： オブジェクトの基本 - JavaScript | MDN

三項演算子

条件次第で値を変えたいとき、ifよりシンプルに書けるやつです。

var flag = true;
var answer = flag ? "YES" : "NO";
// flag が true なら "YES", でなければ "NO" が結果として answer に代入される

参考： 条件 (三項) 演算子 - JavaScript | MDN

今回（たぶん）使わないもの

prototypeとかthisとかnewとかはたぶん出ない。²

p5.js の基本

setupとdraw、座標システム、いろいろな図形の描画、frameCount、その他各種変数・関数、などなど。

何度か自分で書いた経験があって、
例えばまあ、こういった基本的なサンプルコードを見たときに、何をやってるのかすぐ理解できると良いです。
Coordinates | examples | p5.js

p5.js の関数その他についてはリファレンスを見よう！
reference | p5.js

3D（WebGL）とかはたぶんやらないと思います。

高階関数

引数が別の関数だったり、戻り値が別の関数だったりするような関数のことです。

※ 説明のため、いったん function宣言で例を書きますが、
　 実際にはこの連載では後述の「アロー関数」で書きます。

引数が別の関数

この例では引数 doSomething がそれですが、こういうのをコールバック関数と言います。
　　参考： コールバック関数 - JavaScript | MDN

callback-function.js

// doSomethingは任意の関数
function runGivenFunction(doSomething) {
  doSomething(200);
}

// 使うとき： たとえばこのような関数があったとして、
function drawCircleAtMyPlace(size) {
  circle(100, 100, size); // p5.js の circle 関数
}

// こうすると、結果的に drawCircleAtMyPlace(200); が実行されるのと同じことになる
runGivenFunction(drawCircleAtMyPlace);

返り値が別の関数

ちなみにこの例では、minusOneを外から参照することはできませんが、
　 coolFunctionに入れた関数が存在する限りminusOneの宣言も内部的には残り続けています。
　 こういうのをクロージャと言います。　参考： クロージャ - JavaScript | MDN

return-function.js

// これの返り値は、値を入れるとそれに-1を掛け算して返してくれる関数
function getCoolFunction() {
  var minusOne = -1;

  return function(value) {
    return minusOne * value;
  };
}

// 使うとき：
var coolFunction = getCoolFunction();
var result = coolFunction(100); // この結果は -100

// 私はあまりやらないけど、getCoolFunction()(100); などのように一度に書くことも可能

配列の処理

配列を使った操作のうち、上述のコールバック関数を使うものがいくつかあり、
その中でも forEach map filter あたりは使う可能性が高いです。³

const array = [10, 20, 30];

array.forEach(someFunc); // 各要素を引数としてsomeFuncを実行
array.map(someFunc);     // 各要素を引数としてsomeFuncを実行し、それらの結果を新しい配列で返す
array.filter(someFunc);  // 各要素を引数としてsomeFuncを実行し、結果trueの要素だけ新しい配列で返す

// 例えば
array.forEach(print); // print(10); print(20); print(30); が順に実行される
array.map(sq); // sq は p5.js の関数で、数値を二乗する。こうすると結果 [100, 400, 900] が返る

function greaterThan15(value) { return value > 15; } // 15より大きければ true を返す関数
array.filter(greaterThan15); // こうすると結果として、条件に合致した要素の配列 [20, 30] が返る

参考： Array - JavaScript | MDN

ES2015

JavaScript の文法（というか仕様）は年々拡張されており、
特に「ES5」以前と「ES2015」以降とで大きく様変わりしています。
参考： ES2015 (ES6) についてのまとめ

p5.js はそれなりに歴史があるので、ES5 以前の書き方のサンプルコードがたくさんあります。
その関係で、新たに書く場合でもあえて ES5 以前の書き方で書く、という人もいるかもしれません。
あと、ES2015 が各種ブラウザでちゃんと動作するようになったのは割と最近のことであるらしい。

そんな事情なので人によっては見慣れないかもですが、私の場合は ES2015 を取り入れて書きたいと思います。
中でもよく使うと思われるものを挙げます。

変数宣言

定数やオブジェクトや配列は基本的に const（再代入不可）、
あとで再び代入する予定の変数だけ let で宣言します。
ES2015より前は var しかありませんでした。

var とその他の厳密な違いとしては、スコープとかホイスティング（巻き上げ）とかがありますが、
そもそも var を使わなければあまり意識しないと思われます。

for...of ループ

こういうやつです。

const array = [10, 20, 30];

// 普通のfor
for (let i = 0; i < array.length; i += 1) print(array[i]);

// for...of（結果は上と同じ）
for (const element of array) print(element);

普通の for 、for...of、あるいは先述の forEach、どれがいいのかは文脈次第。

参考： for...of - JavaScript | MDN

アロー関数

関数は function で定義できますが、

// [1] 引数2つの関数
function doSomethingCrazy(someString, someValue) {
  // ...
}

// [2] 引数1つで、計算した値を返す単純な関数
function calculateElegantly(value) {
  return value * 7777777;
}

// [3] 引数なしで、関数の返り値が別の新たな関数
function getCoolFunction() {
  return function(value) {
    return -value;
  };
}

アロー関数という構文で、このようにも書ける。

// [1] 引数2つの関数
const doSomethingCrazy = (someString, someValue) => {
  // ...
};

// [2] このケースでは () も {} も return も省略できる
const calculateElegantly = value => value * 7777777;

// [3] 引数なしなら () => ... となる。
// value => -value の部分が返り値であり、function(value) { return -value; } に相当する
const getCoolFunction = () => value => -value;

短くすっきりしてて良いのですが、知らないと、慣れるのにちょっとかかるかもしれませんね。
参考： アロー関数 - JavaScript | MDN

あと、上述の var と似たような話（ホイスティング有無）が function にも言えますが、
基本的に function は使わず、変数でも関数でも const（たまに let ）で宣言したいと思います。

分割代入

こういうオブジェクトがあったとして、

const fantasticObject = {
  greatNumber: 1984,
  awesomeString: "WTF"
};

こんな感じで中身を取り出したいとき、

const greatNumber = fantasticObject.greatNumber;
const awesomeString = fantasticObject.awesomeString;

こうも書ける、ということ。

const { greatNumber, awesomeString } = fantasticObject;

取り出すときに別の名前にしたり、深いところから一気に取ったりもできます。
参考： 分割代入 - JavaScript - JavaScript | MDN

デフォルト引数

引数に何も渡さなかったときのデフォルト値を決めておくやつです。

const printName = (name = "no name") => print(name);

printName("John"); // print("John"); が実行される

printName(); // print("no name"); が実行される
printName(undefined); // 同上

参考： デフォルト引数 - JavaScript | MDN

今回（たぶん）使わないもの

単なる最近の私の好みですが、ひとまず表面的には class は使う機会が少ないと思います。

モジュール機能の import export も、普段は使うけどここでは使わない。

イテレーターやジェネレーター、yield、Promise、とかは私自身も分かってない。

とりあえず

このくらいでしょうか。
習うより慣れろでもいいと思います。

▶ 目次にもどる

---

1. 二度と使わず死蔵してしまうことも多いわけですが、それも経験ということで。 ↩

2. prototypeとかthisとかが何なのか（どう動くのか）は知っておく価値がありますが、とりあえず今回のところは大丈夫だと思います。私も怪しいし。 ↩

3. 処理効率をキリキリ上げたいときはforEach系は遅いので避けると思いますが、今回そんな部分がネックになることはないので、気にしないこととします。 ↩

Riot v4 がリリースされて随分経ってしまいましたが、ようやく Semantic UI Riot も v4 に対応できました
Riot.js Advent Calendar 2019の1日目で恐縮ですが宣伝させてください！

Semantic UI Riot って何？

CSSフレームワークのSemantic UIに特化したRiotのコンポーネントセットです。
Semantic UIのJavaScriptやjQueryに依存することなく、Modulesが使えるようになっています。¹
https://semantic-ui-riot.web.app

Semantic UI Riot が依存する Riot と Semantic UI のバージョン

Riotのバージョンに合わせて、1.xと2.xのどちらかをお使いください。²

Semantic UI Riot	Riot	Semantic UI
1.x.x	3.0.0	2.3.0
2.x.x	4.0.0	2.3.0

用意されているコンポーネントの一覧

Modules

Semantic UIのModulesの中から個人的によく使うものをコンポーネント化してあります。

• Accordion
• Checkbox
• Dropdown
• Modal
• Popup
• Progress
• Rating
• Tab

Addons

Semanti UIのModulesにはないもので、あったら便利そうなものを作りました。

• Alert
  • ブラウザ標準のalert()の代わりに使えます。
• Confirm
  • ブラウザ標準のconfirm()の代わりに使えます。
• Datepicker
• Pagination
• Radio
  • Semantic UIではCheckboxに含まれているものを独立させました。
• Table
  • 列でソートができます。
• Toast
  • 一定時間経過したら消えるメッセージです。
• Validation Error

コンポーネントの簡単な紹介

Checkbox

<su-checkbox name="checkbox1">
  Make my profile visible
</su-checkbox>

値のやりとりはchecked属性を使います。

this.$("[name='checkbox1']").checked = true

Dropdown

<su-dropdown name="dropdown1" items="{ dropdownItems }"></su-dropdown>

<script>
  export default {
    dropdownItems: [
      {
        label: 'Gender',
        value: null,
        default: true
      },
      {
        label: 'Male',
        value: 1
      },
      {
        label: 'Female',
        value: 2
      },
    ]
  }
</script>

items 属性でドロップダウンの中に表示する項目を設定します。

値のやり取りは value 属性を使いますが、value 属性の場合はgetAttribute , setAttribute じゃないとやり取りできないようです。

（Riot.jsで予約語として扱われているのが原因？と思っていますが、よくわからないので詳しい方教えてください。）

this.$("[name='dropdown1']").getAttribute('value')
this.$("[name='dropdown1']").setAttribute('value', value)

Modal

<su-modal modal="{ modal }" show="{ state.show }" onhide="{ onHide }">
    <p>Modal Content</p>
</su-modal>
<button class="ui button" onclick="{ showModal }">Show modal</button>

<script>
  export default {
    state: {
      show: false
    },
    modal: {
      header: 'Select a Photo',
      buttons: [{
        text: 'Ok',
        type: 'primary',
        icon: 'checkmark'
      }, {
        text: 'Cancel'
      }]
    },

    showModal() {
      this.update({ show: true })
    },
    onHide() {
      this.update({ show: false })
    }
  }
</script>

モーダルのコンテンツはタグのテキストに、それ以外のヘッダーやボタンの情報は modal 属性で設定して、 show 属性を true にするとモーダルが表示されます。

モーダルがクローズされると onhide コールバックが呼ばれるので、 show 属性の変数（ここでのstate.show） を false にするのをお忘れなく。

Other

他にも色々なコンポーネントを用意してあるので、興味があればのぞいてみてください。
https://semantic-ui-riot.web.app

インストール

ここまで読んで試してみたくなった方は是非インストールしてみてください！

お手軽に全部CDNから持ってくる方法

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
  <script src="https://unpkg.com/riot@4.6.6/riot+compiler.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui-riot@2.1.0/dist/semantic-ui-riot.js"></script>
</head>

<body>
  <sample></sample>

  <script type="riot" data-src="./sample.riot"></script>
  <script>
    riot.compile().then(() => {
      riot.mount("sample");
    });
  </script>
</body>
</html>

sample.riot

<sample>
  <su-checkbox>Make my profile visible</su-checkbox>
</sample>

Webpackを使う方法

npm i -S semantic-ui-riot

index.js

import {component} from 'riot'
import 'semantic-ui-riot'
import Sample from './sample.riot'

component(Sample)(document.getElementById('app'))

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.riot$/,
        exclude: /node_modules/,
        use: [{
          loader: '@riotjs/webpack-loader'
        }]
      }
    ]
  }
};

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>
</html>

sample.riot

<sample>
  <su-checkbox>Make my profile visible</su-checkbox>
</sample>

Thanks!

Semantic UI Riot のアイコンは Riotユーザーでデザイナーの @nibushibu さんに作って頂きました！
どうもありがとうございます！

---

1. Modulesを使いやすくするためのコンポーネントセットという位置付けなので、それ以外のElements, Collections, ViewsはSemantic UIを直接お使いください。 ↩

2. Riot v4対応版をリリースするにあたって、 v3対応版だった0.24.1は1.0.0にバージョンアップしました。破壊的な変更はなく、単なる気持ちの整理で上げただけなので、Riot v3をお使いの場合は是非とも1.x.xをお使いください。 ↩

コードへの記述

serverless-http は環境変数 BINARY_CONTENT_TYPES を見ているので下記のように書けば動くと思います。

process.env.BINARY_CONTENT_TYPES = ['application/pdf'].join(',')

const fs = require('fs')
const path = require('path')
const serverless = require('serverless-http')
const app = require('express')()
app.get('/file.pdf', (req, res, next) => {
  res.setHeader('Content-Type', 'application/pdf')
  fs.createReadStream(path.join(__dirname, 'file.pdf')).pipe(res)
})
exports.handler = serverless(app)

AWS Gateway の設定の変更も必要

AWS Gateway の設定の変更も必要ですのでこちらの記事を参考にしてください。

AWS Gateway の設定を Swagger でやっている場合トップレベルに下記を追加します

x-amazon-apigateway-binary-media-types:
  - '*/*'

serverless-http が内部でやってること

lambda はバイナリを返せません。
なので base64 エンコードして「エンコード済だよ」と AWS Gateway に伝えます。

こちらの記事が参考になります。

昨日に続いて、javascriptの投稿です。
Node.jsについても投稿したいところですが、混乱してきそうなので
学んできたことを順番に投稿していこうと思います。

条件分岐

javascriptではif構文を使用します。

条件分岐

if (条件式1) {
  // 条件式1がtrueのときの処理
} else if (条件式2) {
  // 条件式1がfalseで条件式2がtrueのときの処理
} else {
  // 条件式1も条件式2もfalseのときの処理
}

// ()が条件、{}が処理内容を記述する形です。

条件分岐の例

let num = 60;

if (num % 15 == 0) {
  console.log(num + 'は3と5の倍数です');
} else if (num % 3 == 0) {
  console.log(num + 'は3の倍数です');
} else if (num % 5 == 0) {
  console.log(num + 'は5の倍数です');
} else {
  console.log(num + 'は3の倍数でも、5の倍数でもありません');
}

配列

Rubyと同様に配列が扱えます。

配列の例

let list = ['a', 'b', 'c', 'd', 'e'];
console.log(list);

//これで　["a", "b", "c", "d", "e"]が出力されます。

配列の要素を取得

配列は0から始まります。
基本左から欲しい要素-1で取得します。

let list = ['a', 'b', 'c', 'd', 'e'];
console.log(list[2]);

// これで 2: c が出力されます。

配列の要素数を取得する

Rubyと同様にlengthメソッドが利用できます。

let list = ['a', 'b', 'c', 'd', 'e'];
console.log(list.length);
// これで length: 5 が出力されます。

配列の要素を追加する

Rubyと同様にpushメソッドが利用できます。

let list = ['a', 'b', 'c', 'd', 'e'];
list.push('f');
console.log(list);
// これで ["a", "b", "c", "d", "e","f"] が出力されます。

配列の要素を削除する

popメソッドは配列の最後の要素を取り除きます
shiftメソッドは配列の先頭の要素を取り除きます。
Rubyでは取り除く要素数を指定できますが、JavaScriptではできません。

popメソッド

let list = ['a', 'b', 'c', 'd', 'e'];
list.pop();
// これで　["a", "b", "c", "d"]が出力されます。

shiftメソッド

let list = ['a', 'b', 'c', 'd', 'e'];
list.shift();
// これで　["b", "c", "d", "e"]が出力されます。

オブジェクト

オブジェクトはデータのまとまりのことです。
配列は順番でデータを管理しますが、オブジェクトは名前と値をセットにしてデータを管理します。

オブジェクトを作成するには波カッコ{}を用います。

作成

let obj = {}; 

オブジェクトはデータを名前と値をセットで管理します。
このセットをプロパティと言います。

例

let obj = { name: 'gimei' }; //これでプロパティが設定されました。

プロパティの値を取得

値を取得

let obj = { name: 'gimei', age: 25, address: 'tokyo' };
console.log(obj.name);

//これでgimeiが出力されます。

プロパティの値を変更

オブジェクトに対してプロパティ名を続けて記載することで値を取り出すことができます。

値を取得

let obj = { name: 'gimei', age: 25, address: 'tokyo' };
obj.name = 'gimei2';
console.log(obj.name);

//これでgimei2が出力されます。

繰り返し処理

繰り返しはfor文を使います。

繰り返し処理

for (初期値; 繰り返す回数の条件; 初期値への毎回の処理) {
  // 繰り返す処理の内容
}

//もう少し詳しく書くと

for (let i = 0; i < 繰り返す回数; i = i + 1) {
  // 繰り返す処理の内容
}

繰り返し処の例

num = 1;
for (let i = 0; i < 10; i += 1) {
  console.log(num + '回目の出力')
  num +=  1
}

これで下記のような出力がされます。
1回目の出力
2回目の出力
~
10回目の出力

関数を定義

Rubyでは def ~ end で囲むことで関数を定義しましたが
JavaScriptで関数を定義するにはfunction文を使います。

関数の定義

function 関数名(引数) {
  // 処理の内容
}

関数の定義の例

function sayHello(){
  console.log('hello');
}
//関数を一つ定義

function sayName(name){
  console.log(name);
}
//関数を二つ目定義

let myName = 'gimei'; 
//変数に値を設定
sayHello();
sayName(myName);
//下二行でそれぞれ関数を出力

//hello,gimeiが出力される。

関数の戻り値を明示

Rubyでは関数における最後の戻り値が関数の戻り値として処理されましたが
JavaScriptではreturnを用いて明示する必要があります。

戻り値

function calc(num1,num2){
  return num1*num2; //ここに注目、
}

let num1 = 3;
let num2 = 4;
console.log(calc(num1,num2));

//12と出力

悪い例

function calc(num1,num2){
  num1*num2; //returnがないので値を返さない。
}

let num1 = 3;
let num2 = 4;
console.log(calc(num1,num2));

//出力されず。

無名関数を定義

JavaScriptにおける関数の定義には2種類の方法があります。
関数宣言と呼ばれ、これまで学んで来た方法で、
無名関数と呼ばれ、コードの中に書き込む関数式と呼ばれる方法です。

関数定義

// 関数宣言
function hello(){
  console.log('hello');
}

// 関数式（無名関数）
let hello = function(){　　//helloがletに定義され、functionにはなくなってます。
    console.log('hello');
}
//関数名が変数名に定義される形です。

無名関数

let hello = function(){
    console.log('hello');
}

hello();
//これでhelloが出力されます。

関数宣言と無名関数の違い

読み込まれる順番が違い
間違えると出力されません。

関数宣言は先に読み込まれるために、
このような事象が発生します。一方で、関数式であれば先に読み込まれることはありません。

関数宣言

hello();

function hello(){
    console.log('hello');
}
// helloとエラー無く出力
// 関数宣言は先に読み込まれるためです。

無名関数

hello();

let hello = function(){
    console.log('hello');
};
// hello is not a function...といった形でエラーが表示されます。
// 関数宣言がないためこうなります。

まえがき

ダイマックスちょーかっこよかった！

ポケモンシリーズの第8世代「ソード・シールド」が発売されました。
全作品プレイしている僕は当然のごとく今作も買いました。
メガシンカもZわざもないなんて…とバカにしていましたが、ダイマックスちょーかっこよかったです。
殿堂入りするまでノンストップでテンションあがりました。

さて、殿堂入りまでがチュートリアルといわれるポケモンシリーズですが、
僕もレート対戦がんばりたいと思っています。
そんななかで発生するのがこんな状況だと思います。

---

この相手にこのわざ撃って倒せるのか？？
倒せないなら交代or別のわざ撃ったほうがいいなぁ～
具体的なダメージが分かれば戦略がたてられるのに…

---

こんなとき、使いたくなるのが「ダメージ計算ツール」ですよね。

でも、僕みたいな初心者からすると、いちいちステータス打ち込んでわざ打ち込んで…って
ダメージ計算するの、対戦中にやるには億劫だし慣れてないツールだと時間も足りないんですよね。

実際の対戦画面みたいに、わざのボタン押したらダメージ計算してくれるツールがあったらいいのにな～
と思いました。

…
よし！つくろう！

目標

1. レート対戦(今作はランクバトル)初心者でも使いやすいダメージ計算ツールをゼロからつくること
2. このツールで計算した結果が視覚的にわかりやすいこと
3. エンジニアとしての知識・技術を身につけること
4. SEとして名乗るのに具体的に見せることができる成果物をつくること
5. このツールを使ってランクバトルに勝つこと

ほしい仕様

1. 攻撃側、防御側のポケモンのステータスが計算できること
2. 実際のバトルの状況に沿ってダメージ計算ができること
3. 自分の使うポケモン・パーティー、流行っているポケモンの型が登録でき、なるべく少ない手順でそれが呼び出せること
4. わざボタンを押すとダメージ計算の結果が表示されること
5. ダメージ計算の結果が相手ポケモンのHPバーで表示されること(乱数による幅を含む)

使う技術、環境

HTML,JavaScript,CSS
Python(いったんやめた)

いままでプログラミングでつくったことがあるものは、PythonでExcelファイルを操作して業務効率化を図るコンソールアプリだけだったので、GUIのあるものをつくるのはこれがほぼはじめてです。
Python大好きエンジニアなので、はじめはPythonでつくろうと思っていたのですが、

1. PythonのGUIライブラリよくわかんない(tkinterとか)
2. 最近ポートフォリオサイトをgithub.ioでつくったのでHTMLに慣れてた
3. ダメージ計算だけだったらとりあえずJavaScriptでもつくれそう

の理由でいったんHTML,JavaScriptをベースにプロトタイプをつくることにしました。
PythonをベースにHTML,CSSでGUIアプリをつくることができるEelというライブラリも試してみましたが、途中で3に気づき、複雑になってしまうことを避けたかったので、今回はHTML,JavaScriptを勉強しながらつくってみることにしました。

今回の進捗

数値を直接入力して使うタイプのダメージ計算ツールを避けるためにつくるのですが、まずはステータス計算、ダメージ計算の仕組みなども理解しながらつくる必要があると思ったので、よくあるシンプルなダメージ計算ツールを作成することにしました。

ここまでの成果物

HTMLソース
JavaScriptソース

/* 味方側 */
function hcalc(){
    let hbs =Number(document.getElementById("hbs").value);
    let hiv =Number(document.getElementById("hiv").value);
    let hev =Number(document.getElementById("hev").value);
    let hresult = Math.floor((hbs+hiv/2+hev/8+60))
    document.getElementById("hresult").innerHTML = hresult;
}

function acalc(){
    let abs =Number(document.getElementById("abs").value);
    let aiv =Number(document.getElementById("aiv").value);
    let aev =Number(document.getElementById("aev").value);
    let anc =Number(document.getElementById("anc").value);
    aresult = Math.floor((abs+aiv/2+aev/8+5)*anc)
    document.getElementById("aresult").innerHTML = aresult;
    document.getElementById("adisp").innerHTML = aresult;
}

function bcalc(){
    let bbs =Number(document.getElementById("bbs").value);
    let biv =Number(document.getElementById("biv").value);
    let bev =Number(document.getElementById("bev").value);
    let bnc =Number(document.getElementById("bnc").value);
    let bresult = Math.floor((bbs+biv/2+bev/8+5)*bnc)
    document.getElementById("bresult").innerHTML = bresult;
}

function ccalc(){
    let cbs =Number(document.getElementById("cbs").value);
    let civ =Number(document.getElementById("civ").value);
    let cev =Number(document.getElementById("cev").value);
    let cnc =Number(document.getElementById("cnc").value);
    cresult = Math.floor((cbs+civ/2+cev/8+5)*cnc)
    document.getElementById("cresult").innerHTML = cresult;
    document.getElementById("cdisp").innerHTML = cresult;
}

function dcalc(){
    let dbs =Number(document.getElementById("dbs").value);
    let div =Number(document.getElementById("div").value);
    let dev =Number(document.getElementById("dev").value);
    let dnc =Number(document.getElementById("dnc").value);
    let dresult = Math.floor((dbs+div/2+dev/8+5)*dnc)
    document.getElementById("dresult").innerHTML = dresult;
}

function scalc(){
    let sbs =Number(document.getElementById("sbs").value);
    let siv =Number(document.getElementById("siv").value);
    let sev =Number(document.getElementById("sev").value);
    let snc =Number(document.getElementById("snc").value);
    let sresult = Math.floor((sbs+siv/2+sev/8+5)*snc)
    document.getElementById("sresult").innerHTML = sresult;
}


/* 相手側 */
function ehcalc(){
    let ehbs =Number(document.getElementById("ehbs").value);
    let ehiv =Number(document.getElementById("ehiv").value);
    let ehev =Number(document.getElementById("ehev").value);
    ehresult = Math.floor((ehbs+ehiv/2+ehev/8+60))
    document.getElementById("ehresult").innerHTML = ehresult;
    document.getElementById("ehdisp").innerHTML = ehresult;
}

function eacalc(){
    let eabs =Number(document.getElementById("eabs").value);
    let eaiv =Number(document.getElementById("eaiv").value);
    let eaev =Number(document.getElementById("eaev").value);
    let eanc =Number(document.getElementById("eanc").value);
    let earesult = Math.floor((eabs+eaiv/2+eaev/8+5)*eanc)
    document.getElementById("earesult").innerHTML = earesult;
}

function ebcalc(){
    let ebbs =Number(document.getElementById("ebbs").value);
    let ebiv =Number(document.getElementById("ebiv").value);
    let ebev =Number(document.getElementById("ebev").value);
    let ebnc =Number(document.getElementById("ebnc").value);
    ebresult = Math.floor((ebbs+ebiv/2+ebev/8+5)*ebnc)
    document.getElementById("ebresult").innerHTML = ebresult;
    document.getElementById("ebdisp").innerHTML = ebresult;
}

function eccalc(){
    let ecbs =Number(document.getElementById("ecbs").value);
    let eciv =Number(document.getElementById("eciv").value);
    let ecev =Number(document.getElementById("ecev").value);
    let ecnc =Number(document.getElementById("ecnc").value);
    let ecresult = Math.floor((ecbs+eciv/2+ecev/8+5)*ecnc)
    document.getElementById("ecresult").innerHTML = ecresult;
}

function edcalc(){
    let edbs =Number(document.getElementById("edbs").value);
    let ediv =Number(document.getElementById("ediv").value);
    let edev =Number(document.getElementById("edev").value);
    let ednc =Number(document.getElementById("ednc").value);
    edresult = Math.floor((edbs+ediv/2+edev/8+5)*ednc)
    document.getElementById("edresult").innerHTML = edresult;
    document.getElementById("eddisp").innerHTML = edresult;
}

function escalc(){
    let esbs =Number(document.getElementById("esbs").value);
    let esiv =Number(document.getElementById("esiv").value);
    let esev =Number(document.getElementById("esev").value);
    let esnc =Number(document.getElementById("esnc").value);
    let esresult = Math.floor((esbs+esiv/2+esev/8+5)*esnc)
    document.getElementById("esresult").innerHTML = esresult;
}

function damagecalc(){
    let aorc =Number(document.getElementById("aorc").value);
    let power =Number(document.getElementById("power").value);
    let match =Number(document.getElementById("match").value);
    let comp =Number(document.getElementById("comp").value);
    //let ehdresult =Number(document.getElementById("ehdisp").value);
    if (aorc == 0){
        //let adresult =Number(document.getElementById("adisp").value);
        //let ebdresult =Number(document.getElementById("ebdisp").value);
        temp = Math.floor(22*power*aresult/ebresult)
        temp = Math.floor(temp/50+2)
        mintemp = Math.floor(temp*0.85)
        temp = Math.floor(temp*comp)
        mintemp = Math.floor(mintemp*comp)
        temp = Math.ceil(temp*match-0.5)
        mintemp = Math.ceil(mintemp*match-0.5)
    }
    else{
        //let cdresult =Number(document.getElementById("cdisp").value);
        //let eddresult =Number(document.getElementById("eddisp").value);
        temp = Math.floor(22*power*cresult/edresult)
        temp = Math.floor(temp/50+2)
        mintemp = Math.floor(temp*0.85)
        temp = Math.floor(temp*comp)
        mintemp = Math.floor(mintemp*comp)
        temp = Math.ceil(temp*match-0.5)
        mintemp = Math.ceil(mintemp*match-0.5)
    }
    document.getElementById("mintemp").innerHTML = mintemp;
    document.getElementById("temp").innerHTML = temp;
    document.getElementById("mincurrentHP").innerHTML = ehresult-temp;
    document.getElementById("maxcurrentHP").innerHTML = ehresult-mintemp;
    document.getElementById("minrate").innerHTML = (ehresult-temp)/ehresult*100;
    document.getElementById("maxrate").innerHTML = (ehresult-mintemp)/ehresult*100;
}

基本的な計算ツールとしての要件を満たすものはつくれたかなと思います。
具体的には、ほしい仕様の
1 は完璧に満たしている
2 はダメージ計算はできているが、どうぐや積み技によるランク上昇、天候などまだまだ足りない要素がある
3以降 はこれから
です。

反省点として

JavaScriptのコードが不必要に長いです。汚いです。

機能実装最優先でゴリ押しで書きましたが、
1. Javascript側の関数を1つにしてHTML側でonclick=の引数を指定することでステータスの計算に適用
2. JavaScript側で親関数を作って各ステータスを計算する子関数を作り、HTML側はいまのまま
のどちらかできれいなコードになる気がします。

このへんはまだオブジェクト指向な考え方が身についてないのですぐスマートな書き方にならないと思っています。
勉強します。

あと、随時コメントを書くクセをつけていかないとなと思っています。
いまは1人でつくっていますが、複数人で開発するときにコメントがないのは大問題ですよね。

課題

1. ほしい仕様2の道具などの対応
2. ほしい仕様3について、いきなりいろんなポケモンに対応するのは難しいので、いくつかのポケモンのプリセットボタンでダメージ計算のデモができるようにする
3. ダメージ計算の結果をHPバーで表示する
4. 機能はできてきたがデザインがダメ

見えている課題についてはこんなところです。

次回予告

次回はプリセットボタン、HPバーの実装について書きたいと思います。
また、今回は技術的なこと、苦労した点などについて書けていませんので、次回からはそのあたりも書いていきます。
(この記事についても追記したい)

さいごに

いっしょにつくりたい!という方絶賛募集中です！
デザイン強いよ！、WEBアプリ強いよ！、勉強したいよ！という方、コメントなどにてお待ちしております！

つぎ→　次回:プリセットボタン・HPバー編

これは2019年11月29日に開催したTypeScriptイベントYYTypeScript#11のイベントレポートです。

YYTypeScriptは一言で「TypeScripterの部室」です。発表者の話を聞く「一方向的な勉強会」とは真逆で、TypeScriptについて、雑に・ゆるく・ワイワイ話しながらTypeScripter同士の交流を深める「双方向的な座談会」の形式になります。集まった人たちで「今日話たいこと」「聞きたいこと」をいくつか挙げていき、それをテーマに雑談していきます。

今回の配信動画

YYTypeScript #11 の生配信の録画をアップしました！https://t.co/wbNbpho9NX

— suin (@suin) November 29, 2019

過去回の配信動画 → YouTubeプレイリスト「YYTypeScript」
前回 → YYTypeScript#10「TSを自分のスキルにしようと思ったキッカケは？」「publicは省略する派ですか？」「Auth0ってどうなの？」「GraphQLを使ってみての感想」「Javaを忘れてTSを書くべきか？」「テストって先にやります？ あとにやります？」 - Qiita

雑談

YouTubeの動画でTS入門者におすすめのやつを紹介する

• TS触ったことなくて、触ってみたいけど、いまいちちょっと難しそうだなと感じる人にオススメの動画。

TypeScript入門 #01：トランスパイルとTypeScript - YouTube

• if文とかfor文の説明もしてくれているくらい初心者向け。
• 明日から使ってみたいと思わせるような内容。
• 見てみてどんなことが学べた？
  • TSで書いたらこうなるけど、JSだとこなる
  • TSの良さ
    • 型が使えて、堅牢にプログラミングできる
• いっこ10分くらいでさくっとみれる
• 日本語のやつ少ないとおもってたけど、あるんだね
• ドットインストールとかにもあった
• 動画じゃないけどTS Deepdiveよんでる
  • でも初心者向けじゃないから難しい
  • 動画を見てわかってからこれよんだほうがいいかも
• まずざっくり理解するのが大事
• TSの入門者向けの動画が気になる
• 動画で勉強できるのっていいよね
• 動画で勉強したことないけど、どんなところがいいの？
  • なれてきたら本のほうがいいとおもう
  • 動画のほうがヒトから説明されているのでわかりやすい
  • 作る過程がみれるから理解しやすい
• ひらがなで学ぶJSを読んでいるけど、あんなかんじなのが動画になってるかんじ
• 英語はいっぱいある
• JSとかは膨大にある
• O'reilly Safariに結構ある
  • 結構充実している

他の言語に入るときにどうやって勉強するかききたい

• 前の言語で作ってたのと同じようなものを作ってみる
  • 同じものを他の言語でつくると、違いがわかる
  • PHPで簡単につくれそうなやつをTSでつくってみる。みたいな？
    • そうそう
• 目の前のタスクを付け焼き刃でやっていてあんまり伸びなかったことを反省していて、
  • 最初は基礎をがっと入れた後に、興味があるところに行くのが大事だと思う。
  • 本だと体系的に学べる。
  • TodoMVC
    • いろんな言語で同じToDoアプリが作られていて面白い。
    • バニラのJSもあるし。
• Scripting Languages I: Node.js, Python, PHP, Ruby - Hyperpolyglot
  • こういう言語比較サイトを見ながらやります
• ドキュメントをななめ読みして、今使っている言語との違いを把握してから
  • アプリを作りながら続きを学んでいく。
  • 掘り下げたいときはSDKとかドキュメントを見に行く。
• 新しく学んでいる言語でいままでなかった機能を試して、学習モチベーションを上げてく
  • 逆に、新しい言語で学んだことを元の知っていた言語で実現してみるなどもすると、使えるスキルの幅が広がる
• ウェブを見ても分かるっちゃ分かるけど、書籍が出ていればそれ買って、概要を全体像をざっくり把握してからやってる。
  • 洋書も買う。
  • 点ではなく、面で把握する
  • 電子書籍ってばーっとめくるとか、並べて読むとかが難しいので、あえて紙の書籍を買ってる。
  • 私も書籍派だなぁ。とりあえず入門書を1冊やって、後はググるのがメイン。
• この機能を作りたいっていうのがあるから新しい言語を使い始める
  • 作りたいもの主導
• あんまり新しい言語を勉強したことはないが、Reactを1週間で学んだときのこと
  • いきなり本を読んでも分からないので、TodoMVCをgit cloneしてきてソースコードを呼んだ。
• 模写も大事
• 紙に書き写すペーパーコーディングが有効
• 逆引きTips本を買うのもあり
• プログラミング教室で学んだ。

・・・

逆にプログラミング教室ってどうなの？

• 逆にプログラミング教室ってどうなの？が聞きいてみたい。ググるとだいたいアフィリでいいことしか書いてないし
  • あんまりいい噂は聞かないけど
  • 若かったときに「自分より詳しい人がいっぱいいるんだ！」と思って行ったら、そうでもなくてがっかりした。
• 入ってみないと分からない、博打感あるよね。
  • 初心者だと疑いようもないし。
• 選び方を知りたいです！
  • 全部無料カウンセリングしてもらって、
  • ウェブで評判をリサーチしました。
  • アフィリエイトが少ないところを選びました。
• スクール行ってようが、本人の努力次第ってところは正直ありました。
  • それはあると思う
  • 受け身で頼り切ってるひとは、どんどん辞めていくイメージでした。
• 得た知識だけで勝負するだけじゃだめで、その知識を元に、今持ってない知識を取りにいけることがエンジニアとして大事だと思う。
• うちのスクールは特殊でほとんど自習
  • 宿題を出されて、それをやってくるかんじ。
  • 1日12時間勉強しろと言われた。
  • スパルタすぎる感はあった。
    • 実務に入ったら、スクールの5倍くらい大変だった
      • いきなり5,000行のコード直したりとか……
        • それは場所によりましねw

JSに詳しくないチームで、新規プロジェクトをTSで始めるに当たってのアドバイスを下さい

自分含め、ほぼみんなJSのスキルが無い状況で、TypeScriptでやるならどんなはじめかたをしたらいいか？

• どんなチーム？
  • BackboneJSとCoffeeScriptで作られた既存のフロントエンドを改修することはできるが、バックエンドがメインなので、そこまで詳しくないというレベル
  • ES6以降もそこまで自信ない。
• いつまでも古いスタックでいくわけにいかないので、TSなど新しいスタックにシフトしていきたい。
• 社内案件なので、技術選定は小回りがきくプロジェクト。
  • JSのアプリケーションとしての難易度は引く。
• 2人くらいのチーム。

・・・

• 学習コスト？
  • 今からBackbone
  • TSはいれずにJSでいくって方針もありそうだと思いました。いきなり違う言語するより混乱しなそうかなと。
    • 社内案件なので、チャレンジするのもありかも。
• JS/TSに限らず新技術入れるとほぼほぼギスギスする気がするので、まずメンタルを鍛える
  • 2人チームなのでギスギスはしなそうですね。
  • うちのチームはギスギスしたことあります。
    • TS導入派と反対派で対立したことが。
    • なんでTSを導入しようということになったんですか？
      • コード量が膨大で、バグが少なくなく、そのバグも減らしたくて。
    • 反対派の意見は？
      • 学習コストと外注先との関係もあったので。
    • どのくらいのタイミングで？
      • あと半年でプロジェクトが終わるというタイミングだった。
    • 結局よくよく話してTSは導入できた。
• チームメンバーは今のスキルで満足していて、新しい技術を取り入れたいと思っていない可能性がある
• 経営的にも新しい技術スタックに拘らず、古いスタックでもノウハウを貯めて高速化した方が利益率も維持でき、人材採用、外注先の幅も広がる（それだけ、買い叩くことが可能になる）
  • 同感です。リファクタリングだったり再実装は工数削減の経営戦略としてありですが、漠然としたモダンな技術スタックを採用したいってメリットがなかったりします。
• TS導入で一番ハマっているところは型
  • 型はがんばらないという方針にしたら、うまくいくようになった。
  • 型を頑張らないってどういうこと？
    • anyで済ませちゃうとか
    • もっと工夫すれば型で表現できるけどしないとか
    • 普通のJS+型とか
  • 最初から100%、TSの機能を使おうとすると学習コストがすごく高くなる。
• TSで行けそうかどうかやってみる
  • TSで1週間位やってみて、やっぱりTS無理！ってなったらトラインスパイル後のJSを使ってJSに戻ることが出来る

知っている人がいたら、React Hooksを使っていて、Reduxを導入すべきかどうか

• どういう使い分けをするべきかなど
• Hooks使っているならRedux要らないという意見もネットでちょいちょい見るが。

・・・

• 分からないので、やってみます。
• HooksはReduxと重複する部分としては、Contextに状態を持たせられるようになった。
  • 昔はpropsでバケツリレーしてたので、ReduxでContext的なことをしてた。
• 依存の少ない UI の state は hooks でやってメインの State 管理は redux でやってます
• hooks での redux-persist(永続化系) と redux-devtools (デバッグ)の代替方法がわからなくて移行できてなかったりしてます
• コンポーネントステートの弱点はステートの階層がビューの構造に依存すること
• 個人的にはStoreはMobXがめっちゃ使いやすかったので、ずっとこれ使ってます
• どちらかではなく組み合わせるのも手だと思います。
  • collapse の開閉状態みたいなコンポーネントの外から参照しないような state なら内部でもって、ドメイン知識に関わるステートなら Redux みたいな

バックエンドにもっと関わるにはどうしたらいい？

仕事でフロントエンドだけに絞られているが、バックエンドにもっと関わりたい。

バックエンドにも興味があるが、どっちもやったら中途半端にならないかどうか心配でもある。

ちなみに、10年前に作ったプロダクトを5人くらいで保守している。

・・・

• あと2ヶ月でプロジェクト終わるってことですが、今のプロジェクトで関わりたいのか、次のプロジェクトで関わりたいのか？
  • 会社の方針が見えないのでなんとも言えないですが、
  • もっとアピールしていったほうがいいかも。
• BFF (backend-for-frontend)
  • microserviceを束ねてフロントエンド
• 自分で学んでいくこともありだと思う
• 転職するのもあり
• ステップアップで考える
  • 遠い先でなく一歩先を見る
• 着眼点
  • 変化の早いものでなく、変化しにくい領域を基礎をして学んでおく
  • ex.) BFFは2〜3年後には別の新しいアーキテクチャに置き換わっている可能性がある
• 設計を学ぶ
  • ソフトウェアの凝集度を意識するといろいろと見えてくるかも

参加してよかったこと(参加者の感想)

• TypeScriptに関わらず、新しい技術を導入する時の考えた方が参考になりました。
• Typescriptを皮切りに実際他に色々な話が出来たため、有意義だった

YYTypeScriptは毎週やってます

YYTypeScriptについてワイワイ話したい方は、YYTypeScriptのイベント情報をチェックしてみて下さい。

以上、YYTypeScriptのレポートでした。次回もワイワイやっていきたいと思います！ では、また来週！

備忘録として残す

共通部分

interface TestInterface {
    name: string,
    data: DataInterface[]
}

interface DataInterface {
    date: string,
    value: string
}

空配列を用意してpush()する

let test: TestInterface = {
    name: '',
    data: []
};

test.data.push({
    date: '20191129',
    value: 'いい肉の日'
});

スプレッド演算子を使用して格納する

let test: TestInterface = {} as TestInterface;

test.data = [...(test.data || []), {
    date: '20191129',
    value: 'いい肉の日'
}];

注意点

{} as interfaceで初期化を行うとundefinedが格納される。

スプレッド演算子の方が行数は少ないがスプレッド演算子に慣れていないと可読性は落ちる

Akashic Advent Calendar 2019 三日目の記事です。

ゲーム開発中、プレイ内容に応じて演出を加えたくなることがあります。この記事では、そういった演出に利用できそうな紙吹雪エンジン kamihubuki-js を Akashic Engine 上で実行する手順を解説します。

kamihubuki-js とは

kamihubuki-js は2Dの紙吹雪専用物理エンジンです。エンジン自体は描画機能を持っておらず、利用者が実装する必要があります。

動画は kamihubuki-js から転載。

kamihubuki-js の導入

kamihubuki-js は npmjs に publish されていません。GitHubからインストールします。

npm install blackspotbear/kamihubuki-js

Akashic Engine からの利用

kamihubuki-js 付属のサンプルの１つは Akashic Engine への組み込み例となっています。これを参考にします。１つ１つみていきましょう。

紙吹雪の生成

main.ts#L12-L45

main.ts#L12-L45

function createConfetti(x: number, y: number): kh.Confetti {
    const vx = 0;
    const vy = 200;
    const angle = g.game.random.get(0, 100) / 100 * Math.PI;

    const fins: kh.Fin[] = [
        {
            angle: g.game.random.get(-100, 100) / 100 * (Math.PI / 2),
            size: 30,
            armAngle: 0,
            armLength: 1
        },
        {
            angle: g.game.random.get(-100, 100) / 100 * (Math.PI / 2),
            size: 30,
            armAngle: g.game.random.get(50, 100) / 100 * Math.PI,
            armLength: 1
        }
    ];

    const co = new kh.Confetti({
        x: x, y: y,
        vx: vx, vy: vy,
        angle: angle,
        fins: fins,
        av: 0,
        M: 0.5,
        K: 0.02,
        I: 3,
        RD: 0.99
    });

    return co;
}

createConfetti() で kamihubuki-js の Confetti インスタンスを生成しています。 kamihubuki-js では１つの紙吹雪につき１つの Confetti インスタンスを用意します。

コンストラクタには初期位置(x、y)、初速度(vx, vy)、空気抵抗(K)などの値が渡されています。 しかしこれだけでは、紙吹雪が回転する様子を扱うことができません。 そこで kamihubuki-js では、質点にフィンを取り付けます。フィンが受ける風の力で質点が回転します。 fins がフィンのパラメータです。

fins パラメータによって、質点から任意の数の腕を伸ばし、その先にフィンを取り付けることができます。

図はkamihubuki-jsから転載。

フィンの取り付け方によって、紙吹雪はさまざまな運動をするようになります。

紙吹雪の描画

main.ts#L47-L97

main.ts#L47-L97

function createConfettiEntity(scene: g.Scene, co: kh.Confetti, noCollision: boolean): g.E {
    const w = 20;
    const h = 10;
    const w2 = w / 2;
    const h2 = h / 2;

    const rect = new g.FilledRect({
        scene: scene,
        width: w,
        height: h,
        x: co.x - w2,
        y: co.y - h2,
        cssColor: colors[colorIndex]
    });

    colorIndex = (colorIndex + 1) % colors.length;

    rect.update.add(() => {
        co.update(1 / g.game.fps, windX, windY, 0, 200);


        // collision detection and resolution.
        if (noCollision) {
            if (co.x < 0 || co.x > g.game.width || co.y > g.game.height) {
                rect.destroy();
            }
        } else {
            const k = 0.5;
            if (co.x < 0) {
                co.x = 0;
                co.vx = Math.abs(co.vx) * k;
            } else if (co.x > g.game.width) {
                co.x = g.game.width;
                co.vx = -Math.abs(co.vx) * k;
            }
            if (co.y < -g.game.height) {
                co.y = -g.game.height;
                co.vy = 0;
            } else if (co.y > g.game.height) {
                co.y = g.game.height;
                co.vy = -Math.abs(co.vy) * k;
            }
        }

        rect.x = co.x - w2;
        rect.y = co.y - h2;
        rect.angle = -co.angle / Math.PI * 180;
        rect.modified();
    });

    return rect;
}

createConfettiEntity() は紙吹雪を描画するインスタンスを生成する関数です。サンプルでは、紙吹雪の描画に g.FilledRect を利用しています。色の変更や画面端との衝突処理を省いて、大切なところだけ抜き出します。

    rect.update.add(() => {
        co.update(1 / g.game.fps, windX, windY, 0, 200);

        // 省略

        rect.x = co.x - w2;
        rect.y = co.y - h2;
        rect.angle = -co.angle / Math.PI * 180;
        rect.modified();
    });

rect の update イベントで co.update() を実行するようにしています。これによって、毎フレーム紙吹雪の状態を更新しています。次に紙吹雪の位置と角度を rect に反映しています。 kamihubuki-js は角度をラジアンで扱っていますので、Akashicの角度の単位である度に変換していることに注意していください。

Akashic Engine 製コンテンツに紙吹雪を導入する手順は以上となります。

応用: 光沢のある紙吹雪

サンプルに少し手を加えて、光沢のある紙吹雪にしてみましょう。紙吹雪がある角度では白く光るようにします。

白く光る処理は、ここでは簡単に rect にもう１つ光沢のための g.FilledRect インスタンスを重ねることします。

    // const rect = new g.FilledRect... の後ろに以下を追加する。
    // 光沢を表現する g.FilledRect インスタンス。
    const specular = new g.FilledRect({
        scene: scene,
        // rect と同じサイズだとわずかに rect の輪郭が滲み出るので、少し大きくする。
        width: rect.width + 2,
        height: rect.height + 2,
        x: -1,
        y: -1,
        opacity: 0,
        cssColor: "white",
        // 加算合成を指定することで、光っている感じを出す。
        compositeOperation: g.CompositeOperation.Lighter
    });
    rect.append(specular);

次に specular の透明度を変更する処理を追加します。

    // co.update( ... ) の後ろに以下を追加する。
    let t = Math.abs((co.angle / Math.PI) % 2);
    if (t > 1) t = 2 - t;
    specular.opacity = Math.pow(t, 5);
    specular.modified();

co.angle から、角度に比例して 0 ~ 1 の間で変化する値 t を求めています。これを specular.opacity に与えると、角度に応じて specular が姿を現して光沢となります。 Math.pow(t, 5) としているのは t の変化に緩急をつけるためです。

次のグラフの黒い線、青い線、赤い線は順に Math.pow の第２引数が 1, 2, 5 の時の specular.opacity の変化を表しています。第２引数が大きな値であるほど、鋭く光沢が現れることがわかります。

角度に応じて白く光るようになりました（わかりやすくするため、背景色を黒にしています）。

最後に

kamihubuki-js 付属のサンプルでは g.FilledRect で紙吹雪を描画していますが、桜の花びらや紅葉、雪のような画像を用意して物理量を調整すれば、四季の表現にも使えそうです。

このような演出には akashic-animation を用いることも１つの方法です。 akashic-animation は SpriteStudio で作成したアニメーションの再生を行うことことができます。また、ただアニメーションを再生するだけでなく、当たり判定やプログラムからアニメーションを上書きするといった機能もあります。

結果

約半年間の勉強を経て、以下のようなホームページを制作しました。（ホームページ制作に費やした時間は3か月ほどです。）空いてる時間を見つけては少しずつ制作していったのでかなり時間がかかってしまいました。（笑）

焼き鳥 Dinning たんと ｜ 野々市の焼き鳥居酒屋

[PC版サイト]

[スマホ版サイト]

サイトは、モバイルフレンドリー、SEO対策、ユーザーエージェント判定、jQueryによるアニメーションなどを考慮しました。
サイト制作には、HTML5、CSS3、Bootstrap4のみを学習した状態で取り掛かり、必要な技術や知識はその都度学びながら作業を進めていきました。

使用した言語やフレームワーク

・HTML5
・CSS3
・Bootstrap4
・jQuery

ホームページを作ろうと思ったきっかけ

半年ほど前にwebプログラミングの勉強を始め、徐々に勉強をしていく中で完全オリジナルのホームページを作りたいと思うようになったのがきっかけです。最初は、クラウドソーシングを用いて誰かのためにホームページを作ろうと考えていました。しかし、初心者である私は一つも案件を受注することができませんでした。そこでポートフォリオ作成のためにも現在自分がアルバイトをしている居酒屋のホームページを勝手に作ってみることにしました。（笑）
出来上がったホームページをオーナーに見せてみるとぜひ欲しいということで公開に至りました。

サイト公開までの制作手順

1. サイトのデザイン、レイアウト、構造を大まかに決める
2. HTML、CSSを記述し、大まかなサイトを作り上げる
3. Bootstrap4を用いて余白やレイアウトを調節する
4. レスポンシブ対応にするためにスマホ版のサイトを作成する（1~3を繰り返す）
5. XAMPPを使用し動作確認
6. 文書、写真の用意
7. seo対策
8. jQueryの実装
9. レンタルサーバーを借りる（ロリポップ）
10. ユーザーエージェント判定、CSSハックに対応する
11. ホームページ公開

1. サイトのデザイン、レイアウト、構造を大まかに決める

正直自分はデザインやレイアウトを決めるのに一番頭を抱えました。デザインの勉強などもしたことがなかったので他の居酒屋ホームページを見まくりました。（笑）たくさんのホームページの中からいいなと思ったデザインを参考にしてサイトを制作しました。

2. HTML、CSSを記述し、大まかなサイトを作り上げる

HTML、CSSを記述し、大まかにサイトを作りました。文書や写真は仮のものを使用し、１で考案したデザインを形にしていきました。

3. Bootstrap4を用いて余白やレイアウトを調節する

CSSのフレームワークとしてBootstrap4を導入しました。制作したホームページの大半はBootstrap4を用いています。フレームワークによりかなりCSSの記述が楽になるのでCSSのフレームワークを学ぶことをお勧めします。自分の思い通りにCSSが反映されない時は、Chromeのディベロッパーツールを用いることで原因を突き止めていました。

4. レスポンシブ対応にするためにスマホ版のサイトを作成する（1~3を繰り返す）

サイトをレスポンシブ対応にする方法はいくつもありますが、自分はPC用サイトとスマホ版サイトを分けて作ることにしました。そのほうが、より自分の思い通りにレイアウトを調節できると感じたからです。手順としては、PC版と同じように1~3を行っていく形です。

5. XAMPPを使用し動作確認

ここまでのプログラミング反映の確認はChromeで行っていました（ディベロッパーツールを使うことでスマホ版のサイトも確認していた）。しかし、スマホ版のサイトを実機で確認がしてみたかったためサーバーが必要になりました。レンタルサーバーは費用がかかるため、無料でサーバー構築ができるXAMPPというソフトを使用しました。少し費用はかかりますが、圧倒的に楽で簡単なのは、レンタルサーバーを借りることです。

6. 文書、写真の用意

自分は、料理の魅力やオーナーの気持ちを伝えれるように文書を作成しました。写真は一部オーナーから頂き、足りない写真は自分のスマートフォンで営業時間外に撮影し編集しました。画像編集には、無料のソフトであるGIMPを使用しました。

7. seo対策

主なseo対策として、サイトに使用するワードについて気を付けました。（スモールワードとビッグワードをうまく使い分けることが大事。）また、HTMLファイル内にメタディスクリプションを記述したり、ファビコンの設定なども行いました。

8. jQueryの実装

サイトに動きを与えるためにjQueryを実装しました。サイトに動きを与えることでよりサイトが使いやすく見やすいものになっていきます。jQueryは、「スクロール幅によってトップに戻るボタンを出現させる」「ドロワーナビを表示させる」「ヘッダーとフッターのHTMLを別ファイルで管理する」といった箇所で実装しました。

9. レンタルサーバーを借りる（ロリポップ）

サイトが完成形に近づいてきたのでレンタルサーバーを借りました。レンタルサーバーはロリポップを使用しました。実践的にホームページをWeb上にアップロードしてみることでホームページの運用を体験しました。個人的にホームページをアップロードする瞬間が一番楽しかったです。（笑）

10. ユーザーエージェント判定、CSSハックに対応する

PC版のサイトとスマホ版のサイトをアクセスした端末によってうまく振り分けれるようにユーザーエージェント判定をjQueryで制御しました。
いざ、サイトを公開しようと思いアップロードしたところブラウザごとにレイアウトが乱れてしまうことが起きていたのでCSSハックにも対応させました。

11. ホームページ公開

自分の思うようなホームページが完成したので公開に至りました。今後は、「Google Search Console」や「Google Analytics」を用いてseo対策がうまく適応されているかどうかを確認しつつ、ホームページを運用していくつもりです。

感想

ホームページを作成してみて一番重要なのは、使用する写真とSEO対策であると感じました。より画質の良く、映える写真を利用することで見栄えのいいホームページになります。またそれを検索上位に表示させるSEO対策も必須です。
レイアウトが思い通りにいかないことが多く、試行錯誤を繰り返すことはとても大変でしたが、その分達成感はものすごくありました。現在HTMLやCSSなどを勉強していてアウトプットする方法を探している方は、オリジナルのホームページやブログを作成し、公開してみるといいと思います。

今後の展望

ホームページの作成当初は、出来上がったサイトを元にクラウドソーシングや近所のお店への直営業から案件を受注することを目標をしていましたが、ホームページが出来上がっていくにつれてより自分の技術を向上させたいと思うようになっていきました。
今後は、今回作成したホームページの運用とともにJavaScriptやそのフレームワークを中心に勉強していきたいと考えています。
ホームページのSEO対策についての改善案や、おすすめするJavaScriptのフレームワークなどありましたら教えてもらえると嬉しいです。

はじめに

今回紹介するのはdom_sen.jsというライブラリです。
ポイントとしては、とても軽量で扱いやすいというところです。
dom_sen.jsは、そのままの通り、DOM操作が楽になります。
Jqueryほどではないけれど、簡単にDOM操作をしたいという方向けのライブラリとなります。

使い方

(こちらでは簡単に説明をしています。詳しく知りたい方はこちら:dom_sen.js)
まず、

<script src="https://tamralworld.com/library/dom_sen_v2.js"></script>

※ファイル名のv2はdom_sen.jsにある最新のバージョン名にしてください。2019/11/29時点ではV2です。

基本

まず、queryselectの省略をすることが可能になります。
こうなります。
document.querySelectorAll()
↓↓
qsa()

document.querySelector()
↓↓
qs()

次に、qsa()で指定した要素のHTMLを変更する場合です。
要素の中身を変更するにはこの二つの関数があります。
- qsa_html( CSSセレクタ , HTML)
- qsa_text( CSSセレクタ , テキスト)
※V2ではqsa_value( CSSセレクタ , value値)が使用可能になりました

Jqueryにしたら、この処理と同じです。
- $(CSSセレクタ).html(HTML);
- $(CSSセレクタ).text(テキスト);

また、V1ではCSSのdisplayのみを省略することができます。
ですが、v2では下のd_関数と同様のCSSを省略することが可能です。
記述例 : qsa_display( CSSセレクタ , CSS[display]の値 );

• qsa_display()
• qsa_opacity()
• qsa_width()
• qsa_height()
• qsa_color()
• qsa_background()
• qsa_border()
• qsa_border_radius()
• qsa_top()
• qsa_left()
• qsa_bottom()
• qsa_right()
• qsa_position()
• qsa_margin()
• qsa_padding()
• qsa_transition()
• qsa_transform()
• qsa_z_index()
• qsa_box_sizing()
• qsa_font_size()

また、このライブラリは、属性でも操作することができます。

属性により操作する方法

基本的に関数の構造は次のようになります。
d_○○( 属性ネーム , 属性ネームの値 , 値 )
HTML構造の例は次のようになります。

<div d_text="text1"></div>
<script>
d_html("text","text1","これはスクリプトで変更しました！");
//属性d_textがtext1の要素のHTMLを「これはスクリプトで変更しました！」に変更
</script>

d_○○はV1の時点でこの関数が存在します。
- d_html()
- d_text()
- d_value()
- d_display()
- d_opacity()
- d_width()
- d_height()
- d_color()
- d_background()
- d_border()
- d_border_radius()
- d_top()
- d_left()
- d_bottom()
- d_right()
- d_position()
- d_margin()
- d_padding()
- d_transition()
- d_transform()
- d_z_index()
- d_box_sizing()
- d_font_size()
※太字はV2で追加された関数です。
※関数はすべて置き換え用です。読み取りはできません。

最後に

V1とそれ以降のバージョンの変更点は太字で付け足しますのでよろしくお願いします。

このライブラリは比較的軽いので使いやすくWebの読み込みに影響しにくいのがポイントです。
Jqueryを使わずにDOM操作をしたいのならこのライブラリがいいでしょう。

アロー関数の書き方を学んだのでやってみました！

基本の関数

function func(text) {
    console.log(text);
}

やってみた

アロー関数で書いてみた

const test = () => {
    console.log('アロー関数書き方');
}
test();
// console.logの結果が返ってくる

やってみた

↑この書き方は省略できて…

省略形

const test2 = () => console.log('test2');
test2();

やってみた

引数がある場合

const test3 = (text) => console.log(text); 
test3('test3引数');
//test3引数　が返ってくる

やってみた

↓
これと同じ動きをする省略しない書き方

function test4(text) {
    console.log(text);
}
test4(1111) //1111

やってみた

test.ctp

<?php echo $this->Html->link('clickme', 'javascript:hoge();void(0)', ['class' => 'fuga']); ?>

// class無しの場合
<?php echo $this->Html->link('clickme', 'javascript:hoge();void(0)'); ?>


<script>
    function hoge() {
        alert('HOGE');
    }
</script>

When I experimented what was the fastest in the JavaScript loop, "for" was the fastest!

function getArray() {
  var array = []
  for(var i=1; i<=1000000; i++) {
    array.push(i)
  }
  return array
}

function test() {
  var array = getArray()
  testtest(array, forTest)

  testtest(array, forEachTest)

  testtest(array, mapTest)

  testtest(array, for2Test)

  testtest(array, whileTest)
}

function testtest(array, callback) {
  var start = new Date()
  callback(array)
  var end = new Date()
  var span_sec = (end - start)/1000
  Logger.log("処理時間は " + span_sec + " 秒でした" );
}


function forTest(array) {
  var l = array.length
  for(var i=0; i<l; i++) {
  }
}

function forEachTest(array) {
  array.forEach(function(i, e) {
  })
}

function mapTest(array) {
  array.map(function(e, i) {
  })
}

function for2Test(array) {
  for(var i in array) {
  }
}

function whileTest(array) {
  var i = array.length
  while(i > 0 ) {
    i--
  }
}

result

[19-11-29 15:20:48:459 JST] forTestの処理時間は 1.197 秒でした
[19-11-29 15:20:49:823 JST] forEachTestの処理時間は 1.364 秒でした
[19-11-29 15:20:51:461 JST] mapTestの処理時間は 1.637 秒でした
[19-11-29 15:20:52:912 JST] for2Testの処理時間は 1.451 秒でした
[19-11-29 15:20:54:404 JST] whileTestの処理時間は 1.491 秒でした

04. 元素記号

"Hi He Lied Because Boron Could Not Oxidize Fluorine. New Nations Might Also Sign Peace Security Clause. Arthur King Can."という文を単語に分解し，1, 5, 6, 7, 8, 9, 15, 16, 19番目の単語は先頭の1文字，それ以外の単語は先頭に2文字を取り出し，取り出した文字列から単語の位置（先頭から何番目の単語か）への連想配列（辞書型もしくはマップ型）を作成せよ．

Go

package main

import (
    "fmt"
    "strings"
)

func main() {
    var src = "Hi He Lied Because Boron Could Not Oxidize Fluorine. New Nations Might Also Sign Peace Security Clause. Arthur King Can.";
    var dw = map[int]bool{1: true, 5: true, 6: true, 7: true, 8: true, 9: true, 15: true, 16: true, 19: true}; //  1文字の単語番号
    var res map[string]int = map[string]int{};

    //  単語に分割
    words := strings.Split(src, " ")
    for i, word := range words {
        idx := i + 1

        //  配列の exists的関数がなさそうなので Map を使用...
        if dw[idx] {
            //  1文字を map へ保存
            res[word[0:1]] = idx
        } else {
            //  2文字を map へ保存
            res[word[0:2]] = idx
        }
    }

    //  結果を表示
    fmt.Println(res)
}

python

# -*- coding: utf-8 -*-
src = "Hi He Lied Because Boron Could Not Oxidize Fluorine. New Nations Might Also Sign Peace Security Clause. Arthur King Can."
dw = [1, 5, 6, 7, 8, 9, 15, 16, 19]  # 1文字の単語番号
res = {}

#   単語に分割
words = src.split(" ")
for i in range(len(words)):
    #   単語番号
    idx = i + 1

    #   1文字の単語番号の場合
    if idx in dw:
        #   1文字を map へ保存
        res[words[i][0:1]] = idx
    else:
        #   2文字を map へ保存
        res[words[i][0:2]] = idx

#   結果を表示
print(res)

Javascript

var src = "Hi He Lied Because Boron Could Not Oxidize Fluorine. New Nations Might Also Sign Peace Security Clause. Arthur King Can."
var dw = [1, 5, 6, 7, 8, 9, 15, 16, 19];    //  1文字の単語番号
var res = new Map();

//  単語を空白で分割し単語数処理
var words = src.split(' ');
for (var i = 0; i < words.length; i++) {
    //  単語番号
    var idx = i+1;

    //  1文字の単語指定の場合 (ES2017)
    if (dw.includes(i+1)) {
        //  1文字を map へ保存
        res.set(words[i].substring(0,1),idx);
    }
    else {
        //  2文字を map へ保存
        res.set(words[i].substring(0,2),idx);
    }
}

//  結果表示
console.log(res);

まとめ

if文で or を書くのがイマイチかと思い 1文字の単語番号をまとめてみた。
Goの配列などの存在チェックがイマイチ？。

次の「05. n-gram」 は問題のの意味がよくわからない、まずは問題の理解から初めて見る。

他の人のを確認したら Map の内容が [文字 => 単語番号] と逆だったため修正しました。

その他

もともと、C言語やPHPが長いので Goの行末の ";" 癖が治らない。ｗ

トップ

はじめに

業務上活用しているLaravel　Mixにてコンパイル関連で色々と模索していおり、
今更ですがLaravel　Mixについて整理したことを備忘録としてまとめました。

まず、Laravel　Mix公式を見てみると

以下公式サイトhttps://readouble.com/laravel/5.5/ja/mix.html より引用

Laravel Mixは多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をWebpackでスラスラと定義できるAPIを提供しています。シンプルなメソッドチェーンを使用しているため、アセットパイプラインを流暢に定義できます。例を見てください。

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Webpackやアセットのコンパイルを始めようとして、混乱と圧倒を感じているならLaravel Mixを気に入ってもらえるでしょう。しかし、アプリケーションの開発時に必要だというわけではありません。どんなアセットパイプラインツールを使用してもかまいませんし、使わなくても良いのです。

なるほど、わからん。カタカナ語が使いたい年頃の人が書いた文書のようにになっていますが、ざっくり言うと「webpackというモジュールバンドラー（モジュールの束）を簡単に使えるようにしたラッパー」ということだと後になって理解しました。

以下でもうちょっとだけ詳しく見ていきます。

概要

①Laravel Mixとは、フロントエンドのアセット(JS,SASS等)をコンパイル、バンドルしてくれるツール
②webpack設定ファイルをより分かりやすく簡単に書けるように設定ファイルをラップしている
③lessやsass、babelなどよく使われるローダーが最初から用意されていて、デフォルトで利用することができる
⑤Laravelを使っていないアプリでも、コンパイル・バインディングのツールとして利用できる

使い方

Laravelをインストールした段階で、package.jsonとwebpack.mix.jsが用意されています。

・package.json
⇒Laravel Mix本体やその他必要なパッケージが記述済み。
package.jsonのscriptsにはwebpackを実行するためのスクリプトも記述されている。

・webpack.mix.js
⇒webpack設定ファイル（webpack.config.js）のラッパー。
ここにコンパイル対象ファイルやバンドル対象ファイルなどの設定を記述していく。

※LaravelではないアプリでLaravel Mixを使う場合でも、
package.jsonとwebpack.mix.jsの2ファイルを用意するだけであとは同じです。
Laravel Mix公式サイトのStand-Alone Projectを参考に。↓
https://laravel-mix.com/docs/5.0/installation

設定ファイルの記述

webpack.mix.jsに、設定を記述する。

sassファイルをコンパイルしたい場合

mix.sass('resources/assets/sass/app.scss', 'public/css');

cssファイルをバンドルしたい場合

mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

jsをコンパイルしたい場合

mix.js('resources/assets/js/app.js', 'public/js');

jsファイルをバンドルしたい場合

mix.scripts([
    'public/js/admin.js',
    'public/js/dashboard.js'
], 'public/js/all.js');

他にもいろいろ設定できることはある。

Laravel Mixの実行
npm run dev を実行すると、package.jsonに書いてあるスクリプトが実行され、
設定ファイルに記述したコンパイル、バンドルが実行される。

npm run production の場合は圧縮されたファイルが出力される。

知っておくと良い機能抜粋

もう少し具体的な機能について、知っておいたほうがいい主な機能を抜粋。

jsのコンパイル
上記の通り、jsファイルをコンパイルするには

mix.js('resources/assets/js/app.js', 'public/js');
と書く。

この処理では
・ES2015記法
・モジュール
・.vueファイルのコンパイル
・開発環境向けに圧縮
のコンパイルが実行される。

①babel実行
jsファイルをバンドルする設定として、mix.scripts()を紹介したが、
この代わりにmix.babel()を使うことができる。

これをすると、バンドルされたファイルはES5記法に変換された状態になる。

IEはES5までしか対応していないため、もしIEでも動作させる必要があるシステムの場合は
このmix.babel()機能を使ってES5記法に変換するほうが良い。

ES5, CoffeeScript, ES6の記法の違い

②キャッシュバスティング

mix.js('resources/assets/js/app.js', 'public/js')
   .version();

このように記述すると、
ファイル名の末尾に一意のハッシュ値が付与される。

これによって、コンパイルのたびにファイル名が変更されるため、CSSやJSなどがブラウザキャッシュに残って変更が反映されないことを防止できる。
このファイルを読み込むbladeファイル側では、

のようにmix()関数を使うことで、ハッシュ値のついたファイル名でも取得することができる。

おわりに

Laravel Mixにはオプションの指定で挙動を簡単に変えられるという特徴もあります。
そのあたりのカスタマイズについてのメモがたまってきたのでまた、整理していこうと思います。

とりあえず、CSS側のコンパイルが極端に遅い方は
"processCssUrls: false"を試してみましょう。
（画像PASSの書き換えオプションをOFFにする。デフォルトはON。）

例）

mix.sass('src/app.scss', 'dist/')
   .options({
      processCssUrls: false
   });

詳細はまた後ほどほどまとめます！

参考
https://readouble.com/laravel/5.5/ja/mix.html
https://laravel-mix.com/docs/5.0/quick-webpack-configuration

勤務時間を計算したい場合ってあると思います。
勤務時間計算用プログラムを過去に作ったので、Qiitaにも掲載したいと思います。

退勤、出勤時間を数値にして、それ同士を計算させる

一旦両者を数値の型にして計算します。
数値の型にする計算式は

ミリ秒/3600000 = 時間
(ミリ秒-h*3600000)/6000 = 分

これを出勤と退勤で計算して、その差を取ります。

退勤と、出勤時間が合計何時間、何分か計算する

1. 退勤と出勤の差を計算する
2. 差はミリ秒で取れてくるので、時、分へ変換する
3. 時、分の和を計算する

var from = "08:00"
var to = "24:00"

var Y = new Date().getFullYear()
var M = new Date().getMonth()+1
var D = new Date().getDate()

var ymd = Y+"/"+M+"/"+D+"/"

var fromTime = new Date(ymd+" "+from).getTime()
var toTime = new Date(ymd+' '+to).getTime()
var Ms = toTime-fromTime

var h = ''
var m = ''

h = Ms/3600000
m = (Ms-h*3600000)/6000
var time = h+m;
console.log(time)

これで結果は16となります。
フォームとかで利用すると、計算できます。
ただ、24時間までしか計算ができないという制限があります。

働き方改革だし、24時間計算できれば大丈夫だよね…。

@shiracamus さんから

let from_time = "08:00"
let to_time = "24:00"

let [from_hour, from_minute] = from_time.split(':')
let [to_hour, to_minute] = to_time.split(':')

console.log(to_hour - from_hour + (to_minute - from_minute) / 60.0)

単純に計算すれば良いのではとご指摘を頂きました。
全くその通りでした。ありがとうございます！

A-Frameをつかって物理演算ができるようにしてみます。
A-Frame側の設定で、ピンの物理的形状とレンダリングされる形状の中心ずれを調整できるか検証します。

例１）複合シェイプのcylinderを利用してoffsetで位置を調整する

設定しました。
demo
位置調整はできました。
ボールを転がしてみましょう。
demo
物理的な形状にboxを指定していた時よりも、衝突時に下端の縁でまわるようになり、よりピンらしくなりました。
が、倒れても起き上がってきます。
しぶといですね。

例２）エンティティを入れ子にしてローカル座標で位置を調整する

設定しました。
demo
こちらの方法でも位置調整はできました。
ボールを転がしてみましょう。
demo
こちらも、衝突時に下端の縁でまわるようになり、よりピンらしくなりました。
そして倒れたら起き上がってこなくなりました！

まとめ

ピンの物理的形状とレンダリングされる形状の中心を揃える為に、２つの手法を試しました。
どちらの方法でも中心を揃える事ができましたが、エンティティを入れ子にする方法だとピンが倒れたままになりました。

普通のシェイプのcylinderと複合シェイプのcylinderで何かが違うようですが、今のところ違いの理由の見当はついていません。
ボーリングっぽい動きをするピンを目指すには、エンティティを入れ子にする方法が良さそうです。

今回はじめて複合シェイプを使いましたが、もっと色々できそうなので、どういったものかもう少し見ていきたいと思います。

はじめに

Reactの公式ドキュメントの条件付きレンダー(Conditional Rendering)にトライ。

条件付きレンダー-React
https://ja.reactjs.org/docs/conditional-rendering.html

開発環境

• Ubuntu18.04
• yarn 1.17.3
• create-react-app 3.1.2

create-react-appで準備

$ create-react-app try-conditional-rendering
$ cd try-conditional-rendering

で、./public/index.htmlと./src/App.jsを編集。

./public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>Try Conditional Rendering</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

./src/App.js

import React from 'react';
import './App.css';

const App = () => {

}

export default App;

早速条件付きレンダーをやってみる。

まずは丸パクリにならないよう公式ドキュメントのマネをしてGreetInTheMorningとGreetInTheAfternoon、そしてGreetInTheEveningというコンポーネントを作る。

./src/App.js

const GreetInTheMorning = () => {
  return <h1>おはようございます。</h1>
}

const GreetInTheAfternoon = () => {
  return <h1>こんにちは。</h1>
}

const GreetInTheEvening = () => {
  return <h1>こんばんは。</h1>
}

現在時刻によって上3つのコンポーネントのいずれかを表示したいとする。
本来ならちゃんとDateオブジェクトを使って...ってやるんだけど、今回は公式に沿ってGreetingコンポーネントを作ってAppコンポーネントからGreetingコンポーネントにnowHourという引数を渡してズルをする。

./src/App.js

const Greeting = (props) => {
  // 5時 ~ 12時までは"おはようございます。"を表示する
  if(5 <= props.nowHour && props.nowHour < 12) {
    return <GreetInTheMorning />
  }
  // 12時 ~ 18時までは"こんにちは。"を表示する
  else if(12 <= props.nowHour && props.nowHour < 18) {
    return <GreetInTheAfternoon />
  }
  // 18時 ~ 5時までは"こんばんは。"を表示する
  else if((18 <= props.nowHour && props.nowHour < 24)  || (0 <= props.nowHour && props.nowHour < 5) ) {
    return <GreetInTheEvening />
  }
  else {
    return <h1>Error.</h1>
  }
} 

./src/App.jsの完成形が下のコード。

./public/App.js

import React from 'react';
import './App.css';

const GreetInTheMorning = () => {
  return <h1>おはようございます。</h1>
}

const GreetInTheAfternoon = () => {
  return <h1>こんにちは。</h1>
}

const GreetInTheEvening = () => {
  return <h1>こんばんは。</h1>
}

const Greeting = (props) => {
  // 5時 ~ 12時までは"おはようございます。"を表示する
  if(5 <= props.nowHour && props.nowHour < 12) {
    return <GreetInTheMorning />
  }
  // 12時 ~ 18時までは"こんにちは。"を表示する
  else if(12 <= props.nowHour && props.nowHour < 18) {
    return <GreetInTheAfternoon />
  }
  // 18時 ~ 5時までは"こんばんは。"を表示する
  else if((18 <= props.nowHour && props.nowHour < 24)  || (0 <= props.nowHour && props.nowHour < 5) ) {
    return <GreetInTheEvening />
  }
  else {
    return <h1>Error.</h1>
  }
} 

// nowHour={}の中の数字を変えれば画面に表示される挨拶が変わる。
const App = () => {
  return <Greeting nowHour={13} />;
}

export default App;

おわりに

続きはまた書きます。