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

WEBアプリケーションはサーバ側の処理を PHP とすると、クライアント側の処理はととで構成され、クライアント側は Google Chrome で表示される事を前提として授業を行っています。クライアント側の情報は、Google Chrome のツールという機能によって容易に参照が可能ですが、機能は多岐に渡り複雑ですが、開発には欠かせない重要な機能です。

開始方法は、キーを使うか、ページ上で右クリックしてを選択しますが、表示位置は種類を選択可能で、目的によって下部か右側を選択すると良いでしょう ( このツールを表示中は、アイコンを右クリックして表示されるメニューから完全なの削除を実行できます  )。

機能毎にタブを選択するようになっていますが、主に使うのはとととの4つです。但しこれ以外にも、設定画面で JavaScriptのを設定可能なので覚えておいてください。

タブの一番最初にあるエリアでは、冒頭で説明した３種類の内容が表示されていますが、リアルタイムでが可能です。また、それはすぐにページ上の表示に反映されます。さらに、CTRL + SHIFT + キーによって切り替えられる機能でという意味の矢印のアイコンがタブの一番左にあります。これによってページ上のコンテンツをマウスで選択して対応するとの記述を知る事ができます ( タブの順序はデフォルトの位置であり、ドラッグで変更できます )。

このエリア(1つ目)の右横(2つ目)に重要なタブが存在しますが、一番左のエリア(1つ目)を表示中キーでエリア下部に表示する事ができます。このエリアは、前者(1つ目)が表示中のページの状態を表示しているのに対して、ページ内のが実行した console コマンドの結果が表示されています。また、ここからリアルタイムに処理を実行可能なので、jQuery を使った処理の記述の練習が可能です ( それ以外にもページ内の特殊なエラーが多数表示される場合もあります ) 。処理の記述は、 + 改行で、複数行のエリアを確保して矢印キーで移動しながら式を完成させてから改行キーで実行可能です。

3つ目に重要なエリア( タブ )では、ブラウザとサーバの内容を確認する事ができます。ページから何らかの操作を行い、ここに何も表示されない場合はブラウザ側のみで処理が行われています。ブラウザからサーバに情報が到達した場合は、サーバからブラウザに必ず情報が返って来ます。ブラウザからの情報はと呼ばれ、サーバからの情報はと呼ばれています。サーバからの情報で、と呼ばれる部分にはブラウザへの指示が書き込まれていますが、このツールでしか詳細を見る事ができません。しかし、残りの部分は全て画面の構成データです。

最後のエリアでは、PC 側でのいろいろな保存データを見る事ができます。この中でWEBアプリで重要なものは二つあり、とです。後者は古くから存在するサーバ側のデータを保存する為のエリアですが、前者はPC の使用者固有のデータを保存するのに用いられます。

これら以外にもという重要なエリアがあり、そこでは機能が実装されています。しかし、通常の WEBアプリケーション程度であれば console コマンドを使用して処理内容を確認したほうが容易でかつ解りやすいでしょう ( 但しここには {} アイコンをクリックして実行される機能があるのでうまく利用しましょう)。

ウインドウの左端に縦にアイコンが並んでいます。この縦長のエリアをバーといいます。一番上のアイコン(  )はで、フォルダやファイルをツリーで表示します。ここでのコンテンツは、アイコンで表現されますが、このアイコンを拡張(  )によって変更可能です。Material Icon Theme をインストールして、 をクリックして表示される設定メニューののテーマで Material Icon Theme を選択してください。

 でフォルダを選択した状態で、 +  + F キーで、フォルダ内にあるファイルを対象に、文字列検索を実行できます。例えば、select と入力して検索し、-select- と select * from 等が一覧として表示された場合SQL のみを対象としたい場合は、 をクリックしてを使用します。検索用文字列は [^-]select と入力してください ( 置換処理も可能ですが、多くの失敗を避ける為ここでは使用しないでください )。

エディタで単一のファイルを開いている場合は、検索処理は CTRL  + キーで文字列入力のツールが表示されます。置換する場合は、CTRL  + キー です。エディタ上の文字列を使用して検索したい場合は、ワードならば任意の場所をクリックして、CTRL  + キーで検索対象の文字列が決定して、キー で次の文字列へ移動します。逆に戻りたい場合は、キーを押しながら先ほどのキーを押します。エディタ上の文字列を使用して置換したい場合は +  + L キーです。その後置換したい文字列を入力すると全てが変更されます( または、右クリックして全てのを変更 )。

矩形選択をしたい場合は、 +  でカーソルをドラッグして下さい。また、コピーしたソースコードを貼り付けした場合、自動フォーマットの機能で元の形が崩れた場合は、 + Z キー で戻してみて下さい。

エディタのコマンドに、末尾の空白のトリミングというものがありますが、ソースコードの編集時にどうしても発生するので +  + DELETE キーに設定してあります。この機能を UI から実行するには、ステータスバーの右下のキャラクタセットの左横の表示(  )をクリックして実行します。これ以外にも、 と  の相互一括変換のコマンドも実行できます。

その他全てのエディタ表示を閉じるコマンドを CTRL + キーに、 の表示を全てキャンセルするコマンドをCTRL + キーに登録しています。大文字小文字への変換は、CTRL + キーと CTRL + キーに登録しています。

拡張には、VS Browser という拡張があり、Visual Studio Code 内で localhost を表示する為のブラウザを使用できるようになっていますが、の実装で sandbox が有効になっておらず、 のような OK・CANCEL を選択するようなダイアログを表示する事ができません。ショーシカットは +  + Bキー に登録してあります。UI から表示するには、ステータスバーの右下に VS Browser とありますのでクリックしてください。

エディタを開いている時に + Gキーで、GYO( 行 ) ジャンプする為のコマンド入力が開きます。現在の行を選択するには、CTRL + キーが使用できます。関数やメソッドの文字列部分をクリックして、SHIFT + キーを押すと、特別なウインドウで参照されます。

ファイルをバイナリ表示して確認する為に、拡張から Hex Editor と Hex Viewer をインストールしてください。これらの拡張でファイルを開くには、エディタのタブを右クリックしてエディターをアプリケーションの選択を選択して Hex Editor または Hex Viewer を選択します。Hex Editor は実際にデータを変更可能なので注意してください。データをバイト単位で選んで、その場所の10進数の値をすぐに参照できます。ただ、Hex Editor では UTF-8 の日本語をそのまま表示する事ができないので、Hex Viewer を使用してステータスバーより UTF-8 を選択して日本語表示が可能になります。

Windows のデスクトップ上の操作には Windowsロゴキーによるショートカットを活用してください。特に複数のPCをメンテナンスする場合はマウスで操作するよりによる操作のほうが格段に効率がいいです。特に、Windows の設定に関する操作では、Windowsロゴキー + で設定ウインドウを開き、キーでメニュー項目に移動してキーで目的のメニューまで移動してエンターキーで決定します。( 既に設定ウインドウが開いてしまってる場合は一旦 ALT + キーで一旦閉じるといいでしょう )

Windowsロゴキーを使用した代表的なショートカットは、以下になります。
1)  : エクスプローラ
2)  : ファイル名を指定して実行
3)  +  : トリミングキャプチャ
( トリミングキャプチャは、タスクバーの右下の通知をクリックして表示されるエリアの下部にあるボックスを展開して表示される【画面領域切り取り】でも可能です )

デスクトップを表示したい場合、Windows ロゴキー +  なので、そのまま +  でシャットダウンダイアログが表示されます。システムの詳細表示はWindows ロゴキー + です。また、設定ウインドウの各エリアに移動して戻れる場合は + 左矢印キーを使用して戻る事ができます( これは Chrome の場合も使用可能です )。

Windows ロゴキーとの組み合わせの中には少し変わったものもありますが、覚えておくといつか役に立ちます
1)  : クリップボードの履歴ウインドウを開く
2)  : 編集中に絵文字ウインドウを開く
3)  : デスクトップを画像化してピクチャ内のスクリーンショットフォルダに保存

タスクマネージャは、Windows をリアルタイムで管理する重要なツールですが、それ以外にもいくつかの利用パターンがあるので覚えておく必要があります。

実行は、タスクバーを右クリックしてメニューから実行するのが直感的ですが、スタートメニューの右クリックメニューにもありますし、ショートカットキーは +  + ESC で、アプリケーションとして実行する場合は.exe ( .exe は省略可能です )です。

起動するとプロセスタブが開きますが、デスクトップで明示的に実行したアプリーションを強制終了したい場合は【簡易表示】に切り替えて選択して右下の【タスクの終了】をクリックします。しかし、表面から解らない任意のアプリを強制終了するには、タブから選択して右下の【タスクの終了】をクリックします。ここでは、全ての実行単位が表示されるので、その実行ファイルのを知るのに役立ちます。また、この画面では列にを追加する事によって、64ビットアプリなのか32ビットアプリなのかを確実に知る事ができます。列のデータを自動整列させるには + テンキーのプラスキーです。( エクスプローラでも利用可能です )

もう一つリアルタイムな情報としてはパフォーマンスタブでPCのレスポンスにかかわるを知る事ができ、特にディスクに関しては Windows Update 等の状況でレスポンスが悪くなっている状態を確認できます。

それ以外の利用方法としては、スタートアップタブで StartUp フォルダやレジストリに登録されている自動実行アプリを無効にする事ができます。また、タブの下部に管理ツールを起動するリンクがあります。そして、タブからエントリを右クリックして表示されるメニューからコントロールバネルの該当ページが開き、そのページ左側最後のリンクから設定ダイアログを開く事ができます(システム用はここからは変更できません)

それ以外の特殊な利用方法としてオプションメニューから選択してするウインドウにできるので、デスクトップでの動画作成時に隠したい情報の上に重ねる事ができます(表示メニューの更新の頻度から一時停止にできるのでリアルタイム表示が止まっている場合があるので注意してください)。また、ファイルメニューからがあるので、でアプリを起動するのに使用する事ができます。

VSCode の設定を保存するファイル名は、です。この設定ファイル には2種類あり、それぞれ・フォルダという単位で設定を行う事ができます。さらに、拡張子が code-workspace というファイルはワークスペースの設定ファイルで、複数のフォルダを一つの単位として設定します。一つ目は最も基本となるもので、他の二つが存在しない場合は  + , で表示される設定画面にはそのタブしか存在しません。( フォルダの設定ファイルは、そのフォルダにフォルダを作成してその中に保存します )

設定ファイルは、この設定画面を表示した時に右上に表示されるアイコンで(設定(JSON)を開く)をクリックするとエディタで開かれます。キーボードショートカットに、revealFileInOS コマンドに対して++ E を登録していますので、そのキーでエクスプローラでその場所を開く事ができます( explore の E と覚えましょう )。このショートカットは、開いてるファイルやツリーのフォルダをエクスプローラで開く為に登録しています。

VSCode のキャラクタセットはデフォルトは UTF-8 ですが、設定によって言語や拡張子に従って SHIFT_JIS で開く事ができます。しかし、設定外でどうしても SHIFT_JIS でテキストファイルを開きたい場合の為に、設定ファイルの先頭に : "shiftjis" を置いておいて、先頭のハイフンを一時的に削除して SHIFT_JIS を強制します。

VSCode の運用で最も重要になるのが、コマンドの実行を行うの扱いです( これを一つづつ閉じるショートカットは  + F10 に登録しています  )。この呼び名は一般的な呼び名であり、Windows での実体はと呼ばれているものを使うようにしています。また、このコマンドの実行処理をメニュー化できる という拡張が使いやすく推奨されます。( 例えば、command 部分に  chrome と記述すれば、Google Chrome を起動できます )

既定の設定では、キーで全てのコマンドの表示( コマンドパレット )という機能が割り当てられています( エディタが開いている時、この時先頭に表示されている > を削除してを入力した後数字を入力するとその行番号にジャンプします )。この機能で表示される入力フィールドから VSCode で定義されている内部コマンドを実行する事ができます。また、それらのコマンドは個別のを登録できるようになっているので、作業に役立つ操作は登録しておきます。それらの定義された情報は、%appdata%\Code\User 内に JSON ファイルとして保存されます。この情報を VSCode 内から見るには +  + K に設定していますので使用してください( keybindings の  K です )。

設定の検索フィールドでと入力すると、 【CTRL キーを押しながらマウス ホイールを使用してエディターのフォントをズームします】が先頭に表示されるので、チェックボックスをチェックしておいて下さい。また、editor.renderWhitespace の設定は、にして下さい。boundary でも構いませんが、明示的に全てのスペースを可視化するのはプログラマにとって重要です。

設定ファイル内の値の候補をエディタで開いた JSON で表示するには、現在の値の直前にカーソルを置いて + SPACE キーを押します。これは、全ての言語で有効な候補の表示方法です。登録されている言語の一覧は、エディタで何かファイルを開いている状態でコマンドとして change language mode を実行すれば良いですが、ショートカットとして CTRL +  を押してから両方離してキーを押すと表示されます。( または、ステータスバーの右下に現在の言語が表示されているのでそこをクリックします )

HELPメニューのを選択すると、見慣れた Chrome のデベロッパーツールが表示されます。つまり、VSCode は Chrome のテクノロジーを使用している事が解ります。その流れで、VSCode の全体の表示を拡大するのは CTRL + キーです( 初期値に戻すのは CTRL +  です )。拡大や縮小を行うと、設定ファイルに window.zoomLevel として書き込まれますが、既にその設定がされている設定ファイルのスコープ内で実行すると、それが書き換わり、どこにも無ければ基本となる設定ファイルに 書き込まれますが、その場合値が 0 になると設定が削除されます( 基本設定ファイルを開くショートカットは  +  + S に登録しています。使用中のワークスペース用の設定ファイルを開くのは、同様に + W です )

また、キー で同様に全画面表示となり、CTRL +  の後 Z キーで Zen モードとなってソースが全画面となり ESC 二回で元に戻ります。

MVCは、プログラムを3つの要素・・に分割し、それぞれの役割を以下のように決めてWEBアプリ用のテンプレートを作成します。

Ｍのパーツでは、アプリケーション固有の処理を記述するようにします。その為、他から呼び出すの定義を行う事になります。

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

Ｃのパーツでは、アプリケーション全体を見渡せるような基本的な部分を記述します。Ｃの意味通りに、ブラウザよりされた内容を正しく処理する為の条件を設定したり、処理の呼び出しを制御します。

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

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

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

その次に重要な変数は、です。この中には常にその時の PHP を取り巻く環境変数が設定されているので、WEB アプリケーションではこのうちのいくつかを利用する事になります。

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

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

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

しかし、埋め込む事を目的とした文字列は通常ダブルクォート内で作成される為、ダブルクォート文字そのものを表現するにはする必要があります。その為可読性が悪くなるのでと言う方法を使って、変数に直接記述したそのままの文字列をセットする事によって記述も楽になり、視認性も良くなります。

PHP で WEBアプリケーションを作成する上で、ブラウザに対して HTTPを送る関数という重要な関数が存在します。簡単に言うと、この処理は PHP がブラウザに対して行う指示と考えるといいと思います。そして、プログラムの最初で送る事になる Content-Type が重要になります。これは、ブラウザに送るデータの種類を説明するもので、一般的にタイプと呼ばれる分類方法が定義されています。これは、MDN でも説明されていますが、『文書、ファイル、またはバイト列の性質や形式を示す標準』です。