joppot

コピペで絶対動く。説明を妥協しない

mac ソフトウェア

Aptana studio 3の使い方

投稿日:2013年12月10日更新日:

Pocket

Aptana studio 3 完成

概要

今回はAptana studio3の使い方です。次の順序立てで説明していきたいと思います。

1、プロジェクトを作成
2,ファイルを作り
3,ブラウザーに表示する

前提

Aptana studio 3がインストールされている
下のURLを参照
Aptana studio 3をmacにインストールする

Aptana studio 3の起動させる

アプリケーションディレクトリのAptana Studio 3のフォルダのなかの実行ファイルをダブルクリックします。
Aptana Studio 3-1

すると、どこのディレクトリで作業するか聞かれます。初期設定では書類ディレクトリの中にAptana Studio 3のディレクトリが作られます。私の場合、下のようなパスになります。

/Users/candle/Documents/Aptana Studio 3 Workspace

作業する場所は後から自由に変えられるので
ひとまず、初期設定のまま「ok」しましょう。
Workspace Launcher

Aptana Studio 3でプロジェクトを作る

処理が終わって、画面が現れたら、はじめにプロジェクトを作りましょう。

プロジェクトとは、あなたが書くプログラムを置く場所です。プロジェクトというとわかりづらいですが、ようはディレクトリの事です。プロジェクトを作って、そこにプログラムのファイルを置いていきましょう。

はじめて、プロジェクトを作る時は下の図にある様に、「Create Project」というボタンを押しましょう。
Web - Aptana Studio Start Page - Aptana Studio 3 - _Users_candle_Documents_Aptana Studio 3 Workspace

プロジェクトの種類を選びます。PHPを書きたければ、「PHP Project」、rubyを書きたければ、「Ruby Project」を選びます。今回はhtmlを書くと仮定して「Web Project」を選択して、「Next >」ボタンを押しましょう。
New

次に、テンプレートを使うかどうか訪ねてきます。

(もしも、テンプレートの画面が出なくても問題ありません。バージョンによってはテンプレート画面は出てこない事もあります。)

テンプレートを使うと、html5で使う基本的なファイル群を自動生成したり、既にhtmlが書かれていたり便利なのですが、使いません。「Default Project」のまま、「Next >」ボタンを押しましょう。

New Web Project-1

最後にプロジェクトの名前を決めます。

この名前が様はディレクトリの名前になります。普通は作るサービス名やアプリ名になるのですが、初めてなので、「firstproject」としましょう。「Finish」ボタンを押して、プロジェクト作成完了です。

New Web Project-2

htmlファイルを作る

画面の左か下に「App Explorer」というウィンドウがあります。
もしも、無い場合は上のメニューの中の「Window」>「Show View」>「App Explorer」でApp Explorerウィンドウが表示できます。
スクリーンショット(2013-12-08 2.45.04)スクリーンショット(2013-12-08 2.45.04)

App Explorerに注目します。
上の方に自分の作ったプロジェクト名が表示されているでしょうか?
「firstproject」という名前を確認してください。
黒いスペースにファイルを作っていきます。

Web - Aptana Studio Start Page - Aptana Studio 3 - _Users_candle_Documents_Aptana Studio 3 Workspace-1

黒いスペースで右クリックをしましょう。メニューの中から「New」>「File」を選択します。
スクリーンショット(2013-12-08 2.51.38)

ファイル作成ウィンドが開くので、ファイル名を拡張子も含めて書いてください。今回は「index.html」と書き込みます。.htmlまで書かないとhtmlとして認識してくれません。拡張子までしっかり書きましょう。

「Finish」ボタンを押してindex.htmlファイルを作成します。
New File-2

htmlを書いてみよう

下のような画面になっていると思います。App Explorerにはあなたが作成したindex.htmlのファイルがあり、右にはindex.htmlの編集画面が開いている状態です。
Web - firstproject_index.html - Aptana Studio 3 - _Users_candle_Documents_Aptana Studio 3 Workspace

index.htmlの編集画面に次のhtmlをコピペしてください。

<html>
  <head>
    <meta charset="UTF-8">
    <title>first</title>
  </head>
  <body>
    <p>hello world</p>
  </body>
</html>

保存をしたら、上の再生ボタンみたいなのを押します。するとブラウザが立ち上がり、htmlを表示してくれます。
Web - firstproject_index.html - Aptana Studio 3 - _Users_candle_Documents_Aptana Studio 3 Workspace-1

下のように表示されれば、成功です。
first


まとめ

このように、aptana studio 3を使うと簡単にhtmlの作成と実行ができます。

はじめはなれないと思いますが、便利な機能があるので、根強く挑戦していってください。

ではまた。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-mac, ソフトウェア
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Mac 標準terminal、iterm2のEmacsでpowerlineが文字化けするのを修正する

概要 みなさんこんにちはcandleです。 今回はemacsのpowerlineが文字化けしてしまうのを修正する方法を紹介します。 こちらのサイトを参考にさせていただいています。 https://gr …

mac のiterm2でaltキーをescに割り当て、カーソル移動を早くする

概要 皆さんこんにちはcandleです。今回はiterm2のキーを設定して、カーソル移動を楽にします。 emacsユーザーなら分かると思いますが、カーソルの高速移動はalt+fで前へalt+bで後ろへ …

macターミナルのウィンドタイトルとタブ名を変更する

概要 みなさんこんにちはcandleです。 ターミナルのウィンドタイトルとタブ名を変更する企画をやっていきたいと思います。 ウィンドタイトルというのは何処かというと下の画像の部分になります。タブ名もそ …

macのemacs23,24でemmet(1.0.10)の補完の後にカーソルの位置がずれるのをデグレードして対処する

概要 みなさんこんにちはcandleです。今回はemacs23か24でemmetを使用した時に、カーソルの位置が行末になってしまう時の対処法を紹介します。 とは言っても、ソースコードをいじるわけではな …

MAMPでphpのshell_execを使用してunixコマンドを実行できない場合の対処(imagemagick,convert)

概要 みなさんこんにちはcandleです。今回はちょっと問題が起きてshell_execがうまくいかないときのトラブルシューティングをまとめます。 私はMAMPをバージョンアップする前は、phpのsh …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ