:don: 20170711

新ランディングページ

がついにマージされました。マージされる前からmaster勢がこぞって挑戦し、日本語訳に関して議論を交わしていたのでいくつかメモ。

  • 一番上に表示されているリンク Log in About Instance list について、 ログイン このインスタンスについて 他のインスタンス という翻訳案が出てきたものの、だいぶ幅が増えてしまうのでスマホで見たときに二行になってしまう。もっと詳しく ぐらいならいけそうだけど、320px 幅だとそれでも padding 減らさないと厳しい感じ。
  • You’re a person, not a product は You are Facebook’s product, not customer 等を揶揄しているんだろうけど、元ネタ知らないと「あなたは個人であり、商品ではありません」と言われてもよくわからないのでは
  • walled garden
  • humane approach ethical design

などなど。なかなか言い回しが難しい…。

PRピックアップ

画像が複数枚添付されているときのメディアモーダル（lightbox的なあれ）で「1枚目の画像から前に戻ろうとしたとき」に画像のない枠が表示されるというバグが発生していた件。

前の画像のインデックスを (index - 1) % size で計算していたために、index=0 の時に -1 になってしまっていたという。符号が絡む剰余計算は言語や処理系によって色々みたいですね。

リモートユーザーのアイコン・ヘッダ画像を全て・ドメイン単位で再取得するRakeタスクの追加。

/api/v1/search が認証不要で呼び出せていたのを、/api/v1/accounts/search 同様にユーザー認証を要求する仕様に変更。これらの検索APIはリモートからの取得とDBへの保存、そして連合TLにトゥートを流すという副作用があるので、認証なしで呼び出せるのはよろしくない、というのが元issueの意見。

Pin/Unpin機能が実装されたので、PC版レイアウトで投稿カラムの上に表示されているショートカットボタンもその設定に応じて変化すべきという話。沢山ピン留めすればボタンも減り、全部解除すればこれまでよりも増えることになります。

積み残し

  • 同じ投稿に対するfav/unfavが連続で呼び出されたとき、Favouriteは削除されるのにNotificationが残っている、ということが稀によく起きる。対象のactivityがなかったら削除するか、transactionで割り込まれないようにするか、そもそもフロント側でfavが完了するまでブロックしたほうがいいのだろうか？
  • メディアモーダルで動画のサイズがおかしい。これ厳しくないか…？

:don: 170710

書いた

CSPが設定されてるとiOS9等で動かない件

Update es5-ext to avoid CSP violation by unarist · Pull Request #4145 · tootsuite/mastodon

Polyfill の中で global を取得するために new Function("return this") を使っている箇所があり、それが読み込まれる環境では CSP の unsafe-eval に該当するのでWebUI（+そのうち入る新about）が動作していなかった。で、当該ライブラリのtodoに挙がっていたので突いてみたら更新してもらえたので、それをyarn.lockに反映した感じ。

ちなみに Webpack も似たような方法で global を取得するのだけど、いくつかの方法を併用するうえに try..catch でフォールバックしているので、普段は問題なかったわけです。あとCSPを設定していないインスタンス（我らが :don: とか）でも発生しない。なるほどなあ。

読んだ

Remote following success page by STJrInuyasha #4129

リモートフォロー後にいきなりWebUIに飛ばすのではなく、フォローしたユーザーページに戻れるようなクッションページを挟むように。

Add setting a always mark media as sensitive by ykzts #4136

NSFWをデフォルトにする設定項目を追加。

Limit total subscribe retries to 10, but space them out more by Gargron #4142

PuSH購読の更新に失敗したときに、徐々に間隔を伸ばしながらリトライし、10回で打ち切る（これまでは25回？）。また失敗が長引くと次の購読更新が走る可能性があるが、その場合でも二重にキューに積まれないように。

Fix #4059 - Remove ModuleConcatenationPlugin by Gargron #4139

1.4.7 で Webpack 3 と一緒に導入された ModuleConcatenationPlugin がどうもビルド時のメモリ消費をグンと上げてしまったので、外すことに。実際のところは Lazy load components が入った時にバンドルも細分化されているためか、今の master ではさほど効果がでるわけでもないらしい。ただまあ今後のことを考えて、念のため。

:don: 170709

Mastodon

書いた

regression: 通知カラムをピン留めしていると初回ロードが走らない

Make all reducers sync by sorin-davidoi · Pull Request #4125 · tootsuite/mastodon

まあ面倒だもんね。で、

Fix initial loading of pinned Notifications column by unarist · Pull Request #4126 · tootsuite/mastodon

うん、またなんだ。

前回はルーター経由で読み込んだ時にしか初回ロードが走らないというバグだったけど、今回は完全に消えているのでより重症か。

一度読み込んだコンポーネントはPromiseを使わずに表示する

Avoid async import if the component is previously loaded by unarist · Pull Request #4127 · tootsuite/mastodon

若干無駄が減るのと、遅い端末だとカラム切り替えの間に（見出しも）空のカラムが見えることがあるので、まとめてしまう。逆に言えばUIスレッドをブロックする時間が延びるわけだけど…。

読んだ

media-modalでアス比がおかしい

fix(components/media_modal): Aspect ratio by sorin-davidoi · Pull Request #4128 · tootsuite/mastodon

縦に長い画像が縮小される時、また縦横比の異なる画像を合わせて添付したときに、正しくない縦横比で表示されてしまう件。これまでは width: auto でいけていたのが、Swipeable views を導入してしまったので親要素の幅を統一しないといけない。で中の画像を object-fit: contain で縮小することに。

/about の刷新とTLプレビュー

Redesign the landing page, mount public timeline on it by Gargron · Pull Request #4122 · tootsuite/mastodon

:don: 170708

Mastodon

書いた

regression: media_attachmentのtext_urlがおかしい

Fix JSON serialization of media_attachment (regression from #4090) by unarist · Pull Request #4111 · tootsuite/mastodon · GitHub

わかりやすいところでは投稿時に自動挿入されるリンクがこれ。ついでに外部から来た画像はshortcodeないので除外。

regression: ピン留めされた通知カラムの初回読み込みが発生しない

Fix first loading of notifications when the column is pinned (regression from #3879) by unarist · Pull Request #4114 · tootsuite/mastodon · GitHub

これまで UI の componentWillMount で読み込んでいたが、reducers/notificationsを遅延読み込みするにあたって変更された箇所。ルート定義に渡すPromiseに挟んだものの、ピン留めされたカラムは ColumnsArea の方で読み込まれているので漏れていた。

他のカラムがcomponentDidMountでrefreshしてるのになぜhomeとnotificationsは、というのはつなぎっぱなしのhome or ポーリングがあるから。のでasync-components.jsに突っ込んでみたが、これはこれで微妙な感じ。

読んだ

Swipable Views

Swipeable views by sorin-davidoi · Pull Request #4105 · tootsuite/mastodon · GitHub

念願の、スワイプ途中が見える感じのやつ。ただしiOS9で試すと .react-swipeable-view-container > * { height: 100% } 足す必要があった。やっぱりiOS9だけなんだろうか。しかしreact-swipeable-view側で生成されてるclassなしの要素だから、直すならそっちに投げる感じかなあ。

regression: ルートのパラメータだけ変わった時に反映されない

fix: Rerender Bundle on route change by sorin-davidoi · Pull Request #4120 · tootsuite/mastodon

同じように直して、後でpushするかーって思ってたら先を越された。React的には単に関数を渡している扱いだったので、まさかインスタンスフィールドを通してそのメソッドの結果が変わるとは思っていなかった、というところだろうか。

パラメータが変化するたびにラムダ式作るのもいかがなものだろう、Reactらしい方法で渡した方がいいのではという気はするけど、まあここはそんなに頑張らなくてもいいか。

/aboutの刷新、埋め込みタイムライン

Redesign the landing page, mount public timeline on it by Gargron · Pull Request #4122 · tootsuite/mastodon

というか、この変更に至る経緯を眺めていた。

--- a/app/javascript/mastodon/store/configureStore.js
+++ b/app/javascript/mastodon/store/configureStore.js
@@ -2,10 +2,10 @@ import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import appReducer, { createReducer } from '../reducers';
 import { hydrateStoreLazy } from '../actions/store';
-import { hydrateAction } from '../containers/mastodon';
 import loadingBarMiddleware from '../middleware/loading_bar';
 import errorsMiddleware from '../middleware/errors';
 import soundsMiddleware from '../middleware/sounds';
+import { hydrateAction } from '../containers/mastodon';
 
 export default function configureStore() {
   const store = createStore(appReducer, compose(applyMiddleware(

この configureStore() はこれまで /containers/mastodon.js からimportされていたのだけど、今回別のエントリポイントを作ってそこからも呼び出そうとした。ら、何故か configureStore() に突入した時点で loadingBarMiddleware が読み込まれていない。

で、hydrateAction をimportする問題の行。これが走ったところで /containers/mastodon.js が読み込まれ、初期化式が評価され…configureStore() が呼び出される。ああなるほどね。

どっちがわかりやすいのかわからないがブログの方にもこれで一記事書いた。 http://unarist.hatenablog.com/entry/2017/07/09/041744

件のimportを最後に持ってくることでエラーにならないようにしたようだけど、いや、やっぱり互いにimportしあうのは罠でしょう…。

:don: 170707

Mastodon

読んだ

regression: JSON->AMS諸々

Refactor JSON templates to be generated with ActiveModelSerializers instead of Rabl by Gargron · Pull Request #4090 · tootsuite/mastodon

これに関して、バグがぞろぞろと。

Add recursive object support to API response by ykzts · Pull Request #4095 · tootsuite/mastodon

/status/reblog/account とか、入れ子になったオブジェクトで深い階層が出力されていなかった。

Fix notifications including wrong status in JSON by Gargron · Pull Request #4097 · tootsuite/mastodon

Notificationに結合するstatusが適当だった。

Restore streaming API output format by Gargron · Pull Request #4100 · tootsuite/mastodon

これまでRedisに突っ込むときには「JSONにしたpayloadを含んだJSON」だったのを「payloadを含んだJSON」に変えてしまったので、云々かんぬん。Streamingが死んでた。

APIレスポンスとかほとんどテストないからなあ…。

画像の拡大表示でoriginalを読み込むまでblurかける件

まず、こんなblurだけでは読み込み状況がわかりにくいという話があり、

Blurred image previews remove loading feedback · Issue #4060 · tootsuite/mastodon · GitHub

じゃあblur強くするかっていうPRが出ていた。

Add more blur to image previews by nolanlawson · Pull Request #4102 · tootsuite/mastodon · GitHub

いや…ないっしょ。

スマホとかだと画面も小さいんだからそんなに解像度いらない場合だってあるのに、originalの読み込みが完了するまでこんなにブラーかけられては流石にかなわん。プログレスバーとかぐるぐるとかの方がいいんじゃないかなあ。

TLで出てきた別の意見としては、今はsmall(長辺400px)とoriginal(長辺1280px)しかないので、mediumがあってもいいのでは、とか。ファイルサイズ的には最大8MBなので、もうちょっと下のランクがあるのは確かにアリ。でもストレージがさらに圧迫されるとか、いつ処理するのとか…。

Set default From address in config

Set default From address in config by akihikodaki · Pull Request #3756 · tootsuite/mastodon

production環境でも送信元メールアドレスにデフォルト値が存在していたのをやめた＝設定していないと例外吐く。実際これに引っかかった人がいたので、説得力がある。

気になった話

  • HTLのfeedを飛ばしてもDBにフォールバックするかと思いきや、最終ログインから2週間経っていなければ再生成もフォールバックも発生しない。(following.any? || statuses.any?) && feed.empty? ぐらいで絞り込めばやってもいい気もする。
  • Pawooのユーザーをリモートフォローしたらtoot（画像付きのだけ？）がどっと流れてきた、らしい。新しい番号が振られ、HTLの頭に流れ込んできたから驚いたという話。
  • リモートのtootが鯖によってNSFWついてたりついてなかったり。結局はadminが後からNSFW設定したために、その前に受け取ったかどうかで違いが出たのでは、という結論に。
  • /api/v1/accounts/:id はクライアント認証だけでいけるっぽいけど、ユーザー名から検索するには完全一致であっても /api/v1/accounts/search を使うことになり、こっちはユーザー認証必要っていうあれ。