85日目 割烹芸人の実装6
単品用のテンプレートも作っておきます。
さて、大体の機能がそろったので、単品用のテンプレートも作っておきます。
誰しもが凝ったものを作りたいわけではなくて、ちょっとしたアクセントだけ欲しいということもあるでしょう。
なので、活動報告用の部品として単品で使えるものを用意しておきます。
レイアウトは割烹エディターと同じようにしておきますが、ちょっとパラメータを増やしておきます。
作るのは以下の項目。（他に思いついたら追加していこうと思います。）
まずはリンクボタンですね。<body>だけ抜き出し
<h1>割烹ボタン作成くん</h1>
<section class="edit-menu">
<form class="iptxt" name="form1" id="inputForm">
<ul class="editor-form-list">
<li>
<label>テンプレ:</label>
<select name="template">
<option value="1">なし</option>
<option value="2">なろう風1</option>
<option value="4">なろう風2</option>
<option value="3">カクヨム風</option>
<option value="5">アルファ風</option>
<option value="6">エブリスタ風</option>
<option value="7">Note風</option>
<option value="8">ノベプラ風</option>
<option value="9">ハーメルン風</option>
<option value="10">野いちご風</option>
</select>
</li>
<li>
<label for="button-title">ボタンの文字:</label>
<input id="button-title" type="text" name="buttonTitle" value="ボタン">
</li>
<li>
<label for="button-size">ボタンサイズ(px):</label>
<input id="button-size" type="number" name="buttonSize" step="10" value="120" min="10" max="540" placeholder="10px~540px">
</li>
<li>
<label>文字サイズ(px):</label>
<input type="number" name="fontSize" step="1" value="16" min="1" max="100">
</li>
<li>
<label>文字色:</label>
<input type="color" name="color" value="#ffffff">
</li>
<li>
<label>背景色:</label>
<input type="color" name="backcolor" value="#1CB7CD">
</li>
<li>
<label>枠線色:</label>
<input type="color" name="bordercolor" value="#1CB7CD">
</li>
<li><label>リンクURL:</label>
<input type="url" name="url" value="https://syosetu.com/" placeholder="リンクを張り付け(https://xxx)" class="form-urlinput">
</li>
</ul>
</form>
</section>
<section class="sample-img">
<p>サンプル</p>
<div id="output-img"></div>
</section>
いくつかテンプレートを用意しておいて、そこから選べるようになってます。
もちろん自分でカスタマイズしてもいいですね。
動作部分はJavascriptで値が変更されたらサンプル部分に反映されるようにしておきます。
'use strict';
const formObject = document.getElementById( "inputForm" );
const previewImg = document.getElementById( "output-img" );
// Formの値を取得する
function GetFormValue() {
let formValues ={};
for( let i = 0; i < formObject.length; i++ ) {
formValues[formObject.elements[i].name]=formObject.elements[i].value;
}
return formValues;
}
//Formに値を入力する
function SetFormValue(formValues) {
for( let i = 0; i < formObject.length; i++ ) {
if(formObject.elements[i].name!=='template' && formObject.elements[i].name!=='url' && formObject.elements[i].name!=='buttonTitle'){
formObject.elements[formObject.elements[i].name].value = formValues[formObject.elements[i].name]
}
}
}
//Previewに値を入れる
function SetValues(val) {
previewImg.textContent = val['buttonTitle'];
previewImg.style.width = val['buttonSize']+'px';
previewImg.style.fontSize = val['fontSize']+'px';
previewImg.style.color = val['color'];
previewImg.style.background = val['backcolor'];
previewImg.style.border = '2px solid '+ val['bordercolor'];
previewImg.style.textAlign = 'center';
previewImg.style.padding = '0.5em';
previewImg.style.lineHeight= '1.2';
}
//Previewを更新
function SetPreview() {
const val = GetFormValue() ;
SetValues(val);
}
//テンプレートの取得
function GetTemplate(num) {
let val ;
switch (parseInt(num)) {
case 1://なし
val = GetFormValue() ;
break;
case 2://なろう風ブクマ
val ={
buttonTitle:'なろう',
buttonSize:'120',
fontSize: '16' ,
color:'#1CB7CD',
backcolor:'#ffffff',
bordercolor:'#1CB7CD',
url:'https://syosetu.com/'
};
break;
case 3://カクヨム風
val ={
buttonTitle:'カクヨム',
buttonSize:'120',
fontSize: '16' ,
color:'#ffffff',
backcolor:'#4baae0',
bordercolor:'#0990cc',
url:'https://kakuyomu.jp/'
};
break;
case 4://なろう風2
val ={
buttonTitle:'ブックマーク',
buttonSize:'120',
fontSize: '16' ,
color:'#F4C28D',
backcolor:'#fffaf4',
bordercolor:'#F4C28D',
url:'https://syosetu.com/'
};
break;
case 5://
val ={
buttonTitle:'アルファ',
buttonSize:'120',
fontSize: '16' ,
color:'#ffffff',
backcolor:'#f19703',
bordercolor:'#de8b00',
url:'https://www.alphapolis.co.jp/'
};
break;
case 6://
val ={
buttonTitle:'エブリスタ',
buttonSize:'120',
fontSize: '16' ,
color:'#ffffff',
backcolor:'#00a0e9',
bordercolor:'#00a0e9',
url:'https://estar.jp/'
};
break;
case 7://
val ={
buttonTitle:'Note',
buttonSize:'120',
fontSize: '16' ,
color:'#ffffff',
backcolor:'#2cb696',
bordercolor:'#2cb696',
url:'https://note.com/'
};
break;
case 8://
val ={
buttonTitle:'ノベプラ',
buttonSize:'120',
fontSize: '16' ,
color:'#ffffff',
backcolor:'#0cbf97',
bordercolor:'#0cbf97',
url:'https://novelup.plus/'
};
break;
case 9://
val ={
buttonTitle:'ハーメルン',
buttonSize:'120',
fontSize: '16' ,
color:'#ffffff',
backcolor:'#B3A98C',
bordercolor:'#B3A98C',
url:'https://syosetu.org/'
};
break;
case 10://
val ={
buttonTitle:'野いちご',
buttonSize:'120',
fontSize: '16' ,
color:'#ffffff',
backcolor:'#F891C8',
bordercolor:'#F891C8',
url:'https://www.no-ichigo.jp/'
};
break;
}
SetFormValue(val);
}
//なろう割烹コードへの変換
function ConvertTemplate() {
const val = GetFormValue() ;
const codeText = `<div><ul class="nav"><li style="border:0;"><a class="more koukoku_text" style="font-size:${val.fontSize}px;margin:0 auto;padding:0.5em;line-height:1.2;color:${val.color};background:${val.backcolor};border:2px solid ${val.bordercolor};width:${val.buttonSize}px;text-align:center;" href="${val.url}">${val.buttonTitle}</a></li></ul></div>`;
return codeText;
}
//フォームの値が変更された場合の処理
for( let i = 0; i < formObject.length; i++ ) {
formObject.elements[i].addEventListener('change', () => {
if(formObject.elements[i].name === 'template'){//テンプレートの変更時のみ別
GetTemplate(formObject.elements[i].value);
SetPreview();
}else{
SetPreview();
}
});
if(formObject.elements[i].name === 'buttonTitle'){//
formObject.elements[i].addEventListener('keyup', () => {
SetPreview();
});
}
}
SetPreview();
こんな感じに動作します。
作り終わったらボタンを押して変換します。
ただ、なろうCSSを使っているので割烹のプレビューと実際の表示に若干差異があるので注意ですね。
宣伝とかに使ってみてださい。
さて、次は赤文字さんを作ります。
<h1>赤文字さん</h1>
<section class="edit-menu">
<form class="iptxt" name="form1" id="inputForm" onsubmit="return false;">
<ul class="editor-form-list">
<li>
<label for="button-title">赤文字さん:</label>
<input id="button-title" type="text" name="buttonTitle" value="感想が書かれましたか？">
</li>
</ul>
</form>
</section>
<section class="sample-img">
<p>サンプル</p>
<div id="output-img" class="akamoji-san"></div>
</section>
こんな感じに赤文字さんに色々と喋らすことができます。
お次はBoxデザインですね。
割烹エディターの段落より詳細に設定できます。ただインライン補助は使えません。使う場合はタグを自分で打ち込んでください。ただプレビューでは反映されません。
ソースコードはだいたい似たような感じなので載せません。
動作だけ見ておきましょう。
こんな感じですね。
長くなったので分割します。
毎回あと少しと言っている気がする。（小さな積み重ねがすべてなのかもしれませんね……）
