スプレッドシートから、サイト上にポップアップを出すシンプルなサービスを、やべー勢いですげー作り上げた

Last updated at 2023-12-15Posted at 2023-11-02

サイト上にポップアップを出すシンプルなサービスを作った

先日、ノーコードでサイト上にポップアップで動画を出せるシンプルなサービスをリリースしました。
サイト上に指定のタグを1行埋め込むだけで、TikTokやYoutubeの動画がポップアップするというもので、

・Googleのスプレッドシートを使って管理できる

というのが特徴で、新しいことを覚える必要がなくて担当者の負担が減るかもです。
非エンジニアでも楽勝だとおもいます。

HTMLのコーディングなどなく、YoutubeやTikTokの埋め込み動画をモーダル的に表示してくれます。
また、実装もバニラなJavascriptなのでJqueryのバージョンでぶつかることも無いかなと。

この手の製品は、解析ツールや他の膨大な機能も込みで

みたいなのが多く、導入・学習・運用コストがバカ高く、小規模な組織や案件には不向きです。
また、高い専門性を要求され、導入したところで持て余します。
かと言って、提供元と密にやるコストも割けないなど、つらいことが多いと思います。

昨今の解析ツールは進化が進み、いろんなことができるようになった反面、誰でも扱えるものではなくなりました。
様々な機能が提供されていますが、

など、いざ使おうとした際に知識がないと混迷を極めます。

ってなわけで

使えるものがあれば、お手頃に提供できるし使ってもらえるのではないかと言うところで作りました。

やべー勢いですげー盛り上がる・・・ではなく、かなり短期間で作り上げました。
余計なものを作らない（存在するものは自前で作らない）精神で、いろんなものをポンッと用意しました。

月曜に諸々始まって、金曜にはプレスリリースまでこぎつけました。
頑張ったので以下記事も見てほしい。

あと、特に次項で効率化出来たところを紹介するので、読んでくれた人の役に立つと嬉しいです。

いまや法人が使う場合でもある程度市民権を得ていると思われるGoogle Formで申し込みを受け付けるようにしました。
自動返信の文面に、動的にURLを貼れるようにして、Stripeの決済URLを貼って送り返すようにしました。

Stripeの提供している決済用URLの発行を使い、自前でのUI構築を一切せずに決済を準備しました。
Stripeの管理画面で商品名や価格を設定するだけで、決済URLを発行できるのでとても便利です。

※本番用URLで決済テストをしてStripe側にやっちゃだめだよと言われたはナイショです。みんなは気をつけよう。

こちらもかなり効率化出来た要因です。
主に動画サイトのURLの分解や、細かい挙動における関数群を７割位はChatGPT君にたのんで作ってもらいました。
もちろん送り込んではいけない情報は避けて。

を行えば概ね完成します。
あとは、書いてある内容を人間が見て理解することで完了。
「なんかしらんが動いてるからヨシ！」では流石に怖い。
基本はChatGPTを人間だと思って扱うといいのかもと思いました。

タイトル通りですが、指定のJSを１行記載するだけで、あとはスプレッドシート管理となります。
実際のスプレッドシートはこんな感じで、掲載期間と動画のURLを貼り付けるだけで、調子良く動いてくれます。

ね、かんたんでしょ。

Google Analyticsが導入されているサイトであれば、自動的にイベントトラッキングの情報を送るようにしています。
これにより、サイト上で動画が表示された回数がわかるようになっています🤘

これはちょっと知識のいるパターンですが、任意にユーザーIDを指定して表示を管理することも出来ます。
既存のログインを伴うサービスで、そのユーザーIDを認識させるロジックも実は実装しています。

特に導入のハードルが低く、ユーザーへのリーチを増やしやすいと考えています。
よろしければ使ってみてください。