写真共有アプリの作成
写真共有アプリを作りたい時
温泉UIを利用することで、現在のトップ写真共有アプリに対抗できるアプリを作ることができます。
そのために、このチュートリアルでは、有名な「Instagram」アプリと似たようなインターフェイスを持つユーザーインターフェイステンプレートを作ることにしました。
このテンプレートで使用している温泉UIコンポーネントは以下の通りです。
- ons-tabbar - テンプレートの構造を作るために使用されるメインコンポーネント
- ons-toolbar - 特定のボタンでアプリの異なるページにツールバーを作成するためのものです。
- ons-button - アプリ上のほとんどすべてのボタンに使用され、シンプルなボタンの外観を与えるために ons-icon と組み合わせて使用されます。
- ons-list - コンテンツが投稿や画像で構成されているため、ほぼすべてのページでコンテンツを構造化するために使用されます
- ons-row と ons-col - 写真をグリッド表示するためのページの構造化を容易にするために
- ons-carousel - ストーリーのスライドリストを作成するためのものです。
- ons-card - ホームとプロフィールページに投稿を表示するためのものです。
=========================
テンプレートの構造
テンプレートは、同じ順番で5つのページから構成されています。
- ホームページ - ユーザーからの投稿やストーリーを表示するためのページ
- 検索ページ - 特定のコンテンツを検索するための
- カメラのページ - 新しい投稿を追加するための
- 通知ページ - ユーザーの投稿や他のユーザーの活動全般に関する最近の活動についての通知を表示するためのページです。
- プロフィールページ - ユーザーのプロフィールに関する情報を表示するためのページです。
検索ページ
このページには、このページの主な目的である特定のコンテンツを検索するための検索入力を含むオンスツールバーがあります。
また、メインページと同様に実装されているストーリーで満たされたcarosuelと、検索結果が表示される画像グリッドが含まれています。
カメラのページ
これは実際のカメラ機能を実装しておらず、単にカメラページを表示しているだけのユーザーインターフェーステンプレートなので、カメラページを表示しているだけでは、カメラの機能を実装しているとは言えません。
プロフィールページ
このページでは、ユーザーのプロフィールページと、フォローしているユーザーとフォローされているユーザーの数を表示し、その後、アイコンのバーと、投稿された写真のグリッドまたはリストが表示されます。このテンプレートでは、プロフィール情報の下のバーにあるそれぞれのアイコンをタップすることで、グリッドとリストの表示を切り替えることができます。