暫くの間、休載させて頂きます。

一時休載期間を除き、週一での投稿を続けさせて頂きましたが、改めて一時休載とさせて頂きます。
前回は告知も無しで休載していましたが、今回は念のため告知しておきたいと思います。

暫くの間、新規開始内容にて色々掲載して行きたいと思います。
また、掲載を再開することはあるかと思いますが暫くは「さようなら」です。

・・・戻ってくる頃には「浦島太郎」状態だろうなぁ(笑)

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

ページ内URLの自動リンク

今回はクライアントからの相談について事前調査です。
内容としては以下の内容になります。
 「サイトにて利用者が入力した内容についてURL が入力されている場合には自動的にリンクにして欲しい」

おおよそ、正規表現を使用するのかとは思うのですが・・・
とりあえずはやってみましょう。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                var regex   = /((https?):\/\/[\x21-\x7e]+)/ig;
                var targetTxt;
                var setTxt;

                $('#btn').click( function() {

                    targetTxt = $('#disp').html();
                    setTxt    = targetTxt.replace( regex, '<a href="$1">$1</a>' );

                    $('#disp').html( setTxt );
                    $('#button_area').hide();

                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">
            <div id="disp">
                rss version="2.0"
                xmlns:content="http://purl.org/rss/1.0/modules/content/"
                xmlns:wfw="http://wellformedweb.org/CommentAPI/"
                xmlns:dc="http://purl.org/dc/elements/1.1/"
                xmlns:atom="http://www.w3.org/2005/Atom"
                xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
                xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
                
                title JSource /title 
                atom:link href="http://jsource.nakweb.com/?feed=rss2" rel="self" type="application/rss+xml" /
                link http://jsource.nakweb.com /link
                link https://jsource.nakweb.com /link
                description ~ Javascript 備忘録 ~ /description 
                lastBuildDate Sat, 03 Sep 2016 23:15:47 +0000 /lastBuildDate 
                language ja /language
                sy:updatePeriod hourly /sy:updatePeriod
                sy:updateFrequency 1 /sy:updateFrequency
                generator https://wordpress.org/?v=4.5.4 /generator
            </div>
        </div>

        <div id="button_area">
            <button id="btn">Click</button>
        </div>

    </body>
</html>

sample

sample を表示すると適当な文言と Button が表示されます。
Button を Click すると正規表現に設定した条件の部分に a tag を挿入します。

実際の正規表現については「http」か「https」で始まる内容を対象とします。
また 16新数での「x21(!)」から「x7e(~)」までの文字列が続くものが対象です。
簡単に言うと「半角英数字(スペースや特殊な制御文字は除く)」になるかなと思います。

本当はもっと詳しく設定もできるのでしょうが、そこまで詳しくする必要はないかなぁ
とも思っています。
もっと詳しくする場合には改めて再考します(笑)

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

data の取得方法

今回も備忘録的な内容です。
内容は地味なんですが一応記載しておきます。

簡単な話 Table タグを利用して表を作っているんですが必要項目が結構あったため、
普段はあまり利用しないのですがdata を使った対応を行いました。

・・・件数が多くなると結構遅くなるんですね。
まぁ、これは data に限ったことではないですし、色々な意見の中には data 自体を
利用すること自体があまり良くないといった話もあります。

本当は他の方法がいいのかもしれませんが、既存のシステムを大きく変えたくはありません。
ということで少しでも改善できればと行ったのが以下の内容です。
なお、今回は取得のみで設定は省いています。
設定処理も含めて変更するのであれば一式で別方式にするほうが良いかなと思います。

■ 既存の書き方(取得方法)

hoge = $(element).data(key);

まぁ、一般的な書き方ではないかなと思います。
data 内容は特に問題がなければ、私もこの方法にて取得していました。

■ 変更した書き方(取得)

jObj = $(element);
hoge = $.data(jObj, key);

今回変更した方法は上記の内容です。
このような取得方法は初めてでしたが、調べるとかなり昔から使用できたようです。
また、一旦 object 化してから扱う必要があるようです。
もとより、高速化の都合上そのつもりだったため、特に問題はありませんが・・・

実際は元ソースの組み方によるのでしょうが、数値では差はあっても体感速度に関しては、
変化があるかに関しては微妙でした。
 ※今後、さらに件数が増えれば話は別でしょうが・・・

今回はその他の処理も含みで、速度改善に関してご了承頂けたので安心しました。
まぁ、速度改善に関しては PHP の絡みもあり、一概には言えませんがシステム的に
data 形式にて処理を扱う場合には注意したいと思います。

なお、Demo としては体感でわかるレベルでも無いため Sample プログラムはありません(笑)

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

プラグインのファイル分割

前回に引き続きプラグインに関してです。
この Blog では見やすさを優先するため File を分けることは余り無いと思います。
まぁ、とりあえずは今回のみかもしれませんが調べてみたいと思います。

■ HTML File

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="./jquery.sample1663.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('#click_btn1').sumpleFunction({
                    disp_id    : 'disp_div',
                    input_id   : 'input_text',
                    question   : 'to continue ?',
                });

                $('#click_btn2').sumpleFunction({
                    disp_id    : 'disp_div',
                    question   : 'clear?',
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }

            div#disp_area {
                border           : 1px #000000 solid;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <input type="text" id="input_text" value="Please enter a message.">
            <button id="click_btn1">Input Disp Text</button>
            <button id="click_btn2">Clear Disp Text</button>
        </div>

        <div id="disp_area">
            <div id="disp_div"></div>
        </div>

    </body>
</html>

■ Plugin File【jquery.sample1663.js】

(function($){

    $.fn.sumpleFunction = function ( option ) {

        this.click( function( eObj ) {

            // Set Init
            var defInit = {
                disp_id  : '',
                input_id : '',
                question : 'continue the process ?',
                message  : '',
            };
            var setInit = $.extend( defInit, option );

            // Confirm Check
            if ( !confirm( setInit.question ) ) {
                eObj.preventDefault();
                return this;
            }

            // Message Set
            if ( setInit.input_id.length  ) {
                setInit.message = $('#' + setInit.input_id).val();
            }

            // Message Disp
            $('#' + setInit.disp_id).html( setInit.message );

            return this;

        });

    };

}(jQuery));

sample

sample の「Input Disp Text」を Click すると処理を進めるかの Dialog が出ます。
「Ok」を押すことで Text に入力された内容が表示されます。
Plugin の処理を利用して Crear の処理も作成してあります(笑)
Plugin の処理を流用すると中々便利にはなりそうですね。

ちなみに Click と Plugin の発動をどのようにすれば良いか悩んでいました、
とりあえず今回のような処理方法で良いのかなぁ。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

プラグインの作成基礎

今回は Plugin の作成の基礎です。
最初は Blig の題材として、無名関数などの調べて見ようかと思っていたんですが
いろいろ調べていると、jQuery ではプラグイン作成をすることが多いようです。

折角なんで Plugin の基礎部分を確認してみました。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

        <script type="text/javascript"><!--

            (function($){

                $.fn.sumpleFunction = function ( option ) {

                    var defInit = {
                        text: 'Default Messeage'
                    };

                    var setMessage = $.extend( defInit, option );
                    $('#disp_div').html( setMessage.text );

                    return(this);

                };

            }(jQuery));

            $(function(){

                $('#click_btn1').click( function () {
                    var setText = $('#set_text').val();
                    $('#click_btn1').sumpleFunction({
                        text: setText
                    });
                });

                $('#click_btn2').click( function () {
                    $('#click_btn2').sumpleFunction({});
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <input type="text" id="set_text" value="Input Text">
            <button id="click_btn1">Disp Input Text</button>
            <button id="click_btn2">Disp Default Text</button>
        </div>

        <div id="disp_area">
            <div id="disp_div"></div>
        </div>

    </body>
</html>

sample

sample に Button が 2個あります。
「Disp Input Text」を Click すると Text に入力された文字列が、
「Disp Default Text」を Click するとこちらで設定した内容が、
それぞれ表示される形になります。

今までは同じような処理をする場合、1つのファイルにまとめてはいるものの
Plugin の作成はしていなかったのですが、今後はまとめても良いかも・・・

なお、本来なら Plugin に関しては別ファイルに切り分けるのですが、
今回は1つのファイルにて作業しています。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。