待っ読ボタン実装に入る前に,気になっていた細かい問題を片付けておくことにした。
まずは,吊るし輪郭で前後景輪数が表示されていない問題を修正する。
途中で終了。
@tgt_evt.bld..on()(@elm.bld..on())を実装した希哲13年からあったと思われるが,認識したのはデライトに AdSense を導入した希哲14年2月から。
希哲15年3月31日の開発(10歩)で原因判明,修正した。
主に共有ボタン微調整。その他,窓間同期(3歩),デラング見出し記法仕様検討(5歩)など。
共有ボタンは,挙動の怪しかった部分を概ね修正,領当てもこれ以上動かしようがないところまで突き詰め,ほぼ完成形と言っていい形になった。
小窓の色はもう少し明るくてもいいかと思い cornsilk を試してみたが,周囲の色が明るいため眩しい。
ボタンの間隔は少し開き過ぎているような気がしたため,小窓の横幅を4px縮めた。これだけで少し引き締まって見え,これ以上縮めると詰まり過ぎに見える。1段目と2段目の間隔は16pxが丁度良かった。これ以上縮めると Pocket あたりがタッチしにくい。周辺の余白も16pxにした。これ以上狭くすると周囲と見分けにくい。視覚的にもタッチ操作的にもこれ以上は無さそうだ。
挙動に関しては,マウスオーバーで小窓を表示した直後にわずかな時間ロックをかけ閉じられないようにした。マウスオーバーで開くという知識が無いとクリックしてしまう人が多いはずなので,干渉しないようにする。また,不自然に画面に残らないように,小窓からのマウスアウトに加え resize,orientationchange,scroll でも閉じるようにした。
小窓が開かない場合があることに気付いて調査を始めたが,間もなく AdSense が表示されている場合に @win で事象聴取子を登録しようとした時の問題であることを突き止めた。Firefox では「Permission denied to access property "addEventListener" on cross-origin object」という違了が出ていた。
これは Aejs における既知の不具合で,昨年7月16日の開発記録では「根本的な解決策を施すことが出来た」と書いているが,単に AdSense よりも Aejs を先に読み込むようにしただけで,Aejs の欠陥は残ったままだった。どこかで iframe 内に addEventListener() を仕掛けているらしいということまでは突き止めていたが,それ以上調査する余裕が無かった。
今回の調査で,@tgt_evt.bld..on() 内で対象の length を調べて添え字で握接している所が問題だったことが判明した。@elm.bld 個体であれば問題ないが,@win(window)でこれをやるとサブフレームに握接してしまうことになる。
単純に,対象が window であった場合は飛ばす処理を加えて解決した。
アイコン制作続き。
共有ボタン・フィードボタン用のアイコンを作っていったん終了。
フィードボタン用のアイコンはごく一般的なものだが,一応自作しておいた。
共有ボタンの方は少し悩んだが,三点をくの字形に結ぶアイコンを少し修正し,矢印が伸びるようにした。より拡散のイメージが掴みやすい。
一点から二本の矢印が伸びるという共有アイコンの形は初期 Android で採用されていたが,なぜか現在の形に修正された。
拡散というよりはネットワークの結合というイメージを強調したかったのかもしれないが,直感的とは言えない。
iOS では基本的に四角から矢印が飛び出すような徹案になっているが,正直これは更に色々な意味で分かりにくいと感じる。
デライトの試作共有アイコンは,結果的に両者の折衷案になった。
もともと段落記法については,空行を挟んで段落を分け,段落内では改行を br 要素に置換する,という仕様を想定していた。やはりこれが一番直感的だろう。
現状は単に各行を p 要素にしているだけ。
Markdown の段落記法も空行を使うが,強制改行について仕様上は行末にスペース2つという記法を採用している。後者は特に日本など非英語圏では悪評の多い仕様らしく,独自実装で修正されていることも多い。
一見不可解な Markdown の強制改行は,英語圏のメール文化と Markdown.pl 実装時の技術的制約によるものと思われる。
メールや掲示板などでは適当な長さで改行されることが多い日本語に対して,英語では段落はしっかり分けるが段落内で改行を使うことは少ない。
Markdown.pl 実装当時,行をまたいだ処理を苦手とする正規表現でそこまでする意義を見出せなかったのだろう。
改行を含む段落の場合,現状の text-indent: 1em は若干不格好なので,p.no_idt として text-indent: 0; padding-left: 1em を加えることにした。
本当は text-indent: each-line が使えれば良かったが,現時点で対応ブラウザが無い。