エンジニアのためのGoogle検索

えにあです。 エンジニアの皆さん、技術情報をgoogleで検索する際、どのように検索してますか? 特に意識せずに検索しているでしょうか? そうであれば、今回のTipsによって今まで見つけられなかった貴重な情報を発見できるようになるかもしれません。

目次

英語で検索しよう

皆さんはGoogleに技術ワードを入力する際、日本語で入力しているでしょうか。 もしそうであれば、英語で検索することを強くお勧めします。

英語検索のメリットは3つあります。

1. 情報量が多い

英語で検索すれば海外の情報まで含めてヒットしますので、当然情報量が多いです。 例えばドメイン駆動設計の勉強をしていて、集約について調べる場合「DDD 集約」のように入力するでしょう。 その場合の検索結果はわずか66,000件です。 f:id:enia:20210308205911p:plain

次に、集約の英語「Aggregate」を使って「DDD Aggregate」で検索してみます。58,600件見つかりました。 ざっと9倍程度の情報量になるわけです。 f:id:enia:20210308210018p:plain

2. 情報が新鮮

残念ながら、最新の技術書がすぐに日本語化されることはないのが現状です。

例えば、2003年に出版された名著「エリック・エヴァンス」のドメイン駆動設計が日本語化されたのは8年後の2011年です。 結果として、最新の技術情報がインターネット上に広がるのも圧倒的に英語の方が早く、日本語で検索すると古い情報がヒットしてしまうことも多いのです。

昨今の技術は変化のスピードも速いです。 私の場合、フロントエンドの開発でReactを使っていましたが、ReactHooksなどの大きな変更もあり、1年前の情報だとまるで役に立たないことが多々ありました。

3. クラス名やメソッド名の参考になる

メソッド名や変数名は英語でつけるのが基本です。しかし、どんな名前を付ければ良いか悩んでしまうことも多いです。その際、英語で検索してみて、ヒットする件数が多い方を使うといった使い方をよくしています。

java Class つけようと思っているクラス名」などで検索すると、「あまりこの名前は使われていないな」といった判断に利用できます。

英語Googleを使おう

ここまで、英語で検索するメリットをお伝えしましたが、単純に英語で検索するだけではメリットを最大限に生かすことはできません。

「DDD Aggregate」で検索した結果をもう一度見てみます。 f:id:enia:20210308210553p:plain

結局、日本語の記事が一番上に出てきてしまっています。 詳細なロジックは分かりかねますが、Googleがどこの国からアクセスしているかを自動的に判定していて、日本からのアクセスでは日本語の記事を検索していることに起因しているようです。

これを回避するには、英語版のGoogleで検索する必要があります。 以下のURLでGoogleにアクセスします。 https://www.google.com/webhp?gl=us&hl=en&gws_rd=cr&pws=0

もう一度「DDD Aggregate」で検索してみましょう。 業界の巨匠Martin Fowler氏の記事が一番上にでてきますね。 f:id:enia:20210308210936p:plain

さらに、検索結果も586,000件から629,000件に増えています。

結論

https://www.google.com/webhp?gl=us&hl=en&gws_rd=cr&pws=0をブックマークして、英語で検索する癖を身に着けよう。

猫でもわかるUnity入門(第19回 オブジェクトを再利用しよう)

f:id:enia:20210228230354p:plain えにあです。

以前に、オブジェクトの設計図である「プレハブ」を利用しました。 今回はプレハブを継承して、機能を追加した新たなプレハブを作成する方法を学んだので記載していきます。

目次

実現したいこと

以下のように、白と茶色の碁盤のようなものを作成しようとしています。
f:id:enia:20210308152646p:plain  

後々、色を変えたくなるかもしれません。 そのため、白い床と、茶色い床はそれぞれプレハブとして作成したいです。

しかし、白い床と茶色い床には、「床」としての共通機能があります。 例えば、クリックした時に何かしらの処理をする、といった動作です。これを実現しようと思うと、オブジェクト指向における「クラス継承」のような機能が必要です。

「床プレハブ」を継承した「白床プレハブ」と「茶色床プレハブ」を作成することができれば、共通の機能を変更したい場合は「床プレハブ」に変更を加え、茶色を黒に変えたければ「茶色床プレハブ」だけに変更を加えれば良いのです。

この「プレハブの継承」に相当する機能を調べたので記載していきます。

床プレハブの作成

結論から述べますと「プレハブバリアント」という機能を使ってやりたいことを実現することができます。 上述の床の例で試していきます。

まず、厚みのある床を作るためにキューブを作成します。 f:id:enia:20210308155048p:plain

名前をBoardにしてリセットしておきます。 拡大/縮小のY軸を0.1にし、板の厚みを薄くしておきます。 f:id:enia:20210308155326p:plain

ヒエラルキービューからborardをドラッグして、プロジェクトビューにドロップします。 f:id:enia:20210308160554g:plain

これで、「白床プレハブ」と「茶色床プレハブ」の元となるプレハブは完成です。

マテリアルの作成

色床プレハブと茶色床プレハブを作るためには、マテリアルが必要になるので作っておきます。 マテリアル作成は以前もやっていますね。

トップメニューから「アセット」->「作成」->「マテリアル」で作成します。 f:id:enia:20210308161232p:plain

名前をBrownにして、インスペクターから「アルベド」で茶色に変更します。
細かい色はこの記事の本質ではないので、茶色っぽければ何でもよいです。
f:id:enia:20210308161544p:plain

NOTE:
マテリアルの名前の変更方法を忘れてしまいましたか?
マテリアルの名前の変更はインスペクターでは行えません。
プレジェクトビューでマテリアルを選択し、F2を押せば変更できます。

同様の手で「White」という名前で白のマテリアルも作っておきましょう。
ここまでで、Boardプレハブと、Brownマテリアル、Whiteマテリアルの3つが存在する状態になっています。
f:id:enia:20210308162022p:plain

色付きプレハブの作成

今回の本題である、床プレハブを継承した「白床プレハブ」と「茶色床プレハブ」を作っていきます。 まず、ヒエラルキービューにあるBoardプレハブのインスタンスに「茶色マテリアル」をアタッチします。

※もし、床プレハブ作成手順のあとでBoardインスタンスを消してしまった場合は、プロジェクトビューからBoardプレハブをドラッグし、ヒエラルキービューにドロップすればBoardインスタンスを作成できます。 f:id:enia:20210308162717g:plain

ヒエラルキービューで茶色マテリアルをアタッチしたBorardインスタンスを選択し、プロジェクトビューにドラッグアンドドロップします。最初にオブジェクトを作成してプレハブを作ったのと同じように、床プレハブのインスタンスからプレハブを作るということです。

すると、以下のポップアップが表示されるので、プレハブバリアントを選択します。 f:id:enia:20210308163540p:plain

作成されたプレハブをBrownBoardとしておきます。
f:id:enia:20210308163741p:plain

これで、「床プレハブ」を継承した「茶色床プレハブ」ができました。
プレハブの継承手順としてはこの時点で完了しているのですが、このまま碁盤を作っていきます。

同様の手順で「白床プレハブ」を作ります。 ヒエラルキービューに残っている「Board」はいったん削除しましょう。 プロジェクトビューから「床プレハブ」をドラッグし、ヒエラルキービューにドロップして「床インスタンス」を作ります。

Boardという名前でも、色はデフォルトの床の色に戻ってるはずです。
f:id:enia:20210308164150p:plain

プロジェクトビューで「白マテリアル」を選択しBoardにアタッチします。 白マテリアルをアタッチしたBoardをプロジェクトビューに戻し、「白床プレハブ」を作成します。 原型プレハブではなく「プレハブバリアント」を選択するのを忘れずに。 作成したプレハブの名前は「WhiteBoard」に変えておきましょう。

碁盤の作成

あとはWhiteプレハブとBrownプレハブを交互に並べていくだけです。 f:id:enia:20210308164846p:plain

床全体に共通のタグをつけてみます。
その場合は床プレハブを修正すればよいですね。
試しに、床プレハブのタグをPlayerに変更してみます。
f:id:enia:20210308165038p:plain

BrownBoardも、WhteBoardもタグが変わっているのが分かると思います。 f:id:enia:20210308165138p:plain f:id:enia:20210308165229p:plain

次に、BrownBoardに色を黄色に変えてみます。 Yellowマテリアルを作ってBrownBoardにアタッチしてみます。 f:id:enia:20210308165441p:plain

BrownBoard1もBrownBoard2も一度に色が変わるのが分かると思います。 f:id:enia:20210308165506p:plain

NOTE:
プレハブの名前をBrownBoardという名前にしてしまいましたが、それだと色を変えた時に名前と実体が不整合になってしまいます。「色」のような変更される特徴ではなく「機能や役割」で名前を付けるべきでした。 この例だと特に「機能や役割」がないのでBoardA/BoardBでも良いですし、奇数/偶数という意味でOddBoard/EvenBoardのようなつけ方でも良かったかもしれません。

プレハブを継承して機能を追加した新たなプレハブを作成する方法について記載しました。 今回はここまで!

猫でもわかるUnity入門(第18回 Android用のビルド環境を作ろう)

えにあです。
今まではPC向けアプリとしてビルドしてきましたが、今回はAndroid向けにビルドできるようにしていきます。

NOTE:
自分のスマホをUSBでパソコンとつないで、実機で動作確認できるようにするだけです。 そのうち自分のアプリを作ってPlayストアからダウンロードできるようにする方法も記事にしたいですね。

Android向けにビルドするには、AndroidStudioのインストールと、Unity側の設定が必要です。 これから、順番に手順を記載していきます。 ちなみに、iPhone向けにビルドするにはMacが必要です。私はMaciPhoneも持っていないので、Androidをターゲットにしています。


目次

Android Stuidoのダウンロード

まずは以下のサイトからAndroid Studioをダウンロードしましょう。 インストーラだけで1GBほどのサイズがありますので、空き容量に注意してください。
developer.android.com

Download Android Stuidoをクリックします。 f:id:enia:20210305214623p:plain

利用規約に同意して「ダウンロードする」をクリックします。 f:id:enia:20210305215523p:plain

以上でダウンロードは完了です。

Android Studioのインストール

ダウンロードしたインストーラをクリックして、インストールを開始します。 「Next」を押します。
f:id:enia:20210304094748p:plain

デフォルトの設定のまま「Next」を押します。
f:id:enia:20210304095203p:plain

インストール先を指定して「Next」を押します。
私はデフォルトのパスのままにしました。
f:id:enia:20210304095427p:plain

「Install」をクリックします。
f:id:enia:20210304095637p:plain

インストールが完了するまで30秒ほど待ちましょう。
f:id:enia:20210304095846p:plain

インストールが完了したら「Next」を押します。
f:id:enia:20210304095824p:plain

「Finish」を押します。
f:id:enia:20210304100021p:plain

インストールはここまでで完了です。最後の手順で「Start Android Studio」にチェックが入っていれば、このままAndroid Studioが起動します。

Android Studioの初期設定

「Do not import settings」を選択してOKをクリックします。
f:id:enia:20210304100120p:plain

GoogleAndroid Stuidoを改善するために、どのように使っているか情報をGoogleに送信しても良いか?と聞かれているようです。「Don't send」を選択しても問題なく使えるので、こちらを選択しました。
f:id:enia:20210304100530p:plain

「Next」を選択します。
f:id:enia:20210304100746p:plain

「Standard」にチェックを入れてNextを押します。
f:id:enia:20210304100830p:plain

UIのテーマです。好きな方を選択してNextを押します。 私は夜電気を暗めにして作業するので、目が痛くならないようにダークモードを選びました。 f:id:enia:20210304101925p:plain

先ほどの画面でダークモードを選択したので、以降画面が暗くなっています。 「Finish」を押します。 f:id:enia:20210304102432p:plain

初期化が完了するまでしばらく待ちましょう。 f:id:enia:20210304103406p:plain

おっと、私の環境ではエラーが発生してしまいました。 とりあえずFinishしか押せないので押します。 f:id:enia:20210304122351p:plain

Intel® HAXM installation failed. To install Intel® HAXM follow the instructions found at: https://software.intel.com/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows
Installer log is located at C:\Users\xxxx\AppData\Local\Temp\haxm_log.txt
Installer log contents:
=== Logging started: 2021/03/04  10:40:11 ===
This computer does not support Intel Virtualization Technology (VT-x) or it is being exclusively used by Hyper-V. HAXM cannot be installed. 
Please ensure Hyper-V is disabled in Windows Features, or refer to the Intel HAXM documentation for more information.

Android Studioの初期化自体は完了しているようなので、いったんこのままにします。 ※特にこの後の手順で問題はおきませんでした。

Android Studioの初期設定は以上です。ここでAndroid Studioは閉じておきます。

Android向けビルド用モジュールの追加(Unity側作業)

ここからはUnityに戻ります。 トップメニューから「ファイル」->「ビルド設定」を選択します。
f:id:enia:20210304122959p:plain

ビルド設定画面が開きます。 プラットフォーム画面を見ると、現在は「PC, Mac & Linux Standalone」が選択されているのが分かります。 f:id:enia:20210304124052p:plain

Androidを選択して「Install with Unity Hub」をクリックします。 f:id:enia:20210304124336p:plain

Unity Hubが起動しますので、「Android Build Suppoert」、「Android SDK & NDK Tools」、「OpenJDK」の3つにチェックをいれて「次へ」を押します。
f:id:enia:20210322134607p:plain

Android SDK and NDKの利用規約の同意にチェックを入れ、実行を押します。 f:id:enia:20210304125300p:plain

インストールが終わると自動でUnityが再起動すると思います。再起動しなければ手動で再起動しましょう。 再度ビルド設定画面を開きます。 プラットフォームでAndroidを選択した時の画面が以下のように変わっていればOKです。 以上で、Android向けビルド用モジュールの追加は完了です。 ここまでは一度だけやれば良い作業で、以降の作業はプロジェクトごとに行う作業です。

Android向けビルド(Unity側作業)

「Switch Platform」を押します。 f:id:enia:20210304125758p:plain

1分弱かかるので待ちます。 f:id:enia:20210304122852p:plain

以下のようにプラットフォーム欄のチェックがAndroidに変ればOKです。 f:id:enia:20210304130046p:plain

次にプレイヤー設定を選択します。 f:id:enia:20210304130356p:plain

Player設定にはたくさんの項目がありますが、真ん中の方にパッケージ名という項目があります。 ここに、インターネットのURLと同様に、他の人と重複しない、世界で唯一の名前を設定する必要があるようです。 今回は自分のスマホで動作確認するのが目的ですので、ユニークであれば適当な名前で良いと思います。 設定したら閉じます。 f:id:enia:20210304131652p:plain

ビルド設定に戻って、「シーンを追加」ボタンを押してビルド対象のシーンを追加します。 「シーンを追加」では現在のシーンがビルド対象に追加されます。 今回は1シーンしかないのでこれで良いですが、複数シーンある場合はプロジェクトビューからドラッグアンドドロップする方法で追加するのが簡単だと思います。 f:id:enia:20210304132759p:plain

「ビルドして実行」を押します。 f:id:enia:20210304132958p:plain

名前を付けて保存のダイアログが出ます。 ここで付けた名前がapkファイル名になります。 保存先はプロジェクト内で、Assetsフォルダ以外であればどこでも大丈夫です。

私は、Buildsフォルダを作って「Roulette_Android」という名前を入力して実行しました。 (※前回のボール転がしではないプロジェクトで試していたので、名前がRoll a ballではないです) f:id:enia:20210304134008p:plain

おっと、No Android devices Connectdというエラーが出てしまいました。 f:id:enia:20210304135024p:plain

このエラーが出る原因は大きく2つです。

  1. Android端末とスマホをUSBで接続していない
  2. Androidが「USBデバッグオン」になっていない

今回は2が原因でした。 USBデバッグをオンにしてRetryを押します。 (USBデバッグをオンにする手順は割愛しますが、Googleで検索すればすぐに出てきます。)

今度は先に進みました。しばらく待ちます。 f:id:enia:20210304135303p:plain

javaの起動がブロックされたので許可します。 f:id:enia:20210304135414p:plain

スマホ側を見ていてください。 しばらく待ってビルドが完了すると、自動的にアプリが起動します。やりましたね!

Android向けのビルド方法は以上です。

残念ながら、前回まで作成していたボール転がしゲームはキーボード入力を前提としているので、スマホでそのまま遊ぶことはできませんが、少し変更すれば簡単にAndroidで動かせるようになりますよ。 今回はここまで!

ShareX試してみた

えにあです。今回はShareXというソフトを試してみます。

勉強過程をブログに残す際、よく画面キャプチャを取得します。 ウィンドウ全体をキャプチャしてしまうと大きすぎるので、「Win + Shift + s」で切り取りツールを起動し、指定範囲だけをキャプチャしています。

しかし、Windows標準の切り取りツールには課題があります。

課題

  1. キャプチャ後に自動でフォルダに保存されない
    とりあえずたくさんキャプチャ取っておいて、後でブログに載せるということができません。

  2. ボタンなどのターゲットに色付けできない
    画面にボタンがたくさんある場合など、この手順でどのボタンを押せば良いかわかりません。 もちろん、一度ファイルに保存してから編集すれば良いのですが、とても手間です。

  3. マウスカーソルが表示されない
    マウスカーソルもキャプチャに含めたいときがありますが、消えてしまいます。

これらの課題がShareXを使うことで改善されるか試していきます。

目次

ShareXのインストール

ダウンロードページにアクセスします。 getsharex.com

一番左のDownloadButtonを押します。こういう場合にボタンを赤枠などで囲みたいのですが、現状は手間なので諦めています。
f:id:enia:20210304082011p:plain

利用規約に同意して、「Nextボタン」を押します。 f:id:enia:20210304082133p:plain

インストール先のディレクトリを指定します。ここではデフォルトのままにしました。
f:id:enia:20210304082215p:plain

追加オプションの指定です。後で変更できそうな内容ばかりなので、いったんデフォルトのままにしました。
f:id:enia:20210304082323p:plain

Installボタンを押します。
f:id:enia:20210304082418p:plain

インストール時間は10秒程度でした。 f:id:enia:20210304082643p:plain

これでインストールは完了です。Finishを押して起動してみます。 f:id:enia:20210304082659p:plain

ShareXの最初の設定

いきなりですが、ShareXを起動したらエラーが出てしまいました。 OneDriveと競合しているようです。エラーの解消方法はブログの下の方に記載しておきます。 f:id:enia:20210304082947p:plain

一番最初に設定しておきたいのは、キャプチャー後のタスクです。
左のメニューからキャプチャー後のタスクをクリックします。
f:id:enia:20210304090542p:plain

デフォルトで、以下3つにチェックが入っていました。

  • 画像をクリップボードにコピー
  • 画像をファイルに保存
  • 画像をホストにアップロード

f:id:enia:20210304090623p:plain

気になるのは「画像をホストにアップロード」のチェックです。 デフォルトでImgurというサービスに画像がアップロードされてしまうようになっていました。 万が一、個人情報をキャプチャしてしまい、それがアップロードされたら怖いので、私はオフにしました。

ShareXを試してみよう

安心して使えるようになったので試してみます。

「Alt + PrtSc」でウィンドウをキャプチャしてみる

Alt + PrtScの効果はウィンドウズ標準と同じでフォーカスの当たっているウィンドウのスクリーンショットが取得されます。 試しにShareX自身のキャプチャを取ってみたところ、ShareXのトップ画面に取得したキャプチャが表示されました。 f:id:enia:20210304091458p:plain

「Ctrl + PrtSc」で指定範囲をキャプチャしてみる

「Ctrl + PrtSc」で、今までの「Win + Shift + s」と同じように指定した領域のスクリーンショットを取得できます。

Windows標準機能と異なり自由に領域を指定して切り取ることも、ウィンドウ内の領域をキレイに切り取ることもできます。マウスカーソルもしっかり入ってますね。
f:id:enia:20210304092047p:plain

取得したキャプチャは、OneDrive上に年月ごとのフォルダに分かれて保存されています。 とりあえずキャプチャを取っておくという要件にも使えそうです。 f:id:enia:20210304092218p:plain

キャプチャした画像を加工してみる

キャプチャを取ると、ShareXのトップ画面にキャプチャした画像が表示されます。 これを右クリックして「画像を編集」を押してみます。
f:id:enia:20210304092526p:plain

画像エディターが開きます。トップメニューの描画:「四角形」を選択します。 f:id:enia:20210304092806p:plain

試しに赤枠書いてみました。これで編集の要件にも耐えられそうです。 f:id:enia:20210304093159p:plain

四角形の枠線の色はここで変えられます。 f:id:enia:20210304092914p:plain

塗りつぶしの色はその隣で変えられます。 f:id:enia:20210304092947p:plain

ちなみに、枠線や塗りつぶしの色を透明にする場合は、カラーピッカーの右上にある透明のチェックを選択します。 f:id:enia:20210304093124p:plain

以上、ShareXを試してみました。 私のやりたいことは十分実現できそうな感じです。 便利な設定を見つけたら今後も追加していきます。
今回はここまで!

補足:OneDriveと競合してしまった場合

デスクトップの右下にある、雲のマークを右クリックします。
f:id:enia:20210304084117p:plain

表示されたポップアップメニューの「設定」をクリックします。
f:id:enia:20210304083948p:plain

「バックアップ」タブでスクリーンショットの欄のチェックを外します。
f:id:enia:20210304084101p:plain

ShareXを落として再起動し、エラーが表示されないことを確認しましょう。 ShareXは常駐アプリケーションなのでウィンドウの×ボタンを押しただけでは再起動にならないので注意しましょう。

補足:上の手順で解決しない場合

PCを買い換えた直後など、まだ一度もスクリーンショットを撮ったことのない場合は、 上記の手順で解決しないことがあります。

その場合、まず一度Print Screenボタンを押してみましょう。 すると、OneDriveにスクリーンショットを保存するか聞かれますので「必要ない」を選択します。 f:id:enia:20210322131916p:plain

ShareXを落として再起動し、エラーが表示されないことを確認しましょう。 ShareXは常駐アプリケーションなのでウィンドウの×ボタンを押しただけでは再起動にならないので注意しましょう。

この回避策は以下のgithubのissueで見つけました。 github.com

補足:ffmpegのインストール

試しに何か操作していたところ、以下のエラーが出ました。 「ffmpegがない」というエラーなので動画や音声録音の機能を起動してしまったのだと思います。 ダウンロード自体は問題なさそうなので「はい」を押しました。
f:id:enia:20210304091139p:plain

猫でもわかるUnity入門(第17回 VSCodeで快適コーディング)

f:id:enia:20210228230354p:plain

えにあです。猫でもわかるUnity入門第17回を進めていきます。

今まではWindows標準のメモ帳を使って開発してきましたが、メモ帳での開発はとても効率が悪いです。 そこで、今回は私がTypescriptの開発で愛用していたVSCodeを使えるようにしていきます。

VSCodeを導入すると、以下のようなことができます。 - 文字に色をつけてくれる - 自動で字下げを行ってくれる - 入力補完ができる - 構文エラーをコーディング中に検出できる

VSCodeをインストールしよう

VSCodeマイクロソフトが開発している軽量エディタです。 有志が開発したプラグインが充実していて拡張が容易です。 VSCodeは以下からダウンロードできます。 azure.microsoft.com

私はすでにインストール済みなので細かいインストール手順は割愛しますが、標準設定でインストールすれば問題ないでしょう。

VSCodeにUnity用の拡張機能を追加しよう

VSCodeに「C#」と「Debugger for Unity」の二つの拡張機能をインストールしていきます。

C#拡張機能のインストール

左側のメニューバーで拡張機能を選択します。 検索ボックスに「C#」と入力して、一番上に出てくるC#拡張機能を選択します。
f:id:enia:20210303133546p:plain

表示される画面でインストールを押します。これでインストール完了です。
f:id:enia:20210303133146p:plain

C# XML Documentation Commentsのインストール(任意)

同様の手順で今度は検索ボックスに「C# XML Documentation Comments」と入力して、二番目に表示されたC# XML Documentation Commentsを選択します。
この拡張機能を入れることで、「///」とコメントを打った時にドキュメントコメントの枠を生成してくれます。

f:id:enia:20210314085129p:plain

Debugger for Unity拡張機能のインストール

同様の手順で今度は検索ボックスに「Unity」と入力して、一番上に表示されたDebugger for Unityを選択します。
f:id:enia:20210303133441p:plain

表示される画面でインストールを押します。これでインストール完了です。 f:id:enia:20210303133631p:plain

検索ボックスを空にしてみてください。
インストール済みの一覧が表示されるので、その中に「C#」と「Debugger for Unity」の二つが含まれていればOKです。
f:id:enia:20210303133932p:plain

UnityとVSCodeの連携を設定する

Unity側でスクリプトの編集に使うエディタをVSCodeに変更します。 トップメニューから「編集」->「環境設定」を選択します。
f:id:enia:20210303134628p:plain

環境設定のウィンドウが開きますので、「外部ツール」->「外部のスクリプトエディタ」->「Visual Studio Code」を選択します。 f:id:enia:20210303134824p:plain

これで、UnityEditorからスクリプトを編集する際にVSCodeが起動するようになりました。 試しに、前回作成したPlayerControllerをダブルクリックしてみます。
f:id:enia:20210303152804p:plain

おぉ、VSCodeが起動してPlayerControllerが開かれました。 f:id:enia:20210303152830p:plain

しかし、私の場合、VSCodeにエラーが表示されてしまいました。 次の手順でエラーを解消していきます。

VSCodeのエラーを解消しよう

私の環境では、3つのエラーメッセージが出力されました。 以下に、3つのエラーメッセージと、解消手順を記載しています。 すべて完了したら、上述の手順で再度VSCodeを起動し、エラーが消えたことを確認しましょう。

.NET core SDKのインストール

1つ目のエラーはこちらです。.NET Core SDKがインストールされていない、というメッセージです。

The .NET Core SDK cannot be located. .NET Core debugging will not be enabled. Make sure the .NET Core SDK is installed and is on the pah.
f:id:enia:20210303135058p:plain

エラーメッセージに従って、以下のサイトにアクセスします。 dotnet.microsoft.com

Install for Windowsを選択します。自動的にダウンロードが始まります。 f:id:enia:20210303135337p:plain

ダウンロードされたインストーラを実行します。 f:id:enia:20210303140508p:plain

インストールには少々時間がかかります。 f:id:enia:20210303140544p:plain

インストールが完了したら閉じたのち、パソコンを再起動しましょう。
f:id:enia:20210303140613p:plain

 .NET Framework Developer Packsのインストール

2つ目のエラーはこちらです。

Some projects have trouble loading. Please review the output for more details. f:id:enia:20210303141621p:plain

「Show Output」を押してエラーメッセージを見てみます。 version4.7.1の.NET Framework Developer Packsがインストールされていない、というメッセージです。

.vscode\extensions\ms-dotnettools.csharp-1.23.9.omnisharp\1.37.6.msbuild\Current\Bin\Microsoft.Common.CurrentVersion.targets(1180,5): Error: The reference assemblies for .NETFramework,Version=v4.7.1 were not found. To resolve this, install the Developer Pack (SDK/Targeting Pack) for this framework version or retarget your application. You can download .NET Framework Developer Packs at https://aka.ms/msbuild/developerpacks

エラーメッセージに従って、以下のURLから.NET Framework Developer Packsをダウンロードします。 aka.ms

.NET Framework 4.7.1」をクリックします。 f:id:enia:20210303150457p:plain

NOTE:
2021年3月時点では、4.7.1以降のバージョンは4.7.1、4.7.2、4.8の3つがありました。メジャーバージョンが同じであれば互換性があるのかと思い、4.8だけ入れてみたところエラーは解消しませんでした。4.7.1でないとダメなのか、4.7.2でも良いのかは試してないのでわかっておりません。

RuntimeとDeveloper Packsの二つがありますが、警告に従ってDeveloper Packesをダウンロードします。
f:id:enia:20210303150518p:plain

ダウンロードが完了したらインストーラを起動して、条項に同意したうえでインストールします。
f:id:enia:20210303150542p:plain

1分程度でインストールが完了します。 f:id:enia:20210303150609p:plain

インストールが完了したら閉じたのち、パソコンを再起動しましょう。
f:id:enia:20210303150620p:plain

Gitのインストール

3つめのエラーはこちらです。Gitがインストールされていないというエラーです。 f:id:enia:20210323120015p:plain

規約を読んでNextを押します。 f:id:enia:20210325081509p:plain

インストール先フォルダを指定してNextを押します。
私はデフォルトのパスのままとしました。
f:id:enia:20210325081540p:plain

インストールするコンポーネントを設定して、Nextを押します。
私はデフォルトの設定のままとしました。
f:id:enia:20210325081832p:plain

スタートメニューフォルダの名前を設定して、Nextを押します。
私はデフォルトの設定のままとしました。 f:id:enia:20210325081805p:plain

Gitがデフォルトで使うエディタを設定して、Nextを押します。 何でもよいですが、私はNotepad(Windowsのメモ帳)にしました。
f:id:enia:20210325082325p:plain

デフォルトのブランチ名を設定して、Nextを押します。 デフォルト設定ではGit推奨の名前にしてくれるので、そのままの設定が良いでしょう。
f:id:enia:20210325082454p:plain

環境変数関連の設定のようです。ここはRecommendedのままでよいでしょう。 Nextを押します。
f:id:enia:20210325082644p:plain

デフォルトでOpenSSLにチェックが入っているのでそのままNextを押します。 f:id:enia:20210325082827p:plain

改行コードの設定です。
デフォルトでpush時はLF、チェックアウト時はCR+LFです。
デフォルトの設定のままNextを押します。
f:id:enia:20210325083001p:plain

git bushが使うコンソールを指定して、NEXTを押します。 私はデフォルトの設定のままとしました。 f:id:enia:20210325083319p:plain

pull時のふるまいを指定します。デフォルト設定のままNextを押します。 f:id:enia:20210325083414p:plain

Credential Helperを選択するようですが、パスワードや鍵の管理に使うものでしょうか。
デフォルト設定のままNextを押します。二つ目に至ってはDeprecatedですしね。
f:id:enia:20210325083532p:plain

追加オプションを指定して、Nextを押します。 デフォルト設定のままとしました。
f:id:enia:20210325083729p:plain

実験的機能のオンオフを設定します。 私はデフォルト設定(オフ)にしました。
ここまで長かったですね。ようやく現れたInstallボタンを押します。 f:id:enia:20210325083827p:plain

しばらく待ちましょう。 f:id:enia:20210325083935p:plain

インストール完了です! f:id:enia:20210325084036p:plain

VSCodeの設定を変えて、より便利にしよう

これで、Riと入れただけでRigidbodyが候補に出てきます。 f:id:enia:20210303154358p:plain

既に便利ではありますが、以下のようにif文の括弧の位置がバラバラだったり、if文の中がインデントされていなかった場合に、自動で整形してくれればより便利ですね。 なんと、ファイルを保存した時に自動整形することができるのです。そう、VSCodeならね。

        if (other.gameObject.CompareTag("Pick Up"))
        {
            other.gameObject.SetActive(false);
            count = count + 1;
            countText.text = "Count: " + count.ToString();
            if (count >= 12) {
            winText.text = "Your Win!";
            }
        }

早速設定していきましょう。 メニューバーから「ファイル」->「ユーザ設定」->「設定」と選択します。 f:id:enia:20210303152118p:plain

表示された設定画面で、上の検索ボックスに「format」と入力します。 表示された「Format On Paste」と「Format On Save」にチェックを入れます。 f:id:enia:20210303152216p:plain

この状態で、先ほどのフォーマットが崩れたファイルを保存してみると、以下のようにキレイに整形されました!

        if (other.gameObject.CompareTag("Pick Up"))
        {
            other.gameObject.SetActive(false);
            count = count + 1;
            countText.text = "Count: " + count.ToString();
            if (count >= 12)
            {
                winText.text = "Your Win!";
            }
        }

他にも設定しておいた方が良い項目があるかもしれませんが、おいおい追加していきます。

これでUnityの開発がさらに捗りますね! 今回はここまで!

猫でもわかるUnity入門(第16回 玉転がし作成 最終回)

f:id:enia:20210228230354p:plain

えにあです。 猫でもわかるUnity入門の第16回を進めていきます。
前回までで玉転がしゲームへの機能追加は完了しました。 今回は玉転がしゲームをビルドしていきます。

ゲームをビルドしよう

ビルドの前にシーンを保存しておきましょう。 「Ctrl + s」またはトップメニューから「ファイル」->「保存」で保存できます。

トップメニューから「ファイル」->「ビルド設定」を選択しましょう。
f:id:enia:20210303084421p:plain

ビルド設定ウィンドウが開きます。 f:id:enia:20210303085241p:plain

左下のプラットフォームは、どの環境向けにビルドするかを表しています。 現在のビルドターゲットは「PC, Mac & Linux Standalone」に設定されています。 今回はWindowsのexeファイルとしてビルドするのでこのままの設定できます。

次に、上部のビルドに含まれるシーンに、ビルド対象を追加していきます。 の右下にある「シーンを追加」ボタンを押すと、現在編集中のシーンがビルド対象に設定されます。 f:id:enia:20210303085601p:plain

NOTE: 今回のゲームは一つしかシーンがありません。ですがもっと本格的なゲームを作る場合、メニュー画面、戦闘画面、フィールド画面などごとにシーンを分けることができるのだと思われます。 複数のシーンがある場合は、対象のシーンを複数登録していきます。

では、ビルド設定ウィンドウの右下にある「ビルド」ボタンを押しましょう。 どこに保存するかを聞かれますね。

ここでは、プロジェクト内に「Builds」フォルダを新たに作成して、そこに保存することにします。 f:id:enia:20210303090215p:plain

10秒程度待つと、ビルドが完了しBuildsディレクトリの中身が表示されました。 f:id:enia:20210303090152p:plain

さぁ、「Roll abll.exe」を実行してみましょう! アプリが起動してゲームがを遊べるようになりました!

NOTE:
私の環境では実行すると全画面表示されてしまい閉じることができませんでした。 閉じれない場合はAlt +F4などで強制終了してください。

NOTE:
私の環境では、Unityエディタ上で起動した時と異なり、ゲームクリアメッセージがボールに隠れてしまいました。テキストの位置を少し上に移動しておいた方がよさそうです。 f:id:enia:20210303090601p:plain

メニュー画面がなかったり、クリア後に再プレイできなかったり、本格的なゲームを作るにはまだまだ課題がありそうです。 しかし、一からゲームを作ることの基本はかなり学べたのではないでしょうか。

玉転がし作成に関しては以上となります。 次はまた別のチュートリアルでさらに理解を深めていきたいと思います。

今回はここまで!

猫でもわかるUnity入門(第15回 玉転がし作成 その7)

f:id:enia:20210228230354p:plain

えにあです。猫でもわかるUnity入門第15回を進めていきます。

前回はプレイヤーオブジェクトがアイテムを収集できるよにしました。 今回は収集したアイテムの数を画面に表示できるようにしていきましょう。

目次

テキストオブジェクトを追加しよう

文字を画面に表示するためには、テキストオブジェクトを使います。 テキストオブジェクトの追加はトップメニューから「ゲームオブジェクト」->「UI」->「テキスト」で行います。
f:id:enia:20210302145439p:plain

ヒエラルキービューを見てください。 Textを追加したつもりが、CanvasやEventSystemなども一緒に追加されています。
f:id:enia:20210302145641p:plain

テキストを表示するために必要なものが自動的に追加されるようです。 重要なことは、UIを動作させるためには、Canvasの子にする必要があるということです。 ここではまず、それだけ覚えておきましょう。

収集したアイテムの数を表示するテキストですので、Textオブジェクトの名前を「Count Text」に変更しておきます。
f:id:enia:20210302184228p:plain

フォントの色を白に変更しておきましょう。インスペクターで色の横にある四角をクリックします。
f:id:enia:20210302184411p:plain

RGBを(255, 255, 255)に設定します。
f:id:enia:20210302184841p:plain

一度ここでプレイモードにして動かしてみましょう。 画面の中央にテキストが表示されていますね。
f:id:enia:20210302185151p:plain

しかし、テキストは常に画面の中央に位置しています。 これでは邪魔なので画面の左上に配置させましょう。

インスペクターで「Rect Transform」->「左側の四角」を選択すると、アンカープリセットがのポップアップが表示されます。
f:id:enia:20210302185338p:plain

現在は真ん中に設置されてることが分かりますが、何を基準にした真ん中なのでしょう。 これはCanvasに対して真ん中になります。 Canvasは画面全体にオーバーレイされているので、画面の中心に配置されるわけです。

画面の左上にテキストを表示するために「left-top」に変更します。 「left-top」を選択する際、「Shift + Alt」を押しながら選択してください。 ポップアップに説明が記載されていますが、Shiftを押すことでピボットを、Altを押すことで位置を設定してくれます。
f:id:enia:20210302193128p:plain

さあ、もう一度実行してみましょう。画面の左上に表示されますね。
f:id:enia:20210302193515p:plain

しかし、ピッタリ左上にくっついてしまっているので、少し余白を作りましょう。 インスペクターで位置(X, Y)をそれぞれ(10, -10)に変更します。 Canvasが画面全体に対してオーバーレイされていて、左上が(0, 0)になっており、右に行くほどX軸がプラスに、下に行くほどY軸がマイナスになるようです。
f:id:enia:20210302200508p:plain

さあ、もう一度実行してみましょう。いい感じに表示されましたね!
f:id:enia:20210302200915p:plain

カウントを更新しよう

PlayerControllerスクリプトを修正して、アイテムを取得する度にカウントCount Textを更新していくようにしましょう。

PlayerControllerスクリプトを以下のように変更します。 修正している箇所には★マークをつけています。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; // ★追加

public class PlayerController : MonoBehaviour
{
    public float speed;
    public Text countText;  // ★追加
    private int count;  // ★追加
    private Rigidbody rb;

    void Start ()
    {
        rb = GetComponent<Rigidbody>();
        count = 0;  // ★追加
        countText.text = "Count: 0"; // ★追加
    }

    void FixedUpdate ()
    {
    float moveHorizontal = Input.GetAxis("Horizontal");
    float moveVertical= Input.GetAxis("Vertical");

        Vector3 movement = new Vector3 (moveHorizontal, 0.0f, moveVertical);
        rb.AddForce(movement * speed);
    }

    void OnTriggerEnter(Collider other)
    {
        if (other.gameObject.CompareTag("Pick Up")) {
            other.gameObject.SetActive(false);
            count = count + 1;  // ★追加
            countText.text = "Count: " + count.ToString(); // ★追加
        }
    }
}

まず最初の修正箇所はこちらです。

using UnityEngine.UI; // ★追加

テキストなどのUIオブジェクトを使う場合、Unity標準のUIパッケージのインポートが必要です。

次はフィールドの追加です。 countTextは画面左上に表示するテキストを保持する変数です。 countはプレイヤーが取得したアイテムの数を保持する変数です。

    public Text countText;  // ★追加
    private int count;  // ★追加

次に、上記フィールドの初期化です。初期化に最適な場所はstartメソッドです。 countの初期値は当然0です。 countTextは、"Count: 0"という文字列で表示します。

        count = 0;  // ★追加
        countText.text = "Count: 0"; // ★追加

最後に、テキストを更新する処理を記載していきます。 プレイヤーがアイテムに触れて、アイテムを非アクティブにするのと同じタイミングでテキストを更新すればよさそうです。 countは現在の値に+1すればよいですね。 countTextは更新後のcountの値を使って作成します。

        if (other.gameObject.CompareTag("Pick Up")) {
            other.gameObject.SetActive(false);
            count = count + 1;  // ★追加
            countText.text = "Count: " + count.ToString(); // ★追加
        }

それでは、Unityに戻ってPlayerObjectをインスペクターで見てみましょう。 PlayerControllerの欄を見てください。Count Textというプロパティが追加されていますね。 これはcountTextフィールドをPublicで宣言したからです。 以前speedフィールドを作成した時と同じですね。
f:id:enia:20210303073902p:plain

speedと異なるのは、speedはint型のためインスペクターで直接値を設定することができます。 一方でcountTextに設定するのは「Count Textオブジェクトへの参照」です。 現状はCountTextが「なし」と表示されていますので、正しく参照を設定してあげましょう。

参照を設定するには、ヒエラルキービューで「Count Textオブジェクト」をドラッグし、Playerオブジェクトの「Count Textプロパティ」にドロップするだけです。

以下のように表示されればOKです。
f:id:enia:20210303073957p:plain

さあ、実際に動かして試してみましょう。 アイテムを取得するたびに、左上のカウントが更新されていきますね!
f:id:enia:20210303074211p:plain

NOTE:
参照を設定しなかったらどうなるでしょう?プレイモードにして動かしてみると、コンソールに以下のエラーがでました。

NullReferenceException: Object reference not set to an instance of an object PlayerController.Start () (at Assets/scripts/PlayerController.cs:19)

Unityのステータスバー(Unityの左下)にも赤字でエラーが表示されているのでうまく動かない場合は確認するようにしましょう。

全部アイテムを取得したらゲームクリアメッセージを出そう

最後に、アイテムを12個すべて取得したらゲームクリアメッセージを出すようにしてみましょう。 まずはTextオブジェクトをもう一つ追加します。名前は「Win Text」にしましょう。
f:id:enia:20210303074801p:plain

クリアで、ゲームの真ん中に表示された方が良いですね。 アンカープリセットはデフォルトで「middle-center」になっているはずです。 この状態で位置を(0, 0, 0)にすれば画面中央に文字が表示されます。
f:id:enia:20210303074848p:plain

あれ?ゲーム画面で見てみるとボールより左に寄ってますね。
f:id:enia:20210303075046p:plain

インスペクターの下の方に整列プロパティがあります。左揃えになっているので中央揃えに変更します。
f:id:enia:20210303075132p:plain

いい感じに中央に来ました。
f:id:enia:20210303075228p:plain

ではPlayerControllerスクリプトの方を修正していきます。 CountTextと同様にPublicなWinTextフィールドを追加しましょう。

    public Text winText;

次に、startメソッドでこのwinTextを初期化します。 クリアした時だけ表示される文字列なので、初期値は空文字にします。

    void Start ()
    {
        rb = GetComponent<Rigidbody>();
        count = 0;
        countText.text = "Count: 0";
        winText.text = ""; // ★追加
    }

最後に、OnTriggerEnterメソッドを修正してアイテムを集め終わったタイミングでwinTextを"You Win!"という文字列に更新します。 アイテム数は12個ですので、countが12以上になったらwinTextを更新すればよいですね。

    void OnTriggerEnter(Collider other)
    {
        if (other.gameObject.CompareTag("Pick Up")) {
            other.gameObject.SetActive(false);
            count = count + 1;
            countText.text = "Count: " + count.ToString();
            if (count >= 12) { //★追加
                winText.text = "Your Win!";  //★追加
            } //★追加
        }
    }

Unityに戻ってインスペクターでWin Textフィールドに参照を設定しましょう。 f:id:enia:20210303080442p:plain

さぁ、実際に動かしてみましょう。 アイテムを全部取得したら”You Win!"という文字列が表示されますね! f:id:enia:20210303080713p:plain

玉転がしゲームへの機能追加は今回で最後となります。
次回はゲームをビルドしていきます。今回はここまで!