Web制作(フリーランスWebデザイナー)

日にち2017/1/24
ディレクション

【簡単】サイト制作の構成(サイトマップ)をいつでもWEB上で把握する方法

この記事は書いてから 約 9か月 経過しています。

【簡単】サイト制作の構成(サイトマップ)をいつでもWEB上で把握する方法

サイト制作に入る前に必ず構成図を作るかと思います。今回はWEB上でいつでもどこでも確認出来る構成図(サイトマップ)の作成です。クライアント様も制作側も外出先からWEB上で確認できます。

しかし、構成図は画像でわかりやすく図で描く事が多く、今回の様にHTMLを使って表示させると画像よりは見辛さはあります。ここだけがデメリットかもしれません。

ですが、万が一構成が変わったとき、修正してクライアント様や制作陣に毎度送ることになってしまった時には便利です。何が便利かといいますと、テキストベースなので修正はテキストを変更するだけです。画像の様にマージンを気にしたり、オブジェクトを移動させたりしないというのがとても楽です。また、修正後は画像をPDFなどに変換する必要もなく、メールにURLを貼付けて送るだけです。スマホで画像が送れないなどもありません。

更に、構成図(サイトマップ)だけでは無く、スケジュールや制作に必要なデータの有無なども一緒に載せると便利です。

構成図を作ろう

TABELタグを使って作ります。記者自身の場合はページタイトルとURLとパンくずとコンテンツ内容・補足を載せます。

ファイル名はsitemap.phpで作ります。何故かは後ほどご説明させていただきます。

<h1 class="title">スケジュール</h1>
<table id="shceBox">
    <tr>
        <td>日にち</td>
        <td>曜日</td>
        <td>内容</td>
    </tr>
    <tr>
        <td>01/31</td>
        <td>月</td>
        <td>デザイン完成</td>
    </tr>
</table>

上記HTMLと同じ要領で構成図を表示させます。

スケジュール表も載せよう

最初のディレクション時に細かくスケジュールを決めるかと思います。デザインはこの日まで。コーディングはこの日まで。と言った感じですかね?

そこで、決めたスケジュールも一緒に載せる様に記者自身やっています。理由は全て、外出先でもいつでも確認出来るからです。

サイト制作の必要情報を載せよう

こちらもディレクション時にタイトル名やURLやキーワードなど色々決めていくかと思います。

一通りの情報を載せとくと便利です。記者自身の場合ですが、制作中に色々なファイルを開くと言うのがとても鬱陶しく思ってしまうので、同じ思いをしている方にはおすすめです。

上でPHPファイルにすると書きましたが、ここでPHPを使います。

  • ディスクリプションの文字数を確認する。
<?php
//ディスクリプションの内容を入力
$str2 = '入力内容' ;
$str_len2 = strlen($str2);
$str_mblen2 = mb_strlen($str2, 'UTF-8');
print($str2.'<br><br>文字数は'.$str_mblen2.'/80(64文字以上)');
?>
  • URLを統一して、構成図の統一部分のURLを一斉置換する為
<?php 
//サイトURL入力
$str1 = 'http://modemo.jp/' ; ?>
<a href="<?php print($str1); ?>"><?php print($str1); ?></a>
  • Basic認証用にフルパスを取得する
<td><?php echo __FILE__; ?><br>※Basic認証用</td>
上記コードを入れるとフルパスが取得できます。

Basic認証をしっかり掛けます

【簡単】サイト制作の構成(サイトマップ)をいつでもWEB上で把握する方法

Basic認証は、指定したURLにIDとパスワードをかける事ができます。それによって、誰でも見れる事が出来なくなります。なので、Basic認証はしっかり掛けます。

sitemap.phpと同じディレクトリーに.htaccessと.htpasswdを設置します。

.htaccessの記載方法

AuthUserFile /home/modelpicks/www/modemo/sitemap/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter id and password"
AuthType Basic
require valid-user
  • AuthUserFile

ここにフルパス/.htpasswdを入れてください。

  • AuthName

ここはそのままでも大丈夫です。記載表示を変えたい場合は変えてください。

残りはそのままで大丈夫です。

.htpasswdの記載方法

IDを入れる:パスワードを入れる

パスワードは必ず暗号化します。また、2行目は改行する事を忘れずにしてください。

暗号化にするサイト:http://www.luft.co.jp/cgi/htpasswd.php

最後に

いつでもどこでも簡単にサイト情報やサイトマップをWEB上に公開することはかんたんですが、Basic認証を掛けないと誰でも見れてしまいます。そこだけ気をつけていただければとても便利だと思います。

facebook twitter

© 2013-2017 visual hallucination.