優良な技術サイトを「お気に入り」で終わらせないためのWebアプリケーション開発

社内勉強会登壇資料。優良技術サイト登録WebインターフェースのホスティングにAmplify Consoleを用いた内容を共有。

Transcript

1. Webアプリケーションを一から作ってみました、、！ ~優良な技術サイトを「お気に入り」で終わらせないためのWebアプリケーション開発~ 2022/01/21 社内勉強会 豊岡大地
2. Chapter 1. 発表題材を決めるにあたって 発表の進め方 Chapter 3. デモと技術面で特に話したいこと Chapter 2. 成果物を作るにあたっての モチベーション(背景)と概要の説明 Chapter ４. まとめと今後の予定 01/08
3. 02/08 これまで行ってきた業務内容 DX案件、パブリッククラウド人材の育成、クラウドサポートでの問い合わせ対応、などなど 今回の発表題材 配属されてから得た知識・技術の総復習および新しい知識・技術取得を目的に、作りたかったWeb アプリケーションを作成！ この発表を通じて… クラウドをうまく用いることで、構築までのハードルが少なくなることを伝えたい、、！ ※今回の開発では、下記の点に注意して実施した ・個人開発ではあるものの場当たり的な進め方ではなく、タスク管理(ドキュメント)しながら実施 ・技術習得が一つの目的のため、多少のオーバースペックは見逃す ・細部まで決めつけ過ぎず、手を動かす →困ったところは今後バージョン更新することを意識 発表題材を決めるにあたって
4. 作ったもののモチベーション説明 03/08 DX案件の開発しているとき… 分からないこと(該当技術が要件を満たすか・エラーなど)が出たら、技術調査を実施 →適した技術サイト・ブログを見つけて、一件落着！！！ その後の対応はどうされていますか？？(ヒアリングを実施) 自分 Aさん Bさん 特定の技術サイト(Qiita/Zenn)の場合：サイト内のアカウント機能でLGTM/Goodで管理 クラスメソッドや個人サイトの場合：メモ帳などに記載して管理 ブラウザのお気に入り機能で管理しています！ 一期一会です！ サイト内で評価してくれる項目がある 例：リマインドメール、カテゴリ割合 なかなかもう一度、見に行かない 各サイトに依存するため、一元管理ができない 一元管理がすることができる なかなかもう一度、見に行かない 管理が大変 管理の手間がない 技術の再現性に再度時間がかかる ノウハウが記録としてたまらない
5. 作ったもののモチベーション説明 03/08 DX案件の開発しているとき… 分からないこと(該当技術が要件を満たすか・エラーなど)が出たら、技術調査を実施 →適した技術サイト・ブログを見つけて、一件落着！！！ その後の対応はどうされていますか？？(ヒアリングを実施) 自分 Aさん Bさん 特定の技術サイト(Qiita/Zenn)の場合：サイト内のアカウント機能でLGTM/Goodで管理 クラスメソッドや個人サイトの場合：メモ帳などに記載して管理 ブラウザのお気に入り機能で管理しています！ 一期一会です！ サイト内で評価してくれる項目がある 例：リマインドメール、カテゴリ割合 なかなかもう一度、見に行かない 各サイトに依存するため、一元管理ができない 一元管理がすることができる なかなかもう一度、見に行かない 管理の手間が面倒 管理の手間がない 技術の再現性に再度時間がかかる ノウハウが記録としてたまらない
6. 作ったもののシンプルな要件 04/08 従来の各々の優良な技術サイトの管理方法の課題 ★★★ 保存したサイトをもう一度見に行くことが少なく、もったいない、、！ ★★☆ サイトの管理に手間がかかる(一元管理) ---------------------------------------------------------------------------------------------------- ★☆☆ 現状の保存したサイトの分析ができない シンプルな要件定義 ~優良な技術サイトを「お気に入り」で終わらせないためのWebアプリケーション開発~ ユーザー データベース ホームページ Slack ①技術サイトの情報・コメント を入力 ②毎朝8時に登録した情報をランダムに 抽出して送る XXで困っていたが、 このサイトのYYのおかげで解決！ すっかり忘れてたけど この技術は今の案件でも応用できそう、、！ • 過去の技術を定着させる きっかけを提供 （複数人の場合） • お互いのスキル/知らな かった技術を知れる 得られるメリット
7. 作ったものの実物 05/08 コードおよびタスク管理：GitHubを用いた 作成したもの  https://github.com/Toyo-Daichi/push-link/projects/1 フロントUI：  技術ブログをデータベースに登録ができるWebページ バックエンド：  各種WebAPI  技術ブログを管理するデータベース、データベースのバックアップストレージ
8. 構成図 06/09 開発はパブリッククラウドAWSを用いた AWS Cloud Developer GitHub AWS Amplify Console Amazon DynamoDB pl-dynamo-???-prod AWS Lambda/Chalice ②seaquence ①site HomePage Web Hosting commit Amazon API Gateway GET, POST User Amazon SES Amazon S3 pl-s3-??? ①mail ②export Slackチャンネル Amazon EventBridge
9. 構成図 06/09 開発はパブリッククラウドAWSを用いた AWS Cloud Developer GitHub AWS Amplify Console Amazon DynamoDB pl-dynamo-???-prod AWS Lambda/Chalice ②seaquence ①site HomePage Web Hosting commit Amazon API Gateway GET, POST User Amazon SES Amazon S3 pl-s3-??? ①mail ②export Slackチャンネル Amazon EventBridge
10. 特に話したいところ 07/08 Webアプリケーションのホスティングについて Webアプリケーションを構築するうえで、一つの大きなハードルがウェブホスティング* →AWSが提供するホスティング解決案は、4つも提供されている！(公式ページ参照) Amazon Lightsail Amazon S3 AWS Amplify Console Amazon EC2 WordPressなどの事前に設定されたものを、ウェブサイトや アプリケーションを簡単に立ち上げることができる シングルページアプリケーションをホスティングできる シンプルな静的ウェブサイトを低コストで提供できる 従来のウェブホスティング方法をクラウドで用いることができる どれを選択すれば良いのか？ 見るべき指標は様々、、 ・金額 ・セキュリティ ・運用のしやすさ ・技術習得のしやすさ などなど Webサーバソフトウェアのインストール・バー ジョン更新・HTTP通信のフロー確保
11. 特に話したいところ 07/08 Webアプリケーションのホスティングについて Webアプリケーションを構築するうえで、一つの大きなハードルがウェブホスティング* →AWSが提供するホスティング解決案は、4つも提供されている！(公式ページ参照) Amazon Lightsail Amazon S3 AWS Amplify Console Amazon EC2 WordPressなどの事前に設定されたものを、ウェブサイトや アプリケーションを簡単に立ち上げることができる シングルページアプリケーションをホスティングできる シンプルな静的ウェブサイトを低コストで提供できる 従来のウェブホスティング方法をクラウドで用いることができる 環境構築の手間 開発の自由度 少 多 多 少 今回、採用！
12. 08/08 まとめと今後の予定 まとめ  配属されてから得た知識・技術の総復習および新しい知識・技術取得を目的に、登録した技術 サイトを定期配信するWebアプリケーションを作った 発表で伝えたかった内容  AWSでは多様なユースケースに向けての解決策を用意してくれているので、適切にサービスを 選択できれば構築までのハードルが少なくなる →今回のようなケースであれば、Amplify Consoleで十分に作れます、、！ 今後の予定  複数人が使用する際のアップデートを考えているので、 使ってもらえるようなアプリケーションにして、担当内の技術力向上に貢献していきたい、、！ →ユーザー別に登録サイトを登録… ・お互いのスキルや知らない技術を知るきっかけ ・各ユーザーのマーページに登録サイトの一覧/傾向を載せて、得意技術を可視化