クラウド型のIDE（統合開発環境）Cloud9の基本的な使い方を説明します。
今回は、HTMLファイルを作成し、ブラウザで表示させる簡単な操作を行います。
目次
Cloud9とは？
Cloud9（クラウドナイン）とはアプリケーションの開発やデータベースなどをクラウド環境で利用できるサービスです。
プログラミング初心者が、最初につまづきやすいのは開発環境の構築です。Cloud9を使えば、簡単に開発環境の構築ができます。
海外のサービスのため、日本語には対応していません。GitHubやHerokuといった他のツールとの連携も可能です。
事前準備
Cloud9を使うためには、登録が必要です。
Cloud9の登録方法は「クラウドIDE Cloud9とは？ アカウント登録方法」を確認してください。
Cloud9にサインイン
Cloud9にアクセスし、「SIGN IN」からサインインします。
Workspaces（ワークスペース）の作成
まず、Workspaces（ワークスペース）を作成が必要です。
ワークスペースとはアプリケーション開発を行う作業環境のことです。
「Create a new workspace」をクリックします。
ワークスペースの作成画面で各種項目を入力していきます。
- Workspace name：ワークスペースの名前を決めます。（管理しやすいよう好きな名前をつけてください。）
- Description：ワークスペースの簡単な説明です。（省略してもかまいません。）
- Private or Public：Private（プライベート） か「Public」を選びます。
「Private（プライベート）」 とは公開設定です。
「Public（パブリック）」を選ぶとと他のCloud9ユーザーにもコードが公開されます。
※無料利用場合Private（プライベート）は1アカウント1ワークスペースのみしか作成できません - Clone from Git or Mercurial URL：Gitからコードを持ってくるときはここにURLを貼り付けます。
- Choose a templete：作成するアプリケーションに合わせて、テンプレートを選択します。ここでは「Custom」を選択します。
Choose a templeteでは、今回はまっさらな状態から作成するので、「Blank」から作成します。
入力が完了したら、「Create workspace（ワークススペースの作成）」をクリックします。
作成が開始されるの待ちます。
ワークスペース作成が開始されます。少し時間がかかるため、待ちます。
Cloud9の開発画面の見方
ワークスペースを作成されると、以下の画面が表示されます。
まずは基本的な画面の配置や操作を覚えましょう。
画面は大きくわけて３つに分かれてします。
- ファイルの操作
- ファイルの内容
- コマンドライン
ファイルの操作ではファイルの作成や削除を行います。
ファイルの内容では選択したファイルの中身が表示されます。
コマンドラインでは文字列で様々な操作ができます。Macのターミナルと同様です。
Cloud9のファイル、フォルダの作成・追加・削除
ファイル、フォルダの作成・追加・削除の方法を説明します。
ファイル作成
Cloud9上でファイルを作成するには、左のメニュー内で、右クリックし、「New File」をクリックします。
ファイルの追加
Cloud9にファイルを追加するには次の方法があります。
ドラッグ＆ドロップ
デスクトップ等にあるファイルをドラッグ＆ドロップでCloud9のもっていくと、追加できます。
ファイルメニューから追加
ファイルメニューからの追加も可能です。
上部のFileメニューの「Up local Files」からローカルパソコン上のファイルを選択します。
ファイルを開く
左側のメニューから、開きたいファイルをダブルクリックすると、右側にファイルの内容が表示されます。
保存
作成したファイルを保存するには、FIle➔Saveをクリックします。
（Macショートカットキー：⌘S）
ブラウザに割り当ているショートカットキーと被ってしますことがあるため、必要に応じてブラウザのショートカットキーを変更してください。
ファイル・フォルダの削除
ファイル・フォルダを削除するには、対象のファイル・フォルダ上で右クリックし、表示されるメニューの中から「Delete」をクリックします。
確認画面が表示されますので、「Yes」をクリックするとファイル・フォルダは削除が完了します。
HTMLファイルを作成
例として、HTMLファイルを作成してみましょう。
index.htmlファイルを作成し、サーバーを立ち上げブラウザでの動作確認まで行ってみます。
右クリックし、「New File 」をクリックします。
ファイル名は「index.html」とします。
作成したファイルをダブルクリックし、右側に開きます。
「index.html」ファイルの中身を入力します。
なんでもかまいませんが、例として以下のように記述します。
| <h1>titile</h1> |
「File➔Save」メニューからファイルを保存します。
プレビュー
プレビューでは、ブラウザでの見え方をリアルタイムで確認できます。
「Preview」➔「Live Preview File(index.html)」をクリックします。
WEBサーバーの立ち上げ
次にWEBサーバーを立ち上げ、ブラウザでの表示を確認します。
「Run」をクリックすると、WEBサーバーApache（アパッチ）が起動します。
画面下のコマンドラインでもApacheが起動しているのが確認できます。
コマンドライン内に表示されているURLをクリックし、Openをクリックします。
以下の画面が表示されたら、「Open the App」をクリックします。
さきほど、「index.html」ファイルに記入した内容がブラウザから確認できました！
まとめ
Cloud9の最も基本的な操作、ファイル操作や保存、実行方法の使い方を説明しました。
これができたら、次はプログラミング初心者お約束の「Hello, World」を表示にチェレンジしてみましょう。
プログラミング言語は、Python、PHP、Rubyでの方法について紹介しています。
- Cloud9の使い方 Pythonで”Hello, World!”表示【初心者向け】
- Cloud9の使い方 PHPで「Hello, World!」を表示する方法【初心者向け】
- Cloud9の使い方 Rubyで”Hello, World!”表示【初心者向け】
コメントを残す