やまさきやまさき
2017/08/28

プログラミングの実践勉強に最適!最強Web IDE の「Cloud9」を試してみた

この記事は約5分で読めます。

プログラミングの実践勉強に最適!最強Web IDE の「Cloud9」を試してみた

開発・プログラム

プログラミングを勉強する場合、皆さんはどうしていますか?

おそらく、コマンドや構文の知識などは、Web上の学習サービスを活用すればすぐに得ることができると思います。ですが実際にRunさせたりしてプログラムを動作させるには統合開発環境(IDE)が必要になってきますよね。

Javaで言えばEclipse、C言語系だとVisual Studioなどが有名ですが、これらのIDEを使用することで実際にプログラムのコードを動作させることができます。

 

しかし、ちょこっとコードを書いてRunさせてみたいだけなのに、初めて使うIDEだと勝手がわかるまでかなりの時間を費やす羽目になります…。言語によってもどのIDEがいいのか調べなければなりません。

また、これらをインストールすると結構な容量を必要とするので、PCの容量が小さい場合、けっこう困ります。

 

最初の壁が、なかなか手強いです…。

 

さて、そんな時に目を向けてほしいのがWeb上で動かせるIDEです!

いくつかサービスがあるみたいなのですが、特に高機能だと注目されているのが「Cloud9」というWeb IDE。

インターネットに接続さえしていればコマンドラインも動かせますし、Runもボタンひとつでちゃちゃっとできます。phpなんかも実際のブラウザで確認できます。

こんな便利なもの使わないのはもったいない!ということで、Cloud9を実際に使用してみました。

 

今回はその時のざっくりとした流れをご紹介していきます。

まずは会員登録

cloud9にアクセスし、会員登録しましょう。GitHubアカウントなども使用できます。

アカウント登録での注意点はひとつだけ。無料プランであってもクレジットカードの登録が必要になります。学生などでまだクレジットカードを持っていない人はクレジットカードを契約するか、親のカードで登録してもらえるように頼んでみましょう。

また、なぜかカード情報を記入する画面の一番最後に「Postal Code」という項目がありますが、これは郵便番号のことです。

海外のサービスのため、全て英語です。英語めんどくせーって方はこちらのサイトなんかを見ると分かりやすかもしれません。

ワークスペースの作成

アカウントを作成し、ログインできたらワークスペースを作成してみましょう。

この灰色の+ボタンを押します。

(「python_test」というのは僕が作成したものですので初期状態ではこいつはいません。)

クリックすると以下のような画面に遷移します。

 

 

ワークスペースの名前や説明なんかは適当に記入してください。

Cloud9では様々なテンプレートを選択することができ、あらかじめ必要なファイル構成をある程度用意してくれた状態のワークスペースを作成できます。

 

初回でいきなりテンプレートを選択してもややこしいので、今回はまず「Blank」を選んでみます。(空の状態でワークスペースが作成されます)

 

Create workspace」をクリックで作成。

 

少し待ちます。

 

「Cloud9へようこそ!」的なメッセージがバーンとでてきたらワークスペースが無事に作成されています。

画面左側にファイル構成、画面下側にコンソールエリアがあります。

 

ファイルを作成してみる

さて、実際にファイルを作成し、コードを書いていきましょう。

新規ファイルの作成方法はいくつかあります。

画面上部のツールバーから「File -> New File」で作成するか、画面左側のファイル構成エリアを右クリックして「New File」、もしくはコンソールから作成する方法があります。

コンソールを見てワクワクしているならばコンソールからファイルを作成してみましょう。

touchコマンドで新規ファイルを作成できます。(viコマンドなどでももちろん可能です。)

とりあえずhtmlファイルを作成してみます。

$ touch index.html

$」は最初から画面に表示されていると思うので、「touch index.html」と入力してエンターキーを押します。

ファイルが作成されたら、

<h1>Hello, World</h1>

とでも入力してみましょう。Ctrl + S でファイルは保存できます。

Runボタンを押すと、コンソールに以下のようにURLが表示されます。

これをクリックし「Open」を押すと、ブラウザの新規タブが立ち上がって「Hellow, World」と表示されているはずです。

また、Runボタン横の「Preview」からでもブラウザで確認できます。(この場合、ソース画面が分割されて横に表示されます。)

おわりに

今回はCloud9という画期的なWebサービスを紹介しました。

ファイルの作成はhtmlファイルのみだったのでプログラミング的なことは何もしていませんが、とりあえず導入の部分だけでも触れてみることでこのサービスの素晴らしさが分かってもらえると思います。是非活用してみてください。

 

もちろん、他にも同様のサービスはあるので自分に合うものを探してみてください。

 

次回はこのCloud9を使用して、pythonを少し触ってみたいと思います。

プログラミングの実践勉強に最適!最強Web IDE の「Cloud9」を試してみた
やまさき フロントエンジニア

新人縄跳び野郎です!

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。