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

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

PageSpeed Insights

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)します。

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

 

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

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

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

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

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

まとめ

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

ぜひご活用ください。



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

ホームページ制作

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

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

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

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

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

1:ビジネスの目的(基本方針)の聞き取り
「なぜ、ホームページが必要なのですか?ホームページで何をしたいのですか?」

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

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

 

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

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

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

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

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

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

4:ホームページの機能の聞き取り
「ホームページに求める機能が有りますか?」

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

例えば、

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

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

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

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

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

6:納期の聞き取り
「いつまでに完成させたいですか?」

しまった、6つになってしまった(笑)

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

まとめ

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

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

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



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

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

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

microtime 関数とは

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

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

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

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

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

マイクロ秒ってどんな数字!?

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

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

シンプルな計測方法

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

処理時間:1.0002000331879秒

複数箇所の計測方法

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

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

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

精度について

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

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

microtimeの差分

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

なるほどなぁ。ちなみに私の場合はザクっと処理時間が分かればいいかなぁ程度だったので、紹介記事のようにはしませんでした(^^;)ナンテコッタ

まとめ

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

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



Thunderbird(サンダーバード)でウィンドウが2つ立ち上がる場合の対処方法[メールソフト・メーラー]

 

tb.png

Thunderbird(サンダーバード)でウィンドウ画面が2つ立ち上がる!

超有名な無料のメールソフトであるMozilla Thunderbird(サンダーバード)。

この無料メーラーのウィンドウ(受信トレイ)が起動時になぜか毎回2つ立ち上がってくるのです。

そして、毎回、エラーメッセージが表示されるのです。

error.png

mail@example.com アカウントのエラー
アカウント mail@example.com は処理中です。受信処理が終了するまでしばらくお待ちください。

何言ってんだこいつ!と言われそうなのですが、実際に起動するたびに毎回ウィンドウが2つ表示されるのです。

Thunderbird(サンダーバード)を再起動したり、タスクマネージャーでThunderbird(サンダーバード)を切ったり試行錯誤してみたのですが全然ダメ。

ネットを漁ってみたら、結末は案外単純なものでした。

Thunderbird(サンダーバード)でウィンドウが2つ立ち上がる場合の対処方法

すごく単純な対応方法でした。

片方のウィンドウを閉じる( ショートカットキー:Ctrl+W )

たったこれだけです。

ショートカットキーに不慣れな方は、以下のように3本線のメニューから、ファイル→閉じる(Ctrl+W)を選択するだけです。

captha-window-close.PNG

これだけで次回起動時にウィンドウが2つ起動することはありませんでしたとさ。

まとめ

こんなこと書いておいて、ほとんどThunderbird(サンダーバード)は使っていないので気にしなければよかったのですが、調べて見たら案外簡単でした。
もし、Thunderbird(サンダーバード)をゴリゴリ使っている方で同じ症状が出ている方は、対処方法はとっても簡単でしたのでぜひお試し下さいませ。