Aptana plagin Install

LastUpdate: 2009/09/27 22:33:20

20090919_Aptanaプラグインをインストールしてみる
 20090926_aptanaプラグインを使ってみる
 20090927_JavaScriptのデバッグをしたんだけど

20090919 Aptanaプラグインをインストールしてみる

Eclipseにプラグインの形で取り込んでみる。EclipseのVersionは3.5

よくばりにも、全部チェックをつけてみた

参考
http://d.hatena.ne.jp/octech/20080920
http://studio-fun.net/2009/01/03/296/

AptanaでWebページ作成はここまでできる！（1/3）－＠IT
http://www.atmarkit.co.jp/fwcr/rensai/freeauthoring01/freeauthoring01_1.html
　

20090926 aptanaプラグインを使ってみる

AptanaでJQueryを使ってみる～というサイトがあったので、トレースしてみる

参考
http://www.atmarkit.co.jp/fwcr/rensai2/jquery01/02.html

［メニュー］→［新規］→［その他］からプロジェクトの新規作成を行う。
[Aptanaプロジェクト］の［ディフォルトWebプロジェクト］を選択する。

プロジェクト名を指定して

ｊQueryを選択

こんな感じの画面が表示された

参考サイトをトレースしてきます

index.html を書き換えていきますが、今回のサンプルは index.htmlのエンコードがUTF-8にしておきます。

index.html を以下のソースに貼り変えます。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript"><!--
  function hello(){
      $("#target").html("<strong>ようこそ、jQueryの世界へ！</strong>");
  }
  function hide(){
      $("#target").slideUp();
  }
  function show(){
      $("#target").slideDown();
  }
--></script>
</head>
<body>
  <div id="target">idがtargetのdivタグ</div><br>
  <input type="button" name="btn1" value="Hello!" onclick="hello()">
  <br><br>
  <input type="button" name="btn2" value="Hide" onclick="hide()">
  <input type="button" name="btn3" value="Show" onclick="show()">
</body>
</html>

IEや、FireFox 上での見栄えを確認できるようです。もちろん、ボタンは動作します

IEのHideボタンの動きが、自分のところでは、スムーズな描画がされなかったけど…

jQueryのプラグインを使って、カラーピッカーを作ってみる

プラグインのダウンロード
http://acko.net/dev/farbtastic

取得した farbtastic12.zip を展開し、以下のファイルを得ます。

farbtastic.js
farbtastic.css
marker.png
mask.png
wheel.png

libフォルダ配下に「farbtastics」というフォルダを作成して、上記の５つのファイルを配置します。

htmlファイルを作成していきます

ファイル名は colorpicker.html としてみた。

土台になるhtmlファイルが生成されました。

太字の箇所を追記した所

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>Insert title here</title>

<script type="text/javascript" src="/lib/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" src="/lib/farbtastics/farbtastic.js">
</script>
<link rel="stylesheet" href="/lib/farbtastics/farbtastic.css"
  type="text/css" />

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('#colorpicker').farbtastic('#color');
  });
</script>

</head>
<body>

<form>
  <input type="text" id="color" value="#000000"/>
</form>
<div id="colorpicker"></div>

</body>
</html>

ＩＥの場合は表示されたけど

FireFoxは外周円、カーソルが表示されない

20090927 JavaScriptのデバッグをしたんだけど

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>Insert title here</title>

<script>
function func1(){
    alert("func1");
}
</script>
</head>
<body>
<input type="button" value="押す" onclick="func1()">
</body>
</html>

ブレイクポイントをいれておいた

FireFoxでDebugを実行してみる

FireFoxに、Aptana用のアドインがインストールされる…

http://127.0.0.1:8000 ～と表示されている事から、なにかのServerが起動されてい

[押す]ボタンをクリックすると、ブレイクポイントで止まってくれた！

たぶん、いろいろデバッグできそうです

IEはうまく動かない

この画面が表示されてしまう

Socket connection error. Please try shutting down and restarting your web browser, and then run 'debug' again.

java.net.SocketTimeoutException: Accept timed out
at java.net.PlainSocketImpl.socketAccept(Native Method)
at java.net.PlainSocketImpl.accept(PlainSocketImpl.java:390)
at java.net.ServerSocket.implAccept(ServerSocket.java:453)
at java.net.ServerSocket.accept(ServerSocket.java:421)
at com.aptana.ide.debug.core.JSLaunchConfigurationDelegate.launch(JSLaunchConfigurationDelegate.java:414)
at org.eclipse.debug.internal.core.LaunchConfiguration.launch(LaunchConfiguration.java:853)
at org.eclipse.debug.internal.core.LaunchConfiguration.launch(LaunchConfiguration.java:703)
at org.eclipse.debug.internal.ui.DebugUIPlugin.buildAndLaunch(DebugUIPlugin.java:866)
at org.eclipse.debug.internal.ui.DebugUIPlugin$8.run(DebugUIPlugin.java:1069)
at org.eclipse.core.internal.jobs.Worker.run(Worker.java:55)
　

戻る

document.write(document.title); //タイトルの表示

20090919 Aptanaプラグインをインストールしてみる

20090926 aptanaプラグインを使ってみる

20090927 JavaScriptのデバッグをしたんだけど