作成技術とツール

商用サイト構築にホームページ作成ソフトだけでは限界があります。デザイン以外の仕掛けやユーザビリティーに優れた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ソースの@マーク部分を&#64;に変更します。この代替表示法はサイトページのメルアド情報を収集するロボット対策になります。半角英数の@を全角英数の@で代替したり、アドレス自体を画像化する方法もありますが、これらはコピー&ペーストできないので表示用に利用します。
メルアド暗号化ツールのjavascriptはEmail Riddlerlufttooisなどで公開されています。また、アドレス表示が不要なCGIを利用したフォームメールはスパム対策と利便性から広く普及し、ネットショップの必須ツールになっています。

自動翻訳ツールで多言語対応サイトに変換する

在留外国人の登録者数215.2万人は都道府県人口全国16位の長野県217.3万人に匹敵し、中国語韓国語が過半を占めます。もちろん、在留外国人は消費者でもあるのですが、実情は日常会話に不自由なくても読み書きの苦手な人は多いようです。
お店のサイト全体を翻訳する無料ツールのガジェットをウェブページに設置すると、そのページの画像以外のテキスト部分が自動翻訳されるので、外国語を絞ったマーケティングが可能になります。
ガジェットのサイズやデザインは固定されますが、セレクトメニューで選択言語を絞ることもできます。一度選択すれば、以降に閲覧するウェブページすべてにこれらの効果が及びます。

  • Microsoft Translator Widget
    ウィジェットはウェブページの即時翻訳が可能で、ユーザーは翻訳サイトに移動しなくても、手動又は自動的に母国語での閲覧や複数言語で友人とのページ共有ができます。
  • Google翻訳ガジェット
    Googleのウェブサイト翻訳ツールをページに追記すると、タブ表示や自動表示、インライン表示などのオプションモードを利用して簡単に自動翻訳することができます。

 

インライン表示モードの設置例


サイトを作成する場合はファイルのアップロード又はウェブページ(Wikipedia? 、 knolなどの記事)のURL指定で翻訳サイトを作成できるGoogle翻訳者ツールキットがあります。
その他、横幅固定サイトページの場合は変換単語の文字数や文字コードを文字化けしにくい多言語対応型コードのUTF-8にするなどの課題もありますので、事前に翻訳後の表示デザインを考える必要があります。

直前のページに戻るボタンの設置

直前に見ていたページに戻るには、通常ツールバーのボタンをクリックしますが、簡単なJavaScriptを使用して、これと同等の動作が可能です。

[戻る] <a href=”javascript:history.back()”>[戻る]</a>
<input onclick=”javascript:history.back()”type=button value=”戻る”>

history.back()をhistory.go(-1)に変更すると、前ページの表示を指定できます。

折りたたみ式の「続きを読む」ボタンの設置

【javascript作成例】
javascriptは</head>の前に記述するか、jsファイルにしてリンクします。「続きを読む」部分以下は直接HTMLソースに記述します。
[リンク例]<script type=”text/javascript” src=”java/***.js”></script>

<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>

<!– ▼冒頭部分▼ –>
設置例をご覧になりたい方は下の「続きを読む」をクリックしてください。
<!– ▼冒頭部分▼ –>
ここは冒頭部分です。
更に詳細を見たい方は下の[続きを見る]をクリックしてください。
<!– ▼冒頭部分▼ –>
<IfArticleBodyMore>
<span class=”main-continues” id=<show<$ArticleId$>"> <a class="acontinues" href="<$ArticlePermalink$>" onclick="showMore('<$ArticleId$>','<$ArticlePermalink$>');return false;"> 続きを見る </a> </span> <div id="more<$ArticleId$>" style="display:none"> <!-- ▼続きの部分▼ --> このようにコンテンツとなる部分は見えませんが、展開すると見えるようになります。ただし、ページが見えなくても一緒にこの部分を読み込んでしまうので、多くのコンテンツを記述すると読み込みに時間がかかります。 <!-- ▲続きの部分▲ --> </div> <span class="main-continues" id="hide<$ArticleId$>" style="display:none"> <a class="acontinues" href="#<$ArticleId$>" onclick="hideMore('<$ArticleId$>');return true;"> 続きを閉じる </a> </span> </IfArticleBodyMore>

印刷ボタンの設置

ボタンをクリックすると、印刷用ダイアログが表示され、ページ印刷を開始するJavaScriptですが、FAX注文書のPDFファイルを印刷するのに利用します。

[印刷] <a href=”javascript:void(0)” onclick=”window.print(); return false”>[印刷]</a>
<input type=”button” value=”印刷” onclick=”window.print()”>

空白文字の使用

余白の調整には、スタイルシートのmarginプロパティやpaddingプロパティを使うのが一般的ですが、特に空白文字を挿入し、文字間のバランスをとることがあります。この場合はスペースキーで連続して挿入しても1つの半角スペースと解釈され、1文字分の空白しか表示されません。
強制的に半角英数の空白文字を連続挿入する場合は「&nbsp;」を利用します。この他にも「&ensp;」、「&emsp;」、「&thinsp;」などがあります。空白文字を含め直接HTMLに記述できない記号を実体参照文字と言いますが、代表的なものに「&lt;」、「&gt;」、「&quot;」がよく使用されます。

サイト内検索ツールの設置

サイト内のコンテンツや商品点数が多く、サイトページが多数に渡る場合はサイト内検索を設置すれば、お客様の利便性が高まります。本格的なサイト内検索ツールは通常データベースを設置しますが、利用サーバーに負担がかかるので、サイト上の無料ツールを設置するのが簡単です。
例えば、Googleのフリー検索にベーシック版とカスタム版がありますが、フリー検索は各版ウェブ検索のみとウェブ検索+サイト内検索の両機能が利用できます。次のソース例はサイト内の全ページを対象としたKeyWord検索と同様に表示されます。
■Google.comのサイト内検索の改造例

<form action=”http://www.google.com/search”>
<input type=”hidden” value=”http://cms.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>
検索サイトGoogle.comの表示例

■CGIを利用したサイト内検索の改造例
【CGIファイル(abc.cgi)】

#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:cms.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! 検索


■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://cms.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スクリプトの検索エンジンツールがあります。


■令和元年版カレンダー

2019年8月
     
 1234
567891011
12131415161718
19202122232425
262728293031  

■サイト内検索

■記事講読ランキング

■統計情報サイト

都道府県別統計
世界経済のネタ帳
■地方情報
地方公共団体情報システム機構
中国地域の中小企業支援施策
■ビジネス支援情報
exBuzzwords
ネット通販の構築支援別館
無料ビジネス相談会
1.対象者
☆起業をお考えの方
☆起業後間もない方
2.場所
広島市立中央図書館
3.開催日
☆毎月第2土曜12:00~17:00
4.1時間以内の予約制
☆先着順5名
5.申込先
中央図書館事業課
☆Tel:082-222-5542

■中小企業ビジネス支援サイト


Copy Protected by Chetan's WP-Copyprotect.