はいっ、どうもー!!!Pixelaクソグラフクリエイターですっ!
今日はですねー、Pixelaのデスクトップアプリを作っていこうと思うわけなんですけどもー。
クロスプラットフォームなGUIフレームワークは男のロマンです #知らんけど
ReleasesにWindows / Mac / Linux向けのバイナリがあります。
なお、WindowsとMac用バイナリは動作実績がありますが、Linux向けは検証できていません。
ちなみに、ダウンロードのタイミングでChromeに怒られたり、Windows Defenderに怒られたりします。なのでMac版もセキュリティとプライバシーに怒られたりするんじゃないかと思います。
QtのGolangバインディングです。
普通に動かすだけでも一苦労した上に、クロスコンパイルでさらに苦労したのでやめました。
■ Qt for Python
最後まで迷いましたが、クロスコンパイル(というかバイナリ作成)のお手軽さで Golang に軍配が上がりました。
■ JavaFX
nucularである程度作ったあとに「そういえばJavaFXもあったなぁ」と思いましたが、時すでに🍣。
今となっては、SVGのレンダリング周りの問題を考えるとJavaのほうが良かった気もしています。
■ .Net Core
これも作り出したあとに「そういえば.Net Coreでもできたような気がするなぁ」と思いましたが、時すでに🍣。
2020/03/04追記: 残念ながらミリらしいです。
当初はGoReleaserのGitHub Actionsでビルドとリリースを行っていましたが、GoReleaserで作成したバイナリがMacで動作しないという問題が発生しました。
エラーメッセージとかいろいろと判断する感じでは、CGOが有効になってないとダメなんじゃないかと思ってxgoを利用してビルドするようにしたら、GoReleaserでビルドエラーが発生していたオプションでも普通にビルドできて、動作もするようになったのでxgoでビルドするようにしています。
また、ビルドが独立したことで、リリースには安定のghrを利用しています。
nucularのデフォルトフォントはDroidSansMonoなので、日本語を表示しようとすると文字化けします。そのため、日本語フォントを指定するようにしています。
なお、statikでフォントデータを同梱しようと思っていましたが、statikで生成したソースのサイズがクッソ膨れたのでリリースのタイミングでダウンロードして同梱するようにしています。
今後の修正でリリースのタイミングでフォントをstatikにかけるようにしてもいいかもしれないですね。
■ [苦労] SVGのレンダリング
GolangにはSVGをパースして画像形式に変換するようなライブラリがなさそうです。(知っている人がいれば教えてください)
nucularにWebViewでもあればそれでいいのですが、それもなかったので自前でパースして画像形式に変換しています。(PixelaのSVGをパースするのはpixela2imgに引き続きこれで2度目です)
このあたり、JavaFXでやってればJavaにはSVGを変換するライブラリがあったので楽だったのかなぁという感じですね。
■ [苦労] nucularの情報
nucularのリポジトリにexampleがあるのでそれを見ればだいたいなんとかなりますが、ソレ(とGoDoc)だけが頼りな感じです。
余談ですがGoDocはないよりはあったほうがいいのは言うまでもないのですが、僕のGolang力の低さのせいか、アレだけ見ても使い方がまったくわからないことが多いのでexampleがあるのは非常に助かります。
■ [工夫] 画面のレイアウトについて
詳細画面の内容については、本家のHTML表示や先に公開されていたiOSアプリを参考にして同じようなものを表示するようにしています。
■ [工夫] グラフの表示期間を変更できるようにした
SVGを自前でパースしていることは前述しましたが、それとは別に、グラフの表示期間を自由に変更できるようにしています。↓↓の方に載せてるスクショを見ればわかるかもしれませんが、私の作ってるグラフは期間を固定して表示することで最大限の価値を発揮するようなものが多いので、これは(私にとって)必須と言える機能です。
他にもTabでカーソル移動とか、InputでCtrl-Aで全選択とかそういうところも自前でキーボードのイベントを拾って実装する必要があるらしく、今は動いてないのでそのあたりもやっていきたいところです。
あと、Windows Defenderに怒られたりしないようにするにはアプリに署名とか付ける必要があるんじゃないかと思ってるんですが、どうすればいいのかさっぱり見当もつかない状態で優先度も今のところは低めなので、このあたりに詳しい人が教えてくれると非常に助かります。
今後のpixela-desktopの発展にご期待ください。
というわけで、pixela-desktopを作っている話でした。
今日はですねー、Pixelaのデスクトップアプリを作っていこうと思うわけなんですけどもー。
クロスプラットフォームなGUIフレームワークは男のロマンです #知らんけど
リポジトリ
ここですReleasesにWindows / Mac / Linux向けのバイナリがあります。
なお、WindowsとMac用バイナリは動作実績がありますが、Linux向けは検証できていません。
ちなみに、ダウンロードのタイミングでChromeに怒られたり、Windows Defenderに怒られたりします。なのでMac版もセキュリティとプライバシーに怒られたりするんじゃないかと思います。
使用している技術
クロスプラットフォームのデスクトップアプリといえばElectronに駆逐された感のある今日このごろですが、Webまわりに疎いのでGolangで実装しています。その他検討した技術
■ therecipe/qtQtのGolangバインディングです。
普通に動かすだけでも一苦労した上に、クロスコンパイルでさらに苦労したのでやめました。
■ Qt for Python
最後まで迷いましたが、クロスコンパイル(というかバイナリ作成)のお手軽さで Golang に軍配が上がりました。
■ JavaFX
nucularである程度作ったあとに「そういえばJavaFXもあったなぁ」と思いましたが、時すでに🍣。
今となっては、SVGのレンダリング周りの問題を考えるとJavaのほうが良かった気もしています。
■ .Net Core
これも作り出したあとに「そういえば.Net Coreでもできたような気がするなぁ」と思いましたが、時すでに🍣。
2020/03/04追記: 残念ながらミリらしいです。
どとねっとこあは現状はlinux/mac/winのx-platなネイティブGUIフロントエンドはミリ / pixela-desktopを作ってる話 - sms日記 https://t.co/2cHQIx6NUx
— きよくらならみ (@kiyokura) March 3, 2020
リリースバイナリの作成とGitHub Releasesの生成について
どちらもGitHub Actionsで作成しています。当初はGoReleaserのGitHub Actionsでビルドとリリースを行っていましたが、GoReleaserで作成したバイナリがMacで動作しないという問題が発生しました。
エラーメッセージとかいろいろと判断する感じでは、CGOが有効になってないとダメなんじゃないかと思ってxgoを利用してビルドするようにしたら、GoReleaserでビルドエラーが発生していたオプションでも普通にビルドできて、動作もするようになったのでxgoでビルドするようにしています。
また、ビルドが独立したことで、リリースには安定のghrを利用しています。
GitHub Actionsでtagがpushされたらリリースする、みたいなことやってて、気がついたら一晩でタグが20個ほど増殖してたことならある(release.ymlが固まるまではタグの無駄打ちが避けられない
— (っ’ヮ’c) < ★しっぽ (@ryosms) February 20, 2020
苦労した点とか工夫した点とか
■ [苦労] 日本語フォントnucularのデフォルトフォントはDroidSansMonoなので、日本語を表示しようとすると文字化けします。そのため、日本語フォントを指定するようにしています。
なお、statikでフォントデータを同梱しようと思っていましたが、statikで生成したソースのサイズがクッソ膨れたのでリリースのタイミングでダウンロードして同梱するようにしています。
今後の修正でリリースのタイミングでフォントをstatikにかけるようにしてもいいかもしれないですね。
■ [苦労] SVGのレンダリング
GolangにはSVGをパースして画像形式に変換するようなライブラリがなさそうです。(知っている人がいれば教えてください)
nucularにWebViewでもあればそれでいいのですが、それもなかったので自前でパースして画像形式に変換しています。(PixelaのSVGをパースするのはpixela2imgに引き続きこれで2度目です)
このあたり、JavaFXでやってればJavaにはSVGを変換するライブラリがあったので楽だったのかなぁという感じですね。
■ [苦労] nucularの情報
nucularのリポジトリにexampleがあるのでそれを見ればだいたいなんとかなりますが、ソレ(とGoDoc)だけが頼りな感じです。
余談ですがGoDocはないよりはあったほうがいいのは言うまでもないのですが、僕のGolang力の低さのせいか、アレだけ見ても使い方がまったくわからないことが多いのでexampleがあるのは非常に助かります。
■ [工夫] 画面のレイアウトについて
詳細画面の内容については、本家のHTML表示や先に公開されていたiOSアプリを参考にして同じようなものを表示するようにしています。
■ [工夫] グラフの表示期間を変更できるようにした
SVGを自前でパースしていることは前述しましたが、それとは別に、グラフの表示期間を自由に変更できるようにしています。↓↓の方に載せてるスクショを見ればわかるかもしれませんが、私の作ってるグラフは期間を固定して表示することで最大限の価値を発揮するようなものが多いので、これは(私にとって)必須と言える機能です。
今後の予定
まだようやくv0.1.0ということで、自分のグラフの一覧と各グラフの詳細を表示するだけしかできません。今後はグラフの作成とか、ユーザーの作成とか、ユーザーの認証情報のローカル保存とか色々と機能や使い勝手を充実させていこうと思っています。他にもTabでカーソル移動とか、InputでCtrl-Aで全選択とかそういうところも自前でキーボードのイベントを拾って実装する必要があるらしく、今は動いてないのでそのあたりもやっていきたいところです。
あと、Windows Defenderに怒られたりしないようにするにはアプリに署名とか付ける必要があるんじゃないかと思ってるんですが、どうすればいいのかさっぱり見当もつかない状態で優先度も今のところは低めなので、このあたりに詳しい人が教えてくれると非常に助かります。
今後のpixela-desktopの発展にご期待ください。
スクショ
というわけで、pixela-desktopを作っている話でした。
コメント