M.I.のプログラミング・メモ

2020年4月16日

Next.jsでスタティック・エクスポートしたサイトをAWS Amplify Consoleでホスティングする

今回は、Next.jsから（SSR無しの）スタティックなSPAとしてエクスポートしたサイトを、Amplify Consoleでホスティングしてみます。

サンプルReactアプリの作成

npm init -y
npm i -S react react-dom next

package.jsonはこんな感じになっています。

npm run dev を実行すると開発サーバーが立ち上がるのでブラウザで http://localhost:3000 を開きます。

npm run export を実行すると out フォルダにindex.htmlや404.html などのファイルが出力されます。今回はこれらの静的なHTMLファイルを Amplify Consoleでホスティングすることまで出来れば目的達成です。

amplify-cliのインストール

npm i -g amplify-cli

Amplifyの初期化

amplify configure

amplify init

Amplify Consoleでのホスティング設定を追加

amplify hosting add

上のコマンドを実行して「Continuous deployment...」を選ぶと、ブラウザが開いて接続するGitリポジトリを聞かれます。

amplify.yml という設定ファイルを手動で変更する必要があるので、ダウンロードしてプロジェクトのルートフォルダに保存します。

ここではNext.jsでスタティック・エクスポートした成果物をデプロイしたいので、下のように一部を変更します。(commandsとbaseDirectory)

変更したamplify.ymlファイルをGitリポジトリにコミット・プッシュします。

プッシュした時点で自動的にAmplify Console側でビルド処理が走ります。

ProvisionからVerifyまで全てグリーンになってから画面に表示されているURLをクリックすると、アプリケーションがデプロイされているのが確認出来ます。

今は「Hello!」と表示するだけで何もしないアプリケーションですが、後は通常のReactアプリケーションとして「npm run dev」で実行しながらローカルで開発します。

ひとまずブラウザ上だけで動くTodoアプリを作りました。

このままではブラウザを閉じるとデータが消えてしまうので意味が無いですが、次回以降のエントリではここに「ユーザー認証」と「REST API経由でのDynamoDBへのデータ永続化機能」を追加して行こうと思います。

AWS AmplifyでReactアプリにユーザー認証機能を追加する

AWS AmplifyとDynamoDBでサーバーレスなREST APIを構成する

現在のソースコードはこちらで参照出来ます！

https://github.com/mikehibm/amplify-test01/tree/blog-2020-04-15

　

2020年4月14日

AWS AmplifyでReactアプリ開発を試してみた

時間があったので前から気になっていた AWS Amplify を試してみることにしました。

とりあえず作ったのは、Todoリスト。React (Next.js) によるWebアプリです。

username / password でログインすると、DynamoDBに保存された自分のTodoリストが表示されます。

使った技術は、

フロントエンド
　- Next.js
　- Amplify Console (Hosting)

バックエンド
　- Lambda
　- API Gateway
　- DynamoDB
　- Cognito

という構成になりました。

至ってシンプルなTodoリストですが、Cognitoによるユーザー認証やDynamoDBなど慣れないモノについて使い方を調べながら作ったので結構時間がかかりました。

Amplify ConsoleによるフロントエンドのHosting機能は非常に便利で使いやすいと思いました。

ただ、今のところ全体的な感想としては「Firebase の方が使いやすいかなあ」という感じです。特にドキュメントが（内容的には非常に多岐に渡って網羅されているのですが）今ひとつ分かりにくい気がします。

これからせっかくなのでもう少し機能追加をしながら使い込んで見たいと思います。

1) Next.jsでスタティック・エクスポートしたサイトをAWS Amplify Consoleでホスティングする

2) AWS AmplifyでReactアプリにユーザー認証機能を追加する

3) AWS AmplifyとDynamoDBでサーバーレスなREST APIを構成する

　

2020年3月5日

iOSアプリにFirebase SDKを追加後、「symbol(s) not found for architecture x86_64」エラーでビルド出来ない場合の対処方法

iOSアプリに「Firebase SDK」を追加した後、「symbol(s) not found for architecture x86_64」エラーでビルド出来なくなるという問題に遭遇しました。

また数ヶ月後ぐらいに同じ問題にぶつかりそうな気がするので、再度ググらなくても良いように解決策をメモしておきます。

> Go to your Target Build Settings -> Other linker flags -> double click -> "+" button. -> Add $(inherited) to a new line.

ios - Firebase Undefined symbols for architecture x86_64 - Stack Overflow

2020年1月13日

Lenovo Flex 14 でWindowsとUbuntuのデュアルブートを設定する

「Core i5 10th Gen, RAM 16GB, SSD 512GB」のモデルが去年のCyber MondayセールでCostcoで$650で売られていたので購入しました。

SSDは速いしタッチ画面だし指紋認証も出来るし、なかなか良いです。

このマシンに早速デュアルブートでUbuntuを入れようとしたのですが、購入したままの状態だとインストーラがSSDを認識しないのでちょっとびっくり。最近のPCはこんなことになっていたんですね。

以下ググって見つけた解決策のメモです。

① Windowsを普通に起動。
コマンドプロンプトを管理者権限で起動し以下のコマンドを実行。

bcdedit /set {current} safeboot minimal

② BIOS SetUpでStorageをRSTモードからAHCIモードに変更。

「ドライブのデータが全部消えるけどいい？」という確認が出るが、実際には消えないのでYESを選択する。

③ 起動するとWindowsがセーフモードで立ち上がる。
コマンドプロンプトを管理者権限で起動し以下のコマンドを実行。

bcdedit /deletevalue {current} safeboot

④ 再起動するとWindowsが通常通り立ち上がるが、ドライブはAHCIモードになっている。

この状態で再起動してUSBからUbuntuをインストールすればOK。

　

2019年12月20日

VSCodeの「Uncalled function checks」について

VSCode 2019年11月（version 1.41）の更新内容のドキュメントを読んでいたら、「Uncalled function checks」なる機能が実装されたとありました。

Uncalled function checks
https://code.visualstudio.com/updates/v1_41#_uncalled-function-checks

if文の条件のカッコの中で、例えば下の例のようにオブジェクトのプロパティを評価しているつもりで書いた場合、

import * as fs from 'fs';

fs.stat('./index.ts', function(err, stats) {

    if (stats.isDirectory) {

    handleDirectory(stats);

  } else {

    console.log('Not a directory');

  }

});

function handleDirectory(stats: fs.Stats) {

  console.log(stats);

}

下のように「stats.isDirecroty」の下に波線が出て問題があることを示してくれるようになったそうです。

この例では、stats.isDirectory というのはプロパティではなく関数なので、stats.isDirectory() と書かなければ正しく動きません。

isDirectoryの後の「()」を忘れると、関数の戻り値ではなく関数そのものが評価されてしまうため、この例では常にif文の中の処理が実行されることになってしまいます。

もしプログラマが「stats.isDirectoryはboolean型のプロパティだ」と思い込んでしまっていたら、今までならこのようなバグにすぐに気付くことは難しかったのではないかと思います。

かなり細かい変更点ですが、良い改善だと思います。

2019年12月14日

VSCodeでWebアプリケーションを開発するときに便利な拡張機能

今回は日頃便利に使っているVSCode拡張機能をメモしておきます。

1. oneline-scroll

標準の動きだとCtrl+Up、Ctrl+Downでスクロールした時にカーソルも一緒に動くので、そのままスクロールしているとカーソルが画面の外に行ってしまって使いづらいのですが、これを入れると見た目のカーソル位置を変えずに一行ずつエディタの表示内容をスクロールさせることが可能になります。

この拡張機能のデフォルトのキーバインドは Alt+p, Alt+n ですが、私は下のように Ctrl+Up、Ctrl+Down に変更して使っています。

keybindings.json

{
"key": "ctrl+down",
"command": "onelinescroll.scrollDown"
},
{
"key": "ctrl+up",
"command": "onelinescroll.scrollUp"
},

2. Auto Rename Tag

HTMLやJSXファイルを編集しているときに開始タグを変更すれば自動的に終了タグも変更してくれます。

2019/12/20 追記：
VSCodeが標準で対応したようなのでこの拡張はもう必要ないかもしれません。
https://code.visualstudio.com/updates/v1_41#_html-mirror-cursor

3. htmltagwrap

選択領域を Alt+w 一発でタグで囲んでくれます。

4. GitLens — Git supercharged

エディタ画面内に最後にコミットした日付やコミットした人の名前などが表示されます。他にもGitのさまざまな状態をVSCode内で確認出来るようになります。

5. Git History

こちらもGitのための拡張機能ですが、履歴を見やすく表示することに特化しています。Git Lensと合わせて入れておくことをおすすめします。

6. Debugger for Chrome

Webフロントエンドの開発をする際には必携です。

7. npm

npm関連のコマンドをVSCode内でサクッと実行出来るようになります。

8. ESLint

JavaScript/TypeScriptでの開発には欠かせない静的解析ツールです。

9. Prettier - Code formatter

一人で開発するときも便利ですが、特にチームで開発するときにはコードの一貫性を保つために大変役に立ちます。

ESLintと同時に使うためには、下のページで説明されている設定を行う必要があります。

Integrating with Linters · Prettier

10. Peacock

VSCodeで複数のプロジェクトを同時に開いているときに、どのウィンドウがどのプロジェクトだったのか分からなくなることがあります。この拡張機能を使うと、プロジェクトごとにウィンドウ枠の色を簡単に変えることが出来ます。

実は、プロジェクトのフォルダ直下に.vscodeフォルダを作って、そこにsettings.jsonファイルを作成して下の内容を追加することでも同じことが出来ます。

settings.json

{
"workbench.colorCustomizations": {
"activityBar.background": "#2f7c47",
"activityBar.activeBorder": "#422c74",
"activityBar.foreground": "#e7e7e7",
"activityBar.inactiveForeground": "#e7e7e799",
"activityBarBadge.background": "#422c74",
"activityBarBadge.foreground": "#e7e7e7",
"titleBar.activeBackground": "#215732",
"titleBar.inactiveBackground": "#21573299",
"titleBar.activeForeground": "#e7e7e7",
"titleBar.inactiveForeground": "#e7e7e799",
"statusBar.background": "#215732",
"statusBarItem.hoverBackground": "#2f7c47",
"statusBar.foreground": "#e7e7e7"
}
}

ただやっぱり手動でやるよりもこの拡張機能を使った方が便利です。

11. Docker

最近は極力Dockerを使って開発環境をコンテナ化するようにしているので、Dockerfileとdocker-compose.ymlファイルを編集することが非常に多くなりました。この拡張機能を入れておくとこれらのファイルで補完入力が出来る他、イメージやコンテナの一覧の確認などもVSCode内で簡単に出来ます。

2019年8月28日

Visual Studio 2019で「定義にジャンプ」するとカーソルが消える問題への対処

Visual Studio 2019を使っていて「F12」キーでカーソル位置の関数や変数の定義にジャンプする機能をよく使うのですが、最近、これで飛んだ先のエディタ画面でカーソルの表示が消えてしまうことがよくあり、困っていました。

検索したらやはり同じく困っている人達がいて、こちらにIssueが上がっていました。

https://developercommunity.visualstudio.com/content/problem/625201/disappearing-cursor-in-text-editor-vs-2019.html

ただあまり優先度が高くないみたいで、開発チーム側からは「60日以内に対応するかもね～」みたいな感じの返答がされていました。

この機能では飛び先（定義元）が「まだ明示的に開いていないファイル」にあった場合にデフォルトで「プレビューウィンドウ」という特別な状態のタブで開かれるのですが、どうもこの「プレビューウィンドウ」に問題の原因があるような感じです。

試しに設定画面からプレビューウィンドウを使わないように設定してみたら、問題が解消しました。

2019年5月7日

初めてElmで何か作ってみた。- エニグマ（風）暗号機

最近子どもが学校の図書館かどこかで暗号に関する本を読んだらしく、

　「お友達のAちゃんと秘密のメッセージを交換したいの。エニグマみたいなので。」

とせがまれました。

いきなりエニグマ暗号機の名前が出てきたのでびっくりしましたが、

　「よし、エニグマ（風）暗号機を作ってあげよう！」

ということになりました。

この際なので、以前から試してみたかった、Elmを使うことにしました。

出来たモノはこちらに公開してあるのでもし良ければ試してみて下さい。

https://mysecretmsg.mikehi.now.sh/

伝えたいメッセージを打ち込んでEnterキーを押すと、「暗号化キー」の入力画面になります。

ランダムな4桁の数字を入力してもう一度Enterキーを押すと、暗号化されたメッセージが表示されます。

これを相手に伝えます。

暗号化されたメッセージを受け取った相手は、同じアプリを開いて暗号文を打ち込み、さっきと同じ4桁の「暗号化キー」を入力すると復号化されたメッセージを見ることが出来ます。

「暗号化されたメッセージを同じキーで再度暗号化すると元の平文に戻る（暗号化と復号化のプロセスが同じ）」、というのが「エニグマっぽい挙動」ということになるかと思います。

これをどうやって実現しようかと考えて少し悩みました。

単純に文字コードのXORを取れば出来そうなのですが、それだと結果が文字として表示出来ない値になってしまう事があるので、別の方法を考えました。

その結果、

- 入力可能な文字を2つのグループに分けて、2文字単位で「置換ペア」を予め決めておく。
- このような置換ペアのテーブルを10種類作っておく。
- 「暗号化キー」の各桁（0〜9の数字）を置換ペアのテーブルに対応させて、順に置換する。

という簡単な方法で実装してみました。

このアプリを使って秘密のメッセージを送る際には、メッセージとキーは別々の方法で伝える必要があります。（キーだけは事前に合意しておく、メッセージはメール、キーは口頭で伝える、など）

メッセージ本文と暗号化キーの両方を知っている人は誰でも復号化して元のメッセージを見ることが出来るので、キーを秘密にしておくことはとても重要です。（当たり前ですが。）

今回のソースコードはこちらにあります。

https://github.com/mikehibm/mysecretmsg

さて、完成したアプリを子どもに使わせて見たところ、予想外の感想が返って来ました。

「やっぱり...本物のEnigmaが欲しい！」

追記：

Elmを初めて使った感想を何も書いていなかったので思い出しながら書きます。

- 最初慣れるまでは結構大変。アプリケーションのひな形も Sandbox, Element, Document, Application とあってどれを使ったら良いのか迷った。

- 特にキー入力をどうやって処理するのか、ドキュメントを見てもよく分からず。Githubのサンプルとにらめっこして何とか動かせた。Decoderとか今でも完全には理解してません。笑

- 関数の集まりとしてアプリケーションが宣言的に定義出来てしまうというのは、やはり目からウロコ的な体験で面白かった。

- 上位レベルの関数から順に追っていけばプログラム全体が見通せるので、誰が書いてもそこそこ読みやすくなりそうな気がする。

- parcel + Elmの組み合わせでホットリローディングが出来るので、これはオススメ。

.

2019年4月4日

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と比べて特に軽くなった感じはしないので何が良くなったのかほとんど分からないのですが（笑）。

　

2019年3月22日

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

　

2019年3月7日

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

2019年2月16日

React StaticでGoogle Analyticsを使うには

React StaticでSPAアプリケーションを作ったときに、Google Analyticsでアクセス解析をするにはどうすればよいか、というメモです。

Reactだと react-ga というライブラリがよく使われているようです。これを使うとGoogle Analyticsへのトラッキング情報の送信が楽になるようですが、ブラウザ上でのページ遷移のタイミングは自分で検知して送信するようにコードを書かなければなりません。

React Routerを使う場合のサンプルがGitHubのdemoフォルダ内にありました。

https://github.com/react-ga/react-ga/blob/master/demo/app/withTracker.jsx

これを見ると、withTrackerというHigher Orderコンポーネントを作ってlocationの変更を検知してGAに送信するようになっています。

今回はReact Staticを使って作ったサイトだったので、ルーティングの仕組みが少し違ってこのサンプルコードをそのまま使うことが出来ず、少し手を加えたものを作って一応動くようにはなったのですが、なんとなくしっくり来ませんでした。

そこであらためてGoogle Analyticsのドキュメントを読み返してみると、下のような記述を見つけました。

https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
--

(...) SPA の場合、サイトで新しいページを読み込むときに、ページ全体を読み込むのではなくコンテンツを動的に読み込むため、analytics.js スニペットコードが実行されるのは一度だけとなります。つまり、以降のページビュー（仮想ページビュー）は、新しいコンテンツが読み込まれるときに手動でトラッキングする必要があります。

注: SPA を作成する際には自動トラッキング機能に含まれる urlChangeTracker プラグインを使用できます。このプラグインを利用することで、このガイドに記載されている重要な注意事項のすべてに対処できます。使用方法とインストール手順については、自動トラッキング機能に関するドキュメントをご覧ください。

--

青枠の注釈部分が特に重要です。

SPA用に、既にGoogleからurlChangeTrackerというプラグインが提供されているのです。これを使うことで、自分でページ遷移のタイミングを拾ってトラッキング情報を送信するという処理を書く必要が無くなります。

つまり、やるべきことは以下の通りになります。

1. 初回表示時にanalytics.jsを読み込んで初期化＆初回トラッキング情報を送信。
2. urlChangeTrackerを読み込む。（以降のページ遷移は自動的に送信される。）

結局、「react-gaを使わずに最初から自分で書いた方がシンプルになるのでは？」と思ったので一から書き直しました

--

--

render()メソッド内で autotrack.custom.js というスクリプトファイルを読み込んでいますが、これは urlChangeTrackerのドキュメントにしたがって必要なプラグインだけをカスタムビルドして作成したものを public フォルダ内に配置したものです。

このGoogleAnalyticsコンポーネントをApp.js内で読み込んで下のように使うことで、React Staticで作ったサイトでGoogle Analyticsがちゃんと機能するようになりました。

最後に、GoogleAnalyticsコンポーネント内で参照している gaID というプロパティですが、これは React Static の withSiteData というHoCを使って自動的に挿入されます。実際の値の定義は下記のように static.config.js ファイル内で行っています。
--

--

2019年1月13日

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

前回はリバーシのルールを実装して、人対人の対戦が出来るようになりました。

今回は、一人でも遊べるようにコンピュータの思考ルーチンを実装します。

動くものはこちらです。

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

タイトル画面でレベル1〜3が選べるようになっています。
（現段階ではどれを選んでも実際には難易度は同じです。）

ゲーム画面は前回と同じですが、コンピュータの手番になると自動的に思考ルーチンが呼び出され、
結果が出るとその座標に石を配置します。

現時点でのソースコードはこちらにあります。
https://github.com/mikehibm/reversi-react/tree/blog-3

さて、コンピュータとの対戦を実現するにあたって工夫する必要があるのは、「思考ルーチンを別スレッドで動かして、UIをブロックしないようにする」ことです。

通常ブラウザ上で動くJavaScriptアプリケーションでは一つのスレッドしか使えないので、時間がかかってCPUパワーを消費する処理を行うとその間UIが固まったりカクカクした感じになったりして操作性が悪くなります。

これを防ぐために、「Web Workers API」を使います。

ReactでWeb Workersを使う方法は、下の記事に書いたとおりです。

Create React AppでWeb Workerを使うには

この記事で調べた、「WorkerのJSファイルをBlobとして読み込んでからWorkerスレッドを生成する」という方法を使うことにしました。

ひとまず基本的な仕組みを実装することに主眼を置いたので、思考ルーチンの内容は単に「配置可能な座標のなかからランダムに選ぶ」だけの動作になっています。この処理だと実際には一瞬で終わってしまうのでWorkerスレッドを使う意味は全くありません。

Workerスレッドを使う意味があるような、もっとヘビーにCPUを使う思考ルーチンへの改良については、次回以降の記事で書くことにします。

playersフォルダ内のcomputerPlayer1.tsを見ると、thinkProc() という関数があり、そこに思考ルーチンの実態が入っているのが分かります。

---

この thinkProc関数を createWorker というユーティリティ関数に渡すことで thinkWorkerという名前のWorkerスレッドを作成しています。

const thinkWorker = createWorker(thinkProc);

対戦中にコンピュータの番が来たときには、

const result = await thinkWorker.execute({ board: { cells: board.cells } });

のように execute()メソッドを呼んで思考ルーチンを起動しています。このexecute()メソッドというのは、JavaScript標準のWorkerクラスを継承して作成した独自クラスで定義したメソッドで、 Workerクラスの postMessage()を呼んだ後のイベントハンドリングを抽象化したものになっています。

思考ルーチンの処理が終わると、戻り値のresult変数にはコンピュータが選択した座標が入っているので、後は人間がクリックした時と同じように store.setStone(result) を呼んでその座標を渡します。そうすると store内部で盤面の状態が適宜更新されてイベントが発行されるので、それを受けて画面の表示が自動的に更新されることになります。

ここまででコンピュータとの対戦機能を実現するための基本的な仕組みを実装することが出来ました。次回はそれなりに強い思考ルーチンを作ることにチャレンジしたいと思います！

2018年11月15日

Create React AppでWeb Workerを使うには

「Web Worker」を使うと、ブラウザ上のJavascriptでも複数のスレッドを使うことが出来るようになります。

Web Worker を使用する - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Using_web_workers#Web_Workers_API

これによって、CPU負荷の高い計算処理などを別スレッドで実行することで、画面の反応が鈍くなったりするのを防ぐことが出来ます。

今回は、Create React Appで作成したプロジェクトでWeb Workerを使う方法を調査しました。

1. publicフォルダにWorkerのJSファイルを配置して読み込む。

⇒　最も基本的で単純な方法です。publicフォルダに配置したファイルはそのままデプロイされるので下の方法で素直に読み込んで使うことが出来ます。

const myWorker = new Worker("worker.js");
myWorker.postMessage("hoge");

短所としては、TypeScriptやES2017などを使っている場合は別途自分でビルドしてpublicフォルダに配置する必要があることが挙げられます。

2. ejectしてからWebPackの設定に worker-loader または worker-plugin を追加する。

⇒　worker-loaderを使うと、別スレッドで動かしたい処理をModuleとして作成しておいて、使いたい箇所でそれをimportしてnewするだけでWeb Workerとして動作するようになります。コード例は、下のようになります。

import HelloWorker from './hello.worker.js';
const helloWorker = new HelloWorker();
helloWorker.postMessage('hoge');

詳細はこちら。

Add support for WebWorker with worker-loader (#3660) by iansu · Pull Request #3934 · facebook/create-react-app

worker-plugin を使う場合はこんな感じ。

const worker = new Worker('./worker', { type: 'module' });
worker.postMessage('hoge');

詳細はこちら。

Add support for WebWorker with worker-plugin by Krivega · Pull Request #5464 · facebook/create-react-app

3. ejectせずに react-app-rewired を使ってWebPackの設定に worker-loader または worker-plugin を追加する。

⇒　下のブログ記事にejectせずに上の2と同じ事をする方法が書かれていました。

How to use web workers with react-create-app and not ejecting in the attempt

ただ残念ながら、react-app-rewiredは最近のVersionには非対応なのでこの方法は現在は使えないようです。

4. WorkerのJSファイルをBlobとして読み込んでからWorkerスレッドを生成する。

⇒　下のissueへのコメントで紹介されている方法です。

Is it possible to use load webworkers? · Issue #1277 · facebook/create-react-app

関数をtoString()で文字列化して、さらにそれをBlobにします。こうすると、WorkerのコンストラクタにObjectURLとして渡してWorkerインスタンスを生成出来るようです。

let code = worker.toString();
code = code.substring(code.indexOf("{")+1, code.lastIndexOf("}"));
const blob = new Blob([code], {type: "application/javascript"});
const worker = new Worker(URL.createObjectURL(blob));

少々トリッキーですが、試してみたところ少なくともMacのChrome/Safari/FireFoxでは問題なく動いています。

この方法なら、WebPackの設定を変更する必要がありません。また上記1のようにWorkerのJSファイルだけ自前でビルド・配置したりする必要もありません。

具体的なコード例は後述します。

5. 公式にサポートされるまで待つ。

⇒　上の2で挙げた方法がPull Requestとして上がっており公式にも検討されているみたいですが、どうやらブラウザ互換性の問題(?)があるようで2018年11月時点ではまだマージされるには至っていません。将来的には公式にサポートされる可能性はあるので、気には止めておいた方が良いかも知れません。

Add support for WebWorker with worker-loader (#3660) by iansu · Pull Request #3934 · facebook/create-react-app

Add support for WebWorker with worker-plugin by Krivega · Pull Request #5464 · facebook/create-react-app

今回は上記4の方法を試してみたので、以下に紹介しておきます。

WorkerのJSファイルをBlobとして読み込んでからWorkerスレッドを生成するサンプル

index.jsと同じフォルダにcreateWorker.js, myWorker.jsの2つのファイルを作成します。

createWorker.js

---

myWorker.js

---

createWorkerとmyWorkerをimportして、下のようにすることでWorkerスレッドが使用可能になります。

import createWorker from './createWorker';
import myWorkerFunc from './myWorker';
const myWorker = createWorker(myWorkerFunc);

index.js

---

2018年11月4日

React/TypeScriptでリバーシゲームを作る (2) - ゲームロジック

前回はボード上に石を配置するまでを実装しましたが、今回はさらにリバーシのルールを実装して実際に遊べるようにしたいと思います。

実際に動いているものはこちらで試すことが出来ます。
https://reversi-d1kqojbar.now.sh/

ゲームのルールを実装するには、大まかに分けて次の4つの処理が必要になります。

「次に石を配置可能な場所」の判定と表示
挟まれた石を裏返す
石を置ける場所が無い場合の「パス」処理
ゲーム終了判定と勝敗の表示

1. 「次に石を配置可能な場所」の判定と表示

各手番が始まったときに、ボード上の全てのCellをループして次の処理を行います。

現在のCellからタテ・ヨコ・ナナメ全ての方向に向かってひとつずつ次のCellの色を確認する。

相手の石が置かれていたら、一時的な配列(arr)にそのCellの座標をプッシュして、さらにその方向の次のCellを確認。
自分の石が置かれていたら、その方向への探索を終了。
空白なら、その方向への探索を終了。
座標がボードの範囲外に出た場合は、その方向への探索を終了。

上の処理で最後に自分の石が見つかった場合で、かつ配列arrに要素が含まれている場合は、「挟める対象の相手の石が見つかった」ということなので、そのCellを「自分の石を配置可能なCell」としてマークしておく。（cell.placeableプロパティにtrueをセットする。）

Cellコンポーネントでは、対応するCellオブジェクトのplaceableプロパティが属性として渡されてくるので、その値がtrueの場合は、小さな黄色の円をSVGのcircleタグを使って表示するようになっています。

2. 挟まれた石を裏返す

プレーヤーがCellをクリックしたときには、CellコンポーネントのhandleClick()メソッドが実行され、さらにstoreのsetStone()メソッドにクリックされたCellの座標が渡されます。

store側では、Cellのplaceableプロパティがtrueでない場合は、そこには石を配置出来ないので何もせずにreturnしています。

そうでない場合は、クリックされた場所およびそこを起点として裏返し対象になるCellのcolorプロパティを全てプレーヤーの石と同じ色に変更します。

「裏返し対象のCell」というのは、あらかじめ上の「次に石を配置可能な場所」の判定処理の中で見つかったCellの座標一覧をcell.turnableCellsというプロパティに格納してあるので、それをループすることで取得できます。

裏返し対象のCellのcolorプロパティを全て変更する処理が終わった後、getNextTurn()メソッドを呼んで次のプレーヤーに手番を交替しています。

最後に'board_changed'イベントを発行して、各コンポーネントの描画を更新しています。

3. 石を置ける場所が無い場合の「パス」処理

現在の手番で石を置ける場所が見つからない場合は、ボードの placeableCount プロパティが 0 になります。

その場合は、ひとまず alert()でメッセージを表示した後、storeのskipTurn()メソッドを呼んで手番を「パス」します。

この処理はゲームの進行に関わる処理なので、Gameコンポーネント内で行っています。

skipTurn()メソッドの中では、ボードの状態を変更せずに、単に現在の手番を示す turn プロパティを更新して'board_changed'イベントを発行しています。

4. ゲーム終了判定と勝敗の表示

Gameコンポーネントでstoreから'board_changed'イベントを受け取った時に、finishedプロパティがtrueであればゲーム終了なのでその旨をalert()で表示します。

finishedプロパティがtrueになる条件は、以下の通りです。

空白のCellが無くなった。
黒または白のどちらかが全滅した。
両者とも置く場所が無くなった。

ボードの状態を更新する際にこのいずれかに当てはまるかどうかを毎回チェックしてfinishedプロパティの値をセットしています。

以上でリバーシのルールを実装して実際に遊べる状態にまで持って行くことが出来ました。

次回は、コンピュータの思考ルーチンを作成してコンピュータとの対戦機能を追加したいと思います！

今回の時点でのソースコードはこちら：

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

2018年10月20日

React/TypeScriptでリバーシゲームを作る (1) - ボードの描画と石の配置

実は2011年に「Androidでオセロゲームを作る」というのをやった事があります。5回のブログ記事に分けて少しずつ作り込んで行ったのですが、このシリーズが今でも結構アクセスされているみたいです。

これを読み返しながら、ふと「今だったら、ReactでWeb版を作っておけばネイティブアプリ化も結構簡単に出来るし色々と応用が効くのでは？」と思い付きました。

そこで、作り始めて見ました。

現時点で動作しているものはこちらで試せます。

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

タイトル画面

ゲーム画面

ソースコードはこちら：

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

まだ画面をクリックして石を置くことが出来るようになっただけでゲームのルールが何も実装されていません。

しかし、リバーシゲーム作りは楽しいですね！

以下、ここまでに書いたコードの大まかな説明です。

コンポーネント階層

今のところ下のような階層になっています。

App　（アプリケーションの大枠）

Menu　（メニュー画面）
Game　（ゲーム画面）

Board　（ボードの背景や枠線などを描画するコンポーネント）

Cell　（一つのセルを描画するコンポーネント）

状態管理

アプリケーションの状態は store.ts ファイルで一括管理しています。

ここでエクスポートしている Store クラスが EventEmitter を継承しており、状態に変更があったときにイベントを発生(emit)することでそれを各コンポーネントに通知して、各コンポーネントが画面を更新するという流れになっています。

例えば、メニュー画面でスタートボタンが押されたときには、setPage()メソッドが呼ばれて Store クラス内で保持している page 変数の値が変更されるので、その際に 'page_changed' というイベントを発生させています。

このイベントは App コンポーネントが監視していて、イベント発生時に最新の page の値を受け取ってメニュー画面を表示するのかゲーム画面を表示するのかを切り替えています。

ボードとセルの描画

Boardコンポーネントでは、SVGを使ってボードの緑色の背景や縦と横の罫線などを描画しています。

また重要なのは、Cellコンポーネントの配列を作成してそれを子コンポーネントとして描画していることです。ボード上には 8 x 8 で64個のCellコンポーネントが配置されることになります。

Cellコンポーネントでは、propsとして渡された座標値にしたがってSVGのRectangleを描画します。このRectangleがマウスのクリックイベントを受け取る入り口になります。

また、propsのひとつとしてcolorが渡されますが、これはそのセルが空白なのか、黒の石が配置されているのか、または白の石が配置されているのか、を示します。

Cellコンポーネントではその値によって黒または白の円を描画する処理を行っています。

あるセル上でマウスがクリックされた時は、次の流れで最終的にセルに石が描画されるようになっています。

handleClick()メソッドが呼ばれる。
Storeクラスの setStone()メソッドが呼ばれる。
クリックされた場所に石が無ければ、その場所の colorプロパティを現在の手番の色に変更する。
Storeクラスが'board_changed'イベントを発生する。
Boardコンポーネントがイベントを受け取り、ボード全体を再描画する。
クリックされた場所に対応するCellコンポーネントが石を描画する。

こんな感じで、ひとまずボードの描画と石の配置までは出来るようになりました。

次回は、リバーシゲームとしてのルールを実装して実際に遊べるようになるまでを作ってみたいと思います！

2018年8月10日

ReactでCSVファイルを読み込んでクライアント側で帳票を出力する

やりたかった事

あるWebサービスからCSV形式でデータをエクスポート出来るのですが、そのデータからちょっとした帳票を印刷したいという要望がありました。

そこでなるべく手っ取り早く、ブラウザだけで動くものが出来ないかと考えて作ってみたのが今回のプログラムです。

大まかな流れは、

ローカルフォルダにあるCSVファイルを指定するとブラウザ上のJavaScriptでその内容を読み込む。
読み込んだ内容からHTMLで帳票を生成して表示する。
ブラウザの印刷機能を使って手動で印刷またはPDFとして保存する。

という感じになります。

CSVファイルの例

作成したい帳票

実際に動いているもの

https://mikehibm.github.io/react-csv-example/

1. プロジェクトを作成する

プロジェクトは前回のエントリーと同様に Create React App + TypeScriptで作ることにします。

npm install -g create-react-app
create-react-app my-app --scripts-version=react-scripts-ts
cd my-app/
npm start

FileSelect.tsx と Report.tsx というファイルを新規作成して、App.tsx からこれらを呼び出して使うようにします。

最初は FileSelect コンポーネントを表示してCSVファイルの選択を行い、ボタンがクリックされたらファイルの内容を読み取って、Report コンポーネントに渡します。

Report コンポーネントが表示されている時は FileSelect コンポーネントは非表示になるようにします。

2. JavaScriptでCSVファイルの内容を読み込む

HTML5のFile APIを使います。FileReaderでの読み込みは非同期処理なので、処理をラップしてPromiseを返す関数を作りました。

3. ファイルの内容をパースしてオブジェクトの配列に変換する

上の readFileAsText() からファイル全体の内容が文字列として返ってくるので、それをパースしてオブジェクトの配列に変換します。

具体的には、まず改行文字で区切って行単位の配列に分け、さらにその各行について「,」で区切って列単位の配列に分けます。つまり最終的には string[][] （文字列の配列の配列）になります。

ここでは簡単に改行文字(\n)と「,」で区切っているだけですが、実際には改行文字が違う、値に「,」が含まれている、などさまざまなケースがあり得るのでCSVのパース処理はちゃんとやろうとすると実は結構大変です。

なので必要であれば下の記事で紹介されている csv-parser などを使った方が良いかもしれません。

ブラウザ上でCSVファイルをパースする
https://qiita.com/ledsun/items/e38ee0dff8f26bf8d930

その後、文字列の配列（の配列）から、今度は帳票を生成する時に扱いやすいように、WorkItemというクラスのインスタンスの配列に変換します。

この時に、文字列型から日付型への変換や、CSVファイルに無い項目の値(duration)の計算なども同時に行っています。

4. HTMLで帳票を生成する

WorkItemオブジェクトの配列を受け取って、tableタグで表形式のHTMLに変換します。

本当は帳票のタイトル、見出し、明細行などをそれぞれ別のコンポーネントに分けた方が良いのだと思いますが、今回はあまり時間がなかったので1コンポーネントで作ってしまいました。

あとは画面に表示された帳票をブラウザの印刷機能で印刷するだけです。デフォルトではおそらく余計なヘッダーやフッター（ページタイトルやURL）も印刷されてしまいますが、印刷時の設定画面でこれらをオフにしておけばきれいに出力されるはずです。

今回作ったアプリの全ソースコードは下記にあります。

https://github.com/mikehibm/react-csv-example

2018年8月8日

Create React App + TypeScript で最初につまずいたこと

ちょっとしたサンプルプログラム的なものを Create React App ＋ TypeScript で作ろうと思ったのですが、思わぬところでいきなり詰まってしまいました。

Create React App（以下CRA）で TypeScript と言えば、

https://github.com/wmonk/create-react-app-typescript

が定番だと思います。

さて、下の通りにプロジェクトを作成して実行しました。

npm install -g create-react-app
create-react-app my-app --scripts-version=react-scripts-ts
cd my-app/
npm start

もちろんここまでは全く問題なし。早速VS Codeでプロジェクトのフォルダを開いて、アプリケーションを作り始めました。

ところが、あるタイミングでふと

console.log("hogehoge");

を入れて実行してみようと思ったところ、いきなりコンパイルエラーになってしまいました。

「Calls to 'console.log' are not allowed.」というエラーですが、これにはちょっと驚かされました。console.logを入れただけでアプリケーションが動かなくなるなんて。。。

これですが、デフォルトで設定されているTSLintのルールがめちゃくちゃ厳格なものになっているのが原因なようです。

厳格すぎてこれでは使いづらいという声も多く、GitHubのIssuesでも議論になっているようですね。

オリジナルのCRA作者のDan Abramov氏からも、「この厳しいルールはCRAを作った時の思想（初心者でもすぐに動くものを作り始められる。本当にクリティカルなもの以外はワーニングのみでエラーにはしない。）と合わないから、ゆるくした方が良いんじゃない？」という趣旨のIssueをわざわざ上げられているぐらいです。

create-react-app-typescript リポジトリ作者のWill Monk氏によると、「最初は自分が職場で使っているルールをコピーして使っていたのだけれど、後で一般的に推奨されているプリセット（"tslint:recommended", "tslint-react"など）を使うように変更した」との事。「それでもまだルールが厳しすぎるなら、誰かがオリジナルのCRAと同等のゆるいルールの設定を作ってPRしてくれたら喜んでそれをマージするよ。」とも言っているので、彼自身は特にどうしても厳しいルールを他の人に強制する気は無いようです。

その後このIssue上で議論は進んでいるようですが、このブログ執筆時点の最新版ではまだルールの変更には至っていないようです。

さて、なにはともあれとりあえず console.log を使えるようにする方法ですが、上のIssueでも言及されているのですが、Microsoftによる下記のページにわかりやすくはっきりと記載されていました。

https://github.com/Microsoft/TypeScript-React-Starter

プロジェクトのルートフォルダにある tslint.json ファイルを下のように書き換えればOKです。(赤字を削除、青字を追加。)

{
- "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+ "extends": [],
+ "defaultSeverity": "warning",
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts"
]
}
}

これで問題なく開発が続けられるようになりました！

　

2018年5月6日

Dockerコンテナ内でASP.NET Core 2.1 Webアプリをビルド・実行する

やりたかった事：

Macに.Net SDKを入れずにASP.NET Core 2.1のWebアプリを開発したい。

試した事：

Docker(Version 18.03.1-ce-mac64)でMS公式の.NET 2.1 SDKイメージを動かしてみました。

まずは、SDKの公式イメージからコンテナを起動します。

docker run --rm -it \
-v `pwd`:/app/ \
-w /app/aspnetapp \
microsoft/dotnet:2.1-sdk

これを実行すると、Mac側のカレントディレクトリがコンテナの/app/ディレクトリにマウントされて、かつコンテナ内のカレントディレクトリが/app/aspnetapp になった状態でシェルが起動します。

ここから、

dotnet new webapi

を実行すればWeb APIのひな形のコードが生成されます。

さらに、

dotnet run

を実行すればデフォルトの5000番ポートでWeb APIが実行されますが、このままだとポートマッピングの設定をしていないのでホスト側からはアクセス出来ません。

とりあえずこれはCtrl+Cで終了してコンテナを終了し、次にdocker runコマンドに -p オプションを付けた上で、シェルを開くのではなく「dotnet watch run」コマンドを実行してみます。

使ったコマンドはこちら。

PORT=8080
docker run --rm -it --name watcher \
-p $PORT:$PORT \
-v `pwd`:/app/ \
-w /app/aspnetapp \
microsoft/dotnet:2.1-sdk \
dotnet watch run $PORT

任意のポート番号でアプリを動かせるように、事前にProgram.csファイルにちょっと細工をしておきました。

#########
#########

起動後、指定したポート番号でアプリが動いているのが分かります。

分かった事：

docker runでコンテナを起動する際に -v オプションでカレントディレクトリをコンテナ内のディレクトリにマウントしておけば、ソースコードはホスト（Mac本体）側で編集し、BuildやPublishはコンテナ内で行うという事が出来ました。

コンテナ内で動かすコマンドを「dotnet watch run」としておけばコードを変更したら自動でアプリを再起動してくれます。

これでMac本体に.Net SDKを入れずにASP.NET Core 2.1のWebアプリを開発するという目的が達成出来ました！

参考URL：

dotnet-docker/aspnet-docker-dev-in-container.md at master
https://github.com/dotnet/dotnet-docker/blob/master/samples/aspnetapp/aspnet-docker-dev-in-container.md
MS公式Dockerイメージを使って.NET Core開発を行う（Mac） - ryuichi111stdの技術日記
http://ryuichi111std.hatenablog.com/entry/2016/11/07/020326

2018年5月1日

JavaScriptで "B" + ["a", "a"].join("aaa" - 1) がBaNaNaになる理由

Ethereum開発者のVitalik氏がこんなツイートをしていたのを見ました。

試しにChromeのDeveloper Toolsを開いて実行して見ると、確かに「BaNaNa」と表示されました。

"B" + ["a", "a"].join("aaa" - 1)
"BaNaNa"

不思議に思ったので少しずつ変えながら何パターンか試してみます。

"B" + ["a", "a"].join("aaa")　→　"Baaaaa"

"B" + ["a", "a"].join()　　→　"Ba,a"

"B" + ["a", "a"].join("")　　→　"Baa"

"B" + ["a", "a"].join("" - 1)　　→　"Ba-1a"

"B" + ["a", "a"].join(1)　　→　"Ba1a"

"B" + ["a", "a"].join("x" - 1)　　→　"BaNaNa"

なるほど、分かってきました。

"aaa" - 1 の部分が「NaN」として出力されて、それがArray.join()の引数になるので

B + a + NaN + a

で「BaNaNa」というわけですね。

なるほど！

　

2018年3月1日

TypeScriptを使うならstrictNullChecksオプションが便利

TypeScript の strictNullChecks オプションというものを知ったのでメモしておきます。

tsconfig.json の compilerOptions に

"strictNullChecks": true

を追加しておくと便利。

これをすることで、string や number などに null や undefined を代入することが出来なくなる。

let name: string;
name = null; ← ここでコンパイルエラー

let count: number;
count = undefined; ← ここでコンパイルエラー

null や undefined を代入したい場合は、型指定時に明示しておけばOK。

let name: string | null;
name = null; ← これはOK

let count: number | null | undefined;
count = undefined; ← これはOK

「ユニオン型」というらしいですね。

http://d.hatena.ne.jp/m-hiyama/20180117/1516157225

色々なシチュエーションで、「この変数の値は null/undefined になる可能性がある（もしくは無い）」という事を明示出来るのでnullチェック忘れや過剰なnullチェックを減らす事が出来ます。

　

2017年11月17日

高解像度のディスプレイでリモートデスクトップ接続をした時にアイコンや文字が小さすぎて見えない問題への対処

Microsoftから提供されている「Remote Desktop Connection Manager」を使うと良い感じになったのでメモしておきます。

ダウンロードページはこちら。
https://www.microsoft.com/en-us/download/details.aspx?id=44989

バージョン2.7の日付が2014年11月と古いですが、これ以上新しいバージョンは検索しても見つかりませんでした。

Remote Desktop Connection Managerを起動したら、まず File - New で新しいグループを作ります。

そのグループの右クリックメニューからプロパティを開いて「Remote Desktop Settings」タブを開き、「Full Screen」をチェックします。

次に「Display Settings」タブを開いて、「Scale docked remote desktop to fit window」および「Scale undocked remote desktop to fit window」のチェックをONにしておきます。

あとは、そのグループの下に個々の接続先サーバーの設定を追加して行けばOKです。

これで接続先の解像度が低い場合に文字やアイコンが小さすぎて操作出来ないという問題がなくなります。

　

登録: 投稿 (Atom)