技術記事については、Qiitaにも稀に投稿しています。

WEBサイト制作におけるコーディングツール遍歴

web_tools

学生時代から数えれば、かれこれ10年以上はWEBサイト制作に携わっている身なので、紆余曲折を経たこれまでのコーディングツール遍歴について綴ってみようと思います。

まずは、自分のサイト制作歴的なものを軽く並べてみる

  • 2001年頃、初のWEBサイト「The Dream City」開設
  • 2003年頃、CGI(perl)によるWEB日記「超日記」開始
  • 2004年頃、第2のWEBサイト「ぷりてぃ」開設
  • 2008年頃、大学の所属サークルのWEBサイト開設
  • 2009年頃、大学生協の全国留学生委員会のWEBサイト開設
  • 2009年頃、大学の所属研究室のWEBサイトをリニューアル
  • 2010年頃、Wordpressによるブログ「超日記」開始

小学6年の時、仲の良かったクラスメイトと一緒に、とあるゲームに関するWEBサイトのチャットに入り浸っていて、そこでの話から「ホームページ作るのって難しいのかな？」と盛り上がったのが始まり。

その後、初めてのHTMLをFTPでアップロードしたあの日から早13年。自分の作った物（ページ）がブラウザ上に表示されているのを目にした瞬間の感動は忘れられない。

そんなわけでそろそろ本題、この13年間で使ってきたコーディングツール遍歴。

2001年頃〜 ホームページ制作王2002

下のサムネイルはその次のバージョンである2003になってるけど、実際に僕が当時使っていたのは2002バージョン。ドラクエのキングスライムのようなキャラが印象的なソフト。

[amazonjs asin="B000068MJB" locale="JP" title="ホームページ制作王 2003"]

「ホームページ」を作るには特殊なツールが要るのでは？という疑問

右も左も分からない状態だったので、まずは近くの家電量販店だかPC専門店だかで制作王2002を購入しました。テキストや画像をそのまま配置でき、ページがHTMLというテキストで構成されていることすら知らなくても作ることができる優れもの。

問題の拡張子とHTMLへの変換

拡張子自体は覚えていないのだけど、保存したファイルは.htmlでも.htmでも.shtmlでもなく...。そのままアップしても動かないし、そもそも.htmlであるべき、ということも分かっていなかったのです。

独自拡張子をHTMLへ変換し、それをFTPツールでアップすることで初めてWEBサイトになるのでした。この変換の行程がかなりの時間を要した記憶があります。画像をふんだんに使っていたからかも。

たしかソフト自体にFTPツールも内包していたはず。

hp-seisakuo2002

2003年頃〜 ホームページ・ビルダーV７

ビルダーとの出会いは制作王での変換作業が大変だったことから、新たなソフトをネットで探したことに起因します。最初に見つけたのは「Microsoft FrontPage」でした。

実際には使うところまでいかなかったので（FrontPage Expressの配布が終了してしまったため）、FrontPageはこの遍歴には入らないのだけど、それ以上のものを探した結果、ビルダーを買う決意に至ったのでした。

[amazonjs asin="B000071K3O" locale="JP" title="ホームページ・ビルダー 7"]

ビルダー7の良さは、制作王と同じビジュアル的にコンテンツを配置していけるモードと、HTMLを直接編集できるモードが選べるというところ。画面を上下に分割し、それらを同時に開くこともできるのが便利！

いつの間にかHTMLコーディングがメインに...

しばらくはビジュアル的に配置できるモードで作っていたのだけど、細かいところをHTMLで微調整することを繰り返し、気付いたらほとんどHTMLで直接書いて確認、という手順になっていました。

ビルダー自体はV7しか使ったことがないのだけど、利用歴はツール中で最長です。大学3年頃までサイト制作はほとんどこれに頼りきっていたし、バージョンアップしたものを買う必要性も感じていなかったので。

ちなみに今は、ビルダーV18まで出ているとか？

2009年頃〜 Adobe DreamweaverCS4

大学生になり、いよいよプログラミングを授業で習うようにもなりました。この頃になると、HTMLに限らず、CSSももちろん書けるし、場合によっては画像なども自分で作ったり。

そこで新たなツールとして、Dreamweaverを購入しました。ちなみに、ビルダーもそうだけど、アカデミック版だったので表記の価格よりもだいぶ安かったです。

[amazonjs asin="B001JJCJVE" locale="JP" title="Adobe Dreamweaver CS4 (V10.0) 日本語版 Windows版 (旧製品)"]

プロのフロントエンドエンジニア（コーダー）が業務で使うことも多いだけあって、その機能はHTML、CSSに留まらず、独自のAjaxフレームワークを備え、あらゆる言語のシンタックスハイライトにも対応しています。

2011年頃〜 SublimeText2,3

ビルダー、Dreamweaverとそこそこの価格を支払ってソフトを導入していたんだけど、PCをMacに変えた2010年頃からはその二つもなかなか使えなくなりました。

とはいえ、プログラミングは卒業論文（研究）のシステム実装部分でやっていたし、就職してからも毎日やっています。そんな折、導入したのがSublimeText2,3です。

[amazonjs asin="4844335677" locale="JP" title="Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ"]

本体はSublimeTextでぐぐってもらえればすぐヒットすると思うのでそこから落としてもらうとして、これはまだまだ数少ないSublimeTextの参考書。この教科書シリーズ、SCSSやCSSなどもなかなか良いのでおすすめ。

以上、サイト制作におけるコーディングツール遍歴でした。どれを使えばいいかわからないという方、これから始める方にはまずSublimeTextをおすすめします。Windows版もあるし、多くの便利なPlugin(Package)も公開されているので。