KUROIGAMEN(黒い画面)

この記事を書いた人: komagata

WordPressなら結構触ったことがあるけどちゃんとしたプログラミングやrubyはちょっと・・・というデザイナー向けsinatra簡単入門を書いてみます。

sinatraはWebアプリが超簡単に書けるライブラリなのでWebが分かった感を掴むには最適だと思います。

rubygemの設定

rubyにはrubygemというライブラリを管理する仕組みがあります。rubyに対するプラグインみたいなもんだと考えてもらって結構です。プラグイン（gemと言います）みたいなもんだけあって、手っ取り早くて便利なものが沢山あります。sinatraもそのひとつです。

Macでの簡単rubygem設定

Macでややこしいことをせずにrubygemを使うには下記の通りにしてください。理由は聞かないで下さい。

~/.bash_profileに下記の通り書いて保存、ターミナルを再起動する。

export GEM_HOME=~/.gem/ruby/1.8

（ターミナルの使い方についてはこちらを参照してください）

sinatraのインストール

これでrubygemの準備ができました。sinatraをインストールしてみましょう。rubygemの検索・インストール・アンインストールにはgemコマンドを使います。

$ gem install sinatra

これでsinatraが必要とする他のgemも勝手にネットからダウンロードしてきてインストールしてくれます。便利です。

最小限Webアプリ

早速、トップページ（/）にアクセスするとhelloと表示するだけのWebアプリ（hello.rb）をテキストエディットで書いてみます。

上記をhello.rbというファイル名で保存したらターミナルから下記のようにrubyプログラムとして実行してみてください。

$ ruby hello.rb

何か表示されて止まると思うので、その状態でブラウザでhttp://localhost:4567/にアクセスしてみてください。

最低限のWebアプリができました。

中身の説明

requireは他のrubyプログラムを読み込むメソッドです。（メソッド＝機能ぐらいに思って下さい）

rubygemを使うにはまずrubygemというプログラムを読み込む必要があるので1行目でrequireしています。2行目ではsinatraを使うのでrequireしています。

4〜6行目は、「'/'にアクセスしたら'hello'を表示する」みたいな意味です。

getというのはsinatraが提供するメソッドです。他にpost, put, deleteなどがあります。対応するURLにアクセスが来たらdo ~ end（ブロックといいます）の中身を実行して最後の行を表示してくれます。

対応するURLを増やす

トップページだけじゃ寂しいので/helloというURLも追加してみます。

require 'rubygems'
require 'sinatra'

get '/' do
  'hello'
end

get '/hello' do
  '<html><head><title>hello</title></head><body><h1>hello</h1></body></html>'
end

こんな感じにまともなHTMLを返すこともできます。

hello.rbを再起動してみましょう。（動いているプログラムを止めるにはターミナルでControl + Cキーです）

$ ruby hello.rb

http://localhost:4567/helloにアクセスしてみます。

このプログラムを今は自分のMacで動かしていますが、ネットに公開されているPC（いわゆるサーバー）で実行すればれっきとしたWebアプリです。

既にこれだけでもかなりのWebサイトが作れることにお気づきの方もいらっしゃるかもしれません。Rubyの知識などはすっ飛ばして進んでいますが、次回はHTMLファイルを表示する方法を紹介したいと思います。

この記事を書いた人: machida

先日、急遽怖い話を投稿できるサイト、怖話（こわばな）というサイトを僕が所属してるフィヨルドという会社のサービスとしてリリースをしたのですが（なのでまだまだ未完成）、怖話はスマホサイトで、スマホ用のコーディングの際にRuby「Gem」の「proxylocal」という便利なツールがすごく役立っているので今回はその使い方を紹介します。

シミュレーターって意味ない

Xcodeを入れると一応iPhoneのシュミレーターは入りますが、見た目を整えるのには使えますが、使い心地を確認するにはサイズは違うし、実際にタッチも出来ないしで、あんまり役に立たないですよね。

今開発中のものが手軽に自分のスマホで確認できたらいいのに！ついでにiPhoneで確認しながらAndoroidでも同時に確認できたらいいのに！なんて思いますが、その要望を叶えるツールを見つけました！しかも、怖話を一緒に作ってるkomagataさんのブログで（身近！）。

今回できるようになること

作ってる途中の静的ファイルの見た目や動作を、いちいちどこかのサーバにFTPなど使ってサーバにアップしてからスマホでアクセスする、ってことをしないで、ローカルで立ちあげてるサーバにスマホでアクセスして確認する。

まずはローカルにサーバを立てて静的ページを見れる環境を構築

自分のローカルにサーバを立てて、ブラウザからアクセスできるようにします。

方法はなんでもいいのですが、以前にKUROIGAMENで紹介した、「デザイナーもHerokuを使ってみよう！Herokuを使って静的ページを無料で作る」の記事で紹介したkomagataさんが作ってくれたSinatraのアプリ「kuroigamen-sandbox」を使う方法で進めていきたいと思います。

kuroigamen-sandboxを使う環境

kuroigamen-sandboxを使う環境の確認

試したところ、kuroigamen-sandboxはRuby1.8系でないと動きませんでした。なので、RVMを使って使うRubyを1.8.7に設定。

$ rvm use 1.8.7

もし、RVMをまだインストールしていなかったら、やり方はこちら。

RVMを使ったついでに、RVMでGemsetも作ってしまいましょう。ちなみにGemsetとは、Rubyのpluginをまとめる入れ物のことです。詳しくはこちら。今回は「mobile-test」という名前のGemsetを作ります。

$ rvm gemset create mobile-test

これでGemset「mobile-test」が作られました。

続いて、それを使う設定。

$ rvm gemset use mobile-test

createをuseに変えるだけ。これで完了。

kuroigamen-sandboxをローカルで立ち上げる

では、ディレクトリを移動する「cd」コマンドを使って、今回のアプリを置く場所へ移動します。僕の場合はいつも「/Users/machida/Sites」←ここに置いてます。

$ cd Sites

これで移動は完了。

では、続いて今回使うアプリ「kuroigamen-sandbox」をGithubからローカルに持ってきます。おなじみ「git clone」です。

$ gti clone git@github.com:machida/kuroigamen-sandbox.git

ただ、これでcloneをすると、「kuroigamen-sandbox」という名前のディレクトリになってしまって「スマホの確認用のもの」ということがわかりずらいので、名前を変えて「mobile-test」という名前のディレクトリになるようにします。

コマンドの最後に「mobile-test」を付けて、

$ gti clone git@github.com:machida/kuroigamen-sandbox.git mobile-test

このコマンドでclone。「mobile-test」というディレクトリに「kuroigamen-sandbox」の中身が入ってます。

cloneが完了したら、今いる「SItes」ディレクトリから「mobile-test」ディレクトリに移動します。また「cd」コマンド。

$ cd mobile-test

これで移動完了。

必要なGemをインストール

先ほど作ったGemset「mobile-test」はまだ空なので、まずはbundlerというGemをインストールします。bundlerとは、これから立ち上げるアプリに必要なGemをまとめてインストールしてくれるGemです。まぁ、Rubyで何をやるにしてもまずはbundlerをインストールする、って覚えてしまってほとんど問題ないです。

$ gem install bundler

これでbundlerのインストールは完了。

次に、bundlerを使って「mobile-test」を立ち上げるのに必要なGemをまとめてインストールします。

$ bundle

これだけ。これでガーっと複数のGemがインストールされます。

では、いよいよ立ち上げます。今回のアプリ、「mobile-test」はSinatraというフレームワークで出来ているのですが、Sinatraで出来てるアプリを立ち上げるコマンドは、

$ bundle exec rackup

これ。

ちなみに、フィヨルドで作ったオープンソースのプロジェクト、「next-holiday」、「ハムかつ」もSinatraで出来ているアプリなので、今回とほとんど同じ作業でローカルで立ちあげられます（README参照）。こちらも是非挑戦してしみてください。

サーバが立ち上がったら http://localhost:9292/ にアクセス。でも、エラーが出てしまいます。とりあえず今はエラーが出た状態でOK。

これでローカルにサーバを立てて静的ページを見れる環境を構築は完了。

確認するファイルを入れる

今回の記事のためにちょっとした「mobile-static」ファイルを用意しました。

mobile-static

これをダウンロード。

ダウンロードが完了したら、「mobile-static」を解凍して、そのフォルダの中にある、「index.html」と「style.css」をコピー

「mobile-test」をFinderで開き（場所は「サイト」ディレクトリの中）、「public」フォルダに、

先ほどのファイル「index.html」と「style.css」をペーストします。

では、もう一回 http://localhost:9292/ にアクセスしてみましょう。

サーバを立ち上げて、「index.html」にアクセスすることが出来ました。これで、ローカルにサーバを立てて静的ページを見れる環境の構築は完了。

スマホからアクセス

さて、長い前置きになってしまいましたが、今回のテーマは実はここからが本題です。今、http://localhost:9292/ で開いているページをお手元のスマホからアクセスします。

Gem 「proxylocal」をインストール

まずは、今立ち上げているものを外部からアクセスできるようになるためのGem 「proxylocal」をインストールします。

一旦、今立ち上がってるサーバをストップします。サーバをストップさせるには、「control」と「c」キーを同時に押します。

止めたら、「proxylocal」をインストール。コマンドは、

$ gem install proxylocal

インストールが完了したら、もう一回サーバを立ち上げます。

$ bundle exec rackup

続いて、もう一個黒い画面（ターミナル）を立ち上げます（前から立ち上げているターミナルはそのまま）。

もう一個のターミナルでも、「cd」でmobile-testに移動して、

$ cd Sites/mobile-test

RVMでRuby1.8.7を使う設定をして、

$ rvm use 1.8.7

RVMでGemset「mobile-test」を使う設定もします。

$ rvm gemset use mobile-test

いよいよ「proxylocal」の出番！

いよいよ「proxylocal」の出番です。新しく開いたほうのターミナルで、以下のコマンド。

proxylocal 9292 --host mobile-test

それから、

http://mobile-test.t.proxylocal.com/ にブラウザでアクセスします。すると...

URL「http://mobile-test.t.proxylocal.com/」で今ローカルで立ち上がっているサーバにブラウザからアクセスができました！

スマホからアクセスしてみる

では、今度は自分の持っているスマートホンから http://mobile-test.t.proxylocal.com/ にアクセスしてみましょう。自分のMacとスマートホンを繋ぐとかそういう作業は必要ありません。あと、Macと同じWi-Fiにスマホがいるって必要もありません。

アクセス出来た！これでリアルタイムにスマホで確認ができます。

かなり実験的な機能。これってセキュリティについてはどうなのか、教えていただきたいです。

コマンドとURL

proxylocal 9292 --host mobile-test

「9292」はローカルのサーバが「http://localhost:9292/」で立ち上がっているので、「9292」になります。例えば、Railsの場合は「http://localhost:3000/」になるので、ここの数字は「3000」になります。ついでに、Lokkaの場合は「http://localhost:9646/」なので、「9646」。

「mobile-test」の部分は何でもOKです。

http://mobile-test.t.proxylocal.com/

「http://XXXX.t.proxylocal.com/」の「XXXX」以外のとこは毎回同じです。「XXXX」の部分に先ほど何でもOKだった部分（「mobile-test」）を入れます。

proxylocalを止めるのも「control」＋「c」キーを同時押し。

ちなみに、

例えばオフィスに来ていただいたお客さんに、「ちょっと http://mobile-test.t.proxylocal.com/ にアクセスして貰えますかー？」って感じで、今作ってるものをスマホやMac、PCから見てもらったり、触ってもらったりしてもらうときに便利です。

sinatra

デザイナー向けsinatra簡単入門 part.1