FyneでGUIアプリケーションを作成する。#1

初めまして、Sと申します。初投稿です。

当ブログを通じてゆるくアウトプットしていきますので、よろしくお願いします。

GoでGUIアプリケーションを作成する際にFyneは選択肢の1つに上がるかと思います。そのため、今回はこのFyneを使用して簡単なアプリを作成しつつ、気になったFyne関連の情報やサンプルコード的なものをお伝えできればと考えています。

※よく比較されるWailsも後々は記事にする予定です。

Fyneの概要については、おそらく他の方が色々解説されているので、この辺りの説明は割愛して進めていきます！

まずFyneを初めて利用する方は公式ドキュメントでデモアプリケーションが用意されているので、そのデモを触りながらWidgetsやCollectionsの挙動を確かめるのが一番手っ取り学習方法かと思います。 (私もまだまだ学習中です。。。)

デモアプリケーションはソースコードも公開されているので、こちらのサンプルをベースに当記事を#1として色々と変更を加えつつ簡単なGUIアプリケーションを作成します。

github.com

ソースコードを確認するとmain関数の最後辺りにw.SetContent(split)と書かれており、これがデモのように作成されたコンテナーを水平に配置し、それを使用するWindow(fyne.Window)に紐づけている状態ですね。

なので、コンテナーを調整するcontainerパッケージとカスタマイズされたfyne.CanvasObjectを組み合わせることで、用途に合わせた機能をメニューから選択できるようになります。 *1

不要な機能やコンテナーを削ぎ落としてみると↓の画像のようにかなりシンプルになりました。

main関数から一部抜粋しました。 ※モバイルデバイスでの使用予定はないので、CurrentDevice()に関する内容は削除しています。

 content := container.NewStack()

    title := widget.NewLabel("sample")

    setContent := func(m menu.Menu) {
        title.SetText(m.Title)

        content.Objects = []fyne.CanvasObject{m.View(myWindow)}
        content.Refresh()
    }

    tutorial := container.NewBorder(
        container.NewVBox(title, widget.NewSeparator()), nil, nil, nil, content)

    split := container.NewHSplit(navigator(setContent), tutorial)
    split.Offset = 0.1

    myWindow.SetContent(split)
    myWindow.Resize(fyne.NewSize(640, 460))
    myWindow.ShowAndRun()

//menu package

type Menu struct {
    Title string
    View  func(w fyne.Window) fyne.CanvasObject
}

例えば、先ほどの画像にあった"to_Local"メニューだとlocalhost上で動作しているサーバーに対してHTTPリクエストを送る機能を実装しているので、簡単な疎通テストを行えます。 ※出力結果を別ウィンドウで表示させる機能は提供されておりますが、ここはまだ検討中なので一旦テキストスペースに書き込んでいます。

以上、Fyneの簡単な紹介でしたが、ほんの少しでもお役に立てたら嬉しいです。

既に画像でネタバレとなってしまっていますが、次回はこのGUIアプリケーションを使ってAzureの利用料を確認する機能を実装したいと思います。

*1:デモアプリケーションのソースコードだとfunc makeNavでfyne.CanvasObjectを返しています。