Contents
本日のハイライト
本日もProcomの開発は大きな進捗をみせました。ユーザーページの表示制御において、自分以外のページでは「編集ボタン」や「保存ボタン」など、一部のUI要素を非表示にするよう改善しました。
これは実際のユーザー別に対応する、簡単でありながらもログイン・セッションアイデンティティにも依播する重要な作り込みとなっており、Procomの保守性と利便性を合わせる完成度の高い部分です。
本日の主な改善ポイント
１. JavaScript側の正確なログイン判定
これまでは、/sessionでのログイン状態の判定は行われていたものの、それが「自分のページ」であるかどうかの判定が単純に「ログインしているかどうか」になっており、それだけで、たとえば「他人のページ」にアクセスした場合にも、ログインしていれば編集要素が表示される問題がありました。
これを正したのが、JavaScript側で次のようなロジックを追加したことです:
const currentUid = decodeURIComponent(window.location.pathname.split('/').pop());
const isOwnPage = data.uid === currentUid;この判定を利用して、他人のページでは編集系の要素を表示しないようにしたのです。
２. updateAuthUI()の修正
「ログインしている」から「それが自分のページかどうか」まで判定範囲を広げたことで、authFormsの表示/非表示だけでなく、其他の要素の制御も同時に行いました。
if (isOwnPage) {
editSection?.style.display = 'block';
photoUpload?.style.display = 'block';
eventForm?.style.display = 'block';
// その他のUIも表示
} else {
editSection?.style.display = 'none';
photoUpload?.style.display = 'none';
eventForm?.style.display = 'none';
// 非表示化
}これによって、他人のページでは不用要なコントロールや操作が前面に出なくなり、ユーザー体験の向上につながりました。
バグ回避
本日の修正はUI上の要素だけに留まらず、保守ロジックの元である「自分のページかどうか」の解析を統一させている点も見逃せません。
これにより、ログインしている状態でも、たとえば自分が作成した「フレアファイブ」などの架空の他人ページを開いた際に、不要な編集や操作が表示される事態を防ぐことができるようになりました。
この対策は、以前の不具合の根本原因を完全に捨て、進化した設計思想に基づくものです。
CSS側との連携
JavaScript側のbody.classList.toggle('own-page', isOwnPage);と組み合わせて、CSS側で
.auth-only {
display: none;
}
body.own-page .auth-only {
display: block;
}のように制御することで、スマートな表示切り替えも実現できるようになりました。
これは…
- DOMを設定するためのJavaScript
- UI表示の制御をするCSS
が本条的に分離されている、モダンサイトにおける統一した構成を保ち、一覧表示や検索力の向上も期待できるための重要な履歴と言えます。
まとめ
本日は「自分のページだけ、操作や編集ができる」ことを完全にクリアする作り込みが完成しました。
Procomの完成度は大きく向上し、今後の外部ユーザーから見た表示バグも減らすことに繋がりました。
明日以降は、これらの変更を基に、他人のページの検索やブックマーク機能、そして商用利用に向けたUIのまとめなどを実装していく計画です。
Procomは、このように毎日確実な修正を続ける中で、実用に耐えうるSNSプラットフォームへと成長を続けています。明日のアップデートもお楽しみに。
