質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

1195閲覧

【ハイブリッド】ステータスバーの透明化

lion_

総合スコア34

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/07/13 03:32

編集2017/07/13 03:38

###前提・実現したいこと
monacaにてハイブリッド開発をしております。
iPhoneの上部ステータスバーが現状背景白で固定されているのですが、
(恐らくステータスバーの背景色ではなくbodyそのものの白)
ステータスバー部にもコンテンツが表示される(画像など)ようにしたいと考えております。

そこで、
https://docs.monaca.io/ja/reference/cordova_6.2/statusbar/
こちらに倣い、cordova-plugin-statusbarを導入しました。
カスタムビルドデバッガーも再作成済みです。

以下も参考にさせていただきました。
https://teratail.com/questions/79810

下記をconfig.xmlに追記し

config.xml

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

試しに

javascript

1document.addEventListener("deviceready", onDeviceReady, false); 2function onDeviceReady() { 3 StatusBar.overlaysWebView(true); 4}

を追記したのですが

StatusBar.overlaysWebView is not function

が発生します。StatusBar自体はnullやundefinedにはなっていないので
if(StatusBar)はtrueとなります。
試しに
StatusBar.hide()
なども諸々試しましたがすべて同様のエラーとなります。

現状の開発環境がCordova6.2で、他にもプラグインを導入し問題なく動作している状態ですので
プランなどによるpluginの使用不可が原因ではありません。

何かアドバイスがあれば宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

オーバーレイ設定でどうにかしようとされていますが、やりたいことは「ステータスバー非表示でコンテンツエリアを広く使いたい」ということよろしいですよね?
オーバーレイ設定がうまく行っても、背景部分をコンテンツ表示するだけで、その上にステータスの文字が表示され、タップ反応も殺されてて、実はかなりがっかり設定です。
一応書いておくと、StatusBar Plugin を入れたら、config.xmlで

xml

1<preference name="StatusBarOverlaysWebView" value="true" />

でオーバーレイは有効化できます。

さて、本命のステータスバー非表示の方法です。

  • Cordova StatusBar Plugin 2.2.3をインストールする(現時点の最新版で動作確認出来たという意味です)

config.xml

xml

1<preference name="Fullscreen" value="true"/>

javascript

1if (cordova.platformId == 'ios') { 2 StatusBar.hide(); 3}

このようにすれば、

  • Android 起動時からステータスバー非表示
  • iOS 任意のタイミングでステータスバー非表示

ができます。

少し解説します。

  • Fullscreen指定 この設定をすることで、Androidがフルスクリーンになりステータスバーが消えます。iOSには関係ない設定のようです。
  • StatusBar.hide これがやっかいで、どうもStatusBarが生成されるタイミングはかなり怪しいです。

StatusBarのマニュアルの原文は「it is not available until after the deviceready event」と書いてあります。
英語苦手なんですが、これって「devicereadyイベントの後じゃないと使えない」つまり「devicereadyイベント中の呼び出しでは使用できない」という意味ではないでしょうか?
ですので、私のアプリの場合、各コンテンツデータのローディングでぐるぐる画像を表示している間はまだステータスバーは表示しておいて、完了したタイミングで非表示にすることにしました。
これで問題なくステータスバー非表示ができるようになりました。
というわけで、妥協できる範囲で可能な限りこの呼び出しを遅らせてみて下さい。

ちなみに、

xml

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

は不要です。これはなくても動作します。
あのマニュアル、もしかして古い記述も平気で残しっぱなしなんじゃないかと私は疑っています。

投稿2017/07/13 08:02

zohnam

総合スコア1441

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lion_

2017/07/13 09:35

お世話になります。ご丁寧な返信まことにありがとうございます。 実のところ、今回はオーバーレイが目的でした。 ですので、時間やバッテリー表示の裏にコンテンツが表示されればそれでOKです。 ただ、教示頂きました方法だと私の環境ではうまく動かないようです。 試したことは ・ステータスバーのバージョンが古かったので2.2.3へアップ。 ・不要と言われたconfig.xmlの記述を削除。 ・StatusBarOverlaysWebViewのconfig.xmlへの追記。 ・カスタムデバッガーの再作成、確認。 となりますが、オーバーレイされませんでした。。 オーバーレイが悪いのかと思い、 fullscreenの内容も追記して非表示も試してみたのですが非表示になりません。 今回質問で書かせて頂きました通り、StatusBar自体は認識されているのですが、 hide()などのfunctionが見つからないといった状況です。。 何か開発環境の根本的なところが悪いのか。。。 ただ、Cameraプラグインは普通に動いているのでCordovaが動作しない環境ではないという認識です。。
lion_

2017/07/13 09:37

devicereadyの話もでましたので、念のためdevicereadyの後にも実施してみたのですが状況はかわりませんでした。。
zohnam

2017/07/13 09:55

アドホックビルドでも動作していなのか、確認してみてください。 私の場合、Androidのデバッグビルドでviewport制御がうまく行っていたのに、リリースビルドでうまくいかなくなっててびっくりした経験があります。 リリースに近いビルドだと違う結果がでるかもしれません。 ステータスバーの非表示などの動作確認は、iOSはアドホックビルド、Androidはリリースビルドで行っています。
lion_

2017/07/13 14:48

ありがとうございます。 アドホックビルドを実行しました。 結論から言うと、ちょっと意図していない動作をしています・・・。 まず、StatusBarプラグインを導入した状態で <preference name="StatusBarOverlaysWebView" value="true" /> のみをconfig.xmlに記述した状態でビルドしてもステータスバーが消えます。。 しかも消えるというよりは、白塗になっただけでそこに文字など何も表示されない白いステータスバーの存在があるというニュアンスです。 次に <preference name="StatusBarOverlaysWebView" value="false" /> に変更してビルドしたのですが、状態は変わらず、むしろ上記の白いステータスバーの高さが増えるだけです。。 以下の設定がないことは何度も確認しました。 <preference name="Fullscreen" value="true"/>とjavascript 現在は一旦プラグインを外している状態です。 プラグインを外した状態でビルドすると、これまでのデバッガーと同様の動作(ステータスバーが表示される)しています。 ステータスバーのオーバーレイ化は難しいのでしょうか・・・・うーん。。。
lion_

2017/07/13 15:00

試しにもう一度プラグインを導入し、config.xml設定なしで試しましたがデフォルト:trueという記述の通り、動作は <preference name="StatusBarOverlaysWebView" value="true" /> が記載されている状態と同じですね。。
lion_

2017/07/14 01:07

zohnamさん、出来ました!! あの後ステータスバーの観点ではなく、余白観点で調査していたのですがonsenUIのドキュメントに以下の記載を見つけまして。 ----- iOS 7以降では、ステータスバーをWebViewの上に重ねることができます。Onsen UIでは、自動的にその余白を作り、アプリの表示領域の最適化を行います。ただし、CordovaのStatusBarプラグインを用いる場合などにおいては、ユーザーがステータスバーの配置を制御することができるため、必ずしもこの余白が必要ではありません。 // 余白制御を無効にする ons.disableAutoStatusBarFill(); ----- この対応を入れることで無事に表示されました。 回答ありがとうございました!
zohnam

2017/07/14 01:15

おめでとうございます。 思わぬところに回答が転がってましたね~w
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問