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

WordPress管理画面 – 不正アクセス対策をして攻撃者から自分のブログを守ろう!(Digest認証/管理画面ログインURL変更)

どうも、こがわです。今回はWordPress管理画面の不正アクセス対策について、僕が実践している方法をご紹介します。 WordPress管理画面ログインURLは、基本的に何も変更していなければ、htt …

さくらのVPS(CentOS7)にJIRA(オンプレ)をインストールしてみました。

どうも、こがわです。 突然ですが、プライベートでタスク管理ツール使ってますか? 会社では使ってるけど、能動的にプライベートで使ってる人は多くないかもしれません。 タスク管理ツール、いいですよ。 少なく …

no image

Rubyの組み込みライブラリ「RSS」で、itemにカテゴリーを設定する方法

タイトルの通りです。 記事を書いた背景として、公式ドキュメントを読んでもitemにどのようにしてカテゴリーを設定すれば良いのか一見してわからず、時間を浪費してしまったことがあったため、メモ書き兼共有を …

今更ながらRubyでTwitterへ自動ツイートできるプラグラムを作ってみたので、2017年12月現在手順通りに行うだけで同じように作れる情報を共有。

どうも、こがわです。 今更ながらRubyでTwitterへ自動ツイートできるプラグラムを書いてみたので共有します。 INDEX環境情報開発事前準備Twitterでアプリ登録Twitter APIをコー …

RubyのProcクラスについての学習メモ

学習のためProcクラスについて学んだことをメモしておきます。 INDEXProcクラスとはProcを作る方法ラムダ式ブロックをProcオブジェクトとして受け取る Procクラスとは ブロックをコンテ …

プロフィール

プロフィール

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

ポートフォリオはこちら