概要
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のユーザー名にします）.zshrcexport 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>
<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があります。その中にスタイルを追加します。
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で確認するとこの様になっています。