トランスビット
トランスビットの開発ノート Webサイト制作に役立つTipsやトラブルシューティングなどの備忘録

jQueryのドロワープラグインSlidebarsとスムーススクロール

今やってる案件でiPhoneでの読込が異常に遅く、外の人から「重いから軽くして」と頼まれました。
原因はドロワーでした。script切るとサクサク…。
ちなみに、jQueryのドロワーといえば、これだと思っております。おすすめです。
Slidebars

バージョンが2に上がったことは去年の11月には既に知っていた(!)のですが、メニューとコンテンツのゾーン分けにcanvas使うようになっていて、既存のcssの書き換えやらなんやらに時間取られたら嫌やなーと、手を出しておりませんでした。(jQueryは1.12以降)
そして、canvasっていうと図形描写やんか、と思っていたので、正直戸惑いも強く。
html5ゲームとか作る以外にも使い道あったんやなぁ、と。

で、最初に入れていたバージョン1系を2系に換装したら、読込もサクサクになって喜んでいたんですが、今度はTOPに戻るボタンが動かない……。
どう考えてもSlidebarsが真っ黒なのでよーく見てみると、slidebars.min.cssのせいでした。

/* ---------------------------------------------
body,html{width:100%;height:100%;overflow:hidden}
が原因。
実はwidth:100%は無罪なんですが、なくても困らない。
--------------------------------------------- */
[canvas],[off-canvas*=push]{z-index:1}[off-canvas*=reveal],[off-canvas*=shift]{z-index:0}[canvas=container],[off-canvas],body,html{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}/*body,html{width:100%;height:100%;overflow:hidden}*/[canvas=container]{width:100%;height:100%;overflow-y:auto;position:relative;background-color:#fff;-webkit-overflow-scrolling:touch}[canvas=container]:after,[canvas=container]:before{clear:both;content:'';display:table}[off-canvas]{display:none;position:fixed;overflow:hidden;overflow-y:auto;background-color:#000;color:#fff;-webkit-overflow-scrolling:touch}[off-canvas*=top]{width:100%;height:255px;top:0}[off-canvas*=right]{width:255px;height:100%;top:0;right:0}[off-canvas*=bottom]{width:100%;height:255px;bottom:0}[off-canvas*=left]{width:255px;height:100%;top:0;left:0}[off-canvas*=overlay]{z-index:9999}[canvas],[off-canvas]{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);-webkit-transition:-webkit-transform .3s;transition:transform .3s;-webkit-backface-visibility:hidden}[off-canvas*=shift][off-canvas*=top]{-webkit-transform:translate(0,50%);transform:translate(0,50%)}[off-canvas*=shift][off-canvas*=right]{-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}[off-canvas*=shift][off-canvas*=bottom]{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}[off-canvas*=shift][off-canvas*=left]{-webkit-transform:translate(50%,0);transform:translate(50%,0)}@media print{[canvas]{-webkit-transform:translate(0,0)!important;-ms-transform:translate(0,0)!important;transform:translate(0,0)!important}[off-canvas]{display:none!important}}

これで次回から安心。

Filed under:

Event OrganiserのカレンダーウィジェットのタイトルをY年Fにする

Event Organiserのカレンダーウィジェットのタイトル……っていうかキャプションの日付表示が、’F Y’なのを、’Y年F’にする

要は、こういうことです。
widget_calendar

方法:1 直接プラグインをいじる。

編集するファイルは event-organiser/classes/class-eo-calendar-widget.php です。
プラグインアップデートの度に作業が必要な愚策ですが、一応目的は果たせます。

 
// 編集ファイル:event-organiser/classes/class-eo-calendar-widget.php

// $title = sprintf( '<caption> %s </caption>', esc_html( eo_format_datetime( $month, 'F Y' ) ) );
$title = sprintf( '<caption> %s </caption>', esc_html( eo_format_datetime( $month, 'Y年F' ) ) );

方法:2 function.phpでフィルターフックをかける。

やるなら断然こちらですね。
eo_format_datetime関数を調べると、フィルターフックがeventorganiser_format_datetimeということと、その使い方までわかります。
本当、コーデックス様々です。

ちなみに、同じようにしたいと思った人と、それができた人を見つけました。
WordPress プラグイン Event Organiserの日付表示について

上記プラグインにてウィジェットでカレンダーを表示しています。

カレンダーの日付部分が ◯月 2016といった表示になってしまいます。これを 2016 ◯月という風に年・月に表示を変更したいのですがプラグインのファイルを探してみても変更場所がみつかりません。
変更箇所がわかる方、どうかお教えいただけませんでしょうか

(captionの部分です)
—–
回答:こんな感じですかね。

// functions.php
function my_eventorganiser_format_datetime( $formatted_datetime , $format, $datetime ) {
    if ( $format === 'F Y' ) {
        return eo_format_datetime( $datetime, 'Y年 F' );
    } else {
        return $formatted_datetime;
    }
} // 未テスト
add_filter( 'eventorganiser_format_datetime', 'my_eventorganiser_format_datetime', 10, 3 );

残念ながら、質問者さんは実現できなかったようです。
私もやってみたんですが、すぐにはダメでした。後でできました。
というのも、ウィジェットを置きなおしてみたら、それまで効いていなかったフックが効いたんで。

別にオチをつけたかったわけじゃないんですけど……色々やってみるもんですね。

Filed under:

作ったはずのピンがGoogleMapに表示されない件

通常トランスビットでGoogleMapを設置する際には、アナリティクスが使えることもあって、お客様専用Googleアカウントをとった後、APIキー使って設置することが多いです。
今回も、そのAPIキーで設置してるものについてのことです。

scriptでピン(マーカー)をきちんと設定したはずなのに、なぜか表示されない。
オリジナルの画像を使ったわけでもないし、設定はあっているからデフォのピンは読み込まれているはず……cssがコンフリクトしているに違いない!

で、探したらやっぱりコンフリクトしている所がありました。見つかってよかった(=_=;

レスポンシブなサイトの場合、AndroidのデフォルトブラウザとAndroidのchrome、要するにAndroidのために、コンテンツ幅が勝手に縮小されたりフォントサイズが勝手に大きくなったりする現象を抑えるためのcssを書いています。
↓うちではこんな感じ。

p,dt,dd,li,div{
background-image: url('../img/android_bug.png'); // 透過pngで幅対策
max-height: 100%; // フォントサイズ対策
}

この、divについたフォントサイズ対策のmax-heightが犯人でした。
なので、↓のようにmax-heightをなくしてやります。※GoogleMap用のidは適当。

#googlemap{
max-height: none;
}

これで無事、いつもの赤いマーカーが表示されました。
やれやれだぜ。

Filed under:

アンカー付リンクから、スライドトグルさせる

もうちょっとタイトル分かりやすくならんかな、と思ったんですが諦めました。
Q&Aとかでよくある、質問行をクリックすると隠れていた回答ボックスが出てくるトグル関連の話です。
基本、cssは略してます。
↓こういう定義リストをトグルさせるのは簡単。

<dl class="qa">
  <dt>愛媛県の県庁所在地は?</dt>
  <dd>松山市</dd>
  <dt>愛媛県の県の花は?</dt>
  <dd>みかんの花</dd>
  <dt>愛媛県の県の木は?</dt>
  <dd>マツ</dd>
</dl>

<style type="text/css">
  dd{display:none;}
</style>
  $(function(){
    $(".qa dt").on("click", function() {
      $(this).next('dd').slideToggle();
    });
  });

もう一歩進んで、質問へのアンカー付きリンクでページを開いたと同時に、回答部分を表示させる方法。
スムーススクロールさせたいなら、return falseの前に処理を書けばOK。

<dl class="qa">
  <dt id="qa_where">愛媛県の県庁所在地は?</dt>
  <dd>松山市</dd>
  <dt id="qa_flower">愛媛県の県の花は?</dt>
  <dd>みかんの花</dd>
  <dt id="qa_tree">愛媛県の県の木は?</dt>
  <dd>マツ</dd>
</dl>

<style type="text/css">
  dd{display:none;}
</style>
  $(function(){
    // URLのハッシュを取得
    var urlHash = location.hash;
    if(urlHash){
      $(urlHash).next('dd').slideToggle();
      return false;
    }

    $(".qa dt").on("click", function() {
      $(this).next('dd').slideToggle();
    });
  });

ここからさらに進んで、質問部分をタブメニューっぽく横に並べて、スライドトグルするやつ。

<ul class="q">
  <li class="q_where">愛媛県の県庁所在地は?</li>
  <li class="q_flower">愛媛県の県の花は?</li>
  <li class="q_tree">愛媛県の県の木は?</li>
</ul>
<div class="a">
  <div id="qa_where"><p>松山市</p><p class="close">×</p></div>
  <div id="qa_flower"><p>みかんの花</p><p class="close">×</p></div>
  <div id="qa_tree"><p>マツ</p><p class="close">×</p></div>
</div>

<style type="text/css">
  .q li{
    float:left;
    width:200px;
    border:1px solid #ccc;
  }
  .a div{display:none;}
</style>
  $(function(){
    // アンカーリンクからスライドトグル。ついでにスムーススクロール  ---------
    // URLのハッシュを取得。
    var urlHash = location.hash;
    if(urlHash){
      $(urlHash).slideToggle();
      var href= urlHash;
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, 1000, 'swing');
      return false;
    }

    $(".qa dt").on("click", function() {
      $(this).next('dd').slideToggle();
    });

    // 閉じるボタン  ----------------------------
    $(".close").on("click", function() {
      $(this).parent().slideToggle();
    });

    // メニューからスライドトグル  ---------------
    $(".q li").on("click", function() {
      // メニューのclassを取得し、余分をとる
      var q = $(this).attr("class").replace(/q_/g,'');

      // div総当たり
      $(".a div").each(function(i) {
        // divのidを取得し、余分をとる
        var qa = $(this).attr("id").replace(/qa_/g,'');
        // メニューとmatchしたらトグル
        if (qa .match(q)) {
            $(this).slideToggle();
        }else{
            $(this).hide();
        }
      });
    });
  });

別にタブでいいんじゃない?と思うでしょうが、色々理由があって画面稼ぎしないといけない、そんなニッチな仕様の時にどうぞww

Filed under:

見出しタグと同じテキストをtitleタグに設定

ちょっとだけ題名を変えて、前回結論が出たやつを書いてみました。
やりたいことは↓です。

  1. headerやfooterはincludeして使いまわすため、header内のtitleタグを各ページに合わせて変化させたい。
  2. urlに対応するページタイトルを設定しておき、titleタグに書き加える。
function get_pagetitle(){

// 現在のurlを取得
$url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$domain = 'http://●●●●●/';
$pagetitle; // 入れ物

// 配列に、urlとページタイトルを入れておく
$pages = array (
  array ( 'href' => $domain.'cat.php', 'text' => '猫派' ),
  array ( 'href' => $domain.'dog.php', 'text' => '犬派' ),
  array ( 'href' => $domain.'bird.php', 'text' => '鳥派' )
);

// 配列の中で、現在のurlと対応するものを判別、その後、textを取得。
foreach($pages as $page){
  if($page['href'] == $url){
    $pagetitle = $page['text'];
  }
}
return $pagetitle;
}

これで、ページタイトルをゲットできるようになりました。
せっかくの配列なので、引数を設定したらfooter用のナビゲーションを書き出せるようにしてもいいかもです。

Filed under: ,