KUROIGAMEN(黒い画面)

この記事を書いた人: 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から見てもらったり、触ってもらったりしてもらうときに便利です。

スマホ

コーダー必見！スマホサイトのコーディングの便利ツール（黒い画面が必要だけど）