読者です 読者をやめる 読者になる 読者になる

Sublime で外部コマンドを実行するやつ

Sublime Text でF5 押したときにnpm run... みたいなの実行するってできるのかなーと思ったらできた。
さすがSublime だなぁすごいなぁ。

Preferences -> key Bindings - User を開いて、
たとえば下みたいに書くと、F5 を押したときに、コマンドプロンプトnpm run build コマンドを実行できる。

{"keys": ["f5"],
	"command": "exec",
	"args": {
		"cmd": "npm run build",
		"shell": true,
	}
}

npm ERR! undefined is not a function

前にnpm install しようとしたら

npm ERR! undefined is not a function

って言われてうまくいかないことがあった。
そのときはnpm cache clean をするとうまくいくようになるんだけど、その後もこのエラーがたびたび出た。

そのたびにnpm cache clean するとうまくいくようになるんだけど、
めんどくさいしなんでだろうなぁっと思っていたら、
コマンドプロンプトを管理者権限で起動するとうまくいくっぽい。
たぶん。

Browserify 触ってみたぞということでね

たびたびReuireJS 使ってみたい欲が湧いていたので、意を決して調べてみると、今はBrowserify というやつのほうがトレンドみたいなので、それのさわりだけ触ってみた。

とりあえずBrowserify のサイトに行ったら

npm install -g browserify

ってやれと書いてあるのでそうする。とインストールが完了する。

これでどうなるのかというと、今まで

<script src="lib/jquery.js"></script>

みたいに書いてたのがいらなくなって、

var $ = require("jquery");

みたいに書けるようになる。
さらにライブラリやらなんやらのjs ファイルがぜんぶまとめて一つになる。はー便利

ということで試しにWinJS のチュートリアルをbrowserify を使って書いた。
まず、WinJS をインストール。

npm install winjs -S

そして、WinJS.UI.processAll()... の前に

var WinJS = require("winjs");

を書く。

あとは、

browserify index.js > bundle.js

みたいなコマンドを叩くと、必要なファイルが全部まとまってbundle.js というファイルになるので、

<script src="bundle.js"></script>

って感じにこのファイルを読み込むだけで動くぞ!すごいぞ!

Node.js のモジュールについてほんのちょっとだけ調べたということでね

前回、Electron 使ってオセロを作ったよっていうのをやりました。そのとき、外部ファイルを読み込むのに

var Osero = (function() {
    return function Osero(bordId, numberOfRow, numberOfColumn) {
    ...

みたいに書いたファイルをscript タグで

<script src='lib/osero.js'></script>

って読み込んでました。

だけれど、実はElectron 的には(Node.js 的には?) モジュールっていうかたちでrequire('~') って読み込むのがかっこいいようだ。
そういえば、たしかにJQuery 読み込むときはwindow.$ = require('./lib/jquery.js'); ってやってた。ぜんぜん気にしてなかったけど。

ということで、とりあえず

<script src='lib/osero.js'></script>

ってやってたところを削除して

var Osero = require('./lib/osero.js');

ってやってみたけど動かない。

モジュール用の書き方みたいなのがあるんですかね。とういことで調べてみると、読み込むファイルの中身を

var Osero = (function() {
    return function Osero(bordId, numberOfRow, numberOfColumn) {
    ...

って書いてたのを

module.exports = function Osero(bordId, numberOfRow, numberOfColumn) {
    ...

って書いたらできました。やったね

あと、Electron ってちゃんとChrome とおんなじ開発者ツールが使えるんですね。デバッグも楽ちんですごいなあ。

こちらからは以上です。

Electron を使ってみたということでね

Electron とは

Electron っていうのはHTML + JS + CSS でデスクトップアプリケーションが作れるっていう巷で噂のあれですね。

インストール

環境はWinddows7 64bit です。

まず、Node.js をインストールします。
以前はインストーラから入れた気がするのですが、今はnodist というNode.js 用のバージョン管理ツールを使うのがトレンドのようです。

node.js インストール備忘録(windows7) - Qiita

このあたりを参考にさせて頂いて、あっさりできました。
いよいよ待望のElectron のインストールです。

Electron のページに行くと

npm install electron-prebuilt -g

ってやればインストールできるよーと書いてあったので、簡単じゃあーんと思ったら、いきなり躓きました。

「npm ERR! undefined is not a function」って出てインストールできない!

意気揚々と

npm install electron-prebuilt -g

ってやったら

npm ERR! undefined is not a function

って言われた。

けっきょく原因はぜんぜんわかっていませんが、

npm cache clean

ってやってからもう一度インストールすると問題なくできました。

実際にアプリケーションを作る

Electron がインストールできたので、早速アプリケーションを作ってみます。
ここに頑張ってJS で書いたオセロがあります。
そして、これを頑張ってElectron しました! っていうのを書くつもりだったのですが、

Electronでアプリケーションを作ってみよう - Qiita

このあたりを参考に、というかまんまやったらなんの問題もなく動いてしまったので書くことがないです。
ちなみにElectron したものがこれになります。

こちらからは以上です。