トランスビットの開発ノート

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

jQueryのドロワープラグインSlidebarsが、Androidでちょっとした問題を起こしていた件について

仕事が終わってまったりしていたら、トランスビットの外の人に「これ原因突き止めといて。じゃ、出かけてくるから!」って投げられた宿題の話です。

AndroidのChromeでページを一気にスクロールさせていると、footerを表示するあたりで一セクション前の部分まで勝手にスクロールして戻ってしまうので、正常な状態に直す。

他のデバイスではなんともないので、cssかscriptだろうとあたりをつけて探っていくと、Slidebars(2系)でした。
スクロールするのみでドロワーメニューをタップしていないにもかかわらず、slidebars.jsが動いて何らかの処理をしてしまう……。
ということで、slidebars.jsを見ていくと、一番最後にありました!

//459行目(最後から2行目)をコメントアウト

//$( window ).on( 'resize', this.css.bind( this ) );

PCでウインドウ幅を狭めてスマホ版表示にした時、ドロワー表示用のボタンが出てくるようになっています。
このドロワー表示用のボタンをタップしてドロワーメニューを表示させたままウインドウ幅を広げ、PC版表示にした時、ドロワーメニュー用の領域をきれいになかったことにしてくれるのが、この一文です。
なので、この一文がないと、ドロワーメニューを表示させたままウインドウ幅を広げPC版表示にした時、ドロワーメニュー用の領域が白い帯として残ってしまいます。

そもそもトランスビットではスマホ版でしかドロワー使わないということもあるのですが、

  • PCでサイト閲覧してて
  • 320pxまでウインドウ幅狭めてスマホ表示にして
  • ドロワー出して
  • 更にそのままウインドウ幅広げてPC表示に戻したりする

そんな人はいないんじゃないか?

という性善説で、トランスビットでは459行目をコメントアウトして問題なしとなりました。
これで宿題クリアです。

Androidでスクロールすると、ウインドウ再描画してるみたいやなーって思うときがあったんですが、リサイズしてたんですね。
cssやscriptの読込順とかなんか色々関係してるんでしょうか……リサイズ……謎です。

Filed under: ,

IE10とIE11で、背景画像とグラデーションを重ね付け

久しぶりにIEです。
backgroundにまとめて書くと、IE10と11では背景画像もグラデもでません。
edgeなら問題ないんですけどねぇ。

  /* 何も出てこない */
    background: url("背景画像") center top no-repeat,-webkit-linear-gradient(top, #色, #色々 ),linear-gradient(to bottom,#色, #色々);

なので、面倒ですが、下のように書かないといけません。
この時、背景画像を先に記述することが大切です。

  /* 面倒でも分ける */
    background-color: #背景色;
    background-image: url("背景画像"), -webkit-linear-gradient(top,#色, #色々);
    background-image: url("背景画像"),linear-gradient(to bottom,#色, #色々);
    background-position: center top;
    background-repeat: no-repeat;

いつまで上のようなことしないといけないのかなーと気になったのでちょっと調べてみました。
引用中の表が2016年1月時点でのWindowsのIEサポート状況です。

マイナビニュース:IE10、IE9、IE8のサポート終了

2016年1月のアップデートの段階で、次のオペレーティングシステムおよびInternet Explorerがサポートされている。

オペレーティングシステム 2016年1月のアップデートでサポートされているIE
Windows Vista SP2 Internet Explorer 9
Windows Server 2008 SP2 Internet Explorer 9
Windows 7 SP1 Internet Explorer 11
Windows Server 2008 R2 SP1 Internet Explorer 11
Windows Server 2012 Internet Explorer 10
Windows 8.1 Internet Explorer 11
Windows Server 2012 R2 Internet Explorer 11
Windows 10 Internet Explorer 11
Windows Server 2016 Preview Internet Explorer 11

Microsoftはこれまでのように1つのOSで複数のバージョンのInternet Explorerをサポートするというポリシーから、それぞれのWindowsで最新版のInternet Explorerのみをサポートするように方針を変更。サポートが終了したInternet Explorerを使い続けると、攻撃を受けるなどセキュリティ上の問題が懸念されるため、サポートが提供されている最新版へアップデートするか、またはセキュリティサポートが提供されている他のWebブラウザへ移行することが推奨される。

『それぞれのWindowsで最新版のInternet Explorerのみをサポート』っていうことですので、WindowsのIEサポート状況と、OSのサポート状況をあわせて表にしてみました。

オペレーティングシステム 2016年1月のアップデートで
サポートされているIE
メインストリーム
サポート終了
延長サポート終了
Windows Vista SP2 Internet Explorer 9 2012/04/10 2017/04/11
Windows Server 2008 SP2 Internet Explorer 9 2015/01/13 2020/01/14
Windows 7 SP1 Internet Explorer 11 2015/01/13 2020/01/14
Windows Server 2008 R2 SP1 Internet Explorer 11 2015/01/13 2020/01/14
Windows Server 2012 Internet Explorer 10 2018/01/09 2023/01/10
Windows 8.1 Internet Explorer 11 2018/01/09 2023/01/10
Windows Server 2012 R2 Internet Explorer 11 2018/01/09 2023/01/10
Windows 10 Internet Explorer 11 2020/10/13 2025/10/14
Windows Server 2016 Preview Internet Explorer 11 2022/01/11 2027/01/11

Vistaはあと一か月足らずで延長サポート切れます。さよならVista。
サーバOSをどう考えるかによりますが、クライアントOSでの閲覧者が大半を占めるはずですので、基本的にIE11以降対応で組んだので問題なさそうですね。

それにしても、IE11は息が長そうや……!

Filed under: , ,

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: , ,

見出しタグ内のテキストをtitleタグに設定

やりたいことは至って単純なんです。

  1. headerやfooterはincludeして使いまわすため、header内のtitleタグを各ページに合わせて変化させたい。
  2. 各ページには、見出しタグh2でページタイトルがついている。
  3. だから、それを取ってきてtitleタグに自動で書き加えたら楽な気がする!

jQueryなら簡単なんですが、titleをDOMで出すのは流石に良心が痛むので(SEO的に)、phpでやることにしてググってみました。

↓↓ 辿り着いたありがたいサイトを参考にしてみました。
PHPでWEBページのタイトルを抜き出すサンプル

function get_pagetitle(){
$url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; //当該ページ
$html = file_get_contents($url); //HTML取得
// ↓マルチバイトencode。今回はもとからutf-8なので不要。
// $html = mb_convert_encoding($html, mb_internal_encoding(), "auto" ); 
if ( preg_match( "/<h2 class=\"page_title\">(.*?)<\/h2>/i", $html, $matches) ) {
    $pagetitle = $matches[1]; //h2を丸ごと取得
} else {
    return false;
}

return strip_tags($pagetitle); //タグを除いて、中身だけ返す
}

できたー!
できた……が、file_get_contentsを使わずに、現在のページを舐めることはできないの!?
そして、わかっていたけどpreg_matchの重さは異常!!
たった一つのタグを探し出すための仕掛けなのに……(TT

結論:ファイル名とタイトルの連想配列を作っといて、foreachするのが一番良いと思います。

Filed under: , ,

半年前にEmmet LiveStyleが正式公開されてた件について

半年も気づかなかっただなんて……完全に出遅れた!!orz
と思っていたんですが、意外と気づいてない人の方が多いのかな?あんまり話題になっていないような気もします。

さて、二年ちょっと前、ちょうどこのサイトをリニューアルした頃、Emmet LiveStyleのbeta版を触って遊んだ覚えがあります。確かに便利ではあったんですが、既にcssの記述はSass
(SCSS記法)に移行していたため、拡張子scssのファイルをいじれないEmmet LiveStyleは実用的じゃありませんでした。
ですが、まさしくネックなっていたその部分を克服し、Emmet LiveStyleが正式公開されたそうです。DLは公式からできます。
Emmet LiveStyle 公式サイト

これで、関連づけた.scssをいじれば、ブラウザ(Chrome)をF5しなくても即時反映。
逆もまた然りで、Chromeのデベロッパーズツールでスタイル修正すると、関連づけた.scssに即時反映。

便利!!

まだ少ししか触ってないのですが問題なく動いてくれたので、次のコーディングが楽しみになってきました。

—–
(追記 2016/10/19)

その後、わくわくしながらEmmet LiveStyle使ってみました。今からもう3か月くらい前ですが(笑)
使い心地は、Dreamweaverのcssパネルをいじるかのようなcssコーディングでした。
Sublime Textに出会う前なら、移行してたと思いますが、HayakuやらBourbonやら自分用Mixinやらのぬるま湯に慣れ親しんだ私には、残念ながらまどろっこしくて耐えられず……。
あんまりレビューを見ないと思ったら、私と同じ思いをした人が多かったと……きっとそういうわけだったんですねぇ。なんか悲しい。

実は、Emmet LiveStyleにがっかりした後、構築環境が便利にならないかなーと思ってgulpにも手をだしてみました。
compassより何倍もコンパイルが速いし、オートで画像最適化とかcss最適化とか色々出来て確かに便利なんですけど、プロジェクト毎にgulp用のファイルを用意しなければならなず、管理が煩雑になるのでやめました・というより、決して軽いとは言えないフォルダ、しかも同じものがHDD内に何個もあるなんて、悪!無駄!断捨離断捨離!!というのが本音です。
グループでプロジェクトに当たってるんならいいんでしょうけどねぇ……。
ぴったりの構築環境の構築wって、なかなか難しいです。

Filed under:

iOSの、hover付いてると2回タップ必須なバグについて

こういうの↓があったとしたら…。

<style type="text/css">
.menu{
    width:200px;
    text-align:center;
    background:#f7f7f;
}
.menu::hover{
    background:#e5e5e5;
}
</style>

<ul class="menu">
    <li>
        説明や<img>とかいれつつ
        <a href="link.html">リンク</a>
    </li>
</ul>

理想:リンクを[タップ]する → hoverが適用され背景色が変わり、リンク先にとぶ
現実:リンクを[タップ]する → hoverが適用され背景色が変わる → もう一回リンクを[タップ]する → リンク先にとぶ

ってなることを言っています。
設定されているイベント的には「二つ」なんだから2回タップ、っていう理屈もわからんでもないです。
だたこれってiOS8系で発生してたバグで、iOS9ではちゃんと潰されています。

が、hoverにhoverを重ねてリンクさせるデザイン案件がありまして同様の問題が起こりました。
iOSは最新の9.3.1です。
Androidは平気なのになー……Safariはイベントに対する解釈がかなり違うのかな。

理想:リンクを[タップ]する → 隠れていたBOXがでてくる → BOX内のリンクを[タップ]する → hoverが適用され背景色が変わり、リンク先にとぶ
現実:リンクを[タップ]する → 隠れていたBOXがでてくる → BOX内のリンクを[タップ]する → hoverが適用され背景色が変わる → もう一回リンクを[タップ]する → リンク先にとぶ

どうにかしなくてはいけないと、どうにかしたのが下記scriptです。
htmlは省略。上記htmlのliに、ulネストしてリンクが入ってると思ってください。

//まずはユーザーエージェント確認
var _ua = (function(u){
  return {
    Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1)
    || u.indexOf("ipad") != -1
    || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
    || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
    || u.indexOf("kindle") != -1
    || u.indexOf("silk") != -1
    || u.indexOf("playbook") != -1,
    Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
    || u.indexOf("iphone") != -1
    || u.indexOf("ipod") != -1
    || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
    || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
    || u.indexOf("blackberry") != -1
  }
})(window.navigator.userAgent.toLowerCase());

//PC以外なら
if(_ua.Tablet || _ua.Mobile){ 
        $(".menu li li").on('mouseover',function(){
          window.location=$(this).find("a").attr("href");
        });
}

最初は厳密にtouchイベントを書いてみようとしてたんですが、試しに入れてみたmouseoverが鍵でした。※tapではアウト。
hoverも適用されるし、ページ読み込み中のプログレスバーもきちんと見える。
一先ず解決です。

Filed under: ,