フリーランスの忘備録

Dark Mode

searchKeywords

sellBlog Taglist

boltおすすめ記事

Node.jsを使って、Dreamweaverのライブラリ機能を作ってみた

Node.jsを使って、Dreamweaverのライブラリ機能を作ってみた

目次

  1. きっかけ
  2. 使い方
  3. ファイル一式説明

きっかけ

私は普段会社員をやりながら零細なフリーランスをやっています。フリーランスとして頂戴するお仕事はコーディングのみでやっているのですが、コーディングをする際は自分でテストサーバーを用意して確認してもらっています。
おおよそ下記の流れでお仕事させていただいています。

おおよその仕事の流れ

ここで困るのが共通アイテム（ヘッダーやフッターなど）の修正がある場合です。

本番サーバに私が直接アクセスできる案件であれば、phpのインクルードを使用するなどして一括で管理できますが、そうでない場合はインクルードなどは使用できません。ですので、共通アイテムの修正を1ページずつやっていくことになります。
規模によっては数十ページの修正になるので大変です。。。

そんなときに便利なのが、Dreamweaverのライブラリです。ライブラリの詳しい説明はこちらのページで確認してみてください。

しかし、Dreamweaverをコーディングに使用していない私にとってはライブラリのためにDreamweaverを開いて、ライブラリの設定をして、、、とするのは正直めんどくさい。

なんか簡単にできないものかと考えていたときに、ちょうどNode.jsを勉強していたので、Node.jsで作れるんじゃないの？と思って、勉強ついでにNode.jsでライブラリ機能のようなものを作ってみました。

先に完成品はこちらです。
これを作ってから修正の手間が激減したので、作ってよかったな〜って思ってます。

使い方

使い方はリンク先のテキストファイルreference.txtにも記載しているのですが、ここでも説明したいと思います。
これはmacの環境でしか確認していないので、windowsでちゃんと動くかは分かりません。
また使用するパソコンにRubyがインストールされていることが条件です。

ファイルの設置の仕方

リンク先のファイルで主に必要なのはappsフォルダとincludeフォルダだけです。
これを下記のようにindex.htmlと同じ階層に設置してください。

  • root
  • ├index.html（トップページ）
  • ├apps
  • └include

上記さえ守られていれば、rootフォルダ内にはどのようにファイルやフォルダを設置しても大丈夫です。
また便宜的にrootフォルダと名前を付けてますが、これは別にrootという名前でなくても大丈夫です。

ただappsフォルダとincludeフォルダの名前は変更しないでください。

記述の仕方

例えば下記のような構造でヘッダー部分を共通化したいとします。

  • root
  • ├index.html
  • ├aaa
    • └index.html
  • ├apps
  • └include
    • └header.html

include/header.htmlには共通化したいヘッダー部分のコードを書いてください。
例えば下記のような感じです。

■include/header.html

<header>
 <h1>LOGO</h1>
</header>

index.htmlやabout/index.htmlに共通化したヘッダーを挿入したい箇所に下記のように記述してください。

<!-- header.html -->
//ここにinclude/header.htmlの中身が反映されます。
<!-- end header.html -->

例えばヘッダー部分の共通化したコードを記述したファイルがinclude/head.htmlなら下記のようになります。

<!-- head.html -->

<!-- end head.html -->

各ファイルへの反映の仕方

ここまできたら、次はターミナルを開きます。
ターミナルのcdコマンドを使って、appsフォルダまで移動します。
移動して、node app.jsとターミナルで打てば全てのファイルにヘッダー部分の修正が反映されます。

その他説明事項

相対パスの記述について

相対パスで書いた画像パスやリンクパスは各ファイル、全て正しい相対パスで反映されます。
例えばinclude/header.htmlに下記のように記述したとします。

■include/header.html

<header>
 <h1><a href="../index.html"><img src="../assets/images/logo.jpg" alt="LOGO"></a></h1>
</header>

これを反映した場合、index.html、aaa/index.htmlそれぞれは下記のようになります。

■index.html

<!-- header.html -->
<header>
 <h1><a href="./index.html"><img src="./assets/images/logo.jpg" alt="LOGO"></a></h1>
</header>
<!-- end header.html -->

■aaa/index.html

<!-- header.html -->
<header>
 <h1><a href="../index.html"><img src="../assets/images/logo.jpg" alt="LOGO"></a></h1>
</header>
<!-- end header.html -->

もしさらに深い階層（aaa/bbb/ccc/index.htmlのようなもの）があったとしても、下記のようになります。

■aaa/bbb/ccc/index.html

<!-- header.html -->
<header>
 <h1><a href="../../../index.html"><img src="../../../assets/images/logo.jpg" alt="LOGO"></a></h1>
</header>
<!-- end header.html -->

絶対パスで記述した箇所にしてはそのまま絶対パスのままです。

反映ファイルについて

現在アップしているファイルは検索対象のファイルがhtmlのみになっています。

その他のファイル形式も検索対象にしたい方はapp.jsの37行目のif文の条件式を変更してください。

ファイル一式説明

ここからはファイル一式について簡単に説明します。

  • reference.txt … 使い方を簡単に説明したテキスト
  • sample.html … サンプルのファイル
  • include/header.html … サンプルのインクルードファイル
  • include/footer.html … サンプルのインクルードファイル
  • apps/node_modules/ … node.jsのモジュールフォルダ
  • apps/package.json … node.jsのpackage.js
  • apps/app.js … インクルード機能について記述しているファイル

app.jsの説明

app.jsの中身はこちらです。

6行目の「apps」の箇所はappsフォルダ名なので、appsフォルダ名を変更した場合は「apps」の箇所に変更したフォルダ名に変更してください。

9行目の「include」の箇所はincludeフォルダ名なので、includeフォルダ名を変更した場合は「include」の箇所に変更したフォルダ名に変更してください。

37行目の「.html」でhtmlファイルしか修正しないようにしてますので、ここを変更すれば別のファイル形式も修正できます。

これを使い始めて本当に楽なりました。皆さんも是非使ってみてください〜。

arrow_circle_up