Visual Studio 2019をインストールしたらASP.NET Webアプリケーションが動かなくなった問題のとりあえずの対応方法

Visual Studio 2019が正式リリースされたとのことで、早速インストールしてみました。


AIによるサジェスト機能とかはあまり期待していないですが、全体的に動作が軽くなるそうで、もし本当ならそこは嬉しいです。


Visual Studio 2017 (15.9.11)がすでに入っている環境に、追加で入れました。


インストール完了後、既存のASP.NET Webアプリケーションをデバッグ実行しようとすると、次のエラーが出て実行出来なくなってしまいました。

Could not load file or assembly 'Microsoft.VisualStudio.Web.PageInspector.Loader, Version=1.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' or one of its dependencies. The system cannot find the file specified.

このエラーメッセージをそのままGoogle検索して、下のページに解決策を見つけました。


https://developercommunity.visualstudio.com/content/problem/398640/could-not-load-file-or-assembly-microsoftvisualstu-7.html



まずは Visual Studio Installer を起動して、Modifyボタンを押し、Installation locationsのタブを表示して、ダウンロードキャッシュを有効にする必要があるようです。

その後、MoreボタンからRepairをクリックして修復インストールを行います。

さらに、修復インストールが完了したあと、

C:\ProgramData\Microsoft\VisualStudio\Packages\Microsoft.VisualStudio.AspNetDiagnosticPack.Msi,version=16.0.12311.10635

のフォルダ内にある、AspNetDiagnosticPack.msi のファイルを右クリックして「Repair」を実行します。


以上の手順で無事復活しました。


パッチが出るまではおそらく同じ問題にぶつかる人がいると思いますので、メモしておきます。




追記：

今日から2019をメインで仕事に使っていますが、この記事に書いた問題以外は特に問題もなく今のところ普通に使えています。

2017と比べて特に軽くなった感じはしないので何が良くなったのかほとんど分からないのですが（笑）。








　

React/TypeScriptでリバーシゲームを作る (5) - アニメーション

前回でようやくそれなりに強い思考ルーチンを実装することが出来たので、今回は仕上げとして石を裏返すときのアニメーションと、画面遷移時のアニメーションを実装します。


こちらを開くと実際に遊べます。
https://reversi-d1kqojbar.now.sh/

現時点のソースコードはこちらにあります。

https://github.com/mikehibm/reversi-react/tree/blog-5

1. 石をひっくり返す時のアニメーション

まず、石を置いた時には StoreクラスのsetStone()メソッドが呼ばれるようになっているので、その中で20msの間隔を空けて20回の「EV_BOARD_FLIPPING」イベントを発生するようにしました。

このイベントをBoardコンポーネントで受け取って、各セルを描画する際に、「もしひっくり返しアニメーションの実行中で、かつひっくり返し対象のセルであれば、Cellコンポーネントにflippingプロパティを通してその旨を伝える」ということを行っています。

Cellコンポーネントでは、flippingプロパティがnullでない場合は、

　flipping.count / flipping.total 

で現在のアニメーションの進行率が分かるので、それに応じて円を描画するときの横幅を変化させています。

さらに、アニメーションの進行率が 50% を越えた時点で石の色を反転させるようになっています。

これで石をひっくり返すアニメーションは上手く行きました。


石をひっくり返すアニメーション

---



ちなみに、CSSトランジションを使えば自分で石の横幅を変化させなくても、開始状態と終了状態を指定するだけでブラウザ側でアニメーションさせることが出来ます。その方法を使った方がパフォーマンス的には良かったかも知れません。

2. 画面遷移時のアニメーション

今回のアプリケーションでは、

　タイトル画面 → 設定画面 → ゲーム画面 

という流れで画面が切り替わるようになっています。この切り替えのタイミングで、次に進む場合は右から左へ、前の画面に戻る場合は左から右へとアニメーションする処理を入れました。

タイトル画面 → 設定画面 → ゲーム画面の遷移アニメーション

---

この部分は、CSSトランジションを使っています。

Reactでは 「React Transition Group」というライブラリを使うのが半ば公式に推奨されているみたいです。

https://github.com/reactjs/react-transition-group

これを使うのも悪くないのですが、今回は勉強のために全て自前で実装してみました。その結果、かなり試行錯誤して時間がかかりましたが、分かってみればそんなに難しくはないので、これぐらいの画面遷移であれば自前でやってしまうのもありだと思います。

基本的には、CSSで表示状態のスタイルと非表示状態のスタイルを定義しておいて、各画面のコンポーネントでCSSクラスを切り替えるだけです。

非表示状態の画面は透明(opacity:0)でかつ表示位置が画面の範囲外になるようにしていますが、それだけだとドキュメント全体のサイズが、表示されていない部分まで含んで認識されてしまって、余計な横スクロールが出来てしまう状態になったので、そこは一工夫が必要でした。

これに対処するために、一段上のAppコンポーネントのスタイルで、

.App {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

とすることで、画面外の部分はドキュメント全体のサイズに影響をおよぼさないようになり、余計な横スクロールを抑止することが出来ました。

3. スマホ対応

AndroidやiOSの実機で動作確認していると、色々と気になる点が出てきました。

スマホ向けにPWAなどでゲーム的なアプリケーションを作る場合には常に出てくる問題だと思いますが、以下の３つの問題があります。

1. ダブルタップ問題
2. ピンチズーム問題
3. Pull to Refresh問題


これらになんとか対処するために色々と調べて、以下の変更を行いました。どれがどの問題への対策だったかよく覚えていないのですが、とりあえず下記の対策をしておけば良いのではないかと思います。


htmlタグに属性を追加

style="overflow-y: hidden;"

viewportメタタグの設定

meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no"

モバイルアプリ用メタタグの追加

meta name="apple-mobile-web-app-capable" content="yes"
meta name="mobile-web-app-capable" content="yes"

これで少なくとも手元のAndroid端末（Android 9.0）ではほぼ完璧になりました。

Chromeブラウザでページを開いてから、「ホーム画面に追加」を選んでホーム画面から起動すると、ブラウザのアドレスバーも無くなり、ダブルタップしようが上下にスワイプしようがびくともしません。ほぼネイティブアプリの感覚ですね。

手元のiOS端末(iPhone 5s / iOS 12.1.3)では、Pull to Refresh問題は解消しましたが、ダブルタップやピンチズームは反応しなかったり何かのタイミングで急に出来てしまったり、よくわからない感じです。（笑）

4. 終わりに

さて、ここまでで今回の「React/TypeScriptでリバーシゲームを作る」シリーズは無事終了です！ 10月から3月まで、ほぼ半年もかかってしまいました。その間にGoogle発のクロスプラットフォーム開発環境であるFlutterが正式リリースされて、最近はかなり人気も高まってきているようです。


今度はFlutterでまたリバーシゲームを作ってみようかなあと思っているところです。




React/TypeScriptでリバーシゲームを作る

(1) - ボードの描画と石の配置
https://blog.makotoishida.com/2018/10/reacttypescript.html

(2) - ゲームロジック
https://blog.makotoishida.com/2018/11/reacttypescript-2.html

(3) - 思考ルーチンその1
https://blog.makotoishida.com/2019/01/reacttypescript-3-1.html

(4) - 思考ルーチンその2
https://blog.makotoishida.com/2019/03/reacttypescript-3-2.html

(5) - アニメーション
https://blog.makotoishida.com/2019/03/reacttypescript-5.html






　

React/TypeScriptでリバーシゲームを作る (4) - 思考ルーチンその2

前回でコンピュータの思考ルーチンの枠組みは出来ましたが、まだ単純なルールで動いているだけなので全く強くありませんでした。

今回は、そこそこ強い思考ルーチンを作ることに挑戦してみました。

出来たソースコードはこちらにあります。
https://github.com/mikehibm/reversi-react/tree/blog-4


動いているものはこんな感じになりました。
---

---

下のURLで実際に動かせますのでぜひ試して見て下さい。

https://reversi-d1kqojbar.now.sh/


CPUのレベルは１から３まであります。レベル１は１手先、レベル２は２手先、レベル３は３手先まで打てる可能性のある場所を全て調べて、最も有利になりそうな場所に打つようになっています。

思考ルーチンの内容は長くなるので省略しますが、とても面白いテーマです。興味のある方には、次の本を強くおすすめしておきます。これからリバーシを自分で作ってみようと思う人には本当に役に立つ情報が詰まっています。
---

---

今回は、上の本では「用いないほうが良い」と書かれている「得点テーブル」による評価を使ってしまいましたが、それに加えて「確定石」の数による評価を組み合わせて実装したところ、意外とまあまあ強い思考ルーチンになったような気がしています。


さて、このアプリケーションではコンピュータの思考ルーチンを Web Worker を使って別スレッドで実行するようになっています。と言うと簡単に聞こえますが、実際にはかなり試行錯誤と苦労の連続でした。


なぜ苦労したかと言うと、それなりに複雑な処理をWebWorkerで実行しようとするとやはり TypeScript を使いたいし、複数のWorker間で共通に使える関数はモジュール化して import 出来るようにしたかったからです。


① WebWorkerもTypeScriptで書く、かつimport文を使えるようにする

②  Create React App で作成されたプロジェクトをejectせずに（Webpackの設定を変えずに）これを実現する


この①と②の目標を達成するためにいろいろと試した結果、前回の記事で使った「Workerの関数をtoString()で文字列化した上でBlobとして読み込んでからWorkerスレッドを生成する」という方法ではなく、シンプルな

　　const worker = new Worker('my-worker.js');

という形式で単にpublicフォルダに置いたJSファイルを指定して読み込む方法を使うことにしました。

その上で、WebWorker関連のTypeScriptファイルだけをアプリケーション本体とは切り離して独自にトランスパイルする方法を考えました。


ただ、共通部分をモジュール化して import/export を使うというのは、結局WebWorkerとの組み合わせではいい感じで正しく動かすための設定方法を見つけることが出来ませんでした。（tscでトランスパイルするのではなくwebpack/babelとworker-loaderプラグインなどを使えばなんとかなるのかも知れません。詳細は末尾の参考URL参照）


その代わりに、

　　importScripts('インポートされるJSファイル名') 

という記法はWebWorkerの中で問題なく使えたので、これを利用することにしました。


プロジェクトのルートに tsconfig.json がありますが、それとは別に「tsconfig.worker.json」ファイルを作成しました。

---

---


　　"module": "none",

とすることでモジュールシステムを使わないようにしている点と、

　　"outDir": "public"

でトランスパイル後のJSファイルを直接publicフォルダに保存している点に注目です。


これで、

　　tsc -p tsconfig.worker.json

を実行すると
　　public/reversi.worker.js
　　public/players/cpu1.worker.js
　　public/players/cpu2.worker.js
　　public/players/cpu3.worker.js

という4つのJSファイルが出来るようになります。


cpu1〜3.worker.jsの先頭では、

　　importScripts('../reversi.worker.js');

とすることで共通部分である reversi.worker.js を読み込んでいます。


あとは、アプリ内でWorkerを生成する必要があるときに

　　new Worker('players/cpu1.worker.js');

のような感じで読み込めば良いということになります。




参考URL：

Workerを駆使するためのプロジェクト構成 with webpack - Qiita
https://qiita.com/_likr/items/d382dc120a942ba4c6fe

4パターンのWebWorker生成方法とインラインワーカーの技法 - Qiita
https://qiita.com/mohayonao/items/872166cf364e007cf83d

Two example projects which use WebWorker in TypeScript + Webpack environment.
https://github.com/Qwaz/webworker-with-typescript 

React/TypeScriptでリバーシゲームを作る

(1) - ボードの描画と石の配置
https://blog.makotoishida.com/2018/10/reacttypescript.html

(2) - ゲームロジック
https://blog.makotoishida.com/2018/11/reacttypescript-2.html

(3) - 思考ルーチンその1
https://blog.makotoishida.com/2019/01/reacttypescript-3-1.html

(4) - 思考ルーチンその2
https://blog.makotoishida.com/2019/03/reacttypescript-3-2.html

(5) - アニメーション
https://blog.makotoishida.com/2019/03/reacttypescript-5.html






.