skynovel

<!doctype html><html ⚡ lang="ja"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <link rel="preload" href="https://fonts.gstatic.com/s/inconsolata/v17/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="https://cdn.ampproject.org/rtv/011905140117570/v0/amp-auto-lightbox-0.1.js" as="script"> <link rel="preload" href="https://fonts.googleapis.com/css?family=Inconsolata|Montserrat" as="style"> <title>SKYNovel 開発者向け情報 Information for developers</title> <link rel="canonical" href="https://famibee.github.io/SKYNovel/dev.htm"/> <meta name="description" content="SKYNovel 開発者向け情報 Information for developers"/> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style> <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <link href="https://fonts.googleapis.com/css?family=Inconsolata|Montserrat" rel="stylesheet"> <style amp-custom> .ampstart-footer{background-color:#fff;color:#000;font-size:.75rem;padding-top:7rem;padding-bottom:7rem} .ampstart-footer .ampstart-icon{fill:#000} .ampstart-footer .ampstart-social-follow li:last-child{margin-right:0} .ampstart-headerbar{background-color:#ffffffc0;color:#000;z-index:999;box-shadow:0 0 5px 2px rgba(0,0,0,.1)} .ampstart-headerbar+:not(amp-sidebar),.ampstart-headerbar+amp-sidebar+*{margin-top:3.5rem} .ampstart-headerbar-nav .ampstart-nav-item{padding:0 1.5rem;background:0 0;opacity:.8} .ampstart-headerbar-nav{line-height:3.5rem} /*! Bassplate | MIT License | http://github.com/basscss/bassplate *//*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}.h1{font-size:3rem}.h2{font-size:2rem}.h3{font-size:1.5rem}.h4{font-size:1.125rem}.h5{font-size:.875rem}.h6{font-size:.75rem}.font-family-inherit{font-family:inherit}.font-size-inherit{font-size:inherit}.text-decoration-none{text-decoration:none}.bold{font-weight:700}.regular{font-weight:400}.italic{font-style:italic}.caps{letter-spacing:.2em}.left-align{text-align:left}.center{text-align:center}.right-align{text-align:right}.justify{text-align:justify}.nowrap{white-space:nowrap}.break-word{word-wrap:break-word}.line-height-1{line-height:1rem}.line-height-2{line-height:1.125rem}.line-height-3{line-height:1.5rem}.line-height-4{line-height:2rem}.list-style-none{list-style:none}.underline{text-decoration:underline}.truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-reset{list-style:none;padding-left:0}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.table{display:table}.table-cell{display:table-cell}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.left{float:left}.right{float:right}.fit{max-width:100%}.max-width-1{max-width:24rem}.max-width-2{max-width:32rem}.max-width-3{max-width:48rem}.max-width-4{max-width:64rem}.border-box{box-sizing:border-box}.align-baseline{vertical-align:baseline}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0,.mx0{margin-left:0}.mx0{margin-right:0}.my0{margin-top:0;margin-bottom:0}.m1{margin:1rem}.mt1{margin-top:1rem}.mr1{margin-right:1rem}.mb1{margin-bottom:1rem}.ml1,.mx1{margin-left:1rem}.mx1{margin-right:1rem}.my1{margin-top:1rem;margin-bottom:1rem}.m2{margin:1.5rem}.mt2{margin-top:1.5rem}.mr2{margin-right:1.5rem}.mb2{margin-bottom:1.5rem}.ml2,.mx2{margin-left:1.5rem}.mx2{margin-right:1.5rem}.my2{margin-top:1.5rem;margin-bottom:1.5rem}.m3{margin:2rem}.mt3{margin-top:2rem}.mr3{margin-right:2rem}.mb3{margin-bottom:2rem}.ml3,.mx3{margin-left:2rem}.mx3{margin-right:2rem}.my3{margin-top:2rem;margin-bottom:2rem}.m4{margin:2.5rem}.mt4{margin-top:2.5rem}.mr4{margin-right:2.5rem}.mb4{margin-bottom:2.5rem}.ml4,.mx4{margin-left:2.5rem}.mx4{margin-right:2.5rem}.my4{margin-top:2.5rem;margin-bottom:2.5rem}.mxn1{margin-left:-1rem;margin-right:-1rem}.mxn2{margin-left:-1.5rem;margin-right:-1.5rem}.mxn3{margin-left:-2rem;margin-right:-2rem}.mxn4{margin-left:-2.5rem;margin-right:-2.5rem}.ml-auto{margin-left:auto}.mr-auto,.mx-auto{margin-right:auto}.mx-auto{margin-left:auto}.p0{padding:0}.pt0{padding-top:0}.pr0{padding-right:0}.pb0{padding-bottom:0}.pl0,.px0{padding-left:0}.px0{padding-right:0}.py0{padding-top:0;padding-bottom:0}.p1{padding:1rem}.pt1{padding-top:1rem}.pr1{padding-right:1rem}.pb1{padding-bottom:1rem}.pl1{padding-left:1rem}.py1{padding-top:1rem;padding-bottom:1rem}.px1{padding-left:1rem;padding-right:1rem}.p2{padding:1.5rem}.pt2{padding-top:1.5rem}.pr2{padding-right:1.5rem}.pb2{padding-bottom:1.5rem}.pl2{padding-left:1.5rem}.py2{padding-top:1.5rem;padding-bottom:1.5rem}.px2{padding-left:1.5rem;padding-right:1.5rem}.p3{padding:2rem}.pt3{padding-top:2rem}.pr3{padding-right:2rem}.pb3{padding-bottom:2rem}.pl3{padding-left:2rem}.py3{padding-top:2rem;padding-bottom:2rem}.px3{padding-left:2rem;padding-right:2rem}.p4{padding:2.5rem}.pt4{padding-top:2.5rem}.pr4{padding-right:2.5rem}.pb4{padding-bottom:2.5rem}.pl4{padding-left:2.5rem}.py4{padding-top:2.5rem;padding-bottom:2.5rem}.px4{padding-left:2.5rem;padding-right:2.5rem}.col{float:left}.col,.col-right{box-sizing:border-box}.col-right{float:right}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}@media (min-width:40.06rem){.sm-col{float:left;box-sizing:border-box}.sm-col-right{float:right;box-sizing:border-box}.sm-col-1{width:8.33333%}.sm-col-2{width:16.66667%}.sm-col-3{width:25%}.sm-col-4{width:33.33333%}.sm-col-5{width:41.66667%}.sm-col-6{width:50%}.sm-col-7{width:58.33333%}.sm-col-8{width:66.66667%}.sm-col-9{width:75%}.sm-col-10{width:83.33333%}.sm-col-11{width:91.66667%}.sm-col-12{width:100%}}@media (min-width:52.06rem){.md-col{float:left;box-sizing:border-box}.md-col-right{float:right;box-sizing:border-box}.md-col-1{width:8.33333%}.md-col-2{width:16.66667%}.md-col-3{width:25%}.md-col-4{width:33.33333%}.md-col-5{width:41.66667%}.md-col-6{width:50%}.md-col-7{width:58.33333%}.md-col-8{width:66.66667%}.md-col-9{width:75%}.md-col-10{width:83.33333%}.md-col-11{width:91.66667%}.md-col-12{width:100%}}@media (min-width:64.06rem){.lg-col{float:left;box-sizing:border-box}.lg-col-right{float:right;box-sizing:border-box}.lg-col-1{width:8.33333%}.lg-col-2{width:16.66667%}.lg-col-3{width:25%}.lg-col-4{width:33.33333%}.lg-col-5{width:41.66667%}.lg-col-6{width:50%}.lg-col-7{width:58.33333%}.lg-col-8{width:66.66667%}.lg-col-9{width:75%}.lg-col-10{width:83.33333%}.lg-col-11{width:91.66667%}.lg-col-12{width:100%}}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}@media (min-width:40.06rem){.sm-flex{display:-webkit-box;display:-ms-flexbox;display:flex}}@media (min-width:52.06rem){.md-flex{display:-webkit-box;display:-ms-flexbox;display:flex}}@media (min-width:64.06rem){.lg-flex{display:-webkit-box;display:-ms-flexbox;display:flex}}.flex-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.items-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.items-end{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.items-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.items-baseline{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.items-stretch{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.self-start{-ms-flex-item-align:start;align-self:flex-start}.self-end{-ms-flex-item-align:end;align-self:flex-end}.self-center{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.self-baseline{-ms-flex-item-align:baseline;align-self:baseline}.self-stretch{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.justify-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.justify-around{-ms-flex-pack:distribute;justify-content:space-around}.content-start{-ms-flex-line-pack:start;align-content:flex-start}.content-end{-ms-flex-line-pack:end;align-content:flex-end}.content-center{-ms-flex-line-pack:center;align-content:center}.content-between{-ms-flex-line-pack:justify;align-content:space-between}.content-around{-ms-flex-line-pack:distribute;align-content:space-around}.content-stretch{-ms-flex-line-pack:stretch;align-content:stretch}.flex-auto{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;min-height:0}.flex-none{-webkit-box-flex:0;-ms-flex:none;flex:none}.order-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.order-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-last{-webkit-box-ordinal-group:100000;-ms-flex-order:99999;order:99999}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}.border{border-style:solid;border-width:1px}.border-top{border-top-style:solid;border-top-width:1px}.border-right{border-right-style:solid;border-right-width:1px}.border-bottom{border-bottom-style:solid;border-bottom-width:1px}.border-left{border-left-style:solid;border-left-width:1px}.border-none{border:0}.rounded{border-radius:3px}.circle{border-radius:50%}.rounded-top{border-radius:3px 3px 0 0}.rounded-right{border-radius:0 3px 3px 0}.rounded-bottom{border-radius:0 0 3px 3px}.rounded-left{border-radius:3px 0 0 3px}.not-rounded{border-radius:0}.hide{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}@media (max-width:40rem){.xs-hide{display:none}}@media (min-width:40.06rem) and (max-width:52rem){.sm-hide{display:none}}@media (min-width:52.06rem) and (max-width:64rem){.md-hide{display:none}}@media (min-width:64.06rem){.lg-hide{display:none}} .h1,h1{font-size:3rem;line-height:3.5rem} .h2,h2{font-size:2rem;line-height:2.5rem} .h3,h3{font-size:1.5rem;line-height:2rem} .h4,h4{font-size:1.125rem;line-height:1.5rem} .h5,h5{font-size:.875rem;line-height:1.125rem} .h6,h6{font-size:.75rem;line-height:1rem} h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-weight:400;letter-spacing:.06em} a,a:active,a:visited{color:inherit} .ampstart-btn{font-family:inherit;font-weight:inherit;font-size:1rem;line-height:1.125rem;padding:.7em .8em;text-decoration:none;white-space:nowrap;word-wrap:normal;vertical-align:middle;cursor:pointer;background-color:#fff;color:#4508b6;border:1px solid #4508b6} .w-header,h1,h2,h3,h4,h5,h6{font-family:Inconsolata,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;margin-top: 1.2em} .ampstart-headerbar-nav .ampstart-nav-item{padding-right:1rem} .ampstart-headerbar-nav .ampstart-nav-item.w-current-page{color:#066573} .ampstart-headerbar-nav .ampstart-nav-item.w-current-page:after,.anchor[selected]:after{content:'';display:block;height:4px;background:linear-gradient(90deg,#491e10 0,#ff004d)} aside li>a{text-decoration:none} .w-header{ background-image:linear-gradient(90deg,#491e10 0,#ff004d); padding:7rem 0; color:#fff; -webkit-clip-path: polygon(0 1%, 100% 25%, 100% 100%, 0 75%); clip-path: polygon(0 1%, 100% 25%, 100% 100%, 0 75%); } .w-components-sec-nav{min-width:200px;margin-top:-4.5rem;padding-top:4.5rem} .w-components-sec-nav >p { background:linear-gradient(90deg,#491e10 0,#ff004d); color: white; } .w-heading{letter-spacing:inherit;position:relative;font-size:1.5rem;} .ampstart-footer{position:relative} .ampstart-footer:before{content:"";position:absolute;width:100%;height:35px;background-image:linear-gradient(90deg,#491e10 0,#ff004d);top:0;left:0;right:0} .ampstart-device-preview-mask,.ampstart-device-preview-select{background:#f9f7f7} .ampstart-device-preview-select{box-shadow:0 0 5px 2px rgba(0,0,0,.1)} .w-component-desc{margin-bottom:5rem; padding-left:1rem;padding-right:1rem;line-height: 1.6} .w-component-desc h1{letter-spacing:inherit;background:linear-gradient(90deg,#491e10 0,#ff004d);color: white} .w-component-desc:target:before{content:"";display:block;height:3.5rem} .w-component-desc [placeholder]{background:#fff} .w-component-rendered{margin-top:3.5rem} .w-component-desc pre{white-space:pre-line;background:#f9f7f7;overflow-y:auto;margin:0} .w-example-code amp-accordion [expanded] h3:after{-webkit-transform:scaleY(-1);transform:scaleY(-1)}@media (max-width:40rem){.w-component-desc>*{padding-left:0;padding-right:0} .w-header>*{padding-left:0;padding-right:0}}@media (max-width:363px){.w-component-iframe-container>amp-iframe{-webkit-transform:scale(.792);transform:scale(.792);-webkit-transform-origin:0 0;transform-origin:0 0;width:343px}} :root{--font-family-serif:Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;--font-family-monospace:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;--color-primary:#005AF0} body{font-family:var(--font-family-serif)} .abe-sublist,.ampstart-nav-item .abe-list-container{opacity:0;pointer-events:none;position:absolute} .ampstart-btn-secondary,.ampstart-btn-secondary[disabled],.ampstart-btn-secondary[disabled]:focus,.ampstart-btn-secondary[disabled]:hover,a.ampstart-btn-secondary,a.ampstart-btn-secondary.disabled,a.ampstart-btn-secondary.disabled:focus,a.ampstart-btn-secondary.disabled:hover{color:#fff;background:#4508b6;border:1px solid #fff}@keyframes slideUp{0%{transform:translateY(100%);opacity:.5}100%{transform:translateY(0);opacity:1}}amp-consent{background:#fff;box-shadow:rgba(0,0,0,.26) 0 0 19px 0;animation:.5s ease-out 0s 1 slideUp} table {margin: 1em 0;} th {background-color: #6033d1; color: white;} tr.y {background-color: #18bc9c; font-weight: bold;} table td {border-right: dashed 1px black; border-bottom: solid 1px black;} table.row td {border-bottom: solid 1px black;} span.red {color: #B60000;} </style> </head> <body> <header class="ampstart-headerbar fixed flex justify-start items-center top-0 left-0 right-0 pl2 pr4"> <div role="button" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger md-hide lg-hide pr2">☰</div> <nav class="ampstart-headerbar-nav ampstart-nav xs-hide"> <ul class="list-reset m0 p0 flex justify-center nowrap"> <li class="ampstart-nav-item abe-nav-list"> <a href="tag.htm" class="text-decoration-none block">タグ</a> </li> <li class="ampstart-nav-item abe-nav-list"> <a href="macro_plg.htm" class="text-decoration-none block">マクロ・プラグイン</a> </li> <li class="ampstart-nav-item abe-nav-list w-current-page"> <a href="dev.htm" class="text-decoration-none block">開発者向け情報</a> </li> <li class="ampstart-nav-item abe-nav-list"> <a href="https://github.com/famibee/SKYNovel" class="text-decoration-none block">github</a> </li> <li class="ampstart-nav-item abe-nav-list"> <a href="https://famibee.blog.fc2.com/" class="text-decoration-none block">blog</a> </li> </ul> </nav> </header> <header class="w-header center" id="top-header"> <h1 class="mb1">SKYNovel 開発者向け情報</h1> <p class="block mb4 caps text-decoration-none">SKYNovel Information for developers</p>  </header> <main class="flex pl2 mt1"> <aside class="w-components-sec-nav col-3 xs-hide sm-hide relative"> <h3>項目一覧</h3> <p>入門編</p> <ul class="anchors list-reset m0 p0 px1"> <li class="mb1"><a href="#isit">SKYNovelとは</a></li> <li class="mb1"><a href="#howto_start">SKYNovelのはじめかた</a></li> <li class="mb1"><a href="#inst_vscode">VSCodeをインストール</a></li> <li class="mb1"><a href="#inst_vscex">拡張機能をインストール</a></li> <li class="mb1"><a href="#inst_other">あとは拡張機能 SKYNovel の指示に従って……</a></li> <li class="mb1"><a href="#start_tmp">テンプレートで始めよう</a></li> <li class="mb1"><a href="#remodel_title">改造してみよう</a></li> <li class="mb1"><a href="#autosave">（豆知識）VSCodeで自動保存</a></li> <li class="mb1"><a href="#script">スクリプトとは</a></li> <li class="mb1"><a href="#bracket">（豆知識）引用符っているの？　いらないの？</a></li> <li class="mb1"><a href="#replace_bgm">ＢＧＭ素材を差し替えよう</a></li> </ul> <p>初級テクニック</p> <ul class="anchors list-reset m0 p0 px1"> <li class="mb1"><a href="#upd_sn">SKYNovelを更新しよう</a></li> <li class="mb1"><a href="#lay">（未作成）レイヤなどについて</a></li> <li class="mb1"><a href="#materials">サポートする画像・音声ファイルなど</a></li> </ul> <p>中級テクニック</p> <ul class="anchors list-reset m0 p0 px1"> <li class="mb1"><a href="#val_debug">変数・定数の可視化機能</a></li> <li class="mb1"><a href="#reserve_value_save">組み込み変数・定数(save:)</a></li> <li class="mb1"><a href="#reserve_value_sys">組み込み変数・定数(sys:)</a></li> <li class="mb1"><a href="#reserve_value_tmp">組み込み変数・定数(tmp:)</a></li> <li class="mb1"><a href="#an2sn">AIRNovelからの変更点</a></li> <li class="mb1"><a href="#font">フォントの導入</a></li> <li class="mb1"><a href="#crypt">素材や・変数データを暗号化</a></li> <li class="mb1"><a href="#save_path">セーブデータの保存場所</a></li> <li class="mb1"><a href="#on_browser">ブラウザ版の公開方法</a></li> </ul> </aside> <article class="w-components flex-auto col-9"> <section class="w-component-desc"> <h1>入門編</h1> <h2 id="isit" class="w-heading">SKYNovelとは</h2> <h4>WebGL・JavaScriptを中心としたWeb技術によるノベルゲームシステムです。</h4> <p class="mb2 px1"> <ul type="disc"> <li>参考記事：<a href="https://famibee.blog.fc2.com/blog-entry-604.html">一般公開開始時の概要記事</a></li> <li><a href="https://famibee.github.io/SKYNovel_gallery/" target="_blank" rel="noopener">どんな事が出来るの？ What can SKYNovel do? sample</a><br/> ブラウザから直接動かせるサンプルギャラリーです（ソースファイル）</li> </ul> </p> <h2 id="howto_start" class="w-heading">SKYNovelのはじめかた</h2> <h4>すべてGUIによるインストールで、コマンドラインは触りません。</h4> <p class="mb2 px1"> <ul type="disc"> <li><a href="https://code.visualstudio.com/" target="_blank" rel="noopener">Visual Studio Code</a>（以後VSCode）をインストール</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=famibee.skynovel" target="_blank" rel="noopener">VSCode用拡張機能 SKYNovel</a> をインストール</li> <li>あとは拡張機能 SKYNovel の指示に従って……</li> </ul> </p> <h2 id="inst_vscode" class="w-heading">VSCodeをインストール</h2> <p class="mb2 px1"> VSCodeは多機能なテキストエディタで、SKYNovel開発環境のベースとなります。フリーウェアです。<br/> <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">ダウンロード</a>してインストールしていきます。<br/> <amp-img src="pic/inst_vscode0.webp" width="500" height="600" alt=""> <amp-img fallback src="pic/inst_vscode0.jpg" width="500" height="600" alt=""></amp-img> </amp-img><br/> <amp-img src="pic/inst_vscode1.png" width="484" height="120" alt=""></amp-img><br/> <br/> Macの場合も同様です。<br/> <amp-img src="pic/inst_vscode0m.png" width="292" height="79" alt=""></amp-img><br/> <amp-img src="pic/inst_vscode1m.png" width="480" height="120" alt=""></amp-img><br/> Macの場合はzipを解凍するとappファイルが入っていますので、それを「アプリケーション」フォルダに移動するだけです。<br/> <amp-img src="pic/inst_vscode2m.jpg" width="451" height="100" alt=""></amp-img><br/> あとはアプリケーションとして起動できます。<br/> <br/> <br/> 以後は Windowsの場合について解説していきます。<br/> exeを開くとインストーラーが起動します。<br/> <amp-img src="pic/inst_vscode1.png" width="484" height="120" alt=""></amp-img><br/> あとはよくあるソフトのインストールですが、注意点だけ赤丸しておきます。<br/> <amp-img src="pic/inst_vscode10.webp" width="510" height="401" alt=""> <amp-img fallback src="pic/inst_vscode10.jpg" width="510" height="401" alt=""></amp-img> </amp-img><br/> <amp-img src="pic/inst_vscode11.webp" width="508" height="397" alt=""> <amp-img fallback src="pic/inst_vscode11.jpg" width="508" height="397" alt=""></amp-img> </amp-img><br/> <amp-img src="pic/inst_vscode12.webp" width="508" height="394" alt=""> <amp-img fallback src="pic/inst_vscode12.jpg" width="508" height="394" alt=""></amp-img> </amp-img><br/> <amp-img src="pic/inst_vscode13.webp" width="506" height="395" alt=""> <amp-img fallback src="pic/inst_vscode13.jpg" width="506" height="395" alt=""></amp-img> </amp-img><br/> <amp-img src="pic/inst_vscode14.jpg" width="508" height="397" alt=""></amp-img><br/> <amp-img src="pic/inst_vscode15.jpg" width="506" height="393" alt=""></amp-img><br/> <amp-img src="pic/inst_vscode16.png" width="507" height="393" alt=""></amp-img><br/> インストールを完了し、起動できました。<br/> <amp-img src="pic/inst_vscode17.png" width="839" height="488" alt="" layout="responsive"></amp-img><br/> </p> <h2 id="inst_vscex" class="w-heading">VSCode用拡張機能 SKYNovel をインストール</h2> <h4>起動したVSCodeからインストールできます。</h4> <p class="mb2 px1"> 　左端の「Activity Bar」上から５つ目をクリックし、<br/> 検索窓に「SKYNovel」（大文字小文字関係なく）入力すると、<br/> （恐らく）famibeeと書いてあるのが一つだけ検索に引っかかるので「インストール」を押して下さい。それだけです。<br/> <amp-img src="pic/inst_vscex0.jpg" width="308" height="270"></amp-img><br/> <br/> 　ついでに VSCode を日本語化する、<a href="https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja" target="_blank" rel="noopener">Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace</a>拡張機能ぐらいは入れて置いた方が良いと思います。<br/> 　以降の説明では <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme" target="_blank" rel="noopener">Material Icon Theme - Visual Studio Marketplace</a> というのでアイコンもカラフルにしています。<br/> </p> <h2 id="inst_other" class="w-heading">あとは拡張機能 SKYNovel の指示に従って……</h2> <h4>Node.jsなどをインストールしていきます。</h4> <p class="mb2 px1"> 左端の「Activity Bar」に拡張機能 SKYNovelの「丸に紙飛行機」マークが表示されているので、クリックして下さい。<br/> <amp-img src="pic/inst_other0.jpg" width="135" height="396"></amp-img><br/> エラーっぽい表示がされています。同時に「SKYNovel開発環境　準備の手引き」というページが開かれていますので、あとはその指示に従ってインストールを続けて下さい。<br/> <amp-img src="pic/inst_other1.jpg" width="368" height="169"></amp-img><br/> （注意）「windows-build-tools」は Windows でのみ表示されます。<br/> </p> <h2 id="start_tmp" class="w-heading">テンプレートで始めよう</h2> <h4>すでに動くゲームをオープンソースで提供しており、これを改造していきます。</h4> <p class="mb2 px1"> 　例えば自作の小説本を出版するとします。<br/> 　その際、パルプの生成方法、紙の刷り方、印刷技術、装丁デザインの勉強等までする必要があるでしょうか？<br/> 　本来小説を書くというのは、紙とペンを用意し、書き始めることだけのはずです。<br/> 　良い小説を書くために「小説の書き方本」を読みあさり、知らない事を勉強する方向へ労力を注ぎ、胃を壊すぐらいコーヒーを飲みたいのではないでしょうか？<br/> 　同じように、まずはあなたの作品を造り上げることに専念して下さい。<br/> <br/> <br/> 　●ではどうやって本にするのか？<br/> 　今ここに本があります。<br/> 　梶井基次郎原作の短編ノベルゲーム「桜の樹の下には」または拙作「初音館にて」です。<br/> 　実はこれは鉛筆で書かれています。<br/> 　まずはこの本を消しゴム掛けして、元の文章をあなたの原作に書き換えてしまいましょう。<br/> 　本を作るところから、始める必要はありません。<br/> 　これはもちろんたとえ話ですが──同じようにして、あなたの本が完成するのです。<br/> <br/> 　作品を書いているうちに装丁を考えたり、紙質や手触りに凝ったりしたくなるかも知れません。<br/> 　その時は初級・中級・上級へと読み進めていって下さい。<br/> 　今度は小説を書く楽しみではなく、本を作る楽しみが待っています。<br/> <br/> 　どんなものか、お試しでやってみましょう。<br/> 　まずは、<a href="https://github.com/famibee/SKYNovel_hatsune/archive/master.zip" target="_blank" rel="noopener">横書きテンプレートプロジェクトの「初音館にて」</a>をダウンロードします。<br/> <amp-img src="pic/start_tmp1.png" width="238" height="59"></amp-img><br/> 　zipファイルを解凍すると、ゲームプロジェクトのフォルダが現われます。<br/> <amp-img src="pic/start_tmp2.jpg" width="423" height="230"></amp-img><br/> 　VSCodeの「フォルダーを開く...」で開きます。<br/> <amp-img src="pic/start_tmp3.jpg" width="425" height="271"></amp-img><br/> 　先ほど解凍したフォルダを選択します。<br/> <amp-img src="pic/start_tmp4.jpg" width="914" height="478" layout="responsive"></amp-img><br/> 　VSCodeでフォルダが開かれました。<br/> 　今後ゲーム開発は、このVSCodeの「フォルダーを開く...」で始めます。<br/> <amp-img src="pic/start_tmp10.jpg" width="1024" height="768" layout="responsive"></amp-img><br/> <br/> 　さて、ゲームをブラウザ上で起動してみましょう。<br/> 「Activity Bar」SKYNovelを選択し、<br/> 【ブラウザ版を起動】右の【再生ボタン】をクリック。<br/> <amp-img src="pic/start_tmp11v1_1_0.png" width="558" height="344"></amp-img><br/> 　すると、ブラウザが開いてWeb版のゲームが起動します。<br/> （初回だけ下準備があり、１分ほど待たされます）<br/> <amp-img src="pic/start_tmp18.jpg" width="1019" height="787" layout="responsive"></amp-img><br/> 　画像や音楽の素材を差し替えたり、スクリプトを書き換えたり。<br/> 　これを改造して、自分のゲームへと作り込んでいくわけです。<br/> </p> <h2 id="remodel_title" class="w-heading">改造してみよう</h2> <h4>テンプレートを改造してみましょう。まずはタイトル画面から。</h4> <p class="mb2 px1"> 　自由な文字列からボタンを作れる「文字ボタン」という機能があります。<br/> 　テンプレートのタイトル画面でも使用されていますので、これを変更してみましょう。<br/> <amp-img src="pic/remodel_title0.jpg" width="1024" height="768" layout="responsive"></amp-img><br/> 「Activity Bar」一番上の「エクスプローラー」を選択します。<br/> 　【prj/script フォルダ】下の【main.sn】をクリックすると、そのファイルが開かれます。<br/> 　この拡張子【.sn】のファイルはスクリプトというテキストファイルで、シナリオや様々な演出はこのファイルを変更・記述していきます。<br/> <amp-img src="pic/remodel_title1.jpg" width="1024" height="768" layout="responsive"></amp-img> <br/> 「わけの分からないことが書いてある！　意味不明！」<br/> 　ですが、いまは置いといてください。おいおい解説しますので。<br/> <br/> （余談）（慣れればお好きなテキストエディタで変更して構いません）<br/> ※文字コードはUTF-8、改行コードは LF 固定です。文字コード・改行コードを間違うミスに注意。<br/> <br/> 　ここで55行目付近にある「ロード」という文字を「つづきから」に変えてみます。<br/> 　メニューの【ファイル】-【保存】、あるいは Ctrl+Sショートカットで保存します。<br/> <amp-img src="pic/remodel_title2.jpg" width="1024" height="768" layout="responsive"></amp-img><br/> 　ブラウザの再読み込みボタンを押します。<br/> <amp-img src="pic/remodel_title3.jpg" width="474" height="278" layout="responsive"></amp-img><br/> 　文字が変更されました！　ボタンもちゃんと押せます。<br/> <amp-img src="pic/remodel_title4.jpg" width="1024" height="768" layout="responsive"></amp-img><br/> 　さて、いまわざと触れませんでしたが、いま変更したのは「[button]タグのtext属性」というものです。<br/> 「タグ？？？　属性？？？」<br/> 　新しい言葉が出てきましたね。タグについて解説していきます。<br/> </p> <h2 id="autosave" class="w-heading">（豆知識）VSCodeで自動保存</h2> <h4>スクリプトを変更するたびに保存を選んだり、毎回ショートカットを押すのは面倒！</h4> <p class="mb2 px1"> 　そこで、VSCode に保存を任せてしまいましょう。<br/> 　こちらの記事を参考に、VSCode を便利に設定してみて下さい。<br/> 　　→<a href="https://notti-blog.com/entry/vscode-auto-save/" target="_blank" rel="noopener">[VS Code] 自動保存するように設定する | あいすのブログ</a> 　<a href="http://web.archive.org/web/20190521162502/https://notti-blog.com/entry/vscode-auto-save/" target="_blank" rel="noopener">（web.archive.org）</a><br/> <amp-img src="pic/vscode_autosave.jpg" width="725" height="373" layout="responsive"></amp-img> （注意）設定画面の「ダーティーファイル」というのは、「変更したけど保存してないファイル」という意味合いです。<br/> <br/> 　自分も「onFocusChange」にしてます。別のアプリをクリックしただけで保存してくれます。この辺はお好みで。<br/> 　スクリプトの変更を戻したい場合は、メニューの【編集】-【元に戻す】にて。「アンドゥ（UNDO）」というやつです。<br/> <br/> 　VSCode には他にも様々な便利設定があります。どんどん使いやすくしていきましょう！<br/> </p> <h2 id="script" class="w-heading">スクリプトとは</h2> <h4>スクリプトってなんでしょう？</h4> <p class="mb2 px1"> 　SKYNovelにおけるスクリプトとは、<br/> 　テキストファイルに書いた「小説」に、タグなどによる「演出」を書き加えたものです。<br/> <br/> 　実際に見てみましょう。【main.sn】と同じフォルダにある、【ss_000.sn】を開いて下さい。<br/> <amp-img src="pic/script0.png" width="379" height="285"></amp-img><br/> <br/> 「小説」は【君の部屋に行こう】という文字の部分です。<br/> 「タグなどの命令」は「[」と「]」の半角文字の大括弧に挟まれた、英語や数字や記号の部分です。<br/> <amp-img src="pic/script1.jpg" width="480" height="451"></amp-img><br/> （余談）「;」で始まる部分はコメントや注釈と呼ばれるもので、制作者がメモを書ける機能です。SKYNovel 自体は読み飛ばしますので、スルーして下さい。<br/> <br/> 　７行目は「[r]」ですね。これを今後は「タグ名が r だ」と言い、「rタグ」と呼び、今後この文章（SKYNovel 開発者向け情報）では[r]と書きます。<br/> <br/> 【bg=white】とか【visible=false】とか、たくさん「おまけ」が付いてる[grp]や18行目の[plc]に注目です。<br/> 「おまけ」は、「属性」と呼びます。<br/> 　一つの働きをするタグに、細かい指示をする記述の事です。<br/> 　半角空白や改行で途切れて、複数指定できます。（タグがサポートしてない属性は無視されます）<br/> <br/> 　属性って色んなものにありますよね。<br/> 　呪文にも「タイプは炎系。力の源は闇。攻撃力は２５。水棲生物に強い」<br/> 　女性キャラクターなら「年齢は十四歳。メガネは必須！　髪色は黒髪、背はちょっと高めなのを気にしている。スリーサイズはそれぞれ……」<br/> 　某ラーメン屋なら「アブラナシヤサイカラメマシニンニクスクナメ」<br/> <br/> 　同様に[sys_scenario_start]、最後に[grp]などなど。<br/> 　それぞれが小さな機能を持っています。それらを積み木のように組み合わせて、演出をしていきます。<br/> <br/> 　試しに [r] について知りましょう。<br/> 　タグの機能については「タグリファレンス」というWeb上の資料で確認できます。<br/> 　このページの左上の【タグ】からでもいいですが、リンクを張っておきます。<br/> 　　→<a href="tag.htm#r" target="_blank" rel="noopener">SKYNovel タグリファレンス Tag Reference [r]</a><br/> 「文字レイヤ」とか「ページ」とか色々不明の言葉がありますが──<br/> 　とにかく、【改行を出力する】機能を持っています。<br/> <br/> <br/> 　タグは言うなれば魔法の呪文。<br/> 　RPGなら暗い洞窟を明るく照らしたり、仲間の体力を回復したり、扉の鍵を開けたり。<br/> 　呪文は一つ一つに意味があり、役割があります。便利で頼りになる道具です。<br/> 　でも瀕死の仲間を明るく照らしたり、扉の体力（？）を回復したりしても意味はありません。<br/> 　タグの使い道を正しく理解し、よりよいノベルゲーム制作という冒険を進めましょう。<br/> <br/> 「タグなどの命令」は一見ややこしく難しそうに見えます。<br/> 　ですが、「今すぐ」「全てを」理解する必要はありません。<br/> 　<a href="tag.htm" target="_blank" rel="noopener">タグリファレンス</a>というカンニングペーパー、辞書があります。<br/> 　タグを使いこなすのに、「あんなタグがあったな」となんとなく憶えておけば、あとはタグリファレンスという辞書を引きながら記述していけばよいのです。<br/> <br/> <br/> 　例えばさっき「ロード」という文字を「つづきから」に変えたのは、<a href="tag.htm#button" target="_blank" rel="noopener">[button]</a> タグの text属性を変更したのだった、というわけです。<br/> <amp-img src="pic/remodel_title1.jpg" width="1024" height="768" layout="responsive"></amp-img> </p> <h2 id="bracket" class="w-heading">（豆知識）引用符っているの？　いらないの？</h2> <h4>属性の値の引用符について。</h4> <p class="mb2 px1"> 　引用符、すなわち。<br/> 　属性の値でアポストロフィー【'】やクオーテーションマーク【"】で囲っていたりいなかったり、表記が揺れているのが分かるでしょうか？<br/> 　先ほど変更した[button]ですら、三種類が混在しています。<br/> <br/> [button text='つづきから' left=350 top=360 width=90 call=true label=*load hint="セーブ箇所から続ける" enterse=&sysse_choice clickse=&sysse_ok1]<br/> <br/> 　これはどの書き方でも同じ動作をします。ので、制作上はどれでも構いません。<br/> （見た目があまり美しくないので、揃えたほうが良さげですが……）<br/> 　ただ、「引用符に囲まないと半角空白が表現できない」などの理由で、この文法が用意されています。<br/> 　変更前に text=' ロード ' という記述だったのもそれです。<br/> （引用符を使わないと、属性の区切りと見なされエラーになってしまいます）<br/> <br/> 引用符を文字として値にしたい場合もあります。<br/> その場合は text='太郎"うひょー"' という感じで指定できます。<br/> 両方の引用符を使いたいときは……？<br/> 実は【#】（半角いげたマーク）も引用符に使えるようになっています。<br/> text=#太郎"うひょー"　花子'むきょー'#<br/> <br/> 　では三種類の引用符を同時に文字としたいときは……？<br/> 　ここでは割愛しますが、後に説明する「変数」という箱に入れてから使用することになるかと思います。<br/> </p> <h2 id="replace_bgm" class="w-heading">ＢＧＭ素材を差し替えよう</h2> <h4>素材を差し替えて、よりあなたの作品らしく</h4> <p class="mb2 px1"> 　audio フォルダに様々な mp3 ファイルが入っています。<br/> 　これらは効果音やＢＧＭ（バックグラウンドミュージック）のファイルです。<br/> 　タイトル画面でもＢＧＭが流れていますが、これを変更してみましょう。<br/> <amp-img src="pic/replace_bgm0.jpg" width="379" height="285"></amp-img><br/> 　再び【main.sn】を開いて、64行目辺りにある<a href="macro_plg.htm#bgm" target="_blank" rel="noopener">[bgm]</a>に注目して下さい。<br/> <br/> 　fn="free10" となっているので、値をfree04に変更してみましょう。<br/> 　拡張子は省略できる、というのもポイントです。<br/> <br/> 　ページを再読み込みすると、なんだか明るい雰囲気のタイトル画面になりました。<br/> 　画像素材なども同じように変更・差し替えていくことができます。<br/> </p> <h1>初級テクニック</h1> <h2 id="upd_sn" class="w-heading">SKYNovelを更新しよう</h2> <h4>SKYNovelは随時更新されています。更新の通知と手段を知りましょう</h4> <p class="mb2 px1"> 　VSCode起動時、時々右下にポップアップが現われることがあります。<br/> <amp-img src="pic/upd_sn0.png" width="463" height="139"></amp-img><br/> 　上部【開発環境】にネット上の最新バージョン、<br/> 　下部【開発ツール】にあなたのPC/Mac上のバージョンが表示されます。<br/> 　値が異なりますね。最新版に更新しましょう。<br/> <amp-img src="pic/upd_sn1.jpg" width="324" height="404"></amp-img><br/> 　とはいっても、右にあるボタンを押すだけです。<br/> 　しばらく待つと、最新バージョンに更新されます。簡単ですね。<br/> <amp-img src="pic/upd_sn2.png" width="488" height="194"></amp-img><br/> </p> <h2 id="lay" class="w-heading">（レイヤなどについて）</h2> <h4>（未作成）</h4> <p class="mb2 px1"> 　SKYNovel でも AIRNovel と概念は変わらないので、AIRNovel の解説文へのリンクでお茶を濁します。いずれ書きなおしたいです……。<br/> 　　→<a href="https://famibee.web.fc2.com/tag_dev/dev.htm#layer">AIRNovel 開発者向け情報</a><br/> <br/> （予定稿・順不同）<br/> レイヤとは<br/> レイヤには裏表がある<br/> 使用できる素材ファイル<br/> フォルダの追加削除<br/> ジャンプしてみる<br/> 選択肢を作る<br/> スクリプト文法・詳細編<br/> <br/> マクロ<br/> </p> <h2 id="materials" class="w-heading">サポートする画像・音声ファイルなど</h2> <h4>（未作成）</h4> <p class="mb2 px1"> 　サポートする素材ファイルの種類（拡張子）<br/> <br/> ・・スクリプト<br/> 　　拡張子 sn のUTF-8・LF改行のテキストファイル（AIRNovel では an でした）<br/> <br/> ・・画像・動画・アニメ系<br/> 　　png、jpg、jpeg、svg、mp4<br/> 　　スプライトシート json と png（または jpeg）<br/> <br/> ・・ＢＧＭ・音声系<br/> 　　mp3、m4a、ogg、aac、webm、flac、wav<br/> 　　※ただしブラウザ版はブラウザがサポートするモノのみ。<br/> 　　　アプリ版は Electron の Chromiumがサポートするモノのみ（aac以外）です。<br/> <br/> ・・フォント<br/> 　　woff2、otf、ttf<br/> </p> <h1>中級テクニック</h1> <h2 id="val_debug" class="w-heading">変数・定数の可視化機能</h2> <h4>デベロッパーツールから変数や定数を確認できる機能です。</h4> <p class="mb2 px1"> 　ブラウザ版では、デベロッパーツール（ChromeやSafariの機能）を開いて【Application】-【Local Storage】から、システム変数(sys:)などの内容が見えます。<br/> ※直接値の変更・クリアができます。jsonで記入して下さい。<br/> ※暗号化もします。<br/> <amp-img src="pic/val_debug0.png" width="934" height="602" layout="responsive"></amp-img> 　またプロジェクトファイル（prj.json）を右クリック-【SKYNovel GUIで編集する】から【variable】にチェックすると、 <amp-img src="pic/val_debug1a.png" width="568" height="514" layout="responsive"></amp-img> <amp-img src="pic/val_debug1b.png" width="515" height="275" layout="responsive"></amp-img> 全ての変数が可視化されます。（Session Storageのほうに表示される）<br/> ※こちらは値の変更をサポートしていません。[s][l]などの停止時に出力するだけです。<br/> ※暗号化ON/OFFも予定しています。<br/> <amp-img src="pic/val_debug2.png" width="674" height="368" layout="responsive"></amp-img> </p> <h2 id="reserve_value_save" class="w-heading">組み込み変数・定数(save:)</h2> <h4>SKYNovelが値を設定している変数や定数です。起動直後から使えます。</h4> <p class="mb2 px1"> const.sn.〜、sn.〜という名前はSKYNovelが使いますので、皆さんは新規に作成しないで下さい。<br/> 以下の表にあるモノを使うの（読み・書き）は全然ＯＫです！<br/> <br/> 冒頭がconstな変数は、書く（設定）することができません。<br/> constでない変数は、設定するとその値がシステムに反映されます。<br/> 例えば「&sn.auto.enabled=true」は自動読みすすみモードを有効にします。 <table><tr><th>変数名</th><th>初期値</th><th>値域・型</th><th>コメント</th></tr> <tr><td>save:const.sn.autowc.enabled</td><td>false</td><td>Boolean</td><td>[<a href="tag.htm#current" target="_blank" rel="noopener">autowc</a>]（文字ごとのウェイト）enabled属性で指定した値。</td></tr> <tr><td>save:const.sn.autowc.text</td><td rowspan="2">''</td><td rowspan="2">String</td><td rowspan="2">[<a href="tag.htm#current" target="_blank" rel="noopener">autowc</a>]（文字ごとのウェイト）同名属性で指定した値。<br/> カンマ区切りで複数文字設定可能。ただしtextとtimeは常に同数にすること。設定は常にリセット＆上書き<br/> [autowc enabled=true text="二六八" time="500,1000,1500"] </td></tr> <tr><td>save:const.sn.autowc.time</td></tr> <tr><td>save:const.sn.mesLayer</td><td>''</td><td>String</td><td>デフォルト文字レイヤ。レイヤ指定を省略した時はこの値が使われる。[<a href="tag.htm#current" target="_blank" rel="noopener">current</a>]で変更できる</td></tr> <tr><td>save:sn.doRecLog</td><td>false</td><td>Boolean</td><td>テキストを履歴に記録するか</td></tr> <tr><td>save:const.sn.sLog</td><td>''</td><td>String</td><td> 履歴テキスト<br/> 【2019/12/18】内容が const.sn.log.json と同様に。<br/> →以前は、'\f'区切りの妙なフォーマットだった。 </td></tr> <tr><td>save:const.sn.loopPlaying</td><td>'{}'</td><td>json</td><td>ループ中のサウンドバッファ</td></tr> <tr><td>save:const.sn.scriptFn</td><td>''</td><td>スクリプト名</td><td>最後に[<a href="tag.htm#record_place" target="_blank" rel="noopener">record_place</a>]したスクリプト名</td></tr> <tr><td>save:const.sn.scriptIdx</td><td>0</td><td>Integer</td><td>最後に[<a href="tag.htm#record_place" target="_blank" rel="noopener">record_place</a>]したスクリプトインデックス（行番号ではなく内部トークン単位）</td></tr> <tr><td>save:const.sn.layer.（文字レイヤ名）.enabled</td><td>true</td><td>Boolean</td><td>文字レイヤのenabled値</td></tr> </table> </p> <h2 id="reserve_value_sys" class="w-heading">組み込み変数・定数(sys:)</h2> <h4>SKYNovelが値を設定している変数や定数です。起動直後から使えます。</h4> <p class="mb2 px1"> const.sn.〜、sn.〜という名前はSKYNovelが使いますので、皆さんは新規に作成しないで下さい。<br/> 以下の表にあるモノを使うのは全然ＯＫです！<br/> <br/> constでない変数は、設定するとその値がシステムに反映されます。<br/> 例えば「&sn.auto.enabled=true」は自動読みすすみモードを有効にします。 <table><tr><th>変数名</th><th>初期値</th><th>値域・型</th><th>コメント</th></tr> <tr><td>sys:TextLayer.Back.Alpha</td><td>1</td><td>0.0〜1.0</td><td>バック不透明度。テキストウインドウの背景の濃度。0.0で透明、1.0で不透明。</td></tr> <tr><td>sys:const.sn.nativeWindow.x</td><td>0</td><td rowspan="2">画面左上を(0, 0)とする座標</td><td rowspan="2">アプリウインドウの座標。[<a href="tag.htm#window" target="_blank" rel="noopener">window</a>]で変更できる</td></tr> <tr><td>sys:const.sn.nativeWindow.y</td><td>0</td></tr> <tr><td>sys:const.sn.save.place</td><td>1</td><td>1〜</td><td>次のセーブplaceを示す</td></tr> <tr><td>sys:const.sn.sound.BGM.volume</td><td rowspan="4">1</td><td rowspan="4">0.0〜1.0</td><td>BGMの基準音量（buf="BGM"の効果音）<br/>[<a href="tag.htm#volume" target="_blank" rel="noopener">volume</a>]で変更できる</td></tr> <tr><td>sys:const.sn.sound.SE.volume</td><td>効果音の基準音量（buf="SE"の効果音）<br/>[<a href="tag.htm#volume" target="_blank" rel="noopener">volume</a>]で変更できる</td></tr> <tr><td>sys:const.sn.sound.SYS.volume</td><td>システムの基準音量（buf="SYS"の効果音）<br/>[<a href="tag.htm#volume" target="_blank" rel="noopener">volume</a>]で変更できる</td></tr> <tr><td>sys:const.sn.sound.【buf】.volume</td><td>システムの基準音量（buf="【buf】"の効果音）<br/>[<a href="tag.htm#volume" target="_blank" rel="noopener">volume</a>]で変更できる<br/>任意のbuf属性を指定した[<a href="tag.htm#playse" target="_blank" rel="noopener">playse</a> buf=【buf】] 実行で自動で生まれる変数</td></tr> <tr><td>sys:sn.auto.msecLineWait</td><td>500</td><td>Integer</td><td>未読テキストの改行待ち時間（ミリ秒）<br/>※ここでの改行とは[l]の事</td></tr> <tr><td>sys:sn.auto.msecLineWait_Kidoku</td><td>500</td><td>Integer</td><td>既読テキストの改行待ち時間（ミリ秒）<br/>※ここでの改行とは[l]の事</td></tr> <tr><td>sys:sn.auto.msecPageWait</td><td>3500</td><td>Integer</td><td>未読テキストの改ページ待ち時間（ミリ秒）<br/>※ここでの改ページとは[p]の事</td></tr> <tr><td>sys:sn.auto.msecPageWait_Kidoku</td><td>3500</td><td>Integer</td><td>既読テキストの改ページ待ち時間（ミリ秒）<br/>※ここでの改ページとは[p]の事</td></tr> <tr><td>sys:sn.skip.mode</td><td>'s'</td><td>String</td><td>スキップモード。<br/> sn.skip.enabled = trueの際、改行待ちや改ページ待ちをスキップするかどうかの動作を指定する。<br/> 'l' …… 改行待ち=する、改ページ待ち=する<br/> 'p' …… 改行待ち=しない、改ページ待ち=する<br/> 's' …… 改行待ち=しない、改ページ待ち=しない<br/> （初期値="s"）</td></tr> <tr><td>sys:sn.tagCh.canskip</td><td>true</td><td>Boolean</td><td>テキストをクリックなどでスキップ可能か</td></tr> <tr><td>sys:sn.tagCh.doWait</td><td>true</td><td>Boolean</td><td>未読テキストにウェイトを掛けるか</td></tr> <tr><td>sys:sn.tagCh.doWait_Kidoku</td><td>true</td><td>Boolean</td><td>既読テキストにウェイトを掛けるか</td></tr> <tr><td>sys:sn.tagCh.msecWait</td><td>10</td><td>Integer</td><td>未読テキスト待ち時間（ミリ秒）</td></tr> <tr><td>sys:sn.tagCh.msecWait_Kidoku</td><td>10</td><td>Integer</td><td>既読テキスト待ち時間（ミリ秒）</td></tr> </table> </p> <h2 id="reserve_value_tmp" class="w-heading">組み込み変数・定数(tmp:)</h2> <h4>SKYNovelが値を設定している変数や定数です。起動直後から使えます。</h4> <p class="mb2 px1"> const.sn.〜、sn.〜という名前はSKYNovelが使いますので、皆さんは新規に作成しないで下さい。<br/> 以下の表にあるモノを使うのは全然ＯＫです！<br/> <br/> constでない変数は、設定するとその値がシステムに反映されます。<br/> 例えば「&sn.auto.enabled=true」は自動読みすすみモードを有効にします。 <table><tr><th>変数名</th><th>初期値</th><th>値域・型</th><th>コメント</th></tr> <tr><td>const.Date.getDateStr</td><td>取得の瞬間の日時</td><td>"2019/02/10 15:47"形式</td><td>変数参照時の日時を返す</td></tr> <tr><td>const.Date.getTime</td><td>ミリ秒</td><td>Integer</td><td>JavaScriptの(new Date).getTime()</td></tr> <tr><td>const.Stage.mouseX</td><td>0</td><td>Integer</td><td>マウス水平座標</td></tr> <tr><td>const.Stage.mouseY</td><td>0</td><td>Integer</td><td>マウス垂直座標</td></tr> <tr><td>const.sn.bookmark.json</td><td>'[]'</td><td>Array</td><td>SKYNovel内部によるsave:の管理用</td></tr> <tr><td>const.sn.config.（略）</td><td></td><td></td><td> prj.jsonの内容を返す。<br/> 例えば「const.sn.config.window.width」だと画面の横幅を返す。 </td></tr> <tr><td>const.sn.displayState</td><td>false</td><td>Boolean</td><td>ウインドウ・フルスクリーン状態。trueならフルスクリーン</td></tr> <tr><td>const.sn.frm.（フレーム名）</td><td>true</td><td>Boolean</td><td>[add_frame]でロードされた id属性が存在するか</td></tr> <tr><td>const.sn.frm.（フレーム名）.alpha</td><td>1</td><td>Number</td><td>フレームの不透明度</td></tr> <tr><td>const.sn.frm.（フレーム名）.x</td><td>0</td><td rowspan="2">画面左上を(0, 0)とする座標</td><td rowspan="2">フレームの座標。leftやtopでないことに注意</td></tr> <tr><td>const.sn.frm.（フレーム名）.y</td><td>0</td></tr> <tr><td>const.sn.frm.（フレーム名）.scale_x</td><td>1</td><td>Boolean</td><td>cssでのtransform: scaleの値</td></tr> <tr><td>const.sn.frm.（フレーム名）.scale_y</td><td>1</td><td>Boolean</td><td>cssでのtransform: scaleの値</td></tr> <tr><td>const.sn.frm.（フレーム名）.rotate</td><td>0</td><td>Boolean</td><td>cssでのrotate、回転角度（単位：deg 度）、正の値は時計回り</td></tr> <tr><td>const.sn.frm.（フレーム名）.width</td><td>prjのアプリ横幅画面サイズ</td><td>Integer</td><td>フレームの横幅</td></tr> <tr><td>const.sn.frm.（フレーム名）.height</td><td>prjのアプリ縦幅画面サイズ</td><td>Integer</td><td>フレームの縦幅</td></tr> <tr><td>const.sn.frm.（フレーム名）.visible</td><td>true</td><td>Boolean</td><td>フレームが表示されているか。visible属性の値を返す</td></tr> <tr><td>const.sn.isApp</td><td>false</td><td>Boolean</td><td>ランタイム環境のタイプ（仕様策定中）</td></tr> <tr><td>const.sn.isDarkMode</td><td>環境による</td><td>Boolean</td><td>ダークモードか</td></tr> <tr><td>const.sn.isDebugger</td><td>true</td><td>Boolean</td><td>ブラウザ実行、それもVSCode・npmによる「npm: webタスク」上での実行か</td></tr> <tr><td>const.sn.isFirstBoot</td><td>false</td><td>Boolean</td><td>ゲームがインストールされてから、初めての起動か（起動されるまでデータが空だったか）</td></tr> <tr><td>const.sn.isKidoku</td><td>true</td><td>Boolean</td><td>この変数を参照した位置は既読か。参照「後」必ず既読になる点に注意</td></tr> <tr><td>const.sn.key.alternate</td><td>false</td><td>Boolean</td><td>ALTキー（MacならOptionキー）が押されているか</td></tr> <tr><td>const.sn.key.back</td><td>false</td><td>Boolean</td><td>back 〃</td></tr> <tr><td>const.sn.key.command</td><td>false</td><td>Boolean</td><td>command 〃</td></tr> <tr><td>const.sn.key.control</td><td>false</td><td>Boolean</td><td>control 〃</td></tr> <tr><td>const.sn.key.end</td><td>false</td><td>Boolean</td><td>end 〃</td></tr> <tr><td>const.sn.key.escape</td><td>false</td><td>Boolean</td><td>escape 〃</td></tr> <tr><td>const.sn.last_page_text</td><td>''</td><td>String</td><td>そのページの履歴テキスト（《》文法もそのまま）</td></tr> <tr><td>const.sn.lay.（レイヤ名）</td><td>true</td><td>Boolean</td><td>レイヤが[add_lay]され存在するか</td></tr> <tr><td>const.sn.lay.（レイヤ名）.（foreかback）.alpha</td><td>0.0〜1.0</td><td>Number</td><td>レイヤの不透明度</td></tr> <tr><td>const.sn.lay.（レイヤ名）.（foreかback）.width</td><td>1</td><td>Integer</td><td>レイヤの横幅。ただし文字レイヤの場合は1、画像レイヤの場合、画像読込後でないと0</td></tr> <tr><td>const.sn.lay.（レイヤ名）.（foreかback）.height</td><td>1</td><td>Integer</td><td>レイヤの縦幅。ただし文字レイヤの場合は1、画像レイヤの場合、画像読込後でないと0</td></tr> <tr><td>const.sn.lay.（レイヤ名）.（foreかback）.visible</td><td>true</td><td>Boolean</td><td>レイヤが表示されているか。visible属性の値を返す</td></tr> <tr><td>const.sn.lay.（レイヤ名）.（foreかback）.x</td><td>0</td><td rowspan="2">画面左上を(0, 0)とする座標</td><td rowspan="2">レイヤの座標。leftやtopでないことに注意</td></tr> <tr><td>const.sn.lay.（レイヤ名）.（foreかback）.y</td><td>0</td></tr> <tr><td>const.sn.Math.PI</td><td>3.141592653589793</td><td>Number</td><td>円周率</td></tr> <tr><td>const.sn.needClick2Play</td><td>環境による</td><td>Boolean</td><td>ブラウザ実行で、クリックされるまで音声再生が差し止められている状態か。なにかクリックされれば falseになる</td></tr> <tr><td>const.sn.platform</td><td>環境による</td><td>JSON文字列</td><td> プラットフォーム情報。詳細は<a href="https://github.com/bestiejs/platform.js/blob/master/doc/README.md#platformosfamily" target="_blank" rel="noopener">Platform.js </a>を参照のこと。<br/> 例えば <a href="https://github.com/bestiejs/platform.js/blob/master/doc/README.md#platformosfamily" target="_blank" rel="noopener">const.sn.platform.os.family</a> だと、「OS X」「Android」などを返す </td></tr> <tr><td> <span style="text-decoration: line-through">const.sn.sLog</span>【2019/07/28変名】<br/> const.sn.log.json </td><td>"[{'txt':'}]"</td><td>左記JSON文字列</td><td>_log.snが_log.htmに渡す用、１ページずつ{}に分割してjson化して返す</td></tr> <tr><td>const.sn.sound.codecs</td><td>環境による</td><td>JSON文字列</td><td> ゲーム実行環境がこのコーデックをサポートしているか。<br/> flac、m4a、mp3、ogg、wav、webmなど </td></tr> <tr><td>const.sn.vctCallStk.length</td><td>0</td><td>Integer</td><td>コールスタックの深さ（[call]するたびに増）</td></tr> <tr><td>sn.auto.enabled</td><td>false</td><td>Boolean</td><td>自動読みすすみモードかどうか</td></tr> <tr><td>sn.button.fontFamily</td><td>"'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif"</td><td>String</td><td>文字ボタンフォントを指定</td></tr> <tr><td>sn.event.domdata.（任意）</td><td>''</td><td>場合による</td><td>[<a href="tag.htm#event" target="_blank" rel="noopener">event</a>]でフレーム内のHTML要素に登録したイベントで、そのイベント発生時、HTML要素のdata-（任意）属性で指定された値。使い道は開発者が自由に決めていい</td></tr> <tr><td>sn.eventArg</td><td>''</td><td>場合による</td><td>[<a href="tag.htm#button" target="_blank" rel="noopener">button</a>]等のイベント発生時、そのボタンタグのarg属性で指定された値。使い道は開発者が自由に決めていい</td></tr> <tr><td>sn.eventLabel</td><td>''</td><td>場合による</td><td>[<a href="tag.htm#button" target="_blank" rel="noopener">button</a>]等のイベント発生時、そのボタンタグのlabel属性で指定された値。使い道は開発者が自由に決めていい</td></tr> <tr><td>sn.skip.all</td><td>false</td><td>Boolean</td><td>false（初期値）なら既読のみをスキップ</td></tr> <tr><td>sn.skip.enabled</td><td>false</td><td>Boolean</td><td>次の選択肢(/未読)まで進む　が有効か</td></tr> <tr><td>sn.tagL.enabled</td><td>true</td><td>Boolean</td><td>頁末まで一気に読み進むか(l無視)</td></tr> </table> </p> <h2 id="an2sn" class="w-heading">AIRNovelからの変更点</h2> <h4>AIRNovelからの変更点をざっくり説明します。</h4> <p class="mb2 px1"> <ul type="disc"> <li>組み込み変数名が変わりました。<br/>旧）save:const.<span class="red" style="font-weight: bold;">an</span>.scriptFn<br/>新）save:const.<span style="color: blue; font-weight: bold;">sn</span>.scriptFn</li> <li>定数が変数になったモノも。<br/>例）const.an.eventArg → sn.eventArg</li> </ul> 詳細は当ページの「組み込み変数」関連の記事をご覧下さい。<br/> </p> <h2 id="font" class="w-heading">フォントの導入</h2> <h4>フォントの導入・指定方法について解説していきます。</h4> <p class="mb2 px1"> <h4>1.フォントを準備</h4> <p class="mb2 px1"> ※以下をサンプルとして話を進めます。字形が多いのでだいたい入ってるだろうし。<br/> ・<a href="https://forest.watch.impress.co.jp/library/software/ipamjfont/" target="_blank" rel="noopener">「IPAmj明朝フォント」戸籍統一文字などに含まれる6万字の漢字を収録したフォント - 窓の杜</a><br/> ・【参考資料】<a href="http://www.hirok-k.com/blog/751.html" target="_blank" rel="noopener">日本語フリーフォントをwebフォント化する4ステップ / hirok-k.com</a><br/> </p> <h4>2.使用する字形だけ入ったフォントファイルを作成</h4> <p class="mb2 px1"> ・<a href="https://opentype.jp/subsetfontmk.htm">サブセットフォントメーカー</a>（Win / Mac版あり）<br/> 【フォントに格納する文字】へ本文をコピペして、ツールに貼って変換します。<br/> ※【書体名を変更する】は使わない<br/> ※ただ縦書きフォントでは「──」を渡すと上手くいかないので、入れない。<br/> <br/> 全ての文字が入ったフォントファイルは大きすぎる。ロード時間も掛かる。<br/> 上記手順で、「初音館にて」ではサイズが1/100ほどになった。<br/> ・ipamjm.woff2<br/> 　　23.1MB（全部入り）<br/> 　　344 KB（初音館で使用しているモノのみ）<br/> 　　343540 /23065440 = 0.014894145<br/> </p> <h4>3.（可能なら圧縮率の高い）woff2に変換</h4> <p class="mb2 px1"> ・<a href="https://memorva.jp/memo/html/css_webfont_woff_woff2_converter_henkan_soft.php">WebフォントWOFF、WOFF2形式に変換できるフリーソフト</a><br/> ・<a href="https://opentype.jp/woffconv.htm">WOFFコンバータ</a>（Win / Mac版あり）<br/> 　SKYNovelがサポートするフォント拡張子は「woff2, otf, ttf」です。※ブラウザによる<br/> </p> <h4>4.生成ファイルをプロジェクトフォルダにコピー</h4> <p class="mb2 px1"> ※どこでもいいが、サンプルでは script フォルダに。 </p> <h4>5.sub.sn の「def_fonts」でフォント名を指定すると、本文に反映される</h4> <p class="mb2 px1"> <amp-img src="pic/font0.jpg" width="500" height="144" layout="responsive"></amp-img> sn.button.fontFamily で文字ボタンのフォントを指定できます。<br/> </p> <h4>6.部分的・一時的に変更したい場合は、</h4> <p class="mb2 px1"> [span style='font-family: QuiMi_mincho;']フォント[span] などと使う。<br/> 戻すときも同様。<br/> </p> </p> <h2 id="crypt" class="w-heading">素材や・変数データを暗号化</h2> <h4>暗号化機能について解説していきます。</h4> <p class="mb2 px1"> <h4>1.暗号化する</h4> <p class="mb2 px1"> ※<a href="https://marketplace.visualstudio.com/items?itemName=famibee.skynovel" target="_blank" rel="noopener">VSCode用拡張機能 SKYNovel</a> の【開発ツール】の【暗号化】がその機能です。<br/> <amp-img src="pic/crypt0.png" width="500" height="360" layout="responsive"></amp-img> <br/> 「暗号化」の「しない」を「する」に変更すると、暗号化します。<br/> <amp-img src="pic/crypt1.png" width="500" height="128" layout="responsive"></amp-img> </p> <h4>2.「snスクリプト」「path.json」「prj.json」などの様子</h4> <p class="mb2 px1"> ※暗号化ファイルは、「prj下」から「crypt_prj下」に変換・出力されます。<br/> <amp-img src="pic/crypt2.jpg" width="500" height="1688" layout="responsive"></amp-img> </p> <h4>3.セーブデータ、ブラウザ版はこの通り。「sys_」とかです。</h4> <p