search
LoginSignup
10
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

画像でわかる「テンプレート早見表」【Ionic】

開発環境

開発環境(ionic infoの結果)は、以下の通りだが、Ionic3で実行した。
スクリーンショット 2018-10-20 11.42.44.png

テンプレート一覧

テンプレート名 概要
tabs タブのついたもの
blank シンプルなホーム画面のみのもの
sidemenu トグルメニューのついたもの
super 色々な機能の詰まったもの
tutorial sidemenuと基本的に同じもの
aws awsに対応したもの

スクリーンショット 2018-10-19 11.12.45.png

【tabs】

tabs.png

【blank】

blank.png

【sidemenu】

スクリーンショット 2018-10-20 11.15.47.png
スクリーンショット 2018-10-20 11.16.02.png

【super】

初期画面(チュートリアル画面

Tutorial.png
スクリーンショット 2018-10-20 11.18.57.png
スクリーンショット 2018-10-20 11.19.21.png
スクリーンショット 2018-10-20 11.19.38.png

サイドメニュー

チュートリアルを終えると、ログインするための画面(Welcome画面)になる。
Welcome.png

ここで、左からフリックし、サイドメニューを出すと11個の項目を含むナビゲーション画面が出る。
スクリーンショット 2018-10-20 11.23.07.png

1. Tutorial

Tutorial.png

2. Welcome

Welcome.png

3. Tabs

Tabs.png

4. Cards

Cards.png

5. Content

Content:Menu.png

6. Login

Login.png

7. Signup

Signup.png

8. Master Detail

MasterDetail.png

9. Menu(Contentと同じ)

Content:Menu.png

10. Settings

Settings.png

11. Search

Search.png

【tutorial】

turorial.png

【aws】

AWS Mobile Hub Starter.
AWSのモバイルアプリを作成する際に利用するプロジェクト。
作成したプロジェクト下のREADME.mdに使用方法が書かれている。

AWSとは?

Amazon Web Serviceのこと。

参考URL

`ionic start`の"aws"って何なの? - ionic-angular AWS Mobile Hub Starterを使ってみた

Tips

Ionic Labについて

ionic serveした後、http://localhost:8100/ionic-lab にアクセスすると、iOS/Android/Windowsの画面が表示される。
スクリーンショット 2018-10-20 13.40.11.png

Ionic Marketについて

Ionic Marketでは、様々なテンプレートやプラグインを購入することができる。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
10
Help us understand the problem. What are the problem?