APPLICATION PORTFOLIO

彩りカレンダー

カレンダーの操作に連動して背景画像が移動・回転・拡大縮小する、デザインの自由度を重視したカレンダーアプリです。プレビューで仕上がりを確認しながら、配色や画像の配置、動きを細かく設定できます。

01 / OVERVIEW

アプリ概要

Kotlin Multiplatform(KMP)で共通ロジックを共有し、iOSはSwiftUI、AndroidはJetpack ComposeでネイティブUIを構築しています。現在はAndroid版とデザイン共有機能の公開に向けて開発を進めています。リニューアル前はAIを使用せずFlutterで開発しており、そのソースコードは公開しています。

デザイン共有では、公開デザインや画像をCloudKitから直接取得し、Androidからの書き込みのみ中継サーバーを経由する構成を設計しました。将来の動画共有も見据え、利用者数や配信量の増加に伴う中継サーバーの負荷と運用コストを抑える設計を重視しています。

開発の強み

強みは、モバイルアプリに加え、サーバーインフラ、REST API、WebSocketを含むシステム全体の設計・開発に知見があることです。CodexなどのAIを活用できる環境では、要件定義からUI/UX設計、アプリ・サーバー実装、テスト、ストアリリースまで、一人で一貫して対応できます。設計判断と品質確認は自ら担い、AIの活用によって、個人で対応できる開発の規模と速度を高めています。

02 / ARCHITECTURE & COST

システム構成・運用コスト

図を選択すると拡大して確認できます。

運用コストとスケール
運用コストとスケール
デザイン共有のシステム構成
デザイン共有のシステム構成

03 / FEATURES

機能一覧

F01-01

月カレンダー画面

月カレンダーを表示する。左右のスクロールに応じて月の切り替えが可能。上下で月カレンダーと週カレンダーの切り替えも可能。

F02-01

週カレンダー画面

週カレンダーを表示する。左右のスクロールに応じて週の切り替えが可能。上下で月カレンダーと週カレンダーの切り替えも可能。

F03-01

イベント編集画面

カレンダーのイベントを編集する。

編集中の項目は強調表示する。

F03-02

イベント編集画面
キーボード画面位置補正機能

テキストがキーボードに隠れる位置の場合、アニメーションでモーダル全体の位置を上に補正する。

F03-03

イベント編集画面
入力モーダル画面位置補正機能

テキストが入力モーダルに隠れる位置の場合、アニメーションでモーダル全体の位置を上に補正する。

F04-01

カレンダー画面共通
イベント一覧表示機能

カレンダーの選択セルにイベントがある場合、イベント一覧にイベントを表示する。

F04-03

カレンダー画面共通
イベント部分編集機能

イベント名と期間を編集する。

F04-04

カレンダー画面共通
イベント移動機能

移動ボタンからイベントを下部に固定して別のカレンダーセルに移動する。

F04-05

カレンダー画面共通
イベントコピー機能

コピーボタンからイベントを下部に固定して別のカレンダーセルにコピーする。

F04-06

カレンダー画面共通
イベントアンカー機能

アンカーボタンからイベントを下部に固定してどこでもそのセルに移動するボタンを設置する。

F04-07

カレンダー画面共通
イベントドラッグ機能

イベントの移動やコピー時ドラッグでイベントを移動やコピーを行う。

F04-08

カレンダー画面共通
イベント固定機能

イベントの移動やコピー、アンカー時、イベント左下に固定する。

F04-09

カレンダー画面共通
イベントドラッグ自動移動機能

月カレンダー、週カレンダーの左右の角のセルにドラッグすると、カレンダーをページ送りする。また、月カレンダーの下、週カレンダーの上にドラッグするとカレンダーを切り替える。

F04-10

カレンダー画面共通
イベントドラッグ時間展開機能

週カレンダーの時間がまとまったセルにドラッグすると時間セルを展開する。

F05-01

メニュー画面

各設定画面への移動と画面モードの切り替えを行う。

F05-02

メニュー画面
レイアウト切り替え機能

レイアウトを選択し、ライト・ダークモードに登録する。

F06-01

この端末の表示設定画面

曜日の色とカレンダーのデータソースを設定する。

F06-02

この端末の表示設定画面
曜日の色設定機能

曜日ごとの文字色を設定する。

F07-01

カレンダー設定画面

カレンダーをアカウントごとに表示し、新規予定の登録先を選択する。

F07-02

カレンダー設定画面
カレンダー新規作成機能

カレンダー名と保存先のアカウントを指定してカレンダーを作成する。

F07-03

カレンダー設定画面
カレンダー編集機能

予定の表示方法と編集可否、登録先を設定する。カレンダーの削除も可能。

F07-04

カレンダー設定画面
読み取り専用カレンダーの表示設定機能

読み取り専用カレンダーの予定の表示方法と、祝日としての表示を設定する。

F08-01

レイアウト切替順・リセット画面

ライト・ダークモードごとに適用レイアウトと切り替え順を設定する。

F08-02

レイアウト切替順・リセット画面
リセット機能

適用レイアウトと並び順を初期状態に戻す。画像キャッシュのリセットも可能。

F09-01

レイアウト編集画面

レイアウト名と適用する画面モードを設定する。フォークでレイアウトの複製も可能。

F09-02

レイアウト編集画面
カラープリセット選択機能

プリセットからカレンダーの配色を選択する。

F09-03

レイアウト編集画面
プレビュー機能

設定したレイアウトをプレビューで確認する。左右のスクロールで表示を切り替える。

F09-04

レイアウト編集画面
カラーカスタマイズ機能

配色、ブラー、上部の背景を個別に設定する。

F09-05

レイアウト編集画面
カラー詳細設定機能

背景や文字、罫線などの色と、非活性アイコンの不透明度を設定する。

F09-06

レイアウト編集画面
曜日カラーのカスタマイズ機能

曜日に使用する赤・青・水色をレイアウトごとに変更する。

F09-07

レイアウト編集画面
ブラー設定機能

上部やカード、イベント編集などに適用するブラーを選択する。

F09-08

レイアウト編集画面
上部背景設定機能

上部背景の透明表示と暗さを設定する。

F09-09

レイアウト編集画面
UI設定機能

新規作成ボタンを画面下端に配置するかを設定する。

F09-10

レイアウト編集画面
画像設定機能

イベント一覧の背後にある文字・選択枠の不透明度と、カレンダー背景を設定する。

F09-11

レイアウト編集画面
カレンダー背景設定機能

背景画像ごとに設定したトランジションを一覧で確認・編集する。

F09-12

レイアウト編集画面
トランジション設定機能

画像の移動・回転・拡大縮小と、連動するカレンダー操作を設定する。

F09-13

レイアウト編集画面
画像の開始位置設定機能

トランジション開始時の画像の位置・角度・拡大率を調整する。

F09-14

レイアウト編集画面
画像の終了位置設定機能

トランジション終了時の画像の位置・角度・拡大率を調整する。

画像をタップすると原寸表示に切り替わります。