ソフトウェア-Web関連開発
詳細は Zenn をどうぞ:
詳細は Zenn をどうぞ:
詳細は Zenn をどうぞ:
前回は、Blazor WebAssembly App の「ホストしない(ASP.NET Core hosted にチェックを入れない)」プロジェクトをフォルダーに発行し、IIS で動くようにした。
プロジェクト新規作成時、テンプレートから「Blazor アプリ」を選んだ後、「新しい Blazor アプリを作成します」の画面で、左上のフレームワークを「.NET 5.0」に、テンプレートは「Blazor WebAssembly App」に、そして右側の「ASP.NET Core hosted」にチェックを入れる。
違いは Fetch data。単体版では所定のファイルを読み込んでいたので毎回同じ内容が表示されたが、Core hosted 版ではサーバーと通信してデータを取得する。サーバー側はランダムな数値を返してくるので、毎回表示される内容が変わる。
発行
前回の単体版発行時とほぼ同じなので、異なる部分のみを記載する。
発行するのは 3 つあるプロジェクトのうちの「Server」プロジェクト。それ以外のプロジェクトは、Server を発行すると自動的にくっついてくる。

wasm じゃなくてちゃんと WebAssembly になるのか不安はあったが、あくまでもサーバー側のバイナリが win-x64 になるだけで、クライアントはちゃんと WebAssembly になるようだ。実行時の通信を見ていると、最初に blazor.webassembly.js をダウンロードさせているし、Fetch data 以外のページ切替では通信が発生しなかったので、必要時以外はクライアント側で完結しているようだ。
その他の設定は前回と同じ。
IIS の設定も前回と同じ。
これで、Core hosted 版も IIS でホストできる。
トラブルシューティング
実は最初、Core hosted 版はうまく IIS で動かなかった。IIS で動かしている Core hosted 版のページを表示しようとすると
- HTTP エラー 500.19 - Internal Server Error
- エラーコード 0x8007000d
- 構成ファイル web.config
というエラーが表示された。
publish フォルダーに IIS のアクセス権限がない場合とは異なり、web.config にアクセスできないのではなく、web.config の内容が良くないという趣旨のようだった。
結果的には自動生成された web.config の内容には問題はなく、以下の対応でページが表示されるようになったが、具体的にどの対応が必要だったのかは不明。
- 「Windows の機能の有効かまたは無効化」で、「インターネットインフォメーションサービスのホスト可能な Web コア」も念のためチェックを入れた。
- ASP.NET Core Hosting Bundle を再インストール(IIS の有効化をした後にはやらないといけないらしい)。
- 1 度、管理者権限で起動した Visual Studio でプロジェクトを発行した(ページ表示に成功してからは、ユーザー権限での発行でも問題なく発行できている)。
- publish フォルダーの 1 つ上のフォルダーにもファイルがたくさんできていたので、1 つ上のフォルダーにも「IIS_IUSRS」「IUSR」にアクセス権限を付与。
- IIS マネージャーでサイトの設定を変更する際は、いったんサイトを止めて、publish フォルダーを含む同レベルのフォルダーをすべて削除して、発行し直した。
なお、配置モードは自己完結だけでなく「フレームワーク依存」、ターゲットランタイムを「移植可能」にしても IIS で動かせた(ASP.NET Core Hosting Bundle を入れているので当然とも言えるが)。
前回は Blazor WebAssembly アプリ(C# Blazor クライアントサイドアプリ)を Visual Studio の F5 でデバッグ実行したが、今回は、本番運用の雰囲気を掴むために、アプリを Web サーバー(Windows 10 の自サーバー)で公開してみる。Web サーバーにアクセスするとクライアントアプリがダウンロードされて実行される。ローカル LAN のみでの公開で、インターネットには公開しない。
インストール
Windows 10 の設定で「機能」で検索すると「Windows の機能の有効かまたは無効化」が出てくるのでクリック。
また、その下にある「インターネットインフォメーションサービスのホスト可能な Web コア」はチェックを入れなくて問題ないようだ(チェック入れておいた方が安心かも?)。
OK を押すと構成を更新してくれる。
マイクロソフト公式サイトから ASP.NET Core Hosting Bundle をダウンロード・インストール。
特段のオプションも無く、簡単にインストールが完了する。
マイクロソフト公式サイトから URL Rewrite Module 2 をダウンロード・インストール。
言語とプラットフォームでダウンロードファイルが異なっているが、通常は Japanese x64 installer だろう。
こちらもインストールは簡単。
発行
ソリューションエクスプローラーでプロジェクトを右クリックし、「発行」をクリック。
bin\Release\net5.0\browser-wasm\publish
デフォルトでは WebAssembly になっていないので、「ターゲットランタイム」などの右側にある鉛筆マークをクリックし、公開の設定ダイアログを開く。
「配置モード」を「自己完結」、「ターゲットランタイム」を「browser-wasm」にして保存する。
IIS の設定
スタートメニューから「インターネットインフォメーションサービス(IIS)マネージャー」を起動。
IIS マネージャー右側の操作ペインにて、サーバーを開始しておく。
Web サイトの追加ダイアログが表示される。
- サイト名:好きな名前にする。今回はアプリの名前と同じ「BlazorApp1」とした。
- アプリケーションプール:サイト名と同じ名前で自動入力される。
- 物理パス:発行時のフォルダーを指定する。ここで指定したフォルダーの直下に「wwwroot」フォルダーと「web.config」が存在しているはずである。wwwroot 自体を指定してはいけない。
- 種類:https にする。
- ポート:大きめのポートで好きなポートにする。今回は 10001 にした。
- SSL 証明書:IIS Express Development Certificate を選択。
設定できたら OK する。
(補足)試行錯誤中は https でないとうまく動かなかった気がしていたが、改めて試してみたら http でも動くようだ。
発行したフォルダーに IIS がアクセスできないことによるエラーなので、フォルダーのアクセス権限を設定する。
続いて追加ボタン、詳細設定ボタンをクリックすると、「ユーザーまたはグループの選択」ダイアログが開く。
以上で準備完了。
アクセス
以上、無事に IIS で Blazor WebAssembly アプリを公開できた。
「C# で Web ページが作れるんだって」「Blazor って言って、WebAssembly で高速な Web アプリになるらしいよ」
というわけで、Blazor に触れてみるべく、公式のチュートリアルを見てみると……
dotnet new blazorserver -o TodoList
いきなりコマンドラインが出てきたよ! え? Visual Studio でちょちょいとできないのか?
いやいや、ちゃんと Visual Studio でできました。というわけで、その方法まとめ。
ASP.NET のインストール
Visual Studio Installer を起動し、「変更」をクリック。
Blazor アプリ
プラットフォームは「.NET 5.0」、テンプレートは「Blazor WebAssembly App」を選択して「作成」。
実行
最初は「Loading...」と表示されるが、少し経つと右のように「Hello, world!」となる。
テンプレートの Web アプリは 3 ページ構成になっていて、左側のメニューでページを切り替えられる。
……というように、Visual Studio でも簡単に Blazor を始められた。普段 ASP.NET で Web 開発をしている人にとっては常識的なことなのだと思うが、Web 開発素人にとっては試行錯誤が必要だったので、ここにまとめておく。
(補足)
現時点で、ブラウザは Chrome(か Edge)にしないとデバッグ実行時のブレークができない。ブラウザはツールバーの「IIS Express」で切り替えられる。
音楽に合わせて歌詞を入力するタイピングゲーム「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 時直前のもの。
折れ線グラフの右側の値が高いのは、ブラウザでメンテナンス作業をしたからかも。
割り当てをオーバーするとしばらくの間使えなくなってしまうので、対策を講じた。
登録できる人数を減らし、無効化されているアカウントを削除。また、極端に負荷の高い設定をしているアカウントは削除させてもらった。
これでどのくらい負荷が改善されるかな。
GAE-Cron は Google App Engine (GAE) 上で動く。ソースコードが公開されており、誰でも GAE アカウントがあれば設置できる。また、1 人が設置して URL を公開すれば、複数人が利用できる便利なツールだ。
かくいう自分も GAE-Cron をデプロイ(公開)して GAE-Cron プロバイダーの 1 つとなっている。
しかしこの度の GAE の無料アカウント負荷制限の厳格化により、GAE-Cron のリソースが厳しくなってきた。

折れ線グラフの右側の値が高いのは、ブラウザでメンテナンス作業をしたからかも。
割り当てをオーバーするとしばらくの間使えなくなってしまうので、対策を講じた。
登録できる人数を減らし、無効化されているアカウントを削除。また、極端に負荷の高い設定をしているアカウントは削除させてもらった。
これでどのくらい負荷が改善されるかな。
実音とわの関連情報をつぶやく(というより最近は飯レスがメインになっている気がしなくもないけど)Twitter bot の「とわのっと」、プログラムとしては EasyBotter を使わせて頂いている。
しかし、とわのっとに必要な機能を追加するために、自分でいろいろプログラムをいじっていて、それがだんだんカオスになってきた。
この際、bot プログラムを新規開発しよう、と PHP と格闘中。クラスを作るのは初めてなのでちょっと戸惑いながら。自クラスのメンバを参照する時に必ず $this が必要とは……。
メンバ関数(PHP 的表現だとメソッド)をインラインでしか書けないのはちょっと嫌。宣言と定義を別にした方が一覧性が良いのに。
しかし、とわのっとに必要な機能を追加するために、自分でいろいろプログラムをいじっていて、それがだんだんカオスになってきた。
この際、bot プログラムを新規開発しよう、と PHP と格闘中。クラスを作るのは初めてなのでちょっと戸惑いながら。自クラスのメンバを参照する時に必ず $this が必要とは……。
メンバ関数(PHP 的表現だとメソッド)をインラインでしか書けないのはちょっと嫌。宣言と定義を別にした方が一覧性が良いのに。
既に日常日記の方で報告したように、WiMAX エリアマップの鉄道版とも言える「WiMAX 鉄道スピードテスト」を公開。UQ も力を入れている鉄道での WiMAX エリア化について、スピードテストの実測値をみんなで共有するサイトなので、WiMAX ユーザーの方は是非、速度を測定して結果をご登録下さい。
さて、こちらは PC 日記なので、WiMAX 鉄道スピードテストの仕組み的なところなどを。
大まかな流れは、予め路線&駅のデータベースを用意しておき、ユーザーの結果登録の際には、選択肢から路線や駅を選んでもらう。結果が投稿されたら、データベースに登録すると共に、駅別・路線別での集計を行う。
基本的な設計思想は、「なるべくサーバーに負担をかけない」。無料レンタルサーバーなので、重い処理をやらせると本当に重くなってしまいそうだったのと、下手するとアカウントを消されてしまいそうなので。
そのため、集計ページにアクセスされる度にデータベースを読んで、ダイナミックにページを生成する方式は却下。本当は、ダイナミックに生成する方が、最近 3 ヶ月だけの結果を表示するとか、いろいろなことができそうなんだけど、我慢我慢。測定結果登録時に静的 HTML を生成する方式とした。
測定結果登録時、カテゴリ・鉄道会社の選択によって路線の選択肢が変わるようになっているが、こういうインタラクティブな部分も、極力 JavaScript の実装にして、サーバーに負担を掛けないようにしている。
鉄道会社のカテゴリのうち、JR は 1 社 1 カテゴリになっているのも、実は負荷軽減のため。測定結果が登録された場合、最終的にはカテゴリの路線一覧を更新する必要があるが、JR 全体を 1 カテゴリにまとめてしまうと、路線数がかなり多くなってしまい、更新に時間がかかってしまう。
右側メニューの「最近の登録」は、実はインラインフレーム。正攻法でいくと、測定結果が登録されたら、既存の全てのページの「最近の登録」を書き換えないといけないが、これはとてもとても重すぎる。そこで、「最近の登録」を集めた HTML 1 つのみを更新し、他の全てのページは、この HTML をインラインで読み込んでいる。
ブログシステムは「最近の記事」をどうやって処理してるんだろう。さすがに記事登録ごとに全ページ更新はやっていないのではと思うのだけど。キャッシュ機構を導入して、初回表示時に「最近の記事」を合成する、とかなのかな。
負荷以外の面で言えば、路線ごとのつながりをちゃんと管理しているのがポイント。例えば、山手線では、大崎駅で埼京線などに乗り換えができる旨の表示を行い、ワンクリックでその路線の結果を見ることができるようになっている。
表示で苦労したのは、速度の棒グラフ。グラフ自体は簡単なんだけど、グラフに数字を重ねるというのが難しい。毎回グラフの長さが違うので、グラフを背景画像にするというわけにはいかない。いろいろ試行錯誤した結果、棒グラフと数字を 2 行で表示し、棒グラフは行半分だけ下にずらし、数字は逆に行半分だけ上にずらすことで、重ね合わせを実現している。この方法であれば、乗り換えセルが複数行になっても、棒グラフはきちんと重ね合わせが維持される。
単純そうなサイトだけど、意外とそれなりに苦労しているのであった。
さて、こちらは 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 キーを押して「ここへリンクを作る」を選択。
続いてサーバー類のインストール。端末上で
と入力。HTTP サーバーの選択画面では Apache を選択(スペースキーを押す)。「phpmyadmin のデータベースを dbconfig-common で設定しますか?」の問いには「はい」で回答。パスワードの設定を何回か求められるので設定する。インストール後、ブラウザで localhost にアクセスしてインストールの成功を確認する。
Apache(Apache 2)が表示するドキュメントは /var/www にあるが、ここのファイルは root 権限でしか編集できない。これでは不便なので、
テキストエディタ(gedit)を起動し、/var/www 内に、test.php というファイル名で
続いて、/var/www に Windows ファイル共有でアクセスできるようにする。まず、仮想マシンに固定 IP アドレスを割り当てる。[Ubuntu メニュー⇒システム⇒設定⇒ネットワーク接続]を開き、「有線」タブの Auto eth0 を編集する。方式を「手動」にして、固定 IP アドレスを割り振る。ネットマスクは「24」にする。
nautilus(エクスプローラー)上で /var/www を右クリックして「共有のオプション」を選び、フォルダを共有しようとすると、「共有サービスがインストールされていません」と怒られるので、「サービスのインストール」を実行。
/etc/samba/smb.conf を gedit で開き、[global] セクション内に
の一文を追加する。再び nautilus で /var/www を共有しようとすると、今度は共有できる。これで、Windows 側から /var/www にアクセスできるようになったので、使い慣れた Windows アプリで HTML/PHP ファイルを作成できる。Windows のエクスプローラーで、ネットワーク⇒仮想マシン名(LAMP-VM)⇒www でドキュメントにアクセスできる。
また、この時点で、Windows 側からブラウザ経由でもドキュメントを表示できるようになっている。Windows 側のブラウザで、仮想マシンに割り振った IP アドレスにアクセスすると、Ubuntu 上で localhost にアクセスした時と同じドキュメントが表示される。
MySQL が動作しているかどうかは、次のスクリプトを作成・閲覧すれば良い。

最終的にはレンタルサーバーを借りてそこで PHP スクリプトを動かすのだが、最初からサーバー上でプログラムを動かしながら開発するのは効率が悪いので、ローカル環境に PHP+SQL サーバーを立てたい。なるべくお手軽に。ちなみに、Linux、Apache、MySQL、PHP を合わせて LAMP と呼ぶそうだ(PHPMyAdmin も合わせると LAMPP)。
Windows 環境に PHP をインストールするのは何かとトラブルがおきそうなので、仮想マシン上(VMWare)に Linux をインストールしてサーバーを立て、ネットワークでつなぐことにした。
Linux は Ubuntu 11.04 をチョイス。CentOS も評判だが、Ubuntu の方が手軽らしい。Ubuntu はサーバー版というのがあるが、これは本格的にサーバーを立てる人向けで、GUI すら無い玄人向け。なので Ubuntu のデスクトップ版をチョイス。

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

続いてサーバー類のインストール。端末上で
sudo apt-get install apache2 php5 php5-gd mysql-server php5-mysql phpmyadmin

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 が動作していることを確認する。


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


MySQL が動作しているかどうかは、次のスクリプトを作成・閲覧すれば良い。
<?php以上により、仮想マシンを起動しておけば、Windows 上で HTML/PHP ファイルの作成と閲覧、MySQL データベースの利用ができるようになった。
mysqli_connect("localhost","root",[インストール時に指定したパスワード]) or die("Error");
echo "Success";
?>

翔星グループ
月別アーカイブ
記事検索
最新記事
最新コメント
タグクラウド
- ACF
- Android
- AOT
- AQUOSPAD
- ArtisanTD
- ASPNET
- Blazor
- CBuilder
- CSharp
- csv2resw
- FactoryTown
- Fantia
- GPS
- H264
- H265
- HaikuOS
- HANASU
- HDD
- IIJ
- LTE
- MicrosoftStore
- MVNO
- MVVM
- NAS
- Nexus7
- OfLifeAndLand
- PetitKara
- PHP
- RaspberryPi
- SQLite
- SSD
- SymphonyOfWar
- TYPINGMANIA
- USB3
- UTAU
- Vegas
- VisualStudio
- Vue
- Wi-Fi
- WiMAX
- Windows
- Windows10
- Windows10Mobile
- Windows11
- WinUI3
- WPF
- うたりす
- お知らせ
- しゃべって唄詠
- その他無線
- ちょちょいとファイル合併2
- ちょちょいと自動更新
- ちょちょいと自動更新2
- はじまるA列車
- ゆかり
- ゆかりすたー
- ゆかりすたー4
- ゆっこビュー
- ゆっこビュー2
- アニメ
- アンケート
- イベント
- オーディオ
- カラオケ
- カラオケ動画
- ゲーム
- サンプルコード
- サービス
- スピード測定
- セキュリティ
- ソフトウェア
- タブレット
- ニコカラ
- ニコカラりすたー
- ニコカラメーカー
- ニコカラメーカー2
- ニコカラメーカー3
- ネットワーク
- ハードウェア
- プラグイン
- プログラミング
- プログレスバー素材メーカー
- ヘッドセット
- ボーカルカット
- マシンスペックまとめ
- マシンベンチマークまとめ
- ラングリッサー
- ルフランの地下迷宮と魔女ノ旅団
- ルルアのアトリエ
- 動画
- 募集
- 唄詠
- 唄詠2
- 唄詠利用
- 挨拶
- 簡易キーチェンジャー
- 考察
- 開発
- 鼻歌採譜プラグイン