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’; は、マウスカーソルを変更するためのコードです。
なくても動作しますが、ブラウザによっては、ドロップできないような印象を与えるため、追加しています。

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.

TypeScriptでthisの型を指定する

JavaScriptでは、thisの型が変わることがあります。

class Sample {
    hello() { console.log(this.constructor.toString()); }
}

const sample = new Sample();
sample.hello(); //(1) => function Sample() {}

let hello = sample.hello; 
hello(); //(2) => function Object() { [native code] }

(1)ではthisはSample型でしたが、(2)ではObject型になりました。

関数の使い方を誤ってthisが想定外の型になり、思わぬエラーになることがあります。

TypeScriptでは、関数の1番目の引数をthisにすることで、thisの型を指定できます。

class Sample {
    hello(this: Sample) { console.log(this.constructor.toString()); }
}

thisは仮の引数であり、実際には存在しません。
関数を呼び出すときは、引数thisを指定する必要はありません。

先ほどのコードをコンパイルすると(2)のところで、コンパイルエラーになります。

const sample = new Sample();
sample.hello();

let hello = sample.hello;
hello(); //(2) error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Sample'.

コンパイラに「–noImplicitThis」オプションを渡すと、関数内でthisの型を指定せずにthisを使うとエラーになります。

class Sample {
    name: string = "hello";
}
function hello() { console.log(this.name); }

hello.bind(new Sample())(); //=> error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.

JavaScriptではthisにまつわるトラブルが起こりがちです。

TypeScriptで「–noImplicitThis」をつけてthisの型を忘れずに指定すれば、安全なプログラミングができそうです。

WindowsのKeePassでパスワードを入力するときに日本語入力をOFFにする

KeePassとは

KeePassは無料で使えるパスワード管理ソフトです。

メールやFacebook、Amazon、その他Webサイトで同じパスワードを使い回していると、一つのサービスでパスワードが漏洩したとき、他のすべてのサービスのアカウントも危険にさらされます。

とはいえ、サービスごとに異なるパスワードを使い分けると、たくさんのパスワードを管理するのが大変になります。

そこで、パスワード管理ソフトの出番です。

パスワード管理ソフトは有名なものがいくつかありますが、比較した結果、KeePassを使うことにしました。

KeePassはオープンソースで開発されているので、無料で使用でき、Windows/macOS/Android/iOSでも使用できます。

WindowsのKeePassでパスワードを入力するときに日本語入力をOFFにする

しばらくの間、KeePassを使っていて気になったところがありました。

KeePassには、入力欄に自動で入力する機能があります。
日本語入力がONになった状態で自動入力機能を実行すると、日本語入力がONのまま、ひらがなでユーザー名やパスワードを入力してしまいます。

そこで、KeePassの自動入力を行うときに、日本語入力をOFFにする方法を調べました。

日本語入力は、変換キーでON、無変換キーでOFFにするように設定しています。

KeePassの自動入力実行時に、無変換キーを押すことができれば解決です。

KeePassでは無変換キーは「{VKEY 29}」になります。
「{VKEY 29}」をユーザー名の前に追加すれば、入力前に日本語入力をOFFにできます。

設定方法は次のようになります。

KeePassを起動したら、フォルダーを右クリックして、「グループを編集」を選択します。

「自動入力」タブを選択します。

「標準の手順を上書き」をチェックして、次のように入力します。

{VKEY 29}{USERNAME}{TAB}{PASSWORD}{ENTER}

「OK」ボタンを押して、設定を反映します。

以上で完了です。

参考

次のページを参考にしました。

ありがとうございました。