概要
今回はAptana studio3の使い方です。次の順序立てで説明していきたいと思います。
- プロジェクトを作成
- ファイルを作り
- ブラウザーに表示する
前提
Aptana studio 3がインストールされている
下のURLを参照
Aptana studio 3をmacにインストールする
Aptana studio 3の起動させる
アプリケーションディレクトリのAptana Studio 3のフォルダのなかの実行ファイルをダブルクリックします。
すると、どこのディレクトリで作業するか聞かれます。初期設定では書類ディレクトリの中にAptana Studio 3のディレクトリが作られます。私の場合、下のようなパスになります。
/Users/candle/Documents/Aptana Studio 3 Workspace
作業する場所は後から自由に変えられるので、ひとまず初期設定のまま「ok」しましょう。
Aptana Studio 3でプロジェクトを作る
処理が終わって、画面が現れたら、はじめにプロジェクトを作りましょう。
プロジェクトとは、あなたが書くプログラムを置く場所です。プロジェクトというとわかりづらいですが、ようはディレクトリの事です。プロジェクトを作って、そこにプログラムのファイルを置いていきましょう。
はじめて、プロジェクトを作る時は下の図にある様に、「Create Project」というボタンを押しましょう。
プロジェクトの種類を選びます。PHPを書きたければ、「PHP Project」、rubyを書きたければ、「Ruby Project」を選びます。今回はhtmlを書くと仮定して「Web Project」を選択して、「Next >」ボタンを押しましょう。
次に、テンプレートを使うかどうか訪ねてきます。
(もしも、テンプレートの画面が出なくても問題ありません。バージョンによってはテンプレート画面は出てこない事もあります。)
テンプレートを使うと、html5で使う基本的なファイル群を自動生成したり、既にhtmlが書かれていたり便利なのですが、使いません。「Default Project」のまま、「Next >」ボタンを押しましょう。
最後にプロジェクトの名前を決めます。
この名前がようはディレクトリの名前になります。普通は作るサービス名やアプリ名になるのですが、初めてなので、「firstproject」としましょう。「Finish」ボタンを押して、プロジェクト作成完了です。
htmlファイルを作る
画面の左か下に「App Explorer」というウィンドウがあります。
もしも、無い場合は上のメニューの中の「Window」>「Show View」>「App Explorer」でApp Explorerウィンドウが表示できます。
App Explorerに注目します。
上の方に自分の作ったプロジェクト名が表示されているでしょうか?
「firstproject」という名前を確認してください。
黒いスペースにファイルを作っていきます。
黒いスペースで右クリックをしましょう。メニューの中から「New」>「File」を選択します。
ファイル作成ウィンドが開くので、ファイル名を拡張子も含めて書いてください。今回は「index.html」と書き込みます。.htmlまで書かないとhtmlとして認識してくれません。拡張子までしっかり書きましょう。
「Finish」ボタンを押してindex.htmlファイルを作成します。
htmlを書いてみよう
下のような画面になっていると思います。App Explorerにはあなたが作成したindex.htmlのファイルがあり、右にはindex.htmlの編集画面が開いている状態です。
index.htmlの編集画面に次のhtmlをコピペしてください。
<html> <head> <meta charset="UTF-8"> <title>first</title> </head> <body> <p>hello world</p> </body> </html>
保存をしたら、上の再生ボタンみたいなのを押します。するとブラウザが立ち上がり、htmlを表示してくれます。
下のように表示されれば、成功です。
まとめ
このように、aptana studio 3を使うと簡単にhtmlの作成と実行ができます。
はじめはなれないと思いますが、便利な機能があるので、根強く挑戦していってください。