Ultralight触ってみた
はじめに
今回は、Ultralightを触ってみました。
Electronのように、HTMLやJavaScriptを使ってデスクトップアプリを作れるみたいです。ゲームも作れるみたい。
ただ営利目的での使用は有料だとか。
特徴としては、メモリ使用量が少なかったり動作が高速だったりするみたいですが、仕組みの詳細はまだ見れてないです。
今回はとりあえずどんな感じか触ってみた、という内容です。
Prerequisites
今回はMacでやってます。必要なのは以下。私の環境ではすべて既に入っていたので特に作業なし。
- Git
- CMake
- Command Line Tools
Hello World
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との連携
試しに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アプリが欲しかったところなので、まずはその辺の簡単なものやってみます。
Discussion