swift8

webブラウザで開発できるすごいIDE Cloud9

  • このエントリーをはてなブックマークに追加
  • LINEで送る

こんばんは。菅原です。

今日は最近よく検証などに使っているオンラインのIDE Cloud9 をご紹介します。スクリーンショット 2016-03-28 21.06.16

ブラウザ上で作業ができるエディタはいくつかありますが、
その中でもCloud9を利用してる理由は
単なるエディタではなく実行環境も備えており、すぐに動作確認が行えるからです。

開発サーバーを用意したりする手間がなく、お手軽に試すことが可能です。

Cloud9には便利な機能がたくさんありますので、
何回かの記事に分けてご紹介していきたいと思います。

今回は、webサイトを作成する場合を想定した使い方です。
早速プロジェクトを作成してみます。

スクリーンショット 2016-03-28 21.14.12

こんな感じで作成します。
Choose a templateの項目で、いろいろ選択できます。
だいたい何が出来るのか分かりますね。

今回はHTML5を選択してみます。

スクリーンショット 2016-03-28 21.16.20

プロジェクトが作成されて、エディタが立ち上がったところです。
最初はREADME.mdが表示されていますね。

READMEの手順に従って、操作してみます。

1.Open the hello-world.html file

画面左のWorkspaceから、「hello-world.html」をダブルクリックで開きます。

スクリーンショット 2016-03-28 21.19.09

2.Click on the Preview button to open a live preview pane

上部メニューから、Previewボタンをクリックして、Live Preview Fileをクリックします。

スクリーンショット 2016-03-28 21.20.50

Live Preview Fileが開かれました。

スクリーンショット 2016-03-28 21.22.13

hello-world.htmlの実行結果が表示されました。

3.Make some changes to the file, save, watch the preview, and have fun!

適当にコードを変更して保存してみます。
ボタンの背景色を赤にしてみました。

Live Preview画面をリロードせずとも
リアルタイムに変更が反映されているのが確認できると思います。
これは便利!

スクリーンショット 2016-03-28 21.25.49

 

恐らく、Cloud9で開発してある程度進んだら
別の環境に引っ越したいと思う方が多いと思うので、
今回はその方法もご紹介したいと思います。

上部メニューの File > Download Projectをクリックすると
プロジェクトファイルをダウンロードできます。

あとは好きな環境で解答するだけですね。
gitが使えたりするので、その方法も次回以降でご紹介します。

html開発だけでもまだまだ便利機能がありますが、
今回はこの辺で。

  • このエントリーをはてなブックマークに追加
  • LINEで送る
%d人のブロガーが「いいね」をつけました。