feedays

RSSリーダーサービスのモバイルフロントエンドアプリ（ネイティブ）です

• フロントエンドフレームワークにFlutterを採用して、IOSとAndroid・Windows・Macのマルチプラットフォームでの動作に対応しています
• レスポンシブデザインに対応しており、モバイル端末とPCの動作でデザインが崩れるのを防いでいます
• 全体のアーキテクチャにクリーンアーキテクチャを採用し、DI（依存性の注入・逆転）により、テスト・保守性を高めています
• IOS/Androidに対応・実機にて動作確認済み

使用技術

• 全体のアーキテクチャはClean Architectureを採用
  • DI・リポジトリパターン・UseCaseパターン・MVVMパターンを含んでいます
  • DIにより依存性の逆転をしており、これによりアプリのテスト・保守性を高めています
  • レイヤー間の依存関係は下記のようになっています
    • Presentation層 -> Domain層 -> Data層
• 状態管理はRiverPodを採用
• データ保存はHiveを採用
  • インターフェイスがシンプルであり、簡単にデータの永続化ができるため採用しました
  • ローカルに状態を保存して、ユーザーデータの永続化を実現
• レスポンシブデザインに対応
  • モバイル・タブレット端末のみならず、PCにも対応しています

機能一覧

• ナビゲーションバー
  • ハンバーガーメニューをタップすると、ハンバーガーメニュー画面に遷移
  • 検索ボタンをタップすると、検索・サイト追加画面に遷移
• ハンバーガーメニュー
  • サイトを追加・削除
  • サイト一覧はドラッグ&ドロップで順位を入れ替えることができる
  • メニューの項目をタップすると、記事一覧画面に遷移
  • 透明度のスライドバーで、メニューの透明度を調整
• 記事一覧画面
  • サイトごとに記事一覧を表示
  • 記事をタップすると、記事詳細画面に遷移
  • リロードボタンをタップすると、記事一覧を更新
• 検索ボタンをタップすると、検索・サイト追加画面に遷移
  • テキストバーに文字を入力すると、記事タイトル一覧を検索
    • URLだとサイトURLを検索
  • Categoryをタップするとカテゴリー検索して、それに該当するサイトの一覧を表示

工夫したところ

• レスポンシブデザインに対応
  • モバイル端末とPCの動作でデザインが崩れるのを防いでいる
• サービスがマルチプラットフォームで動作するように設計
  • Flutterを採用して、IOSとAndroid・Windows・Macのマルチプラットフォームでの動作に対応
    • これにより、ユーザーが好きなデバイスでサービスを利用できるようになる
  • また、QRコードによる同期機能で簡単にデバイス間でデータを共有できるようにしている
• テスト・保守性を高めるために、DI（依存性の注入・逆転）を採用
  • アプリのテスト・保守性を高めている
• サイトをドラッグ&ドロップで並び替えできるように実装
  • ユーザーが好きな順番でサイトを並び替えられるようになった

苦労したところ

• いくらFlutterがマルチプラットフォーム対応でも、使える機能が環境ごとに違う
  • それの差異を検知・吸収するコードの実装・デバッグに苦労した
    • ググりまくって、プログラミングノートにまとめて作業を進めた
• 初挑戦であるクリーンアーキテクチャ・依存性の注入（DI）の実装
  • これまでのアプリ開発では、アーキテクチャ・DIを意識せずに開発していたため、クリーンアーキテクチャ・DIの実装に苦労した
    • ググりまくって、プログラミングノートにまとめて作業を進めた

動画

Flutter_Feedays.mp4

スクショ

ハンバーガーメニュー画面

記事一覧画面

検索・サイト追加画面