LoginSignup
945
931

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@hkusu(Hiroyuki Kusu)in株式会社ゆめみ

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

Last updated at Posted at 2014-10-16

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

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

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

① Heroku

screen3.png

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

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

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

参考：

② GitHub Pages

screen8.png

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

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

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

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

screen14.png

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

Kobito は Mac 用の マークダウンエディタ です。動作が快適なので、作業手順の記録やプログラミングのメモに最適です。

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

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

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

スクリーンショット 2014-10-16 13.26.44.png

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

screen10.png

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

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

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

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

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

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

また Android アプリ を作る際、現状で主流になりつつある IDE、Android Studio も同じインタフェースです。

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

screen15.png screen17.png

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

具体的には Knockuout.js、Vue.js 等のフレームワークです。 MVVMパターン のフレームワークとも呼ばれます。利点としては、

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

    • 扱う値 と 振る舞い の構造体のようなもの。

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

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

また JavaScript を書くなら CoffeeScript 記法がおすすめです。記述量が減らせるのと、JavaScirpt の自由すぎる書き方を隠蔽してくれるからです。

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

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

⑥ connpass

screen9.png

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

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

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

screen13.png

⑦ rebuild.fm

サイト ⇒ http://rebuild.fm

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

screen7.png

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

⑧ Yeoman（ヨーマン）

screen4.png

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

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

私の場合は、AngularJS の開発環境はこれで作っています。
⇒ ゼロから始める！AngularJSの環境構築

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

⑨ Onsen UI

screen2.png

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

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

また、同じようなコンセプトの CSSフレームワークとしては ionic があります。

⑩ Monaca

screen1.png

Monaca を利用して、WEBの技術でアプリを作ることが出来ます。合わせて前述の Onsen UI や AngularJS を組み合わせれば、それなりのものが手早く作れます。

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

⑪ Feedly

screen16.png

Feedly は RSSリーダ です。最新動向のチェックを。WEB版だけなく、iPhone版/Android版アプリもあります。

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

⑫ Genymotion

screen5.png

Genymotion は 高速な Android シミュレータ です。デフォルトのシミュレータが重いので、これを使うと手早く動作確認できます。

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

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

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

⑬ CasperJS

screen12.png

CasperJS を利用して、任意のWEBサイトを スクレイピング することができます。サーバサードで動作する、PhantomJS のラッパーです。

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

参考までに、Mac での環境手順と、キャプチャをとってみたメモです。
⇒ CasperJSで、EXCELに貼付ける為のスクリーンショットを撮る

⑭ Slack ＆ Hubot

screen6.png screen11.png

  • Slack：チーム開発で利用する為の チャット ツールです。
  • Hubot：GitHub製の ボットプログラム です。CoffeeScriptで独自のスクリプトが書けます。

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

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

おわりに

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

945
931
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
945
931

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?