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

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

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

JSON形式のデータを用意してPHPで配列処理

すっかり春めいてまいりました。我が家の庭では、去年植えた枝垂れ桃が無事開花。
今日、郵便受けに入ってたフリーペーパーの星占い(よく当たる気がする)では、私の運勢も開花していました。

『学問の世界に誘われ、語学習得すると吉』

ええ、ちょうどJSONとPHPにイザナわれるところでしたから……orz

ということで、いつもメールフォームで郵便番号から住所入力したりするのにお世話になっているJSON。
↓food.json。こんな感じの構造です。

[
  {"food":"肉","name":"牛","kana":"ウシ","like":"2"},
  {"food":"肉","name":"鳥","kana":"トリ","like":"5"},
  {"food":"乳製品","name":"チーズ","kana":"チーズ","like":"5"},
  {"food":"乳製品","name":"ヨーグルト","kana":"ヨーグルト","like":"4"},
  {"food":"野菜","name":"ほうれん草","kana":"ホウレンソウ","like":"3"}
]

今回はデータがExcelで用意されていたので、ソートを済ませてからマクロ使ってJSONに落としました。
上記の例だと、第一キーがfoodで、第二キーがkanaですね。
私はstabuckyさんのマクロを使わせてもらいましたが、ググッたら結構出てくるのでお好きなのを。
ExcelのテーブルをJSON形式に変換するマクロ | You Look Too Cool

出来上がったJSONがUTF-8無印で保存されているか確認してサーバにアップします。
ちなみに私はBOM付いててハマりました。元がExcelなんだから当然チェックすべきポイントですな……反省。

次はPHPでJSONを配列として扱うために、json_decode()を使います。

$url = "json/food.json";
$json = file_get_contents($url);
$food = json_decode($json,true);

echo var_dump($food); //NULLならBOM付いてるかも

ちゃんとdumpできてたら、あとはお好きなように~です!

Filed under: ,

Event Organiser覚書

珍しく間を開けずに投稿。ちょっと忘れそうなので走り書き。
……そうだ、これが本来の使い方だった。(゚Д゚)

カスタム投稿タイプ利用の、イベントカレンダープラグインとしてなかなか優秀らしいEvent Organiserを使うことに。

Event Organiserの特徴

パーマリンクは個別設定可

設定→Event Organiser→パーマリンクから、各種見本パスの太字にあたる部分を変更することで、パーマリンクを設定することが出来ます。
今回ネックとなったのは、変更できない部分。太字じゃないとこ(=_=;

個別記事ページのパーマリンクは、他に合わせてpost_idにしたいのに、Event Organiserではslug…。
固定ページならしっかり付けますが、投稿記事のslugは面倒でわざわざ変更しないので、そのままタイトル流用になっちゃう場合が多いと思います。
プラグインそのものを編集してしまおうかとも思ったんですが、slugにpost_idベースの名前をいれてやれば良いんだ!と気づけたので、いつも一方的にお世話になっているjim912さんのサイトでコード発掘。
投稿スラッグを自動的に生成する
……今後はどのサイトにもこれを入れとこうかな。

各ページ用に専用テンプレート利用可

設定→Event Organiser→基本 で、どんなテンプレート名のものを用意すればいいか、書いてくれてます。
ちょっとしたことだけど手間が減ります。

カレンダー表示用等、各種ショートコード有

別に固定ページを用意して、そこにショートコード書いても良かったんですが、Event Organiserのarchiveページにカレンダーを表示させればURL的にも美しくおさまるので、カレンダー表示用のショートコードをアーカイブテンプレートに書きました。

エラーになりました。orz

仕方ないのでevent_fullcalendarでreadme.txtに検索かけたら、eo_get_event_fullcalendar();とかいう元関数を発見。ああよかった。

// ↓これは駄目
<?php echo do_shortcode('[eo_fullcalendar]'); ?>

// ↓これが正解
<?php echo eo_get_event_fullcalendar(); ?>

——————————–
2016/02/11 追記

Event Organiser Codexを発見!!

Filed under:

Google Fontsで代替フォント3選

あっという間に季節が過ぎてもうすぐ椿さんですね。
「……長い間ブログさぼってるやろ」って先日突っ込まれたトランスビットの中の人です。
無論、気づかれていないなどとは思ってもいませんよ……ええ。

さて、スマホの普及率が高くなったので、どこのサイトでもwebフォントが最早デフォルトのように使われていますね。
トランスビットでは、Windowsでも、Macでも、スマホでも表示できるということで、ポイントとなるような欧文のフォントには、Google Fontsが便利でよく使ってます。
Androidをぶったぎったら、システムフォントのみで済ますことができるんですけど、そういうわけにもいきませんしね。

Google Fontsで使える代替フォントの記事は、ググれば色々でてきます。
ただ、大抵ベーシックな物だけを求めている私には、情報過多。
ということで…

「アレ」と似ているGoogle Fontsの覚書:トランスビットバージョン

ゴシック

ド定番。安定のHelvetica、Arial、Gill Sans →  Open Sans または Lato

セリフ系

電話番号にも最適。みんな大好きTimes New Roman → Lusitana

その他

一気に溢れる品の良さ。碑文体のOptima → Cinzel

ゴシックの場合、Open SansよりLatoの方がすっきりしてて好みです。
両方とも選べるくらいウエイトがあるので、Arial Blackの代わりにも。
数字だけOpen Sanを使ったりもするんですが、そんな時は下記のようにパラメータを与えてサブセット化すると、軽量になって素敵。

<link href='https://fonts.googleapis.com/css?family=Open+Sans&text=089623-' rel='stylesheet' type='text/css'>

セリフ系は書体数が結構あるんですが、Lusitanaは字面から字詰めまでTimes New Romanに酷似しています。
Cinzelは……ほんと、よくぞ無料で提供してくださいましたっ!(TT)

今後も代替フォントを見つけたら、書き留めていきたいと思います。
——
追記(2016/07/06)

セリフ系の電話番号

A-OTFリュウミン → Vidaloka

Filed under: , ,

iPhone5、6、6+を判別した上でviewportを最適化

こんにちは。一ヶ月ほど前にiPhone6無印を支給されたトランスビットの中の人です。

外)「これで、い つ で も 実機で確認できるから」
中)「……そうですネ(外堀埋められた気分)」

さて、レスポンシブで組むのに慣れてきたと思っていても、色々な問題に出くわします。
その度にちぎっては投げ、ちぎっては投げ……今回はiPhoneのviewport絡みです。

基本的にトランスビットの外の人は幅320pxでスマホ用縦デザインをあげてきます。
いつももっと大きいけど、仮にPC用デザインは幅1024pxとし、画面サイズ480px(スマホ横)からはPC用デザインで表示するとしましょう。
iPhone5以下、6、6+でそれぞれ画面幅が違うので、各デバイスで同一表示になるよう調整します。
※Androidぶったぎりコード

jQuery(function($){

/* ==============================================================================
   0. ユーザーエージェントタブレット・スマホの二極で取得
 ================================================================================ */
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());

/* ==============================================================================
   1. まずはviewportの変数を設定
 ================================================================================ */
if(navigator.userAgent.indexOf('iPhone') > 0){
  // iPhoneの場合
  if(window.devicePixelRatio == 3) {
      // iPhone6+
      var vpSp = 'width=320px,initial-scale=1.293750,maximum-scale=1.293750,user-scalable=0';
    }else if(window.devicePixelRatio <= 2){
      // iPhone6以下なら
      var height_num = screen.height * window.devicePixelRatio;
      if( height_num > 1136){
        // iPhone6
        var vpSp = 'width=320px,initial-scale=1.171875,maximum-scale=1.171875,user-scalable=0';
      }else{
        // iPhone5+以下
        var vpSp = 'width=320px,initial-scale=1,maximum-scale=1,user-scalable=0';
      }
    }
  }else{
    // iPhoneに非ず
    var vpSp = 'width=320px,initial-scale=1, maximum-scale=1, user-scalable=0';
}

/* ==============================================================================
   2. 次に、viewportの設定
 ================================================================================ */
 var vpPc = 'width=1024px';
  if(_ua.Mobile){ // スマホ用viewportの設定
    // 初期設定
    $('head').prepend('<meta name="viewport" content="' + vpSp + '">');

    $(window).on("orientationchange", function() {
        // 傾き検出
        if(Math.abs(window.orientation) === 90) {
          // 横向き
          $('meta[name=viewport]').remove();
          $('head').prepend('<meta name="viewport" content="' + vpPc + '">');
        } else {
          // 縦向き
          $('meta[name=viewport]').remove();
          $('head').prepend('<meta name="viewport" content="' + vpSp + '">');
        }
      });

  }else{ // PC用viewportの設定
    // 初期設定
    $('head').prepend('<meta name="viewport" content="' + vpPc+ '">');
  }

/* ==============================================================================
   3. 最後に、ウインドウリサイズ時のviewportの設定
 ================================================================================ */
  $(window).on("resize", function() {
    if( window.matchMedia("(max-width: 479px)").matches ){
      $('meta[name=viewport]').remove();
      $('head').prepend('<meta name="viewport" content="' + vpSp + '">');
    }
    if( window.matchMedia("(min-width: 480px)").matches ){
      $('meta[name=viewport]').remove();
      $('head').prepend('<meta name="viewport" content="' + vpPc + '">');
    }
  });
});

色んな方が書いてくださったscriptを、適当に繋ぎ合わせて動かしてるんですが……。

↓↓ いつも一方的に勝手にお世話になっていて、今回もお世話になった方々のブログ記事 ↓↓
2015年版JavaScriptユーザエージェント判別・判定
JavaScript(jQuery)とCSSでiPhone6 Plusを判別するいろいろ
iPhone 5S 以前だけでなく、iPhone 6 や iPhone 6 Plus でも幅320pxでスケールを固定する方法

みんなこういうのどうしてるんだろう……もしかして、もっとスマートな方法があるんだろうか。
ハナからリキッドデザインなんだろうか……。
ちなみに、私はこのコードの中にハンバーガーメニュー用のスライドトグルを初めとし、「スマホデザインで使う関数や色々」とか、「PC用で使う諸々」とかも、2のとこで一緒にぶち込み、ごった煮にしてます。

今更ながら、$(‘meta[name=viewport]’).remove();から$(‘head’).prepend~の下りを、attrで処理した方が数行稼げる気もするのですが、明日にしてもう寝ます。
ちなみに…。

$(window).on("load orientationchange resize", function() {}

こんな風に、ロードもリロードも傾き変化も、全部くくってしまうと設定がまとまって見やすいです。
何故か、後々別々にわけて動かす必要性が出てくるんですけどね……私だけ?

Filed under: , ,

PHPでリンククリックしてファイルをダウンロード

今日、きゅうりを一本収穫しました。つやつやです。
「あ、今日できてる!」とか「明後日には食べれるかな~」とか言ってる今が一番楽しいです。
ちなみに去年は1苗から200本近く採れてしまい、配布や消費に勤しみました。まさにきゅうり地獄。
トランスビットの外の人は、「きゅうりの食べ過ぎで体が緑色になった気がする」とか言っていましたが……おかしいな。
補色の関係にあるトマトもたくさん食べたのに。

ということで、今日はブラウザでの収穫作業の話です。

画像に貼ったリンクをクリックすると、通常ブラウザで画像が開いてしまいます。
開かずにダウンロードさせるので思いつく方法といえば、右クリックメニューから「名前をつけてリンク先を保存」とかかな。
リンククリックで直接ダウンロードさせたい場合、PHPで画像をDLさせることができます。
download.phpを下記のような内容で作っておき、ダウンロードさせたいリンクにdownload.phpを指定&URLクエリストリングで画像ファイル名とかを渡してやれば、再利用可能でラブリーというわけです。

//ファイルのパス
$fpath = $_GET["ps"];
$fpath = $fpath.'.jpg';

//ファイル名
$fname = $_GET["fn"];
$fname = $fname.'.jpg';

//IE空DL対策
$data = file_get_contents($fpath) or die('ERROR:cannot get');

//いらんかも
mb_output_handler($fpath);// 文字化け対策
mb_output_handler($fname);// 文字化け対策

header('Cache-Control: public');
header('Pragma: public');
header('Content-Type:application/octet-stream');
header('Content-Disposition: attachment; filename="'. rawurlencode($fname) .'"');// 文字化け対策
header('Content-Length: '. strlen($data));// IE空DL対策。

ob_end_clean(); // これがないとファイルが破損して悲しいことになる
readfile($fpath);

今回は、WordpressでLitebox的なプラグインを使っていたので、URLに[.jpg]が入っていると問答無用で別ウインドウが開いてしまうため、拡張子を削ったファイルのパスをURLに渡しました。ついでにファイル名用の文字列(日本語・文字化け注意)も渡してます。それがpsとfnですね。拡張子は必要だから後で両方に付け足し。

いやー……久しぶりにIEに滅多打ちにされました。一時はどうなることかと。
参考にしたサイトはこちら。いつもながら、えらい人たちに助けられてます。
PHPのファイルダウンロードでファイル破損を防ぐ方法!
PHPでダウンロードしたファイルが0kbになってしまいます

Filed under:

正規表現を制す

もう夏かな、毎日暑いわー。よーし、今日ははりきって布団洗っちゃうぞー……なんて、羽毛布団を丸洗いした翌6月3日が梅雨入りだったトランスビットの中の人です。
運良く4日は早朝からカンカンに晴れ渡ったので、羽毛布団は無事ふっかふかに乾きました。

世の中結果が全てですね……本当に((((;゚Д゚))))ガクガクブルブル

勿論、過程も大切だと思います。
結果に至るまでの過程で、不安になったり躓いたりが少ないに越したことはありません。
羽毛布団と絡めて何が言いたいかというと、まずは正規表現をきちんと勉強しようってことです……orz

そうして辿り着いたのはここらへん。
偉い方々のお陰で、今まであやふやだった知識が定着しそうです。

■サルにもわかる正規表現入門
http://www.mnet.ne.jp/~nakama/

■正規表現サンプル集
http://hodade.adam.ne.jp/seiki/

■正規表現マスター ~文字列の魔術師へ・・・
http://seikihyougenn.com/

■PHP正規表現チェッカー
http://www.rider-n.sakura.ne.jp/regexp/regexp.php

各種ソフトのショートカットキーと一緒で、こういうのって体で覚える方が早いからツールの存在はありがたいですね。

ただ、正規表現サンプル集さんのとこで、\w使ってるのに一緒にアンダースコアも指定してあったりするのは、何か特別な意味があるのか、はたまた単なるうっかりなのか……個人的にはうっかりしてて欲しいw

ちなみにメアドなんかは突き詰めて考えるとすごいことになるようです。深遠やわー。

Filed under: ,

PHPで値に「日本語」を含むか調べる(正規表現)

前回似たような記事を書いたとき、もしかしているかもなーと思いながらスルーしていたツケが……。

if(preg_match( "/[一-龠]+|[ぁ-ん]+|[ァ-ヴー]+|[a-zA-Z0-9]+/u", $str) ){
  // 「日本語」を含む時の処理
}else{
  // 「日本語」を含まない時の処理
}

Filed under: ,

WordPressのギャラリーのカラム数を変更したり色々

世の中の皆さんはGW中ですね。
私は、仕事以外での想定外のイベント事……っていうかトラブルが多すぎて、その分回り回ってぐるぐるして、今年は半分GW、半分仕事って感じです。

さて、結局仕事では使わなかったけど、今後使うかもしれない程度に便利そうなのでメモ。
function.phpに記述。

/*********************************************************************************
// ギャラリーの設定を変更
*********************************************************************************/

function amethyst_gallery_atts( $out, $pairs, $atts ) {

    $atts = shortcode_atts( array(
        'columns' => '4',
        //'size' => 'thumbnail',
         ), $atts );

    $out['columns'] = $atts['columns'];
    $out['size'] = $atts['size'];

    return $out;

}
add_filter( 'shortcode_atts_gallery', 'amethyst_gallery_atts', 10, 3 );
/*********************************************************************************
// アイキャッチ画像がある場合はアイキャッチ画像を、ない場合は記事のギャラリーに入っている一番最初の画像を表示
*********************************************************************************/

function print_post_image($size = 'thumbnail'){
	if ( has_post_thumbnail() ) {
		the_post_thumbnail($size);
	} else {
		$attachments = get_children(array(
			'post_parent' => get_the_ID(),
			'post_type' => 'attachment',
			'post_mime_type' => 'image',
			'order' => 'DESC'
			));
		if(!empty($attachments)){
			$img = array_shift($attachments);
			echo wp_get_attachment_image($img->ID ,$size);
		}
	}
}

Filed under:

PHPで値が「ひらがな」のみか調べる(正規表現)

WordPressで、Wp_User_Query関数を使ってmeta_queryで絞込みしようとしたら、抽出結果が予想外で盛大にハマりました……orz
あーでもないこーでもないと色々試したものの、どうにも糸口を見つけ出せず、やさぐれてネットサーフィンしてたら、ふと、クエリそのものに頼りすぎてることに気づきました。

フォームから受け取った変数の中身の文字列が「ひらがな」のみか否か。それによってmeta_queryをちょこちょこっと変更してやればいいだけだったわけです。
というわけで、下記がUTF-8で長音も含める場合の正規表現。

if(preg_match("/^[ぁ-んー]+$/u",$str)){
  // 「ひらがな」のみの時の処理
}else{
  // 「ひらがな」だけじゃない時の処理
}

いつも思います。
たったこれだけのことで……バカ!(TT

Filed under: ,