メインコンテンツにスキップ
バージョン: v8

Ionicパッケージ

Ionicは、テスト環境、Angular、その他のフレームワーク、あるいはフレームワークなしで、Ionic FrameworkまたはIoniconsをすぐに使い始めるために使用できるさまざまなパッケージを提供しています。

Ionic Framework CDN​

Ionic Frameworkは、Plunker、Codepen、またはその他のオンラインコードエディターで迅速なテストを行うために、CDNからインクルードできます。

CDNからFrameworkにアクセスするには、jsdelivrを使用することをお勧めします。最新バージョンを取得するには、HTMLファイルの<head>要素内、またはオンラインコードエディターで外部アセットがインクルードされている場所に、以下を追加します。

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />

これにより、フレームワークをインストールすることなく、すべてのIonic Frameworkコアカウントロールコンポーネントを使用することが可能になります。CSSバンドルには、すべてのIonic グローバルスタイルシートが含まれます。

（アイコンSVG）注意

これはAngularやその他のフレームワークをインストールしません。これにより、フレームワークなしでIonic Frameworkコアコンポーネントを使用できます。

Ionic + Angular​

AngularプロジェクトでIonic Frameworkを使用する場合は、npmから最新の@ionic/angularパッケージをインストールします。これには、すべてのIonic Frameworkコンポーネントと、Angular固有のサービスと機能が含まれています。

npm install @ionic/angular@latest --save

Ionic Frameworkの新しいリリースがあるたびに、最新の機能と修正を取得するために、このバージョンを更新する必要があります。バージョンは、npmを使用して更新することもできます。

既存のAngularプロジェクトにIonicを追加するには、Angular CLIのng add機能を使用します。

ng add @ionic/angular

これは、@ionic/angularパッケージに必要なインポートを追加し、必要なスタイルも追加します。

Ionic + React​

既存のReactプロジェクトにIonic Frameworkを追加するには、@ionic/reactおよび@ionic/react-routerパッケージをインストールします。

$ npm install @ionic/react
$ npm install @ionic/react-router

CSS​

Reactプロジェクトに必要なCSSを含めるには、ルートAppコンポーネントに以下を追加します。

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

Ionic + Vue​

既存のVueプロジェクトにIonic Frameworkを追加するには、`@ionic/vue`と`@ionic/vue-router`パッケージをインストールします。 

npm install @ionic/vue @ionic/vue-router

その後、Vueアプリに`IonicVue`プラグインをインストールする必要があります。

main.js

import { IonicVue } from '@ionic/vue';

import App from './App.vue';
import router from './router';

const app = createApp(App).use(IonicVue).use(router);

router.isReady().then(() => {
  app.mount('#app');
});

`router.isReady()`が解決したら、アプリをマウントしてください。

ルーティング​

Vueアプリでルーティングを設定する際は、`vue-router`ではなく`@ionic/vue-router`から依存関係をインポートする必要があります。

router/index.js

import { createRouter, createWebHistory } from '@ionic/vue-router';

const routes = [
  // routes go here
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

CSS​

Vueプロジェクトに必要なCSSを含めるには、`main.js`ファイルに以下を追加します。

/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css';
import '@ionic/vue/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/vue/css/padding.css';
import '@ionic/vue/css/float-elements.css';
import '@ionic/vue/css/text-alignment.css';
import '@ionic/vue/css/text-transformation.css';
import '@ionic/vue/css/flex-utils.css';
import '@ionic/vue/css/display.css';

ここから、Ionic VueクイックスタートガイドでIonic Frameworkを使った開発方法を学ぶことができます。

Ionicons CDN​

IoniconsはIonic Frameworkにデフォルトでパッケージされているため、Ionicを使用している場合はインストールは不要です。Ionic FrameworkなしでIoniconsを使用するには、ページの最後、`</body>`タグの直前に次の`<script>`を配置します。

<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.js"></script>
（アイコンSVG）注意

Ioniconsの使用方法の詳細については、Ioniconsの使用方法を参照してください。

目次

このページを編集