月別アーカイブ: 2016年9月

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

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

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

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

この投稿は役に立ちましたか? 役に立った 役に立たなかった 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 人がこの 投稿 は役に立ったと言っています。