2015年12月24日木曜日

ページネーションに、並び替えや絞り込みがあった場合を調べてみた①

  
こんにちは山田です。
冬至になりましたね。日が短いと観光地が値崩れするので
個人的にはベスト旅行シーズンの到来でウキウキしてしまいます。

さて本日は、
ページネーションについて深堀してみました。

結論からいうとまだよくわかりません。

■そもそもの目的
SEO対策としてURLの正規化をして、検索順位を上げることです。

URLの正規化で、改ページが必要な場合、ページネーションをするべきと
Geogleの推奨があります。
（そもそも、Geogle的には、AllPageViewページを別途用意することを一番推奨しています。）

そしてAllPageViewページではなく、改ページをしたい場合用に、
ページネーションタグが使えるようになっています。
ですので、ページの続きページに該当するページの場合
nextタブを振ってあげればよいです。

■絞り込みや並び替えの時は？
そう、ここの問題にぶつかりました。
ここからがはっきりわかりません。

いろいろぐぐってみて一番わかりやすかったのは以下のページかなと思っています。
↓
rel=“prev”とrel=“next”のページネーションにおける正しい使い方
https://www.suzukikenichi.com/blog/implementing-rel-prev-next-correctly/
ここでは、絞り込みや並び替えの場合は、内容は少し異なるので、
それぞれのパラメータの場合で、ページネーションを入れるべきと言っています。

rel="canonical" 属性におけるURLパラメータの扱いについて
https://productforums.google.com/forum/#!topic/webmaster-ja/G05Zn-b5bG0
一方こちらでは、全体としては、同じコンテンツになるので分ける必要がないという
お話しになっています。

もうちょっと追加調査をしてみようと思います。

2015年12月21日月曜日

モーダルウインドウのプラグインを使ってみた

  
こんにちは山田です。
 今回モーダルウィンドウを実装するにあたって プラグインを使用したのでその覚書です。

 ■そもそも、モーダルウィンドウとは
何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計
 （https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6）

モーダルウィンドウでググると、かなりたくさんプラグインが出ていることがわかりました。
びっくりです。
その中でも一番簡単にできそうなものをチョイスしてみました。

■使用したプラグイン 今回使ったプラグインはこちら
http://zurb.com/playground/reveal-modal-plugin

■3分でわかるモーダルウィンドウ組み込みの流れ

①上記のURLからファイル一式をダウンロードし、目的のディレクトリに配置
②ヘッダー部分にjsの読込を追加
④HTMLに、下記のようなフォーマットで記述する
クリックしてみてください

以上

2015年12月18日金曜日

DOM読み込み時に動作させる　$(document).ready

  
こんにちは山田です。

DOMという言葉を最近知りました。

■DOMとは　：XMLやHTMLで記述された文書をプログラムやスクリプトから参照あるいは操作するための方法を提供する仕組み（出典｜ASCII.jpデジタル用語辞典）

というわけで
DOMの読み込み完了時のみに処理をいれたい時に使う関数の紹介です。
フロントエンドだと、jQueryがやっぱり便利ですね。

■関数はこちら
JavaScript 
jQuery(document).ready(function(){
　//実行したい関数
});

■実際に作ったソース

非表示にしたい要素を隠したり、
タブ付きメニューのタブ部分とパネル部分の初期化を行ってみました。

jQuery(document).ready(function(){
　 //閉じたい要素を閉じたり
 $("#placeCount").css("display","none");
 
 //タブ付きメニューの、タブとパネル部分の初期化
 $("#tab li:first").addClass("tabCurrent");
 $(".panel:not(:first)").hide();
});

2015年12月17日木曜日

任意の位置でタブメニューを開いておく

  
こんにちは山田です。

タブ付きのメニューってありますよね。
それを、初期状態で受け取った数字によって、
開始タブを任意に変えることをやりました。
その備忘録です。
タブとそれに紐づくパネルが同時操作されます。
タブの部分は、クラス名に"tabCurrent"があるもの
パネル部分は、目的のdivタブのみ表示をさせています。



HTML 


    
　　
  • 消防車
    • 
　　
  • 救急車
    • 




　　

  　　　
    
　　　　　　
  • 赤い
    • 
　　　　　　
  • 大型車
    • 
　　　　

　　

　　
JavaScript 

$(function() {
 var num = "<%=ID %>";//サーバサイドから値渡し
 var $currentTab = $("#tab" + num);
 $currentTab.addClass("tabCurrent");
 //パネル側も同様にやる
 var $currentPanel = $("#panel" + num);
 $(".vehiclePropaty").hide();
 $currentPanel.fadeIn("fast");
});

2015年12月16日水曜日

CSSのDisplayプロパティ

  
こんにちは山田です。

JSの制御で、
データがない時は、丸ごと消しときたい時ってありますよね
その時の実装例です。 




件数件



$(function() {
    $('button').click(function(){
        $('div').css('display', 'none');
    });
});

ちなみにjQueryの .hide()はこれと同様にdisplayプロパティのblock→noneの動作をさせることが出来ます。
登録: 投稿 (Atom)