non vorrei lavorare

ブログ名の通りです。javascript three.js mruby rust OCaml golang julialang blender

俺がtmlib.jsの公式エディタのrunstantをオフライン対応のデスクトップアプリにするの後編

こんにちは、一家で実家にファミリーコンサートに向けての合宿に来ているkjunichiです。
 

前編を進めてみて分かった事

なかなか、年末年始の行事で時間が出来なかったが、Atom Shellで動かしてみた。 動かすと、いくつか問題が分かった。

CSSも必要だった

linkタグのhref属性で指定されたリソースも必要だった。

Failed to load resource: net::ERR_FILE_NOT_FOUND

エラーの原因は、静的解析で検出できなかったリソースをローカルに取得していなかった為に 起きていた。

静的解析だと限界があり、aceの様にjs内でパスを組み立て、動的に参照するライブラリは こういったエラーが出る。

解決案

  • 自前のプロキシでキャッシュ管理を実装(初回はネットアクセスして、2回目以降はキャッシュを利用)
    • 2013年につくったwebproxyを発展されると出来そうだし、Chromebookで任意のサイトのオフラインアプリ化につながりそうな。。
  • gitで必要なモジュールをcloneして使う
    • 今のところ、ace以外は静的解析で問題なく取得できている。

git clone ace編

aceはGithubリポジトリをクローンすることで対応することにした。

git clone 
git checkout v1.1.5
npm install
node ./Makefile.dryice.js -m -nc

なるべく自動化したい

現状のrunstantをローカルアプリ化するだけではつまらないので、 これまでの手順を自動化した。

runstantに必要なリソースを取得する

Atom Shellベースのアプリで初回起動時にリソースを取得する

これまでの作業で、runstantをローカルで実行するのに必要なリソースの」取得を行うシェルスクリプトが 出来たので、これをAtom Shellベースのアプリの初回起動時に行うようにした。

にあるように、main.jsとindex.htmlが非同期処理ではなかったので、初回起動の判定が真の場合、 execで非同期に前述のシェルスクリプトを実行し、その間、ローディング中の画面を表示することにした。

画面側(index.html)

main.js側

まとめ

こうして、2014年から年をまたいだが、runstantをローカルアプリ化することに成功した。

以下のGithubリポジトリが今回の成果物になる。

作業を通して他にも学べたこと

関連記事