GINPRO / SQLの窓と銀プログラマ

エクスプローラは、Windows でいろいろな処理を行う為の基本となるアプリケーションです。一般とは違うプログラマとしての設定を行うには、タブの右端にあるアイコンをクリックします。そして表示されるダイアログのタブでいろいろな設定を行いますが、重要なのは以下の4つです。

1) 『開いているフォルダまで展開』にチェック
2) 『タイトルバーにを表示する』にチェック
3) 『ファイルを表示する』にチェック
4) 『登録されているは表示しない』のチェックを外す

エクスプローラのアドレスバーでは、いくつか特殊な入力で特定のフォルダを開く事ができます。

1)  => 環境変数の TEMP を使用したコマンドプロンプト用の記述でテンポラリフォルダが開く
2)  => ファイルを選択して右クリックで表示される『送る』フォルダが開く
3) shell: => ユーザ用のスタートアップフォルダが開く

エクスプローラでファイルのフルパス文字列をクリップボードにコピーするには、キーを押しながら右クリックすると『パスのコピー』と言うメニューが追加されます。フォルダを同様にして右クリックすると『ウインドウをここで開く』というメニューが追加されるので、実行後コマンドプロンプトの実行アプリを入力するとそのフォルダでコマンドプロンプト処理が可能になります。

ファイル情報の幅を自動調整するには、一覧部分にフォーカスを置いて CTRLキー + キーを押します。

表示タブのプレビューウインドウを使うと、一般的なファイルや Excel の内容や画像を表示することができます。

画像の幅と高さを確認するには、エクスプローラから右クリックしてを選択して、タブを開きます。そこにイメージという場所があるので確認してください。画像の大きさは、Google Chrome の場合、タブにドラッグ&ドロップして表示させて、タブの部分にカーソルを置く事で、メッセージがポップアップされるのでその内容で確認できます。

コマンドプロンプトの起動方法はいろいろありますが、実行プログラムは.exe です。

( 以下 .exe は省略可 )
1) して実行から上記プログラムを入力
2) エクスプローラので同様に入力
3) タスクマネージャのファイルメニューからを選択して表示されるダイアログに同様に入力

デスクトップ上にコマンドプロンプトが実行中の場合は、キーを押しながらタスクバーのコマンドプロンプトのアイコンをクリックするとさらにコマンドプロンプトが実行されます。

また、同様にキーとキーを押しながらタスクバーのコマンドプロンプトのアイコンをクリックすると権限でコマンドプロンプトが実行されます。この特別な権限のコマンドプロンプトでは、サービスのようなシステムにかかわる処理を行う時に必要となります。

この特別な権限のコマンドプロンプトは、3) で表示されるダイアログからも実行可能です。

タスクマネージャーには 7 つのタブがあります。



そのうちのスタートアップタブではシステムで自動的に実行するアプリケーションをにする事ができます。また、詳細タブでは実行中のアプリケーションの一覧の情報として、というタイトルを表示させる事によって、アプリケーションが 64ビットか32ビットか確認する事ができます。

タスクマネージャの実行プログラムは.exe です。この他にも Windows で標準的なアプリケーションの実行プログラム名は以下のようになります。

1) ペイント => .exe
2) メモ帳 => .exe
3) 電卓 => .exe

特にペイントは、デスクトップ上のアプリのキャプチャを行った後貼り付けて画像化するのに使用できます。貼り付けた後はをクリックすると、キャプチャした範囲の大きさの画像になります。

Windows10 を開発者として利用する上で、知っておくべき事はたくさんあります。まず、Windows10 の設定ウインドウはタスクバーの左端をクリックした後表示されるメニューの左下部分の歯車アイコンから表示する方法と、同じ場所を右クリックして表示されるメニューのを選択する方法と、Windowsキーとキーを押す事ですぐに表示可能です。

Windowsキーを使用したショートカットは、他にも代表的なものがあります。
1) Windowsキー +  👉 エクスプローラ
2) Windowsキー +  👉 ファイル名を指定して実行
3) Windowsキー +  +  👉 トリミングキャプチャ

その他にも一般的なデスクトップ上のショートカットは以下のようになります
1) CTRL +  + 👉 タスクマネージャ
2) ALT +  👉 アクティブウインドウのキャプチャ
3) Windowsキー + D でデスクトップを表示して +  👉 シャットダウンダイアログ



Windows10 の左下を右クリックして表示するメニューには、デフォルトでは PowerShell の起動になっているので、コマンドプロンプトに変更しておくといいでしょう。



その為にはを右クリックしてを選択して PowerShell のスイッチをオフにします。



コマンドプロンプトから実行する処理は、とても幅広く無視できないコマンドがたくさんあります。特に、ネットワークの情報をすぐに見れる/all は覚えておきましょう。

コマンドプロンプトは、キーで実行したコマンドの履歴を表示して再度実行したいコマンドを選択できます。キーで全画面表示( ALT + ENTER でも可 )  になり、画面上の文字列をクリップポードにコピーするにはドラッグして選択してからします。貼り付けもです。

開発用ウインドウの一番左上には、WEBページの特定部分を検査する為のアイコンがあり、クリックすると色が変わって、その状態でページ上でマウスカーソルを動かすと、対応する HTML が選択されます。これによって、他人が作成した HTML でも、それらの属性を容易に確認可能なので、WEBアプリでは要素内のコントロールに対して使う事がアプリの検証に繋がります。

さらに HTML 記述はリアルタイムに変更可能で、一般的には変更したい部分をすると編集可能になります。また、部分では無く HTML 構造全体を編集したい場合は、選択状態でキーを使うと全てが編集可能になり、容易に HTML を追加する事もできます。( この時、編集を終了したい場合は、他の 編集していない HTML をクリックしてフォーカスを外すと編集終了になります。

HTML の移動は簡単でマウスでします。削除も簡単で、選択してキーで削除されます。

また、Console タブ以外で可能なショートカットとしてキーでウインドウ下部にコンソールが表示されます( もう一度同じキーで閉じます )

コンソールタブは、JavaScript関連のテストや検証に使用されます。コンソールのコマンドラインでは、一般的なコマンドプロンプトのように様々なコマンドを実行可能で、特に一般の WEB ページの JavaScript 部分に記述されたというコマンドで変数や文字列の内容を表示させ、というコマンドでコレクションの内容を表示させてデバッグに利用する事になります。

コマンドラインは、通常は１行の記述ですが、キーを押しながら改行すると複数行を入力する事が可能です。

また、ページ上の JavaScript のエラーメッセージを確認しながら、その該当場所の行番号をクリックしてエラーの箇所を確認する事も可能です。その場合はタブに自動的に移動してエラー位置が表示されます



このタブは、いわゆるポイントを設定して一行づづの JavaScript のデバッグを行う事ができます。

サーバ側とのやり取りを確認するのはタブです。このタブでは、画面の FORM や から送信された値だけでは無く、様々なインターネットをベースにした情報の確認が行えます。

このツールでは、におけるページの表示もエミュレート可能で、開発用のウインドウの一番上部の左から二番目のアイコンで表示を切り替える事ができます。

Google Chrome は、WEBアプリ開発で必要不可欠なツールなので、一般設定等にも精通しておく必要があります。まず、Chrome には通常の白いウインドウと、黒いウインドウのが存在します。このウインドウでは、が記録されないので注意してください。また、白いウインドウと黒いウインドウでは別々のユーザでできるので、Google アカウントの運用にも効力を発揮します。

さらに、黒いウインドウではブラウザを閉じると自動的に Google からされるので、共有PC での運用時には必須でもあります。白いウインドウでも、ブラウザを閉じた時に他のサービスも含めて同様な処理を行うには設定が必要です。

1)  設定ページ( chrome://settings/ )でプライバシーとをクリック
2) と他のサイトデータをクリック
3) 以下のようにして追加します


また、WEBアプリケーション初心者とってブラウザ保持するは、変更した HTMLやCSS が反映されない原因となります。Chrome における一般的な対処は、CTRL++で表示されたダイアログで行います。



また、開発者が行うこの処理はキーまたはページを右クリックして表示されるメニューよりを選択してツールを表示させてから行います。( ブラウザのアイコンを右クリックして一番下のメニューを選択します )

Chrome で開発用ウインドウを開くと、先頭のタブがとあります。これは日本語での複数形を意味します。内容はその名の通り画面を構成する HTML をブラウザが正しく解釈した結果として整然とした構造で表示されています。さらに、HTML部分の任意の部分をクリックして選択すると、そこに設定されている全ての記述を参照し、リアルタイムに変更する事ができます。

php でデータベースに対して処理する場合、PDOと言うクラスを使用します。このクラスを使用する事によって、MySQL のみでは無く他のを利用する場合にコードの移行が容易になります。

利用するには、クラスである為、new キーワードを使用してを実行してインスタンスを生成して変数にセットして使用します。

try {
    $pdo = new PDO( $GLOBALS["connect_string"], $GLOBALS["user"], $GLOBALS["password"] );
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch (PDOException $e) {
    print "エラー : {$e->getMessage()}";
    exit();
}

PDO の標準的な利用方法は、まず用意した SQL 文字列をメソッドに渡して実行の準備をします。この際、SQL 文字列の中に名前付きパラメータを用いて、SQLの内容を変数によって置換する準備をしておきます。

SELECT * FROM 社員マスタ WHERE 社員コード = :scode

その後、メソッドを使用してSQL 文を完成させ、メソッドで SQL文を実行します。SQL 文が SELECT によりデータの読み出しの場合は、さらにメソッドによって列名による連想配列を行単位で取得して使用し、SQL が更新の場合は、SQL を実行する事によって更新が完了します。

SQL が更新の場合、PHP の変数から名前付きパラメータで設定する場合、データベースの列定義に対して一般的に型か型かで変換方法を決めます。但し、その二つの型以外にデータベースではという値をセットする時に注意が必要です。

SELECT を使用する SQL 文でデータを読み出す際、型の列には注意が必要です。MySQL が標準で返すフォーマットでは、画面表示やコントロールがうまく行かない場合があります。

この場合、たいていにおいて * を使わずに全ての列名を記述し、対象の列に対してはフォーマットを設定するを使用します。そして、SQL の 句で別名を設定し、PHP 側で利用する為の正しい列名を付け直します。

データベースから画面上のコンボボックスを作る場合も注意して下さい。コンボボックスは何もしなければ一覧の先頭が選択されて表示されます。画面表示時に正しくコンボボックスの内容を選択する為には、コンボボックスの一覧を読み込むループ時に、HTML の属性を設置して正しく選択できるようにしてください。

ブラウザで表示される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 をセットし直す方法を試してみるといいでしょう。

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("");

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 要素には『』という属性が用意されています。この属性の頭２文字は 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>

このような処理を作成する事によって、ユーザが入力を正しく完了したかどうかを検証し、入力しなおす場合はをキャンセルする事ができます。

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 では /正規表現/ を引数に与えます。