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.

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」ボタンを押して、設定を反映します。

以上で完了です。

参考

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

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

WindowsのATOKで日本語入力のON/OFFを変換/無変換キーに割り当てる

作者:

Windowsでは「全角/半角」キーを押して日本語入力のON/OFFを切り替えます。

「変換」キーで日本語入力をONに、「無変換」キーで日本語入力をOFFにするように設定すると、現在の日本語入力の状態がONかOFFかを意識する必要がなくなり、入力切り替えのトラブルがなくなります。

Windows 10のATOK 2017で、変換キーを押すと日本語入力をONにし、無変換キーを押すと日本語入力をOFFにする設定方法です。
他のバージョンのATOKも同じ手順で設定できます。

タスクバーのATOKのメニューアイコンをクリックして、ポップアップメニューから「プロパティ（環境設定）」を選択、または日本語入力をONにして「CTRL+F12」キーを押します。

「ATOKプロパティ」画面が表示されました。

「キー・ローマ字・色」タブを選択し、スタイル一覧から「キーカスタマイズ」ボタンを押します。

「ATOKキーカスタマイズ」画面が表示されました。

「機能を検索」ボタンを押します。

「検索」画面が表示されました。

機能一覧から「日本語入力ON」を選択して、「OK」ボタンを押します。

「ATOKキーカスタマイズ」画面に戻りました。
「設定一覧」では、「日本語入力ON」が選択されています。

「変更」ボタンを押します。

「キーの変更」画面が表示されました。

「メニュー」から「キーボードから変更」を選択します。

「キーボード入力から変更」画面が表示されました。

キーボードの「変換」キーを押します。

「キーの変更」画面に戻ります。

「OK」ボタンを押します。

確認画面が表示されたら、「はい」を選択します。

「ATOKキーカスタマイズ」画面に戻ります。

「日本語入力ON」に「変換」キーが割り当てられました。

同様にして、「日本語入力OFF」に「無変換キー」を割り当てます。

以上で設定完了です。

快適な日本語入力を。

ReactでHello Worldする最速の手順

作者:

node.jsやbabel、webpackを導入しなくても、Reactできますよ。

ReactでHello Worldする

HTMLファイルを作ります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
</html>

<head>～</head>に次のタグを追加して、reactのライブラリを読み込みます。

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

<body>～</body>に次のタグを追加します。

<div id="root"></div>

ここに、reactで作成した”Hello, world!”の文字を表示します。

最後に、JavaScriptのコードを記述します。

<script>
    ReactDOM.render(
        React.createElement('h1', {}, "Hello, world!"),
        document.getElementById('root')
    );
</script>

HTML全体は次のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        ReactDOM.render(
            React.createElement('h1', {}, "Hello, world!"),
            document.getElementById('root')
        );
    </script>
</body>
</html>

ブラウザでHTMLファイルを開くと、”Hello, world!”の文字が表示されます。

JSXを使う

JSXを使う場合は、babelも必要になります。

<head>～</head>に次のタグを追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.js"></script>

<script>～</script>を次のように書き換えます。
scriptタグのtype属性を忘れずに。

<script type="text/babel">
    ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root') );
</script>

ブラウザでHTMLファイルを開くと、”Hello, world!”の文字が表示されます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root') );
    </script>
</body>
</html>

この記事が役に立ったら、この本↓もおすすめです。

TypeScriptの–strictNullChecksでnullやundefinedの代入をチェックする

作者:

TypeScriptでは、すべての型の変数にnullやundefinedを代入できます。

let str: string = "Hello";
str = null; // OK
str = undefined; // OK

strictNullChecksモードを有効にすると、nullとundefinedはそれぞれの型とvoid以外の変数に代入できなくなります。

strictNullChecksモードを有効にします。

tsc index.ts --strictNullChecks

今度はstring型の変数にnullやundefinedを代入すると、エラーになります。

let str: string = "Hello";
str = null; // error TS2322: Type 'null' is not assignable to type 'string'.
str = undefined; // error TS2322: Type 'undefined' is not assignable to type 'string'.

strictNullChecksモードを有効にすることで、nullやundefinedによるエラーを減らすことができます。

TypeScriptでサーバーからファイルをダウンロードして、ローカルに保存するサンプルコード

作者:

TypeScriptでサーバーからファイルをダウンロードして、ローカルに保存するサンプルコード。

imagesディレクトリを作成して、ファイルを保存します。
ダウンロードするファイルと保存するファイルのファイル名は、download()関数の引数で設定します。

事前準備

npm install node-fetch --save
npm install @types/node-fetch --save

ソースコード

import * as fs from "fs";
import * as path from "path";
import fetch from "node-fetch";

// ダウンロードしたファイルを保存するディレクトリ
const download_dir = path.join(process.cwd(), "images");

// ディレクトリがなければ作成する
if (!fs.existsSync(download_dir)) {
    fs.mkdirSync(download_dir);
}

/**
* URLを受け取り、該当するファイルをダウンロードして保存する
* @param url ダウンロードするファイルのURL
* @param filename 保存するファイルのファイル名
*/
function download(url: string, filename: string) {
    fetch(url, { method: "GET" }).then((response) => {
        console.log(`OK: ${filename}`);
        response.body.pipe(fs.createWriteStream(filename));
    }).catch((error) => console.log(`error:${url} ${error}`));
};

download(
    "http://～/example.jpg",
    path.join(download_dir, "sample.jpg"));