ChromeだけでWeb開発をする

Web開発をする上で色々なテキストエディタやIDEがあり、開発環境は人それぞれかと思います。そんな中、今回はChromeの拡張機能を使ってChromeのみでのrails開発をご紹介したいと思います。
今回はMac 10.9上で行っています。

開発環境の構築

では早速始めます。chromeおよびruby,railsは既にインストール済み(※1)の前提で進めたいと思います。

※1 使用したバージョンは以下になります。

• chorme 35.0.1916.153
• ruby 2.1.1p76
• rails 4.1.0

Terminalを動かせるようにしよう

まずrailsでの開発の場合、コマンドが実行できないと効率が悪いと思いますのでTerminalを動かせるようにしたいと思います。今回使用するのはDevtools terminalです。
Devtools Terminalをインストールします。Devtools Terminalはこのままでは使用できません。使用できるようにするにはNode.jsが必要なで次にNode.jsをインストールします。

$ brew install node

完了したらnpmコマンドでdevtools-terminalをインストールし実行します。

$ npm install -g devtools-terminal
$ sudo devtools-terminal --install --id=leakmhneaibbdapdoienlkifomjceknl

chromeを再起動させ、デベロッパーツールを表示させます。するとTerminalというタブが追加されています。タブをクリックするとTerminalが使えるようになります！
画面右にある・・・から「Dark theme」を選択することで背景色を黒にも出来ます。

エディタを入れよう

ぶっちゃけterminalをインストールしたのでviなどで開発はこれ出来るのですが、使いづらかったりもしますので次にエディタをインストールします。今回使用するのはZed Code Editorです。このエディタはオフライン対応のChrome用に設計されたエディタで、Ruby,PHP,Java,Javascriptなど色々は言語に対応しています。
Zed Code Editorをインストールします。インストールが終わったら起動させましょう。起動すると以下のような画面が表示されます。

ここではローカルのrailsプロジェクトを選択するので、「Open Local Folder」を選択します。 使用するrailsプロジェクトフォルダを選択します。選択するとエディタが起動し、初回はコマンドの一覧が表示されます。

説明にあるようにmacの場合はcommand+Eでファイルを開きます。プロジェクトのルートが選択されるので、開きたいファイルを選択します。開くとこんな感じになります。
またソースの修正はリアルタイムで保存されているので、保存するという操作はありません。
command+Tでツリー表示ができます。
その他にも検索、エディタの分割表示といった機能があります。

Rails開発サポートツールを入れよう

最後に、railsに特化したツールRailsPanelをインストールします。これを入れることでChromeのインスペクタにRails用パネルを追加がつかされ、色々な情報が表示できるようになります。。
RailsPanelをインストールします。
こんな感じに追加されます。
RailsPanelに情報を表示するには「meta_request」というGemを追加する必要がありあます。
このGemは開発環境のみで必要になるので、Gemファイルに開発環境のみにインストールするようにします。

group :development do
  gem 'meta_request'
end

では、動かしてみましょう。サーバを起動させてアクセスChromeからアクセスするこんな感じに表示されます。

ActiveRecordやレンダリングにかかった処理時間やパラメータ、ログ、エラーといった情報が取得できます。これは開発する上でかなり便利かと思います。

まとめ

いかがだったでしょうか。Chromeの拡張のみでも開発が出来るのではないかと思います。また、最後のRailsPanel以外は他の言語での開発でも使用できるのでRuby以外での開発にも使えるかと思います。是非、一度試してみてください。