メモ帳のアプリを作ってみる 【JavaScript】

JavaScript/HTML

メモ帳のアプリを作ってみます。
以下の２つの環境のそれぞれで動作確認をしています。
環境：
・　Windows パソコン
・　スマートフォン（Android）

背景

最近、スマートフォンを購入したのですが、外出時、ちょっとしたメモを取りたいことがあります。
メモ帳のアプリ程度であれば、自作してしまえば後からの応用も広がります。

ということで、スクリプトをまとめておくことにします。
JavaScript の標準的な機能程度で作ることにし、HTML ファイルをスマートフォンなどにコピーしておけば、インターネットにつながっていなくてもローカルで動くようにします。
Windows パソコン、スマートフォン、Linux (Raspberry Pi) など、ブラウザや OS 環境に限定されることなく、テキストの保存・読みだしの機能が自由に扱えるようにしておきます。

設定手順

①　以下を例に、パソコン内にテキストファイルを作り、末尾のサンプルスクリプトをコピー＆ペーストして保存します。
例：
c:\user\local_memo1\local_memo1.html
※　保存したらダブルクリックで動作させてみてください。
②　パソコンとスマートフォンを Type-C ケーブル等で接続し、上記の HTML ファイルをスマートフォン内の SDカードなどにコピー＆ペーストして保存します。
※　保存したら同様に HTML ファイルを開いて動作させてみてください。

使い方

・　画面には、タイトルとメモを書き込むための２つのテキストボックスを配置してあります。
・　[new] ボタンをクリックすると、新規のメモを作成できます。
タイトルは、デフォルトで年月日と時刻が入るようにしてあります。
・　[save] ボタンで保存できます。
・　[delete] ボタンで消去できます。
・　メモを保存すると、画面下部にタイトルの一覧が表示されます。
タイトルの文字列の部分をクリックすると、メモの内容を読み出すことができます。
※　年月日をタイトルのデフォルトにしてあるのは、とっさに起動して最短のステップでメモ書きを残すことができるようにするためです。
うまく動いたら、自由にカスタマイズしてみてください。

スクリプトの説明

・　冒頭の <head>…</head>の部分で、テキストボックスなどのデザインを定義しています。
・　”@media …” 以降のところで、パソコン（横長）とスマートフォン（縦長）での画面サイズの切り替えをしています。
・　<body> 以降で画面のレイアウトを定義しています。
・　<script>…</script> でメモ帳の各ボタンなどで実行する関数を定義しています。
・　new1() は、初期化を行う関数です。[new] ボタンをクリックしたときなどで実行されます。
日付の文字列を作り、タイトル用の文字列を設定しています。
・　save1() は、保存時の関数です。ブラウザのローカルストレージ localStarge という機能を使って、テキストデータをデバイスのローカルに保存しています。
・　read1() は、指定したタイトルでテキストを読みだす関数です。
・　delete1() は、タイトル欄の文字列で保存されているテキストの内容を削除する関数です。
・　show_list1() は、すでに保存されているメモ帳の内容を読みだして、画面下のリスト欄に一覧として表示する関数です。

まとめ

JavaScript の標準的な機能を使って、メモ帳のローカル Web アプリを作ってみました。

スマートフォン、Windows パソコン、Raspberry Pi （Linux）などの各デバイスで、OS にかかわらず、メモ帳の機能を活用できるようになりました。
後日、可能であれば、ローカルネットワーク内のサーバーと連携させてデータをやり取りするプログラムなども作ってみようかなと思います。

関連リンク
・　テキストやメディアを一括で HTML ファイル化する 【Python】
・　ベクター形式でお絵描きをしてみる 【JavaScript】

サンプルスクリプト

local_memo1.py ～ ローカルメモ帳アプリ


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>local_memo v0.01</title>
    <style>
        body { font-famlily: Arial, sans-serif; } 
        div { cursor: pointer; color: blue; } 
        .text1 { 
            width: 680px; 
            margin: 5px auto; 
        } 
        .text2 { 
            width: 680px; 
            height: 300px; 
            margin: 5px auto; 
        } 
        @media screen and (max-width: 720px) { 
            .text1 { 
                width: 95%; 
            } 
            .text2 { 
                width: 95%; 
                height: 500px; 
            } 
        } 
    </style>
</head>

<body>
<input type="text" class="text1" id="text1" placeholder="タイトルを入力"><br>
<button onclick="save1()">save</button>
<button onclick="delete1()">delete</button>
<button onclick="new1()">new</button><br>
<textarea class="text2" id="text2"></textarea><br>
<ul id="entryList"></ul><br>
<button onclick="show_list1()">show list</button>
<button onclick="read1()">read</button>

<script>
window.onload = load1; 

function load1() { 
    show_list1(); 
    new1(); 
} 

function new1() { 
    let now1 = new Date(); 
    let YY1 = now1.getFullYear(); 
    let MM1 = String(now1.getMonth() + 1).padStart(2, '0'); 
    let DD1 = String(now1.getDate()     ).padStart(2, '0'); 
    let hh1 = String(now1.getHours()    ).padStart(2, '0'); 
    let mm1 = String(now1.getMinutes()  ).padStart(2, '0'); 
    let ss1 = String(now1.getSeconds()  ).padStart(2, '0'); 
    let str1 = String(`${YY1}/${MM1}/${DD1} ${hh1}:${mm1} `); 
    document.getElementById("text1").value = str1; 
    document.getElementById("text2").value = ""; 
} 

function save1() {
    let text1 = document.getElementById("text1").value.trim();
    let text2 = document.getElementById("text2").value.trim();
    if (!text1) {
        alert("タイトルを入力してください");
        return;
    }
    localStorage.setItem(text1, text2);
    show_list1();
}

function read1(text1 = null) {
    if (!text1) text1 = document.getElementById("text1").value.trim();
    let content1 = localStorage.getItem(text1);
    if (content1 !== null) {
        document.getElementById("text1").value = text1;
        document.getElementById("text2").value = content1;
    }
}

function delete1() {
    let text1 = document.getElementById("text1").value.trim();
    if (localStorage.getItem(text1) !== null) {
        localStorage.removeItem(text1);
        show_list1();
        document.getElementById("text1").value = "";
        document.getElementById("text2").value = "";
    }
}

function show_list1() {
    let list = document.getElementById("entryList");
    list.innerHTML = "";
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        const li = document.createElement("li");
        const link = document.createElement("div");
        link.textContent = key;
        link.onclick = function () {
            read1(key);
        };
        li.appendChild(link);
        list.appendChild(li);
    }
}
</script>
</body>
</html>
タイトルとURLをコピーしました