中安拓也のブログ

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

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

Ionic Angular Cordova

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-keychain-touch-idとcordova-plugin-touch-idの両方を入れたことがおそらく原因だと思う。
cordova-plugin-keychain-touch-idのインストールをやめて、cordova-plugin-ios-keychainに変更したところ、解決した。

機能が一部、重複しているライブラリを入れたことが原因なのか....？

  • cordova-plugin-touch-id

    • Ionicアプリ上で、Face IDとTouch IDによる認証機能を呼び出すライブラリ

  • cordova-plugin-keychain-touch-id

    • Ionicアプリ上で、Face IDとTouch IDによる認証機能と、Keychainへのパスワード登録機能を可能にするライブラリ

iOS端末(iPhone/iPad)のUDIDを確認する方法

Xcode iOS iPhone

Apple開発者アカウントにデバイスを登録するときに必要になる、デバイスID(UDID)の確認方法について

バージョン情報

  • MacBook Pro(15-inch, 2017)
  • macOS High Sierra: 10.13.4
  • iTunes: 12.7.4
  • iPhone 8 plus(iOS 11.1.2)
  • Xcode: 9.3

UDIDの確認方法

デバイス番号(UDID)を調べる方法は、複数存在している。今回は、そのうちのiTunesを使う方法とXcodeを使う方法を紹介する

iTunesで調べる方法

この方法だと、iPhone(iPad)が強制的に同期されてしまうので、業務でテスト端末を使うときなどの場合は避けたほうがいいかもしれない

f:id:l08084:20180519164911p:plain

  1. Mac上でiTunesを起動する
  2. MacにiPhone(iPad)を接続する
  3. シリアル番号が表示されているところをクリック
  4. iPhone(iPad)のUDIDが表示される

Xcodeで調べる方法

f:id:l08084:20180519170208p:plain

  1. Mac上でXcodeを起動する
  2. 「Window」＞「Devices」コマンドを実行
  3. iPhone(iPad)をMacに接続する
  4. Debicesタブを選択する
  5. identifierの部分にデバイス番号(UDID)が表示される

参考サイト

日本語ドキュメント - Apple Developer

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

Ionic Angular JavaScript Typescript GitHub 作った

前回の記事はこちら

ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成していました。

最低限の機能は、実装できたかな？というところまで来たので、今回で一旦完成ということにします。

下記のURLから実際にさわれます。

https://l08084.github.io/ionic-sample-shopping-app/www

後からリポジトリを見直した時になんのシステムかわかるように、README.mdを書く アンド GitHub Pagesにプッシュして完了にしたいと思います。

  • GitHubリポジトリ

github.com

バージョン情報

Angular（JavaScriptのWebフレームワーク）ベースの、ハイブリットモバイルアプリ用フレームワークである「Ionic」を使っています

  • ionic-angular@3.9.2
  • Angular@5.2.10
  • Google Chrome バージョン: 60.0.3112.113

README.mdを書く

README.mdの構成ですが、Getting Started（ローカルでのアプリの動かし方）とApp Preview（各画面のスクリーンショット）だけ書いて終わりにします。

各画面のスクショをとる

$ ionic serve --labを使うと、各種OS（iOS, Android, Windows）の動作確認を一度に実行することができるので、便利です。

f:id:l08084:20180512192139p:plain
商品リスト画面のスクショ

f:id:l08084:20180512193014p:plain
商品詳細画面のスクショ

f:id:l08084:20180512193139p:plain
カート画面のスクショ

撮ったスクリーンショットをresources/screenshots/配下に配置して、README.mdから参照できるようにする。

README.md:

## App Preview

[Try it live](https://l08084.github.io/ionic-sample-shopping-app/www)

* Home Page

  <img src="resources/screenshots/HomePage.png">

* Detail Page

  <img src="resources/screenshots/DetailPage.png">

* Cart Page

  <img src="resources/screenshots/CartPage.png">

MacPCを使っていて、かつエディタがVSCodeのかたは、キーボードで「command + shift + v」と打つことで、マークダウンのプレビューをみることが出来るので、便利ですよ

GitHub Pagesに配置する

IonicアプリをGitHub Pagesで公開する - 中安拓也のブログ

IonicアプリをGitHub Pages上で公開する方法については、上記記事を参考にしてください。

本アプリについては、https://l08084.github.io/ionic-sample-shopping-app/www に公開しました。

以上

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

Ionic GitHub

Ionic3を使って作成したアプリを、GitHub Pagesで公開する方法について

バージョン情報

  • ionic-angular@3.9.2
  • Angular@5.2.10

GitHub Pagesで公開する

GitHubの設定を変更する

f:id:l08084:20180512173432p:plain

GitHubにアクセスして、GitHub Pagesで公開したいアプリのリポジトリの設定ボタンをクリックする

f:id:l08084:20180512173530p:plain

GitHub PagesのSourceを、Noneからmaster branchに変更する

Ionicアプリをビルドする

ターミナルを開いて、下記のビルドコマンドを実行する

$ ionic build --prod

出来上がったwww/フォルダを丸ごとGitHubにプッシュする

なお、.gitignoreにwww/が含まれたままだとプッシュできないので、事前に削除しておくのを忘れないように注意

これで、GitHub Pagesへの公開が完了する🍺🍺🍺

実際に参照してみる

GitHub PagesにプッシュしたIonicアプリを参照するには、https://[GitHubアカウント名].github.io/[リポジトリ名]/wwwのURLにアクセスすれば良い。

※ビルドした資源は、www/ 配下にあるため、URLに /www をつけるのを忘れないように

今回は、GitHubアカウント: l08084 リポジトリ名: ionic-sample-shopping-app のIonicアプリをGitHub Pagesにプッシュしたので、下記URLを参照すれば、実際の画面をみることができる。

https://l08084.github.io/ionic-sample-shopping-app/www

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

Ionic

f:id:l08084:20180511165352p:plain 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.0.3112.113

設定方法

戻るボタンのラベルについては、@NgModuleのimports: []配列にIonicModule.forRoot(MyApp, { backButtonText: [追加したいテキスト文] })を追加してあげることで、設定できます。

src/app/app.module.ts:

@NgModule({
  declarations: [MyApp, HomePage, TabsPage, DetailPage, CartPage],
  imports: [
    BrowserModule,
    // add this!
    IonicModule.forRoot(MyApp, { backButtonText: "Backします" }),
    HttpClientModule,
    IonicStorageModule.forRoot()
  ],

上のコードでは、戻るボタンのラベルを、Backしますに設定しています。

動作確認

上記のコードをブラウザ上で動かしてみます。

f:id:l08084:20180511165352p:plain
iOSで動かした場合の表示

f:id:l08084:20180511165901p:plain
Androidでの表示

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

Ionic Angular JavaScript Typescript

前回の記事はこちら

ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成していきます。

第9回目である今回は、ショッピングカート画面のリストを、スライドすると削除ボタンが表示されるリストに変更します。

  • デモ

こちらのURLで、完成版のアプリを実際に操作することができます

https://l08084.github.io/ionic-sample-shopping-app/www

  • GitHubリポジトリ

github.com

バージョン情報

Angular（JavaScriptのWebフレームワーク）ベースの、ハイブリットモバイルアプリ用フレームワークである「Ionic」を使っています

  • ionic-angular@3.9.2
  • Angular@5.2.10
  • Google Chrome バージョン: 60.0.3112.113

今回やること

f:id:l08084:20180510231720p:plain
今回やることのイメージ

前回は、ショッピングカートに入れた全ての商品を削除する「空にする」ボタンを実装しました。今回は、IonicのItemSlidingを使って、カートに入れた商品を一列ずつ削除するボタンを実装していきます。

スライドするとボタンが表示されるようにする

リストを、スライドするとボタンが表示されるItemSlidingに変えます。

  • ポイント
    • ItemSlidingにしたい部分を<ion-item-sliding>で囲む
    • 削除ボタンを<ion-item-options>で囲む
    • 削除ボタンをクリックすると、remove()メソッドがコールされる

カート画面のテンプレート(src/pages/cart/cart.html):

    <ion-list>
      <!-- ItemSlidingにしたいリストの部分を'ion-item-sliding'で囲む -->
      <ion-item-sliding *ngFor="let product of productList; let i = index">
        <ion-item>
          <div class="quantity">{{product.quantity}}</div>
          <div class="product">{{product.name}}</div>
          <div class="price">￥{{product.price * product.quantity}}</div>
        </ion-item>
        <!-- スライドした時に表示したいアイテムはここに書く -->
        <ion-item-options>
          <button ion-button (click)="remove(i)" color="danger">アイテムを削除する</button>
        </ion-item-options>
      </ion-item-sliding>

以上

次回の記事

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

Ionic Angular JavaScript Typescript

前回の記事はこちら

ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成します。

第8回目である今回は、ショッピングカート画面のヘッダーに「空にする」ボタンをつけます

  • デモ

こちらのURLで、完成版のアプリを実際に操作することができます

https://l08084.github.io/ionic-sample-shopping-app/www

  • GitHubリポジトリ

github.com

バージョン情報

Angular（JavaScriptのWebフレームワーク）ベースの、ハイブリットモバイルアプリ用フレームワークである「Ionic」を使っています

  • ionic-angular@3.9.2
  • Angular@5.2.10
  • Google Chrome バージョン: 60.0.3112.113

あらすじ

ショッピングカート画面に、「カート内に入れたアイテムを削除」する機能をつけるのをすっかり忘れていたのだった（全部買わない限り、カートを空にできない）。

今回やること

f:id:l08084:20180506173409p:plain
今回やることのイメージ

カート画面に「ショッピングカート内に入っているアイテムを全部削除する」ボタンをつけます

ヘッダーの右側にボタンを配置する

カート画面に、Ionicのボタンを配置します。<ion-buttons>タグにendをつけることで、ヘッダーの右端にボタンが配置されます。

カート画面のテンプレートファイル（src/pages/cart/cart.html）:

<ion-header>
  <ion-navbar>
    <ion-title>
      カート
    </ion-title>
    <!-- add this! -->
    <!-- endをつけることで、右側に配置される -->
    <ion-buttons end>
      <button ion-button (click)="allRemove()">空にする</button>
    </ion-buttons>

  </ion-navbar>
</ion-header>

<!-- ...長いので省略 -->

ショッピングカートを空にする処理

「空にする」ボタンをクリックすると呼び出されるallRemove()メソッドを実装します。

カート画面のコンポーネントファイル（src/pages/cart/cart.ts）:

  /**
   * ショッピングカートの中を空にする
   *
   * @memberof CartPage
   */
  allRemove() {
    this.storage.clear().then(() => {
      // タブのバッジを更新するために、
      // カート情報が更新されたことを出版している
      this.events.publish("cart:updated", 0);
      // ストレージの再読み込みを行う
      this.init();
    });
  }
}
  • ポイント
    • ionic-storageのclear()メソッドを呼び出すことでIonicストレージを空にしている
    • clear()メソッドは処理が完了するとPromiseを返すので、thenでキャッチしている

以上

次回の記事