TQ

トガキューの使い方

· 作業の流れ

トガキューを貴方のページに貼り込むために、必要な手順を説明します。

　１：どの機能を使うかを検討して…（とりあえずしなくてもオーケー）
　２：ソースファイル（HTML ファイル）へ JavaScript を追加。
　３：設定ページをダウンロードして自分のサイトにアップロード、
　４：トップページ等に設定ページへのリンクを貼り付けて、
　５：トガキュー・ポータルへ参加表明。

という順になります。
５は任意ですが、コレを書いている時点で登録のアリナシ両方で80サイト以上がトガキューを採用しています。ぜひポータルへ登録して、貴方のステキなページをアピールしてください。

ダウンロードする設定ページはここにあります。

http://www.vjcatkick.com/togaq/tq_prefs.html

Windowsの場合はリンクを右クリック、Macの場合は ctrlキーを押しながらクリックすれば、メニューが出ますので「対象を保存」するような項目を選択すればローカルディスクに保存することが出来ます。
保存後、そのまま自分のサイトへアップロードしてください。

· JavaScript!

ホームページに加工をするわけですから、必要最低限でも HTML と JavaScript を使います。こればっかりはどうしようもないので、いくつか呼び出し方を用意しました。まずは最初に、最も簡単でお手軽な方法を用いて、ブランクのページに貼ってみることにします。

· 最低限必要なもの

最初に「このページでトガキューを使うよ」という宣言をしてやらないと話がはじまりません。トガキューを貼りこみたいページのHTMLをエディタ等で開き、
<head>～</head>
の間（ない場合は、下記のように<head>そのものも追加する）に下のように書きます。

<html>
<head>
..... ←他にも何か書いてあるかも
↓↓ここから↓↓
<script type="text/javascript" src="http://www.remus.dti.ne.jp/~sugiyama/headpic/getheadbanner.js">
</script>
↑↑ここまでを貼り付ける↑↑
</head>

これでいつでもトガキューを呼び出す準備が出来ました。
次は、呼び出したい場所に次のように書きます。

<body>
.....
↓↓ここから↓↓
<script type="text/javascript">
instant_togaq( 0, 0, 0, 0, "" );
</script>
↑↑ここまで↑↑
.....
</body>

これだけで、ページを呼び出す毎にランダムな画像を表示するトガキューを貼り込む作業は終わりです。
実際に貼り付けたサンプルがこちらにありますので、試してみてください。

追記：さらに簡単になりました。詳細はこちらにあります。

この説明はとても簡単でお手軽な方法なので、細かく制御したり、特殊な場所へ貼り込んだりするには向きません。細かく貼りこみ方法を指定する場合には、もう少し HTML と JavaScript の知識が必要になります。とはいえ、実際には、そのほとんどがコピーしてペーストするだけなので、サンプルを移したり、うまく動いている人に尋ねてみたりするのもいいでしょう。

· 細かく制御したい…

単に画像を貼り込むだけじゃなく、特殊な場所に貼りたいとか、自分のサイトのロゴを乗せたいとか、色々な要望にお答え（？）する為に、インターフェースを用意してあります。少し勉強しないと難しいかも知れませんが、諸先輩方が上手に貼り込む手法を解説されていますので、そちらも一緒に参照されるとよいでしょう。

· トガキューの基本仕様

トガキューの関数は基本的に全て共通で、次のようになっています。

　togaq( arg1, arg2, arg3 ... );

これはどういうことかと言うと、togaq() という JavaScript で作られた関数を、arg1, arg2, arg3 の３つの引数を指定して呼び出し、その結果として、表示するファイルへの URL が返って来る、というものです。
なんだか、ここまで読むととっても難しいそうですが、簡単に言えば、togaq(.....); と書けば、それがそのままファイルの URL として扱われる、ということです。

ここを読んでいる人は、そのほとんどの人が <img> タグを扱ったことがあると思います。あれで src="...." とイメージファイルそのもの名前や場所を指定したりするのと全く同じに扱うことが出来る、ということになります。例えば：

と書けば、 <img> タグの場所に sample.jpg というファイルが表示されますよね。また、別の指定の方法として、URL で書く、なんてこともよくやる手段です。

で、先ほどの togaq() という関数が返してくる（それに置き換えることが出来る）値として、上記の例を例えると：

　"http://www.vjcatkick.com/sample.jpg"

これが返って来ることになります（実際には貼り込む画像を保存しているクリエーターサイトの URL とファイル名が返って来る）。

じゃぁ、一体全体具体的にはどうすればいいのよ？となりますよね。ここまで読んだだけでやろうとすると、きっとこんな風に書いてしまって、「う…動かないんですけど…」となりそうです（笑）。

ハイ、残念でした。これでは動きません。え？「" "」がないから？違います。
これは、<img src="..." > は HTML、togaq() は JavaScript と、違う言語が混在しているからです。全く英語がわからない人に、日本語英語混在の文章を見せても意味がとれないのと同じです。つまり、コンピュータにはどちらかに統一してやらなければ理解されない、というルールがあるためなんです。そこで、主たる言語である HTML が理解出来るような形式に直してやります。

　<script type="text/javascript">　←JavaScriptを使う宣言
　　document.write( '<img src="' ); ←img タグ前半分
　　document.write( togaq() ); ←トガキュー関数（ JavaScript ）
　　document.write( '" border=0 >' ); ←img タグ後半分
　</script>　←JavaScriptはここまでという意味

このように書けば、HTML からも理解出来ます。imgタグが分かれてしまっているのは、ここからここまでは HTML を直接書きますよ、ここは JavaScript ですよとシステムに理解させるため、と考えてください。

上の例を実際に書くと次のようになります（サイズは縮小しています）。

リロードボタンを押すと、絵が切り替わっていくのがわかると思います。
これで最もシンプルな JavaScript によるトガキューの貼り方が理解出来た…と思います。次は、実例を示しながらサイトのロゴの入れ方とか、もう少しコピペに有効に説明（笑）しましょう。

· 透過GIFを使ったロゴの入れ方

最初は、作りやすい透過GIFファイルをロゴとしてトガキュー画像の上に貼り込む方法です。この方法がもっとも現実的でかつシンプルな方法となります。

<script type="text/javascript" src="http://www.remus.dti.ne.jp/~sugiyama/headpic/getheadbanner.js">
</script>
↑↑トガキューを使う宣言

<script type="text/javascript">
</script>
↑↑テーブルの背景としてトガキューをセットする

実際にGIFファイルでロゴを作った場合、バナーのように中に色がついているものならそう違和感はないのですが、このサイトのように文字だけ浮かせたい、となるとpngイメージを使った別のテクニックが必要になります。

pngの場合、Afternoon Cafe 氏による PNG 透過方法がお勧めです。WindowsのIEだとpngは透過してくれないという仕様なため、この方法をとらざるを得ません。

具体的な貼り方はこちら ( getHeaderPicFileName() の部分を togaq() に置き換えて使ってください)。
pngファイルの作り方はこちら。

· トガキューの関数仕様

先の解説でテーブルを使った貼りこみ方はある程度飲み込めたと思います。気がつかれたと思いますが、上記の例では全て togaq() という呼び出し方をしています。この呼び出し方だと、オプションがひとつもついていないので、必ず「毎回ランダム」という設定（最も基本的なトガキュー）になってしまいます。違う設定で動作させたい場合、下のオプションを指定してやってください。機能の説明のところに、サンプルの記述方法を記載しますので、そちらもあわせてご覧下さい。

togaq( cid, sid, fid )

cid: コマンド
sid: サイト（ユーザー）ID
fid: ファイルID

cid はトガキューの表示方法を指定するコマンドを与えます。コマンドリストを参照に数字で指定してください。０で完全なランダムになります。togaqtypeで１を選んだ場合、このコマンドは必須になります。コマンド（機能番号）の一覧はここにあります。

sid はサイトID（ユーザーID）を指定します（それを必要とするコマンドのみ）。トガキューの画像提供者毎にIDが振られています（ID表参照）ので、そちらを参照して、数字で与えます。

fid はファイルIDを指定します。個々の画像には番号が振られていますので、一覧表で番号を調べて数字で指定します。

v2.0 までは、各機能を使うためには個別に関数名を指定してやらなければなりませんでした。機能の数が増えると、それに応じて関数が増えるので、一度設定したものを切り替えるのには手間がかかります。この togaqfunc() を呼び出せば引数の変更のみで、全ての機能を扱うことが出来ます。また、新たに関数が増えた場合でも、オンラインになるのを待つ必要はもうありません。先に指定しておけば、オンラインになった時点で新しい機能が自動的に使用されます。

· この関数は今までの getHeaderPicFileName() のように、選ばれた画像へのパス名を返します。getHeaderPicFileName() 等と置き換えて使用してください。
· 引数は不要なものは省略することが出来ます（機能番号０番の時に、サイトID、ファイルIDは省略可能）が、ブラウザによっては正しく動作しないことがあります。その場合には、「０」を指定してください。
例：
　togaq( 0, 0, 0 );

instant_togaq( togaqtype, cid, sid, fid, logo )

togaqtype: 使用するトガキューのタイプ。
cid: コマンド
sid: サイト（ユーザー）ID
fid: ファイルID
logo: 左上に表示するロゴファイルへのパス

togaqtype には、使用するトガキューのタイプを数字で指定します。０ならサイトオーナーが表示方法を、１ならユーザーが表示方法を選ぶトガキューになります。０を選んだ場合には、それ以降の cid や sid 等は全て無視されますので、０と "" で埋めて下さい（上記の最低限の呼び出し方参照）。

fid はファイルIDを指定します。個々の画像には番号が振られていますので、一覧表で番号を調べて数字で指定します。

logo はロゴファイルを格納しているパスをURL形式で指定します。ロゴファイルを表示したくない場合には空文字（""）を指定して下さい。

· この関数を呼び出すと、呼び出された場所に<table>タグで囲まれたトガキュー画像を書き出します。最も簡単な呼び出し方は下記の通りになります。
　instant_togaq( 0, 0, 0, 0, "" );

· コマンド（機能番号）一覧

コマンド（機能番号）の一覧はここにあります。

· v2.0 までのトガキューを採用していた場合

今回から、関数名の煩雑化を避ける為に、呼び出し関数を１つに限定しています。しかしながら、上位互換として今までの関数名は残しますので、必ずしも新しい関数名にすぐに修正しなければならないということはありません。ただ、今後新しい機能を追加する場合には、関数名ではなく、コマンドの番号で紹介しますので、時期を見て修正していただけると助かります。

具体的には、関数名の変更と、引数の設定ということになります。例えば：
　getHeaderPicFileName()
となっていた場所を全て
　togaq()
と書き換えることになります。その際に、以前付いていた関数名によって、オプションの値が変わります。機能一覧の方でオプションの指定の仕方を解説しますので、そちらもあわせてご覧下さい。