SITE TOP  王様のルーレットリンク  作り方に関する解説・ソースのダウンロード

ルーレットリンクの作り方に関する解説・ソースのダウンロード

王様のルーレットリンク はJavaScriptを使って作成されています。ただし、オリジナルのルーレットリンクを公開するために、JavaScriptの知識は必要としません。ソースをダウンロードして、リンク先等、いくつかの設定項目を編集、あとはWebサーバにアップロードするだけで、皆さまのホームページでも簡単にオリジナルのリンクルーレットが公開できます。

ここでは一番簡単な作成方法を説明していますが、皆様のアイデアとセンスで素晴らしいルーレットリンクに仕上げて頂ければと思います。なお、JavaScriptを記述できる方はソースに変更を加えて頂いて構いませんが、変更したJavaScriptに関してのお問い合わせはお受けできないことをご了承下さい。

以下の手順に従って、準備を進めます。Windows環境において作業されることを前提としています。また、公開にあたっては、著作権表記や「王様のルーレットリンク」公式ページへのリンク等、いくつかの条件が付くことをご理解下さい。もし分かりにくい点がありましたら、遠慮なく作者までメールでお問い合わせ下さい。


 ファイルのダウンロード はじめに、必要になるファイルをダウンロードして下さい。ZIP形式で圧縮されていますので、解凍して適当なフォルダに保存します。

  王様バージョン ダウンロード (動作サンプル画面
  シンプル画面バージョン ダウンロード (動作サンプル画面
 タイトルの編集 ページのタイトルは自由に変更してもらって構いません。ファイル「index.html」を開き、下記の<title>タグ内を変更するだけです。「王様のルーレットリンク」という名前も必ず付けて頂く必要はありません。

(index.html   3行目)
<title>王様のルーレットリンク</title>
 リンク先の編集 1 ルーレットリンクのリンク先になる14個のURLを設定します。初期値として以下のURLが設定されていますので、""の中を変更して下さい。ブラウザのアドレス欄からコピーする等して、「http://」で始まる正確なURLを設定する必要があります。

(index.html   31 - 44行目)
linkto[1]="http://www.yahoo.co.jp/";
linkto[2]="http://www.google.co.jp/";
linkto[3]="http://www.goo.ne.jp/"; // 左下
linkto[4]="http://www.lycos.co.jp/";
linkto[5]="http://www.fresheye.com/";
linkto[6]="http://www.infoseek.co.jp/"; // 左上
linkto[7]="http://www.excite.co.jp/";
linkto[8]="http://hesonogoma.com/";
linkto[9]="http://search.msn.co.jp/";
linkto[10]="http://www.isize.com/"; // 右上
linkto[11]="http://www.naver.co.jp/";
linkto[12]="http://dmoz.org/World/Japanese/";
linkto[13]="http://joyjoy.com/JOY.html"; // 右下
linkto[14]="http://pcweb.mycom.co.jp/search/";
 リンク先の編集 2 ルーレットリンクのリンク先の一覧をページ内に記述します。「index.html」には雛形を用意してありますが、この部分は自由に変更して頂いて構いません。
 HTMLの編集 HTMLは自由に変更してもらって構いません。背景色やリンク先の紹介等、訪問者の方に楽しんでもらえるような工夫をしてみて下さい。

著作権表記として「もりばんのゲーム工房」へのリンクをお願いしています。下記の部分は削除なさらないようお願い致します。

(index.html   169行目)
JavaScript by <a href="http://hesonogoma.com/">
もりばんのゲーム工房</a><br>
<a href="http://hesonogoma.com/">
<img src="banner.gif" border ="0" alt="もりばんのゲーム工房"></a>
 公開するURLの変更 アップロードするWebサーバのURLを設定します。初期値として公式ページのURLが設定されていますので、実際にルーレットリンクを公開されるURLに変更して下さい。

(index.html   15行目)
var yoururl="http://hesonogoma.com/blinks/";
 調整用変数の変更 ソース内の説明を参考にして調整用変数を変更します。「index.html」に画像を追加しない場合は、この調整用変数は変更しなくても問題ありません。

(index.html   16 - 23行目)
var im=0
var speed=50
var stoper=20
// 上記の変数は調整用です。下記を参考にして変更して下さい
// yoururl はアップロードするWebサーバのURL
// im はルーレットまでに張り付けた画像( <img src=""> )の数
// speed はルーレットの回転スピード - 値を小さくすれば速くなり、大きくすれば遅くなります
// stoper はストップボタンが押されてから停止するまでにルーレットが動く数 - 0以上
 ファイルのアップロード Webサーバに全てのファイルをアップロードしたら、あなただけのルーレットリンクの完成です。念のためにアップロード後に動作確認を行ってみて下さい。利用しているサーバによっては、HTMLに広告画像を自動付加するものもあり、この場合は正常に動作しないため注意が必要です。(参考:調整用変数の変更)

無事に動作したでしょうか?うまく動作しない場合は、お使いのブラウザ(バージョン含む)と動作状況を明記してメールでご連絡下さい。できる範囲でサポートさせて頂きます。
(返信には少しお時間を頂くかも知れません。予め御了承下さい。)

Web上で公開されましたら、是非ぜひ作者までご一報下さい。ホームページを拝見するととも、「王様のルーレットリンク」公式ページからリンクさせて頂きます。