どこまでできる？ 無料ツールでWebサイト作成（2）
AptanaでAjax・AIR・iPhone用ページの開発を行う
セカンドファクトリー 新谷剛史
2007/9/13
JavaScriptのコード修正
- - PR -
ではまず、「Aptana」の本命機能であるJavaScript／Ajaxのコーディングから見ていこう。
既存のファイルを開く、あるいは新規作成でコーディングを始めてみると、HTMLを作成するときと同様にコード記述の途中で想定される関数とその内容を参照することが可能だ。HTMLのコーディングを中心に作業を行っている方であれば、使いたい関数がうろ覚えの状態であったとしても書籍などを調べることなくコーディングが可能だろう。
また、プログラミングに慣れた方であっても記述途中で目的の関数を選べるため、作業スピードの向上とより正確なコーディングが可能となるはずだ。この辺はテキストエディタと比較した場合のオーサリングツールの優位点である。
 |
| 図5 記述途中で補完機能が働く |
コーディングの途中には、下部の［Validation］エリアに注目してほしい。何と、コーディングの途中、特別な操作を行わなくてもコーディングのエラーチェックができるのだ。
これは、テキストエディタでのコーディングと比較した場合にはもちろんのこと、有償のWebオーサリングツールにも劣らない優位点であり、速く正確なコーディングを助けてくれる便利機能として活用したい。記述したプログラムが正しく動作するかについては実際に動かしてみないと分からない部分もあるのだが、それでもこの機能は十分使える。
「コーディング途中で教えてくれなくても、最終的にチェック機能を実行した際に教えてくれれば十分」と考える方もいるかもしれないが、途中で教えてくれることは、作業効率を高めるのに大きく貢献するはずだ。
  |
| 図6 エラーチェックは特別な操作をしなくても行われる） |
有償版Webオーサリングツールにあるような、Ajaxのコードを自動生成してくれる、という機能は実現されていないが、すでに用意されているJavaScriptを修正するという意味では十分な機能を持っていることはご理解いただけるだろう。
Ajax／JavaScriptアプリケーションの作成手順は？
既存のJavaScriptの修正は上記のような手順で行えるが、続いてJavaScriptライブラリを使用するための手順を確認したい。
［ファイル］→［新規作成］→［プロジェクト］で［新規プロジェクト］のウィザードを起動する。［ウィザードを選択］画面で、［Ajax Projects］を選択する。
 |
| 図7 新規プロジェクト作成のためのウィザード選択画面 |
Ajax Projectの場合、続いてプロジェクト名とプロジェクトの保存場所が聞かれるので、任意のプロジェクト名を指定すると、JavaScriptライブラリの選択画面が表示される。Adobe Spry 1.5、Yahoo User Interface（YUI）、Prototypeなどさまざまなライブラリが選択可能だ。ライブラリの選択後［終了］を押すと、プロジェクトの作成は終了だ。
 |
| 図8 JavaScriptライブラリの選択画面 |
例えば、Prototypeを選択した場合、［終了］ボタンを押すと、自動的にプロジェクトが作成されると同時に、サンプルのHTMLが表示される。このHTMLはあくまでサンプルのもので、<head>タグ内も<Script>タグのみなのでこのままでは文字化けを起こしてしまう。<head>タグ内の記述を行うなどの作業が必要である。
 |
| 図9 Prototypeの場合はサンプルコードが表示される（画像をクリックすると拡大します） |
エンコードにも注意をしてほしい。デフォルト設定では不具合が出ることが多いはずなので、必要に応じて変更しよう。［プロジェクト］→［プロパティ］で［プロパティ］画面を開き、［情報］内の［テキスト・ファイル・エンコード］から変更が可能だ。
 |
| 図10 エンコードを変更するための［プロパティ］画面（画像をクリックすると拡大します） |
Prototypeの場合には、サンプルコードが表示されたが、ライブラリによってはこのようなサンプルが表示されない場合がある。不具合ではないので、続いて［ファイル］→［新規］→［Untitled HTML File］でHTMLを作成していこう。
続いて次のページではAIRアプリケーションの作成手順やiPhone／iPod touchのブラウズチェックなどについて解説します。
 |
1-2-3 |  |
| INDEX | ||
| どこまでできる？ 無料ツールでWebサイト作成（2） AptanaでAjax・AIR・iPhone用ページの開発を行う |
||
| Page1 「Aptana」とは何かをもう一度振り返ってみる アプリケーション開発環境としての潜在能力は？ プラグインの追加にはちょっとした意識が必要なことも この連載内でのアプリケーション開発に関する評価 |
||
 |
Page2 JavaScriptのコード修正 Ajax／JavaScriptアプリケーションの作成手順は？ |
|
| Page3 AIRアプリケーションの作成手順は？ そのほかの言語のプログラミングについて iPhone／iPod touch用のブラウズチェック Aptanaの多様な一面を試してみよう |
||
どこまでできる？ 無料ツールでWebサイト作成 バックナンバー
 |
リッチクライアント＆帳票 全記事一覧へ |
TechTargetジャパン
- 次のモバイルアプリはどのフレームワークで作る？ （2012/5/24）
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する - 「LESS＆専用エディター」でCSSをシンプルに書こう （2012/5/23）
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう - 学校が世界一のデジタル環境になったら （2012/5/18）
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない - 1000万ドル調達も夢じゃないクラウドファウンディング （2012/5/15）
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ
 |
|
|
|
|
キャリアアップ
スポンサーからのお知らせ
イベントカレンダー
お勧め求人情報
転職／派遣情報を探す
*＊先週の人気講座ランキング＊*
〜 Android編 〜
ホワイトペーパー（TechTargetジャパン）
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。