月: 2020年8月

文字を数えるVue.js版

最近更新した文字を数えるWebページ、今、Vue.js版を作っています。今日、かなりいい線までできたのですが、実際に使ってみると、いまいち。

iQueryと違い、非同期通信が特殊で、そのまま移植という訳にはいかず、今、苦労しているところです。使っているパーツを組みなおしているところですが、根本的なところから見直ししないと、すごく複雑になってしまう。

正直、今日作った版は、ぎりぎり動作するものの、複雑すぎて動作が怪しい。これでは、使えないレベル。

明日、また、見直してみるつもりです。

文字を数える、修正しました

いつからか忘れましたが、いつもライターの仕事で使っている自作の文字数を数えるWebページで、Yahooの校正サービスが効いていませんでした。それが、ちょっと不便だなと感じたので、今日、直しました。

これ、jQueryのバージョンのせいかな、と思っていたのですが、ブラウザの更新の伴うJavaScriptの仕様変更かも、と思っています。

ということで、また、Yahoo構成のメッセージが見れるようになりました。微妙な指摘もありますが、なるほどと思える指摘もあるので、ちょっとは改善するかも。

http://muzina630.wp.xdomain.jp/js/m08.html

そいうえば、m08の08は、バージョンのつもりだったのですが、この数字は今回、変更してません。機能の追加等は無いので。

Vue.jsを学習中

以前、少しいじったものの、HTML側を大幅に書き換えることになるのがちょっと、と思っていたVus.jsを、再度、調べています。jQueryの置き換えにどうかなと思ったのですが、やはり難しいな、というのが最初の印象です。

かなり前にCakaphpを調べた時も、使い方の前に、フレームワークという考え方が理解できず、最初のうちはどう使えば良いか悩んだのを思い出しました。

個人的な感想は、Vue.jsは、JavaScriptというよりも、JavaScriptを使ったVue.jsというフレームワークを全体とした新しい開発の仕組み、という感じがします。

なお、以前、触ったことがあったので、ページ内の処理は思い出しました。しかし、非同期通信は、かなり悩んだというのが正直なところです。今回、本を買わずに、ネットの情報だけで学んだのが敗因と言えるかもしれません。

以前から、こういう技術的な情報は、Quiitaの記事がヒットしやすいのですが、ここに掲載されているサンプルは、そのままで動かないことが多い。しかも、サンプルの説明も中途半端。できれば、参考にしたくないのですが、他のページもいまいちだと、Quiitaの記事を頼るしかない。そうすると、学習に余計な時間がかかってしまう。今回も、こういった感じではまりました。

一応、目的のサンプルコードができたので、応用してみようかと思っています。

var vueobj = new Vue({

  el: '#main',

  data: {

    message: '',

    views: '',

    xml: '',

    msg: ''

  },

  methods: {

    get: function() {

      this.views = '';

      var self = this;

      var url = 'http://localhost/vue/xml2.php';

      var params = new URLSearchParams();

      params.append('id', '11' );

      params.append('msg', this.msg );


      axios

       .post(url, params)

       .then(function(res){

         self.message = res.data;

         self.xml = res.data;

       })

       .catch(error => console.log(error))

    },

    view: function(){

      this.message = 'このHTMLは、Vue.jsを使っています。';

      var id = getTagName( this.xml, "id" );

      var msg = getTagName( this.xml, "msg" );

      this.views = "id:" + id + " , msg:" + msg ;

    },

    clear: function(){

      this.message = '';

      this.views = '';

      this.msg = '';

    }

  }

})


function getTagName( text, tag ) {

  var stag = "<" + tag + ">";

  var p1 = text.indexOf( stag ) + stag.length;

  var etag = "";

  var p2 = text.indexOf( etag );

  var vals = text.substr( p1, p2-p1 );

  return vals;

}


HTMLは、省略してます。

axiosで、postを送付する際、urlとURLSearchParams()で作った変数を指定して、送信してます。また、これに続くthenのres.dataで受け取っています。さらに受け取ったデータは、XML形式で、別のトリガーを使ってそれを加工し、Webブラウザに表示してます。


axiosの中に書こうとすると、いろいろ制限があってうまく動作しないのが難しい点ですね。また、HTMLとVue.jsのdataで定義する変数が密接に結びついているので、そこをうまく利用するのがポイントのようです。