タブレットでもdraganddropを実現可能とするライブラリ jQuery UI Touch Punch

百聞は一見に如かず。ということで、以下サイトのデモサイトをご覧ください。

http://touchpunch.furf.com/

タブレット (xperia tablet z)でも、問題なく操作できました。

jqueryuiでは、タブレット対応していないので（２０１４年１０月現在)、
タブレットでドラッグアンドドロップを対応するための選択肢の一つかと思います。


タブレット、スマートフォン対応のライブラリ系は他にもあるとは思いますので
随時更新していきたいと思います。

EclipseでJSLintを使う

Javascriptの構文チェックを行う方法はいくつかあると思いますが、
今回、既存システムに対して改めて構文チェックを行おうと思い、
Eclipseのプラグインも提供されているJSLintを使う事にしました。

【事前準備】

Eclipseマーケットプレースより、JSLintのプラグインをインストール
※インストール後にEclipseの再起動が必要です。

Eclipseマーケットプレースの使いかたについては別記事で紹介していますので併せて参照ください。

【チェック方法】

1.メニューバーより「プロジェクト」→「プロパティ」を選択
2.「JSHint」を選択し、「Enable JSHint for～～」の欄で「追加」ボタンを押す
3.対象とするファイル、およびフォルダの指定ができるので、必要なファイル、フォルダを指定

プロジェクトをビルドすると、問題ビューに警告が表示されるようになります。

【警告を除外する方法】

JSHintが出すいくつかの警告は、構文の問題というよりもお作法(規約)に近いものがあり、
開発スタイルによっては無意味です。

設定で、出力する警告を制御する事が出来ます。


やり方は2つ。プロジェクト単位の設定か、Eclipse全体の設定か。を選べます。

1.プロジェクト単位
　「プロジェクト」→「プロパティ」→「JSHint」→「Configuration」→
　「Enable Project～」のチェックOnで設定を記載

2.全体
　「ウインドウ」→「設定」→「JSHint」→「構成」で設定を記載

いずれも、以下のような構文で記載します。

設定可能なオプションは公式ドキュメントを参照ください。

(日本語訳してくれている方もいるので併せて参考で)

○json形式

{
"laxcomma":true,
"laxbreak":true,
"smarttabs":true,
"evil":true
}

パラメータで抑止できないエラーについては、以下の対処法で対応可能です。

1) jshint.jsより、該当のメッセージを探す。
2) メッセージコードをメモ
3) パラメータに、以下形式で記載

{
"asi":true,
"evil":true,
"laxcomma":true,
"laxbreak":true,
"smarttabs":true,
"sub":true,
"-W009":false, //The array literal notation [] is preferable.
"-W099":false, //Mixed spaces and tabs
"-W041":false  //Use '{a}' to compare with '{b}'
}

GreaseMonkeyを活用する (初級編)

今までは、提供されていたものを使うだけだったのですが、
JavaScript,jQuery周りの知識がついてきたのと、Webの仕事が増えてきたので、
GreaseMonkeyを使って、自分でスクリプトを書いてみる事にしました。

GreaseMonkeyも覚えられて、jQueryも使う事ができるようになって、
仕事も効率化。と、いいことづくめになりそうです。


インストールなどの説明は省き、使っているケースの紹介です。

ケース1 ：ログイン画面で、自動的にIDとパスを表示する

システム開発におけるテストとか、運用保守とかに使えそうです。
毎度入れるのが手間だったりするので、大助かり。

// ==UserScript==
// @name     IDを自動セットする処理
// @namespace  domain.com
// @description 任意の文字
// @include   対象のurl
// @version   2
// ==/UserScript==
  $("#txtloginID").val('loginid');
  $("#txtfPASSWORD").val('password');

jQueryで値をセットしているだけですね。簡単です。

ケース2：ボタン機能を追加することで機能拡張

// ==UserScript==
// @name     フィルタ機能の実装
// @namespace  domain.com
// @description 任意の文字
// @include   対象のurl
// @require   http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js

// @resource jQueryUICSS https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css
// @version   2
// ==/UserScript==

大事なのは、@requireを入れるところ。
jQuery対応していないサイトだったのですが、以下1文を入れるだけで
jQuery対応となります。CSSを読むには同じ要領で、@resourceを指定します


フィルタのボタンを入れる。(alertはダミーです

$(document).ready(function(){
  $('input[name=RE]').after('<input type="button" name="filter" value="フィルタ" onclick="alert(&apos;&apos;);">');
});

ケース3：カスタムCSS

var cssValue = ".custBtn{color:blue;background-color:lightgreen;margin:0 2px 0 2px;}";
var style = document.createElement('style');
style.textContent = cssValue;
document.getElementsByTagName('head')[0].appendChild(style);

あとは通常のjavasscript(jquery)で何とでもなりそうです。

jquery 1行tips (入門編

自分用メモです。

select要素の値を設定する

$("select[name='selectname']").val(値);

イベントのバインド

$("#button").bind("click", function() {/*実行処理*/;});

要素の列挙(each)

$("select[name='selectname'] option").each(function()
{
    alert($(this).val());
});

select要素の指定値を削除

$("select[name='selectname'] option[value=1]").remove();

配列の中を検索して結果を返す

var arr = [ 4, "Pete", 8, "Pete", "John" ];
if (jQuery.inArray("Johnnn", arr)
{
    alter('not Found');
}

要素のコピー

$("#BackupArea").append($("select[name='MARKETCD']").clone(true););

要素のコピー(応用)

$("input[name='buttonname']").after('<div id="customBackupArea" style="display:none"></div>');
var backupElm = $("select[name='MARKETCD']").clone(true);
backupElm.attr('name','MARKETCD_BAK');
$("#customBackupArea").append(backupElm);

ラジオボタンの選択

$("input[name='name']").val(['0']);

ラジオボタンで選択されているものを取得

$("input[name='name']:checked").val();

小数点を持つ値の計算で誤差が生まれる件(JavaScript)

今更・・・という話ですが、とあるシステムでの不具合にて、原因を調査していたところ発覚。

小数点がある数値を含む計算を行った際に、計算結果が合わないという事が起きます。


理由としては、JavaScriptの演算はIEEE 754という規格に従って実装されているという事。
仕様であり、JavaScript的には正しい値なので避けようがありません。


ちなみに、以下のような演算でも誤差が起きます。

(17.955 * 100000) = 1795499.9999999998


原理や理屈は「演算誤差」などで調べてもらうとして、利用するソフトウェアによっては発生しうる現象です。


今回のケースでは、金額の計算だったため、コンピューターの都合による誤差は認められません。。。。

対処法

「いったん整数に変換してから演算して戻す」などがよくありがちですが、
JavaScriptだとそこそこの行数でロジックを書かなければだめそうなので
こちらは別途纏めたいと思います。

追伸

net framework(vb.net)でも同じ結果となりました。こちらは、小数点の値に対して、[Decimal]を明示する事で対処できそうです。

(Convert.ToDecimal(17.955) * 100000) = 179500D

Javaでも起きますね。こちらはBigDecimal型を使って計算すれば対処できます。

[JavaScript] 自動で印刷ダイアログを表示する・印刷ボタンを実装する

調べていたところ、あるようですね。

ただ、使えないブラウザもあるようなので判定が必要。

[JavaScript] 自動で印刷ダイアログを表示する・印刷ボタンを実装する
http://mashimonator.weblike.jp/library/2009/01/javascript-3.html

画面ロード時にブラウザ判定を行い、JSによるプリントに対応していれば印刷ダイアログを表示する。対応していない場合はブラウザのメニューから印刷する旨を伝えるメッセージを表示する。

【キーワード】
window.print();