日本語プログラミング言語「なでしこ」 Advent Calendar 2024
閲覧ありがとうございます。この記事はなでしこアドカレの21日目の記事となります。
20日目の記事は雪乃 雫さんの「なでしこさんのDOM部品でトランプを作るよ」でした。
前回の記事と合わせて読みましたが、す、すごい……！ htmlとCSSの要素だけでこんなにグラフィカルにトランプが遊べるの、感動しました。解説はなかなか難しかったですが、なでしこ3の無限の可能性を感じました～！
「12/6ぶりですね」を表示する
こんばんは。ユメミノウツツです。
今年のなでしこアドカレは2回目になります。先日12/6のコチラの記事です↓
前回はなでしこ3で作ったプラグインを紹介しようと思ったら、記事を書いている最中にバグが見つかり、いかがでしたか？うまく動きませんでしたね！というカスみてえな素晴らしい記事を投稿しました。
今回の記事はそのバグ取りを行ったので、改めてプラグインを紹介する記事を書きたいと思います。よろしくお願いします。
（なお今回も例のごとく、現在時刻21日の23:55です。遅刻確定、申し訳ございません……）
テーブルDOM操作プラグイン
まず、作ったものはコチラです↓
サンプルプログラムはコチラです↓
このプラグインは、なでしこ3にHTMLの<table>に関するDOM操作を追加するプラグインになります。
……とはいうのですが、前回の記事で書いた通り、「テーブル書き換え」については公式の関数で「テーブル更新」というのが実装されているので、そちらを使用することをおすすめします。
では、追加される2つの関数について解説します。
（TABLEをCSVで）テーブル書き換え
テーブルDOMの内容をCSVデータを元に書き換えます。
@param TABLE テーブルDOM。テーブル作成の戻り値など。
@param CSV CSV形式の文字列
（以下前回そのままです）
tableDOMとCSV形式の文字列を引数に取り、tableDOMの中身をそのCSVが示す表に書き換える関数です。テーブル更新で同じことができます。
正直、まあそれ以外の説明はありません。テーブル更新はCSVにも二次元配列にも対応しているので、そっちの方が高機能ですし……。
（TABLEを）テーブル二次元配列化
テーブルDOMの中身を二次元配列に変換して返す関数。
テーブルの内容が手元にないときや、特定のセルだけを変更したいため二次元配列として内容を得たい場合に使えます。
後者の場合は表CSV変換を通したのちテーブル書き換えを使うと実装できるかと思います。
内部的には取得したHTMLを無理やりパースしているのでバグがあるかもしれません。見つけたらQiitaなどでご連絡ください。
@param TABLE テーブルDOM
@return テーブルを変換した二次元配列
このプラグインは実質この関数を追加するためのプラグインです。 （いつかはもっとたくさん関数を追加したいな）
この関数は、tableDOMを引数に取り、tableDOMの内容を二次元配列にして返す関数です。
具体的に動いている様はサンプルプログラムを見ていただければわかるかと思います。か～すの並んでいる表を指定すると、その二次元配列が返ってくるので、それを表示しています。（1行ずつ表示させるために反復しています。）
使用例
使い方についてです。
基本的にはその名前の通り、表の内容をプログラムに取り込むために使います。
まあ、表をCSVや二次元配列からテーブル作成で作っている場合は、基本的に表の内容が既にプログラム上にあると思います。その場合は出番はないでしょう。
しかしテーブルの中身を、
テーブル＝「あ,い｛改行｝う,え」のテーブル作成
のように直接コードに書き込んでしまった場合は、表の内容が変数に残っていないことになります。
静的な表であればそれでいいですが、例えば表の書き換えがしたい！となった場合はその内容を取り込まなければなりません。そのような場合にこの関数は使えます。
例えば、次のようにすれば、1秒後に表の中身を書き換えることができます。
!「https://n3s.nadesi.com/plain/ymm_utt_TableDOM_Operation_Plugin.nako3」を取り込む
テーブル＝「あ,い｛改行｝う,え」のテーブル作成
1秒待つ
内容＝テーブルをテーブル二次元配列化
内容[0][0]＝「か」
内容[0][1]＝「き」
内容[1][0]＝「く」
内容[1][1]＝「け」
テーブルを内容にテーブル更新
また、例えば貯蔵庫上ではなく、自サイト上でなでしこ3を動かしている際に、htmlで書いた表を取り込みたいという場面でもこの関数は使えます。
!「https://n3s.nadesi.com/plain/ymm_utt_TableDOM_Operation_Plugin.nako3」を取り込む
「<table id="table">
<thead>
<tr>
<th>あ</th>
<th>い</th>
</tr>
</thead>
<tbody>
<tr>
<td>う</td>
<td>え</td>
</tr>
</tbody>
</table>」をDOM親要素にDOM_HTML設定
自作テーブル＝「#table」のDOM要素取得
自作テーブルをテーブル二次元配列化
それを反復して表示
このサンプルコードは貯蔵庫上でテストしたものなので、DOM_HTML設定でhtmlの表を作りました。
htmlのコードの場合はidからDOM要素取得してあげれば、上記のように表の内容をプログラムに取り込むことが可能になります。
使い方
このプラグインの使い方ですが、先のサンプルコードの通り、次の一文をソースに書き加えてください。
!「https://n3s.nadesi.com/plain/ymm_utt_TableDOM_Operation_Plugin.nako3」を取り込む
技術的な話
せっかくのQiita記事なので、テーブル二次元配列化についてのみ軽く書きます。
といってもやっていることは簡単で、DOM_HTML取得でhtmlを取り込んだ後、それを文字列としてひたすらパースしています。
thかtdが出てくれば中身を抜き出し、trがあれば二次元配列の行を1つ進めています。
前回の記事の際にうまくいかなかった原因は、主にtrに属性が設定されている場合を考慮していなかったことでした。
二次元配列の行を制御するのに、「<tr>」で区切るということをやっていたのですが、この際にtrタグに属性がある、つまり<tr class="hoge">のようになっていると動かないことを見落としていました。
修正に際してループの方法も変えました。前verはhtmlを区切って反復していましたが、今verでは1つの文字列の塊として～の間でループさせています。
これで一応ちゃんとパースできていると思うのですが、もしも動かないということがあればぜひ教えてください。
おわりに
なでしこ3の自作プラグイン「テーブルDOM操作プラグイン」の解説をしてきました。
このプラグインは2024/12/21現在「テーブル書き換え」と「テーブル二次元配列化」という2つの命令を実装するものになっていますが、その内テーブル書き換えは公式で「テーブル更新」という命令が新たに追加されています。
そのため、実質的にはテーブル二次元配列化を追加するためだけのものになってしまっています……ｗ
もしなでしこ3で表の中身を動的に書き換えたいなということがあれば、ぜひこのプラグインを使っていただけると嬉しいです。
というわけで、今回はここまで。
今回も21日に遅刻してしまってすみませんでした……今は12時50分、なんとか1時間程度の遅刻で済みそうです。
また毎年なでしこアドカレを立ててくださる雪乃☆雫さん、いつもありがとうございます！来年もぜひよろしくお願いします！😊
それでは、お相手はわたくし、ユメミノウツツでした！