SQLの窓

2016年07月30日


Google サイト内検索の FORM 要素による設置

このブログの PC バージョンのページナビの右上にある検索入力です。この方法を使えば、他の特殊なキーワード文字を使った Google 検索フィールドも設置可能です。

Google の検索は現在では、『https://www.google.co.jp/search』に QueryString を渡す事で容易に実現できます。これは、当然 FORM 要素で行う一般的な WEBアプリケーションの機能です。FORM に対して method を指定しないこの呼び出しは、GET コマンドとなるので、通常のリンクの呼び出しと同じになります。

accept-charset は、無くても shift_jis では正しく動作しますが、euc-jp では化けるようです。また、utf-8 にすると、Google での アドレスバーで日本語部分が日本語として表示されます

複雑な検索文字列に対応する為に、検索文字列の入力は name 属性の無い送信されないフィールドで行い、本来必要な文字列作成を onsubmit イベントの中で行って、仕様に必要な name="q" のフィールドにセットして送信します。(name="q" のフィールドは type="hidden" で非表示です)

キャラクタセット指定
<script>
function callSearch() {

	var query = document.getElementById("q").value;
	if ( query.trim() != "" ) {
		query = query + " site:logicalerror.seesaa.net";
		document.getElementById("q_submit").value = query;
		return true;
	}

	return false;
}
</script>
<form
	accept-charset="utf-8"
	action="https://www.google.co.jp/search"
	target="_blank"
	onsubmit="return callSearch()">
<input
	type="text"
	id="q"
	size="31"
	maxlength="255"> 
<input
	type="hidden"
	id="q_submit"
	name="q"> 
<input
	type="submit"
	value="検索"> 
</form>



posted by lightbox at 2016-07-30 17:19 | Comment(0) | Google | このブログの読者になる | 更新情報をチェックする

2016年07月29日


日本語入力で、変換ができなくなったら『辞書を修復』

プロパティから、『辞書/学習』タブ


で一発で元通りになりました。経験無かったのでびっくりしました。

今日は 7/29 日なので、Microsoft の嫌がらせかとも思いました。

すぐに Google で検索して見つかったのが以下です。
漢字変換の謎、教えてください

Yahoo! 知恵袋ですが、他の記事より、欲しい事が最初に書かれてあります。他のページはやたらと前振りが長すぎて良質とは言えませんでした。なので、こんな記事にしました。



posted by lightbox at 2016-07-29 22:50 | Comment(0) | Windows | このブログの読者になる | 更新情報をチェックする

2016年07月28日


Access から SQLServer 認証の ODBC DSN で接続しているのに、Windows 認証で勝手に接続しようとして失敗するトラブルの解決方法

おそらく、ドメイン内のユーザである為に、SQLServer のODBC の 仕様を無視して Windows 認証に変更してしまっているような現象です。複数の PC のうち発現したのは一つだけなので、なんとも言えませんが。

レジストリ エントリと SQL Server の接続文字列のキーワード

上記の Microsoft のドキュメントでは、『Trusted_Connection』が無い場合の仕様として、『既定値は SQL Server 認証です』とはっきり書かれていますが、問題の PC では、エラーメッセージの後以下のダイアログが出ます



『Windows 認証を使用する』にチェックが入っており、Access が SQLServer にアクセスする毎にエラーダイアログが出て、あとからこのダイアログが出ます。この経路でも、チェックを外せば接続できますが、余計な操作をイヤと言うほど行う必要があります。

対処方法

レジストリエディタで、Trusted_Connection=no のエントリを作成する。

このエントリを作成すると、問題は回避されました。場所は、ユーザ DSN の場合は、
HKEY_CURRENT_USER\Software\ODBC\ODBC.INI
の下にある DSN 名の中になります。






posted by lightbox at 2016-07-28 15:39 | Comment(0) | Microsoft Office | このブログの読者になる | 更新情報をチェックする

2016年07月26日


Android の 端末回転時の EditText と TextView の違い

そもそも、画面を回転させなければ良いと思うのですが、『回転』して、Activity が再作成されたにもかかわらず、EditText の内容が保持されるので、インターネットを探して、けっこうやっと見つけました。

[Android]画面回転時の挙動

結局、EditText 内で保存と復帰を行っているそうです(ソースを読まれたそうなので)。

この記事内では、『Parcelable』が良く解らないというくだりがありますが、こちらは Android 関係では良くお世話になる Y.A.M さんの記事にあります。

Android Parcelable を使ってクラスのメンバを一時保存

まあ、自分的には教える立場にあるので、できるだけ難解な通路は通りたく無いので Google Gson で 文字列で保存して、デシリアライズして復帰したいところです。
Android 関連の情報は、インターネットで正確な情報を引っこ抜くのはかなり難易度が高く、整理できても結局初心者に伝えるほうに無理があるという結論に良く達します。
さらに、回転しても Activity 破棄させない設定等もありますが、汎用的な一般向けアプリを作るプロでも無いのに必要とはとても思え無い内容です。結局全ての場合を検証した事を確認できるような記事は表には無いですし・・・ やはり、回転させないのが一番です。 そして、それを前提にして回転させた場合に消失する TextView の復帰方法としての onSaveInstanceState(Bundle) で保存し、 onRestoreInstanceState(Bundle) で読み出します。 を目で見てを確かめるのがいいと思います。 ちなみに、TabHost の中身を同じ画面で include したら、最後のタブの EditText の内容が全てのタブの EditText に復帰されました。 別々の画面だと、当然それぞれが正しく保存されます
posted by lightbox at 2016-07-26 21:53 | Comment(0) | 2 Android Studio | このブログの読者になる | 更新情報をチェックする

2016年07月25日


ViewPager 内のイベントで設定した TextView の値を保持する Fragment 処理



Fragment の中の onCreateView で表示する為に、ボタンをクリックした時に TextView にセットすると同時に Fragment の中に定義した static な変数にも保存しました。保存された値は、adapter から getItem で呼ばれた時に渡す新たなインスタンスを作成する時に、再度 putStringArray でセットし setArguments でフラグメントに保存されます。

このような処理をインターネットで探しても無かったので、こうしてみましたが一応は動いています。このベースは、Android Studio のテンプレートなので、getArguments().getInt(PAGE_POSTION) をいきなり使うのは問題無いと思います( テンプレートでそうなっていたので )。なので、その付加情報として配列を追加した形です。
MainActivity.java
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

	private SectionsPagerAdapter adapter;
	private ViewPager view_pager;

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

		adapter = new SectionsPagerAdapter(getSupportFragmentManager());

		view_pager = (ViewPager) findViewById(R.id.viewPager);
		view_pager.setOffscreenPageLimit(1);
		view_pager.setAdapter(adapter);

	}

	public class SectionsPagerAdapter extends FragmentPagerAdapter {

		public SectionsPagerAdapter(FragmentManager fm) {
			super(fm);
		}

		@Override
		public Fragment getItem(int position) {
			return PlaceholderFragment.newInstance(position);
		}

		@Override
		public int getCount() {
			return 4;
		}

		@Override
		public CharSequence getPageTitle(int position) {
			switch (position) {
				case 0:
					return "SECTION 1";
				case 1:
					return "SECTION 2";
				case 2:
					return "SECTION 3";
				case 3:
					return "SECTION 4";
			}
			return null;
		}
	}

	public static class PlaceholderFragment extends Fragment {

		private static final String PAGE_POSTION = "page_position";
		private static final String SAVE_VIEW_TEXT = "save_view_text";
		private static String text[] = new String[4];

		public PlaceholderFragment() {
		}

		public static PlaceholderFragment newInstance(int pagePosition) {

			PlaceholderFragment fragment = new PlaceholderFragment();
			Bundle args = new Bundle();
			args.putInt(PAGE_POSTION, pagePosition);
			args.putStringArray("save_view_text", text);
			fragment.setArguments(args);

			return fragment;
		}

		@Override
		public View onCreateView(LayoutInflater inflater, ViewGroup container,
								 Bundle savedInstanceState) {

			final View rootView = inflater.inflate(R.layout.fragment_main, container, false);
			if (getArguments().getStringArray(SAVE_VIEW_TEXT)[getArguments().getInt(PAGE_POSTION)] != null) {
				TextView textView = (TextView) rootView.findViewById(R.id.section_label);
				textView.setText(getArguments().getStringArray(SAVE_VIEW_TEXT)[getArguments().getInt(PAGE_POSTION)]);
			}

			Button btn = (Button) rootView.findViewById(R.id.button);
			btn.setOnClickListener(new View.OnClickListener() {
				@Override
				public void onClick(View v) {
					EditText et = (EditText) rootView.findViewById(R.id.editText);
					TextView textView = (TextView) rootView.findViewById(R.id.section_label);
					textView.setText(et.getText().toString());
					text[getArguments().getInt(PAGE_POSTION)] = et.getText().toString();
				}
			});

			return rootView;
		}
	}


}

setOffscreenPageLimit(1) を 3 にすれば、アクティビティが破棄されない場合は TextView の値を保持してくれます。ですが、メモリを無駄に使うと思うので、Fragment の setArguments で渡すほうがいいと思います。

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="lightbox.july.viewpagerapplication.MainActivity">

    <android.support.v4.view.ViewPager
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/viewPager"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true">
        <android.support.v4.view.PagerTitleStrip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/view"/>
    </android.support.v4.view.ViewPager>

</RelativeLayout>

PagerTitleStrip は、特別必要ではありませんが、ViewPager のタイトルをせっかく処理しているので使用しています。設置は、手作業で ViewPager の間に挟む必要がありました。カスタムビューなので、コンポーネントツリーではうまくいきませんでした。



fragment_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <TextView
        android:id="@+id/section_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        android:layout_marginBottom="10dp"/>

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button"
        android:layout_below="@+id/editText"
        android:layout_alignParentStart="true"/>

</RelativeLayout>






結局これを使えば、わりと簡単に横スクロールのページ処理ができますが、Android の テンプレートでは、FloatingActionButton が使用されていたので、それを使うとページ先頭とページ最後へのジャンプも簡単に実装できます。

※ FloatingActionButton は、com.android.support:design を追加する必要があります



Snackbar によるイベント処理
		FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
		fab.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View view) {
				Snackbar.make(view, "ページ移動", Snackbar.LENGTH_LONG)
					.setAction("先頭", new View.OnClickListener() {
						@Override
						public void onClick(View v) {
							mViewPager.setCurrentItem(0);
						}
					})
					.show();
			}
		});

		FloatingActionButton fab2 = (FloatingActionButton) findViewById(R.id.fab2);
		fab2.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View view) {
				Snackbar.make(view, "ページ移動", Snackbar.LENGTH_LONG)
					.setAction("最後", new View.OnClickListener() {
						@Override
						public void onClick(View v) {
							mViewPager.setCurrentItem(3);
						}
					})
					.show();
			}
		});




posted by lightbox at 2016-07-25 18:53 | Comment(0) | 2 Android Studio | このブログの読者になる | 更新情報をチェックする

2016年07月11日


ExpandableListView を使用して、タップした時に明細データ表示する

本来は、2階層構造のデータを扱います。例えば、最初に一覧として表示されるのが掲示板のスレッドだとすると、タップするとその下にそのスレッドに投稿されたタイトルの一覧が開く、と言うような用途です。

ただ、そのようなテストデータを作成するのは結構面倒なので、まずは単純に掲示板の一つのスレッドのタイトル一覧を表示して、タップするとさらに投稿者と日付と本文を表示するようにしました。



ExpandableListView にデータを表示するには、専用のアダプタか必要ですが、ここでは、abstract class BaseExpandableListAdapter を使用しています。ExpandableListView にこのアダプターを継承したクラスのインスタンスを引き渡すと、少なくとも、getGroupView と getChildView と getGroupCount と getChildrenCount を呼び出して正しく表示してくれます。

とても簡単に情報を多く効果的に読み取る事のできるリストビューを作成する事ができます。

Android Studio で BaseExpandableListAdapter を継承してクラスを作成すると、中が空の状態では赤い波線が表示されてエラーになります。しかし、この赤い波線をクリックすると現れる左側の赤いランプをクリックしてやると、以下のようになります。


ここで、implement methods を選択してやると、ダイアログで必要なメソッドが選択済みになるので、 OK すると展開されます。そして、最低限 getGroupView と getChildView と getGroupCount と getChildrenCount を実装して、必要ならば getGroup と getChild を実装して中で使用すると良いと思います。

MainActivity 部分
package lightbox.july.expandablelistviewsimpledata;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.TextView;

import com.google.gson.Gson;

import jp.android.work.Tools;

public class MainActivity extends AppCompatActivity {

	private JsonDataList json;
	private MyExpandableListAdapter adapter;
	private ExpandableListView elv;

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

		// 開くリストビューのインスタンス
		elv = (ExpandableListView) MainActivity.this.findViewById(R.id.expandableListView);

		// JSON データ(文字列)
		String data_url = "https://lightbox.sakura.ne.jp/homepage/demo/data/csvtype/json.php";
		Tools.callHttpGet(data_url, "utf-8", new Tools.OnAsyncTaskListener() {
			@Override
			public void onAsyncTaskListener(String s) {
				Gson gson = new Gson();
				// デシリアライズ
				json =  gson.fromJson(s, JsonDataList.class);
				adapter = new MyExpandableListAdapter(json);
				elv.setAdapter(adapter);

			}
		});

	}

	// 開くリストビュー用のアダプタ
	private class MyExpandableListAdapter extends BaseExpandableListAdapter{

		private JsonDataList json;

		public MyExpandableListAdapter(JsonDataList json) {
			this.json= json;
		}

		// ******************************
		// 親データの表示
		// ( 実際は データの subject )
		// ******************************
		@Override
		public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
			View rowView = convertView;
			if (rowView == null) {
				// 現在の View の取得
				LayoutInflater inflater = (LayoutInflater) MainActivity.this.getSystemService
					(Context.LAYOUT_INFLATER_SERVICE);
				rowView = inflater.inflate(R.layout.group_view, null);
			}

			// Adapter にセットされているこのポジションの MyData を取得
			JsonData data = (JsonData)adapter.getGroup(groupPosition);

			// group_view にデータをセット
			TextView tv = (TextView) rowView.findViewById(R.id.textView);
			tv.setText(data.subject);

			return rowView;
		}

		// ******************************
		// 子データの表示
		// ( 実際は データの 残りの項目 )
		// ******************************
		@Override
		public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
			View rowView = convertView;
			if (rowView == null) {
				// 現在の View の取得
				LayoutInflater inflater = (LayoutInflater) MainActivity.this.getSystemService
					(Context.LAYOUT_INFLATER_SERVICE);
				rowView = inflater.inflate(R.layout.child_view, null);
			}

			// Adapter にセットされているこのポジションの MyData を取得
			JsonData data = (JsonData)adapter.getGroup(groupPosition);

			// child_view にデータをセット
			TextView tv2 = (TextView) rowView.findViewById(R.id.textView2);
			tv2.setText(data.name);
			TextView tv3 = (TextView) rowView.findViewById(R.id.textView3);
			tv3.setText(data.datetime);
			TextView tv4 = (TextView) rowView.findViewById(R.id.textView4);
			tv4.setText(data.text);

			return rowView;
		}

		@Override
		public int getGroupCount() {
			return json.item.length;
		}

		@Override
		public int getChildrenCount(int groupPosition) {
			return 1;
		}

		@Override
		public Object getGroup(int groupPosition) {
			return json.item[groupPosition];
		}

		@Override
		public Object getChild(int groupPosition, int childPosition) {
			return null;
		}

		@Override
		public long getGroupId(int groupPosition) {
			return 0;
		}

		@Override
		public long getChildId(int groupPosition, int childPosition) {
			return 0;
		}

		@Override
		public boolean hasStableIds() {
			return false;
		}

		@Override
		public boolean isChildSelectable(int groupPosition, int childPosition) {
			return false;
		}
	}

	private class JsonData  {

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

	}

	private class JsonDataList {
		JsonData[] item;
	}

}


全てのソースコード


posted by lightbox at 2016-07-11 20:52 | Comment(0) | 2 Android Studio | このブログの読者になる | 更新情報をチェックする

2016年07月08日


HTML5 で行われる入力チェックを :invalid :valid 疑似クラスと JavaScript を使用してリアルタイムにエラーを視認させる

単純な、メッセージのカスタマイズは以下をご覧下さい
HTML5 で行われる入力チェックのエラーメッセージをカスタマイズする JavaScript の記述

ここでは、さらに CSS で :invalid と :valid 疑似クラスを使用する事によって、常に色を使ってエラーの状態をユーザに訴えます。

:valid で枠線を緑に指定

エラーが無ければ、この状態になります

:invalid で枠線を赤に指定

この指定によって、ここでは未入力チェックとして required を指定しているフィールドが最初から枠線が赤くなります。

required と pattern で色を変える

まず、CSS で、クラスに required と pattern で別の色を指定します。いずれも、枠線の太さを太くし(IE11 は元々そうなるので正しくコントロールできませんでした)、背景色を別々に設定します。

さらに、oninvalid(FORM 送信時のイベント) で、対応するクラスを追加してやると、required では、背景がピンクになり、pattern では背景がオレンジになります。

リアルタイムに色を変える

このままでは、送信時にしか色が変わらないので、onchange イベントを追加して、oninvalid と同じ内容を追加します。そうすると、入力した内容が変化する毎に色が変わる事になります。

※ いずれも、oninput で $(this).removeClass("required pattern"); が必要です。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
input:invalid {
	border: 1px solid red;
}
input.required:invalid {
	border: 2px solid red;
	background-color: pink;
}
input.pattern:invalid {
	border: 2px solid red;
	background-color: orange;
}

input:valid {
  border: 1px solid green;
}
</style>

<script>
$(function(){
	$("#mydata")
		.on("invalid", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
				$(this).addClass("required");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
				$(this).addClass("pattern");
			}
		})
		.on("change", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
				$(this).addClass("required");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
				$(this).addClass("pattern");
			}
		})
		.on("input",function(){
			$(this).removeClass("required pattern");
			this.blur();
			this.setCustomValidity("");
			this.focus();
		});
});
</script>

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe1"
	accept-charset="utf-8">
	<input
		type="text"
		id="mydata"
		name="mydata"
		required
		pattern="[0-9]+">
	<input type="submit" name="send" value="送信">
</form>
<iframe
	name="myframe1"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>



タグ:jquery HTML5
posted by lightbox at 2016-07-08 16:54 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

HTML5 で行われる入力チェックのエラーメッセージをカスタマイズする JavaScript の記述( この手のコントロールはとてもデリケートです。いろいろなパターン検証が必要です )

このサンプルでは、required 属性と pattern 属性でのエラー結果のメッセージをカスタマイズしています。また、JavaScript のイベント部分の登録には jQuery を使用しています。

validity の下には以下のようなプロパティがあり(Google Chrome 調べ)、個別に対応が可能なようです。
badInput
customError
patternMismatch
rangeOverflow
rangeUnderflow
stepMismatch
tooLong
tooShort
typeMismatch
valid
valueMissing
※ 実践しないと詳細は解りませんが、だいたいの意味は MDN で日本語で書かれています。
customError だけは特殊なプロパティのようで、invalid イベントの中で、setCustomValidity を実行して空文字以外を指定していると true になるようです。
しかも、実行順序とか関係無く、記述されていると invalid の中ではそうなっていました
▼ 何もカスタマイズしないで、デフォルトエラー発生後、コンソールで確認したものです。 required 属性の場合は、未入力だと valueMissing になり、pattern の対象外だと、patternMismatch になりました。詳細は未調査ですが、思ったような対応はおそらく可能だと思います。 ▼ 参考にした Stack Overflow HTML5 form required attribute. Set custom validation message? Stack Overflow でも書かれていますが、oninput での処理が重要となります。(そもそも、この手の validate 処理は、業務アプリでは重要になります。やっと、HTML でそれがサポートされるようにはなりましたが、結果的には JavaScript の力を借りる事は避けられないようです。)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function(){
	$("#mydata")
		.on("invalid", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
			}
		})
		.on("input",function(){
			this.blur();
			this.setCustomValidity("");
			this.focus();
		});
});
</script>

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe1"
	accept-charset="utf-8">
	<input
		type="text"
		id="mydata"
		name="mydata"
		required
		pattern="[0-9]+">
	<input type="submit" name="send" value="送信">
</form>
<iframe
	name="myframe1"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>
oninput で setCustomValidity("") でカスタムメッセージをクリアしているのは、例えば、required だけメッセージを変更していた場合、setCustomValidity("") でクリアしなければ、pattern のエラーになっているにもかかわらず 『必須入力です』 と表示されてしまいます。

そこで、setCustomValidity("") でクリアだけ実行すると、 『必須入力です』 というメッセージが表示されている状態のままで数字以外を入力すると、 『デフォルトのpattern のエラーメッセージ』 が表示されますい。これが、required のカスタマイズだけなら正しいのですが、pattern のメッセージもカスタマイズしている場合に新しいメッセージに切り替わりません。

そこで、いったんフォーカスを外して現在の表示をキャンセルして setCustomValidity("") でカスタムメッセージをクリアして、フォーカスを戻すという処理を行っています
textarea で pattern 属性は使用できません ( MDN のドキュメント ) 関連する記事 HTML5 で行われる入力チェックを :invalid :valid 疑似クラスと JavaScript を使用してリアルタイムにエラーを視認させる
タグ:jquery HTML5
posted by lightbox at 2016-07-08 13:39 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2016年07月02日


jQuery で NAVER の インセンティブレポートページの日付の行数をカウントする

昨今たいていの WEB ページには、jQuery が使用されている為、各ブラウザのデベロッパーツールで容易に【行の数】をカウントする事ができます。

以下では、Google Chrome を使用しています。

対象ページ開く

そのページの対象部分の HTML を読む必要があるので、まずは、F12 でデベロッパーツールを開きます。但し、ここで注意するべきは、WEB ページは複数のウインドウで成り立っている場合があるので、自分が知りたい表示部分に対して、デベロッパーツールを開く必要があります。その為には、F12 で開いた後、インスペクタで、対象部分をクリックしてからコンソールに移動します。



このサンプルでは、IFRAME 内が対象なので、選択の必要があります。しかし、たいていは、top で問題は無いと思います。

構造を確認して jQuery を実行

jQuery が無い場合は、コンソールコマンドの $$(セレクタ)を使う方法がありますが、複雑な検索する場合は、ブックマークレットで jQuery を埋め込むか、コンソールで jQuery で埋め込んでから実行したほうがいいでしょう。



$("table").eq(1).find("tbody tr").length
ちなみに、Seesaa ブログの カテゴリ数のカウントは、http://blog.seesaa.jp/cms/category/edit/list を開いて、$(".entrytable .wordlimit").length です。 それと、そのページに jQuery が無い場合、以下のコードをコンソールで実行すれば、jQuery が読み込めると思います
var _x = document.createElement("script");
_x.setAttribute("src","//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js");
document.body.appendChild(_x);




posted by lightbox at 2016-07-02 13:41 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2016年07月01日


キネクトでブラウザを動かす

必要なもの

1) キネクト
2) Visual Studio
3) Kinect for Windows SDK v1.7
4) Kinect PowerPoint Control

Kinect PowerPoint Control の概要

結局のところ、Kinect の基本的な機能のとても簡単なサンプルです( 音声認識部分もありますが、日本語がどうかわからないので試していません )。
Power Point での使用を想定して作られたようですが、右手が頭より、X 軸で(外側に) 45センチ離れたら 右矢印キーを押し、左手が頭より、X 軸で(外側に) 45センチ離れたら 左矢印キーを押すという機能のみ実装されています。

ここでは、3箇所しか認識させていませんが、同様にして 20箇所の人体の部分を認識可能です。

なので、少しコードを触るだけで、ジェスチャーによるキーコマンドをいくつでも追加できます。そして、ブラウザ側では、jQuery を使って .keydown で受ければいろいろな画面展開が可能になるでしょう。

コマンド受付部分(ここを改造)
        private void ProcessForwardBackGesture(Joint head, Joint rightHand, Joint leftHand)
        {
            // 頭と右手が x 座標で 45 センチ離れた場合に 右矢印キーを押した事にする
            if (rightHand.Position.X > head.Position.X + 0.45)
            {
                if (!isForwardGestureActive)
                {
                    isForwardGestureActive = true;
                    System.Windows.Forms.SendKeys.SendWait("{Right}");
                }
            }
            else
            {
                isForwardGestureActive = false;
            }

            // 頭と左手が x 座標で 45 センチ離れた場合に 左矢印キーを押した事にする
            if (leftHand.Position.X < head.Position.X - 0.45)
            {
                if (!isBackGestureActive)
                {
                    isBackGestureActive = true;
                    System.Windows.Forms.SendKeys.SendWait("{Left}");
                }
            }
            else
            {
                isBackGestureActive = false;
            }
        }

※ 各コマンド用のフラグは MainWindow クラスの変数として追加定義します

実際動かすと良く解りますが、頭と手が認識されると赤い丸が表示され、コマンドを送れる位置に移動すると大きな緑の丸に変化します。コマンドは、いったん赤い丸に戻してからでないと、再度実行する事はできません。

また、認識には少なくとも 150センチ離れる必要があり、C キーで認識円の表示を消す事ができるようです。

画面定義
<Window x:Class="KinectPowerPointControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Kinect PowerPoint Control"
        Height="480"
        Width="640"
        WindowState="Maximized">
    <Viewbox Stretch="Uniform">
        <Grid>
            <Image Name="videoImage"
                   Width="640"
                   Height="480"></Image>
            <Canvas Background="Transparent">
                <Ellipse Fill="Red"
                         Height="20"
                         Width="20"
                         Name="ellipseLeftHand"
                         Stroke="White" />
                <Ellipse Fill="Red"
                         Height="20"
                         Width="20"
                         Name="ellipseRightHand"
                         Stroke="White" />
                <Ellipse Fill="Red"
                         Height="20"
                         Width="20"
                         Name="ellipseHead"
                         Stroke="White" />
            </Canvas>
        </Grid>
    </Viewbox>
</Window>

※ videoImage に、映像が表示され、最初左上に赤い丸が表示されています。

プログラムの中核となる部分
        void sensor_SkeletonFrameReady(object sender, SkeletonFrameReadyEventArgs e)
        {
            using (var skeletonFrame = e.OpenSkeletonFrame())
            {
                if (skeletonFrame == null)
                    return;

                if (skeletons == null ||
                    skeletons.Length != skeletonFrame.SkeletonArrayLength)
                {
                    skeletons = new Skeleton[skeletonFrame.SkeletonArrayLength];
                }

                skeletonFrame.CopySkeletonDataTo(skeletons);
            }

            Skeleton closestSkeleton = skeletons.Where(s => s.TrackingState == SkeletonTrackingState.Tracked)
                                                .OrderBy(s => s.Position.Z * Math.Abs(s.Position.X))
                                                .FirstOrDefault();

            if (closestSkeleton == null)
                return;

            // 頭
            var head = closestSkeleton.Joints[JointType.Head];
            // 右手
            var rightHand = closestSkeleton.Joints[JointType.HandRight];
            // 左手
            var leftHand = closestSkeleton.Joints[JointType.HandLeft];

            // NotTracked : 追跡していない
            if (head.TrackingState == JointTrackingState.NotTracked ||
                rightHand.TrackingState == JointTrackingState.NotTracked ||
                leftHand.TrackingState == JointTrackingState.NotTracked)
            {
                //Don't have a good read on the joints so we cannot process gestures
                return;
            }

            // MainWindow.xaml に定義された ellipse
            SetEllipsePosition(ellipseHead, head, false);
            SetEllipsePosition(ellipseLeftHand, leftHand, isBackGestureActive);
            SetEllipsePosition(ellipseRightHand, rightHand, isForwardGestureActive);

            ProcessForwardBackGesture(head, rightHand, leftHand);
        }


二つのフラグが立って初めてコマンドを送れるようにも出来ますし、20箇所の場所を使えばいろいろかなりコマンドを作れると思います。また、ブラウザ上の位置とキネクトの座標とを同期させてコマンドを発動する事もできるでしょう。




posted by lightbox at 2016-07-01 07:31 | Comment(0) | VS(C#) | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

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

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