5ちゃんねる風掲示板

Home > Practice > 5ちゃんねる風掲示板
5ch風掲示板のメインビジュアル

プログラム概要

レスポンシブ対応の5ちゃんねる風掲示板を制作いたしました。
レイアウトは専用ブラウザのJaneStyleに寄せています。
1行1レスとして構成されたdatファイルを元に、PHP・JSで加工して掲示板形式で出力しています。
レスアンカーやURLのリンク化などの機能を実装しつつ、投稿はajaxを利用して画面遷移をせずに、反映されるように組んでおります。

機能の紹介

レスアンカー

[>>〇〇〇] の〇を数字に置き換えると、そのレス番号へのaタグが生成されます。
PC：アンカーにホバーするとレスの内容が表示され、クリックで該当レスまでスクロールします。
SP：アンカーをタップするとレスの内容が表示されます。
5ちゃんねる風掲示板_レスアンカーのサンプル画像

範囲レスアンカー

レスアンカーの範囲指定バージョンです。
[>>〇〇〇-〇〇〇] の〇を数字に置き換えると、指定した範囲の先頭番号へのaタグが生成されます。
また、ホバー・タップで指定した範囲のレスの内容が表示されます。
5ちゃんねる風掲示板_範囲レスアンカーのサンプル画像

ID重複の抽出

同じIDで複数回投稿すると、投稿内容右上にあるIDに投稿回数とaタグが生成され、
aタグに ホバー・タップすると投稿一覧が表示されます。
5ちゃんねる風掲示板_ID重複のサンプル画像

URLのリンク化

http・https また、それぞれのh抜きのURLを判別しaタグに置き換えリンク化します。
5ちゃんねる風掲示板_URLリンク化のサンプル画像

タグのHTMLエンティティ化

タグのHTMLエンティティ化
投稿内容にタグが含まれる場合はHTMLエンティティ化されます。
5ちゃんねる風掲示板_タグのHTMLエンティティ化のサンプル画像

制作について

制作目的

会社の業務でajaxという便利な仕組みがあることを知り、自分でも実装できるようにと、動画講座にて勉強を始めました。
PHPのクラス構文・ajaxの使い方・簡易掲示板の作成方法について学び、ある程度理解することができましたので、簡易掲示板から機能を拡張しつつ、画面遷移無しでのPOST送信を行う練習としてアウトプットしました。

5ちゃんねる風掲示板_講座で作った掲示板の画像
簡易掲示板のデモ画像
工夫したところ
ajaxで取得したデータをJavaScriptで掲示板形式で出力する際に、innerHTML()などのタグごと出力できるメソッドの場合は、クロスサイトスクリプティングの危険性があるとのことで、createElement()とcreateTextNode()で地道に組み立てることにしました。
createTextNode()を利用すると、事前にエスケープされていた文字列が更にエスケープされてしまうという、二重エスケープ問題に直面しましたが、Unicode文字に置換したうえでテキストを生成することで、何とか回避することができ、目的を達成することができました。

■二重エスケープについて
対象文字列：&’”<>

■参考例
一度目のエスケープ：& → &amp;
二度目のエスケープ：&amp; → &amp;amp;
開発環境
フロントエンド
言語： HTML5 CSS3, JavaScript
ライブラリ： jQuery 3系
バックエンド
言語： PHP 7.4
インフラ
ローカル環境： XAMPP, Apache
エディタ / ツール
Visual Studio Code
製作期間
2020年8月～2020年10月 (2カ月)