inosyanのブログ

プログラム関連の話題を中心に掲載します

指輪型ガジェット「ORII」のBackerになった

f:id:inosyan:20181106075456j:plain

 僕はガジェット好きなので、たまにKickstarterのようなクラウドファンディングを利用するのですが、久々にグッとくる指輪型のガジェット「ORII(オリー)」を見つけました。

【プロジェクトサイト】指がスマホになる!多機能をスマートにこなす、ウェアラブル革命「ORII」

 このガジェットの最大の特徴は「指を耳に当てて音を聞ける」です。骨伝導なので音は周りに漏れず自分だけに聞こえます。指がイヤホンがわりになるので、イヤホンを持ち歩いたり装着する手間がありません。

f:id:inosyan:20181106075509j:plain

 指一本で電話がかけられる点が、おそらく多くの人の目を引くセールスポイントだと思いますが、僕は普段あまり電話をしないので関係ありません。それより期待しているのは音声アシスタントとの連携です。音声アシスタントは面白いのでたまに使いますが、普段スマホのスピーカーはオフにしてあるので、音量をあげるかイヤホンを繋げなければなりません。周りに人がいると音量を上げれないし、イヤホンを挿すのも面倒なので、結局音声無しでスクリーン表示だけで利用します。しかしそれだと面白さが半減してしまいます。やはり人としゃべっている感覚で、音声で返事が返ってくるほうが断然面白いです。

 これがORIIなら、でいつでもどこでも音声アシスタントを使えます。指を耳に当てるだけなので気軽です。

 ORIIでやりたいことを挙げてみました。

  1. ニュース記事の中の動画などの音声をイヤホン無しでも聞きたい
  2. 手元にスマホやパソコンがない時でもネットで調べ物がしたい
  3. 自分で音声アシスタントのアプリを作りORIIから呼び出したい

 特に3番目をやってみたいです。まだあまり音声アシスタントについて知らないのでこれから調べますが、場所やシチュエーションに関係なくいつでもこれが利用できれば、やれることは無限です。事前に音声アシスタントについて調べてみたくなりました。

 ORIIの情報を見ると、音声アシスタントとして「Siri」と「Googleアシスタント」の2つが挙げられていました。Alexaについては書かれていませんでしたが、もしかしたら動くかもしれません。しかし僕のスマホAndroidなので、素直にGoogleアシスタントをターゲットとして考えてみます。

 開発の仕方のちょっと調べればすぐに見つかる良い時代です。

DialogflowでGoogleアシスタント対応アプリを作成しよう

 しかし、気になることもあります。それは……

周りに人の居る静かな場所では音声コマンドを使いづらい

 人がいても居酒屋のようなガヤガヤしたところだったら平気ですが、電車の中ではちょっと難しそうです。

 解決策がないか調べたところ、面白い記事を見つけました。

これで恥ずかしくない!?声を出さずに「音声入力」できるシステムをMicrosoftの研究者が開発

 まだ研究段階ですが、この「SilentVoice」がデモンストレーション動画の中に出て来た指輪型のデバイスに応用できれば、人目を気にせずに音声コマンドを使えそうです。

 発送は12月末予定とのこと。プロジェクトの成功を期待します。

【マイクラMakeCode】カスタムブロックの作り方 その3 ~フォルダの見た目~

f:id:inosyan:20181029233850g:plain
 
 
 前回は、カスタムブロック1のコードのうち、namespace(名前空間2がカスタムブロックのフォルダの名前になることについて説明しました。今回はフォルダの見た目を変える方法ついて説明します。  
 

名前空間の上に書いてあるコメント

 前回作ったカスタムブロックのファイル custom.ts を開きましょう。

/**
 * Custom blocks
 */
//% weight=100 color=#0fbc11 icon=""
namespace inosyan_testapp {
    ...
}

   
 名前空間の上に、/***/で囲まれている部分 や // で始まる箇所がありますね。これらはプログラムとしては認識されない「コメント」と呼ばれる部分で、実際のプログラムの動きには影響を与えません。コメントはそのコードがどんなものなのか、他の人や自分があとで見てわかるように説明を書いておくためのものです。

 /***/で囲まれたコメントには、そのすぐ下にあるコードの説明を書きます。この例では 名前空間「inosyan_testapp」の説明として「Custom blocks」と書いてあるのですが、inosyan_testapp の部分にマウスオーバーすると、その文章がポップアップされます。これは、他のコードから参照するときに説明が見れるので便利ですが、別に書かなくても構いません。

f:id:inosyan:20181029233915g:plain
 
 カスタムブロックを作る上で大事なのは、その下の //% で始まるコメントです。// だけなら普通の1行コメントですが、その後ろに % がついているところに注意してください。//%で始まるコメントが名前空間の上に書いてあると、その名前空間がカスタムブロックのフォルダであることを表します。

 名前空間の上に書いてるこの部分に注目してください。

f:id:inosyan:20181029233928g:plain
 
//%の後ろにスペースを開けて - weight=100 - color=#0fbc11 - icon=""

の3つが書かれていますね。これらのそれぞれの役割について説明します。
 
 

フォルダの順番

 フォルダはこのように並んでいますね。「INOSYAN_TESTAPP」が一番上に来ています。

f:id:inosyan:20181029233943g:plain
 
 表示の順番は weight できまります。数字が高ければ高いほど上に表示されます。エクスプローラーで core の中の ns.ts というファイルを見てみてください。そこに、そのほかのフォルダのweightが書かれています。

f:id:inosyan:20181029233954g:plain

 イノシャンの作品の場合は、下のほうに控えめに表示されるように weight=1 にしてあります。  
 

フォルダの色

 フォルダの色は、 color=#0fbc11 の #0fbc11 の部分を変えることで別の色にすることができます。これは「カラーコード」と言って、「 #(シャープ)」とそれに続く16進数3で表します。

 色を表現する方法の一つに、赤、緑、青の3色の組み合わせて表現する方法がありますが、このカラーコードは、赤、緑、青をそれぞれ 0 ~ 255 の強さで表し、2桁の16進数にしたものを3つつなげて書いたのです。

 フォルダの色の#0fbc11 は、赤が 0f (10進数で15)、緑が bc (10進数で188)、青が 11 (10進法で17)で、緑の成分が多いので緑色をしています。

 例えば、これを赤にしたい場合は、赤の成分を多くすればいいので、赤を ff(10進数で255)、緑を 00 (10進数で0)、青を 00 (10進数で0)にしたカラーコード #ff0000 にします。

//% weight=100 color=#ff0000 icon=""

f:id:inosyan:20181029234010g:plain
 
 
 色を表すもう一つの方法に、色名で表す方法があります。例えば、赤色は red、青色は blue です。試しに紫色 (purple)にしてみましょう。

//% weight=100 color=purple icon=""

f:id:inosyan:20181029234027g:plain

 他にもいろんな色があります。色名をまとめてあるサイトがありますので、こちらのサイト をご覧ください。  
 

フォルダのアイコン

 カスタムブロックのフォルダに使われているアイコンは、実は文字と同じ方法で表示されています。

f:id:inosyan:20181029234044g:plain

 このアイコンは icon="" の値を変えることで、他のアイコンに変えることができます。ですが、エディタ上のアイコンの値はただの四角形にしか見えません。表示されるアイコンは、三角フラスコの形をしているのに不思議ですね。

f:id:inosyan:20181029234100g:plain

 この四角形にしか見えないところには、Unicodeユニコード4がはいります。なぜ四角にしか見えないかと言うと、エディタが使用しているフォント5がそのアイコンのコードに対応してないからです。Unicodeは世界中の文字(図形を含む)を扱うためのものですが、フォントデータはUnicodeの文字すべてに対応しているわけではありません。表示できない文字コードは四角で表示されます。

 一方、カスタムブロックのフォルダを表示するのに使われているフォントは、アイコンのUnicodeも表示できるものが使われているので、ちゃんとアイコンとして表示されます。

 アイコンの値は、他の方法を使って指定することができます。 icon=""
のところを icon="\uf118"
に置き換えてみましょう。

 いったんHomeに戻って再びプロジェクトを開くと、アイコンがフラスコからスマイルに変わっていますね。

f:id:inosyan:20181029234118g:plain

 f118のように、Unicodeの文字にはアルファベットと数字を組み合わせた記号が割り当てられています。 例えば、Font Awesome のページで、'smile' を検索すると、スマイルのアイコンが出てきますね。

Font Awesomeでのsmileの検索結果

f:id:inosyan:20181029234135g:plain

 詳細ページをみると、Unicodeの記号f118がわかるので、カスタムブロックに使うアイコンには、それを指定しましょう。

f:id:inosyan:20181029234151g:plain

 プログラムで指定する際には、ほかの文字と区別するために記号の前に\nをつけます。

 アイコンは他にもたくさんあります。かっこいいアイコンを見つけたら、そのUnicodeの記号を設定してフォルダのアイコンとして表示されるか見て見ましょう。表示できない場合もありますが、多くのアイコンに対応しているようです。

 せっかく作るカスタムブロックですので、かっこいいアイコンを設定しましょう!


  1. カスタムブロックとは、ユーザーが定義したプログラムブロックのこと。JavaScript(TypeScript)で書くことができ、他のプログラムブロックと同じようにならべて使うことも、JavaScriptから呼び出すこともできる。

  2. namespace(名前空間)とは、変数名や関数名などが重複しないようにするための仕組み。関数名などの名前はコンピューターがそれを特定できるようにするため、それぞれ違った名前にしなければならないが、他の人が作ったライブラリを使ったりプログラムが大きくなると、偶然同じ名前になってしまうことがある。namespaceでプログラムを囲むことにより、他のプログラムとの重複を避けることができる。

  3. 16進数とは、数字の表し方の一つで、16で1つ桁が繰り上がる。0 ~ 9までは10進数と同じだが、10をA,11をB,12をC,13をD,14をE,15をFと表し、16は桁があがって 10 と表す。10進数と区別するために 0x を頭につけて 0x10 のように表すことが多い。

  4. Unicodeユニコード)とは、文字コードの一つ。コンピューターでは文字を表現するのに文字コードと呼ばれる符号(記号)を用いるが、Unicodeは世界中の文字を扱えることを目指す。

  5. フォントとは、文字の形状のデザインのことだが、コンピュータにおいてのフォントは、文字コードを画面に表示するのに使う、文字の形状を集めたデータファイルのことである。

【マイクラMakeCode】(1.7.1で解決済み)マインクラフト1.7.0がCode Connectionに繋がらない!

v1.7.1で解決

2018.11.7にMinecraft 1.7.1がリリースされて、この件は修正されたようです。Code Connectionに無事繋ぐことができました!

f:id:inosyan:20181109081855g:plain

以下は、2018.10.23当時の状況を記した記事です。  
   

イクラがバージョンアップ! だがCode Connectionに繋がらなくなった!

f:id:inosyan:20181023010459g:plain

 いつものようにマインクラフトを立ち上げると、バージョンアップのお知らせが表示されました。アプリの自動更新をONにしているので、最新版の1.7.0がインストールされたようです。タイトル画面の右下にはバージョンが 1.7.0と書いてあります。

 Code Connectionを起動し、IPアドレスクリップボードにコピーし、マインクラフトのチャットウィンドウに貼り付けEnterを押したところ、Code Connectionの画面が一瞬白くなったのに、プログラム選択画面にならず、IPアドレスの画面に戻ってしまいます。Code Connectionに繋ぐことができなくなってしまいました…

 おそらくマインクラフトが最新版になったことが原因なんじゃないかと思い、同じ状況のユーザーも他にいるのではと思いWebで検索たところ、似たような現象の書き込みを見つけました。僕だけではなかったようです。  
 

マインクラフトを前のバージョンに戻す

 マインクラフトを古いバージョンに戻す方法がないか調べてみました。Java版ならランチャーから起動するときにバージョンを選べるのですが、Windows 10版にはそのような仕組みは無いし、過去のバージョンも配布されてないようです。

 ですが、いいことを思い出しました。僕のWindows 10はParallels上で動いていて、スナップショットを作成してあったのです! 過去のスナップショットに戻せばバージョンアップ前の状態になるはずです。

f:id:inosyan:20181023010516g:plain
 
 
 10月19日のスナップショットはすでに1.7.0になっていました。しかし10月16日のスナップショットはまだ1.6.1でした。それに戻したらCode Connectionに繋ぐことができました。良かった良かった!

f:id:inosyan:20181023010530g:plain
 
 
 またバージョンアップしないように、アプリの自動更新をOFFにしました。これで知らない間にバージョンアップしてしまうことは無いでしょう。

f:id:inosyan:20181023010544g:plain
 
 

バグ報告をしてみた

 この件について問い合わせようと思いましたが、Code Connectionの問い合わせ先が見つからず、MakeCodeのフィードバックから問い合わせてみました。しかし今のところ返事がありません。

 この件は複数の製品が絡むので、どの製品のバグなのか迷いますが、マインクラフトのバグとして報告してみることにしました。
Minecraft 1.7.0 doesn't connect to Code Connection 1.50
ちなみにバグはJIRAで管理されているようでした。

f:id:inosyan:20181023010557g:plain
 
 
 バグフィックスされるかもしれないので、新しいバージョンが出てないかしばらく毎日チェックしようと思います。
Version History for Minecraft Windows 10 Edition
Minecraft for Windows 10

 進展があったらご報告します。

【マイクラMakeCode】カスタムブロックの作り方 その2 ~名前空間~

f:id:inosyan:20181020183344j:plain

 前回は、カスタムブロック1のファイルをプロジェクトに追加するところまでやりました。今回は、その中身を見ていきます。

inosyan.hateblo.jp  
 
 

カスタムブロックの入れ物「namespace(名前空間2

カスタムブロックのファイル custom.ts を開きましょう。

f:id:inosyan:20181020183455g:plain
 
 
ファイルには、あらかじめカスタムブロックのサンプルコードが書いてあります。

/**
 * Use this file to define custom functions and blocks.
 * Read more at https://minecraft.makecode.com/blocks/custom
 */

enum MyEnum {
    //% block="one"
    One,
    //% block="two"
    Two
}

/**
 * Custom blocks
 */
//% weight=100 color=#0fbc11 icon=""
namespace custom {
    /**
     * TODO: describe your function here
     * @param n describe parameter here, eg: 5
     * @param s describe parameter here, eg: "Hello"
     * @param e describe parameter here
     */
    //% block
    export function foo(n: number, s: string, e: MyEnum): void {
        // Add code here
    }

    /**
     * TODO: describe your function here
     * @param value describe value here, eg: 5
     */
    //% block
    export function fib(value: number): number {
        return value <= 1 ? value : fib(value -1) + fib(value - 2);
    }
}

 
この中で、まずはじめに説明したいのは

/**
 * Custom blocks
 */
//% weight=100 color=#0fbc11 icon=""
namespace custom {
    ...
}

の部分です。  
 
 namespace(名前空間)は、変数名や関数名などが他のプログラムと重複しないようにするための仕組みですが、MakeCode(メイクコード)3では、名前空間がカスタムブロックを入れておくフォルダの名前にもなります。
 
 
コードの中の namespace custom の行の

custom

の文字が、フォルダの名前の

CUSTOM

になっていますね。

このように、名前空間を大文字にしたものが、カスタムブロックのフォルダ名になります。

f:id:inosyan:20181020183615g:plain
 
 
 でも、この「custom」という名前は良くありません。なぜ良くないかというと、ありきたりすぎて他の人も同じ名前を使うかもしれないからです。

 もしあなたが custom という名前空間foo という名前のカスタムブロックを作って公開したとします。別の人があなたの作ったカスタムブロックをプロジェクトに取り込む際、偶然その人も custom名前空間foo という名前のカスタムブロックを作っていたとしたら、名前が重複しているのでエラーが起きてしまいます。

 他の人と名前が重複しないように、名前空間は世界中で自分しかつけそうもない名前にしておきましょう。別のプログラム言語では、ドメイン4を逆にしたものにアプリ名を付けることが推奨されているものもあります。例えば イノシャンのWebページのドメインwww.inosyan.com なので、アプリ名が TestApp という名前だとすると、www を除いたドメインを逆にして、com.inosyan.TestApp名前空間になります。

 ですが、MakeCodeの名前空間は、上記の com.inosyan.TestApp のような、ドメイン名を逆にする書き方はやめたほうが良さそうです。なぜなら、カスタムブロックを入れておくフォルダの名前は、「 .(ドット)」より前の文字しか認識しないからです。

例えば com.inosyan.TestApp名前空間にしたら、
表示は COM だけになってしまいます。

f:id:inosyan:20181020183635g:plain
 
 
 これはフォルダ名だけの問題で、名前空間としては正しく機能するので、com.inosyan.TestAppcom.inosyan2.TestApp は重複することはありませんが、フォルダ名はどちらも COM で、フォルダを開くと両方のカスタムブロックが混じって入ってしまいます。 

f:id:inosyan:20181020183647g:plain
 
 
 .comで終わるドメイン名は、世界中にものすごく沢山いるので、ドメイン名を逆さにして名前空間にする方法はやらないほうが良さそうです。イノシャンの場合は、inosyan_housebuilderinosyan_moviecamera など、「inosyan」と「 _(アンダースコア)」と作品名を組み合わせることにしています。

 「inosyan」という名前は、世界には他にもいるかもしれませんが、かなり少ないと思うので重複する可能性は低いでしょう。

 名前空間に使える文字はアルファベットの小文字のみです。大文字を使うとフォルダが表示されなくなります。それに、使える記号はアンダースコアのみです。そうなると、名前の付け方は inosyan_testapp のようになります。このように、アルファベットとアンダースコアを組み合わせる書き方を「スネークケース5」と呼びます。文字列が蛇に見えることからそう呼ばれるようです。

f:id:inosyan:20181020183701g:plain
 
 
 自分だけのかっこいい名前空間を作ってみてください。  
 
 


  1. カスタムブロックとは、ユーザーが定義したプログラムブロックのこと。JavaScript(TypeScript)で書くことができ、他のプログラムブロックと同じようにならべて使うことも、JavaScriptから呼び出すこともできる。

  2. namespace(名前空間)とは、変数名や関数名などが重複しないようにするための仕組み。関数名などの名前はコンピューターがそれを特定できるようにするため、それぞれ違った名前にしなければならないが、他の人が作ったライブラリを使ったりプログラムが大きくなると、偶然同じ名前になってしまうことがある。namespaceでプログラムを囲むことにより、他のプログラムとの重複を避けることができる。

  3. MakeCode(メイクコード)とは、子供向けに開発されたプログラミング学習用のアプリ。パズルのピースのようなブロックをならべてプログラミングできるビジュアルプログラミングと、JavaScript(TypeScript)でのコーディングを両方サポートしているのが特等。マインクラフトと接続し、ゲーム内の操作をプログラミングできる。

  4. ドメイン名とは、インターネット上でWebページを特定するための住所のようなもの。例えばイノシャンのWebページのドメイン名は「www.inosyan.com」

  5. スネークケースとは、小文字とアンダースコアを組み合わせた記述方法のこと。文字列が蛇のように見えることからそう呼ばれる。例えば This is a pen は this_is_a_pen となる。

【マイクラMakeCode】カスタムブロックの作り方 その1 ~カスタムファイルを作る~

f:id:inosyan:20181017001320j:plain

 前回、「JavaScriptからプログラムブロック1の切り替えを行うと、コードが崩れてしまうことがあるので、その解決策としてカスタムブロック2を作ると良い」という話を書きました。今回は、そのカスタムブロックの書き方について説明したいと思います。

inosyan.hateblo.jp  
 
 

エクスプローラーを開く

 まず、JavaScriptに切り替えておきます。

f:id:inosyan:20181017001709g:plain f:id:inosyan:20181017001722g:plain
 
 
 画面の左下の「>」のボタンを押します。

f:id:inosyan:20181017001739g:plain
 
 
 すると、画面左に「エクスプローラー」が出てきます。

f:id:inosyan:20181017001753g:plain
 
 
 画面が小さいとエクスプローラーは表示されません。もしエクスプローラーが見えない時は、画面の端をドラッグして画面を大きくしてください。

f:id:inosyan:20181017001810g:plain
 
 

エクスプローラーの中を見てみる

 エクスプローラーでは、プロジェクトを構成しているファイルの一覧を見ることができます。はじめは折り畳まれているので、右の「>」のボタンを押して広げましょう。
 
f:id:inosyan:20181017001830g:plain
 
 
 エクスプローラーの中は次のようなファイル構成になっています。

f:id:inosyan:20181017001901g:plain
 

  • main.blocks
    プログラムブロックのファイル。このファイルを選ぶと、切り替えボタンを押さなくても自動的にプログラムブロックに切り替わる。
  • main.ts
    JavaScriptのコードを書くためのファイル。はじめてエクスプローラーを開いたときは、このファイルが選ばれている。
  • pxt.json
    プロジェクトの設定。タイトルを編集できる。テキスト形式に切り替えると説明文も編集できる。プロジェクトを共有する時に参照される。
  • README.md
    プロジェクトの説明を書くためのファイル。マークダウン3という記述方法で書く。右端のボタンを押すと、書かれた内容が HTML4 に整形されて表示される。  
     

 それ以外の、名前の横に「>」がついているものは、プロジェクトが参照するライブラリのコードです。鍵アイコンがついていて編集できませんが、見ることは可能です。仕組みを知るために見ておくと良いでしょう。

f:id:inosyan:20181017001918g:plain
 
 
 名前の横にゴミ箱のアイコンがついているものは捨てることができます。main.blocks はプログラムブロックを使わないのであれば捨てて構いません。ですが、これを消すとプログラムブロックに切り替えができなくなります。main.blocksは一度消すともとに戻せないので注意してください。

f:id:inosyan:20181017001932g:plain
 
 
 builder は、建築を支援するためのライブラリですが、必要なければ捨てても良いでしょう。これは一度消しても、設定の「Extensions」から復活させることができます。

f:id:inosyan:20181017001946g:plain
 
 
 ちなみに、main.ts の拡張子5が「ts」であることに気づきましたか? これは、このファイルにかかれているプログラム言語が「TypeScript(タイプスクリプト)」という言語であることを示します。TypeScriptは簡単に言うと、JavaScriptに「データ型6」の概念を加えた言語です。JavaScriptと違い、データ型を指定する手間はありますが、数字が入るべきところに間違って文字を入れるといった間違いを、未然に防ぐことができます。  
 
 

カスタムブロック用のファイル「custom.ts」を作る

 エクスプローラーの横に「+」のボタンがありますね。これは、カスタムブロックを書くためのファイル「custom.ts」を作るためのボタンです。このボタンを押しましょう。

f:id:inosyan:20181017002006g:plain
 
 
 確認ダイアログがでるので、「Go Ahead」を押します。

f:id:inosyan:20181017002021g:plain
 
 
 再びエクスプローラーの中を見ると、custom.ts が作られていますね。これがカスタムブロックを書くためのファイルです。

f:id:inosyan:20181017003224g:plain
 
 
 カスタムブロックの変更を反映させるために 一度 Home に戻り、再びプロジェクトを開くと、ブロックの選択エリアに「CUSTOM」が追加されています。

f:id:inosyan:20181017002037g:plain
 
 
 次回はカスタムブロックの書き方について説明します。


  1. プログラムブロックとは、ビジュアルプログラムでつかうパズルのピースのような形のブロックのこと。一般的にはブロックと呼ぶが、マインクラフトのゲーム内のブロックと区別するため、ここではそう呼ぶ。

  2. カスタムブロックとは、ユーザーが定義したプログラムブロックのこと。JavaScript(TypeScript)で書くことができ、他のプログラムブロックと同じようにならべて使うことも、JavaScriptから呼び出すこともできる。

  3. マークダウンとは、テキスト入力の際に決められた記号を記述することで、HTMLのように見栄えよく表示させることのできる記述方法のこと。

  4. HTMLとは、ウェブページを作成にするのに用いられる言語。タグと呼ばれる「<」と「>」で囲まれた要素を組み合わせ、表示したいページを定義する。

  5. 拡張子とは、ファイル名の最後につける、ピリオドに続くアルファベットの文字のことで、ファイルの種類を表す。例えば「txt」はテキストファイル、「js」はJavaScript、「ts」はTypeScript。

  6. データ型とは、プログラムで使われる変数や引数などの正体がなんなのかを表すもの。例えば「test」という変数があった場合、データ型が「number」なら数字で表すことがわかり、「string」なら文字列を表していることがわかる。

【マイクラMakeCode】JavaScriptからプログラムブロックへ切り替える時の罠

f:id:inosyan:20181013115034j:plain

 プログラムを書いたら、できるだけたくさんの人に見てもらいましょう。みんなで作品を共有すれば、きっとますます楽しくなるでしょう。 

 MakeCode1(メイクコード)は、子供たちがプログラムを学習するためのアプリです。子供たちの多くはプログラムブロック2を使っています。もしあなたがプログラムブロックを使わずJavaScriptで書いたとしても、プログラムブロックでも見れるようにしておいた方が親切です。 

「あれ? JavaScriptとプログラムブロックはボタンを押すだけで簡単に切り替わるんじゃないの?」と思うかもしれません。
確かに切り替えは簡単にできるのですが、気をつけたほうが良いことがいくつかあります。でも心配ありません。そんなに難しいことではないですよ。

「;(セミコロン)」が消える

 JavaScriptからプログラムブロックに切り替えたあと、再びJavaScriptに切り替えると、元のコードから少し変化することがあります。

 例えば、次のような、単純な足し算をするコードをプログラムブロックに切り替えます。

player.onChat("add", function (a, b) {
    player.say(a + " + " + b + " = " + (a + b));
})

 プログラムプロックに切り替えると、このように見えます。JavaScriptと同じ内容ですね。

f:id:inosyan:20181013115053g:plain

 再びJavaScriptに切り替えると、コードはつぎのようになります。

player.onChat("add", function (a, b) {
    player.say("" + a + " + " + b + " = " + (a + b))
})

 はじめのコードと見比べてみてください。すこし変化しているのに気づきましたか? 

 文末の「;(セミコロン)」が消えてますね。 セミコロンは、プログラム文がそこで終わることを明示的に示すために書くもので、文末にはこれを書きます。 この決まり事は、他の言語だと必須の場合もありますが、JavaScriptは寛容な言語なので、あってもなくても動きます。

 セミコロンがあった方が良いのかどうかについては、いろんな意見があり、どちらが良いとはここでは書きませんが、 プログラムブロックとの切り替えをするのであれば、セミコロンは書かない方が良いでしょう。

文字列の連結の先頭が変数だった場合、変数の前に「""(空文字)」が足される

 上の2つの違いをもう一度よく見比べてみてください。 a の前に 「""(空文字)」 が足されていますね。 プログラムブロックからJavaScriptに切り替える際、文字連結の先頭が変数だった場合、空文字が足されてしまうようです。

"" + a

 その状態から、改行するなど少し編集を加えてからプログラムブロックに切り替えます。(MakeCodeはユーザーが手を加えないとプログラムブロックを更新してくれないので)

f:id:inosyan:20181013115109g:plain

 プログラムブロック上でも「""」が足されてしまいました。この状態からJavaScriptに切り替えても、これ以上は変化しないようです。文字列連結の先頭は変数ではなく文字列を入れるようにすれば、このような変化は起きないようです。

 自分の書いたコードが勝手に別の形に変化してしまうのは気持ちわるいので、できればはじめから変化しないような書き方をしたいものです。

「 '(シングルクォート)」や「 `(バッククォート)」は「 "(ダブルクォート)」に置き換えられる

 JavaScriptでは、文字列を囲む記号として「"」の他に「'」や「`」が使えます。しかしプログラムからJavaScriptに切り替えると、「"」に置き換えられます。

例えば

    player.say('' + a + ' + ' + b + ' = ' + (a + b))

    player.say(`` + a + ` + ` + b + ` = ` + (a + b))

は、プログラムブロックに切り替えたあとJavaScriptに戻すと、

    player.say("" + a + " + " + b + " = " + (a + b))

になってしまいます。

バッククォートで変数を囲むとプログラムブロックに変化しない

 文字列を囲むだけなら、通常は「"」や「'」を使います。「 `(バッククォート)」は、変数もいっしょに囲みたい時に使います。 例えば

a + " + " + b + " = " + (a + b)

`${a} + ${b} = ${a + b}`

と書くことができまます。このほうがプログラムとして見やすいですね。

ですが、このJavaScript

player.onChat("add", function (a, b) {
    player.say(`${a} + ${b} = ${a + b}`)
})

プログラムブロックに切り替えると

f:id:inosyan:20181013115138g:plain

このように、バッククォートで囲んだ部分がコードのまま表示されてしまいます。 バッククォートで変数を含むとプログラムブロックに変化しないようです。

 これ以外にも、ブロックに置き換えられないコードは、そのままの形でプログラムブロック上に表示されてしまいます。まだコードの書き方を知らない人が見たら、意味がわからず混乱してしまうでしょう。

別の関数の引数でも、同じ名前のものはグローバル変数3になってしまう

 例えば、足し算のプログラムの他に、引き算のプログラムを作ったとします。引数 a, b はそのまま使い回し、符号だけを変えます。

player.onChat("add", function (a, b) {
    player.say("" + a + " + " + b + " = " + (a + b))
})
player.onChat("subtract", function (a, b) {
    player.say("" + a + " - " + b + " = " + (a - b))
})

 これをプログラムブロックに変えるとこうなります。

f:id:inosyan:20181013115151g:plain

 さらにこれをJavaScriptに変えると、このようになります。

let a = 0
let b = 0
player.onChat("add", function (a, b) {
    player.say("" + a + " + " + b + " = " + (a + b))
})
player.onChat("subtract", function (a, b) {
    player.say("" + a + " - " + b + " = " + (a - b))
})

プログラムブロックからJavaScriptに切り替えた結果、コードの最初のほうに、2つの変数

let a = 0
let b = 0

が作られました。

 足し算のチャットコマンドの a と b は、引き算の a と b とは別のものですし、それぞれのハンドラの中でしか使われない変数なので、グローバル変数ではありません。 つまり、足し算や引き算のa, b と、let で定義している a, b は関係ありません。

 複数のチャットコマンドで引数の名前が同じだと、この現象がおきるようです。必要のないグローバル変数が作られるのは気持ちわるいので、これを避けるために、変数にそれぞれ違う名前をつけます。 例えば、足し算用の a と b は addA と addB, 引き算用の a と b は、subA, subB という名前にします。

player.onChat("add", function (addA, addB) {
    player.say("" + addA + " + " + addB + " = " + (addA + addB))
})
player.onChat("subtract", function (subA, subB) {
    player.say("" + subA + " - " + subB + " = " + (subA - subB))
})

f:id:inosyan:20181013115209g:plain

 これなら、プログラムブロックからJavaScriptに戻ってきてもグローバル変数が作られることはありません。

結局どうすれば良いのか

 どうやら、プログラムブロックとJavaScriptとは、完璧な切り替えが可能というわけではなさそうです。切り替えてもJavaScriptのコードが崩れないようにするためには、制約があるみたいです。

 でもそのために、制約を気にしながらコードを書くのは違うと思います。プログラムは自由に好きなように書いたほうが楽しいです。

 切り替えをしない前提で書いてしまうというのも一つの方法です。自分しか使わないのであればそれでもいいです。しかし、作品を公開するのであれば、プログラムブロックを使う人にも配慮したいものです。

 解決策は「カスタムブロック4を作る」です。

 カスタムブロックのコードは別のファイルに書くことができるので、複雑なコードはカスタムブロックに書いて、メインのファイルにはカスタムブロックを呼び出すだけのコードを書くのです。それであれば、メインファイルはシンプルなコードにできるので、プログラムブロックに切り替えてもJavaScriptが崩れることはありません。それにプログラムブロックを見ている人にも配慮できます。

 カスタムブロックの作り方については、次回ご紹介したいと思います。


  1. MakeCode(メイクコード)とは、子供向けに開発されたプログラミング学習用のアプリ。パズルのピースのようなブロックをならべてプログラミングできるビジュアルプログラミングと、JavaScript(TypeScript)でのコーディングを両方サポートしているのが特等。マインクラフトと接続し、ゲーム内の操作をプログラミングできる。

  2. プログラムブロックとは、ビジュアルプログラムでつかうパズルのピースのような形のブロックのこと。一般的にはブロックと呼ぶが、マインクラフトのゲーム内のブロックと区別するため、ここではそう呼ぶ。

  3. グローバル変数とは、プログラム中のどこからでも参照できる変数のこと。便利な反面、どの処理からも値を変更できるためバグが起きると原因を特定しづらくなる。

  4. カスタムブロックとは、ユーザーが定義したプログラムブロックのこと。JavaScript(TypeScript)で書くことができ、他のプログラムブロックと同じようにならべて使うことも、JavaScriptから呼び出すこともできる。

【マイクラMakeCode】マイクラの言語設定を英語にしておいたほうがいい3つの理由

f:id:inosyan:20181009234121j:plain

 マインクラフトに最初に表示される言語は、OSの言語設定で決まるようです。OSの言語が日本語ならマインクラフトにも日本語が、OSが英語ならマインクラフトにも英語が表示されます。

 たいていの日本人のユーザーはOSの言語設定は日本語にしていると思うので、マインクラフトも日本語表示になっていると思います。ですが、僕は英語表記のほうが好きですし、みなさんにも英語表記をおすすめします。その理由は3つあります。

その1: 日本語のフォントがかっこ悪い

 おそらく、どの言語にも対応できるような共通のフォントを使っているのではないかと思います。日本語がもっと美しく見えるフォントはたくさんあるのに、あえてこのフォントを選ぶはずはありません…

f:id:inosyan:20181009234147j:plain f:id:inosyan:20181009234202j:plain

その2: 英語の勉強になる

 昔プレイしてた頃は、日本語の訳が変なものもあった記憶がありますが、あらためて今見てみると、違和感はほぼ無いのでだいぶ改善されたようです。なので日本語でプレイしても支障はないのですが、ゲームのついでに英語の勉強もしてみてはどうでしょう?

 アイテムにマウスオーバーするとアイテム名が表示されます。マインクラフトは、材料をあつめて家や道具を作るゲームなので、アイテムは鉱物をはじめあらゆる素材があり、それから作成できる道具もたくさんあり、それぞれに名前がついています。それらはゲーム特有のものもありますが、一般的な単語がほとんどです。

f:id:inosyan:20181009234217j:plain f:id:inosyan:20181009234227j:plain

その3: MakeCodeのEnumを探しやすい

 プログラムには「Enum(列挙型)」というものがあり、数字に名前をつけて、数字の代わりに使うことができます。MakeCodeではブロックやアイテムの種類を表すのにEnumが使われています。

 例えば「樫(かし)の木材」のEnumは Blocks.PlanksOak で、値は 5 です。数字の5も同じように扱えますが、数字の5が樫の木材だということを忘れてしまうと、あとでプログラムを見たときに何なのかわからなくなってしまいます。

f:id:inosyan:20181009234242g:plain

 Enumなら、そのプログラムが何をしようとしているのかが一目瞭然です。数字を直接書くかわりにEnumを使うようにしましょう。

f:id:inosyan:20181009234255g:plain

 そのEnumを探すのに、アイテム名を英語で覚えておくと便利です。「樫の木材」は英語では「Oak Wood Planks」ですが、Enumの名前は「PlankOak」で、英語のアイテム名と似ています。木材(厚板)のEnumを指定する場合、英語で「Plank」だというのを覚えていたら、キーボードで「Plank」まで書き、あとは絞り込まれた候補から目的のものを選ぶだけです。Enumはアイテム名と似た英単語でできているので、英語でプレイしておいたほうが効率よくプログラムできます。

f:id:inosyan:20181009234310g:plain

MakeCodeの言語を英語に変える

 MakeCodeを一番下までスクロールすると、「言語を変える」のボタンがあります。

f:id:inosyan:20181009234323g:plain

 言語選択画面から English を選びます。

f:id:inosyan:20181009234336g:plain

マインクラフトの言語を英語に変える

 ホーム画面から、設定を選びます

f:id:inosyan:20181009234358j:plain

 設定から「言語」を選びます

f:id:inosyan:20181009234414g:plain

 言語一覧から English (US) を選びます。

f:id:inosyan:20181009234424g:plain

 OSの言語を変えてしまうという手もありますが、さすがにそこまでするとマイクラ以外のアプリの表示も英語になるので不便かもしれません。でも意外と慣れるもので、OSやアプリのトラブルがあった時に表示されるエラーメッセージも英語なので、それをそのままWebで検索して答えにたどり着ける可能性が高く、英語のほうがメリットが多い気がします。

 プログラミングをやるには英語は避けて通れません。ほとんどのプログラム言語は英語で書かれることを想定されており、またドキュメントも英語で書かれたものが圧倒的に多いです。これからプログラムをはじめる人は、同時に英語も覚えることをおすすめします。