Zenn
💻

Ionicをやってみた

2023/02/22に公開
Angular
Ionic
tech

lonicを始めたきっかけ

友達がlonic本を出したからというのが理由です。
その当時は保育士をしていて、ITやWebは難しいものという意識があったんですが、友達が本を出すのならちょっとやってみようかな？と思い、本とMacBookを買って触ってみました。

その本というのが青色の『Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉』という本。

もし、今買われるのならこちらの赤色の『Ionicで作る モバイルアプリ制作入門[Angular版]<Web/iPhone/Android対応>』をオススメします。

当時は無知で、難しいものという意識が強すぎて入力コードが英語だと気づかず、「title (タイトル)」と入力しなければいけない所「tittle」という新しい言葉を生み出してエラー連発(笑)
苦戦しつつ、本を見ながら作成するとアプリが作れました！！

そのままlonicを触り続けて今に至るのですが、基礎知識がなかったまま触っていたと気づき、今回まとめました。

lonicとは

Ionicとは、Google社のAngularというアプリケーションフレームワークをベースに、HTML5アプリの開発に特化して作られたJavaScriptフレームワーク。
ハイブリッドモバイルアプリ開発用の完全なオープンソースSDK (＝Software Development Kit)です。

※ハイブリッドアプリとは、
Webサイトを作成する技術で開発されたiOSやAndroidのアプリのことです。

※ソフトウェア開発キット (SDK) とは、
ハードウェア・プラットフォームやオペレーティングシステム (OS)、またはプログラミング言語などのメーカーによって提供されるツール一式のことです。

Ionicの特徴

  • Angularをベースとしている
  • Cordovaをネイティブラッパーとしてサポートしている
  • GUIベースでIonicアプリのテンプレート(UI)が作成可能な、Ionic Studioを提供している

lonicのメリット

・UI構築が楽

iOS/Android別のUIを提供をしてくれるので構築がしやすいんです。

・バンドルサイズが小さいので軽量に高速で動作

バンドルとは、ある製品やサービスに別の製品やサービスを合わせて提供する事です。バンドルサイズが大きいと通信環境が整っていない所だとかなり動きが遅くなってしまいます。

・Nativeのカメラ、位置情報などのAPIにアクセスできる

Ionicにはさまざまなプラグインがありますので、これを利用することでWeb技術を使いながら、それを超えたアプリケーションを作成することが可能です。

・日本語の公式がある

翻訳ではなく日本語の公式ページがあるので、まだわかりやすいのかな？
（まだ専門用語を覚え中なので、私には少し難しく感じる部分もあります）

公式(日本語)
https://ionicframework.com/docs/ja

開発する上であった方が良い知識

  • HTML
  • JavaScript
  • TypeScript
  • SCSS
  • Angular
  • NestJS

lonicプロジェクトの始め方

まぁこんな感じのフレームワークです。
ちょっと触ってみたいなぁって思った方は引き続きどうぞ！

Ionic CLIをインストール

続行する前に、コンピュータに Node.js がインストールされているかを確認ください。この説明でIonicをセットアップできる環境を説明しています。

npmを使って Ionic CLI をインストールします

npm install -g @ionic/cli

Ionic CLIが以前にインストールされていた場合は、パッケージ名が変更されているため、アンインストールする必要があります。

$ npm uninstall -g ionic
$ npm install -g @ionic/cli

プロジェクトを新規作成

新しいIonicアプリの起動は、驚くほど簡単です。
コマンドラインから lonic start コマンドを実行すれば、あとはCLIが処理してくれます。

 ionic start

次にプロジェクトの名前について聞かれるので
PCのどこに作成したいのか、どんな名前をつけたいのか考えて入力します。
私は「pen」にしました。

? Project name: █

次にフレームワークについて聞かれました。
私は「Angular」を選択。

? Framework: (Use arrow keys)
❯ Angular | https://angular.io
 React   | https://reactjs.org

次にテンプレートの選択が出てくるので、使用したいものを選んで下さい。
私は色々試したいので「sidemenu」にします。

? Starter template: (Use arrow keys)
❯ tabs        | A starting project with a simple tabbed interface

 sidemenu     | A starting project with a side menu with navigation in the cont
ent area

 blank        | A blank starter project
 
 my-first-app | An example application that builds a camera with gallery

 conference   | A kitchen-sink application that shows off all Ionic has to offer

【見本サンプル】
tabs　　　 ： https://ionicframework.com/docs/v4/api/tabs
　→シンプルなタブ型インターフェイスのスタートプロジェクト
sidemenu　 ： https://ionicframework.com/docs/ja/api/menu
　→コンテンツエリアにナビゲーション付きのサイドメニューがある
　　スタートプロジェクト
blank　 ： https://ionic-blank.stackblitz.io
　→ 空白のスタータープロジェクト
my-first-app： https://ionicframework.com/docs/angular/your-first-app
　→ ギャラリー付きカメラを構築するアプリケーションの例
conference ： https://nghiacc.github.io/ionic-conference-app/
　→他の方と共有するスケジュール表

作成できるとこのような表示が現れます。
ではどのような画面になっているのか表示してみましょう。

Next Steps:

      - Go to your newly created project: cd ./pen
      - Run ionic serve within the app directory to see your app
      - Build features and components: https://ion.link/scaffolding-docs
      - Run your app on a hardware or virtual device:
      https://ion.link/running-docs

作成された画面（「sidemenu」バージョン）

ionic serve

「ionic serve」を入力すると作成された画面が表示されます。
今までの手順を踏むとこのような画面が表示されました。

Discussion