中規模のWebサイトに適したエディタとファイルの管理方法について

Question

普段、sublimetextやBracketsをエディタとして使用してHTMLコーディングを行っています。ただ、このエディタだとファイルを縦断したの管理ができない（私が使い方を分かっていないだけかもしれません）ので、100ページ以下の小規模のサイトの場合はPHPで共通部分を分離するなどして構築しています。

しかし、例えば、数百ページの中規模のWebサイトのHTMLコーディングをする場合、ただPHPで分離するだけでは対応できなかったり、ファイルやコードの管理が煩雑になることが多く、昔はこの規模の場合Dreamweaverを使用していたのですが、ソフト自体が重いので使いたくなくて、Dreamweaverを使用しなくてもDreamweaverのようなことができる（テンプレート、スニペット、ファイルを縦断した置換、検索など）エディタでオススメのもの、一般的なものは他にあるのでしょうか？

もしくは、数百ページのコーディングをする場合に、こういうファイルの管理方法があるよ、というのがあればぜひ教えて下さい。

Answer 1

テンプレート機能で全ページに変更を適用とかになると、Dreamweaverやホームページ・ビルダーのようなWebオーサリングツールを使わないと難しいと思います。Webオーサリングツールまとめ【ホームページ制作に使える・無料ツールあり】で色々紹介されていますが、エディタに比べると総じて重いでしょう。

規模がそこそこで、テンプレートを用いて外観統一とかしたいといった場合、今時はCMSを使うか静的Webサイトジェネレーターを使うのがいいのではないでしょうか？WordpressなどのCMSだとどうしても制限(プラグインを自分で作れればそうでもありませんが)がありますし、基本Web上で編集になるので除外するとして、静的Webサイトジェネレーターを使うのはいかがでしょうか。

静的Webサイトジェネレーターは静的Webサイトを生成するツールです。テンプレートやヘッダ、フッタなどを用意して、各ページは本文だけ書いていくと言うことができます。また、物によってはHAML/Jade/Markdown、LESS/SASS、CoffeeScriptなどで作成して、それをHTML、CSS、JavaScriptに変換もしてくれます。テンプレートやヘッダ、フッタを変更すれば、ページ全てが変更されるため、テンプレート機能が無くても問題が無くなります。WebオーサリングツールやCMSが内部でやっていたことを利用者の目に見える形でやっているような物と思っていただければあっているのかなと思います。Jekyll、Middleman、Hugoあたりが有名です。英語の記事ですが、Static Website Generators Reviewed: Jekyll, Middleman, Roots, Hugoにそれぞれどんな物かが書いてありますので、ご参考下さい。

Comments

[mx3]

回答ありがとうございます。オーサリングソフトのエントリを見ましたが、WinとMacどちらも使えないといけない、という制約があり、やはりDreanweaver以外は難しいのかなと思いました。

静的Webサイトジェネレータについては、全く知らなかったので大変参考になりました！こういうものがあるんですね...。Wordpressなどと違ってあくまでも静的ファイルを生成する、という点が驚きでした。コンソール画面が苦手なので導入のハードルは高そうですが、社内向けの業務に関しては使ってみたいです。

私の説明不足で申し訳ないのですが、社内のWebサイト構築などではなく、HTML/CSSファイルをクライアントに納品する業務になるので、まずWordpressを使うのはかなり難しいのですが、静的Webサイトジェネレータはそういったケースでも使えそうかというとどうでしょうか？ディレクトリ構成やコーディングガイドラインなどを指定されることも多いのですが、やはりそういったケースに柔軟に対応するのは難しいでしょうか？

[miyabi-sun]

横から失礼します。
静的サイトジェネレータは今後の作業工数を一気に削れる必殺技ですので、
（しかもHTMLの知識が丸々活き、記述も簡素で綺麗になるのでコピペがなくなり、極めてロジカルな仕事が出来るようになります。）
上長や意思決定者と相談してみて、勉強して使ってみる期間を設ける価値は十分あると思います。

> 静的Webサイトジェネレーター
PreprosというGUI上で静的ファイルを作成してくれるTOOLがあるので使ってみてはどうでしょう？
https://prepros.io/

> 静的Webサイトジェネレータはそういったケースでも使えそうかというとどうでしょうか？ディレクトリ構成やコーディングガイドラインなどを指定されることも多いのですが、やはりそういったケースに柔軟に対応するのは難しいでしょうか？

GruntやGulpを始めとするタスクランナーツールを併用するのが一般的です。
JadeやLess→HTMLやCSSに加工する際に、ファイル単位で出力先のディレクトリを自由自在に設定できます。
最初の設定ファイルの記述で苦戦するかと思いますが、一度設置してしまえばHTMLやCSSを管理するのがアホくさく感じられる程便利です。

コーディングガイドラインに関してはJadeで出力されたHTMLは相当美しいです。
並の人間様や私(miyabi-sun)に依頼するよりまともなものが出てきます。
http://jade-lang.com/api/
コンパイル時の引数に「pretty」という項目があり、「\t」とすればタブインデントも可能ですし、スペース2個4個、超ニッチなスペース6個も自由自在です。
流石にli要素の閉じタグは省略しなければならない等のへんてこな制約には対応し辛いかと思いますが…

[mx3]

miyabi-sunさん、ありがとうございます！静的Webサイトジェネレーターかなり興味があり、自分に取り扱えそうか見ているところです。あまり情報が多くないので苦戦してますが、使いこなせたら大幅に作業軽減できそうですね。有益な情報ありがとうございました！

Answer 2

Mac専用ですが、Coda2（最新は2.5）というエディタが
・サイト定義
・スニペット機能（Codaではクリップ機能といいます）
・定義したサイト全体に対する検索置換え
といった、Dreamwaverが得意とする機能を持っています。

・比較的動作が軽い
・画面分割数に制限が無い
・エディタ内に比較的正確なライブビュー（webkit）が組み込まれている
・エディタ内のライブビューで開発者ツールが使える

といった点はDreamweaverより優れているかと思います。
最新の2.5にしたらちょっと挙動不審になったとか、
アップデートが滞ってるとか、
多少気になる点もありますが、
Mac使いでDreamweaverより軽いエディタでDreamweaverライクなサイト管理機能を使いたいのなら検討してもよいかと思います。

Dreamweaverのテンプレート機能のようなものはありませんが、
それこそ数百ページ規模であればPHPでインクルードするなりCMS管理するなりした方が
効率よいので、それは別に良いのではないかと思います。

参考までに・・・

Comments

[mx3]

回答ありがとうございます！Coda2は良いとよく聞くので使いたいのですが、あいにくメイン機がWindowsでして...Macも使ってはいますががっつりコーディングできる環境ではないので、残念ながら積極的に使うことができない状況です。。
ともかく、PHPでのincludeが特におかしなことではないということが分かったので安心しました。

Answer 3

Dreamweaverを使用しなくても

Dreamweaverを使わずに一通りサイトコンテンツを作成できるなら、それこそ手に馴染んだエディタならなんでも(Sublime TextでもBracketsでもEmacsでもVimでも)いいんじゃないでしょうか

このエディタだとファイルを縦断したの管理ができない

多分手に馴染んでないだけだと思いますのでとりあえず馴染むまでひたすら使い込みましょう
まさに千本ノックの勢いで(笑

もしくは、数百ページのコーディングをする場合に、こういうファイルの管理方法があるよ、というのがあれば

これくらいのボリュームだとgitを使ってwebサーバーにデプロイするのが今どきベターでは？
もしくはオレオレCMS構築するとか

Comments

[mx3]

回答ありがとうございます！

例えば、GoogleAnalyticsのコード入れ忘れた！みたいな時に、Dreamweaverだとテンプレートに差し込むだけで全てのファイルの変更ができますが、BracketsやSublimeTextだと置換とかでやればできそうな気がしますが、なんか置換して欲しくないところまでされてそうで怖くて使えなかったり…。手に馴染ませるというのはそういうことでしょうか？？とにかく、そういう、共通するコードの追加や変更がやれるエディタが欲しい、というイメージです。

gitは残念ながらいまの環境では色々とハードルが高くてすぐには導入が厳しいですが、それが今どきベターなんですね、覚えておきます。