カテゴリーアーカイブ jQuery

著者:杉浦

【Vue】jQueryとVueを共存させる

 デザインはjQueryで作られる、実装はVue.jsで行う。なんやかんやあってこの方式でwebページを作る必要が出てくることがあります。一貫していた方が作りやすいはずなのですが、なんやかんやあってこうなります。
 デザインの実装の際、jQueryとVue.jsを読み込ませるとデザイン時に動いていたイベントが消える時があります。これはVueがテンプレートエンジンも兼ねていることが原因で起きがちです。例えば次の様なシナリオで起きます。

// デザイン時
HTML読み込み完了
↓
jQueryによるイベント付与実行
↓
全てのHTMLに付与されるべきイベントが付与されている

// 実装時
HTML読み込み中、Vue構築中
↓
HTML読み込み完了
↓
jQueryによるイベント付与実行
↓
Vue構築完了。Vue内で定義されたHTML構築を持ってきて描画

 特にVueでAPIの結果をHTMLの一領域に描画する仕組みを作った時はイベントの再定義の絡みで大体こうなります。こうなる時にはVueの中でVueが読み込み完了した場合に実行されるイベントでjQueryによるイベントを定義すると良いです。

export default {
  components: {
  },
  props: {
  },
  data() {
    return {
      
    };
  },
  mounted() {
    // jQueryのイベント付与処理
  },

 このように記述するとコンポーネントが読み込まれるたびにmounted関数が実行され、テンプレート内にjQueryのイベントが付与されます。
 Vue.jsとjQueryの同時実行はJavaScriptファイルが巨大になり初期読み込みが遅くなるため積極的に行うべきでないのですが、デザイナーからいただけるデザインにjQueryでアニメーションがついていることがしばしばあります。そういった際にこのやり方を知っておくと、Vue.jsの便利さから離れないままアニメーションを崩すことも再構築することもなくデザインを再現できます。

  • この記事いいね! (1)
村上 著者:村上

【JavaScript】文字列を扇状に表示するためのスクリプト「Arctext.js」

今回は使わなかったのですが、今後使う機会があるかもしれないので備忘録としてまとめ。
文字列を扇状に表示する方法です。
画像にしてしまうのが一番簡単そうですが、それができない場合には有効です。

そのスクリプトがこちらの「Arctext.js」です。
公式サイトは下記からご確認ください。

Arctext.js – Curving text with CSS3 and jQuery
https://tympanus.net/Development/Arctext/

 

使い方は、まず公式の配布ページから、ソースをダウンロードします。
で、ダウンロードしたファイル内にある jquery.arctext.js を任意の場所にアップロードし、HTML の head 要素内で読み込みます。
なお、こちらの実行には jQuery も必要なので、一緒に読み込みます。
コードは下記のとおりです。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./jquery.arctext.js"></script>

準備はこれでOK。

あとは実装ですが、まず、装飾したいテキストに任意の ID 名を指定します。

<p id='arc-text'>扇状に表示したいテキスト</p>

そして、任意のタイミングで下記の処理を実行します。

$('#arc-text').arctext({radius: 300});

HTML が読み込み終わったタイミングとかでOKだと思います。
なお、上記の記述では、半径 300px の扇状にテキストをカーブさせています。
もう少し急なカーブを描きたい場合は、数値を大きくしてください。

ほかにもオプションがあり、文字列をカーブさせたいけれど、文字の向きはまっすぐなままにしたい、ということもできます。

$('#arc-text').arctext({radius: 300, rotate: false});

また、今までの指定では、山型のカーブになりましたが、dir: -1 というオプションを追加すると、谷型のカーブを描くようにもできます。

$('#arc-text').arctext({radius: 300, dir: -1});

これらを組み合わせれば、文字列を円状に表示することもできますね。

 

以上、文字列を扇状に表示するためのスクリプト「Arctext.js」のご紹介でした。
機会があればぜひ使ってみたいと思います。

  • この記事いいね! (0)
著者:杉浦

お手軽に機能付きテーブルを作るJavaScriptライブラリDataTables

DataTables | Table plug-in for jQuery
 DataTablesはJavaScriptのみでテーブルにページネーション、検索、並び替えを付与するライブラリです。
bootstrap4のスタイルをベースにdatatablesを爆速で利用してみた(CDN利用) – Qiita
に載っているコードをJSFiddleで動かしてみたのが次です。

 きれいなインデントのHTMLコード64行だけで構成されています。要は簡単ということです。tableタグと中身を用意してidをつけて次のコードで適用してもうおおよそ完成です。

$(document).ready( function () {
    $('#myTable').DataTable();
} );

 注意点として大量のデータを扱うのには向いていない点があります。基本ブラウザで閉じて扱うことを前提としており、対象のデータ全体をJavaScriptだけで扱おうとしています。このため大量のデータ(1万件でもう辛い)を扱おうとした場合、テーブルのデータをブラウザに渡すための最初のデータ読み込みでとても時間がかかります。ajaxを用いて外部サーバと連携することで逐次読み込みも可能なのですが、そちらはフォーマットの調整が面倒な上、サーバ上で渡すデータを加工すればDataTablesを用いるまでもありません。
 欠点をあげましたが少なめのデータで機能付きのテーブルを作る際にはとてもいいものです。

  • この記事いいね! (0)
takahashi 著者:takahashi

セレクトボックスを少しリッチにするselect2jsでプルダウンにない値を入力可能にする方法

HTMLのセレクトボックスに機能を追加してリッチにしてくれる”select2“というライブラリがあります。

使い勝手がそこそこいいので、自分も一部のWebアプリで使っていたりします。

具体的にselect2を使うとどうなるかというと

こんな風に、セレクトボックスの選択肢に書式を適用したりできます。

さらに上に見ているテキストボックスですが、

文字を入力するとリアルタイムに選択肢をフィルタしてくれます!

勿論、multipleなセレクトボックスにも対応しています。


これだけでも素晴らしいのですが、折角入力欄があるのでセレクトボックスにない新しい項目も追加できたらいいなぁとふと思ってしまったのですが、調べたところ…

Dynamic option creation – SELECT2

その機能もSelect2に入ってました\(^q^)/

どうやるかというと、
Select2は

$("セレクトボックスのセレクタ").select2();

のように指定することで有効化するのですが、

$("セレクトボックスのセレクタ").select2({
    tags: true
});

という風に引数にオプションを追加すると

入力欄に入力した項目が一覧になかった場合でも、検索ボックスに追加することができます!

この場合、どうなるかというと、select2()をかけた要素のセレクトボックスのvalueの値に、入力した文字がそのまま反映されるので、通常の値の処理と同様に扱うことができます。

ただし、表示上の値とvalueの値を別のものにしているプログラムの場合は、新しく追加された値だけ表示上もvalueの値も入力されたものになりますので注意が必要です。

多機能なセレクトボックスを実装したい方は是非参考にしてみてください。

  • この記事いいね! (0)
takahashi 著者:takahashi

jQueryのいろいろな指定

jQueryを使用するいい点として、DOM(HTML)の操作が簡単になるという利点があります。

jQueryで各要素に対して処理を書く際、どの要素に対して操作を有効にするのか、という指定は”セレクタ”を用いて行います。

//DOMのidで指定
$("#id").処理;

とか、

//DOMのクラスで指定
$(".class").処理;

のようにクラス、idで指定する方法や

$('table').処理;

のようにHTMLの要素で指定したりできます。
さて、次のようなHTMLがあるとします。

<html>
  <head><!-- hogehoge... --></head>
  <body>
    <table>
      <tr>
        <th>hoge1</th>
        <th>hoge2</th>
      </tr>
      <tr>
        <td id="test1">fuga1</td>
        <td id="test2">fuga2</td>
      </tr>
      <tr>
        <td id="test3"><a href="#">fuga3</a></td>
        <td id="test4">fuga4</td>
      </tr>   
    </table>
  </body>
</html>

少々雑な例ですが、こういったHTMLのページがあるとして、例えばtdのidがtest1、test2のものが入っているtrに対してのみ何か処理をしたい、という場合は、trにはidやclassが降られていないので、これらでは指定できませんし、tr要素を指定してしまうと無関係のidがtest3、test4であるtdが格納されているtrまで影響してしまいます。

生のHTMLであれば単純にtrにidやclassを指定すれば済むのですが、例えばこれがプログラムで生成しているDOM、特にライブラリやデザインフレームワークなどが生成しているような場合はそういった変更ができない場合があります。

こういった時に、jQueryでは”~の要素の親”や”~の要素の子”、”~の要素の次の要素”のような指定ができるセレクタが用意されています。

例えば今回の場合であれは、

$("#test1").parent().処理;

とすることで、idが”test1″の要素の親の要素、つまり目的のtr要素を指定することができます。
逆に子要素を指定する場合

$("#test3").children().処理;

などとすると指定できます。

他にもjQueryにはいろいろな要素の指定ができます。
こちらのサイトに詳しく書いている方がいましたので是非参考にしてみてください。

jQueryのセレクタメモ – Qiita

  • この記事いいね! (0)
著者:杉浦

多くのcdnリンクを持つcdnjsの紹介

 cdn(contents download link)はjs,cssのライブラリを簡単に読み込む手法です。オープンソース配信サービス、Google Hosted Librariesの紹介で紹介したGoogle Hosted Librariesの様にcdnは多くの場所で配信されています。cdnjsはそのようなcdnの配信リンクをまとめて検索できるサイトです。
 下の画像の様に検索してリンクをコピーするだけでとりあえず使えます。特定のフォーマットで単一のデータを返してくれるAPIも備わっています。
 

 また、cdnjs上でリンクがコピーされた回数をランキングしています。人気が高く、汎用性の高いライブラリが上位に連なっています。jqueryは格別ですね。

  • この記事いいね! (0)
著者:杉浦

マテリアルデザインのさわり

Design – Material Design
マテリアル・デザインって何? Androidデザイン責任者にインタヴュー | ギズモード・ジャパン
 マテリアルデザインの思想が理想とするデザインは脳にスッと入ってくるデザインです。
マテリアルデザインは一貫性のある法則を持つ世界の上でデザインを行うことで、脳にスッと入ってくるデザインを実現しようとします。一貫性のある法則には実世界の一部を再現するような法則が用いられています。ここで一部、とあるのはマテリアルデザインの目的がユーザの理解の促進にあるからです。理解を妨げて、処理を重くするだけの余分な法則を再現する理由はありません。主な法則は、実世界において紙を重ねた時に起きる現象を再現する直感的な法則です。例えば、ページはhogehogeとかかれたカードの集まり(並べてもいいし、重ねてもいい)で構成される。これは実世界の紙を重ねた時の状態を再現する法則です。他には、カード内から画像や文字ははみ出さない、下の要素には上の要素の影が落ちる。これはそれぞれ、紙面からはみ出して宙に浮く画像や文字はない、下の物体には上のカードの影が落ちる、という実世界上の法則の再現です。
 マテリアルデザインの効果の一例が次です。
ヘッダに影がない

ヘッダに影がある

 影がついた場合ヘッダが下の記事欄から独立していることがわかるため、スクロールをしてもヘッダが固定されると連想しやすくなります。

  • この記事いいね! (1)
著者:aoki

jQuery+masonry+autopager で躓く。isAnimated が false にならない!?

久々に頭が痛くなるほど躓きました。
とあるサイトで jQuery + masonry + autopager を使い、pinterest風のタイル表示且つページ遷移のしない読み込み+レスポンシブ対応を行っていました。
コードはこんな感じ


$(document).ready(function() {
    var $container = $('#container');
    $container.imagesLoaded(function() {
      $container.masonry({
          isAnimated : false,
          columnWidth: '.thumb',
          itemSelector: '.thumb'
      });
    });

    var maxpage = 10;
    $('#loading').css('display', 'none');
    $.autopager({
        content: '.grid',
        link: '#next a',
        autoLoad: false,
    
        start: function(current, next){
          $('#loading').css('display', 'block');
          $('#next a').css('display', 'none');
        },

        load: function(current, next){
            $container.imagesLoaded(function() {
                $container.masonry('reloadItems');
                $container.masonry('layout');
            
                $('#loading').css('display', 'none');
                $('#next a').css('display', 'block');
                if( current.page >= maxpage ){
                    $('#next a').hide();す
                }
            });
        }
    });
    $('#next a').click(function(){
        $.autopager('load');
        return false;
    });
});

これで動いてはいたのですが、autopagerで読み込んだ時に読み込んだ要素をレイアウトしなおす関係で上からレイアウトが降ってくるような動きになってしまっていました。
何とかこれを直したいと試行錯誤をしたのですがうまくいかず・・・
そもそも isAnimated が false と指定しているのにアニメーションされてしまうのはなぜ?という事で調べたところ重大なことが分かりました。
isAnimated オプションは昔のバージョンのオプションで最新の物では既に廃止されているオプションという事でした。
それは動かないわ。

という事で対応できるオプションを探したところ、transitionDuration を設定することでアニメーションも解除されうまく表示されるようになりました。


$(document).ready(function() {
    var $container = $('#container');
    $container.imagesLoaded(function() {
      $container.masonry({
          transitionDuration: 0,
          columnWidth: '.thumb',
          itemSelector: '.thumb'
      });
    });

    var maxpage = 10;
    $('#loading').css('display', 'none');
    $.autopager({
        content: '.grid',
        link: '#next a',
        autoLoad: false,
    
        start: function(current, next){
          $('#loading').css('display', 'block');
          $('#next a').css('display', 'none');
        },

        load: function(current, next){
            $container.imagesLoaded(function() {
                $container.masonry('reloadItems');
                $container.masonry('layout');
            
                $('#loading').css('display', 'none');
                $('#next a').css('display', 'block');
                if( current.page >= maxpage ){
                    $('#next a').hide();す
                }
            });
        }
    });
    $('#next a').click(function(){
        $.autopager('load');
        return false;
    });
});

そもそも古い masonry のページをずっと見ていたことが一番の原因ですね。

現在のバージョン(v3)のページはこちらです。
https://masonry.desandro.com/

古いバージョン(v2)はこちら
https://masonry.desandro.com/v2/

  • この記事いいね! (0)
村上 著者:村上

【jQuery】FastClickライブラリを特定の要素のみ無効にする方法【iOS】

Cordova開発をしているとお世話になるライブラリが、この「FastClick」だと思います。
これを使うことで、モバイルでアプリを実行したときのクリックの反応速度がかなり改善されます。
が、ものによっては、この FastClick ライブラリと競合を起こすライブラリもあるようで、今日、まさにその現象に遭遇しました。

 

競合を起こしたライブラリは、OpenstreetMap を使用した地図を表示できる「MapBox」です。
地図の表示の全てに影響するわけではなく、地図に表示したマップピンをクリックして、吹き出しを表示するロジックに影響が出ており、iOS でのみ吹き出しが表示できない状態でした。
クリックの動作をする箇所でのエラーだったので、最初は Click イベントを取得できていないことを疑いましたが、エラーログを見たところ、FastClick との競合が原因でした。

 

解決方法ですが、こちらのサイトを参考にしました。

JS/jQueryでFastClick.jsを使ってスマホのclickイベントの300ms遅延をなくす|ITハット
http://ithat.me/2016/11/06/js-jquery-smartphone-click-event-300ms-delay-fastclick

サンプルに書くほどでもないのですが…対策方法は、FastClick を無効化したい aタグなどの要素に、needsclick というクラスを追加するだけです。

<a class="needsclick">FastClickを無効にしたい要素</a>

特定の要素のみに FastClick を適用する方法もありますが、現在開発中のシステムでは、無効化したい要素がここのみだったので、この方法を採用しました。
ちなみに、特定の要素のみに適用する方法は下記の通りです。

<div>
    <div class="fastclick">
        <!-- FastClickを適用する要素 -->
    </div>
    <div>
        <!-- FastClickを適用しない要素 -->
    </div>
</div>
$(function(){
    FastClick.attach($('.fastclick')[0]);
});

全てに FastClick を適用するときには、下記のように記述します。

$(function(){
    FastClick.attach(document.body);
});

対策としては以上です。

 

ということで、FastClick を一部無効化する方法でした。
ライブラリの競合はやはり厄介ですね。
最悪、FastClick を無効化しなければいけないのでは…と思ったので、解決策があって良かったです。

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】jQueryなしでappend()と同じことを実行する

DOM操作をするときに jQuery の append() を使うことが多いのですが、場合によっては jQuery が使用できないことがあるかと思います。
なので、今回はタイトル通り、jQueryなしで append() と同じことを行う方法についてです。

参考にさせていただいた記事はこちら。

innerHTML より insertAdjacentHTML を使う – Qiita
https://qiita.com/amamamaou/items/624c22adec32515e863b

 

実際のコードはこちら。
今回使うメソッドは、insertAdjacentHTML() というものです。

<div id="parent">
    <p>p要素 その1</p>
</div>
// id=parendの子要素の最下部に要素を追加 append()
var element = document.getElementById("parent");
element.insertAdjacentHTML("beforeend", "<p>p要素 その2</p>");

上記のコードを実行すると、ID が parent の要素の子要素の一番下に、指定したp要素が追加されます。
動作としては、jQuery の append() と全く一緒です。
ちなみに、insertAdjacentHTML() メソッドの第一引数を変更することで、append() 以外の動作を行わせることができます。

簡単に表でまとめてみました。

jQuery insertAdjacentHTML()
append() “beforeend”
prepend() “afterbegin”
before() “beforebegin”
after() “afterend”

jQuery で行えるDOM要素の挿入は、こちらの方法でも問題なくできるようです。

なお、もしHTML文字列ではなく、HTML要素を指定したい場合には、insertAdjacentElement() が利用できます。
第一引数は、insertAdjacentHTML() と全く同じで、追加したい要素を指定する第二引数のみが違います。
こちらは、実装しているコードで使い分けてください。

 

ということで、jQueryなしで append() などと同じことを実行する方法でした。
システムによっては、jQueryを使えないこともあるかと思うので、この方法は覚えておきたいと思います。

  • この記事いいね! (1)