メインに戻る

オルリ

認知症患者と介護者の両方が日常生活を送れるよう支援するケアプラットフォーム

オリー(Olly)は健康的な認知症生活のためのヘルパーアプリで、認知症患者と介護者が安全に日常生活を続けられるよう支援します。 2024年コミュニケーションデザイン国際公募展のデジタルメディアデザイン部門で優秀賞を受賞し、Vietnam Mobile Summit 2024では啓元芸術大学の代表作として選定・発表されたプロジェクトです。 紹介ウェブサイトでは、JavaScriptとCSSを活用してペルソナ切替、無限ループスライダー、スクロールベースのヘッダー制御などのインタラクションを実装しました。また、AOSライブラリを活用してスムーズなスクロールアニメーションを実装しました。

HTMLCSSJavaScript
参加人数
3名(UX/UI 2 / FE 1)
期間
2024.03 ~ 2024.07

詳細内容

  • 3段階ファイル処理ワークフローの進行状態およびデータ維持システム開発

    • ファイルアップロードからメタデータ設定、ダウンロードまでの3段階で構成されたワークフローでユーザーデータと進行状態を安定的に管理しました。
    • Zustandを状態管理に活用して各段階別のユーザー入力値とファイル情報をグローバルに維持し、ユーザーが段階を移動してもデータ損失なく作業を続けられるように実装しました。
  • File System Access APIとWeb Streams APIを活用した最適化されたファイルダウンロード実装

    • File System Access APIを活用してユーザーが直接保存場所を選択できるファイルダウンロード機能を実装しました。
    • File System Access APIをサポートしないブラウザ環境ではWeb Streams APIベースのフォールバックパターンを実装しました。これにより大容量ファイル処理時のメモリ不足問題を防止し、ストリームベースの処理でブラウザパフォーマンス低下なく安定的なファイル処理を実装しました。
  • piexifjsライブラリを活用したEXIFメタデータ読み書き処理実装

    JavaScript環境でEXIFメタデータを扱うためにpiexifjsライブラリを導入し、フィルム写真のメタデータを読み込み・編集できる機能を実装しました。カメラモデル、撮影日、ISO、絞り値など様々なEXIF情報をユーザーフレンドリーなUIで編集できるようにしました。

  • ファイル検証と自然言語ソートによる安定的な一括処理

    アップロードされたファイルの形式とサイズを事前に検証して、サポートされていないファイル形式や破損したファイルによるエラーを防止しました。また、自然言語ソートユーティリティ関数を通じてファイル名の数字順序を正しく認識し、ユーザーが期待する順序でファイルが処理されるように実装しました。

  • RustベースのBiome導入で開発効率性向上

    既存のESLintとPrettierの組み合わせをRustベースのBiomeに置き換えて、リンティングとフォーマッティング速度を大幅に改善しました。コード品質検査と自動フォーマッティングを1つに統合し、高速な実行速度で開発ワークフローの効率性を高めて開発生産性を大きく向上させました。