俺氏、本を読む

30歳になるまでに本を読んで勉強しようかと。主に啓発、お金についての本を読むつもり。一応プログラマーなのでその辺のことも。あと、せどり(転売)の仕入れ見込み商品をリサーチして仕入先と一緒に投稿します

Webアプリ開発に役立つ(と思う)Webサービス15+5選

俺氏がWebアプリ開発時に役立つと思ったWebサービスの紹介。
と言っても使ったことないもの多いですwww
まぁこれから使うこともあるかもしれないので、
その時にすぐ思い出せるようにリンクしとこう
って感じのやつです。

APIの検索

APIは便利だけど探そうと思うと結構見つからない。
そんな時に役立つWebサービス

APIs.io

APIs.io - the API search engineAPIs.io - the API search engine
APIの横断検索をしてくれるサービス。
自分で追加することも可能。

ワッフル/WAFL

ワッフル/WAFL|みんなで作るWeb API&マッシュアップ情報一覧サービスサイトワッフル/WAFL|みんなで作るWeb API&マッシュアップ情報一覧サービスサイト
APIの検索と、マッシュアップサイトの検索が可能。
APIs.ioに比べるとAPI数は少ないのかもしれないですが、
国内のAPIであればワッフル/WAFLで検索した方がいいかも。

レイアウト(テンプレートとか)

Webアプリを作成する際に、
レイアウトで結構悩むこと多いと思うけど、
とりあえずBootstrapで基本部分とかはさっさと作ってしまって、
後は自分好みに装飾する感じが一番手っ取り早い気がする。

Start Bootstrap

Start Bootstrap - Free Bootstrap Themes and TemplatesStart Bootstrap - Free Bootstrap Themes and Templates
BootstrapのテンプレートをDownLoadできるサイト。
とりあえず2014/12/05時点では34個かな?
多分それぐらい。

Bootstrap Zero

Bootstrap Zero - Free Bootstrap Themes and TemplatesBootstrap Zero - Free Bootstrap Themes and Templates
ここもBootstrapのテンプレートサイト。
Start Bootstrapは本当に基本的なテンプレートだけど、
こっちはGoogle Plus、FaceBookみたいなテーマに沿ったものって感じ。

Prep Bootstrap

Bootstrap themes and templates | PrepBootstrapBootstrap themes and templates | PrepBootstrap
ここは上記のテンプレートサイトとはちょっと違って、
SNSアイコン、ダッシュボードとかF&Qみたいな、
部品ごとのテンプレートって感じ。

Bootstrap Live Customizer

Bootstrap Live CustomizerBootstrap Live Customizer
Bootstrapは便利なCSSフレームワークだけど、
Bootstrapをカスタマイズするのに手間取ったりする人向け。
結構凝ったカスタマイズもできるらしいので、
自力で想像通りのカスタマイズができない場合に便利。

EnjoyCSS

Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSSOnline CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS
高機能なCSSジェネレーターサービス。
視覚的に編集した結果をCSSに変換してくれる。
CSS拡張メタ言語の「LESS」「SCSS」にも変換可能。
各種ブラウザの対応も可能。

CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet - Justin AguilarCSS3 Animation Cheat Sheet - Justin Aguilar
Webサービスと言っていいのか分からないのですけど、
CSS3を使用したアニメーションを実装するときに参考になるサイト。
サングラスの黒人がヌルヌル動く。

HTML5 maker

Create HTML5 Animation | Free Banner Maker | Create Free BannerCreate HTML5 Animation | Free Banner Maker | Create Free Banner
ブラウザ上でアニメーションを作成できるサービス。
素材となる画像やエフェクトが準備されていて、
画像のアップロードも可能。
最終的に作成されるコードを自分のWebアプリに埋め込めば完了。
こんな感じの↓

ThingLink

Make Your Images Interactive - ThingLinkMake Your Images Interactive - ThingLink
画像の中にテキスト、音楽、動画などを配置できるサービス。
画像のアイコン箇所をマウスオーバーで、
配置したテキストや動画などが表示されます。
こんな感じ↓

infogr.am

Create infographics & online charts | infogr.amCreate infographics & online charts | infogr.am
小難しい数字とか推移とかを分かりやすく伝えるために、
インフォグラフィックスを作成できるサービス。
こんな感じの↓

プログラミング学習

Webアプリを作るんだったら、
最低限、HTMLとCSSが分かれば作れなくはない。
でもそれだけだとできないことは多い。
俺氏は学習系のWebサービスは利用したことないので、
ここからは「こんなのどうよ?」って感じの紹介です。
ちなみに英語はよく分からないので、
主に国内、または日本語で学習可能なサービス限定で。

ドットインストール

ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイトドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト
日本語でプログラミングが学習できるサービス。
国内では定番の学習サイトなのかな?
HTML、JavaScriptjQueryCSS、CSS3、PHPの入門講座があるみたいなので、
まずこのサイトで勉強してみるのがよろしいかと。

schoo

無料動画のオンライン学習サイト - schoo WEB-campus(スクー)無料動画のオンライン学習サイト - schoo WEB-campus(スクー)
Web制作に関わる講座が多く、
これも国内だと結構人気あるようです。
講座は生中継で、質問などはリアルタイムで回答してもらえる仕組み。
録画もされているみたいなので、
過去講座から学習もできます。

SKILL HUB

就職・転職やフリーランス、起業家になるために学ぼう!   [Skillhub (スキルハブ)]就職・転職やフリーランス、起業家になるために学ぼう! [Skillhub (スキルハブ)]
無料講座ではHTML、CSSIllustrator
ApacheドメインWordPress、Webサイト制作実践があるみたい。
実践は前編、後編があるのですけど、
後編は無料ではないっぽいです。
jQuery/JavaScript講座も無料だったらよかったのにね。

Udemy

Udemy programming coursesUdemy programming courses
プログラミング専門ではないけど、
いろんなジャンルの学習ができるサービス。
主に動画で学んでいくスタイルです。
お金を出してもいいなら以下の日本語で学習できる講座がよさそう。
アイディアを形にするweb講座(初心者向け・日本語吹き替え版)
何でもかんでも無料だと怠けてしまいますしねw

その他

ここからは特にWeb開発に直接役立つというわけではないけど、
時間があるときにでも挑戦すればスキルアップできそうなサービスの紹介。

paiza

ITプログラマー・エンジニア転職のpaizaITプログラマー・エンジニア転職のpaiza
課題に対してオンラインエディタでコーディングして回答するサービス。
コーディングが適切かどうかで評価が行われ、
単純に自分のスキルアップ、確認に利用するだけでもいいけど、
ランクによってIT企業への見学や面接が行える。
転職を考えている俺氏にとってはタイムリーなサービス!

CodeIQ

CodeIQ|ITエンジニアのための実務スキル評価サービスCodeIQ|ITエンジニアのための実務スキル評価サービス
paizaと同じように問題を解いて、
それが企業の目にとまれば「うちに来ない?」ってなるらしい。

CodeEval

CodeEval - Coding Challenges for the World's Best DevelopersCodeEval - Coding Challenges for the World's Best Developers
英語わかんないですー
クイズに解答していくとランキングが上がるみたいです。
マイページでどれだけのスキルがあるか分かるようになってて、
それを見た企業からオファーが来たりするらしい!
やっぱ英語はできんといかんですなー

topcorder

topcodertopcoder
英語が分からない俺氏でも、
このサイトの問題は難問だとなんとなく分かる!
これは上級者向けですな、しかも優秀な解答者には賞金が出る!!
すごいなぁ

CodePen

CodePen - Front End Developer Playground & Code Editor in the BrowserCodePen - Front End Developer Playground & Code Editor in the Browser
他の人が作ったHTML、CSSJavaScriptが見れるサービス。
これは結構勉強になるかな?
コーディングというよりはアイデア的な意味で!
こんな動きをJSで実装しようとか思わんしwww

See the Pen Passing through by Georgi (@gbnikolov) on CodePen.

終わり

俺氏はWebアプリ専門ってわけじゃないけど、
個人で取り組むにはゲームとかソフト開発より
Webの方が敷居が低いイメージ。
なので、副業するってなったら
やっぱりWeb系が多いんじゃなかろうか?
と勝手に思っております。
 
それかスマホアプリ、アフィリエイター向けのツール開発とか。
紹介しておいて全く知らないってのもアレなので、
時間作って挑戦してみようかな。
 
ばーい(^_^)/~