# Tool(Chrome,Cloud9) <!-- HackMDのタイトルです -->

<!-- 内容はここから -->

## 無料体験で使用するツール　<!-- 0章 はじめに に変更 １つの単元ごと章で分けていきます-->

プログラミング基礎のカリキュラムで実践をする場合は、ツールの準備が必要です。
ツールの準備はいつでも構いませんので、ご自分のタイミングでご準備ください。

<!-- 受講における必要条件に移行 <div class="alert alert-warning">
Webデザイン基礎のカリキュラムはツールがなくても実践できます。
</div> -->

<!-- 以下Techpitのフォーマット使用に合わせるため追加 -->

### 0-1 教材の概要 <!-- 以降、教材のパートごとに0-1といった番号を降っていきます -->
・タイトル
(例)Webアプリケーションを作ろう
・概要

### 学習内容

### 受講における必要条件
<!-- Webデザイン基礎のカリキュラムはツールがなくても実践できます。 -->

### この教材の対象者
(例)PHPを学んだことがある方

### 学ばないこと
(例)本教材では、大規模フレームワークの使用方法や、完全なMVCモデルの実装は行いません。

### 本教材の対応バージョン
(例)PHP8.0

### 完成イメージ
(例)https://techacademy.s3.amazonaws.com/bootcamp/lessons/orientation/cloud9_invite_03.png

### 目次
(例)
* 0章 はじめに
* 1章

## １章 開発をするうえで必要となるツール

<!-- ### 1-1 開発ツール を追加 -->
無料体験で準備するツールは2つあります。
- Google Chrome
- Cloud9
- Gyazo(任意)

**Google Chrome** は、以降の Cloud9、<!---Appear、 --><!-- メンターがないため、削除 -->Gyazoを動作させるために必要な **Web ブラウザ** です。**Internet Explorer では Cloud9 と<!---Appear --><!-- メンターがないため、削除 -->は動作しません** ので、Google Chrome をインストールしましょう。Safari, Firefox, Google Chrome を使用している方はスキップしても構いません。ただし、解説は Google Chrome を基準に進めるので、ご了承ください。

**Cloud9** は、Web 上の **開発環境** です。実際に HTML や PHP を書いたりしたり、プログラムを実行したりするために必要なツールです。Cloud9 は、Web 上で簡単に開発環境を構築することができます。<!-- Cloud9 を使用して、実践したり、課題を提出したりできます。TechAcademy の多くのコースで Cloud9 を利用しています。 --><!-- Techpitのフォーマットに合わないため削除 -->

<!-- **Appear** は、**ビデオチャット**のツールです。無料体験のメンタリングで使用します。Appearを使うことでメンターとマンツーマンで会話することができます。 --><!-- Techpitのフォーマットに合わないため削除 -->

<!-- **Gyazo** は、Web ページの**キャプチャを撮る**ためのツールです。メンターに質問するときに画面の状況を伝える補助ツールとしてご利用ください。Gyazoは必要な場合のみインストールすれば構いません。 --><!-- Techpitのフォーマットに合わないため削除 -->

<!-- ## 2章 環境構築 を追加-->

## Google Chrome <!-- 2-1 Google Chrome に変更 -->

<!-- 無料体験で利用するCloud9とAppearは Internet Explorer では動作しません。 --><!-- 削除 Techpitのフォーマットに合わないため -->Windows 標準ブラウザである Internet Explorer を使用している方は、 Google Chrome をインストールし、以降は Google Chrome をご利用ください。

<div class="alert alert-warning">
Google Chrome をすでにインストールされている場合は飛ばして構いません。
</div>

### Mac の場合

Macの場合のインストール方法を紹介します。Windowsの場合は次の **2.2 Windows の場合** をご覧ください。

[Google Chromeのダウンロードページ](https://www.google.co.jp/chrome/browser/desktop/index.html){:target="_blank"}へアクセスしてください。
**Chromeをダウンロード**のボタンをクリックします。

{:width="700px;"}

規約を読んだら、**同意してインストール**しましょう。

{:width="700px;"}

ダウンロードが始まります。ダウンロードが開始されない場合は、下方に小さく書かれた**こちら**をクリックしてもう一度試してみてください。
ダウンロードが完了したらインストーラーをクリックします。

{:width="700px;"}

下記のようなウィンドウが開きますので、ドラッグ＆ドロップでインストールしましょう。

{:height="500px;"}

インストールが完了すると、Macの場合は**アプリケーション**にアプリが入っているはずです。

{:width="700px;"}

毎回このアプリケーションフォルダを開いて、アプリを開いても良いですが、MacにはDock（ドック）がありますので、ここに置いておくとアプリを起動しやすいでしょう。

{:width="700px;"}

それでは、Google Chromeを開いてみましょう。

{:width="700px;"}

このような画面が開いたら完了です。

### Windows の場合

Windowsの場合のインストール方法を紹介します。

[Google Chromeのダウンロードページ](https://www.google.co.jp/chrome/browser/desktop/index.html){:target="_blank"}へアクセスしてください。
**Chromeをダウンロード**のボタンをクリックします。

{:width="700px;"}

規約を読んだら、**同意してインストール**しましょう。

{:width="700px;"}

ダウンロードが始まります。すると、**ChromeSetUp.exeのダウンロードが終了しました**と出るので、**実行**をクリックしましょう。

{:width="700px;"}

下記のように、インストールが実行されます。少し時間がかかるので待ちましょう。

{:width="700px;"}

インストールされると、自動的にGoogle Chromeが開きます。

{:width="700px;"}

以上でセットアップは終了です。

## Cloud9 <!-- 2-2 AWS Cloud9 に変更 -->

<div class="alert alert-warning">
Internet Explorer では Cloud9 は動作しません。Google Chrome を使用してください。
</div>

### アカウント登録

<!-- <div class="alert alert-warning">
2017年12月1日よりCloud9はAmazon社運営の「AWS Cloud9」に移行しました。Cloud9のアカウントをお持ちでない場合は「AWS Cloud9のアカウント登録方法」のドキュメントをご覧ください。2017年11月30日以前にCloud9のアカウントをお持ちの場合はCloud9ログインページからログインしてご利用ください。
</div> --><!-- 削除 年度が古いため、これから学習する方に向けて、AWS Cloud9で統一する。-->

- [AWS Cloud9のアカウント登録方法](https://docs.google.com/document/d/1_FbA-dC3uqkwWhZ_chKPxAdWzunbVUs-qlKTtRDGXUA/edit#){:target="_blank"}

- [Cloud9ログイン](https://c9.io/login){:target="_blank"}

Cloud9は、プログラミングの開発環境として使用します。開発環境とは、コード（HTMLやPHPなど）を書くためのエディタ（高機能なメモ帳）や、プログラムを実行するための機能が用意されているツールのことです。<!-- TechAcademyではCloud9を使用して、実際にプログラムを書いて実行させながらカリキュラムを進めていきます。 --><!-- 削除 Techpitのフォーマットに合わないため-->

Cloud9が便利なのは、Google Chromeのブラウザ上で動作するため、皆さんの個別のPC環境に依存することなく、素早く何度でも開発環境を準備することできる点です。<!-- また、コラボレーション機能によりメンターがリアルタイムで状況を確認できるので、効率的にサポートできます。 --><!-- 削除 Techpitのフォーマットに合わないため-->

{:width="700px;"}

それでは、Cloud9を使うためにアカウント登録（無料プラン）を行いましょう。
<!-- 以下、最新バージョンに手順と画像をアップロード -->

> <a href="https://c9.io/signup" target="_blank">Cloud9のアカウント登録にアクセス</a>

アクセスして、メールアドレスを入力し、**Sign up**をクリックしてください。


アカウント作成画面へジャンプしますので、ここで必要事項を入力し「Next」をクリックしていきましょう。


| 入力項目 | 入力例 |
| :-- | :-- |
| Name | 表示名を入力 |
| Username | ユーザ名を入力（**※小文字でご入力ください**） |
| What kind of developer are you? | Student |
| How will you use Cloud9? | Coursework |

Cloud9では**クレジットカードの登録が必須**(2016/07/14より)となりました。こちらは、ユーザー確認のためで<font color="coral"><strong>皆さんの意図なしに費用が発生することはございません。</strong></font>

お持ちのカードで登録できない場合、クレジットカードをお持ちでない場合は下記のクレジットカード情報をご利用ください。

<div class="alert alert-warning">
こちらのクレジットカード情報は無料体験以外で使用しないでください。
</div>

| 入力項目 | 入力する情報 |
| :-- | :-- |
| クレジットカード名義 | KRMX |
| クレジットカード番号 | 4284 8600 5911 3692 |
| 有効期限 | 03/18 |
| セキュリティコード | 119 |
| 郵便番号 | 150-0002 |

それでは下記のキャプチャの通り、クレジットカード番号を入力してください。

{:height="500px"}

最後に「私はロボットではありません」にチェックを入れてクイズに正解し**Next**をクリックすると、Cloud9のアカウントが登録されます。

<div class="alert alert-warning">
「私はロボットではありません」のクイズが何度も表示されて前に進めない場合は、一旦ページを閉じ、再度初めからやり直してください。
</div>

アカウントが登録できると、先程入力したメールアドレスに `[e-mail]` から下記のようなメールが来るので、メール内にあるURLにアクセスし、パスワードを入力しましょう。

{:width="700px;"}

{:width="700px;"}

**パスワードはログインの際に使いますので、忘れないようにメモしておきましょう。** --><!-- ここまで -->

<!-- ### Cloud9をTechAcademyの学習システムに登録しよう

Cloud9の登録ができたら、 **TechAcademyの学習システムに登録** しましょう。

登録することで、メンターが課題などを確認できるようになります。ワンステップで完了するので必ず登録しておきましょう。

Cloud9へアカウント登録が済むとダッシュボード画面が開きますので、TechAcademyの学習システムにそのURLを登録します。
Cloud9では、下記のようなアドレスとなっているはずです。

https://c9.io/ユーザ名

{:width="700px;"}

次に、TechAcademyの学習システム（今ログインしているページ）から

<hr>
[アカウント設定](settings){:target="_blank"}
<hr>

にアクセスしコピーしたURLを貼り付けて、登録ボタンをクリックしてください。これで、学習システムにワークスペースが登録されます。


以上で完了です。メンターがCloud9へアクセスできるようになりました。 --><!-- 削除 Techpitのフォーマットに合わないため-->

<!-- 他のTechAcademyの教材と連携させるのであれば、ワークスペースを作成し、カリキュラムを進められる　？ その場合、教材順序を定める必要が出てくる？　最初にToolの教材をおこなってから、Web Design, PHPなど-->
### ワークスペースの作成
<!-- 画像と手順を最新バージョンにアップデートする -->

カリキュラムで使用するワークスペースを作成します。ダッシュボード画面から**Create a new workspace**ボタンを押してください。

{:width="700px;"}
*ワークスペースの作成1*

新規作成ダイアログで、Workspace name欄に **techacademy-trial-htmlcss**（←こちらをコピーしてください）と入力し、**Public**を選択し、**HTML5**を選択して**Create workspace**作成してください。

{:width="700px;"}
*ワークスペースの作成2*

**Open**のボタンをクリックするとこのような画面が表示されます。

{:width="700px;"}

<!-- 今後は、作成した**techacademy-trial-htmlcss**ワークスペースを用いて、無料体験レッスンを進めていきます。 --><!-- 削除 Techpitのフォーマットに合わないため-->

<!--###　3章 画面構成 を追加 -->

<!-- ### 3-1 Cloud9の画面構成 を追加 -->
<!-- 画像と手順を最新バージョンにアップデート -->
ここでCloud9の画面構成について説明します。
細かい操作方法は<!--レッスン --><!-- 以降のパート などに文言変更-->で紹介するので、現時点で理解できなくても問題ありません。


- **作業フォルダ画面**には、ワークスペースでの作業フォルダが表示されています。
- **メニューバー**には、Cloud9で操作可能なメニューの一覧が表示されています。Cloud9の各種設定やファイルの操作などが可能です。
- **編集、プレビュー画面**では、ファイルの編集やプレビューの閲覧が可能です。
- **コマンドラインインターフェース**ではターミナルなどの操作が可能です。

#### メニューバーが隠れている場合

メニューバーが隠れてしまっている場合には、下記キャプチャのように、▼をクリックしてください。メニューが表示されます。


<!-- ### メンターとワークスペースを共有

メンターとCloud9のワークスペースを共有することで、書いているコードなどをメンターがリアルタイムでチェックできます。

ワークスペースの右上にある **Share** のボタンをクリックすると下記のような画面が表示されます。ここで**Publicのチェックを外さないようにしましょう。**


Shareの画面の下部に**Invite People**というフォームがあるので「**techacademy_mentor**」と入れてInviteのボタンを押してください。


下記のようになれば正しく設定されています。最後に**Done**をクリックして終了です。

--><!-- 削除 Techpitのフォーマットに合わないため Workspaceの共有をメンターとする必要がない -->