SQLの窓

2017年11月17日


WebView で JavaScript にデータを渡したい時に注意する事

いろいろ注意事項はありますが、Android の技術情報は年月で変化して行くので、まずそのへんをしっかり押さえておく必要があります。

年月で変化

1) WebView の JavaScript のアクセスに loadUrl を使ってはいけない
( 厳密に言うと使ってはいけないわけでは無いと思いますが、ブックマークレットのような使い方は後々の為に避けたほうがいいし、evaluateJavascript なら非同期で戻り値を得られるわけですから使う意味もありません。戻り値がいらないなら callback を null にすればいいですし )

Android公式ドキュメント Migrating to WebView in Android 4.4 の翻訳ページ
代わりに、新しいメソッドとして evaluateJavascript を JavaScript を非同期で実行させるために使用してください。
(Android 4.4 : API level 19 : KitKat で追加)
実際、JavaScript の結果を "文字列" としてイベントで取得できるので、使いやすいです。但し、帰って来た文字列が "(ダブルクォート) で挟まれているので Android 側で取り去る必要があります。 2) WebViewClient の shouldOverrideUrlLoading(WebView view, String url) が非推奨になった (Android 7.0 : API level 24 : Nougat から) 代わりに、shouldOverrideUrlLoading(WebView view, WebResourceRequest request) を使用します (Android 7.0 : API level 24 : Nougat で追加) 一般 WEB では使えない これらが目新しい変化ですが、そもそも WebView では一般の WEB ページを表示させる事を想定していないようで、無闇に使用すると良く解らないトラブルが発生します。 1) opener が使用できない いろいろ調べましたが、良く解りません。どうやら、WebChromeClient を使って自分で代替処理を作る必要があるようです。( 参考 : WebChromeClientで使える関数のまとめ / onCreateWindow ) 2) localStorage を使っているページに注意 setDomStorageEnabled(true) を実行せずに、そのページで localStorage が処理されると、JavaScript 側のメモリがぶっ壊れて、変数がおかしくなりました。 これは、動作しないとかでは無くぶっ壊れるのでバグの部類です。という事は、他のオプションでも何があるか解らないので一般の WEB ページのように自分ではコントロールできないものを表示すべきでは無いと言う事です。ちなにみに、Android の Chrome では正常に動作しています。ただ、キャッシュの操作や履歴の操作等、いずれにしても問題は多くあります。 JavaScript から Android の UI データを取得に注意 JavaScript から Android とのやり取りは、@JavascriptInterface で定義される public なメソッドですが、JavaScript から 呼び出されたそれらのメソッドは、UI スレッドでは無いところが重要です。 特に問題の無い一方通行 JavaScript => Android JavaScript からデータを JSON 文字列で渡せば、たいていの情報を簡単に渡す事ができ、受け取った Android のメソッドでは Google Gson でデシリアライズすれば、runOnUiThread でそのまま画面に対して有効利用できるはすです。 非同期の為、Android で 画面データを return できない しかし、JavaScript の呼び出しで Android が値を返す場合は、UI スレッドへのアクセスが終わる前に戻り地を返す必要が出てきます。結局一度では無理があるので、通常の Android のように リクエストコードを使用して呼び出してもらい、画面データを用意してから Android から JavaScript のメソッドを呼び出すだけにします。 そして、その Android から呼び出された JavaScript 側のメソッド内から、再度 JavascriptInterface を持ったメソッドを呼び出すようにするのがいいでしょう。 実行画面 JAVASCRIPT からデータを取得 (Android 側 : 行28〜行56) JAVASCRIPT からデータを取得ボタンをクリックした結果です。取得するのは、一番下にある文字列で、WebView 内の テキストフィールドです。これは最も単純で、evaluateJavascript を使用して jQuery の文字列を直接渡してフィールドの結果を取得し、イベントで Android 内に戻って来ます。この文字列は ダブルクォート で挟まれているので、元の表示とダブルクォートを取り去った表示を同時に行っています。 JAVASCRIPT へデータを送る 単純に考えてしまうと、JavaScript の引数に文字列を指定すればいいですが、とても煩雑で問題が出そうです。ですから、データを用意した後、いったん『getAndroidUIData』を "request-02" のリクエストで呼び出して、『getAndroidUIData』 内から Android を呼び出す(getRequestData) 事によって、必要な文字列を JavaScript のメソッドの戻り値で取得するようにしています。 Android 側
public class MainActivity extends AppCompatActivity {

	private WebView webview;
	private JsonDataList jsonDataList = null;
	private Gson gson;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		gson = new Gson();
		jsonDataList = gson.fromJson("{\"item\": [\n" +
				"        {" +
				"            \"text\": \"\"," +
				"            \"subject\": \"\"," +
				"            \"name\": \"\"," +
				"            \"datetime\": \"\"" +
				"        }]}",JsonDataList.class);

		// *****************************
		// JavaScript からデータを取得
		// *****************************
		MainActivity.this.findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {

				EditText et;
				et = (EditText) MainActivity.this.findViewById(R.id.editSubject);
				jsonDataList.item[0].subject = et.getText().toString();
				et = (EditText) MainActivity.this.findViewById(R.id.editText);
				jsonDataList.item[0].text = et.getText().toString();

				// jQuery でそのまま実行
				String script = "$('#android_data').val();";

				webview.evaluateJavascript(script, new ValueCallback<String>() {
					@Override
					public void onReceiveValue(String s) {

						EditText et;

						// そのまま表示
						et = (EditText) MainActivity.this.findViewById(R.id.editSubject);
						et.setText(s);

						// ダブルクォート削除
						et = (EditText) MainActivity.this.findViewById(R.id.editText);
						if (s != null ) {
							String wk = s;
							wk = wk.substring(1, wk.length() - 1);
							et.setText(wk);
						}

					}
				});

			}
		});

		// *****************************
		// JavaScript へデータを送る
		// *****************************
		MainActivity.this.findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {

				EditText et;
				et = (EditText) MainActivity.this.findViewById(R.id.editSubject);
				jsonDataList.item[0].subject = et.getText().toString();
				et = (EditText) MainActivity.this.findViewById(R.id.editText);
				jsonDataList.item[0].text = et.getText().toString();

				String script = "getAndroidUIData(\"request-02\");";

				Log.i("lightbox", script);

				webview.evaluateJavascript(script,null);

			}
		});

		webview = (WebView) MainActivity.this.findViewById(R.id.webView);
		webview.getSettings().setDomStorageEnabled(true);
		webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
		// 必ず必要な JavaScript を有効にする設定
		webview.getSettings().setJavaScriptEnabled(true);

		JavaScriptAccess jsa = new JavaScriptAccess();
		// **********************************
		// 第二引数の文字列が、WebView の中のページの
		// JavaScript より使用可能になります
		// **********************************
		webview.addJavascriptInterface(jsa,"myAndroidObject");
		// 必ず必要な設定
		webview.setWebViewClient(new WebViewClient(){

			// 必ず必要な設定 : 常に WebView 内でページを表示する為
			@Override
			public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
				return false;
			}

		});

		// 目的のページを表示する
		webview.loadUrl("https://lightbox.sakura.ne.jp/homepage/demo/data/csvtype/android.html");

	}

	// **********************************
	// JavaScript 用クラス
	// **********************************
	private class JavaScriptAccess {

		@JavascriptInterface
		public void log(String message) {

			Log.i("lightbox",message);

		}

		@JavascriptInterface
		public void clear() {

			webview.clearHistory();
			webview.clearCache(true);

		}

		// **************************************
		// JavaScript から Android へデータを送る
		// **************************************
		@JavascriptInterface
		public void setAndroid(String json) {

			Log.i("lightbox","setAndroid");

			jsonDataList = gson.fromJson(json,JsonDataList.class);

			runOnUiThread(new Runnable() {
				@Override
				public void run() {

					EditText et;
					et = (EditText) MainActivity.this.findViewById(R.id.editSubject);
					et.setText(jsonDataList.item[0].subject);
					et = (EditText) MainActivity.this.findViewById(R.id.editText);
					et.setText(jsonDataList.item[0].text);

				}
			});

		}

		// **************************************
		//  Android 内の データを JavaScript へ戻す
		// **************************************
		@JavascriptInterface
		public String getAndroid() {

			Log.i("lightbox","getAndroid");

			String result = gson.toJson(jsonDataList.item[0],JsonData.class);

			return result;
		}

		// **************************************
		//  UI データを JavaScript へ戻す
		// **************************************
		@JavascriptInterface
		public String getRequestData(String requestCode) {

			Log.i("lightbox","getRequestData");

			String result = "";

			if ( requestCode.equals("request-01")  ) {

				result = gson.toJson(jsonDataList.item[0],JsonData.class);

			}
			if ( requestCode.equals("request-02")  ) {

				result = gson.toJson(jsonDataList.item[0],JsonData.class);

			}

			return result;

		}

		// **************************************
		// JavaScript から UI データのリクエスト
		// **************************************
		@JavascriptInterface
		public void requestAndroid(String requestCode) {

			Log.i("lightbox","requestAndroid");

			if ( requestCode.equals("request-01")  ) {
				runOnUiThread(new Runnable() {
					@Override
					public void run() {

						EditText et;
						et = (EditText) MainActivity.this.findViewById(R.id.editSubject);
						jsonDataList.item[0].subject = et.getText().toString();
						et = (EditText) MainActivity.this.findViewById(R.id.editText);
						jsonDataList.item[0].text = et.getText().toString();

						String script = "getAndroidUIData(\"request-01\");";

						Log.i("lightbox",script);

						// JavaScript からの戻りを必要としない
						webview.evaluateJavascript(script, null);

					}
				});

			}

		}

	}

	private class JsonData  {

		String text;
		String subject;
		String name;
		String datetime;

	}

	private class JsonDataList {
		JsonData[] item;
	}
}


JavaScript 側
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
	font-size:18px;
}
div {
	white-space: pre-wrap;
	word-wrap: break-word;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// **************************************
// Android から呼ばれる場合
// console.log は Android 側で表示
// **************************************
if ( typeof myAndroidObject !== 'undefined' ) {
	window.console.log = function(message){
		myAndroidObject.log(message);
	}
}

// **************************************
// Android から呼ばれる関数
// **************************************
function getAndroidUIData( requestCode ) {

	console.log("JavaScript:getAndroidUIData:" + requestCode)

	var result;

	if ( requestCode == "request-01" ) {

		result = myAndroidObject.getRequestData( requestCode )

		console.log("JavaScript:getAndroidUIData:result:" + result);

		var json = JSON.parse(result);
		
		$("#android_data").val( json.subject );


	}

	if ( requestCode == "request-02" ) {

		result = myAndroidObject.getRequestData( requestCode )

		console.log("JavaScript:getAndroidUIData:result:" + result);

		$("#json").text( result );


	}

	return requestCode;

}

$( function(){

	// **************************************
	// Android へデータを送る
	// **************************************
	$("#set_android").on("click",function(){

		$.get("json.php",function( data ){
			if ( typeof myAndroidObject !== 'undefined' ) {
				// サーバから受け取った application/json データ
				// を文字列に変換して Android に渡します
				myAndroidObject.setAndroid(JSON.stringify(data));
			}
			else {
				// 通常のブラウザではこちらが実行されます
				console.log(JSON.stringify(data,null,"   "));
			}
		})

	});

	// **************************************
	// Android から画面データを取得する
	// **************************************
	$("#get_android").on("click",function(){

		if ( typeof myAndroidObject !== 'undefined' ) {
			// サーバから受け取った application/json データ
			// を文字列に変換して Android に渡します
			myAndroidObject.requestAndroid("request-01");
		}
		else {
			// 通常のブラウザではこちらが実行されます
			console.log("なにも実行しません");
		}
		

	});


} );
</script>
</head>
<body>
<input type="button" id="set_android" value="Android へデータを送る">
<br>
<input type="button" id="get_android" value="Android から画面データを取得する">
<br>
<input type="text" id="android_data">
<br>
<div id="json">
</div>
</body>
</html>



画面定義
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.lightbox.webviewjavascript.MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/scrollView">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="JavaScript からデータを取得"
                android:id="@+id/button"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="JavaScript へデータを送る"
                android:id="@+id/button2"/>

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/editSubject"/>

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/editText"/>

            <WebView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/webView"/>
        </LinearLayout>
    </ScrollView>

</LinearLayout>


関連する記事

Android で WebView を使ってWEBにあるデータベースのデータを取得する為のクラス

JavaScript から Android へアクセス

Android : WebView 経由のデータベースアプリケーション






【2 Android Studioの最新記事】
posted by lightbox at 2017-11-17 15:58 | Comment(0) | 2 Android Studio | このブログの読者になる | 更新情報をチェックする

2017年11月13日


HTML 上のデータをローカルに保存する jQuery プラグイン

FileSaver.js が必要です。

保存タイプ

1) text 
    要素の内部テキストを取得( value または innerText )
    ※ nobom プロパティを true にすると UTF8N で保存されます
    ( nobom のデフォルトは false )

2) html
    要素の outerHTML を取得

3) table
    テーブル要素を csv データとして取得
    ※ nobom プロパティを false にして UTF8 で保存する事によって、Excel で読み込めます
    ( nobom のデフォルトは false )

4) image (URL で指定された画像の場合)
    そのままそのサーバーからダウンロード
    IE が、A 要素の download 属性をサポートしていないので IE は 不可
    ( ie プロパティでその際のエラーメッセージ指定できます )

5) image (base64 で指定された画像の場合)
    base64 をバイナリに変換して保存


所属コード所属名称作成日更新日
0001営業部第一2004/05/052004/05/05
0002営業部第二2004/05/052004/05/05
0003営業部第三2004/05/052004/05/05
1001総務部2008/04/022008/04/02

デモ用のコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.js"></script>
<script src="https://lightbox.sakura.ne.jp/demo/template/lightbox-env/saver.js"></script>
<script>
$(function(){

	$("#btn_text")
		.on( "click", function(){
			$("#textarea").save( {
				type : "text",
				name : "mydata.txt",
				nobom : true
			} );
		});

	$("#btn_tbl")
		.on( "click", function(){
			$("#tbl").save( {
				type : "table",
				name : "mydata.csv",
				nobom : false
			} );
		});

	$("#btn_html")
		.on( "click", function(){
			$("body").save( {
				type : "html",
				name : "mydata.html",
				nobom : true

			} );
		});

	// IE は対象外
	$("#btn_img")
		.on( "click", function(){
			$("#img").save( {
				type : "image",
				ie: "IE では画像を右クリックしてメニューから保存して下さい"			// IE 用メッセージ
			} );
		});

	// IE も OK
	$("#btn_base64")
		.on( "click", function(){
			$("#base64").save( {
				type : "image"
			} );
		});

	$("#btn_img,#btn_text,#img,#textarea,#base64,#btn_base64")
		.css({ "display": "inline-block", "vertical-align": "top" });

	$("#tbl")
		.css({ "margin-top": "15px" });


});


</script>
<div>
<input id="btn_text" type="button" value="textarea(テキスト)">
<input id="btn_tbl" type="button" value="テーブル(CSV)">
<input id="btn_html" type="button" value="BODY(HTML)">
<input id="btn_img" type="button" value="画像(URL)">
</div>
<div style='margin-top:10px'>
<input id="btn_base64" type="button" value="画像(base64)">
<img id="base64"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAASdSURBVEhLlVZ/TNRlGP/ccSRwcMkEhLWgVAItwDxysaWLVmKj8aN/GvRjiYFzyq9qE2uJILUkJhtji2BOc9ay1ejXGIOkBsEKuqSrtSRS2ik/5owxjsjweHre5/3CHcpN+YwP73PP+3nf5/3xvM8daCX4oYPo5aeIvvnUcNwebh1kdoboWBnRAyxNYNqZicyNzHf2cb/bEPoHK/2g50ui/CSiWJaoAEnMzaCT60060IPMZKbqf26z3qUfsMIHnut61WpCtepUZhrzIebJN+jj480EgBr3FxC9lqmDPWLWuvuYW5jNh4zJvOBlcaQFVOQCn38GRLI9H4Devz34MTgav2x/FiOXLsPZ14Mro5dhi1yLjWnbcNe1SWxynsVWmwlPhptgCZwHxtQ8h4HdlTKlQEIZmLkHVBYNWh0AWfFKucoEKo0CudXOfOD91Npw06Ds7Gyqra2ljo4OcrlchlBjfHycuru7qb6+XnQWi2XJWPq9z1D6HtcTVpi//kcUJSUlKC8vx9zcHOLj46VboaurC4GBgTCZTDCbzeCJ5bPVasXIyAgyMjJgZt2BNcBb+elAQ5ceKKGGBoniQb33e1fiS6fTSbGxscv23chT9khOBp42zntI2irdSZTCJqfkhUujiwNyc3OlTU5OJofDQTk5OZSXlye+sLAwSk9PFzslJYUSEhLE7u3p0e+IF0wnamR6HYQvXILU7CLHBZeIMzM5RRnKVrvwhfIlJSXR4OCg2E1NTVRVVSW2468xold4rHpDD3N6Kz2dadBR1zEnx+ls93ciLiws1AK24+LixB4eHqbi4mLx2Ww22rFjh9ipqakUEREh9sTkFJFrSI6fNjCHznEQ9ar5JdNOPksGX66ICwr4wTGUnZiYSKOj3mP0x6ioKBkj2MRzqtN5/Rky4+m9wBxL/rjC/xgBFt36ICQkBHV1dWKXlpZKyytHf38/2tvb0dbWhoGBAUxMTEgf+toAD7f/MbdlcXgFdSeqlLxbQV2On2VVvjux2+3EaS22SgDVxsTESP+yeGGLrm2q1DBUWgNZGZAEb34bXBvE5QvWge9A7KCgIGnHxlT9WAae68C3P+mdPL9LXDrI3jcBN7cm5nuHxOULFSQ4OFjs6elpcOaJXV1dLe0SNB4A7uR2irm/Vlw6SKIdiOYd8J+l8xNxzc9zsTOgXvbMzIzYHo8Hra2tYldWVqKlpUXsRbQc4wHcpm4AVkeISwdR2FMD/Au4SG0HCF2jBQput1suVoEfnZQSrmfyuaioSErP985fgYGvxIdZ5r6j2laQmzEwtd6bjsMfNYtv7br4Rd8Ncvrz4kXCKuuS/oMxoFm/VZixIMwPZ7d6sY+G0GDFi4v+Ex98aCh90Pk+NfHEAYZmgb5Y8qX1asVBhF1zo7K/EbjKjhDmHcARF9+FNRSHf+OMsoTypXJnfRlw+jSnG2usTH4T5yfZvTUHofcmoO4oZ+oCJNRy6DxD9Hi4LjcLX8PKfsymW/WuFFW1zbqbqO2UMfBmsOIWOH+OaM92/YNBTapKhaqy6jdAzW6iq+OG0D9YuQIcP0L0UhpR9xeG43ZA9D+D0zyeXYGzAwAAAABJRU5ErkJggg==">
<img id="img" src="http://toolbox.winofsql.jp/image/jquery.png">
<textarea id="textarea">あいうえお</textarea>
</div>

<table id="tbl">
<tbody><tr><th>所属コード</th><th>所属名称</th><th>作成日</th><th>更新日</th></tr>
<tr><td>0001</td><td>営業部第一</td><td>2004/05/05</td><td>2004/05/05</td></tr>
<tr><td>0002</td><td>営業部第二</td><td>2004/05/05</td><td>2004/05/05</td></tr>
<tr><td>0003</td><td>営業部第三</td><td>2004/05/05</td><td>2004/05/05</td></tr>
<tr><td>1001</td><td>総務部</td><td>2008/04/02</td><td>2008/04/02</td></tr>
</tbody></table>


saver.js

$.fn.extend({

	save : function(option){

		option = option || {};
		var type = option.type || "text";
		var mime = option.mime || "text/plain";
		var name = option.name || "save.txt";

		var charset = "utf-8";
		var nobom = option.nobom || false;

		if( type == "text" ) {
			var text = $(this).val();
			if ( text == "" ) {
				text = $(this).text();
			}
			saveAs(
				new Blob(
					[text]
					, {type: mime + ";charset=" + charset}
				)
				, name, nobom
			);

		}

		if( type == "html" ) {
			var text = $(this).prop("outerHTML");
			saveAs(
				new Blob(
					[text]
					, {type: mime + ";charset=" + charset}
				)
				, name, nobom
			);
		}

		if( type == "table" ) {
			var csv = "";
			var cnt = 0;
			$(this).find("tr").each( function(){

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

			} );
			saveAs(
				new Blob(
					[csv]
					, {type: mime + ";charset=" + charset}
				)
				, name, nobom
			);
		}

		if( type == "image" ) {
			var src = $(this).prop("src");
			// base64 bin
			if ( src.substr(0,5) == "data:" ) {
				var bin = atob(src.split(',')[1]);
				var head = src.split(',')[0];
				var type = head.split(/[:;]/)[1];
				var buffer = new Uint8Array(bin.length);
				for (var i = 0; i < bin.length; i++) {
					buffer[i] = bin.charCodeAt(i);
				}
				var blob = new Blob([buffer.buffer], {type: type});
				if ( type == "image/jpeg" ) {
					name = "save" + (new Date()).getTime()+".jpg";
				}
				if ( type == "image/gif" ) {
					name = "save" + (new Date()).getTime()+".gif";
				}
				if ( type == "image/png" ) {
					name = "save" + (new Date()).getTime()+".png";
				}
				saveAs( blob, name );
			}
			// url
			else {
				var userAgent = window.navigator.userAgent.toLowerCase();
				// OLD IE
				if (userAgent.indexOf("msie") > -1) {
					if ( typeof option.ie !==  'undefined' ) {
						alert(option.ie);
					}
					else {
						alert("unsupported!");
					}
					return;
				}
				// IE11
				else if (userAgent.indexOf("trident/7.0") > -1) {
					if ( typeof option.ie !==  'undefined' ) {
						alert(option.ie);
					}
					else {
						alert("unsupported!");
					}
					return;
				}
				else {
					var work = src.split("/");
					var name = work[work.length-1];
					var download = $("<a></a>").css("display","none").appendTo("body");
					download.prop({"href" : src, "download": name });
					download.get(0).click();
					download.remove();
				}
			}

		}

		return $(this);

	}
});





posted by lightbox at 2017-11-13 11:13 | Comment(0) | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2017年11月06日


jQuery のプラグインで動的なコントロールの処理を作成 : add_button / set_event / set_link

add_button : 対象の直後にボタンを追加
set_event : 対象にイベントを登録
set_link : 対象のテキストをリンクに変更

set_link における p1 と p2 のオプションは、URL 内に %1 と %2 という文字列を含ませて、それぞれ p1 と p2 で置換するオプションです。Query String  として WEB アプリケーションのパラメータとして利用する事を想定していますが、URL エンコードは自分で行う必要があります

プラグインのソースコード

$.fn.extend({

	add_button : function(option){

		var input = $("<input type='button'>")
			.val( option.val )
			.insertAfter($(this))
			.on("click", option.click )
		;

		if ( typeof option.id !==  'undefined' ) {
			input.prop("id", option.id);
		}
		if ( typeof option.class !==  'undefined' ) {
			input.addClass(option.class);
		}
		if ( typeof option.css !==  'undefined' ) {
			input.css( option.css );
		}
		return $(this);

	},

	set_event : function(option){

		$(this).on(option.event, option.action );

		if ( typeof option.id !==  'undefined' ) {
			$(this).prop("id", option.id);
		}
		if ( typeof option.class !==  'undefined' ) {
			$(this).addClass(option.class);
		}
		if ( typeof option.css !==  'undefined' ) {
			$(this).css( option.css );
		}
		return $(this);

	},

	set_link : function(option){

		if ( typeof option.target ===  'undefined' ) {
			option.target = "_blank";
		}

		var text = $(this).text();
		$(this).html("");

		if ( typeof option.p1 !==  'undefined' ) {
			option.url = option.url.replace("%1", option.p1 );
		}
		if ( typeof option.p2 !==  'undefined' ) {
			option.url = option.url.replace("%2", option.p2 );
		}

		var a = $("<a>")
			.prop("href", option.url)
			.prop("target", option.target)
			.text( text );
		;

		if ( typeof option.class !==  'undefined' ) {
			a.addClass(option.class);
		}

		if ( typeof option.css !==  'undefined' ) {
			a.css( option.css );
		}

		$(this).append(a);
		return $(this);

	}
});


add_button のサンプルコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://lightbox.sakura.ne.jp/demo/template/lightbox-env/helper.js"></script>
<script>

$(function(){

	// ボタン追加
	$("#target").add_button({
		"id" : "new_button",
		"val" : "追加されたボタン",
		"class" : "btn btn-primary ml-5",
		"css" : { "background-color" : "navy", "color" : "white"  },
		"click" : function(){
			alert("クリックされました");
		}
	});
	

});

</script>

<span id="target">テキスト表示</span>

add_button で作成された HTML
<input type="button" value="追加されたボタン" id="new_button" class="btn btn-primary ml-5" style="background-color: navy; color: white;">

set_event のサンプルコード

このサンプルは、テーブルの表示を JSON から作成している処理の一部です。obj["所属"] には4桁の数字文字列が入っています。
		col_data = $("<td></td>").appendTo( row_data );
		col_data.text( obj["所属"] );
		col_data.set_event({
			"css" : { "text-decoration": "underline", "cursor": "pointer" },
			"event" : "click",
			"action" : function(){
				window.open("../syozoku-upd/syozoku.php?code=" + obj["所属"] );
			}
		});



set_link のサンプルコード

このサンプルも、テーブルの表示を JSON から作成している処理の一部です。
		col_data = $("<td></td>").appendTo( row_data );
		col_data.text( obj["社員コード"] );
		col_data.set_link({
			"url" : "../syain-upd/syain.php?code=%1",
			"p1" : obj["社員コード"]
		});




posted by lightbox at 2017-11-06 11:18 | Comment(0) | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

Visual Studio 2012 : 表示メニューから、ツールボックス等のコマンドが消えてしまった場合の個別登録

原因は解りませんが、きっとどこかに Visual Studio のデフォルト状態のメニューの定義があると思うのですが、見つける事ができていません。(コマンドの追加に『リセット』とかあるので)

良く使うウインドウ表示コマンドを、自分で登録してみます。

▼ メニューをカスタマイズするコマンドの場所

(これが消えていたら、どうしていいかは現在未調査)

▼ 表示する位置の決定


この Visual Studio は正常なので、『出力』も『ツールボックス』もあります。無い場合はこのあたりを選択してコマンドの追加ボタンをクリックします。

▼ コマンドの選択


ウインドウの表示コマンドは、『表示』の中にあると思います。画像のスクロールバー位置を参考に探して下さい。



posted by lightbox at 2017-11-06 10:47 | Comment(0) | VS(C#) | このブログの読者になる | 更新情報をチェックする

2017年10月29日


TD 内のテキストを入力可能にする tableinput.js / jQuery プラグイン

テーブルの TD 要素の中がテキストのみの場合、tableinput.js プラグインで入力可能になります

オプションを省略したり、rowstart を省略すると、先頭の行を対象外にします。( rowstart の デフォルトは 1 )

tableinputEach によってテーブルの一覧を td のコレクション(jQuery のオブジェクト)単位で取得します

td.data("change") で、データが変更されたかどうかを取得できます
td.data("text") で最初のデータを取得できます

▼ 画像


▼ デモ実行
コード 氏名 フリガナ
0001 浦岡 友也 ウラオカ トモヤ
0002 山村 ひろよ ヤマムラ ヒロヨ
0003 多岡 冬行 タオカ フユユキ
0004 高田 冬美 タカタ フユミ
0005 内高 友之 ウチタカ トモユキ

上のデモのコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://lightbox.sakura.ne.jp/demo/template/lightbox-env/tableinput.js" charset="utf-8"></script>
<style>
.inputtd {
	text-decoration: underline;
	cursor: crosshair;
	background-color: pink;
}
.tableinput {
	font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
	font-size: 16px;
}

#target_table {
	border-collapse: collapse;
	border: solid #c0c0c0 1px;
	background-color: #FFFFFF;
}
#target_table  th {
	padding: 10px;
	border: solid #808080 1px;
	background-color: silver;
}
#target_table td {
	padding: 10px;
	border: solid #c0c0c0 1px;
}
</style>
<input type="button" id="tableinput_action" value="実装">
<input type="button" id="tableinput_check" value="変更の確認" disabled>
<table id="target_table">
<tbody>
	<tr>
		<th>コード</th>
		<th style='width:200px'>氏名</th>
		<th style='width:200px'>フリガナ</th>
	</tr>
	<tr>
		<td>0001</td>
		<td>浦岡 友也</td>
		<td>ウラオカ トモヤ</td>
	</tr>
	<tr>
		<td>0002</td>
		<td>山村 ひろよ</td>
		<td>ヤマムラ ヒロヨ</td>
	</tr>
	<tr>
		<td>0003</td>
		<td>多岡 冬行</td>
		<td>タオカ フユユキ</td>
	</tr>
	<tr>
		<td>0004</td>
		<td>高田 冬美</td>
		<td>タカタ フユミ</td>
	</tr>
	<tr>
		<td>0005</td>
		<td>内高 友之</td>
		<td>ウチタカ トモユキ</td>
	</tr>
</tbody>
</table>
<div id="result"></div>
<script>
$("#tableinput_action").on("click", function(){
	$("#target_table")
		.tableinput({ "inputwidth": "180px", "maxlength": 50, "col": 1, "class": "inputtd", "inputclass": "tableinput" })
		.tableinput({ "inputwidth": "180px", "maxlength": 50, "col": 2, "class": "inputtd", "inputclass": "tableinput" })
	;

	$(this).prop("disabled", true );
	$("#tableinput_check").prop("disabled", false );
});

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

	var text = "";
	$("#target_table").tableinputEach(function(i,row){

		// 1行目を処理しない
		if ( i == 0 ) {
			return;
		}

		// row は、td のコレクション
		var td1 = row.eq(1);
		var td2 = row.eq(2);

		// データが変更されていた場合
		if ( td1.data("change") || td2.data("change") ) {

			text +=  i + " : " + td1.text() + " : " + td2.text();
			text +=  " / 元データ : " + td1.data("text") + " : " + td2.data("text") + "<br>";

		}

	});

	$("#result").html(text);

});
</script>

tableinput.js のコード

$.fn.extend({
	tableinput : function(option){

		option = option || { "rowstart":1, "col": 0 };
		if ( typeof option.rowstart ===  'undefined' ) {
			option.rowstart = 1;
		}
		if ( typeof option.col ===  'undefined' ) {
			option.col = 0;
		}

		this.data("tableinput_option_" + option.col, option);

		this.find("tr").each(function(i){

			if ( i < option.rowstart ) {
				return;
			}

			var td = $(this).find("td").eq(option.col);
			if ( typeof option.class !==  'undefined' ) {
				td.addClass( option.class );
			}

			var text = td.text();
			td.data("text", text );

			td.on("click", function(){
				if ( $(this).data("input") != "use" ) {
					// 入力切替えフラグ
					$(this).data("input", "use" );
					// 入力内容
					var text_now = $(this).text();
					// TD の表示を消去
					$(this).text("");
					// 入力を追加
					var input = $("<input>")
							.appendTo($(this)) // TD に追加
							.val(text_now) // テキストセット
							.focus() // フォーカスセット
							// focusout で元に戻す
							.on( "focusout", function(){
								// 現在の入力
								var text = $(this).val();
								// 親 TD
								var td = $(this).parent();
								// データが変更されていたら『変更フラグ』をセット
								if ( text != td.data("text") ) {
									td.data("change", "yes");
								}
								else {
									td.data("change", "");
								}
								// TD に値を戻して 切替えフラグを消去
								td
									.append(text)
									.data("input", "" );
								// INPUT を削除
								$(this).remove();
							});
					if ( typeof option.inputwidth !==  'undefined' ) {
						input.css("width", option.inputwidth );
					}
					if ( typeof option.maxlength !==  'undefined' ) {
						input.prop("maxlength", option.maxlength );
					}
					if ( typeof option.inputclass !==  'undefined' ) {
						input.addClass( option.inputclass );
					}

				}
			});
		});
		// 自分自身を返す
		return this;
	},
	tableinputEach : function(func){

		this.find("tr").each(function(i){

			func(i,$(this).find("td"));

		});

	}
});



関連する記事

テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました





posted by lightbox at 2017-10-29 14:03 | Comment(0) | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり