おきがるみがる

お気軽&身軽にスナップ写真を楽しむ雑記ブログです。はてなブログテーマ Sentenceの配布も行っております。

【JavaScript】各項目をチェックするだけで文章を自動生成するプログラムを作りました

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

『改訂新版JavaScript本格入門』を使ってJavaScriptの勉強をしつつ、その記録をこのブログで投稿しております。

勉強はまだまだ途中なのですがオリジナルのプログラムを1つ作ってみました。

ラジオボタンやチェックボックスで入力フォームを作成し、入力された値を元にして文章を自動生成するプログラムをHTMLとJavaScriptで作りました。

プログラムを作ろうと思ったキッカケと、そのソースを公開しています。

訪問介護の援助記録の入力補助に使えると思い作成

今回プログラムを作ろうと思ったキッカケは、僕が生業としている訪問介護における記録入力の効率化です。

援助や訪問の記録は文章(主に叙述体)で入力するのですが、日々決まりきった内容を毎回タイピングするのは非常に面倒くさいですよね。

かと言って既にある記録をコピペするとチェックが行き届かずに偽の情報を記録してしまう可能性があります。

そこで基本的な項目はチェックするだけで自動的に文章化できないかな、と思ってプログラミングに挑んだわけです。

サンプルはこちら

文章自動生成サンプル

百聞は一見に如かずということでこちらのリンクをご覧ください。

ヘルパーの援助内容でそのまま作っちゃうと公私混同やら身バレやらで厄介なので、サンプルとして食事記録を入力するプログラムを用意しました。

いつ、何を食べて、何を飲んで、どれぐらい満足したかをチェックします。チェック後「入力」というボタンをクリックすると、チェックを元に文章を自動生成されて下の欄に表示されます。

表示された文章にはそのまま加筆修正を加えることができます。それから「コピー」のボタンをクリックするとクリップボードにコピーされます。「リセット」のボタンを入力した内容がすべてクリアーされます。

ちなみにCSSはコーディングしてませんので見た目は簡素です。見やすいようにデザインするのはあとからでもOKですからね。

注意すべきは文字コードぐらいですかね。UTF-8で記述しているので、使用するソフトや閲覧環境によっては文字化けするかもしれません。環境に合わせてHTMLのコードを変更しましょう。

コード

以下にHTMLとJavaScriptそれぞれのコードを載せています。

簡単に説明しますと、チェックされた内容をループ処理の中で変数に格納して、さらに接続文を加えながら1つの変数にまとめるというプログラムです。

内容によってラジオボタン(1つだけ選択可能)とチェックボックス(複数選択可能)を使い分けて、それぞれ別のループでチェックされた内容を取り出します。

これを応用すればさらに複雑な文章も自動生成できますよ。もっと簡単なコードで作れるのかもしれませんが、今の僕の知識ではこれが精一杯です。

HTML

<!DOCTYPE html>
<html lang="ja">
<html>
<head>
<meta charset="UTF-8">
<title>文章自動生成サンプル</title>
<script src="sample.js"></script>
</head>
<body>

<form name="sentenceForm">
        <li>いつ?:
            <label><input type="radio" name="time" value="朝">朝</label>
            <label><input type="radio" name="time" value="昼">昼</label>
            <label><input type="radio" name="time" value="夕">夕</label>
        </li>
        <li>何を食べた?:
            <label><input type="checkbox" name="meal" value="お米">お米</label>
            <label><input type="checkbox" name="meal" value="パン">パン</label>
            <label><input type="checkbox" name="meal" value="肉">肉</label>
            <label><input type="checkbox" name="meal" value="魚">魚</label>
            <label><input type="checkbox" name="meal" value="みそ汁">みそ汁</label>
        </li>
        <li>何を飲んだ?:
            <label><input type="checkbox" name="drink" value="お茶">お茶</label>
            <label><input type="checkbox" name="drink" value="ジュース">ジュース</label>
            <label><input type="checkbox" name="drink" value="コーヒー">コーヒー</label>
        </li>
        <li>満足度は?:
            <label><input type="radio" name="satisfaction" value="おいしかったです。">1</label>
            <label><input type="radio" name="satisfaction" value="とてもおいしかったです。">2</label>
            <label><input type="radio" name="satisfaction" value="大満足です。">3</label>
        </li>
        <p><input id="btn" type="button" value="入力" onclick="getValue();"> <input type="button" name="Copy" value="コピー" onClick="copyClipBoad()"> <input type="button" value="リセット" onClick="clearContent()"></p>
        <p><textarea id="sentenceArea" cols="80" rows="20"></textarea></p>
</form>

</body>
</html>

JavaSctipt

function getValue() {
//ラジオボタンの項目すべてのname値を指定
    var radioButton = ['time', 'satisfaction'];
//チェックボックスの項目すべてのname値を指定
    var checkBox = ['meal', 'drink']; 

//ラジオボタンの項目の数だけループ…i<xのxは項目の数を指定(以下のチェックボックスも同様)
    for (var i=0; i<2; i++) {
        var radios = document.getElementsByName(radioButton[i]);
        radioButton[i] = "";

        for (var j=0; j<radios.length; j++) {
            if (radios[j].checked) {
                radioButton[i] = radios[j].value;
                break;
            }
        }
    }

 //チェックボックスの項目の数だけループ。チェックが複数あれば「、」を挿入して追加
    for (var i=0; i<2; i++) {
        var boxes = document.getElementsByName(checkBox[i]);
        var result = ""

        for (var j=0; j<boxes.length; j++) {
            if (boxes[j].checked) {
                if (result != "") {
                    result = result + "、";
                }
                result = result + boxes[j].value;
            }
            checkBox[i] = result;
        }
    }

//格納した値に文章を加えながら1つの変数にまとめる
    var sentence;  
    if (radioButton[0] != "") {
        sentence = radioButton[0] + "ごはんに";
    }
    if (checkBox[0] != "") {
        sentence = sentence + checkBox[0] + "を食べました。";
    }
    if (checkBox[1] != "") {
        if (checkBox[0] != "") {
            sentence = sentence + "それから";
        }
        sentence = sentence + checkBox[1] + "を飲みました。";
    }
    if (radioButton[1] != "") {
        sentence = sentence + radioButton[1];
    }
//まとめた文章をテキストエリアに表示
    document.getElementById("sentenceArea").value=sentence
}

//クリップボードにコピー
function copyClipBoad() {
    var copyText = document.getElementById("sentenceArea");
    copyText.select();
    document.execCommand("copy");
}

//入力された内容をすべてクリア
function clearContent() {
    var ElementsCount = document.sentenceForm.elements.length;
    for (i=0; i<ElementsCount; i++) {
        document.sentenceForm.elements[i].checked = false;
    }
    document.getElementById("sentenceArea").value="";
}

創作意欲と行動が知識習得の鍵

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

僕は『改訂新版JavaScript本格入門』を使ってJavaScriptを勉強中です。

今回作ったプログラムはこのテキストを参考に……してません。ググって使えそうなコードをいろいろ集めてコーディングしたって感じです。

テキストを1から読破すれば基礎は固まりますが、やはりプログラミングの知識習得の近道は「こんなプログラムを作ってみたい!」という創作意欲と、その目標に向かって行動できるかだと思います。

テキストはまだまだ途中ですが、基本的なことを学習したらば復習も兼ねて何か作ってみるといいですよ。