【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ボタン

jQueryで数字入力ボックスとアップダウンボタンを作る!:ホームページ作成に関する最新情報をホームページ制作Fがご紹介
ホームページ制作Fの最新情報:HTML5ではinput要素に指定するだけで、三角のアップダウンボタンが付いた入力フォームができます。

④CSSでボタン

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

⑤Arduinoと100均で 無理ボタン

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

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

素人なりにGoogle Sitesにいいね!ボタンを配置してみた - Qiita
概要 Google Siteに社内ページを運営していますが、社員がちゃんと見てくれるのか?とか気になるところです また、見た人はコメントまでしたくないが、一応読んだよ!と反応したい人はいるはずです そこで見たよ!の証として気軽に...
Web初心者がGASでいいね!ボタン作ってみた | ニュース | 株式会社CAM
こんにちは。シーエー・モバイル19内定者の木戸優奈です。北海道の函館から、リモートで広報インターンさせて頂いています! 今回は、社内カルチャー発信サイトである、CAMedia (キャメディア)に導入させていただいた、「 GAS を用いたいいね!ボタン」について紹介しようと思います。 ▲ 社内カルチャー発信サイト「CAM...
Google Apps Scriptでウェブアプリケーション作成入門
これまでブログにて、Google Apps Scriptを用いた様々なアプリケーションやテクニックを紹介してき…

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

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

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

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

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

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

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

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

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

Arduino版

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

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

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

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

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

まずはやってみる(笑)

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

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

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

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

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

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

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

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

スポンサーリンク
スポンサーリンク




PHP Code Snippets Powered By : XYZScripts.com