📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
ページの作成:「== 概要 == Ionicは、HTML、CSS、JavaScriptを使用してクロスプラットフォームのモバイルアプリケーションを開発するためのオープンソースフレームワークである。<br> 2013年にDrifty社 (現Ionic) によって開発が開始され、現在も活発に開発が続けられている。<br> <br> IonicはWebの標準技術をベースにしながら、ネイティブアプリのような見た目と操作感を実現で…」 |
|||
| (同じ利用者による、間の4版が非表示) | |||
| 85行目: | 85行目: | ||
プロジェクトの作成において、Frameworkおよびテンプレートの種類 (blank / tabs / sidemenu) についての質問がある。<br> | プロジェクトの作成において、Frameworkおよびテンプレートの種類 (blank / tabs / sidemenu) についての質問がある。<br> | ||
* フレームワーク | * フレームワーク | ||
*: Anguler / React / | *: Anguler / React / Vue | ||
* テンプレートの種類 | * テンプレートの種類 | ||
*: blank / | *: tabs / sidemenu / blank / list / my-first-app | ||
* コンポーネントの選択 | |||
*: StandaloneコンポーネントはAngularの新しいビルド方法であり、アプリケーションのビルド方法を簡素化する。 | |||
*: Standalone / NgModules | |||
<br> | <br> | ||
==== ionic startに関するオプション ==== | |||
===== --capacitorオプション ===== | |||
<code>--capacitor</code>オプションは、Ionicプロジェクト作成時にCapacitorの統合を含めるためのオプションである。<br> | |||
<br> | |||
Capacitorの特徴<br> | |||
* ネイティブ機能へのアクセス | |||
*: カメラ、GPS、ファイルシステム等のデバイスの機能を利用可能 | |||
*: プラットフォーム固有のAPIへのアクセスが可能 | |||
*: <br> | |||
* クロスプラットフォーム開発 | |||
*: iOSとAndroidの両方のプラットフォーム用のコードを生成 | |||
*: 同じコードベースから複数のプラットフォームにデプロイ可能 | |||
*: <br> | |||
* プロジェクト構造 | |||
*: Capacitor用の設定ファイルが自動生成される | |||
*: プラットフォーム固有のプロジェクトフォルダ (iOS / Android) が作成される。 | |||
<br> | |||
# プロジェクトにCapacitorが統合される | |||
# capacitor.config.tsファイルが生成される | |||
# ネイティブプラットフォーム用のビルドコマンドが使用可能になる | |||
ionic start myApp blank --capacitor | |||
<br> | |||
Capacitorを後から追加することも可能であるが、プロジェクト作成時において<code>--capacitor</code>オプションを使用する時、初期設定が自動的に行われて、開発をスムーズに始められる。<br> | |||
<br> | |||
===== --capacitorオプション ===== | |||
==== Ionicアプリケーションの起動 (オプション) ==== | |||
作成したプロジェクトに移動する。<br> | 作成したプロジェクトに移動する。<br> | ||
cd <プロジェクト名> | cd <プロジェクト名> | ||
<br> | <br> | ||
プロジェクトを起動する。<br> | プロジェクトを起動する。<br> | ||
組み込まれているWebサーバが http://localhost: | 組み込まれているWebサーバが http://localhost:8100 として起動する。<br> | ||
ionic serve | ionic serve | ||
# または | # または | ||
npx ionic serve | npx ionic serve | ||
<br> | |||
===== Ionicアプリケーションのビルド ===== | |||
Ionicのプロジェクトディレクトリにおいて、アセット等をビルドする。<br> | |||
ionic build # 開発用の設定でアプリケーションをビルド (デバッグ情報やソースマップが含まれており、ファイルは最適化されていない状態) | |||
ionic build --prod # 本番環境向けのビルドを実行 (コードの最小化と圧縮を行い、不要なコードを削除) | |||
ionic build --watch # 開発モードでビルドを実行 (ファイルの変更を監視して、コードを変更すると自動的に再ビルドが実行されるため、ライブリロード開発に便利) | |||
# または | |||
npx ionic build # 開発用の設定でアプリケーションをビルド (デバッグ情報やソースマップが含まれており、ファイルは最適化されていない状態) | |||
npx ionic build --prod # 本番環境向けのビルドを実行 (コードの最小化と圧縮を行い、不要なコードを削除) | |||
npx ionic build --watch # 開発モードでビルドを実行 (ファイルの変更を監視して、コードを変更すると自動的に再ビルドが実行されるため、ライブリロード開発に便利) | |||
<br> | |||
==== 警告およびエラー ==== | |||
===== 警告 : ionic serveコマンド ===== | |||
以下に示すような警告が出力される場合がある。<br> | |||
[ng] ▲ [WARNING] Unable to initialize JavaScript cache storage. [plugin angular-compiler] | |||
[ng] Cannot find module 'lmdb' | |||
[ng] This will not affect the build output content but may result in slower builds. | |||
[ng] ▲ [WARNING] Unable to initialize JavaScript cache storage. [plugin angular-compiler] | |||
[ng] Cannot find module 'lmdb' | |||
<br> | |||
この警告は、AngularのコンパイラプラグインがJavaScriptのキャッシュストレージを初期化できないことを示している。<br> | |||
lmdb (Lightning Memory-Mapped Database) モジュールが見つからないことが原因である。<br> | |||
<br> | |||
llmdをインストールすることにより、警告を解消することができる。<br> | |||
ただし、この警告は無視しても実際のアプリケーションの動作には影響しないため、ビルド時間が気にならない場合は対応は必須ではない。<br> | |||
もし、開発環境でのビルド時間を最適化する場合にのみ、lmdbをインストールする。<br> | |||
npm install lmdb | |||
<br><br> | |||
== ドキュメントルートの指定 == | |||
NginX / Apache2 / LightSpeed等のWebサーバを使用する場合、ドキュメントルートは以下に示すディレクトリを指定する。<br> | |||
* /<Ionicプロジェクトのルートディレクトリ>/www | |||
<br><br> | <br><br> | ||