Visual Studio Codeの設定の備忘録

メニューの「ファイル」→「基本設定」→「設定」を選択と設定が表示される。
左側が既定の設定、右側に変更する設定を挿入する。

垂直ルーラーを表示する

80文字目と120文字目にルーラーを表示する

// 垂直ルーラーを表示する列
"editor.rulers": [80, 120],

空白文字を表示する

// エディターで空白文字を表示する方法を制御します。'none'、'boundary' および 'all' が使用可能です。'boundary' オプションでは、単語間の単一スペースは表示されません。
"editor.renderWhitespace": "boundary",

ファイルを開くときにエンコードを推測する

// 有効な場合、ファイルを開くときに文字セット エンコードを推測します
"files.autoGuessEncoding": true,

ファイルの改行コードを設定する

// 既定の改行文字。LF の場合には \n を CRLF の場合には \r\n を使用してください。
"files.eol": "\r\n",

末尾の空白をトリミングする

// 有効にすると、ファイルの保存時に末尾の空白をトリミングします。
"files.trimTrailingWhitespace": true,

ファイルの末尾を改行にする

// 有効にすると、ファイルの保存時に最新の行を末尾に挿入します。
"files.insertFinalNewline": true,

ターミナルにBash on Ubuntuを使う

// Windows でターミナルが使用するシェルのパス。 Windows に同梱されているシェルを使用する場合 (cmd、PowerShell、または Bash on Ubuntu) 。
"terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\bash.exe",

MSTestでprivateメソッドをテストする

MSTestでprivateメソッドをテストする方法。

下記のサンプルクラスを使用します。

MyClassは、privateメソッドの”greet”と、staticのprivateメソッド”add”を持ちます。

public class MyClass
{
  private string greet(string name)
  {
    return "Hello " + name;
  }

  private static int add(int a, int b)
  {
      return a + b;
  }
}

privateメソッドのテスト

privateメソッドをテストするには、PrivateObjectクラスのInvokeメソッドを使用します。

[TestMethod]
public void TestGreet()
{
  var myClass = new MyClass();
  var pbObj = new PrivateObject(myClass);
  var actual = (string)pbObj.Invoke("greet", "World");
  Assert.AreEqual("Hello World", actual);
}

テスト対象のインスタンスを引数にして、PrivateObjectのオブジェクトを作成します。

実行するprivateメソッドの名前と、メソッドの引数をInvokeメソッドに渡します。
Invokeメソッドはobjectを返しますので、適切な型に変換します。

private staticのテスト

private staticメソッドをテストするには、PrivateTypeクラスのInvokeStaticメソッドを使用します。

[TestMethod]
public void TestAdd()
{
  PrivateType privateType = new PrivateType(typeof(MyClass));
  int actual = (int)privateType.InvokeStatic("add", 1, 2);
  Assert.AreEqual(3, actual);
}

staticなprivateメソッドをテストするには、テストするクラスを引数にしてPrivateTypeオブジェクトを作成します。

実行するstaticなprivateメソッドの名前と、メソッドの引数をInvokeStaticメソッドに渡します。
InvokeStaticメソッドはobjectを返しますので、適切な型に変換します。

jupyter notebookにmatplotlibを使ってグラフを描画する

jupyter notebookにグラフを表示するためのおまじない

%matplotlib notebook

または

%matplotlib inline

notebookはグラフを操作できる。

inlineはグラフが画像になる。

グラフを書いてみる

%matplotlib notebook
# ライブラリの読み込み
import matplotlib.pyplot as plt
# グラフを描画する
plt.plot([1,2,3,4])

X軸、Y軸の値を指定する

%matplotlib notebook
import matplotlib.pyplot as plt
# X軸、Y軸の値を指定する
plt.plot([1,2,3,4], [2,4,6,8])

直線以外の描画

青円

plt.plot([1,2,3,4], [2,4,6,8], 'bo')

赤い下向き三角

plt.plot([1,2,3,4], [2,4,6,8], 'rv')

指定できる文字列は「Matplotlib documentation」を参照。

plt.plot([1,2,3,4], [2,4,6,8], 'bo')
plt.plot([1,2,3,4], [4,3,2,1], 'rv')
plt.plot([1,2,3,4], [7,7,7,7], 'g*')
plt.plot([1,2,3,4], [6,6,6,6], 'mp')

グラフにラベルをつける

%matplotlib notebook
import matplotlib.pyplot as plt
plt.plot([1,2,3,4])

# X軸のラベル
plt.xlabel('X Label')
# Y軸のラベル
plt.ylabel('Y Label')

軸の設定

X軸Y軸の範囲を指定する

%matplotlib notebook
import matplotlib.pyplot as plt
plt.plot([1,2,3,4])
plt.xlabel('X Label')
plt.ylabel('Y Label')

plt.axis([1,5,1,8])

axisの引数は、[X軸最小値, X軸最大値, Y軸最小値, Y軸最大値]となる。

X軸Y軸を表示しない

plt.axis('off')

他にも、’equal’,’scaled’,’tight’,’image’などの設定がある。

関数を描画

%matplotlib notebook
import matplotlib.pyplot as plt
import numpy

def sigmoid(x):
    return 1 / (1 + numpy.exp(-x))

x = numpy.arange(-5, 5, 0.1)
plt.plot(x, sigmoid(x))

MathJaxを使って数式を表示する

MathJaxを使って数式を表示する

LaTeXで数式を記述し、MathJaxを使って表示します。

LaTeXを使うには

MathJaxのスクリプトをロードするタグを追加します。

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

数式を記述する

数式は、LaTeXという記法で記述します。

LaTeXがわからなくても、数式エディタを使えば簡単にできます。

手書きで数式を入力すると、LaTeX記法に変換してくれます。

このように書いたら、

このように認識されて、

このようにLaTeX記法に変換してくれました。

数式を表示するときは、数式の前後を「\
(」「\
)」で囲みます。

\( z=\dfrac {1} {1+e^{-u}} \)

WordPressではこのように表示されます。

\( z=\dfrac {1} {1+e^{-u}} \)

VMWare PlayerにインストールしたLinux MintにVMWare-Toolsをインストールする

Linux Mintをインストールした後、パッケージリストを更新する

sudo apt-get update

VMWare PlayerのVMWare Toolsではなく、open-vm-tools-desktopをインストールする。

sudo apt-get install open-vm-tools-desktop

インストールが終わったら再起動する

reboot

以上。

JavaScriptで<input type=”file”>で選択された画像をimgタグで表示する

<input type=”file”>で選択された画像をimgタグで表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>↓画像ファイルを選択します。</p>
    <input type="file" id="target" accept="image/*">
    <p>↓ここに選択された画像を表示します。</p>
    <img id="myImage">
    <script src="load.js"></script>
</body>
</html>

<input type=”file” id=”target”>で選択された画像をid=”MyImage”のimgに表示します。

const target = document.getElementById('target');
target.addEventListener('change', function (e) {
    const file = e.target.files[0]
    const reader = new FileReader();
    reader.onload = function (e) {
        const img = document.getElementById("myImage")
        img.src = e.target.result;
    }
    reader.readAsDataURL(file);
}, false);

JavaScriptでドロップされた画像をimgタグで表示する

JavaScriptでドロップされた画像をimgタグで表示する

ドロップされた画像をimgタグで表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="target" style="border: solid 1px #0000ff; height: 3em;text-align: center;">
        ここに画像ファイルをドロップします。
    </div>
    <p>↓ここにドロップされた画像を表示します。</p>
    <img id="myImage">
    <script src="drop.js"></script>
</body>
</html>

id=”target”の領域にドロップされた画像をid=”MyImage”のimgに表示します。

const handleDragEvent = function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.dataTransfer.dropEffect = 'copy';
};

const target = document.getElementById("target");
target.addEventListener("dragover", handleDragEvent, false);
target.addEventListener("drop", function (e) {
    e.stopPropagation();
    e.preventDefault();

    const file = e.dataTransfer.files[0]
    const reader = new FileReader();
    reader.onload = function (e) {
        const img = document.getElementById("myImage")
        img.src = e.target.result;
    }
    reader.readAsDataURL(file);
}, false);

e.dataTransfer.dropEffect = ‘copy’; は、マウスカーソルを変更するためのコードです。
なくても動作しますが、ブラウザによっては、ドロップできないような印象を与えるため、追加しています。

JavaScriptで画像中のテキストを認識する

JavaScriptで画像中のテキストを認識するサンプルアプリケーションを作りました。

ブラウザ上でこういうこともできるのですね。

日本語の認識はいまいちな気がしますが、使い方次第では役に立つかも。

Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’ エラーになったら

Google Chromeで、file:///~/index.htmlにアクセスしていると、次のようなエラーが表示された。

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

ローカルファイルへのアクセスは、セキュリティのため、制限があるようだ

Webサーバーを起動して、http://localhost/~/index.htmlにアクセスすると、エラーは発生しない。

Webサーバーを起動するには、node.jsがインストールされている環境であれば、「http-serverがお勧めだ。

次のコマンドでインストールする。

npm install http-server -g

Webサーバーを起動するには、次のコマンドを実行する。

http-server

publicフォルダーがあればpublicフォルダーが、なければカレントディレクトリがルートになる。

あとは下記のURLにアクセスすれば良い。

http://127.0.0.1:8080/

使用するポート変更するには-pオプションを使用する。
例えば、8000にするなら

http-server -p 8000

とすれば、

http://127.0.0.1:8000/

で、アクセスできるようになる。

TypeScriptでconstとreadonlyを使い分ける

TypeScriptで、読み込み専用・変更不可にするにはconstやreadonlyを使用します。

constとreadonlyは使う場面が異なり、

プロパティにはreadonly
変数にはconst

を使用します。

プロパティにconstを使うと文法エラーになります。

interface Point {
    const x: number;  // error TS1005: ';' expected.
    const y: number;  // error TS1005: ';' expected.
}

変数にreadonlyを使ってもエラーになります。

readonly greeting: string = "hello"; //error TS1128: Declaration or statement expected.

正しくは、プロパティにはreadonly

interface Point {
    readonly x: number;
    readonly y: number;
}

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error TS2540: Cannot assign to 'x' because it is a constant or a read-only property.

変数にはconstを使います。

const greeting: string = "hello";
greeting = ""; // error TS2540: Cannot assign to 'greeting' because it is a constant or a read-only property.