天気図リンクアプリを作成(SwiftUI)

#
気象庁発表の最新天気図のリンクをまとめたアプリをSwiftUIで作成しました。
iosアプリでは専門天気図が見れるアプリがありませんので、リンクするだけの単純なアプリですが
一部界隈に需要がありそうです。

![E2639146-F6D7-4EDF-83C4-45A1602988F8_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261100/91e35156-e566-f68a-7fc8-f5dac0fa118d.jpeg)

>[天気図について 気象庁HP](https://www.jma.go.jp/jma/kishou/know/kurashi/tenkizu.html)

気象予報士、気象会社、航空機運航者、船舶運航者などが主な天気図の利用層になります。

#構成
TabView > NavigationView > List > Safari

天気図の種類をタブで切り替えして、`NavigationView`内に天気図リンクの入った`List`を並べます。

#webデータの構造体を作成

```swift:ContentView.swift
//webデータの構造体を定義
struct webData: Identifiable{
    var id = UUID()
    var name: String
    var url: String
    var favicon: String
}
```

#webデータをインスタンス化

```swift:ContentView.swift
let webList = [
        webData(name:"ASAS",url:"https://www.data.jma.go.jp/fcd/yoho/data/wxchart/quick/ASAS_COLOR.pdf",favicon:"cat2")

]
```

これでリストの一行が完成です。
その他の実況天気図も `webList` 内に作成します。

同じように高層天気図タブ用のものもインスタンス化しておきます。



#TabViewの実装

```swift:ContentView.swift
TabView(selection: $selection) {
            
                //任意の表示の処理

　　　　　　　　　 .tabItem {
                    Image(systemName: "cloud.sun")　//タブの画像
                    Text("実況")　　　　　　　　　　　　//タブの文字
                }
                .tag(1)　//一つののタブをであることを示す
```

これでタブが一つだけ実装できました。
この「任意の表示の処理」に`NavigationView`と`List`を追加します。

タブの画像はSF Symbolsを使用しました。
>[SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/)

#NavigationViewとListの実装


```swift:ContentView.swift
TabView(selection: $selection) {

            NavigationView{
             List(webList){item in
                //ファビコンを作成
                Image(item.favicon).resizable().frame(width:40,height:40)
                //リンクを作成
                Link(item .name,destination:URL(string: item.url)!)
             }
　　　　　　　　//タイトルの作成と文字設定
             .navigationBarTitle("気象庁　実況天気図")
             .navigationBarTitleDisplayMode(.inline)
            }
            //ipadに適応させる
            .navigationViewStyle(StackNavigationViewStyle())

                .tabItem {
                    Image(systemName: "cloud.sun")
                    Text("実況")
                }
                .tag(1)
```

これで一つのタブが完成です。
高層天気図や天気情報などのタブも作成すると以下のようになります。

![B9D2B040-914A-4EC1-B783-4C85CFA45963_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261100/8f275f67-85a0-1bac-06d8-0704b1d5ea94.jpeg)

実況天気図ASASを選択してみます。
![A20570E3-D023-4F4A-A06E-05142D96F482_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261100/804bcc63-1869-1ee7-5019-f2992f743dec.jpeg)

無事にSafariが開いて天気図のリンクを開いてくれました。
横の方が見やすいかもです。
![C272EC06-E545-44DE-9CE5-A9477502B9F6_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261100/67947a1e-881d-b619-47b8-39e14e52445f.jpeg)

気象情報タブでは降水レーダーなどのリンクを実装しました。
![25ABBF12-60A9-413A-917A-A1809E3CD8D9_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261100/57f6cc4f-4690-707b-e425-16825a52dc28.jpeg)

`雨雲の動き`をタップすると...
![F4A38C53-D9B1-4F33-94DA-24C5DB169B48_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261100/5dc59ed0-9959-9d8f-93c8-1807aa1a9d77.jpeg)




#ipad対応
天気図を確認するかたはipadを利用する人も多いと思います。
ipadでも表示が崩れない様にするために下記の記述をしています。

`.navigationViewStyle(StackNavigationViewStyle())`を記述↓
![2F8E58CA-4FC2-4B71-A306-73094A2AC1AC.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261100/321715dc-2cb0-c8c3-6eea-46019bde0b38.jpeg)

`.navigationViewStyle(StackNavigationViewStyle())`なし↓
![FB194EA8-9A45-454C-9DEE-0227937C7FFD.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261100/8dd1b470-69c6-7907-4a05-393da496377c.jpeg)
Navigationが左によってしまってます。
すぐ右に何か表示させる状態をデフォルトで考えているのでしょう。
ここに天気図を表示させるのもありですが、別途処理が必要になります。



#参考文献
詳細! SwiftUI iPhoneアプリ開発入門ノート[2020] iOS 14+Xcode 12対応

#まとめ
初めてのアプリ作成でした。
気象庁の公式サイトより圧倒的に利用しやすいと思います。
気象庁公式アプリにしてください笑