jsdo.it salvage

gistfile1.md

jsdo.it salvage

jsdo.it がサービス終了するにあたってコードサルベージするためにやったこと

成果物: Salvaged codes from jsdo.it

もともと危ういコードを書いていたのもあり半分くらいはまともに動いてない

jsdo.it が安定する時期を待つ

「投稿およびすべてのjsdo.itの機能の利用はサービス終了日まで可能です。」と告知されているにもかかわらずサーバが不安定（というより安定して利用できない）なので、アクセスできるようになることを祈る

運よくアクセスできるようになったら以下を行ってコードをサルベージする

コードの取得

wget --recursive --level=1 --no-clobber --no-parent http://jsdo.it/xl1/codes?page=1

これで page=1 から 13 まで読んだ

実際には --reject-regex=codes/.* あたりも付けた気がする

アセットファイルの取得

プログラムから読んでる png, svg, glsl, obj などなどのアセットファイルをダウンロードする必要があった

grep --no-filename --only-matching -E 'http://jsrun\.it/assets/././././\w+\.?\w*' ../html/* | sort -u | xargs wget

この他に数は少ないが以下もある

• http://jsdo-it-static-contents.s3.amazonaws.com/assets/* これはもうリンクが切れているので jsrun.it/assets/* からダウンロードする
• http://jsdo.it/static/assets/*

これらはローカルリソースを読み込むように置換する必要がある（後述）

コード部分の抽出

HTML さえダウンロードできれば、その中に HTML, JS, CSS のコードと説明文など必要なものは埋め込まれている

CoffeeScript など使っていても変換前のコードがとれる

JS のライブラリを読み込んでいると、それは <script> の中身の自動生成と思われるコードから抜き出す必要があるっぽい

import cheerio from 'cheerio';

const $ = cheerio.load(html);
const descriptionBox = $('#boxCodeDescription > .editorBox');
descriptionBox.children().first().remove();
const codeJS = $('#codeJS');
const codeHTML = $('#codeHTML');
const codeCSS = $('#codeCSS');
const libraryLoadingScript = $('#boxEditCSS + script').html() || '';
const libraries = Array.from(
    libraryLoadingScript.matchAll(/initial_tabs\["js"\]\.push\( "(.+?)" \)/g),
    m => m[1]
).reverse();
return {
    name,
    title: $('meta[property="og:title"]').attr('content'),
    description: descriptionBox.html() || '',
    libraries,
    js: {
        language: codeJS.attr('data-lang') || 'js',
        content: codeJS.val()
    },
    html: {
        language: codeHTML.attr('data-lang') || 'html',
        content: codeHTML.val()
    },
    css: {
        language: codeCSS.attr('data-lang') || 'css',
        content: codeCSS.val()
    },
    published: $('time').attr('datetime'),
};

プリプロセッサ

CoffeeScript や Sass/SCSS を使っている場合は JS や CSS に変換する

変換後の JS や CSS は jsrun.it/xl1/{name}/(js|css) からダウンロードできるのでこれでよい説もある

上のリポジトリではその場で変換するのではなく事前変換して HTML + JS + CSS それぞれファイル作っておいた

アセット URL の置換

• http://jsrun.it/assets/*/*/*/*/{filename}
• http://jsdo-it-static-contents.s3.amazonaws.com/assets/*/*/*/*/{filename}
• http://jsdo.it/static/assets/*/*/{filename}

これらをローカルの ./assets/{filename} などに置換する

拡張子がついてないと画像が application/octet-stream で帰ってきて表示できない場合がある

ライブラリ URL の置換

• /lib/{libname} で jQuery や jQyery UI を読んでいる部分があり、これは多くないのでハードコードで CDN 経由に切り替えて <script src> で読み込むようにする
• /xl1/{name} で自分のコードをライブラリとして読んでいる部分があり、これは事前変換した JS ファイルを参照するよう置換

その他

• <iframe src="http://jsrun.it/xl1/j3Od"> → src="j3Od.html"
• Sass のバージョンで結果が異なる

  $parallax-field-height: 100%;
  @mixin use-parallax($height) {
      $parallax-field-height: $height;
      body {
      height: $height;
      margin: 0;
      overflow-x: hidden;
      }
  }

  use-parallax(100px) などとしたときに もともと $parallax-field-height が 100px になることを想定して書いていたが、node-sass では 100% のままだった（dart sass でも同様）
• description 内では ../assets じゃなくて ./assets にしないといけない
• mikuModel = 'http://jsrun.it/xl1/jlbs/js' → jlbs.js