俺が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に必要なリソースを取得する

File: build.sh ------------------------- echo "hello Atom Shell!" # 自身のパスへ移動する。 cd $(cd $(dirname $0);pwd) #pwd # static/.. cd ../.. # runstant本体のビルド git clone https://github.com/phi-jp/runstant.git cd runstant npm install -g grunt-cli npm install grunt cd .. mkdir static cp -r runstant/release/alpha static # CDNリソースの抽出 ## js関連 mkdir static/cdn cd static/cdn cat ../../runstant/release/alpha/origin.html |perl -nle 'if(/=\"http(|s):\/\/(.*?)\"/){print "http".$1."://".$2}'|sort -u|tee ../../dlList.txt|wget -i - -nc -x ## css関連 pt -e "" ../../runstant/release/alpha/origin.html|perl -nle 'if()/

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

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

Atom Shellで、main.jsとindex.htmlは、IPC通信するのに、スレッドは同じだということを体験 main.js側で同期的にexecを行ってくれるライブラリ入れるも、この動きの為にexecで非同期処理にする羽目に。 http://t.co/76NwKZyJkU
— kjunichi (@kjunichi) 2015, 1月 11

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

画面側(index.html)

File: splash.html -------------------------

main.js側

File: Splash.js ------------------------- var app = require('app'); // Module to control application life. var BrowserWindow = require('browser-window'); // Module to create native browser window. var path = require('path'); var ipc = require('ipc'); var exec = require('child_process').exec var fs = require('fs'); // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the javascript object is GCed. var mainWindow = null; // This method will be called when atom-shell has done everything // initialization and ready for creating browser windows. app.on('ready', function() { function updateRunstant(event) { var prefFolderPath = process.env.HOME + "/.lanstant"; var prefFilePath = prefFolderPath + "/update.log"; var updateInfo; // ~/.lanstant/update.logの確認 try { updateInfo = fs.readFileSync(prefFilePath,{encoding:'utf-8'}); event.sender.send('doneUpdateRunstant', 'ok'); } catch (err) { console.log(err); if(err.code === "ENOENT") { // 初期設定ファイルが存在しない場合、DLする。 // ~/.lanstantディレクトリの作成をする try { fs.mkdirSync(prefFolderPath); } catch(err) { // 既にディレクトリが存在していても無視する。 if(err.code != "EEXIST") { console.log(err); } } // リソースの取得シェルを実行する var buildShellPath = path.resolve(__dirname, '..', '..', 'static','bin', 'build.sh'); exec(buildShellPath,function(err,stdout,stderr){ // ~/.lanstant/update.logを作成する try { fs.writeFileSync(prefFilePath,new Date(),{encoding:'utf-8'}); } catch(err) { console.log(err); } // 更新完了を画面側に通知する。 event.sender.send('doneUpdateRunstant', 'ok'); }); } } } // Create the browser window. mainWindow = new BrowserWindow({width: 800, height: 600}); // and load the index.html of the app. var targetPath = path.resolve(__dirname, '..', '..', 'static', 'index.html'); mainWindow.loadUrl('file://' + targetPath); ipc.on("updateRunstant",function(event,arg){ // htmlが表示されたら通知を受け、リソースの取得を行う。 console.log(arg); updateRunstant(event); }) });

まとめ

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

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

kjunichi/lanstant

non vorrei lavorare

昔はおもにプログラミングやガジェット系、今は？

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

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

CSSも必要だった

Failed to load resource: net::ERR_FILE_NOT_FOUND

解決案

git clone ace編

なるべく自動化したい

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

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

画面側(index.html)

main.js側

まとめ

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

関連記事

11年前の記事

9年前の記事

5年前の記事