かならずお読みください→

エンチャント文字盤に文書保存機能をつける

０　はじめに

コミュニケーションエイドで作成した文書を保存できると次に続きを書くことができます。

またあらかじめ作った文章を保存しておき、見せたい相手が来たときに、その文書を読み込んで表示することもできます。

さらに何種類かの文章を並行して書き進める際にも文書の保存機能があると作業が便利になります。これはワープロなどでも全く同じことです。

これまでエンチャント文字盤にはこのような文書保存の機能がありませんでした。そこで今回はエンチャント文字盤で作成した文章を保存する機能について考えて見ました。

１　エンチャント文字盤でのファイルの取扱

エンチャント文字盤はWebアプリです。基本的にホームページを同じ原理で動いています。さてこのような原理のエンチャント文字盤で作成した文章ファイルをどこに保存すべきでしょう。

複数の人がエンチャント文字盤を使い、それぞれ文書ファイルをWeb上に保存するのはかなりむつかしい仕事です。さらに保存された個人的な文章をしっかり守れるのかという問題もあります。ユーザがそれぞれ個別に保存場所を設定するのもずいぶん手間のかかることです。

ではユーザのパソコンに保存するのはどうでしょう。これは、自由自在にVOCAを作る際にも話題になりましたが、Web上のhtmlやjavascriptからユーザのパソコンのファイルを自由に読み書きするという意味で、できると便利なようですが、もしこれが実現するとすべてのパソコンが丸見え状態になり、個人の秘密やプライバシも保持できなくなります。コンピュータウイルスとかマルウエアなどの世界ですので、おいそれとできません。このような理由でこれまでこの問題を後回しにしてきました。

しかし実際にこれだけ多くのWebアプリが使われていますので、何かうまい仕組みがあるはずです。ようやく重い腰を上げて調査を開始しました。

しらべてみるとやはりありました。それが Web Storage です。これは、HTML5から追加された機能で、ブラウザの領域の一部に限定してファイルの読み書きができる仕組みです。仕組みとしてはクッキーに近いですが記憶容量の上限は5MBと文章を記憶するには十分で、データの有効期限もなく長く保存できます。

また Web Storage にはウインドウごとのセッションで有効な sessionStorage とブラウザ内に永続的にデータを保存する localStorage があります。今回の用途には localStorage が適しています。

Web Storage は制定され既に数年経過し実績もあるようです。例えばある通販サイトではお勧め商品が表示されます。これもこの機能を使っているそうです。（あなたの好きな商品の情報は、あなたのパソコンの中に保存されているのです。つまり同じパソコン同じブラウザ同じアカウントで誰かが買い物するときには注意が必要とわかります。）

２　文書の保存　具体的な方法

ワープロでは文書ファイルに名前をつけ保存し数多くの文章を管理できます。しかしファイルがあまりに増えると混乱しがちです。またファイル一覧の表示やファイル名の入力などユーザの負担も小さくありません。そこで今回はお使いになる人にわかりやすいシンプルな方法を考えてみました。ひらがなカタカナ文字盤　標準版　文章読み上げ機能付き　に何種類かの文書保存機能を追加しました。（尚サンプルの発声機能は、osは　win10, 8, 7, linux, android　ブラウザは　chrome, edge　に対応しています。文書保存機能は他のブラウザでも確認できます。）

1種類の文書を扱う場合

この場合に必要な動作は、前回終了時の文書が次回起動時に表示されることです。終了時に自動的に保存され、起動時にも自動的に読み込まれるようにすれば、特に操作項目を追加する必要もないでしょう。

サンプルはこちら、

１つの文書保存文字を入力したあと閉じ、再度開くと前の文が表示されます。

外見上は従来と同じです。プログラムに追加したのは、起動時と終了時の処理です。

  //local storage 関係宣言
   var SERVICE_NAME = 'SERVICE_NAME';
   var storage = null;
window.onload = function() {
  //開始時　local storage  から読み込み
    try {
        storage = JSON.parse(localStorage[SERVICE_NAME] || '');
    } catch(e) {
        storage = '';
    }
｝

...中略...

  //終了時　local storage  へ保存
   window.onbeforeunload = function() {
       storage = title.text
       localStorage[SERVICE_NAME] = JSON.stringify(storage);
   }

...中略...

            title.text = storage              // 読み込んだデータを変数に入れる

文書の保存先として、SERVICE_NAMEというキーを指定し、これと対になるデータ（この場合storage）を準備します。（2，3行）開始時まず一番最初は、該当するデータがありませんので、空白データを準備します。（9行目）これをエンチャント文字盤につかう変数 title.textに代入します。（23行）また終了の際は、変数の値を保存用変数に代入し、（17行）キーと対にして保存します。（18行）これで次回の起動時には自動的に前の文が読み込まれ表示されるようになります。

２種類の文書を扱う場合

サンプルはこちら、

２つの文書保存文書を切り替えるには左上のボタンをクリックします。ボタンの左に文書識別番号が表示されます。再度開くと前の文が表示されます。

二文の場合は、上記と同じ記録用キーを2つ用意します。（4-7行）一文の場合と同様に起動時に自動的に読み込み、終了時に保存します。さらに使用中の文書を記憶するための識別番号が必要になります。(2-3行)起動時にこれは前回使用した文書を示します。これも同様に読み込みと保存をします。

 //local storage 関係宣言
   var SERVICE_NAME0 = 'SERVICE_NAME0';
   var storage0;
   var SERVICE_NAME1 = 'SERVICE_NAME1';
   var storage1 = null;
   var SERVICE_NAME2 = 'SERVICE_NAME2';
   var storage2 = null;

window.onload = function() {
  //開始時　local storage  から読み込み
        storage0 = localStorage.getItem('SERVICE_NAME0');
    try {
        storage1 = JSON.parse(localStorage[SERVICE_NAME1] || '');
    } catch(e) {
        storage1 = '';
    }
    try {
        storage2 = JSON.parse(localStorage[SERVICE_NAME2] || '');
    } catch(e) {
        storage2 = '';
    }
    });

...中略...

  //終了時　local storage  へ保存
   window.onbeforeunload = function() {
            if (storage0 == 2 ){
               storage2 = title.text;
            } else {
               storage1 = title.text;
            }
       localStorage.setItem('SERVICE_NAME0', storage0 );
       localStorage[SERVICE_NAME1] = JSON.stringify(storage1);
       localStorage[SERVICE_NAME2] = JSON.stringify(storage2);
   }

起動時には前回使用した文書を文書識別番号により判断します。

        if (storage0 == 2 ){
           title.text = storage2;
        } else {
           title.text = storage1;
           storage0 = 1;
        }

さらに、文章を切り替える操作のためのボタンが必要になります。このページ一番上の図の左上のように文書切りかえのボタンとこのボタンを押したときのサウンドを追加しました。

このボタンのを押すたびに、文1、文2が切り替わります。この機能をボランをクリックしたさいのイベントとして下記を追加します。

      wordbun.addEventListener(Event.TOUCH_START, function(e) {//文いれかえ
        wordbun.tl.scaleBy( 0.9, 3, enchant.Easing.ELASTIC_EASEINOUT);
        wordbun.tl.scaleBy( 1 / 0.9, 3, enchant.Easing.ELASTIC_EASEINOUT);
        game_.assets[sndse3].clone().play();
            if (storage0 == 1 ){
               storage1 = title.text;
               title.text = storage2;
               storage0 = 2;
            } else {
               storage2 = title.text;
               title.text = storage1;
               storage0 = 1;
            }
               titleb.text = storage0;
            });

2種類の文書を扱う場合はこのように外見も、動作もいくつか変更が必要になります。しかしこの先扱う文書の数が増えても、変化はごく部分的で作るのもこの先は楽です。

３種類の文書を扱う場合

サンプルはこちら、

３つの文書保存文書を切り替えるには左上のボタンをクリックします。ボタンの左に文書識別番号が表示されます。再度開くと前の文が表示されます。

三種類の文書を扱う場合には、上記の項目をそれぞれ下記の様に修正します。

  //local storage 関係宣言
   var SERVICE_NAME0 = 'SERVICE_NAME0';
   var storage0;
   var SERVICE_NAME1 = 'SERVICE_NAME1';
   var storage1 = null;
   var SERVICE_NAME2 = 'SERVICE_NAME2';
   var storage2 = null;
   var SERVICE_NAME3 = 'SERVICE_NAME3';
   var storage3 = null;
window.onload = function() {
  //開始時　local storage  から読み込み
        storage0 = localStorage.getItem('SERVICE_NAME0');
try {
    storage1 = JSON.parse(localStorage[SERVICE_NAME1] || '');
} catch(e) {
    storage1 = '';
}
try {
    storage2 = JSON.parse(localStorage[SERVICE_NAME2] || '');
} catch(e) {
    storage2 = '';
}
try {
    storage3 = JSON.parse(localStorage[SERVICE_NAME3] || '');
} catch(e) {
    storage3 = '';
}
});

...中略...

  //終了時　local storage  へ保存
   window.onbeforeunload = function() {
            if (storage0 == 1 ){
               storage1 = title.text;
            } else if (storage0 == 2 ) {
               storage2 = title.text;
            } else if (storage0 == 3 ) {
               storage3 = title.text;
            } else {
               //storage1 = title.text;
            }



       localStorage.setItem('SERVICE_NAME0', storage0 );
    
       localStorage[SERVICE_NAME1] = JSON.stringify(storage1);
       localStorage[SERVICE_NAME2] = JSON.stringify(storage2);
       localStorage[SERVICE_NAME3] = JSON.stringify(storage3);
   }

起動時には前回使用した文書を表示します。

            if (storage0 == 1 ){
               title.text = storage1;
            } else if (storage0 == 2 ){
               title.text = storage2;
            } else if (storage0 == 3 ){
               title.text = storage3;
            }

このボタンのを押すたびに、文1、文2、文3が切り替わります。この機能をボランをクリックしたさいのイベントとして下記を追加します。

   wordbun.addEventListener(Event.TOUCH_START, function(e) {  //文いれかえ
     wordbun.tl.scaleBy( 0.9, 3, enchant.Easing.ELASTIC_EASEINOUT);
     wordbun.tl.scaleBy( 1 / 0.9, 3, enchant.Easing.ELASTIC_EASEINOUT);
     game_.assets[sndse3].clone().play();

            if (storage0 == 1 ){
               storage1 = title.text;
               title.text = storage2;
               storage0 = 2;
            } else if (storage0 == 2 ){
               storage2 = title.text;
               title.text = storage3;
               storage0 = 3;
            } else if (storage0 == 3 ){
               storage3 = title.text;
               title.text = storage1;
               storage0 = 1;
            }
               titleb.text = storage0;
            });

５種類10種類の文書を扱う場合

くどくなってきましたので省略します。サンプルはこちら、

５つの文書保存文書を切り替えるには左上のボタンをクリックします。ボタンの左に文書識別番号が表示されます。再度開くと前の文が表示されます。

１０の文書保存文書を切り替えるには左上のボタンをクリックします。ボタンの左に文書識別番号が表示されます。再度開くと前の文が表示されます。

３　まとめ

エンチャント文字盤で文書を保存できる様になりました。これで従来のコミュニケーションエイドが備えている基本的な機能がまたひとつ備わりました。またシンプルな文書の切りかえ操作もつくってみました。

これらを使っていくつかの文を準備して、きりかえて発声させると、VOCAのような使い方もできるでしょう。エンチャント文字盤の用途がいろいろ広がってきましたが、何よりもファイルの操作ができるようになったのが収穫です。これから先のアイデアもさらに広がるでしょう。

さてWeb Storage の記憶容量。５MB とはどれくらいでしょう。青空文庫で我が輩は猫であるのテキスト版のファイルを調べて見まら、なんと750kBでした。

まあいずれにせよ十分な記憶容量であることはまちがいないようです。

参考URL

視線入力準備関係

ブラウザでストレージ？ Web Storageを使いこなそう
http://www.atmarkit.co.jp/ait/articles/1108/12/news093.html

2018/08/10　公開

研究企画課リハ工学科にもどる

エンチャント文字盤に文書保存機能をつける

０ はじめに

１ エンチャント文字盤でのファイルの取扱

２ 文書の保存 具体的な方法

1種類の文書を扱う場合

２種類の文書を扱う場合

３種類の文書を扱う場合

５種類10種類の文書を扱う場合

３ まとめ

参考URL

０　はじめに

１　エンチャント文字盤でのファイルの取扱

２　文書の保存　具体的な方法

３　まとめ