# StatusBar プラグイン テスト環境 ( バージョン番号 ) : [2.4.3](https://github.com/apache/cordova-plugin-statusbar/releases/tag/2.4.3) このプラグインの詳細は、 [こちらの原文 ( GitHub )](https://github.com/apache/cordova-plugin-statusbar) をご確認ください。 `StatusBar` オブジェクトを使用して、iOS と Android のステータスバーをカスタマイズできます。 ### プラグイン ID ```javascript cordova-plugin-statusbar ``` ### プラグインの追加方法 このプラグインを使用する場合には、Monaca クラウド IDE の \[ Cordova プラグインの管理 ] 上で、`StatusBar` プラグインを[有効](/products_guide/monaca_ide/dependencies/cordova_plugin.md#cordova-puraguin-noinpto)にします。 ### Peference を使用したカスタマイズ設定 #### config.xml * **StatusBarOverlaysWebView** ( 真偽値、デフォルトでは true )。アプリの起動時、WebView 上にステータスバーを置くか ( overlay/オーバーレイ ) 否かを設定します。iOS 7 が対象です。 ```markup ``` * `StatusBarBackgroundColor` ( 16 進数の文字列で示すカラーコード、デフォルトはなし )。アプリ起動時のスタータスバーの背景色を、16進数の文字列 ( #RRGGBB ) で設定します。この値が設定されていない場合、背景色は透明になります。\[ 翻訳者メモ : 原文には、「 on iOS 7 」 とありますが、他のバージョンでも使用されていることから、この表現を削除しています ] ```markup ``` * **StatusBarStyle** ( ステータスバーのスタイル、デフォルトは lightcontent )。ステータスバーのスタイル ( 色 ) を設定します。 default、lightcontent、blacktranslucent、blackopaque のいずれかを設定できます。iOS 7 が対象です。 ```markup ``` * **StatusBarDefaultScrollToTop** ( ブール値、デフォルトは false ) 。iOS 7 では、Cordova WebView は、デフォルトの scroll-to-top 動作を使用できます。 デフォルトでは false に設定されているため、 "statusTap" イベント（後述）を使用し、動作をカスタマイズすることができます。 ```markup ``` #### Android 特有の動作 Android 5+ を対象とする、多くのガイドラインでは、スタータスバーとアプリのテーマに、別々の色を指定するように推奨されています ( 一方、iOS 7+ 向けのアプリでは、スタータスバーとアプリのカラーを統一する方が多いようです )。ここでは、ステータスバーの色をあらかじめ設定するのではなく ( `StatusBar.backgroundColorByHexString` または `StatusBar.backgroundColorByName` を設定 )、動的 ( プログラムの実行時 ) に設定する方法の一例を記します。 ```javascript if (cordova.platformId == 'android') { StatusBar.backgroundColorByHexString("#333"); } ``` ### アプリ起動時の非表示設定 アプリの実行中は、後述する StatusBar.hide 関数を使用できます。また、アプリ起動時にステータスバーを非表示にしたい場合は、アプリの Info.plist ファイルの内容を変更する必要があります。 非表示設定にする属性を適宜変更する必要があります ( 属性がない場合は追加 )。 `Status bar is initially hidden` 項目を **YES** に設定して、次に、 `View controller-based status bar appearance` 項目を **NO** に設定します。Xcode を使用せずに、手動で変更を行う場合には、次のキーと値を追加します。 ```javascript UIStatusBarHidden UIViewControllerBasedStatusBarAppearance ``` ### メソッド このプラグインは、グローバルな `StatusBar` オブジェクトを定義します。 グローバルスコープでは、`deviceready` イベントの発火後まで使用できません。 ```javascript document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { console.log(StatusBar); } ``` * StatusBar.overlaysWebView * StatusBar.styleDefault * StatusBar.styleLightContent * StatusBar.styleBlackTranslucent * StatusBar.styleBlackOpaque * StatusBar.backgroundColorByName * StatusBar.backgroundColorByHexString * StatusBar.hide * StatusBar.show ### StatusBar.overlaysWebView iOS 7 のステータスバーを上書きします ( WebView の上書きではありません )。 ```javascript StatusBar.overlaysWebView(true); ``` #### 解説 iOS 7 のステータスバーを、iOS 6 のように表示したい場合、false に設定します。 #### 対象プラットフォーム * iOS #### 例 ```javascript StatusBar.overlaysWebView(true); StatusBar.overlaysWebView(false); ``` ### StatusBar.styleDefault デフォルトのステータスバーを使用します ( 黒の文字、白の背景 )。 ```javascript StatusBar.styleDefault(); ``` #### 対象プラットフォーム * iOS * Android 6+ ### StatusBar.styleLightContent lightContent のステータスバーを使用します ( 白の文字、黒の背景 )。 ```javascript StatusBar.styleLightContent(); ``` #### 対象プラットフォーム * iOS * Android 6+ ### StatusBar.styleBlackTranslucent blackTranslucent のステータスバーを使用します ( 白の文字、半透明の黒の背景 )。 ```javascript StatusBar.styleBlackTranslucent(); ``` #### 対象プラットフォーム * iOS ### StatusBar.styleBlackOpaque blackOpaque のステータスバーを使用します ( 白の文字、不透明な黒の背景 )。 ```javascript StatusBar.styleBlackOpaque(); ``` #### 対象プラットフォーム * iOS * Android 6+ ### StatusBar.backgroundColorByName StatusBar.overlaysWebView を false にした場合 ( iOS 7 上で iOS 6 のようなステータスバーを使用 )、色の名前を指定して、ステータスバーの背景色を設定できます。 ```javascript StatusBar.backgroundColorByName("red"); ``` サポート対象の色の名前は、次のとおりです。 ``` black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown ``` #### 対象プラットフォーム * iOS * Android 5+ ### StatusBar.backgroundColorByHexString 16 進数の文字列を使用して、ステータスバーの背景色を設定します。 ```javascript StatusBar.backgroundColorByHexString("#C0C0C0"); ``` CSS のショートハンド プロパティ ( 簡略化表記 ) も使用できます。 ```javascript StatusBar.backgroundColorByHexString("#333"); // => #333333 StatusBar.backgroundColorByHexString("#FAB"); // => #FFAABB ``` StatusBar.overlaysWebView を false にした場合 ( iOS 7 上で iOS 6 のようなステータスバーを使用 )、16 進数の文字列 ( #RRGGBB ) を使用して、ステータスバーの背景色を設定できます。 #### 対象プラットフォーム * iOS * Android 5+ ### StatusBar.hide ステータスバーを非表示にします。 ```javascript StatusBar.hide(); ``` #### 対象プラットフォーム * iOS * Android ### StatusBar.show ステータスバーを表示します。 ```javascript StatusBar.show(); ``` #### 対象プラットフォーム * iOS * Android ## プロパティ ### StatusBar.isVisible ステータスバーの状態 ( 表示または非表示 ) を確認する場合には、このプロパティを使用します。 ```javascript if (StatusBar.isVisible) { // do something } ``` #### 対象プラットフォーム * iOS * Android ## イベント ### statusTap このイベントを監視して、ステータスバーがタップされたかどうかを確認します。 ```javascript window.addEventListener('statusTap', function() { // scroll-up with document.body.scrollTop = 0; or do whatever you want }); ``` #### 対象プラットフォーム * iOS ## パーミッション ### config.xml ```markup ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ja.docs.monaca.io/reference/core-cordova-plugins/cordova-11.0/statusbar-puraguin.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.