のえる

現在、MastodonのWebUIで、投稿の公開範囲の表示と、ブーストボタンに関する変更を本家に提案しています。まだ調整中です。
github.com/tootsuite/mastodon/
github.com/tootsuite/mastodon/

画像中、左側は投稿した本人が見た場合、右側は他人が見た場合です。

・投稿の右上、時間のとなりに公開範囲を表すアイコンが追加されます。title要素付きで、カーソルを重ねるとTooltipで『未収載』などの説明がでます。

・当初、公開の地球儀マークは省略する方向で考えていたのですが、要請を受けて追加しています。

・ブーストボタンがフォロワー限定やダイレクトの時に違うアイコンになっていたのですが、ブーストアイコンから変化しないように変更しました。

・自分のフォロワー限定投稿は、フォロワー限定としてブーストできるのですが、これまでボタンが押せず、メニューにある別の場所からしか実行できなかったのを、普通にボタンを押してブーストできるようにしました。本人はボタンが有効で、他人だと無効になるようになっています。

詳細表示で重複しないよう整理しました。

1
のえる

公開の地球儀マークは、表示した方が良いか、省いた方が良いか、結論が出ていません。

LTLやFTLではすべてが公開投稿なので、すべての投稿に地球儀マークが追加されることになります。glitch-socなどで見慣れている人は違和感がないかと思いますが、初めて見ると『なんか増えてる』感があって、私はまだ違和感があります。

未収載・フォロワー限定・ダイレクトだけアイコンが出ている方が目立って良いような気もするのですが、公開もアイコンが表示されていた方が一貫性がありますし、スクリーンリーダーなど視覚情報以外を読み取る場面などで地球儀アイコンのtitle要素に説明が（翻訳付きで）入ることは大きいかなと思います。

いまのところ、地球儀アイコンありで進んでいます。

ブーストボタンは、これまでフォロワー限定とダイレクトで見た目が変化していたので、結構これをアテにして識別していたと思います。表示も大きいから見やすいですしね。

他方で、フォロワー限定だと鍵アイコンになるのに、自分の投稿はブーストできたりするので、表示と機能が一致しなくなっていました。

ここは、今回思い切って整理してみました。

1
のえる

投稿は、

(1) WebUIのタイムライン
(2) WebUIの詳細表示
(3) 公開ページのタイムライン
(4) 公開ページの詳細表示

があって、割と実装がバラバラだったりしてます。

各要素にclass指定がされているので、それを利用してCSSで表示をカスタマイズしてテーマを作成したりするのですが、公開範囲を表すclassがついていたりついていなかったりしていました。

これ、もの凄く不便なので、それぞれに不足しているものを追加しています。

.status-public
.status-unlisted
.status-private
.status-direct

.detailed-status-public
.detailed-status-unlisted
.detailed-status-private
.detailed-status-direct

のついたdivで囲まれるように統一しましたので、マージされた場合は活用してください。（マージされなかったら別PRで出します）

CSSだけで、背景色を変えたり、ブーストボタンのアイコンを差し替えたりできます。

1
のえる
フォロー

本提案に先立ち、 @mayaeh さんが本家にプルリクエスト（実装提案）を行っているのですが、こいつはすげークレバーです。
github.com/tootsuite/mastodon/

私のアプローチとは逆で、ブーストボタンで公開範囲がわかるように、未収載投稿のブーストボタンを開いた鍵アイコンに変更する、という解決方法です。

コード量が極めて少なく、ボタンと言うこともあって大きく表示されるので視認性が高く、画面上に追加の要素が増えないというメリットがあります。

ブーストアイコンではないものを使ってブースト機能を表現する点が直感的で無いという問題がありますが、なんか良い方法ないですかね……。（慣れるという手もある）

· · Web · 1 · 4 · 3
のえる

いずれにせよ、2017年のはやいうちから、ずーっとissueが立っていて、これまで解決が行われてこなかった問題です。

どんな形であれ、きちんと提案が行われ、検討され、結論を出すサイクルに乗ってくれるといいなと思っています。

1
のえる

ちなみに、CSSへの対応が入っているのは、最初はアイコン追加を全部CSSで実装していたからです。

そしたら、オールCSSじゃなくて、title属性のついたfontawesomeの<i>要素使いなよって話になったので、全部やり直したんだよw

1
のえる

もうひとつ。プルリク中で指摘がありましたが、実はFedibirdのオリジナルは、右上の日付の右横にアイコンがありました。

有効期限付き投稿の時計マークを表示したくて、邪魔だから左側に移動したんだ。ごめんw

1
のえる

先に紹介した、投稿の公開範囲の表示と、ブーストボタンに関する変更がマージされました。
github.com/tootsuite/mastodon/
github.com/tootsuite/mastodon/

どのように変わるかは、こちらを参照してください。
fedibird.com/@noellabo/1043962

投稿すべてに公開範囲を表すアイコンがつくのですが、私は公開投稿に地球儀マークが表示されるのちょっとウルサいな、と思っているので、 ではCSSで非表示にしています。
.status__visibility-icon .fa-globe {display: none;}

また、ブーストボタンのアイコン画像を変更しないように修正したことにより、これまでよりも若干視認しにくくなっています。

ボタンが無効の場合は少し薄く表示されるのですが、あまり変わらないのでわかりづらいため、ここもCSSで修正を行いました。
.icon-button.disabled {opacity: 0.4;}

いっそ消しちゃうならこれ。
.icon-button.disabled {display: none;}

1
のえる

変化の是非についてはできるだけ広く議論して、必要とあらば、みなさんで今回の内容を修正するプルリクエストを作成してください。

なお、無効化されたボタンの濃淡表現については、今回のプルリクエストに含まれる問題ではありません。

アクションバーの無効化されたボタンを表現するCSSはこれです。
github.com/tootsuite/mastodon/

この13%暗くするという変更は、2年前のこのプルリクエストで行われました。
github.com/tootsuite/mastodon/
アクセシビリティ改善のためにハイコントラストテーマを導入することとなった変更ですので、判別しづらいとなれば本末転倒です。この流れを引き継いで、プルリクエストすると良いのではないかと思います。

公開投稿への地球儀表示は、一貫性や、アクセシビリティ改善に役立つ側面を考えると、本家としては表示が妥当と思います。

ちなみにこれが地球儀アイコンを追加したコミット（差分）です。これをrevertする形にすれば、非表示ではなく、元から取り除くことができます。
a77ba21af95dfbd8e44e68fc152e667f2df98e57

0
ログインして会話に参加
Fedibird

様々な目的に使える、日本の汎用マストドンサーバーです。安定した利用環境と、多数の独自機能を提供しています。

トレンドタグ

リソース

開発者向け

Mastodon とは？

fedibird.com

さらに…