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

2020年06月07日

clipboard.js で、2種類のクリップボード処理オブジェクトを作成して使い分ける

デモページ

1) TABLE データを TAB と 改行で作成して Excel に貼り付けて使用し、

ページ上のデータを加工して最終的にクリップボードにコピーするので、text プロパティにイベントを設定する

2) 入力した内容をそのままクリップボードに転送する

data-clipboard-target で対象の INPUT を設定する( とても簡単 )

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<script>
// clipboard.js が読み取る変数
var clipbpardText = "";
$(function(){

	// **********************************************
	// テーブルデータ用クリップボード処理オブジェクト
	// **********************************************
	var clipboard = 
		// クリップボードへの転送のトリガとなるボタンを第一引数に指定
		new ClipboardJS('#action1' , {
			text: function(trigger) {

				// #action1
				console.dir(trigger);

				// clipboard.js に渡す( このデータがクリップポードに転送される )
				return clipbpardText;
			}
		});

	// **********************************************
	// クリップボードへの転送に成功した時に
	// 実行されるイベント( 無くても良い )
	// **********************************************
	clipboard.on('success', function(e) {
		alert("テーブルデータをクリップボードにコピーしました");
	});

	$("#action1").on("click", function(){
		// **********************************************
		// clipbpardText にクリップボードに転送したい文字列をセットする
		// **********************************************
		var work = "";

		$("#tbl tr").each( function( row_cnt ){

			$(this).find("td,th").each(function( col_cnt ){
				if ( col_cnt != 0 ) {
					work += "\t";
				}
				work += $(this).text();
			});
			work += "\r\n";

		});

		clipbpardText = work;
	})

	// **********************************************
	// テキストボックス用クリップボード処理オブジェクト
	// data-clipboard-target 要素で 対象を設定
	// **********************************************
	var clipboard2 = new ClipboardJS('#action2');

	// **********************************************
	// クリップボードへの転送に成功した時に
	// 実行されるイベント( 無くても良い )
	// **********************************************
	clipboard2.on('success', function(e) {
		alert("テキストボックスの内容をクリップボードにコピーしました");
	});

});
</script>
</head>
<body>
	<div id="head">
		<input type="button" id="action1" value="クリップボードへコピー">

		<input type="button" id="action2" value="クリップボードへコピー" data-clipboard-target="#text">

		<input type="text" id="text" value="このテキスト">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">
			<tr><th>社員コード</th><th>氏名</th><th>フリガナ</th><th>所属</th><th>性別</th><th>作成日</th><th>更新日</th><th>給与</th><th>手当</th><th>管理者</th><th>生年月日</th></tr>
			
			<tr><td>0001</td><td>山田 太郎</td><td>ウラオカ トモヤ</td><td>0003</td><td>0</td><td>2005-09-12</td><td>2005-11-28</td><td>400000</td><td>9000</td><td>0001</td><td>2012/03/21</td></tr>
			<tr><td>0002</td><td>山村 洋代</td><td>ヤマムラ ヒロヨ</td><td>0003</td><td>1</td><td>2005-06-17</td><td>2005-09-18</td><td>300000</td><td></td><td>0001</td><td>2001/01/02</td></tr>
			<tr><td>0003</td><td>多岡 冬行</td><td>タオカ フユユキ</td><td>0002</td><td>0</td><td>2005-08-14</td><td>2005-11-14</td><td>250000</td><td></td><td>0001</td><td>2001/01/01</td></tr>
			<tr><td>0004</td><td>高田 冬美</td><td>タカタ フユミ</td><td>0003</td><td>1</td><td>2005-06-13</td><td>2005-10-05</td><td>250000</td><td></td><td>0001</td><td>2001/01/01</td></tr>
			<tr><td>0005</td><td>内高 友之</td><td>ウチタカ トモユキ</td><td>0003</td><td>0</td><td>2005-09-12</td><td>2005-11-10</td><td>150000</td><td></td><td></td><td>2001/01/01</td></tr>

		</tbody>
		</table>

	</div>

</body>
</html>





【jQueryの最新記事】
posted by at 2020-06-07 19:59 | jQuery | このブログの読者になる | 更新情報をチェックする

2020年05月30日

DAZ3D : 晴天の中世建築風の街の風景 / Harpsburg for Daz Studio

Harpsburg for Daz Studio

プロダクトの説明は、『バイエルンの中世の建築に触発されたハープスブルク』とあるのですが、どうやらドイツにある風景のようです。



🍓 イラストAC よりフリーダウンロードです
posted by at 2020-05-30 10:38 | イラストAC ダウンロードリスト | このブログの読者になる | 更新情報をチェックする

2020年05月24日

DAZStudio : F3 キーで表示されるダイアログでツールバーのアクションのカスタマイズ

ある日突然 DAZ は設定がなくなるという事が過去何度かありましたが、今日気が付いたらツールバーに登録していたプロダクトが無くなっていて、以前したたためたこの記事で再確認しました。( 再登録できましたが、過去のデータは ?? とか付いていて勝手に DAZ が見失ってました... )


F3 キーも変更できてしまいますが、デフォルトでは F3 キーのようです。


左側のツリーにアクションコマンドの一覧があるので、それを右側のツールバー部分にドラッグ&ドロップすると新しいアクションを追加できます。( ドロップ後ドラッグで移動できます )



特にあったら便利なのは Viewport なので試してみるには最適です。

デフォルトではツールバーは MainTools がありますが、Tools は OFF になっているので表示されません。内容は メニューの Tools と同じなので気にしなくてもいいです。表示されているツールバーと Main が対応しています



プロダクトをツールバーに登録する

プロダクトのアイコンを右クリックして、Create Custom Action を選択すると、Scripts メニューに登録されます。





そうすると、Action ツリーの先頭の Custom にも登録されるので、それをドラッグ&ドロップしてツールバーに登録します






posted by at 2020-05-24 17:11 | DAZStudio | このブログの読者になる | 更新情報をチェックする

DAZ3D : 教室の風景 / HY ClassRoom ・ Class Room

HY ClassRoom

かなりリアルな日本の中学校の部屋を再現したもの。部屋の後ろのほうが凝っているのだけれど、『教室』がテーマだと黒板側がメインにならざるを得ない。人物が居れば、教室の後ろ部分もリアルになるんだろうけれど、残念ながら人物で日本人中学生を DAZ で作るのは至難の技。

もう一つの 『Class Room』は、Product から消失していた。DAZ ではタマにこういうのがあるんだけど...
どちらかと言えば、あちらの Class Room で、日本的に若干のアレンジはしたつもり。


🍓 イラストAC よりフリーダウンロードです





posted by at 2020-05-24 01:35 | イラストAC ダウンロードリスト | このブログの読者になる | 更新情報をチェックする

2020年05月23日

ジャパンネット銀行から『トークン発送のお知らせ』が来た



カード式になってるのは知ってたので、お、ラッキーという感想です。

JNB は、少額のお金を入れてデビットカードで PayPal に登録して利用したり、今時では結構あちらこちらで支払い方法として JNB が出て来るので一つ持っていたほうがと思います。

トークンがあるので、ログインパスワードは弱めで設定可能です。残高見るだけならけっこう気軽に運用できます。

入出金もその月初回と2回目以降は3万なら手数料無料だし。



さらに、自分でデビットカード作ったり( カードレスVisaデビット )削除したりできるので、海外で危ないところで試す時に使えたりします。


というのが現在の JNB の認識です。



posted by at 2020-05-23 10:03 | 生活 : お金 | このブログの読者になる | 更新情報をチェックする

2020年05月19日

DAZ3D : 女性型アンドロイド / Cyborg Generation 8 Female ... その他

パターンはいろいろあるんですが、最も新しいのは、Cyborg Generation 8 Female の胴体部分とフィギュアの首部分を繋いだものです。このやり方で行くと、首より上のキャラは V4 時代からのどれでもいいという事になります。ボディが G3 であっても、首から上はなんでもありですので繋ぎ目さえごまかせばけっこういろいろできます。( たぶん )

※その他 : Synthoid for Genesis 8 Female
※その他 : Borg for Genesis 8 Female


🍓 イラストAC よりフリーダウンロードです
posted by at 2020-05-19 16:57 | イラストAC ダウンロードリスト | このブログの読者になる | 更新情報をチェックする

DAZ3D : 戦略用大型ロボット / Robot Titan

Robot Titan
Titan Mecha( テクスチャ )

これも初期テクスチャはおもちゃにしか見えないので、titan-mecha を追加しました。

※ ロボット部分は透過の PNG があります

🍓 イラストAC よりフリーダウンロードです
posted by at 2020-05-19 12:43 | イラストAC ダウンロードリスト | このブログの読者になる | 更新情報をチェックする

DAZ3D : 二足歩行装甲戦闘兵器 / A.M.S. RT-05

A.M.S. RT-05

オリジナルのテクスチャがやはり古臭いのでシェーダで二つほどバリエーションを作成しました

🍓 イラストAC よりフリーダウンロードです
posted by at 2020-05-19 12:20 | イラストAC ダウンロードリスト | このブログの読者になる | 更新情報をチェックする

2020年03月15日

2020 年度 大阪府寝屋川市 B 地区の ゴミカレンダー( A3 ) 印刷用

頼まれたので作成しました。セブンイレブンで USB で持って行くと、カラーで 80円です

▼ ご自由にお使いください
PDF のダウンロード





posted by at 2020-03-15 15:42 | 生活 | このブログの読者になる | 更新情報をチェックする

画狼

まとめ


注目
【VBS】WshShell.Runによる外部プログラムの実行のバリエーションと注意事項複数行のグループデータを1行にまとめるSQL
IE11 ( JScript : UI ) C# PHP JavaScript / jQuery HTML/CSS Android Java その他 WSH ( JScript : バッチ ) JScript を使用して( 拡張子は WSF )、CScript.exe に呼び出されるコンソールアプリケーションです
🍄 【メール送信 : fake sendmail】
fake sendmail for windows でメールを送信する

🐬 【データベース : エクスポート】
.accdb より Excel へのエクスポート
MySQL から Excel へのエクスポート
MySQL から SQLServer へのエクスポート

【データベース : Excel : エクスポート : CSV : 標準出力】
名前の定義がされた範囲をテーブルとして SELECT 文で 標準出力に CSV 出力【HTTP : Msxml2.ServerXMLHTTP : GET】
Msxml2.ServerXMLHTTP の GET で WEB 上の文字列を取得して JSON オブジェクトに変換して利用する【HTTP : Msxml2.ServerXMLHTTP : POST】
簡単にバイナリファイルをアップロードする【PUTをPHPでサポート】

【基本部分】
JScript の基本
MsgBox と InputBox を使う
IE11 ( JScript : UI ) IE11 で画面を作成して、一般的な JavsScript を使用して実行されるアプリケーションです。 ※ ここでできる事は、WSH ( JScript : バッチ ) でも可能です
🍄 【メール】
CDO.Message でメール送信

【データベース : 問合せ】
.accdb のテーブル一覧を jQuery で TABLE に作成する

🏢 【Excel】
新しい Excel の Book を作成する
既存の Book を開いてその中のテンプレートシートをコピーして名前を付けて保存する
ファイルを開くダイアログを使用する

【Windows : プログラム実行】
コマンドプロンプトベースの外部プログラムより情報を取得

【Windows : フォルダ選択】
フォルダを選択して、フォルダ内のフォルダとファイルの一覧を jQuery で表示する

【その他】
jQuery で、selectをタブルクリックした時に OPTION 要素の処理を行うコード
IE11 はブラウザなので、⚡ 通信処理は 【JavaScript / jQuery】 の ajax が利用できます C#
🍄 【メール】
TKMP.DLLを使った、Gmail 用メール送信テンプレート

🔀 【DataGridView】: カラムを作成( 他の一覧処理用 )
Microsoft Access に対してSQLを入力してその結果を DataGridView に表示する最も簡単なコード

🔀 【DataGridView : DBより自動更新】
DataGridView を使用したナチュラルな行データの更新

🔀 【DataGridView】: DB より カラム自動作成
Excel を データベースとして DataGridView に読み込む【WEBアクセス : JSON】
WebClient で JSON データを取得後 Json.NET でオブジェクト化【WEBアクセス : バイナリ】
PHP と連携してバイナリデータを WebClient.UploadDataAsync でそのままアップロードする

🐬 【データベース】
Microsoft Access の接続で、他の RDBMS【ここでは MySQL】にエクスポートを行う

【Windows】
フォームを表示せずに、通知領域にアイコンを表示させる常駐プログラム

🏢 【Excel】
dynamic 型 による Excel へのアクセス

【C# : ラムダ式等】
C# の delegate : メソッドの引数にメソッドを渡して使用する方法
PHP
🍄 【メール】
fake sendmail for windows を使って、PHP でごく普通に mb_send_mail でメール送信【ファイルアップロード】
PHP における標準的なテスト用アップロードのテンプレート

🐬 【データーベース : JSON  : API】
PHP : MySQL から JSON 文字列を返す自作【テスト用】API テンプレート

【データーベース : Microsoft Access : クラス】
家に持ち帰った mdb で簡単に php からアクセスしてテストプログラムを作る【MDBクラス付き】

📷 【画像処理】
PHP : 画像を返す処理( readfile ) と画像を縮小する処理( GD )
JavaScript / jQuery
【HTTP : ajax : GET】
jQuery の $.ajax で JSON 文字列を WEB より取得して TABLE を作成する【HTTP : ajax : アップロード】
一般的な PHP のアップロードページに対して jQuery の $.ajax でファイルをアップロードする【HTTP : ajax : Firebase  JSON】
Firebase の Realtime Database の JSON を jQuery の $.ajax で読み込んで TABLE を作成する【HTTP : Firebase : API】
Firebase に定義した Realtime Database の API を使用して TABLE を作成する

💾 【ファイル : CSV ロード】
FileReader で、ローカルの CSV を読み込んで【shift_jis】、jQuery でテーブルを作成して表示する

📥 【クリップボード : コピー】
clipboard.js で、2種類のクリップボード処理オブジェクトを作成して使い分ける
HTML/CSS
下半分がスクロールするページ
下半分が IFRAME なページ

Bootstrap な単純ページ( レスポンシブ )
Android
【HTTP : JSON】
LiveDoor のお天気情報をリストビューに表示する手順
Java
🐬 【コンソール】
単純な MySQL アクセス【 mysql-connector-java-5.1.47.jar】【コンソール : HTTP : JSON】
Okhttp( GET ) と Google Gson( JSON => オブジェクト ) で WEB アクセス

🐬 【JSP】
JSP で単純な MySQL アクセス 【mysql-connector-java-5.1.47.jar】
データベース System.Data.OleDb で select into 構文を使って簡単に Microsoft Access のデータを他の データベースにエクスポートする データーベース間 テーブルアクセス IN 句による外部参照 Access のエクスポート その他
Apache の index 表示でファイル名が長すぎて省略される場合の設定変更
デスクトップにユーザアイコン

PHP : ユニークなキーの取得
参考
bcp ユーティリティ( Microsoft )
SQL クライアント設定ユーティリティ( Microsoft )
sqlcmd Utility
bcp lightbox..社員マスタ out "c:\TEMP\data.csv" -c -t , -r \n -S localhost -U sa -P password
bcp "select * from lightbox..[商品マスタ]" queryout "c:\TEMP\data.csv" -c -t , -r \n -S localhost -U sa -P password
posted by at 2019-12-30 00:00 | 一覧 | このブログの読者になる | 更新情報をチェックする

2019年11月18日

バッチ処理の為の .wsf スケルトン / cscript.exe での実行を強制する / 自分自身の呼び出し

Wscript.Echo は、Wscript.exe から実行すると、一回の処理毎にメッセージボックスを表示するので、連続処理する場合は避けなければなりません(wscript.exe をタスクマネージャから強制終了する事になります)

Wscript.exe は、通常エクスプローラからダブルクリックでスクリプトを実行した際に使用されるので、誤って実行してしまう事を避ける方法です。以下のサンプルでは、スクリプトにデータを含めて、そのデータをループ処理で表示する処理ですが、コマンドプロンプトからの実行を強制しています( コマンドプロンプトから、cscript.exe を使用しないと Quit されます )


右端のアイコンよりダウンロードできます
<JOB>
<SCRIPT language="VBScript">

' コマンドプロンプトより起動される為の処理
str = WScript.FullName
str = Right( str, 11 )
str = Ucase( str )
if str <> "CSCRIPT.EXE" then
	strMessage = "コマンドプロンプトより cscript " & WScript.ScriptFullName
	strMessage = strMessage & " と指定して実行して下さい   " & vbCrLf & vbCrLf
	strMessage = strMessage & "( この文字列をクリップボードにコピーしたい場合は"
	strMessage = strMessage & "ctrl+c です )"
	WScript.Echo strMessage
	WScript.Quit
end if

aData = Split( getResource("myText"), vbCrLf )
For I = 0 to Ubound( aData )
	if Trim( aData(I) ) <> "" then
		Wscript.Echo aData(I)
	end if
Next

</SCRIPT>

<RESOURCE id="myText">
コード名称マスタ
商品マスタ
得意先マスタ
社員マスタ
取引データ
</RESOURCE>
</JOB>

以下は、Wscript.exe で起動された場合は、cscript.exe で自分自身を呼び出して再度実行しています( 最後にコマンドプロンプトの pause で停止 )
右端のアイコンよりダウンロードできます
<JOB>
<SCRIPT language="VBScript">

' コマンドプロンプトより起動される為の処理
str = WScript.FullName
str = Right( str, 11 )
str = Ucase( str )
if str <> "CSCRIPT.EXE" then
	str = WScript.ScriptFullName
	Set WshShell = Wscript.CreateObject("WScript.Shell")
	strParam = " "
	For I = 0 to Wscript.Arguments.Count - 1
		if instr(Wscript.Arguments(I), " ") < 1 then
			strParam = strParam & Wscript.Arguments(I) & " "
		else
			strParam = strParam & """" & Wscript.Arguments(I) & """ "
		end if
	Next
	Call WshShell.Run( "cmd.exe /c cscript.exe """ & str & """" & strParam & " & pause", 3 )
	WScript.Quit
end if

aData = Split( getResource("myText"), vbCrLf )
For I = 0 to Ubound( aData )
	if Trim( aData(I) ) <> "" then
		Wscript.Echo aData(I)
	end if
Next

</SCRIPT>

<RESOURCE id="myText">
コード名称マスタ
商品マスタ
得意先マスタ
社員マスタ
取引データ
</RESOURCE>
</JOB>


そして、最後は面倒な記述部分を WEB 上に置いて呼び出して実行しています
(Crun と言う関数)
右端のアイコンよりダウンロードできます
<JOB>
<COMMENT>
************************************************************
 WSH 実行スケルトン
************************************************************
</COMMENT>

<COMMENT>
************************************************************
 外部スクリプト定義
************************************************************
</COMMENT>
<SCRIPT
	language="VBScript"
	src="http://lightbox.in.coocan.jp/laylaClass.vbs">
</SCRIPT>

<SCRIPT language="VBScript">
' ***********************************************************
' 処理開始
' ***********************************************************
Call laylaFunctionTarget( "http://lightbox.in.coocan.jp/" )
Call laylaLoadFunction( "baseFunction.vbs" )

Crun()

aData = Split( getResource("myText"), vbCrLf )
For I = 0 to Ubound( aData )
	if Trim( aData(I) ) <> "" then
		Wscript.Echo aData(I)
	end if
Next

</SCRIPT>

<RESOURCE id="myText">
コード名称マスタ
商品マスタ
得意先マスタ
社員マスタ
取引データ
</RESOURCE>
</JOB>






posted by at 2019-11-18 13:52 | VBScript | このブログの読者になる | 更新情報をチェックする

2019年09月21日

WordPress ( 5.x.x ) の 投稿用のエディタ( Gutenberg )を 昔ながらのエディタにする為、functions.php に一行追加

詳細は以下のサイトより
WordPressエディタGutenbergを無効にする方法について(準備ができていない!)

結局 functions.php の先頭に以下を追加しました

add_filter('use_block_editor_for_post', '__return_false', 10);
posted by at 2019-09-21 15:27 | インターネット | このブログの読者になる | 更新情報をチェックする

2019年08月26日

Java : Okhttp( GET ) と Google Gson( JSON => オブジェクト ) で WEB アクセス

Okhttp のダウンロードは、files の jar リンクです。( Maven リポジトリ)

Okhttp は Okiokotlin-stdlib に依存しているのでこれらもダウンロードする必要があります。
import java.io.IOException;

import com.google.gson.Gson;

import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;

public class Main {

	public static void main(String[] args) {
		
		String url = "https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php";
		String result = "";
		
		OkHttpClient okHttpClient;		

		okHttpClient = new OkHttpClient();		
		Request.Builder builder = new Request.Builder();
		builder.url(String.format("%s?name=%s", url, "田"));
		Request request = builder.build();

		Response response = null;
		try {
			response = okHttpClient.newCall(request).execute();
			result = response.body().string();
		}
		catch (IOException e) {
			e.printStackTrace();
		}

		System.out.println(result);

		Gson gson = new Gson();

		Syain[] syains = gson.fromJson(result, Syain[].class);

		for (Syain syain : syains) {
			System.out.println(syain.社員コード);
			System.out.println(syain.氏名);
			System.out.println(syain.フリガナ);
		}

	}

	private class Syain {

		public String 社員コード;
		public String 氏名;
		public String フリガナ;

	}

}




posted by at 2019-08-26 22:41 | Java | このブログの読者になる | 更新情報をチェックする

C# : PHP と連携してバイナリデータを WebClient.UploadDataAsync でそのままアップロードする

WebClient.UploadDataAsync Method

バイナリデータは、HTTP のボディ部分で送られるので、ファイル名は HTTP ヘッダにセットして渡します
using System;
using System.IO;
using System.Net;
using System.Windows.Forms;

namespace WebPut
{
	public partial class Form1 : Form
	{
		// 読み込むファイルのパス
		string image_path = @"C:\Users\sworc\Pictures\IMG0330.JPG";

		public Form1()
		{
			InitializeComponent();
		}

		private void button1_Click(object sender, EventArgs e)
		{
			WebClient webClient = new WebClient();
			// ファイル名を HTTP ヘッダーで渡す
			webClient.Headers.Add("UserData", Path.GetFileName(image_path));

			// イベント作成
			webClient.UploadDataCompleted += (object _sender, UploadDataCompletedEventArgs _e) => {

				if (_e.Error != null)
				{
					// エラー
					Console.WriteLine(_e.Error.Message);
				}
				else
				{
					// サーバからの応答( バイト配列なのでテキストに変換 )
					Console.WriteLine(System.Text.Encoding.GetEncoding("UTF-8").GetString(_e.Result));
				}

			};

			// 画像ファイルをバイト配列に読み込む
			FileStream file_stream = new FileStream(image_path, FileMode.Open, FileAccess.Read);
			byte[] bin_buffer = new byte[file_stream.Length];
			file_stream.Read(bin_buffer, 0, (int)file_stream.Length);
			file_stream.Close();

			// バイナリデータアップロード開始
			string access_url = "http://localhost/php/upload/php-put.php";
			webClient.UploadDataAsync(new Uri(access_url), bin_buffer);

		}
	}
}


PHP 側は、php://input を利用した単純なコードです。

php-put.php
<?PHP
header( "Content-Type: text/html; charset=utf-8" );

$id = uniqid();

$fp = fopen( "php://input", "rb" );
$wfp = fopen( "data/{$id}_{$_SERVER["HTTP_USERDATA"]}", "wb" );

while( $ret = fread( $fp, 4096 ) ) {

	fwrite( $wfp, $ret );

}

fclose($wfp);
fclose($fp);

?>
データが保存されました




posted by at 2019-08-26 21:25 | C# | このブログの読者になる | 更新情報をチェックする

C# : WebClient で JSON データを取得後 Json.NET でオブジェクト化( ついでに PropertyInfo でプロパティデータ一覧を foreach で取得 )

Json.NET は ダウンロードボタンで NuGet 用のコマンドラインが表示されます

Json.NET でオブジェクトに変換するだけならば、 { set; get; } でプロパティ化せずとも単純な public な変数の定義で可能です。ここでは、プロパティの名前の一覧を配列で準備して foreach でデータを取得できるように { set; get; } でプロパティ化しています。
using Newtonsoft.Json;
using System;
using System.Net;
using System.Reflection;
using System.Text;
using System.Web;
using System.Windows.Forms;

namespace WebJson
{
	public partial class Form1 : Form
	{

		// フィールド名一覧
		private string[] field_names = {"社員コード", "氏名", "フリガナ", "所属", "性別", "作成日", "更新日", "給与", "手当", "管理者" };

		public Form1()
		{
			InitializeComponent();
		}

		private void action_Click(object sender, EventArgs e)
		{
			WebClient webClient = new WebClient();
			webClient.Encoding = Encoding.GetEncoding("utf-8");

			// DownloadStringCompleted の引数は、https://docs.microsoft.com/ja-jp/dotnet/api/system.net.downloadstringcompletedeventhandler
			webClient.DownloadStringCompleted += (object _sender, DownloadStringCompletedEventArgs _e) => {

				Console.WriteLine(_e.Result);

				// Json.NET は、NuGet でインストールします : Install-Package Newtonsoft.Json
				// https://www.newtonsoft.com/json
				JsonData[] data = JsonConvert.DeserializeObject<JsonData[]>(_e.Result);

				// 画面にデータをセット
				name.Text = data[0].氏名;
				furi.Text = data[0].フリガナ;

				// プロパティ名一覧より、データを取得
				PropertyInfo property;
				string value;
				foreach (string name in field_names)
				{
					property = typeof(JsonData).GetProperty(name);
					value = property.GetValue(data[0]).ToString();
					Console.WriteLine(value);
				}

			};

			// HttpUtility.UrlEncode は System.Web を参照する必要があります
			string access_url_query_string = $"https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php?name={HttpUtility.UrlEncode("田", Encoding.UTF8)}";

			// WEB データ取得開始
			webClient.DownloadStringAsync(new Uri(access_url_query_string));

		}

		private class JsonData
		{
			// PropertyInfo.GetValue を使用する為に { set; get; } でメソッド化しています
			public string 社員コード { set; get; }
			public string 氏名 { set; get; }
			public string フリガナ { set; get; }
			public string 所属 { set; get; }
			public int 性別 { set; get; }
			public DateTime 作成日 { set; get; }
			public DateTime 更新日 { set; get; }
			public int 給与 { set; get; }
			public int 手当 { set; get; }
			public string 管理者 { set; get; }
		}
	}
}




posted by at 2019-08-26 20:08 | C# | このブログの読者になる | 更新情報をチェックする

IE11 : フォルダを選択して、フォルダ内のフォルダとファイルの一覧を jQuery で表示する

Windows の標準の COM では、ファイルを選択するダイアログを使用できません。( Excel がインストールされておれば使えます )

しかし、Shell.Application を使用すれば、フォルダの選択は可能なうえにファイルの一覧をフォルダオブジェクトより取得して利用可能です。

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">

<script>
// Windows Shaell
var objShell = new ActiveXObject("Shell.Application");

$(function(){

	$("#action").on("click", function(){

		buildTable( );

	});

});

// ******************************
// jQuery でテーブル作成
// ******************************
function buildTable( ){

	// 1:0固定, 2:タイトル, 3:1はファイルシステムのみ, 4:0はルートがデスクトップ
	// 4:https://docs.microsoft.com/en-us/windows/win32/api/shldisp/ne-shldisp-shellspecialfolderconstants
	var objFolder = objShell.BrowseForFolder( 0, "フォルダ選択", 1, 0 );
	if ( objFolder == null ) {
		alert("フォルダの選択がキャンセルされました");
		return;
	}
	if ( !objFolder.Self.IsFileSystem ) {
		alert("ファイルシステムではありません");
		return;
	}

	// TABLE 部分クリア
	$("#tbl").html("");

	var objFolderItems = objFolder.Items();

	var nFiles = objFolderItems.Count;
	var arrData = [];

	// フォルダとファイルの一覧を配列にセット
	var nFiles = objFolderItems.Count;
	for( i = 0; i < nFiles; i++ ) {
		var objItem = objFolderItems.Item(i)
		// フォルダの場合
		if ( objItem.isFolder ) {
			arrData.push( " [" + objItem.Name +"]" );
		}
		else {
			arrData.push( objItem.Name );
		}
	}

	arrData.sort();
	arrData.unshift("-------------------------------------------------------------");
	// 選択したフォルダのパス
	arrData.unshift(objFolder.Self.Path);

	// TABLE に一覧を作成する
	for( i = 0; i < nFiles; i++ ) {
		var tr = $("<tr class='rowdata'></tr>")
			.appendTo("#tbl");

		$("<td></td>")
			.appendTo(tr)
			.text(arrData[i]);
	}

}
</script>

</head>
<body>
	<div id="head">
		<input
			id="action"
			class="ml-4 btn btn-outline-primary"
			type="button"
			value="フォルダ選択">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">

		</tbody>
		</table>

	</div>

</body>
</html>










posted by at 2019-08-26 13:30 | IE | このブログの読者になる | 更新情報をチェックする

2019年08月25日

PHP : 画像を返す処理( readfile ) と画像を縮小する処理( GD )

この PHP を指定ファイル名で呼び出すと、幅を 100px で縮小された画像を返します( 無ければ縮小画像を返します )。

▼ 縮小
imagecopyresampled
<?php
$debug = false;

// *************************************
// 画像があるフォルダの相対パス
// *************************************
$image_dir = 'images';

// *************************************
// QueryString より対象の
// 画像ファイル名を取得
// *************************************
$file = "{$image_dir}/{$_GET['name']}";

// *************************************
// 画像が存在しない場合は、
// エラー用の画像をブラウザに返す
// *************************************
if ( !file_exists( $file ) || $_GET['name'] == '' ) {
	header("Content-Type: image/png");
	$file = "{$image_dir}/error.png";
	header('Content-Length: ' . filesize($file));
	readfile($file);
	exit();
}

// *************************************
// ファイルの MIME を取得
// *************************************
$mime = image_type_to_mime_type( exif_imagetype( $file ) );

// *************************************
// ファイル名から拡張子を除いた部分を
// 取得して、縮小ファイルのファイルの
// パスを作成する( .jpg )
// *************************************
$path_parts = pathinfo($_GET['name']);
$small_file = "{$image_dir}/s/{$path_parts['filename']}.jpg";

// *************************************
// 縮小ファイルがなければ作成して
// ブラウザに返す、あればそのまま返す
// *************************************
if ( !file_exists( $small_file ) ) {
	if ( ImageConvert( $image_dir, $_GET['name'], exif_imagetype( $file ) ) ) {
		header("Content-Type: image/jpeg");
		header('Content-Length: ' . filesize($small_file));
		readfile($small_file);
	}
	else {
		// 縮小に失敗した場合は、大きい元のファイルを返す
		header("Content-Type: {$mime}");
		header('Content-Length: ' . filesize($file));
		readfile($file);
	}
}
else {
	header("Content-Type: image/jpeg");
	header('Content-Length: ' . filesize($small_file));
	readfile($small_file);
}

// *************************************
// ファイルを縮小して保存
// *************************************
function ImageConvert( $dir, $filename, $type ) {

log_print( "$dir, $filename, $type" );

	// *************************************
	// ファイルの属性等を取得
	// *************************************
	$target	= getimagesize( "$dir/$filename" );

log_print( print_r($target,true) );
 
	// 現在のサイズ
	$width	= $target[0];
	$height	= $target[1];

	$width_new	= 100;	// 幅固定

	// *************************************
	// 縮小後の高さを計算で求める
	// *************************************
	$height_new = (int)( ($height/$width)*$width_new );

	$target_path = "$dir/$filename";

	$jpeg = false;

	// *************************************
	// 画像の種類によって、オブジェクト作成方法を選択する
	// *************************************
	if ( $type == 2 ) {
		$jpeg = @imagecreatefromjpeg( $target_path );
	}
	if ( $type == 3 ) {
		$jpeg = @imagecreatefrompng( $target_path );
	}
	if ( $type == 4 ) {
		$jpeg = @imagecreatefromgif( $target_path );
	}
	if ( $jpeg === false ) {
		return false;
	}

log_print( "現画像取得" );

	// *************************************
	// 新しい空のイメージ
	// *************************************
	$jpeg_new = @imagecreatetruecolor( $width_new, $height_new );
	if ( $jpeg_new === false ) {
		return false;
	}

log_print( "新しい画像取得" );

	// *************************************
	// サイズ変更して新しいイメージへ転送
	// *************************************
	$ret = @imagecopyresampled(
		$jpeg_new,
		$jpeg,
		0,
		0,
		0,
		0,
		$width_new,
		$height_new,
		$width,
		$height
	);

	if ( !$ret ) {
		return false;
	}

log_print( "縮小完了" );

	// *************************************
	// JPEG ファイルとして、
	// クオリティ 75 で出力
	// *************************************
	$path_parts = pathinfo($filename);
	$ret = @imagejpeg ( $jpeg_new, "$dir/s/{$path_parts['filename']}.jpg", 75 );
	if ( !$ret ) {
		return false;
	}

log_print( "ファイル出力完了:$dir/s/{$path_parts['filename']}.jpg" );

	return true;
}


// *************************************
// デバッグログ
// *************************************
function log_print( $msg ) {

	if ( !$GLOBALS['debug'] ) {
		return false;
	}

	file_put_contents("debug.log", $msg ,FILE_APPEND );
	file_put_contents("debug.log", "\n" ,FILE_APPEND );

}


?>





posted by at 2019-08-25 22:06 | PHP | このブログの読者になる | 更新情報をチェックする

2019年08月23日

下半分が IFRAME なページ【 height: calc( 100% - 120px ) 】

デモページ

関連する記事

下半分がスクロールするページ【 height: calc( 100% - 120px ) 】

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section-iframe.css">
</head>
<body>
	<div id="head">
	</div>

	<iframe id="extend" name="extend" class="iframe-option" src="/demo/template/basic/basic-php-iframe-req/req/control.php"></iframe>

</body>
</html>



two-section-iframe.css
@charset utf-8;


/* ****************************
 上下エリア
 フィットコントロール用
******************************/
html,body {
	height: 100%;
}
/* ****************************
 それぞれのエリアの特性
******************************/
/* 基本枠 */
body {
	margin: 0;
}
/* 上固定部分 */
#head {
	padding: 16px;
	display: block;
	margin: auto;
	width: 100%;							/* 幅 */
	height: 120px;							/* 高さ */
	background-color: #e0e0e0;
}
/* 下スクロール部分 */
#extend {
	display: block;
	margin: auto;
	width: calc( 100% - 3px );				/* 幅 */
	height: calc( 100% - 120px - 2px );		/* 高さ */
	border: solid 2px #c0c0c0;
}





posted by at 2019-08-23 08:28 | CSS | このブログの読者になる | 更新情報をチェックする

2019年08月22日

JScript( WSH ) : fake sendmail for windows でメールを送信する

関連する記事

fake sendmail for windows を使って、PHP でごく普通に( mb_send_mail で )メール送信 : Gmail なので ssl(465)
VBScript : JavaScript のライブラリを呼び出して、Base64 エンコードを行う

ソースコードを読んだら、標準入力に -t は必要無くて、引数にファイルを指定して実行可能でした。

JScript で実行する以上、標準入力に直接アクセスして処理しています。

テストすると、今時の WEB メーラでは本文は普通に UTF-8 で利用可能でした。有名どころの WEB メーラですと、Subject も そのままで可能でしたが、まだ対応されていない業者もあったので、JavaScript の Base64 変換ライブラリを使用しています。
<JOB>
<SCRIPT language="JScript" src="https://winofsql.jp/base64.js"></SCRIPT>
<SCRIPT language="JScript">

WshShell =  new ActiveXObject("WScript.Shell");

// ファイルを作成して引数で渡しても実行可能
var oExec = WshShell.Exec("\"C:\\pleiades\\xampp\\sendmail\\sendmail.exe\"");

var mail_text = getResource("mail_data");


// 先頭の空白文字列を取り去る
mail_text = mail_text.replace(/^[ \s]+/, "");

// http://logicalerror.seesaa.net/article/151155394.html
var subject = Base64.encode("日本語の表示");

// UTF8 文字列を BASE64 に変換したものをセット
mail_text = mail_text.replace(/--UTF8TEXT--/, subject);

// 本文を渡す
oExec.StdIn.Write( mail_text );

// 標準入力を終了
oExec.StdIn.Write(String.fromCharCode(0x1a));

// 実行が終わるまで待つ
while (oExec.Status != 1) {

	WScript.Sleep(2000);
}
</SCRIPT>
<RESOURCE id="mail_data">
From: a@yourdomain.jp
To: 送り先メールアドレス
Subject: =?utf-8?B?--UTF8TEXT--?=

mail testing

abcdef

あいうえお
</RESOURCE>

</JOB>


base64.js のオリジナルサイト



posted by at 2019-08-22 14:56 | WSH( JScript ) | このブログの読者になる | 更新情報をチェックする

JSP で単純な MySQL アクセス ( mysql-connector-java-5.1.47.jar )

C:\pleiades\xampp\tomcat\lib\mysql-connector-java-5.1.47.jar を使用しています。

関連する記事

Java : 単純な MySQL アクセス ( mysql-connector-java-5.1.47.jar )
<%@ page
	language="java"
	import="java.io.*"
	import="java.text.*"
	import="java.util.*"

	import="java.text.SimpleDateFormat"
	import="com.mysql.jdbc.*"
	import="java.sql.DriverManager"
	import="java.sql.ResultSet"
	import="java.sql.SQLException"

	contentType="text/html;charset=utf-8" %>
<%!
// *********************************************************
// ローカル関数
// *********************************************************
public String getData( HttpServletRequest request,String name ) {

	String strGet = request.getParameter(name);
	if ( strGet == null ) {
		strGet = "";
	}

	return strGet;
}
%>
<%
// *********************************************************
// 入力値の表示
// GET で setCharacterEncoding を有効にするには
// sever.xml => Connector で useBodyEncodingForURI="true"
// *********************************************************
request.setCharacterEncoding("utf-8");	// 入力値のエンコーディング

// GET 入力
String strGet = getData( request, "InputGet" );

// POST 入力
String strPost = getData( request, "InputPost" );

%>
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<style>
.result {
	display: inline-block;
	width: 400px;
	border: 1px solid #c0c0c0;
	padding: 10px;
}
</style>
</head>
<body>
	<div id="head">
		<div class="result">InputGet = <%= strGet %> </div><div class="result"> InputPost = <%= strPost %></div>
	</div>

	<div id="extend">

		フォーム : GET( InputGet )
		<form method="get">
			<input type="text" name="InputGet" value="<%= strGet %>">
			<input class="btn btn-primary" type="submit" name="send_get" value="GET">
		</form>
		
		フォーム : POST( InputPost )
		<form method="post">
			<input type="text" name="InputPost" value="<%= strPost %>">
			<input class="btn btn-primary" type="submit" name="send_post" value="POST">
		</form>

		<hr>

<%

// データベース用変数
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;

try {

	Class.forName("com.mysql.jdbc.Driver");
	// MySQL Connector/J 接続
	conn = (Connection) DriverManager.getConnection(
		"jdbc:mysql://localhost/lightbox?user=root&password="
	);

	stmt = (Statement) conn.createStatement();

	if ( getData( request, "send_post" ).equals( "POST" ) ) {
		// % は %% で表現
		rs = stmt.executeQuery( String.format( "select * from 社員マスタ where 氏名 like '%%%s%%'", strPost) );
	}
	else {
		rs = stmt.executeQuery("select * from 社員マスタ");
	}

	// select の結果の列情報の取得
	ResultSetMetaData rsmd = (ResultSetMetaData) rs.getMetaData();

	// 列数
	int columnCount = rsmd.getColumnCount();

	// 列名
	for( int i = 1; i <= columnCount; i++) {
		out.println(rsmd.getColumnName(i));
	}
	out.println("\n<br>");

	// 日付フォーマット
	SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd");
	while( rs.next() ) {

		for( int i = 1; i <= columnCount; i++) {

			if ( i != 1 ) {
				out.println(",");
			}

			// 日付型の列
			if ( rsmd.getColumnTypeName(i).equals("DATETIME") ) {
				out.println( sdf.format(rs.getDate(i)) );
			}
			// それ以外
			else {
				out.println( rs.getString(i) );
			}


		}
		out.println("\n<br>");
	}

	rs.close();
	stmt.close();
	conn.close();

} catch (SQLException ex) {
	// handle any errors
	out.println("SQLException: " + ex.getMessage());
	out.println("SQLState: " + ex.getSQLState());
	out.println("VendorError: " + ex.getErrorCode());
}

%>

	</div>

</body>
</html>






posted by at 2019-08-22 11:42 | Java | このブログの読者になる | 更新情報をチェックする

Java : 単純な MySQL アクセス ( mysql-connector-java-5.1.47.jar )

C:\pleiades\java\8\jre\lib\mysql-connector-java-5.1.47.jar を使用しています。

※ mysql-connector-java-8.0.11 で serverTimezone=JST が必要

import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;

import com.mysql.jdbc.Connection;
import com.mysql.jdbc.Statement;

public class Main {

	public static void main(String[] args) {

		Connection conn = null;
		Statement stmt = null;
		ResultSet rs = null;

		String connectionString = "jdbc:mysql://localhost/lightbox?user=root&password=";

		try {
			// 接続文字列で接続
			conn = (Connection) DriverManager.getConnection(connectionString);

			String query = "select * from 社員マスタ";

			stmt = (Statement) conn.createStatement();
			rs = stmt.executeQuery(query);

			String scode;
			String sname;
			while( rs.next() ) {

				scode = rs.getString(1);
				sname = rs.getString(2);

				System.out.print(String.format("番号 : %s,%s / ", scode, sname));

				scode = rs.getString("社員コード");
				sname = rs.getString("氏名");

				System.out.println(String.format("列名 : %s,%s", scode, sname));


			}


			rs.close();
			stmt.close();
			// 接続を閉じる
			conn.close();

		} catch (SQLException e) {
			// TODO 自動生成された catch ブロック
			e.printStackTrace();
		}


		System.out.println("終了");
	}

}




posted by at 2019-08-22 10:29 | Java | このブログの読者になる | 更新情報をチェックする

2019年08月21日

一般的な PHP のアップロードページに対して jQuery の $.ajax でファイルをアップロードする

PHP における標準的なテスト用アップロードのテンプレート に対してアップロードしています。

ファイルのアップロードの PHP 側のインターフェイスに合わせてデータを用意して実行します。
PHP では、エラーの場合ページに文字列が出力されるたけなので、その文字列を検索して結果を判断します。

FileReader を使用して、選択したファイルが画像の場合は img 要素で表示し、それ以外ならば FileReader 由来のファイル名と MIME を表示します
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<title>単純ファイルアップロード</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<style>
#extend {
	white-space: pre;
}
</style>

<script>

$(function(){

	// ***************************
	// form 送信イベント
	// ***************************
	$("#frm").on("submit", function(event){

		// 本来の処理をキャンセル
		event.preventDefault();

		// 新規送信用オブジェクト
		var formData = new FormData();

		// テストの為、約100K の制限
		formData.append("MAX_FILE_SIZE", 1048576);

		// ファイル
		var uploadData = $("#target").get(0);

		formData.append("target", uploadData.files[0]);

		// オリジナルファイル名
		console.log( uploadData.files[0].name );

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "http://localhost/php/upload/php-upload-basic.php",
			type: "POST",
			data: formData,
			processData: false,  // jQuery がデータを処理しないよう指定
			contentType: false   // jQuery が contentType を設定しないよう指定
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );

			// ajax 対応のページでは無いので、ページ上の文字列を検索して判断する
			if ( data.search(/失敗/) != -1 ) {
				alert("アップロードに失敗しました");
			}

		})
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "code:" + jqXHR.status );
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );

			// エラーメッセージを表示
			alert("システムエラーです");

		})
		.always(function() {
		})
		;

	});

	// *************************************
	// ファイル選択 <input type="file">
	// *************************************
	$("#target").on("change", function(){

		$("#extend").html("");

		var reader = new FileReader();

		reader.name = this.files[0].name;
		reader.type = this.files[0].type;
		
		console.dir(reader);

		reader.refid = "image";

		// FileReader に画像が読み込まれた時のイベント
		$(reader).on("load", function () {
		
			if ( this.type.indexOf("image/") == 0 ) {
				$("<img>").appendTo("#extend")
					.prop( {"src": this.result, "title": this.name, "id": this.refid } )	// title にはオリジナルファイル名
					.css( {"width": "100px", "margin": "10px" } );
			}
			else {
				$("<div>").appendTo("#extend")
					.html( this.name + "<br>" + this.type );
			}
			
		});

		// 上記イベントを発動するための処理( this.files[i] は blob )
		if (this.files[0]) {
			reader.readAsDataURL(this.files[0]);
		}

	});
	

});

</script>

</head>
<body>
	<div id="head">
		<form
			id="frm">
		
			<div>
				<input id="target" type="file" class="ml-4 btn btn-outline-primary">
				<input type="submit" name="send" value="アップロード" class="ml-4 btn btn-outline-primary">
				<a class="ml-4 btn btn-info" href="/php/upload/php-upload-basic.php">GET 再読み込み</a>
			</div>
		 
		</form>
	</div>

	<div id="extend">

	</div>

</body>
</html>





posted by at 2019-08-21 20:00 | jQuery | このブログの読者になる | 更新情報をチェックする

PHP における標準的なテスト用アップロードのテンプレート

1) 一度にアップロードできるファイルは一つです。
2) PHP とおなじ場所にファイルをアップロードします( 本来は場所を変えるべきです )
3) アップロードできる最大サイズは 1048576 バイトです
4) アップロードするファイル名の日本語対応をしないので、uniqid() 関数でファイル名を作成しています
5) 拡張子は、アップロードされたファイルとおなじものを使用しています
6) PHP が $_FILE にセットする MIME が画像の場合は、HTML で画像を表示します
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<title>単純ファイルアップロード</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<style>
#extend {
	white-space: pre;
}
</style>
</head>
<body>
	<div id="head">
		<form 
			enctype="multipart/form-data"
			method="POST">
		
			<div>
				<input name="target" type="file" class="ml-4 btn btn-outline-primary">
				<input type="submit" name="send" value="アップロード" class="ml-4 btn btn-outline-primary">
				<a class="ml-4 btn btn-info" href="<?= $_SERVER["PHP_SELF"] ?>">GET 再読み込み</a>

				<input type="hidden" name="MAX_FILE_SIZE" value="1048576">
			</div>
		 
		</form>
	</div>

	<div id="extend">

<?php
if ( $_SERVER['REQUEST_METHOD'] == "POST" ) {

	// 拡張子を得る為に pathinfo
	$path_parts = pathinfo($_FILES['target']['name']);
	$file_name = uniqid() . ".{$path_parts['extension']}";

	// アップロード先の パス
	$upload = realpath("./");
	$upload .= DIRECTORY_SEPARATOR . $file_name;

	// アップロード先の パス の表示
	print "$upload\n";

	// PHP のアップロード処理( 一時ファイルを移動 )
	if ( move_uploaded_file($_FILES['target']['tmp_name'], $upload ) ) {
		print "<p>アップロードに成功しました</p>\n";
	}
	else {
		print "<p>アップロードに失敗しました</p>\n";
	}

	// アップロード情報の表示
	print_r( $_FILES );

	// 画像の場合は HTML で表示
	if ( stristr($_FILES['target']['type'],'image' ) != false  ) {
		print "<img src='{$file_name}'>";
	}
}

?>
	</div>

</body>
</html>





posted by at 2019-08-21 18:22 | PHP | このブログの読者になる | 更新情報をチェックする

IE11 : JScript : Excel.Application で既存の Book を開いてその中のテンプレートシートをコピーして名前を付けて保存する

IE11 の画面上の情報を決められた書式を使用して転送して新たにブックを作成する処理です。

印刷は、Excel を Windows から開いて実行します。

印刷内容は随時変更して自由度の高い業務作業を実現する事ができます。
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">
<title>ブックを開いてシートをコピーして使用する</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">

<script>
// ****************************
// Excel.Application 用
// ****************************
var Excel = null;
var Book = null;
var Worksheet = null;
var WshShell = new ActiveXObject("WScript.Shell");

$(function(){

	$("#action").on("click", function(){
	
		if ( Excel == null ) {
			// ****************************
			// 基本オブジェクトを作成
			// ****************************
			Excel = new ActiveXObject("Excel.Application");
		}

		// ****************************
		// 表示( テストの時は表示 )
		// ****************************
		Excel.Visible = true;

		// ****************************
		// 警告を出さないようにする
		// 使用すると上書きの警告が
		// 出なくなります
		// ****************************
		Excel.DisplayAlerts = false;

		// ****************************
		// 対象
		// ****************************
		var filePath = "c:\\temp\\test.xlsx";
		var filePath2 = "c:\\temp\\test2.xlsx";

		// ****************************
		// ブックを開く
		// ****************************
		Book = Excel.Workbooks.Open(filePath);

		// ****************************
		// シート名で直前にコピー
		// ****************************
		Book.Sheets("新しい情報").Copy( Book.Sheets("新しい情報") );
		Book.ActiveSheet.Name = "コピーしたシート";
		Book.Worksheets("コピーしたシート").Select();		// 無くても OK
		Worksheet = Book.ActiveSheet;

		// ****************************
		// シート内のセルをコピー
		// ****************************
	    Worksheet.Range("A1:K5").Select();
	    Excel.Selection.Copy();
	    Worksheet.Range("A6").Select();
	    Excel.ActiveSheet.Paste();

		try {
			Book.SaveAs(filePath2);
			Book.Close();
		}
		catch (e) {
			alert("Book.Save でエラーが発生しました");

			console.dir(e);
			ExcelQuit();
			return;
		}

		ExcelQuit();

		// ****************************
		// 終了確認
		// ****************************
		alert("処理が終了しました \n\n 保存したブックを開きます");

		// ****************************
		// Windows からの Excel 起動
		// ****************************
		WshShell.Run( "RunDLL32.EXE shell32.dll,ShellExec_RunDLL " + filePath2 );

	});

});

// ****************************
// 終了処理
// ****************************
function ExcelQuit() {
	Excel.Quit();
	Excel = null;
	idTmr = window.setTimeout("Cleanup();",1);
}
function Cleanup() {
	CollectGarbage();
}
</script>
</head>
<body>
	<div id="head">
		<input id="action" type="button" value="ブックを開いて処理を実行" class="btn btn-primary">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">
			<tr><th>実行手順概要</th><th>テンプレートシートを使って新しいシートを作成して、新しいブックとして結果を保存</th></tr>
			
			<tr><td>1</td><td>開く</td></tr>
			<tr><td>2</td><td>テンプレートシート名で直前にコピー</td></tr>
			<tr><td>3</td><td>新しいシート名セット</td></tr>
			<tr><td>4</td><td>シート内のセルをクリップボードでコピー</td></tr>
			<tr><td>5</td><td>名前を付けて保存</td></tr>

		</tbody>
		</table>

	</div>

</body>
</html>





posted by at 2019-08-21 16:16 | IE | このブログの読者になる | 更新情報をチェックする

IE11 : JScript : Excel.Application で新しい Excel の Book を作成する

Excel.Application は、常にメモリ上に置くのは問題が出ると困るので、実行毎に開放します。

ここで実行している機能は
1) ブックを追加
2) デフォルトシートの名称変更
3) シートを前のシートの後ろにもう一つ追加
4) 列の表示形式の設定
5) ブラウザ上のデータを jQuery で セルに転送
6) セルの表示幅を自動調整
7) 保存
8) Excel の終了と解放
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">
<title>新しい Excel の Book を作成する</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">

<script>
// ****************************
// Excel.Application 用
// ****************************
var Excel = null;
var Book = null;
var Worksheet = null;
var WshShell = new ActiveXObject("WScript.Shell");

$(function(){

	$("#action").on("click", function(){
	
		if ( Excel == null ) {
			// ****************************
			// 基本オブジェクトを作成
			// ****************************
			Excel = new ActiveXObject("Excel.Application");
		}

		// ****************************
		// 表示( テストの時は表示 )
		// ****************************
		Excel.Visible = true;

		// ****************************
		// 警告を出さないようにする
		// 使用すると上書きの警告が
		// 出なくなります
		// ****************************
		Excel.DisplayAlerts = false;

		// ****************************
		// ブック追加
		// ****************************
		Excel.Workbooks.Add();

		// ****************************
		// 追加したブックを取得
		// ※ 新規なのて 1 番目
		// ****************************
		Book = Excel.Workbooks( Excel.Workbooks.Count );

		// ****************************
		// 先頭シートを選択する
		// ****************************
		Worksheet = Book.Worksheets( 1 );

		// ****************************
		// シート名設定
		// ( アクティブなので直接 )
		// ****************************
		Worksheet.Name = "新しい情報";

		// ****************************
		// Add では 第二引数に指定した
		// オブジェクトのシートの直後に、
		// 新しいシートを追加します。
		// ****************************
		Book.Worksheets.Add(null,Worksheet);

		// ****************************
		// シート名設定
		// ( 2番目のシート )
		// ****************************
		Book.Worksheets(2).Name = "予備情報";

		// ****************************
		// 新しい情報 シートを選択
		// ****************************
		Book.Worksheets("新しい情報").Select();

		// ****************************
		// コード列を文字列に設定
		// ****************************
		Worksheet.Columns("A:A").Select();
	    Excel.Selection.NumberFormatLocal = "@";
		Worksheet.Columns("D:D").Select();
		Excel.Selection.NumberFormatLocal = "@";
		Worksheet.Columns("J:J").Select();
		Excel.Selection.NumberFormatLocal = "@";

		// ****************************
		// セルへセット
		// ****************************
		// タイトル部分の参照
		$("#tbl th").each(function(idx){
			Worksheet.Cells(1, idx+1) = $(this).text();
		});

		// 行一覧の参照
		$("#tbl tr").each(function(row){
			$(this).find("td").each(function(idx){
				Worksheet.Cells(row, idx+1) = $(this).text();
			});
		});

		// ****************************
		// セルをデータに合わせて
		// 整理して左上を選択
		// ****************************
		Worksheet.Columns("A:K").Select();
		Worksheet.Columns("A:K").EntireColumn.AutoFit();
		Worksheet.Range("A1").Select();

		// ****************************
		// 保存
		// 拡張子を .xls で保存するには
		// Call ExcelBook.SaveAs( FilePath, 56 ) とします
		// ****************************
		var filePath = "c:\\temp\\test.xlsx";

		try {
			Book.SaveAs( filePath );
			Book.Close();
		}
		catch (e) {
			alert("Book.SaveAs でエラーが発生しました");

			console.dir(e);
			ExcelQuit();
			return;
		}

		ExcelQuit();

		// ****************************
		// 終了確認
		// ****************************
		alert("処理が終了しました \n\n 保存したブックを開きます");

		// ****************************
		// Windows からの Excel 起動
		// ****************************
		WshShell.Run( "RunDLL32.EXE shell32.dll,ShellExec_RunDLL " + filePath );

	});

});

// ****************************
// 終了処理
// ****************************
function ExcelQuit() {
	Excel.Quit();
	Excel = null;
	idTmr = window.setTimeout("Cleanup();",1);
}
function Cleanup() {
	CollectGarbage();
}
</script>
</head>
<body>
	<div id="head">
		<input id="action" type="button" value="Excel.Application の実行" class="btn btn-primary">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">
			<tr><th>社員コード</th><th>氏名</th><th>フリガナ</th><th>所属</th><th>性別</th><th>作成日</th><th>更新日</th><th>給与</th><th>手当</th><th>管理者</th><th>生年月日</th></tr>
			
			<tr><td>0001</td><td>山田 太郎</td><td>ウラオカ トモヤ</td><td>0003</td><td>0</td><td>2005-09-12</td><td>2005-11-28</td><td>400000</td><td>9000</td><td>0001</td><td>2012/03/21</td></tr>
			<tr><td>0002</td><td>山村 洋代</td><td>ヤマムラ ヒロヨ</td><td>0003</td><td>1</td><td>2005-06-17</td><td>2005-09-18</td><td>300000</td><td></td><td>0001</td><td>2001/01/02</td></tr>
			<tr><td>0003</td><td>多岡 冬行</td><td>タオカ フユユキ</td><td>0002</td><td>0</td><td>2005-08-14</td><td>2005-11-14</td><td>250000</td><td></td><td>0001</td><td>2001/01/01</td></tr>
			<tr><td>0004</td><td>高田 冬美</td><td>タカタ フユミ</td><td>0003</td><td>1</td><td>2005-06-13</td><td>2005-10-05</td><td>250000</td><td></td><td>0001</td><td>2001/01/01</td></tr>
			<tr><td>0005</td><td>内高 友之</td><td>ウチタカ トモユキ</td><td>0003</td><td>0</td><td>2005-09-12</td><td>2005-11-10</td><td>150000</td><td></td><td></td><td>2001/01/01</td></tr>

		</tbody>
		</table>

	</div>

</body>
</html>


IE11 のバグの対処方法( 英文 )

BUG: Excel Does Not Shut Down After Calling the Quit Method When Automating from JScript

IE11 の設定








posted by at 2019-08-21 14:16 | IE | このブログの読者になる | 更新情報をチェックする

2019年08月20日

Firebase の Realtime Database の JSON を jQuery の $.ajax で読み込んで TABLE を作成する

Firebase の Realtime Database の JSON は、access-control-allow-origin: * を出力するので、どこからでも利用できます。


<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<script src="https://lightbox.sakura.ne.jp/demo/number-format.js"></script>

<script>

$(function(){

	// **************************************
	// ボタン
	// **************************************
	$("#load_json").on( "click", function(){

		$.ajax({
			url: "https://プロジェクト名-xxxxx.firebaseio.com/syain.json",
			cache: false,
			data: { "name" : $("#sname").val() }
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );

			// tabble 作成
			loadData( data );

		})
		// 失敗
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
		})
		// 常に実行
		.always(function() {

		})
		;
	
	});

	// **************************************
	// このページ自身の QRコードの表示
	// **************************************
	$('#qrcode')
		.css({ "margin" : "20px 20px 20px 20px" })
		.qrcode({width: 160,height: 160,text: location.href });

});

// **************************************
// JSON => table
// **************************************
function loadData( data ) {

	$("#tbl").html("");

	// データ用
	var row_data;

	var index = 0;

	// 行のループ  ( <tr></tr> )
	$.each(data, function( key, syain ) {

		// 初回はタイトル作成
		if ( index == 0 ) {
			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );

			$("<th></th>").appendTo( row_data ).text( "社員コード" );
			$("<th></th>").appendTo( row_data ).text( "氏名" );
			$("<th></th>").appendTo( row_data ).text( "フリガナ" );
			$("<th></th>").appendTo( row_data ).text( "給与" );
			$("<th></th>").appendTo( row_data ).text( "性別" );
			$("<th></th>").appendTo( row_data ).text( "管理者" );
			$("<th></th>").appendTo( row_data ).text( "生年月日" );

		}

		var re = new RegExp($("#sname").val());
		if ( syain.name.search(re) != -1  ) {
			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );
	
			$("<td></td>").appendTo( row_data ).text( syain.code );
			$("<td></td>").appendTo( row_data ).text( syain.name );
			$("<td></td>").appendTo( row_data ).text( syain.furi );
			$("<td></td>").appendTo( row_data ).text( syain.kyuyo );
			$("<td></td>").appendTo( row_data ).text( (syain.sex == 0 ? "男性" : "女性"  ) );
			$("<td></td>").appendTo( row_data ).text( syain.kanri );
			$("<td></td>").appendTo( row_data ).text( syain.birthday );
		
		}

		// キーの数
		index++;
	
	});

}
</script>
</head>
<body>
	<div id="head">
		<input type="text" id="sname" name="sname">
		<input type="button" id="load_json" value="検索">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">

		</tbody>
		</table>

		<div id="qrcode"></div>
	</div>

</body>
</html>




posted by at 2019-08-20 17:52 | JavaScript | このブログの読者になる | 更新情報をチェックする

Firebase に定義した Realtime Database の API を使用して TABLE を作成する

このアプリは問い合わせとして TABLE で 一覧を作成しますが、API を使用すると容易に更新も実行する事が可能です



参考にするべきドキュメント

ウェブ上でデータリストを操作する

Firebase を JavaScript プロジェクトに追加する

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<script src="https://lightbox.sakura.ne.jp/demo/number-format.js"></script>

<script>

$(function(){

	// **************************************
	// ボタン
	// **************************************
	$("#load_json").on( "click", function(){

		// データベース参照
		var myFirebaseRef;

		myFirebaseRef = firebase.database().ref('syain');

		myFirebaseRef.once('value', 
			function(snapshot) {

				if ( !snapshot.exists() ) {
					alert( "データが存在しません" );
					return;
				}

				loadData( snapshot );

			},
			function(error){
				console.dir(error);
			}
		);
	
	});

	// **************************************
	// このページ自身の QRコードの表示
	// **************************************
	$('#qrcode')
		.css({ "margin" : "20px 20px 20px 20px" })
		.qrcode({width: 160,height: 160,text: location.href });

});

// **************************************
// firebase => table
// **************************************
function loadData( snapshot ) {

	$("#tbl").html("");

	// データ用
	var row_data;

	var index = 0;

	snapshot.forEach(function(data){

		var obj = data.val();
		
		// 初回はタイトル作成
		if ( index == 0 ) {
			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );

			$("<th></th>").appendTo( row_data ).text( "社員コード" );
			$("<th></th>").appendTo( row_data ).text( "氏名" );
			$("<th></th>").appendTo( row_data ).text( "フリガナ" );
			$("<th></th>").appendTo( row_data ).text( "給与" );
			$("<th></th>").appendTo( row_data ).text( "性別" );
			$("<th></th>").appendTo( row_data ).text( "管理者" );
			$("<th></th>").appendTo( row_data ).text( "生年月日" );

		}
		

		var re = new RegExp($("#sname").val());
		if ( obj.name.search(re) != -1  ) {

			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );

			$("<td></td>").appendTo( row_data ).text( obj.code );
			$("<td></td>").appendTo( row_data ).text( obj.name );
			$("<td></td>").appendTo( row_data ).text( obj.furi );
			$("<td></td>").appendTo( row_data ).text( obj.kyuyo );
			$("<td></td>").appendTo( row_data ).text( (obj.sex == 0 ? "男性" : "女性"  ) );
			$("<td></td>").appendTo( row_data ).text( obj.kanri );
			$("<td></td>").appendTo( row_data ).text( obj.birthday );

		}
		
		index++;

	});

}
</script>
</head>
<body>
	<div id="head">
		<input type="text" id="sname" name="sname">
		<input type="button" id="load_json" value="検索">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">

		</tbody>
		</table>

		<div id="qrcode"></div>
	</div>

<!-- https://firebase.google.com/docs/web/setup?authuser=0#add-sdks_CDN -->

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-database.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#config-web-app -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
// *****************************************
// Firebase より取得した WEB 用 API情報
// *****************************************
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

</body>
</html>

強調部分が Firebase より取得する部分ですが、firebase-database.js の行は追加になります



posted by at 2019-08-20 17:28 | JavaScript | このブログの読者になる | 更新情報をチェックする

PHP : MySQL から JSON 文字列を返す自作(テスト用) API テンプレート

access-control-allow-origin: * を出力して JavaScript から自由に読み込めるようにしています。

fetch_all を使用してJSON 文字列を一括で取得しています。
<?php
error_reporting( E_ALL & ~E_NOTICE );

session_cache_limiter('nocache');
session_start();

// 取得対象列
$list = "社員コード,氏名,フリガナ,所属,性別,作成日,更新日,給与,ifnull(手当,0) as 手当,ifnull(管理者,'') as 管理者";
// json encode オプション
$flg = 0x0000;

// JavaScript ajax 用
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: application/json; charset=utf-8" );

// DB 接続
$mysqli = new mysqli('サーバ', 'ユーザ', 'パスワード', 'データーベース');
if ( $mysqli->connect_error ) {
	// 接続失敗
	$json = array( "error" => "Connect Error ({$mysqli->connect_errno}) {$mysqli->connect_error}" );
}
else {
	// json encode オプション
	if ( $_GET["pretty"] != "no" ) {
		$flg = $flg | JSON_PRETTY_PRINT;
	}
	if ( $_GET["escape"] != "no" ) {
		$flg = $flg | JSON_UNESCAPED_UNICODE;
	}

	$mysqli->set_charset("utf8");

	// ~E_NOTICE なので、単純化
	if ( $_GET["name"] == "" ) {
		$query = "select {$list} from 社員マスタ";
	}
	else {
		$query = "select {$list} from 社員マスタ";
		// 条件オプション
		$query .= " where 氏名 like ?";
	}

	// SQL 準備
	$stmt = $mysqli->prepare($query);
	if ( $stmt === false ) {
		// SQL 失敗
		$json = array( "error1" => "$mysqli->error : {$query}" );
	}
	else {
		// バインドは変数で
		$param = "%{$_GET["name"]}%";

		// パラメータの数が一致しない場合の warning を出さない為の @ 抑制
		@$stmt->bind_param('s', $param );
		if ( false === $stmt->execute() ) {
			$json = array( "error2" => "$mysqli->error" );
		}
		else {
			// MySQL ネイティブドライバ限定(PHP 5.3.0 以降)
			$result = $stmt->get_result();
			if ( $result === false ) {
				$json = array( "error3" => "$mysqli->error" );
			}
			else {
				// DB 読み出し成功
				$json = $result->fetch_all( MYSQLI_ASSOC );
			}
		}
	}
}

print json_encode( $json, $flg );

?>




posted by at 2019-08-20 17:10 | PHP | このブログの読者になる | 更新情報をチェックする

jQuery の $.ajax で JSON 文字列を WEB より取得して TABLE を作成する

IE11 でも動作します。

JSON 文字列は、PHP で access-control-allow-origin: * を出力してどこからでも読み込めるようにしています。

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<script src="https://lightbox.sakura.ne.jp/demo/number-format.js"></script>

<script>

$(function(){

	// **************************************
	// ボタン
	// **************************************
	$("#load_json").on( "click", function(){

		$.ajax({
			url: "https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php",
			cache: false,
			data: { "name" : $("#sname").val() }
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );

			// tabble 作成
			loadData( data );

		})
		// 失敗
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
		})
		// 常に実行
		.always(function() {

		})
		;
	
	});

	// **************************************
	// このページ自身の QRコードの表示
	// **************************************
	$('#qrcode')
		.css({ "margin" : "20px 20px 20px 20px" })
		.qrcode({width: 160,height: 160,text: location.href });

});

// **************************************
// JSON => table
// **************************************
function loadData( data ) {

	$("#tbl").html("");

	// データ用
	var row_data;

	// 行のループ  ( <tr></tr> )
	$.each(data, function( index, syain ) {

		// 初回はタイトル作成
		if ( index == 0 ) {
			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );
			$.each( syain, function( key, value ) {
				$("<th></th>")
					.appendTo( row_data )
					.text( key );
			});
		}


		// テーブルに行を追加	
		row_data = $("<tr></tr>").appendTo( "#tbl" );

		// 列のループ ( <td></td> )
		$.each( syain, function( key, value ) {

			$("<td></td>")
				.appendTo( row_data )
				.text( value );

		});
	
	});

}
</script>
</head>
<body>
	<div id="head">
		<input type="text" id="sname" name="sname">
		<input type="button" id="load_json" value="検索">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">

		</tbody>
		</table>

		<div id="qrcode"></div>
	</div>

</body>
</html>


関連する記事

下半分がスクロールするページ【 height: calc( 100% - 120px ) 】

PHP : MySQL から JSON 文字列を返す自作(テスト用) API テンプレート




posted by at 2019-08-20 17:00 | jQuery | このブログの読者になる | 更新情報をチェックする

JScript( WSH ) : Msxml2.ServerXMLHTTP の GET で WEB 上の文字列を取得して JSON オブジェクトに変換して利用する

open Method (ServerXMLHTTP-IServerXMLHTTPRequest)

JSON 文字列を JSON に変換するのは、MDN でも紹介されている eval で行います。

JSON 文字列を送りたい場合は少し面倒ですが、受け側を自作できるのならば他に代替え方法はいくらでも可能です( どうしても必要ならば ポリフィル 使えばいいと思います )。

URL エンコードは encodeURIComponent で行います。
var cond = "name=" + encodeURIComponent("田");
srvXmlHttp.open("GET", "https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php?" + cond, false);
<JOB>
<SCRIPT language="JScript">
// ************************************
// cscript.exe での実行を強制
// ※ 一覧表示の為
// ************************************
str = WScript.FullName;
str = str.substr( str.length - 11, 11 );
str = str.toUpperCase();
if ( str != "CSCRIPT.EXE" ) {
	str = WScript.ScriptFullName;
	WshShell =  new ActiveXObject("WScript.Shell");
	WshShell.Run( "cmd.exe /c cscript.exe \"" + str + "\" & pause", 3 );
	WScript.Quit();
}

// ************************************
// タイムアウト設定用データ
// ※ デフォルトでも特に問題なし
// ( setTimeouts なし )
// ************************************
var lResolve = 60;
var lConnect = 60;
var lSend = 30;
var lReceive = 30;

// ************************************
// HTTP( GET )
// ※ syain_api_bind.php は utf-8
// ※ open の false は同期処理
// ************************************
var srvXmlHttp;
srvXmlHttp = new ActiveXObject("Msxml2.ServerXMLHTTP.3.0");
srvXmlHttp.open("GET", "https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php", false);
srvXmlHttp.setTimeouts(lResolve, lConnect, lSend, lReceive);
srvXmlHttp.send();

// ************************************
// JSONフォーマットのテキスト
// ************************************
var text = srvXmlHttp.responseText;

// ************************************
// text を JSON オブジェクトに変更
// ************************************
var json = eval('(' + text + ')');

// ************************************
// 氏名部分を表示
// ************************************
for( i = 0; i < json.length; i++ ) {
	WScript.Echo( json[i]["氏名"] );
}

</SCRIPT>
</JOB>


関連する記事

VBscript(または JScript) で簡単にバイナリファイルをアップロードする



posted by at 2019-08-20 00:11 | WSH( JScript ) | このブログの読者になる | 更新情報をチェックする