月カレンダー画面
月カレンダーを表示する。左右のスクロールに応じて月の切り替えが可能。上下で月カレンダーと週カレンダーの切り替えも可能。
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
38件
月カレンダーを表示する。左右のスクロールに応じて月の切り替えが可能。上下で月カレンダーと週カレンダーの切り替えも可能。
週カレンダーを表示する。左右のスクロールに応じて週の切り替えが可能。上下で月カレンダーと週カレンダーの切り替えも可能。
カレンダーのイベントを編集する。
編集中の項目は強調表示する。
テキストがキーボードに隠れる位置の場合、アニメーションでモーダル全体の位置を上に補正する。
テキストが入力モーダルに隠れる位置の場合、アニメーションでモーダル全体の位置を上に補正する。
カレンダーの選択セルにイベントがある場合、イベント一覧にイベントを表示する。
イベント名と期間を編集する。
移動ボタンからイベントを下部に固定して別のカレンダーセルに移動する。
コピーボタンからイベントを下部に固定して別のカレンダーセルにコピーする。
アンカーボタンからイベントを下部に固定してどこでもそのセルに移動するボタンを設置する。
イベントの移動やコピー時ドラッグでイベントを移動やコピーを行う。
イベントの移動やコピー、アンカー時、イベント左下に固定する。
月カレンダー、週カレンダーの左右の角のセルにドラッグすると、カレンダーをページ送りする。また、月カレンダーの下、週カレンダーの上にドラッグするとカレンダーを切り替える。
週カレンダーの時間がまとまったセルにドラッグすると時間セルを展開する。
各設定画面への移動と画面モードの切り替えを行う。
レイアウトを選択し、ライト・ダークモードに登録する。
曜日の色とカレンダーのデータソースを設定する。
曜日ごとの文字色を設定する。
カレンダーをアカウントごとに表示し、新規予定の登録先を選択する。
カレンダー名と保存先のアカウントを指定してカレンダーを作成する。
予定の表示方法と編集可否、登録先を設定する。カレンダーの削除も可能。
読み取り専用カレンダーの予定の表示方法と、祝日としての表示を設定する。
ライト・ダークモードごとに適用レイアウトと切り替え順を設定する。
適用レイアウトと並び順を初期状態に戻す。画像キャッシュのリセットも可能。
レイアウト名と適用する画面モードを設定する。フォークでレイアウトの複製も可能。
プリセットからカレンダーの配色を選択する。
設定したレイアウトをプレビューで確認する。左右のスクロールで表示を切り替える。
配色、ブラー、上部の背景を個別に設定する。
背景や文字、罫線などの色と、非活性アイコンの不透明度を設定する。
曜日に使用する赤・青・水色をレイアウトごとに変更する。
上部やカード、イベント編集などに適用するブラーを選択する。
上部背景の透明表示と暗さを設定する。
新規作成ボタンを画面下端に配置するかを設定する。
イベント一覧の背後にある文字・選択枠の不透明度と、カレンダー背景を設定する。
背景画像ごとに設定したトランジションを一覧で確認・編集する。
画像の移動・回転・拡大縮小と、連動するカレンダー操作を設定する。
トランジション開始時の画像の位置・角度・拡大率を調整する。
トランジション終了時の画像の位置・角度・拡大率を調整する。
一致する機能がありません。検索語やカテゴリを変更してください。