[WEB開発] 私的な最近のおすすめサービス/ツール 14選 〜2014年版〜


社内のライトニングトーク用に Qiita:Team に書こうとしていたものですが、誰かの参考になればと思い、こちらにアップします。対象は **「エンタープライズ系ではない」「スクリプト言語系の」WEB系エンジニア/プログラマ** です。

流行り廃り、好みがあると思いますが、これらは実際に、私が試してよかったものです。サービスであったりライブラリであったり粒度がバラバラではありますが、参考まで^^;

> 「最近の」というタイトルですが、私的に最近、活用しているという意味で、サービス自体は昔からあるものもあります。

## ① Heroku

![screen3.png](https://qiita-image-store.s3.amazonaws.com/0/35733/78f9f3ff-f1b0-f0bd-ef86-6ac12e4d275c.png "screen3.png")

[Heroku](https://www.heroku.com) を利用すると、Ruby(on Rails)、PHP、Node.js、Python 等のサーバ側アプリケーションをホスティングすることが出来ます。デプロイ方法は **Git で push するだけ** です。

商用でちゃんと使おうとすると、無料枠の構成では難しいですが、デモとかプロトタイプの用途であったり、また後述の **Hubot** のホスティング目的であれば、無料枠の構成で十分です。

また最近、 **Herokuボタン** というものが実装され、例えば GitHub で他の人が公開されているアプリケーションを、ボタン一発で自身の Heroku で立ち上げることが出来ます。（逆に自分でボタンを設置して他の人に公開できる。）

> 参考：
> 
> - [Introducing Heroku Button](https://blog.heroku.com/archives/2014/8/7/heroku-button)
> - [naoyaのはてなダイアリー](http://d.hatena.ne.jp/naoya/20140809/1407556488)

## ② GitHub Pages

![screen8.png](https://qiita-image-store.s3.amazonaws.com/0/35733/1a1d84a2-e6c9-3853-f225-17d54eda7780.png "screen8.png")

[GitHub Pages](https://pages.github.com) を利用すると、HTML/CSS/JavaScript/画像で構成される **静的なコンテンツ** を、無料でホスティングすることができます。こちらもデプロイは、GitHub で `gh-pages` というブランチを作って **push するだけ** です。

プロダクトのラインティングページであったり、JavaScriptアプリケーションのデモやプロトタイプの公開に重宝します。

> ただ GitHub にコミットする必要があるので、ソースは公開されます。が、それが気になるなら難読化(minify)しておけば良いかと。

## ③ Kobito(マークダウンエディタ)

![screen14.png](https://qiita-image-store.s3.amazonaws.com/0/35733/bbc2d274-65da-f409-549f-51d849c791a2.png "screen14.png")

そもそもこの Qitta をご覧になっている多くの方は、既に利用しているかとは思いますが一応。

[Kobito](http://kobito.qiita.com/ja) は Mac 用の **マークダウンエディタ** です。動作が快適なので、作業手順の記録やプログラミングのメモに最適です。

> ちなみにマークダウンフォーマットは GitHubでも標準ですし、また **余分な装飾が出来ない** が故に **文書の内容に集中できる** という、良いフォーマットだと思います。もちろん、この投稿もマークダウンで書いています。

また、もし他の人へ共有したければ、ボタン一発で **Qiita、Qiita:Team に同期** することができます。

メモが増えてきても、検索機能が使いやすい（リアルタイムなインクリメンタルサーチをしてくれる）ので、Kobito でメモをしておけば **必要な時にパッと探す** ことが出来ます。

![スクリーンショット 2014-10-16 13.26.44.png](https://qiita-image-store.s3.amazonaws.com/0/35733/e01f52c6-419c-907e-0c3b-a362eed059a1.png "スクリーンショット 2014-10-16 13.26.44.png")

## ④ JetBrains社製のコードエディタ(IDE)

![screen10.png](https://qiita-image-store.s3.amazonaws.com/0/35733/a9a76b3e-98b1-e6fb-e366-b1d6bfc026f3.png "screen10.png")

[JetBrains社](https://www.jetbrains.com) のコードエディタ(IDE) は有償ですが、静的解析によるサポートが強力なのでおすすめです。一ヶ月間はお試しで利用でき、プラグインによる拡張も出来ます。

構文の記述ミスがあればその場で指摘してくれたり、正しい書き方の候補が表示されたりするので捗ります。（つまり、初めての言語の **細かい構文は暗記しなくて良い** 。）

言語別にエディタは別の製品なのですが、だいたいWEB系で使うのは次のものです。

- **WebStorm** .. フロントエンド(JavaScript)のアプリケーションを書く場合。
- **PhpStrom** .. PHPで書く場合。
	- WebStorm の機能は内包しているらしい。
- **RubyMine** ..Ruby(on Rails) のアプリケーションを書く場合。
	- Rails アプリケーションのちょっとしたフロントエンド部分であれば、これ一つでも十分。

その他のにも、Java用、Python用のものがあります。

JetBrains社のIDEを使うメリットとして、各製品で **インタフェースが同じ** なので、例えば WebStorm に慣れてる JavaScript ユーザが RubyMine で Ruby を書こうとする場合、違和感なく始められます。

また **Android アプリ** を作る際、現状で主流になりつつある IDE、[Android Studio](https://developer.android.com/sdk/installing/studio.html) も同じインタフェースです。

## ⑤ View系のJavaScriptフレームワーク

![screen15.png](https://qiita-image-store.s3.amazonaws.com/0/35733/52c03333-5218-4015-1d0a-d3853193aa20.png "screen15.png") ![screen17.png](https://qiita-image-store.s3.amazonaws.com/0/35733/9b0c35bc-7c68-30dd-e597-e55aee6f11e6.png "screen17.png")

jQuery 等で煩雑な DOM 操作をしなくても **ブラウザ側で動き** をつけることが出来ます。

具体的には [Knockuout.js](http://knockoutjs.com)、[Vue.js](http://vuejs.org/) 等のフレームワークです。 **MVVMパターン** のフレームワークとも呼ばれます。利点としては、

- ほぼ？依存がないので **既存のWEBアプリケーション** の View(HTML) に **薄く被せる** ことができる。
- **ViewModel** オブジェクトの構造が、人間にとって直感的に分りやすい、と思う。
	- `扱う値` と `振る舞い` の構造体のようなもの。

		```javascript:例
		var objViewModel = {
	        name: "山田 太郎",
	        age: 45,
	        hello: function() {
	            console.log(objViewModel.name)
	        }
	    };
	    ```

流行？の **AngularJS** はフルスタック(機能豊富だが AnguarJS Way)ですが、View で薄く使う分には同じように使えるかと思います。

また JavaScript を書くなら [CoffeeScript](http://coffeescript.org) 記法がおすすめです。記述量が減らせるのと、JavaScirpt の自由すぎる書き方を隠蔽してくれるからです。

> コンパイルのための処理系が何かしら必要にはなります。ただ、後述の Yeoman を利用すると楽に環境を構築できます。

記法に慣れないうちは、こちらのサイトで素の JavaScript から変換すればいいです ⇒ [js2coffee.org](http://js2coffee.org/)

## ⑥ connpass

![screen9.png](https://qiita-image-store.s3.amazonaws.com/0/35733/463be010-2647-f70c-2d05-9fd5fb5593f2.png "screen9.png")

[connpass](http://connpass.com) はツールという訳ではないのですが **勉強会イベント** のポータルサイトです。少なくとも関東近辺の勉強会では、活発に利用されている印象です。

WEB版だけでなく、iPhoneアプリもあります。（Android版は未だ無い模様。）

公式 Twitter アカウントをフォローしておくと、新しいイベントの申し込みが始まった際に教えてくれるので、席が埋まらないうちに申し込みをすることが出来ます。

![screen13.png](https://qiita-image-store.s3.amazonaws.com/0/35733/058bdb01-0d85-f698-eb5c-eb4a1aef9d3d.png "screen13.png")

## ⑦ rebuild.fm

> サイト ⇒ http://rebuild.fm

これもツールという訳ではなく、現クックパッド社の [@miyagawa](http://twitter.com/miyagawa) さんによる **Podcast** です。私は iPhone を iOS 8 にアップデートした際、Podcast アプリがプリインされたので聞き始めました。

![screen7.png](https://qiita-image-store.s3.amazonaws.com/0/35733/2a07a4c5-bad2-d115-a6b8-9c19337060c4.png "screen7.png")

著名なエンジニア達の生の話(ITに関する)が聞け、とても参考になります。

## ⑧ Yeoman（ヨーマン）

![screen4.png](https://qiita-image-store.s3.amazonaws.com/0/35733/f8080da0-055d-41c4-f08a-2281ffc4fe80.png "screen4.png")

[Yeoman](http://yeoman.io) を使うと、いまどきのフロントエンド開発環境(JavaScriptアプリケーションの開発環境)が一発で構築できます。

> 環境とは、雛型のソース構成 ＆ Grunt/glup によるタスクランナー、Bower によるライブラリ管理がされている環境です。

私の場合は、AngularJS の開発環境はこれで作っています。
⇒ [ゼロから始める！AngularJSの環境構築](http://qiita.com/hkusu/items/0439cf8811d44473a71c)

AnguarJS に限らず、色々な JavaScript用の環境があるので、是非さがしてみてください。過去に私が試したのは次のとおりです。

- [新しい Yeoman と、ついでに MEAN を試してみる](http://qiita.com/hkusu/items/6ba588cf6f311fb6ea1c)
- [仮想DOMを提供する『React』について少し調べてみた](http://qiita.com/hkusu/items/ee5bc75c3c32185c7b76)
- [シンプルな MVVM ライブラリ『Vue.js』の環境構築と使ってみた感想](http://qiita.com/hkusu/items/8af744662999de618bb8)
- [Knockout.js × CoffeeScript × SASS の開発環境を手軽にイマドキっぽくつくる](http://qiita.com/hkusu/items/9b103dde566c83c7fd1b)

## ⑨ Onsen UI

![screen2.png](https://qiita-image-store.s3.amazonaws.com/0/35733/68692ecb-e34c-ce67-78eb-b06d109bec90.png "screen2.png")

[Onsen UI](http://ja.onsen.io/) は **モバイル向け** の CSS フレームワークです。簡単に SPA（シングルページ アプリケーション）が作れ、モバイル向けのデザイン、機能が豊富です。後述の [Monaca](http://monaca.mobi/ja/) や PhoneGap/Cordova を利用して、ネィティブアプリにパッケージすることも出来ます。

ロジックは **AngularJS** で書けるので、コード量が多くなってもある程度は大丈夫かと。

また、同じようなコンセプトの CSSフレームワークとしては [ionic](http://ionicframework.com) があります。

## ⑩ Monaca

![screen1.png](https://qiita-image-store.s3.amazonaws.com/0/35733/3fbc4e17-4926-c8e3-6d90-3f27cc961261.png "screen1.png")

[Monaca](http://monaca.mobi/ja/) を利用して、WEBの技術でアプリを作ることが出来ます。合わせて前述の **Onsen UI** や **AngularJS** を組み合わせれば、それなりのものが手早く作れます。

また、私は試したことはないですが **MBaaS** 的なバックエンドの機能も提供されているようです。

## ⑪ Feedly

![screen16.png](https://qiita-image-store.s3.amazonaws.com/0/35733/b0140ea5-5964-c92a-8519-9114ca68dc17.png "screen16.png")

[Feedly](https://feedly.com) は **RSSリーダ** です。最新動向のチェックを。WEB版だけなく、iPhone版/Android版アプリもあります。

私的には、iPhoneアプリ版の、記事一覧で長押し⇒記事をストック、の機能が重宝しています。

## ⑫ Genymotion

![screen5.png](https://qiita-image-store.s3.amazonaws.com/0/35733/e344963d-a27c-de0b-c592-fdc8ad97b7f5.png "screen5.png")

[Genymotion](http://www.genymotion.com) は 高速な **Android シミュレータ** です。デフォルトのシミュレータが重いので、これを使うと手早く動作確認できます。

また、Android アプリの開発用途だけでなく、

- 手元 のMac 内（厳密には VirtualBox 内）で Android アプリを動かす
- JavaScript アプリケーションや Rails アプリケーション をローカルで開発する際のデバック
	- [ローカルMacで起動しているWEBアプリケーションへGenymotion上のAndroid OSからアクセスする](http://qiita.com/hkusu/items/499575a566b20ce4d95b)

という使い方も出来るので **WEB開発** であっても使えます。

> 参考までに、Mac で Genymotion をセットアップする手順はこちら。
> ⇒ http://qiita.com/hkusu/items/b0b02dafa9de2e7a2943

## ⑬ CasperJS

![screen12.png](https://qiita-image-store.s3.amazonaws.com/0/35733/dc16161f-be54-ddcb-909f-058e679f9eaa.png "screen12.png")

[CasperJS](http://casperjs.org) を利用して、任意のWEBサイトを **スクレイピング** することができます。サーバサードで動作する、PhantomJS のラッパーです。

画面キャプチャも撮れる他に、内部に WebKit を内蔵しているので **JavaScriptで動的に描写されている** WEBサイトのスクレイピングが可能です。昨今はこういうサイトが多いですし。

> 参考までに、Mac での環境手順と、キャプチャをとってみたメモです。
> ⇒ [CasperJSで、EXCELに貼付ける為のスクリーンショットを撮る](http://qiita.com/hkusu/items/c00093232501b228aaec)

## ⑭ Slack ＆ Hubot

![screen6.png](https://qiita-image-store.s3.amazonaws.com/0/35733/be935d64-58d4-aebd-b92d-da22c0703d5a.png "screen6.png") ![screen11.png](https://qiita-image-store.s3.amazonaws.com/0/35733/8b3b0bb4-0515-ea57-aa4f-ef4ce3a83db4.png "screen11.png")

- [Slack](https://slack.com)：チーム開発で利用する為の **チャット** ツールです。
- [Hubot](https://hubot.github.com/)：GitHub製の **ボットプログラム** です。CoffeeScriptで独自のスクリプトが書けます。

Git と連携して、誰か push したらテスト結果をチャットに表示したり、チャットからボットに指示したり（デプロイして、○○して）など出来ます。

初めは何が嬉しいんだろう？と思っていたのですが、チームメンバー皆が見れるチャット上でやりとりが行われる = やってることが **メンバー間で共有** できる、というのがメリットかと。

## おわりに

とりあえず最近、私が使っているものを紹介しました。ほかに何かいいものがあれば教えてください！