FAQ:アイコン/スプラッシュ画面(Cordova 5.x / 2015)
アイコン/スプラッシュ画面を扱うときに遭遇した多くの問題を解決するのに役立つ一般的なFAQとして私の答えを提示します。私のように、ドキュメントが常に明確でなく、最新であるとは限らないことに気付くかもしれません。利用可能な場合、これはおそらくStackOverflowのドキュメントに移動します。
最初に:質問に答える
phonegapを使用してiOSおよびAndroid用のカスタムアプリアイコンを追加するにはどうすればよいですか?
お使いのバージョンのCordovaでは、icon
タグは役に立ちません。Cordova3.0.0でも文書化されていません。最新のものではなく、使用しているCLIに適合するドキュメントバージョンを使用する必要があります。
アイコンタグは、私はドキュメントの異なるバージョンで見ることができる内容に応じて、バージョン3.5.0の前に、すべてのAndroidのために動作しません。3.4.0でも、ファイルを手動でコピーすることをお勧めします
新しいバージョンの場合:config.xml
新しいCordovaバージョンの方が見栄えが良くなります。ただし、知りたいことがまだたくさんあります。ここでアップグレードすることにした場合、変更するのに役立つことがいくつかあります。
gap:
名前空間は必要ありません
- あなた
<preference name="SplashScreen" value="screen" />
はAndroidのために必要です
アイコンやスプラッシュ画面を処理するときに自分自身に尋ねる可能性のある質問の詳細は次のとおりです。
古いバージョンのCordova / Phonegapを使用できますか?
いいえ、アイコン/スプラッシュスクリーン機能は以前のバージョンのCordovaにはなかったため、最新バージョンを使用する必要があります。以前のバージョンでは、Phonegap Buildのみがアイコン/スプラッシュ画面を処理したため、ローカルでのビルドとアイコンの処理はフックを使用した場合にのみ可能でした。この機能を使用するための最小バージョンはわかりませんが、5.1.1では、Cordova / Phonegapcliの両方で正常に機能します。Cordova 3.5では、それは私には機能しませんでした。
編集:Androidの場合、少なくとも3.5.0を使用する必要があります
アイコンに関するビルドプロセスをデバッグするにはどうすればよいですか?
cliはCPコマンドを使用します。無効なアイコンパスを指定すると、cp
エラーが表示されます。
sebastien@sebastien-xps:cordova (dev *+$%)$ cordova run android --device
cp: no such file or directory: /home/sebastien/Desktop/Stample-react/cordova/res/www/stample_splash.png
編集:cordova build <platform> --verbose
アイコンがコピーされる場所を確認するために、cpコマンドの使用状況のログを取得するために使用できます
アイコンは、構成に従ってフォルダーに配置する必要があります。私にとって、それは次の多くのサブフォルダーに入ります:platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png
次に、APKを見つけて、zipアーカイブとして開き、アイコンが存在することを確認します。Android専用のフォルダなres/drawable*
ので、フォルダ内にある必要があります。
プロジェクトのどこにアイコン/スプラッシュ画面を配置する必要がありますか?
多くの例では、アイコン/スプラッシュ画面がres
フォルダー内で宣言されていることがわかります。これres
は出力APKの特別なAndroidフォルダーですがres
、プロジェクトでフォルダーを使用する必要があるという意味ではありません。
アイコンはどこにでも配置できますが、使用するパスはプロジェクトのルートを基準にしている必要があり、www
注意しないでください。これは文書化されていますが、すべての例が使用されてres
おり、このフォルダーがどこにあるかわからないため、明確ではありません:(
つまり、アイコンを配置する場合www/icon.png
はwww
、絶対にパスに含める必要があります。
2016年3月の編集:バージョンをアップグレードした後、アイコンはwww
フォルダーに関連しているように見えますが、ドキュメントは変更されていません(問題)
DOESの<icon src="icon.png"/>
作品?
いいえ、違います!。
Androidでは、以前は(密度属性がまだサポートされていなかったとき)機能していたようですが、現在は機能していません。このコルドバの問題を参照してください
iOSでは、このグローバル宣言を使用すると、より具体的な宣言が上書きされる可能性がある--verbose
ため、すべてが期待どおりに機能するように注意して構築してください。
すべての密度に同じアイコン/スプラッシュ画面ファイルを使用できますか?
はい、できます。アイコンとスプラッシュ画面の両方に同じファイルを使用することもできます(テストのためだけに!)。65kbの「大きな」アイコンファイルを問題なく使用しました。
プラットフォームタグとプラットフォーム属性を使用する場合の違いは何ですか
<icon src="icon.png" platform="android" density="ldpi" />
と同じです
<platform name="android">
<icon src="www/stample_icon.png" density="ldpi" />
</platform>
Phonegapを使用している場合、gap:名前空間を使用する必要がありますか?
私の経験では、PhonegapまたはCordovaの新しいバージョンはどちらも、gap:
xml名前空間を使用せずにアイコン宣言を理解できます。
しかし、私はまだここで有効な答えを待っています:cordova / phonegapプラグインはVSconfig.xmlを追加します
私の知る限り、gap:
名前空間を持ついくつかの機能は、PhonegapBuildで、次にPhonegapで、そしてCordova(?)に移植される前に利用できる可能性があります。
される<preference name="SplashScreen" value="screen" />
必要?
少なくともAndroidの場合はそうです。追加の説明で問題を開きました。
アイコン宣言の順序は重要ですか?
はい、そうです!私のテストによると、Androidには影響がないかもしれませんが、iOSには影響があります。これは予期しない、文書化されていない動作であるため、別の問題を開きました。
必要cordova-plugin-splashscreen
ですか?
はい、これはスプラッシュ画面を機能させたい場合は絶対に必要です。ドキュメントが明確ではなく(問題)、プラグインはスプラッシュ画面のjavascriptAPIを提供するためにのみ必要であると考えてみましょう。
すべての幅/高さ/密度の画像のサイズをすばやく変更するにはどうすればよいですか
それを行うのに役立つツールがあります。私にとって最適なのはhttp://makeappicon.com/ですが、メールアドレスを入力する必要があります。
他の可能な解決策は次のとおりです。
設定例を教えてください。
はい。これが私の本当ですconfig.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="co.x" version="0.2.6" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0">
<name>x</name>
<description>
x
</description>
<author email="info@x.co" href="https://x.co">
x
</author>
<content src="index.html" />
<preference name="permissions" value="none" />
<preference name="webviewbounce" value="false" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#0177C6" />
<preference name="detect-data-types" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="android-minSdkVersion" value="14" />
<preference name="android-targetSdkVersion" value="22" />
<preference name="phonegap-version" value="cli-5.1.1" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="SplashScreen" value="screen" />
<plugin name="cordova-plugin-device" spec="1.0.1" />
<plugin name="cordova-plugin-console" spec="1.0.1" />
<plugin name="cordova-plugin-whitelist" spec="1.1.0" />
<plugin name="cordova-plugin-crosswalk-webview" spec="1.2.0" />
<plugin name="cordova-plugin-statusbar" spec="1.0.1" />
<plugin name="cordova-plugin-screen-orientation" spec="1.3.6" />
<plugin name="cordova-plugin-splashscreen" spec="2.1.0" />
<access origin="http://*" />
<access origin="https://*" />
<access launch-external="yes" origin="tel:*" />
<access launch-external="yes" origin="geo:*" />
<access launch-external="yes" origin="mailto:*" />
<access launch-external="yes" origin="sms:*" />
<access launch-external="yes" origin="market:*" />
<platform name="android">
<icon src="www/stample_icon.png" density="ldpi" />
<icon src="www/stample_icon.png" density="mdpi" />
<icon src="www/stample_icon.png" density="hdpi" />
<icon src="www/stample_icon.png" density="xhdpi" />
<icon src="www/stample_icon.png" density="xxhdpi" />
<icon src="www/stample_icon.png" density="xxxhdpi" />
<splash src="www/stample_splash.png" density="land-hdpi"/>
<splash src="www/stample_splash.png" density="land-ldpi"/>
<splash src="www/stample_splash.png" density="land-mdpi"/>
<splash src="www/stample_splash.png" density="land-xhdpi"/>
<splash src="www/stample_splash.png" density="land-xhdpi"/>
<splash src="www/stample_splash.png" density="land-xhdpi"/>
<splash src="www/stample_splash.png" density="port-hdpi"/>
<splash src="www/stample_splash.png" density="port-ldpi"/>
<splash src="www/stample_splash.png" density="port-mdpi"/>
<splash src="www/stample_splash.png" density="port-xhdpi"/>
<splash src="www/stample_splash.png" density="port-xxhdpi"/>
<splash src="www/stample_splash.png" density="port-xxxhdpi"/>
</platform>
<platform name="ios">
<icon src="www/stample_icon.png" width="180" height="180" />
<icon src="www/stample_icon.png" width="60" height="60" />
<icon src="www/stample_icon.png" width="120" height="120" />
<icon src="www/stample_icon.png" width="76" height="76" />
<icon src="www/stample_icon.png" width="152" height="152" />
<icon src="www/stample_icon.png" width="40" height="40" />
<icon src="www/stample_icon.png" width="80" height="80" />
<icon src="www/stample_icon.png" width="57" height="57" />
<icon src="www/stample_icon.png" width="114" height="114" />
<icon src="www/stample_icon.png" width="72" height="72" />
<icon src="www/stample_icon.png" width="144" height="144" />
<icon src="www/stample_icon.png" width="29" height="29" />
<icon src="www/stample_icon.png" width="58" height="58" />
<icon src="www/stample_icon.png" width="50" height="50" />
<icon src="www/stample_icon.png" width="100" height="100" />
<splash src="www/stample_splash.png" width="320" height="480"/>
<splash src="www/stample_splash.png" width="640" height="960"/>
<splash src="www/stample_splash.png" width="768" height="1024"/>
<splash src="www/stample_splash.png" width="1536" height="2048"/>
<splash src="www/stample_splash.png" width="1024" height="768"/>
<splash src="www/stample_splash.png" width="2048" height="1536"/>
<splash src="www/stample_splash.png" width="640" height="1136"/>
<splash src="www/stample_splash.png" width="750" height="1334"/>
<splash src="www/stample_splash.png" width="1242" height="2208"/>
<splash src="www/stample_splash.png" width="2208" height="1242"/>
</platform>
<allow-intent href="*" />
<engine name="browser" spec="^3.6.0" />
<engine name="android" spec="^4.0.2" />
</widget>
例の良い情報源はスターターキットです。同様PhoneGapの開始またはイオンスターター