Ionicで簡易コーポレートサイト（アプリ）を作成する #1 -TOP画面編-

# 概要
Ionicでウェブサイトを再現してみます。
Ionicにはネイティブを制御するためのライブラリとしてcordova（昔）、capacitor（今）がありますが、社内都合上cordovaを使っています。
> Androidで試す場合、AndroidSDKとJavaが必要です。
[Java](https://www.oracle.com/jp/java/technologies/downloads/#jdk19-mac)、[AndroidStudio](https://developer.android.com/studio)がインストールされていることを前提にしています。
**※Cordovaは最新バージョンのJavaと互換性がありません（原則Java8で動作）。**

> iOSで試す場合、xcodeが必要です。xcodeがインストールされていることを前提にしています。

# 完成イメージ
<img width="300" alt="000060.jpg" src="https://dl.dropbox.com/s/t2pkofjd30580ko/000060.jpg">


# プロジェクト作成
## Ionicのインストール
端末で直接テストするために、native-runとCordovaをインストールします。
> native-runはemulateやrunコマンドの実行に必要なので先に入れておきます。

```
npm install -g @ionic/cli
npm i -g native-run 
npm i -g cordova
```

## プロジェクトの作成
プロジェクトを作成します。今回はionic-websiteとしました。

```
ionic start ionic-website blank --type=angular --cordova
```

テンプレートを選択します。
必須の構造のみのblankを選択します。

プロジェクトが作成されたら、プロジェクト名でフォルダができているので、フォルダの中に移動して、起動させてみます。


### ブラウザで動作確認
```
cd ionic-website
ionic serve
```
するとこのような画面が表示されます。
> 以降作成イメージでiphoheのイメージを載せていますが、基本的には`ionic serve`で確認して実装していくのが楽だと思います。

<img src="https://dl.dropbox.com/s/fw8gccnopj3rqzb/000001.jpg" alt="000010.jpg">

### Android

#### Android SDK
現在ionicではバージョン30.0.3が必要です。
「SDK Manager」 > 「SDK Tools」 > Show package Detailsにチェックを入れて「30.0.3」を選択 > 「Apply」をクリック > 「OK」で閉じます。

#### Gradle
Androidアプリで使用されるビルドツールの[Gradle](https://gradle.org/install/)が必要なので、手動で[公式](https://gradle.org/releases/)からダウンロードし、PATHを更新します。

> MacOSではbrewでインストールできます。
>
>```bash
>brew install gradle
>```
>パスを通します。
>
>```bash
>vi .zshrc
>```
>
>`i`でinsertモードにして下記をコピペします。（{user}はPCのユーザー名にします）
>
>```.zshrc
>export PATH=/Users/{user}/Library/Android/sdk:$PATH
>export PATH=/Users/{user}/Library/Android/sdk/platform-tools:$PATH
>```
>
>`esc`を押して`:wq`で閉じます。
>.zshrcを適用します。
>
>```bash
>source .zshrc
>```
>
>ターミナルを閉じます。


インストールが完成したら、新しいターミナルを起動し、プロジェクトのフォルダに戻って、
下記のコマンドを使います。

```
ionic cordova emulate android
```

<img width=300 src="https://dl.dropbox.com/s/bpzcgqrm7x2ay5j/000020.jpg" alt="000020.jpg" />

### iOS
ターミナルからプロジェクトフォルダに移動して以下で起動します。

```
ionic cordova emulate ios
```

<img width="300" src="https://dl.dropbox.com/s/wre8n1343lbeyzk/000040.jpg" alt="000040.jpg" />

:::note info
実機で確認する場合は事前にiPhoneの方をdeveloperモードに設定します。
MacでXcodeを起動した状態でiPhoneを接続しないとDeveloper Modeは設定できません。
設定->プラバシ->developerモード-> ON
XcodeとAppleのDevアカウントが必要です。
Xcodeの設定にDevアカウントを追加します。
Signing & Capabilitiesのタブで、チームを自分のdevアカウントと紐付けて実機を指定して実行します。
:::


# Top画面作成
VSCodeでionic-websiteフォルダを開いて編集していきます。
src/appフォルダの中にすでにあるHomeフォルダに入り、更新します。

## home.page.html

```diff_javascript:home.page.html
- <ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Blank
-    </ion-title>
-  </ion-toolbar>
- </ion-header>

<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Blank</ion-title>
-    </ion-toolbar>
-  </ion-header>

-  <div id="container">
-    <strong>Ready to create an app?</strong>
-    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-  </div>
+ <div id="Top">
+    <p id="Title">bluecode, Lifestyle developer.</p>
+  </div>
+  <div id="Content">
+    <p>websiteの最新情報</p>
+    <p>最新の情報をご案内します。</p>
+  </div>
</ion-content>
```

```コピペ用home.page.html
<ion-content [fullscreen]="true">
  <div id="Top">
    <p id="Title">bluecode, Lifestyle developer.</p>
  </div>
  <div id="Content">
    <p>websiteの最新情報</p>
    <p>最新の情報をご案内します。</p>
  </div>
</ion-content>
```
<img width="300" src="https://dl.dropbox.com/s/lzs4ki9qqjumkmw/000050.jpg" alt="000050.jpg" />


## スタイル

Ionicはグロバルとページごとのスタイルファイルがあります。global.scssとページごとに{ページ}.scssがあります。その中にスタイルを追加します。

```home.page.scss
ion-content {
  --ion-background-color: white;
}

#Top {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  padding-top: 100px;
  padding-bottom: 60px;
  background-image: url(https://picsum.photos/1000/300);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#Title {
  color: white;
}

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

#Content {
  color: black;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  display: flex;
  padding-top: 30px;
}
```

ion-contentのデフォルトバック色は黒なのでそれを白にします。
保存して、下記のコマンドを実行して確認します。
（`ionic serve`で確認でOKです）

```
ionic cordova emulate ios
```

iPhone14で確認するとこの様になっています。

<img width=300 src="https://dl.dropbox.com/s/t2pkofjd30580ko/000060.jpg" alt="000060.jpg" />

# 関連コンテンツ

* 次：[Ionicで簡易コーポレートサイト（アプリ）を作成する #2 -Contact画面編-](https://qiita.com/minimumskills/private/78c450595274d78803d6)
* [超シンプルなWeb（アプリ）作成を通して各種フロントエンド技術を体験する - 2023 Early -](https://qiita.com/minimumskills/private/9e7efe86e244bb9844b0)