ネタサイコロ
今回は、「SSSAPIを使った会話のネタサイコロ」を作ってみたいと思います。
今年も残すところあとわずかとなり、年末は忘年会やら、新年会などで多くの人と集まる機会が増えますね
そんな中、頭を抱えるのが「何を話せばいいのか？」会話のネタが仕事の話などテンプレになりつつあるのではないかと思います。
そこで、今回は事前にネタを仕込み、会話の場で使うためにサイコロを作ろうと思います。
Step 1
はじめに、今回APIを作成するにあたった、「SSSAPI」を使用します。
GoogleスプレッドシートのURLだけでAPIを簡単に作成することができます。
詳しくは以下のリンクからご覧ください。
今回は、ざっと20個ほどネタを作成しました。
次に、Web上で動作させたいので、htmlを書いていきます。今回は.jsと.cssをまとめて書きます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会話のネタサイコロ</title>
<style>
.dice-output {
text-align: center;
}
#display {
background-image: linear-gradient(rgb(103, 220, 255), rgb(228, 255, 203));
font-size: 3rem;
width: auto;
height: auto;
text-align: center;
border-radius: 2em;
}
#output {
display: flex;
justify-content: space-around;
}
button {
width: 10em;
height: 5em;
}
body {
background:
linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background-size: 100px 100px;
background-color: #f05670;
}
</style>
</head>
<body>
<div class="dice-output">
<button class="dice-roll">サイコロを振る</button>
</div>
<div id="output"></div>
<script>
const diceRollBtn = document.querySelector(".dice-roll");
const outputDiv = document.getElementById("output");
diceRollBtn.addEventListener("click", () => {
const diceNum = Math.floor(Math.random() * 20) + 1;//* 20の部分はネタの数にしてください
const apiUrl = `{your_API_URL}/${diceNum}`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const content = "<div id='display'> 話題: " + data.topics;
outputDiv.innerHTML = content;
})
.catch(error => {
console.error('Error:', error);
outputDiv.textContent = 'データの取得に失敗しました';
});
});
</script>
</body>
</html>
背景デザインはこちらを参考にさせていただきました。
これでサイコロを振ると話題が表示されるようになります。
さらに、Web上で公開し、スマホからのアクセスができるようしたいと思います。
飲みの席にパソコンは怖いですから、スマホ使いましょう！
Step 2
公開方法としては、Github Pagesを使用します。
こちらの記事を参考に行います。
@snow_swallow(snow swallow)様
3.作成したリポジトリとローカル環境を連携する
5.コミット&プッシュする
上記2つは今回行わなくても大丈夫です。
完了したらStep 3に進みます
Step 3
最後にAPIの認証ドメインの設定を行います。
認証済みドメインの右側にある
「+Add」から{username}.github.ioを追加することで完了です。
Github PagesからでもAPIにアクセスすることができます。
さいごに
・今回の「会話のネタサイコロ」を作るに当たって、初めて「SSSAPI」を使用しましたが、本当に便利なサービスだなとつくづく実感しました。
ここまで読んでいただきありがとうございます。
SSSAPIをつかってぜひ作ってみてください
自分もしっかり使います