Help us understand the problem. What is going on with this article?

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

はじめに

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

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

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

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

それでいいのか?

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

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

https://yobikake.com/

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

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

Yobikake とは

ogp.png

「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に投稿してもらえると嬉しいです。

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

https://yobikake.com/

Links

GitHubのレポジトリ
https://github.com/nztm/Yobikake

Yobikakeの公式ツイッター
https://twitter.com/yobikakecom

一緒に開発した高校生(@yuki384)の投稿
https://qiita.com/yuki384/items/c3b38b1245fea6accf29

良ければ本投稿のLGTM(いいね)、共有もよろしくお願いします。
最後までお読みいただきありがとうございました!

nztm
駆け出しサービスデザイナー。
mekurun
スライドで学べるビジュアルプログラミング学習サイト「メクルン」を運営しています。
https://mekurun.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした