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

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

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

GitHubの通知欄にめずらしく（本当に）通知が来ていた。 Potential security vulnerability found in the ssri dependency 実際の通知画面はこんな感じ 通知をクリックして詳細を見ると、「./package-lock.jsonで定義されている依存関係には既知のセキュリテ…

前回記事はこちら 仮想通貨取引所のbitFlyerのHTTP Private APIにアクセスして、自分の資産残高を取得する。 バージョン情報 今回アクセスするAPIは認証が必要 Private APIの認証 下準備 コード 動作確認 参考サイト バージョン情報 JavaScriptのフレームワ…

Angular Materialを使って、ログイン用のフォームを作ります Angular Materialのインストールから解説している記事はこちら バージョン情報 テンプレート駆動型とモデル駆動型 NgModuleの設定 index.htmlにアイコンのCDNを追加 ログインフォームを作る 参考…

Angularでフォームを書いていたら、Can't bind to 'ngModel' since it isn't a known property of 'input'.というエラーに遭遇した バージョン情報 エラー原因 参考サイト バージョン情報 Angular: 5.2.9 Node: 8.1.4 エラー原因 formControlを使っているの…

Angular Materialを使ってナビゲーション付きのヘッダーを作る Angular Materialのインストールから解説している記事は、こちら バージョン情報 NgModuleの設定 テンプレートを編集する バージョン情報 Angular: 5.2.9 Node: 8.1.4 @angular/material: 5.2.4…

npmパッケージのバージョンを固定して、動作に変化がないようにしたい。 バージョン情報 バージョン固定の手順 初めからキャレット^記号がつかないようにしたい 参考サイト バージョン情報 Node: 8.1.4 npm: 5.6.0 macOS High Sierra: 10.13.4 バージョン固…

毎回やり方を忘れるので書きました...PCはMacです。Ionic以外のハイブリットモバイルアプリフレームワークでも概ね同じ手順になると思います。 バージョン情報 ビルド手順 プラットフォーム作成(Android/iOS共通) Android 実機ビルド パッケージ化 iOS 実機…

iOSシミュレーターについても、iPhone、iPadなどの実機同様にSafariのWebインスペクタでデバックできるって知ってましたか？私は知りませんでしたが.... バージョン情報 デバック手順 シミュレーターが認識されない場合 バージョン情報 macOS High Sierra: 1…

Ionicだと、ionic cordova resourcesコマンドで、端末によって様々なサイズが必要になるアイコン・スプラッシュスクリーン画像を一発で作れて便利 バージョン情報 事前準備 STEP1 ベース画像の用意 STEP2 ionic config set backend pro -gとionic loginコマ…

はじめに バージョン情報 ビルド手順 カスタムプラグインを作る iOSビルド はじめに ionic-pluginやcordova-pluginなどのプラグインをインストールした後、オリジナル版とは違う修正を加えて、カスタムプラグインを作る事がある。そんなカスタムプラグインを…

はじめに バージョン情報 手順 iPhoneはPortrait固定に設定 iPadはLandscape固定に設定 関連ライブラリ はじめに JavaScript（Ionic）を使ってiOSアプリを作成していた時に、「iPadで縦向き(Portrait)表示するとレイアウトが崩れるから、横向き(Landscape)固…

HTTPのレスポンスヘッダの一つであるETagを取得しようとして四苦八苦した話。 バージョン情報 JavaScriptフレームワークであるAngularを使います Angular: 5.2.9 ionic-angular: 3.9.2 ETagとは https://ja.wikipedia.org/wiki/HTTP_ETag ETag（エンティティ…

実機（iPhone）だと動くのに、iOSシミュレーターだと動かない！みたいなことがあったので。 バージョン情報 Ionicなどのハイブリットモバイルフレームワークを使用して、JavaScriptでiOSアプリを作った時の話となります ionic-angular 3.9.2 Xcode: Version …

Xcodeから、iPhone8 plusに実機ビルドしようとしたタイミングでエラーが発生した。 バージョン情報 Xcode: 9.3 モバイル端末: iPhone8 plus iOS: 11.1.2 発生したエラー アプリのアイコン関連と思われる同種のエラーが2件発生した。 エラー１ .../platforms/…

ファットになりがちなapp.module.tsファイルから、ルーティングの設定を分離したい バージョン情報 Angular: 5.2.9 ルーティングの設定を分離する Before app.module.tsの中にルーティングのRoute設定も含まれている src/app/app.module.ts: // ...省略 impo…

アーカイブで作成したipaファイルを直接、実機に入れる方法 バージョン情報 Xcode: 9.3 OS: macOS High Sierra Apple Configurator 2: バージョン2.7 iPhone 8 plus(iOS: 11.1.2) インストール方法 iOSアプリケーションをXcodeでアーカイブして、ipaファイル…

iOSアプリをApp Storeではなく、ネットワーク経由で配布する方法の一つとして、 In Houseビルドがある バージョン情報 Xcode: 9.3 OS: macOS High Sierra 前提 Apple Developer Enterprise Programに加入していて、証明書（P12ファイル）も、Mac PCにインポ…

仕事中を想定 招待メールのリンクをクリック 「Welcome to the Apple Developer Enterprise Program.」みたいなタイトルのメールが来てると思うので、メール内のリンクをクリック 会社用のアカウントでログイン こんな感じのログインフォームがあるページに…

アプリのIonicバージョンを2から3に上げた。 特に参考にしたサイト アップグレードの大まかな流れ バージョン情報 PC周りの環境 アプリのバージョン - アップグレード前 アプリのバージョン - アップグレード後 package.jsonを更新する ブラウザで動作確認（…

以前の記事で書いた、仮想通貨取引所のWeb APIにアクセスした時のコードが冗長だったので、リファクタリングする。 バージョン情報 Angularを使う Angular: 5.2.9 Node: 8.1.4 リファクタリング前のコード RxJSのmapメソッド内で、レスポンスの型をBitflyerT…

事象 ionic build iosコマンドを実行した時に発生した。エラーメッセージは下記となる。 sh: ionic-app-scripts: command not found npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! tsc-floor-map@ ioni…

Xcodeでアプリを実機デバックしようとしているときに発生したエラーについて バージョン情報 Xcode: Version 9.2 発生したエラー エラー発生時のスクリーンショット [General] ->[Signing] -> [Status]の部分でエラーが発生していることがわかる。エラーメッ…

Angular Language Serviceなるものの存在を最近知ったので、使ってみます。 バージョン情報 Visual Studio Code以外のエディタをお使いの方は、他記事を参照していただくようお願いします。 Visual Studio Code: 1.21.1 Angular: 5.2.9 Angular Language Ser…

前回記事はこちら 国内仮想通貨取引所5種（bitFlyer、Coincheck、Zaif、bitbank、QUOINEX）のWeb APIにアクセスして、現在のビットコイン価格を表示するアプリケーションを作成しました。 バージョン情報 実装 アプリケーション概要 bitFlyer APIの呼び出し …