端くれプログラマの備忘録 – ページ 91 – 最近はウェブ系アプリ中心、あとWindowsアプリちょっと

[jQuery] 基本メモ: エフェクト

2015年3月12日2015年8月21日 @84kure

<div id="box" style="width:100px; height:100px; background: blue;"></div>

1	<div id="box" style="width:100px; height:100px; background: blue;"></div>

非表示

$('#box').hide();

1	$('#box').hide();

表示

$('#box').show();

1	$('#box').show();

表示状態反転

$('#box').toggle(800);

1	$('#box').toggle(800);

非表示(変化度合い指定)

$('#box').hide('slow');

1	$('#box').hide('slow');

非表示(変化時間指定)

$('#box').hide(800); //ミリ秒

1	$('#box').hide(800); //ミリ秒

フェードアウト

$('#box').fadeOut(800);

1	$('#box').fadeOut(800);

フェードアウト(コールバック関数)

$('#box').fadeOut(800, function() {
    alert('gone'); //エフェクト終了時に呼ばれる
})

$('#box').fadeOut(800, function() {

alert('gone'); //エフェクト終了時に呼ばれる

})

フェードイン

$('#box').fadeIn(800);

1	$('#box').fadeIn(800);

[jQuery] 基本メモ: htmlの操作

2015年3月11日2015年8月21日 @84kure

attrメソッド – htmlタグの属性

<a href="http://google.com/">Google</a>

1	<a href="http://google.com/">Google</a>

取得 console.log($('a').attr('href'));
設定 $('a').attr('href', 'http://bing.com/');

1 2	取得 console.log($('a').attr('href')); 設定 $('a').attr('href', 'http://bing.com/');

dataメソッド – htmlタグのカスタム属性

<a href="http://google.com/" data-sitename="Google">Google</a>

1	<a href="http://google.com/" data-sitename="Google">Google</a>

取得 console.log($('a').data('sitename'));
設定 $('a').data('sitename','Google US);

1 2	取得 console.log($('a').data('sitename')); 設定 $('a').data('sitename','Google US);

要素の中身を取得する

<p>test</p>
設定 $('p').text('hello);
設定　$('p').text('<a href="">click me</a>');
取得 console.log($('p').text());

設定 $('p').text('hello);

設定　$('p').text('<a href="">click me</a>');

取得 console.log($('p').text());

要素の値を取得する

<input type="text" value="hello">
取得 $('input').val();
設定 $('input').val('good-bye');

取得 $('input').val();

設定 $('input').val('good-bye');

要素の内容を空にする

$('p').empty();

1	$('p').empty();

要素自体を削除する

$('p').remove();

1	$('p').remove();

要素を追加する

<ul>タグ直後に<li>タグを追加

var li = $('<li>').text('addition');
$('ul > li:eq(0)').before(li);

1 2	var li = $('<li>').text('addition'); $('ul > li:eq(0)').before(li);

以下のように書いても同じ結果

var li = $('<li>').text('addition');
li.insertBefore($('ul > li:eq(0)'));

1 2	var li = $('<li>').text('addition'); li.insertBefore($('ul > li:eq(0)'));

<ul>タグ内の末尾に追加

var li = $('<li>').text('addition');
$('ul').append(li);

1 2	var li = $('<li>').text('addition'); $('ul').append(li);

<ul>タグ内の先頭に追加

var li = $('<li>').text('addition');
$('ul').prepend(li);

1 2	var li = $('<li>').text('addition'); $('ul').prepend(li);

参考サイト

jQuery 日本語リファレンス
http://semooh.jp/jquery/

[jQuery] 基本メモ: cssの操作

2015年3月10日2015年8月21日 @84kure

プロパティの設定

$('p').css('color','red').css('background','blue');

1	$('p').css('color','red').css('background','blue');

プロパティの取得

console.log($('p').css('color'));

1	console.log($('p').css('color'));

クラスの追加

$('p').addClass('myStyle');

1	$('p').addClass('myStyle');

クラスの削除

$('p').removeClass('myStyle');

1	$('p').removeClass('myStyle');

参考サイト

jQuery 日本語リファレンス
http://semooh.jp/jquery/

[jQuery] 基本メモ: 属性セレクタ

2015年3月9日2015年8月21日 @84kure

属性が一致した要素だけ選択する。

サンプルコード

<ul>
    <li><a href="https://google.com">Google</a></li>
    <li><a href="http://yahoo.co.jp">Yahoo!</a></li>
    <li><a href="http://bing.com">Bing</a></li>
</ul>

<ul>

<li><a href="https://google.com">Google</a></li>

<li><a href="http://yahoo.co.jp">Yahoo!</a></li>

</ul>

一致した要素を選択

$('a[href="https://google.com"]').css('background','red');

1	$('a[href="https://google.com"]').css('background','red');

一致しない要素を選択

$('a[href!="https://google.com"]').css('background','red');

1	$('a[href!="https://google.com"]').css('background','red');

文字列を含む要素を選択

$('a[href*="bing"]').css('background','red');

1	$('a[href*="bing"]').css('background','red');

先頭が一致した要素を選択

$('a[href^="https"]').css('background','red');

1	$('a[href^="https"]').css('background','red');

末尾が一致した要素を選択

$('a[href$="jp"]').css('background','red');

1	$('a[href$="jp"]').css('background','red');

[jQuery] 基本メモ: セレクタ

2015年3月8日2015年8月19日 @84kure

セレクタはDOM(Document Object Model)要素を選択する。

記述スタイル

セレクタに続けてメソッドをチェインして記述できる (メソッドチェイン)。

$('セレクタ').css(....).hide(...)

1	$('セレクタ').css(....).hide(...)

セレクタで使われる記号

> 直下の子要素
スペースそれ以下の要素
/ 複数の要素
+ 隣接する要素

セレクタ適用例

<ul id="main">
    <li>1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li>4
    <ul>
        <li>4-1</li>
        <li class="item">4-2</li>
        <li class="item">4-3</li>
        <li>3-4</li>
    </ul>
    </li>
</ul>

<li>4

<ul>

</ul>

</li>

</ul>

main直下のitemを選択

$('#main > .item').css('color','red');

1	$('#main > .item').css('color','red');

main以下のitemを選択

$('#main .item').css('color','red');

1	$('#main .item').css('color','red');

pとitemを選択

$('p, .item').css('color','red');

1	$('p, .item').css('color','red');

itemに隣接するitemを選択

$('.item + .item').css('color','red');

1	$('.item + .item').css('color','red');

フィルタ

:eq()
:gt()
:lt()
:even
:odd
:contains()
:first
:last

フィルタ適用例

3番目にあるitemを選択

$('.item:eq(2)').css('color','red');

1	$('.item:eq(2)').css('color','red');

最後にあるitemを選択

$('.item:last').css('color','red');

1	$('.item:last').css('color','red');

DOM要素を指定するメソッド

parent()
children()
next()
prev()
siblings()

[jQuery] 基本メモ: 超入門

2015年3月7日2015年8月21日 @84kure

CDNにホストされているファイルを使うのが手っ取り早い。

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

1	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

jQuery CDN
https://code.jquery.com/

DOMがロードされたタイミングで処理を実行するには、以下のように書く。

<script>
jQuery(document).ready(function() {
    alert('Hello'); 
});
</script>

jQuery(document).ready(function() {

alert('Hello');

});

</script>

jQueryは$で置き換えることができる。

<script>
$(document).ready(function() {
    alert('Hello'); 
});
</script>

$(document).ready(function() {

alert('Hello');

});

</script>

(document).readyは省略できる。

<script>
$(function() {
    alert('Hello');
});
</script>

$(function() {

alert('Hello');

});

</script>

[PHP] 現在のディレクトリ名を取得する

2015年3月6日2015年8月21日 @84kure

__DIR__ 定数を参照すればよい。

echo __DIR__;

1	echo __DIR__;

これは以下と同じ振る舞い。

echo dirname(__FILE__);

1	echo dirname(__FILE__);

参考サイト

PHP: 自動的に定義される定数 – Manual
http://php.net/manual/ja/language.constants.predefined.php

[PIC] PICBASIC PROで浮動小数点を使う

2015年3月5日 @84kure

Microchip製の浮動少数点ルーチンをPICBASIC PROで使う方法がmelabsのサイトで解説されていたので覚書リンク。

PIC Using Microchip’s Floating Point routines with PicBasic Pro Compiler
http://melabs.com/resources/fp.htm

[PHP] NetBeans起動時に”Invalid jdkhome specified”メッセージ

2015年3月4日 @84kure

NetBeans起動時に以下のメッセージが表示されるようになった。

[はい]を押下すればNetBeansは問題なく起動されるけど、できれば出ないようにしたい。

ネットを検索すると以下の記事がヒット。

java – How to set the JDK Netbeans runs on? – Stack Overflow
http://stackoverflow.com/questions/6950960/how-to-set-the-jdk-netbeans-runs-on

記事に倣ってnetbeans.confを変更するが状況は変わらず。

C:Program FilesNetBeans 8.0etcnetbeans.conf

# Default location of JDK:
# (set by installer or commented out if launcher should decide)
#
# It can be overridden on command line by using --jdkhome &lt;dir&gt;
# Be careful when changing jdkhome.
# There are two NetBeans launchers for Windows (32-bit and 64-bit) and
# installer points to one of those in the NetBeans application shortcut 
# based on the Java version selected at installation time.
#
# netbeans_jdkhome="C:Program FilesJavajre7"
netbeans_jdkhome="C:Program FilesJavajre1.8.0_31"

# Default location of JDK:

# (set by installer or commented out if launcher should decide)

# It can be overridden on command line by using --jdkhome <dir>

# Be careful when changing jdkhome.

# There are two NetBeans launchers for Windows (32-bit and 64-bit) and

# installer points to one of those in the NetBeans application shortcut

# based on the Java version selected at installation time.

# netbeans_jdkhome="C:Program FilesJavajre7"

netbeans_jdkhome="C:Program FilesJavajre1.8.0_31"

以下の記事コメントにも着目するが、僕のマシンにはこのファイルは見つからず。

As of Netbeans 8 there is also a netbeans.conf in C:UsersYouAppDataRoamingNetBeans8.0etcnetbeans.conf.

ホントの設定はどこにあるのだろうか・・・?

[データコレクタ] OPTICON OPN-2001からデータをダウンロードする

2015年3月3日 @84kure

OPN-2001からバーコードデータをダウンロードするアプリをC#で書いてみる。

情報収集

開発者向け情報はメーカーのWikiにまとめられている。

OPN-2001 – Opticon Technical Support Portal
https://wiki.opticonusa.com/techsupport/en/OPN-2001

OPN PC SDKをダウンロードする。レジスト不要で自由にダウンロードできる。

OPN PC SDK Ver.6
http://ftp.opticonusa.com/Downloads/OPN2001SDKv6.zip

デモソフトを動かす

SDKには.NET Demoというアプリが同梱されているので、実行して動作を確認してみる。

VS2013でデモアプリのプロジェクトを開くと、古いバージョンのVSで作成されたために変換が必要と言われる。SDKにリリースノートが同梱されていないので、いつ作成されたプロジェクトなのかわからん。ファイルの日付からおそらく2012年2月だろう。

プロジェクトを変換してビルドを試みると、リファレンス欠如によるエラー多数。

Could not resolve this reference. Could not locate the assembly "Opticon.csp2Ex.net".
Check to make sure the assembly exists on disk. If this reference is required by your
code, you may get compilation errors. Csp2.net.Test

Could not resolve this reference. Could not locate the assembly "Opticon.csp2Ex.net".

Check to make sure the assembly exists on disk. If this reference is required by your

code, you may get compilation errors. Csp2.net.Test

１つ上のディレクトリにあるOpticon.csp2.net.dllのリファレンスを追加するとビルド成功。ちなみにOpticon.csp2Ex.netのリファレンスを追加しようとすると、CPUタイプがマッチしないというエラーになる。

実行しようとすると以下のエラー。

プロジェクトにデモソフト作成者のマシン上のパスが直指定されているのが原因。この設定は余計なので、プロジェクトのプロパティを開いて[Debug]ペインの[Working directory]を空白にしてやればいい。リリース前の見落としか？>メーカー

これでデモアプリは実行できるようになったので、ソースを眺めながら挙動を確認する。デモアプリというよりはAPIのテストプログラムという感じ。実際の処理には必要ないAPI呼び出しが多数含まれるので、自分でアプリを書くときには必要なAPIだけ呼ぶように配慮する必要がありそう。ドキュメントにはそういう実装上のヒントは書かれていないのがちょっと不親切。

スクラッチからアプリを作る

デバイスからバーコードをダウンロードしてMS-Accessのテーブルを処理するアプリを書いてみた。

ざっと留意事項。

プロジェクトにOpticon.csp2.net.dllのリファレンスを追加する
実行パスにCsp2.dllも配置しておかないとdll不足で動作しない
Opticon.csp2.net.dllはCsp2.dllを単にラップしているだけっぽい
Opticon.csp2.net.dllのメソッドは全てスタティックなのでインスタンス化とか不要
逆に言えば一度に１デバイスしか処理できない
メソッドに関してはSDK同梱の”Windows SDK Reference”を参照