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

はじめまして、ますみです！

[![自己紹介.png](https://www.umi-mori.jp/wp-content/uploads/2023/02/introduction_banner_2-2048x533.png)](https://bit.ly/banner_intro_masumi_creator_qiita)


# 開発環境
開発環境（`ionic info`の結果）は、以下の通りだが、`Ionic3`で実行した。
<img width="300" alt="スクリーンショット 2018-10-20 11.42.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/24aee13c-8caa-483e-8973-bb0992706eef.png">

# テンプレート一覧

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

<img width="800" alt="スクリーンショット 2018-10-19 11.12.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/1a54d7a6-0169-073f-6102-36d11e68875e.png">


## 【tabs】
<img width="800" alt="tabs.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/5821569d-6c6a-1e46-fa7d-91887c94f7e2.png">

## 【blank】
<img width="800" alt="blank.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/55fd9107-3cf0-66dc-931a-fb4d4932f82e.png">

## 【sidemenu】
<img width="800" alt="スクリーンショット 2018-10-20 11.15.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/f4a8c5ae-d457-8343-5760-249ee3fb4875.png">
<img width="800" alt="スクリーンショット 2018-10-20 11.16.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/593a5dc3-f0f8-06e2-74c7-f2cc82f1c8b3.png">

## 【super】
### 初期画面（`チュートリアル画面`）
<img width="800" alt="Tutorial.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/a67fd314-fa64-47bf-b4b1-20c1ed7e8f65.png">
<img width="800" alt="スクリーンショット 2018-10-20 11.18.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/aded7f22-2582-b92f-848d-536aa5059bae.png">
<img width="800" alt="スクリーンショット 2018-10-20 11.19.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/6de46b0d-46dc-13f0-93e5-d85ffb4101fc.png">
<img width="800" alt="スクリーンショット 2018-10-20 11.19.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/56b78356-9c12-f335-2d29-d01da67a3557.png">

### サイドメニュー
チュートリアルを終えると、ログインするための画面（`Welcome画面`）になる。
<img width="800" alt="Welcome.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/3221a9e6-d904-4898-1cd8-f65ce0078a9d.png">

ここで、左からフリックし、サイドメニューを出すと11個の項目を含む`ナビゲーション画面`が出る。
<img width="800" alt="スクリーンショット 2018-10-20 11.23.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/27042d61-7a53-cdde-47be-6537aa40debe.png">

### 1. Tutorial
<img width="800" alt="Tutorial.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/6daae950-10d8-5fe7-cff7-fc80ce6469f8.png">

### 2. Welcome
<img width="800" alt="Welcome.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/35c8881f-09b1-4507-f8f3-db08e3a2c24e.png">

### 3. Tabs
<img width="800" alt="Tabs.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/f92b14b1-b1ee-4a0e-41ca-ac9e26cd4df1.png">

### 4. Cards
<img width="800" alt="Cards.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/10f121a0-3965-2351-41a3-4f99ab71b68d.png">

### 5. Content
<img width="800" alt="Content:Menu.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/49d9b617-1eda-e89d-0889-af8473341fc5.png">

### 6. Login
<img width="800" alt="Login.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/323d2735-2717-7d19-bf73-325a6688bcaa.png">

### 7. Signup
<img width="800" alt="Signup.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/c13e6f76-98ce-fe3d-e3ae-f9094c0dd5a4.png">

### 8. Master Detail
<img width="800" alt="MasterDetail.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/3c632933-07ef-acc2-5a18-2900db118ebf.png">

### 9. Menu（Contentと同じ）
<img width="800" alt="Content:Menu.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/66656b51-2ed2-2eb7-ec66-44fa171d232d.png">

### 10. Settings
<img width="800" alt="Settings.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/d079caa8-c7ff-e878-be5e-4674d0659c31.png">

### 11. Search
<img width="800" alt="Search.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/e9fab1cd-afec-2053-f19e-b53b3eb63779.png">

## 【tutorial】
<img width="800" alt="turorial.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/e804f193-1c6c-ab4a-528b-094f7d4d8ee0.png">

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

### AWSとは？
[Amazon Web Service](https://aws.amazon.com/jp/about-aws/)のこと。

### 参考URL
[\`ionic start`の"aws"って何なの？ - ionic-angular AWS Mobile Hub Starterを使ってみた](https://qiita.com/ysd_marrrr/items/a4803eba3a29d771b62b)

# Tips
## Ionic Labについて
`ionic serve`した後、http://localhost:8100/ionic-lab にアクセスすると、iOS/Android/Windowsの画面が表示される。
<img width="1440" alt="スクリーンショット 2018-10-20 13.40.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/bbceb739-28be-f481-6716-9e3522d316af.png">

## Ionic Marketについて

# 最後に
最後まで読んでくださり、ありがとうございました！
いかがだったでしょうか？

この記事を通して、少しでもあなたの学びに役立てば幸いです！

:::note info
【仕事の相談はこちら】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。

[問い合わせフォームはこちら](https://forms.gle/G5g1SJ7BBZw7oXYA7)

もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。

info*galirage.com（*を@に変えてご送付ください）

🎁 「生成AI活用の無料相談券」もしくは「生成AIの社内ガイドライン（無料PDF）」を『公式LINE』で配布中 🎁
『生成AIを業務に活用したいけど、どうしたらいいかわからない』といった声を多くいただきます。

Galirageでは公式LINEにて、チャットやオンライン会議で「完全個別の生成AI活用無料相談会」を実施しております！
（期間限定で実施しているため、ご興味ある方はお早めに以下のLINE公式アカウントをご登録ください^^）
https://lin.ee/rvz6lMN

※ 予告なく、キャンペーンを終了する可能性がございますが、ご了承ください。

【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（[詳しくはこちら](https://galirage.notion.site/Galirage-AI-c2f3945fafb0433d8d2fd03e56927fd8)）
1. 受託開発（例：生成AIを使った社内システムの開発）
2. コンサルティング（例：技術戦略のアドバイス）
3. 講演（例：社内研修、イベント登壇）

※ 特に「生成AIを使ったシステム開発のご依頼」が多く、ご好評いただいております。

【これまでの相談事例】
以下のようなご相談が多くあります。

🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。
:::
# おまけ
エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉

「**一緒に仕事をしてくれる方**」「**友だちとして仲良くしてくれる方**」は、友だち追加をしていただけますと嬉しいです！（仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆）

とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました！

友だち追加後に、アンケートに回答してくれた方へ「**エンジニア図鑑（職種20選）**」のPDFをお送りします◎

https://lin.ee/hFUN4TL

[![](https://www.umi-mori.jp/wp-content/uploads/2023/10/line_banner_v2.png)](https://lin.ee/hFUN4TL)