ヘルバ様の日常

テストを兼ねて色々試してみるブログです

menu 

おみくじを追加してみました

プログラミング JavaScript

知り合いが「おみくじをブログに仕込みたいんだけどうまくいかない」とのことで試してみました。

 

 

参考にさせていただいたのは「WEST MiRa」様のサイトです。

ありがとうございました＾＾

 

 

 サイトからダウンロードした「おみくじVer4」のソースを少しいじっています。

 

//Copyright (C) WEST MiRa http://www.west-mira.jp
	// おみくじメッセージ
	var fortuneSentence = new Array();
	fortuneSentence[0] = "[大吉]ヘルバ様のお墨付き";
	fortuneSentence[1] = "[中吉]何か良いことあるかもよ";
	fortuneSentence[2] = "[ 吉 ]平凡な日常";
	fortuneSentence[3] = "[小吉]余計なことはしない";
	fortuneSentence[4] = "[ 凶 ]大人しく過ごしましょ";
	fortuneSentence[5] = "[大凶]ヘルバ様もお手上げ";
	fortuneSentence[6] = "[中吉]何か良いことあるかもよ";
	fortuneSentence[7] = "[小吉]余計なことはしない";
	fortuneSentence[8] = "[ 凶 ]大人しく過ごしましょ";
	fortuneSentence[9] = "[ 吉 ]平凡な日常";
	// おみくじ画像
	var fortunePicture = new Array();
	fortunePicture[0] = "https://cdn-ak.f.st-hatena.com/images/fotolife/w/welcome_to_the_world/20200309/20200309231852.png";
	fortunePicture[1] = "https://cdn-ak.f.st-hatena.com/images/fotolife/w/welcome_to_the_world/20200309/20200309231820.png";
	fortunePicture[2] = "https://cdn-ak.f.st-hatena.com/images/fotolife/w/welcome_to_the_world/20200309/20200309231827.png";
	fortunePicture[3] = "https://cdn-ak.f.st-hatena.com/images/fotolife/w/welcome_to_the_world/20200309/20200309231843.png";
	fortunePicture[4] = "https://cdn-ak.f.st-hatena.com/images/fotolife/w/welcome_to_the_world/20200309/20200309231835.png";
	fortunePicture[5] = "https://cdn-ak.f.st-hatena.com/images/fotolife/w/welcome_to_the_world/20200309/20200309231900.png";
	fortunePicture[6] = "https://cdn-ak.f.st-hatena.com/images/fotolife/w/welcome_to_the_world/20200309/20200309231820.png";
	fortunePicture[7] = "https://cdn-ak.f.st-hatena.com/images/fotolife/w/welcome_to_the_world/20200309/20200309231843.png";
	fortunePicture[8] = "https://cdn-ak.f.st-hatena.com/images/fotolife/w/welcome_to_the_world/20200309/20200309231835.png";
	fortunePicture[9] = "https://cdn-ak.f.st-hatena.com/images/fotolife/w/welcome_to_the_world/20200309/20200309231827.png";
	// 初期画像
	var initPicture = "https://cdn-ak.f.st-hatena.com/images/fotolife/w/welcome_to_the_world/20200309/20200309233056.png";

	// 画像配列を生成
	var imageArray = new Array();
	for(i = 0;i<fortunePicture.length;i++) {
		imageArray[i] = new Image();
		imageArray[i].src = fortunePicture[i];
	}
	// おみくじ
	function doFortune() {
		var fortuneNo = Math.floor(Math.random() * 10);
		document.images["fortuneImage"].src = imageArray[fortuneNo].src;
		document.fortuneForm.fortuneMessage.value = fortuneSentence[fortuneNo];
	}
	// リセット
	function doReset() {
		document.fortuneForm.fortuneMessage.value = "";
		document.images["fortuneImage"].src = initPicture;
	}

 

※実際のソースは<script>～</script>で囲まれています。

 

 

onLoadイベントは発生しないので「img_load()」を削除しました。

 

 

下記を修正しています。

 

  • 関数名と変数名を自分好みに変更
  • 変数の宣言にvarを追加
  • 画像のURLを自サイトの画像に修正
  • おみくじの結果の文章を自サイト用に修正

 

この修正したソースをはてなブログの「設定」「詳細設定」「headに要素を追加」に<script>～</script>で囲んで追加しました。

 

 

念のため「JSCompress」でソースを圧縮して圧縮結果を貼り付けています。

 

 

おみくじの表示位置ですが、PCはサイドメニューにしました。(スマホは著作権の上です)

 

 

 「デザイン」「カスタマイズ」「サイドバー」「モジュールを追加」で「HTML」を選択して下記のHTMLを貼り付けます。

 

<div align="center">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/w/welcome_to_the_world/20200309/20200309233056.png" width="100%" alt="おみくじ" name="fortuneImage">
<form name="fortuneForm">
<textarea name="fortuneMessage" rows="1" cols="35" wrap="soft" style="border: 0;resize: none;" readonly></textarea><br>
<input type="button" value="おみくじ" onClick="doFortune();">
<input type="button" value="リセット" onClick="doReset();">
</form>
</div>

 

サイドメニューに表示させるのでbodyタグも削除しています。

 

 

2個目のimgタグも使用しないため削除しています。

 

 

imgタグの画像はJavaScriptの初期画像と同じ画像のURLを指定します。

 

 

軽く動作確認しましたが問題なさそうです。(同じ結果が続いた場合、見た目分からないですが…)

 

 

このおみくじはしばらく設置しておこうと思います。

 

 

ボタンが味気ないので気が向いたらCSSで装飾したいと思っています。