カテゴリー: TIPS

スマホでvideo要素を自動再生させる

video要素で埋め込んだ動画を自動再生させてループさせる方法。（スマホ対応）

<video src="movie.mp4" playsinline muted autoplay loop></video>

playsinline
video 要素によって埋め込まれた映像を「インライン」で再生するように指定します。インライン再生とは、その要素が埋め込まれた場所で再生するという意味になります。
https://reference.hyper-text.org/html5/attribute/playsinline/
これがないとiOS環境で自動再生されない場合がある。

muted
動画をミュートにする。これがないと自動再生ができない。

autoplay
自動再生を有効化。

loop
ループを有効化。

ロジテック公式記事がなんか変

なんか変なロジテック公式記事はこちら。

ドライブレコーダー購入前に確認しよう！SDカードの選び方

保存容量が大きい順に「SDカード」「miniSDカード」「microSDカード」

保存容量ではなく物理サイズかと思われる。

ちなみに容量順であれば、SD = microSD > miniSDとなる。miniSDHCでも最大容量が8GBのところで無くなった。

128MBから始まり、2GB、4GB、8GB…と続きます

SDカードにどの程度のデータを保存できるかを表すもので、128MBから始まり、2GB、4GB、8GB、16GB、32GB、64GB、128GB、256GBと続きます。

~2GBがSD。4GB~32GBがSDHCで、64GB～2TBがSDXCです。規格が違うのに容量を並べるのはどうかと思います。

「TLC（Triple Level Cell）」と「MLC（Multi Level Cell）」の2つに分類されます

一般的に販売されているものは、「TLC（Triple Level Cell）」と「MLC（Multi Level Cell）」の2つに分類されます。

マルチレベルセルは現在5段階あります。

SLC：シングルレベルセル
MLC：マルチレベルセル（2-bit MLC）
TLC：トリプルレベルセル（3-bit MLC）
QLC：クアッドレベルセル（4-bit MLC）
PLC：ペンタレベルセル（5-bit MLC）

https://chimolog.co/bto-ssd-slc-mlc-tlc/

「ドライブレコーダーで使用する場合、～可能であれば64GB以上の大容量なものを選ぶとよい」

容量は大きいほうがいいですが、ドライブレコーダーが64GB以上のSDXCに対応しているか確認が必要です。

ちなみに自分が使用しているZDR016はSDXC非対応でした。SDXCに対応しているドラレコは多くない印象。

もしかして

こたつ記事？

自分も誤った情報を公開することがあるので、他人のことはあまり言えませんが、このロジテックの記事には一般人が知らないような専門的なワードがちりばめられているものの、どこか解釈を間違えていたりしている様子です。知識のない人がグーグル検索で書いたような感じを受けました。

と言いつつあなたが見ているこの記事もこたつ記事かもしれません。

 

WordPress テンプレートにindex.phpを使わない

やばい…一応プロなのにWordPressテーマのトップページテンプレートにindex.phpを使ってた。これは間違いというわけではなく、古来よりトップページのテンプレートはindex.phpだった。

現在のWordPressでは、トップページのテンプレートにindex.phpを使用するのは適切ではないことに今更気づきました。

なぜindex.phpがダメなのか

まず、index.phpはテンプレート階層の最下位である為。

トップページなのに一番最後にオマケで読まれるようなindex.phpはふさわしくない。

また、index.phpは汎用的に読まれてしまうのも問題です。もし、attachment.phpが無いのに、添付ファイルのページにクローラーボットが来たら、index.phpが読まれてしまい、意図しない結果をインデックスされかねません。

front-page.phpとhome.phpが適切

トップページに適切なテンプレートファイルは、

固定ページをトップページにしている場合は、front-page.php。

最新の投稿をトップページにしている場合は、home.php。

ということになります。

また、不適切なインデックスを防ぐためにも、index.phpは特別な理由がなければ作成しないのが一番です。

index.phpは作成しておく

index.phpがなくてもテーマは動作しますが、管理画面→外観でindex.phpが無いと怒られます。自分はindex.phpを404のテンプレートとして作成してます。index.phpなのに404というのもおかしいですが、テンプレート階層を見る限り、これが一番適切だと思います。

無線LANルーターWSR-1166DHPL2/Nは無難にいい

今まで使っていた無線LANルーター、今はWifiというのかね。先代WHR-HP-G300NのDHCP機能が死んだので買い換えました。

今回購入した「WSR-1166DHPL2/N」は良好な通信速度、アンテナ内臓ながら高い電波強度、価格帯などからしてコスパの良いルーターです。

買ったのはこれWSR-1166DHPL2/N

シンプルな箱でよろしい。

内容物は本体、アダプター、LANケーブル、取扱説明書。SSIDとPWが書かれたセットアップカード。シールになっていたので本体に貼り付けた。

本体はこんな感じ。触れるところは、AP/ROUTER切り替えスイッチ、リセットボタン、AOSSボタンだけ。シンプルでクール。

ポートはギガビット3+1の計4つ。ポート数は少ないが、無線LANルーターとして使うだけなので不満はない。

早速入れ替えてみた。

設定方法

スマホで設定できるようだが、わざわざこれだけのためにアプリを入れるのは面倒だったので、ウェブブラウザで頑張った。

1.PCから無線LANで接続する

PCからアクセスポイントに接続する。

SSIDとパスワードは付属のセットアップカードに書かれている。セットアップカードはシールになっているので本体側面に貼り付けた。認証情報は変更せず、デフォルトで運用することにする。

もしかしたら自分の環境だけかもしれませんが、Windowsからこの無線LANルーターに接続したところ、DHCPが動作しなかったので手動でIPアドレスを設定しました。設定内容はこんな感じ。

IPアドレス：192.168.11.110（110の部分は2~254の範囲で任意）
サブネット：24
デフォルトゲートウェイ：192.168.11.1
DNS：192.168.11.1

2. http://192.168.11.1にアクセスして設定

ウェブブラウザで192.168.11.1にアクセスすると、インターネット回線識別が自動で働くが、無視してhttp://192.168.11.1/login.htmlに飛んで設定を開始する。

詳細設定→InternetタブでNTTルーターのネットワークにこの無線LANルーターのIPアドレスを設定する。無線LANルーターのモード切替スイッチはROUTERになっていることを確認する。

「DHCPサーバーからIPアドレスを自動取得」を選択してもいいが、DHCPは不安定になる要素の一つなので「手動設定」を選択。

手動設定内容は次の通り。

IPアドレス：192.168.1.2（2の部分は2~254の範囲で任意）
サブネットマスク：255.255.255.0
デフォルトゲートウェイ：192.168.1.1
DNS：8.8.8.8 / 8.8.4.4

「設定」を押して数十秒後にインターネットに繋がります。

速度を比較してみる

スピードテストを行う際に、こちらのサイトを使用しました。

前のルーターのスピードテスト結果

2.4GHz(11n)で接続。それほどストレスなく普通に使えていたが、36Mbpsと結構遅かった。

今のルーターのスピードテスト結果

5GHz(11ac)で接続してみた。なんと速度は74Mbps。倍にもなった。

2.4GHzと5GHzの速度の違いは？

スピードテストの結果では古いルーターが2.4GHz(11n)、新しいルーターが5GHz(11ac)で接続したので、単純に帯域でのスピード差が出てしまっているのではないかと思い、新しいルーターの2.4GHz(11n)でスピードテストを行ってみました。

新しいルーターの2.4GHz(11n)のスピードテスト

58Mbps。古いルーターが36Mbpsなので、この新しいルーターの方がスピードアップしてますね。

また、5GHz(11ac)の速度が74Mbps、なので、
2.4GHz(11n)よりも5GHz(11ac)の方が速い。

5GHz(11ac)のデメリットとしては、遮蔽物に弱いことが挙げられますが、うちの環境では2.4GHz(11n)と変わらずアンテナMAXで接続できています。

無難でおすすめです

「WSR-1166DHPL2/N」は11acをサポートしており、従来の11nもサポート。100Mbpsの光回線ユーザーならこのルーターでストレスありません。特筆すべき特徴はないものの、無難でおすすめな無線LANルーター/wifiルーターです。

ドコモ光やNURO光のようなギガビット光回線を契約している方は↑では不足で、回線の性能をフルに使うためには↓のようなルーターが必要です。

まるでタコですね。

ちなみに、おすすめのUSB無線LAN子機はこちらです。

今までいろいろなUSB無線LAN子機を試してみましたが、この製品が一番高速で安定性が高い。

ギガビットの恩恵を受けたいのであれば、PCIe接続の子機がいいでしょう。

MW Formのお問い合わせデータを引っ張る方法

MW Formで「 問い合わせデータをデータベースに保存 」にチェックを入れると
「mwf_123」というpost typeで保存されます。
※123の部分はフォームの識別ID。

お問い合わせ件数を表示する

フォーム識別子は90だとすると：

$count_posts = wp_count_posts('mwf_90');
$count = $count_posts->publish;

お問い合わせデータを表示する

お問い合わせデータはカスタムポストタイプで登録されており、 自動返信メールに記述された変数（{tracking_number}など）は、カスタムフィールドとして登録されているため、get_post_custom()で取得できます。

例えば、次のようなコードでフォーム識別子90のお問い合わせデータを引っ張ることができます。

$get_posts = get_posts( 'post_type=mwf_90&posts_per_page=-1');
if( $get_posts ):
  foreach( $get_posts as $post ): setup_postdata( $post );
  $cf = get_post_custom(); ?>
  <table width="100%">
    <tr>
      <th width="25%">お問い合わせ番号</th>
      <td><?= esc_html( $cf['tracking_number'][0] ); ?></td>
    </tr>
    <tr>
      <th>件名</th>
      <td><?= esc_html( $cf['title'][0] ); ?></td>
    </tr>
    <tr>
      <th>お名前</th>
      <td><?= esc_html( $cf['namae'][0] ); ?></td>
    </tr>
    <tr>
      <th>お問い合わせ内容</th>
      <td><?= esc_html( $cf['message'][0] ); ?></td>
    </tr>
  </table>
  <?php
  endforeach; wp_reset_postdata( $post );
endif;

WP-Membersと組み合わせて自分のお問い合わせ履歴をマイページで確認する機能をつけたりとか、特定のpost typeにMW Formを設置してそのお問い合わせ件数を集計したりとか、いろいろできそうです。

サンプルコード（自分用）

フォームと対象記事を紐づけるためのフック

各詳細記事に設置したMW Formがどの記事に設置されたか識別するためにフォームのinput type=”hidden”に自動入力させるためのフック。

function my_mwform_value( $value, $name ) {
  global $post;
  if ($name === 'target_id' ) {
    return $post->ID;
  }
  if ($name === 'target_title' ) {
    return $post->post_title;
  }
  return $value;
}
add_filter( 'mwform_value_mw-wp-form-90', 'my_mwform_value', 10, 2 );

記事のお問い合わせ件数を表示するショートコード

function sc_get_contactcount( $atts ) {
  global $post;
  $args = array(
    'post_type' => 'mwf_90',
    'posts_per_page' => -1,
    'meta_query' => array(
      array(
        'key' => 'target_id',
        'value' => $post->ID,
        'compare' => '=',
      )
    )
  );
  $get_posts = get_posts( $args );
  $count = count( $get_posts );
  $count = ( $count > 0 )? $count : '';
  return $count;
}
add_shortcode( 'sc_get_contactcount', 'sc_get_contactcount' );

ユーザーごとのお問い合わせ一覧を表示するショートコード

固定ページ「マイページ」に埋め込む用

function sc_get_contactlog( $atts ) {
  $current_user = wp_get_current_user();
  if( $current_user ) {
    $get_posts = get_posts( 'post_type=mwf_90&posts_per_page=100&author='.$current_user->ID );
    ob_start();
      if( $get_posts ) {
        foreach( $get_posts as $get_post ):
        $cf = get_post_custom( $get_post->ID ); ?>
        <dl>
          <dt><b>対象記事：</b><a href="<?= get_the_permalink( esc_html( $cf['target_id'][0] ) ); ?>"><?= esc_html( $cf['target_title'][0] ); ?></a></dt>
          <dd><b>お問い合わせ内容：</b><?= esc_html( $cf['message'][0] ); ?></dd>
        </dl><hr>
        <?php
        endforeach;
      } else {
        echo '<p>まだお問い合わせをしていません';
      }
    return ob_get_clean();
  }
}
add_shortcode( 'sc_get_contactlog', 'sc_get_contactlog' );

WordPressの記事内の画像をhttpsに変更する方法。めっちゃ簡単

WordPressをhttpからhttpsに変更した際に設定のアドレスをhttpsにしただけでは記事中の画像などには反映されません。

データベースの置換作業が必要になるわけですが、phpmyadminでダウンロード、Search Replace DB masterで置換、アップロードなんて面倒なことをしなくても、

httpからhttpsへの置換であればプラグインで対処可能です。

使用するプラグイン

Search RegexとWP Database Backup

Search Regex

WP Database Backup – Unlimited Database & Files Backup by Backup for WP

https置換方法

1.データベースをバックアップする

WP Database Backupでデータベースをバックアップします。phpmyadminでバックアップできますが、ログインが面倒ですし脆弱性を増やすだけです。このプラグインはwp-cronにより定期バックアップができるため、このサイトでは常時インストールしてあり、1日1回バックアップをしています。ファイルのバックアップはサーバー側がやってくれています。

管理画面→設定で両方のアドレスをhttpsに変更しておくのを忘れずに。

2.Search Regexで置換をする

検索にhttpのURL（例 http://takuyakobayashi.jp）、置換にhttpsのURL（例 https://takuyakobayashi.jp）を入力して、置換内容を確認したうえで、「すべて置換」を押して置換します。

以上で完了です。数秒もかかりません。

確認してみる

httpの画像が混じってしまっているページはこのように鍵が壊れていましたが、

置換後はこのようにビックリマークがなくなりました。

作業終了後はSearch Regexは削除しておくことをお勧めします。

.htaccessでhttpsに飛ぶようにする

このままではhttpにアクセスした際に普通に表示されてしまうので、.htaccessに追記してhttpにアクセスがあった場合httpsに飛ばすようにします。場所は「# END WordPress」の下でいいでしょう。

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Macで作成したzipをWindows上で文字化けなしで解凍する方法

Macで作成したzipファイルをwindowsのエクスプローラーで開くと文字化けをします。

これを文字化けなしで解凍するには「CubeICE」というソフトを使います。

インストールすると設定画面が表示され、ファイルの関連付けやコンテキストメニューのカスタマイズもできます。この際、解凍ソフトをCubeICEに置き換えてしまっていいでしょう。

正常に解凍されたスクショを載せたかったですが、仕事のファイルなので割愛します。

CSSの「@charset “utf-8”;」は書かなくてOK

CSSの一番最初に書く呪文「@charset “utf-8”;」

自分はエディターを変えたタイミングでこの呪文を書くのをやめました。（以前はCSSを作成するとエディターが自動で挿入してた）

なぜならUTF-8でしかコードを書かないからです。

仕様によると、ブラウザは次の順番でCSSの文字エンコーディングを推定します。

https://developer.mozilla.org/ja/docs/Web/CSS/@charset

  1. ファイル先頭にある Unicode byte-order 文字 (BOM) の値
  2. Content-Type: HTTP ヘッダーの charset 属性、またはスタイルシートを送るのに使われたプロトコル内の同等のものから、得られた値
  3. CSS の @charset at-規則
  4. 文書参照で定義されている文字エンコーディングを使用。<link> 要素の charset 属性です。この方式は HTML5 で廃止されており、使うべきではありません。
  5. 文書が UTF-8 だと仮定する

CSSの頭に各@charsetは3番目なのです。自分が使っているエディタはBOMは含めないようになっているので1はスルーで、2でほとんどの環境でUTF-8であることは分かると思います。

万が一、2でエンコーディングが判明しなかった場合は、3,4が無くて、5でUTF-8と仮定されます。

だから「@charset “utf-8”;」は書いていません。

iPhoneでtableに対するdisplay:blockが効かんぞ

部分的にtableレイアウトが使用されたサイトのレスポンシブ化の際にtableをdisplay:blockで落とすという手段をよく使うが、主にiPhoneで期待通りの挙動を示さない場合がある。

その原因は次の3つが考えられる

display:blockを当てられてない

次のようなソースに対して、table,th,td { display:block; width:100%; }としても落ちず横幅100%にもならない場合がある。

<table>
<tr>
<th></th>
<td></td>
</tr>
</table>

なぜかというと、trにdisplay: table-rowが効いているし、ブラウザで描写される際にtbodyが生成されるためである。

tableをblockにするには table,tbody,tr,th,td { display:block; width:100%; } としなければならない。

ビューポートの指定を間違えている

正しいビューポートの指定は次の通り。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

ちなみに自分の場合は次のように指定している。

<meta name=”viewport” content=”width=device-width”>

device-widthが指定されている場合、暗黙的にinitial-scale=1になる。明示的に指定するか否かは好みの問題だと思う。

宣言が間違っている

cssもビューポートも合っているのにtableへのdisplay:block;が効かない場合がある。その場合は宣言が間違っている可能性がある。

「<!DOCTYPE HTML PUBLIC “-//W3C//DTD～というようなHTML4やXHTMLの宣言が使用されていた場合、iPhoneのSafariをはじめとする一部環境ではビューポートの指定が効かず、メディアクエリで指定したスタイルが効かないという現象が起こる。

次の宣言文を使用することで、期待通りの表示になる場合がある。

<!DOCTYPE HTML>