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

wp_get_archives()で出力されるURLを一部変更する

カスタム投稿タイプにカスタムタクソノミーをつけ、パーマリンク設定やfunction.phpをカスタマイズし、何とか思惑通りのパーマリンクに変更……
↓↓↓
[ターム] https://ドメイン/カスタム投稿タイプ名/ターム名/
[記事] https://ドメイン/カスタム投稿タイプ名/ターム名/記事ID/
[月別アーカイブ] https://ドメイン/カスタム投稿タイプ名/date/年/月/
↑↑↑
こんな感じにした時の話です。

WordPressのバージョンも、各種プラグインのバージョンも最新で、テーマは一から作ってすっきり。そんな状態で、テンプレートにwp_get_archives()使って月別アーカイブ一覧を出力したら、なんと https://ドメイン/カスタム投稿タイプ名/年/月/ といったリンクが生成されました……orz

プラグインのコンフリクトを疑ってみたり、パーマリンクの再設定をしてみたり、思いつくことはいろいろやってみたんですが、なんとも上手くいかず。
思惑通りのパーマリンクは得られていることだし、wp_get_archives()のほうをいじってお茶を濁すことにしました。

wp_get_archives()では、引数に echo => false としてやると、値を表示じゃなくって値を取得することができます。なのでその後、str_replaceでdateを入れてやればオッケーというわけです。

例えば、infoというカスタム投稿タイプだったとしたら……

$args= array(
  'type' => 'monthly',
  'echo' => false,
  'post_type' => 'info'
);
$monthly_list = wp_get_archives($args);
$monthly_list = str_replace('/info/', '/info/date/', $monthly_list);

echo $monthly_list;

これで月別アーカイブ一覧のリンクが正常に!
ただし、今後Wordpressやプラグインのバージョンアップでwp_get_archives()が普通に使えるようになるかもしれないので、置き換え前に、if(strpos($monthly_list,’/date/’) !== false){……とかしとくといいかもですね。

Filed under:

iPhoneのSafariで、fixedしてある要素のonClick領域がズレる件

毎回タイトル長いな…。
でも、私にとって大切なことなのでもう一度。

どんな現象か

  1. それはAndroidではなく、iPhoneのSafariで起こる。
  2. 対象は、fixedで固定してある要素で、クリックなどでイベントが発火する物である。(例えばヘッダのハンバーガーメニューとか、フッタ付近の何かのメニューとか)
  3. 最下部までスクロールしてあり、下からタブバー(メニューバー?)がひょこっと出てきた・もしくは出てくる直前の状態が鬼門。
  4. タブバー出現に備えて?画面領域が再計算され、クリックできるはずの領域がタブバーの高さ分だけ上部にズレてしまう不思議。
  5. よって、フッター付近の固定要素ならタップすべきはその直前の亜空間となり、ヘッダーなどで最上部に固定してある場合は、タップすべき場所は画面外となる。

スマホのメニューってドロワーかトグルで大抵右上固定なんで、メニュー押せないとか普通に困ります。
ささっとcssとかソースとか見たんですが、これといった問題も見つけれなかったので、急場凌ぎでscriptとかも書いてみました。
フッターにpadding-bottomを60pxくらいあてといて、scriptでスクロール量を取って、copyright表示部分まで来たら、下部から60px分スクロールとかするように。
が、今度はタイミングによってはバウンスが起こるので、scriptが走って走って、画面がブレブレにw
バウンスをどうこうするよりも、scriptを改修するよりも、大元を突き止めたほうが幸せになれるので、がんばって原因を探ることにしました。

犯人はviewport!

私の書くcssがそんなに悪いのか!?と思って、色々いろいろ試してみました。
よく見る transform: translate3d(0,0,0); とか、divで囲ってうんたらかんたらとかも試しましたが駄目でした。
ただ、同じようなことしてあっても、そんな現象起きてないサイトもたくさんあるわけです。何かが決定的に違うわけです。

で、まさかと思って変更してみたviewportがビンゴでした。

ダメなviewportの書き方

<meta name="viewport" content="width=320">
<meta name="viewport" content="width=320, initial-scale=1">
<!-- どっちもダメ -->

大丈夫なviewportの書き方

<meta name="viewport" content="width=device-width, initial-scale=1">

要は、すべて端末に委ねなさい、っていうことですね。
外の人と話し合って、今後のレスポンシブのデザイン規定を変更することにしました。
まさに紆余曲折五里霧中状態でしたが、これでほっと一安心です。

ちなみに、↓が本家本元Appleのviewport指定です。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Appleと一緒なら怖くないので、今後はこれを採用ですね。
ちなみに、 viewport-fit=cover” は、iPhoneXの両端の白いバーを表示しないようにする設定です。
全世界で絶大なる不評を得たダサいあの領域が、存在を主張するわけですね。
だからいっそのこと消してしまえと。わかります。

……って、あれ?あれれれれ??
Apple…おまえさん……。

Filed under:

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: