inosyanのブログ

プログラム、家庭菜園、僕が興味を持ったことを書いていきます

【マイクラ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. フォントとは、文字の形状のデザインのことだが、コンピュータにおいてのフォントは、文字コードを画面に表示するのに使う、文字の形状を集めたデータファイルのことである。