なでしこさんのコードを原稿用紙に表示したい！ by 雪乃☆雫

＃なでしこのコードを原稿用紙に描画する。
！『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親要素設定。