SQLの窓 イラストAC フリー素材

2021年06月27日

2021年 前期試験問題( 9 ) : 13

ブラウザで表示されるWEBアプリケーションの画面は、通常タブ単位で表示されています。その際一つのウインドウから他のウインドウを開いて、相互に JavaScript でアクセスする事が可能です。

この場合、window オブジェクトメソッドを使用します。

このメソッドの戻り値は開いた新しいウインドウオブジェクトが取得され、新しく開いたウインドウから元のウインドウの window オブジェクトを参照するには、オブジェクトを使用して参照します。
<script>
var wnd;
function win_open_01(){
	wnd = window.????( "about:blank" );
}
</script>
<input id="btn" name="btn" type="button" value="実行" onclick="win_open_01()">
開かれたウインドウを閉じるには、開かれたウインドウ側で window オブジェクトメソッドを使用して行います。

また、現在のウインドウ内の中に要素を設置して、必要な時に参照ウインドウを開く事ができます。この場合初期設定として参照ウインドウ用の要素のスタイルに : を設定して非表示にしておきます。そして必要な時にそのスタイルのプロパティを設定して表示させます。



また参照ウインドウを閉じる場合は、参照ウインドウ内の処理で元のウインドウをオブジェクトで参照して、スタイルを設定して非表示にします。さらに、元のウインドウから参照ウインドウ内にアクセスするには、参照ウインドウ用の HTML 要素をオブジェクトとして作成し、プロパティを使用します。このプロパティの値が、参照ウインドウ内の window オブジェクトとなります。

但し、この参照ウインドウを埋め込む方法はレイアウト上 PC 環境のみで有効であり、スマホ画面では前述の window オブジェクトメソッドを使用します。

このような二つのウインドウを一つのアプリケーションとして連携する場合、お互いの参照方法を知ったうえでリロード処理を使う必要も出できます。その場合、オブジェクトのメソッドを使用するか、プロパティに URL をセットし直す方法を試してみるといいでしょう。


posted by at 2021-06-27 18:12 | 講師生活 | このブログの読者になる | 更新情報をチェックする

2021年 前期試験問題( 8 ) : 16

jQuery はフリーのライブラリです。しかし、WEBアプリケーションにおける必要な JavaScript の処理を殆ど簡易化する事ができる優秀なライブラリです。JavaScript の HTML 要素参照はとても面倒ですが、jQuery ならばタイプ量が格段に少なくなります。ただ、注意すべきは画面上のコントロールが全て後に、HTML要素を特定して処理記述をまとめて行うという記述方式になれる必要があるところです。
<script> $(function(){ // ここに処理を記述 }); </script>
例えば、ボタンの処理を記述する場合、HTML には オブジェクトを取得する為の 属性を指定し、値が btn だとします。この場合の jQuery での処理記述は以下のようになります。
$("").on("", function() { alert("ボタンがクリックされました"); });
jQuery では HTML 要素の単独のオブジェクトを特定する為に、JavaScript と同じ属性を使用しますが、その値の使用方法がにおける指定方法と同じになります。その選択方法は『セレクタ』と呼ばれ、参照方法のバリエーションも多岐に渡る事になります。この場合、対象となるオブジェクトは一つだけですが、jQuery では HTML の構造や属性や HTML要素の種類そのものも利用して対象を複数として考えて一括で処理する事を想定しています。 たとえば、FORM 要素の中にある INPUT 要素の背景色を全てピンクにするには以下のように記述します。
$("").css("", "");
また、jQuery の殆どのメソッド( ここでは css ) では、結果の値が再び参照していたオブジェクトそのものになるので、追加で全ての対象に値として 山田太郎 とセットする場合には以下のように記述できます。
$("記述不要") .css("記述不要", "記述不要") .("山田太郎");
この例では、css メソッドでスタイルを指定し、メソッドの引数に値をセットしています。値を取得したい場合は引数無しで使用すると戻り値として入力値を取得できます。( その場合は単独のオブジェクトを特定して使用します ) これ以外にも良く使用するメソッドして、HTML 要素の属性値を取得・設定するメソッドがあります。 そして、jQuery を使うと容易に新しい HTML 要素を新規に作成する事もできます。その際の仕様上、画面上に既に存在する特定の要素に追加する必要があるのでその要素の属性の値をareaとして特定するとして、その中に INPUT 要素を追加するには以下のようになります。
$("").appendTo("");
posted by at 2021-06-27 13:15 | 講師生活 | このブログの読者になる | 更新情報をチェックする

2021年 前期試験問題( 7 ) : 12

WEB アプリケーションを作成する上で、PHP はサーバ側のに情報を登録するという大きな役割があります。それに対して JavaScript画面をコントロールするという役割があります。その為に必要な知識は多岐にわたり、HTMLの知識も必要です。

まず、画面上の要素を特定する為に HTML ではという属性を定義する必要があります。通常、画面上のデータをサーバに送信する為に必要な属性は属性なので、この二つの属性は同じ値を設定すると混乱せずに済みます。そして、その属性の値を使用して要素そのものである『オブジェクト』を参照する為に使用するのが、document オブジェクトのメソッドのです。( JavaScript のメソッドでは正確に大文字小文字を区別して記述してください )

このメソッドで取得されたオブジェクトは、その対象となる HTML要素そのものです。よって、通常 HTML で記述可能な属性は、このオブジェクトのプロパティとして存在します。ですから、INPUT 要素の入力された値は、プロパティを参照して取得する事になります。

HTML 要素の参照方法は他にもあって、前述の FORM 内のデータ入力に必ず設定する属性を使用するメソッドは、属性の値が 画面内に同一で複数存在する事を許されているので、取得できたオブジェクトが配列になります。ですから、特定の HTML 要素を参照するには、オブジェクトに [0] を付加して先頭のオブジェクトを参照します。

この方法は、よく似たメソッドである document.getElementsByTagName を例に取ると以下のようになります。
var obj = document.getElementsByTagName("input")[0];
画面上の値を取得したり設定する事は、HTML 要素のオブジェクトのブロパティを操作する事で可能ですが、その操作をいつ行うかが重要な知識です。PHP は、ソースが呼び出されたらソースコードの先頭より実行されていきますが、HTML の画面では通常表示されればユーザの入力待ちになります。

このような場合、JavaScript が実行されるきっかけはユーザの処理に委ねられます。そして、殆どの場合それはユーザがボタンをした時に実行される事になります。

そのような処理を JavaScript で記述する為に、HTML 要素には『』という属性が用意されています。この属性の頭2文字は on です。単純なボタン処理を記述すると以下のようになります。
<script> function myaction() { alert("ボタンがクリックされました"); } </script> <input type="button" value="実行" on="myaction()">
この例よりも解るように、この属性の値は JavaScript を記述する事ができます。そして、一般的には関数を作成してその関数を呼び出させてその中で目的の処理を行います。上記例では、単純なボタンを使用しましたが WEB アプリケーションで実際に使用する場面では、FORM の属性を使用します。
<script> function myaction() { if ( !confirm( "送信しますか?" ) ) { return false; } return true; } </script> <form id="frm" on="return myaction()"> </form>
このような処理を作成する事によって、ユーザが入力を正しく完了したかどうかを検証し、入力しなおす場合はキャンセルする事ができます。
posted by at 2021-06-27 10:59 | 講師生活 | このブログの読者になる | 更新情報をチェックする

2021年06月26日

2021年 前期試験問題( 6 ) : 11

WEB アプリケーションの処理の構成要素は大きく分けて3つあります。その一つは画面表示で、二つ目はデータベースの更新です。しかし、この二つの構成要素は比較的単純な事が多く、残りの要素が最も負荷の高いとなります。

当然この内容はアプリケーション毎に違ったものなり、画面の要素によってもいろいろな注意が必要となります。そして、画面表示の一部ではありますが、ユーザの入力によって起きる不具合をユーザに知らせるためのの表示が必要となります。

この処理は基本的にはサーバ側で行われますが、WEBアプリのテクノロジを総動員するとブラウザ側での処理として実装する事も最近は少なくありません。

最も簡単な方法としては、HTML 要素に直接記述する属性によって、簡易的な制限を加える事ができます。その代表的な属性がという属性で、未入力をしないようにする方法です。ただ、この方法は完全では無く、スペースや漢字スペースを受け入れてしまうので実際は正規表現を用いた属性のほうが現実的です。

しかし、この方法ではユーザに対するメッセージが具体的なものでは無く、製品に利用するのは避けるべきでしょう。せめて、を使用した入力単位の検査を作成してリアルタイムに問題の提示を迅速に行えるようにするべきです。さらに言えば、jQuery 等のライブラリを使用して、プログラマの負担の少ない標準化を行うべきです。

PHP で未入力がどうかを検査する場合、空白( 漢字の空白も含む )を未入力としてチェックする為に、関数を使用して正規表現で入力文字列の両側の空白を排除して空文字であればエラーとします。また、PHP は画面単位で送信を行うので、サーバへ送られたデータに対して全て検査を行い、問題のある結果もまた全てブラウザへ返して表示すべきです。

具体的には、文字列追加連結演算子のを使用して検査の結果を変数にまとめて保存して画面部分に埋め込みます。そして、可能ならば問題の出た最初の画面上のコントロールにをセットしましょう。

しかし、ブラウザ側でチェックするのであればコントロール毎に問題を迅速にユーザに知らせるほうが良い場合もあります。
var name = $("#name").val();
name = name.replace(/^[\s]+/, "");
name = name.replace(/[\s]+$/, "");
if ( name == "" ) {
    $("#message").text("名前が入力されていません");
    $("#name").val( "" );
    $("#name").focus();
    $("#name").select();

    event.preventDefault();
    return;
}
いずれにしても、画面に投入されるデータの整合性をプログラミングでチェックする場合、多くの場面で正規表現が有効です。簡単な例で言えば、0〜9 の文字の入力のみ許すのであれば HTML であれば正規表現を記述する属性の値としてと書きます。

また、処理として PHP で記述するのであれば  関数を使用し、JavaScriptであれば文字列に対してメソッドを使用しますが、その場合最初から最後まで 0〜9 である事を確かめる為に、^を最初に、$を最後に加えます。

そして、PHP の場合は、"/正規表現/" を引数に与え、JavaScript では /正規表現/ を引数に与えます。


posted by at 2021-06-26 21:18 | 講師生活 | このブログの読者になる | 更新情報をチェックする

2021年 前期試験問題( 5 ) : 12

PHP に対してデータを送る役割は FORM 要素ですが、この要素そのものが持つ属性が WEBアプリケーションにとって重要である事は言うまでもありません。

まず、属性によってサーバへのデータの送り方が大きく分けて2通りに分けられ、この属性を省略すると実行される通信方法を仮に『アドレスバー方式』と呼ぶことにします。この方式では、データは URL の一部として作成され、その URLそのものがサーバに到達します。この際、データ部分はと呼ばれ、データとデータの間は & で区切られます。

つまり、その URL は A 要素の属性で指定可能なもので、データ部分が外部に容易に露出する事になるデータ通信方法です。

それに反してもう一つの通信方法は、ブラウザが直接サーバへデータを送る方法で、『アドレスバー方式』との大きな違いは送信可能なデータ量に対する制限が無い事です。この場合、FORM 要素の属性に enctype を使用して、値にを指定するとファイルのアップロードが可能になります。また、送信されたデータがアドレスバーに残る事も無く、確実にサーバへデータを送る事ができます。

そして、次に重要な属性はです。この属性を省略すると、データの送り先は現在表示している URL に対して送られます。つまり、省略せずに他の PHP ファイルを指定すれば、その PHP にデータを送信可能になります。こうする事によって、PHP で記述する処理を単純化する事が可能になり、プログラミングのコストを抑える可能性も大きくなります。

さらに、プログラムの処理そのものにはさほど影響は与えませんが、属性を使用する事によって、ブラウザ上のどの部分に表示するかを決める事ができます。例えば要素をページ内に埋め込んで、PHP の送信結果をその中に表示する事が可能になります。また、この属性に値としてを指定すると、送信のたびに新しいタブを開いてそのウインドウ内に結果が表示されるでしょう。

ここまでは、画面定義として決められた基本機能の指定方法ですが、WEB アブリケーションとして完成度を高くするには、このデータ送信機能を実行する前に入力チェックを行う必要があります。たとえ入力チェックが必要無い簡単な送信でも、ユーザの間違いを避ける為に確認ダイアログを表示して送信のキャンセルをする事ができるようにする必要があります。

その為の重要な FORM 要素の属性がです。このような属性は、他の要素でも同様で、頭に on が付き、JavaScript への橋渡しをするための属性です。よって、属性の値は JavaScript そのものが記述されます。

そして、FORM 要素のこの属性は送信のキャンセルを実現する為に最初にステートメントを指定して、他で定義した関数の戻り値をシステムに返す事になっています。この他で定義した関数が返す値がの場合にサーバへの送信はキャンセルされます。
function check(){

    if ( !confirm("更新してもよろしいですか?") ) {
        return false;
    }

    return true;
}
</script>
confirm メソッドは、オブジェクトのメソッドで、OK と キャンセルのボタンを持っており、ユーザが選択できます。JavaScript では、このトップに存在するオブジェクトは省略してメソッドのみを記述する事となっています。


posted by at 2021-06-26 19:10 | 講師生活 | このブログの読者になる | 更新情報をチェックする

2021年 前期試験問題( 4 ) : 15

PHP はサーバで動作する処理を記述する言語です。サーバの CPU で処理されます。しかし、ユーザが利用するのはブラウザであり、自分のすぐ近くにある PC の CPU で処理されたものです。ですから、WEBアプリケーションを作成するには画面のレイアウトを定義する為ので、サーバへデータへ送る為の入力画面を作成する必要があります。

その際、サーバの為に必須となる要素が FORM です。そして、その中に記述されたものが送信データとなります。但し、送信データとなる要素は限られており、が最も良く使用され、type 属性によってその利用方法も変化します。
1) text改行のない通常のテキスト入力
2) 複数の選択肢より一つだけ選択できるコントロール
3) 選択するかしないかの2択を表現するコントロール
4) 内容は text と同じだが画面には表示されないコントロール
5) いわゆるカレンダーコントロール
6) ファイルアップロードに使用するコントロール
この他にも type 属性で指定可能な値はありますが、上記は WEBアプリケーションとして最低限必要な UI を提供してくれます。 ただ、7番目としての場合は、サーバへデータを送信する為のボタンとなり、属性に指定した値がボタンの文字列となります。そして、データをサーバへ送る為のコントロールに必ず必要な属性が属性であり、この属性が無ければサーバへは送られません。また、この属性に指定した値がサーバ側のスーパーグローバル変数のインデックス部分にセットされる事になっています。 あと、画面よりサーバへデータを送る要素としてとても重要なコントロールがあり、一般的には『コンボボックス』と呼ばれますが、要素名としてはとなります。この要素は属性を指定するといわゆる『リストボックス』というコントロールに変化します。そして、この要素の中に要素を指定して選択肢を設定する事ができます。 この選択肢には、属性でサーバへ送りたい値を設定しておき、利用するユーザにはテキストで意味を表現してこの要素の終了要素で挟んで表示させます。 最後に、複数改行を入力可能ないわゆる文章を入力可能な要素がです。初期値はこの要素の開始要素と終了要素の間に挟んで準備する事が可能です。
posted by at 2021-06-26 13:51 | 講師生活 | このブログの読者になる | 更新情報をチェックする

2021年 前期試験問題( 3 ) : 14

PHP で WEBアプリケーションを作成する上で、ブラウザに対して HTTPを送る関数という重要な関数が存在します。
簡単に言うと、この処理は PHP がブラウザに対して行う指示と考えるといいと思います。そして、プログラムの最初で送る事になる Content-Type が重要になります。

Content-Typeは、これからブラウザに送るデータの種類を説明するもので、一般的にと呼ばれる分類方法が定義されています。これは、MDN でも説明されていますが、『文書、ファイル、またはバイト列の性質や形式を示す標準』です。

最も基本的なテキストを表す場合、Content-Type: text/plain と記述され、これを受け取るとブラウザは単純なテキストとしてデータを表示しようとします。

以下に代表的なデータの種類を列挙します
1) : ブラウザにとって最も一般的な HTML
2) : 特に種類を指定しないバイナリデータ( ダウンロードダイアログが開く事になります )
3) : 自然画像フォーマットである、拡張子が通常 .jpg のファイル
また、テキストファイルである場合、そのテキストを表現する為のキャラクタセットを指定する場合( 回答はshift_jis で記述してください )は Content-Type にを追加します 現在のWEB では、キャラクタセットは UTF-8 が標準になっています。しかし、の基本キャラクタセットは Shift_JIS なので、WEBアプリケーション開発ではキャラクタセットの存在を意識する必要があります。 あらゆる開発言語で、処理を共通化したり機能別に独立させる事が行われます。クラスを作成する場合、メソッドと呼ばれる実行単位がそれにあたりますが、PHP ではクラスを作成可能ではありますが、一般的にはと言うキーワードで、ユーザー定義関数を作成します。この記述方法は、JavaScript と同様で、関数名と引数を定義して使用するものです。 しかし、PHP の関数では他の言語と全く違う扱いをするのが変数の扱いです。他の言語では、関数の外側で定義または発生した変数は、関数内で参照可能です。しかし、PHP ではキーワードを使用してその変数名を宣言しないと参照できない事に注意して下さい( スーパーグローバル変数は常に参照可能です ) WEBアプリケーションを作成する上で、プログラマが昔から意識し続けなければならなかったのが、ブラウザのの問題です。ブラウザは利用するユーザに対してより良好なレスポンスを提供する必要があったので、ブラウザに表示されるデータは全てが最新では無く PC に保存されているものもあります。しかし、WEBアプリケーションでは動的に情報を作成する為、ユーザに表示するデータは常に最新である必要があります。 このような対処には、冒頭で紹介した関数が使用されていましたが、PHP では、ある処理を組み込む事によって比較的容易にその対応を行う事ができます。それがの処理です
session_cache_limiter('nocache');
session_start();
session_start(); は、本来というスーパーグローバル変数を利用する為の開始処理ですが、そのオプションとして session_cache_limiter('nocache'); を実行しておくと、ブラウザに対して PC に保存してはならないという指示が与えられます。

さらに、ブラウザを利用している間ユーザに対して常に保持可能なスーパーグローバル変数が利用可能になります。この変数には通常ログイン時に入力される内容より、利用ユーザを特定する事が可能になる情報を保持する為に使います。





posted by at 2021-06-26 12:06 | 講師生活 | このブログの読者になる | 更新情報をチェックする

2021年06月24日

2021年 前期試験問題( 2 ) : 15

PHP には、スーパーグローバルと言う『すべてのスコープで使用できる組み込みの変数』が存在します。この中でも特に WEBアプリケーションにおける FORM からの送信で作成される変数をと書きます。この二つの変数名は、FORM 要素の属性の値として指定可能な文字列より命名されたものです。

その次に重要なスーパーグローバル変数は、です。この中には常にその時の PHP を取り巻く環境変数が設定されているので、WEB アプリケーションではこのうちのいくつかを利用する事になります。
Array
(
    [MIBDIRS] => C:/xampp/php/extras/mibs
    [MYSQL_HOME] => \xampp\mysql\bin
    [OPENSSL_CONF] => C:/xampp/apache/bin/openssl.cnf
    [PHP_PEAR_SYSCONF_DIR] => \xampp\php
    [PHPRC] => \xampp\php
    [TMP] => \xampp\tmp
    [HTTP_HOST] => localhost
    [HTTP_CONNECTION] => keep-alive
    [HTTP_CACHE_CONTROL] => max-age=0
    [HTTP_SEC_CH_UA] => " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"
    [HTTP_SEC_CH_UA_MOBILE] => ?0
    [HTTP_UPGRADE_INSECURE_REQUESTS] => 1
1) REQUEST_METHOD : ブラウザからどのように送られたかが設定されるので、またはが値となります。

2)  : どちらも同じ値で、実行されたスクリプトのパスが設定されます。

さらに、WEBアプリケーションにログインは付き物ですから、その際かならず使用する事となるという変数があります。これは、一定時間ユーザがページを移動してもサーバ側で値を維持可能な変数です。

これらの変数は、PHP をデバッグする上で重要な値を常に保持しているので、という関数でページの最後に出力しておくと良いでしょう。また、WEBアプリの都合上画面上に出す事が容易で内場合は、この関数の第二引数を true にして出力を文字列に変換し、関数を使ってテキストファイルとして出力する事も考えましょう。

WEBアプリケーションは、基本的には文字列を扱う操作が重要になります。その為、文字列の中に変数を埋め込んだり、HTML の中に PHP の変数を埋め込んだりする事が多々あります。文字列の中に変数を埋め込む場合はを使用してその間に変数を記述します。また、埋め込まずに他の文字列と変数を連結する方法もあります。その場合 PHP では連結記号(結合演算子)としてが使用されます。

しかし、文字列は通常ダブルクォート内で作成される為、ダブルクォート文字そのものを表現するにはする必要があります。その為可読性が悪くなるので以下のような技術を使うと記述も楽になり、視認性も良くなります。
    $syozoku = "";
    while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
        $syozoku .= <<<GAMEN
            <option value="{$row["コード"]}">{$row["名称"]}</option>
GAMEN;

    }    
このような方法をと言います。


posted by at 2021-06-24 19:22 | 講師生活 | このブログの読者になる | 更新情報をチェックする

2021年06月20日

2021年 前期試験問題( 1 ) : 16

MVCでは、プログラムを3つの要素に分割します。

それぞれの役割を以下のように決めてWEBアプリ用のテンプレートを作成します。

  の場合

アプリケーション固有の処理を記述するようにします。よって、の定義を行ってから呼び出す事になります。

  の場合

ユーザにとって重要なを定義します。殆どの記述をクライアント側で処理されるで記述します。また、これらの特性より、職種としてのの介入を容易にする目的があります。

  の場合

アプリケーション全体を見渡せるような基本的な部分を記述します。主に、された内容を正しく処理する為の条件や処理の呼び出しを記述します。
if ( $_SERVER['REQUEST_METHOD'] == "POST" ) {
    // ***********************************
    // 更新
    // ***********************************
    $result = check_data();
    if ( $result == true ) {
        insert_data();
        $_POST["name"] = "";
        $_POST["level"] = "";
    }
    else {
        //print $err_message;
    }
}

MVC の役割を持つ PHP のファイルを3つ作成し、それぞれ  とします。よって、ブラウザから呼び出されるのは C の役割を持ったファイルになるので、他の二つのファイルは PHP ので、読み込むことになります。

C からは、他の二つのファイル以外にもシステム共通の処理を記述したファイルも同様に読み込みますが、これらは基本的に一番最初に読み込む事になります。その次に読み込まれるのが M の部分で、C の最後に V の部分を読み込みます

V の部分で動的に PHP で作成する必要がある場合は、PHP の変数埋め込み方法を使用して変数内に必要なクライアント側の記述を構築します。

その変数を $dynamic とすると、その記述はとなります。

posted by at 2021-06-20 14:27 | 講師生活 | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します