すべてのカテゴリ

新着有料ブログ

R05【03航空・宇宙部門】必須問題Ⅰ『解答論文...

R05【02船舶・海洋部門】必須問題Ⅰ『解答論文...

あまり知られてない効果絶大な脚やせ方法教えます ...

【三択タロット】運気アップの方法は？（vol.4...

【三択タロット】運気アップの方法は？（vol.3...

今回は課金でのブログになります。世相に関して。。...

R05【01機械部門】必須問題Ⅰ『解答論文例』-...

見つけられないと思っていた夢、すでに手の中に？

ページがインデックスに登録されない新しい要因と...

有料ブログを優先表示

4 件中 1 - 4 件表示

ユーザーインターフェースの設計

ユーザーインターフェースの設計前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。HTML でデザインこれまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。今回は、一般的な電卓のようなユーザーインターフェースを実現します。この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。　HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。<!DOCTYPE html><html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" />

IT・テクノロジー

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

2022/10/13

改良版足し算プログラム

改良版足し算プログラム前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。データの処理は？このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。つまり、プログラムのデータ処理部分は以下の関数「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="Plea

IT・テクノロジー

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

2022/09/16

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

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

IT・テクノロジー

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

2022/09/09

ユーザーインターフェースとデータ処理

ユーザーインターフェースとデータ処理一般的な利用者が使うプログラムの場合、PC やスマホ、タブレットのアプリとして作成する場合が多くなります。その場合、プログラムは大きく、ユーザ＝インターフェースとデータの処理を行う二つの部分に分ける事ができます。この記事では、この分類について概要を紹介します。プログラムの基本はデータ処理この連載でも何回も紹介していますが、プログラムの基本は「データ処理」です。プログラムにあるデータを渡して、そのデータを処理した結果を取り出すと言うのがプログラムの基本になっています。ゲームなどのプログラムも基本は、データの処理を複雑にしただけで考え方は同じです。ただし、プログラムにデータを渡したり、処理した結果を取り出す「仕組み」も必要になります。現在のコンピュータの場合は、基本的にデータの処理を「CPU」で行なっています。この CPU が処理するデータは基本的に「二進数」のデータになります。この二進数は人間にはちょっと扱い難い数値で、このデータをやり取りするのはあまり便利な方法ではありません。そうした部分を含めて、実際にコンピュータでデータ処理を行う場合には、利用者である人間とコンピュータの間で上手くデータをやり取りするための仕組みが必要になります。その仕組みを「ユーザーインターフェース」と呼んでいます。プログラムには、この利用者とのやり取りを行うのに必要なユーザーインターフェースのプログラムと実際にデータを処理する、プログラムの本体に相当する部分に分ける必要があります。最近のアプリのユーザーインターフェース最近のスマホやタブレット、PC のアプリは、基本的

IT・テクノロジー

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

2022/08/15