Cloud9(プレビュー編)

本章ではプログラムを書いた後、視覚的に確認する プレビュー について解説します。
プレビューは、ファイルに記述されているプログラミング言語によってプレビュー方法が異なるので、
使い分けが必要です。

HTML

HTMLをプレビューする方法はいたって簡単です。
before_studyフォルダにあるindex.htmlをダブルクリックで開いてください。

カーソルが点滅している状態でツールバーのPreviewをクリックしましょう。
するとメニューが開くのでその中の Preview File index.html をクリックすると、
Cloud9上でプレビュー画面が開きます。
Cloud9上でプレビューすると画面が小さく、デザインが崩れて表示される可能性があるので別のタブで開くようにしましょう。

HTMLのプレビュー方法は以上です。

PHP

PHP単体で書かれたプログラムであればターミナルで確認しても問題ありませんが、
PHPとHTMLが混在しているプログラムはWeb上で確認する必要があります。

ディレクトリを移動しよう

プレビューするには、実行したいPHPファイルが格納されているディレクトリに移動する必要があります。
学習している章によってカレントディレクトリが異なるのでまずはenvironmentディレクトリに移動しておきましょう。
ディレクトリの移動は慣れるまでenvironmentを起点に考えると良いでしょう。

cd ~/environment

以下のようになっていれば、カレントディレクトリがenvironmentになっています。

今回プレビューするPHPファイルはbefore_studyフォルダに格納されています。
ですので、cdコマンドを使用してbefore_studyディレクトリまで移動しましょう。

cd aitechschool_web/before_study

プレビューするファイルはindex.phpです。
カレントディレクトリにindex.phpがあるか、lsコマンドで確認してみましょう。

今度はターミナルに以下のコマンドを入力して実行してください。
このコマンドはindex.phpに記述されたプログラムをプレビューするという意味になります。

php -S $IP:8080 index.php 

以下のようになっていればPHPをプレビューする準備は完了です。

ここからはHTMLをプレビューする流れとほとんど同じです。
HTMLの時はプレビューしたいファイルを開いて、カーソルが点滅している必要がありましたが、
PHPをプレビューするときはツールバーのPreviewをクリックし、Preview Running ApplicationをクリックするだけでOKです。
すると、Cloud9上にプレビューが表示されます。
HTMLのときと同様に別のタブで確認するようにしましょう。

プレビューを終了するには、プレビューのコマンドを実行しているターミナルで Ctrl + C を押してください。

PHPのプレビューから終了までの流れを整理しておきますね。

1. プレビューしたいファイルが格納されているディレクトリに移動する
2. php -S $IP:8080 ファイル名.php をターミナルで実行する
3. ツールバーのPreviewをクリックし、Preview Running Applicationをクリックする
4. 別のタブでプレビューを開く
5. php -S $IP:8080 ファイル名.php を実行しているターミナルで Ctrl + C を押して終了

練習でsample.phpをプレビューしてみましょう。
既ににsample.phpを格納しているディレクトリにいるので 2 から進めてください。

プレビューを確認できたら Ctrl + C でプレビューを終了してください。

プレビュー方法は以上です。