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

2019年08月20日

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 テンプレート




【jQueryの最新記事】
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 ) | このブログの読者になる | 更新情報をチェックする

2019年08月18日

JScript( WSH ) で MsgBox と InputBox を使う

相互に呼び出し可能ですが、メインとなるほうを下に定義するのが経験則的に間違いがありません。
( つまり、メインに無い機能は先に関数として定義しておく )

<JOB>
<SCRIPT language="VBScript">
function input_box( title )

	input_box = InputBox( title )

end function
function msg_box( message )

	MsgBox( message )

end function
</SCRIPT>
<SCRIPT language="JScript">

var text = input_box("入力してください")
if ( typeof( text ) == "undefined" ) {
	WScript.Echo( "キャンセルされました" );
	WScript.Quit()
}

msg_box( text + " が入力されました" )

</SCRIPT>
</JOB>




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

2019年08月17日

IE11 : JScript : Excel.Application でファイルを開くダイアログを使用する

通常だと、ダイアログが IE11 の後ろに隠れてしまうので、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">

<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>
var save = { width: null, height: null, top: null, left: null };
var excel = null;

$(function(){

	// Excel でファイルを開くダイアログ	
	$("#open_file_dialog").on("click", function(){
	
		// Excel をロード
		excel = new ActiveXObject("Excel.Application");
		
		save.width = excel.width;
		save.height = excel.height;
		save.top = excel.top;
		save.left = excel.left;
		
		excel.top = -200;	// デスクトップの外に隠す
		excel.left = -200;
		excel.width = 100;
		excel.height = 100;
		excel.Visible = true;
		excel.WindowState = 2	// Minimize
		excel.WindowState = 1	// Maximize

		excel.DisplayAlerts = false;

		// 一つのファイルを開く
		// https://docs.microsoft.com/ja-jp/office/vba/api/excel.application.getopenfilename
		var filePath = excel.GetOpenFilename("全て,*.*,CSV,*.csv", 1,"ファイルの選択",null, false );
		// 非表示にして
		excel.Visible = false;
		// デスクトップの中に戻す
		excel.width = save.width;
		excel.height = save.height;
		excel.top = save.top;
		excel.left = save.left;

		// 未選択の場合
		if( filePath === false ) {
			alert("ファイルの参照選択がキャンセルされました")
		}
		// 選択の場合
		else {
			alert(filePath + " を選択しました");
		}

		// Excel を終了
		excel.Quit();
		excel = null;
		// Excel 解放
		var idTmr = window.setTimeout("Cleanup();",1);

	});

});
// ******************************
// Excel 解放
// ******************************
function Cleanup() {
	CollectGarbage();
}

</script>
</head>
<body>
	<div id="head">
		<input type="button" id="open_file_dialog" value="ファイルを開く">
	</div>

	<div id="extend">

	</div>

</body>
</html>



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

下半分がスクロールするページ【 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.css">
</head>
<body>
	<div id="head">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">
			<th>社員コード</th><th>氏名</th><th>フリガナ</th><th>所属</th><th>性別</th><th>作成日</th><th>更新日</th><th>給与</th><th>手当</th><th>管理者</th><th>生年月日</th>
			
			<!-- ここに複数の行データ -->

		</tbody>
		</table>

	</div>

</body>
</html>


two-section.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 {
	padding: 4px 16px;
	display: block;
	margin: auto;
	width: calc( 100% - 3px );				/* 幅 */
	height: calc( 100% - 120px - 2px );		/* 高さ */
	border: solid 2px #c0c0c0;
	overflow: scroll;
}

/* ****************************
 一覧用テーブル
******************************/
/* 列の改行コードを有効 */
td,th {
	white-space: pre;
}

/* テーブル内のデータを選択不可 */
#tbl {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}





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

2019年08月16日

Android Studio : LiveDoor のお天気情報をリストビューに表示する手順

手順1

AndroidManifest.xml に、以下を追加する

<uses-permission android:name="android.permission.INTERNET"/>

手順2

build.gradle(Module) に、OkhttpGoogle Gson の記述を追加する
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation 'com.squareup.okhttp3:okhttp:4.1.0'
}


activity_main.xml に ListView をセット
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>


JSON データをデシリアイズする為のクラスを作成
public class Weather {

	WebData[] pinpointLocations;

}
public class WebData {

	String link;
	String name;

	@Override
	public String toString() {
		return name;
	}
}

インターネットアクセス用のクラス

HttpAccess クラスを追加
import android.os.AsyncTask;

import java.io.IOException;

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

public class HttpAccess {

	private OkHttpClient okHttpClient;
	private String url;

	public interface OnAsyncTaskListener {
		abstract public void onAsyncTaskListener(String s);
	}

	public HttpAccess(String url) {
		this.okHttpClient = new OkHttpClient();
		this.url = url;
	}

	public void sendGet(final OnAsyncTaskListener listener ) {

		new AsyncTask<Void,Void,String>(){
			@Override
			protected String doInBackground(Void... params) {
				String result = "[\"error\"]";

				Request.Builder builder = new Request.Builder();
				builder.url(HttpAccess.this.url);
				Request request = builder.build();

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

				return result;
			}

			// UI スレッド処理
			@Override
			protected void onPostExecute(String s) {
				super.onPostExecute(s);

				listener.onAsyncTaskListener(s);

			}
		}.execute();

	}

}


private 変数を三つ作成
private ListView listView;
private ArrayAdapter<WebData> arrayAdapter;
private HttpAccess httpAccess;


ListView と ArrayAdapter のインスタンスを作成

以降 onCreate にて。
listView = (ListView) MainActivity.this.findViewById(R.id.listView);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
	public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

		// クリックされたアイテムを取得
		WebData mydata = (WebData) parent.getItemAtPosition(position);
		// LogCatに表示
		Log.i("lightbox", mydata.name);
		Log.i("lightbox", mydata.link);

		// URL を開く
		Uri uri = Uri.parse(mydata.link);
		Intent intent = new Intent(Intent.ACTION_VIEW, uri);
		if (intent.resolveActivity(MainActivity.this.getPackageManager()) != null) {
			MainActivity.this.startActivity(intent);
			return;
		}

	}
});
arrayAdapter = new ArrayAdapter<WebData>(MainActivity.this,android.R.layout.simple_list_item_1);


ListView に ArrayAdapter をセット

listView.setAdapter(arrayAdapter);

API を呼び出して結果をリストビューにセット
最新の Android では、https 通信以外では設定が必要なので、Firebase にJSON を登録してテストしました

( http://weather.livedoor.com/forecast/webservice/json/v1?city=270000 )
new HttpAccess("https://your-project-xxxxx.firebaseio.com/weather.json")
	.sendGet(new HttpAccess.OnAsyncTaskListener() {
		@Override
		public void onAsyncTaskListener(String s) {

			Gson gson = new Gson();
			Weather weather = gson.fromJson(s, Weather.class);

			arrayAdapter.clear();
			arrayAdapter.addAll(weather.pinpointLocations);

		}
	});


さらに Intent で第二画面

Android Studio : LiveDoor のお天気情報をリストビューに表示した後、第二画面で name を変更して第一画面で再表示する手順



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