Category Archives: JavaScript

デコード/エンコードを1ファイルで行うPHP

Posted by on 2011年9月1日 No comments
このエントリーをはてなブックマークに追加
はてなブックマーク - デコード/エンコードを1ファイルで行うPHP
Share on Facebook

URLエンコード/デコード、HTMLエンティティエンコード/デコードを行うとき便利なフォームを作成しました。 PHP+jQueryで実装されており、このファイルをPHPの動くWebサーバーに置けばすぐに使えます。

できること

  • URLエンコード/デコード
  • HTMLエンティティエンコード/デコード
  • PHPの配列のシリアライズ/アンシリアライズ

必要な環境

  • PHPの動作するWebサーバー

Read more »

「要素をクリックする」命令をjQueryで書く

Posted by on 2011年6月22日 No comments
このエントリーをはてなブックマークに追加
はてなブックマーク - 「要素をクリックする」命令をjQueryで書く
Share on Facebook

LightBoxのように、リンクをクリックするとアクションが発生するスクリプトは数多く存在します。 任意の場所をクリックした時にそのアクションを起動したい場合は、jQueryのclick()メソッドを使うと簡単に実現できます。

例

classが”uso”のaリンクをクリックした時に “a#mojamoja” をクリックした時のアクション起動したい場合は、下記のように書けます。

$(function() {
    $("a.uso").click(function(e) {
        e.preventDefault();
        $("a#mojamoja").eq(0).click();
    });
});

応用（悪用？）

FirebugやChromeのスクリプト入力ボックスに下記のコードを書き込むと、button#usoを永遠に毎秒10回叩き続けます。

setInterval(function() {$("button#uso").eq(0).click();}, 100);

「どうしてもボタンが連打したい。でも指が折れて動かせない…。」という名人にお勧めです。

参考

HTML5テンプレート

Posted by on 2010年10月17日 No comments
このエントリーをはてなブックマークに追加
はてなブックマーク - HTML5テンプレート
Share on Facebook

遅ればせながら、HTML5の勉強を始めました。divタグだらけの(X)HTMLに比べ、意味のあるタグで構成できるようになり、可読性が上がっています。願わくばHTML5の普及後、クロスブラウザ対策という雑用から解放されますように。

さしあたり、HTML5でページを作るときの最小構成をメモしておきます。The W3C Markup Validation Serviceで問題ないことを確認しています。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="description" content="HTML5 Tamplate" />
    <meta name="keywords" content="HTML,HTML5,template" />
    <link rel="stylesheet" href="sample.css" type="text/css" media="all">
    <link href="favicon.png" rel="icon" type="image/png">
    <link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
    <title>html 5 sample</title>
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <header>header</header>
    <nav>nav</nav>
    <section>
        <article>
            <header>
                <h1>Heading 1 of article #1</h1>
            </header>
            <section>
                <p>paragraph 1</p>
            </section>
        </article>
    </section>
    <footer>footer</footer>
</body>
</html>

補足

  • HTML5の新要素をIE9未満でも認識できるよう、”html5.js”をロードしています。
  • faviconの指定が2行あるのはIE用とそれ以外用です（たぶん）

参考

[jQuery] ブラウザの描画領域のサイズを取得する

Posted by on 2010年5月16日 No comments
このエントリーをはてなブックマークに追加
はてなブックマーク - [jQuery] ブラウザの描画領域のサイズを取得する
Share on Facebook

winHeight = $(window).height();
winWidth = $(window).width();

[その他] Poderosaマクロ – telnet自動ログイン

Posted by on 2010年5月16日 No comments
このエントリーをはてなブックマークに追加
はてなブックマーク - [その他] Poderosaマクロ – telnet自動ログイン
Share on Facebook

  • ワンクリックでtelnetログインし、自動でID/PWを入力するマクロ
  • いじるファイル：　Poderosaインストールディレクトリ > Macro > AutoLogin.js
  • 登録方法：　[ツール] > [マクロ] > [環境設定] > [新規]　で上記ファイルを指定
//AutoLogin.js
import Poderosa;
import Poderosa.ConnectionParam;
import Poderosa.Terminal;
import Poderosa.Macro;
import Poderosa.View;
import System.Drawing;
import System.Threading;

var vars = new Object();
// telnetの場合
connect("ホスト名", ConnectionMethod.Telnet, 23, EncodingType.UTF8, "ログインID", "ログインPW");
// SSHの場合
//connect("ssh-host", ConnectionMethod.SSH2, 22, EncodingType.EUC_JP, "ログインID", "ログインPW");

function connect(host, method, port, encoding, id, password) {
    vars.env = new Environment();
    if (method == ConnectionMethod.Telnet) {
        vars.param = new TelnetTerminalParam(host);
    } else {
        vars.param = new SSHTerminalParam(method, host, id, password);
    }
    vars.param.Port = port;
    vars.param.Encoding = encoding;
    vars.connection = vars.env.Connections.Open(vars.param);
    if (method == ConnectionMethod.Telnet) {
        wait("login: ");
        sendln(id);
        wait("Password: ");
        sendln(password);
    }
}

function sendln(s) {
    vars.connection.TransmitLn(s);
}

function wait(s) {
    Thread.Sleep(10);
    var r = vars.connection.ReceiveData();
    while(r.indexOf(s) == -1) {
        Thread.Sleep(10);
        r += vars.connection.ReceiveData();
    }
}

[jQuery] セレクタで「<」「>」が選択できない

Posted by on 2010年5月16日 No comments
このエントリーをはてなブックマークに追加
はてなブックマーク - [jQuery] セレクタで「<」「>」が選択できない
Share on Facebook

症状

JavaScriptにおいて、「<」「>」は基本的にダメ文字（使用不可）だが、jQueryのセレクタ内で使用すると選択できたりできなかったりすることがある。

原因

そもそも、XHTMLの仕様では「<」「>」は属性値に使ってはいけない。

たまに仕様で許可されてない記号も使えるが、そうしたものが選択できるのはブラウザ依存の偶然でしかない。

対策

こういう文字を使うときは、別の文字に置換でもしないとダメ。例えばDOMロード後に全角の「＜」「＞」に置換するとか。

参考

Selector problem: $('#\<foo') and $('#bar\>') works, but $('#\<buz\>') doesn't. – jQuery Forum

[JavaScript] 画像の実際のサイズを取得する (jQuery使用)

Posted by on 2010年5月16日 No comments
このエントリーをはてなブックマークに追加
はてなブックマーク - [JavaScript] 画像の実際のサイズを取得する (jQuery使用)
Share on Facebook

  • imgタグのwidth/height要素を指定していない場合、イメージがどう表示されるかはブラウザによって異なる。
  • すべてのブラウザで画像オリジナルのwidth/heightを取得しようとしても、ブラウザ毎にパラメータやメソッドが異なる
  • jQueryを利用すると、下記コードで画像の実際のサイズを取得できる
/*
 * 画像の実際のサイズを取得する
 *
 * @param  string  image  img要素
 */
function getActualDimension(image) {
    var run, mem, w, h, key = "actual";

    // for Firefox, Safari, Google Chrome
    if ("naturalWidth" in image) {
        return {width: image.naturalWidth, height: image.naturalHeight};
    }
    if ("src" in image) { // HTMLImageElement
        if (image[key] && image[key].src === image.src) {return  image[key];}
        
        if (document.uniqueID) { // for IE
            w = $(image).css("width");
            h = $(image).css("height");
        } else { // for Opera and Other
            mem = {w: image.width, h: image.height}; // keep current style
            $(this).removeAttr("width").removeAttr("height").css({width:"",  height:""});    // Remove attributes in case img-element has set width  and height (for webkit browsers)
            w = image.width;
            h = image.height;
            image.width  = mem.w; // restore
            image.height = mem.h;
        }
        return image[key] = {width: w, height: h, src: image.src}; // bond
    }
    
    // HTMLCanvasElement
    return {width: image.width, height: image.height};
}