備忘録アプリ

複数のメモ書きを入力・保存できるアプリを試作します。
タイトルや本文をキーワードで検索できるようにして、利便性を上げます。
「ブログ型情報活用システム」の中で書いた情報活用の問題意識を、個人の最小レベルに置き換えて取り組みました。

実際の画面を確認

画面は、表紙・メイン・タグ管理の３面です。

シンプルなオープニング画面で始まります。数秒したら、自動でメイン画面に移ります。
このあたりのテクニックは、表紙画面のサンプルに詳細を記述していますので、興味のある方はご覧ください。

オープニング画面の挿入には、初期処理を入れるタイミングとして使用する意味もあります。

メイン画面です。画面右下の検索機能を使用して、タイトルや本文のキーワード検索や、タグによる絞込みができます。今回は単一項目検索にしていますが、工夫次第で複合検索も可能だと思います。画面上で New / Mod のどちらかのモードを選び、新規入力もしくは登録済のメモを更新します。

これは新規入力中の画面です。タイトル・タグ・本文を入力して更新ボタンを押すと、データを登録します。タグは直接入力も可能ですが、あらかじめタグ登録をしておけば画面右側に候補が表示され、追加ボタンでタグ文字列に追加できます。

これは更新中の画面です。タイトル・タグ・本文を変更して更新ボタンを押すと、データを更新します。更新したかどうかは、更新日時(タイムスタンプ)で確認できます。

これはタグ管理画面です。ここで登録した文言が、タグ候補として表示されます。

以下に、作成時のポイントを記述します。

[ 目次 ]

実際の画面を確認
事前準備
仕様確認
ストリング変数を使ったテキストボックスの初期化について
仕組みの解説

タイマー

文言入力ボックス
タグ登録ボタン
ギャラリー(登録タグ用)
タグ削除ボタン

実現を見送ったこと
感想

事前準備

画像も動画もエクセルテーブルも使用しないので、準備は不要です。

仕様確認

テキストベースのメモを複数登録し、保存できます。
登録したメモの更新・削除ができます。
キーワードを使用して、タイトルや本文を検索できます。
検索結果はギャラリーに表示します。
登録されたタグにより、既存メモの絞り込みができます。
絞り込み結果をギャラリーに表示します。
タグ登録機能によりあらかじめ文言を登録すれば、新規登録時にその文言を選択できます。

ストリング変数を使ったテキストボックスの初期化について

ストリング変数を使ってテキストボックスを初期化したり、入力値を他の処理で利用する仕組みを、タイトルボックスを例に、簡単にまとめておきます。

タイトルボックスの Default 属性に、その項目用のストリング変数(今回は StringTitle 変数)を指定します。
初期化したいタイミング(メモの登録ボタン押下後など)で、そのストリング変数に "" (空白) を転送します。 UpdateContext({StringTitle:""}) といった具合です。
タイトルボックスの入力値をストリング変数に保存したいときは、
OnChange 属性に、 UpdateContext({StringTitle:InputTitle!Text})
と処理を指定し、値が変更されたときに転送処理を行います。
これにより、ストリング変数に入力値が入ります。

これで初期化が実現できました。
検索・照会画面のサンプルの時より、少しわかりやすくなったと思っています。

仕組みの解説

ここでは、貼り付けた部品の属性を ExpressView で確認します。
部品を選んで右下の ExpressView ボタンをクリックすれば、画面右に開きます。
以下、画像をクリックすると拡大画面が表示されます。

― 表紙画面 ―

タイマー

TimerEnd

タグデータをコレクション TagsTBL に入れています。
Clear(TagsTBL);Collect(TagsTBL,LoadData("MemosDataTags"));
としている部分がそれです。
タグデータは SaveData 関数で保存しており、 LoadData で読み込んでいます。

ドロップダウン(タグ絞込用)にタグを表示するためのコレクションに、タグデータを登録しています。
Clear(wkTags);Collect(wkTags,TagsTBL);Collect(wkTags,{Word:""});
としている部分がそれです。
タグデータには無選択用の空白がないので、ここで追加登録しています。

メモデータをコレクションに読み込みます。
Clear(Memos);Collect(Memos,LoadData("MemosDataMemos"));
としている部分がそれです。

メモデータを、表示用コレクションにコピーしています。
Clear(wkMemos);Collect(wkMemos,Memos);
としている部分がそれです。

タイマーが終了した時点で、メイン画面に遷移しています。
If(Timer2!Value=Timer2!End,Navigate(List,ScreenTransition!Fade,
{Mode:"New",DispMode:"All",StringTitle:"",StringTags:"",StringMemo:"",StringTime:"",
StringTitleSearch:"",StringTagSearch:"",StringMemoSearch:""}))
としている部分がそれです。
入力ボックスと検索用ボックスの初期化を、 Navigate 関数の引数で指定しています。

Interval 属性を 0.4 にして、これまでよりカウントダウンの拍子を早くしてみました。この方が感触がいいです。

― メイン画面 ―

ギャラリー

Items

If(DispMode="All",Sort(Memos,TimeStamp,SortOrder!Descending),
If(DispMode="SearchTitle",Sort(Filter(Memos,StringTitleSearch in Title),TimeStamp,SortOrder!Descending),
If(DispMode="SearchTag",Sort(Filter(Memos,StringTagSearch in StrTags),TimeStamp,SortOrder!Descending),
Sort(Filter(Memos,StringMemoSearch in Memo),TimeStamp,SortOrder!Descending))))

TimeStamp

表示順を変える機能を付けるつもりでしたが、これが意外にくせ者だったので、今回は諦めました。そのあたりの経緯を「実現を見送ったこと」で振り返っています。

タイトルラベル

Text

ThisItem!Title

タイムスタンプラベル

Text

ThisItem!TimeStamp

タグラベル

Text

ThisItem!StrTags

イベント用部品

OnSelect

UpdateContext({StringTitle:GalleryMemos!Selected!Title,StringTags:GalleryMemos!Selected!StrTags,
StringMemo:GalleryMemos!Selected!Memo,StringTime:GalleryMemos!Selected!TimeStamp})

部品が重なっている場所で、部品を上層や下層に移動したいときは、画面下の Arrange ボタンの Order メニューを使って対応します。

モード選択ドロップダウン

Items

["New","Mod"]

Default

Mode

OnChange

If(Mode<>DropdownMode!Selected!Value,If(DropdownMode!Selected!Value="New",UpdateContext({Mode:"New"}), UpdateContext({Mode:"Mod"}));UpdateContext({ StringTitle:"",StringTags:"",StringMemo:"",StringTime:""}))

登録ボタン

OnSelect

Collect(Memos, {TimeStamp:Text(Now(),"yyyy/mm/dd hh:mm:ss") ,
Title:StringTitle,Memo:StringMemo,StrTags:StringTags});

OnSelect

SaveData(Memos,"MemosDataMemos");

OnSelect

UpdateContext({StringTitle:"",StringTags:"",StringMemo:"",StringTime:""})

Disabled

Or(StringTitle="",StringMemo="")

true

Color

If(ButtonAdd!Disabled,RGBA(255, 255, 255, 0.3),RGBA(255, 255, 255, 1))

" New "

" Mod "

Visible

Mode="New"

更新ボタン

OnSelect

UpdateContext({StringTime:Text(Now(),"yyyy/mm/dd hh:mm:ss")});
UpdateIf(Memos,TimeStamp=GalleryMemos!Selected!TimeStamp,
{Title:StringTitle,StrTags:StringTags,Memo:StringMemo,TimeStamp:StringTime});

OnSelect

SaveData(Memos,"MemosDataMemos");

Disabled

Or(StringTitle="",StringMemo="")

true

Color

If(ButtonMod!Disabled,RGBA(255, 255, 255, 0.3),RGBA(255, 255, 255, 1))

" Mod "

" New "

Visible

Mode="Mod"

削除ボタン

OnSelect

RemoveIf(Memos,TimeStamp=GalleryMemos!Selected!TimeStamp);

OnSelect

SaveData(Memos,"MemosDataMemos");

OnSelect

UpdateContext({StringTitle:"",StringTags:"",StringMemo:"",StringTime:""})

Color

If(ButtonDel!Disabled,RGBA(255, 255, 255, 0.3),RGBA(255, 255, 255, 1))

" Mod "

" New "

Visible

Mode="Mod"

タイトルボックス

Default

StringTitle

イベント用部品

OnChange

UpdateContext({StringTitle:InputTitle!Text})

Disabled

And(Mode="Mod",CountRows(GalleryMemos!AllItems)=0)

タグボックス

Default

StringTags

OnChange

UpdateContext({StringTags:InputTags!Text})

Disabled

And(Mode="Mod",CountRows(GalleryMemos!AllItems)=0)

タグ消去ボタン

OnSelect

UpdateContext({StringTags:""})

本文ボックス

Default

StringMemo

OnChange

UpdateContext({StringMemo:InputMemo!Text})

Disabled

And(Mode="Mod",CountRows(GalleryMemos!AllItems)=0)

Mode

TextMode!MultiLine

タイムスタンプラベル(表示)

Default

StringTime

ギャラリー(タグ候補用)

Items

Sort(TagsTBL,Word,Ascending)

ソートしているつもりなのですが、並び順が今ひとつしっくりこないのは、英語版だからかもしれません。

タグ追加ボタン

タグボックス

OnSelect

UpdateContext({StringTags:StringTags & GalleryTagsChoices!Selected!Word & ","})

キーワードボックス(タイトル用)

Default

StringTitleSearch

OnChange

UpdateContext({StringTitleSearch:InputTitleSearch!Text})

上記の「ストリング変数を使ったテキストボックスの初期化について」に、初期化の仕組みを簡単に記しています。

検索ボタン(タイトル用)

OnSelect

UpdateContext({DispMode:"SearchTitle", StringMemoSearch:"",StringTagSearch:""});

OnSelect

If(Mode="Mod",UpdateContext({StringTitle:"",StringTags:"",StringMemo:"",StringTime:""}))

Disabled

InputTitleSearch!Text=""

true

Color

If(ButtonSearchTitle!Disabled,RGBA(255, 255, 255, 0.4),RGBA(255, 255, 255, 1))

今回は単一項目検索にしましたが、複合検索も十分に対応可能だと思います。ただ、コーディング量がどんどん増えてしまうので、 Project Siena の考え方からずれてしまう、という意味もあります。

キーワードボックス(本文用)

Default

StringMemoSearch

OnChange

UpdateContext({StringMemoSearch:InputMemoSearch!Text})

上記の「ストリング変数を使ったテキストボックスの初期化について」に、初期化の仕組みを簡単に記しています。

検索ボタン(本文用)

OnSelect

UpdateContext({DispMode:"SearchMemo",StringTitleSearch:"",StringTagSearch:""});

OnSelect

If(Mode="Mod",UpdateContext({StringTitle:"",StringTags:"",StringMemo:"",StringTime:""}))

Disabled

InputMemoSearch!Text=""

true

Color

If(ButtonSearchMemo!Disabled,RGBA(255, 255, 255, 0.4),RGBA(255, 255, 255, 1))

ドロップダウン(タグ絞込用)

Items

Sort(wkTags,Word,Ascending)

Default

StringTagSearch

OnChange

UpdateContext({StringTagSearch:DropTags!Selected!Value})

無選択用の空白は、表紙画面の処理の中で登録しています。

タグ絞込ボタン

OnSelect

UpdateContext({DispMode:"SearchTag", StringTitleSearch:"",StringMemoSearch:""});

OnSelect

If(Mode="Mod",UpdateContext({StringTitle:"",StringTags:"",StringMemo:"",StringTime:""}))

Disabled

DropTags!Selected!Value=""

true

Color

If(ButtonSearchTag!Disabled,RGBA(255, 255, 255, 0.4),RGBA(255, 255, 255, 1))

検索条件クリアボタン

OnSelect

UpdateContext({DispMode:"All",StringTitleSearch:"",StringTagSearch:"",StringMemoSearch:""});

OnSelect

If(Mode="Mod",UpdateContext({StringTitle:"",StringTags:"",StringMemo:"",StringTime:""}))

とりあえず全件表示したい時に押せるよう、使用不可等の設定はしません。

タグ管理画面遷移ボタン

OnSelect

Navigate(ManageTags, ScreenTransition!Fade,{StringTag:""})

― タグ管理画面 ―

文言入力ボックス

Default

StringTag

OnChange

UpdateContext({StringTag:InputTag!Text})

タグ登録ボタン

OnSelect

Collect(TagsTBL, {Word:StringTag});SaveData(TagsTBL,"MemosDataTags");

OnSelect

UpdateContext({StringTag:""});

OnSelect

Clear(wkTags);Collect(wkTags,TagsTBL);Collect(wkTags,{Word:""})

ギャラリー(登録タグ用)

Items

Sort(TagsTBL,Word,Ascending)

タグ削除ボタン

OnSelect

Remove(TagsTBL, ThisItem);SaveData(TagsTBL,"MemosDataTags")

実現を見送ったこと

今回、 Project Siena にしては大げさに作った感がありますが、それでも、見送った機能があります。それは、メモ一覧のソート機能です。

ギャラリー内をソートして表示すること自体は十分に可能なのですが、そのことと、更新時の振る舞いがかみ合わなかったのです。

具体的には、ギャラリーにソート機能を盛り込んでおくと、メモの更新ボタンを押したときに、該当データは正常に更新されるのですが、表示内容が別のメモに切り替わってしまうのです。想像するに、ギャラリーに結びついたデータを更新すると、一旦 Selected 状態が解除され、ギャラリーの先頭のデータが Selected 状態になるのかもしれません。

本来、タイトル名とタイムスタンプの両方でソートできるようにするつもりでしたが、上記の振る舞いを踏まえ、固定でタイムスタンプ(降順)にすることとしました。

感想

色々機能を試したり、途中で設計を変えたりしたため、思いのほか時間がかかってしまいました。作成後に使用して気づいた点があります。

それは、 _sessionState.json なるファイルが、容量を増し続けたことです。

保存しているメモデータ・タグデータは、それとは別に存在しており(データの保存場所については「SaveData の保管場所」を参照)、中身を見る限り、ログのようなものかと推察しましたが、くわしいことはよくわかりません。

保存目的以外のデータがいたずらに容量を増すのは望ましくないので、わざわざ出力しなくてもいいのにな、と思った次第です。 Project Siena で Publish した後のデータは html と JavaScript らしいので、詳しい方であれば、余計なファイルの出力・更新を避けることができるかもしれません。

もう一つ、保存データを扱うアプリを作ると、アプリのバージョンアップの時にデータの引き継ぎが発生します。本来であれば、そこまで考えてアプリを作成しないといけませんが、思うに、 Project Siena でそこまで考えて作るのは、どうも筋違いな気がします。

データの保存・読込機能があるのはとても便利に思えるのですが、より広範に、それこそストアアプリで公開したいと思うような方は、この SaveData / LoadData 機能や、 Export / Inport 機能の使用方法を慎重に考えた方が賢明かもしれません。