質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.04%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 2,000

mx3

score 185

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

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

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

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+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にそれぞれどんな物かが書いてありますので、ご参考下さい。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/03 00:27

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

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

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

    キャンセル

  • 2015/12/03 11:09 編集

    横から失礼します。
    静的サイトジェネレータは今後の作業工数を一気に削れる必殺技ですので、
    (しかも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要素の閉じタグは省略しなければならない等のへんてこな制約には対応し辛いかと思いますが…

    キャンセル

  • 2015/12/16 23:17

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

    キャンセル

0

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

このエディタだとファイルを縦断したの管理ができない
多分手に馴染んでないだけだと思いますのでとりあえず馴染むまでひたすら使い込みましょう
まさに千本ノックの勢いで(笑

もしくは、数百ページのコーディングをする場合に、こういうファイルの管理方法があるよ、というのがあれば
これくらいのボリュームだとgitを使ってwebサーバーにデプロイするのが今どきベターでは?
もしくはオレオレCMS構築するとか

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/01 11:19

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

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

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

    キャンセル

0

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

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

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

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

参考までに・・・

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/03 00:39

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る