tsd (TypeScript Definition manager for Definitely Typed)

！！！注意！！！

TypeScript 2.0にて、tsdはdeprecated(非推奨)に変更。typingsを代替ツールとして推奨。特別なツールは不要でnpmでも管理可能。

https://github.com/DefinitelyTyped/tsd/issues/269

npmで型情報を管理（インストール）する例

$ npm install --save @types/electron

1	$ npm install --save @types/electron

*.tsのソースコードにおいて reference path を記述して型定義ファイルを読み込む必要なし。（tsdを使っていないにもかかわらず読み込もうとするとエラー）

インストール方法

$ npm install tsd -g

1	$ npm install tsd -g

オプション

-r, –resolve: 参照の依存関係を含める

-o, –overwrite: 上書き

-s, –save: 設定を保存

-a, –action <name>: アクション

コマンド例

$ tsd install github-electron --save

1	$ tsd install github-electron --save

$ tsd query github-electron -rosa install

1	$ tsd query github-electron -rosa install

Canvasに描画するときはonloadハンドラで実行

Canvasに描画するときはonloadハンドラにて実行する

NG

var ctx = document.getElementById('myCanvas').getContext("2d")

var img = new Image()

img.src = "myDog.png"

ctx.drawImage(img, 0, 0)

var ctx = document.getElementById('myCanvas').getContext("2d")

var img = new Image()

img.src = "myDog.png"

ctx.drawImage(img, 0, 0)

※上手くいくときもある。

OK

var ctx = document.getElementById('myCanvas').getContext("2d")

var img = new Image()

img.src = "myDog.png"

img.onload = function() {
               ctx.drawImage(img, 0, 0)
             }

var ctx = document.getElementById('myCanvas').getContext("2d")

var img = new Image()

img.src = "myDog.png"

img.onload = function() {

ctx.drawImage(img, 0, 0)

}

ローカル画像に限らない。
canvas.toDataURL()で画像を生成したときも同様。

Homebrewでインストールしたnode.jsのアンインストール

node.jsのパッケージ管理をHomebrewからnodebrewに移行するための前準備

npmのアンインストール

$ cd /usr/local/lib

$ npm uninstall npm
- abbrev@1.0.7 node_modules/npm/node_modules/abbrev
- ansi-regex@2.0.0 node_modules/npm/node_modules/ansi-regex
- ansicolors@0.3.2 node_modules/npm/node_modules/ansicolors
...
- write-file-atomic@1.1.4 node_modules/npm/node_modules/write-file-atomic
- npm@3.6.0 node_modules/npm

$ cd /usr/local/lib

$ npm uninstall npm

- abbrev@1.0.7 node_modules/npm/node_modules/abbrev

- ansi-regex@2.0.0 node_modules/npm/node_modules/ansi-regex

- ansicolors@0.3.2 node_modules/npm/node_modules/ansicolors

...

- write-file-atomic@1.1.4 node_modules/npm/node_modules/write-file-atomic

- npm@3.6.0 node_modules/npm

$ brew uninstall --force node
Uninstalling node... (31,538 files, 340.8M)

1 2	$ brew uninstall --force node Uninstalling node... (31,538 files, 340.8M)

node.jsインストール方法

Homebrewでインストールしたnode.jsのアンインストール

nodebrewのインストール

$ curl -L git.io/nodebrew | perl - setup

1	$ curl -L git.io/nodebrew \| perl - setup

node.jsのインストール

$ nodebrew install-binary latest

1	$ nodebrew install-binary latest

$ nodebrew list
v5.7.0

current: none

$ nodebrew list

v5.7.0

current: none

$ nodebrew use v5.7.0

1	$ nodebrew use v5.7.0

$ nodebrew list
v5.7.0

current: v5.7.0

$ nodebrew list

v5.7.0

current: v5.7.0

npmはnodeと一緒にインストールされる

$ npm -v
3.6.0

1 2	$ npm -v 3.6.0

$ which npm
/Users/JaneDoe/.nodebrew/current/bin/npm

1 2	$ which npm /Users/JaneDoe/.nodebrew/current/bin/npm

Electron Quick Start Kitのインストール方法

$ git clone https://github.com/atom/electron-quick-start

1	$ git clone https://github.com/atom/electron-quick-start

$ cd electron-quick-start

1	$ cd electron-quick-start

$ npm install  &&  npm start

1	$ npm install && npm start

npmの基本的な使いかた

npmとは

npm: node.jsで構築されたパッケージマネージャ

プロジェクトの初期化

npmではプロジェクトのルートディレクトリにおいたpackage.jsonでモジュール（ライブラリ）のインストール管理をするため「プロジェクトの初期化」と「package.jsonの作成」は同義。

対話式コマンドによるなpackage.jsonの作成

$ npm init

1	$ npm init

npmで管理するプロジェクトの情報はpackage.jsonに書き込まれる。
package.jsonはテキストエディタで編集可能であるが、初回は対話式コマンドで作成するのが簡便。

モジュールのインストール

基本的な構文

$ npm install <module name>

1	$ npm install <module name>

続きを読む →

Electron開発環境構築

Electronコンパイル・ツール

Electron 1.3.1 以降

$ npm install electron -g

1	$ npm install electron -g

Electron 1.3.1 以前

$ npm install electron-prebuilt -g

1	$ npm install electron-prebuilt -g

The prebuilt Electron binaryのパッケージ名変更のおしらせ
http://electron.atom.io/blog/2016/08/16/npm-install-electron

Electronパッケージング・ツール

$ npm install electron-packager -g

1	$ npm install electron-packager -g

npmでインストールに失敗

$ npm install electron-build -g
npm ERR! Darwin 15.3.0
npm ERR! argv "/Users/JaneDoe/.nodebrew/node/v5.6.0/bin/node" "/Users/JaneDoe/.nodebrew/current/bin/npm" "install" "electron-build" "-g"
npm ERR! node v5.6.0
npm ERR! npm  v3.6.0
npm ERR! code E404

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/electron-build
npm ERR! 404
npm ERR! 404  'electron-build' is not in the npm registry.
....

$ npm install electron-build -g

npm ERR! Darwin 15.3.0

npm ERR! argv "/Users/JaneDoe/.nodebrew/node/v5.6.0/bin/node" "/Users/JaneDoe/.nodebrew/current/bin/npm" "install" "electron-build" "-g"

npm ERR! node v5.6.0

npm ERR! npm v3.6.0

npm ERR! code E404

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/electron-build

npm ERR! 404

npm ERR! 404 'electron-build' is not in the npm registry.

....

難しいエラーメッセージが羅列されているが、要は指定された名前のパッケージが存在しない。パッケージ名のtypoを疑おう！

上記のエラーは "buit" を "build" とtypo。

Swiftによるオートレイアウト

SwiftによるVisualFormat形式のオートレイアウトのコード例

UINavigationControllerにおける実装

// VisualFormatから参照するキーワードの辞書
let viewDictionary:Dictionary = ["MyContent": self.myContentView]

let constraintFormatH:[NSLayoutConstraint]
    = NSLayoutConstraint.constraintsWithVisualFormat(
            "H:|-[MyContent]-|",
            options: NSLayoutFormatOptions(rawValue: 0),
            metrics:nil,
            views:viewDictionary)
self.view.addConstraints(constraintFormatH)

// NavigationBarの高さ:20
// ToolBarの高さ:64
let constraintFormatV:[NSLayoutConstraint]
    = NSLayoutConstraint.constraintsWithVisualFormat(
            "V:|-(20)-[MyContent]-(64)-|",
            options: NSLayoutFormatOptions(rawValue: 0),
            metrics:nil,
            views:viewDictionary)
self.view.addConstraints(constraintFormatV)

// VisualFormatから参照するキーワードの辞書

let viewDictionary:Dictionary = ["MyContent": self.myContentView]

let constraintFormatH:[NSLayoutConstraint]

= NSLayoutConstraint.constraintsWithVisualFormat(

"H:|-[MyContent]-|",

options: NSLayoutFormatOptions(rawValue: 0),

metrics:nil,

views:viewDictionary)

self.view.addConstraints(constraintFormatH)

// NavigationBarの高さ:20

// ToolBarの高さ:64

let constraintFormatV:[NSLayoutConstraint]

= NSLayoutConstraint.constraintsWithVisualFormat(

"V:|-(20)-[MyContent]-(64)-|",

options: NSLayoutFormatOptions(rawValue: 0),

metrics:nil,

views:viewDictionary)

self.view.addConstraints(constraintFormatV)

文字コード一括変換

$ find . -type f -name '*.c' -print0 | xargs -0 
 nkf --overwrite -w -Lu

1 2	$ find . -type f -name '*.c' -print0 \| xargs -0 nkf --overwrite -w -Lu

出力形式(Output Encoding)

-w : UTF-8
-w8 : UTF-8
-s : Shift_JIS
-e : EUC
-j : JIS(ISO-2022-JP)

出力改行コード

-Lu : UNIX形式(LF)に変換
-Lw : Win形式(CRLF)に変換
-Lm : 旧Mac形式(CR)に変換

検索対象のタイプ

-type f : ファイル
-type d : ディレクトリ（フォルダ）

複数ファイルの区切り文字

-print0 : [findコマンド] NUL文字(0x00)
-0 : [xargコマンド] NUL文字(0x00)

Tech控え帳

私のための備忘録

tsd (TypeScript Definition manager for Definitely Typed)

！！！注意！！！

npmで型情報を管理（インストール）する例

インストール方法

オプション

コマンド例

Canvasに描画するときはonloadハンドラで実行

NG

OK

Homebrewでインストールしたnode.jsのアンインストール

npmのアンインストール

node.jsインストール方法

Homebrewでインストールしたnode.jsのアンインストール

nodebrewのインストール

node.jsのインストール

Electron Quick Start Kitのインストール方法

npmの基本的な使いかた

npmとは

プロジェクトの初期化

対話式コマンドによるなpackage.jsonの作成

モジュールのインストール

基本的な構文

Electron開発環境構築

Electronコンパイル・ツール

Electron 1.3.1 以降

Electron 1.3.1 以前

Electronパッケージング・ツール

npmでインストールに失敗

Swiftによるオートレイアウト

文字コード一括変換

出力形式(Output Encoding)

出力改行コード

検索対象のタイプ

複数ファイルの区切り文字

関連リンク

！！！ 注意 ！！！

npmで型情報を管理（インストール）する例

インストール方法

オプション

コマンド例

NG

OK

npmのアンインストール

Homebrewでインストールしたnode.jsのアンインストール

nodebrewのインストール

node.jsのインストール

npmとは

プロジェクトの初期化

対話式コマンドによるなpackage.jsonの作成

モジュールのインストール

基本的な構文

Electronコンパイル・ツール

Electron 1.3.1 以降

Electron 1.3.1 以前

Electronパッケージング・ツール

出力形式(Output Encoding)

出力改行コード

検索対象のタイプ

複数ファイルの区切り文字

関連リンク

！！！注意！！！