赤心慶福

appsweets akahuku labs.

Let the box be light

Posted on 2018/10/22 by akahuku

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

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

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

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

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

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

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

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

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

＊　＊　＊

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

Is it ok with such a deciding!?

Posted on 2018/10/16 by akahuku

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

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

Improve ?? handling

Posted on 2018/10/13 by akahuku

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

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

#ffffee, #800000, #f0e0d6, #eeaa88

Posted on 2018/10/09 by akahuku

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

– GazouBBS + futaba–

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

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

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

＊　＊　＊

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

Sex and Drag and Drops

Posted on 2018/10/08 by akahuku

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

なんか最近の Chrome では [cci][/cci] のその機能がなくなってる気がする。どうして…どうして有用な機能を削除するのですか…。

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

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

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

hover in, hover out

Posted on 2018/10/05 by akahuku

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

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

sync, sync, sync

Posted on 2018/10/04 by akahuku

従来は設定を localStorage に持っていたが、[cci]chrome.storage.sync[/cci] に持つようにした。storage の読み出しは非同期的に行われる。バックエンドの接続と、DOMContentLoadedの待機と併せて、起動時に非同期に行われる処理がこれで3つになった。これらを [cci]Promise.all[/cci] を用いて並列的に処理するようにした。

そういえば sync って Firefox や Opera だとどういう扱いなんでしたっけ？　Firefox は対応しているようだ。Opera は対応していないらしい。対応はしていないが、chrome.storage.local にフォールバックされるようで呼び出してもエラーにはならない。なにそれ。Opera Sync があるんだからそれとくっつけてよ。

カタログのリロード処理を見直した。また、デフォルトのソート順の場合はページ数を表示するようにした。選択したカタログのソート順を覚えておき、ページ全体をリロードした際も再現するようにもした。

ところで、xsl において、あるコンディションによって出力する内容を変えたいときがある。例えば出力する要素のクラス名に特定の文字列を状況によって含めたり、外したりしたい場合。
...
のようなことをしたい。波括弧に囲まれた属性値テンプレートは xpath の式だ。当然上記はエラーになる。

そんなわけで
...
のようなとてもトリッキーな書き方をせざるを得ない。= 演算子が true か false かを返し、number() がそれを 1 か 0 に変換し、式が真の場合は hide の先頭から4文字（つまり “hide” そのもの）、偽の場合は先頭から0文字（つまり空文字列）を出力する。

もうちょっとスマートな方法がないものかな。

Finding threads

Posted on 2018/09/28 by akahuku

従来カタログを出しているときはパネルは出せない、排他的関係だったのだがカタログ上でも出せるようにした。

この場合、検索機能は対象がスレッドになる。また、検索パネルに何がしかのクエリを書いて出しっぱなしにしておき、その状態でカタログを更新すると、検索結果も同時に更新される。つまり特定のワードを含むスレッドの判別が楽になる。

WebExtensions and clipboard operation, revised

Posted on 2018/09/26 by akahuku

現状では赤福プラスのファーストクラスブラウザは Chrome なのだが、一応 Firefox の WebExtensions でも動作確認はしている。でもどうなんでしょう。そもそも Firefox たまにしか立ち上げないし、また Firefox 上の他のふたば用エクステンションはここの所かなりたくさんリリースされているので、そこに加わるのもなあという感じ。

まあそれはそれとして。

WebExtensions では、パッケージ内のリソースを参照する際は moz-extension: スキームを使う。Chrome では chrome-extension: だ。これは内部で使用している xsl ファイルに埋め込まれたスタイルシートの中の background-image なんかで問題になる。background-image を使用する箇所だけを別の css ファイルにして解決(あんまりイケている解法ではない)。

以前クリップボードの取り扱いについて四苦八苦したことがあったが、基本的に変わってない。なぜか Chrome と全く違うクリップボード操作を強いられる。ただしそれとは別に、javascript からクリップボードを扱うための API ができて、割と最新のブラウザなら使えるようだ。とりあえず Chrome 69 なら使える。Firefox 63 では about:config から dom.events.asyncClipboard.dataTransfer を true にすることで使える。デフォルトの状態では使えない。

そういうわけなので

if ('clipboard' in navigator) navigator.clipboard.writeText(text); else if (IS_GECKO) setClipboardGecko(text); else setClipboard(text);
…みたいな感じにした。

Load the replies, quickly

Posted on 2018/09/25 by akahuku

「続きを読む」リンクを押した際、すでに読み込み済みのレス群に対しても、そうだねや、レス削除、赤字、なー等の変化を察知し、文書自体をリロードした場合と完全に同期するようになっている。

これはけっこう割と重い…というか時間がかかる。というのは現状では50レスのブロックごとに200ミリ秒の休憩を挟んでいるからだ。これはまあしょぼPCを考えてのことなのだが、さすがに今時この程度の処理で息切れするPCもあるまいということで、続きを読んだ際はフルスピードで走らせることにしよう(最初にスレッドを開いた際は100ミリ秒ずつ休憩しながら走査するようにした)。ということで1000レス超のスレッドでも1秒位で全走査がいけるようになったと思う。実はもっと高速化できるアイデアもあるのだが、それはおいおい実装することにする。

それから、新しいレス群を出力した後、それらの上辺がスクリーンのちょうど半分の位置に来るよう自動スクロールさせているのだが、その辺のスクロール速度をちょっといじったりもした。というのは、走査が高速化した分だけこちらは逆にスクロール速度を落としたのであった。トランジションなので速すぎても意味がないということだ。

また、塩辛瓶に上げられた webm/mp4 ファイルはインラインにプレーヤーを展開するようにしているが、ogg/mp3 ファイルについても同様に振る舞うようにした。ところで困ったことに Chrome 組み込みの動画や音声の操作コントロールはどういうわけかボリュームの調整ができない。これどうしたものだろうか。