コードの折り返し表示を切り替える便利な方法 - jQueryを使用して実装

Web ページにソース コードを表示する場合は、読みやすさとアクセシビリティの両方を考慮することが重要です。 この記事では、jQuery を使用してコードの折り返し表示を切り替える方法を紹介します。

コードが画面内に収まりきらない場合でも、スクロールバーを表示せずにコードを見ることができます。さらに、実際のコード例とともに、どのようにしてこの機能を実装するかをかんたんに解説します。

今回は、”折り返し”についての考察です。

普段、ブログを書くときはあまり意識しませんが、カスタマイズなどのソースコード（HTML とか、CSS とか）を載せるとき、コードっぽく表示したいのでpre タグというものを使い、言語ごとに色分けなどしているのですが、pre タグといういわばテキストボックスが出現することによって、作成する側にとっては画面の表示がややこしくなります。

コードも他の文と同じように、ふつうに書いてもいいのでしょうが、なんとなく、ソースコードっぽくしたほうが見た目もカッコイイし、読む人にとってはわかりやすいのかなぁ、などと考えてなるべく手間をかけてコードはコード風な表示をするように心がけています。

やっかい？な横スクロールバー

それで、ちょっとした悩みどころになるのが、そのとき横に長い1文などが改行せずそのままだと右に飛び出して見切れ、pre 表記だとスクロールバーが出現して、右を見たい場合はそのスクロールバーをマウスで横に動かさないと字が見えなかったりするのですが、これってちょっと使いづらいよなぁ…？といつも思っていました。

なので、最初に考えたのは、CSS とかをいじって、この飛び出すやつを端で折り返す表示に変えられないかな、と思いました。

↑ただこのコードだとエディタどおりにいかず、、
わたしのブログの環境だとこう↷なってしまうんです。…あ、でも、こういうことって、よくありませんか…？(∩_∩；)P

云わば細長い腸詰めのような物が、ぶらりと顔のまん中からぶら下っているのである。
　五十歳を越えた内供は、沙弥の昔から、内道場供奉の職に陞った今日まで、内心では始終この鼻を苦に病んで来た。

一息いれましょう~🍵( '-' 🍵 )ｵﾁｬﾝ

いろいろ試した結果、『Fukuro Press』さんのこちらの記事にたどり着き、

fukuro-press.com

以下のようなコード表記に変更したところ、私のブログでも希望していた結果がようやく得られました。

メリーポピンズの歌に｢世界で一番長い言葉はsupercalifragilisticexpialidocious｣という歌詞がありますが、この言葉は造語です。実在の単語ではfloccinaucinihilipilificationが最長で、意味は｢法的に無価値なものと見なすこと｣だそうです。

肝となるのは white-space、word-wrap、overflow というプロパティで。

各CSSプロパティは次のような役割を持ちます。

white-spaceプロパティ

自動改行をするか、改行やタブや複数の空白を１つの空白にするかなどを指定するプロパティ。「pre-wrap」を指定すると改行をそのまま表示しながら自動改行もできる

word-wrap

単語の途中で改行するか指定するプロパティ。「break-word」を指定すると文字列が長すぎてボックスに収まらないときに単語の途中でも改行される

overflowプロパティ

要素内に内容が入りきらない場合にはみ出た部分の表示の仕方を指定するプロパティ。white-space やword-wrap に対応していないブラウザでスクロールバーが表示されるようここでは「auto」を指定

引用：preタグ内のソースコードを画面端で折り返す方法 | Fukuro Press

たとえばword-wrap プロパティには以下の2つの値があります。 

• normal : 単語の途中で改行せず、必要に応じて表示範囲を拡大
• break-word : 単語の途中で改行

主に英語の話ですが（コードだからそれでいいのか）、normal だと長い単語のばあい、枠をはみ出す可能性がある、ってことです。それだとおかしいので、Fukuro Press さんのコードでは、break-word を指定しているのですね。

さらに探索をつづけ、もっとも望んだ仕様に出逢えました。これです、わたしがやりたかったのは笑

www.will3in.co.jp

下のコードは、こちら『フロントエンドエンジニアのblog』さんの2015年の記事をヒントに手直しさせていただきました。ありがとうございます(* ᴗ ᴗ)⁾⁾↷

jQueryって、なんか嫌われてるんでしょうか？ネットを見ると賛否両論ですね。以前からですが…。

ハンバーガーメニューとか、ヌルヌル動くアニメーションが実装できたりわたしは好きですけど、専門家的な目線からすると、何か問題点があるのでしょう。。

とりあえず、使えるものは使えるうちには使っとけ、ということで。

折り返したり、折り返さなかったりできるボタンの設置

まずは一服　ﾄﾞｰｿﾞ(∩´｡•ω•)⊃🍵

ソースコード

コードの解説

このjQuery コードは特定の `<pre>` 要素内のコードブロックの折り返し表示を切り替えます。以下、順番に解説します。

1. <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' async></script>
   このスクリプトで先ずjQuery ライブラリを読み込みます。jQuery ライブラリ自体がこのコードの実行に必要な機能を提供します。
   

   ※「jquery」という単語は「ジェイクエリー」と発音され、日本語では「JavaScript ライブラリ」と呼ばれることもあります。一般的には「jQuery（ジェイクエリー）」という表記がよく使われますが、「JavaScript ライブラリ」や「スクリプトライブラリ」とも表現されることがあります。

   ※googleapis というドメインはGoogleに関連するAPIやリソースを提供するためのものです。その中でもGoogle が提供するjQuery ライブラリのバージョン3.5.1を取得しています。このスクリプトをウェブページに追加することで、ウェブページ内でjQuery ライブラリを使用できるようになります。ウェブ開発者はこのライブラリを利用して、JavaScript をより簡単に操作・操作することができます。

2. $(document).ready(function () { ... });
      この部分は、HTMLドキュメントが読み込まれた後にjQueryのコードが実行されるようにするためのものです。文書全体が読み込まれてからjQueryのコードが実行されることを保証します。
3. $("pre").before(...);
      この行は、すべての `<pre>` 要素の前に新しい要素を挿入するためのものです。新しい要素は `.codeWrap` というクラスを持つ `<div>` 要素で、その中に `[コードの折り返しを切り替える]` というテキストリンクが含まれています。
4. $("div.codeWrap").on("click", function () { ... });
      `.codeWrap` クラスを持つ `<div>` 要素がクリックされたときに実行される関数を指定しています。
5. 関数の中身
• var preElement = $(this).next("pre");
  クリックされた `.codeWrap` の直後にある `<pre>` 要素を取得します。
• var linkElement = $(this).children("a");
  クリックされた `.codeWrap` の中にある `<a>` 要素（リンク）を取得します。
• if (preElement.css("white-space") === "pre") { ... } else { ... }
  `<pre>` 要素の `white-space` プロパティが `"pre"` かどうかで、コードブロックの折り返し表示が有効か無効かを判断しています。
• 最初の `if` ブロックでは、もし折り返し表示が有効だった場合、`<pre>` 要素のスタイルを変更して折り返し表示を無効化し、テキストリンクのテキストを `[横スクロールバーを表示]` に変更します。
• `else` ブロックでは、折り返し表示が無効だった場合、`<pre>` 要素のスタイルを変更して折り返し表示を有効化し、テキストリンクのテキストを `[横スクロールバーを消す]` に変更します。
• `return false;`
  イベントハンドラ内で `return false;` を返すことで、クリックイベントのデフォルトの挙動（通常のリンククリックのページ遷移など）を抑制しています。

このコードは、コードブロックの折り返し表示を切り替えるためのトグル機能を提供しています。ユーザーがテキストリンクをクリックすると、コードブロックの表示モードが切り替わる仕組みです。

実装の際はフッタなどに貼り付けてご利用ください。

$(document).ready(function () {
  $("pre").before(
    '<div class="codeWrap"><a href="javascript:void(0)">［コードの折り返しを切り替える］</a></div>'
  );

  $("div.codeWrap").on("click", function () {
    var preElement = $(this).next("pre");
    var linkElement = $(this).children("a");

    if (preElement.css("white-space") === "pre") {
      preElement.css({
        "overflow-x": "visible",
        "white-space": "pre-wrap"
      });
      linkElement.text("［横スクロールバーを表示］");
    } else {
      preElement.css({
        "overflow-x": "auto",
        "white-space": "pre"
      });
      linkElement.text("［横スクロールバーを消す］");
    }

    return false;
  });
});

Copy

使用例

<header>
    <h1>Welcome to Our Website</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <section>
        <h2>About Us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis justo id velit congue cursus. Nunc vestibulum, odio sit amet iaculis tempor, tellus nisi rhoncus ex, vitae cursus enim leo at felis. Duis nec dui vel lorem venenatis fringilla. Quisque vestibulum arcu nec est egestas, ut hendrerit nunc blandit. Ut sit amet bibendum libero.</p>
    </section>
    <section>
        <h2>Our Services</h2>
        <ul>
            <li>Web Design</li>
            <li>Graphic Design</li>
            <li>SEO Optimization</li>
            <li>Content Creation</li>
        </ul>
    </section>
    <section>
        <h2>Portfolio</h2>
        <div class="portfolio-item">
            <img src="image1.jpg" alt="Project 1">
            <h3>Project 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="portfolio-item">  

 <img src="image2.jpg" alt="Project 2"> <h3>Project 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </section> <footer> <p>© 2023 Our Company. All rights reserved.</p> </footer> </header>

参考記事

www.kagoya.jp

 help.hatenablog.com

stand-4u.com

aprico-media.com

www.aozora.gr.jp

Web制作の現場で使う jQueryデザイン入門［改訂新版] (Web Professional Books)