Category Archives: 未分類

2020-05-25 ,

org-modeのインライン画像をリアルタイムで更新する

(追記: https://github.com/misohena/org-inline-image-fix/blob/master/org-flyimage.el にソースコードを上げました。org-flyimage-modeというマイナーモードにしてあります)

org-modeには画像へのリンクをインライン表示する機能(org-toggle-inline-images (C-c C-x C-v))がありますが、私はたまにしか使っていませんでした。

理由は色々あるのですが、その一つが画像を瞬時に更新してくれないこと。画像のへのリンクを修正したり追加したりしても自動的に画像を更新してくれません。コメントアウトしても表示されたまま。org-redisplay-inline-images (C-c C-x C-M-v)で更新できるのですが、これはいったん全ての画像を消してから再表示するため画像が多いととても時間がかかります。それだといっそのこと画像なんて表示せずに編集して、まとまったところでhtmlにでもエクスポートして確認すれば済んでしまいます。

というわけで編集するそばから自動的に画像を更新させるのが次のコードです。

(defvar org-flyimage-in-activate-links nil)

(defun org-flyimage-activate-links (old-func limit)
  (let ((org-flyimage-in-activate-links t))
    (funcall old-func limit)))

(defun org-flyimage-remove-inline-images-in (beg end)
  ;; is faster to use (overlays-in beg end) ?
  (loop for ov in org-inline-image-overlays
        if (let ((ovbeg (overlay-start ov))
                 (ovend (overlay-end ov)))
             (and (numberp ovbeg) (numberp ovend)
                  (< ovbeg end) (> ovend beg)))
        do (org-display-inline-remove-overlay ov t nil nil)))

(defun org-flyimage-remove-flyspell-overlays-in (old-func beg end)
  (funcall old-func beg end)

  (if t ;;(not org-flyimage-in-activate-links) ;;in t, reflect #+attr_html: :width immediately. but slow
      (org-flyimage-remove-inline-images-in beg end))

  (if org-flyimage-in-activate-links
      (org-display-inline-images nil t beg end)))

(defun org-flyimage-activate ()
  (interactive)
  (advice-add #'org-activate-links :around #'org-flyimage-activate-links)
  (advice-add #'org-remove-flyspell-overlays-in :around #'org-flyimage-remove-flyspell-overlays-in))

(defun org-flyimage-deactivate ()
  (interactive)
  (advice-remove #'org-activate-links #'org-flyimage-activate-links)
  (advice-remove #'org-remove-flyspell-overlays-in #'org-flyimage-remove-flyspell-overlays-in))

org-flyimage-activate で有効化、 org-flyimage-deactivate で無効化します。adviceを使って既存の関数をフックしているのでorgのバージョンが上がると動かなくなるかもしれません(9.3.6で確認)。

仕組みとしてはfont-lockのタイミングでインライン画像用のオーバーレイを作成・削除しています。

org-modeでは、リンクのハイライトは org-activate-links で行われています。この関数の中ではリンクの種別が判定されてリンク文字列の範囲に様々なテキストプロパティが設定されます。

;; org.elより
(defun org-activate-links (limit)
  "Add link properties to links.
This includes angle, plain, and bracket links."
  (catch :exit
    (while (re-search-forward org-link-any-re limit t)
      (let* ((start (match-beginning 0))
             (end (match-end 0))
             (visible-start (or (match-beginning 3) (match-beginning 2)))
             (visible-end (or (match-end 3) (match-end 2)))
             (style (cond ((eq ?< (char-after start)) 'angle)
                          ((eq ?\[ (char-after (1+ start))) 'bracket)
                          (t 'plain))))
        (when (and (memq style org-highlight-links)
                   ;; Do not span over paragraph boundaries.
                   (not (string-match-p org-element-paragraph-separate
                                        (match-string 0)))
                   ;; Do not confuse plain links with tags.
                   (not (and (eq style 'plain)
                             (let ((face (get-text-property
                                          (max (1- start) (point-min)) 'face)))
                               (if (consp face) (memq 'org-tag face)
                                 (eq 'org-tag face))))))
          (let* ((link-object (save-excursion
                                (goto-char start)
                                (save-match-data (org-element-link-parser))))
                 (link (org-element-property :raw-link link-object))
                 (type (org-element-property :type link-object))
                 (path (org-element-property :path link-object))
                 (properties            ;for link's visible part
                  (list
                   'face (pcase (org-link-get-parameter type :face)
                           ((and (pred functionp) face) (funcall face path))
                           ((and (pred facep) face) face)
                           ((and (pred consp) face) face) ;anonymous
                           (_ 'org-link))
                   'mouse-face (or (org-link-get-parameter type :mouse-face)
                                   'highlight)
                   'keymap (or (org-link-get-parameter type :keymap)
                               org-mouse-map)
                   'help-echo (pcase (org-link-get-parameter type :help-echo)
                                ((and (pred stringp) echo) echo)
                                ((and (pred functionp) echo) echo)
                                (_ (concat "LINK: " link)))
                   'htmlize-link (pcase (org-link-get-parameter type
                                                                :htmlize-link)
                                   ((and (pred functionp) f) (funcall f))
                                   (_ `(:uri ,link)))
                   'font-lock-multiline t)))
            (org-remove-flyspell-overlays-in start end)
            (org-rear-nonsticky-at end)
            (if (not (eq 'bracket style))
                (add-text-properties start end properties)
              ;; Handle invisible parts in bracket links.
              (remove-text-properties start end '(invisible nil))
              (let ((hidden
                     (append `(invisible
                               ,(or (org-link-get-parameter type :display)
                                    'org-link))
                             properties)))
                (add-text-properties start visible-start hidden)
                (add-text-properties visible-start visible-end properties)
                (add-text-properties visible-end end hidden)
                (org-rear-nonsticky-at visible-start)
                (org-rear-nonsticky-at visible-end)))
            (let ((f (org-link-get-parameter type :activate-func)))
              (when (functionp f)
                (funcall f start end path (eq style 'bracket))))
            (throw :exit t)))))         ;signal success
    nil))

この org-activate-links を修正してテキストプロパティを設定するのと同時に画像のオーバーレイも生成しよう、と最初は思ったのですが、それだと消す方はどうするのだろうと疑問が浮かびました。現状でもリンク自体を修正すると画像は消えるようにできています。オーバーレイにmodification-hooksが設定されているので。でもリンク自体を修正せずにリンクでは無くなる場合、例えば画像へのリンクの前に# を入れてコメントアウトするとfaceはリンクの色からコメントの色に変わります。それと一緒に画像も消えて欲しいわけです。テキストプロパティは変わるわけですから、どこかでその処理があるはずです。ここで設定したテキストプロパティを消しているのはどこなんだろう……。

詳しく追うのは大変そうだな……と思ったときにふと目に入ったのが (org-remove-flyspell-overlays-in start end) の部分。これはおそらくflyspellのオーバーレイを削除するためのものでしょう。org.el内を検索するとあちこちで org-remove-flyspell-overlays-in が呼ばれていました。コメントの色づけをすると思わしき場所でも。おそらく範囲(start end)の分類が変わるときにはこの関数を呼び出して表示をリセットするのではないでしょうか。

そこで (org-remove-flyspell-overlays-in start end) をフックしてstartからendの間にあるオーバーレイを削除してみると、無事コメントアウトで画像が削除されました(笑)。

org-activate-links も内部で org-remove-flyspell-overlays-in を呼び出しますから、 org-activate-links ではなく org-remove-flyspell-overlays-in の方で指定された範囲の画像を更新してしまえば良いでしょう。 org-activate-links 経由かどうか判定できるようにして、そのときだけ処理を変えるようにしました。

org-flyimage-remove-flyspell-overlays-in 内のコメントがある部分ですが、tだとリンク更新時に必ずオーバーレイを作り直すので少しだけ遅くなります。ただ、 #+ATTR_HTML: :width で画像サイズを調整するときにリアルタイムで反映される(注意:org-image-actual-widthとimagemagickサポートによる)のでとりあえずこうしてあります。本来は org-display-inline-images の側でサイズの変更を検出して作り直すかどうか判断して欲しいところです。

今回の件とは直接関係ないですが、 org-display-inline-imagesorg-image-actual-width には画像の最大サイズを指定する機能が欲しいです。先に画像サイズを読み込んで計算してから再度画像を読み込まなければならないと思うので速度低下が心配ですが。

font-lock時に画像を読み込むのは速度低下の心配がありますが、極端に大きな画像で無ければ私の所では今のところ問題ないようです。気になるようなら遅延読み込みをした方が良いかもしれません。

大量の画像を整理して不要なものをコメントアウトしたりサイズを調整したりする作業
図1: 大量の画像を整理して不要なものをコメントアウトしたりサイズを調整したりする作業
2020-05-23

NTEmacsのWanderlustでメール送信時に時々SMTP errorが出る問題が解消?

Windows上のEmacsで Wanderlust を使っていて長年悩まされていたのがSMTP error。送信時に SMTP error と出て送信が中断してしまいます。何度か繰り返すと成功するのですが、たまに失敗時にも送れてしまうことがあるらしく何通も相手に送ってしまっている場合があります。

長年の経験で原因はどうも SSL/TLS まわりにあるらしいことが分かっています。SSL/TLSを使わないと発生しないので。Emacs組み込みのgnutlsを使うか外部のコマンドを使うかでも挙動が変わってきます。SSL/TLSを使うと受信時にも時々エラーが発生して何度か繰り返すとうまく行くことがあります。

この問題が解決するならばとGnusへの移行を試してみたこともあるのですが同じ問題が発生したので無意味でした。

今日少しこの問題を調査してみたのですが、結論から言うと

(setq gnutls-log-level 5)

を設定したらSMTP errorが出なくなりました。

な、なんだってー!

このコードはgnutlsのログレベルを上げて沢山のログを出すようにしただけです。

gnutls-log-levelを2にして出たログが次です。

Sending...
gnutls.c: [1] (Emacs) connecting to host: ****.****.ne.jp
gnutls.c: [1] (Emacs) allocating credentials
gnutls.c: [2] (Emacs) allocating x509 credentials
gnutls.c: [2] (Emacs) using default verification flags
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=CORP\\srv-build-cd.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=****.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=****.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=CORP\\srv-build-cd.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: OU=Copyright (c) 1997 Microsoft Corp.,OU=Microsoft Corporation,CN=Microsoft Root Authority.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=****.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: C=US,ST=California,L=Newark,O=Logitech Inc,CN=Logitech Inc.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: C=US,O=MSFT,CN=Microsoft Authenticode(tm) Root Authority.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=CORP\\srv-build-cd.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=CORP\\srv-build-cd.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=****.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=Root Agency.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=dsalocal.intel.com.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=dsalocal.intel.com.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=dsalocal.intel.com.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=dsalocal.intel.com.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=dsalocal.intel.com.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=dsalocal.intel.com.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=dsalocal.intel.com.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=dsalocal.intel.com.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=dsalocal.intel.com.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=dsalocal.intel.com.
gnutls.c: [audit] There was a non-CA certificate in the trusted list: CN=dsalocal.intel.com.
gnutls.c: [1] (Emacs) setting the trustfile:  c:/****/certs/ca-bundle.crt
gnutls.c: [1] (Emacs) gnutls callbacks
gnutls.c: [1] (Emacs) gnutls_init
gnutls.c: [1] (Emacs) got non-default priority string: NORMAL:%DUMBFW
gnutls.c: [1] (Emacs) setting the priority string
gnutls.c: [2] added 6 protocols, 29 ciphersuites, 18 sig algos and 9 groups into priority list
gnutls.c: [2] Keeping ciphersuite 13.02 (GNUTLS_AES_256_GCM_SHA384)
gnutls.c: [2] Keeping ciphersuite 13.03 (GNUTLS_CHACHA20_POLY1305_SHA256)
gnutls.c: [2] Keeping ciphersuite 13.01 (GNUTLS_AES_128_GCM_SHA256)
gnutls.c: [2] Keeping ciphersuite 13.04 (GNUTLS_AES_128_CCM_SHA256)
gnutls.c: [2] Keeping ciphersuite c0.2c (GNUTLS_ECDHE_ECDSA_AES_256_GCM_SHA384)
gnutls.c: [2] Keeping ciphersuite cc.a9 (GNUTLS_ECDHE_ECDSA_CHACHA20_POLY1305)
gnutls.c: [2] Keeping ciphersuite c0.ad (GNUTLS_ECDHE_ECDSA_AES_256_CCM)
gnutls.c: [2] Keeping ciphersuite c0.0a (GNUTLS_ECDHE_ECDSA_AES_256_CBC_SHA1)
gnutls.c: [2] Keeping ciphersuite c0.2b (GNUTLS_ECDHE_ECDSA_AES_128_GCM_SHA256)
gnutls.c: [2] Keeping ciphersuite c0.ac (GNUTLS_ECDHE_ECDSA_AES_128_CCM)
gnutls.c: [2] Keeping ciphersuite c0.09 (GNUTLS_ECDHE_ECDSA_AES_128_CBC_SHA1)
gnutls.c: [2] Keeping ciphersuite c0.30 (GNUTLS_ECDHE_RSA_AES_256_GCM_SHA384)
gnutls.c: [2] Keeping ciphersuite cc.a8 (GNUTLS_ECDHE_RSA_CHACHA20_POLY1305)
gnutls.c: [2] Keeping ciphersuite c0.14 (GNUTLS_ECDHE_RSA_AES_256_CBC_SHA1)
gnutls.c: [2] Keeping ciphersuite c0.2f (GNUTLS_ECDHE_RSA_AES_128_GCM_SHA256)
gnutls.c: [2] Keeping ciphersuite c0.13 (GNUTLS_ECDHE_RSA_AES_128_CBC_SHA1)
gnutls.c: [2] Keeping ciphersuite 00.9d (GNUTLS_RSA_AES_256_GCM_SHA384)
gnutls.c: [2] Keeping ciphersuite c0.9d (GNUTLS_RSA_AES_256_CCM)
gnutls.c: [2] Keeping ciphersuite 00.35 (GNUTLS_RSA_AES_256_CBC_SHA1)
gnutls.c: [2] Keeping ciphersuite 00.9c (GNUTLS_RSA_AES_128_GCM_SHA256)
gnutls.c: [2] Keeping ciphersuite c0.9c (GNUTLS_RSA_AES_128_CCM)
gnutls.c: [2] Keeping ciphersuite 00.2f (GNUTLS_RSA_AES_128_CBC_SHA1)
gnutls.c: [2] Keeping ciphersuite 00.9f (GNUTLS_DHE_RSA_AES_256_GCM_SHA384)
gnutls.c: [2] Keeping ciphersuite cc.aa (GNUTLS_DHE_RSA_CHACHA20_POLY1305)
gnutls.c: [2] Keeping ciphersuite c0.9f (GNUTLS_DHE_RSA_AES_256_CCM)
gnutls.c: [2] Keeping ciphersuite 00.39 (GNUTLS_DHE_RSA_AES_256_CBC_SHA1)
gnutls.c: [2] Keeping ciphersuite 00.9e (GNUTLS_DHE_RSA_AES_128_GCM_SHA256)
gnutls.c: [2] Keeping ciphersuite c0.9e (GNUTLS_DHE_RSA_AES_128_CCM)
gnutls.c: [2] Keeping ciphersuite 00.33 (GNUTLS_DHE_RSA_AES_128_CBC_SHA1)
gnutls.c: [2] Advertizing version 3.4
gnutls.c: [2] Advertizing version 3.3
gnutls.c: [2] Advertizing version 3.2
gnutls.c: [2] Advertizing version 3.1
gnutls.c: [2] HSK[0000000005c5d140]: sent server name: '****.****.ne.jp'
gnutls.c: [1] (Emacs) non-fatal error: Resource temporarily unavailable, try again. [73 times]
gnutls.c: [audit] FFDHE groups advertised, but server didn't support it; falling back to server's choice
gnutls.c: [1] (Emacs) non-fatal error: Resource temporarily unavailable, try again. [295 times]
gnutls.c: [2] (Emacs) Deallocating x509 credentials
Invalid response: ... Recipient ok
Invalid response: RCPT TO:<****@****.jp>
wl-draft-send-mail-with-smtp: SMTP error
SMTP error

「non-fatal error: Resource temporarily unavailable, try again.」というのが73回+295回も繰り返されているのが気になります。

このエラーメッセージはgnutlsのGNUTLS_E_AGAINに対応するもののようです。

GNUTLS_E_AGAINはあちこちで発生するようです。

もう少し詳細なログが出ないかgnutls-log-levelを5にして再度試してみたところ、何回繰り返してもエラーが発生しません。

ログを見ると次のように大量のretryメッセージが出ていました。

gnutls.c: [3] ASSERT: ../../../gnutls-3.6.10/lib/nettle/mpi.c[wrap_nettle_mpi_print]:60
gnutls.c: [4] HSK[00000000021cc030]: CLIENT KEY EXCHANGE was queued [262 bytes]
gnutls.c: [4] REC[00000000021cc030]: Sent ChangeCipherSpec
gnutls.c: [5] REC[00000000021cc030]: Initializing epoch #1
gnutls.c: [5] REC[00000000021cc030]: Epoch #1 ready
gnutls.c: [4] HSK[00000000021cc030]: Cipher Suite: GNUTLS_DHE_RSA_AES_256_GCM_SHA384
gnutls.c: [4] HSK[00000000021cc030]: Initializing internal [write] cipher sessions
gnutls.c: [4] HSK[00000000021cc030]: recording tls-unique CB (send)
gnutls.c: [4] HSK[00000000021cc030]: FINISHED was queued [16 bytes]
gnutls.c: [5] REC[00000000021cc030]: Preparing Packet Handshake(22) with length: 7 and min pad: 0
gnutls.c: [5] REC[00000000021cc030]: Sent Packet[2] Handshake(22) in epoch 0 and length: 12
gnutls.c: [5] REC[00000000021cc030]: Preparing Packet Handshake(22) with length: 262 and min pad: 0
gnutls.c: [5] REC[00000000021cc030]: Sent Packet[3] Handshake(22) in epoch 0 and length: 267
gnutls.c: [5] REC[00000000021cc030]: Preparing Packet ChangeCipherSpec(20) with length: 1 and min pad: 0
gnutls.c: [5] REC[00000000021cc030]: Sent Packet[4] ChangeCipherSpec(20) in epoch 0 and length: 6
gnutls.c: [5] REC[00000000021cc030]: Preparing Packet Handshake(22) with length: 16 and min pad: 0
gnutls.c: [5] REC[00000000021cc030]: Sent Packet[1] Handshake(22) in epoch 1 and length: 45
gnutls.c: [3] ASSERT: ../../gnutls-3.6.10/lib/buffers.c[get_last_packet]:1168
gnutls.c: [3] ASSERT: ../../gnutls-3.6.10/lib/buffers.c[_gnutls_io_read_buffered]:589
gnutls.c: [3] (Emacs) retry: Resource temporarily unavailable, try again.
gnutls.c: [1] (Emacs) non-fatal error: Resource temporarily unavailable, try again.
gnutls.c: [3] ASSERT: ../../gnutls-3.6.10/lib/buffers.c[get_last_packet]:1168
gnutls.c: [3] ASSERT: ../../gnutls-3.6.10/lib/buffers.c[_gnutls_io_read_buffered]:589
gnutls.c: [3] (Emacs) retry: Resource temporarily unavailable, try again.
gnutls.c: [1] (Emacs) non-fatal error: Resource temporarily unavailable, try again.
gnutls.c: [3] ASSERT: ../../gnutls-3.6.10/lib/buffers.c[get_last_packet]:1168
gnutls.c: [3] ASSERT: ../../gnutls-3.6.10/lib/buffers.c[_gnutls_io_read_buffered]:589
gnutls.c: [3] (Emacs) retry: Resource temporarily unavailable, try again.
gnutls.c: [1] (Emacs) non-fatal error: Resource temporarily unavailable, try again.
gnutls.c: [3] ASSERT: ../../gnutls-3.6.10/lib/buffers.c[get_last_packet]:1168
gnutls.c: [3] ASSERT: ../../gnutls-3.6.10/lib/buffers.c[_gnutls_io_read_buffered]:589
gnutls.c: [3] (Emacs) retry: Resource temporarily unavailable, try again.
gnutls.c: [1] (Emacs) non-fatal error: Resource temporarily unavailable, try again.
gnutls.c: [3] ASSERT: ../../gnutls-3.6.10/lib/buffers.c[get_last_packet]:1168
....繰り返し

これは推測なのですが、リトライ時のメッセージ出力量が増えたことによってリトライの間隔が延びたことが影響しているのではないでしょうか。これらのメッセージは逐一ミニバッファに出るので体感できるくらいには遅くなります。

(setq gnutls-log-level 5) を設定したまま1~2日ほど使ってみましたが今のところエラーは発生していません。

これ以上深くは追っていないのですが、またエラーが発生したら調べてみようと思います。

2020-06-21追記:未だにエラーが出ません。

2020-05-06

JavaScriptとCSSの遅延読み込み

ブログにJavaScriptものを貼るときは色々気を使うんですよね。ブログ全体のheadにscriptタグを直接書くのは嫌ですし、エントリーにscriptタグを直接書いても良いのですが同じスクリプトを使うエントリーが複数同じページに表示されたときに二重に読み込んでしまうのは困ります。また、使用箇所がまだ表示されていないのに読み込んでしまうとサイトが重くなってしまいます。このサーバ、かなり遅いみたいですし。

というわけで遅延読み込みの仕組みを作ってみました。要素が画面内に入ったら指定されたスクリプトやcssを読み込みます。

//
// 一応IE11でも動くように作っています。IE8はaddEventListenerがないので動きません。
//
(function(w, d){
    // Array.prototype.forEach.call(a, f)の代わり
    var each=function(a,f){for(var i=0;i<a.length;++i){f(a[i]);}};
    // Promiseもどき。対応しているならPrms=Promiseでも良い。
    //var Prms = Promise;
    function Prms(f){
        var thenCb;//複数必要ならthens=[]で。thenではthens.push(cb)、succではeach(thens,function(thenCb){...})
        this.then=function(cb){
            thenCb=cb;
            return new Prms(function(succ){
                cb.nextCb=succ;
            });
        };
        var succ=function(result){
            setTimeout(function(){
                if(typeof thenCb=="function"){
                    var next=thenCb(result);
                    if(next&&thenCb.nextCb){next.then(thenCb.nextCb);}
                }
            },0);
        };
        f(succ);
    }
    Prms.resolve = function(){
        return new Prms(function(succ){succ();});
    };
    Prms.all = function(arr){
        return new Prms(function(succ){
            var count = arr.length;
            function onSucc(){
                if(--count == 0){
                    succ();
                }
            }
            each(arr,function(e){e.then(onSucc);});
        });
    };

    // 指定されたurlを読み込むタグ(cssならlink、それ以外ならscript)を
    // headへ追加して読み込みが終わったら解決するPromiseを返します。
    //
    // 配列を指定した場合は sequentially の指定によって処理が変わります。
    // sequentially が false なら同時に読み込みます。
    // sequentially が true なら先頭から順番に読み込みます。
    //
    // 配列内の配列も読み込みますが、sequentiallyが反転します。
    // 例えばload([a, [c, d, [e, f]], g], false)の場合、
    // - a, c, gは同時
    // - dはcの後
    // - e, fはdの後
    // に読み込みます。
    //
    function load(url, sequentially){
        //console.log("load(" + url + " " + (sequentially ? "sequentially" : "parallel") + ")");
        if(typeof url=="string"){
            return new Prms(function(succ){
                // 既に追加されている<link rel=stylesheet>、<script>要素を列挙する。
                //
                // この関数が追加した要素には.isUrlLoadingが設定されていて、
                // trueなら読み込み中。falseなら読み込み済み。
                // 他で追加した要素は読み込み済みか判定する方法が見当たらない
                // ので、読み込み済みと判断する。
                //
                // loadのたびに毎回探し直す必要がある。
                // sequentiallyの場合は前のloadが実行されるタイミングで
                // <script>や<link>が追加されるので。
                var es={};//elements
                each(d.getElementsByTagName("link"),function(link){if(link.getAttribute("rel")=="stylesheet"){es[link.getAttribute("href")]=link;}});
                each(d.getElementsByTagName("script"),function(script){es[script.getAttribute("src")]=script;});
                var head=d.head||d.getElementsByTagName("head")[0];

                var e=es[url];//既に追加済みのelementがあるなら取得
                if(e){
                    //console.log("already added " + url);
                    // すでに追加されている場合
                    if(e.isUrlLoading){
                        // 読み込み中の場合
                        var old = e.onload;
                        e.onload = old ? function(){old(); succ();} : succ; //フックする
                    }
                    else{
                        // 読み込み済みまたは不明な場合
                        //console.log("already loaded? " + url);
                        succ();
                    }
                }
                else{
                    if(/\.css/.test(url)){
                        // .cssの場合
                        e=d.createElement("link");
                        e.isUrlLoading=true;
                        e.rel="stylesheet";
                        e.type="text/css";
                        e.href=url;
                    }
                    else{
                        // その他は.jsと仮定
                        e=d.createElement("script");
                        e.isUrlLoading=true;
                        e.type="text/javascript";
                        e.src=url;
                    }
                    function onLoad(ev){
                        if(e.isUrlLoading){
                            console.log("loaded: " + url); //この関数で追加した要素が読み込み完了。
                            e.isUrlLoading=false;
                            succ();
                        }
                    }
                    e.onload = onLoad;
                    //e.onreadystatechange= はIE11のエミュレーションによればIE9以降不要。IE8はaddEventListenerに対応していないほどなのでいいや。
                    head.appendChild(e);
                }
            });
        }
        else if(url instanceof Array){
            // 配列の場合
            if(sequentially){
                // 先頭から一つずつ読み込み
                return new Prms(function(succ){
                    function next(){
                        if(url.length == 0){
                            succ();
                        }
                        else{
                            //console.log("start load " + url[0]);
                            load(url.shift(), false).then(next);
                        }
                    }
                    next();
                });
            }
            else{
                // 同時に読み込み
                // mapが使えるならreturn Prms.all(url.map(u=>load(u, true)));
                var prmss = [];
                each(url, function(u){
                    //console.log("start load " + u + " parallel");
                    prmss.push(load(u, true));});
                return Prms.all(prmss);
            }
        }
        /*
          else if(typeof url=="function"){
          // 関数の場合、実行したらPromiseを返すものと仮定
          return url();
          }
          else if(url instanceof Prms){
          // Promiseはそのまま
          return url;
          }
        */
        else{
            throw new Error("Unknown url type");
            return null;
        }
    }

    function onViewport(elem){
        return new Prms(function(succ){
            // scrollイベントを使う。本当はIntersectionObserverを使いたい。
            function onScroll(ev){
                var MARGIN=50;
                var rect=elem.getBoundingClientRect();
                if(rect.bottom+MARGIN>=0&&rect.top-MARGIN<=(w.innerHeight||d.documentElement.clientHeight)){
                    w.removeEventListener("load",onScroll,false);
                    w.removeEventListener("scroll",onScroll,false);
                    succ(elem);
                }
            }
            w.addEventListener("load",onScroll,false);
            w.addEventListener("scroll",onScroll,false);
        });
    }

    function loadScriptOnViewport(elem, urls){
        if(typeof elem == "string"){
            elem = d.getElementById(elem);
        }
        return new Prms(function(succ){
            onViewport(elem).then(function(elem){
                load(urls).then(function(){succ(elem);});
            });
        });
    }
    w.loadScriptOnViewport = loadScriptOnViewport;
})(window, document);

これを次のように使います。

var div = document.createElement("div");
document.currentScript.parentNode.appendChild(div);
//divが画面内に入ったらigo.css, igo.js, igo_view.jsを読み込む。igo.jsとigo_view.jsは順番に読み込む。
loadScriptOnViewport(div, ["igo.css", ["igo.js", "igo_view.js"]]).then(){
   div.appendChild((new GameView()).rootElement);
};

ファイルは配列で読み込む順番を指定出来ます。cssとjsは同時に読み込んでも問題ありませんがjsは順番を守る必要があるケースが多々あるので。

IEを切り捨てて良いなら色々と短くできる箇所があると思います。Promiseもアロー関数も使えますし。読み込むスクリプトがIE非対応ならここで対応する意味はありません。少し切り詰めてminifyかけたら1260文字くらいになりました。昨日の詰碁で使用しています。