割烹エディター機能追加　シンプルリンク作成くん

こんにちは。

今回は割烹エディターの機能追加についてです。割烹エディターとは、小説家になろうの活動報告を彩るためのエディターです。

割烹エディター

機能概要

シンプルなリンクを作成できる機能です。

これまでリンクボタンとか凝ったものは作ってましたが、リンクを付けるだけのシンプルなものは用意していないので作ります。

画面

基本設定

• テンプレ　セレクト

• 文字　テキストエリア

• URL　input

• 色設定(グラデーション)

• タブ ☑

詳細設定

• 文字サイズ ナンバー

• 行間

• 下線 ☑

• 太字 ☑

プレビュー

変更があればプレビュー画面に反映されます。

Template

テンプレートは有名な小説投稿サイトのリンク色合いを採用していきます。

const customTheme=[
    {'name':'なろうTop', 'color':'#1b8ef3'},
    {'name':'なろうランキング', 'color':'#fd6532'},
    {'name':'よもう', 'color':'#af5626'},
    {'name':'カクヨム', 'color':'#4baae0'},
    {'name':'アルファ', 'color':'#f19703'},
    {'name':'エブリスタ', 'color':'#00a0e9'},
    {'name':'note', 'color':'#2cb696'},
    {'name':'ノベプラ', 'color':'#00ac98'},
    {'name':'ハーメルン', 'color':'#B3A98C'},
    {'name':'野いちご', 'color':'#F891C8'},
    {'name':'魔法のiらんど', 'color':'#fa6b6b'},
]

それぞれ代表的な色合いから取得しています。好きな色を選べばいいと思います。

あとはテンプレートを選んだ時に更新します。

document.querySelector('#select-template').addEventListener('change',(event)=>{
    const result = customTheme.find( ({ name }) => name === event.target.value );
    for (let [key, value] of Object.entries(result)) {
        if(key!=='name'){
            document.querySelector(`input[name="${key}"]`).value = value;
        }
      }
    previewImg.innerHTML = ConvertTemplate('span');//更新
});

こんな感じになりました。

シンプルリンクはこれで完了。次はグラデーションです。

グラデーション

基本はシンプルリンクと同じですが、異なる部分は、リンク指定はしなくてもいいところ。リンク指定がなければ単なる文字として出力するようになります。

またグラデーションのCSSは小説家になろうでは使えないので、始点と終点の色を指定するとそこを補完して1文字ずつSpanを挟み込むという力技で解決します。

なおグラデーションを自前で作るのは面倒なのでライブラリを使って実装します。

chroma.js

chroma.js api docs!

色の扱いが簡単になるJavaScriptライブラリにchroma.jsがあるのでそれを利用して実装します。

使うのはcolor scalesです。

f = chroma.scale(['yellow', '008ae5']);
f(0.25);

のように使うと0~1のスケールにグラデーションを作ってくれます。

実装は1/文字数でスパン幅を決めて、1文字ずつ色を設定してグラデーションにしていきましょう。

ということで画面には色設定として始点と終点用の色選択を作っておきます。基本的な仕組みはシンプルリンクとほぼ同じですが、ちょこちょこと改造します。

出力は色合いを設定して、文字数の逆数をステップとして文字を分割し、全部スパンでくくってしまいます。そのルーチンだけ入れて完了。

function ConvertGradation(text, start, stop){
    const step = 1/text.length;
    const colorScale = chroma.scale([start, stop]);
    return [...text].map((char, index) => `<span style="color: ${colorScale(index*step).hex()}">${char}</span>`).join('');
}

テンプレートは綺麗そうなグラデーションをいくつか用意しておけばいいでしょう。

const customTheme=[
    {'name':'なろう', 'startColor':'#1b8ef3', 'endColor':'#fd6532'},
    {'name':'黄色あお', 'startColor':'#ffff00', 'endColor':'#008ae5'},
    {'name':'紫ピンク', 'startColor':'#a18cd1', 'endColor':'#fbc2eb'},
    {'name':'みどり青', 'startColor':'#84fab0', 'endColor':'#8fd3f4'},
    {'name':'グレースケール', 'startColor':'#111111', 'endColor':'#fafafa'},
    {'name':'あお水色', 'startColor':'#4facfe', 'endColor':'#00f2fe'},
    {'name':'みどり青緑', 'startColor':'#43e97b', 'endColor':'#38f9d7'},
    {'name':'にちぼつ', 'startColor':'#fa709a', 'endColor':'#fee140'},
    {'name':'いぶき', 'startColor':'#fddb92', 'endColor':'#d1fdff'},
    {'name':'こん黄色', 'startColor':'#000080', 'endColor':'#ffff00'},
    {'name':'OrRd', 'startColor':'#7f0000', 'endColor':'#fff7ec'},
    {'name':'いし', 'startColor':'#243949', 'endColor':'#517fa4'},
    {'name':'しょうしつ', 'startColor':'#304352', 'endColor':'#d7d2cc'},
]

サンプルは適当にグラデーションを探して、いれてみたけど背景用だからか文字にするとあんまりきれいじゃないかも。

将来的には作ったグラデーションは保存できるようにしたいですね。

ということで割烹エディターの改善でした。