Chrome拡張機能、第二弾は思いのほか動作不安定?

2018.01.22

Logging


 
Chrome拡張機能、第二弾は思いのほか動作不安定?
リンクバッチというChrome拡張機能をリリースしたのは
良いのですが、挙動不審がかなりひどい感じです、何故、そうなっているのかは
理解できているのですが、対応が出来ていないのです。
おそらくFunctionの中で動作を行えば良いような話なんだけども・・・。
悩ましい。
もうひとつのアットマークシェアは結構便利かなと
自分は思っています、誤作動もなく動いています・・・何せ基となるコードは数行ですからね。
リンクはそれぞれこちらのリンクになります。
Linkbat(ページ内のリンクURLを一括CSV形式コピー)
https://chrome.google.com/webstore/detail/linkbat/cekdkbkcfjingdkcmkoklifflabieakb?hl=ja
@Share(ページのタイトルとURLをコピーします、貼り付けてSNSなどでシェアできます)
https://chrome.google.com/webstore/detail/share/bibjpcaelhbbmpjbcgcjkagnhpfmfcai?hl=ja
 

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

Chrome拡張機能, function, Linkbat, アットマークシェア, かなりひどい感じ, コード, フランケンシュタイン, ページ, もうひとつ, リンク, リンクバッチ, 一括CSV形式コピー, 中公新書, 思いのほか動作, 批評理論入門, 数行, 解剖講義, 誤作動,

jsって言ってるアレ、そうアレ。

2017.12.30

Logging


この頃、知ったんだけど配列とかも参照渡しなんだね・・親切だけどココは
親切にしてほしくないところかな。

$(function(){
    var FUSION= function(yabai){
        var fooooooooo = yabai;
        fooooooooo[0]++;
        fooooooooo[1]++;
        fooooooooo[2]++;
    },
    FUSION2= function(yabai2){
        var YaYaYaaaaaaaaa = yabai2 ;
        console.log(YaYaYaaaaaaaaa);
        return ;
    },
    t=[1,2,3];
    FUSION(t);
    FUSION2(t);
});

上記の記述で参照渡し可能になります。
オブジェクト渡しで参照渡しになるのは何となく理解できるものの
配列も参照渡しになっちゃうのはどうかと。
じぶんとしては参照渡し行ってほしくないだよね。
でもjavascriptの場合、参照渡しになっちゃう事を覚えておいたほうが
良さげです。逆にうまく使えれば参照渡し役に立つかもしれないだろうけど。

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

AM, console.log, function, FUSION2, Informatics&amp, javascript, var fooooooooo, var FUSION, var YaYaYaaaaaaaaa, yabai2, アレ, オブジェクト渡し, じぶん, プログラミング, 参照渡し, 参照渡し役, 徹底マスター, 配列, 開発技法,

JSプラグインを作ってみた、今回はANA旅割JSプラグイン(またかよ)。

2017.09.30

Logging

JSプラグインを作ってみた、今回はANA旅割JSプラグイン・・・。
またかよと言われそうなのですが、試しに作ってみたりした。
本当はもっと簡略化できるのだけど、あえてこれを参考に作る人にも
ある程度、参考になるかなというぐらいの代物です。
昨日、datetimepickerというプラグインを仕事で見ていて最初、取り出し方などが
わからず試行錯誤してなんとか取り出すことが出来たのですが、これでは駄目だな。
前、なんか書いていたけど使わなかったらやはり忘れてしまうので
本日から一週間ぐらい、しょぼいJSプラグインを何個かリリースします。
大量のコードは仕事終わってから書くことは出来ないかもしれないけれど
サンプルプログラム程度は簡単にコードが書けるように
しておかないと行けないなという気持ちもあります。
そしてjQueryから自前のjQueryプラグインへ
仕事でもシフトしていくつもりです。
やはりコチラのほうが慣れれば楽かなと感じます。
トイウコトでANA旅割JSプラグインは
こちらからダウンロードを行なってください。
ちなみに作りかけなので、これから再編集してもらっても
構いません。なんせ適当ですから:)
https://zip358.com/tool/ana_js_p/

(function($){
    var ana_tabai = {
        ana75:function(d){
            var dd = [];
            dd[0] = d[0];
            dd[1] = d[1];
            dd[2] = d[2];
            var dt = new Date(d[0],d[1],d[2]);
            dt.setFullYear(dt.getFullYear());
            dt.setMonth(dt.getMonth());
            dt.setDate(dt.getDate()-74);
            dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
            return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
        },
        ana55:function(d){
            var dd = [];
            dd[0] = d[0];
            dd[1] = d[1];
            dd[2] = d[2];
            var dt = new Date(d[0],d[1],d[2]);
            dt.setFullYear(dt.getFullYear());
            dt.setMonth(dt.getMonth());
            dt.setDate(dt.getDate()-54);
            dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
            return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
        },
        ana45:function(d){
            var dd = [];
            dd[0] = d[0];
            dd[1] = d[1];
            dd[2] = d[2];
            var dt = new Date(d[0],d[1],d[2]);
            dt.setFullYear(dt.getFullYear());
            dt.setMonth(dt.getMonth());
            dt.setDate(dt.getDate()-44);
            dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
            return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
        },
        ana28:function(d){
            var dd = [];
            dd[0] = d[0];
            dd[1] = d[1];
            dd[2] = d[2];
            var dt = new Date(d[0],d[1],d[2]);
            dt.setFullYear(dt.getFullYear());
            dt.setDate(dt.getDate()-27);
            dt.setMonth(dt.getMonth());
            dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
            return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
        },
        ana21:function(d){
            var dd = [];
            dd[0] = d[0];
            dd[1] = d[1];
            dd[2] = d[2];
            var dt = new Date(d[0],d[1],d[2]);
            dt.setFullYear(dt.getFullYear());
            dt.setDate(dt.getDate()-20);
            dt.setMonth(dt.getMonth());
            dd = mumu(dt.getFullYear(),dt.getMonth(),dt.getDate(),dd);
            return [dd[0] + "年",dd[1] + "月",dd[2] + "日"];
        }
    };
 $.fn.tabiwari = {
     ana:function(d){
        if(d.split("-").length==3){
            var a = d.split("-");
            console.log(a);
            s = [ana_tabai.ana75(a),ana_tabai.ana55(a),ana_tabai.ana45(a),ana_tabai.ana28(a),ana_tabai.ana21(a)];
            var str="";
            var days = [75,55,45,28,21];
            for(var i = 0;i < s.length;i++){
                str += days[i] + "days ::" + s[i] + "<br>";
            }
            return str;
        }else{
            return "no!! :( ";
        }
    }
 }
})(jQuery);
function mumu (y,m,dy,dd){
    console.log(dd);
    dd[0] = !m?dd[0]:y;
    dd[1] = !m?dd[1]:m;
    dd[2] = !m?dy:dy;
    return dd;
}
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>zip358.com:ANAJSぷらぐいん</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="ana_tabiwari.js"></script>
  <script>
      $(function(){
          $("#ana_input").change(function(){
            var str = $("#ana_input").tabiwari.ana($(this).val());
            $("#ana").html(str);
          });
      });
  </script>
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-71682075-1', 'auto');
  ga('send', 'pageview');
</script>
</head>
<body>
    <input id="ana_input" type="date">
    <div id="ana">
    </div>
    <a href="ana_tabiwari.js" download="ana_tabiwari.js">ANA旅割JSプラグインダウンロード</a>
</body>
</html>

 

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

AM, ANA旅割JSプラグイン, B06XNQCW7B, console.log, d.split, datetimepicker, dt.getDate, dt.setDate, fn.tabiwari, function, jquery, new Date, return dt, return str, s.length, var ana_tabai, var days, var dt, var str, トイウコト,

素数判定、単純なソース。

2017.06.25

Logging

素数判定、単純なソースを作りましたので
公開します、ちなみに確率的素数判定法ではなく
ほんとに単純明快な方法で作成しましたので自分のパソコンでは
4桁までの処理が限界でした、基本:javascriptで動いています・
ローカルのパソコン性能に左右されます。
ソースを変更して5桁とか試してみるのも良いかもしれません?
サンプルサイト
https://zip358.com/tool/sosu/

function sosu(){
    let sosuno = [2];
    for(let i=3;i<=9999;i++){
        let flg = true;
        if(i%2===0){
            continue;
        }
        for(let ii=2;ii<i;ii++){
            if(ii%2===0){
                continue;
            }
            if(i%ii===0){
                flg = false;
                break;
            }
        }
        if(flg){
            sosuno.push(i);
        }
    }
    document.getElementById("my-textarea").value = sosuno.join(',');
}
document.getElementById("btn").addEventListener("click",sosu);

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

$flg, 0, 2, , 4, 5, 9999, continue, For, function, if, Ii, javascript, let, lt, sosu, sosuno, true, サイト, サンプル, ソース, パソコン, ほんと, ローカル, 作成, 公開, 処理, 判定, 判定法, 単純, 基本, 変更, 左右, 性能, 方法, 明快, 素数, 自分, 限界,

非同期処理でファイルを送る方法(jquery)

2017.01.14

Logging

<script type="text/javascript">
    $("#isubmit").click(function(){
        var formdata = new FormData($("#iform").get(0));//form ID
        $("#isubmit").prop('disabled', true);
        $.ajax({
            type : 'post',                      // HTTPメソッド
            url  : '/hoge/index.php',           // POSTするURL
            data: formdata,         // POSTするデータ
            processData: false,
            contentType: false,
            dataType: 'json',                   // レスポンスのデータ型
            success: function(obj) {      // 成功時の処理
                if(obj.err==""){
                    location.reload();
                    return false;
                }else{
                    var strComment = obj.err;
                    alert(strComment);
                    $("#isubmit").prop('disabled', false);
                }
                return false;
            },
            error: function(e) {                 // HTTPエラー時の処理
                var strComment = 'Server Error. Please try again later.';
                alert(e);
                $("#isubmit").prop('disabled', false);
            }
        });
    });
</script>

非同期処理でファイルを送る方法の勘所は2箇所。

        var formdata = new FormData($("#iform").get(0));//form ID

 

            processData: false,
            contentType: false,

これが大事な箇所です。この2箇所がないとファイルの非同期は
成立しません。
 

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

'disabled', 'Server Error, contentType, form ID, function, iform, index.php, isubmit, location.reload, new FormData, obj.err, Please try again later, processData, prop, return false, script type, script&gt, var formdata, var strComment, ファイル,

非同期通信の改良版{jsonで非同期}

2015.07.22

Logging


 
つい最近、この方法を知った自分です・・・。それまではこういう方法で返せると思っていなかったというかソコまで考えていなかったです。ちなみに、このjson形式で送信すると複数のデータがやりとりできるので便利です。グーグルでjson形式で非同期受信などとググるとサンプルコードがでてきます。php結構凄いなとかおもいます。おそらく他の言語でも同じようなことが出来るのだと思います。javaとか確実に出来そうな気がします。
日々、他の人が書いたコードを見ることは勉強になります。こんな書き方があるだなとか、ほんと日々、勉強になります。自分の糧にも繋がります。いま自分がもっともコードを書くときに苦戦するのが変数やオブジェクトの名前付け・・・基本的に自分は英語があまりわからないので、すごく勉強していればよかったなと思うわけです。学生時代には一にも二にも勉強だとおもいます。遊びも大事ですけど・・、やはり勉強していると将来の幅が広がることは間違いないです。
 
サンプルサイトはこちら。https://zip358.com/tool/sample-0722/

<?php
$hoge = $_POST['hoge'];
$obj=array();
$obj["hoge"]="urlエンコードされた文字::".urlencode($hoge)."通常文字::".$hoge;
header("Content-Type: application/json; charset=utf-8");
echo json_encode($obj);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>zip358.com:sample-非同期2</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
   $("#textarea-hoge").keyup(function() {
      $.ajax({
         type: "POST",
         url: "sample-0722.php",
         dataType:'json',
         data: {
              "hoge" : $("#textarea-hoge").val()
         },
         success: function(data) {
            $("#hoge2").text(data.hoge);
         },
         error:function(data) {
         }
      });
   });
});
</script>
</head>
<body>
		<br><br>文字をURLエンコード処理して返します。何か入力してください。<br>※非同期通信なので性格に処理してくれるわけではありません。<br><br>
        <textarea id="textarea-hoge" rows="10" cols="100"></textarea>
		<br>
		<div id="hoge2"></div>
</body>
</html>

 

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

AM, body&gt, br&gt, code.jquery.com, data.hoge, DOCTYPE html&gt, function, head&gt, hoge2, jquery-1.11.2.min.js, jquery-migrate-1.2.1.min.js, meta charset, sample-0722.php, script src, script&gt, textarea id, textarea-hoge, textarea&gt, title&gt, utf-8, zip358.com,

昨日の続き、cronPHP(´Д`)、一つのジョブから複数のPHPファイルを実行させる方法。

2015.06.25

Logging

<?php
//5分刻みに対して有効な無限クローン 処理が負荷の場合どうなるかは知りません。
date_default_timezone_set('Asia/Tokyo');
class cron{

    public function d_m($obj)
    {
            if($obj->m==="*")return true;
            if(preg_match("/,/",$obj->m))return $this->comma($obj->m,date("m"));
            if((int)$obj->m === (int)date("m"))return true;

            return false;
    }

    public function d_d($obj)
    {
            if($obj->d==="*")return true;
            if(preg_match("/,/",$obj->d))return $this->comma($obj->d,date("d"));
            if((int)$obj->d === (int)date("d"))return true;

            return false;
    }

    public function d_H($obj)
    {
            if(preg_match("/\*\/[0-9]{1,2}/",$obj->H)){
                $H = explode("/",$obj->H);
                if((int)$H[1]>0 && ((int)date("H") % (int)$H[1])===0)return true;
            }else{
                if($obj->H==="*")return true;
                if(preg_match("/,/",$obj->H))return $this->comma($obj->H,date("H"));
                if((int)$obj->H === (int)date("H"))return true;

            }
            return false;
    }

    public function d_i($obj)
    {
            if(preg_match("/\*\/[0-9]{1,2}/",$obj->i)){
                $i = explode("/",$obj->i);
                if((int)$i[1]>0 && ((int)date("i") % (int)$i[1])===0)return true;
            }else{
                if($obj->i==="*")return true;
                if(preg_match("/,/",$obj->i))return $this->comma($obj->i,date("i"));
                if((int)$obj->i === (int)date("i"))return true;

            }
            return false;
    }

    //曜日 0=日曜日 6=土曜日
    public function d_w($obj)
    {
            if((int)$obj->w[date("w")]===1)return true;
            return false;
    }

    public  function comma($c="",$t=""){
        if($c==="")return false;
        if($t==="")return false;
        $flg = false;
        foreach(explode(",",$c) as $cc){
            if((int)$cc===(int)$t)$flg = true;
        }
        return $flg;
    }


    public function d_command($obj){
        if($obj->command){
            exec($obj->command . " > /dev/null &");
        }
        return true;
    }

}
if ($argv[1]) {
   $filename = $argv[1];
    if(is_file($filename)){
        $jsn = json_decode(file_get_contents($filename));
        $cron = new cron();
        try {
            foreach($jsn as $obj){
                if($cron->d_m($obj)){
                    if($cron->d_d($obj)){
                        if($cron->d_H($obj)){
                            if($cron->d_i($obj)){
                                if($cron->d_w($obj)){
                                    $cron->d_command($obj);//波動拳{{{{
                                }
                            }
                        }
                    }
                }
            }
        } catch (\Throwable $th) {
            print $th->getMessage();
        }
    }
}

 
この頃、ネタがないので手抜き投稿です。気づいた人どのぐらいいるのだろうか?
Qiitaに公開しました。https://qiita.com/question909/items/8f1df9b62ab4fba76243

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

39, 5, Asia, class, comma, cron, cronphp, date, default, function, gt, if, int, lt, match, obj, php, preg, public, quot, retu, return, set, this, timezone, Tokyo, true, クローン, ジョブ, ファイル, 一つ, 処理, 分刻み, 場合, 実行, 方法, 昨日, 有効, 無限, 複数, 負荷,

cronPHPを作ってみた朝の続き。

2015.06.24

Logging


 
cronPHPを作ってみた朝の続き・・・たぶん、コレだけで十分かと思います(稼働させてないのでどう動くかは不明?)。仕事帰って作りました。この頃、もっと勉強しないとなと思うこの頃です。いまの自分に足りないのは間違いなく技術力です、あとタイピングとか・・・かなり遅いので生産性がかなり低いです。英語を打つのに遅すぎる・・・・。日本語はまぁまぁ早いのですけど。キーを覚えているというよりは何となく覚えているので・・・・なぜ、タイピングできるのか自分でも不思議なのです。
 

追記2022/09/06:詳しくは、こちらを参照くださいませ

<?php
//5分刻みに対して有効な無限クローン 処理が負荷の場合どうなるかは知りません。
date_default_timezone_set('Asia/Tokyo');
class cron{

    public function d_m($obj)
    {
            if($obj->m==="*")return true;
            if(preg_match("/,/",$obj->m))return $this->comma($obj->m,date("m"));
            if((int)$obj->m === (int)date("m"))return true;

            return false;
    }

    public function d_d($obj)
    {
            if($obj->d==="*")return true;
            if(preg_match("/,/",$obj->d))return $this->comma($obj->d,date("d"));
            if((int)$obj->d === (int)date("d"))return true;

            return false;
    }

    public function d_H($obj)
    {
            if(preg_match("/\*\/[0-9]{1,2}/",$obj->H)){
                $H = explode("/",$obj->H);
                if((int)$H[1]>0 && ((int)date("H") % (int)$H[1])===0)return true;
            }else{
                if($obj->H==="*")return true;
                if(preg_match("/,/",$obj->H))return $this->comma($obj->H,date("H"));
                if((int)$obj->H === (int)date("H"))return true;

            }
            return false;
    }

    public function d_i($obj)
    {
            if(preg_match("/\*\/[0-9]{1,2}/",$obj->i)){
                $i = explode("/",$obj->i);
                if((int)$i[1]>0 && ((int)date("i") % (int)$i[1])===0)return true;
            }else{
                if($obj->i==="*")return true;
                if(preg_match("/,/",$obj->i))return $this->comma($obj->i,date("i"));
                if((int)$obj->i === (int)date("i"))return true;

            }
            return false;
    }

    //曜日 0=日曜日 6=土曜日
    public function d_w($obj)
    {
            if((int)$obj->w[date("w")]===1)return true;
            return false;
    }

    public  function comma($c="",$t=""){
        if($c==="")return false;
        if($t==="")return false;
        $flg = false;
        foreach(explode(",",$c) as $cc){
            if((int)$cc===(int)$t)$flg = true;
        }
        return $flg;
    }


    public function d_command($obj){
        if($obj->command){
            exec($obj->command . " > /dev/null &");
        }
        return true;
    }

}
if ($argv[1]) {
   $filename = $argv[1];
    if(is_file($filename)){
        $jsn = json_decode(file_get_contents($filename));
        $cron = new cron();
        try {
            foreach($jsn as $obj){
                if($cron->d_m($obj)){
                    if($cron->d_d($obj)){
                        if($cron->d_H($obj)){
                            if($cron->d_i($obj)){
                                if($cron->d_w($obj)){
                                    $cron->d_command($obj);//波動拳{{{{
                                }
                            }
                        }
                    }
                }
            }
        } catch (\Throwable $th) {
            print $th->getMessage();
        }
    }
}

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

06, 09, 2022, 39, 5, Asia, class, cron, cronphp, date, default, function, lt, nbsp, obj, php, public, set, timezone, Tokyo, いま, かなり, キー, クローン, こちら, コレ, ダイビング, 不思議, 不明, 仕事, 処理, 分刻み, 勉強, 参照, 場合, 技術力, 日本語, 有効, , 無限, 生産性, 稼働, 自分, 英語, 負荷, 追記, ,

jQueryでローディングって検索すると。

2015.05.20

Logging


 
jQueryでローディングって検索すると何やらいろいろヒットしました。なるほど、そういう事なのか、以外にも短いコードで書けるだなということが分かって目から鱗が落ちました。ロードされるまでGif動画を表示させてロード後切り替えているだけなんだ。jQueryってすごいですね。ちなみにjQuery.event.add(window,”load”,function(){…} こう書けばデータが読み込まれた後に処理が実行されます。ちなみにこの場合、HTMLや画像などのデータが読み込まれるまでGif画像を表示させる方法ですが、非同期通信を行っている間、ローディングのGif画像を表示させて普通に切り替える事も可能なんだということで、BBSもどきにその機能をつけてみました。コメントが表示されるまでローディング画像を表示させています。
https://zip358.com/tool/BBS

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

AM, BBSもどき, function, Gif動画, Gif画像, html, jQuery.event.add, load, window, コード, コメント, データ, ローディング, ローディング画像, ロード後, 以外, 処理, 方法, 機能, 短いコード, 非同期通信, ,

( #PHPサンプル )非同期通信のPHPサンプルコードを作ってみましたのでどうぞ。

2015.03.01

Logging


非同期通信で入力した文字をURLエンコード して返す、コードを書いてみましたのでどうぞ。お使いください。ただし、この処理には欠陥があって処理に負荷がかかると上手く結果を返してくれない恐れがあります。非同期処理なので処理するプログラムにばんばんと値を投げますが、返答を待たずに次の処理を投げるので、どの処理が最初に返ってくるのかは、わからないのです。一見、うまく動いてそうですけどただ、処理に負荷がかかっていないのでうまく処理された状態になっているだけです。なので、非同期処理を使う場合は、投げる値にID(順番)を付与して処理しないといけないです。
トイウコトデ、サンプルコードを置いときますのでお使いください。(デモサイトこちら
https://zip358.com/tool/sample-0301.zip(DL)
ソースは下記参照
HTML側(JQuery側)のソース=処理を投げる側=処理された結果を出力する側。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>zip358.com:sample-非同期</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
   $("#textarea-hoge").keyup(function() {
      $.ajax({
         type: "POST",
         url: "sample-0301.php",
         dataType:'html',
         data: {
              "hoge" : $("#textarea-hoge").val(),
         },
         success: function(data) {
            $("#hoge2").text(data);
         },
         error:function(data) {
         }
      });
   });
});
</script>
</head>
<body>
		<br><br>文字をURLエンコード処理して返します。何か入力してください。<br>※非同期通信なので性格に処理してくれるわけではありません。<br><br>
        <textarea id="textarea-hoge" rows="10" cols="100"></textarea>
		<br>
		<div id="hoge2"></div>
</body>
</html>

PHP側のソース=処理する側。

<?php
$hoge = $_POST['hoge'];
echo "urlエンコードされた文字::".urlencode($hoge)."通常文字::".$hoge;
?>

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

AM, body&gt, br&gt, code.jquery.com, DOCTYPE html&gt, function, head&gt, hoge2, html lang, jquery-1.11.2.min.js, jquery-migrate-1.2.1.min.js, meta charset, sample-0301.php, script src, script&gt, textarea id, textarea-hoge, textarea&gt, title&gt, zip358.com, トイウコトデ,