羊たちの溜まり場

◆省エネ省スペ小説ページ(HTML+JavaScript(jQuery3.6.0)+ちょっぴりCSS)

テキストファイルを読み込んで、本文内の改行を反映させたうえでWEB上に表示
　さらに作品タイトル、作品本文、コメント欄、ナビゲーションリンク欄をDOM操作で都度書き換えて再利用する小説ページ
　ファイルは全部同じフォルダに突っ込んでいるものと想定して記述しています
　HTML内の,JS内の// ……,/ * …… */ は説明用のコメントです

＊ HTML ＊
 <a onclick="contentSelect(1);">コンテンツ１</a> <a onclick="contentSelect(2);">コンテンツ２</a>  <div id="content2_top"> <p id="content2_title" style="font-weight:bold; margin-bottom:10px;">作品タイトル欄(書き換え予定地1)</p> <p id="content2" style="white-space: pre-wrap; width:400px;">作品本文欄(書き換え予定地2)</p> <p id="content2_comment">コメント欄(書き換え予定地3)</p> <p id="content2_navigation">ナビゲーションリンク欄(書き換え予定地4)</p> </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="sample2.js"></script>      

＊ JS(sample2.js) ＊
const titleArea = document.getElementById("content2_title"); const contentArea = $("#content2"); const commentArea = document.getElementById("content2_comment"); const navigationArea = document.getElementById("content2_navigation"); // タイトル欄、本文欄、コメント欄、ナビゲーション欄のidを取得してそれぞれ定数に格納 // 以後、各idをtitleAreaなどの定数名で呼び出せる function contentSelect(num) { switch(num) { case 1: $(function() { contentArea.load("sample1.txt"); // テキストファイルを読み込んで表示する(jQuery) // id名content2(予定地2)の要素内にsample1.txtの内容を表示 }); titleArea.textContent = '１話'; // id:content2_title(予定地1)の要素内のテキストを書き換える commentArea.textContent = '１話のコメント欄'; // id:content2_comment(予定地3)の要素内のテキストを書き換える navigationArea.innerHTML = '<a href="#content2_top" onclick="contentSelect(2)";>すすむ</a>'; // id:content2_navigation(予定地4)の要素内のHTMLを書き換える(注) // クリックしたとき関数contentSelectのcase2を実行する /* onclickだけでも切り替わるけどスクロールバーの位置が引き継がれてしまうので、クリックと同時にid:content2_topの場所(コンテンツ最上部)に飛ぶようにする */ break; case 2: $(function() { contentArea.load("sample2.txt"); // id名content2の要素内にsample2.txtの内容を表示 }); titleArea.textContent = '２話'; commentArea.textContent = '２話のコメント欄'; navigationArea.innerHTML = '<a href="#content2_top" onclick="contentSelect(1);">もどる</a>'; break; } }
＊　TXTファイル(sample1.txt,拙作) ＊
　目を覚ますと、あなたは薄暗い森の中にいました。　鬱蒼と茂った枝が幾重にも覆いかぶさっているせいで、今が昼なのか、夜なのかもわかりません。そのうえ霧まで出ていて、空気は冷たく、湿っぽく、かすかに苔の臭いがします。　肌寒さを感じる中、あなたは遠くの方で、ドラムやシンバルが鳴っているのに気づきました。　よそ行きの少し綺麗な服と、五体満足の肢体のほかに、あなたの持っているものは何もありません。あの音を逃せば、きっとあなたは、この霧深い樹海の中をいつまでもさまようことでしょう。　あなたは音の鳴る方へ急ぎました。　途中、苔に足を取られながらも、木々の間を進んでいくと、次第に霧が深まってきました。もう視界はほとんど真っ白で、何も見えません。　あなたは、音だけを頼りに歩きました。　おなかに響く太鼓の音は、どんどん近づいてきます。気づけば、木々が少しひらけてきたように感じます。きっと、鼓笛隊との対面はもうすぐでしょう。あなたは歩く足を速めました。　　木々の絶え間に石畳が見えました。樹海の終わりを感じて、あなたは思わず駆け出しました。　霧が薄まり、ぱっと視界が広がりました。と同時に、うるさいほど響いていたマーチの音は、ぴたりと止みました。　あなたは辺りを見回しました。そこは石畳の広場のようでした。人気はまるでありません。あなたが一人、ぽつんとたたずんでいるだけです。さっきまで太鼓や笛を奏でていた鼓笛隊の姿は、どこにもありません。息をひそめ、耳を澄ませても、楽器の音どころか、足音一つ聞こえません。耳が痛くなるほどの静寂の中で、あなたはしばらく待ちましたが、鼓笛隊が演奏を再開することはありませんでした。　あなたは首を傾げました。確かにあなたの耳には、ドラムやシンバルの音が聞こえていました。それを鳴らしていた鼓笛隊は、一体どこへ消えたのでしょう。そもそも、鼓笛隊は、本当にいたのでしょうか？　いいえ、きっと、彼らはさっきまでそこにいて、あなたの知らないうちに、さっと隠れてしまっただけなのです。そうでなければ、おかしいのです。　鼓笛隊を探して、広場をうろうろしていると、あなたは掲示板を見つけることができました。随分長いこと手入れもされずに野ざらしになっていたような代物です。木でできた掲示板はほとんど朽ちており、かろうじて板に留められている紙切れが、生ぬるい風に煽られてはためいていました。その紙切れ――どうやら地図のようです――によると、ここが遊園地らしいとわかりました。左手に見えるあのアーチをくぐると、観覧車やお城のあるエリアへと移動できるようです。他には……と、あなたが熱心に地図を見ていたその時です。　誰かの声がしました。あなたは振り返りました。いつからそこにいたのか、男の子が立っています。あなたと同じくらいの年頃です。あなたを見ると、彼はほっとした様子で、表情を和らげました。　彼はシンジと名乗りました。彼もまたあなたと同じく、この場所へ、わけのわからないままたどり着いたのだそうです。「いやあ、人に会えてよかったよ。ずっと一人で、ちょっと心細かったからさ。……ところで、お前も川の方から来たの？」　あなたは首を振り、自分の来た道を示そうとしました。ですが、そこに、あなたの歩いてきた、霧深い森はありませんでした。広場の果てには、鉄格子のような柵があるだけで、その向こう側には高い壁がそびえていました。　彼の来た方もどうやら同じらしく、シンジは苦い顔をしていました。「……気味悪ィな、ここ。早く行こうぜ」　あなたは力強く頷きました。

※JavaScriptでHTMLを操作する場合の注意点：ユーザーが入力したデータを取得して表示したりする場合は悪意あるスクリプトを埋め込まれるリスクがあるため、エスケープ処理や入力値の制限などで対策が必要
textContentではタグが利かないのでinnerHTMLよりは比較的安全

仕様上の問題
問題点１：テキストファイル内のタグは動作しないので、作品本文に<ruby>タグや<b>タグなどは使えない
問題点２：目次ページと作品ページを分けちゃうと動かない
まあ上部や下部にメニューを固定するタイプのレイアウトにするとか、作品の表示にモーダルウィンドウを使うとかすればまあ………

2022.08.11.公開

＊　動作サンプル　＊
コンテンツ１コンテンツ２

作品タイトル欄(書き換え予定地1)

作品本文欄(書き換え予定地2)

コメント欄(書き換え予定地3)

ナビゲーションリンク欄(書き換え予定地4)

＞＞ TOP