経緯
nippは便利なのだが、一度URLを公開した後にスクリプトを修正すると再度URLを公開しないといけないのが面倒なときがある。
そこでgithubに置いたスクリプトを読み込んでnippにロードする仕組みを作った。(ほとんどnipp作者の @nwtgck さんが作ってくれた)
@ongaeshi さんのコードをお借りして、既存のnippで再現してみました! https://t.co/eDwk4L4Ase #nipp
— @nwtgck (@nwtgck) 2019年2月20日
使い方
で、そのロード用のURLを作るためのnippを作った。例によってawesome-nippに置いてあるが、
- Load from GitHubを開く
ongaeshi/mynipp/master/length.rb
などGitHub上のパスを入力- 出力されたURLをブラウザで開けば https://github.com/ongaeshi/mynipp/blob/master/length.rb がnipp上に展開される
- つまりLoad from GitHubで作ったURLを一度ブックマークしてしまえばGitHub上のスクリプトを修正すれば自動で更新される
感想
スクリプトをGitHubから読み込んでnipp上に展開するためにES2017を使っているのだが、
Opal.load('opal'); Opal.load('opal-parser'); (async ()=>{ const gh = location.search.split("?")[1].split("=")[1]; const res = await fetch(`https://raw.githubusercontent.com/${gh}`); const rbScript = await res.text(); const e = document.querySelector("textarea[ng-model='inputText']"); const $scope = angular.element(e).scope(); $scope.script = await rbScript; $scope.transpiler = RubyTranspiler; $scope.enablePromiseWait = false; $scope.enableClickRun = false; $scope.enablePromiseWait = false; $scope.setLocationHash(); $scope.transpile(); })();
こんな短いコードで書けて感動した。async await の便利さがよく分かった。