メモ帳アプリ
最終更新
役に立ちましたか?
最終更新
役に立ちましたか?
localStorage を使用して、メモ帳アプリを作成するサンプルアプリです。
テスト環境
Android 11.0
iOS 14.3
ファイル
説明
index.html
スタート/ホーム画面のページ
js/memo.js
localStorage 内のデータを処理する JavaScript ファイル
js/app.js
アプリ内でさまざまな処理を行う JavaScript ファイル
jQuery
jQuery Mobile
index.html
ファイル内のホーム画面の設定は、以下になります。
このホーム画面から、メモの追加、閲覧、削除を行えます。
index.html
ファイル内のメモの追加と保存画面の設定は、以下になります。
この画面から、メモの追加と保存を行えます。
index.html
ファイル内の各メモの詳細を閲覧する画面の設定は、以下になります。
この画面から、各メモの詳細を閲覧できます。
app.js
は、アプリ内のさまざまな処理を行う JavaScript ファイルです。
アプリを起動すると initTopPage()
関数を直ちに呼び出します。この関数を使用して、トップページ ( ホーム画面のページ ) の初期化を行います。ここでの初期化処理とは、保存されているメモを取得して、一覧で表示することです ( 取得処理は、memo.js
ファイル内で定義されている getMemoList()
関数を経由して行われます )。アプリの初回起動時など、既存のメモがない場合には、「 No memo found
」 が表示されます 。
この関数のソースコードを次に記します。
トップページ上で +Add
ボタンをクリックすると、Add Memo ( メモ追加 ) ページを表示します。メモを入力して Save
ボタンをクリックすると onSaveBtn()
関数を呼び出します。この関数内に記述された addMemo()
関数 ( memo.js
ファイルで定義 ) を経由して、localStorage に入力テキストが保存されます。そして、更新されたメモの一覧をトップページ上に表示します。この関数のソースコードを次に記します。
トップページ上で一覧上のアイテムをクリックすると、 onShowLink()
関数 ( memo.js
ファイルで定義 ) を呼び出します。この関数を使用して、選択したアイテムの詳細閲覧ページとタイトル ( または、内容 ) を表示します。
この関数のソースコードを次に記します。
トップページ上で、各アイテムの右端に表示された delete アイコンをクリックすると、一覧上のアイテムを削除できます。アイコンをクリックすると、 onDeleteLink()
関数を呼び出します。この関数を使用して、削除を続行するかユーザーに確認するメッセージを表示します。OK
をクリックすると、deleteMemo()
関数 ( memo.js
ファイルで定義 ) を経由して、localStorage から選択したアイテムを削除します。そして、更新したメモの一覧を、トップページ上に表示します。
この関数のソースコードを次に記します。
memo.js
ファイルは、localStorage に対する一連のデータ処理を行う JavaScript ファイルです。このファイル内で、次の 4 つの関数を定義しています。
getMemoList()
: localStorage に保存されたメモの一覧を取得します。
saveMemoList()
: メモの一覧を localStorage に保存します。
AddMemo()
: 新規のメモを一覧に追加して、localStorageに新規の一覧を保存します。このとき、 saveMemoList()
関数を使用します。
deleteMemo()
: メモの一覧から指定されたメモを削除して、localStorageに削除後の一覧を保存します。このとき、 saveMemoList()
関数を使用します。
このサンプルアプリのユーザーインターフェイスには、jQuery Mobile を使用しています。jQuery Mobile では、複数のページを 1 つの HTML ファイル内にまとめて記述できます。このアプリでも、 index.html 内に、すべてのページ ( トップページ、メモ追加ページ、詳細ページ ) を定義しています。div
タグの data-role
属性に、page
を指定して、ページを定義します。jQuery Mobile では、このように、 data-role
属性を使用して、各タグの役割を設定します。 data-role
には、他にも、header
、content
、listview
などを設定できます。jQuery Mobile のタグとコンポーネントに関しては、 をご確認ください。