スクラッチでオンラインゲームを作る② エンコードする

スクラッチに挑戦している皆さん、どうも！スクラッチコーチです。

前回(ぜんかい)はクラウド変数(へんすう)の基本的(きほんてき)な使(つか)い方(かた)を見(み)て、別(べつ)のタブで開(ひら)いた２つのスクラッチキャットが同(おな)じ動(うご)きをする同期(どうき)処理(しょり)を実装(じっそう)したね。前回(ぜんかい)のラストはこんな感(かん)じ↓で、タブAとタブBで同(おな)じ作品(さくひん)を開(ひら)いて並(なら)べながら動(うご)きを確(たし)かめた！

ただ動(うご)きがカクカクしてて、まだまだ僕(ぼく)らが求(もと)めるクオリティにはなってない。僕(ぼく)らはここじゃあ止(や)まれない。そうだよね！？はるか高(たか)みを目指(めざ)して、着実(ちゃくじつ)に一歩(ぽ)ずつ登(のぼ)っていこう！

今回(こんかい)の目標(もくひょう)は「エンコード」

今回(こんかい)の目標(もくひょう)は、クラウド変数(へんすう)の同期(どうき)処理(しょり)をスムーズにするためにエンコード処理(しょり)というものを実装(じっそう)していくよ。

エンコードってなんやねん

ちょっと待(ま)って、エンコードの説明(せつめい)をする前(まえ)にまずはカクカクしている原因(げんいん)について復習(ふくしゅう)しておこう。手(て)を動(うご)かすのはちょっと先(さき)だ。

同期(どうき)処理(しょり)にはラグがある

クラウド変数(へんすう)を同期(どうき)する際(さい)は、どうしても0.1秒(びょう)のラグが生(しょう)じるという仕様(しよう)だったね。そしていまの実装(じっそう)ではクラウド変数(へんすう)を２つ使(つか)っていたね。

1. X座標(ざひょう)をクラウド変数(へんすう)1にセット
2. Y座標(ざひょう)をクラウド変数(へんすう)2にセット

これをもっと具体的(ぐたいてき)に書(か)くと下記(かき)イメージになる。つまり、横(よこ)→縦(たて)、横(よこ)→縦(たて)、という順番(じゅんばん)に少(すこ)しずつ遅(おく)れながら更新(こうしん)するからカクカクしてしまうんだ。２つ以上(いじょう)のクラウド変数(へんすう)を使(つか)って動(うご)きを同期(どうき)させようとするとどうしても発生(はっせい)してしまうラグなんだ……。

このラグは改善(かいぜん)できる

カクカクの原因(げんいん)はクラウド変数(へんすう)を２つ使(つか)っているから。ならクラウド変数(へんすう)を１つしか使(つか)わなければカクカクは改善(かいぜん)する、単純(たんじゅん)だね！この方針(ほうしん)を採用(さいよう)するぞ。

どうやって１つにするか

肝心(かんじん)なのは方法(ほうほう)論(ろん)だね。シンプルに、X座標(ざひょう)とY座標(ざひょう)を合体(がったい)させてクラウド変数(へんすう)1にセットする方法(ほうほう)で行(い)きたいと思(おも)う。

変更(へんこう)前(まえ)

X座標(ざひょう) = 142 → クラウド変数(へんすう)1 = 142Y座標(ざひょう) = 30 → クラウド変数(へんすう)2 = 30

変更(へんこう)後(ご)

X座標(ざひょう) = 142 → クラウド変数(へんすう)1 = 142Y座標(ざひょう) = 30 → クラウド変数(へんすう)1 = 14230こんな感(かん)じでどうだろう？クラウド変数(へんすう)1にX座標(ざひょう)142もY座標(ざひょう)30も混(ま)ぜて入(い)れて、14230っていう数字(すうじ)を作(つく)るっていうこと。

問題(もんだい)発生(はっせい)

うーん、なんか嫌(いや)な予感(よかん)がするよね。なんだろう。これの問題点(もんだいてん)が分(わ)かる？この14230を解読(かいどく)するときに困(こま)ると思(おも)うんだよ。これがXとYを合体(がったい)させた数字(すうじ)ってことは分(わ)かってても、このままじゃ次(つぎ)のどのパターンなのか分(わ)からない……。x = 14 と y = 230 かもしれない
x = 142 と y = 30 かもしれない
x = 1 と y = 4230 かもしれない

解決策(かいけつさく)

これを解決(かいけつ)するためにXとYの数値(すうち)の前(まえ)に「ケタ」を示(しめ)す数(かず)を書(か)いてみよう。Xは142という3桁(けた)《けた》の数字(すうじ)だから、まず3と書(か)いてから142を書(か)く。合(あ)わせて3142と書(か)く。Yは30という2桁(けた)の数字(すうじ)だから、まず2と書(か)いてから30を書(か)く。合(あ)わせて230と書(か)く。この2つを合体(がったい)させてみよう。3142230注釈(ちゅうしゃく)をつけてこの数字(すうじ)を分解(ぶんかい)してみると下記(かき)のようになるよ。

おおお！なんか良(よ)さそう！分(わ)かる分(わ)かる！暗号(あんごう)みたいだった数字(すうじ)が意味(いみ)を持(も)ったデータとして見(み)えてきたね。

• ケタ数(すう)またはプレフィックス

  u003cpu003eこのケタ数(すう)みたいに数字(すうじ)の長(なが)さを示(しめ)す数字(すうじ)のことをプレフィックスって呼(よ)んでるけど、正式(せいしき)名称(めいしょう)じゃないかも。プレフィックスってよくIPアドレス関連(かんれん)で使(つか)われる専門(せんもん)用語(ようご)で、IPアドレスの長(なが)さを意味(いみ)する数字(すうじ)なんだよね。その流(なが)れでこれも数字(すうじ)の長(なが)さを表(あらわ)す数字(すうじ)だからプレフィックスって呼(よ)んでるだけかも。すまん、正式(せいしき)名称(めいしょう)は違(ちが)うかもしれないけど、そこまで重要(じゅうよう)な話(はなし)でもないからケタとかケタ数(すう)って呼(よ)んでもいいし、プレフィックスって呼(よ)んでもいいと思(おも)う。u003c/pu003e

結果(けっか)

クラウド変数(へんすう)を1つにまとめることができそうだね。タブAでXとYを合体(がったい)させてクラウド変数(へんすう)1にセットする　→　タブBでクラウド変数(へんすう)1を分解(ぶんかい)してXとYにセットするこれでラグが0.1秒(びょう)に限定(げんてい)できるね！理論(りろん)上(じょう)ではカクカクもかなり改善(かいぜん)するはずだ。

で、エンコードってなに？

ここまで見(み)てきた、何(なに)かと何(なに)かを混(ま)ぜて意味(いみ)のあるカタマリにすることをエンコードっていうんだ。今回(こんかい)だとXとYをケタ数(すう)込(こ)みで合体(がったい)させることがエンコードになるよ。ちなみにそのカタマリをもとのXとYに分解(ぶんかい)することをデコードって呼(よ)ぶよ。エンコードもデコードもプロの現場(げんば)では毎回(まいかい)のように飛(と)び交(か)う専門(せんもん)用語(ようご)だよ。

• エンコード、デコード、覚(おぼ)えられない！？

  u003cpu003e合体(がったい)させるのがエンコードで、それを分解(ぶんかい)させるのがデコードといったけど、時間(じかん)が経(た)つと「どっちがエンコードでどっちがデコードだったっけ？」ってなる。はじめの頃(ころ)の僕(ぼく)はなってたｗu003c/pu003eu003cpu003eそのときに無理(むり)やり思(おも)いついた覚(おぼ)え方(かた)がある。くだらないけどｗu003c/pu003eu003cpu003e「ENCODEエンコード」と「DECODEデコード」の最初(さいしょ)の2文字(もじ)に注目(ちゅうもく)してみて。u003c/pu003eu003cpu003eENとDEだよね。Eが前(まえ)にあるからエンコードが先(さき)（＝合体(がったい)）で、Eが後(うし)ろにあるからデコードが後(あと)（＝分解(ぶんかい)）って覚(おぼ)えた。……フッ、認(みと)めたくないものだな。自分(じぶん)自身(じしん)の若(わか)さ故(ゆえ)の過(あやま)ちというものを。u003c/pu003eu003cpu003eu003c/pu003e

エンコード処理(しょり)を準備(じゅんび)しよう

前置(ぜんち)きがなっがｗ はやく実装(じっそう)したくてウズウズしてるぜ！こっからは手(て)を動(うご)かしていこう！

変数(へんすう)「エンコード文字列(もじれつ)」を用意(ようい)する

エンコードされた数字(すうじ)を入(い)れる変数(へんすう)を作(つく)ろう。

• 文字列(もじれつ)というよりは数字(すうじ)列(れつ)では？

  u003cpu003eエンコードした後(あと)も数字(すうじ)のカタマリなのだから、文字列(もじれつ)というよりも数字(すうじ)列(れつ)という名前(なまえ)が適当(てきとう)では？と思(おも)うかもしれないね。でもプログラミングにおいて数字(すうじ)列(れつ)という言葉(ことば)は聞(き)き慣(な)れない。一方(いっぽう)で、文字列(もじれつ)という言葉(ことば)は頻繁(ひんぱん)に使(つか)われているんだ。u003c/pu003eu003cpu003eあと、プログラミングにおいては数字(すうじ)と数値(すうち)は異(こと)なるケースがある。数字(すうじ)は文字(もじ)の仲間(なかま)として考(かんが)えられているんだ。わかりにくいから例(れい)を出(だ)すね。数値(すうち)の１と数値(すうち)の２を足(た)すと普通(ふつう)に３になる。でも数字(すうじ)の１と数字(すうじ)の２を足(た)すと１２になる。こういうことがプログラミングでは一般的(いっぱんてき)なので、今回(こんかい)エンコードされるデータも文字列(もじれつ)と呼(よ)ぶのが正(ただ)しいんだ。u003c/pu003e

初期(しょき)化(か)する

適当(てきとう)に空(あ)いてる場所(ばしょ)に置(お)いて、空白(くうはく)で初期(しょき)化(か)しておこう。

一時(じ)変数(へんすう)を用意(ようい)しておく

エンコードの途中(とちゅう)で値(ね)を保持(ほじ)しておく予定(よてい)なので、「値(ね)」という一時(じ)変数(へんすう)を用意(ようい)しておく！後(あと)で使(つか)うよ。

ブロック定義(ていぎ)「◯をエンコードする」を用意(ようい)する

エンコード処理(しょり)はブロック定義(ていぎ)にしておくと便利(べんり)だ。

テスト用(よう)のデータを渡(わた)しておく

エンコードのブロック定義(ていぎ)を作(つく)り込(こ)んでいく前(まえ)に、とりあえず１とか適当(てきとう)なデータを渡(わた)しておこう。

一時(じ)変数(へんすう)に引数(ひきすう)をセットする

受(う)け取(と)った値(ね)（引数(ひきすう)と呼(よ)ぶ）を一時(じ)変数(へんすう)に入(い)れておこう。

テストする

うん、動(うご)いてるね。

エンコード処理(しょり)を作(つく)り込(こ)む(む)

ここまでは下準備(したじゅんび)みたいなものだ！どんどん洗練(せんれん)させていこう。

値(ね)を丸(まる)めておく

なにかのはずみで「100.5」みたいな数字(すうじ)がブロック定義(ていぎ)に渡(わた)されてしまうと困(こま)るよね。なぜなら「.」は文字(もじ)としてみなされてしまうからだ。クラウド変数(へんすう)に万(まん)が一(いち)でも文字(もじ)をセットしないように、「.」が消(き)えるように演算(えんざん)ブロックを１つかませておくよ。

ケタ数(すう)を調(しら)べる

ケタ数(すう)を調(しら)べるには、数字(すうじ)の長(なが)さを調(しら)べればOKだ。適当(てきとう)な場所(ばしょ)に下記(かき)ブロックを作(つく)っておこう。

これで値(ね)の長(なが)さを調(しら)べられる。値(ね)が１００なら長(なが)さは３だし、値(ね)が４なら長(なが)さは１だ。

ケタ数(すう)と数字(すうじ)を組(く)み合(あ)わせる

ケタ数(すう)に続(つづ)いて数字(すうじ)を組(く)み合(あ)わせるっていう作戦(さくせん)だったよね。これは下記(かき)のように実現(じつげん)できるぞ。

で、こうなる↓

これで値(ね)が１００なら、ケタ数(すう)は３だから、組(く)み合(あ)わせて「３１００」になる！

エンコード文字列(もじれつ)に追記(ついき)する

この組(く)み合(あ)わせた値(ね)を変数(へんすう)「エンコード文字列(もじれつ)」に追加(ついか)するよ。

で、こうなる↓

エンコード文字列(もじれつ)にセットする

一連(いちれん)の演算(えんざん)結果(けっか)を変数(へんすう)「エンコード文字列(もじれつ)」にセットする。

これで後(うし)ろにどんどん値(ね)が追記(ついき)されていくね。

テストする

クリックしてテストしよう！

うん、処理(しょり)を追加(ついか)してもういっちょ。

よし、さらに追加(ついか)してダメ押(お)しだ！

うっし！意図(いと)したとおりにエンコードできた！

次回(じかい)へ

まだまだ中途半端(ちゅうとはんぱ)だけど、ひとまずエンコードの基本的(きほんてき)な処理(しょり)はできた！エンコードなんて専門的(せんもんてき)で難(むずか)しい処理(しょり)だったよね。でもここまで一緒(いっしょ)にできたならスゴイよ！ナイス！次回(じかい)はエンコードして合体(がったい)した文字列(もじれつ)を、デコード（分解(ぶんかい)）する処理(しょり)を作(つく)ってみよう。そしてX座標(ざひょう)とY座標(ざひょう)の同期(どうき)を改善(かいぜん)して、どのくらい動(うご)きがスムーズになるのかを試(ため)そう。

脳(のう)トレ答(こた)え

前回(ぜんかい)の脳(のう)トレの答(こた)えは、今回(こんかい)のエンコード処理(しょり)を通(とお)してわかったかな？392411は924と1です。15234は5と34です。では、3322291は何(なん)と何(なに)？答(こた)えは32291だね！早(はや)めに次(つぎ)の記事(きじ)も公開(こうかい)するぜ。