input type=”email” のバリデーションチェックを止めたい
input type=”email”
とすると、対応ブラウザの場合、ブラウザ側でバリデーションチェックをして、Email の形式じゃなかった場合はエラーメッセージを表示してくれる。
でもこれがジャマになって止めたいときもある。その場合は form タグに novalidate 属性をつければ抑止できるらしい。
<form> <input type="email"> </form>
これを、
<form novalidate> <input type="email"> </form>
こうするだけ。
Chrome のみで確認。
thx @yomotsu 先生
ssh の公開鍵認証のいろは
CTO が分かりやすく教えてくれたので、メモ。
公開鍵の基本
公開鍵とは、github や beanstalk、Heroku などの git を使うサービスを利用するときに必要な、~/.ssh 以下につくられるファイル。
公開鍵と秘密鍵
ファイル名の最後に .pub がついている方が公開鍵、ついていない方が秘密鍵。
公開鍵とは、例えるなら家の鍵穴みたいなもので、誰でも見ることができる。 秘密鍵とは、例えるなら家の鍵で、自分しか持ってないもの。 公開鍵(鍵穴)と秘密鍵(鍵)が一致することで認証される仕組み。 だから、秘密鍵は絶対に公開してはいけない。
rsa と dsa
rsa と dsa の違いは、暗号化方式の違い。
利用するサービスの公開キー登録方法の説明を読んでみて、書いてある方を使えばOK。
公開鍵の使い回し
サービス間での使い回し
サービスごとに別々に鍵を用意して分けてもいいけれど、使いまわすこともできる。
そのサービスで登録しているメールアドレスとは違うメールアドレスが記述されている鍵でも関係なく使い回しができる。サービスの説明ページで、ssh-keygen コマンドで鍵を作成するように書いてあったとしても、すでに別のサービスで作成済みであれば新たに作成する必要はない。
マシン間での使い回し
普通、鍵はマシン固有のものなので、複数のマシンを使うなら、それぞれで鍵をつくらないといけない。 その場合はマシンを買い換えたときも、鍵を新たに作りなおす必要がある。
複数のマシンで鍵を使い回す場合は、~/.ssh 以下のファイルをごっそり別マシンにコピーして、鍵照合すれば使える(?)。
感想
鍵穴と鍵の説明わかりやすくて、CTO さすが CTO。もうこれで怖くない!
gem update --system したら gem update bundler もね!
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 に例えて分かりやすく教えてもらえました。
- Ruby の gem は、パッケージ管理ツールで、Node.js だと npm みたいなもの。
- npm の場合はプロジェクトごとに管理できるし、-g でグローバルにもできる。
- でも gem はグローバルしかできない(Node.js で言う -g だけ)。
- プロジェクトごとの管理は、bundler が行う。
- gem と bundler の 2 つを合わせて、Node.js の npm みたいに使える。
分かりやすい・・!ほかちゃんは説明の天才か。
まとめ
gem update --system
したら、
gem update bundler
もした方が安全。特に gem がメジャーアップデートとかしてたら、やった方がいいかも。
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 追記)
自分で書かずにライブラリを使うのが便利らしいです。教えてくれてあざます!
- おすすめライブラリつまみ食い - Moment.js | CodeGrid @hokaccha thx
- tokuhirom/strftime-js · GitHub @songmu thx
参考サイト Thx ♡
jQuery の on() と off() を理解する
初心者向けの本とかだと、イベントを 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 も 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
コマンドが使えるようになります。インストールは簡単です。
- Heroku Toolbelt の「Heroku Toolbelt for Mac OS X」ボタンから、インストーラをダウンロードします。
- ダウンロードした「heroku-toolbelt.pkg」をダブルクリックしてインストールします。
- ~/.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 リポジトリの作成とコミット
- リポジトリつくって、
- ローカルのファイルを全部 Index に追加して、
- コメントつけてコミット
という、普通の 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♡
node.js 入れるなら nodebrew が超簡単
node をバージョン別に使い分けたりしたかったので、nodebrew なるものを使うことにした(hokaccha++)。
最初は nvm 使ったんだけど、なんかうまくできなかった。
~/.bashrc に設定書いたら、ターミナル起動するたびに nvm use v0.8.19
とか出てくるのがイラっとしたのでやめた。
1. nodebrew のインストール
ターミナルに以下の 1 行コピペするだけ。超簡単。
curl https://raw.github.com/hokaccha/nodebrew/master/nodebrew | perl - setup
2. 環境設定ファイルにパスを通す
いまだに「パスを通す」っていう意味が分かってないけど、これをやらないと、ターミナルを再起動したときに、せっかく入れたツールが使えなくなるっていう認識でおります・・。
私は ~/.bashrc を使ってるので、以下の1行を追記した。
export PATH=$HOME/.nodebrew/current/bin:$PATH
~/.zshrc 使ってる人はそっちに同じもの書けばいいらしい。超簡単。
nodebrew がちゃんと入ってるか確認するために、ターミナルを再起動したら、以下の 1 行を実行してみる。
nodebrew -v
ちゃんと nodebrew 0.6.2
って表示されたのでできてるぽい。
追記
「PATHを通す」っていう意味は、教えてもらったページ読んだら分かった気がする!
- パス(PATH)の確認と設定方法は? - Pocketstudio.jp Linux Wiki
- .bash_profileとか.bash_loginとか.profileとか.bashrcとか.bash_logoutとか多すぎる - action power
OS にデフォルトで用意されていないコマンドを使うには、そのコマンドのプログラムがある場所を教えてあげないと OS は自力で探せないらしい。だから PATH を通してないと、「そんなコマンドないよ」って怒られるぽい。
@hokaccha @cipher さんありがとう〜(∩´∀`)∩
3. node.js をインストール
まず、nodebrew でインストールできる node.js のバージョンを確認するために、以下の 1 行を実行。
nodebrew ls-remote
バージョンの一覧が表示されるけど、この中からどれを入れようって迷う。nodejs.org のトップページで、「Current Version: v0.8.19」って書いてあったので、きっとこれが安定版の最新なんだろうと思い、以下の 1 行を実行してインストール。
nodebrew install-binary v0.8.19
インストールが一瞬で終わる。はやい。
ちなみに、nodebrew install v0.8.19
としてもインストールできるけど、コンパイルを自分でするからインストールにすごく時間がかかる。だから、バイナリからインストールするとよいです。最初、install
コマンドを使ったら、あまりにも時間がかかるし、意味不明なコードがターミナル上で延々と表示されて、壊れたんじゃないかと不安になった。
ちなみに、v0.8.6 以前のバージョンは、バイナリからインストールできないので、install-binary
じゃなくて install
コマンドでやるしかないらしい。
他に入れたいバージョンがあったら同じように、どんどんインストールしていきます。
インストールした node.js のバージョンの一覧は、以下のコマンドで確認できます。
nodebrew ls
node のバージョンを切り替えるのは、以下のコマンドで。
nodebrew use v0.8.19
これで、node.js がインストールできました。簡単すぎてすごい。