node.js | HTTPSサーバーの作り方
node.jsを用いてHTTPSサーバーを構築する手順について説明します。node.jsでHTTPSサーバーを構築するのに最も大切なこと、それは鍵ファイルの生成です！！
HTTPSとはwebサーバーとWebブラウザの間の通信が暗号化されているものです。そのため暗号化するための鍵ファイルが必要になります。
node.jsによるHTTPSサーバーは以下のソースで実装できます。
ポイント
- node.jsによるHTTPSサーバーの構築には秘密鍵ファイルとデジタル証明書ファイルを指定する必要があります(3 ~ 6行目)
- 鍵ファイルの指定でミスをしてしまうとサーバーは立ち上がってもアクセスすると以下のような画面がでてしまいます(鍵が問題だと気づくのに半日かかったw)
opensslによる鍵ファイルの作り方
ということで半日苦しんだ鍵ファイルの生成方法について詳しく説明します。生成しなければならない鍵ファイルは３種類です。鍵ファイルを自動で生成してくれる便利なツールとかあるらしいのですが、勉強のため「openssl」というコマンドを使用して生成しました。
- 秘密鍵
- 公開鍵
- デジタル証明書
秘密鍵の生成
opensslコマンドを使用して以下のコマンドで生成可能である。
$ openssl genrsa -aes128 1024 > server.key
genrsa
-aes128
128ビットのAES方法で暗号化します。
1024
1024バイトの鍵を生成する
公開鍵の生成方法
以下のコマンドを実行して公開鍵を生成するための情報を入力します。
$ openssl req -new -key server.key > server.csr
req
公開鍵を生成します。
-key
秘密鍵が書いてあるファイルを指定します。
| Country Name (2 letter code) [AU]: | 国名 |
| State or Province Name (full name) [Some-State]: | 都道府県 |
| Locality Name (eg, city) : | 市区町村 |
| Organization Name (eg, company) [Internet Widgits Pty Ltd]: | 組織名 |
| Organizational Unit Name (eg, section) : | 部門名 |
| Common Name (eg, YOUR name) : |
サイト名 |
| Email Address : |
メールアドレス |
| A challenge password : |
証明書を破棄する時に必要になるパスワード |
| An optional company name : |
別の組織の名前 |
デジタル証明書の作成
$ openssl x509 -in server.csr -days 365 -req -signkey server.key > server.crt
x509
X.509 形式のデジタル証明書を作成する
-in
公開鍵ファイルの指定
-days
証明書の有効期限を指定
-req
公開鍵ファイルがcsrであることを指定する
-signkey
秘密鍵ファイルの指定
参考文献
facebookアプリの作り方
いろいろあって、facebookアプリを作ることになったので、いろいろずっこけまくったので、それを備忘録として書きます。
facebookアプリの作成
facebookデベロッパー登録
デベロッパーページにてデベロッパー登録を行います。スクリーンショットを取り忘れてしまったため、デベロッパー登録に関しましては以下のサイトを参考にしてください。
http://princesswell.rocketserver.jp/web-cheat-sheet/facebook-developers-application/
facebookアプリの作成
1, デベロッパーページにて右上の「create new app」ボタンをおす。
2,下写真のように情報を入力していきます。
App Namespaceの欄にはcanvas page urlに反映されます。
3, 認証キーを入力してアプリ作成を完了する。
4,アプリ作成終了
今回は使いませんが、App IDとApp Secretは自作アプリを作るときに必要なので控えておくようにしてください。
5,「App on Facebook」にpage urlを設定する。
以下写真のようにcanvas urlとsecret canvas urlを設定します。
6, Saveして設定終了
7, canvas pageにアクセスすると実行することを確認することができます。
canpas pageに書いてあるURLにアクセスすると以下のようにfacebookのcanvas内に無事に表示されていることが確認できるとおもいます。
ポイント
僕が一番手こずったところはfacebookの仕様変更でした。
facebookは約２年前くらいに完全HTTPSに移行しました。それによって、全てのサービスはHTTPSに対応させなければならなくなってしまいました。
大半のfacebookアプリ作成解説サイトでは昔の仕様なので以下のような設定をしていますが、これどうりにするとエラーがおきますので気をつけてください。
結局、なにがいいたいかというと
facebookアプリを作るときはSecure Canvas URLまでしっかり設定してください！！
ということでした。
SakuraVPSでページを掲載するのにてこずった話
SakuraVPSでwebページをアップロードしてみたので、その手順とたくさん踏んだ地雷を紹介していきたいとおもいます。
SakuraVPS上でwebページをアップロードする方法
まずは、普通にwebページをアップロードする手順を示して行きます。
１、Apacheのインストール
まずは、下記のコマンドでapacheをインストールします。
yum -y install httpd
２、Apacheの設定
下記のコマンドでさくらVPSが常に自動で起動するように設定します。
chkconfig httpd on
次に、設定ファイルを編集します。
vim /etc/httpd/conf/httpd.conf
設定項目は以下の３つです。
ServerTokens OS → ServerTokens Prod
ServerSignature On → ServerSignature Off
Options Indexes FollowSymLinks → Options -Indexes FollowSymLinks
３、Apacheの起動
ここまで設定が終了したら、設定ファイルに文法エラーがないかをチェックします。
service httpd configtest
特に、これで問題なければ、Apacheを起動してみましょう。
service httpd start
４、ホームページの設定
Apacheではホームページのデフォルトの階層は var/www/htmlになっています。この下にhtmlファイルを配置するとホームページを開くことができます。
起こったエラー達
１、could not bind to address [::]:80
上記の設定どうり、行いApacheを起動してみたところこのようなエラーが起きてしまいました。
Starting httpd: (98)Address already in use: make_sock: could not bind to address [::]:80
原因
すでに80ポートはつかわれてるよーってものらしいです。
対処法
このポートを使っているプロセスをkillすればよい。下記のコマンドではプロセスIDを調べて、プロセスを殺しています。
usr/sbin/lsof -i | grep http
kill -9 PID
２、httpd dead but subsys locked
しかし、自分の場合、プロセスすらうごいていませんでした。謎は深まるばかりでした。ということでhttpdの状態を確認してみることに
/etc/init.d/httpd status
そうすると、次のようなエラーになりました。
httpd dead but subsys locked
原因
このエラーが起こってしまうエラーは二つあります。
対策法
１、Apacheがセマフォを使い切る
このエラーは詳細はいろいろ調べてみたのですが今一わかりませんでした。以下のサイトがわかりやすいと思うので、参照お願いします。
２、他のプロセスによって80ポートが使われている
今回の自分の原因はこっちでした。単刀直入に原因をいうと
以前、railsのアプリケーションをデプロイする際に80ポートを使用していたのが原因でした。
参考にさせてもらったサイト
d3.jsが格好良すぎてやばい
d3.jsとはなにか
d3.jsとはData Driven Documentの略です。
データ可視化のためのjavascriptのライブラリです。簡単にデータをグラフ描画してくれたり、ちょっとしたアニメーションも作成することができます。
今回はd3.jsの簡単な使い方とか魅力とかを解説していきたいとおもいます。
準備
まずは、HTMLファイルを用意します。d3.jsを導入するには以下の行をbodyタグ内に挿入するだけで使うことができます。
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
使い方
d3.jsの操作は主に以下の手順で行います。
- SVGを作成
- 要素を選択
- その要素に対して、アニメーションをつけたりイベントをつけたりなどの操作をおこなう。
SVGとは
d3.jsではSVGにグラフや図形を書いて行きます。SVGとは「Scalable Vechtor Graphics」の略でベクター方式で2次元グラフィックスh3を表現するためのXMLベースの言語のことです。詳しい説明はこちらをご覧ください。
では、実際にSVGを作成して行こうとおもいます。以下のコードが実際のコードです。
var svg = d3.select("body").append("svg").attr({width: 700,height: 200})
上のコードではbodyタグの中に横幅700px、高さ200pxの領域でSVGを定義したことになります。
グラフを書く
では、先ほど作成したSVGに実際に簡単なグラフを書き入れてみましょう。棒グラフ系は以前、jqplotを使ったときに実装しているため、今回は散布図を書いてみることにしました。結果は以下のような感じになります。軸がないのでグラフに見えづらいですけど、散布図ですw
ソースは以下のような感じになります。ソースコードもそこまでむずかしくなく、簡単に上のような散布図を描くことができます。
アニメーションを導入してみる。
さきほど紹介したようなグラフは他のライブラリでも似たような文法なのですが、d3.jsがすごいところはなんといってもアニメーションだと思います。
以下のようなアニメーション付きグラフが簡単に実装できてしまいます！！
ほかにもこんなんとかアニメーションがついたやつが簡単に作成することができてしまうのです。
といったように、d3.jsの魅力は
ちょっといけてるようなアニメーションが簡単にかけるところです。
公式サイトのサンプルには 他にもかっこいいのがたくさんあります。
アニメーションのソースコードはgithubに公開しております。
一つ目の動画のプログラム↓
https://github.com/pgpg-sou/testSource/blob/master/sample_d3_graph.html
２つ目の動画のプログラム↓
https://github.com/pgpg-sou/testSource/blob/master/d3js.html
DIコンテナってなんだろう(2/2)
前回、オブジェクト指向についての説明を行いました。
では、オブジェクト指向についてデメリットはなんなのかについてまず記述していきたいとおもいます。
オブジェクト指向のデメリットとは
オブジェクト指向はいろいろな事象をオブジェクトとして捉え、それの組み合わせで一つのものを作るというすごく便利なものです。しかし、組み合わせが強すぎるのではという問題がありますよ。
要はオブジェクト間の依存です！
たとえば、以下のような図のシステムがあった時に、「Class A」は全てのクラスから継承されています。もし、ここでClass AのメソッドAを編集したときにそれを継承している全てのクラスの内容を書き換えないといけなくなってしまいます。これは、Class Aと他のクラスとの依存関係が濃密すぎるのが問題です。
仮にこのシステムを一人で作っているのであればまだしも、複数人がそれぞれのクラスを分担して作成しているとなると被害は甚大です。
この依存性を少しでもなくしてあげるのがDI(Dependency Injection)という考え方です。
DIは直訳すると「依存性の注入」みたいな意味があります。
では、具体的にどういうものなのでしょうか。
DIコンテナとは
簡単にいいますと、オブジェクト間の依存関係というのを外部ファイルに書き出します。その外部ファイルを読み込んでそれをクラスに注入するのがDIコンテナです。
絵に書くとこんな感じです。
DIコンテナのメリット
では、 DIコンテナのメリットとはなんでしょうか。メリットを以下にあげてみました。
- オブジェクト間の疎密合
- 疎密によりオブジェクトの保守性・拡張性の向上
- 単体テストがしやすくなる
DIコンテナのデメリット
では、DIコンテナのデメリットを以下にあげてみました。
- 設定ファイルが肥大化していく
- 知るためのコスト
- あまり一般的につかわれていない(？)
まとめ
DIコンテナについて説明しました。
DIコンテナとはオブジェクト間の密な依存関係をなくすためのものです。
２回に分けてDIコンテナの概要について説明してきました。
次回はソースコードを乗っけて説明していこうと思います。
DIコンテナって何だろう？(1/2)
DIコンテナについて説明を始める前にまずはオブジェクト指向について説明します。
オブジェクト指向とはなにか
オブジェクト指向とは属性と振る舞いをもったオブジェクトというものにまとめそれを一つの部品として、オブジェクト同士をくっつけていくことによって何か一つのものをつくるという考え方です。
オブジェクト指向には主に以下のような特徴がある。
それぞれ簡単に説明していきます。
継承とは
継承とはあるオブジェクトの特性をほかのオブジェクトが引き継ぐことです。
実際に例を使って説明してみます。
以下の図をみてください。コンピューターというオブジェクトがあって、それの定義(属性)はCPUとメモリ、ハードディスクが入っていればコンピュータとします。振る舞いとしてコンピューターの主な振る舞いとして「計算する」という振る舞いをもっています。
コンピュータにはノートパソコンとデスクトップパソコンの２種類が存在します。それぞれの特徴を以下のように定義してみました。
それぞれ別のものではありますが、大元はといえばコンピューターの一種です。そのため以下のようにコンピューターというオブジェクトを継承して「ノートパソコン」、「デスクトップパソコン」というオブジェクトを定義することができます。
ある共通のデータや振る舞いを再利用するための概念を継承といいます。
ポリモーフィズムとは
ポリモーフィズムとはひとことでいうと同じメソッドを使って、違い振る舞いをするということです。ポリモーフィズムには「多相性」、「多義性」という意味があります。
たとえば、「遊ぶ」ということを考えるときに「女と遊ぶ」、「男と遊ぶ」、「公園で遊ぶ」とでは遊ぶということに関しては一緒ですが、対象がなにであるかによって遊び方が変わってきます。
対象によって遊び方が変わるということは、プログラムの世界では別の名前で実装しなければなりません。対象物が違うだけで違うプログラムを作らなければいけないというのはとても煩雑です。そういった煩雑さをなくす概念がポリモーフィズムです。
ポリモーフィズムは対象物によって「遊ぶ」という振る舞い方をかえてくれる優れた機能のことです。
カプセル化とは
カプセル化とはオブジェクトの持つデータと振る舞いについて公開部分と非公開部分に分けることです。これによって他オブジェクトからみられたくない情報を隠蔽することができます。カプセル化をすることによって「情報隠蔽」することができます。
「人」オブジェクトをつかって例をあげてみました。
下のような図をみてください。「+」はpublic、「-」はprivateとして扱います。「-」がついているところはあまり人に知られたくない情報、「+」は人に知られてもいい情報となっています。
カプセル化によってデータを隠蔽することができます。
まとめ
オブジェクト指向の概念的なところだけではありますがなんとなくオブジェクト指向ってこんなん(？)っていうのがわかったかなとおもいます。
それでは、次回DIコンテナとは何かについて説明していきたいと思います。
どうしても説明だけだと今一イメージがわきにくいと思いますので、オブジェクト指向についてプログラムで書くとこんなんだよっていうのをそのうち紹介していきたいと思います。
サーバ上でのrailsの動かし方とその際におこるエラー
railsを使ってwebサービスを作ってそれをサーバーにデプロイするまでの手順とエラーを紹介していきます。サーバーはさくらVPSを使用しています。
大まかな流れとしてはこんな感じです。今回は開発環境の構築方法については省きます。
sshでサーバーにログイン
サーバにログインする際には「ssh」コマンドを使います。
また、ユーザーを指定してログインする際には
といった感じにするとログインすることができます。また、ポート番号をしてのログインは
といった感じになります。
railsプロジェクトのインポート
サーバーにgitからソースをクローンしてプロジェクトをインポートをします。一応はコマンドはしたのような感じです。
git clone ~~
実際にうごかす
railsプロジェクトをインポートしたらまずは「bundle install」をして「rake db:migrate」をして実行するのですが、ここでは自分が遭遇したさまざまなエラーと解決法を紹介していきます。
rake db:migrate でのエラー
「bunsle install 」が無事に完了してdbを作成しようとおもったのですが、以下のようなエラーが起きてしまいました。
rake aborted!
invalid byte sequence in US-ASCII
(See full trace by running task with --trace)
原因
これはこのプロジェクト内に日本語のファイル名のものが存在していたのが原因でした。サーバーのencodingがUTF-8のため、US-ASCIIの文字列が含まれているとこのようなエラーが起きてしまいます。
解決法
日本語のファイルを削除、またはファイル名を変更することで「rake db:migrate」が通るようになります。
LoadError cannot load such file -- sass
dbの作成が終了して、これでいけるだろうっと実行してみると今度はこんなエラーがおきました。なんかsassファイルを読み込んでくれない。。。
原因
このプロジェクト作成当初はbootstrapを導入していなかったため、stylesheetの拡張子が「less」でなく「sass」でした。
その名残ファイルがまだ、残っていたみたいでsassを読み込むためのgemを導入する必要がありました。
解決法
解決法は以下の２つです。
- sassのgemをインストール
こちらはいろいろやってみたのですが、うまくいきませんでした(笑) - sassファイルを削除する
1の方法で失敗してうまくいかなかったため、sassファイルを削除すると成功しますw
SyntaxError
さて、やっと表示されたかなと思ったら、今度は下のような画面になっちゃっいました。
コンソール上でエラーを確認すると、下のようなエラー文がでてました。
invalid multibyte char (US-ASCII)
原因
ページ上にUS-ASCIIの文字列があったため、うまくエンコーディングができなかったためにこのようなエラーがおきてしまいました。
解決法
この解決方法は簡単で、表示したいviewのcontrollerの先頭に以下の文を付け加えるとなおります。
# encoding: utf-8
