あるページ内で利用するカスタムパイプを作成する．ngForで繰り返した要素に対して文字列をサニタイズする方法について．一つの要素だけであれば下記方法に従えばできるが，ngForで繰り返した要素に対してサニタイズする方法に […]

tsファイルで import {ViewChild} from ‘@angular/core’import { IonContent } from ‘@ionic/angular&#8 […]

AngularでバックエンドAPIへアクセスしてデータを取得する際、認証情報やクエリパラメータを付与したい時がある。 Post通信 Get通信

Note:please keep in mind that I am not native English speaker. In this article, I would like to summarize how […]

Formの場合はこちら https://ionicframework.com/docs/v3/developer-resources/forms/ Note: If you use ngModel within a Fo […]

概要 Angular2以降でfirestoreのコレクションからデータ一覧を取得する方法。 読み込む コレクションに対して、valueChanges()をsubscribeする。valueChanges()ってなんだ。。 […]

概要 Angular,IonicをWebアプリとしてデプロイする方法について記述する。 firebaseを使ってホスティングする方法と、Xserverでapacheでホスティングする方法を試した。firebaseでホステ […]

目的 Angular（Ionic）でStripeでクレカ決済を導入するにあたり、ソフト側の設定方法をまとめる。AndroidのPlay Storeでの設定方法は下記参照。 http://localhost:8888/aw […]

AngularでAdsenseで広告を出す方法です。 AndroidやiOSアプリで広告を出すためにはAdmobが利用可能ですが、AdmobはWebプラットフフォームをサポートしておりませんのでWebでは使えません。We […]

背景 AngularでSEOに配慮する場合、何に気をつければいいかGoogle Developers Codelabsで勉強したのでその内容を記載します！ https://codelabs.developers.goog […]

XserverでAngular（Ionic）をホスティングする方法です。 流れとしては サブドメインを設定 そのサブドメインにionic build –prodで生成したファイルをアップロードする そのサブド […]

Ionic(Angular)でAdmobを導入する方法です。こちらはiOSでの実装となります。Androidでの実装方法はこちら。 ポイント capacitor-admobプラグインを使用します 公式の方法＋Plugin […]

Ionic(Angular)でAdmobを導入する方法です。こちらはAndroidでの実装となります。iOS版はこちら。 ポイント capacitor-admobプラグインを使用します 公式の方法＋依存関係の解決（この記 […]

Angularで画像を切り取って任意の場所を選択できるようにする方法です。 ポイント ngx-image-cropperを使います 流れ ngx-image-cropperをnpmでinstallします 読み込みたい場所 […]

Ionic(Angular)でアコーディオンを実装する方法です。 ポイント Componentを自作して、それを読み込むようにします これによりいろいろな場所で使い回しができるようになります 結果 こんな感じでクリックす […]

Ionicとはなにか 会社の中で使う業務アプリをよくlonic（Angular）で作っています。ここでは、自社内アプリを開発する私がIonicを気に入っている理由を解説します。 一応Ionicについて説明しておくと、 H […]

Angualrとクロスプラットフォームアプリ開発用のフレームワークであるIonicを組み合わせて、Tab barをカスタマイズする方法を解説します。 ポイント Tab barを備えたプロジェクトはIonicが提供している […]

フロントエンドアプリケーションフレームワークであるAngular(Ionic)で非同期通信を実装する方法をサンプルアプリとして紹介します。動作確認用にPythonで作成したバックエンドコード付きです。 Angularの場 […]

フロントエンドアプリケーションフレームワークであるAngular(Ionic)を使って、非同期通信で画像を読み込む方法をサンプルアプリとして紹介します。動作確認用にPythonで作成したバックエンドコード付きです。 An […]

Angularとは 　GoogleのドキュメントやGCPで使われているAngularは、Googleが中心開発している JavaScript フレームワークです。AngularJSと混同されていている方もいらっしゃいます […]

Ionicのフォルダ構成について 　Ionicで作成したプロジェクトは下記のような構造になっています。 　かなり複雑で、最初に見たときは戸惑うかもしれません。実際に触るのはsrc/appフォルダがほとんどになりますが、他 […]

概要 Angular2以降でfirestoreのコレクションからデータ一覧を取得する方法。 読み込む コレクションに対して、valueChanges()をsubscribeする。valueChanges()ってなんだ。。 […]

概要 Angularでは、相方向バインディングを行うための二つの方法があります。一つはテンプレート駆動型、もう一つはリアクティブフォールによるものです。 こちらの公式 https://angular.jp/guide/f […]

概要 Ionic(Angular)でマウスホイールで拡大や移動などが可能なグラフを作成します 方法 標準のchart.jsに加えて、charjs-plugin-zoomを導入します。 通常のchart.jsの導入方法はこ […]

背景 Webで表をいれたいときってあります。主に3つの方法があると考えております。 ・Tableを使う ・FlexBoxを使う ・ライブラリを使う 今回は、ライブラリを使う方法としてAg-gridを導入します。先頭の二つ […]

なぜ404エラーとなるのか AngularをはじめとするSPAでは、URLごとに実態のあるページが存在する一般的なサイトとは異なり、index.htmlをクライアント側で書き換えるため直接特定のアドレスにアクセスするとエ […]

概要 上記の画像のようなサイドメニューとタブバーを備えたプロジェクトを作成します。 流れ IonicのデフォルトテンプレートのひとつであるTabプロジェクトにサイドメニューを追加します。 参考文献 https://pet […]

グラフ描写のライブラリ Ionicでグラフを描写するライブラリにはいくつかあるようですが、安定していてよく使われているchart.jsを使いことにしました。意外に簡単でびっくりしました。 インストール プロジェクトのルー […]

環境 Copy 参考のサイト 公式ドキュメントはこちら パッケージのインストール package.json 実装 app.module.ts こちらにはapp.module.tsでは、TranslateModuleをイン […]

ライフイベント、ライフサイクルとは ライフイベント、ライフサイクルとは、ページを読み込み、表示し、その後ユーザーが離脱する一連の流れの中で特定のタイミングで発火するDOMイベントのことです。Ionicでは、Ionic独自 […]