中安拓也のブログ

プログラミングについて書くブログ

2018-04-01から1ヶ月間の記事一覧

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

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

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

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

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

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

GitHubから通知が来た:依存関係の1つに潜在的なセキュリティ脆弱性があります

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

仮想通貨取引所のAPIを使ってみる #3 - Private API にアクセスする

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

Angular Materialでログインフォームを作る

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

【Angular】エラー: Can't bind to 'ngModel' since it isn't a known property of 'input'.

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

npmパッケージのバージョンを固定する

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

IonicをAndroid/iOSでビルド・パッケージ化

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

【Xcode】iOSシミュレータをブラウザでデバックする

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

便利な「ionic cordova resources」コマンドで各種モバイル・タブレット端末のアイコン・スプラッシュスクリーンを作成する〜

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

【Ionic, Cordova】カスタムプラグインを導入した時のiOSビルド手順

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

【Xcode】iPhoneでは縦向き固定に、iPadでは横向き固定で表示したい

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

【Angular】HTTPのレスポンスヘッダを取得したい

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

iOS シミュレーター上でだけアプリが動かない!そんな時....

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

【Xcode】アプリアイコンに関するエラー: Failed to write image data for the app icon set from

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

【Angular】app.module.tsからルーティングのRoute設定を分離する

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

ipaファイルを直接iPhoneにインストールする

iOS

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

【Xcode】iOSアプリをネットワーク経由で配布する - In Houseビルドの方法

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

「AppleDevloperの招待メールを送っておきました」と言われた時の対応

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

Ionic2からIonic3(Angular2.2 -> 5.2)へアップグレードした

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

【Angular】APIの戻り値の型を型パラメーターとして渡す

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

【Ionic】【エラー】 sh: ionic-app-scripts: command not found

事象 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を使っていて発生したエラー: Change your bundle identifier to a unique string to try again.

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

【VSCode】Angular Language Service を使ってテンプレート内で補完、エラーチェックを行う

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

仮想通貨取引所のAPIを使ってみる #2 - 各種取引所のBTC価格を取得する

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