インストール - Ionic - 版の履歴

Wiki: /* Ionicのインストール */

2025-02-02T15:20:44Z

Ionicのインストール

@@ 92行目: / 92行目: @@
 *: Standalone / NgModules
 <br>
 ==== Ionicアプリケーションの起動 (オプション) ====
 作成したプロジェクトに移動する。<br>

Wiki: /* 警告およびエラー */

2025-02-02T14:19:52Z

警告およびエラー

← 古い版		2025年2月2日 (日) 23:19時点における版
128行目:		128行目:
	llmdをインストールすることにより、警告を解消することができる。<br>		llmdをインストールすることにより、警告を解消することができる。<br>
	ただし、この警告は無視しても実際のアプリケーションの動作には影響しないため、ビルド時間が気にならない場合は対応は必須ではない。<br>		ただし、この警告は無視しても実際のアプリケーションの動作には影響しないため、ビルド時間が気にならない場合は対応は必須ではない。<br>
	~~もし、開発環境でのビルド時間を最適化する場合にのみ、lldbをインストールする。~~<br>		もし、開発環境でのビルド時間を最適化する場合にのみ、lmdbをインストールする。<br>
	npm install lmdb		npm install lmdb
			<br><br>

			== ドキュメントルートの指定 ==
			NginX / Apache2 / LightSpeed等のWebサーバを使用する場合、ドキュメントルートは以下に示すディレクトリを指定する。<br>
			* /<Ionicプロジェクトのルートディレクトリ>/www
	<br><br>		<br><br>

Wiki: /* Ionicのインストール */

2025-02-02T14:13:55Z

Ionicのインストール

@@ 92行目: / 92行目: @@
 *: Standalone / NgModules
 <br>
-Ionicのプロジェクトディレクトリにおいて、アセット等をビルドする。<br>
+==== Ionicアプリケーションの起動 (オプション) ====
 作成したプロジェクトに移動する。<br>
   cd <プロジェクト名>
@@ 113行目: / 101行目: @@
   # または
   npx ionic serve
 <br>
 ==== 警告およびエラー ====

Wiki: /* Ionicのインストール */

2025-02-02T14:08:50Z

Ionicのインストール

@@ 92行目: / 92行目: @@
 *: Standalone / NgModules
 <br>
 ==== Ionicの起動 ====
 作成したプロジェクトに移動する。<br>

Wiki: /* Ionicのインストール */

2025-02-02T13:47:09Z

Ionicのインストール

← 古い版		2025年2月2日 (日) 22:47時点における版
85行目:		85行目:
	プロジェクトの作成において、Frameworkおよびテンプレートの種類　(blank / tabs / sidemenu)　についての質問がある。<br>		プロジェクトの作成において、Frameworkおよびテンプレートの種類　(blank / tabs / sidemenu)　についての質問がある。<br>
	* フレームワーク		* フレームワーク
	*: Anguler / React /		*: Anguler / React / Vue
	* テンプレートの種類		* テンプレートの種類
	*: blank / ~~tabs~~ / ~~sidemenu~~		*: tabs / sidemenu / blank / list / my-first-app
			* コンポーネントの選択
			*: StandaloneコンポーネントはAngularの新しいビルド方法であり、アプリケーションのビルド方法を簡素化する。
			*: Standalone / NgModules
	<br>		<br>
			==== Ionicの起動 ====
	作成したプロジェクトに移動する。<br>		作成したプロジェクトに移動する。<br>
	cd <プロジェクト名>		cd <プロジェクト名>
	<br>		<br>
	プロジェクトを起動する。<br>		プロジェクトを起動する。<br>
	組み込まれているWebサーバが http://localhost:~~5100~~ として起動する。<br>		組み込まれているWebサーバが http://localhost:8100 として起動する。<br>
	ionic serve		ionic serve
	# または		# または
	npx ionic serve		npx ionic serve
			<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>
			もし、開発環境でのビルド時間を最適化する場合にのみ、lldbをインストールする。<br>
			npm install lmdb
	<br><br>		<br><br>

Wiki: ページの作成:「== 概要 == Ionicは、HTML、CSS、JavaScriptを使用してクロスプラットフォームのモバイルアプリケーションを開発するためのオープンソースフレームワークである。
2013年にDrifty社 (現Ionic) によって開発が開始され、現在も活発に開発が続けられている。

IonicはWebの標準技術をベースにしながら、ネイティブアプリのような見た目と操作感を実現で…」

2025-02-02T13:31:55Z

ページの作成:「== 概要 == Ionicは、HTML、CSS、JavaScriptを使用してクロスプラットフォームのモバイルアプリケーションを開発するためのオープンソースフレームワークである。 2013年にDrifty社 (現Ionic) によって開発が開始され、現在も活発に開発が続けられている。 IonicはWebの標準技術をベースにしながら、ネイティブアプリのような見た目と操作感を実現で…」

新規ページ

== 概要 ==
Ionicは、HTML、CSS、JavaScriptを使用してクロスプラットフォームのモバイルアプリケーションを開発するためのオープンソースフレームワークである。 
2013年にDrifty社 (現Ionic) によって開発が開始され、現在も活発に開発が続けられている。 
 
IonicはWebの標準技術をベースにしながら、ネイティブアプリのような見た目と操作感を実現できる点が挙げられる。 
具体的には、Angular、React、Vue等の主要なJavaScriptフレームワークと組み合わせることができ、1度作成したコードからiOS、Android、Web向けのアプリケーションを生成できる。 
 
Ionicの重要な技術的基盤として、Apache Cordovaがある。 
Cordovaは、WebViewを使用してアプリケーションを実行して、デバイスのネイティブ機能 (カメラ、GPS、加速度センサ等) へのアクセスを可能にする。 
また、最新バージョンではCapacitorという新しいクロスプラットフォームランタイムも導入されており、よりモダンな開発体験を提供している。 
 
UIコンポーネントでは、Ionicは豊富なコンポーネントライブラリを提供している。 
これらのコンポーネントは各プラットフォームのデザインガイドラインに準拠しており、例えば、iOSではiOS標準のデザイン、Androidではマテリアルデザインに自動的に適応する。 
代表的なコンポーネントとしては、ナビゲーションバー、タブ、リスト、カード、フォーム要素等がある。 
 
パフォーマンスに関しては、Ionicは最適化されたレンダリングエンジンを採用しており、スムーズなアニメーションや高速な画面遷移を実現している。 
また、仮想スクロールやレイジーローディング等の機能により、大量のデータを扱う場合でも効率的な動作を可能にしている。 
 
開発環境については、Ionic CLIを使用することにより、プロジェクトの作成からビルド、デプロイメントまでをコマンドラインから行うことができる。 
また、開発中はライブリロード機能により、コードの変更がリアルタイムでプレビューに反映されるため、効率的な開発が可能である。 
 
セキュリティ面では、WebViewベースのアプリケーションとして一般的な脆弱性対策が必要となるが、適切な実装を行うことにより十分なセキュリティレベルを確保できる。 
 

== 競合となるフレームワーク ==
<center>
{| class="wikitable" | style="background-color:#fefefe;"
|+ 各フレームワークの特性を比較す
|-
! style="background-color:#66CCFF;" | フレームワーク名
! style="background-color:#66CCFF;" | 特徴
|-
| Ionic || Web技術に精通した開発者向けで開発の容易さに優れている。
|-
| React Native || パフォーマンスとネイティブ体験の提供に強みがある。
|-
| Flutter || 独自の開発体験と高いパフォーマンスがある。
|}
</center>
 

==== React Native ====
Facebookが開発したフレームワークであり、JavaScriptとReactの知識を活用しながら、実際のネイティブコンポーネントを使用してアプリケーションを構築できる。 
 
IonicがWebViewベースであるのに対して、React Nativeはネイティブコンポーネントを使用するため、より高いパフォーマンスを実現できる点が特徴である。 
 
==== Flutter ====
Googleが開発したフレームワークであり、Dart言語を使用する。 
独自のレンダリングエンジンを採用しており、60FPSの滑らかなアニメーションと高いパフォーマンスを実現できる。 
 
また、豊富なウィジェットライブラリとホットリロード機能により、効率的な開発が可能である。 
 
==== NativeScript ====
Progress Softwareが開発したフレームワークであり、JavaScriptまたはTypeScriptを使用してネイティブアプリケーションを開発できる。 
 
Angular、Vue.js、プレーンJavaScriptで開発可能で、直接ネイティブAPIにアクセスできる点が特徴である。 
 

== Ionicのインストール ==
==== NodeJSのインストール ====
[[インストール - Yarn#NodeJSのインストール|インストール - Yarnのページ]]にアクセスして、NodeJSをインストールする。 
 
==== Ionicのインストール ====
まず、プロジェクトを作成するディレクトリに移動する。 
 
Ionic CLIをインストールする。 
npm install @ionic/cli
# または
npm install -g @ionic/cli
 
以前のバージョンのIonicをインストールしたことがある場合は、アンインストールする。 
npm uninstall ionic
# または
npm uninstall -g ionic

npm install @ionic/cli
# または
npm install -g @ionic/cli
 
Ionicプロジェクトを作成するディレクトリに移動して、Ionicプロジェクトを作成する。 
ionic start <プロジェクト名例: ionicApp>
# または
npx ionic start <プロジェクト名例: ionicApp> # Ionicをグローバルインストールしていない場合
 
プロジェクトの作成において、Frameworkおよびテンプレートの種類　(blank / tabs / sidemenu)　についての質問がある。 
* フレームワーク
*: Anguler / React /
* テンプレートの種類
*: blank / tabs / sidemenu
 
作成したプロジェクトに移動する。 
cd <プロジェクト名>
 
プロジェクトを起動する。 
組み込まれているWebサーバが http://localhost:5100 として起動する。 
ionic serve
# または
npx ionic serve
 

{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Web]]