読者です 読者をやめる 読者になる 読者になる

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

プログラミング
Written By：Yuki Sako あとで読む

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

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

新年ということで，おみくじを作ってみました!!

10分程度で作ったのでかなり雑ですがw

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

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

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

おみくじ作ったら結果を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とは，ハッシュタグの記号になります．

まとめ

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

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

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

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

© 2016 Yuki Sako.