CONTENT
ここから
1.1 この教材で作成するアプリ
この教材では、Flutterを使って、スマートフォンの画面上に3Dモデルを表示するアプリを作成します。表示されたモデルは、指でなぞると向きを変えられ、ピンチ操作によって拡大・縮小できます。
単に完成したプログラムを書き写すのではなく、画面の作成、外部パッケージの利用、状態管理、エラー処理という順序で、機能を一つずつ追加していきます。各段階でアプリを起動し、変更した内容がどのように画面へ反映されるのかを確認しながら進めます。
1.2 完成アプリでできること
完成するアプリには、主に次の機能があります。
- インターネット上の3Dモデルを読み込む
- 3Dモデルを画面内に表示する
- 指のドラッグ操作でモデルを回転させる
- ピンチ操作でモデルを拡大・縮小する
- カメラ位置を初期状態へ戻す
- 読み込み中であることを画面に表示する
- 読み込みに失敗した場合にエラーを表示する
- ボタン操作で3Dモデルを再読み込みする
3Dモデルを表示するだけでなく、読み込み中や失敗時の状態も扱います。これにより、実際のアプリ開発で必要になる「正常に動いた場合」と「正常に動かなかった場合」の両方を学べます。
1.3 アプリを構成するファイル
この教材で扱うプログラムは、役割ごとに複数のファイルへ分けられています。
main.dartは、アプリを起動し、最初に表示する画面を決めるファイルです。Flutterアプリ全体の入口にあたります。
model_viewer_screen.dartは、3Dモデルを表示する画面を担当します。画面レイアウト、3Dビューアー、読み込み状態、エラー表示、ボタン操作など、利用者が直接触れる部分がまとめられています。
model_source.dartは、3DモデルのURLや名前、クレジット表記などを管理します。画面の処理と設定値を分離することで、モデルを変更するときに修正箇所を見つけやすくします。
pubspec.yamlは、アプリ名、Dartの実行環境、利用するパッケージなどを設定するファイルです。このアプリでは、3Dモデル表示、HTTP通信、端末内の保存場所を扱うためのパッケージが登録されています。
1.4 実装の順番と学習の進め方
教材は、最初からすべての機能を実装するのではなく、動作する小さな状態を積み重ねて進めます。
まずFlutterアプリを起動し、文字だけの簡単な画面を表示します。次に3Dモデルを表示する領域を作り、外部パッケージを使ってモデルを読み込みます。その後、読み込み中、完了、失敗という状態を追加し、状態に応じて画面表示を切り替えます。
各節では、実装前に「何を作るのか」を確認し、実装後に「何が変わったのか」を確認します。エラーが発生した場合も、すぐに完成コードへ置き換えるのではなく、エラーメッセージと変更箇所の関係を確認してください。
1.5 この章の到達目標
この章の終了時点では、まだプログラムを変更する必要はありません。次の内容を説明できれば、この章の学習は完了です。
- 完成するアプリの機能
- 3Dモデルを操作する方法
- 各ファイルのおおまかな役割
- 機能を段階的に追加する理由
- 読み込み状態やエラー処理が必要な理由
次章から、Flutterプロジェクトを準備し、実際にアプリを起動していきます。