🤖

Ultralight触ってみた

2020/10/15に公開

はじめに

今回は、Ultralightを触ってみました。
Electronのように、HTMLやJavaScriptを使ってデスクトップアプリを作れるみたいです。ゲームも作れるみたい。
ただ営利目的での使用は有料だとか。

特徴としては、メモリ使用量が少なかったり動作が高速だったりするみたいですが、仕組みの詳細はまだ見れてないです。
今回はとりあえずどんな感じか触ってみた、という内容です。

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

1から構築していくような手順が公式サイトで見つけられなかったので、
とりあえずチュートリアルとしてあったリポジトリをクローン。

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と連携してみます。
クローンしたソースを見る限りだと、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アプリが欲しかったところなので、まずはその辺の簡単なものやってみます。