商用サイト構築にホームページ作成ソフトだけでは限界があります。デザイン以外の仕掛けやユーザビリティーに優れたjavascriptやCGIが不可欠であり、知識がないと設置さえ難しいのが実情です。設置の経験を積めば、簡単な改造も可能です。
フレーム構造をiframeとjavascriptで作成する
コンテンツメニューなどを別ファイルとして複数フレームに読み込み、全体を1ページに表示する構造は一般にframesetやiframeのタグを使用しますが、framesetで構築したindx.htmlには、コンテンツ自体を記述せず、フレーム別に表示されるHTMLファイル名が記述されます。
このようなframesetに対し、インナーフレーム構造のiframeはindex.htmlにコンテンツ自体を記述でき、しかもページの任意の位置に表示ができるので、SEO対策に有利な点と利便性から多くのサイトで利用されています。
また、iframeをjavascriptで読み込むことで、index.htmlファイルにiframeタグを記述する必要がなく、多くのHTMLの文書型宣言に対応することができます。
【iframeタグの一般例】
| <td><iframe src="menu.html" width="160" height="1600"
marginheight="0" frameborder="0" scrolling="no"
title="IFRAME対応ブラウザが必要です!">IFRAME対応ブラウザが必要です!</iframe></td> |
【index.htmlにjavascriptでframe.jsを読み込む】
| <td><script type="text/javascript" src="java/frame.js"></script><noscript>JavaScript(アクティブスクリプト)を有効に設定してください</noscript></td> |
【ファイル名frame.jsのjavascript作成例】
<!--
document.write("<iframe src='menu.html' height='1600' width='130'
scrolling='no' frameborder='0'></iframe>");
// --> |
フレーム構造はjavascript以外にobjectタグでも表示は可能ですが、IE9以前のブラウザで表示した場合はスクロールバーが表示されるなどブラウザによって意図した表示にならないことがあります。
<td>
<object type="text/html" data="menu.html" style="width:130px;height:1600px;">
<p>non object</p>
</object>
</td> |
スパムメールを少しでも減少させる
メールアドレスを記載する場合はHTMLソースの@マーク部分を@に変更します。この代替表示法はサイトページのメルアド情報を収集するロボット対策になります。半角英数の@を全角英数の＠で代替したり、アドレス自体を画像化する方法もありますが、これはコピー＆ペーストしても動作しないので表示用に利用します。
メルアド暗号化ツールのjavascriptはメールアドレス収集ロボット対策やメールアドレス暗号化スクリプト、lufttooisなどで公開されています。また、アドレス表示が不要なCGIを利用したフォームメールはスパム対策と利便性から広く普及し、ネットショップの必須ツールになっています。
自動翻訳ツールで多言語対応サイトに変換する
在留外国人の登録者数215.2万人は都道府県人口全国16位の長野県217.3万人に匹敵し、中国語と韓国語が過半を占めます。もちろん、在留外国人は消費者でもあるのですが、実情は日常会話に不自由なくても読み書きの苦手な人は多いようです。
お店のサイト全体を翻訳する無料ツールのガジェットをウェブページに設置すると、そのページの画像以外のテキスト部分が自動翻訳されるので、外国語を絞ったマーケティングが可能になります。
ガジェットのサイズやデザインは固定されますが、セレクトメニューで選択言語を絞ることもできます。一度選択すれば、以降に閲覧するウェブページすべてにこれらの効果が及びます。
- Microsoft Translator Widget
ウィジェットはウェブページの即時翻訳が可能で、ユーザーは翻訳サイトに移動しなくても、手動又は自動的に母国語での閲覧や複数言語で友人とのページ共有ができます。
- Google翻訳ガジェット
Googleのウェブサイト翻訳ツールをページに追記すると、タブ表示や自動表示、インライン表示などのオプションモードを利用して簡単に自動翻訳することができます。
サイトを作成する場合はオフラインで文章を入力し、翻訳言語を選択できるキングソフト辞書やファイルのアップロード又はウェブページ(Wikipedia? 、 knolなどの記事)のURL指定で翻訳サイトを作成できるGoogle翻訳者ツールがあります。
その他、横幅固定サイトページの場合は変換単語の文字数や文字コードを文字化けしにくい多言語対応型コードのUTF-8にするなどの課題もありますので、事前に翻訳後の表示デザインを考える必要があります。
直前のページに戻るボタンの設置
直前に見ていたページに戻るには、通常ツールバーのボタンをクリックしますが、簡単なJavaScriptを使用して、これと同等の動作が可能です。
history.back()をhistory.go(
-1)に変更すると、前ページの表示を指定できます。
折りたたみ式の「続きを読む」ボタンの設置
【javascript作成例】
javascriptは</head>の前に記述します。「続きを読む」部分以下のHTMLはソースを表示してください。
<script type="text/javascript">
function showMore(id,link){
if(document.getElementById){
if(document.getElementById('more' + id).style.display){
document.getElementById('more' + id).style.display='block';
document.getElementById('show' + id).style.display='none';
document.getElementById('hide' + id).style.display='block';
} else {
document.location.href=link;
return true;
}
} else {
document.location.href=link;
return true;
}
}
function hideMore(id){
if(document.getElementById){
document.getElementById('more' + id).style.display='none';
document.getElementById('show' + id).style.display='block';
document.getElementById('hide' + id).style.display='none';
}
}
</script> |
設置例を見たい方は下の「続きを読む」をクリックしてください。
「続きを読む」
コンテンツとなるこの部分は見えませんが、展開すると見えるようになります。ただし、ページに見えなくても一緒にこの部分を読み込んでしまうので、あまり多くのコンテンツを隠すと読み込み時に時間がかかるようになります。
「続きを閉じる」
印刷ボタンの設置
ボタンをクリックすると、印刷用ダイアログが表示され、ページ印刷を開始するJavaScriptですが、FAX注文書のPDFファイルを印刷するのに利用します。
空白文字の使用
余白の調整には、スタイルシートのmarginプロパティやpaddingプロパティを使うのが一般的ですが、特に空白文字を挿入し、文字間のバランスをとることがあります。この場合はスペースキーで連続して挿入しても1つの半角スペースと解釈され、1文字分の空白しか表示されません。
強制的に半角英数の空白文字を連続挿入する場合は「 」を利用します。この他にも「 」、「 」、「 」などがあります。空白文字を含め直接HTMLに記述できない記号を実体参照文字と言いますが、代表的なものに「<」、「>」、「"」がよく使用されます。
サイト内検索ツールの設置
サイト内のコンテンツや商品点数が多く、サイトページが多数に渡る場合はサイト内検索を設置すれば、お客様の利便性が高まります。本格的なサイト内検索ツールは通常データベースを設置しますが、利用サーバーに負担がかかるので、サイト上の無料ツールを設置するのが簡単です。
例えば、Googleのフリー検索にベーシック版とカスタム版がありますが、フリー検索は各版ウェブ検索のみとウェブ検索＋サイト内検索の両機能が利用できます。次のソース例はサイト内の全ページを対象としたKeyWord検索と同様に表示されます。
■Google.comのサイト内検索の改造例
<form action="http://www.google.com/search">
<input type="hidden" value="http://2tails.net/" name="as_sitesearch" />
<input type="hidden" name="ie" value="Shift_JIS" />
<input type="hidden" name="oe" value="Shift_JIS" />
<input type="text" name="q" size="31"
maxlength="256" value=" " />
<input type="submit" name="btnG" value="サイト内キーワード検索" />
</form> |
■CGIを利用したサイト内検索の改造例
【CGIファイル(
abc.cgi)】
#!/usr/local/bin/perl
#google.comサイト内検索
$| = 1;
$q = $ENV{QUERY_STRING};
$q = join('', grep(/^q=/, split(/&/, $q)));
$q =~ s/^q=//;
print "Location: http://www.google.com/search?
q=site:2tails.net+$q&hl=ja&lr=lang_ja\n\n"; |
【HTMLファイル】
| <form action="http://2tails.net/***/abc.cgi" method="get"> <input type="text" maxlength="30"
name="q" /> <input type="submit" value="サイト内検索"
/></form> |
Googleの検索ロボット巡回後に検索の対象となりますが、HTMLソースをコピー＆ペーストし、赤字部分を変更すると、このまま利用できる反面、最初はindex.html以外が登録されにくいようです。
また、ウェブ検索、サイト内検索はそれぞれ4スタイル、マルチ検索は2スタイルが選択できるYahoo!検索窓もHTMLソースのコピー＆ペーストで設置できます。
■Yahoo!検索のサイト内検索の改造例
<!-- Begin Yahoo Search Form -->
<div style="font-size:12pt;text-align:center;border:none;">
<form method="get" action="http://search.yahoo.co.jp/search"
target="_blank">
<a href="http://www.yahoo.co.jp" target="_blank"><img src="http://i.yimg.jp/images/search/guide/searchbox/080318/
ysearch_logo_85_22.gif" width="82" height="22" alt="Yahoo! 検索"
style="border-style : none;" /></a>
<input type="text" name="p" value=" " size="18" maxlength="18" /><br />
<input name="vs" type="hidden" value="http://2tails.net/" />
<input type="hidden" name="fr" value="ysin" />
<input type="hidden" name="ei" value="UTF-8" />
<input type="submit" title="Powered by Yahoo! JAPAN"
value="サイト内検索"
style="margin-top:5px;" /></form>
<img src="http://custom.search.yahoo.co.jp/images/window/
006c75a92ba244c6b4cbe2709aa17d7b.gif" alt="" width="1"
height="1" /></div>
<!-- End Yahoo! Search Form --> |
その他、更新頻度が高い500ページ以下のページであれば、検索毎にサイト内の一部ディレクトリ階層を除外するCGIスクリプトの検索エンジンツールがあります。
