中安拓也のブログ

中安拓也がプログラミングについて書くブログ

Ionic

Angular + Firebase でGoogle認証

はじめに 関連記事 環境 FirebaseコンソールでGoogle認証を有効にする Googleのログインボタン作成 Step1: Googleのロゴアイコンを取得 Step2: GoogleカラーをIonicに追加 Step3: ログインボタンのテンプレートを作成 Step4: リダイレクトモードでFirebase認…

【Ionic v5】[Shadow DOM]ボタンのレイアウトを変更する

はじめに Shadow DOMって? ボタンのレイアウトを変更する 参考サイト はじめに 本記事では、Ionic v5のボタンのレイアウトを変更します。Ionic v5のボタン(ion-button)ではShadow DOMが適用されているため、Shadow DOMでないコンポーネントと同様のやり方で…

【Angular】リダイレクトモードでFirebase認証を行う

はじめに 環境 リダイレクトモードでFirebase認証 ポップアップモードのFirebase認証 参考サイト はじめに FirebaseのSNS認証には、ポップアップウィンドウを表示するポップアップモードとログインページにリダイレクトするリダイレクトモードの2種類の形式…

【Ionic v5】Colorsに色を追加してボタンに適用する

はじめに 環境 配色の追加 Step1: レイヤードスタイルの作成 Step2: SCSSファイルにレイヤードスタイルを追加 Step3: ボタン作成 参考サイト はじめに Ionicには9つのデフォルトカラーがある Ionicにはprimary, secondary...といったように9つのデフォルトカ…

【Ionic v5】テーブル内でラジオボタンを使用する

テーブル内でラジオボタンを使用する はじめに 環境 通常のIonicのラジオボタン テーブルのセル内でion-radioを使用する 参考サイト はじめに テーブルのセル内でIonicのラジオボタンを使用する方法がわからず、手間取ってしまったため、メモとして残した。 …

webpackで「JavaScript heap out of memory」エラー

はじめに 環境 発生したエラー 対処法 参考サイト はじめに npm scriptsを使ってIonic(Angular/TypeScript)のAndroidビルドをしている時にFATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memoryエラーが発生して処理が落ちて…

【障害メモ】[Ionic v3][Android]電話の発信と管理を許可しないとDevice Idを取得できない

障害内容 環境 原因 エラーが発生した箇所 対応方針 電話の発信と管理の許可についてのモーダル 障害内容 Ionic v3で作成されたAndroidアプリで、「電話の発信と管理を許可しますか?」と表示されるモーダルで「許可しない」を選択したユーザーの、端末識別I…

【障害メモ】[ionic-v3][iOS]ion-pickerとion-modalを両方開くとion-modalを閉じることができなくなる

はじめに 環境 発生した障害 原因 修正方法 まとめ 参考サイト はじめに クリックイベントが検知されないときって、ほかのDOM要素が覆っていないかとか、z-indexの設定とかしか気にしていなかったんですが、 posinter-events: noneが設定されていたせいでク…

【障害メモ】[ionic-v3][Android][input text]ワンタップでキーボードが出てこない・文章の途中にカーソルを合わせることができない

障害内容 環境 修正方法 参考サイト 障害内容 Ionic v3のAndroidアプリで、入力フォームを複数回タップしないとソフトキーボードが出てこなかったり、文章の途中に間違いがあってもカーソルをテキストの最後にしか移動できないから、全消ししないと誤った文…

【障害メモ】[cordova-plugin-keyboard][Android]ソフトウェアキーボードが入力フォームを覆い隠してしまう

障害内容 環境 修正方法 アプリを全画面表示にするのをやめる 参考サイト 障害内容 モバイル・タブレット端末のソフトウェアキーボードが、入力フォームの前面に表示されてしまうため、画面の下部にある入力フォームがキーボードに隠されて見えない。Android…

【障害メモ】[cordova-plugin-camera]縦向きに撮影した画像が横向きで表示される

障害内容 環境 修正方法 参考サイト 障害内容 cordova-plugin-cameraを使用して、端末の画像ライブラリから画像を選択したり、写真を撮影したりすると、画像の向きが縦から横に変わって表示される。Android端末のみで発生 環境 cordova (Cordova CLI) : 8.0.…

【Ionic】WebサイトからiOSアプリを開くリンク(「アプリで開く」ボタン)を実装する

仕事で「iPhone/iPad端末にアプリがインストールされてたら起動するリンク」(URL Scheme)を実装したのでメモ バージョン情報 実装した要件 実装 ライブラリのインストール AppComponentの改修 Webサイト側の設定 参考サイト バージョン情報 iOSアプリの作…

【Ionic(Angular)】Hammer.jsを使っている画面で垂直スクロールができなくなる問題

仕事中に遭遇した障害についてのメモ。iOS13(ベータ版)とAndroid 9で検知した。 発生事象 原因 対応 バージョン情報 参考サイト 発生事象 Ionic(Angular)のGestureを使ってピンチイン・ピンチアウトによるズームを有効にしている画面で、縦方向のスクロール…

【バグ対応メモ】[Ionic]iOS 12.2以降の端末でスクロールができなくなった

業務で作成したiOSアプリの障害についてのメモ 障害内容 iOS 12.2以降の端末でIonic v3.9.3で作成したiOSアプリを動かしたら、スクロールができなかった。 改修方法 Ionic v3.9.5以前のバージョンによるバグが原因の障害となる。ionic-angularのバージョンを…

【CSS】PCでもモバイルと同じレイアウトの画面で表示する(スマホのフレーム画像に画面をはめる)

今回やること PCからみると、スマホの枠の中にコンテンツが表示されるようなデザインの画面を作る。参考サイト(フィッシャーマン・コール) PCだとこーいう表示になる モバイルからだとこういう表示になる メリット PC用の画面デザインを用意せずに、スマホ用…

iOSのFace ID, Touch IDを使用したログイン機能を設計する

業務でFace ID, Touch IDを使ったログイン機能を実装することになったので色々と調べた。 作成予定のシステム Face ID, Touch IDに対する誤解について 処理詳細 初回ログイン Face ID, Touch IDによるログイン Appleのレビューガイドライン 考えた点・補足 …

IonicでiOSの生体認証(Face ID, Touch ID)を扱う

モチベーション 業務でFace ID, Touch ID対応のiOSアプリを作成することになったので、触っておきたい。 バージョン情報 Angular(JavaScriptのWebフレームワーク)ベースの、ハイブリットモバイルアプリ用フレームワークである「Ionic」を使っています ioni…

【メモ】Xcodeでエラー「Showing All Messages clang: error: linker command failed with exit code 1 (use -v to see invocation)」

Xcodeで実機ビルドをしたタイミングで、下記のエラーが発生した。 Showing All Messages clang: error: linker command failed with exit code 1 (use -v to see invocation) バージョン情報 Xcode: 9.3 cordova-plugin-touch-id: 3.3.1 原因 cordova-plugin…

【JavaScript】Ionicで架空のECアプリを作成する #10 - 完成

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成していました。 最低限の機能は、実装できたかな?というところまで来たので、今回で一旦完成ということにします。 下記のURL…

IonicアプリをGitHub Pagesで公開する

Ionic3を使って作成したアプリを、GitHub Pagesで公開する方法について バージョン情報 GitHub Pagesで公開する GitHubの設定を変更する Ionicアプリをビルドする 実際に参照してみる バージョン情報 ionic-angular@3.9.2 Angular@5.2.10 GitHub Pagesで公開…

Ionicで戻るボタンのラベルテキストを設定する

Ionicのヘッダーについている戻るボタンのテキストの設定方法について 参考サイト javascript - How to change the label from back button in Ionic 2? - Stack Overflow バージョン情報 ionic-angular@3.9.2 Angular@5.2.10 Google Chrome バージョン: 60.…

【JavaScript】Ionicで架空のECアプリを作成する #9 - スワイプするとボタンが表示されるリスト

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成していきます。 第9回目である今回は、ショッピングカート画面のリストを、スライドすると削除ボタンが表示されるリストに変…

【JavaScript】Ionicで架空のECアプリを作成する #8 - ヘッダーにボタンをつける

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成します。 第8回目である今回は、ショッピングカート画面のヘッダーに「空にする」ボタンをつけます デモ こちらのURLで、完成…

【JavaScript】Ionicで架空のECアプリを作成する #7 - 同じ商品を買った場合は、まとめて表示したい

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第7回目である今回は、同じ商品を二つ買った場合でも、まとめて表示されない問題について解決します。 デモ こちらのU…

【JavaScript】Ionicで架空のECアプリを作成する #6 - タブバーのアイコンにバッジをつける

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第6回目である今回は、カートアイコンにショッピングカート内の商品数を表示するバッジをつけるところまで デモ こち…

【JavaScript】Ionicで架空のECアプリを作成する #5 - カート画面を作る(後編)

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第5回目である今回は、カート画面を作成するところまで デモ こちらのURLで、完成版のアプリを実際に操作することがで…

【JavaScript】Ionicで架空のECアプリを作成する #4 - カート画面を作る(前編)

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第4回目である今回は、ショッピングカートに商品を追加する処理の実装まで デモ こちらのURLで、完成版のアプリを実際…

【JavaScript】Ionicで架空のECアプリを作成する #3 - 商品詳細画面を作る

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第3回目である今回は、商品詳細画面を作成するところまで デモ こちらのURLで、完成版のアプリを実際に操作することが…

【JavaScript】Ionicで架空のECアプリを作成する #2 - 商品リスト画面を作る

今回作成する画面 前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第2回目である今回は、商品リスト(ホーム)画面を作成するところまで デモ こちらのURLで、完成版…

【JavaScript】Ionicで架空のECアプリを作成する #1 - 商品データを作る

ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第1回目である今回は、商品(洋服)データを作成するところまで デモ こちらのURLで、完成版のアプリを実際に操作することができます http…