リンク作成用ブックマークレット

ブログ作成などで使えるリンク作成のブックマークレットを作ってみました。

• リンク作成
• リンク作成(Tab)(新規ウィンドウ)

使用する場合はリンクをブックマークのツールバーにドラッグ&ドロップ してください。

リンクを作りたいページでリンクを押すと、タイトルと URL から作成した HTML 片を取得できます。

新規ウィンドウとついている方はリンク選択時に新しいウィンドウ(タブ)を開いて表示するリンクとなっています。好きな方のリンクを使ってください。

CoffeeScript のインストールとコンパイル (Windows)

CoffeeScript の Windows 環境におけるインストールとコンパイル方法について書いてみました。

Node.js のインストール

CoffeeScript 自身が JavaScript で書かれているため、 ローカル環境で実行するにはサーバーサイド JavaScript である Node.js が必要になります。

まず、 Node.js の本家のページから Windows 用のインストーラー(node-vX.X.X-x86.msi) をダウンロードします。

• node.js

node-vX.X.X-x86.msi を実行すれば、 Node.js はインストールされます。

CoffeeScript のインストール

CoffeeScript は Node.js のパッケージマネージャーである npm 使ってイントールします。

Node.js をインストールするとスタートメニューに [Node.js command prompt] ができるので、これを起動します。

立ち上げたコンソール上でコマンドを実行してインストールします。

> npm install -g coffee-script

-g(--global) はグローバルインストールのオプションです。
Node.js では CoffeeScript のようにコマンドライン上で起動させたいものは、 グローバルインストールするようです。

インストールすると CoffeeScript のコンパイラーである coffee コマンドと CoffeeScript 版 make といった cake が使えるようになります。

プロキシ環境でのインストール

ネットワークの接続にプロキシを使用している場合は サーバーを設定していないとエラーとなります。

プロキシサーバーを設定するには以下のコマンドを実行します。

npm config set proxy プロキシサーバーのアドレス:ポート番号

> npm config set proxy http://foo.co.jp:8080

私の環境ではプロキシを設定してもまだエラーが発生しました。 さらに次のコマンドを実行するとインストールに成功するようになります。

 > npm config set registry http://registry.npmjs.org/

参考 :

• npmコマンドでプロキシサーバを指定する方法 - 大人になったら肺呼吸
• proxy 環境で npm 使おうとしたら、 Error: socket hang up ≪ ひよっこ。

環境変数の設定

coffee コマンドの実行時に、 コマンドが見つからないといったエラーがでる場合には次のフォルダーが 環境変数 Path に設定されているか確認してください。
特に %AppData%\npm の方はユーザー別の環境変数の方に追加されるので、 設定されていない可能性があります。

パス	格納ファイル
%AppData%\npm	npm でインストールしたパッケージの実行ファイル (coffee.cmd, cake.cmd など)
%ProgramFiles%\nodejs	Node.js の実行ファイル(node.exe) や npm コマンド (npm.cmd)

なお、 [Node.js command prompt] のコンソール上では確実にパスは設定されるようになっています。

CoffeeScript を使ったコンパイル

coffee コマンドを使って CoffeeScript のコードを JavaScript に変換(コンパイル)します。

まず、適当な CoffeeScript のファイルを作成しておきます。
hello.coffee :

alert('Hello World!')

コンパイルには次のようなコマンドを実行します。

coffee -c 入力ファイル

> coffee -c hello.coffee

実行すると hello.coffee と同じフォルダーに hello.js が作成されます。

-c(--compile) がコンパイル用のオプションです。
他のオプションに関しては以下のページに詳しい説明が載っていました。

• CoffeeScript 入門 - プログラム de タマゴ

eshell での coffee コマンドの実行

私はコンソールに Emacs でのシェルモード(eshell) を使っているのですが、 Meadow の場合には eshell 上で coffee コマンドが上手く動きません。
これは coffee.cmd の実体が bat ファイルで、 古いバージョンの eshell では bat ファイルに引数を渡して実行することができないためです。

以下の行を ~/.eshell/alias に追加すると eshell 上でも coffee でコンパイルすることができるようになります。

alias coffee node.exe $APPDATA/npm/node_modules/coffee-script/bin/coffee $*

ちなみに M-x compile などの場合にはそのまま coffee コマンドで実行できます。

TypeScript のインストールとコンパイル (Windows)

Microsoft が TypeScript という新言語を発表しました。
CoffeeScript のように JavaScript に変換して使うタイプのものですが、 言語としては、 JavaScript(ECMAScript) で将来予定されている仕様を先取りした 次世代 JavaScript のような感じになっています。

この TypeScript の Windows 環境におけるインストールとコンパイル方法について紹介します。

• Welcome to TypeScript
  

TypeScript は VS2012 のプラグインか Node.js の npm パッケージとしてインストールします。 私が VS2012 を持ってないので、 Node.js を使ったインストール方法を説明します。
ただ、CoffeeScript のインストール とほとんど同じなので、簡単な説明にしています。

Node.js のインストール

Node.js の本家のページから Windows 用のインストーラー(node-vX.X.X-x86.msi) をダウンロードして、実行します。

• node.js

プロキシの設定

プロキシサーバーを設定するには以下のコマンドを実行します。

npm config set proxy プロキシサーバーのアドレス:ポート番号

> npm config set proxy http://foo.co.jp:8080

プロキシを設定してもエラーとなる場合は、 さらに次のコマンドを実行します。

 > npm config set registry http://registry.npmjs.org/

TypeScript のインストール

コマンドを実行して、インストールします。

> npm install -g typescript

インストールすると TypeScript のコンパイラーである tsc ができます。

TypeScript を使ったコンパイル

tsc コマンドを使って TypeScript のコードを JavaScript に変換(コンパイル)します。

まず、適当な TypeScript のファイルを作成しておきます。
hello.ts :

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
} 

コンパイルには次のようなコマンドを実行します。

tsc [オプション] 入力ファイル ...

> tsc hello.ts

実行すると hello.ts と同じフォルダーに hello.js が作成されます。
hello.js :

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

オプション

tsc のコマンドオプションは -h または引数なしで tsc を実行すると Usage が表示されます。

よく使いそうなのは、次のようなところじゃないかと思います。

オプション	機能
-h, --help	ヘルプ(Usage) 表示
--out	出力ファイル名の指定。複数の入力ファイルからの統合 ex.) tsc --out foo.js foo.ts bar.ts
-w, --watch	スクリプトの変更の監視。
-sourcemap	ソースマップの生成

Emacs での使用

TypeScript を Emacs で使用するための設定の紹介です。
(ちゃんとはできてません)

メジャーモード

Microsoft が TypeScript 用のモードの lisp も一緒に公開している ということでサイトにとりに行きました。

• Sublime Text, Vi, Emacs: TypeScript enabled! - Interoperability @ Microsoft - Site Home - MSDN Blogs

zip ファイルをダウンロードしたところ、中身は readme ファイル 1 つ入っただけ。 ファイルの内容を見てみると、最後の方に 一時的に使えません。もうすぐバージョンアップするよ 的なことが書かれてました。

いろいろツッコミたいところはありますが、とりあえず我慢して待ってみます。
Java や JavaScript のモードで代用すれば、まぁ、わりといけます。

追記

リリースが再開されたので、インストール方法を記述しました。

• TypeScript 用 Emacs モードのインストール - TypeScript.el | プログラマーズ雑記帳

eshell でのコマンドの実行

Meadow の eshell 上で動作させるには、 以下の行を ~/.eshell/alias に追加します。

alias tsc node.exe $APPDATA/npm/node_modules/typescript/bin/tsc $*

コンパイルの設定

M-x compile で Emacs 上でのコンパイルを行うことができます。
その出力結果のハイライトとエラー箇所へのジャンプには出力スタイルが登録されている必要があります。 上手くエラー箇所へジャンプできない場合は以下の記述を .emacs.el に記述してください。

(require 'compile)
(setq compilation-error-regexp-alist
      (append
       '(;; d:/h...ript/sample.ts (13,175):
         ("^\\(.*\\) (\\([0-9]+\\),[0-9]+):" 1 2))
       compilation-error-regexp-alist))

詳しくは以前の記事をご覧ください。

• Emacs でのコンパイルに未対応のコンパイラーへの対処法 | プログラマーズ雑記帳
• yafm.el - コンパイル、 grep を使いやすくする emacs-lisp | プログラマーズ雑記帳