Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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使ってやみたいなことが書いてあります。

サンプル

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

https://github.com/yue/yue-sample-apps

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を読んでください。

http://libyue.com/docs/v0.2.0/js/guides/getting_started.html

最小構成

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

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした