More than 3 years have passed since last update.

新型コロナで休校になって暇になった高校生がミニサービス「Yobikake」を3日間で立ち上げた話

Last updated at 2020-04-14Posted at 2020-04-12

はじめに

はじめまして、とある高校3年生です。

皆さん、不要不急の外出は自粛していますか？

新型コロナウィルスの感染拡大が止まらず、僕の住んでいる兵庫県でも多くの感染者が出ています。
3月初旬にシリコンバレーに行ったのですが、帰国後すぐに感染爆発が起きて、アメリカは今大変な状況になっていて、その変化を見たからか個人的に新型コロナに対してはすごく危機感を持っています。

学校もゴールデンウィーク明けまで休みになってしまい、外出もできないため、家でボーッと積読だった本を片付けたり、Twitterを眺めていたり、YouTubeでどうぶつの森の動画を見て癒やされていたり、、するような生活を送っています。

それでいいのか？

飲食業界やイベント業界では大打撃を受けて、テイクアウトやオンラインイベントを行うなど一生懸命に取り組んでいる人がたくさんいるというのに、僕はただ不安を抱えて家にこもってるだけ。

高校生の自分にもなにかできることはあるのではないかなと思い、ふと思いついた「Yobikake」というサービスを3日間で立ち上げることにしました。

この記事は、その「Yobikake」を3日間で開発した高校生2人の物語です。(ちょっと言ってみたかった)

なお、僕はちょっとだけプログラミングができるふつうの高校生です。
Qiitaによく現れる天才的な高校生エンジニアとは比べ物にならない初心者ですので、あしからず。

Yobikake とは

「Yobikake」は、TwitterやFacebookでリンクを投稿したときに表示されるOGP画像といわれるものを使ったサービスです。

新型コロナの感染拡大を防ぐために、各SNSで #StayHome や #KeepDistance といった呼びかけが全世界で行われているのをご存知でしょうか。
日本でも「うちで過ごそう」というワードを多くのアーティストやYouTuberの方が呼びかけていますよね。

もっと簡単にSNSでそういう呼びかけができたらより多くの人に広がるんじゃないかなと思い、このサービスを開発しました。

「Yobikake」は、あなたの呼びかけからはじめようというコンセプトで作ったSNSでリンクをシェアするだけで新型コロナウィルスに関する注意や行動の呼びかけを発信することができるサービスです。

サイト内のシェアボタンを押して投稿するだけでこのような投稿を作成することができ、フォロワーや友達に注意や行動を呼びかけることができます。

実際に投稿したイメージがこちら↓

このサービスを使ってシェアされた投稿を見た人が、またリンクにアクセスして投稿する。
そういう連鎖がユーザーの中で起きてくれたら面白いな〜と思ってます。

そして発信されたYobikakeが多くの人の目に触れて、一人ひとりの意識が変わっていけばいいなと考えています。

サービスはこちらから利用できます。
https://yobikake.com/

TwitterやFacebookでぜひ投稿をお願いします🙇‍♂️

どうやって開発したか

ふと思いついたアイデアで技術的にもハードルは高くなかったので、
深夜2時頃にドメインを買って、朝起きてすぐにプロトタイプ作成に取り掛かりました。

これがドメイン駆動開発ってやつですね。

簡易なプロトタイプを作成し、考えていたOGP画像付きの投稿を実装できたので、
お友達の東京に住んでいるつよつよな女子高生デザイナー(@yuki384)に協力してもらって
3日間で爆速コーディング開発を2人でGitHubとZoomを使って行いました。

なにで開発したか

Nuxt.js(Vue.js)を使って開発を行いました。
複数ページ作成する必要があったのと、ボタンなど複数使う箇所が多かったため、
コンポーネントとレイアウトを活用しました。

詳しくは@yuki384さんが書いた記事があるので、ぜひご覧ください。
https://qiita.com/yuki384/items/c3b38b1245fea6accf29
(最後にもリンクを貼ってます)

サイトの仕組みとしてはページを作ってOGPをそれぞれ設定する、
そのページのリンクをSNSでつぶやくとそれぞれのOGPが表示される、
それらのページにアクセスされたらトップページにリダイレクトさせる、
というかなり大雑把な実装になっています。

サーバーはバズってもある程度は大丈夫なようにGoogle App EngineにデプロイしてSSR(サーバーサイドレンダリング)とオートスケールに対応させています。(クラウド破産はしたくないので、しっかりアラートと制限を設けました)

開発で詰まったこと

Facebookで違うOGPを設定しているページでもトップページのものが表示されてしまう
「og:image」だけ書き換えるのではなくて、「og:url」も変更、「og:type」をarticleにすることでFacebookでもページのOGPが正常に表示されるようになりました。

Facebookのapp_idが開発モードだと他のユーザーはシェアできない
FacebookのシェアURLを作るにはマイアプリというのを作成してapp_idというものを発行しなければなりません。
初めて発行したので知らなかったのですが、リリースする時に開発モードからライブモードに変更しないと、
他のユーザーはリンクをシェアしようとするとエラーが出るみたいです。

マイアプリを作成したアカウントでは投稿できたので、リリースしてユーザーから報告をもらうまで気づきませんでした。

主にFacebook関連でのトラブルが多かったです。

最後に

ここまでお読みいただきありがとうございます。

このサービスは技術的にはそこまで難しいことはしていません。

色々と雑な実装もあったりするのですが、まずは完璧より完成が大事。

作り込んで、ユーザー投稿機能、OGP自動生成、多言語対応、、、
考えれば考えるほど、どんどん内容も実装も複雑になってリリースが先送りになってしまいます。。

一点を作り込むことで、意外とシンプルで需要のあるサービスが生まれることもあるのではないでしょうか。

今回はNuxt.jsを使いましたが、HTMLとCSSだけでも十分に実装可能なレベルのサービスです。
プログラミング初心者だからサービス開発なんて...と思っている方、一度シンプルに考えてみるといいかもしれません。

簡単なプログラミングでもなにか小さなひとつの課題を解決することはできたりします。
それに自分のアイデアがカタチになって誰かに使われるいうのは案外嬉しくてですね、モチベーションにも繋がります。

でも欲を言うともっと使ってもらってTwitterのトレンド入りまでいったら嬉しいな〜なんて思っていて、
よろしければ、サイトのシェアボタンをポチッとしてご自身のSNSに投稿してもらえると嬉しいです。

あなたの呼びかけからはじめよう。
多くの人にメッセージが届きますように。
そして新型コロナがいち早く終息しますように。