🤖

Ultralight触ってみた

2020/10/15に公開

 はじめに今回は、Ultralightを触ってみました。

Electronのように、HTMLやJavaScriptを使ってデスクトップアプリを作れるみたいです。ゲームも作れるみたい。

ただ営利目的での使用は有料だとか。
特徴としては、メモリ使用量が少なかったり動作が高速だったりするみたいですが、仕組みの詳細はまだ見れてないです。

今回はとりあえずどんな感じか触ってみた、という内容です。

 Prerequisiteshttps://docs.ultralig.ht/docs/installing-prerequisites

今回はMacでやってます。必要なのは以下。私の環境ではすべて既に入っていたので特に作業なし。
Git
CMake
Command Line Tools

 Hello World1から構築していくような手順が公式サイトで見つけられなかったので、

とりあえずチュートリアルとしてあったリポジトリをクローン。
git clone https://github.com/ultralight-ux/ultralight-quick-start
まずはチュートリアルの手順通りにビルド&実行してみます。

ビルド
cd ultralight-quick-start
mkdir build
cd build
cmake ..
cmake --build . --config Release
ultralight-quick-start/build配下に生成されたMyApp.appをダブルクリックして実行。

こんな感じでHello Worldのウィンドウが表示されました！





 Reactとの連携試しにReactと連携してみます。

クローンしたソースを見る限りだと、src/MyApp.cppの中で以下のようにhtmlファイルを読み込んでるみたいです。
overlay_->view()->LoadURL("file:///app.html");
なのでこのHTMLファイルを上書きすれば良さそうです。app.htmlはassetsフォルダ配下にあったので、ここにReactで作成したファイルを配置してみます。
まずはReactプロジェクトを作成
yarn create react-app ultralight-sample
Reactプロジェクトをビルド

プロジェクトができたら、ビルドしてバンドルされたJSファイルを出力します。
cd ultralight-sample
yarn build
ultralight-sample/build配下にビルドされたファイル群が出力されます。
ビルドされたファイル群をultralight-quick-start/assets配下に移動

まるまるコピーします。

また、元々assets配下にあったapp.htmlは削除します。
MyApp.cppが読み込むHTMLファイルをapp.htmlからindex.htmlに変更

Reactプロジェクトをビルドして出力されたHTMLは、そのままだとindex.htmlになっているのでMyApp.cppで読み込んでいたHTMLもindex.htmlにリネームします。
overlay_->view()->LoadURL("file:///app.html");
↓
overlay_->view()->LoadURL("file:///index.html");
再度ultralightをビルド

ultralight-quick-start/buildに移動して、
cmake ..
cmake --build . --config Release
MyApp.appを実行

ultralight-quick-start/build配下にできたMyApp.appをダブルクリックして実行してみます。
こんな感じでいつものReactくるくるが表示されました！





 まとめ今回はとりあえず触ってみたかっただけなので仕組み全然調べられてないですが、なんとなくElectronと同じことができそうだなってイメージは掴めた気がします。
↑のReact連携手順も適当にやったら偶然動いた、ってだけなので、週末にでもしっかり調べて久しぶりにデスクトップアプリ開発してみようかと思います。

（それも記事にできたらと思いつつ）
ちょうどMacで手軽に使えるローカルで動くTodoアプリが欲しかったところなので、まずはその辺の簡単なものやってみます。

はじめに

Prerequisites

Hello World

Reactとの連携

まとめ

Discussion