tacamy--blog

JavaScriptを勉強中の人のブログです。

手っ取り早く Mac でローカルサーバーを立てる方法

環境設定

ローカルサーバーを立てると、同じネットワークにつながってる別の端末から簡単にアクセスできるようになるから、スマホの表示確認とかに便利。でもいちいち httpd.conf とかいじるのはダルい。このやり方なら一瞬でできるからちょう楽ちん。

ターミナルでサーバー起動

サーバーのルートにしたいディレクトリまで cd コマンドで移動したら、下記コマンドを実行。

$ python -m SimpleHTTPServer 8888

最後の数字はポート番号で、他に使われていなさそうな番号に適当に変えれば、複数のサーバーを同時に起動できる。

ブラウザで表示確認

localhost で確認

ブラウザのアドレスバーに http://localhost:8888/{ファイル名} と入力して表示確認。

表示できてるなら、ローカルサーバーを立てるのが成功してる。表示できなかったら、ターミナルを見て、さっきのサーバー起動時になんかエラー出てないか確認してググろう。

IP アドレスで確認

localhost だと他の端末からアクセスできないので、IP アドレスを使ってアクセスします。

  1. ターミナルで ifconfig と打つか、ネットワーク環境設定の画面を見て、自分の IP アドレスを調べる。
  2. ブラウザのアドレスバーに http://{IP アドレス}:8888/{ファイル名} と入力して表示確認。

これで見れてれば、同じネットワークにいる別の端末から、IP アドレス経由でアクセスできます。

CTO に教えてもろた。

input type=”email” のバリデーションチェックを止めたい

HTML

input type=”email” とすると、対応ブラウザの場合、ブラウザ側でバリデーションチェックをして、Email の形式じゃなかった場合はエラーメッセージを表示してくれる。

でもこれがジャマになって止めたいときもある。その場合は form タグに novalidate 属性をつければ抑止できるらしい。

<form>
<input type="email">
</form>

これを、

<form novalidate>
<input type="email">
</form>

こうするだけ。

Chrome のみで確認。

thx @yomotsu 先生

ssh の公開鍵認証のいろは

Git 環境設定

CTO が分かりやすく教えてくれたので、メモ。

公開鍵の基本

公開鍵とは、github や beanstalk、Heroku などの git を使うサービスを利用するときに必要な、~/.ssh 以下につくられるファイル。

公開鍵と秘密鍵

ファイル名の最後に .pub がついている方が公開鍵、ついていない方が秘密鍵。

公開鍵とは、例えるなら家の鍵穴みたいなもので、誰でも見ることができる。 秘密鍵とは、例えるなら家の鍵で、自分しか持ってないもの。 公開鍵（鍵穴）と秘密鍵（鍵）が一致することで認証される仕組み。 だから、秘密鍵は絶対に公開してはいけない。

rsa と dsa

rsa と dsa の違いは、暗号化方式の違い。

利用するサービスの公開キー登録方法の説明を読んでみて、書いてある方を使えばOK。

公開鍵の使い回し

サービス間での使い回し

サービスごとに別々に鍵を用意して分けてもいいけれど、使いまわすこともできる。

そのサービスで登録しているメールアドレスとは違うメールアドレスが記述されている鍵でも関係なく使い回しができる。サービスの説明ページで、ssh-keygen コマンドで鍵を作成するように書いてあったとしても、すでに別のサービスで作成済みであれば新たに作成する必要はない。

マシン間での使い回し

普通、鍵はマシン固有のものなので、複数のマシンを使うなら、それぞれで鍵をつくらないといけない。 その場合はマシンを買い換えたときも、鍵を新たに作りなおす必要がある。

複数のマシンで鍵を使い回す場合は、~/.ssh 以下のファイルをごっそり別マシンにコピーして、鍵照合すれば使える（？）。

感想

鍵穴と鍵の説明わかりやすくて、CTO さすが CTO。もうこれで怖くない！

gem update --system したら gem update bundler もね！

環境設定 Sass

Sass やら Compass やらの普及で、フロントエンドな人も Ruby や gem に触れることが増えたけど、こないだ調子こいて gem をアップデートしたら、rails server でエラーが出て、rails で作られたシステムが起動できなくなってしまった・・。

エラーの内容はこんな感じだけど、bundler のバージョンはちょっと違ったかも（メモしてなかった）。

/usr/local/rvm/gems/ruby-1.9.3-p385@global/gems/bundler-1.1.5/lib/bundler/rubygems_integration.rb:187:in `stub_source_index170': uninitialized constant Gem::SourceIndex (NameError)

ぜんぜん分からなくて泣いていたら、ほ神ら先生が助けてくれたので、忘れないようにメモします。

やったこと

gem のバージョン確認

$ gem -v
2.0.3

gem のバージョンは、2.0.3 で新しい。むしろエラー出てない人より新しい。これのせい？

bundler もアップデート

$ gem update bundler

いろいろインストールされました。

bundler のバージョン確認

$ bundle -v
Bundler version 1.3.4

新しくなった。そして rails server できるようになりました！

解説

gem の bundler が何かを、Node.js に例えて分かりやすく教えてもらえました。

  1. Ruby の gem は、パッケージ管理ツールで、Node.js だと npm みたいなもの。
  2. npm の場合はプロジェクトごとに管理できるし、-g でグローバルにもできる。
  3. でも gem はグローバルしかできない（Node.js で言う -g だけ）。
  4. プロジェクトごとの管理は、bundler が行う。
  5. gem と bundler の 2 つを合わせて、Node.js の npm みたいに使える。

分かりやすい・・！ほかちゃんは説明の天才か。

まとめ

gem update --system

したら、

gem update bundler

もした方が安全。特に gem がメジャーアップデートとかしてたら、やった方がいいかも。

JavaScript で日付のフォーマットを整形する

JavaScript

Movable Type で日付のフォーマットをいじりたいときには、% を使って簡単に設定できます。 例えば、「2013年03月14日 (月)」と表示したいときは、次のように指定します。

<$MTDate format="%Y年%m月%d日 (%a)"$>

詳しくは、日付に関するテンプレートタグのモディファイアリファレンス を参照。

その感覚で、JavaScript でも同じようなことできると思っていたら、そういうものは無いらしい。 なので、自分でフォーマットを整形したいときは、次のように指定します。

// 今日の日付で Date オブジェクトを作成
var now = new Date();

// 「年」「月」「日」「曜日」を Date オブジェクトから取り出してそれぞれに代入
var y = now.getFullYear();
var m = now.getMonth() + 1;
var d = now.getDate();
var w = now.getDay();

// 曜日の表記を文字列の配列で指定
var wNames = ['日', '月', '火', '水', '木', '金', '土'];

// 「月」と「日」で1桁だったときに頭に 0 をつける
if (m < 10) {
  m = '0' + m;
}
if (d < 10) {
  d = '0' + d;
}

// フォーマットを整形してコンソールに出力
console.log(y + '年' + m + '月' + d + '日 (' + wNames[w] + ')');

コードの解説

「年」「月」「日」「曜日」を Date オブジェクトから取り出してそれぞれに代入

var y = now.getFullYear();
var m = now.getMonth() + 1;
var d = now.getDate();
var w = now.getDay();

date オブジェクトには、getFullYear() getMonth() getDate() getDay() というメソッドが用意されているので、取り出したらそれぞれ別の変数に格納しています。

なぜか getMonth() だけは、実際の月から -1 された数字が入るので、 +1 しています。

date オブジェクトのメソッドの詳細は Dateオブジェクト / JavaScriptリファレンス を参照しました。

曜日の表記を文字列の配列で指定

var wNames = ['日', '月', '火', '水', '木', '金', '土'];

曜日を取り出す getDay() では、0 から 6 の数字が取得できます。 0 が日曜日、1 が月曜・・・6 が土曜日という対応になっているので、曜日をどのように表記するかかを文字列の配列で持っておきます。

「月」と「日」で1桁だったときに頭に 0 をつける

if (m < 10) {
  m = '0' + m;
}
if (d < 10) {
  d = '0' + d;
}

「3月」を「03月」と 0 詰めして表記したい場合は、自分で処理しなければなりません。 入っている値が 1 〜 9 の場合は、頭に '0' という文字を追加することで、自動的に型変換されて 3 という数値が '03' という文字列になります。

フォーマットを整形してコンソールに出力

console.log(y + '年' + m + '月' + d + '日 (' + wNames[w] + ')');

あとは、それぞれ処理済みの変数を、好きなように整形して表示させるだけです。

関数化する

同じサイトの中では、日付の表記は普通は統一させると思います。でも、日付を扱う場所で都度上記の処理を行うのは面倒なので、フォーマットを整形する部分を関数化して、どこからでも呼び出せるようにしておくと便利です。

// Date オブジェクトを作成
var now = new Date();

// dateFormat 関数の実行
console.log(dateFormat(now));

// dateFormat 関数の定義
function dateFormat(date) {
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  var d = date.getDate();
  var w = date.getDay();
  var wNames = ['日', '月', '火', '水', '木', '金', '土'];

  if (m < 10) {
    m = '0' + m;
  }
  if (d < 10) {
    d = '0' + d;
  }

  // フォーマット整形済みの文字列を戻り値にする
  return y + '年' + m + '月' + d + '日 (' + wNames[w] + ')';
}

date オブジェクトを引数で渡して、整形済みの文字列を戻り値で受け取る関数にしてみました。

ゼロ埋めの方法を改善（2013-03-21 追記）

コメント欄で、ゼロパディング（ゼロ埋め）は .slice() メソッドを使えばできると教えてもらったので、dateFormat 関数を修正してみました。

// Date オブジェクトを作成
var now = new Date();

// dateFormat 関数の実行
console.log(dateFormat(now));

// dateFormat 関数の定義
function dateFormat(date) {
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  var d = date.getDate();
  var w = date.getDay();
  var wNames = ['日', '月', '火', '水', '木', '金', '土'];

  m = ('0' + m).slice(-2);
  d = ('0' + d).slice(-2);

  // フォーマット整形済みの文字列を戻り値にする
  return y + '年' + m + '月' + d + '日 (' + wNames[w] + ')';
}

if が取れてスッキリしました。うれしい。GAVAScript さん、吉田さん、どうもありがとうございます。

ライブラリを使う（2013-03-21 追記）

自分で書かずにライブラリを使うのが便利らしいです。教えてくれてあざます！

参考サイト Thx ♡

jQuery の on() と off() を理解する

JavaScript jQuery

初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。

on() ひとつで bind() live() delegate() を表せる

jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。

.foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。

bind()

$('.foo').bind('click', function(){...}); は $('.foo').click(function(){...}); と同じ意味で、ごく普通の基本的なイベント設定方法です。 その要素に対してイベントが発生したら何かするという感じ。

$('.foo').bind('click', function(){...});
$('.foo').unbind('click');

これを on() で書くとこうなります。

$('.foo').on('click', function(){...});
$('.foo').off('click');

一緒だったらわざわざ on() なんて使わずに click() でいいじゃんと思うかもしれませんが、このあとの話で on() にするメリットが出てきます。

delegate()

delegate() では、イベントを設定するのは親の要素に対して行います。delegate() の 1 番目の引数で、実際にクリックする要素 .foo を指定しますが、イベントが張り付いているのは親の .parent です。そして、 .parent の中にある .foo だけがクリックイベントの発生する対象となります。このように、親要素に対してイベントを設定することを、イベントデリゲートと言います。

最初に HTML が描画された後に、JavaScript によって要素を追加した場合、bind() でイベントを設定している場合は、後から追加された要素にはそのイベントが効きません。でも、delegate() の場合は、後から追加した要素にもちゃんとイベントを適用できます。

$('.parent').delegate('.foo', 'click', function(){...});
$('.parent').undelegate('.foo', 'click');

これを on() で書くとこうなります。

$('.parent').on('click', '.foo', function(){...});
$('.parent').off('click', '.foo');

live()

live() も delegate() と同じように、JavaScript を使って後から追加した要素に対してもイベントを設定できます。delegate() との違いは、イベントを設定する対象が document になります。でも、書き方は次のように .foo に対してイベントを設定しているように書きます。でも実際にイベントが設定されているのは document です。分かりにくい・・！

$('.foo').live('click', function(){...});
$('.foo').die('click');

これを on() で書くとこうなります。

$(document).on('click', '.foo', function(){...});
$(document).off('click', '.foo');

on() の書き方の方が、実際の挙動と見た目が一致していて分かりやすいです。あと、die() って名前、live() と対になってるのが分かりにくい気がする。英語できないからでしょうか・・。

ひとつの要素に複数のイベントを設定する方法

同じ処理をする複数のイベントを設定

on() のひとつ目の引数を、スペース区切りで複数指定することで、どのイベントが発生しても同じ処理をさせることができます。

$('.foo').on('click blur', function(){...});

別々の処理をする複数のイベントを設定

on() の中身を連想配列にすることで、イベントごとに異なる処理を記述できます。

$('.foo').on({
  'mouseenter': function(){...},
  'mouseleave': function(){...}
});

イベントデリゲートで複数イベントを設定する

イベントの連想配列の後に、カンマで区切ってイベント対象の要素を指定します。

$('.parent').on({
  'mouseenter': function(){...},
  'mouseleave': function(){...}
}, '.foo');

live() は廃止

live() と die() は jQuery 1.9 で廃止されました。 delegate() は今のところ廃止の予定はありませんが、on() が推奨なので、今から on() で書いておいたほうがよさそうです。

参考サイト ＆ 本 Thx♡

Node.js + Express を Heroku で動かすまでの手順まとめ

JavaScript Node.js 環境設定

普通の JavaScript も jQuery もまともに書けないけど、はじめての Web アプリを Node.js でつくってみるという奮闘記。

環境つくるだけなのに何も分からなすぎてハマりすぎて、この一連の流れだけで丸 2 日潰れるという大惨事だったので、ちゃんとブログに残しておく。

Node.js のインストール

Node.js の INSTALL ボタンから、インストーラを使って入れることもできるけど、Node.js のバージョンを切り替えて使える方が便利だと思うので、前回のエントリを参考に nodebrew を使ってインストールするのがオススメ。

インストールが正しくできているか確認のため、Node.js のバージョンを表示。

$ node -v

npm のインストール

Node.js にはたくさんのモジュールパッケージが用意されていて、それらを簡単に導入できるのが npm という Node.js のパッケージ管理ツールです。

最近のバージョンの Node.js では、Node.js と一緒に npm もインストールされるようです。念のため、自分の Mac に npm がインストールされているかの確認のため、バージョンを表示。

$ npm -v

Express のインストール

Express は 動的なWebサイトをつくるための基本機能が揃ったフレームワークです。有名らしいのでこちらを使うことにしました。ただ、現在のバージョンは 3.1.0 なのですが、ブログで書かれている内容は 2.x 系の場合が多く、3.x 系でだいぶ変わったそうなので、本家のドキュメントを参考にするといいそうです。英語だけど・・。

Express はグローバル環境にインストールすると、express コマンドがターミナルで使えるようになるそうなので、下記のように実行してインストールします。-g はグローバルという意味です。

$ npm install -g express

終わったら念のため、バージョンを表示してインストールの成功を確認します。

$ express --version

プロジェクトをつくる

express コマンドを使うことで、プロジェクトを生成できます。例として「sample」プロジェクトをつくってみます。

まず、プロジェクトを生成したいディレクトリの一つ上まで移動します。

$ cd ~/works/project/

express コマンドとプロジェクト名を指定して実行します。

$ express sample

~/works/project/sample にフレームワークのファイルが一式展開される形でプロジェクトが生成され、ターミナルには次のように表示されます。

create : sample
--- 省略 ---
create : sample/views/index.jade

install dependencies:
  $ cd sample && npm install

run the app:
  $ node app

この「install dependencies:」に書いてあるコマンドを実行しないと、node app の実行がエラーとなりサーバを起動できません。私はここでハマりました。プロジェクトのディレクトリに移動して、モジュールをインストールします。

$ cd sample && npm install

モジュールがインストールできたら、以下のコマンドで Node.js を起動できるようになります。

$ node app

Express のデフォルトのポート番号は 3000 番なので、ブラウザで http://localhost:3000/ にアクセスしてみます。「Express - Welcome to Express」と表示されていればインストール成功です。Thank you!!!（Welcome to への返事）

ちなみに Node.js は、Ctrl + C で終了できます。

Heroku Toolbelt のインストール

Heroku Toolbelt をインストールすると、ターミナルで heroku コマンドが使えるようになります。インストールは簡単です。

  1. Heroku Toolbelt の「Heroku Toolbelt for Mac OS X」ボタンから、インストーラをダウンロードします。
  2. ダウンロードした「heroku-toolbelt.pkg」をダブルクリックしてインストールします。
  3. ~/.bashrc などの環境設定ファイルに、自動的に PATH が追加されます。もし追加されてなければ、次の一文を追加して PATH を通すと heroku コマンドがターミナルから使えるようになります。
export PATH="/usr/local/heroku/bin:$PATH"

ターミナルから Heroku にログイン

※あらかじめ、Heroku のサイトでユーザアカウントを登録（Sign Up）しておきます。

ターミナルから、Heroku の自分のアカウントにログインします。

$ heroku login

続けて、登録時の Email アドレスとパスワードを聞かれるので入力します。成功すると「Authentication successful.」と表示されます。

Heroku へデプロイ

cd でプロジェクトのディレクトリに移動して、下記のコマンドを実行します。「tacamy-sample」の部分は「http://tacamy-sample.herokuapp.com/」といった具合に URL の一部になります。指定なしで $ heroku create とした場合は、自動的に生成されたランダムな名前が割り当てられます。

$ heroku create tacamy-sample

完了すると、ターミナルにアプリの URL と Git のリポジトリ URL が表示されます。

http://tacamy-sample.herokuapp.com/ | git@heroku.com:tacamy-sample.git

確認のため、http://tacamy-sample.herokuapp.com/ にブラウザからアクセスし、「Heroku | Welcome to your new app!」と表示されれば成功です。Thank you!!!

Procfile をつくる

Procfile とは、Heroku で必要となる、アプリケーションの起動に関するファイルです。私はこれがないと Heroku での表示で「Web じゃないよ」みたいなエラーになりました。詳しいことは procfile · herokaijp/devcenter Wiki に書かれているようですが、私は理解できませんでした／(^o^)＼

とりあえず動くようにするには、次の一文だけ書いて、ファイル名を「Procfile」とし、プロジェクト直下に置きます。

web: node app.js

.gitignore をつくる

プロジェクトのファイルは Git を使って Heroku に Push しますが、node_modules ディレクトリ以下は Heroku 上で展開する（？）ので、ローカルから Push する必要はありません。そのため、.gitignore ファイルをつくってその旨を指定します。

node_modules
.DS_Store

ついでに、.DS_Store もコミットされないようにしてみました。

package.json に追記

Express で生成された sample/package.json ファイルに、Heroku 用の記述を追加します。これを書かないと Heroku に Push したときにエラーになるので注意！（はい、ハマりました。）

Express で生成された状態では、"dependencies" の記述はありますが、"engines" の記述がありません。そのため下記のように、"dependencies" のあとに "engines" を追加して、Node.js と npm のバージョンを記述します。

--- 省略 ---
"dependencies": {
  "express": "3.1.0",
  "jade": "*"
},
"engines": {
  "node": "0.8.19",
  "npm":  "1.2.10"
}
--- 省略 ---

Git リポジトリの作成とコミット

  1. リポジトリつくって、
  2. ローカルのファイルを全部 Index に追加して、
  3. コメントつけてコミット

という、普通の Git の操作をします。

$ git init
$ git add .
$ git commit -m "initial commit"

SSH の鍵認証

ここ少しあやしいのですが・・。

まず、Heroku の公開鍵を確認します。

$ heroku keys

Heroku に登録した Email アドレスで、公開鍵が表示されれば大丈夫です。この鍵が、~/.ssh/id_rsa.pub の鍵と同じであることを確認し、下記のコマンドを実行して Heroku に公開鍵を登録します。

$ heroku keys:add ~/.ssh/id_rsa.pub

私の場合は、heroku keys で登録した Email アドレスでの鍵が表示されなかったので、Heroku と SSH 通信するための公開鍵をつくりました。

$ ssh-keygen -t rsa -C "xxxxx@gmail.com"

上記のコマンドを実行したところ、~/.ssh 以下に、id_rsa と id_rsa.pub ファイルが新たに作成され、$ heroku keys コマンドの結果にも表示されるようになり、晴れて Heroku に公開鍵を登録できました。このあたりの詳しいことは、下記エントリを参照しました。

Heroku へ Push

最初だけ、下記のコマンドを実行しないと、Push できずにエラーで怒られます。

$ git remote add heroku git@heroku.com:tacamy-sample.git

あとは普通に heroku master に Push します。

$ git push heroku master

Heroku で表示確認

Heroku 上のプロジェクトの URL にアクセスして、ローカルと同じものが見れてれば成功です。長い道のりおつかれさまでした！！！

http://tacamy-sample.herokuapp.com/

余談

この流れは、普通に新規でプロジェクトをつくる流れなのですが、私の場合は Facebook アプリをつくりたくて、Facebook にアプリ登録するときに Heroku を選択したらプロジェクトが Heroku に登録されてしまったのです。でも、ローカルにはまだ何もないし、Heroku と Facebook にはプロジェクトが存在するという状況で、この新規でつくる流れより混乱しました。その場合の方法は、また別のエントリで書くつもりです。

あと、Heroku 以外のところは、JavaScript徹底攻略 (WEB+DB PRESS plus) が本当に役立ちました。これがなかったら未だにできてないと思います・・。ありがとうございます！！

参考サイト Thx♡