Kogawa

テクノロジーに少し偏る雑記ブログ

Ionic3でハイブリッドアプリ開発時に遭遇した問題と問題に対する対処法の共有

投稿日:2017年12月22日 更新日:

この記事はIonic Advent Calendar 2017の12/22のエントリーです。

アプリを開発するにあたり遭遇した問題を共有しようと思います。
いつか同じ問題に遭遇した時、このページで解決してたな、、と参照して貰えると嬉しいですね。

ちなみにリリースしたアプリはHoly Cowというエンタメ系のアプリです。

良かったら使って見てください。

iOS:
https://itunes.apple.com/jp/app/holy-cow/id1323714301?l=ja&ls=1&mt=8

Android:
https://play.google.com/store/apps/details?id=com.kogawawork.holycow&hl=ja

開発環境

開発環境は以下となります。
Ionicはバージョンの違いで問題の解決方法も変わって来るのでご紹介しておきます。

 

問題1: 配列をFor文で回す際の変数に対しinputの値が反映されない。

下記のように実装して見たのですが出来ませんでした。
一見すると正常に動作してくれても良いものなのに、、
これは単純に僕が「値渡し」、「参照渡し」のどちらが使われているのか理解していなかったためですね。。


↓のようにすることで解決出来ました。

問題2: input要素に値を入力すると、一文字入力する度にフォーカスが外れてしまう。

実際に現象が発生していたコードです。

↓のようにどの値を更新しているかを明示するようにしたことで解決出来ました。

対応するコンポーネントにメソッドも追加してます。

問題3: input要素に値入力後、次のinput要素にも同じ値が表示されてしまう。(値自体は移らないが表示だけされてしまう

どうやら、ngForでのループ処理時、trackByを指定しないと行けないようです。なんと、、、

customTrackByを指定することで対応出来ました。

参考: 下記URLのsirhcybeさんに対する回答
https://github.com/angular/angular/issues/8602#issuecomment-226959658

対応するコンポーネントにメソッドを追加

問題4: ion-selectの値を変更してもchangeイベントが発火しない。

該当のコードです。一見すると何も問題ないように見受けられるのですが、問題ありでした。。

changeイベントではなく、ionChangeイベントを使うことで解決出来ました。
公式ドキュメントにionCancelイベントが記載されていることから、もしかしたらchangeイベントではなくionChangeイベントを使うのでは?と推測出来れば良かったのですが、残念。

余談ですが、公式ドキュメントにionChangeイベントが記載されていないことについてissueが立てられているそうですね。
※ 下記issueのbrandyscarneyさんが2017/5/3にコメントしたものを参考
https://github.com/ionic-team/ionic/issues/7807

問題5: シミュレーターがエラーにより動作しなくなった。

$ ionic cordova run がiOSもAndroidも以下のエラーが出てしまい動作しなくなった。

platformsディレクトリとpluginsディレクトリを削除後、以下を実行することで解決しました。

おそらく、admob-freeプラグインとadmob-proプラグインを混在させてしまったのが原因です。この作業以外何も行なっていなかったので、、

問題6: Androidでinput要素入力時、キーボードが表示されると入力エリアが上に押し込まれてしまい、入力文字が見えない。

これはすごい困りました。一瞬仕様?と迷ったほどです。
対策はapp.module.tsのIonicModule.forRoot部分を以下のように記述することで解決出来ました。

下記issueを参考にしました。
https://github.com/ionic-team/ionic/issues/11501

問題7: iOSシミュレーション時、iPadのシミュレータが実行出来ない。

iOSシミュレーション時、 $ cordova run ios --list と入力すると表示される端末でシュミュレータを起動出来るのですが、なぜか出来ませんでした。

例えば $ cordova run ios --list で表示された”iPad-Pro–12-9-inch—2nd-generation-“を起動しようと以下のコマンドを入力すると

以下のようなエラーが表示されます。

対策としては、 $ cordova run ios --list で表示されるバージョンも一緒に指定することでシミュレータを起動出来るようになります。

それにしても以下のようにバージョンを指定しなくても起動出来たりするので謎は深まるばかりです。。

問題8: translateで多言語対応時、HttpClientモジュールが割り当てできない

下記URLを参考にtranslateを実装したが、以下のエラーが出てしまいます。
https://www.gajotres.net/ionic-2-internationalize-and-localize-your-app-with-angular-2/

対策としては、それぞれ必要なパッケージを以下のようにバージョン下げ、node_modulesディレクトリを削除後、 $ npm install することで解決しました。

※ 一緒に追加するhttp-loaderはバージョン1.0.2より下になっていることを確認してください。1.0.2以上の場合、同じくエラーが起きてしまいます。
僕は0.1.0に下げることで問題なく使用出来ています。

最後に

これにて今回作成したアプリ、Holy Cowで直面した問題の対策方法共有を終了したいと思います。
簡単に出来るでしょと思っていた部分で思わぬ不具合に直面したりとまだまだ手強さが残るハイブリッドアプリ開発ではありますが、やはり1つのソースコードで2プラットフォームのアプリが出来るのは相当魅力的ですね。

プラグインを開発してくださる素晴らしい方々のおかげで機器のモジュールもどんどん操作出来るようになり、起動, 動作もaotコンパイルや遅延読み込み等でネイティブアプリと遜色なくなってきたように見受けられます。

今後もどんどん発展していくと思うので、ぜひ挑戦してみてはいかがでしょうか?

何か疑問や意見等あればコメントにて頂ければと思います。

-テクノロジー
-, , , , ,

執筆者:

関連記事

no image

MacBookPro13.3インチ – おすすめ保護用アクセサリ

どうも、こがわです。この度MacBookPro13.3インチを購入しました。 新品ということもあり、やはり傷はつけたくないものです。できるだけ中古で高く売れるようにという思いもあります。むしろこっちが …

WordPressのローカル開発環境にDocker(docker-compose)を用いて4分58秒で開発環境を構築しました

WordPressのテーマをカスタマイズするにあたりローカルで作業する必要があったのですが、MAMPの調子が悪く、新しく開発環境を作らねばならなくなりました。 それならばDocker先生にお世話になろ …

no image

macOS High Sierraに致命的なバグが発見された!パスワードなしでログイン可能!!対策方法をご紹介。

macOS High Sierraに誰でも管理者としてログイン出来てしまう致命的なバグが見つかりました。 下記記事からの抜粋ですが、ユーザー認証入力時、ユーザーネームをrootでパスワードを空にして入 …

Zapierを使わずRaspberry Pi 3でTogglのタイムトラッキングデータをGoogle Calendarへ同期するようにした話

どうも、こがわです。 以前にZapierを使ってGoogleカレンダーとTogglを同期!行動を可視化して自制を促進しよう!を書いたばかりなのに、もうZapierを使わないでTogglとGoogle …

Ionic3でGoogleMaps表示とGoogle PlacesAPIを用いたAutocomplete機能を持つアプリを作る方法その1: GoogleMapsで現在地をマーカーで表示する。

どうも、こがわです。 とあることをきっかけにGoogle Mapsをハイブリッドアプリで使う機会が出来たので、得た知見を共有したいと思います。 例にもれず使用したフレームワークはIonicです。 ちな …

プロフィール

プロフィール

地元青森でITエンジニアとしてフリーランスで活動中。フルリモートで生活費を稼ぐ傍、作りたいアプリを黙々と製作中。

ポートフォリオはこちら