HTML
CSS
JavaScript

メモ帳をつくる - 文字を装飾するボタンをつくる方法

editable_decorate.gif

はじめに

この記事では、HTMLの文字要素を装飾するボタンを作成する方法を紹介します。
execCommandを使用するため、コード量も少なく簡単です。
HTML要素を編集可能にする方法編集したHTML要素をlocalStorageに保存する方法と組み合わせれば、Evernoteのようなメモアプリを作成することができます。

事前準備

GIFのサンプルでは、わかりやすい見た目にするため、CSSファイルを使って背景色などを変更しています。
今回は、その中身は紹介しません。

editable.html
<head>
        <!-- 中略 -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/editable.css">
</head>

そして、ボタンの動作を記述するJavascriptファイルを作成し、下記の通りHTMLファイルから参照します。

editable.html
<body>
        <!-- 中略 -->
    <script src="js/editable.js" type="text/javascript"></script>
</body>

HTMLファイルの記述

HTML要素を編集できるようにする

今回はtextareaを使用するのではなく、h1ダグ、pタグのinnnerHTMLを編集できるようにします。
そのやり方は、こちらに記載していますので、ここでは割愛します。

ボタンを配置する

下記の装飾を紹介します。HTMLの記述方法によって、3パターンに区分しています。
  button: イタリック/ボールド/アンダーライン/インデント/アウトデント/オーダーリスト/unオーダーリスト
  select: カラー/フォント
  range: サイズ

わかりやすさのため、上記3区分ごとに紹介します。

button

inputタグのtypeにbuttonを指定します。
valueは、ボタンに表示される文字です。
idは、Javascriptファイルでボタンを判別するために使用しますので、Javascriptファイルの記述と合わせてください。

editable.html
<body>
        <!-- 中略 -->
    <input id="italic" type="button" value="ITAL" />
    <input id="bold" type="button" value="BOLD" />
    <input id="underLine" type="button" value="UDL"/>
    <input id="inDent" type="button" value="IND"/>
    <input id="outDent" type="button" value="OUTD"/>
    <input id="ordList" type="button" value="ORD"/>
    <input id="unordList" type="button" value="UORD"/>
       <!-- 中略 -->
</body>

select

optionタグを使用して、必要な分だけ記述します。
idは、Javascriptファイルでボタンを判別するために使用しますので、Javascriptファイルの記述と合わせてください。

editable.html
<body>
        <!-- 中略 -->
    <select id="color">
      <option>m-Blue</option>
      <option>Blue</option>
      <option>Green</option>
      <option>Red</option>
      <option>Black</option>
     </select>

     <select id="fontSelect">
      <option>Arial</option>
      <option>LudicaSansUnicode</option>
      <option>Impact</option>
      <option>YuGothic</option>
     </select>
       <!-- 中略 -->
</body>

range

これは好みですが、ここでは文字の大きさを調整するのに、rangeを使用しています。selectを使用しても構いません。
min、maxで最小最大値を指定し、stepでは、どれくらいの刻みでrangeの調整をするか指定します。
valueは初期値です。
idは、Javascriptファイルでボタンを判別するために使用しますので、Javascriptファイルの記述と合わせてください。

editable.html
<body>
        <!-- 中略 -->
        <input type="range" id="fontSize" value="3" min="1" max="7" step="0.5">
       <!-- 中略 -->
</body>

3パターンまとめ

editable.html
<body>
        <!-- 中略 -->
    <input id="italic" type="button" value="ITAL" />
    <input id="bold" type="button" value="BOLD" />
    <select name="" id="color">
        <option>m-Blue</option>
       <option>Blue</option>
       <option>Green</option>
       <option>Red</option>
       <option>Black</option>
    </select>

    <select name="" id="fontSelect">
       <option>Arial</option>
       <option>LudicaSansUnicode</option>
       <option>Impact</option>
       <option>YuGothic</option>
     </select>
     <input type="range" name="" id="fontSize" value="7" min="7" max="8" step="0.5">
     <input id="underLine" type="button" value="UDL"/>
     <input id="inDent" type="button" value="IND"/>
     <input id="outDent" type="button" value="OUTD"/>
     <input id="ordList" type="button" value="ORD"/>
     <input id="unordList" type="button" value="UORD"/>
        <!-- 中略 -->
</body>

Javascriptファイルの記述

基本構文

//HTMLファイルの要素を取得
const boldButton = document.getElementById("{HTMLファイルに記載したid}");

//取得した要素にイベントを付与
boldButton.addEventListener("{イベントの種類}", function(){
    //execCommandを記述
    document.execCommand("{コマンドの種類}", false, "{コマンド実行時に渡す値}" );
}, false);

{コマンド実行時に渡す値}がない場合は、「""」と記述します。

サンプル記載内容

ボタンの並び順に、一つずつ紹介します。

イタリック

{コマンド実行時に渡す値}はありませんので、「""」と記述しています。

const italicButton = document.getElementById("italic");
italicButton.addEventListener("click", function(){
    document.execCommand("italic", false, "" );
}, false);

ボールド

{コマンド実行時に渡す値}はありませんので、「""」と記述しています。

const boldButton = document.getElementById("bold");
boldButton.addEventListener("click", function(){
    document.execCommand("bold", false, "" );
}, false);

カラー

{コマンド実行時に渡す値}は、selectのvalueです。

const colorSelect = document.getElementById("color");
colorSelect.addEventListener("change", function(){
    //「m-Blue」というオリジナルのカラーを作り、それが選択された場合のための条件分岐
    //この例では、「m-Blue」を選択した場合には、"#185687"に色を変更する。
    if(colorSelect.value == "m-Blue") {
        document.execCommand("foreColor", false, "#185687");
    } else {
        document.execCommand("foreColor", false, colorSelect.value);
    }
}, false);

フォント

{コマンド実行時に渡す値}は、selectのvalueです。
フォントは「"Arial"」のように「""」で囲み指定する必要がありますが、
selectのoptionに「""」が書いてあると見映えが悪いので、Javascript側で補完してあげます。

const fontChanger = document.getElementById("fontSelect");
fontChanger.addEventListener("change", function(){
    //""をここで補完し、{コマンド実行時に渡す値}とする
    document.execCommand( "fontName", false, '"' + fontChanger.value + '"');
}, false);

サイズ

{コマンド実行時に渡す値}は、rangeのvalueです。

const fontSize = document.getElementById("fontSize");
fontSize.addEventListener("change", function(){
    document.execCommand( "fontSize", false, fontSize.value);
}, false);

アンダーライン

{コマンド実行時に渡す値}はありませんので、「""」と記述しています。

const underLine = document.getElementById("underLine");
underLine.addEventListener("click", function(){
    document.execCommand( "underline", false, "" );   
}, false);

インデント

{コマンド実行時に渡す値}はありませんので、「""」と記述しています。

const inDent = document.getElementById("inDent");
inDent.addEventListener("click", function(){
    document.execCommand( "indent", false, "" );   
}, false);

アウトデント

{コマンド実行時に渡す値}はありませんので、「""」と記述しています。

const outDent = document.getElementById("outDent");
outDent.addEventListener("click", function(){
    document.execCommand( "outdent", false, "" );   
}, false);

オーダーリスト

{コマンド実行時に渡す値}はありませんので、「""」と記述しています。

const ordList = document.getElementById("ordList");
ordList.addEventListener("click", function(){
    document.execCommand( "indent", false, "" );
    document.execCommand( "insertOrderedList", false, "" );   
}, false);

unオーダーリスト

{コマンド実行時に渡す値}はありませんので、「""」と記述しています。

const unordList = document.getElementById("unordList");
unordList.addEventListener("click", function(){
    document.execCommand( "indent", false, "" );
    document.execCommand( "insertUnorderedList", false, "" );  
}, false);

全パターンまとめ

editable.js
const italicButton = document.getElementById("italic");
italicButton.addEventListener("click", function(){
    document.execCommand("italic", false, "" );

}, false);

const boldButton = document.getElementById("bold");
boldButton.addEventListener("click", function(){
    document.execCommand("bold", false, "" );
}, false);

const colorSelect = document.getElementById("color");
colorSelect.addEventListener("change", function(){
    if(colorSelect.value == "m-Blue") {
        document.execCommand("foreColor", false, "#185687");
    } else {
        document.execCommand("foreColor", false, colorSelect.value);
    }
}, false);

const fontChanger = document.getElementById("fontSelect");
fontChanger.addEventListener("change", function(){
    document.execCommand( "fontName", false, '"' + fontChanger.value + '"');
}, false);

const fontSize = document.getElementById("fontSize");
fontSize.addEventListener("change", function(){
    document.execCommand( "fontSize", false, fontSize.value);
}, false);

const underLine = document.getElementById("underLine");
underLine.addEventListener("click", function(){
    document.execCommand( "underline", false, "" );   
}, false);

const inDent = document.getElementById("inDent");
inDent.addEventListener("click", function(){
    document.execCommand( "indent", false, "" );   
}, false);

const outDent = document.getElementById("outDent");
outDent.addEventListener("click", function(){
    document.execCommand( "outdent", false, "" );   
}, false);

const ordList = document.getElementById("ordList");
ordList.addEventListener("click", function(){
    document.execCommand( "indent", false, "" );
    document.execCommand( "insertOrderedList", false, "" );   
}, false);

const unordList = document.getElementById("unordList");
unordList.addEventListener("click", function(){
    document.execCommand( "indent", false, "" );
    document.execCommand( "insertUnorderedList", false, "" );  
}, false);

さいごに

今回紹介したコマンドは一部です。他のコマンドに興味がある方は、こちらのサイトをご覧ください。

また、編集した内容を保存する方法は、こちらの記事で紹介しています。