
Roblox でプレイヤーが触ると別の場所にテレポートするブロックを作ってみましょう。

## テレポートするブロックを作る

まず、Workspace の中に`Teleport`というフォルダを作成して、必要なもの一式を追加します。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-teleport-block4.png)

追加するものは次の通りです。

- `TeleportScript` - Lua スクリプト
- `Teleport1A` - テレポートブロック A(青色)
- `Teleport1B` - テレポートブロック B(ピンク色)

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-teleport-block5.png)

## TeleportScript の骨子を作る

TeleportScript の大まかな処理を書きましょう。

基本的にはそれぞれのブロックの`Touched`にイベントハンドラを設定して、あとで中の処理を書いていきます。

```lua
local Teleport1A = script.Parent.Teleport1A
local Teleport1B = script.Parent.Teleport1B

-- A -> B へテレポート
local function TeleportA2B(part)
end

-- B -> A へテレポート
local function TeleportB2A(part)
end

Teleport1A.Touched:Connect(TeleportA2B)
Teleport1B.Touched:Connect(TeleportB2A)
```

## テレポート処理を書く

まず「A->B」のテレポート処理を書きます。

> 「B->A」は基本的に「A->B」と同じなので割愛します。

```lua
...

-- A -> B へテレポート
local function TeleportA2B(part)
  local humanoid = part.Parent:FindFirstChild("HumanoidRootPart")
  if humanoid then
    -- プレイヤーの位置をテレポートブロックBにする
    humanoid.CFrame = Teleport1B.CFrame
  end
end

...
```

まず、`Touch`したものがプレイヤー(Humanoid)かどうか判定します。プレイヤーの場合は、プレイヤーをテレポートブロック B にテレポートさせます。

プレイヤーを移動するには`CFrame`というものを使います。`CFrame`とは Roblox ゲーム上の 3D オブジェクトの中心の座標を表すものです。

CFrame については、まだよく理解できていないので詳しい説明はできませんが、基本的には(x, y, z)軸の数値を設定することで、指定した 3D オブジェクトの中心の位置を制御することができます。

では、早速テレポートブロック A に触れてみましょう。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-teleport-block3.gif)

(え！？)

テレポートブロックに埋まってしまいました。全く動けません。

これは、テレポート先がテレポートブロック B の中心になってしまったためです。
ですので、テレポート先を少し上の方に調整する必要があります。

```lua
...

-- A -> B へテレポート
local function TeleportA2B(part)
  local humanoid = part.Parent:FindFirstChild("HumanoidRootPart")
  if humanoid then
    -- プレイヤーの位置をテレポートブロックBから高さ5上ににする
    humanoid.CFrame = Teleport1B.CFrame + Vector3.new(0, 5, 0)
  end
end

...
```

`Vector3`は(x, y, z)軸を設定するクラスです。
左から順に x 軸(横)、y 軸(高さ)、z 軸(奥行き)を設定します。今回の例だと`Vector3.new(0, 5, 0)`なので、高さだけ 5 に設定しています。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-teleport-block2.gif)

今度はうまくいきました。

> ちなみに、`Vector3.new(0, 50, 0)`に設定すると、テレポート先を上空に設定することができます。
>
> ![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-teleport-block1.gif)

## まとめ

Roblox でテレポートするブロックの作り方でした。

見慣れない`CFrame`というものが出てきました。大事な概念のようなのでマスターしておきたいです。


Robloxでテレポートするブロックを作る


（まぁ。たまには技術と関係ないこと書いてもいいかな。）

個人のライフログみたいなものです。
プログラマになる前は家具職人だったので、家にある大きめの家具は自分で作ったりしています。

今日は IKEA で買ったテーブルのリメイクです。
天板がかなり古くなってきたので買い換えようかと思ったのですが、足の部分はまだ使えそうなので、天板だけ張り替えることにしました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table1.jpg)

天板は、[マルトクショップ](https://shop.woodworks-marutoku.com/)のゴムの集積材(厚さ 30mm)を使います。マルトクショップは、少し前に作業机を作成した時に初めて利用したのですが、いい仕上がりの仕事する木材屋だったのでリピート買いしました。

ではまず、天板を取り外します。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table2.jpg)

取り外してみました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table3.jpg)

元々天板を支えていた溝がそのまま新しい天板を支える梁として使えそうだったので、近所の DIY ショップでカットした木材をはめ込みます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table4.jpg)

おっと。ここで痛恨のミス。
元の天板は折りたたみ式だったので、天板を支えていた梁の部分が平行ではありませんでした。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table5.jpg)

> そんな父の苦労も知らず、YouTube ばかり見ている娘よ、宿題さっさと済ませなさい。。。。

仕方ないので、片方の溝だけ使うことにします。
当初の計画とは違いますが、こんな感じで梁を取り付けました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table6.jpg)

反対側はこんな感じでビス止めしています。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table7.jpg)

よく見ると天板と接触する面で平らじゃないので、カンナを使って平らにします。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table8.jpg)

ここまでできたところで天板の裏面と、足の部分をヤスリで仕上げて、足の部分はほぼ完成です。

天板に足を乗せて、天板と足を繋ぐ場所を決めます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table9.jpg)

天板とのジョイントには「鬼目ナット」を使います。
(たぶん一度ジョイントした天板と足を離すことはないと思いますが。。。)

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table10.jpg)

天板の裏側に鬼目ナット用の下穴を開けます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table11.jpg)

下穴の準備だできたら、ボルトで天板と足をジョイントします。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table12.jpg)

これで、テーブルの天板を張り替えできました。
ここから仕上げに入ります。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table13.jpg)

仕上げの前に、天板の角や上面を**丁寧に**やすりがけします。
続いて塗装ですが、いつも「尾山製材株式会社 木工用みつろうクリーム 200 ｇ」を使います。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table14.jpg)

以前はオイルステインを使っていたのですが、値段が高いのと、準備片付けが面倒なので、最近はこのクリームがお気に入りです。

このクリームを布にとって木に塗り込みながら、仕上げの不十分な部分をヤスリで仕上げてまた塗る。これを繰り返すと完成です。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table15.jpg)

重量感があってしっかりした仕上がりになりました。
(今回の木材は若干暗い色の木材が多かったかな。)

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/table16.jpg)

ゴムの集積材は価格が割安ですが、重量感があって作業机など割とハードに使う部位にいいと思います。


IKEAのテーブルの天板を張り替える


Roblox で罠を作る方法です。
「罠」とは Roblox ゲームの中でよく出てくるもので、これにプレイヤーが触れるとプレイヤーは死にます。

今回の罠は「レーザー」にします。

通常のレーザーの作り方と、点滅するレーザーの作り方を紹介します。

## レーザーを作成する

通常の罠の作り方は至ってシンプルです。Roblox の公式ページにチュートリアルがあるので、その通りやってみれば作れると思います。

- [Roblox: Coding Traps and Pickups](https://developer.roblox.com/articles/Creating-Traps-and-Pickups)

コードが次のようなものになります。`Laser`という Part を作成して、その中に Script を作成してください。

```lua
local Laser = script.Parent

local function onPartTouch(otherPart)
  local touchObject = otherPart.Parent
  local humanoid = touchObject:FindFirstChildWhichIsA("Humanoid")
  if humanoid then
    humanoid.Health = 0
  end
end

Laser.Touched:Connect(onPartTouch)
```

`Laser.Touched`のイベントハンドラの中で、触れたものがプレイヤー(`Humanoid`)である場合、`Health`を 0 にします。
これが基本的な罠の作成方法です。

## レーザーを点滅させる

ではレーザーを点滅させてみましょう。

レーザーを点滅させるには`while`ループを作成して、この中で`Laser.Transparency`を使い、レーザーを見えたり隠れたりします。

```lua
local Laser = script.Parent

...

Laser.Touched:Connect(onPartTouch)

while true do
  Laser.Transparency = 1
  wait(3)
  Laser.Transparency = 0
  wait(3)
end
```

> `Laser.Touched`を`while`ループの後ろに移動しないでください。`while`ループは無限ループとなるため、ループの後ろのコードは実行されません。

今回は 3 秒間隔で点滅するようにしました。
ただし、今のままではレーザーが消灯している場合も作動してしまい、プレヤーが触れると死んでしまいます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-flashing-raser1.gif)

うーん。なんでだろう。。。

## レーザーが点灯している時だけ罠が作動するようにする

レーザーが点灯している時だけ罠が作動するようにするためには、まず消灯時にレーザーとプレーヤーが衝突しないようにする必要があります。

`Laser.CanCollide`を使って、レーザーが消灯時にはプレイヤーが触れても通り抜けるようにする必要があります。`CanCollide = false`にした場合、プレイヤーが触れても通り抜けるようになります。

```lua
local Laser = script.Parent

...

Laser.Touched:Connect(onPartTouch)

while true do
  Laser.Transparency = 1
  Laser.CanCollide = false
  wait(3)
  Laser.Transparency = 0
  Laser.CanCollide = true
  wait(3)
end
```

`CanCollide = false`にした場合、Part の位置を固定しないと、ゲームの世界から落下して見えなくなってしまいます。
プロパティウィンドウから Part の`Anchored`のチェックを付けておいてください。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-flashing-raser3.png)

しかし、このままではまだレーザーが消灯時にも罠が作動しています。
これは`Laser.Touched`イベントが`Laser.CanCollide = false`の場合でも発火してしまうためです。

これを避けるためには、イベントハンドラの中でレーザーの`CanCollide`の状態を判定して、点灯中の場合のみ作動させる必要があります。
これでレーザーは配置された場所から動かなくなります。

```lua
local Laser = script.Parent

local function onPartTouch(otherPart)
  -- 点灯中のみ罠が作動するようにする
  if Laser.CanCollide == true then
    local touchObject = otherPart.Parent
    local humanoid = touchObject:FindFirstChildWhichIsA("Humanoid")
    if humanoid then
      humanoid.Health = 0
    end
  end
end

Laser.Touched:Connect(onPartTouch)

...
```

これで罠が完成しました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-flashing-raser2.gif)

## まとめ

通常の罠の作り方と、点滅する罠の作り方でした。
少しカスタマイズしようとすると途端にわからなくなりますが、Roblox の公式サイトの API リファレンスはかなり親切に書いてあるので、こまったら API リファレンス読むようにします。

- [Roblox API REFERENCE: BasePart.CanCollide](https://developer.roblox.com/api-reference/property/BasePart/CanCollide)


Robloxで点滅する罠を作る


TypeScript の小ネタ。

TypeScript で再帰的なデータ構造のデータに対して型を適用する方法です。
例えば、クローリングしてきた Web サイトの情報など。JSON の key があって、値が`string | number | boolean | Array | Object`になる可能性がある面倒なやつです。

普通に考えると、`[key: string]`の Index signature と Union Type を持つ型を使えばいいかと思うのですが、肝心の Union の型定義が再帰構造なので表現できません。

```ts
interface WebSiteData {
  // Unionの部分が再帰的なので表現できない！！
  [key: string]: string | number | boolean | Array<
    string | number | boolean | Array<
      string| number | boolean | Array<
        ...え、ちょっと待って
      >
    >
  >
}
```

まずこの問題を解決するには、JSON の値が取る型定義を最初にイメージします。名前を`JSONValueType`として、後で定義する Array や Object はこの型構造を使うことにします。

`JSONValueType`は値が`string | number | boolean | Array | Object`になる可能性があるので、型定義はだいたい次のようなものになると考えます。

```ts
// Array<JSONValueType> | Object<JSONValueType>はあとで置き換えます。
type JSONValueType =
  | string
  | number
  | boolean
  | Array<JSONValueType>
  | Object<JSONValueType>;
```

次に`Array<JSONValueType>`の型定義をします。名前は`JSONValueTypeArray`にしましょう。

定義するには`JSONValueType`型の Array を継承した interface を作成します(ちょっとトリッキーです)。定義した後は、`JSONValueType`の型定義も置き換えます。

```ts
type JSONValueType =
  | string
  | number
  | boolean
  | JSONValueTypeArray
  | Object<JSONValueType>;

interface JSONValueTypeArray extends Array<JSONValueType> {}
```

次に`Object<JSONValueType>`の型定義をします。名前は`JSONValueTypeObject`にしましょう。

こちらも定義するには`[key: string]`の Index signature を持って`JSONValueType`の値を持つ interface を定義します。
定義した後は、`JSONValueType`の型定義も置き換えます。

```ts
type JSONValueType =
  | string
  | number
  | boolean
  | JSONValueTypeArray
  | JSONValueTypeObject;

...

interface JSONValueTypeObject {
  [key: string] : JSONValueType;
}
```

これで不定形の JSON データ構造を`JSONValueTypeObject`を使って型安全に定義することができました。

```ts
const data: JSONValueTypeObject = {
  name: "mitsuruog",
  age: 20,
  alive: true,
  profile: [
    {
      profileName: "aaa",
      profileNumber: 1,
      profileBool: true,
      profileArray: [],
      profileObject: {},
    },
  ],
  address: {
    addressString: "aaa",
    addressNumber: 1,
    addressBool: true,
    addressArray: [],
    addressObject: {},
  },
};
```

参考リンク

- [recursive type definitions · Issue \#3496 · Microsoft/TypeScript](https://github.com/Microsoft/TypeScript/issues/3496)

> もう少し簡単に定義できるようにしたかったみたいですが、実現されなかったみたいですね。。。


TypeScriptで再帰的なデータ構造を型安心にする


今日は唐突に[Roblox](https://www.roblox.com)でのゲームプログラミングの話です。

## Roblox!?

> 子供たちがレゴブロックのような感覚で自作のゲームを作り、公開できるプラットフォームが「Roblox（ロブロックス）」だ。
>
> - [5000 万人の子供が遊ぶゲーム開発プラットフォーム「Roblox」](https://forbesjapan.com/articles/detail/20288)

娘と週末に Roblox で遊ぶことがあり、遊んでいる時にふっと「自分でゲームを作って公開できる」と言ったことがありました。
その時、あまり娘は理解していなかったようだったので、ちょっとどういうことか理解させて驚かせてやろうかと思い、試しに 1 つ作って娘に見せてみたら、目玉が飛び出るくらい興奮して、早速自分も作りたいという話になりました。
(たぶん、お父さんですら作れるなら、自分にもできると思っている。。。)

自分もそこまでくわしくないので、それ以来こっそり教えられるように Roblox でのプログラミングについて調べているという次第です。

ちなみに Roblox では、[Lua](https://www.lua.org/start.html)言語と、[Roblox Studio](https://www.roblox.com/create)を使って、Roblox が提供する API を使いながらゲームを作成します。

今回はリーダーボードを作成方法についての紹介です。

## リーダーボードとは

リーダーボード(LeaderBoard)とは、ゲームの中でプレイヤーの名前や得点などを表示するものです。
画面の一番見やすい場所に置いてあり、ロブロックスでは画面の右上に表示されています。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-leaderboard1.png)

## リーダーボードの作成

ではリーダーボードを作成します。
まず最初に Roblox Studio で新しいプロジェクトを作成してきます。

### リーダーボードのセットアップ

まず、右側の Explorer の中の**ServerScriptService**の中に新しい Script を作成します。名前は`PlayerSetup`としておきます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-leaderboard2.png)

その Script の中に`onPlayerJoin`という関数を作成します。この関数は`player`というパラメータを受け取ります。

```lua
local function onPlayerJoin(player)

end
```

次に`onPlayerJoin`の中に`leaderStats`という名前の変数を作成して、`Folder`のインスタンスを設定しておきます。このフォルダーの中に全てのプレイヤーの情報が保存されます。

```lua
local function onPlayerJoin(player)
  local leaderStats = Instance.new("Folder")
end
```

先ほどの変数`leaderStats`に`Name`を設定します。`Name`は「**leaderstats**」としてください。
間違えるとリーダーボードは作成されません。そして`leaderStats`の`Parent`に`player`を設定します。

```lua
local function onPlayerJoin(player)
  local leaderStats = Instance.new("Folder")
  leaderStats.Name = "leaderstats"
  leaderStats.Parent = player
end
```

最後に`onPlayerJoin`をこのゲームと接続します。これで誰かがこのゲームに参加してきた時に、`onPlayerJoin`が実行されます。

```lua
local function onPlayerJoin(player)
  local leaderStats = Instance.new("Folder")
  leaderStats.Name = "leaderstats"
  leaderStats.Parent = player
end

game.Players.PlayerAdded:Connect(onPlayerJoin)
```

これでリーダーボードのセットアップは完了です。

### リーダーボードにプレイヤーの情報を表示する

次に、リーダーボードにプレイヤーが持っているお金(Gold)を表示してみます。

このお金を記憶するために`IntValue`という数値を記録するための変数を使います。
`onPlayerJoin`関数の中で、`gold`という名前の変数を作成し、`IntValue`のインスタンスを設定しておきます。

```lua
local function onPlayerJoin(player)
  local leaderStats = Instance.new("Folder")
  leaderStats.Name = "leaderstats"
  leaderStats.Parent = player

  local gold = Instance.new("IntValue")
end
```

リーダーボードに表示する名前を`Name`に設定します。今回の例では、「**Gold**」と表示されるはずです。

```lua
local function onPlayerJoin(player)
  local leaderStats = Instance.new("Folder")
  leaderStats.Name = "leaderstats"
  leaderStats.Parent = player

  local gold = Instance.new("IntValue")
  gold.Name = "Gold"
end
```

次に最初に持っているお金を`Value`に設定します。最初は「0Gold」にしておきましょう。

```lua
local function onPlayerJoin(player)
  local leaderStats = Instance.new("Folder")
  leaderStats.Name = "leaderstats"
  leaderStats.Parent = player

  local gold = Instance.new("IntValue")
  gold.Name = "Gold"
  gold.Value = 0
end
```

最後に gold の`Parent`を`leaderStats`に設定します。

```lua
local function onPlayerJoin(player)
  local leaderStats = Instance.new("Folder")
  leaderStats.Name = "leaderstats"
  leaderStats.Parent = player

  local gold = Instance.new("IntValue")
  gold.Name = "Gold"
  gold.Value = 0
  gold.Parent = leaderStats
end
```

これで画面の右上にリーダーボードが表示されるようになりました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2019/roblox-leaderboard3.png)

## まとめ

ほぼ、ここの内容の翻訳です。

- [In-Game Leaderboards](https://developer.roblox.com/articles/Leaderboards)

Roblox のプログラミング情報は英語でもほとんど手に入らないので辛いですね。。。

まだ、わからないことが多いですが、娘に教えられるよう頑張って情報集めてみます。


Robloxのリーダーボードを作成する


TypeScript の小ネタです。

TypeScript では次のように string を Enum として定義することができるのですが、string を Enum に代入するときにエラーとなってしまうため、今まで少し使いにくいと思っていました。

今日はその認識を改めます。

```ts
enum Direction {
  North = "North",
  South = "South",
  East = "East",
  West = "West",
}

let direction: Direction;

direction = Direction.North;
direction = "North"; // Error Type '"North"' is not assignable to type 'Direction'.
direction = "AnythingElse"; // Error
```

[TypeScript Deep Dive](https://basarat.gitbooks.io/typescript/content/docs/types/literal-types.html)を読んでいたら、String Enums で Enum と string の両方に対応できる方法が載ってきたので紹介します。

- [Literal Types · TypeScript Deep Dive](https://basarat.gitbooks.io/typescript/content/docs/types/literal-types.html)

まず string[]から Enum を生成するユーティリティ関数を作成します。

```ts
function stringToEnum<T extends string>(o: T[]): { [K in T]: K } {
  return o.reduce((accumulator, currentValue) => {
    accumulator[currentValue] = currentValue;
    return accumulator;
  }, Object.create(null));
}
```

この関数は、`T`タイプの配列を受け取って、`T`の中にある要素(`K`)をキーと値にセットした Object を返します。

> reduce の初期値に`Object.create(null)`を利用しているのは、プレーンな Object をベースに Enum を生成するためです。こちらの記事がよくまとまっています。
>
> - [JavaScript でなぜ Object\.create\(null\) を使うのか？ \- Qiita](https://qiita.com/tady/items/1215a801e178c98deb35)

> ちなみに`{}`を初期値として使った場合は、次のようなエラーが発生します。TypeScript 賢い！
>
> > Type '{}' is not assignable to type '{ [K in T]: K; }

次に生成した Enum(オブジェクト)から Type を生成します。

```ts
const Direction = stringToEnum(["North", "South", "East", "West"]);

// keyofでDirectionのキーを抽出して
// typeofでUnion Typeを生成する
type Direction = keyof typeof Direction;
```

これを使うことで Enum でも string でも代入することができます。

```ts
let direction: Direction;

direction = Direction.North;
direction = "North"; // Works!!
direction = "AnythingElse"; // Error
```

正確には Enum ではなく、string の Map オブジェクトを Enum っぽく使っている感じですね。


April, 2019

Robloxでテレポートするブロックを作る

IKEAのテーブルの天板を張り替える

Robloxで点滅する罠を作る

TypeScriptで再帰的なデータ構造を型安心にする

Robloxのリーダーボードを作成する

TypeScriptのString Enumsを少し便利にするTips