2016 | 6ページ目 (7ページ中)

【concrete5】コンなごでWordPressユーザに捧ぐconcrete5講座という講演をしてきました

WordPress使いのためのconcrete5講座

2016年2月20日に名古屋駅近くのコワーキングスペース「ベースキャンプ名古屋」で行われた、コンなご（コンクリートファイブ名古屋勉強会）に参加してきました。

https://concrete5nagoya.doorkeeper.jp/events/38760

その中で「WordPressユーザに捧ぐconcrete5講座」と題して、concrete5（コンクリートファイブ）についての講演をさせていただきました。

私自身の体験を元にできるだけ噛み砕いて話をしてきました。口頭で補足する部分も多く、スライドだけで伝わりづらかったらごめんなさい。

WordPressユーザに捧ぐconcrete5講座 from takashi ono

Web制作に活用できるGoogle謹製のチェックツール

Googleが提供しているツールでWeb制作に関連するものといえば、サーチコンソール（Google Search Console）が有名ですが、Googleが検索結果で重視するようになったページスピード（ページの読み込み速度）をチェックするツールや、スマートフォン対応をチェックするツールを見つけましたのでご紹介致します。

PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/

ウェブサイトのURLを入れると、ウェブサイトのパフォーマンス（ページ読み込み速度）をチェックしてくれます。
パフォーマンスの改善点がある場合は、修正方法を指示してくれる優れものです。

モバイル閲覧時・パソコン閲覧時両方のチェックをしてくれます。

モバイルフレンドリーテスト

https://www.google.com/webmasters/tools/mobile-friendly/

ウェブサイトがモバイルフレンドリーかをチェックしてくれるツールです。
モバイルフレンドリーとは、スマートフォン等の携帯デバイスに対応しているかのことで、一言で言うとスマホ対応しているか？ということです。
このツールの面白いところはGoogleBotからのサイトの見え方もチェックできるところです。
モバイルフレンドリー（スマホ対応）していないと、以下のような結果が表示されます。

モバイルフレンドリーテスト_不合格

感想

Googleの提供するサービスっていろんなのが有るんだなぁとしみじみ思いました。
最後にGoogleが提供するサービス一覧サイトを紹介しておきます。

GoogleProducts

https://developers.google.com/products/
いやぁ～！こんなにプロダクトを作るグーグル先生。流石です。

[WordPress]コメント等に使用されるアバターをカスタムフィールドに指定した画像に変更する

アバターを自分の好みの画像に変更したい

WordPressは、Gravatorというシステムと連動してアバターを表示しています。

Gravatar
https://ja.gravatar.com/

アバターを変更する場合は、このGravatorに自分のメールアドレスを登録する必要があるのですが、結構面倒だと言われることが有ります。

今回、そんな時のために、ユーザカスタムフィールドに画像を登録してもらい、それをアバターとして表示するようにカスタマイズします。

アバターを取得している場所

アバターを取得している処理は、wp-includes/link-template.php のget_avatar_data関数っぽいです。

get_avatar_data関数の以下のフィルターフックの値をフィルタ(add_filter)します。

/**
 * Filter the avatar data.
 *
 * @since 4.2.0
 *
 * @param array $args Arguments passed to get_avatar_data(), after processing.
 * @param int|object|string $id_or_email A user ID, email address, or comment object.
 */
return apply_filters( 'get_avatar_data', $args, $id_or_email );

/**

* Filter the avatar data.

* @since 4.2.0

* @param array $args Arguments passed to get_avatar_data(), after processing.

* @param int|object|string $id_or_email A user ID, email address, or comment object.

return apply_filters( 'get_avatar_data', $args, $id_or_email );

ちなみにこのフィルタの第一引数の$argsは以下のように設定されています。
$args[“url”]を書き換えてあげればアバターで使用する画像が変わります。

var_dump($args);
/*
array(14) {
 ["size"]=>
 int(160)
 ["height"]=>
 int(80)
 ["width"]=>
 int(80)
 ["default"]=>
 string(2) "mm"
 ["force_default"]=>
 bool(false)
 ["rating"]=>
 string(1) "g"
 ["scheme"]=>
 NULL
 ["processed_args"]=>
 NULL
 ["extra_attr"]=>
 string(0) ""
 ["alt"]=>
 string(0) ""
 ["class"]=>
 NULL
 ["force_display"]=>
 bool(false)
 ["found_avatar"]=>
 bool(true)
 ["url"]=>
 string(76) "http://0.gravatar.com/avatar/ca0440a1432580931ef1bdc554f38e2f?s=160&d=mm&r=g"
}
*/

var_dump($args);

array(14) {

["size"]=>

int(160)

["height"]=>

int(80)

["width"]=>

int(80)

["default"]=>

string(2) "mm"

["force_default"]=>

bool(false)

["rating"]=>

string(1) "g"

["scheme"]=>

NULL

["processed_args"]=>

NULL

["extra_attr"]=>

string(0) ""

["alt"]=>

string(0) ""

["class"]=>

NULL

["force_display"]=>

bool(false)

["found_avatar"]=>

bool(true)

["url"]=>

string(76) "http://0.gravatar.com/avatar/ca0440a1432580931ef1bdc554f38e2f?s=160&d=mm&r=g"

}

functions.php に処理を追加しましょう

さあ、フィルタを使って書き換えて見ましょう。

ちなみに今回はACF（Advanced Custom Fields Plugin）を使っていますので、流用される場合は、適宜修正してくださいね。

お使いのテーマのfunctions.phpに以下を書き込みます。

/**
 * 登録ユーザの写真があれば使用する
 */
add_filter( 'get_avatar_data', 'onocom_get_avatar_data', 10, 2 ); // 2はフィルタで渡される引数の数を示します。重要なので忘れぬように！
function onocom_get_avatar_data( $args, $id_or_email ) {
    if( is_object($id_or_email) && isset( $id_or_email->user_id ) && $id_or_email->user_id !== "0" ) {
        $id = $id_or_email->user_id;
        $profile_image_id = get_field( "profile_image", "user_" . $id );
        if( $profile_image_id ) {
            $src = wp_get_attachment_image_src($profile_image_id, "thumbnail", false);
            if ($src) {
                $args["url"] = $src[0];
            }
        }
    }
    return $args;
}

/**

* 登録ユーザの写真があれば使用する

add_filter( 'get_avatar_data', 'onocom_get_avatar_data', 10, 2 ); // 2はフィルタで渡される引数の数を示します。重要なので忘れぬように！

function onocom_get_avatar_data( $args, $id_or_email ) {

if( is_object($id_or_email) && isset( $id_or_email->user_id ) && $id_or_email->user_id !== "0" ) {

$id = $id_or_email->user_id;

$profile_image_id = get_field( "profile_image", "user_" . $id );

if( $profile_image_id ) {

$src = wp_get_attachment_image_src($profile_image_id, "thumbnail", false);

if ($src) {

$args["url"] = $src[0];

}

return $args;

}

これをすることで、該当するユーザがコメントの書き込みを行った場合、以下のような$args[“url”]に書き換わり、アバターの画像を変えることができます。

var_dump($args);
/*
array(14) {
 ["size"]=>
 int(160)
 ["height"]=>
 int(80)
 ["width"]=>
 int(80)
 ["default"]=>
 string(2) "mm"
 ["force_default"]=>
 bool(false)
 ["rating"]=>
 string(1) "g"
 ["scheme"]=>
 NULL
 ["processed_args"]=>
 NULL
 ["extra_attr"]=>
 string(0) ""
 ["alt"]=>
 string(0) ""
 ["class"]=>
 NULL
 ["force_display"]=>
 bool(false)
 ["found_avatar"]=>
 bool(true)
 ["url"]=>
 string(87) "http://example.com/wp-content/uploads/2016/02/profile-img-300x300.jpg"
}*/

var_dump($args);

array(14) {

["size"]=>

int(160)

["height"]=>

int(80)

["width"]=>

int(80)

["default"]=>

string(2) "mm"

["force_default"]=>

bool(false)

["rating"]=>

string(1) "g"

["scheme"]=>

NULL

["processed_args"]=>

NULL

["extra_attr"]=>

string(0) ""

["alt"]=>

string(0) ""

["class"]=>

NULL

["force_display"]=>

bool(false)

["found_avatar"]=>

bool(true)

["url"]=>

string(87) "http://example.com/wp-content/uploads/2016/02/profile-img-300x300.jpg"

}*/

まとめ

WordPressでは、様々なフィルターフックやアクションフックが用意されているため、フックする箇所に目星をつけることができれば、コアファイルを触ること無く簡単に結果を制御できます。

ぜひご活用ください。

ホームページを制作する時に抑えておくべき、５つのポイント

ホームページ制作

最近、「ホームページ制作の見積りを作って」と営業さんからよく言われます。

「はい●●円です！」と即答できればいいのですが、ホームページはテレビやパソコンのような型番商品ではなく、注文住宅やオーダースーツのようなオーダーメイド商品に近い性質があり、なかなか即答はできません。

「ホームページ制作の見積り作って！」と言われても「どんなホームページを希望しているか」をある程度ヒアリングしないと金額の振れ幅が大きすぎる可能性が高く、見積りが無駄になることが多いです。

せっかく作ったホームページ制作の見積りが無駄になると、テンションも下がっちゃいますよね。

今回、できればこれだけはお客様にヒアリングしておいて欲しいなぁ。と思う項目を５つ紹介させていただきます。

１：ビジネスの目的（基本方針）の聞き取り
「なぜ、ホームページが必要なのですか？ホームページで何をしたいのですか？」

といった根本の部分は、実際にホームページを作り、運用していくうえでも重要な基本方針になります。
この基本方針が無いと、安直なデザイン変更を繰り返す、不毛なホームページになることが多いです。

突っ込んで聞けそうなら、
「そもそもホームページを制作しないとその目的を達成できないのか？スマホアプリを作るってのは考えた？」
なども聞いておくと、お客様のホームページに対する本気度も伺えるかと思います。

２：ターゲットの聞き取り
「ホームページをどんな人に見て欲しいですか？」

ということを聞き取ることで、サイトを構築する上で必要となる機能やデザインの内容が変わってきます。

例えば、
・２０代主婦の女性に向けたホームページ
・５０代会社役員の男性に向けたホームページ
では、大きく作り方が変わってくるはずです。

できれば、簡単なペルソナ（利用者像）が作れるといいですね。
「２０代主婦」に見て欲しい！というよりも、
「２３歳で１歳の子供(男の子)を持つ名古屋市在住の専業主婦。夫はトヨタ自動車の工場で働く25歳平社員。両親は九州に住んでいる。」に見て欲しい！
というような利用者像が具体的になると提案もしやすくなります。

３：必須となるコンテンツの聞き取り
「絶対に伝えたいコンテンツは何ですか？」

様々なコンテンツが溢れている中で、【絶対に】伝えたいコンテンツを確認しておくことで、情報の優先順位を確認することができます。
本当に伝えたいことが埋もれてしまっていては、ホームページを作る意味がありません。
必須となるコンテンツを確認しておきましょう！

４：ホームページの機能の聞き取り
「ホームページに求める機能が有りますか？」

これは聞き方が難しいのですが、ホームページは紙の制作物と違って色々な動作・機能を仕込む事ができます。

例えば、

ブログを付けて情報発信したい
ランニングコストを抑えるために自分たちで簡単に更新できる仕組みが欲しい
問い合わせフォームが欲しい
外回りの営業が簡単に資料をダウンロードできる仕組みがほしい
日本人以外にもアプローチしたい（多言語）
スマートフォンでの閲覧を考慮したい
簡単に商品を登録・発信できる仕組みがほしい

のような機能をサイトに付け加えることができます。

ホームページでは出来無い！という前提ではなく、とりあえずなんでもかんでも言ってもらい、見積りに加えていけると素敵ですね。

５：予算の聞き取り
「ちなみに予算っていくらぐらいですか？ランニングコストはいくらぐらいの予算を見込んでいますか？」

これなかなか聞きづらいことですが、聞いておかないと後で「こんな高い金額では到底発注できない！」となってしまい、提案が流れることが多いです。
予算の当たりが付いていると、精度の高い提案が可能になります。予算1万円で作るホームページと予算50万円で作るホームページではできることが違ってきて当然です。
ストレートに聞かずに、遠回りでもぼんやりでも確認しておいて欲しいと思います。

６：納期の聞き取り
「いつまでに完成させたいですか？」

しまった、6つになってしまった（笑）

納期を聞いておくことで、特急で人員を増やす必要があるかなどが見えてきますので聞いておくと後々こんな話じゃなかったとはならないと思います。

まとめ

私が思う最低限のヒアリングポイントを挙げてみました。
ここまで読んで、「おやっ！？デザインについてのヒアリングが全然無いじゃん！」と思った方がいるかもしれませんが、デザインは上記が揃って初めて取り掛かれるヒアリングだと思っています。

デザインありきで考えると、お客様の本当にしたいことがブレてしまうことが非常に多いです。

お客様に満足の行くホームページを提供できるよう、ヒアリング大切にしていきたいものです。

［デバッグ］PHPで処理の時間を計測するための方法

glass-time-watch-business プログラムの処理が重たい時、どこの処理で時間を食っているか調べたくなりますね。

そんな時はPHPの microtime関数を使うと簡単に処理時間の計測ができ、ボトルネックを発見できます。

microtime 関数とは

現在の Unix タイムスタンプをマイクロ秒まで返す関数です。

mixed microtime ([ bool $get_as_float = false ] )

1	mixed microtime ([ bool $get_as_float = false ] )

引数を指定しないか、falseを設定すると「文字列」でマイクロ秒を返します。

引数にtrueを設定すると「float（浮動小数点数）」で値を返します。

処理時間の計測をするためには開始時間と終了時間の差分を出したいので、常に引数はtrueを指定します。

参考
http://php.net/manual/ja/function.microtime.php

マイクロ秒ってどんな数字！？

マイクロ秒(マイクロセカンド、マイクロセック)とは、100万分の1秒のことで、非常に細かな時間です。「μs」や「us」や「usec」というふうに表記されます。

microtime 関数で処理速度を計測してみる

シンプルな計測方法

<?php
$start = microtime(true);
sleep(1); // 何か処理をする
$end = microtime(true);
echo "処理時間：" . ($end - $start) . "秒";
?>

<?php

$start = microtime(true);

sleep(1); // 何か処理をする

$end = microtime(true);

echo "処理時間：" . ($end - $start) . "秒";

これを動かしてみるとこんな結果になります。

処理時間：1.0002000331879秒

複数箇所の計測方法

配列を使ってあげると複数箇所の計測も簡単に実装できます。

<?php
$debug_time = array();
$debug_time[] = microtime(true);

sleep(1); // 何か処理をする

$debug_time[] = microtime(true);

sleep(1); // 何か処理をする

$debug_time[] = microtime(true);

sleep(1); // 何か処理をする

$debug_time[] = microtime(true);

for($i=0; $i < (count($debug_time)-1); $i++) {
    echo "{$i}番目の処理に掛かった時間：";
    echo ($debug_time[$i+1] - $debug_time[$i]) . "秒 <br>";
}
?>

<?php

$debug_time = array();

$debug_time[] = microtime(true);

sleep(1); // 何か処理をする

$debug_time[] = microtime(true);

sleep(1); // 何か処理をする

$debug_time[] = microtime(true);

sleep(1); // 何か処理をする

$debug_time[] = microtime(true);

for($i=0; $i < (count($debug_time)-1); $i++) {

echo "{$i}番目の処理に掛かった時間：";

echo ($debug_time[$i+1] - $debug_time[$i]) . "秒 <br>";

}

実行結果はこんな感じです。

0番目の処理に掛かった時間：1.0006420612335秒
1番目の処理に掛かった時間：1.0003950595856秒
2番目の処理に掛かった時間：1.0009589195251秒

精度について

ここまでmicrotime関数を使用した計測の仕方を書いてきましたが、より高い精度でmicrotime関数を使用するための考察をされている記事を見つけましたので紹介させていただきます。

高い精度をお求めの方はぜひ参考になされてください。

microtimeの差分

Unixタイムスタンプをマイクロ秒まで表現するには整数部10桁+小数部6桁の16桁必要ですがPHPのfloat値には約14桁の制度しかないのです

なるほどなぁ。ちなみに私の場合はザクっと処理時間が分かればいいかなぁ程度だったので、紹介記事のようにはしませんでした（＾＾；）ﾅﾝﾃｺｯﾀ

まとめ

microtime関数を使うことでお手軽に処理時間の計測ができます。

実行時間が長すぎて困っている方、デバッグのお供にどうぞ。

PageSpeed Insights

モバイルフレンドリーテスト

感想

アバターを自分の好みの画像に変更したい

アバターを取得している場所

functions.php に処理を追加しましょう

まとめ

１：ビジネスの目的（基本方針）の聞き取り 「なぜ、ホームページが必要なのですか？ホームページで何をしたいのですか？」

２：ターゲットの聞き取り 「ホームページをどんな人に見て欲しいですか？」

３：必須となるコンテンツの聞き取り 「絶対に伝えたいコンテンツは何ですか？」

４：ホームページの機能の聞き取り 「ホームページに求める機能が有りますか？」

５：予算の聞き取り 「ちなみに予算っていくらぐらいですか？ランニングコストはいくらぐらいの予算を見込んでいますか？」

６：納期の聞き取り 「いつまでに完成させたいですか？」

まとめ

microtime 関数とは

マイクロ秒ってどんな数字！？

microtime 関数で処理速度を計測してみる

シンプルな計測方法

複数箇所の計測方法

精度について

まとめ

１：ビジネスの目的（基本方針）の聞き取り
「なぜ、ホームページが必要なのですか？ホームページで何をしたいのですか？」

２：ターゲットの聞き取り
「ホームページをどんな人に見て欲しいですか？」

３：必須となるコンテンツの聞き取り
「絶対に伝えたいコンテンツは何ですか？」

４：ホームページの機能の聞き取り
「ホームページに求める機能が有りますか？」

５：予算の聞き取り
「ちなみに予算っていくらぐらいですか？ランニングコストはいくらぐらいの予算を見込んでいますか？」

６：納期の聞き取り
「いつまでに完成させたいですか？」