これならすぐわかんじゃん!はい、ごめんください。

公開前のページ、つまり「下書き」「レビュー待ち」「予約投稿」の状態の投稿記事や固定ページを、ログインしなくても確認できるプラグイン Public Post Preview が超絶ありがたすぎて鼻水でた勢いで日本語化しました。
といっても、元々わかりやすい英語なので、難しい説明は一切ないんですけどね。

公式:WordPress › Public Post Preview « WordPress Plugins

プラグインのインストール方法は省きますが、プラグインをインストールした lang ディレクトリに下記のファイルをアップロードしてください。(.po を同梱していますが、.mo ファイルだけでも OK です。)

Public Post Preview 日本語訳ファイル(2.1.1 対応版)

2013.04.26 追記:2.2はWP3.5以上からの対応となります。

有効にした後、どうしたらいいの?

設定箇所はなく、サイドバーにメニューは出てきません。新規投稿の状態ではまだ使えませんので、投稿編集画面に下記のような項目が表示されます(日本語にした場合)。

新規投稿の時はまだ使えません

この記事が下書きなどで保存されると、下記のように変わります。

下書きになると限定公開できるようになります

あとはチェックを入れると、下記のように表示が変わり、自動的に限定公開できるようになります。プレビュー画面を共有するんだよ、というのがよくわかりますね。

表示されたURLを使ってくだされ

注意その1◇有効期限があります

デフォルトでは48時間に設定されています。これだと短い!もしくは長い!という方は下記のコードを function.php に追記して有効期限を変更することができます。

14日にしたいなら、 60*60*24*14 ですし、12時間にしたいなら 60*60*12 で OK です。

注意その2◇「非公開」では使えません

「非公開」の記事を設定しようとすると、「この投稿はもう公開されてるから使えないよ」的なメッセージが表示されます。使えるのは下書き、レビュー待ち(保留中)、予約投稿 の3つです。
これらの「プレビュー画面」を強制的に公開するプラグインなのですね。

CMS として使うための必須プラグインと言っても過言ではなぁい!(個人的に)

WordPress を CMS として使っていると、確認だけはするけど CMS にログインする程でもない、という場合・・・例えば上司や別部署、お客様や関連他社の確認が必要になることがよくあります。

今までは共通のログイン ID とパスワードを発行して確認していただいていたのですが、「どうやって見るんだっけ?」という問い合わせが多く、そのたびに通達して毎月の恒例行事となっていました。

それが!ログインしなくても閲覧できるので、ユーザーの登録とか ID 管理とかログイン権限とか関係なく、ちょこっと見せたい時にものすごく重宝します。

ワークフロー機能もついていたらいいのかな?とも思いましたが、このシンプルさがありがたいですね。

Writing Notes with Grammyはい、ごめんください。
音楽聞きながら仕事してたら、やけに捗って遅くまでテンションあがってしまったひじりです。お肌が荒れて困りますわね奥さん。

さて、お客様が WordPress を使うにあたって、プレビュー機能があるとはいえ、やはり編集画面は実際の画面に近いほうがいいよね、ということで色々カスタマイズしていたのですが、一気に便利になった方法がありました。

editor-style.css にスタイルをコピーするのがメンドクサアァァァイ!!

管理画面のスタイルは editor-style.css をテーマ用ディレクトリに作成してゴニョゴニョするのですが、クラスとか増えるたびコピーするのが面倒になってきました。最後にやる作業であることは間違いないのですが、今後も増えてくるだろうなと。
そうすると、適用されている CSS をそのまま使えたらいいのになー と、思うわけです。コピーするのがメンドク(ry

管理画面の細かいカスタマイズについては下記サイトが参考になります。
WordPressのTinyMCEをチキチキにカスタマイズする | 高橋文樹.com
WordPressテーマのfunctions.phpでは$content_widthを定義するべし | firegoby

まずは使ってる CSS を呼んで設定を足そう

editor-style.css を使えるようにするには、add_editor_style という関数を使うのですが、これは CSS を有効化するためのものではなく、読み込むための命令なんですね。ということは、他の CSS も読み込めるわけです。いくつでも良いみたいですよ。

また、テーマ内で投稿内容が反映される場所って、大抵 class や id の指定がされています。例えば、デフォルトテーマの Twenty シリーズだったら #primary とか。投稿画面=投稿内容が反映される部分 と考え、class もしくは id を設定しましょう。class は知ってたけど、ダメ元で id やったら適用できました(・ω・)

早速 function.php に下記の内容を追記。editor-style.css はひとまず空っぽのまま作っておいてください。css フォルダに置いてあるような css は、function.php からの相対パスを設定してください。

これで設定した CSS が読み込まれます。プラグイン使わないと、かゆいところに手が届いて良いですね。
編集画面を確認すれば、表示が変わったのがわかるかと。chrome などの開発用ツールで確認しても読み込まれているのがわかるかと思います。$initArray[‘body_id’] を使ったら、ちゃんと body に id が設定されました!

そして editor-style.css で調整

このままだと、「body に背景は設定してて #primary は白いんだけどなあ」という場合などに対応できていません。それを editor-style.css で差を吸収します。下記は一例です。

あとは、style.css などで設定した class などがそのまま使えるので、theme_advanced_styles(TinyMCE Advanced だとスタイルを選べる部品)とか有効にしてるとずらりっと出てきます。これは逆に使いにくいかもしれないですが…?

管理画面のカスタマイズに躊躇していた方も、ぜひ一度お試しください♪

Twitterはい、ごめんください。
WordPress Advent Calendar 2012 の企画で翻訳について言及している方がいらっしゃったので、途中で投げ出しかけてたプラグインを日本語化して作者の方に送ってみました。

参考:プラグインの翻訳をして作者に送ってみよう! #wacja2012 | notnil creation weblog

追記:2013.01.10

バージョン 4.0.4 が発表されたので日本語化しました。翻訳用にソースを改変しているので、プラグイン用のファイルがまるごと入っています。

Tweet Old Post 4.0.4 日本語対応版(非公式)

— 追記ここまで —

PoEdit のソースから更新機能を使ったら、翻訳箇所を自動的に見つけてくれたのでとっても捗りました!(テキストエディットでちまちま行番号を設定してた→そして投げ出してた)

この記事の執筆時点では 4.0.3 が最新バージョンです。翻訳ファイルが入ってなかったり、翻訳対応箇所が少なかったりしたので、色々弄りました。作者の方にはファイルを送ってあるので公式アップデートがあるといいなあ。

使い方

日本語対応ファイルは 4.0.3 の差分と修正ファイルしか入っていません。
そのため、まずは本体(v4.0.3)をダウンロードして、日本語版のファイルを上書きしてください。

サーバにアップロードするのは、本体と mo ファイルのみで問題ありません(po ファイルは翻訳の元ファイルなので実際には使用しません)。

公式サイト:WordPress › Tweet Old Post « WordPress Plugins

Tweet Old Post 4.0.3 日本語対応ファイル(非公式)

 

そもそも Tweet Old Post ってどんなプラグイン?

過去に投稿した記事を、ランダムに選んで自動でツイートするプラグインです。

  • 設定した過去の期間の投稿記事をランダムでツイートします。
  • ツイートしたくないカテゴリを設定できます。
  • ツイートしたくない投稿も選べます。
  • 短縮 URL サービスを使えます。(でも goo.gl は未対応)
  • 1日に何回ツイートするか設定できます。

CURL(Client URL:外部サイトの情報を簡単に弄れるライブラリ)を使用しているので有効なサーバでないと使えないという難点はありますが。(ロリポップは使えますよ)

文字化けするって噂なんだけど?

要するにマルチバイト言語に対応していなかったことが原因なので、日本語対応した際に条件分岐を入れておきました。mb_strlen という関数があった場合は、そっちを優先するように、など。

作者のサイトには色々要望が寄せられているので、もしかしたら近々アップデートするのかな、とも思っていたのですが、そうなったらまた翻訳しなおしますかねー。

ちなみに作者の方はインドの方。そんなにカレー食べないってホントですか。

09. 1月 2013 · Write a comment · Categories: WEB制作 · Tags: , ,

ちょっとハマったけど地味に便利だったのでメモ。

Smarty は PHP から配列を渡すことで、ラジオボタンやチェックボックスを簡単に作ってくれる機能があります。そして、テンプレート内で PHP の関数を使用できます。

PHP から渡す値は SQL で読み込んだデータそのもの、という単純な状態の場合、簡単な連想配列を使ってラジオボタンを作りたいという状況になりました。PHP のコードは追加したくない、Smarty だけで何とかしたい…と考えて、調べてみた結果、自分が求める方法はこちらが一番近いと感じました。

Smarty のテンプレートで配列を定義する – XCL Labo

ですが、これだと連想配列が使えません。考え方を変えて、連想配列を使わなくてもいいようにする、という方法も考えましたが、PHP の関数が使える → unserialize 使えばいけるんじゃね?ということで、Smarty のテンプレート内で連想配列を使う方法を考えてみました。

PHP 側でちょっとした準備が必要です(あとで消す)

unserialize するためには、serialize されたデータがなくてはなりません。簡単な配列をシリアライズしたものを一旦画面に表示させます。

echo serialize(array(‘Y’=>’はい’, ‘N’=>’いいえ’));

すると、配列がシリアライズされて表示されます。

a:2:{s:1:”Y”;s:6:”はい”;s:1:”N”;s:9:”いいえ”;}

これを Smarty で使ってしまおう!というわけですね。このシリアライズされた文字列が取得できれば、 PHP で記述した上記のコードはもういりません。

あとは Smarty だけでなんとかするよ

さて、これを Smarty で使うためには、一度変数に格納してから unserialize する必要があります。unserialize したデータは配列になっているので、ラジオボタンやチェックボックスに使うことができます。

シリアライズしたデータを Smarty で使うにあたってのポイントは、デリミタを変数で使用すること。こうしないと正常に渡せません。また、シングルクォーテーションで囲んでしまうと変数が無効になるので、そのまま渡しても良いのではないかと。

SSA
あの清水誠さんが監修された本です。ようやく読み終えたのでやっとレビューを書けます・・・内容は、決して上級者向けというわけではないのですが、翻訳本なので(個人的に)読み進めにくかったのです。

今すぐサイト内検索ボックスを入れよう!

話はそれからだ!

1個でも5個でも10個でもデータが集まっていた方が読みやすいので、サイト内検索をできるように、ブログなりホームページなりに設置しておきましょう。善は急げ。設置していない人は、今すぐ設置してください。

どうしたらいいのかわからなければ、Google のサイト内検索ツール(カスタム検索エンジン)を導入してみてください。検索結果を自分で調整できないデメリットはありますが、分析しやすいのでオススメです。

SSA はホームページを使ってくれる人のニーズを理解するための最適な手法

サイトサーチアナリティクス(SSA : Site Search Analytics)は、サイト内検索されたキーワードを分析し、サイト内で求められている情報を理解する手法です。

お店に呼び込むための手法が SEO だとしたら、呼び込んだお客様が何を探しているかを知る手法が SSA です。「何をお探しでしょうか?」と尋ねなくても、訪問者が「これはどこですか?」と聞いてくるのです。しかもそれらをカンタンに分析できるとしたら、活用しない手はないでしょう。

目的とされたものをパターン分けしたり、対象ユーザに基づいて検証してみたり、ゴールに基づいた解釈をしてみたり。そもそも、検索結果がなかった、という事についても理由や状況を知ることで新しい発見があるかもしれません。

検索されたキーワードは、ロングテール分布(ロングテール理論 - @IT情報マネジメント用語事典)になりますが、ショートヘッド(頻出する上位の部分)の分析から行なうことができると考えると、決して難しいものではないことがお分かりいただけるかと思います。

ただ、1章から読むとちょっと大変かもね

SSA の有効性を説いた本なので、最初は「これだけすごいんだよ!」という意気込みは伝わってきますが、普段使い慣れている Google に言及したものではなく、分析も生ログを例に挙げられているので、「検索エンジンを自作してチューニングしなきゃいけない…だと…?」なんて絶望感の方が先に立ってしまいました。

そんなとっつきにくさがあったので、Google Analytics は入れてるよ、これを有効活用できないかな?と思われている方には、最初から読むと心地良い睡眠を誘発するかもしれません。

まず最後の第11章を読んでから、各章のまとめを眺め、第7章で指標のサンプルに鼻息を荒くして(でもこれをこのまま使うとドツボにはまるので注意)、そして気になる章を読んでいくのがいいんじゃないのかなと感じました。

私としては、難しいものではないから、まずはできるところから “データと遊んでみる” ことを、オススメしたいところです。

WordPress の検索フォームがあれば Google のカスタム検索エンジンはいらない?

WordPress を使っている方は、検索機能がついているので「なるほど、これが使えるのね」と思われるかもしれませんが、個人的には、Google に変えたほうが良さそう。という結論です。

というのも、たとえば実際に「jQuery」という単語で検索した際の結果が、Google の方が優れているのです。うちのサイトで WordPress 内の検索を行なうと、画像などのライブラリデータが上位表示の対象となったり、肝心の jQuery 関連の記事が次のページにあったりするからなんですね。

方や、Google はちゃんと jQuery 関係の記事を上位に出してくれて、カテゴリやタグのアーカイブページも提示してくれます。この執事っぷりが UX の違いなんでしょうか。

カスタマイズすれば良くなるのかも知れませんが、手っ取り早く改善したいなら、Google のカスタム検索エンジンに変えたほうが良いでしょう。

これでサイト内検索キーワードのデータが少しでも揃ったら、本を参考に、SSA をお試しください。

Mindy Mouseはい、ごめんください。ひじり@雪国のウェブ解析士です。

ウェブ解析を行なうと「ここらへんを改善するとこれだけ良くなりそう」という仮説を立てることになるわけですが、「どのように改善すれば良いのか?」という方法を模索することになります。

Google Analytics の解析データだけでは見えてこない部分もあります。その定量的なデータからはわかりにくいのが、ユーザビリティ。製品やサービスには自信があるのに、どうにもコンバージョンにつながらない、という場合は、ユーザビリティの改善を行なうと一気に改善できる可能性があります。逆に、闇雲にデザインリニューアルを行なっても費用がかかるばかりですね。ポイントを押さえて改善していきましょう。(だからニッチなサービスを扱っている、金銭的体力の少ない中小企業にウェブ解析はオススメなのです)

ユーザビリティってなんだろう?

ユーザビリティ (Usability) はそもそもウェブに限ったものではなく、端的に言えば「使いやすさ」です。ISO 9241-11 に言葉の定義があるのですが、私は、期待する目的を達成するため、ユーザが気持ちよく使えるかどうか と考えています。どれだけストレスを減らせるか、ですね。

ユーザビリティについては下記が詳しいので、ちゃんと知っておきたい方は一読しておくことをお勧めします。

参考サイト:ユーザビリティとは – U-Site

上記サイトからちょっと引用。下記5つのポイントがわかりやすいです。

学習しやすさ
システムは、ユーザがそれをすぐ使い始められるよう、簡単に学習できるようにしなければならない
効率性
一度学習すれば、あとは高い生産性を上げられるよう、効率的に使用できるものでなければならない
記憶しやすさ
ユーザがしばらくつかわなくても、また使うときにすぐ使えるよう覚えやすくしなければならない
エラー
エラーの発生率を低くし、エラーが起こっても回復できるようにし、かつ致命的なエラーは起こってはならない
主観的満足度
ユーザが個人的に満足できるよう、また好きになるよう、楽しく利用できなければならない

じゃあ、これらをどうやって評価すれば良いのか?GA の場合は直帰率の高いページや、重要なページの滞在時間が極端に短い、長いというような部分を確認する方法もあります。が、近年、無料で始められるツールが出てきているのでそれを利用しない手はありません。

ユーザビリティをチェックするためのツール

ユーザビリティを確認するためには、アンケートやモニターによるユーザテストが主流でしたが、これは時間も費用もかかって大変でした。しかし、ウェブにおけるユーザビリティチェックは、無料から始められるツールが色々出てきて、手軽に確認できるようになりました。すごい時代ですね。

主にはヒートマップ(どこが見られているかがサーモグラフィーのようにわかる)やマウストラッキング(マウスがどんな動きをしたのかがわかる)などが主流で、おそらく他にもあるのだろうとは思いますが、個人的に面白そうだと思ったツールをご紹介します。

User Heat(ユーザーヒート)

ヒートマップの無料ツール User Heat :どこが読まれているかを可視化

1アカウント(メールアドレス)につき1つのタグが発行され、タグを含んだページのデータを蓄積していきます。

ここがすごい
どこがよく見られているのか、どこにクリックが集中しているのか、などがヒートマップとして現れるので、直感的に知ることができます。

例えば、バナーのつもりではない画像がクリックされていたり、バナーとして作った画像が完全にスルーされていたり。力を入れたフッタが思ったほど見られていなかったり・・・。結構衝撃的な事実がわかります。

注意したい点
URLごとにデータが蓄積されるので、同じURLでも期間によって内容が変わると、正しい結果を得られない場合があります。例えば、先月まであったメニューがなくなって1つずれると、「あれ?なんだ、このページ結構クリックされてるじゃん?」ということが起こりかねません。

そのような期間設定を踏まえたり、もっと詳細なデータがわかる有料版は下記、ユーザーインサイト。

アクセス解析ツール ユーザーインサイト : どんな読者が、どうサイトを見たかが分かるアクセス解析

GhostRec(ゴーストレック)

まったく新しいWEBサイトのユーザビリティ調査ツール – GhostRec.jp

ユーザ登録し、簡単な手順で発行された javascript のタグを解析したいサイトのページに埋め込みます。最初は無料で始められ、続けたいと思ったら課金する形になります。最初にクレカ登録などはなく、有料版への押し売りもないので、辞めたい場合はすぐに辞められます。

ここがすごい

タグを埋め込んだページにアクセスした人の行動が全部録画されているという、監視カメラのような驚愕のツールです。そのデータを元にヒートマップも生成されます。

監視カメラって言うとすごく気持ち悪い感じを受けるかもしれませんが、個人情報はまったくわかりません。そんなゴーストレックの使用レビューはまた後日。

注意したい点

最初は 100RecPv(録画100回分)が無料でもらえるので、とりあえず全部のページに仕込んでみました。そしたら、2日かからずにでもう使い切ってしまったんですね。
そのくらいのPVはわかっていたので、「おー、すごーい!どんな動きをしてるのかなあ?ワクワク」と覗いてみたら、0秒とか1秒とかのオンパレード。しかもページがバラけているのでデータが蓄積されにくく、ヒートマップがとれたのはたった1ページ。(それでも取れただけすごいのかも)
「とりあえず」でやってはいけない典型的な失敗となりました。というのも、ここまで短時間のデータばかりになるとは思っていなかったので。やるなら目的を持ってページを2~3に絞ったほうがいいです。も、もったいなさすぐる…。

ユーザビリティチェックツール

ユーザビリティチェックツール | ユーザーサイド 株式会社アーティス ユーザビリティ研究プロジェクト

汎用的なチェック項目をすべて網羅しています。ユーザ視点というよりは、提供側として心得ておきたいという項目がズラリ。登録の必要はないので簡単に使えますね。

ここがすごい

各カテゴリーごとに設問があり全部で55項目もあるので、「サイトのユーザビリティチェック結果です」とか言って顧客に出せる資料になりかねないくらい網羅されています。

注意したい点

ユーザビリティは時代によって変わってくる部分もあるため、これらの項目がすべてではありませんし、型にはまらない動きをするのが人間です。
どんなところに着目していればいいか、というのを自分のものにしておきたいですね。

FiveSecondTest(英語のみ)

FiveSecondTest

最後は英語版しかないのですが、スクリーンショットを5秒間見て、設問に答えてもらい、その結果を反映するというもの。タスク型の簡単なアンケート調査ツールですね。

ここがすごい

簡単な登録、簡単な手順でデータが溜まっていくのが面白い。このサイト自体のユーザビリティが秀逸(笑) 有料版もあります。

注意したい点

言語が違うとよくわからないしどう答えたらいいのかわからない、という状況になるので、海外向けのサイトには適していますが日本語サイトは難しいですね。日本語版があればいいのに。(余裕ができたら似た感じのものを作ってみたいなあ)

というわけで、今度はゴーストレックの使用レビューを行いまっす。

Touching fingers2013年、明けましておめでとうございます。昨年はウェブ解析の知識を深めましたが、今年は行動に移して経験を積んでいく年にしていきたいところです。また1年、よろしくお付き合いいただければ幸いです。

さて、面白い記事が UXAnalytics Lab さんで紹介されていたので、「おっ?」と思った部分を日本語訳。

元記事:User Experience is not the same as Marketing | Texavi Blog

UX (User Experience) とマーケティングは似て非なるものだよ、という記事ですが、そもそも同じものとは思っていなかったので興味深かったのです。違いを表すということはそれぞれを端的に表すということですので、UX とマーケティングを一度に知れて一石二鳥!

マーケティングは顧客に対するブランディング、UX はユーザーに対する製品改善

下記は、マーケティングとUXの違いをまとめたシートです。

Marketing vs. UX
画像出典:Texavi Blog より

これを日本語に意訳してみたものが下記になります。

マーケティングとUXの違い

・・・若干意図が違う部分もあるかもしれません(ご指摘お待ちしてます)。

マーケティングは、すでに存在するお客様へのブランディングのために行ない、UX は一般的な消費者が気持ちよく使えるように製品を改善するために考えるもの、といったところでしょうか。マーケティングは行動だし UX はコンセプトなのですが、どちらにしても中央にあるのはこちらがわの組織ではなく「相手となる人」です。

どちらかを行なうのではなく、両方が必要になってきます。つまり、UXで得られた情報をマーケティングに反映し、マーケティングで得られた情報をUXにも反映させていく、と。基本として押さえておきたいですね。