Web系エンジニアになると、設計書や仕様書では作成するWebサイトの構成を説明しずらいケースがあるだろう。
その際、デモ（プロトタイプ）やモックアップといった、出来あがりのイメージを作ることも少なくない。
今回は、デモやモックアップを簡単に作成できるAWS Cloud9について紹介する。

AWS Cloud9とは？

AWS Cloud9とは、AWSが提供するクラウド型IDE（統合開発環境）だ。今までの開発環境は、ローカルにIDE（例：Eclipse、VisualStudio）をインストールし、開発したものを検証環境や本番環境にアップロードする仕組みになっていた。
最近では、このようにクラウド上で開発できるようになったため、クライアントPCで開発する必要がなくなり、その分PCも処理が軽くなった。
クラウドIDE、特にAWS Cloud9のメリットを整理すると、

といったところだろう。
導入するメリットは十分にあるといえる。
尚、Cloud9で検索すると、AWSに買収される前のCloud9の記事が多くヒットするので、注意が必要だ。
参考：Amazon、クラウドIDEを提供する「Cloud9」買収。AWSが統合開発環境をSaaSとして提供する布石か

Cloud9の導入手順

Cloud9の導入手順は簡単だ。以下、順を追って説明していこう。

Cloud9の登録方法

まず最初に、AWSのCloud9のページにアクセスする。
AWSのアカウントを持っていない場合は、この時点で登録しておくとよい。
GitHubやAtlassianのアカウントを持っている人は、c9.ioをすでにご利用のお客様のログインを押すことで、以下のログイン画面よりアクセスできるようになる。

以上でCloud9を開始する準備は完了だ。

開発環境の作成

次に、開発環境を作成する。開発環境は、

の５拠点の中から選択できる（2019/02/06現在）
開発環境を構築する場所を選定したら、Create enviromentをクリックする。すると、以下のように開発環境名と説明を記入する欄が表示される。

上記を入力すると、開発環境のスペックやネットワークを設定できる。基本的には、Enviroment typeはEC2、Instance typeは、t2.microまたはt2.nanoでよいだろう。

しばらくすると、開発環境とIDEがビルドされ、以下のように開発画面が表示される。

この画面上では、Fileメニューよりローカル上のファイルをフォルダごとアップロードしたり、またプロジェクト一式をダウンロードすることができる。
オンライン上で開発することもできるし、必要に応じてダウンロードしてオフラインで開発することも可能だ。

充実している開発環境

オンラインIDEの中でも群を抜いて使いやすいAWS Cloud9だが、特徴的なのはインテリセンス（自動補完）の充実と、サーバーサイドの操作性だ。
インテリセンスは非常に使いやすい。下記のように、Javascript（jQuery）や、CSSの補完にも対応できる。
<Javascript>

<CSS>

また、画面下部には、サーバーを操作できるシェルコンソールが表示されているので、必要に応じてシェルスクリプトやnpmコマンドを実行できる。
gulpをインストールすれば、CSSやJavascriptの最適化（コンパイル）を行うことも可能だ。
参考：gulpとは何か

最後に

今回は、Cloud9の特徴と導入手順についてお伝えした。Cloud9は、スピードを要する開発、特にモックアップやデモ環境を簡単に構築するときにそのメリットを発揮すると期待される。
次回以降は、Cloud9を利用した開発の進め方について解説する。