Zenn
⛰️

春休みにAmplifyを使ったWebアプリをリリースした話

2021/04/13に公開
Nuxt
個人開発
Amplify
tech

今回作ったもの

今回自分が作ったものはこちらです！

Phoniccu（ふぉにっく）を簡単に説明すると、

  • 英語のタイピングゲーム
  • タイピングしながら英文の音声を聞くことができる
  • タイピング以外にもリスニングやライティングモードで英語力アップ？

という感じです。
よかったら遊んでみてください^^

Phoniccuの技術構成

今回は、

  • Vue(Nuxt)
  • AWS
  • TypeScript
    で開発しました。

AWSの構成についてはこんな感じです（構成とかをあまり図にしたことないので雰囲気理解でお願いします。。。）

今回はAmplifyでAppSyncやCognitoを使用し、開発をしてみました。
たまにバグに遭遇することがありましたが、GithubのIssueで解決することが多かったので、同じように苦戦している方はGithubのIssueを調べるといいと思います＾＾

ちょっと自己紹介

自分はとある東京高専の4年（18歳）情報工学科生です。
twitter (良かったらフォローお願いします。)
最近は教習所で車をぶんぶんしています．

というわけでつたない文章ですがよろしくお願いします^^;

CloudFrontとLambda Edgeで動的OGP

やはり、スコアをユーザーが共有するなどで、それを見た自分のサービスを知らない人がやってみようという気持ちになるものです。
そのユーザーの流入を増やすためにはやはり、動的なOGPでTwitterやFacebookなどに共有された際に、的確な情報を流すことでより流入が増えると考えています。

動的OGPと言えばSSRだけど、、、

動的OGPと言えばSSR、SSRと言えば動的OGP。
ですがSSRって個人的に費用が掛かるイメージがあるんですが、如何なんでしょうか？
それに加えて、SSRとSPAの違いだけで、実装方法が変わってきて面倒です。。。
Lambdaを使ったSSRなんてものもありますが、それも面倒。。。

なので、自分はダイナミックレンダリングという手法を用いて、

ユーザーからのリクエストは普通にサイトのページを返して、
TwitterなどのBotに対しては別のHTMLを返すというように実装しました！

申し訳ないですが実装方法については別の記事として書く予定です。
待ちきれない人はAWSのドキュメントを参考にやってみてください。

実装してみての感想としては、

  • 仕組みがわかりやすいので実装しやすい。
  • クエリや時間、色々なパラメータを利用してレスポンスを柔軟に変えられる
  • コストも安くすむ？？
  • SPAの良いところが使える。
  • 静的ホスティングでいい！！！

という風に感じました。
コストに関してはサービスによって変わると思うのであまり参考にはせずに。。。

個人開発や小規模人数でのサービス開発では、やはりいかに管理コストを減らすかが大事なんじゃないかなと思います。

個人開発のサービスは沢山作ってなんぼみたいなところありませんか？？？
自分が使いたいものを作って、リリースして、また新しいの作って、たまに戻ってアップデートして、、、みたいのが個人的に楽しく開発をすることができるサイクルなんじゃないかなと思います。

そして、このサイクルをうまく回すには、自分がサービス保守管理するためのリソースをいかに減らすかが重要だと思います。

なので、自分はできるだけ管理はGoogleさんやAmazonさんに任せるようにしています笑

未認証と認証ユーザーでできることの制限

割と最初のころはこれを実装するのに苦労しました。
認証ユーザーOnlyにするとサービスを利用するハードルが上がってしまいます。
今回のPhoniccuは手軽にできるを重視したかったので、未認証ユーザーの利用を必須でした。

実装方法はこのスクラップに少しだけ書いてあるので参考になると思います。

音声の生成にはAmazonPollyを使用しました

Amazon Pollyすごいですね、日本語はやはり不自然なところが多いですが、英語に関してはあまり違和感を感じませんでした。（非ネイティブだからか？）

今回、コンテンツの生成にはPythonを使用したのですが、簡単にBoto3から使用できました。

import boto3

session = boto3.Session()
polly = session.client("polly")
bucket = s3.Bucket("*****")

VOICE_ACTOR_LIST = [
    'Emma', 'Brian', 'Kendra', 'Kimberly', 'Salli', 'Joey', 'Joanna', 'Matthew'
]

english = "Hello World"
for actor in VOICE_ACTOR_LIST:
        response = polly.synthesize_speech(VoiceId=actor, OutputFormat='mp3', Text=english)
	bucket.put_object(
            Key='{0}/{1}'.format(english, actor),
            Body=response['AudioStream'].read(),
            ContentType='audio/mpeg'
        )

これは例みたいなものですが、このように簡単に音声を生成してくれます

初のGraphQL

今回初めてGraphQLをAppSyncで使用しました。
使用した感想としては、管理がしやすいと感じました
レスポンスのスキーマを定義するので、Typescriptと相性抜群だと思いました。

AppSyncもAmplify上で使用するのはCLIで１コマンドで使用できるので簡単でした。
また、AppSync上でLambdaが使用できるのでわざわざGatewayで良い感じにする必要がなくとても楽に実装できました。

初のTypeScript

とりあえず、バグが減った！

使い始めは慣れるのに少し苦戦しましたが、おそらく今はTypeScriptなしには生きていけない体になっていると思います。

振り返り

私は個人開発のものをリリースするのは今回で2回目でした．
一回目の作成したFASTIDEA
記事はこちら

今回はこのFASTIDEAの開発で得た反省点を生かして開発することができました．

特に，

  • eslintを利用したコード美化
  • TypeScriptを使ってバグを削減

などを行って，できるだけ楽をして開発に取り組むことができました！

最後に

最後まで読んでくださりありがとうございます．

良かったらPhoniccuをプレイしてみてくださいー

次はアプリ開発に挑戦してみたいと思っています^^

Discussion