2018/11/14 5:31 pm
Difference between notices #2
Uncategorized, , ,

まず diff を取る対象はマークアップレベルのテキストにした。ただし a 要素の href 属性以外は全て削ぎ落とされる。

また diff ライブラリとしては jsdifflib を利用するようにした。行単位の比較だし、diff 本体とプレゼンテーションのためのコードが分離しているのも都合がいいし、10KB ちょいとコンパクト。

というわけで注意書きの変更を検知すると、window.alert() でその旨を通知したのち自動的に注意書きパネルが開き、以下のように変更点が表示される:

多分初見で意味が分かると思うけど、赤背景で打ち消し線が引いてあるのが変更後に削除された行、緑背景が追加された行だ。

2018/11/13 1:44 am
Difference between notices
Uncategorized, , ,

ふたばの画像掲示板では送信フォームの下部に様々な注意書きを表示しているが、赤福プラスはロードした際にその注意書きの内容を覚えて保持しており、n キーを押すとパネルに注意書きが表示される。

さて、リロードした際にリロード前後の注意書きの内容を比較して、差異があったらそれを通知したい。できれば加えて、何が増えたのか減ったのかをグラフィカルに表示したい。つまり、diff の結果を表示したい。ところが、この diff のアルゴリズムというのは簡単なように見えて恐ろしく難しくて、それだけで1本論文が書けちゃうほどのものだったりする。それを真面目に実装するのも大変だし、既存のライブラリを組み込むにも、下手すると赤福プラス本体よりデカいとかありうる。

さらに、diff 自体の難しさと並行して、diff の対象をマークアップの段階にするか、人が読んで意味を取れる文章の段階にするかという問題もある。前者にすると、html マークアップ内の属性の変化も検知できるが、それがユーザが欲してる情報かどうかはやや疑わしい。例えば Chrome に ScriptSafe というエクステンションを入れると副作用としてありとあらゆる要素に ss-なんちゃらという属性を付けて回るが、この変化も検知してしまう。しかしこれはユーザにとってはどうでもいい情報だ。それを通知されても困る。

一方で後者、つまり各要素の内容だけをフィルタした結果にすると、例えば a 要素の href 属性と言った、割と重要な情報も見逃してしまう恐れがあるのである。どちらに振っても良い結果にならない。

どうするか。

2018/11/05 7:28 pm
Kenya Television Network #3
Uncategorized, , ,

というわけで私的な環境におけるキーバインディングを整理したのだが、実は赤福プラス自身も textarea においていくつか Emacs ライクなショートカットを定義している。

でもそもそもこれ、いるんだろうか。textarea にショートカットがたくさん用意されていないと死んでしまうような輩は、そもそも自分でシステムレベルで有効な環境を構築している気がする。

まああっても害になるものではないし、残しておくかな。とりあえず設定にそういったショートカットを有効にするかどうかの項目だけ追加しておくことにしよう。

ところで javascript から textarea 内のキャレット位置を変更するには、selectionStart/selectionEnd をいじる他に、Selection#modify() がとても有用なのだが…どうもこれ、Firefox だと全然動かないみたい。63.0 on Linux、63.0.1 on Windows10 の両方で動かない。リファレンスを自分とこで用意しておきながら動かないってどういうことなんだろう。

2018/10/29 1:49 am
Daikuuji
Uncategorized, , ,

たまに虹裏では複数の「」が1文字ずつレスをして大空寺あゆ(・▽・)萌えっ!と叫んだり叫ばなかったりする。

で、完成すると(あるいは完成しなくても)適当なタイミングで「○○完成してるの初めて見た」的な締めになるわけだが。この時の○○が、せいぜい10文字程度ならその場で打ち込むのだけど、もっと長い何十にも続いたレス群の場合に困るのである。いちいち1文字ずつコピペで持ってくるのも面倒だし、さりとて打ち込み直すとタイポをしてしまう可能性がある。

というわけで

このように対象になる箇所を大胆に選択した後、出てきたメニューのうち「大!空!寺!」を選ぶ。すると、日付など必要のない部分はスキップし、コメント部分だけを抜き出した上で連結し、コメント欄に出力する。

収集されるテキストは、コメントを格納する div の直接の子供であるテキストノードのみである。エレメントノードは無視される。引用された行も span に囲まれているので、収集の対象にはならない。コメント部分が複数行だった場合は改行は削除される。

2018/10/22 8:41 pm
Let the box be light
Uncategorized, , , ,

画像をクリックするとデフォルトで lightbox 的な振る舞いをするのだが、これにはいくつか積み残しになっている点があった。

まず、画像を原寸表示させた際。このモードではマウスのドラッグにより画像のスクロールが可能なのだが、ドラッグしたままポインタをブラウザ外に持っていき、そこでボタンを離したりすると状態管理の不整合が起きてドラッグしてないのに画像がポインタについて来るみたいなことになってしまう。

これはつまりポインタのキャプチャをしていないからなのだが、何故していないのかと言うと、正確には覚えていないけど多分 Presto Opera にその機能がなかったんだと思う。これを直したい。

次に、全体表示から原寸表示モードに移行した際に拡大の原点がつねに画像の中心なのが不便。たとえば漫画なんかを1枚絵にした画像の場合に、原寸表示にしたあと上端へスクロールさせなければならないのが煩わしい。これを解決したい。

最後に、スマホで撮った写真など、本来90度回転して表示されるべきものが、そうなっていない場合がある。これに対応するため、画像の回転機能が欲しい。

というわけで、上記を解決するために書き直した。

回転にも transition をかけたのでやたらスムーズにくるくる回るのが面白い。

2番めの問題を解決するために、従来は画像をクリックすると lightbox を抜ける動作をしていたのだが、新しいバージョンではクリックしたポイントを原点に拡大縮小するようになった。lightbox を抜けるには画像以外の部分をクリックする必要がある。これはちょっと優しくない仕様変更かもしれない。

それと、画像のドラッグ時にいわゆる bounce-back 機能をつけたのだけど。これをつけると Apple に訴えられるんでしたっけ? ヤバイのかな。

* * *

とかなんとかやってたらまたふたばが全滅してるし…。

2018/10/16 3:20 am
Is it ok with such a deciding!?
Uncategorized, , ,

お名前や、題名や、メール欄や、コメントの内容が規定の長さを超えていたら警告する処理が長年動いてなかったのを修正。それぞれの要素の内容がそれぞれ設定されている最大の長さを超えていた時、警告を点滅表示する。

この警告はなんかよく分からないのだが、10年以上前 Opera 版赤福プラスを作る際、いもげにスレを立てて警告メッセージとして何がいいか「」に伺った時に出てきたものだ。当初は欲張って3桁ゾロ目のレスを採ると言ったのだが、さすがに1/100の確率なのでなかなか出ない。そういうわけでしびれを切らして次のゾロ目にしますと書き込んだ直後のゾロ目のレスが「そんな決め方でいいのか!?」だった。確か。

2018/10/13 4:22 pm
Improve 💃🏃 handling
Uncategorized, , , ,

赤福プラス上では絵文字を Twitter のそれに準拠して表示するようにしているが、それを v2 に引き上げた。twemoji が謳っているとおり、2,841パターンの絵文字に対応している、はず。

Firefox だとタブのタイトル部分もカラーの絵文字で表示されてえらい。

2018/10/09 10:16 pm
#ffffee, #800000, #f0e0d6, #eeaa88
Uncategorized, , ,

ふたばの掲示板の特徴的な色合いはタイトルにある4つの色で構成されているのだが、これのオリジンはどこなのん? と考えてみるとそれぞれの掲示板のフッタに必ずある

GazouBBS + futaba

の、GazouBBSが多分そうなんだと思う。だから今でも敬意を表してクレジットされているということなんだろう。

ところが、このGazouBBSのアンカーはhttp://php.s3.to/へリンクしているのだが、実はもうこのドメインは失われているのであった。探してみると現在はhttp://php.loglog.jp/へ移転しているようだ。GazouBBSはhttp://php.loglog.jp/bbs/bbs3.phpで提供されている。

そういうわけなので、赤福プラスでは移転先の方へリンクするようにしている。また、その旨をふたばの管理人さんにもお伝えした。受け入れられるか、無視されるか、ころころされるかは後のお楽しみ。

* * *

管理人さんから返答があり、現状のままでということになった。

2018/10/08 4:32 pm
Sex and Drag and Drops
Uncategorized, , ,

従来 Chrome では、<input type="file"> 要素に OS のファイルマネージャからドラッグ&ドロップで画像を落とすと普通に受け付けてくれた。なので、javascript 側でそういう機能を作らなくてもまあいいかなと思っていたのだけど。

なんか最近の Chrome では <input type="file"> のその機能がなくなってる気がする。どうして…どうして有用な機能を削除するのですか…。

というわけで結局 javascript で何とかするハメになってしまった。DragAndDrop API はすんごく使いにくいのであんまり触りたくないのだけど。HTML の規格の中でなんかこれだけやたら Microsoft の API 設計のセンスが満ち溢れて浮いてる感がある。


ドラッグ中は送信フォームが勝手に開いてこういう表示になる。画像ではないファイルをドラッグしてもこういう応答はしない。

ちなみに、ドロップはこのドロップできます領域に限られているわけではなく、赤福プラスのスクリーンのどこに落としても構わない。これはそういうデザインになっている。ただこれはいわゆる SuperDrag 系の拡張と相性が悪いかも知れないが、それは文句が出てから考えよう。

2018/10/05 8:20 pm
hover in, hover out
Uncategorized, , ,

従来検索結果に出てきたレス番号にポインタを当てるとそこへスクロールさせていたのだが、割と煩わしいので引用と同様のポップアップを行うようにした。レス番号自体をクリックするとそこへスクロールはする。

そろそろリリースするかな。

Archives