【Mac】nodebrewを使ったNode.jsの環境構築

単純に公式サイト https://nodejs.org からpkgをダウンロードしてインストールが最も簡単な方法ではあるが、pythonやrubyにバージョン管理ツールが用意されているように、Node.jsにもバージョン管理ツールがあるのでそれを使うことにする。

過去にNode.jsを使っていたことがあるので、一旦環境をリセットして再度バージョン管理ツールでインストールという流れで進める。

現状のNode.jsを完全にアンインストール

MacにpkgでインストールしたNode.jsをアンインストールする手順

を参考にインストーラでインストールしたNode.jsをアンインストール。
これでpkgでインストールしたNode.jsは削除できたようだ。

しかし

$ node -v

が未だに実行できてしまう。
そこで、そもそもnodeがどこにあるのかを確認。

$ which node
/Users/***/.nvm/v0.11.14/bin/node

どうも昔の僕はnvmで管理していたようだ。最近はnodebrewがお勧めらしいのでnvmをアンインストールする。

まず、bash_profileの編集。

$ vi ~/.bash_profile

source ~/.nvm/nvm.sh

を削除。

次に.nvmフォルダを削除。

$ rm -rf ~/.nvm

最後にbash_profileの反映

$ source ~/.bash_profile

確認

$ node -v
-bash: node: command not found

完全にNode.jsをアンインストールすることができた。

nodebrewを使ってNode.jsをインストール

次にnodebrewを使ってインストールしていく。
まずhomebrewをインストール。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

その後、homebrewを使ってnodebrewをインストール。

$ brew install nodebrew

確認。

$ nodebrew -v

ずらずらと出力されるので完了。
次にNode.jsをインストールする。
その前に、予めディレクトリを作成しておかないとnodebrewをインストールしてもエラーになるので作成。

$ mkdir ~/.nodebrew
$ mkdir ~/.nodebrew/src

その後インストール。

$ nodebrew install-binary latest

確認。

$ nodebrew list
v7.9.0

current: none

current: noneとなっているので、

$ nodebrew use v7.9.0

で、バージョンを指定する。

補足として、
特定のバージョンを使いたい場合は

$ nodebrew ls-remote

でバージョン一覧を取得し

$ nodebrew install-binary 6.9.1

で好きなバージョンをインストールし、

$ nodebrew use  v6.9.1

でOK

その後、nodeコマンドへパスをbash_profileに保存

$ vi ~/.bash_profile

下記を追記

export PATH="$PATH:$HOME/.nodebrew/current/bin"

bash_profileの反映

$ source ~/.bash_profile

確認。

$ node -v
v7.9.0

これでNode.jsのインストールが完了。

念のためnpmも使えることを確認。

$ npm -v 
4.2.0

OK。

NodeJSでCron処理を実現し、デーモン化させる。

NodeJSで作ったプログラムをCronのように動かしたい。

どうやらnode-cronというモジュールがあるらしい。

Node.jsで特定の処理を指定日時、あるいは特定のパターンの日時に繰り返し実行する方法: node-cronを使う

上記サイトを参考に、関連モジュールをnpmでインストール。

$ npm install cron
$ npm install time

サンプルコード内のjob.stop();をコメントアウトさせ、いつものように $ node crontest.js と実行させると、1秒毎にHelloが表示される。

// Stops your job.
// job.stop();  コメントアウト

Ctr + C で終了。

次に、過去に作ったNodeJSプログラムをCronで動かしたい。
サンプルコードをみるとonTickの中にで過去のプログラムを動かせばよさそうだ。

…
 onTick: function() {
    console.log('Hello.');
  }
…

下記のサイトを参考に外部ファイル化させ、上記メソッド内で実行させるとOK。

node.jsで外部ファイルのJavaScriptを呼び出す

※NodeJSに限らず、Cronのような処理を行うときは、プログラム内のファイルへのパスを絶対パスで記述しないと動かないので注意。

次にCronをデーモン化させる。

foreverモジュールを利用。グローバルインストールさせないとなぜかコマンドが認識されないので下記のようにインストール。

$ npm install -g forever

下記のコマンドでデーモン化。

$ forever start crontest.js

稼働中のデーモン一覧を見る時は

$ forever list 

どうやらログファイルも自動生成されるようで、プログラム内のエラーやconsole.logがそのログに記録されていく。

停止させるときは

$ forever stop (listで確認したuid)

以上。

NodeJSでMAMPのMySQLにアクセスする。

mysqlモジュールをnpmでインストール後、下記のようなコードでMySQLにアクセスできるといろんなサイトに掲載されているが、MacのMAMPだと失敗する。

var connection = mysql.createConnection({
    host: 'localhost',
    database: 'dbname',
    user: 'username',
    password: 'password'
});

下記のようにMAMP内のMySQLサーバーのポートである8889を指定するとアクセスすることができる(念のためMySQLのポートはMAMPの設定から確認してほしい)。

var connection = mysql.createConnection({
    host: 'localhost',
    database: 'dbname',
    user: 'username',
    password: 'password',
    port:8889
});

以上。

htmlファイルのリンクをチェックするブックマークレットを作った

フロントエンドコーディングの品質管理において何か良いツールはないかと探していたところ、知人に下記を紹介してもらった。

alt属性を確認するブックマークレット。

ブックマークレットということでブラウザさえ対応していればWindows,Macを選ばずサクサクと実行することができる。
このブックマークレットにインスパイアされ、ページ内のリンクをチェックするブックマークレットを自作してみた。

javascript:(function(d) {
    function l() {
        (function($) {
            var rid = 'ALL_link_check';
            if (document.getElementById(rid))
                return;
            function e(t) {
                return document.getElementsByTagName(t);
            }
            function a(o, a) {
                return o.getAttribute(a);
            }
            anchors = document.getElementsByTagName('a');
            if (anchors.length <= 0)
                return;
            var r = document.createElement('div');
            var rcss = 'padding:5px;position:absolute;top:0;left:0;background:#fff;border:solid #ccc 1px;z-index:2999;';
            var tblcss = ' style=\'border-collapse:collapse;background:#fff;\'';
            var tdlcss = ' style=\'padding:4px;border-bottom:solid #ffffff 2px;text-align:right;\'';
            var tdrcss = ' style=\'padding:4px;border-bottom:solid #ffffff 2px;text-align:left;\'';
            r.id = rid;
            r.style.cssText = rcss;
            var h = '';
            h += 'Checking link existence....';
            for (var j = 0; j < anchors.length; j++) {
                h += (j % 2 == 0) ? '' : '';
                h += '' + anchors[j].innerHTML + '' + a(anchors[j], 'href') + '';
            }
            h += '';
            e('body')[0].appendChild(r);
            r.innerHTML = h;
            r.onclick = function() {
                this.parentNode.removeChild(this);
            };
            window.scrollTo(0, 0);
            function checkurl(id, geturl, maxcnt) {
                $.post(geturl, {value: 1}, function(data) {
                }).fail(function(error) {
                    if (error.status == 404) {
                        $('#existcheck' + id).css('background-color', '#ff0000');
                    } else {
                        $('#existcheck' + id).css('background-color', '#0000ff');
                    }
                }).always(function() {
                    if (geturl == '#') {
                        $('#existcheck' + id).css('background-color', '#ff0000');
                    }
                    if (!geturl) {
                        $('#existcheck' + id).css('background-color', '#ff0000');
                    }
                    if (id == maxcnt - 1) {
                        $('#checkinglink').html('Done!!');
                    }
                });
            }
            var maxcnt = anchors.length;
            for (var j = 0; j < maxcnt; j++) {
                var geturl = a(anchors[j], 'href');
                checkurl(j, geturl, maxcnt);
            }
        })(jQuery)
    }
    if (typeof jQuery == 'undefined') {
        var j = d.createElement('script');
        j.type = 'text/javascript';
        j.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js';
        d.body.appendChild(j);
        j.onload = l
    } else {
        l()
    }
})(document);

本来であれば直接ブックマークに追加できるよう掲載したかったが、なぜかうまくいかなかったので、上記コードをコピーし、このサイト でブックマークレット形式に変換して利用してほしい。

ブックマークバーに保存したあとは、対象のウェブサイトで実行すると、下記のように全てのリンクの一覧が表示される。
その後、ajaxで各リンクの存在チェックを行い、リンク切れのところは赤に、外部リンクは青にハイライトされる仕様だ。
Chromeの最新版で動作確認済み。
ブックマークレット

フロントエンドコーディング担当者には品質チェックの一環として、担当ページの提出前にこれを実行してもらおうと思う。

Vineの非公式APIとTwitterAPIを使ってVineまとめサイトを作った。

俺日記のしんじです。一人称は僕です。

ふと何かVineで作りたくなったので。

Vineの人気動画をTwitterでまとめました。viny(バイニー)

screencapture-localhost-8888-viny-index-retweet-month

TwitterからvineのURLの載ったツイートを収集して、RT数やファボ数等でランキング化しています。

html5のビデオタグを使って、vineの公式サイトのようにマウスをのせるだけで再生されるようにしてるんだけど、vineから提供される動画ファイルがmp4のみなので、firefoxではその部分が動かないから残念だ(クリックしたら再生できるようにしているが…)。

差別ネタとか暴力系とかまざっててたまに驚くけどそれもまた一興。

2014/06/23追記:やたらとサーバーのリソースをくってしまうので停止しました・・・

2015/07/28追記:復活させました。

2015/11/06追記:やっぱり停止しました。。

Titanium StudioでのiPhone実機を使ったデバッグ方法

公式はここ。
http://docs.appcelerator.com/titanium/latest/#!/guide/Debugging_on_iOS_Devices

前提

・Titanium Studioから実機へアプリをインストールできること。
・Titanium SDK Release 3.0以降であること
・Titanium Studioのバージョンが3.0以降であること。
・PCと実機が同じWi-Fiネットワークを使っていること。デバッガはUSBケーブルではなくWi-Fiを通して実行される。
・USBケーブルで実機をPCとつなげておくこと(推奨)
・iTunesとWi-Fi経由で同期する設定にしておくこと。
※信頼できるWi-Fiがなければ、Ad-Hocで代用することもできる。

“Titanium StudioでのiPhone実機を使ったデバッグ方法” の続きを読む

Titanium StudioでProvisioning ProfileをセットしようとしたらInvalidエラー

スクリーンショット 2014-01-19 20.26.38
Specified Provisiong Profile is invalid or is the wrong type.

ダウンロードしたProvisioning Profileの置き場所を日本語名の入ったディレクトリにしていたことが原因だった。
全て英語のディレクトリ名に変更し、再セットで成功。

Titanium Studioのdeployment targetが灰色になってチェックできない

こういう場合。
スクリーンショット 2014-01-16 15.53.26

各SDKのセットアップが完了していないために起こる。

こういうときは例えば予め、DashboardのConfigure Native SDKsで×印がついているOSをクリックすると右に表示がでるのでそれにしたがって実行したらOK。

スクリーンショット 2014-01-16 15.54.17

だと思う。