ionicフレームワークでスマホアプリ開発

現在、ionicでスマホアプリを作成しているのですが、その開発の中でよく使ったケースを紹介したいと思います。

個人的にはどれも外せない知識だと思います！
少しでもお役に立てれば幸いです！！

①ionic Storage

ざっくり概要

アプリ内にデータを保存することができる。
1つのキーに対して、1つの値を保存。キーを指定することで、値を取得できる。

参考リンク：ionic Storage

ポイント

どのページにいても使いまわせる！
ユーザごとに設定できる！
アプリを閉じてもデータがリセットされない！

ユーザごとの設定をしたい時にはこの「ionic storage」を使っています。
アプリを閉じられたとしても、再び開けた時にデータがリセットされていないため、かなり便利で使い勝手が良いと感じています。

私がよくやる使い方

画像を多く使うアプリを作っているため、単語をキーにして、値には画像URLを割り当てることが多いです。設定した単語に相当する画像URLを簡単に引っ張ってこれるし、ユーザが別の画像を割り当てたいとなればすぐに対応できます。

もちろん、チームで開発するとなれば、分かりやすいキー名にしないと混乱を招く原因にはなりますが、それさえはっきりしていればとても便利な機能だと思います。

使い方

import { Storage } from '@ionic/storage';

export class MyApp {
  constructor(private storage: Storage) { }

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
省略
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

// storageに値をセットする。
this.storage.set('キー名','画像URL')；

// storageにセットした値を表示
this.storage.get('キー名').then(value => {
   
　　// valueには設定した'画像URL'が割り当てられています。
   console.log(value)；

})

②Page Life Cycle

ざっくり概要

ユーザがページを表示するタイミングで起こすイベントや、ページを離れる時に起こすイベントなどを設定できる。
具体的には、

ionViewWillEnter（コンポーネント表示された時に発動）
ionViewDidEnter（コンポーネントが表示され終わったら時に発動）
ionViewWillLeave（コンポーネントを離れる時に発動。）
ionViewDidLeave（コンポーネントを離れ終わったら発動）

参考リンク：Page Life Cycle
コンポーネントがいまいち何か分からない方へ：コンポーネントとは

ポイント

開発を進める上で必ず必要になってくる！
いきなり使える！(importとかしなくて大丈夫。）

このフレームワークを最初知った時に、正直「今作ってるアプリってそんなに複雑じゃないし、これ使う？ページを離れたり開いたりの微妙なタイミングとか気にしないよ」と思ってました。記事を読んでくださっている方の中にも同じ気持ちの人はいるのではないでしょうか。

自分はフロントエンドを触り始めて、3ヶ月くらいで、これを使ったデータの更新や読み込みのタイミングが思った以上に重要で、難しいことに気付きました。

私がよくやる使い方

4つのイベントがあるわけですが、自分はionViewWillEnterを高い頻度で使います。これから使い始める方が最初に悩むのが、ngOnInitとの使い分けだと思います。

実際は単純で、

一回しか読み込みたくないなら**「ngOnInit」**。
ページ遷移して戻ってきても読み込みたいなら**「ionViewWillEnter」**

です。

よくやる使い方としては、ページ遷移を行い、そこで行った設定を元のページに戻った時に反映させたい時などにionViewWillEnterを使います。

使い方

ngOnInit() {
  console.log('一回だけ読み込みますー。');
}

ionViewWillEnter() {
  console.log('ngOnInitの後に発動し、ページ遷移から戻ってきても発動するよー');
}

何かをインポートしたりしなくても使えるのもいいところ。

③Platform

ざっくり概要

「Android」や「ios」など媒体を指定できる。

参考リンク：Platform

ポイント

使わないで済むならその方が楽だけど、避けられないやつ。

指定しないでできるならそれが一番楽でした。
ただ、どうしても媒体によって仕様が異なるため、指定しなければならない場面がありました。
使う頻度がすごく高いわけではないのですが、個人的にこれを使わないで開発していたことによって、iOSとAndroidで異なる挙動になってしまった経験があるため、今回の記事にランクインしました。

私がよくやる使い方

開発しているアプリにはアラーム機能がついているのですが、アラームを発動する時に、AndroidとiOSとでは指定する音声ファイルが異なります。

例）
Android： 'file://sound.mp3'
iOS: 'file://beep.caf'

使い方

ngOnInit() {
  console.log('一回だけ読み込みますー。');
}

ionViewWillEnter() {
  console.log('ngOnInitの後に発動し、ページ遷移から戻ってきても発動するよー');
}

何かをインポートしたりしなくても使えるのもいいところ！！

④カラージェネレーター

ざっくり概要

色が確認できる。
参考リンク：Color Generator

ポイント

これから開発を始めようとなった時に使うことが多い！

デザイン担当の方がいたり、ある程度開発が進むと全く使わなくなりますが、開発初期の頃やアプリのテーマカラー等を決めたい時はここで色を確認しながら進めていました。

私がよくやる使い方

かなり地味な項目ですが、自分は割と見た目にこだわるタイプなのでランクインしました。ここはどの色にしようと思った時は必ずこのページを開いて考えます。

加えて、Color Pickerというサイトと一緒に使うと、美的センスがあまりなくてもある程度整った見た目を作れると思います。

最後に

正直フロントエンジニアとしてまだまだ未熟ですが、そんな私にとっても開発がしやすかったのがこのionicフレームワークです。AndroidもiOSも対応しているので、初心者の学習コストを考えると選択するメリットは多いと思います。

ちなみに、以下のQRコードは実際に初学者である開発者がionicフレームワークを使って開発したスマホアプリです。

今回紹介した知識以外にもまだまだ魅力はあります。技術選定の際には是非候補に入れてみてください。