Skip to content

Instantly share code, notes, and snippets.

@xl1
Last active October 15, 2019 13:49
Show Gist options
  • Save xl1/ab7e2e2b02e679a397e2eb59cc9ceb17 to your computer and use it in GitHub Desktop.
Save xl1/ab7e2e2b02e679a397e2eb59cc9ceb17 to your computer and use it in GitHub Desktop.
jsdo.it salvage

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment