webマスコット
作成テク

トクトク編
[2003/06/18版]


#1. はじめに
 トクトクでは、先日の規約改定により“「ハーボット」禁止”のお触れが出ました。理由は不詳ですが、恐らくトクトクのサーバーに対して不当に負荷を与えていると思われる他社外部サービスに挙げられたもののうちの1つが「ハーボット」だったようです。
※補足 その後ハーボットはSo−netとの提携により事実上解禁されました。
 また、他社外部サービスではいくつかブラックリスト入りしているものがあり。念のため規約をチェック
 あなたのトクトクページ内で「ポストハーボット」(またはハーボットの対抗株)となるべきマスコットをお探しの方は、次を是非チェックしてください。

#2. webマスコットとは
 webマスコットは、自分のHPに「マスコット」を設置するためのWindows用の開発ツールです。MACユーザーの方は、WINユーザーの友人に頼んで作ってもらいましょう(^−^)
 webマスコットのファイルは、HTML文書に組み込まれたjavaScript(Ver 0.3220.2以降はCSSも併用)というプログラムで書かれており、ファイルをブラウザで実行することによって色々なことが実現できるようになっています。
 マスコットにしたいキャラは、女性はもちろん男性でも動物でもロボットでも構いません。キャラの画像は先に作っておいたほうが良いでしょう。時間のない人は後から作っても構いませんが・・・(核爆)
 ソフトの最新版は、webマスコット開発ツールの作者のサイト「めぐみちゃんの休日」にて入手してください。
 すでにwebマスコットをお持ちの場合は、次へ進んで問題点などをお読みください。
 その他詳細は「めぐみちゃんの休日」に書かれておりますので、制作の際に参考にしてください。

#3. レイアウトが崩れる問題について
 トクトク(無料・通常版)ユーザーのページでは、広告が自動挿入されることになっており、できあがったwebマスコット(HTML)ファイルを改造せずにそのままアップロードした場合、javaScript(広告自動貼付にもjavaScriptを使用しているらしい)やCSSの影響もあってか、広告の上にwebマスコットが重なる状態となり、バナー部分の一部が隠れる不都合が生じる現象が起きます。また、javaScript関連のエラーが起きる場合もあるようです。

#4 . ソフトのインストール
 この作戦を遂行するには、perl(CGI・SSI実行に必要な言語)ソフトWebサーバーソフト、さらにwebマスコットの開発ツールインストールされていることが条件となります。未インストールの方は、これらのソフトをインストールしてください。また、webマスコットの開発ツールインストールされていない場合は、「めぐみちゃんの休日」にてDL・インストールしてください。Windows(XP・2000の場合)で管理者権限を持っていないユーザーの方は、事前に管理者権限を持った人と相談してください。(NT/3.1は動作しないと思います)
 ここでperlソフトWebサーバーソフトを使う必要があるのは、「CGI・SSIの実験はローカルでするように」との記述(トクトクのサーバーを実験台として使うことの禁止)がトクトクの規約にあるためです。
 インストールが完了したら、次へ進みます。

#5. マスコット作成作業
 マスコット本体を作成する作業です。詳しい作り方は、ソフトのヘルプを参照するか「めぐみちゃんの休日」のサイト内で知りたい情報を探してください。出来上がったら、念のためこのファイルを他の場所にコピーしてください。(ミスったときのバックアップに使用)

#6. マスコットのソース編集
 出来上がったファイルは、ひとまずテキストエディッタ(WIN=「メモ帳」など、MAC=「SympleText」など)で開いてみましょう。
 すると、マスコットの中身はこんな感じとなっています。(だいぶ大まかですが)webマスコットファイルの構造を理解できたら、コピー&ペースト(以降、コピペ)作業に入ります。

<HTML>
<HEAD>ここはCSSやjavaScript(webマスコットの命)などが書かれている部分</HEAD>
<BODY>(属性は割愛)
ここはマスコット本体が(ブラウザで)表示される部分のタグ
</BODY></HTML>


#7. SSI版マスコット本体ファイルの作成
 テキストエディッタでファイルを新規作成し、とにかく下記のソースをコピペしましょう。
 1番上の行はperlのパスです。perlのパスはこちらで確認できます。
 続いて上側の表の赤い字の部分をコピーし、下側の表を参考にして、赤い字で書かれた文字列に挟まれた部分を探して、そちらにペーストします。CSSやjavaScript、BODYタグ内の属性設定は、#9で使用します。

#!/usr/bin/perl

print<<"HTML";

ここにペースト

HTML


#8. SSI版マスコット本体ファイルの保存
 保存するファイル名は、とりあえず「[自分のマスコットの名前].pl」とします。

#9. SHTMLファイルの作成
 テキストエディッタでファイルを新規作成し、とにかく下記のソースをコピペしましょう。
 DIVタグのスタイル指定で上下に空白(下線部のところ)を設定しているのは、レイアウトやjavaScriptエラーに関する問題を回避するためです。バナー広告が重なる場合は、下線部の数値を調節して、マスコットが広告バナーと重ならないようにください。

<HTML>
<HEAD><TITLE>Myマスコット</TITLE><META content="text/html; charset=shift_jis" http-equiv=Content-Type></HEAD>
<BODY><!--属性は割愛-->
<DIV ALIGN=CENTER STYLE="padding-top:15px;padding-bottom:15px;padding-left:20px;padding-right:20px;"></DIV><!--上部の広告に重ならないようにするためのレイアウト-->
<table>
<!--#exec cmd="./[自分のマスコットファイル名].pl"--><!--ここがマスコット本体を表示させる部分-->
</table>
<DIV ALIGN=CENTER STYLE="padding-top:768px;padding-bottom:15px;padding-left:20px;padding-right:20px;"><!--#config timefmt="%Y年%m月%d日%H時%M分"--><!--#flastmod file="./[マスコットのファイル名].shtml"-->更新<hr></DIV><!--下部の広告に重ならないようにするためのレイアウト--></BODY>
</HTML>


#10. 1行SSI
 どうせSHTMLにするなら、1行SSIも入れてみましょう。
 とりあえず、以下の命令文を加えてみましょう。
<!--#config timefmt="%Y年%m月%d日%H時%M分"--><!--#flastmod file="./[マスコットのファイル名].shtml"-->更新
 位置調節する場合は、命令文の上にBRタグやPREタグを適宜入れてみてください。

#11. ファイルの保存(SHTML)
 保存するファイル名は、とりあえず「[自分のマスコットの名前].shtml」(ファイルの拡張子は.shtml以外不可)とします。

#12. ローカルでの動作確認
 サーバーソフトを起ち上げて、「[自分のマスコットの名前].shtml」がある場所のURL(http://localhost/[自分のマスコットの名前].shtml)をアドレスバーに入力します。ここで特にエラーがなければ動作完了です。

#13. アップロード
 動作確認が完了したら、FTPでファイルをアップロードします。
 拡張子「.pl」のパーミッションは、700とします。(.shtml変更不要

#14. サーバー上での最終確認
 サーバーにアップした「[自分のマスコットの名前].shtml」の場所のURL<http://www(またはpopup)*.tok2.com/home*/[自分のアカウント名]/[自分のマスコットの名前].shtml>(*は半角数字または何もなし。サブディレクトリに「[自分のマスコットの名前].shtml」がある場合は、アカウント名の後ろにその名前を半角英数字で入力)をアドレスバーに入力します。
 トクトクのサーバー上で特に不都合(バナー広告がマスコットと重なったりjavaScriptやperl関連のエラー)がなければ、このファイルへのリンクを(トップページなどから)貼って、そのページをアップしてください。エラーが発生した場合は、一旦サーバーから削除してローカルで原因を追求してください。バナーと重なる場合は、ローカルでマスコットの表示位置を調節して再アップロードしてください。

<備考>ポップアップ(タグ・サーバー)のユーザー(移行予定者含む)の方へ
 トクトクのユーザーページ(自分の領域)においてフレームを使っている方は、ポップアップの利用も検討されている(あるいは既に移行済)方もいると思います。
 また、通常サーバーのユーザーの中には、無謀にも上中下3段にしてしまおうかといる考えている方もいるだろうと思いますが、この場合、通常は肝心なマスコット本体部分のフレーム面積が一番大きく、しかも自動挿入広告上下分割不可能らしいので、結局通常サーバーのユーザーの方はフレーム分割にする意味なしです。(オプション代払って「バナーレスサービス」を受けたり、トクトクグループの他のサービス[有料]へ移行するつもりなら話は別ですが・・・。)
 無料でトクトクのサービスを受け続ける場合、webマスコット導入の際はバナー自動貼付によって起きる問題への対策が必要です。(念のため忠告しますが、ダミーフレームメインのページへのバナー非表示は規約にある通り禁止です)
<あとがき>
 まだ完全版ではありませんが、あなたのwebマスコット作りにこのページが役に立っていただけると幸いです。

2003年3月 ねこまほ賢




BACK

by ねこまほ賢 2003 






そろそろ結婚適齢期??? あなたの悩み解決します 生命保険の切り替えはココ
[PR] | 店舗設計韓国食材債務整理川越蒲田古河代官山ESTA 申請 日本語中国SEO対策消費者金融車 買取テンプレート沖縄旅行免許合宿二輪引越しプレゼントゴルフ会員権留学レーシックマッサージFXアフィリエイトFXホームページ制作デイトレードハワイ旅行タイバンコクハワイ レンタカーベスト ハワイ ホテル レーツバリ島Hawaii hotelsHawaii Activitiesbhhrハワイホテルテキスト広告
【運営会社「パラダイムシフト」サービス】 ハワイ現地オプショナルツアーリラックマ) - ビジネスクラス航空券 - 格安航空券(1) - 格安航空券(2) - 海外ホテル - 韓国旅行 - タイムシェア - ホテル 予約
無料ホームページ - 携帯ホームページ - 無料ホームページ作成 - レンタルサーバー - ブログ - ヴィラ - ハワイ コンドミニアム - バリ島 ホテル - プーケット ホテル - レップチェッカー - 旅行情報 - 格安国際電話 - ホノルルマラソン - サイトパトロール - 誹謗中傷 - 宿泊料金比較 - ノースウエスト航空 マイル - クチコミ