今日はJqueryで作った簡単な診断アプリにツイッターの機能追加ができることをまとめてみようと思います。
twitter
名前をボックスに打ち込み、診断ボタンを押すと結果がツイートできる機能です。
ツイートする、をポチれば↓
でコメントをツイートすることができます！
まずは診断アプリを作るのですがここは簡単にやります。
---------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charaset="UTF-8">
<title>キャラ診断</title>
<style>
body{text-align:center;}
</style>
</head>
<body>
<h1>キャラ診断</h1>
<p id="result"><input type="text"id="name"value=" "></p>
<p><input type="button"id="getResult" value ="診断！"></p>
<h2>診断結果</h2>
<p>こちらに結果が表示されます。</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script >
$(function(){
$("#getResult").click(function(){
var name =$("#name").val();
//console.log(name);
if(name ===" "){
alert("名前を入力してください！");
return;
}
//タイプの生成
var types =["勇者","魔法使い","戦士","王様","女王様"];
var type=types[Math.floor(Math.random()*types.length)];
var result= name + "さんは「"+ type + "」タイプです";
$("#result").text(result);
//キャラの生成
//タイプの生成
var characters =["賢い","勇敢な","怠惰な","美しい","とぼけた"];
var character=characters[Math.floor(Math.random()*characters.length)];
var result=name + "さんは「"+ character+ type + "」タイプです";
$("#result").text(result);
});
});
</script>
</body>
</html>
------------------------------------------------------------------------------------------------------------
で、この状態では、まだ診断結果が表示されるだけになります。ここからツイッターの機能を追加していきます。
1.まずはツイートのボタンを設置します。divタグで
<div id="tweet"></div>
これをpタグの下に追加します。
2.そしてツイッターのリンクをつけます。
var tweetLink=" "
$("#tweet").html(tweetLink);
そして" "の中にリンク先を追加していきます。
リンク先はツイッターのhttps://dev.twitter.com/こちらのtwitter for websiteという項目からweb intentsというところに飛びます。
さらにその中のtweet or reply to tweetをクリックすると、ツイッターを投稿するためのリンクがあるのでそれをコピペします。https://twitter.com/intent/tweet
これをリンク先に追加します。
var tweetLink="<a href ='https://twitter.com/intent/tweet' >ツイートする</a>";
$("#tweet").html(tweetLink);
そうするとツイート画面が出てきてツイート可能にはなるのですが、当初のアプリの診断結果ツイート内容が表示されません。
表示内容にテキストとハッシュタグをつけたいです。
その場合
var tweetLink="<a href ='https://twitter.com/intent/tweet?text=" +encodeURIComponent(result)+"&hashtags=test' target='_blank'>ツイートする</a>";
$("#tweet").html(tweetLink);
表示したいのはresultなのでかっこの中にはresult。またresultの前にはセキュリティ上よろしくない文字が含まれてる場合があるのでencodeURIComponentを追加します。
また、target='_blank'で、新しいウィンドウで開いてくれます。
-----------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang ="ja">
<head>
<meta charaset="UTF-8">
<title>キャラ診断</title>
<style>
body{text-align:center;}
</style>
</head>
<body>
<h1>キャラ診断</h1>
<p id="result"><input type="text"id="name"value=" "></p>
<p><input type="button"id="getResult" value ="診断！"></p>
<h2>診断結果</h2>
<p>こちらに結果が表示されます。</p>
<div id="tweet"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script >
$(function(){
$("#getResult").click(function(){
var name =$("#name").val();
//console.log(name);
if(name ===" "){
alert("名前を入力してください！");
return;
}
//タイプの生成
var types =["勇者","魔法使い","戦士","王様","女王様"];
var type=types[Math.floor(Math.random()*types.length)];
var result= name + "さんは「"+ type + "」タイプです";
$("#result").text(result);
//キャラの生成
//タイプの生成
var characters =["賢い","勇敢な","怠惰な","美しい","とぼけた"];
var character=characters[Math.floor(Math.random()*characters.length)];
var result=name + "さんは「"+ character+ type + "」タイプです";
$("#result").text(result);
//twitter link
var tweetLink="<a href ='https://twitter.com/intent/tweet?text=" +encodeURIComponent(result)+"&hashtags=test='_blank'>ツイートする</a>";
$("#tweet").html(tweetLink);
});
});
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------
はい、これで
こーんな感じで診断結果をツイッターが投稿できるようになります。
ハッシュタグは指定を別のものに変えてもいいし、追加してもいいです。
ツイッター連携するのってもっと難しいと思っていましたが意外と簡単でしたよね？？（と私は思うのですが）
もっといろんなアプリが作れるようになりたいです☆
にほんブログ村
