ステータスバー非表示で時刻と電池マークが消えきらない!

こんにちは、プログラミング初心者です。
現在Monaca(HTML5+JavaScriptのアプリ開発プラットフォーム)を使用してiosアプリ開発に取り組んでおります。
そのアプリの中で、ステータスバーを非表示にするコードを試した結果、
画面上部のステータスバー部分が白い空白になり、一見消えたように見えました。
しかし充電時には電池アイコンが緑、電池残量が少ないときには赤となって現れ、中心にある時刻表示もよく見ると色が白になって背景と同化しているだけで、少し色のある部分にスライドしてみると見えてしまいます。（デバッグビルドで確認しました）
その➀

xml
1<feature name="StatusBar">
2<param name="ios-package" value="CDVStatusBar" onload="true" />
3</feature>

javascript
1function onDeviceReady() {
2StatusBar.hide();
3}

その➁

xml
1 <config-file platform="ios" target="*-Info.plist" parent="UIStatusBarHidden">
2    <true/>
3    </config-file>
4    <config-file platform="ios" target="*-Info.plist" parent="UIViewControllerBasedStatusBarAppearance">
5    <false/>
6    </config-file>

上記のコードにて実装を試みました。
➀➁のコードは両方残ったままです。
これら二つの方法以外でステータスバーをiosアプリ内で完全に消し切る方法をご存知の方がいらっしゃいましたら問題点のご指摘、改善策、その他の点でのご指摘もお待ちしております。

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="css/style.css">
12
13</head>

javascript
1 ons.ready(function() {
2      console.log("Onsen UI is ready!");
3    });
4    
5    if (cordova.platformId == 'ios') {
6    StatusBar.hide();
7}
8
9ons.disableAutoStatusBarFill();

以上が試したコードです。初期コードにほぼ近い状態です。

行動規範の内容に同意します

回答3件

ベストアンサー

バグも消えたところで、改めて完全回答行ってみましょう。

新規プロジェクトを作成する
app IDを設定する
StatusBarプラグインを追加する
config.xmlを記述する
ビルドする
実機で確認する

以上の6ステップで確認できます。

##新規プロジェクトを作成する

OnsenUI系列の「Onsen UI V2 JS Minimum」と、サンプルアプリの系列の「HelloWorld」で確認済みです。
どちらかの新規プロジェクトを作成します。

App IDを設定する

確認にはビルドが必須なので、AppIDが必要です。
確認のためだけにプロビジョニングプロファイルなどを用意するのも面倒ですから、既存のと同じIDでいいでしょう。

##StatusBarプラグインを追加する

Cordovaプラグインの管理から、StatusBarプラグインを有効にします。
バージョンはデフォルトの2.1.3でもいいし、最新の2.2.3でもいいです。

##config.xmlを記述する

config.xmlに

xml
1    <config-file platform="ios" target="*-Info.plist" parent="UIStatusBarHidden">
2      <true/>
3    </config-file>
4    <config-file platform="ios" target="*-Info.plist" parent="UIViewControllerBasedStatusBarAppearance">
5      <false/>
6    </config-file>

という設定を追記します。これがステータスバーを起動時から消去する設定です。記述場所は<platform name="ios">～</platform>の中です。
具体的にいうと、

xml
1(前略)
2    <splash src="/res/ios/screen/Default-736h.png" width="1242" height="2208"/>
3    <splash src="/res/ios/screen/Default-Landscape-736h.png" width="2208" height="1242"/>
4    <splash src="/res/ios/screen/Default-Portrait~ipad.png" width="768" height="1024"/>
5    <splash src="/res/ios/screen/Default-Landscape~ipad.png" width="1024" height="768"/>
6    <splash src="/res/ios/screen/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
7    <splash src="/res/ios/screen/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
8    <config-file platform="ios" target="*-Info.plist" parent="UIStatusBarHidden">
9      <true/>
10    </config-file>
11    <config-file platform="ios" target="*-Info.plist" parent="UIViewControllerBasedStatusBarAppearance">
12      <false/>
13    </config-file>
14    <config-file platform="ios" parent="CFBundleLocalizations" target="*-Info.plist">
15      <array>
16        <string>en</string>
17      </array>
18    </config-file>
19  </platform>
20  <platform name="android">
21    <icon src="/res/android/icon/ldpi.png" density="ldpi"/>
22    <icon src="/res/android/icon/mdpi.png" density="mdpi"/>
23(後略)

ここです。

##ビルドする

用意しているプロビジョニングプロファイルなどに応じて、デバッグビルドするなりアドホックビルドするなりしましょう。

##実機で確認する

手持ちの実機で確認したください。
私のところでは、「iPhone 4s iOS 9.3.5」と「iPhone SE iOS 10.3.2」でステータスバー消去を確認できました。

投稿2017/07/25 01:44

zohnam

総合スコア1441

anopurihana

2017/07/26 05:42

zohnamさんご丁寧に何度も回答してくださり、ありがとうございます。ようやくステータスバーが消えました！スプラッシュスクリーン起動時から、実際のアプリの画面に移行した後も消えた状態を保ち続けています。何とお礼申し上げたらよいかわかりません。zohnamさんの助けなしでは今回のアプリ製作はうまくいってなかったと思います。数日にわたってこちらの問題、質問にお付き合いしてくださり、本当にありがとうございました。

行動規範の内容に同意します

私もProプランですので、違いが出る要素はありませんね。

新規プロジェクトの作成で「Onsen UI V2 JS Minimum」を選ぶ
Cordovaプラグインの追加で「cordova-plugin-statusbar」を追加する
StatusBarプラグインの「設定」でバージョン選択しようとすると、下記の画像のようになる

anopurihanaさんは同じ条件で動作させて2.2.3が出てこないのであれば、これはもうMonacaのアカウント管理のバグとして報告するしかありません。
Monacaログインして右上の「ヘルプ&サポート」→「サポート&サービスについて」→「障害・不具合情報の報告」で、ログインアカウントによって利用可能プラグインの差がでるのはなぜか、ということを問い合わせてみてください。
teratailはMonacaの公式フォーラムとして利用されてますので、このやりとりのページURLを張って質問して問題ないと思います。

投稿2017/07/23 10:43

zohnam

総合スコア1441

anopurihana

2017/07/23 12:56

zohnamさんわざわざご丁寧に画像付きで解説してくださってありがとうございます。そうですね、ここまでくるとアカウント管理のバグがあるように思います。 zohnamさんが教えてくださったようにmonacaに直接問い合わせてみようと思います。ここまで長い間助言をしていただいたこと、とても感謝しております。今後のステータスバー問題の進捗については、恐縮ですがこの場を借りて逐一報告させていただきます。

anopurihana

2017/07/24 11:47

zohnamさんその後について念のため報告いたします。昨日Monacaに不具合情報として上記の件を報告したところ、バグを修正してくださったとの返事がありました。そしてCordovaプラグインからStatusbarプラグインのバージョンを確認したところ、2.2.3のバージョンを選択できました。しかし、その後アドホックビルドにて確認してみたところ、まだステータスバーが残っているようでした。正確には、zohnamさんにアドバイスいただいたようにOnsen UI V2 JS Minimumの新規プロジェクトにステータスバー非表示のコードを加えただけの状態ですので、まっさらな画面で、充電器を装着するとやはりあの緑色が浮き出てきました。

行動規範の内容に同意します

なかなかうまくいかないようですね…。

フリープランだと1日3ビルド制限があるので、完璧な結果を求めてあれこれ試すのも厳しいでしょう。
config指定を完璧にし、起動時からステータスバーを消すのは難しいみたいですから、ちょっと妥協しませんか？

【ハイブリッド】ステータスバーの透明化
ここで、アプリ内の任意のタイミングでステータスバーを消去するための方法を書いています。
スプラッシュスクリーンのあとにタイトル画面を出してスタートボタンをタップさせるとして、そのタップのタイミングで消す、とかであれば、かなり確実に成功するはずです。

投稿2017/07/22 00:27

zohnam

総合スコア1441

anopurihana

2017/07/22 01:48

zohnamさんご回答ありがとうございます、いつもお世話になっております。プランに関してですが、完成が近づいてきたので一つ上の有料プランに切り替えました。ですのでビルドはあまり制限を気にせずできる環境になりました。ひとまずzohnamさんの方法で試してみます。自分にとっては新しい方法なのでとても助かります。

anopurihana

2017/07/23 03:17

zohnamさん上で掲載してくださった回答の中のリンク先の内容を一通り試しました。 lionさんとの一連のやり取りの中で出てきた、 Javascript、xmlそれぞれへの記述不要なコードの削除 OnsenUIの余白制御のコード追加 iosビルドなのでアドホックビルドでの試行これらすべてを試してみましたが、デバッグビルドと比較して変わった点はないように見受けられました。何か考え得る見落としなどございますでしょうか・・。

zohnam

2017/07/23 03:53

ビルド回数に制限がないのでしたら、実験的にOnsenUI抜きにしてみてください。私のアプリではOnsenUIを使用してませんので、そこが一番の差となってると思います。

anopurihana

2017/07/23 05:26

zohnamさん OnsenUIの <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/css/onsenui.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/css/onsen-css-components.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/js/onsenui.js"></script> 上記のファイル読み込みを削除しましたが、ステータスバーには変化がありませんでした。また、現状OnsenUIの機能が必要な仕組みをたくさん書き込んでおり、なるべくOnsenUIを抜きにして製作を続けることは避けたいというのが本音です。原因は他にあるのでしょうか、それとも上記の方法ではOnsenUIを抜きにできていないのでしょうか？

zohnam

2017/07/23 06:37

OnsenUIの確認はそれで十分だと思います。どうにも、いまのプロジェクトからマイナスする方向の調査では無理があるようですね。適当なサンプルをベースに新規プロジェクトを作り、そこでステータスバー消去の設定だけ確認してみてください。現状は、ステータスバー消去の設定がうまくいくのだという実感を得るのが先決だと思います。新規プロジェクトでうまくいったら、次はanopurihanaさんのプロジェクトに必要な要素を足していきましょう。順次追加しながら確認していけば、何が悪くて本命のプロジェクトでは動作しないのかが、見えてくると思います。

anopurihana

2017/07/23 08:23

仰る通り、新しいプロジェクトに足していく方向が間違いないと思います。そこで、初期の同じプラットフォームにステータスバー非表示の処理のみを加えた状態でアドホックビルドをして確認してみました。しかし、依然ステータスバーが表示されたままです。（厳密にいうと背景の白と同化してなくなったように見えるだけの状態です）一つ気になったことがありまして、statusbarのcordovaプラグインのバージョンについてです。上で載せてくださったリンク内では、2.2.3が最新版であるとのやり取りがありましたが、現在は2.1.3以外にないようです。（7/14更新版）このバージョンの違いが原因である可能性は考えられないでしょうか？念のために試したコードを質問欄に加えておきます。目を通していただければ幸いです。

zohnam

2017/07/23 08:33

StatsuBarを有効にするときは、デフォルトで2.1.3になっています。有効にしたあと、StatusBar（というか有効にしているプラグインはすべて）に「設定」ができるようになります。そこで設定ダイアログを出すと、バージョン選択ができるのです。 2.2.3は、そこで選択できます。

anopurihana

2017/07/23 08:41

はい、仰るように設定のボタンがあり、そこからバージョンを選べるようでしたが、2.1.3以外に選択肢が出てこない状態です。インストールパラメータというところの入力欄にのみカーソルが合わせられ、文字入力ができるだけです。これは人によって違うのでしょうか？

zohnam

2017/07/23 08:54

Cordovaバージョンはいくつですか？　Cordovaプラグインのページで、上の方、「CLI バージョン」の右に出ている数字です。私のアプリだと6.2.0です。

anopurihana

2017/07/23 08:56

zohnamさん改めて確認いたしましたが、こちらも6.2.0です。

zohnam

2017/07/23 08:56

CLIバージョンの下の「詳細を表示」にすると、「iOSプラットフォーム: 4.2.0」「Androidプラットフォーム:　5.1.1」です。どうですかね。

anopurihana

2017/07/23 08:57

その二つの情報も一緒でした。

zohnam

2017/07/23 09:06

新規プロジェクトで、「Onsen UI V2 JS Minimum」のサンプルで、StatusBar追加したら、2.2.3までの選択肢がでました。「HelloWorld」のサンプルでも2.2.3まで出ました。どうですか？

anopurihana

2017/07/23 09:22

ご指摘いただいたように新規プロジェクト、HelloWorld両方で確認いたしましたが、どちらでも2.2.3の選択肢は出てきませんでした。原因がわかりませんね・・・。

zohnam

2017/07/23 09:24

私はWeb上でビルドしてます。クライアント版を使われてたりします？

anopurihana

2017/07/23 10:05

こちらはデバッグビルド、アドホックビルドどちらで確認するにしてもQRコードで読み取ってからスマートフォンで確認しております。用語に関しては少し無知なもので、クライアント版というものがどういったものかは存じ上げませんが、使っているのはproプランです。

zohnam

2017/07/23 10:25

ブラウザで　https://monaca.mobi/ja/dashboard　などに行ってログインしてビルドするという意味でWeb版と書きました。Monaca用語としてはクラウド版が正しいのかもしれません。対して、クライアント版は　https://ja.monaca.io/localkit.html　ここからWindows版などをDLした実行ファイルでビルドするものです。どちらを利用されてますか？

anopurihana

2017/07/23 10:30

わかりやすいご説明をありがとうございます。 Weｂ版を使用しています。クライアント版というものがあることが初耳でした。

行動規範の内容に同意します

あなたの回答