iPhone の実機やシミュレータの Safari を Mac の Safari のインスペクタでデバッグする

デスクトップのブラウザのインスペクタやデベロッパーツールも便利ですが、最後に困ったらやっぱり iOS シミュレータや iPhone、iPad の Safari で何がどうなっているのかを見たいものですよね。

  1. Mac の Safari の環境設定の詳細タブで、「メニューバーに”開発”メニューを表示」にチェックが入っていることを確認
  2. 現れた開発メニューから iOS Simulator か、USB で接続している iOS 端末を選ぶ
  3. iOS 実機の方では、設定 > Safari > 詳細 と進んで “Webインスペクタ” をオンにしておく

以上です。3番を教えていただいた @tak_nishida さん、ありがとうございました。

シミュレータとUSBで接続している iOS 端末が並ぶ
シミュレータとUSBで接続している iOS 端末が並ぶ
iOS シミュレータの中の Safari を Mac の Safari でWebインスペクトしているところ。便利
iOS シミュレータの中の Safari を Mac の Safari でWebインスペクトしているところ。便利

上の画像のノリで、実機もいけまする。

↓ プラグインを作る方々への本、書きました。 ↓

iPhone 実機からMAMPで動いてるローカルマシンのWordPressとかにアクセスする

もっと簡単な方法があったのでくわしくは下記のFacebookでのやりとりをどうぞ!

こんにちは。 MAMP で消耗する派閥に属しておりまする。

Posted by Shinichi Nishikawa on Thursday, 26 November 2015

別にiPhoneからじゃなく別の端末からでもアクセスできますが、iPhoneからということで。

  1. Mac と iPhone で同じネットワークに接続する
  2. システム環境設定 > ネットワークでWi-Fiが設定されている IP アドレスを確認する
  3. WordPress の wp-config.php で、定数 WP_SITEURLWP_HOMEhttp://2で確認したIP にする
  4. MAMP のローカルホストのドキュメントルートを WordPress がインストールされているディレクトリに設定する
  5. 2で確認した IP に iPhone の Safari(やその他のブラウザ)でアクセスする

以上です。

注意事項としては、同じネットワークにいて、IP アドレスが分かれば誰でもアクセスできるようになりますので、カフェなどの公共の場所でやるときは危ないです。MAMP HTTP接続用に開くポートを珍しいのにするなどしたら少しは安全かもしれません。

それと、テーマをちゃんと作っておらず、静的ファイルへのパスなどを直書きしている場合などには動かないと思います。

だいたいをエミュレータやブラウザなどで確認して、最後にいろんな端末で動きを確認したい時に便利です。

2の IP アドレスの確認はこんな感じ。
2の IP アドレスの確認はこんな感じ。
MAMP Pro での設定
MAMP Pro での設定
WordPress に自身のURLを IP アドレスであると認識させる。
WordPress に自身のURLを IP アドレスであると認識させる。

↓ プラグインを作る方々への本、書きました。 ↓

最初にやる git, gitignore, wordmove, gulpfile 関係のメモ

ローカル/リモートの環境を作成する際に最初にやることのメモ。あとでスクリプトにまとまるかもしれない。

WordPress 用のgitignore

WordPress で無視したいもののリスト。

  • .htaccess や MacOSが作る不可視ファイル
  • ログ
  • WordMove や wp-cli の定義ファイル
  • サイトマップ
  • バックアップ関連
  • sql のダンプファイル
  • wp-config.php
  • WordPress からアップロードされる画像などのメディア

は git 管理から外す。いつも忘れてしまうので、毎回これを使う。

WordMove の Movefile

こちらも忘れると危なっかしいもの。

リモートでは、 git レポジトリを公開領域とは別の場所に作る

git init --separate-git-dir ..

公開ディレクトリに .git ディレクトリがいるといけないので、別の場所に作る。たとえば、ひとつ上のディレクトリ( .. )とかホーム( ~/git-projectname )とかを指定する。

gulpfile.js

themes/theme-name/gulpfile.js として設置。

  • sass ディレクトリ内から css ディレクトリ内にコンパイル
  • sourcemap を sass ディレクトリに配置
  • sass/*.scss, js/*.js, テーマ内のすべての php ファイルの行進をウォッチしてリロード
  • 使っているもの
    • gulp, gulp-sass, gulp-autoprefixer, browser-sync, gulp-plumber

gulpの件、browser-sync をWordPressでというところ、sの人さんにヒントもらいました。

今できてないのが、http://localhost:3000 じゃないアドレスでできないの?というところです。知っている方いらしたら、コメントか @shinichiN までお願いします。

memo: http://stackoverflow.com/questions/27755206/using-the-original-url-not-proxy-with-browser-sync

↓ プラグインを作る方々への本、書きました。 ↓

パンくずプラグイン、Breadcrumb NavXT のトップページの表記をフィルターで変える

Breadcrumb NavXT のトップページの表記は、管理画面から変更できますが、テスト環境でサイトを設定していると、本番に反映する際に、管理画面にいかないといけないのが面倒です。そこで、フィルターフックを利用して、管理画面での設定にかかわらずに変更するようにフィルタリングをする方法を探したところ、シンプルな方法が見当たらなかったので、シェア。

// Breacrumb navXT のトップページの表記を書き換える
add_filter( 'bcn_breadcrumb_title', 'nskw_bcn_breadcrumb_title_filter', 10, 2 );
function nskw_bcn_breadcrumb_title_filter( $title, $type=null ) {

	if ( 'home' === $type[0] ) {
		$title = 'HOME';
	}

	return $title;

}

↓ プラグインを作る方々への本、書きました。 ↓

paged と offset を同時に使ってクエリを投げると意図したように動かないのを回避

WP_Query に対してページングとオフセットを一緒に利用できない

絞り込みの検索などいろいろな条件で投稿等を取得したい場合に便利な WP_Query。なのですが、  paged と offset のパラメータを一緒に使うことはできません。

  • paged: 何ページ目なのかを指定する。1ページ毎に10個の投稿を取得する設定で、3ページ目なら、21記事目から30記事目までが取得される
  • offset: 最初の4件はいらない、等の場合に使える。いくつか記事を飛ばしたいときに指定する。4を指定すると5記事目から14記事目が取得される

で、Making Custom Queries using Offset and Pagination によれば、このふたつのパラメータは同時に使うことができません。ためしてみるとちゃんと、意図したように動かないのを確認できます。理由は、そもそもページネーションの処理にoffsetを使っているのであって、offset を明示して指定すると、WPがページネーションで使おうとしてた値を、上書きしてしまう、ということだそうです。

上記のページにはそのpre_get_posts を使った回避方法が紹介されています。ただ、今回私がやりたかったのは、ajaxでinfinite scrollっぽい動きをさせるということだったので、WP_Queryに配列を渡すお馴染みのやり方だとこうなるよというのをご紹介したいと思います。

<?php
add_action( 'template_redirect', 'uis_do_api' );

function uis_do_api() {

  // ページ番号取得
  $paged_id = (int)get_query_var( 'infinite' );
  
  if ( ! empty( $paged_id ) ) {
    $response = array();
    $response['html'] = '';
  
    // カテゴリアーカイブで使う場合
    $category = get_query_var( 'cat' );
  
    // posts per page 
    $ppp        = 12; // 1ページに表示するのは12個
    $offset_cnt = 6; // 最初のページで6つ別の形で表示してるので引き算したい
    $offset     = $offset_cnt + ( ( $paged_id -1 ) * $ppp ); // オフセット値 + (現在の表示ページ数−1)* 1ページ毎に表示させる数
  
    $post_args = array( 
      'paged'          => $paged_id,
      'cat'            => $category,
      'posts_per_page' => 12,
      'offset'         => $offset,
    );
  
    $post = new WP_Query( $post_args );
    if ( $post->have_posts() ) {
      $response['html'] .= '<ul>';
      while ( $post->have_posts() ) {
        $post->the_post();
        
        // ループ回す
        ob_start();
        get_template_part( 'template-parts/archive/loop', 'infinite' );
        $response['html'] .= ob_get_contents();
        ob_end_clean();
      }
      $response['html'] .= '</ul>';
  
      // 無限スクロールっぽくするので
      $response['html'] .= '<div class="iscroll-archive-target" data-next-page="' . ++$paged_id . '"></div>';
  
      wp_send_json( $response );
    }
    die();
  }

}

上記でのポイントは、オフセットの値を自分で計算しているところですね。

  • オフセットしたいのは6個
  • 各ページで表示させたいのは12個

今回の場合、最初のページでは18個表示されるのだけど、無限スクロールで追加したいのは12個だけだ、ということです。

下記は、ページングの際に、こうした対処を行った場合に、起きる問題を防ぐためのものです。つまり、

  • 最後から2番めのページにいる際に、最後のページヘのリンクが出力されるが、
  • 実際にはそんなページはなく、オフセット値の分がオフセットされていなくてWPが誤解してしまってる

という状態になってしまうのを防ぐためのものです。

add_filter('found_posts', 'myprefix_adjust_offset_pagination', 1, 2 );
function myprefix_adjust_offset_pagination($found_posts, $query) {

    $offset = 6;

    if ( $query->is_category ) {
        return $found_posts - $offset;
    }
    return $found_posts;
}

↓ プラグインを作る方々への本、書きました。 ↓