【WoT】キュンキュンボタン♪を作ろう!Two Who Nightの恋愛相談用のツール【その1】

WoT

小平あたりでCivicTechの辞書によると。。定義が以下のように書かれています

WoT: IoTに続く新しいバズワードになりそうな予感がしています。Waste of Technology つまり、技術の無駄遣いです(笑)。小平あたりでCivicTech的には、WoTは、もう一つの意味があり、笑いを取ろう Warai wO Torouの略でもある。

と記述されています。。ほんまか?(笑)

でも、みんなのITリテラシーを高めるためには、こういうWoTに積極的に取り組むことが重要かと思われます(笑)

ということで、シリーズものにしようかな?って。。

Two Who Night 段差でダンサーズで盛り上がってます

小平あたりでCivicTechのサブプロジェクトにFMひがしくるめの、「Two Who Night 小平ええじゃないか♪」があります。その一つのコーナーに、恋愛相談コーナーがあって、みんなで、恋バナして、キュンキュンしよう!ってコーナーが誕生しています。

で・・・話すと長いので、省略しますが。。

昭和世代のおじさん・おばさんが。。なんか盛り上がって、昔の「へー ボタン」みたいに、「キュンキュン ボタン」が欲しいっていう話に。。

じゃぁ、作るか? ということです(意味わからないですよね。。普通は?)(笑)

方式は?仕様は?

だいたい物を作るときには、仕様とか方式を検討して、オーダーします。。。が。。。 自家製で済ます我々ですので、そんなことは、一切、聞きません(笑)

作れるように作るだけ。。

どんな機能があったらいいかな?っていうのを一回書いておくと、忘れても、ここを見たらいいので。。(いや、サブプロジェクト多すぎて。。すぐに忘れるんですよね)

書き留めておきます。

メイン仕様

キュン・キュンボタン が ある

押せば、キュン・キュン言う

回数がカウントされる

サブ機能

できたら、何キュンキュンかカウントできるといいな

視聴者からのキュンキュン カウントもカウントできるといいな。。

方式案

・ハードなし

スマホアプリで作る。Webアプリで作る

・ハードあり

ESP32と100円ショップくらいに売ってるもので作る

こんなところかな?

コピーできそうな物を集める(笑)

先人の知恵は、有効に活用しましょう。ばっちりな奴は出てこないけど。。それを下敷きにして作るといいですよね。

ということで、まずは、見つけたやつ

①Web HTML5で へーボタン

HTML5 input type="range" で作る 「へぇボタン」
HTML5 で input 要素の type 属性として追加された 「range」 を使って、「へぇボタン」 を作ってみました。

②WebSocketでへーボタン(イントラ版)

③JQueryでInputボタン

ホームページ制作で事業の輝きをブランディング|FE-VO(フェーボ)
Just another WordPress site

④CSSでボタン

コピペで絶対使いたくなるCSSボタン 25選 | SONICMOOV LAB
コピペで使えるCSSボタンをまとめました。ユーザー操作の過程や完了が分かりやすいもの、動きが面白いものなどCSSボタンを紹介します。

⑤Arduinoと100均で 無理ボタン

まずは、これくらいからかな?サブ機能を入れるとサーバーサイドを用意しなくてはいけないのですが。。

これ、GASでもできないかな?

素人なりにGoogle Sitesにいいね!ボタンを配置してみた - Qiita
概要Google Siteに社内ページを運営していますが、社員がちゃんと見てくれるのか?とか気になるところですまた、見た人はコメントまでしたくないが、一応読んだよ!と反応したい人はいるはずです…
株式会社CAM
Google Apps Scriptでウェブアプリケーション作成入門【GAS】 - 🌴 officeの杜 🥥
これまでブログにて、Google Apps Scriptを用いた様々なアプリケーションやテクニックを紹介してき

なんかできそうな雰囲気(笑)

Firebase でサーバーレスにクリックカウンターを作ってる

jQuery + Firebaseで投票システムを作ってみよう! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
jQueryとFirebaseを使った簡単な投票システム作りをご紹介。Firebaseを使うと、サーバーの知識がなくても、jsだけで簡単にリアルタイムデータベースを使えちゃいます。

この機会にFirebase勉強してみるかな?

Firebaseの機能で、いいねボタンを作ってみる。 - Qiita
Firebaseの機能をつかっていいねボタンを作ってみました。ただの「いいねボタン」です。記事とか投稿に「いいね」をするのではなく、ただただ「いいね」を押すだけの、ただそれだけのアプリです。あく…

基本は、ボタンを押すとカウントアップ、どこかにデータ送って保存するってことですね。

ハードでもアプリでも同じなので。。

一応、Githubでも調べておく。。

GitHub - Ankhwatcher/AgentWatchCounter: An application for the Agent Smartwatch which counts clicks on the Up button.
An application for the Agent Smartwatch which counts clicks on the Up button. - Ankhwatcher/AgentWatchCounter
GitHub - J-Ricker/Javascript-counter: A simple javascript counter, counts up and down depending on button clicked
A simple javascript counter, counts up and down depending on button clicked - J-Ricker/Javascript-counter

Arduino版

Arduino-lcd-up-down-count/yawot.com at master
Arduino lcd up down count with button or sensor. Contribute to rahulpunk/Arduino-lcd-up-down-count development by creating an account on GitHub.

仕様的にはこれが一番ばっちりかも・・

GitHub - wd-shiroma/web-click-counter: simple web counter
simple web counter. Contribute to wd-shiroma/web-click-counter development by creating an account on GitHub.

GASなのかな?これとてもシンプル

GitHub - luisreys/ClickPage: Web to count globals click in that web page. JS + CSS + HTML
Web to count globals click in that web page. JS + CSS + HTML - luisreys/ClickPage

まずはやってみる(笑)

HTML5で、単純に「キュンキュン」(僕の声)って鳴らすボタン を サーバに設置(クライアントサイドのみ)①をコピペアレンジしてみました。

♡キュンキュンボタン サンプル

クライアントサイドだけで音を鳴らして棒を上げるだけですが。。 サーバサイドの作りこみとか。。キュンキュンボタンのデザインとか、いろいろデザインもコレルし。。

みんなで、作ってみない??

あと、本当の「キュン・キュン」っていう声 1秒くらいで、言って送ってください(笑)

Githubにソース置きましたので、みんなで改造しましょう(笑)

GitHub - tom2rd/kyunkyun: 小平あたりでCivic Tech FMひがしくるめ Two Who Night ええじゃないか♪連動企画 キュンキュンボタンを作ろう
小平あたりでCivic Tech FMひがしくるめ Two Who Night ええじゃないか♪連動企画 キュンキュンボタンを作ろう - tom2rd/kyunkyun

ちなみに。。売ってるんだけどね(笑)