なでしこさんのコードを原稿用紙に表示したい！ 📖

エディタに書かれているなでしこのコードを取得して原稿用紙に描画し、鑑賞するというお遊びです。自身のプログラム冒頭で取り込んで（！『https://n3s.nadesi.com/plain/1949.nako3』を取り込む。）実行し、原稿用紙作成ボタンを押してみてください！　ダウンロードはSVG画像です。「すべてのページ」を押すと、バラでページ数分ダウンロードされるので気をつけましょう💧／すべてのページをダウンロードのバグを修正💦／なでしこのバージョンが上がったらナゼか原稿作成でウェイトが必要になっていたので入れた。

プログラム: (→大)
＃なでしこのコードを原稿用紙に描画する。 ！『https://n3s.nadesi.com/plain/wa.nako3』を取り込む。# DOM和スタイル ！『https://n3s.nadesi.com/plain/751.nako3』を取り込む。# ラジオボタン、グループ、DIV要素作成。 ！「https://n3s.nadesi.com/plain/bunsyo-seikei.nako3」を取り込む。# 禁則処理。行揃え。 ！『https://snowdrops89.github.io/SVG_nako3/SVGplus.nako3』を取り込む。 ＃母艦 変数 母艦は、DOM親要素。 ＃原稿用紙親要素作成 　DIV要素作成して原稿用紙親要素に代入。 　原稿用紙親要素の「id」に「原稿用紙」をDOM属性設定。 　原稿用紙親要素にDOM親要素設定。 ＃宣言 定数 原稿用紙行文字数は、20。 定数 原稿用紙行数は、20。 変数 整形済み執筆用原稿は、空。 変数 原稿用紙テキストは、空配列。 変数 原稿用紙現在頁は、1。 変数 原稿用紙総頁数は、1。 変数 原稿用紙情報は、空。 変数 原稿用紙設定は、{ 「紙色」:「#F8F4E6」, 「罫色」:「#CD8C5C」, 「筆色」:「#595857」, 「書体」:「serif」, 「文字余白」:6 } ＃標準画面作成 　描画中キャンバスの「高さ」に０をDOM属性設定。 　「原稿用紙作成」のボタン作成して、原稿用紙表示ボタンに代入。 　「原稿用紙非表示」のボタン作成して、原稿用紙非表示ボタンに代入。 　「設定」のボタン作成して、原稿用紙設定ボタンに代入。 　原稿用紙非表示ボタンの「非表示」にオンをDOM属性設定。 　改行作成。改行作成。 　DIV要素作成して、原稿用紙設定画面に代入。 　原稿用紙設定画面の「非表示」にオンをDOM属性設定。 　DIV要素作成して、原稿用紙表示画面に代入。 　原稿用紙表示画面の「非表示」にオンをDOM属性設定。 ＃原稿用紙表示画面 　原稿用紙表示画面にDOM親部品設定。 ＃＃ページめくり 　空のラベル作成して、原稿用紙現在頁表示ラベルに代入。 　「＜＜戻る」のボタン作成して、頁戻るボタンに代入。 　「　」のラベル作成。 　「進む＞＞」のボタン作成して、頁進むボタンに代入。 　改行作成。 ＃＃外枠のSVGだけ先に作成。 　[0,0]のSVG親要素作成して、原稿用紙SVGに代入。 　原稿用紙SVGにSVG定義領域作成して、原稿用紙フォント指定に代入。 　原稿用紙SVGにSVGグループ作成して、原稿用紙描画域に代入。 　原稿用紙表示画面にDOM親部品設定。 ＃＃情報表示 　改行作成。 　空のラベル作成して、原稿用紙情報欄に代入。 　改行作成。改行作成。改行作成。 ＃＃ダウンロードボタン 　「ダウンロード：」のラベル作成。 　「このページ」のボタン作成して、原稿用紙ダウンロードボタンに代入。 　「　」のラベル作成。 　「全てのページ」のボタン作成して、原稿用紙全ダウンロードボタンに代入。 　改行作成。 ＃オプション設定画面作成 　原稿用紙設定画面にDOM親部品設定。 ＃＃色設定 原稿用紙色設定＝{ "紙色":[["胡粉色","#FFFFFC"],["生成色","#FBFAF5"],["象牙色","#F8F4E6",1],["鳥の子紙","#FDFBDE"],["更紙","#F9F8E0"],["雪白","#FCFFFE"],["朧月","#FFFEF9"],["白桜","#FFFCFC"],["卯花色","#F7FCFE"],["桜色","#FEF4F4"],["白練","#F3F3F2"]], "罫色":[["江戸茶","#CD8C5C",1],["榛色","#BFA46F"],["利休色","#8F8667"],["桔梗鼠","#95949A"],["藤鼠","#A6A5C4"],["紅藤色","#CCA6BF"],["撫子色","#EEBBCB"],["鴇色","#F4B3C2"],["浅緋","#DF7163"],["東雲色","#F19072"],["杏色","#F7B977"],["淡黄","#F8E58C"],["若菜色","#D8E698"],["柳色","#A8C97F"],["老竹色","#769164"],["翡翠色","#38B48B"],["若緑","#98D98E"],["青碧","#478384"],["薄縹","#507EA4"],["浅縹","#84B9CB"],["新橋色","#59B9C6"],["勿忘草色","#89C3EB"]], "筆色":[["漆黒","#0D0015"],["墨","#595857",1],["樺茶色","#726250"],["小豆茶","#6B3E3F"],["海老茶","#773C30"],["蘇芳","#9E3D3F"],["今様色","#D0576B"],["槿色","#775580"],["葡萄色","#522F60"],["深紫","#493759"],["紫紺","#460E44"],["濃色","#634950"],["蝋色","#2B2B2B"],["藍鉄","#393F4C"],["鉄御納戸","#455765"],["濃藍","#0F2350"],["深縹","#2A4073"],["熨斗目花色","#426579"],["天鵞絨","#2F5D50"],["木賊色","#3B7960"],["海松色","#726D40"]]}。 原稿用紙色設定ラジオボタンは、空辞書。 原稿用紙色設定を反復: 原稿用紙色設定ラジオボタン[対象キー]は、空配列。 対象と対象キーで、原稿用紙色設定ラジオボタン[対象キー]の色設定用ラジオボタン群作成。 ＃＃フォント設定 原稿用紙書体設定＝[ ["ZEN紅道","Zen Kurenaido","@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');",1], ["花鳥風月","花鳥風月B","https://snowdrops89.github.io/font/TAKAYA/katyouB.woff2"], ["春夏秋冬Ⅱ","春夏秋冬B","https://snowdrops89.github.io/font/TAKAYA/syunkaB.woff2"], ["手書き雑","851手書き雑フォント","https://snowdrops89.github.io/font/851/851tegaki_zatsu_085.woff2"], ["ふい字","ふい字","https://snowdrops89.github.io/font/HuiFont109/HuiFont109.woff2"], ["衡山毛筆","衡山毛筆フォント","https://snowdrops89.github.io/font/Musashi/KouzanMouhituFont.woff"], ["New Tegomin","New Tegomin","@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');"], ["Klee One","Klee One","@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap');"] ] 　「フォント」のグループ作成して、書体設定グループに代入。 　改行作成。 　書体設定グループの「幅」に「900px」をDOMスタイル設定。 　書体設定グループにDOM親部品設定。 　原稿用紙設定["書体"]のエディタ作成して、書体任意設定エディタに代入。 　書体任意設定エディタの「マージン」に「0 0 10px 0」をDOMスタイル設定。 　「　　　太さ：」のラベル作成。 　["普通","太く"]のセレクトボックス作成して、文字太さ設定に代入。 　文字太さ設定に「普通」をテキスト設定。 　「　　　文字余白：」のラベル作成。 　0から12まで1で6の数値入力欄作成して、文字余白設定に代入。 　文字余白設定の「幅」に「50px」をDOMスタイル設定。 　改行作成。 原稿用紙書体設定ラジオボタン＝空配列。 原稿用紙書体設定を反復: 原稿用紙書体設定ラジオボタン[対象キー]＝「書体」で対象[0]のラジオボタン作成。 原稿用紙書体設定ラジオボタン[対象キー]の「マージン」に「10px 0 0 10px」をDOMスタイル設定。 原稿用紙書体設定ラジオボタン[対象キー]["タグ"]＝対象キー。 もし、対象[3]＝オンならば、: 原稿用紙書体設定ラジオボタン[対象キー]の「チェック」に「チェック」をDOM属性設定。 書体任意設定エディタに「"{対象[1]}",serif」をテキスト設定。 原稿用紙書体設定ラジオボタン[対象キー]をクリックした時には、: 書体任意設定エディタに「"{原稿用紙書体設定[対象["タグ"]][1]}",serif」をテキスト設定。 ＃＃適用ボタン 　原稿用紙設定画面にDOM親部品設定。 　「この設定で原稿用紙作成」のボタン作成して、原稿用紙設定適用ボタンに代入。 ＃＃ラジオボタン関数 ●(色配列とグループ名でラジオボタン配列の)色設定用ラジオボタン群作成とは: 親は、DOM親要素 グループ名のグループ作成して、グループに代入。改行作成。 グループの「幅」に「900px」をDOMスタイル設定。 グループにDOM親部品設定。 色配列を反復: ラジオボタン配列[対象キー]＝グループ名で対象[0]のラジオボタン作成。 ラジオボタン配列[対象キー]の「マージン」に「10px 0 10px 10px」をDOMスタイル設定。 もし、対象[2]＝オンならば、ラジオボタン配列[対象キー]の「チェック」に「チェック」をDOM属性設定。 ラベル＝ラジオボタン配列[対象キー]のラジオボタンタイトル取得。 ラベルの「背景色」に対象[1]をDOMスタイル設定。 もし、グループ名＝「筆色」ならば、ラベルの「色」に白色をDOMスタイル設定。 ラベルの「余白」に「2px 8px」をDOMスタイル設定。 親にDOM親要素設定。 ●(ラジオボタン配列で項目の)ラジオボタン設定反映とは: 　　ラジオボタン配列を反復: 変数 チェックは、対象の「チェック」をDOM属性取得。 もし、チェックがオンならば、: 変数 色設定は、原稿用紙色設定[項目][対象キー]。 原稿用紙設定[項目]＝色設定[1]。 原稿用紙情報は、原稿用紙情報に「{項目}：{色設定[0]}({色設定[1]})　」を追加。 ＃イベント 原稿用紙表示ボタンをクリックした時には、: 原稿用紙設定適用。 原稿用紙作成。 原稿用紙非表示ボタンをクリックした時には、: 原稿用紙設定画面の「非表示」にオンをDOM属性設定。 原稿用紙表示画面の「非表示」にオンをDOM属性設定。 原稿用紙表示ボタンの「非表示」にオフをDOM属性設定。 原稿用紙非表示ボタンの「非表示」にオンをDOM属性設定。 原稿用紙設定ボタンの「非表示」にオフをDOM属性設定。 原稿用紙設定ボタンをクリックした時には、: 原稿用紙設定画面の「非表示」にオフをDOM属性設定。 原稿用紙表示画面の「非表示」にオンをDOM属性設定。 原稿用紙表示ボタンの「非表示」にオフをDOM属性設定。 原稿用紙非表示ボタンの「非表示」にオンをDOM属性設定。 原稿用紙設定ボタンの「非表示」にオンをDOM属性設定。 原稿用紙表示ボタンに「この設定で原稿用紙作成」をテキスト設定。 ＃＃原稿用紙画面のイベント 頁進むボタンをクリックした時には、: もし、原稿用紙現在頁＜原稿用紙総頁数ならば、: 原稿用紙現在頁を１増やす。 整形済み執筆用原稿[原稿用紙現在頁-1]を執筆。 原稿用紙現在頁表示ラベルに「{原稿用紙現在頁}ページ／全{原稿用紙総頁数}ページ　　」をテキスト設定。 頁戻るボタンをクリックした時には、: もし、原稿用紙現在頁＞１ならば、: 原稿用紙現在頁を１減らす。 整形済み執筆用原稿[原稿用紙現在頁-1]を執筆。 原稿用紙現在頁表示ラベルに「{原稿用紙現在頁}ページ／全{原稿用紙総頁数}ページ　　」をテキスト設定。 原稿用紙ダウンロードボタンをクリックした時には、: ダウンロードファイル名作成して、ファイル名に代入。 「{ファイル名}_{原稿用紙現在頁}.svg」で原稿用紙SVGをSVGダウンロード。 原稿用紙全ダウンロードボタンをクリックした時には、: ダウンロードファイル名作成して、ファイル名に代入。 頁数は、１。 原稿用紙総頁数回: 整形済み執筆用原稿[頁数-1]を執筆。 原稿用紙現在頁表示ラベルに「{頁数}ページ／全{原稿用紙総頁数}ページ　　」をテキスト設定。 「{ファイル名}_{頁数}.svg」で原稿用紙SVGをSVGダウンロード。 頁数を１増やす。 ●ダウンロードファイル名作成とは: ファイル名は、整形済み執筆用原稿[0][0]。 不使用文字は、["¥","/",":","*","?",'"',"<",">","|","#","＃","※"] 不使用文字を反復: ファイル名は、ファイル名の対象を空に置換。 ファイル名は、ファイル名の空白除去。 もし、ファイル名が空ならば、ファイル名は「原稿用紙」。 ＃＃設定画面のイベント 原稿用紙設定適用ボタンをクリックした時には、: 原稿用紙設定適用。 原稿用紙作成。 ●原稿用紙設定適用とは: 原稿用紙情報は、空。 #色設定 原稿用紙色設定ラジオボタンを反復: 対象で対象キーのラジオボタン設定反映。 #書体設定 原稿用紙設定["書体"]＝書体任意設定エディタのテキスト取得。 もし、それが空ならば、原稿用紙設定["書体"]＝「serif」 文字太さ設定のテキスト取得。 もし、それが「普通」ならば、「normal」にSVG文字太さ設定。 もし、それが「太く」ならば、「bold」にSVG文字太さ設定。 原稿用紙設定["文字余白"]＝文字余白設定のテキスト取得。 原稿用紙書体設定ラジオボタンを反復: 変数 チェックは、対象の「チェック」をDOM属性取得。 もし、チェックがオンならば、: 変数 [フォント名,書体,URL]＝原稿用紙書体設定[対象キー]。 変数 フォーマットは、URLを「.」で区切って、それ[(それの要素数)-1]。 変数 書体設定＝「<style>@font-face {波カッコ}font-family: "{書体}";src: url({URL}) format('{フォーマット}');{波カッコ閉じ}</style>」 もし、(URLの1だけ文字左部分)＝「@」ならば、書体設定は、「<style>{URL}</style>」 原稿用紙フォント指定に書体設定をHTML設定。 原稿用紙情報は、原稿用紙情報に「フォント：{フォント名}」を追加。 原稿用紙情報欄に原稿用紙情報をテキスト設定。 ●原稿用紙作成とは: 原稿用紙設定画面の「非表示」にオンをDOM属性設定。 原稿用紙表示画面の「非表示」にオフをDOM属性設定。 原稿用紙表示ボタンの「非表示」にオンをDOM属性設定。 原稿用紙非表示ボタンの「非表示」にオフをDOM属性設定。 原稿用紙設定ボタンの「非表示」にオフをDOM属性設定。 原稿用紙表示ボタンに「原稿用紙作成」をテキスト設定。 原稿用紙SVGから原稿用紙描画域をDOM子要素削除。 原稿用紙描画。 ナデシコード取得して、それから原稿作成。 整形済み執筆用原稿は、それ。 整形済み執筆用原稿[原稿用紙現在頁-1]を執筆。 原稿用紙表示画面の「非表示」にオフをDOM属性設定。 ●原稿用紙描画とは: 定数 行文字数は、原稿用紙行文字数。 定数 行数は、原稿用紙行数。 定数 上下余白は、50。 定数 左右余白は、70。 定数 マス幅は、26。 定数 ルビ枠は、10。 定数 版心は、32。 定数 外枠線幅は、4。 定数 内枠線幅は、2。 定数 枠幅は、外枠線幅＋内枠線幅+1。 定数 描画幅は、(マス幅＋ルビ枠)*行数+枠幅*2+版心。 定数 描画高さは、枠幅*2＋マス幅*行文字数。 定数 用紙幅は、左右余白*2+描画幅。 定数 用紙高は、上下余白*2+描画高。 変数 紙色は、原稿用紙設定＠「紙色」 変数 罫色は、原稿用紙設定＠「罫色」 変数 筆色は、原稿用紙設定＠「筆色」 変数 書体は、原稿用紙設定＠「書体」 変数 文字余白は、原稿用紙設定＠「文字余白」 原稿用紙SVGの「幅」に用紙幅をSVG属性設定。 原稿用紙SVGの「高さ」に用紙高さをSVG属性設定。 原稿用紙SVGの「viewBox」に「0 0 {用紙幅} {用紙高さ}」をSVG属性設定。 原稿用紙描画域は、原稿用紙SVGにSVGグループ作成。 原稿用紙描画域にDOM親部品設定。 無色にSVG線色設定。紙色にSVG塗り色設定。 [0,0,用紙幅,用紙高]へSVG四角描画。 # 外枠 罫色にSVG線色設定。無色にSVG塗り色設定。4にSVG線太設定。「直線」にSVG破線パターン設定。 [左右余白+外枠線幅/2,上下余白+外枠線幅/2,描画幅-外枠線幅,描画高さ-外枠線幅]へSVG四角描画。 2にSVG線太設定。 [左右余白+枠幅,上下余白+枠幅,描画幅-枠幅*2,描画高さ-枠幅*2]へSVG四角描画。 # マス目 1にSVG線太設定。「点線」にSVG破線パターン設定。 ## 縦線 x＝左右余白+枠幅＋マス幅。y＝上下余白+枠幅。y2＝上下余白+枠幅＋マス幅*行文字数。 行数*2+1回: もし、回数=1ならば、続ける。 [x,y]から[x,y2]までSVG線描画。※縦線 もし、回数＝行数+1ならば、x＝x＋版心。 もし、回数＜行数+1ならば、: もし、(回数%2＝1)ならば、x＝x＋マス幅。 違えば、x＝x＋ルビ枠。 もし、回数＞行数+1ならば、: もし、(回数%2＝0)ならば、x＝x＋マス幅。 違えば、x＝x＋ルビ枠。 ## 横線 x＝左右余白+枠幅。y＝上下余白+枠幅。原稿用紙テキスト＝空配列。文字描画位置＝空配列。 行数+1回。※版心の分をプラス y＝上下余白+枠幅。 もし、回数＝行数/2+1ならば、: x=x+版心。続ける。※版心 もし、((回数≠1)かつ(回数＜行数/2+1))または(回数＞行数/2+1)ならば、x=x+(マス幅+ルビ枠) ### テキスト描画位置 行番号＝行数-回数。 もし、(回数＞行数/2+1)ならば、行番号＝行数+1-回数。 文字描画位置[行番号]＝[x+マス幅/2,y+文字余白/2]。 ### 横線描画 ※一番下は描画しない 行文字数-1回: y＝y+マス幅。 [x,y]から[x+マス幅,y]までSVG線描画。※横線 ここまで。 # 魚尾 罫色にSVG塗り色設定。 「直線」にSVG破線パターン設定。 「{版心}px」にSVG文字サイズ設定。 「sans-serif」にSVG文字フォント設定。 [左右余白+枠幅+(マス幅+ルビ枠)*(行数/2),上下余白+枠幅+マス幅*3]に「︻」をSVG文字描画。 [左右余白+枠幅+(マス幅+ルビ枠)*(行数/2),上下余白+枠幅+マス幅*(行文字数-3)]に「︼」をSVG文字描画。 # テキスト 書体にSVG文字フォント設定。 「{マス幅-文字余白}px」にSVG文字サイズ設定 無色にSVG線色設定。筆色にSVG塗り色設定。 行数回: 原稿用紙テキスト[回数-1]＝文字描画位置[回数-1]に空をSVG縦書き文字描画。 それの「文字間」に「{文字余白}px」をDOMスタイル設定。 ●ナデシコード取得とは: 変数 コードは、「#nako3code」のテキスト取得。 もし、（コードの1だけ文字左部分）＝「<」ならば、: スイッチは、「editSwitch」のDOM要素ID取得。 スイッチの「click」を空でJSメソッド実行。 コードは、「#nako3code」のテキスト取得。 スイッチの「click」を空でJSメソッド実行。 コードで戻る。 ●(Sから)原稿作成とは: 変数 原稿はS。 原稿は、原稿を改行で区切る。 変数 行数は、原稿の要素数。 行数回: もし、原稿[行数-回数]が「/^[！!].*/g」に正規表現マッチならば、原稿の(行数-回数)を配列削除。 原稿は、原稿を改行で配列結合。 原稿は、原稿の「 」を「　」に置換。　※半角スペース２つ→全角スペース１つ。 原稿は、原稿の「　　」を「　」に置換。　※全角スペース２つ→全角スペース１つ。 原稿は、原稿の「 」を「　」に置換。　※半角スペース１つ→全角スペース１つ。 原稿は、原稿を全角変換。 原稿は、原稿を原稿用紙行文字数で行揃えして、それを原稿用紙行数で頁分割。 原稿用紙総頁数は、それの要素数。 原稿用紙現在頁表示ラベルに「{原稿用紙現在頁}ページ／全{原稿用紙総頁数}ページ　　」をテキスト設定。 0.01秒待って、原稿を戻す。//なぜかウェイトが必要になっていた ●(Aを)執筆とは: 原稿用紙行数回: もし、回数＞(Aの要素数)ならば、此行＝空。 違えば、此行＝A[回数-1]。 原稿用紙テキスト[回数-1]に此行をテキスト設定。 ●(DOMの属性に値を)DOM属性設定 もし、(DOM和スタイルに属性が辞書キー存在）ならば、属性＝DOM和スタイル[属性]。 もし、(DOM和スタイルに値が辞書キー存在）ならば、値＝DOM和スタイル[値]。 DOM[属性]＝値。 ここまで。 ●(DOMの属性を)DOM属性取得 もし、(DOM和スタイルに属性が辞書キー存在）ならば、属性＝DOM和スタイル[属性]。 DOM[属性]で戻る。 ここまで。 ＃母艦を変更 母艦にDOM親要素設定。 DIV要素作成して母艦に代入。 母艦の「id」に「母艦」をDOM属性設定。 母艦にDOM親要素設定。