W3schoolsが提供しているW3.JS は、Web 開発プロジェクトを簡素化するために設計された JavaScript ライブラリです。 ライブラリは９つのfunction（関数）が含まれており、この中に、onclick属性を利用してリストやTable表を簡単にソートできる「w3.sortHTML」ライブラリがあります。（なお、このライブラリは、「Free to use. No licenses.」となっています。）
今回は、この「w3.sortHTML」機能を実装したAffinger6のonclick属性付き「ミニ」ボタン（前回記事を参照）を配置して、リストやTable表をソートする実例紹介です。
W3Schoolsについてウィキペディアによれば、
W3Schoolsはウェブ技術のオンライン学習サイトである。HTML、CSS、JavaScript、PHP、SQL、Bootstrap、jQueryに関する参考資料や教材があり、月間100万人以上のユニークビジターが訪問している。
1998年に開設され、サイト名はWorld Wide Webに由来するが、ノルウェーのRefsnes Data社が運営しておりW3C (World Wide Web Consortium) には属していない。数千のコード例の記載があり、オンラインエディタで利用者がサンドボックスに自由に編集し試せる。
「W3.JS 」scriptの事前読み込み（Affinger6テーマの場合）
「w3.sortHTML」scriptを利用するには、予めWebページの<head>等に以下の「W3.JS 」リンクコードを配置しておく必要があります。
scriptリンクコード <script src="https://www.w3schools.com/lib/w3.js"></script> -- 又は、w3.jsファイル をダウンロードした後、Wordpressの適当なFolderにアップロードした場合 -- <script src="https://UP Load Folder /w3.js"></script>
Affinger6の「w3.js」設置場所
サイト全体（全投稿ページ）で利用する場合：
Affinger管理の「その他」＞ 上級者向けセクションの「</body>直前に出力するコード」欄に、「W3.JS」リンクコードを配置します。
個別ページで利用する場合：
投稿編集の後段にある「wp_footerに出力します」欄に、「W3.JS」・リンクコードを配置します。
w3.sortHTML（）の引数について
「W3.JS 」に、ソートを可能にする、w3.sortHTML(引数)関数が含まれています。 この 引数にソート対象の要素を指定し、onclick属性でこの関数を呼び出すとその要素がソートされます。
リストのソート
例えば、ボタンにonclick="w3.sortHTML('ul#id01', 'li')" を記述すると、id01 が付記された<ul id="id01">要素のリスト<li> に対して、ソート（昇順、降順の並び替え）できます。
テーブルのソート
例えば、ボタンにonclick="w3.sortHTML('table#myTable','tr.item', 'td:nth-child(1)') "と記述すると、テーブル(table)のidにmyTable が付記された<table id="myTable"> 、行(tr)のclassに itemが付記された<tr class="item"> と、１列目の列 <td> 指定「td:nth-child(1)」要素に対してソート（昇順、降順の並び替え）できます。 ２列目をソートしたい場合は、「td:nth-child(2)」にします。
onclick属性付き「ミニ」ボタンを使ってソート関数を実行する
「ミニ」ボタンの仕様は、onclick属性を付けることが出来ません。 このため、onclick属性を付与するショートコード【BTN_with_onclick】を作っておき、「ミニ」ボタンに【BTN_with_onclick】で囲むことで、onclick属性付き「ミニ」ボタンになります。 この「ミニ」ボタンをクリック（タップ）すればfunction（関数）が実行できる様になります。
【BTN_with_onclick】ショートコードの作り方は、「ここをクリック」して参照ください。
スポンサーリンク
事例１：楽曲リストをソートする
以前の記事（NAS内にAudio.js音声プレイリストを配置）で紹介した、収録した音源ファイルをプレイリストに追加して行くと、当然ながら、音源ファイルのタイトルが収録順になって表示されます。 そこで、「W3.JS Sort」を使ったボタンを配置して、タイトルリストをソートすれば、下に示す様に、「作曲者でソート（⇅）」ボタンを押すと、作曲者が昇順、降順で並べられますのでプレイリストが分かり易くなります。
収録順 Title
- バッハのフランス組曲 第５番 (pf)ピョートル・アンデルジェフスキ
- モーツァルトのピアノ・ソナタニ長調K_311他
- メンデルスゾーンのバイオリン協奏曲_(vn)メニューイン
- メンデルスゾーンの交響曲第４番「イタリア」フィルハーモニア管弦楽団,シノーポリ(指揮)
- シューマンのロマンス他(vn)パールマン.mp3"
- パガニーニのバイオリン協奏曲 第１番(vn)パールマン
- ベートーベンのピアノ三重奏曲「大公」
- モーツァルトのフルート協奏曲第1番
- メンデルスゾーンの交響曲第３番イ短調「スコットランド」ハイティンク(指揮)LPO
- モーツァルトのバイオリン協奏曲 第５番 イ長調 K219 vnシェリング、ニュー・フィルハーモニア管弦楽団、指揮アレクサンダー・ギブソン
- モーツァルトのピアノ・ソナタ イ長調「トルコ行進曲付き」K331イングリット・ヘブラーpf
- モーツァルトの弦楽五重奏曲ト短調
- モーツァルトのフルート協奏曲第２番Ｋ314 エマニュエル・パユ(フルート)アバド(指揮) BPO
- シューベルトの「４つの即興曲」 pfエヴァ・ポブウォツカ
- シューベルトのピアノ五重奏曲「ます」pfヘブラー(ピアノ) 、vn グリュミオー
- ラフマニノフのパガニーニの主題による狂詩曲
- ショパンのスケルツォ全4曲 pf チョ・ソンジン
- シューマン：アルゲリッチの「子供の情景」とディースカウの「ミルテの花」から献呈
- シューマン「こどもの情景 作品15」 pf ホロヴィッツ
- シューマン「こどもの情景 作品15」pf ケンプ・シューマン
※リストとソートボタンは、以下のHTMLコードで構成しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
[BTN_with_onclick onclick="w3.sortHTML('ul#id01', 'li');sort_info()" mystyle="line-height: 20px;margin:0 20px 10px 0;"] [st-mybutton-mini url="#" title="作曲者でソート（⇅）" rel="" webicon="" target="" color="#fff" bgcolor="#415c9d" bgcolor_top="#039BE5" bordercolor="" borderwidth="" borderradius="10" fontsize="80" fontweight="bold" webicon_after="" shadow="#415c9d" ref="" beacon=""] [/BTN_with_onclick] <p id="info" style="color: #415c9d; font-weight: bold; margin-bottom: 0px; font-size: 1em;">収録順 Title</p> <ul id="id01"> <li><span style="font-size: 80%;">バッハのフランス組曲 第５番 (pf)ピョートル・アンデルジェフスキ</span></li> <li><span style="font-size: 80%;">モーツァルトのピアノ・ソナタニ長調K_311他</span></li> <li><span style="font-size: 80%;">メンデルスゾーンのバイオリン協奏曲_(vn)メニューイン</span></li> <li><span style="font-size: 80%;">メンデルスゾーンの交響曲第４番「イタリア」フィルハーモニア管弦楽団,シノーポリ(指揮)</span></li> <li><span style="font-size: 80%;">シューマンのロマンス他(vn)パールマン.mp3"</span></li> : 中略 : <li><span style="font-size: 80%;">シューマン「こどもの情景 作品15」pf ケンプ・シューマン</span></li> </ul> <!-- ボタンが押されたら、ソート状態の情報を示す script --> <script> function sort_info(){ jQuery(function($){ if ($("#info").text() === '▲ 昇順で並べ替えました') { $("#info").text('▼ 降順で並べ替えました'); } else { $("#info").text('▲ 昇順で並べ替えました'); } }); } </script> |
HTML codeの簡単な説明
- 1行目と５行目：onclick属性を付与するショートコードで、onclickに、w3.sortHTML(引数)関数とsort_info()関数を ; 区切りで指定しています。
- 2〜4行目：「ミニ」ボタンのショートコードになります。
- 22〜32行目：scriptの関数名はsort_info()で、id="info"で指定される要素に対してソートの状態を表示します。 設置場所は「W3.JS 」と同じ場所に配置します。
- 7行目：pタグにid="info" を指定。 ボタンがクリックされると、sort_info()関数も実行され、ソート状態が表示されます。
事例２：Table表をソートする
この事例は、『ハイレゾ音源をAAC（MP3）に変換する時の「５つのヒント」』記事の中で、ピンクノイズを使ったAAC（MP3）エンコーダの劣化率を調べたtable表です。 前述した「w3.sortHTML（）の引数」「テーブルのソート」の説明に従ってtable表に、ソートボタンを付加しました。
変換アプリと劣化率一覧
| 変換アプリ（含むCLI） | 160kbps （劣化率） |
320kbps （劣化率） |
劣化率 順位 320kbps |
| XLD AAC（OSX用） | 1.09% | 0.31% | 3位 |
| foober2000 AAC （Windows用） |
1.04% | 0.29% | 2位 |
| FFmpeg NativeAAC(CLI) AAC | 4.19% | 0.83% | 7位 |
| Apple Afconvert(CLI) AAC | 1.09% | 0.31% | 3位 |
| iTunes AAC（OSX用） | 1.68% | 0.61% | 6位 |
| Apple Digital Masters ドロップレット (44.1khz 256kbps) AAC |
ー | 1.19% (256kbps) |
8位 |
| FFmpeg libfdk_aac(CLI)AAC | 0.74% | 0.37% | 5位 |
| FFmpeg libmp3lame(CLI)MP3 | 1.15% | 0.19% | 1位 Best |
| iTunes MP3（OSX用） | 4.75% | 2.08% | 9位 Worst |