HTML5/JSの開発環境を整える

HTML5/JSの開発環境を整える – メディアデザイン実習Jこの記事で扱う内容

Aptanaのインストール

Aptanaの日本語化

HTML5 Boilerplateによるプロジェクト立ちあげ

意義

Web開発を行うには、とりあえずAptanaを使っておけば間違いない。

  • 無償
  • Eclipseベースの標準的なIDE
  • ローカルサーバーとターミナルがビルトインされている
  • シンタックスハイライト
  • コード補完
  • プラグインによっていくらでも機能追加できる
  • Androidアプリ開発もできます
  • DreamWeaver?なにそれおいしいの?

自宅のPCにもインストールしておきましょう。

今後新しいPCに買い換えるたびに速攻でインストールしておくぐらいの勢いで。

 

Macの場合

古いOSXにAptana Studio 3をインストールしたい

http://tokyozokei.sakura.ne.jp/zokei.koekatamarin.com/archives/273

 

JDK(Java Development Kit)をインストールする

Java SE Downloads

http://www.oracle.com/technetwork/java/javase/downloads/index.html

3つあるうち、左端の「Java Platform (JDK) 7u21」をクリック

 

Aptana Studio 3をインストールする

Aptana
http://www.aptana.com/

  • Standalone Versionを選択
  • 名前とメールは入力しなくてもOK
  • WindowsではJRE必要かも。必要ならインストールする  http://java.com/ja/download/

ダウンロードが終わったら実行してインストール

 

起動

Aptana Studio 3を起動

  • Workspaceの選択 > そのまま + do not ask againにチェック > OK
  • ソフトウェア更新のダイアログが出たら、実行して再度立ち上げる

 

日本語化

Help > Install New Software

Work with: の欄に、

http://download.eclipse.org/technology/babel/update-site/R0.10.1/indigo

と入力して、Addをクリック

名前の欄に

Babel

と入力して、OKをクリック。

リストが更新されるまでしばらく待ちます。

リストにずらりとアイテムが並んだら、

Japanese

を選択して、規約に同意して「Finish」。

 

 

プロジェクトの新規作成

ファイル > 新規 > プロジェクト

「新規プロジェクト」ダイアログが表示される。

Web > Web Project > 次へ > HTML5 Boilderplate

「New Web Project」ダイアログに切り替わる。

プロジェクト名を入力。日本語は使わない。

特に作りたいものが決まってなかったり、作るものの名前が決まってない場合などは

日付がいいんじゃないかな。

「20130423」と入力 > 完了

HTML5 Boilerlateが出来ました。

あとは自由にHTML5 + javascriptを書いていこう!

 

サイト/アプリケーションのプレビュー

実行 > 実行(Ctrl + F11)

ブラウザにページが表示される。

Hello world! This is HTML5 Boilerplate.

あとは自由にHTML5 + Javascriptを書いていけるよ!

 

 

Boilerplateについて知る

HTML5 Boilerplate を使用して Web 開発を容易に始める

http://www.ibm.com/developerworks/jp/web/library/wa-html5boilerplate/

 

 

 


コメントを残す

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