こんにちは。

入社した会社のエンジニアの研修で「アプリを作れ！」というお題があったので、
本格的なWebアプリの開発経験は初めてだったものの、四苦八苦しながら作成したWebアプリを紹介します。

研修内容

表題の研修ですが内容は下記になります。（一部を抜粋）

・シンプルなWEBアプリケーション開発しデリバリーする x2周
・iPhone/Androidを両方で動く、サーバとデータをやり取りするシンプルなネイティブアプリケーションを開発しデリバリーする x2周
 【要素】
   - プロダクトの企画・画面設計・要件定義
   - 技術選定
   - インフラ（クラウド）の設計
   - 構築手順・アーキテクチャ・設計方針・デリバリー方法などのドキュメント（readme）
   - テストコード
   - Githubフロー
   - UI/UX
   - セキュリティ・N+1問題
　【クリア条件】
   - 一周目は、いかに軽量で素早く作れるか
   - 二周目開発部のメンバーから指摘がなくなったらクリア

長々と書きましたが、要するに「Webアプリ、スマホアプリを２つずつ、計４つ作れ！」ってことです。

・どんなアプリを作るのか
・開発技術の選定
・アプリのデザイン

などなとアプリ開発にかかる構成を全て一から開発していきました。

何を作ったか

早速作ったアプリの紹介に入りますが、
leo 情報を逃さず知識の定着を図るアプリを開発しました。

あとで読みたい記事や何についての記事かを覚えるために、メモと一緒に記事を保存できるサービスです。

デモ

未読の記事一覧

Extensionからの記事の追加

URLからの記事の追加

また、chrome Extensionを使えばボタン一つで記事を保存することができます！
Extensionはこちらからダウンロードできます：https://chrome.google.com/webstore/search/abjbdfpgihfnefpneobealjogmckkllm

アプリ挙動の補足説明

・左の「追加」からカテゴリーを追加でき、カテゴリー別に記事を保存できます。
・未読記事を開いた場合、自動的に既読記事に振り分けられます。
・extensionにて、「メモを追加」を押してメモを記入することで、メモを保存することができます。メモを書いてない場合は「og:description」がメモとして保存されます。
・extensionにて、「その他のオプション」を押すと、カテゴリーや未読既読のステータスを変更できます。

なんで開発したのか

SNSやネットを通して日々多くの記事に触れていると思いますが、
・それらの記事をBookmarkやタブであとで読もうととっておいて、結局記事がどんどん溜まっていく
・記事をとっておいて時間が経ちすぎると、なぜその記事を読もうと思ったのかわからなくなる
・あとで読み返したくなった時に記事がパッと出てこない
などなと、
読みたい記事をなかなか消化できずにいることに課題を感じていました。

既にあとで読む系のサービスはいくつか存在してますが、それらのサービスは「ためる」ことはスムーズにできるものの
※※「読ませる」**部分に関してはあまり注力していないように感じました。

なので、「読ませる」「読んだ内容を覚えている」という部分にフォーカスしたアプリを作成しようと思い、開発しました。

どんな仕組みか

フロント

フロントはNuxtを使いました。開発手法などは意識せず、シンプルに作成したのでnuxtらしさのあるコードではないかもしれません。AWSのEC2で起動させています。

バックエンド

dockerでrails、データベース（MySQL）、Redisを立ち上げています。
railsはmysqlにつなぐapiとして、rediesはセッション情報の取得、保存のために利用しています。

開発で大変だったところ

cronの実行環境

本番環境では実装できていませんが、開発環境にてユーザー自身が設定した時間に溜まっている記事のリマインドを送る機能を実装しました。
リマインドを実装するために、定期実行を行うcronを利用しようとしたのですが、かなりつまずきました。

開発環境として一旦ローカルの直下でcronを実装しようとしたのですが、ファイルへのアクセス権限系の問題でうまく実行できずに結構な時間を溶かしてしまいました。

どうしようもなく悩んでる時に、doker上でcronを実行してみたら？とアドバイスをいただいたので、
とりあえずdocker上で試してみることにしました。

dockerの理解

cronはrails上で使いたかったので、cronをdockerで利用するにあたって、railsもdockerで実行する必要がありました。

Qiita等の記事でdockerについての記事を読んでみたのですが、内容にさっぱりついていけずとりあえずDockfileやdocker-compose.ymlをコピペしてとりあえず実行してみました。
コピペしてもうまくいかないのは当たり前なので、何度も試行錯誤を繰り返して何となくdockerを理解できるようになりました。

「コンテナ」「イメージ」「ボリューム」あたりが何であるかを結構理解できたので、いい勉強になりました。

その他

・フロントをNuxt、バックをRailsで開発していたのでクロスオリジン対応やセッションの持ち方
・EC2やロードバランサーを使ったサイトのhttps化
など他にも初めての実装で苦労したのですが、ある程度は扱えるようになりました。

これからの開発

開発環境では実装ができたリマインド機能を本番環境でも実装していきます。
まだまだ、記事を「読ませる」「読んだ内容を覚えている」ことの核心をつく機能は実装できてないので、
そこを追求する必要もあります。

あと、flutterでも開発してネイティブアプリをリリースしようと考えています。