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以外での開発にも使えるかと思います。是非、一度試してみてください。
