inosyanのブログ

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

語学学習サービス「Duolingo」の正誤判定がすごく優秀な件

f:id:inosyan:20181222235321p:plain

 
   いまからひと月ほど前 Duolingo というサービスを知り、そこで毎日英語を勉強しています。英語は僕にとっては長年克服できないでいる壁で、通勤電車の中で英単語を勉強しているのですが、それだけだと足りない気がしていた中、良いものを見つけました。

 
 

Duolingoとは

サイトには、

Duolingoは、世界で最も利用者数の多い無料オンライン語学学習プラットフォーム

とあります。このサービスは基本無料で、PCでもスマホでも受けられるサービスなので気軽にはじめられます。

 
 

英語に限らずいろんな言語を習得できる

 Duolongoのユーザーは、英語を勉強したい日本人だけではありません。Duolingoには、いろんな母国語の人が様々な言語を習得するためのコースが用意されています。

f:id:inosyan:20181222235430p:plain
 
 例えば英語が母国語の人なら、スペイン語、フランス語、ドイツ語、日本語などの中から学習したい言語を選ぶことができます。

f:id:inosyan:20181222235516p:plain

 
 
 しかし、残念ながら、日本語が母国語の人は英語しか選択肢がありません。このサービスが他の言語にも対応してくれると嬉しいのですが、英語をマスターすれば英語話者用のコースから他の言語を勉強すれば良いので問題ありませんw

f:id:inosyan:20181222235535p:plain

 
 

目標がわかりやすい

 ホーム画面は学習項目のアイコンが並んでいるだけのシンプルなものです。下にスクロールしていくと、フクロウ(名前はDuo)のトロフィーがあるので、ひとつずつクリアしていって最後までたどりつくのが目標なんだということがわかります。アイコンの上に数字が書いてありますが、これは学習レベルで、はじめは1からスタートし、規定量のレッスンを終えると次のレベルに上がります。

f:id:inosyan:20181222235557p:plain

 
 

はじめは飛び級テストをうけてガンガンに進もう

 下にスクロールするほど難しくなるようで、学習項目がチェックポイントで区切られています。レベル1の時は順番に項目をクリアしていかないと、次のチェックポイントより先の項目が選べないようになっています。しかし、チェックポイントは「飛び級テスト」をうけることでクリアできます。もし簡単すぎるようなら飛び級してどんどん先に進みましょう。

f:id:inosyan:20181222235615p:plain

 
 
 学習をはじめたばかりの頃、項目を全部クリアして最後のフクロウのところまでたどり着けば終わりだと思っていました。ですがおわりではなく次のレベルがありました。すごい量のコンテンツが用意されているようですね。上から順に下までいくのを繰り返して、いまは3周目(レベル3)にチャレンジ中です。

f:id:inosyan:20181222235632p:plain

 
 

正誤判定がすばらしい

 このサービスで僕が一番すごいと思ったのは、判定能力のすごいところです。例えばこの問題

f:id:inosyan:20181222235653p:plain

The green animal eats the white bread.

の日本語訳に対し、僕は

その緑色の動物は白いパンを食べます

と書いて正解しましたが、別の正解例として

f:id:inosyan:20181222235709p:plain

その緑色の動物はその白いパンを食べます。

が提示されました。僕の回答には「白いパン」の前に「その」がないけど正解だと判定してくれています。翻訳の正解はひとつではないので、ユーザーが自由に入力する文章は様々なパターンがありますが、それらを正誤判定するには、文字列の完全一致ではなく文章として解析しなければなりません。プログラムでそれを行うのは大変ですが、それができているところがすごいです。(もしかしたら、ものすごい数の正解文例をデータベースに持っている可能性もあり、システム的にもそっちのほうが作りやすい気もしますが、それはそれですごいです)

 また、別の問題で
f:id:inosyan:20181222235738p:plain

彼女は自分は元気だと書きます。

の英語訳に対し、僕は

She writes she is fine.

と書いて正解しましたが、別の正解例として

f:id:inosyan:20181222235752p:plain

She writes that she is fine.

が提示されました。僕の回答には that がなかったけど正解にしてくれました。

 上記の例では、僕の回答と正解例との間にはちょっとした違いしかありませんでしたが、
f:id:inosyan:20181222235808p:plain

彼女が眠るといつでも私は遊ぶ。

の英語訳に対し、僕は

I play everytime she sleeps.

と書いて正解しました。しかし別の正解例として

f:id:inosyan:20181222235828p:plain

Whenever she sleeps, I play.

が提示されました。僕が入力した文章とは全く異なりますし、しかも「スペースを入れ忘れています」と指摘されています。

 僕の入力した「everytime」は間違いで「every time」が正解です。スペルミスは1箇所だけなら正解にしてくれるようで、しかも正解例と全く異なる言い回しでも正しければ正解としてくれるところが素晴らしいです。

 
 

でもいつも正しく判定してくれるわけではない

 正誤判定は素晴らしいのですが、それでもたまに納得のいかない判定のときもあります。

f:id:inosyan:20181222235845p:plain

Where are you?

の日本語訳に対し、僕は

あなたはどこですか?

と書いて不正解になり、正しい訳として

f:id:inosyan:20181222235903p:plain

どこいるの?

が提示されました。自分の回答も間違ってないと思うのですが、そんなときは「会話する」を見てみましょう。そこはユーザー同士が意見を言い合う場所で、他のユーザーから参考になる意見が聞けます。僕以外にもこの正解例に不満を持っている人がいるようです。

f:id:inosyan:20181222235921p:plain

 サービスの向上のため、レポートすることもできます。もし自分の回答が正しいと思うなら「私の答えは正しいはずです」にチェックを入れて送信しましょう。

f:id:inosyan:20181222235938p:plain

 
 

スマホ版もあるけどPC版がおすすめ

 DuolingoはPCのブラウザでも、スマホのアプリでもでき、学習の進捗は同期されるので両方を使うこともできます。UIもほぼ同じですが、すこしだけ違いがあります。

 回答の入力方法ですが、PC版はキーボードを使って入力する方法と、単語帳から選択する方法のどちらかを選ぶことができますが、スマホ版は単語帳から選択する方法しか選べません。

 

キーボード入力
f:id:inosyan:20181222235956p:plain

 
単語帳から選択
f:id:inosyan:20181223000016p:plain

 
 スマホはPCより文字を入力しづらいので仕方ないのかもしれません。しかし単語帳から選ぶ方式では、単語がヒントになってしまうので、ゼロから文章を考えるより簡単になってしまいます。それに、タイピングが早ければキーボードで入力したほうが早く、学習中はキーボードだけですべての操作ができるので、スピーディーに進めることができます。

 ですが、スマホ版には発音をチェックしてくれる機能があります。この機能はPC版にはありません。理由はわかりませんが、PCにはマイクがついてないものや、周りに人がいる場合があるので、そのことを配慮しているからしょうか。

 人前でのスピーキングするのを恥ずかしがる日本人は多いと思います。スマホなら一人になれる場所にいけるけど、PCだと必ずしもそれが可能ではないですからね。でも、ぜひPC版でもこの機能をつけてもらいたいです。マイクがない人や、スピーキングをしたくない人のためにOn/Offを切り替えれるようにしてあれば問題ないと思います。

f:id:inosyan:20181223000037p:plain

 
 

継続させる仕組み

 そもそも僕は好きで英語を勉強しているので、動機づけをしてもらわなくても続けることはできると思います。でも、連続して学習した日数が増えていくのは楽しみです。炎のアイコンがそれで、いま29日間継続中です。

f:id:inosyan:20181223000055p:plain

 学習を開始して以来、まだ一度も学習を休んだ日は無いのですが、もし一日あけてしまうと0になってしまうのだろうと思います。0に戻ってしまうのはもったいない気がするので、毎日やるようにしてます。

 もうひとつの動機づけとして、リンゴットというDuolingo内の通貨があり、学習によってそれが増えていきます。これは僕にとってはそんなにモチベーションにはなっていません。というのも、リンゴットでできることがあまりないからです。PC版では、リンゴットを賭けて7日間連続学習できたら倍にする「ダブル・オア・ナッシング」や、制限時間付きで学習できるようになる「タイマー付き練習」などが買えるようです。スマホ版ではそれ以外に、フクロウのキャラクター「Duo」のきせかえアイテムを買えるようです。なぜPC版にないのかは不思議ですが、スマホ版のほうが若い人を意識した作りになっている気がします。

 とにかく英語はコツコツ毎日やる事が大事なので、連続日数が途絶えないように、あるかどうかわからない全クリアめざして頑張りたいと思います。

Googleアシスタント用アプリ「バトルゲーム」をリリースしてわかった開発の注意点

f:id:inosyan:20181123231403p:plain

 前回の記事「指輪型ガジェット「ORII」のBackerになった」で書いたように、音声アシスタントに興味がでてきたので、Googleアシスタント用のアプリを作ってみました。

inosyan.hateblo.jp

 こちらが実際に動いている様子です。

 興味を持ってからアプリを作ってリリースするまで、そんなに大変ではありませんでしたが、いくつか注意すべき点もあるので開発に興味を持った方のためにメモを残します。作り方の手順についてはいろんな方が説明されていますのでそちらをご覧ください。

 Actions on Googleで新規にプロジェクトを作り、Actionsでアクションを作るとDialogflowにエージェントが作られます。DialogflowにはFulfillmentという画面があり、そこがプログラムを書く場所です。そこの画面でInline EditorをEnableにすると、サンプルのプログラムを見ることができます。

f:id:inosyan:20181123231423p:plain

サンプルコードはこのようになっています。

// See https://github.com/dialogflow/dialogflow-fulfillment-nodejs
// for Dialogflow fulfillment library docs, samples, and to report issues
'use strict';
 
const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion} = require('dialogflow-fulfillment');
 
process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements
 
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
  const agent = new WebhookClient({ request, response });
  console.log('Dialogflow Request headers: ' + JSON.stringify(request.headers));
  console.log('Dialogflow Request body: ' + JSON.stringify(request.body));
 
  function welcome(agent) {
    agent.add(`Welcome to my agent!`);
  }
 
  function fallback(agent) {
    agent.add(`I didn't understand`);
    agent.add(`I'm sorry, can you try again?`);
}

  // // Uncomment and edit to make your own intent handler
  // // uncomment `intentMap.set('your intent name here', yourFunctionHandler);`
  // // below to get this function to be run when a Dialogflow intent is matched
  // function yourFunctionHandler(agent) {
  //   agent.add(`This message is from Dialogflow's Cloud Functions for Firebase editor!`);
  //   agent.add(new Card({
  //       title: `Title: this is a card title`,
  //       imageUrl: 'https://developers.google.com/actions/images/badges/XPM_BADGING_GoogleAssistant_VER.png',
  //       text: `This is the body text of a card.  You can even use line\n  breaks and emoji! 💁`,
  //       buttonText: 'This is a button',
  //       buttonUrl: 'https://assistant.google.com/'
  //     })
  //   );
  //   agent.add(new Suggestion(`Quick Reply`));
  //   agent.add(new Suggestion(`Suggestion`));
  //   agent.setContext({ name: 'weather', lifespan: 2, parameters: { city: 'Rome' }});
  // }

  // // Uncomment and edit to make your own Google Assistant intent handler
  // // uncomment `intentMap.set('your intent name here', googleAssistantHandler);`
  // // below to get this function to be run when a Dialogflow intent is matched
  // function googleAssistantHandler(agent) {
  //   let conv = agent.conv(); // Get Actions on Google library conv instance
  //   conv.ask('Hello from the Actions on Google client library!') // Use Actions on Google library
  //   agent.add(conv); // Add Actions on Google library responses to your agent's response
  // }
  // // See https://github.com/dialogflow/dialogflow-fulfillment-nodejs/tree/master/samples/actions-on-google
  // // for a complete Dialogflow fulfillment library Actions on Google client library v2 integration sample

  // Run the proper function handler based on the matched Dialogflow intent name
  let intentMap = new Map();
  intentMap.set('Default Welcome Intent', welcome);
  intentMap.set('Default Fallback Intent', fallback);
  // intentMap.set('your intent name here', yourFunctionHandler);
  // intentMap.set('your intent name here', googleAssistantHandler);
  agent.handleRequest(intentMap);
});

 コメントアウトしてある関数が2箇所あります。コメントアウトを解除してintentMapに紐づけている箇所のコメントも外します。 'your intent name here' のところはあらかじめ作っておいたインテントの名前を書きます。

 2つの関数のうち、yourFunctionHandler のほうは問題ないのですが、googleAssistantHandlerのほうを有効にして、シミュレーターで実行しようとするとエラーが出ます。

f:id:inosyan:20181123231450p:plain

Failed to parse Dialogflow response into AppResponse because of empty speech response. 

 これだけだと原因がわからないので、プログラムで何が起きてるのかログを見てみます。画面下のリンクからFirebaseのログが開きます。

f:id:inosyan:20181123231507p:plain

 ログにはこのようにありました。

f:id:inosyan:20181123231522p:plain

TypeError: Cannot read property 'forEach' of undefined
    at V2Agent.addActionsOnGoogle_ (/user_code/node_modules/dialogflow-fulfillment/src/v2-agent.js:313:28)
    at WebhookClient.addResponse_ (/user_code/node_modules/dialogflow-fulfillment/src/dialogflow-fulfillment.js:269:19)
    at WebhookClient.add (/user_code/node_modules/dialogflow-fulfillment/src/dialogflow-fulfillment.js:245:12)
    at googleAssistantHandler (/user_code/index.js:49:12)
    at WebhookClient.handleRequest (/user_code/node_modules/dialogflow-fulfillment/src/dialogflow-fulfillment.js:303:44)
    at exports.dialogflowFirebaseFulfillment.functions.https.onRequest (/user_code/index.js:60:9)
    at cloudFunction (/user_code/node_modules/firebase-functions/lib/providers/https.js:57:9)
    at /var/tmp/worker/worker.js:714:7
    at /var/tmp/worker/worker.js:697:11
    at _combinedTickCallback (internal/process/next_tick.js:73:7)

agentの内部で起きている問題のようです。解決するには actions-on-google のバージョンを変えます。

タブを index.js から package.json に切り替えます。

f:id:inosyan:20181123231544p:plain

package.json

{
  "name": "dialogflowFirebaseFulfillment",
  "description": "This is the default fulfillment for a Dialogflow agents using Cloud Functions for Firebase",
  "version": "0.0.1",
  "private": true,
  "license": "Apache Version 2.0",
  "author": "Google Inc.",
  "engines": {
    "node": "8"
  },
  "scripts": {
    "start": "firebase serve --only functions:dialogflowFirebaseFulfillment",
    "deploy": "firebase deploy --only functions:dialogflowFirebaseFulfillment"
  },
  "dependencies": {
    "actions-on-google": "^2.1.0",
    "firebase-admin": "^5.13.1",
    "firebase-functions": "^2.0.2",
    "dialogflow": "^0.6.0",
    "dialogflow-fulfillment": "^0.5.0"
  }
}

このうち、 dependenciesの

    "actions-on-google": "^2.1.0",

    "actions-on-google": "2.4.0",

に変更すると直ります。 サンプルとバージョンの不一致の問題なので、近い将来には解決すると思います。
 
 

デプロイまでに時間がかかるのでその対策

プログラムを修正してDeployボタンを押すとデプロイを開始します。
f:id:inosyan:20181123231602p:plain

そしてしばらくするとデプロイが終わったと表示されます。
f:id:inosyan:20181123231618p:plain

でもこの時にはまだシミュレーターで見ても修正が反映されていません。反映までにはここから1〜2分ほどかかるようです。反映されたかどうかを知るため、僕の場合は会話が開始された時のインテント「Default Welcome Intent」の最初のセリフにバージョンを喋らせています。

agent.add(`バージョン${VERSION}`);

 
 

日本語のプライバシーポリシーが必要

 作ったアプリをリリースするにはプライバシーポリシーを用意しなければなりません。ですがほとんどの人は作ったことはないと思います。Googleもそこはわかっているようで、テンプレートを用意してくれています。
f:id:inosyan:20181123231639p:plain

プライバシーポリシーの画面で Need help creating a Privacy Policy? を選ぶと、このようなダイアログが開きます。 f:id:inosyan:20181123231659p:plain

 ここの sample doc のリンクを開くと、テンプレートのドキュメントが開くのですが、テンプレートの説明は書いてあるのに肝心のテンプレートがありません。

テンプレート内容が書かれていないサンプルドキュメント

f:id:inosyan:20181123231720p:plain

 運良く僕は、テンプレートが書かれているバージョンのリンクを知っていました。少し前に作ったプロジェクトの同じダイアログにある sample doc のリンクには、別のドキュメントへのリンクが設定されていて、そちらのドキュメントにはテンプレートの文章が書かれていました。

テンプレート内容が書かれているサンプルドキュメント

f:id:inosyan:20181123231741p:plain

 このテンプレートの指示どおり、${APPNAME}と${DEVELOPER}の箇所を自分のアプリ名と開発者名に置き換えて、手順の箇所を削除して共有設定を誰でも見れるようにしたものをプライバシーポリシーとして申請しました。

 翌日、審査に落ちたとのメールが来ました。理由はプライバシーポリシーが日本語では無かったからです。僕が作ったアプリは日本語用だったので、その場合は日本語のプライバシーポリシーが必要とのことでした。日本語に訳して再提出したら審査に通りました。ご参考までにそのドキュメントのリンクを載せておきます。もしこれを元に作成する場合は、アプリ名「バトルゲーム」と、開発者名「イノシャン」は、ご自身の情報で置き換えてください。くれぐれもよろしくお願いします。

バトルゲーム プライバシーポリシー
 
 

アプリは「終了」で終わらせる必要がある

 はじめの審査で落ちた理由はもう一つあり、それは「終了」の言葉でアプリが終わらなかったことです。アプリが終了したときに連勝記録を喋らせたかったので、デフォルトのインテントは使わずFulfillmentに処理を書いて起き、「中断」という言葉でその処理を行うようにしていました。ですが、「終了」という言葉でも終わらせないといけないようです。なので、こんな感じで Entity の「中断」を「終了」に変え、念のため似たような言葉に反応するようにしました。

f:id:inosyan:20181123231756p:plain

ちなみに、conv.close を呼ぶと終了させることができるようです。

        const conv = agent.conv();
        conv.close(msg);
        agent.add(conv);

 
 

会話ごとに保持する変数の扱い

 作り方のサンプルを見ると、例えばホテルの予約システムの場合、システムが提示した選択肢の中からユーザーが選んだものを会話中システムが保持することは出来るようです。ですが、例えば「連勝記録」のような、ユーザが選択肢から選ぶようなものではなく、システムが増減させることのできる変数をどうやって作るのか、はじめは分かりませんでした。

 例えば 'win' という変数に連勝記録を保持するとします。その変数を function の外側に置いておけば、連勝記録は保持されます。一見うまくいったように見えますが、これがうまくいくのは同時にプレイしているユーザーが一人の時だけです。2台の端末から同時にアクセスするとどちらも同じ連勝回数になってしまい、混乱してしまいます。

 このことから、どうやらこのプログラムは、会話ごとに別のインスタンスが作られるわけではなく、1つのインスタンスがすべての会話を処理していることがわかります。なので変数はテーブルにして、会話ごとにデータを分けるようにしました。 request.body.session は会話のセッションごとに違う値が入っているので、キーとして使えそうです。

const userId = request.body.session;
statusTable[userId] = data;

 ただ、このままでは会話ごとにデータが増えるのでメモリが心配です。終了コマンドが呼ばれたらdeleteするようにはしていますが、途中で会話をやめるかもしれず、そうなるとデータが残り続けてしまいます。なので、会話ごとのデータの更新日も記録し、1日以上経った古いデータを消す処理を会話の開始時に行うようにしています。

function deleteOldData() {
    const date = new Date();
    date.setDate(date.getDate() - 1);
    Object.keys(statusTable).forEach(key => {
        if (statusTable[key].date.getTime() < date.getTime()) {
            delete statusTable[key];
        }
    });
}

 もし1日に何百万人もアクセスするようなコンテンツなら、全件ループするこのような方法は良くないですが、GoogleアシスタントやDialogflowはアクセス数の上限があるのでその心配はありません。DBを使う手もありますが、今回のゲームはシンプルに作りたかったので使いませんでした。もっとスマートなやり方があるのかもしれませんが、今回はこうしました。


 いくつか注意が必要な箇所はありましたが、それでもリリースまでわりと簡単に出来て面白いと思いました。審査も1回落ちましたが申請して翌日には結果が返ってくるので合計2日しかかかりませんでした。開発は絵を書くこと以外はすべてWebブラウザ上で出来ました。コードもInline Editorで書きましたが、行数が多くなるとブラウザでは狭いので、ローカルで書いたものをデプロイするほうが良いかもしれません。ですが、簡単な処理だけしか書かないのならInline Editorで充分です。気軽にできるので趣味でプログラムを書く人にもおすすめです。

指輪型ガジェット「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」なら文字列を表していることがわかる。