3/27 mochott を使ってみた感想メモ
Table of Contents
感想メモ
全般
デザイン
デザインが良い!特に、ライトモードの色使いが好き
ダークモードにはやや違和感あり。一部のシステムUIで白文字が薄く、読みづらいかも?
新規登録/ログイン
PDS
独自のPDSを運営している!ので、わざわざBluesky経由で新規登録しなくて済む
ハンドルは
[foobar].tokimeki.socialになるtokimeki.socialからmochott.siteを使用する場合も、ログイン時に認可が必要現状、PDSからアカウントを削除する手段はなさそう?
Bluesky公式PDS実装のWeb UIではrevokeしかできないため
トップページ
現状は「おすすめ」「トレンド」「Tangledドキュメント」「新着記事」が表示される
「おすすめ」はおそらく運営者によるピックアップ
「トレンド」は何らかの指標に基づくランキングっぽい
新着記事がページ下部にあり、トップを開いたときに目に入りにくいのが良い
新着がちょっとアレな記事が埋め尽くされていると、それだけでイメージが悪くなるので
記事ページ
レイアウト
Leafletなどの海外産Atmosphereブログと比べて、記事幅や行間が日本語向けに調整されていて読みやすい
ヘッダー
ヘッダーは常時固定。半透明なのがめずらしい
個人的には、PC版の記事ページではスクロール時にヘッダーが消えるほうが好み
フォロー
ユーザーをフォローできる
これは
app.bsky.graph.followとは別扱いマイクロブログと記事ではフォローしたい対象が異なるので、この仕様のほうが好き
フォローするとタイムラインに記事が流れるようになり、新着記事の通知も受け取れる
通報機能
通知機能あり
Bluesky開発者ガイドラインに準拠。えらすぎ
いいねとブックマーク
両者の扱いはBlueskyと同様で、いいねは
site.mochott.likeに保存されるので公開情報ブックマークは非公開で、ダッシュボードであとから一覧確認できる
その他
Blueskyで記事が引用されると、その投稿が記事ページ下部に表示される
mochott独自のコメント欄はなさそう?
mochottユーザー ≒ blueskyユーザーなら問題ないかもしれない
mochottだけを使うユーザーが増えると、記事へのコメント手段がなくて困るかも
記事作成/編集ページ
編集方法をモダン/クラシック/マークダウンから選べる
マークダウンエディタにはリアルタイムプレビューがなく、見た目を確認したい場合はモダンかクラシックへ切り替える必要がある
モダン/クラシックがメインで、マークダウンは補助的な位置づけに見える
おそらくTiptapを使っており、MarkdownはGFM準拠と思われる
LexiconもTiptap JSONっぽい構造をしている
下書き
下書きはPDSやLocal StorageではなくAppViewに保存される
一度公開した記事を下書きに戻すこともできる
「下書き保存」を押下してもUI上のリアクショ、ンがない(ようにみえる)ので、少し不安になる
カテゴリ
あらかじめ用意されたカテゴリを任意で選択できる
カテゴリーとミニサイトは単一選択だが、選択後の見た目がinput chipsなので、複数選択できると誤解されそう
モダン/クラシックエディタ
コマンドボックス
/でコマンドボックスを開けるコマンドボックスが半透明なので、背景の文字と重なると読みにくいことがある
見出し
モダンでは見出しがh2から始まるが、クラシックではh1も使える
HTML上では記事タイトルが h1 になるため、h1の重複を気にするユーザーは「見出し1」を使わないほうがよさそう
リンク
クラシックエディタ上部のリンクアイコンは、テキストを選択した状態で押さないと意味がない
未選択のでもクリックできて
window.promptが出るので、ユーザーが混乱するかも
脚注
脚注を挿入できる
脚注は
/コマンドからしか挿入できず、その/コマンドは空行でしか使えない。そのため「文を書く→末尾に注釈を書く」の流れがやりづらい
マークダウンエディタ
コメント
<!-- Comments... -->のようなコメントは使えない
リンク
GFM準拠のため、URLは
<>で囲わなくてもリンクになる
文字色
文字色は変更できない
改行
<br>は使えない
段落区切り
マークダウンエディタで2つ以上の空段落を入れたい場合は、空白の実体参照
を使う必要がある
テーブル
<table>タグは使えないそのため、セル連結もできない
セルが結合済みの表をモダンエディタに直接コピペすれば一応使えるが、一度でもマークダウンエディタに切り替えると結合は解除される
HTML
<pre>, <div>, <span>, <mark>など、ほとんどのHTMLタグは使えない<details>は<div data-details="" data-summary="">で代用できる
エスケープ
特殊文字は
\でエスケープできない表示したい場合はインラインブロックを使う必要がある
ミニサイト
デザインタイプを「ブログ」「ドキュメント」「ポートフォリオ」から選んでミニサイトを作れる
ブログ
時系列で記事を表示するブログ形式
正直、通常のmochottブログとの違いや利点があまりわからなかった
ドキュメント
サイドバーナビ付きのドキュメント形式
これ好き!
Zenn Book のような、連続性のあるシリーズ連載に向いてそう
ポートフォリオ
作品をグリッドで表示するポートフォリオ形式
現状だとポートフォリオとして使うには厳しそう
細かいレイアウト調整や、一部の他Lexicon表示などに対応すれば化けるかもしれない
導線/UI
ミニサイトページの「占有感」がやや薄いと感じた
たとえばZennでは、BooksのChapter内ではヘッダーやフッターを出さず、左上のサイトロゴだけを残すことで「占有感」を演出している
mochottのミニサイトではヘッダーに「カテゴリー」「standard.site」「記事を検索」など他人のページへの導線が表示されるため、どうしても「共有スペース感」が前面に出てる
エラーメッセージ
スラッグに日本語を入れてミニサイトを作成すると400 Bad Requestになり、「エラーが発生しました」とだけ表示される
何が問題だったのかがユーザーに伝わらない
踏んだバグ
新規登録/ログイン
PDSへの新規登録完了後のリダイレクトで
"500 OAuth callback failed"のエラー画面に遷移した
トップページ
ウィンドウの幅が狭いと「タイムライン」「カテゴリー」「standard.site」が検索ウィンドウの後ろに隠れて見えなくなる
記事ページ
モダン/クラシックでの見た目と、記事ページの表示が一致しておらず、WYSIWYGになってない要素がいくつかある
たとえば、編集画面では
<p>のmarginが上下8pxなのに、閲覧画面では上下24pxになっている、など
タスクリストで、チェックボックスと本文が改行され2行になってしまう
新規作成/編集ページ
タグに日本語を入力してEnterキーを押すと、入力したテキストが消えずに残る
アルファベットの場合は正常に消える
"editorMode":"markdown"の状態でダッシュボードから下書きを開くと、本文が表示されない一度モダン/クラシックエディタを開いてからマークダウンに戻ると表示されるようになる
スラッグとコンテンツ警告が下書き保存されない
公開状態から下書きに戻した場合も消えてしまう
モダン/クラシックエディタ
ダークモード時、
/コマンドボックス内のアイコンが黒塗りで表示されるマークダウンで使えない特殊文字をモダン/クラシックエディタに入力したあと、マークダウンエディタに切り替えると文字が消える
例: モダンで
<br>を入力 → マークダウンへ切り替え → 再度モダンへ戻ると消えているなお、マークダウンエディタに切り替えずにそのまま投稿すれば、
<br>なども投稿は可能
マークダウンエディタ
マークダウンエディタでは
/コマンドが使用えないが、"または「/」でコマンド…"というplaceholderが表示されているモダン/クラシックでテーブルを作成し、中身が空のままマークダウンに切り替えると、セル内が空白の実体参照
で埋まってしまうモダン/クラシックでコールアウト/トグルを作成してからマークダウンに切り替えると、中の文章が外側に飛び出す
数式ブロック/インライン数式を入力したあとにマークダウンエディタへ切り替えると、数式が消える
インライン数式を編集する際、1文字入力した時点で確定してしまう
新規追加時は問題ない
マークダウンエディタ上の改行はモダン/クラシックエディタには反映されるが、投稿後の記事ページには反映されない
設定ページ
tokimeki.socialアカウントのプロフィールを編集できます。この設定はtokimekiエコシステム全体で共有されます。
"AT Protocolエコシステム" もしくは "Atmosphereエコシステム" の誤り?
Software Developer - ShareSwitch https://chromewebstore.google.com/detail/shareswitch/llfcobjpmnnnccbofmkhlfdbefmceloi