Konyでスプラッシュ画面を設定する方法


### 目次:
1. はじめに<br>
2. 実装方法<br>
3. まとめ <br>

###はじめに :
スプラッシュ画面とは、アプリケーションを起動したときに表示される初期画面のことです。
![splash.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7cf0a70c-778d-dea4-4c8b-baa0ddb41e3b.gif)

![image002.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/11122c5f-9fb9-7da4-9052-a6f915aeb56e.gif)


























本記事では以下の手順について説明していきます:
・モバイルアプリのスプラッシュ画面を設定する方法 
・タブレットアプリのスプラッシュ画面を設定する方法
・デスクトップアプリのスプラッシュ画面を設定する方法

※iOSの場合は[こちらの記事](https://qiita.com/Kony_Team/items/daf7b09efa055b6333f6)を参照してください。

### 実装方法 :
#### スプラッシュ画面を設定する方法
スプラッシュ画面設定は以下です。

* モバイルの場合
**Project** > **Mobile** > **Splash Screen**をクリックします。 

* タブレットの場合
**Project** > **Tablet** > **Splash Screen**をクリックします。 

* Webの場合
**Project** > **Desktop** > **Splash Screen**をクリックします。

![スクリーンショット 2021-02-04 19.34.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0fe19251-5b04-c9b0-9427-3dc7eabf9d24.png)







**General** > **Splash Image** の **Edit**を選択すると、スプラッシュイメージのダイアログが表示されます。

* **モバイルの場合**  
全てのプラットフォームでデフォルトのスプラッシュイメージを使用したい場合は、**Platform**の下のデフォルトオプションを選択し、**value**欄をクリックして必要なイメージを割り当てます。
各プラットフォームに画像を設定したい場合は、必要なプラットフォームそれぞれに画像を指定する必要があります。

|||
|:-:|:-:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/aa21bf21-3f2c-126d-c422-231542d5fb1f.png" width="600px">|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d4c1b0d8-6f07-2ade-f1fa-61d41bc7eb31.png)|

設定すると以下のように、設定したファイル名が表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4a7aff2f-073d-1fae-6698-b522380b2a54.png" width="600px">

* **Webの場合**

Webの場合も同様に設定したい画像を選択します。
![image036.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5dacdf1e-4f69-7c59-6520-bd1819cd2fda.png)


※メモ: 
スプラッシュ画面の画像名には、スペース、大文字、特殊文字は使用しないでください。また、画像のフォーマットはPNG、JPEG、GIFです。



**スプラッシュ画像を設定してビルドした結果は以下のようになります。**

* Android
![splash.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7cf0a70c-778d-dea4-4c8b-baa0ddb41e3b.gif)


* Web  
![image002.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ffeb2b6b-73ab-c3fa-203d-10678b413c90.gif)


その他にも、スプラッシュ画像のオプションを設定することができます。

**Background Colorの選択**  

* モバイル・タブレットの場合 
AndroidおよびWindowsでは、カラーピッカーダイアログが表示され、任意のBackground Colorを選択する必要があります
SPAでは、Background Colorを選択するためのカラーピッカーダイアログが表示されます
![image019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/14750a12-bb1f-4158-2d55-a3bcbbe2ecb2.png)

* Webの場合 
**Web section**> **Background Color**から、背景色を選択します
 ![image038.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c8e97d7e-3c62-efc1-8f55-c13a6693bc47.gif)

**Loading Indicatorの設定**

**General** > **Show Loading Indicator** の**Edit** から、読み込みのインジケータを設定します。このプロパティは、iPhone、Android、Windowsプラットフォームにのみ適用されます。


Show Loading Indicator ダイアログが表示されますので、必要なプラットフォームを選択して値をtrueに設定してください。
すべてのプラットフォームで同じ値を設定したい場合は、_Platform_ の下のデフォルトオプションを選択し、その値をtrueまたはfalseに設定します。
![スクリーンショット 2021-02-04 19.36.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/66d810a9-5140-8e10-f7b7-cee7ef51d191.png)

























#### スプラッシュ動画を設定する方法
スプラッシュ動画は、iOSまたはAndroidのモバイル・タブレットに設定することができます。

-  **iPhone** または**Android** > Splash Video の**Edit** を選択します。
スプラッシュ動画の選択ダイアログが表示されますので、動画を選択してください（動画が**resources > common >** にあることを確認してください）


※メモ:
 - スプラッシュ動画は、アプリケーションが起動してからアプリケーションが初期化されるまでの時間に再生されます。アプリケーションが初期化されると、動画は終了し、アプリケーションが起動します。また、動画形式は MP4 と M4Vが適しています。


iOSアプリの場合、スプラッシュ動画の音声をバックグラウンドで動作している他の音楽アプリと混在させるには、アプリプロジェクトのリソースファイル内にある**infoplist_configuration.json**ファイルに新しく**mix audio**を追加する必要があります。

```json:infoplist_configuration.json
...
...
"mixAudio":true 
```










Splash Video を選択するまでの手順です。 :
![image013.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5f559bb8-e711-421b-73d3-48191c01195e.gif)

今回は、ストップウォッチの録画をスプラッシュ動画にセットしています。ビルド結果は以下です(Android): 
![splash.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/282c4e4f-e13f-cf1f-ee3e-f5eb60a42d10.gif)


その他にも、スプラッシュビデオのオプションを設定することができます。


**Animation Duration**では、アニメーションの持続時間を秒単位で指定できます。
画像は、指定した秒数だけ画面に表示されます。
![image015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0adfc6bc-9567-7ba1-5f7f-99a4073ba072.png)

**Progress Bar Animation Images**では、プログレスバーのアニメーション画像を指定することができます。（Androidのみ）
**Edit**ボタンをクリックして、プログレスバーのアニメーション画像を指定します。
各プログレスバーのアニメーション画像を参照・選択して追加します。
![image017.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/730327f6-99d6-3cc0-07d3-7aec4d41e232.png)




 
### まとめ 
今回はスプラッシュ画面の設定について説明いたしました。
この記事があなたの助けになることを願っています！:sunny:


 
参考 : https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/Splash_Screen_Properties.htm