簡単に呼べます。
NibViewController.swift
NibViewController.xib
をつくったとします。

let nvc = NibViewController.init(nibName: "NibViewController", bundle: nil)
self.navigationController?.show(nvc, sender: nil)

?

---

お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

Twitter
Medium

MonacaでiOSデバッグビルドを実行するまでの記事の続きです。

基本的にデバッグビルドと手順はほぼ一緒で、App IDsはデバッグビルドのものをそのまま使います。

秘密鍵とCSRの生成

デバッグビルドのときと同じくMonaca IDEの「iOSビルド設定」から「秘密鍵とCSRの生成」を行います。

CSRをApple Developer Programに登録してCER証明書を発行

Apple Developer Programから「Certificates, IDs & Profiles」を選択、プラスマークを押してCertificatesを追加します。

リリースビルドなので「iOS Distribution (App Store and Ad Hoc)」を選択

先ほど作成したCSRをアップロード

CER証明書が発行されるのでダウンロードします。

プロビジョニング・プロファイルの作成

リリース用のプロビジョニング・プロファイル（Provisioning Profile）を作成します。

紐づけるBundle IDを選択します。

紐づけるCER証明書を選択します。

名前を付けてプロビジョニング・プロファイルを生成します。

生成したファイルをダウンロード。

ビルド・ストア提出

CER証明書とプロビジョニング・プロファイルをMonacaにアップロードします。
「証明書のアップロード」⇒「プロファイルのアップロード」の順でアップロードします。

成功すればリリース証明書がMonacaに登録されます。

設定した証明書を選択してリリースビルドを開始します。

しばらく待ってアプリのビルドエラーがなければ、ビルド結果が表示されます。

出来上がったIPAファイルはダウンロードしてApp Store Connectの申請に使います。

---

ストア提出の流れは下記記事が分かりやすかったです。

monacaでのiPhoneアプリのビルドとリリース 後編 2020年版

Firebase Remote Configとは

Firebase Remote Config のコンソール側でKey:Valueの値を登録しておくことで、その値をクラウドで更新することができます。

メリット

アプリの動作や外観を変更する際に、アプリのアップデートを配布せずとも、Firebase Remote Configのコンソール上で設定を修正するだけで変更することができます。
基本的に全ユーザーに対して同じKey-Valueをリアルタイムに配信・反映でき以下のようなケースに利用することができます。

• 条件（アプリバージョン、OS、指定％のユーザー等）を指定してValueを変える事もできる。
• A/Bテストにも使用することができる。

よくアプリのバージョンをFirebase Remote Configで管理し、強制アップデートを促す際に使われることが多いそうです。

デメリット

即時反映には向いていない

基本的にフェッチ(クラウドから値の取得)は12時間に1度しか行われません。一度フェッチを行った場合は、キャッシュが残り再度フェッチするまでの間はキャッシュされた値が使用されます。そのため、即時変更を求める値の取得についてはFirebase Remote Configの利用は適していません。

導入手順

Firebaseコンソールでの設定

1. Firebaseコンソールを開き、メニューからRemote Configを選択します。

2. 条件の設定

ここでは、それぞれ値を取得する際の条件を設定することができます。

条件については

• デバイスの地域 / 国
• 現在の時刻とデバイスで取得された時刻
• アプリのバージョン
• ビルド番号

などで設定できます。

ここでは、デバイスが日本かどうかで判別していきます

などで条件を設定することも可能です。

3. パラメーターキーの設定

上記で決めた条件に基づいて、

-  デバイスの地域 / 国　= 日本　の場合：ヤフーのURL
-  デバイスの地域 / 国　= 日本以外　の場合：グーグルのURL

を取得するように設定していきます。
これによってデバイスの国によって遷移する先のURLを変更することができます。

Swift側

1.Remote Configオブジェクトの作成

remoteConfig = RemoteConfig.remoteConfig()
let settings = RemoteConfigSettings()

//　フェッチ間隔の設定（開発環境のみ設定）
settings.minimumFetchInterval = 0

remoteConfig.configSettings = settings

Remote Configは基本的に一度フェッチしたらキャッシュ時間内（デフォルトでは12時間）では再度フェッチされません。
そのため、開発環境では上記のようにminimumFetchIntervalを設定する必要があります。これにより開発環境ではフェッチ間隔に関係なくフェッチを行うことができます。ただし、このコードは必ず本番環境に書かないように注意してください。

この設定は開発目的でのみ使用し、本番環境で実行されるアプリには使用しないでください。10 人の小さな開発チームでアプリをテストするだけの場合、毎時のサービス側の割り当て制限に達する可能性はほとんどありません。しかし、最小フェッチ間隔に非常に小さい値を設定して何千人ものテストユーザーにアプリを push すると、アプリがこの割り当てに達する可能性が高くなります。

https://firebase.google.com/docs/remote-config/use-config-ios?hl=ja

2.デフォルト値の設定

Firebase Remote Config側に値が設定されていなかったり、オフラインで取得できない際に使うデフォルト値をここで設定します。
plistファイルを作成し、一連のパラメータ名とデフォルト値を定義します。

// RemoteConfigDefaultsはplistファイルのファイル名
remoteConfig.setDefaults(fromPlist: "RemoteConfigDefaults")

3.値の読み込み

remoteConfig.fetchAndActivate { (status, error) -> Void in
            if status == .successFetchedFromRemote || status == .successUsingPreFetchedData {
                // fetchが完了した際の処理を記述
                print("Config fetched!")
                // 今回取得した値はjson形式のためデコードする必要があります
                let jsonString = remoteConfig["parameter"].stringValue
                let jsonData = jsonString?.data(using: .utf8)
                do {
                    // getUrlにRemote Configから取得した値を格納している
                    var urlDictionary = try JSONSerialization.jsonObject(with: jsonData!, options: [])
                    guard let dictionary = urlDictionary as? [String: Any],
                    let getUrl = dictionary["url"] as? [String: Any]　else { return }
            } else {
                // fetchに失敗した際の処理を記述
                print("Config not fetched")
            }
        }
}

fetchAndActivateによって値のフェッチとfetchした値を有効化する処理を一度に行っています。
このように実装することでFirebase Remote Configから値を取得、アプリ内で利用することができます。

環境

• macOS v10.15.5
• npm v6.13.4
• Ionic v6.10.1
• Xcode v12.0.1
• Android Studio v4.0.1

Ionic環境構築

Nodeを以下からインストールします
https://nodejs.org/ja/

Ionic CLIをインストールします

% sudo npm install ionic -g

Ionic+Angularプロジェクトを作成

以下コマンドでIonic+Angularプロジェクトを作成します

% ionic start --type=angular

以下のように聞かれるので? Project name:の後に任意のプロジェクト名を入力します

Every great app needs a name! ?

Please enter the full name of your app. You can change this at any time. To
bypass this prompt next time, supply name, the first argument to ionic start.

? Project name:

プロジェクト名設定後ionicのテンプレートを選択します
モバイルアプリでよく使うUIが用意されているようです（本記事ではtabsを選択）

? Starter template: (Use arrow keys)
❯ tabs         | A starting project with a simple tabbed interface
  sidemenu     | A starting project with a side menu with navigation in the cont
ent area
  blank        | A blank starter project
  list         | A starting project with a list
  my-first-app | An example application that builds a camera with gallery
  conference   | A kitchen-sink application that shows off all Ionic has to offer
(Move up and down to reveal more choices)

以下のように聞かれるのでyを入力して次に進みます

yを選択するとCapacitorというライブラリによってプロジェクト内にiOSとAndroidが追加されます

? Integrate your new app with Capacitor to target native iOS and Android? (y/N)

Nを選択して進んだ場合でも以下コマンドで後から追加することが可能です

% ionic integrations enable capacitor

% npx cap add ios

% npx cap add android

以下が表示されていればプロジェクト作成完了です

Your Ionic app is ready! Follow these next steps:

ブラウザで立ち上げる

以下コマンドでブラウザでプレビューを表示します

% ionic serve

以下のように表示されました
プロジェクト作成時点でtabsテンプレートを選択したのでタブが自動生成されています

アプリとしてビルドする

コマンドにてXcodeかAndroidを起動するだけでビルド自体は各IDEの機能で行います
プロジェクト作成時点で前述したCapacitorライブラリが利用可能になっていることが前提です。

iOSの場合
以下コマンドでXcodeが自動で起動します

% npx cap open ios

Androidの場合
以下コマンドでAndroid Studioが自動で起動します

% npx cap open android

また以下コマンドで各OS端末のプレビューをブラウザでも確認することができるようです。

% ionic serve --lab

この時点ですでにiOS、Androidらしいデザインで生成されていて素晴らしいです

おわり

次回はプロジェクトファイルの構成を調べて投稿予定です。（2020/10/25時点）

参考

https://ionicframework.com/jp/docs/angular/your-first-app
https://capacitorjs.jp/docs/getting-started/with-ionic

スマホで見るとボタン表示が変！？

表題のとおり、bootstrap4を使っていた時に起こった問題についてメモ書き。

EC2にデプロイして、ほっとひと安心していたのもつかの間。

PCから開いたら問題ないのに、スマホから開くとボタンのデザインがおかしい。

実際の画面

（PCからの表示）

（スマホからの表示）

何か白いのが出てる！

コード部分

.button#dropdown1.btn aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button"
  i.user-icon.fas.fa-user-circle.fa-3x
.dropdown-menu aria-labelledby="dropdown1"
  - if user_signed_in?
    li = link_to 'マイプロフィール', user_path(current_user), class: 'text-dark font-weight-bold dropdown-item bg-light'
    li = link_to 'プロフィール編集',"/users/edit", class: 'text-dark font-weight-bold dropdown-item bg-light'
    li = link_to 'ログアウト',"/users/sign_out", method: :delete, class: 'text-dark font-weight-bold dropdown-item bg-light'
  - else
    li = link_to 'ログイン',"/users/sign_in", class: 'text-dark font-weight-bold dropdown-item bg-light'
    li = link_to '新規登録',"/users/sign_up", class: 'text-dark font-weight-bold dropdown-item bg-light'

原因と対策

調べてみると、iOSのデフォルトスタイルが悪さをしていることが分かった。このスタイルの適用を外す必要がある。

CSSで該当する要素に指定をかける。今回の場合だとbtn要素の#dropdown1に記述を追加する。

div#dropdown1 {
  -webkit-appearance: none;
}

これでサーバーにデプロイし、表示を確認。

直った！

まとめ

OSの違いで生じる問題なので、今後も同様のトラブルが出てきた時に使っていきたい。

for 変数 in 開始値 ... 終了値 {
                            // ステートメント
                        }

こういう文字列を変数に代入して出力したい時、

こんな風に書いてました。醜い・・・。

こっちの方がソースコードがみやすいですね。

let string = """
             ここに入れたい文字列をかく。
　　　　　　　　　　　　こんな風にタブ入力が可能になる。
　　　 ここにかくことはできない。"""の後以降にかけば認識される。
　　　　　　　　"""

XibファイルをViewに埋め込んだ時に、高さを文字数などによって自動調整したい場合の方法。

非自動調整時：
緑のViewが途中で切れてしまっている。

自動調整後：
緑のViewが最後まで表示されている。

【解決方法】
StoryBoard上で埋め込んでいるXibファイルを表示するViewの設定を下記のように変更。
Layout→Autoresizing Mask

Autoresizingで自動調整して欲しい拘束を設定。