どうも、まさとらん（@0310lan）です。
みなさんは、Webアプリの開発にトライしたことはありますか？
いざ、コードを書き始めるとちょっとしたことで悩んだり、簡単に思っていた処理が意外と面倒であったり、データベース操作が難しかったり…など、予想以上に困難な場面に直面することが多いと思います。
そこで今回は、初級者から上級者まで幅広い開発シーンを想定し、面倒な作業を解消して便利に活用できる無料Webサービスを厳選してみましたので、ご紹介しようと思います！
目次
・悩みがちな「関数」や「変数」の名前を日本語で一発変換！
・Eメール認証の判定を自動化する！
・多彩な「情報リソース」を無料でゲット！
・わずか数行で画像要素をInstagram風のオシャレ写真に変換！
・任意のWebサイトURLから自動で「スクショ」をゲット！
・超お手軽にソースコードをシェア＆レビューする！
・Googleスプレッドシートをクリック一発でデータベース化！
・簡単に開発できる多人数ビデオチャット用ライブラリ！
・普段使いのコードエディタにビデオチャット機能を搭載する！
■悩みがちな「関数」や「変数」の名前を日本語で一発変換！
◆1.codic
コードを書く時に、絶対必要になるのが「関数」や「変数」の名前付け！
名前を付けるだけ…と安易に考えがちですが、誰が見ても理解できる的確な命名は意外と悩んでしまうところ。
特に、英語のボキャブラリーが無いとなかなか難しいわけですが、「Codic」を利用すると日本語からセンスの良い英語名に変換してくれます！
例えば、ファイルを生成する関数名や、特定の値が有効になったかどうかの判定用変数名などを変換すると以下のとおり！
「generate_file」や「isValid」のように、単純に英語へ変換するのではなく、そのままプログラムに組み込んでも違和感のないように生成してくれるのが特徴です。
もちろん、「キャメルケース」や「スネークケース」のようなパターン指定も可能で、さらにIntelliJ IDEA用プラグインも用意されているので、「Php Storm」や「Ruby Mine」、「Web Storm」などのコードエディタに組み込むことも可能なのは非常に重宝するところでしょう。
■Eメール認証の判定を自動化する！
◆2.Email Validator
Webアプリに、「メールアドレス認証」を搭載する場合、架空のものではなく正常なドメインのアドレスなのかを判定するのが難しい…という問題があります。
そこで、ぜひ利用したいのがこちらの「Email Validator」です！
こちらから入手できる「index.php」ファイルを、サイトのルートディレクトリに配置するだけで準備完了というお手軽さ。
例えば、「sample@aaa.bc」という架空のメールアドレスを判定したい場合には、次のようなURLを送信すればOKです。
「***/index.php?email=sample@aaa.bc」
これは、公式サイトのトップページからも試すことが可能で、結果として「false（無効）」を意味するJSONが返ってくるのが分かります。
あとは単純に、JSONの結果を受けて、「無効処理」を行うのか「有効処理」を行うのかをプログラミングするだけなので簡単ですね。
普通に実装しようとすると大変な作業ですが、ファイルを配置するだけで自動判定が実現できる「Email Validator」は覚えておいて損はないでしょう。
■多彩な「情報リソース」を無料でゲット！
◆3.LinkData.org
日本全国47都道府県で無償公開されている「オープンデータ」を、キレイに整理して横断検索＆利用できるようにしているサービスがコチラ！
オープンデータには、全国の「道の駅データ」「史跡・世界遺産データ」「ゆるキャラデータ」「さくら名所データ」「全国避難マップデータ」…など、かなりバリエーションに富んだ多彩なデータが無償で利用できるようになっています。
提供されているデータフォーマットも豊富で、テキストやExcelデータなどはもちろんのこと、JSONでプログラミングを組んで取得することもOK！
これらのデータを活用すれば、開発中の地図アプリなどに情報をマッピングすることも簡単に実現できるでしょう。（参考事例：無償で使えるLinkDataのオープンデータで、ゆるキャラ名検索エンジンを作ってみた！ | うえぶまなぶ）
また、「LinkData.org」には、公開されているオープンデータを利用して、ブラウザ上でWebアプリが作れるコードエディタも搭載されています。
このエディタで「サンプルデモ」を作ったり、そのまま公開してしまうことも可能になっているのが特徴でしょう。
データは商用利用も可能で、活用次第ではマッピング系サービスや情報発信系アプリなどにも展開できるはずなので、一度チェックしてみることをオススメします！
■わずか数行で画像要素をInstagram風のオシャレ写真に変換！
◆4.CSSGram
画像編集系アプリを作る時に、いろいろと処理が難しい写真のエフェクト加工を、CSSのクラス名を記述するだけで実現してくれるのが「CSSGram」です。
使い方も簡単で、サイトから「cssgram.min.css」を入手して、HTML内の「head」タグに配置すればOK！
これで、多種多様なInstagram風のエフェクト加工を、画像に施すことが出来るようになるのです。
エフェクト加工の方法は非常にシンプルで、HTML内の画像タグを「figure」タグで囲い、CSSのクラス名を指定するだけです！
例えば、「Inkwell」のエフェクト加工を施す場合は、以下のとおり！
<figure class=”inkwell”>
<img src=”***/***.png”>
</figure>クラス名をJavaScriptなどで動的に変化させるようにプログラミングすれば、簡単にエフェクト処理が実現しますね。
■任意のWebサイトURLから自動で「スクショ」をゲット！
◆5.Page2Images
任意のURLを指定するだけで、そのWebページの「スクリーンショット」をバックグラウンドで自動取得してくれるサービスがコチラ！
無料のユーザー登録を済ませると入手できる「APIキー」と、スクショを入手したいURLを以下の書式通りに送信するだけでOKというお手軽さ！
＜書式＞
http://api.page2images.com/restfullink?p2i_url=【任意のURL】&p2i_key=【自分のAPIキー】&p2i_device=6
最後の「p2i_device」に指定する番号によって、スマホやタブレット、PCなどの画像サイズを決めることも可能です。
（以下は、Googleトップページのスクリーンショットサンプルです）
送信後に、JSON形式で画像ファイルを入手できるURLが返ってくるので、こちらをプログラミングに組み込めば簡単に画像を取得できるわけです。（参考記事：Page2Images - Create Website Screenshot For iPhone/Android/Win Phone/iPad/Desktop）
このサービスを活用すれば、デバイスによるWebサイトの見え方を比較するアプリや、ニュース系などで画像をタイル上に並べるようなページの構築も簡単に実現するので非常に強力です。
■超お手軽にソースコードをシェア＆レビューする！
◆6.Refactor.io
複数人でWeb開発を行っていると、コードレビューは欠かせない作業になってきますが、チャットでかる～く会話を交わす感覚でレビューできるのが「Refactor.io」です！
サイトに訪れると、すぐにコードが書けるエディタが表示されているので、そのままレビューしたいコードを入力して実行すれば、即座にシェア用のURLが発行される仕組みです。
そして、このURLを知っている人であれば、コードを確認しつつ、修正したりコメントを追記したりなどが可能になっているのが特徴的です。
GitHubアカウントと連携することも可能で、プライベートリンクでコードをシェアすることも出来るので非常に便利なサービスとなっています。
このサービスを利用すれば、コードレビューが手軽に出来るだけでなく、プライベートリンクを使ってリモートでプログラミングの学習などにも使えるでしょう。
■Googleスプレッドシートをクリック一発でデータベース化！
◆7.Sheetsu
Webアプリを開発する上で、必要になってくるのが「データベース」処理ですが、特別な言語を使ったりサーバーの知識が必要だったりで悩むケースもあると思います。
そんな時に、普段使い慣れているGoogleスプレッドシート(表計算)を、まるでデータベースのように利用できるサービスが「Sheetsu」です！
使い方は驚くほどシンプルで、例えば以下の様な「ユーザー登録」用のデータを記載したスプレッドシートを用意しておきます。
あとは、このスプレッドシートのURLを「Sheetsu」へ登録するだけで、JSON形式によってデータを取得できるようになるのです！
スプレッドシート毎に、以下のような「専用URL」が発行される仕組みなので、複数のデータ管理も簡単に実現します。
https://sheetsu.com/apis/437*****
また、任意の個別データを取得したり、HTMLのフォーム要素からデータを追加・編集できるようにすることも可能です。
個人開発やプロトタイプを作る時などに、とても重宝するサービスと言えるでしょう。
今まで、サーバー系が苦手だった人でも、簡単にデータのやり取りを組み込むことができるようになるので、活用範囲はとても広いサービスとなります。
■簡単に開発できる多人数ビデオチャット用ライブラリ！
◆8.skyway
自分のWebアプリに、まるでGoogleハングアウトのような「多人数ビデオチャット」サービスを組み込むことができるのがこの「SkyWay」です！
WebRTCという通信技術がベースになっているのですが、普通に使おうとすると「セッション制御」や仲介サーバーの構築など、かなり難しい知識が必須となります。そこで、「SkyWay」を利用すると、簡単なJavaScriptコードを追記することで、誰でも簡単に高度な通信が出来るようになるのです。
さらに、ビデオチャットだけでなく、音声認識を利用したボイスチャットも組み込むことが可能です！
＜デモ＞
・音声認識サンプル
・ビデオチャットサンプル
これらの機能を自分のサービスに取り込めば、独自のオンライン講座システムを開発したり、音声認識を使ってiPhoneの「Siri」みたいなコミュニケーションも実現できるでしょう。
Web上で実現可能なことが広がり、アイデア次第では面白いWebサービスが生まれるかもしれませんね。
■普段使いのコードエディタにビデオチャット機能を搭載する！
◆9.Floobits
普段使っているコードエディタに、ボイスチャットやビデオチャットなどのコミュニケーション機能を搭載できるのをご存知でしょうか？
「Floobits」は、IntelliJ IDEA用プラグインが提供されているだけでなく、人気のコードエディタ「Sublime Text」「Atom」「Emacs」「Vim」など、多彩なエディタにプラグインで対応しているのが特徴です。
例えば、Atomの場合には「Install Packages」から、「floobits」を検索してインストールするだけですぐに利用することができます。
そして、現在編集しているコードエディタの画面を公開し、複数人で簡単にシェアができるようになるわけです。
もちろん、シェア相手には「閲覧専用」や「読み書き可」といった権限を付与することも可能です。
Googleハングアウトも利用できるように設計されており、複数人によるコードレビューには最適なサービスと言えるでしょう。
また、公式サイトでは、現在公開されているコードエディタの一覧を見ることもできるので、まずはここからどんな感じで利用できるのかを確認することも可能です。
■paizaについて
paizaでは、プログラミングスキルチェック問題(9言語に対応)を多数ご用意いたしております。もちろん今回使用したJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです！
paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの６段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください！！
プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。
さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)」では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください！
■まとめ
今回ご紹介したWebサービスは、いずれも無料もしくは無料プランを用意しているものばかりですので、気になったサービスがあればぜひ気軽にトライしてみることをオススメいたします！
使い方もシンプルであり、ドキュメント関連も充実していますので、初めての方でも戸惑うケースは少ないと思います。
これらの便利なWebサービスを機会に、ぜひ独自のWebアプリ開発に挑戦してみてはいかがでしょうか？
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
