翔星 Be ランド日記

Vue.js によるシンプルゲーム開発の補足編です。

Vue.js によるシンプルゲーム開発第 7 回、じゃんけん本編です。

Vue.js によるシンプルゲーム開発第 6 回、プレイ画面への切り替えです。

Vue.js によるシンプルゲーム開発第 5 回、ゲストのラウンジ画面です。

Vue.js によるシンプルゲーム開発第 4 回、データ構造とサーバー側開発です。

発行

トラブルシューティング

インストール

特段のオプションも無く、簡単にインストールが完了する。

発行

bin\Release\net5.0\browser-wasm\publish

IIS の設定

（補足）

試行錯誤中は https でないとうまく動かなかった気がしていたが、改めて試してみたら http でも動くようだ。

アクセス

dotnet new blazorserver -o TodoList

ASP.NET のインストール

Blazor アプリ

実行

（補足）

現時点で、ブラウザは Chrome（か Edge）にしないとデバッグ実行時のブレークができない。ブラウザはツールバーの「IIS Express」で切り替えられる。

音楽に合わせて歌詞を入力するタイピングゲーム「TYPINGMANIA」は、曲データを自作することができますが、そのデータのレベルを自動算定するウェブページを公開しました。

• 【TYPINGMANIA】曲レベル算定ツール

作成した XML ファイルを指定するだけで、簡単にレベルを算定できます。

TYPINGMANIA 5 は、PV でタイピングできるようになったのでさらに楽しくなりましたね。

　

　

　
　

GAE-Cron という Web アプリが公開されている。一定時間ごとに特定の Web ページを読み込むためのツールで、主な用途は Web 型 bot の駆動。癒やし系 bot「とわのっと」も GAE-Cron で駆動している。

GAE-Cron は Google App Engine (GAE) 上で動く。ソースコードが公開されており、誰でも GAE アカウントがあれば設置できる。また、1 人が設置して URL を公開すれば、複数人が利用できる便利なツールだ。

かくいう自分も GAE-Cron をデプロイ（公開）して GAE-Cron プロバイダーの 1 つとなっている。

しかしこの度の GAE の無料アカウント負荷制限の厳格化により、GAE-Cron のリソースが厳しくなってきた。

GAE のダッシュボードを見てみると、「Frontend Instance Hours」が 25.18/28.00 の 90% に到達しており、ギリギリの状態。名前からして何らかのインスタンスを生成した数なのだろうが、推移を見ていると、Hours という名前に反して、1 時間ごとの平均ではなく、24 時間積もっていくような印象を受ける。日本時間の 17 時にリセットされる。画像は 17 時直前のもの。

折れ線グラフの右側の値が高いのは、ブラウザでメンテナンス作業をしたからかも。

割り当てをオーバーするとしばらくの間使えなくなってしまうので、対策を講じた。

登録できる人数を減らし、無効化されているアカウントを削除。また、極端に負荷の高い設定をしているアカウントは削除させてもらった。

これでどのくらい負荷が改善されるかな。

実音とわの関連情報をつぶやく（というより最近は飯レスがメインになっている気がしなくもないけど）Twitter bot の「とわのっと」、プログラムとしては EasyBotter を使わせて頂いている。

しかし、とわのっとに必要な機能を追加するために、自分でいろいろプログラムをいじっていて、それがだんだんカオスになってきた。

この際、bot プログラムを新規開発しよう、と PHP と格闘中。クラスを作るのは初めてなのでちょっと戸惑いながら。自クラスのメンバを参照する時に必ず $this が必要とは……。

メンバ関数（PHP 的表現だとメソッド）をインラインでしか書けないのはちょっと嫌。宣言と定義を別にした方が一覧性が良いのに。

既に日常日記の方で報告したように、WiMAX エリアマップの鉄道版とも言える「WiMAX 鉄道スピードテスト」を公開。UQ も力を入れている鉄道での WiMAX エリア化について、スピードテストの実測値をみんなで共有するサイトなので、WiMAX ユーザーの方は是非、速度を測定して結果をご登録下さい。

さて、こちらは PC 日記なので、WiMAX 鉄道スピードテストの仕組み的なところなどを。

大まかな流れは、予め路線＆駅のデータベースを用意しておき、ユーザーの結果登録の際には、選択肢から路線や駅を選んでもらう。結果が投稿されたら、データベースに登録すると共に、駅別・路線別での集計を行う。

基本的な設計思想は、「なるべくサーバーに負担をかけない」。無料レンタルサーバーなので、重い処理をやらせると本当に重くなってしまいそうだったのと、下手するとアカウントを消されてしまいそうなので。

そのため、集計ページにアクセスされる度にデータベースを読んで、ダイナミックにページを生成する方式は却下。本当は、ダイナミックに生成する方が、最近 3 ヶ月だけの結果を表示するとか、いろいろなことができそうなんだけど、我慢我慢。測定結果登録時に静的 HTML を生成する方式とした。

測定結果登録時、カテゴリ・鉄道会社の選択によって路線の選択肢が変わるようになっているが、こういうインタラクティブな部分も、極力 JavaScript の実装にして、サーバーに負担を掛けないようにしている。

鉄道会社のカテゴリのうち、JR は 1 社 1 カテゴリになっているのも、実は負荷軽減のため。測定結果が登録された場合、最終的にはカテゴリの路線一覧を更新する必要があるが、JR 全体を 1 カテゴリにまとめてしまうと、路線数がかなり多くなってしまい、更新に時間がかかってしまう。

右側メニューの「最近の登録」は、実はインラインフレーム。正攻法でいくと、測定結果が登録されたら、既存の全てのページの「最近の登録」を書き換えないといけないが、これはとてもとても重すぎる。そこで、「最近の登録」を集めた HTML 1 つのみを更新し、他の全てのページは、この HTML をインラインで読み込んでいる。

ブログシステムは「最近の記事」をどうやって処理してるんだろう。さすがに記事登録ごとに全ページ更新はやっていないのではと思うのだけど。キャッシュ機構を導入して、初回表示時に「最近の記事」を合成する、とかなのかな。

負荷以外の面で言えば、路線ごとのつながりをちゃんと管理しているのがポイント。例えば、山手線では、大崎駅で埼京線などに乗り換えができる旨の表示を行い、ワンクリックでその路線の結果を見ることができるようになっている。

表示で苦労したのは、速度の棒グラフ。グラフ自体は簡単なんだけど、グラフに数字を重ねるというのが難しい。毎回グラフの長さが違うので、グラフを背景画像にするというわけにはいかない。いろいろ試行錯誤した結果、棒グラフと数字を 2 行で表示し、棒グラフは行半分だけ下にずらし、数字は逆に行半分だけ上にずらすことで、重ね合わせを実現している。この方法であれば、乗り換えセルが複数行になっても、棒グラフはきちんと重ね合わせが維持される。

単純そうなサイトだけど、意外とそれなりに苦労しているのであった。

PHP+MySQL なプログラミングをしてみんとす。

最終的にはレンタルサーバーを借りてそこで PHP スクリプトを動かすのだが、最初からサーバー上でプログラムを動かしながら開発するのは効率が悪いので、ローカル環境に PHP+SQL サーバーを立てたい。なるべくお手軽に。ちなみに、Linux、Apache、MySQL、PHP を合わせて LAMP と呼ぶそうだ（PHPMyAdmin も合わせると LAMPP）。

Windows 環境に PHP をインストールするのは何かとトラブルがおきそうなので、仮想マシン上（VMWare）に Linux をインストールしてサーバーを立て、ネットワークでつなぐことにした。

Linux は Ubuntu 11.04 をチョイス。CentOS も評判だが、Ubuntu の方が手軽らしい。Ubuntu はサーバー版というのがあるが、これは本格的にサーバーを立てる人向けで、GUI すら無い玄人向け。なので Ubuntu のデスクトップ版をチョイス。

VMWare の仮想マシン設定は、HDD 15GB、メモリ 512MB、ネットワークアダプタはブリッジ。仮想マシン名は「LAMP-VM」にしておいた。

CD から Ubuntu を起動してインストール。キーボードレイアウトは OADG 109A を選択。インストール後の初回起動時に「It seems that～」のエラーメッセージが表示されるが、特に問題なく起動できる。

利便性のため、Ubuntu のデスクトップにアイコンを作成。［Ubuntu メニュー⇒アプリケーション⇒アクセサリ⇒端末］で右クリックし、「このランチャをデスクトップへ追加」を選択。また、エクスプローラー（Ubuntu では nautilus と言う）で /usr/bin を開き、nautilus のアイコンをデスクトップにドラッグ＆ドロップ、マウスを離す際に Alt キーを押して「ここへリンクを作る」を選択。

続いてサーバー類のインストール。端末上で

sudo apt-get install apache2 php5 php5-gd mysql-server php5-mysql phpmyadmin

と入力。HTTP サーバーの選択画面では Apache を選択（スペースキーを押す）。「phpmyadmin のデータベースを dbconfig-common で設定しますか？」の問いには「はい」で回答。パスワードの設定を何回か求められるので設定する。インストール後、ブラウザで localhost にアクセスしてインストールの成功を確認する。

Apache（Apache 2）が表示するドキュメントは /var/www にあるが、ここのファイルは root 権限でしか編集できない。これでは不便なので、

sudo chmod -R 777 /var/www

として、一般ユーザーでも編集できるようにする。あくまでも開発環境で、インターネットに公開する訳では無いので（ネット越しの仮想マシンへのアクセスはルーターで遮断する）、セキュリティは気にしない。

テキストエディタ（gedit）を起動し、/var/www 内に、test.php というファイル名で

<?php print_r (phpinfo()); ?>

という内容のファイルを保存する。ブラウザで localhost/test.php にアクセスし、PHP が動作していることを確認する。

続いて、/var/www に Windows ファイル共有でアクセスできるようにする。まず、仮想マシンに固定 IP アドレスを割り当てる。［Ubuntu メニュー⇒システム⇒設定⇒ネットワーク接続］を開き、「有線」タブの  Auto eth0 を編集する。方式を「手動」にして、固定 IP アドレスを割り振る。ネットマスクは「24」にする。

nautilus（エクスプローラー）上で /var/www を右クリックして「共有のオプション」を選び、フォルダを共有しようとすると、「共有サービスがインストールされていません」と怒られるので、「サービスのインストール」を実行。

/etc/samba/smb.conf を gedit で開き、[global] セクション内に

usershare owner only = false

の一文を追加する。再び nautilus で /var/www を共有しようとすると、今度は共有できる。これで、Windows 側から /var/www にアクセスできるようになったので、使い慣れた Windows アプリで HTML/PHP ファイルを作成できる。Windows のエクスプローラーで、ネットワーク⇒仮想マシン名（LAMP-VM）⇒www でドキュメントにアクセスできる。

また、この時点で、Windows 側からブラウザ経由でもドキュメントを表示できるようになっている。Windows 側のブラウザで、仮想マシンに割り振った IP アドレスにアクセスすると、Ubuntu 上で localhost にアクセスした時と同じドキュメントが表示される。

MySQL が動作しているかどうかは、次のスクリプトを作成・閲覧すれば良い。

<?php
mysqli_connect("localhost","root",［インストール時に指定したパスワード］) or die("Error");
echo "Success";
?>

以上により、仮想マシンを起動しておけば、Windows 上で HTML/PHP ファイルの作成と閲覧、MySQL データベースの利用ができるようになった。