🤖

Ultralight触ってみた

2020/10/15に公開約2,300字

はじめに

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

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

Prerequisites

https://docs.ultralig.ht/docs/installing-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.htmlassetsフォルダ配下にあったので、ここにReactで作成したファイルを配置してみます。

  1. まずはReactプロジェクトを作成

    yarn create react-app ultralight-sample
    
  2. Reactプロジェクトをビルド
    プロジェクトができたら、ビルドしてバンドルされたJSファイルを出力します。

    cd ultralight-sample
    yarn build
    

    ultralight-sample/build配下にビルドされたファイル群が出力されます。

  3. ビルドされたファイル群をultralight-quick-start/assets配下に移動
    まるまるコピーします。
    また、元々assets配下にあったapp.htmlは削除します。

  4. 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");
    
  5. 再度ultralightをビルド
    ultralight-quick-start/buildに移動して、

    cmake ..
    cmake --build . --config Release
    
  6. MyApp.appを実行
    ultralight-quick-start/build配下にできたMyApp.appをダブルクリックして実行してみます。

    こんな感じでいつものReactくるくるが表示されました!

まとめ

今回はとりあえず触ってみたかっただけなので仕組み全然調べられてないですが、なんとなくElectronと同じことができそうだなってイメージは掴めた気がします。

↑のReact連携手順も適当にやったら偶然動いた、ってだけなので、週末にでもしっかり調べて久しぶりにデスクトップアプリ開発してみようかと思います。
(それも記事にできたらと思いつつ)

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

Discussion

ログインするとコメントできます