かならずお読みください→
わかりやすいアイコンに変更する方法もあります
左：オリジナルのアイコン 右：新しく作ったアイコン
前回スマホをお使いになっているご高齢の方々がどうも増えているようだというお話をしました。なかには自分からすすんで新しいものに取り組まれた方もおられるかもしれませんが、やはり多くの方はご家族に勧められてお使いになるようです。家の電話は普段すごす部屋から離れているとか冬は寒いとか（理由は分かりませんが昔はそんなお宅が普通でしたね）で大変とか、なにかあった時に電話が手元にあればすぐ連絡できて安心だなどいろいろ事情があるようです。お孫さんに教えてもらったとか、スマホ教室に通ったといったお話もうかがいます。いまどきは『いい年齢なのにスマホ』などと言われることもないようです。
ところが、これは人によっていくらか違いはあるのですが、だんだん思い出せなくなったり、新しいことを覚えるのに苦労するとか言います。みなさんも「昔のことはよく覚えているのに、最近のことは忘れやすい」という話をお聞きになったりご自分で実感されることがあると思います。
これと同じように昔から使っていた古い道具なら今でもしっかり使えるのに、最近の道具はどうも使い方が難しいということもあるようです。ある日わが家の炊飯器がこわれましたので、古いものを出してきてまず掃除してご飯を炊きました。何年も使っていなかったのですが、米をといで水を入れてフタをしめてあとはスイッチを押すだけ。これほど使い方がシンプルなので簡単に思い出せました。このように昔の道具はどれもかなりシンプルだったのでご高齢のかたにも使いやすかったのかもしれません。
このようにスマホで困ったら古い電話を物置から出してきて使えばいい、そんな具合にはいきません。昔の電話がまだしまってあるお宅なんてまずありません。（ちなみに私の実家には黒電話がまだあります）
このようなわけで、自分のスマホがだんだん苦手になる人がこれから多くなると思います。らくらくスマホなどの難しい操作が苦手なひとむけアプリなどもありますがそれでもだんだんむつかしくなっていくでしょう。スマホが使えなくなると、LINEもできない、検索もできない、写真もとれない、でもそんなことよりも、電話できなくなると困ります。たとえご本人は平気だと言われても、ホントに困るのはご家族のほうです。
ところが幸いスマホはコンピュータですので、いろいろと工夫ができます。そこで、『もっとらくらくスマホ（ただし電話だけ）』といったものを作ろうと考えはじめました。今回もこれまでの経験も活かしてWebアプリで作ることにしました。
ところでなぜWebアプリなのか？そもそもWebアプリって何か？と思う方もおられるかもしれません。Webアプリとは、特定のWebサイトを閲覧することでそこに組み込まれたプログラムを使って目的を果たすアプリです。そのサイトに接続するだけで利用できます。とにかくすぐに始められます。
使う人のメリット：Webページ閲覧と同じやり方ですぐ使えます。インターネットにつなぐ必要がありますがインストールなどの手間はありません。
作る人のメリット：Webアプリならプログラムひとつで、Windows、Mac、Android、ios（iPados）、Linuxなどに対応できます。通常、複数のシステムに対応するには何種類もプログラムが必要ですがこの負担がずいぶん小さくなります。
配る人のメリット：ソフトを配る仕事はありません。Webアプリではサーバがこの仕事をします。
まとめると、使う人と作る人の負担が軽くて間に誰もいないので、アプリの産地直送のようなものです。このような理由でWebアプリが増えています。
さてWebアプリのはじまりは、index.htmlファイルです。以下にかんたんに電話をかけるアプリ（おとこのこ）のファイルについて説明します。 index.htmlは次のようになっています。
<!DOCTYPE html> <html> <head>Fast Call boy </head> <body>
このhtmlについて説明します。
4行目：日本語など2バイト文字、utf-8を指定しています。はじめはもっと日本語を使う予定でしたが、外国の人にも使いやすいようにシンプルにしましたので、特に意味はありません。
5行目：タイトルは、Fast Call boyで、男の子の画像を表示しています。
6-7行目：ショートカットアイコンとして、自作した受話器と顔の電話をかける画像call.pngを指定しています。これがないとサイトのアイコンfaviconを表示します。残念ながら当院のサイトのアイコンは病院のマークで、色調が地味で視認性がいまいちまた電話とはわかりにくいものでした。そこで見やすいわかりやすいアイコンを作り表示するようにしました。7行目は、iosの場合の指定文です。どちらもrootからのpathで指定する必要があります。
8行目は、文字やテキストボックス、ボタンや画像などの表示の設定スタイルシートを、このファイルと同じ位置にあるstyle2.cssに指定しています。
9行目はこのページを動作させるJavaScriptのプログラムをec21.jsに指定しています。
このように<head> と</head>の間で、関連するファイルを指定します。
またbodyでは、表示するオブジェクトを指定します。
12行目の<form>で番号入力フォームをつくります。名前はform1、IDはid_form1とします。
form1のなかに、テキストボックスtelnumber1とSAVEと表示したボタンを配置します。またボタンを押すと、javascriptの20行目のonButtonClick1()が動くように指定しています。
18行目では、その下に画像boy.gifに電話番号000000のリンクをつけて表示しています。この部分の番号はあくまでも仮で、後でjavascriptで書き換えます。
次に表示を設定するためにcssファイルを作ります。
style2.cssは次のようになっています。
p {
font-size: 30px;
font: 20px/1.5 "ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro",Osaka,“メイリオ”,Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Arial,Helvetica,Verdana,sans-seri
line-height : 1.5 ;
margin: 5px 100px 15px 100px;
}
.flex{
padding: 0.2% 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
}
.flex img{
width: 600px;
}
input{
font-size: 30px;
}
body {
touch-action: none; /* タッチパネルの操作を無効化 */
}
@media (min-width: 1024px) {
a[href^="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}
スタイルシートでは各部分の表示設定が記されています。
1行目：まず文字表示ｐは、使用するフォントと大きさ、周囲のマージンなどが指定しています。当初は日本語表記で「電話番号」などと表示するために日本語フォントも指定してありますが、表示をシンプルにするために日本語表記はなくなりました。
8行目：おとこのこのイラストを表示する部分が.flexですが、配置を均等=flexにするように指定しました。これで画面サイズに合わせて中央に配置できます。またイラストの大きさは、幅600pxで指定しました。
20行目：電話番号入力部分のフォントサイズは30px
24行目：ピンチなどの動作で拡大縮小表示できないように操作を無効化しています。
28行目：また画面幅が大きい場合は、パソコンを使っていると判断し、電話をかけるリンクを無効化しています。これによりパソコンでイラストをクリックしても電話をかける動作は行いません。もしこの設定がないと各種の警告が表示されてユーザを不安にさせます。これを防ぐのが目的です。
最後に、動作を作るために、jsファイルを作ります。
ec21.jsは次のようになっています。
var pn1 = 0 ;
var SERVICE_1 = 'SERVICE_1';
document.addEventListener("DOMContentLoaded", function(){ // htmlを読み込み後以下を実行せよ
// localStrage から 前回の電話番号1を読み込む
try {
pn1 = (localStorage[SERVICE_1] || '');
} catch(e) {
pn1 = '';
}
// テキストボックスに番号を表示する
document.forms.id_form1.id_telnumber1.value = pn1;
console.log("pn1. =", pn1, typeof(pn1));
// htmlの電話をかける部分に番号を組み入れる
var mydiv = document.getElementById("idName");
mydiv.innerHTML = '';
console.log('電話をかける');
})
function onButtonClick1(){//保存ボタンをクリックした場合
//テキストボックスの番号を読み取りlocalStrage に保存する
pn1 = document.forms.id_form1.id_telnumber1.value;
console.log("phone no1. =", pn1, typeof(pn1));
localStorage[SERVICE_1] = pn1;
// htmlの電話をかける部分に番号を組み入れる
var mydiv = document.getElementById("idName");
mydiv.innerHTML = '';
console.log('電話をかける');
}
簡単に説明します。 1-2行目：使用する変数を宣言します。 4-18行目：ブラウザの保存領域に前回の電話番号が保存ずみの場合は読み込みます。まだ保存していない場合は空白にします。読み込んだ番号はテキストボックスに表示して、15-16行でindex.htmlの18行部分を書き換えて電話番号を修正します。（JavaScriptからhtmlを書き換えています。こんなコトできるなんてびつくり）これでイラストをタップすると通話開始の寸前まで進みます。
20-29行目：またSAVEボタンを押すとfunction onButtonClick1()が動き始め、テキストボックスの番号を読み取り自動的に保存し、index.htmlの18行部分を書き換えます。
基本バージョン（おとこのこ）は以上のように作られています。
これをおんなのこのイラストに変更したのが、「おんなのこ」です。
また、ふたつのイラストから電話の相手を選べるように改善したのが、「おとこのひととおんなおひと」と「おじさんとおばさん」です。こちらについて詳しくお知りになりたい方は、パソコンで起動して、画面で右クリックしページのソースを表示させると内容を見ることができます。
「はじめに」ではご高齢の方のスマホについてお話しました。しかしこのほかにも、簡単に電話ができると助かる人たちがいます。若くて不自由をもって生活している人たちです。自分で電話ができるといいのだけれど、もうちょっとというところで難しい人たちです。
このような皆さんが自分でできることをだんだん増やせていけたらとてもいいですね。
普通の道具をもっとつかいやすくして自分でできるように応援する のは、たとえば段差にスロープや手すりをつけることとよく似ています。 今回ご紹介した方法がこのような取組にいくらかでも役に立てたら、そして「情報」やコンピュータやプログラムを勉強する若い人たちと昔は若かった人たちがこのようなことがらに関心をもっていただけたら幸いに思います。
2022/09/29 公開
研究企画課リハ工学科にもどる
←もくじはこちらです