Monthly Archives: 5月 2020

2020-05-26 ,

org-modeのHTMLエクスポート時にimgタグのalt属性をcaptionからつける

org-mode文書をHTMLでエクスポートしたとき、imgタグのalt=属性(代替テキスト)はデフォルトで画像のファイル名になります。

<img src="./suica.jpg" alt="suica.jpg" />

altがファイル名というのはなんとも気が利かない感じがします。 altを任意の文字列にする方法は Images and XHTML export に書かれていて、画像リンクの前に #+ATTR_HTML: :alt 文字列 と書きます。

#+ATTR_HTML: :alt おいしそうなすいか
[[file:./suica.jpg]]

一方画像にはキャプションを付けることが可能で、画像リンクの前に #+CAPTION: 文字列 と書くと画像の下に「図1:文字列」のようなキャプションがつきます。

#+CAPTION: おいしそうなすいか
#+ATTR_HTML: :alt おいしそうなすいか
[[file:./suica.jpg]]

キャプションには大抵は画像の内容を要約した文が書かれますから、altもキャプションと同じで良いのではないでしょうか? キャプションがあるのだからそもそも代替テキストは不要なのではないか(画像が表示されないときはキャプションを読めば良いのではないか)という気がしなくもありませんが、一応つけるとしたらキャプションと同じ内容で十分なことは多いでしょう。

#+CAPTION:#+ATTR_HTML: の両方を書くのは面倒ですしミスも発生します。私は先に #+CAPTION: だけ使って文書を書き上げてから正規表現置換で #+ATTR_HTML: を生成していたのですが、生成後に #+CAPTION: を修正したときに #+ATTR_HTML: を修正し忘れることが何度もありました。

というわけでエクスポート時にaltを #+CAPTION: から決めるようにするのが次のコードです。

(defun org-altcaption--get-caption (paragraph info)
  "段落に設定されているキャプション文字列を取得する。

org-html-paragraph関数内の「;; Standalone image.」の部分より。"
  (if paragraph
      (let ((raw (org-export-data (org-export-get-caption paragraph) info)))
        (if (org-string-nw-p raw) raw nil))))

(defun org-altcaption--get-link-parent (link info)
"linkの親要素を取得する。ただし、linkが最初のリンクでない場合はnil。

org-html-link関数内より。"
  ;; Extract caption from parent's paragraph.  HACK: Only
  ;; do this for the first link in parent (inner image link
  ;; for inline images).  This is needed as long as
  ;; attributes cannot be set on a per link basis.
  (let* ((parent (org-export-get-parent-element link))
         (link (let ((container (org-export-get-parent link)))
                 (if (and (eq 'link (org-element-type container))
                          (org-html-inline-image-p link info))
                     container
                   link))))
    (and (eq link (org-element-map parent 'link #'identity info t))
         parent)))

(defvar org-altcaption--link nil)

(defun org-altcaption--org-html-link (old-func link desc info)
  "org-html-linkに対するaround advice"
  ;; Pass link to org-altcaption--org-html--format-image function
  (let ((org-altcaption--link link))
    (funcall old-func link desc info)))

(defun org-altcaption--org-html--format-image (old-func source attributes info)
  "org-html--format-imageに対するaround advice"
  ;; Add alt attribute if link has caption
  (if (and org-altcaption--link (null (plist-get attributes :alt)))
      (let ((caption (org-altcaption--get-caption (org-altcaption--get-link-parent org-altcaption--link info) info)))
        (when caption
          (setq attributes (plist-put attributes :alt caption))
          ;;(message "caption=%s" caption)
          )))
  ;; Call original function
  (funcall old-func source attributes info))


(defun org-altcaption-activate ()
  (interactive)
  (advice-add #'org-html-link :around #'org-altcaption--org-html-link)
  (advice-add #'org-html--format-image :around #'org-altcaption--org-html--format-image))

(defun org-altcaption-deactivate ()
  (interactive)
  (advice-remove #'org-html-link #'org-altcaption--org-html-link)
  (advice-remove #'org-html--format-image #'org-altcaption--org-html--format-image))

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

こんなこと簡単に実現できるだろう、と思いきや結構難しいんですこれが。Orgの文法のうまくできていないところに片足を突っ込んでいる感じです。

Orgでは個別のリンク一つ一つにプロパティを指定することが困難です。例えば段落中のリンクに target="_blank" 属性を設定したい(リンク先を別のウィンドウで開きたい)場合次のように書くのですが

#+ATTR_HTML: :target _blank
山といえば [[https://www.pref.yamanashi.jp/][山梨県]] と [[http://www.pref.shizuoka.jp/index.html][静岡県]] 。富士山にまたがるこの二つの県は……

この場合最初のリンク(山梨県)にしか target="_blank" は設定されません。次のように書くと当然二つの段落に分かれてしまいます。

#+ATTR_HTML: :target _blank
山といえば [[https://www.pref.yamanashi.jp/][山梨県]] と
#+ATTR_HTML: :target _blank
[[http://www.pref.shizuoka.jp/index.html][静岡県]] 。富士山にまたがるこの二つの県は……

属性はリンクに設定されるのではなく段落に対して設定されます。リンクをエクスポートするときは、リンクを包む親要素(段落)に対する属性指定を調べてそれを適用します。属性はリンクについているのではなく親要素についています。これはキャプションも同じで、親要素を調べなければキャプション文字列は分かりません。さらに属性が適用されるのは段落中の最初のリンクのみ。二つ目以降のリンクには適用されない仕様です。キャプションの場合はスタンドアロンな画像(行内にある画像ではなくブロックを形成する画像)にしかキャプションは付けられない仕様なのであまり気にする必要は無いのかもしれませんが、いちおう二つ目の画像リンクには適用しない方がいいでしょう。

ということをするのが org-altcaption--get-link-parent 関数になります。このロジックは org-html-link 関数(ox-html.el)の中にあるものを拝借しました。

リンクそのものにプロパティを指定する文法の提案をどこかで見かけたような気がするのですがうろ覚え。

おいしそうなすいか
図1: おいしそうなすいか
2020-05-26 ,

org-modeのインライン画像のサイズを制限する(最大サイズを指定する)

前回の続きでorg-modeのインライン画像の気に入らないところその2。画像の最大サイズを指定できないところ。

Org文書中からEmacsのフレームよりも大きい画像へリンクを張ることがあります(特にOrg2Blogを使っていると画像はサーバ側で様々なバリエーションを自動生成するので元画像は大きめになります)。そんなときに org-toggle-inline-images でインライン画像を表示するとフレームから画像がはみ出して目も当てられません。

フレームからはみ出す画像
図1: フレームからはみ出す画像

org-modeには org-image-actual-width という変数があり、ImageMagickが有効なときは指定したサイズへスケーリングできます。しかし全ての画像が指定したサイズで表示されてしまうため、小さな画像も大きく拡大されてしまいます。 #+ATTR_HTML: :width 300 のような属性指定を元にサイズを決める機能もありますが、Emacs内での表示のためだけにこの指定をあちこちに入れるのは面倒です。それに用途によってはエクスポートしたときの属性値はEmacs内での表示サイズとは別のものが必要になるでしょう(追記:そういう用途には #+ATTR_ORG: :width を併用するようです> How do I re-scale inline org-mode images to specific widths? - Stack Overflow)。

あくまで欲しいのは可能な限り元のサイズで表示し、設定した最大サイズを超えた場合のみ縮小して表示する機能です。

org-modeにこの機能が無いのはおそらくEmacsのcreate-image関数にそれをサポートする機能が無いためではないでしょうか。create-image関数は幅を指定して読み込む機能(:widthプロパティ)はありますが指定された幅より大きい場合にのみ縮小するような機能(例えば:max-widthとか)はありません(max-image-sizeという変数はありますが、これは読み込む最大のサイズを指定します。それを超えた画像は読み込まれません!)。

幸い画像のサイズを取得するimage-size関数はあるので自分でサイズを計算して読み込むことは可能です。ただしimage-size関数がどのように実装されているかは確認していません。ヘッダーだけ読み込んでサイズを返すならばそれなりに速い動作が期待できますが、画像全体を読み込んでからサイズを返すようだと二度手間になるので速度は低下することでしょう。

それは覚悟の上で最大サイズを指定できるようにするのが次のコードです。

訂正: ImageMagickを使った読み込みでは :max-width、:max-heightが指定できました!(ImageMagick Images - GNU Emacs Lisp Reference Manual) それらを使用して最大サイズを指定できるようにするのが次のコードです。

(defcustom org-limit-image-size '(0.99 . 0.5) "Maximum image size") ;; integer or float or (width-int-or-float . height-int-or-float)

(defun org-limit-image-size--get-limit-size (width-p)
  (let ((limit-size (if (numberp org-limit-image-size)
                        org-limit-image-size
                      (if width-p (car org-limit-image-size)
                        (cdr org-limit-image-size)))))
    (if (floatp limit-size)
        (ceiling (* limit-size (if width-p (frame-text-width) (frame-text-height))))
      limit-size)))

(defvar org-limit-image-size--in-org-display-inline-images nil)

(defun org-limit-image-size--create-image
    (old-func file-or-data &optional type data-p &rest props)

  (if (and org-limit-image-size--in-org-display-inline-images
           org-limit-image-size
           (null type)
           ;;(image-type-available-p 'imagemagick) ;;Emacs27 support scaling by default?
           (null (plist-get props :width)))
      ;; limit to maximum size
      (apply
       old-func
       file-or-data
       (if (image-type-available-p 'imagemagick) 'imagemagick)
       data-p
       (plist-put
        (plist-put
         (org-plist-delete props :width) ;;remove (:width nil)
         :max-width (org-limit-image-size--get-limit-size t))
        :max-height (org-limit-image-size--get-limit-size nil)))

    ;; default
    (apply old-func file-or-data type data-p props)))

(defun org-limit-image-size--org-display-inline-images (old-func &rest args)
  (let ((org-limit-image-size--in-org-display-inline-images t))
    (apply old-func args)))

(defun org-limit-image-size-activate ()
  (interactive)
  (advice-add #'create-image :around #'org-limit-image-size--create-image)
  (advice-add #'org-display-inline-images :around #'org-limit-image-size--org-display-inline-images))

(defun org-limit-image-size-deactivate ()
  (interactive)
  (advice-remove #'create-image #'org-limit-image-size--create-image)
  (advice-remove #'org-display-inline-images #'org-limit-image-size--org-display-inline-images))

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

変数 org-limit-image-size には最大サイズを指定します。一つの数値で指定した場合は幅と高さの最大値は同じになります。ドット対 (width . height) の形で二つの数値を指定した場合は幅と高さの最大値は別々になります。数値は整数の場合はピクセル数となります。浮動小数点数の場合はフレームのサイズに対する比率となります。デフォルトは (0.99 . 0.5) で、幅の最大値はほぼフレーム一杯、高さの最大値はフレームの半分くらいまでとしています。

実装にあたっては org-display-inline-images 関数の途中をいじりたかったのですがうまく分割できないので create-image をフックして org-display-inline-images 経由で呼び出されたときだけ動作を変えています。

正直このくらいのことはorg-mode標準で対応して欲しいなぁという気もします。やってることは結局create-imageに:max-widthと:max-heightを付加することだけなので。フックするためのコードが馬鹿らしいですよね。ハマリどころとしては :width nil はダメってことです。Emacs27は分かりませんが、ImageMagickでは :width nil で :max-widthを指定すると画像が出ません。不要な:widthプロパティは削除する必要があります。

追記: Emacs27対応について。Emacs27ではImageMagick対応がデフォルト無効になるそうです。その代わりスケーリングは標準対応になるとNEWS.27に書いてあります(Windowsでも対応するのか不安……)。image.cやdisplay.texiを見る限り:max-widthや:max-heightも標準対応していそう。なのでimagemagickの有無を判定して処理を変えている部分を少し修正して、無くても:max-width、:max-heightプロパティを付加するようにしてみました。ちゃんと対応するなら新しく追加される関数image-transform-pを使用して判別した方が良いかもしれません。org-mode側ではImageMagickの有無で:widthプロパティを設定するかどうかを判別しているので、org-image-actual-widthや#+ATTR_*でのサイズ指定は今のところImageMagick必須です。

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文字くらいになりました。昨日の詰碁で使用しています。

2020-05-06 ,

オシツブシ

実戦でオシツブシが決まると気持ちいいね! 囲碁クエスト9路盤本日の対局より。

それで実際の所これ活きてたの?

(注意:↑↑に画面内に入ったらigo.js等を読み込んで、読み込み終わったら盤面を表示するスクリプトが仕込んであります。表示まで時間がかかるのはサーバが重いんじゃないかな……?)

2020-05-02 ,

JavaScript碁盤

JavaScript碁盤を書きました。

実行
ソースコード
https://github.com/misohena/js_igo

最近囲碁クエストにはまっているのですが、ブラウザ版には終局後の検討機能がありません。検討機能は終局後に巻き戻して途中から自分で好きに石を並べられるモードです。終局後に「あそこは何かあったんじゃないかな」「防ぐ手はなかったかな」などと思うことは良くありますが、ブラウザでプレイするとそれができません。Android版にはちゃんと検討機能がありますし過去の対局を振り返って検討することもできるのですが、デスクで作業しているときにいちいちスマホに手を伸ばしたくありません。

幸い棋譜(SGF)のエクスポート機能(ブラウザのテキスト領域に表示してコピーできる)はあるので、何か適当なソフトで読み込めば検討はできます。CGobanを入れてみたのですが、コピーしたSGFテキストを一度ファイルに保存してから読み込まなければならず面倒です。同じブラウザでSGFをペーストして読み込める碁盤があれば便利だなと思ったので作ることにしました。同じようなものは探せばいくらでもあるみたいですが、探すのも面倒ですし作るのも勉強になりますので。

基本的なロジックは10年以上前に作ったものがあったので流用しつつ現代風にアレンジ&機能追加しました。

盤面のデータ構造はUint32Arrayに1交点2ビットずつ詰め込む形を採用。9路盤を2*9*9=162ビット、162/32=5.0625で6dwords(24バイト)で表現出来ます。最小を目指すなら3(空点、黒、白)の倍数で記録していくべきなのですがさすがにそれはやりすぎかなと。盤外を表す点を用意すべきか等色々トレードオフがあってよく分からないのですが、盤面を沢山複製して保持するときにできるだけ小さい方がいいだろう、ということで。ハッシュも計算しやすそうですし。ただ、今回の用途までならどうやっても問題なし。

画像で表示するのも馬鹿らしいのでSVGで表示。グラデーションと影をつけてまあまあの見た目になりました。

履歴は最初からツリー構造を採用。巻き戻してから他の場所に打ったときは別のノードを作って記録します。分岐はA, B, C,…と盤面に表示できるようにしました。他のツールのようにツリー構造全体を図で表示出来たらかっこよかったのですが、これでも十分実用にはなります。

SGFインポート/エクスポート機能は今回の目的では必須。SGFフォーマットのページを見たらEBNFが書いてあったのでそれを元に手書きで解析器を作成。プロパティは、囲碁クエストのSGFを読むだけならSZ, B, Wくらいに対応すれば十分。後から詰碁を表示したいと思ってPL, AB, AW, AE, C, その他マーク等にも対応しました。

詰碁に対応するためにコメント機能、フリー編集機能、先番設定機能を追加。

一応スマホでも使えるようにタッチイベントに対応。19x19はさすがに小さいですね。ボタン類も一緒に小さくなってしまうので盤面部分だけ拡大縮小出来るようになるとよいのですが……。(→追記:対応しました)

あ、結果の判定機能はありません。死活判定しなければならないので難しいですよね……。死に石を指定出来るようにするとか、純碁みたいに全部打ち切るなら判定出来るのですが……。今後の大きな課題です。

純碁と言えば王銘エン先生の「こんなに面白い 世界の囲碁ルール」は面白かったです。オススメ。

ちなみに囲碁クエストをはじめたのは、知り合いが将棋ウォーズをやっていたからです。将棋は子供の頃に父親にボコボコにされたトラウマがあるのでやらないことにしているのです。なので囲碁ウォーズを試してみたのですが、Android版アプリの出来がすこぶる悪い。何回やっても起動しなくなるのです。時々思い出したようにすんなり起動するのですが、アプリを終了するとまた起動しなくなります。何が原因なのかまったく分かりません。調べてみると囲碁クエストという別のアプリの方が安定しているようなのでそちらをはじめました。

どちらもメインは9路盤のようです。19路のオンライン対局は大変なのでとてもやる気が起きませんが、9路なら短時間でプレイできるのでオススメです。

一問一答! 囲碁・9路盤の手筋 ~基本定石からヨセまで~ (囲碁人ブックス)」という本も買ってみたのですが、これはちょっと難しいですね。難易度が低い問題が分からなくて気を落としていたら難易度が中くらいのものがあっさり分かってしまったり。巻末の引き分け定石は参考になります。手順番号の着いた棋譜を脳内再生するのは苦手なのですが、今回作った碁盤を使って勉強してみようと思います。

Web上も探すと9路の情報が結構ありますね。Youtube動画もあります。