Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
86
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@akameco

新しいクラスプラットフォームデスクトップアプリケーションライブラリ yue

NW.jsやElectronの作者である、zcbenz氏が新しいクロスプラットフォームライブラリyueをつくりはじめました。
え、Electronを使ってるんだけどと思った人は落ち着いて大丈夫、フルタイムでElectronの開発を続けているとのこと。

では、今度のyueは何を目指しているのか。

Uses native widgets;
Works on all major desktop platforms;
Has a modern and clean C++ interface;
Has good support for High DPI;
Uses windowless controls on Windows;
Generates small executable size;
Friendly license for closed source apps.

ネイティブウィジェットを扱えてアプリケーションのサイズがコンパクトになるですか、よさそうですね。

使用できる言語は、C++,Lua,JavaScript。

ドキュメント

C++
http://libyue.com/docs/v0.2.0/cpp/

Lua
http://libyue.com/docs/v0.2.0/lua/

JavaScript
http://libyue.com/docs/v0.2.0/js/

JS版インストール

yueではなく、guiというパッケージ名でインストール。
よくこんなnpmパッケージが空いてたなという気持ちですね。
調べてないけど、譲ってもらったかもしれないです。

$ npm install --save gui

Getting start

ある程度書いてから気づきました。
この記事を読むより、以下を読んだ方がよさそうです。

Getting started - Yue

GUIのイベントループ問題のためにNodeをフォークしたYode使ってやみたいなことが書いてあります。

サンプル

以下にサンプルアプリがいくつかまとまってます。

editor

macOS Linux Windows

electron_webcontents

https://github.com/yue/yue-sample-apps/tree/master/electron_webcontents

Electronとの違い

electronは実質クロームなので、BrowserWindowのインスタンスにloadURLを呼び出してローカルもしくは外部のwebページを表示しますが、yueは一つのWindowに対して、一つのcontent viewを持ちます。
このcontentViewに対してaddChildViewを使いネイティブのウィジェットを追加していきます。

const win = gui.Window.create({})
win.setContentSize({width: 400, height: 400})
win.onClose = () => gui.lifetime.quit()

const contentView = gui.Container.create()
contentView.setStyle({flexDirection: 'row'})
win.setContentView(contentView)

レイアウトに関しては、Container viewを使うことで複数のviewを持つことができ、この子要素はflexbox styleで自動的にレイアウトされるようです。

その他、macOS向けの半透明設定やHiDPI image、ダイアログ、フレームレスウィンドウ、ペインタークラスなどの説明があるので詳しくはgetting_startedを読んでください。

最小構成

エディタ画面だけの本当に小さいサンプルを書くとするれば以下のようになるでしょう。

main.js
const gui = require('gui')

const win = gui.Window.create({})
win.setContentSize({ width: 400, height: 400 })
win.onClose = () => gui.lifetime.quit()

const edit = gui.TextEdit.create()
win.setContentView(edit)

win.center()
win.activate()

if (!process.versions.yode) {
  gui.lifetime.run()
  process.exit(0)
}
$ node main.js

https://gyazo.com/5bb4307c8960610f534a31b3f2113d0e

もし、webviewがほしい場合は、yueにはないので、electronと組み合わせます。
そのサンプルは、https://github.com/yue/yue-sample-apps/tree/master/electron_webcontents を見るといいでしょう。

気持ち

これ、あれかな。
yue単体じゃなくて、electronと組み合わせることでelectronアプリにネイティブのUIを付加する使われ方をするんじゃ...

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
86
Help us understand the problem. What are the problem?