Dream of Electric Sheep

WEBやプログラムの忘備録

HTMLコーディングに苦手意識のある人ほど Aptana を活用して欲しい

htmlコーディング自体はそれほど難しくないと自分は考えます。
基本的に、

・開始タグと終了タグで要素を挟み込む
・タグを入れ子にして階層構造(ツリー構造)をとる

の2点のポイントさえ理解すれば、構造の把握は割りとしやすいものだと思います。

htmlに苦手意識を感じている初学者の多くは、構造の把握のコツがうまくつかめていないことが原因と思われます。
確かに、複雑なページ構成になってくるとステップ数(行数)も増え、階層構造も深くなり、構造を把握することが難しくなってきます。
そんな状態でタグの記述を間違え、きちんと閉じられていなかったり、きちんと入れ子になってなくて入れ違いに記述してしまったりすると、ブラウザで表示すると「あれ、想定と全然ちがう!」となり、間違いを直すにも修正すべき箇所がさっぱりわからず「htmlは難しいー」となってしまうのではないかと思います。

htmlの構造の把握のコツをつかむにはもちろん書くことになれるということも重要ですが、

・構造がわかりやすい書き方をする
・構造をわかりやすくしてくれるツールを活用する

ということが大切だと思います。

というわけで、htmlの構造を把握するのに役に立つ Aptana の機能をいくつか紹介したいと思います。

 

ソースフォーマット

構造がわかりやすい書き方とは、ずばりインデントをきちんと打つということです。
インデントをきちんと打っていれば、視覚的にタグの階層がわかります。
逆にインデントをまったく打っていなければ、htmlに書きなれている人でも構造を把握するのは困難かと思います。
また、ちゃんとインデントを打っているつもりでも、ずれてきちゃったりするとかえって構造の把握を間違えてしまう原因となってしまいます。
Aptana のソースフォーマットを使えば、一発で自動にインデントをきれいに打ってくれるので、間違いもなくばっちり構造を把握できます。

f:id:turkey246:20150303222509j:plain

こんな感じの構造がわかりにくいインデントなしのソースが、メニューバーの ソース → フォーマット をするだけで

f:id:turkey246:20150303222619j:plain

 一発できれいにインデントの打たれたソースに変換されます。

 

ソースコードの折りたたみ

きれいにインデントが打たれているソースでも、行数が多くなると全体構造をつかみにくくなります。
開始タグがある行の行数が表示されている部分の右側に、マイナスマークが表示されているので、そいつをクリックしてやるとタグが折りたたまれます。

f:id:turkey246:20150303223325j:plain

子要素が全て非表示となりすっきりとした表示となるので、全体の構造をつかみたいときなどに活用すると作業が楽になります。
折りたたんだタグにはプラスマークが表示され、プラスマークをクリックすると再び展開します。

また、きちんとタグが閉じられていないとうまく折りたたみが出来ないので、タグの記述ミスを探すときにも役に立ちます。

 

アウトラインビュー

f:id:turkey246:20150303223951j:plain

アウトラインで、タグの構造をディレクトリのように表示してくれます。
アウトラインが画面上に表示されていない場合は、メニューバーの

ウィンドウ → ビューの表示 → アウトライン

で表示できます。