概要

Ionicでウェブサイトを再現してみます。
Ionicにはネイティブを制御するためのライブラリとしてcordova（昔）、capacitor（今）がありますが、社内都合上cordovaを使っています。

Androidで試す場合、AndroidSDKとJavaが必要です。
Java、AndroidStudioがインストールされていることを前提にしています。
※Cordovaは最新バージョンのJavaと互換性がありません（原則Java8で動作）。

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

完成イメージ

プロジェクト作成

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で確認して実装していくのが楽だと思います。

Android

Android SDK

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

Gradle

Androidアプリで使用されるビルドツールのGradleが必要なので、手動で公式からダウンロードし、PATHを更新します。

MacOSではbrewでインストールできます。
brew install gradle
パスを通します。
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を適用します。
source .zshrc
ターミナルを閉じます。

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

ionic cordova emulate android

iOS

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

ionic cordova emulate ios

実機で確認する場合は事前に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

- <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>

スタイル

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で確認するとこの様になっています。

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

概要