いつのまにかほわむんボタンがお亡くなりになっていた話

どうも、2か月くらい死んでいたほわむんボタンを復活させました。

そもそも何があったのかというと……

事件

ほわむんボタンは前に紹介したようにdeta.spaceとかいう誰も使ってないサービスを使っていました。

【2024年最新版】ほわむんボタンの作り方 - ほわむんびより

https://blog.howamun.day/posts/how-to-make-button/

Deta Space

The cloud for doers and dreamers

https://deta.space/

で、その結果

自分たちで素晴らしい活動って言うのありなんだ

サービスが終わって終了

やっぱ新興サービスに乗せると勝手に消えるんだなあ

今まで押された数もサ終により消えてしまったので、完全な値を復活させるのは無理になってしまいました…

全国のほわむんファンの皆様、申し訳ございません

だいたい13万回以上は押されていたのでとりあえず13万回ということで復活させることに

復活のほわむんボタン

やはり新しめのサービスだと消える可能性があるということで……

InstantDB: A Modern Firebase

We make you productive by giving your frontend a real-time database.

https://www.instantdb.com/

今年の9月ごろにリリースされたInstantDB というサービスを使います♪（え？）

新しいってお得だから

直す

今までの実装だとデータベースに対してAPIサーバーを建ててクライアント側から叩けるようにライブラリ入れて〜みたいなことをこっち側でしていたんですが、（詳細は以前の記事を見てね）このInstantDBはライブラリいれるだけで全部をいい感じにしてくれるので一撃だった

https://github.com/instantdb/instant

ちゃんと書くと長くなりそうなのでまた今度（今度書くとは言っていない）にして軽くどういう実装かだけ

import { i, id, init } from "@instantdb/react"
const APP_ID = "instantdbのID"

// schemaの定義
const schema = i.schema({
  entities: {
    likes: i.entity({
      key: i.string(),
      createdAt: i.date(),
    }),
  },
})

//
const db = init({ appId: APP_ID, schema })

const addLikes = (key: string) => {
  db.transact(
    db.tx.likes[id()].update({
      key,
      createdAt: Date.now(),
    }),
  )
}

// データ取得

const { isLoading, data, error } = db.useQuery({
  likes: {
    $: {
      where: { key },
    },
  },
})

// ロード中とエラー時の処理
if (isLoading) {
  return <div>Loading...</div>
}

if (error) {
  return <div>error</div>
}

// ほわむんボタンの表示
return (
  <div>
  ...
  </div>
  )

こんな感じで書くだけでいい感じにデータベースに保存されるし、データ取得も全部このライブラリでやってくれてかなり便利

しかもリアルタイムだしAPIリクエスト無制限（=ボタン押し放題）だし無料だしでお得すぎるかも

公式のexamples見ると難しそうなことも簡単にできそうなのでマジで色々できそう

というわけでサクッと直しました

ほわむんボタンの強化とかもやりたいかもしれん

おわり