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

2024年02月15日

ChatGPT で トップまでスクロールする ブックマークレット

ブックマークバーにドラッグ & ドロップしてください。

共有用のリンクページでも動作するようです

CharGPT scroll TOP

<a href="javascript:document.getElementsByClassName('text-base')[0].scrollIntoView(false);void(0);">CharGPT scroll TOP</a>


posted by at 2024-02-15 15:08 | ChatGPT | このブログの読者になる | 更新情報をチェックする

2024年01月18日

2023年後期 : Visual Studio Code : 1枚目

Visual Studio Code の設定を保存する 設定ファイル には3種類あります。

1) 
    %appdata%\Code\User に保存される基本的な設定ファイル( settings.json )です

2) 
    その名の通り、任意のフォルダを一つにまとめて共通の作業を行う場合に作成されるファイル内に
    設定が記述されます ( フォーマットは JSON )

3) 
    対象のルートに .vscode フォルダを作成して、settings.json を置いてその中に設定情報を記述します

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

VSCode の運用で最も重要になるのがの扱いです。この呼び名は一般的な呼び名であり、Windows での実体はと呼ばれているものです。また、このアプリケーションの実行処理をメニュー化できる という拡張が現在最も重要な拡張です。

既定の設定では、キーで全てのコマンドの表示という機能が割り当てられています。この機能で表示される入力フィールドから VSCode で定義されている内部コマンドを実行する事ができます。

また、それらのコマンドはユーザが個別のを登録できるようになっているので、作業に役立つ操作は登録しておきます。それらの定義された情報は、%appdata%\Code\User 内に JSON ファイルとして保存されます。この情報を VSCode 内から見るには にユーザ設定していますので使用してください。

VSCode 内のテキストの印刷は、拡張を使用しての印刷機能を利用します。拡張名は解りやすく、 という名前なのですぐに検索してインストール可能です。但し、印刷結果に使われるフォントは拡張側で設定したほうがいい事が解っています。
"print.markdownRenderingBodyStyle": "background-color: white; font-family:\"メイリオ\", serif; font-size:13pt;",
"print.markdownRenderingHeadingStyle": "font-family:\"メイリオ\", sans-serif;",
"print.markdownRenderingParagraphStyle": "font-family:\"メイリオ\", serif;",
"print.markdownRenderingTableDataStyle": "font-family:\"メイリオ\", sans-serif; border-top:thin solid grey; border-left:thin solid grey;",
"print.markdownRenderingTableHeadingStyle": "font-family:\"メイリオ\", sans-serif; font-weight:400; border-top:thin solid grey; border-left:thin solid grey; ",
"print.markdownRenderingTableStyle": "font-family:\"メイリオ\", sans-serif; border-top:thin solid grey; border-left:thin solid grey;",

VSCode 内のエクスプローラに新たなフォルダを追加したい場合は、Windows のエクスプローラからしてください。

設定の検索フィールドでと入力すると、 【キーを押しながらマウス ホイールを使用してエディターのフォントをズームします】が先頭に表示されるので、チェックボックスをチェックしておきましょう。




posted by at 2024-01-18 18:03 | プログラマ用 | このブログの読者になる | 更新情報をチェックする

2023年後期 : Visual Studio Code : 2枚目

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

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

VSCode のキャラクタセットはデフォルトは UTF-8 ですが、設定によって言語や拡張子に従って SHIFT_JIS で開く事ができます。しかし、設定外でどうしても SHIFT_JIS でテキストファイルを開きたい場合は、ステータスパーのキャラクタセット表示部分をクリックしてを選択してください。

VSCode の運用で最も重要になるのが、コマンドの実行を行うの扱いです( これを一つづつ閉じるショートカットは  + F10 に登録しています  )。

既定の設定では、キーで全てのコマンドの表示( コマンドパレット )という機能が割り当てられています( エディタが開いている時、この時先頭に表示されている > を削除してを入力した後数字を入力するとその行番号にジャンプします )。この機能で表示される入力フィールドから VSCode で定義されている内部コマンドを実行する事ができます。このコマンドパレットで Display Language と入力すると、VSCode そのものの使用言語を設定できますので、日本語拡張導入時等で日本語にならない時に実行してみてください

エディタの設定として、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 二回で元に戻ります。




posted by at 2024-01-18 18:02 | プログラマ用 | このブログの読者になる | 更新情報をチェックする

2023年後期 : Visual Studio Code : 3枚目

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

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

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

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

エディタのコマンドに、末尾の空白のトリミングというものがありますが、files.trimTrailingWhitespace という設定を true にすると保存時に行ってくれます。ソースコードの編集時に実行したい場合はCTRL +  を押してから CTRL +  を押すというショートカットが元々定義されています。この機能を UI から実行するには、ステータスバーの右下のキャラクタセットの左横の表示(  )をクリックして表示されたメニューから末尾の空白のトリミング を実行します。

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

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

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


posted by at 2024-01-18 18:00 | プログラマ用 | このブログの読者になる | 更新情報をチェックする

2024年01月17日

2023年後期 : MVC : 1枚目

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

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

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

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

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 でも説明されていますが、『文書、ファイル、またはバイト列の性質や形式を示す標準』です。



posted by at 2024-01-17 22:00 | プログラマ用 | このブログの読者になる | 更新情報をチェックする

2023年後期 : PHP WEBAPP FORM HTML : 2-3枚目

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

以下に代表的なデータの種類を列挙します
1) : ブラウザにとって最も一般的な HTML
2) : 特に種類を指定しないバイナリデータ( ダウンロードダイアログが開く )
3) : 自然画像フォーマットである、拡張子が通常 .jpg のファイル
また、テキストファイルである場合、そのテキストを表現する為のキャラクタセットがSHIFT_JISである場合は Content-Type に=Shift_JISを追加します 現在の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 に保存してはならないという指示が与えられます。この時利用可能になるスーパーグローバル変数は、通常中のデータ保持に使用されます

PHP はサーバで動作しますが、ユーザが利用するのはブラウザであり、自分のすぐ近くにある PC の CPU で処理されたものです。よって WEBアプリケーションを作成するには画面のレイアウトを定義する為ので、サーバへデータへ送る為の入力画面を作成する必要があります。その際、サーバの為に必須となる要素が FORM です。そして、その中に記述されたものが送信データとなります。但し、送信データとなる要素は限られており、要素が最も良く使用され、type 属性によってその利用方法も変化します。
1) text改行のない通常のテキスト入力
2) 複数の選択肢より一つだけ選択できるコントロール
3) 選択するかしないかの2択を表現するコントロール
4) 内容は text と同じだが画面には表示されないコントロール
5) いわゆるカレンダーコントロール
6) ファイルアップロードに使用するコントロール
7) 送信用ボタン
7番目は、サーバへデータを送信する為のボタンとなり、属性に指定した値がボタンの文字列となります。そして、データをサーバへ送る為のコントロールに必ず必要な属性が属性であり、この属性が無ければサーバへは送られません。また、この属性に指定した値がサーバ側のスーパーグローバル変数のインデックス部分にセットされる事になっています。 あと、画面よりサーバへデータを送る要素としてとても重要なコントロールがあり、一般的には『コンボボックス』と呼ばれますが、要素名としてはとなります。この要素は属性を指定するといわゆる『リストボックス』というコントロールに変化します。そして、この要素の中に要素を指定して選択肢を設定する事ができます。この選択肢には、属性でサーバへ送りたい値を設定しておき、利用するユーザにはテキストで意味を表現してこの要素の終了要素で挟んで表示させます。 最後に、複数改行を入力可能ないわゆる文章を入力可能な要素がです。初期値はこの要素の開始要素と終了要素の間に挟んで準備する事が可能です。 PHP に対してデータを送る役割は FORM 要素ですが、この要素そのものが持つ属性が WEBアプリケーションにとって重要である事は言うまでもありません。 まず、属性によってサーバへのデータの送り方が大きく分けて2通りに分けられ、この属性を省略すると実行される通信方法を仮に『アドレスバー方式』と呼ぶことにします。この方式では、データは URL の一部として作成され、その URLそのものがサーバに到達します。この際、データ部分はと呼ばれ、データとデータの間は & で区切られます。 つまり、その URL は A 要素の属性で指定可能なもので、データ部分が外部に容易に露出する事になるデータ通信方法です。 それに反してもう一つの通信方法は、ブラウザが直接サーバへデータを送る方法で、『アドレスバー方式』との大きな違いは送信可能なデータ量に対する制限が無い事です。この場合、FORM 要素の属性に enctype を使用して、値にを指定するとファイルのアップロードが可能になります。また、送信されたデータがアドレスバーに残る事も無く、確実にサーバへデータを送る事ができます。 そして、次に重要な属性はです。この属性を省略すると、データの送り先は現在表示している URL に対して送られます。つまり、省略せずに他の PHP ファイルを指定すれば、その PHP にデータを送信可能になります。こうする事によって、PHP で記述する処理を単純化する事が可能になり、プログラミングのコストを抑える可能性も大きくなります。 さらに、プログラムの処理そのものにはさほど影響は与えませんが、属性を使用する事によって、ブラウザ上のどの部分に表示するかを決める事ができます。例えば要素をページ内に埋め込んで、PHP の送信結果をその中に表示する事が可能になります。また、この属性に値としてを指定すると、送信のたびに新しいタブを開いてそのウインドウ内に結果が表示されるでしょう。 ここまでは、画面定義として決められた基本機能の指定方法ですが、WEB アブリケーションとして完成度を高くするには、このデータ送信機能を実行する前に入力チェックを行う必要があります。たとえ入力チェックが必要無い簡単な送信でも、ユーザの間違いを避ける為に確認ダイアログを表示して送信のキャンセルをする事ができるようにする必要があります。 その為の重要な FORM 要素の属性がです。このような属性は、他の要素でも同様で、頭に on が付き、JavaScript への橋渡しをするための属性です。よって、属性の値は JavaScript そのものが記述されます。 そして、FORM 要素のこの属性は送信のキャンセルを実現する為に最初にステートメントを指定して、他で定義した関数の戻り値をシステムに返す事になっています。この他で定義した関数が返す値がの場合にサーバへの送信はキャンセルされます。
posted by at 2024-01-17 12:06 | プログラマ用 | このブログの読者になる | 更新情報をチェックする