プログラミング

【お正月】コピペで簡単!! はてなブログでおみくじを3分で作る方法!!

f:id:McG:20170411094550j:plain

みなさん,あけましておめでとうございます!!

今年もどうぞよろしくお願いいたします.

新年ということで,おみくじです!!

シェアボタン付きです!!

あなたの運勢「なに吉」?


さて,このおみくじ,誰でも簡単にコピペだけではてなブログにおみくじを設置できます!!

おみくじ作ったら結果をTwitterでシェアしたくもなると思うので宣伝にもなるはず!!

おみくじ作成手順

それでは,実際におみくじの作成手順を紹介します!!

手順1. 編集方法の変更

まず,はてなブログの記事作成画面から,編集方法でMarkdown記法を選択します.

f:id:McG:20170101003324p:plain

見たままモードなどだと,linkタグが消えてしまうことがあるようで…

Markdownモードが安心です.

手順2. コードのコピペ

以下のコードをコピペします.

<link rel="stylesheet" href="http://yukisako.github.io/css/newyear.css" type="text/css" />
<div class="omikuji">
<div id="result"></div>
<div id="btn">あなたの運勢は?</div>
<script>
      (function(){
        document.getElementById('btn').addEventListener('click' ,function() {
          var omikuji = ["大大吉", "大吉", "小吉", "中吉", "末吉", "諭吉", "凶吉"]
          var result = Math.floor(Math.random() * omikuji.length);
          document.getElementById('result').innerHTML = omikuji[result];
        });
        document.getElementById('btn').addEventListener('mousedown', function(){
          this.className = 'pushed';
        });
        document.getElementById('btn').addEventListener('mouseup', function(){
          this.className = '';
        });
      })();
    </script>
</div>
<div class="result">
<input type="button" id="post" value="結果をTwitterで投稿する"></input>
<script>
      $("#post").on("click",function(){
        if (document.getElementById('result').innerHTML == "?"){
            alert("占いが済んでいません")
          } else {
          var url = document.location.href;
          var str = "ブログ占いをしました!! 今年の運勢は" + document.getElementById('result').innerHTML+ "です!! %23ブログ占い from @yuki_99_s";
          url = "http://twitter.com/share?url="+escape(url)+"&text="+str;
          window.open(url,"_blank","width=600,height=300");
          }
        });
    </script>
</div>

手順3. 内容の変更

これでもう占いは完成しているのですが,カスタマイズしたいですよね!!

上のコードの, <div id="btn">あなたの運勢は?</div>の部分を変えると,おみくじを引くボタン部分が変わります.

f:id:McG:20170101003835p:plain

そして,var omikuji = ["大大吉", "大吉", "小吉", "中吉", "末吉", "諭吉", "凶吉"]の部分でくじ引き結果のカスタマイズが出来ます.

ダブルクオーテーションでくじ引きの結果にしたい文字を囲み,それをコンマ区切りで羅列するとおみくじの中身を自由自在に作れます.

例えば,var omikuji = ["大吉", "小吉"] とすれば,「大吉」か「小吉」のどちらかしかでないおみくじになります.

そして,最後,ツイート内容をカスタマイズしましょう!!

var str = "ブログ占いをしました!! 今年の運勢は" + document.getElementById('result').innerHTML + "です!! %23ブログ占い from @yuki_99_s";の部分を変更すると,ツイートの内容をカスタマイズできます.

f:id:McG:20170101004343p:plain

document.getElementById('result').innerHTMLのところにおみくじの結果が入ります.

%23とは,ハッシュタグの記号になります.

コードの意味を詳しく知りたい方は…

これは,ドットインストールのJavaScriptでおみくじを作ろうをはてなブログ用に変更して,ツイートボタンを実装したものです.

なので,2017年はプログラミングを勉強するぞ!!という方は一回見てみると面白いかもしれません.

プログラミング始めたくらいの頃に作ったやつです.楽しかったな.

まとめ

いかがだったでしょうか!!

15分程度で作ったので,あまりきれいなコードではありませんが,少しネタにはなるかと思います!!

2017年もどうぞよろしくお願いいたします.

お正月,風邪に気をつけて楽しんでください!

公式LINEに登録してビジネスを学ぼう
無料LINEマガジンへの登録で、5つの豪華特典をプレゼント!
  1. 日本一わかりやすい「経済的自立を果たす人生攻略の10ステップ」(33分23秒)
  2. 見るだけで売上3倍は確実。「時給10円から年商10億」に至るまでの全ての道のり(39分15秒)
  3. 有料講演会の内容を公開。最短最速で0→1を立ち上げる起業術(1時間08分35秒)
  4. 起業初心者へ向けた即金で10万円を稼ぐ具体マニュアル(PDF24ページ)
  5. 資本主義社会においてお金持ちになる5つのルール(17分36秒)
その他、有益なコラムを完全無料で閲覧し放題!
\豪華特典を今すぐゲット/