More than 3 years have passed since last update.

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

Last updated at 2021-12-22Posted at 2021-08-03

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

天気図について気象庁HP

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

構成

TabView > NavigationView > List > Safari

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

webデータの構造体を作成

ContentView.swift

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

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

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の実装

ContentView.swift

TabView(selection: $selection) {
            
                //任意の表示の処理

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

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

タブの画像はSF Symbolsを使用しました。

SF Symbols

NavigationViewとListの実装

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)