質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16387questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Monaca

    977questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

複数のメモを一度に記入・保存・表示する方法

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 311

masayu

score 2

前提・実現したいこと

Monaca Docs のサンプルアプリ&テンプレートにある、
メモ帳アプリ(localStorage を使用して、メモ帳アプリを作成するサンプルアプリ)を参考にjavascriptを勉強しながらオリジナルアプリを作っています。
↓こちらが参考にしたページです。
https://docs.monaca.io/ja/sampleapp/samples/memo_application/

メモ帳アプリではメモ欄が1つだけですが、オリジナルアプリではメモ欄を複数作り、保存・表示できるようにしたいと考えています。

発生している問題・エラーメッセージ

現在、複数のメモ欄自体はhtml上で作成できるのですが、複数のtextに記入したメモを表示・保存することができません。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <!-- 記事の 記入・削除・閲覧ページ -->
    <div data-role="page" id="TopPage">
        <header data-role="header" data-position="fixed" data-theme="c">
            <h2>一覧</h2>
            <a href="#AddPage" data-icon="plus" class="ui-btn-right">記入</a>
        </header>
        <section data-role="content">
            <ul id="TopListView" data-role="listview" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-split-icon="delete">
            </ul>
        </section>
    </div>

    <!-- 記入ページ -->
    <div data-role="page" id="AddPage">
        <header data-role="header" data-position="fixed" data-theme="c">
            <a data-role="button" data-rel="back" data-icon="back">戻る</a>
            <h1>記入ページ</h1>
        </header>
        <section data-role="content">
            <label for="Memo">Memo:</label>
      <textarea id="Memo"></textarea>
<a data-role="button" data-icon="check" id="SaveBtn">保存する</a>
</section>
    </div>

    <!-- 選択した記事の詳細を閲覧するページ -->

    <script>
    //選択したチェックボックスの値を呼び出すためのjs
        //テキスト保存
        function SaveKeyValue() {
        if (window.localStorage != null) {
        key = document.forms.form1.Text_key.value;
        value = document.forms.form1.Text_value.value;

        window.localStorage.setItem(key, value);
        }    
        }

        //テキスト読み込み
        function LoadKeyValue() {
        if (!window.localStorage != null) {
        key = document.forms.form1.Text_Key.value;
        value = window.localStorage.getItem(key)
        document.forms.form1.Text_value.value;   
        }   
        }

    </script>

    <div data-role="page" id="ShowPage">
        <header data-role="header" data-position="fixed" data-theme="c">
            <a data-role="button" data-rel="back" data-icon="back">戻る</a>
            <h1></h1>
        </header>
        <section section data-role="content">
            <b><u>memo1</u>:</b>
            <p></p>
        </section>
        <section section data-role="content">
            <b><u>memo2</u>:</b>
            <p></p>
        </section>


    </div>

<script src="components/loader.js"></script>
<script src="js/memo.js"></script>
<script src="js/app.js"></script>
<script src="js/cssua.min.js"></script>
</body>
</html>
///// Save memo and return to top page 入力→保存→関数内に記述された addMemo() 関数 ( memo.js ファイルで定義 ) を経由して、localStorage に入力テキストが保存 更新された一覧をトップページ上に表示
function onSaveBtn() {
    var text = $("#Memo").val();
    if (text != '') {
        // Save to local storage
        addMemo(text);
        // Clear form
        $("#Memo").val("");
        // Initialize top page
        initTopPage();
    }
    $.mobile.changePage("#TopPage", { reverse: true });
}

///// Initialize top page アプリを起動→保存されている記事を取得して、一覧で表示
function initTopPage() {
    $("#TopListView").empty();

    var list = getMemoList();
    for (var i in list) {
        var memo = list[i];
        var d = new Date(memo.time);
        var date = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();

        $li = $("<li><a href='#' class='show'><h3></h3><p></p></a><a href='#' class='delete'>Delete</a></li>");
        $li.data("id", memo.id);
        $li.find("h3").text(date);
        $li.find("p").text(memo.text);
        $("#TopListView").prepend($li);
    }
    if (list.length == 0) {
        $li = $("<li>記事がありません</li>");
        $("#TopListView").prepend($li);
    }
    $("#TopListView").listview("refresh");  // Call refresh after manipulating list
}

///// Move to detail page 選択した記事の詳細閲覧ページ
function onShowLink() {
    var $li = $(this).parent();
    var memoTitle = $li.find("h3").text();
    var memoHtml = $li.find("p").html().replace(/\n/g, "<br>");

    $("#ShowPage h1").text(memoTitle);
    $("#ShowPage p").html(memoHtml);
    $.mobile.changePage("#ShowPage");
}

///// Delete memo バツボタン→削除
function onDeleteLink() {
    if (!confirm("この記事を削除しますか?")) {
      return;
    }
    var $li = $(this).parent();
    var id = $li.data("id");
    deleteMemo(id);

    initTopPage();

    // Return to top
    $.mobile.changePage("#TopPage", { reverse: true });
}

///// Called when app launch
function onReady() {
    initTopPage();
    $("#SaveBtn").click(onSaveBtn);
    $("#TopListView").on("click", "a.show", onShowLink);
    $("#TopListView").on("click", "a.delete", onDeleteLink);
}

$(onReady); // on DOMContentLoaded
///// このファイルはlocalStorage に対する一連のデータ処理を行うための JavaScript ファイル
/////  localStorage に保存された記事の一覧を取得
function getMemoList() {
    var list = localStorage.getItem("memo_list");
    if (list == null) {
        return new Array();
    } else {
        return JSON.parse(list);
    }
}
 
///// 一覧を localStorage に保存
function saveMemoList(list) {
    try {
        localStorage.setItem("memo_list", JSON.stringify(list));
    } catch (e) {
        alert('Error saving to storage.');
        throw e;
    }
}

///// 新規の記事を一覧に追加して、localStorage に新規の一覧を保存
function addMemo(text) {
  var list = getMemoList();
  var time = new Date().getTime();
  list.push({ id: time, time: time, text: text });
  saveMemoList(list);
}

///// 一覧から指定された記事を削除して、localStorage に削除後の一覧を保存
function deleteMemo(id) {
    var list = getMemoList();
    for (var i in list) {
        if (list[i].id == id) {
            list.splice(i, 1);
            break;  // Quit for loop when found
        }
    }
    saveMemoList(list);
}

試したこと

https://docs.monaca.io/ja/sampleapp/samples/memo_application/
で言うmemo.jsファイルを複数作り値を変えてみたものの、1つテキストボックスに入力した同じ内容が複数回表示されてしまいました。

補足情報(言語/FW/ツール等のバージョンなど)

プログラミング初心者でjavascriptを勉強中です。基本的な質問で恐縮ですが、アドバイス等いただけると幸いです。よろしくお力添えのほどお願い申し上げます。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2017/10/13 15:05

    『値を変えてみた』とは、具体的には、どの値をどのように変えたのでしょうか。

    キャンセル

回答 1

0

勉強ということなので、答えは載せずに個人的な指針だけ示しておきます。(他にもやり方はたくさんあると思います)

(1)htmlの#AddPage内にtextareaを追加
(2)app.jsのonSaveBtn関数で(1)で追加したtextareaの情報を取得できるようにして、
memo.jsのaddMemo関数に渡す。
(3)addMemoで複数テキストをlistにプッシュできるようにする。
----ここまでで保存はできるようになるはず。(JSON形式から逸脱さえしなければ)

(4)app.jsのinitTopPage関数でリストにテキストを出せるようにする。(TOPページの対応)
⇒詳細ページに表示されるのは現状Topページに表示されたテキストがほぼそのまま表示される(onShowLink関数の処理)ので、
Topページのリストの表示を工夫するか、詳細ページを表示する際に書き換えるような仕組みが必要。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16387questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Monaca

    977questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。