放課後ゲーム作り

Unityはゲーム制作について、とても素晴らしいツールであり、更なるアップデートで進化を続けています。 しかし、そんな完璧に見えるツールでもまだ改善する所はあります。 今日の話は 入力フィールドのUnicode入力 です。 Unityで提供している入力フィールド（UnityEngine.UI.InputField） プラットフォームによって、デバイスが提供しているIME （入力装置） を完全に対応する （モバイルなど） プラットフォームもありますが、Webプラットフォームについては、そうではありません。 WebGLの場合、基本提供しているInputFieldで 日本語入力ができない ことが分かります。 （英文字なら問題なく入力可能） その理由は、「 ブラウザIMEのアクセス権限をUnity側が持ってない」  からです。それで、特殊なIME （日本語のromaji入力や組み合わせ入力など） の入力が、思い通りに動かないです。 これはゲームの中でプレイヤーの名前を入れたり、チャット機能などを実装する時、ややこしい問題になります。 WebGL用入力問題を解決する方法について、色々検索してみましたところ、 「WebGLNativeInputField」 というパッケージを見つけました。 https://github.com/unity3d-jp/WebGLNativeInputField こちらのデモで動作確認ができます。 https://unity3d-jp.github.io/WebGLNativeInputField このパッケージを使うと、WebGLでも日本語入力が問題なくできます。 （僕が調べた限り、これがUnityのWebGLで日本語入力できる唯一な対策ではないかと思われます。） ただ１つ問題があるとすれば、 （製作者の方には申し訳ないですが） 入力するとき、 別途のUIが出てくる ことです。 入力フィールドを触るとこのポップが出る オーバーレイタイプも選択可能（こっちの方が少し自然に見えます。） そもそも、WebGLNativeInputFieldで使われた方法は、 「Unity上の入力フィールドを使うことではなく、ブラウザ上に...

他のアカウントへの移転作業が終わって、サイトが改めてオープンされました。 新しいURL： http://habanero2.an.r.appspot.com httpsではなくhttpに注意 復旧内容は 実践GCPシリーズ でブログに残しましたが、あくまで自分が参考するための記事であり、詳細内容が結構省略されているので、読者の方にはあまり参考にならないと思います。申し訳ございません。 特に今回の復旧作業では、サイトのhttps接続のため、GCEのSSL接続について色々調べましたが、色んな難関にぶつかってしまい、結局入れられませんでした。非常に残念です。 （この内容については、いつかブログに書きたい。） 今は２つのゲームしか載ってないですが、 （１点はチャットアプリなので、事実ゲームは１点だけ） これからドンドン面白いゲームを増やしていく夢でワクワクしています。 ※ 元ブログから移転された記事です。

ハバネロ復旧作業中、会員登録のあと確認メールが来ない問題が見つかりました。 ローカルテストでは問題なかったですが、App Engineにデプロイするとメール転送ができなかくなっていました。 関連問題を検索したら、stack overflowで以下のコメントが見つかりました。 By default google app engine have smtp standard ports closed to prevent abuse of email sending bots, anyhow they have available an email api for Java, Python, PHP and Go, but not for Node right now, これからSMTP送信ライブラリーはGAEで使えなくなったようです。 （おそらく無分別なスパム転送を防ぐ意味でしょう。） 公式ドキュメントをみると、GAEでメール転送関連APIを提供しているようですが、問題はこのAPI、 Node.jsではまだサポートしていない です。 さらに、グーグルは このAPIは使用せず、他のメール転送サービスAPIを使うこと を推奨しています。 ほぼ人も来ないサイトに会員メール認証のため、他のサービスまで使うのは本末転倒であり、今回会員登録の認証プロセスは外すことにしました。 今後、Googleで正式にNode用APIを提供されたら、対応する予定です。 ※ 元ブログから移転された記事です。

今度はサーバーをデプロイします。GCPインスタンスにサーバーをアップロードします。 GCPについて前回の記事はこちら 実践GCP ①：プロジェクトを始めよう 実践GCP ②：Serviceアカウントを設定しよう 実践GCP ③：Google App Engineを使ってみよう 実践GCP ④：Google Compute Engineを使ってみよう 実践GCP ⑤：ゲームをデプロイしてみよう（上） SSHでVMに接続する ターミナルでSSH接続するためには、暗号キーを登録する必要があります。 先ず、RSAキーを作成します。ターミナルで下のコマンドを実行します。 ssh-keygen -t rsa -C "[アカウントのメール住所]" 例） > ssh-keygen -t rsa -C "habanero.portal.2@gmail.com" ファイル名を入力してキーを作成します。 （パスワードは入れなくてもOK） 現在のフォルダに２つのファイル （個人キー、公開キー） が生成されます。 「ファイル名.pub」 （公開キー） をcatなどで開いて中のテキストをコピーします。 大体こんな感じ GCPダッシュボードで 「Compute Engine → メタデータ」 を開きます。 「SSH認証鍵」 タブを開き、編集ボタンを押します。 下の 「＋項目を追加」 を押して先ほどコピーした公開キーを貼り付けてから 「保存」 します。 これてターミナルからSSH接続ができます。 （VMインスタンスのIPはCompute Engineダッシュボードから確認します。） 下のコマンドを実行し、VMに接続します。 ssh -i [個人キーのパス] [アカウント名]@[インスタンスIP] 例） > ssh -i ~/.ssh/id_rsa_habanero habanero.portal.2@104.197.231.59 最初は確認メッセージが出るので、yesを入力して続きます。 Nodeは前回インストールしたが、Nodeをバックグラウンドで起動するため、 Forever モジュールを設置します...

前回までVMインスタンスが出来ました。これから実際ゲームをアップロードしてみます。 GCPについて前回の記事はこちら 実践GCP ①：プロジェクトを始めよう 実践GCP ②：Serviceアカウントを設定しよう 実践GCP ③：Google App Engineを使ってみよう 実践GCP ④：Google Compute Engineを使ってみよう 使用するのは事前に作っておいたシンプルなチャットアプリです。 （サーバーはNode.js、クライアントはUnityで製作） Google Cloud Storageへアップロード Google StorageはGCPが提供しているS3サービスです。クライアントバイナリーをGSにアップロードします。 GCPダッシュボードの 「Storage → ブラウザ」 を選択します。 「バケットを作成」 を選択します。 東京リージョンを選んで作成します。 （できれば近い所を選択） バケットが作られたら、そこにゲームを格納してみます。 中で適当にフォルダーを整理した後、ゲームバイナリーをアップロードします。 （Unityの場合ゲームバイナリー構造はこんな形になります。index.htmlとBuildフォルダーをそのままアップすれば良いです。） アップしたファイルをブラウザで見せるためには、バケットを全体公開する必要があります。バケット目録の右先の 「…」 アイコンをタップし、 「バケットの権限を編集」 を選択します。 「メンバーを追加」 を選択します。 新しいメンバーに 「allUsers」 を入力し、ロールは 「ストレージオブジェクト閲覧者」 を選びます。 警告ポップが出ると 「一般公開アクセスを許可」 を押します。 バケットの権限が全体公開になりました。リストで公開アクセスが 「インターネットに公開」 に変わりました。 では、先ほどアップロードしたindex.htmlが格納された場所に戻ります。インターネット公開の横にあるリンクアイコンを押すとウェブブラウザでゲームが起動できます。 （このURLを使ってポータルページに挿入します。） ゲームが正常に起動すること...

ウェブページが完成されたので、本格的にゲームをアップロードしたいと思います。 先ずはゲームサーバーを起動するため、Google Compute Engineを使います。 GCPについて前回の記事はこちら 実践GCP ①：プロジェクトを始めよう 実践GCP ②：Serviceアカウントを設定しよう 実践GCP ③：Google App Engineを使ってみよう GCEのVMインスタンス作成 GCPダッシュボードに接続し（ https://console.cloud.google.com/ ）、「Compute Engine → VMインスタンス」 を選択します。 「インスタンスを作成」 を選んでインスタンスを作ります。 地域は 「us-central1, us-east1, us-west1」 の中で選びます。他の地域は無料オプションがついてないので、ご注意ください。 赤線の地域が無料で使える所です。 マシンタイプは 「f1-micro」 を選びます。他のタイプは無料で使えません。 上の設定にすると、右上の予想費用に１ヶ月744時間無料メッセージが表示されます。 赤線のメッセージを確認しましょう http、httpsトラフィックを許可をチェックして作成します。 インスタンス作られたら目録からIP情報が見れます。 外部IPは接続のために覚えておく必要です。 これからSSHで接続が可能です。 では、サーバーを起動させるために 「node.js」 をインストールします。 nodeをインストールする方法はいるいるありますが、 homebrew を使うと楽なので、まずhomebrewをインストールします。 https://brew.sh homebrew公式サイトにインストールコマンドがあるので、コピーして実行します。 インストールが終わったら、node.jsをインストールします。 （僕はv12でサーバーを作ったので、v12を設置します。） > brew install node@12 nodeがインストールされたらテストしてみましょう。下のテストコードを作成して、 「server.js」 の名前で保存します。 ...