シリコンバレースーパーウエア

投稿

足し算以外もできるようにする

9/29/2022

ホームブログ Firebase情報足し算以外もできるようにする 2022年9月29日足し算以外もできるようにする穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。演算子を選べるように変更する足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。これには、HTML の記述を変更してフォームを変更する必要があります。 <label>+</label> を以下のように変更します。 <select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。演算子の変更を反映するプログラム側でやることは三つです。初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする）演算子の変更を検出して、現在選択されている選択肢を更新する「Calcullate」ボタンがクリックされたら必要な処理を呼び出す現在どの演算子が選択されているかを知る必要があります。実装方法は幾つかありますが、今回は選択が変更される度に現在選択されている演算子を更新する方法を採用した例を紹介します。これには、現在選択されている演算子を保存する変数「operator」を用意して管理します。

改良版足し算プログラム

9/15/2022

ホームブログ Firebase情報改良版足し算プログラム 2022年9月15日改良版足し算プログラム前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。データの処理は？このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。つまり、プログラムのデータ処理部分は以下の関数「add(a, b)」だけです。 function add(a, b) { return a + b; } 処理自体は、二つの整数「a」と「b」を受け取って、この二つの整数を足し算した結果を返すというシンプルなものです。残りのプログラムは？このプログラムのデータ処理部分は、至ってシンプルです。では、残りのプログラムは何かというと、これがユーザーインターフェースになります。 <!DOCTYPE html> <html> <head> <title>Add Program</title> </head> <body> <div> <input id="opeland0" type="text" placeholder="Please input integer" /> <label>+</label> <input id="opeland1" type="text&qu

誤った入力を防ぐインターフェース

9/13/2022

ホームブログ Firebase情報誤った入力を防ぐインターフェース 2022年9月13日誤った入力を防ぐインターフェースユーザーインターフェースをきちんと設計することで、誤ったデータの入力を防ぐ事が可能です。今回は、整数の値を入力するためのユーザーインターフェースの例を紹介します。ユーザーインターフェースの設計今回は、プログラムに渡すための、整数を入力するユーザーインターフェースを設計します。ユーザーインターフェースの設計の例なので、この例では、計算は行わず、入力された整数の値のみを表示します。整数を入力するためのフィールド入力された整数の値を表示するためのフィールドの二つを用意します。整数を入力するためのフィールドには、「Input data」というラベルをつけます。また、現在の入力された整数の値を表示するためのフィールには、「Current Value」というラベルをつけます。現在の入力された整数の値を表示するフィールドには、誤って利用者が入力できないように、入力できないように設定します。整数を入力するためのフィールドには、整数の入力を促すため、値が未入力の場合には「Please input integer value!」を、また、現在の入力された整数の値を表示するためのフィールドは、値が未入力の場合には「No input value」を表示します。入力された値が整数でない場合には、「Not an integer value」を表示するような仕様にします。整数を入力するためのフィールは、整数以外の文字を入力できないようにして、整数以外が入力された場合には、表示しないようにして、入力されたデータが整数でない場合には、「Please input integer value!」を表示するようにします。以上が例として紹介する、ユーザーインターフェースの仕様です。フォームを HTML で記述今回紹介する、ユーザーインターフェースのフォームを HTML で記述します。ラベルは、「label」のタグをつけて記述して、整数を入力するフィールドと、現在の整数値

親切なユーザーインターフェースとは？

9/08/2022

ホームブログ Firebase情報親切なユーザーインターフェースとは？！ 2022年9月8日親切なユーザーインターフェースとは？前回は、コマンドラインより使いやすい、グラフィックベースのユーザーインターフェースを紹介しました。しかし、前回の例はシンプルなものでした。実は、GUI(Graphical User Interface)を利用すると、もっと利用者に親切なインターフェースを提供する事ができます。今回はその例を紹介します。タイプした文字をチェックするプログラムに必要なデータをタイプして入力する場合には、いずれにしてもプログラムが意図しないデータを入力してしまうことは避けられません。人間がタイプする以上、誤ってデータを入力する可能性をゼロにすることはできないからです。ただし、親切なユーザーインターフェースを設計する事は可能です。今回は、より親切なユーザーインターフェースの例を紹介します。期待しないデータが入力された場合に、それを利用者に伝えるようなエラー処理が必要な事は紹介してきた通りです。何がおかしいのかを利用者に伝えるために、実際に入力された（タイプされた）データをチェックすることで、エラーの詳細を利用者に伝えることが可能です。ポイントは、そのチェックを「いつ」、「どこで」するかで利用者の印象が変わってきます。これまでの例では？これまでに紹介した例では、入力が完了した後にデータをチェックする方法を使っていました。コマンドラインから必要なデータをプログラムに渡す場合には、全てのタイプが終わった時点でプログラムが起動されるので、データの入力完了後以外でのチェックが難しくなります。もちろん、改善する方法はあって、プログラムを起動した後にデータを入力できるようなプログラムに変更すれば実現は可能です。コマンドラインの例は、シンプルなプログラムの例のために紹介しましたが、最近のプログラムでコマンドラインを利用するような例は一般的な利用者を対象にしたプログラムでは殆ど使われていません。したがって、今回は、GUI(Graphical User Interface)

モダンなアプリにするには？

9/01/2022

ホームブログ Firebase情報モダンなアプリにするには？！ 2022年9月1日モダンなアプリにするには？コマンドラインで足し算をするプログラムができましたが、これは昔のスタイルです。最近のアプリは、GUI(グラフィカル・ユーザー・インターフェース:Graphical User Interface)と呼ばれる、もっと使いやすいです方法で作られています。NodeJS を使った場合には、コマンドラインでの利用になりますが、同じ Javascript のプログラムでも、Web ブラウザを利用するともっと、使いやすいプログラムにする事が可能です。今回は、Web ブラウザ上で足し算をするプログラムにしてみました。 Web ブラウザで動くアプリ最近の Web ブラウザは、Javascript を使ったプログラムを実行できるようになっています。 Web ページを作る時に利用される HTML を使って記述すると、Windows パワーシェルのような「特殊」なウインドウを開いて実行しなくても、Web ブラウザ上で必要なデータを入力してボタンの操作で足し算の計算をするようなアプリにする事ができます。この場合、HTML でデータを入力するフォームを作って、その中に Javascript のプログラムを組み込むと Web ブラウザで動くアプリになります。まずは HTML でフォーム作り最初にやることは、HTML でデータを入力するためのフォームを作ります。 <!DOCTYPE html> <html> <head> <title>足し算のプログラム</title> </head> <body> <div> <input /> <label>+</label> <input /> <label>=</label> <input /&