モチベーション 業務で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: 9.3 cordova-plugin-touch-id: 3.3.1 原因 cordova-plugin…

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

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

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.…

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

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

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

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

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

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

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

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

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

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

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 …

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

事象 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]の部分でエラーが発生していることがわかる。エラーメッ…

画像を設定する前のアプリ画面 はじめに Ionicで画像を設定する方法について バージョン情報 Ionic: 3.9.2 Angular: 5.0.3 node: 8.1.4 macOS High Sierra 画像設定方法 設定したい画像（例では、isometropolis.jpg）をsrc/assets/imgs配下に置く。 CSS(SCSS…

開発に使っていないPCにIonic2を入れようとしたら、時間がかかったので、つまづいた部分をメモ。 開発環境 OS: Windows7 64bit Ionic version: 2.0.0-beta.11 Ionic CLI version: 2.0.0 Ionic2環境構築手順 Node.jsのインストール Gulp、Typingsのインストー…