実は昨年の暮れに勤めていた会社から諸々の都合により退職することになりまして、色々と奔走してたのです。
タイミングもあり、方々から個人的なお仕事の話を頂いたり、色々な企業様よりお呼びを頂いたりと大変嬉しい出来事も多かったのですが、僕が最終的に選んだのは「就職」でした。

もちろん今回はフリーランスの道も考えたんですよね。
実務経験、実績、コネクションなど諸々から。

でも、自分のスタイルには合わないかな～と思ったんですね＾＾；
家で1人で黙々と仕事するっていうのが、耐えられないと思うんです。
いえ、会社でも結構ストイックに黙々と仕事はしますよ？
なんでしょうか。たぶん、孤独に継続作業ができないというか。。
なので今回も就職を選びました。

結構、この業種の人たちって、最終目標がフリーという人って多いですよね。なので僕はちょっと特殊かもしれません。

でも今後はどうなるかはわかりませんけどね＾＾；
いつもそうですが、常日頃から「最悪1人でも食っていける総合スキルは身につけておこう」と気をつけてはいます。

さてさて、長くなりましたが2012年1発目の更新は・・

ホームページ制作の流れ

WEBサイト制作のフローを、クライアントにわかり易く且つ、説明用資料として僕がまとめたものを公開・配布します。

なにやら長いですね。
要は、「ホームページ制作の流れ」という資料です。

これはWordPressでWEBサイトを構築することを前提の資料です。実際に使ってました。
気をつけているのは、

• 有料、無料の定義をはっきりとさせる
• 素人のクライアントでも解り易い表現で
• 双方の協力の基に成り立つ部分もある

ということでしょうか。
お客様ってもちろんWEBのことは解らないわけで、それを専門用語でまくしたてないように解りやすい説明ってかなり求められるのです。

逆に言うと、相手がある程度の理解を得た上で制作に臨めるなら、お互いに良いリレーションがとれるということですよね。
そしてお客様自身も、「次に何をするのか」がわかる資料なので、工程がわかるのです。

もちろんこれは自分が使い易いように作った「一例」です。
こうはいかないお仕事もたくさんありますし、色々と柔軟な対応も求められます。
ですので、案件や請け負う内容によって自由に中身は改変してくださいね＾＾

というわけでWordPress導入案件を前提にした「ホームページ制作の流れ」をPDFデータにて公開・配布します。ダウンロードは以下からどうぞ！

それもこれも、WordPressで構築する際には極力プラグインを使わないで出来ないかと意地になってなんとかしました。
もちろんプラグインを使えばカスタム投稿タイプは簡単に導入できるのですが、それに頼りっきりだと、PHP初心者な自分にとっては後々のバージョンアップで対処が出来なくなったり、なにより“動いている仕組み”を知らないで使えてしまうこと自体が怖かったりするんですよね。

functions.phpに記述をしていると、多少なりとも勉強になるでしょう！

カスタム投稿タイプとカスタムタクソノミーを作ろう！

まずカスタム投稿タイプですが、手軽に使えるプラグインが幾つか存在してますが、あえてfunctions.phpに記述して作成します。

ただ、普段functions.phpには他に色々記述していたり、カスタム投稿タイプを複数記述する時に長くなるので、別途カスタム投稿タイプ記述用にcustom-post-type.phpを作ってfunction.phpにインクルードさせました。

<?php
// カスタム投稿タイプを読み込む
include_once($_SERVER['DOCUMENT_ROOT'] ."/inc/custom-post-type.php");
?>

さて、今回は求人情報専用の投稿タイプを作ることにします。
求人情報はセオリーの「地域カテゴリー」と「職種タグ」で分類できるようにします。
WordPressの場合は、カテゴリーとタグを他で使用していても、新たに“タクソノミー（分類）”を作ることができるんですね。
これもプラグインがありますが、カスタム投稿タイプも直に記述するので、まとめてしまいましょう。

ちなみに、カスタム投稿タイプについては色々解説されているサイトがあるけど、今回はカスタム投稿タイプとカスタムタクソノミーを一緒に指定したかったので、

• amp; – wordpress カスタム投稿とカスタム分類。
• カスタム投稿を使ってWebサイトを作ってみよう！ | Web情報配信『Wiwi connect』

こちらを参考に、作成しました。上記サイトは、物凄く解り易い解説だと思います。目から鱗です。(@_@)

<?php
// カスタム投稿タイプを作成
// 求人投稿タイプ
function jobinfo_custom_post_type() 
{
$labels = array(
'name' => _x('求人情報', 'post type general name'),
'singular_name' => _x('求人情報', 'post type singular name'),
'add_new' => _x('求人情報を追加', 'jobinfo'),
'add_new_item' => __('新しい求人情報を追加'),
'edit_item' => __('求人情報を編集'),
'new_item' => __('新しい求人情報'),
'view_item' => __('求人情報を編集'),
'search_items' => __('求人情報を探す'),
'not_found' => __('求人情報はありません'),
'not_found_in_trash' => __('ゴミ箱に求人情報はありません'), 
'parent_item_colon' => ''
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true, 
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => 5,
'has_archive' => true,
'supports' => array('title','editor','author','excerpt','comments'),
'taxonomies' => array('jobinfo_category','jobinfo_tag')
); 
register_post_type('jobinfo',$args);
// カスタムタクソノミーを作成
//カテゴリータイプ
$args = array(
'label' => '地域カテゴリー',
'public' => true,
'show_ui' => true,
'hierarchical' => true
);
register_taxonomy('jobinfo_category','jobinfo',$args);
//タグタイプ
$args = array(
'label' => '職種タグ',
'public' => true,
'show_ui' => true,
'hierarchical' => false
);
register_taxonomy('jobinfo_tag','jobinfo',$args);
} 
add_action('init', 'jobinfo_custom_post_type');
?>

上記内でWordPressのVer3.1以降から追加された重要な要素として、

'has_archive' => true,

があります。
これにより、今までは無理矢理チックだったカスタム投稿タイプのアーカイブページがしっかりと実現できるのです。
確か以前はページングが色々ハマった記憶があります。プラグインで回避するしかなかったような気もします。
これが自然に生成できるようになったのは、大きな進化ですよね。

さて、こうすると管理画面にこのように「カスタム投稿タイプ」と「カスタムタクソノミー2種類」が追加されます。

カテゴリー仕様のタクソノミー

タグ仕様のタクソノミー

カスタム投稿タイプの管理画面の投稿一覧に項目を追加したい

ここまでの内容でも投稿として使えますが、管理画面の記事一覧の所にタクソノミー2種類を表示したいですよね。

というわけで、下記を参考に追加しました。大変勉強になります。

• WordPressのカスタム投稿タイプで作るよくある質問（Q&A）ページ

//管理画面記事一覧にカスタムタクソノミーの表示追加
function manage_posts_columns($columns) {
        $columns['fcategory1'] = "地域";
        $columns['fcategory2'] = "職種";
        return $columns;
}
function add_column($column_name, $post_id){
	//カテゴリー名取得
    if( 'fcategory1' == $column_name ) {
        $fcategory = get_the_term_list($post_id, 'jobinfo_area');
    }
    if( 'fcategory2' == $column_name ) {
        $fcategory = get_the_term_list($post_id, 'jobinfo_type');
    }
    //該当カテゴリーがない場合「なし」を表示
    if ( isset($fcategory) && $fcategory ) {
        echo $fcategory;
    } else {
        echo __('None');
    }
}
add_filter('manage_edit-jobinfo_columns', 'manage_posts_columns');
add_action('manage_posts_custom_column',  'add_column', 10, 2);

これで実現できました。

ここまでで基本的なカスタム投稿タイプとカスタムタクソノミーのオリジナル追加ができたのですが、もし複数のカスタム投稿タイプやカスタムタクソノミーを使う場合には、同じように追記で作ってやれば良いです。
もちろん変数名とか被らないようにしましょう。

カスタム投稿タイプを固定ページ内でループさせる

ここまで出来たら、投稿は問題ないでしょう。
さて、次は出力です。

カスタム投稿タイプを使うということは、通常のhave_posts()とは別の独立したものになるので、取得も気をつける必要があります。
いつもの

have_posts()

だと駄目なんですよね。
今回の場合、

'post_type' => 'jobinfo'

とかすれば良いんですが、それだけだとどうも上手くいかない。。
取得とループ自体は出来ても、ページネーションが発生した際に次ページ以降の取得がうまくいかずに404.phpになってしまう現象が発生するのです。

そんな状態を解決できたのは、以下の素晴らしいサイトです。

• 【改正版】カスタム投稿タイプの表示用のページを作る－WordPress備忘録－ | マイペースクリエイターの覚え書き

ここから、このように記述。

<?php //'jobinfo'というカスタム投稿タイプ呼び出し
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$wp_query = new WP_Query( array( 'post_type' => 'jobinfo', 'posts_per_page' => 10, 'paged' => $paged ) ); ?>
<?php if (have_posts()) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
～コンテンツ～
<?php endwhile;endif; ?>

そしてページネーションはコリスさんの所のこれを使ってます。

• WordPressにプラグイン無しでページネーションを設置する方法 | コリス

上記を参考にfunctions.phpに記述。
これを記述しておくと、ページネーションを出力したい場所に

<?php if (function_exists("pagination")) {
pagination($additional_loop->max_num_pages);
} ?>
<?php wp_reset_query(); ?>

で出力OKなのです。

これで固定ページ内にカスタム投稿タイプをループさせてページングも実現。ふぅ。完成。

と思ったら。。。（以下、余談と注意点になります）

今度はどのページに遷移しても“最新の投稿内容しか取得できない”という謎のハマりに遭遇。
これはパーマリンクのカスタム構造　/%category%/%postname%.html　にしているせいかな～と思って調べるも、なんか違う。
解決の糸口を探してリライトを変更するプラグインなどを入れたり四苦八苦。
そして極めつけは、なんとかページネーションが解決したと思ったら、今度は何故かsingleページが404エラーに＾＾；　絶対にpermalink関係がおかしいぞ・・

これに限っては、単純に“jobという固定ページスラッグの指定をしているjobページ内”に、“jobというカスタム投稿タイプ”を読み込んだ為、同じスラッグの競合が起こってしまい、
http://example.com/job　（固定ページ）
http://example.com/job/detail/　（カスタム投稿タイプ“job”の詳細ページ）
という“job”が「固定ページ」と「カスタム投稿タイプ“job”」で重複してしまって、パーマリンクが機能しないというなんというイージーミスに気付いたのです。

そもそも、カスタム投稿タイプを使うと、パーマリンク設定ではカスタム構造を
「 /%category%/%postname%.html 」にしてても、「 /カスタム投稿名/%postname% 」になってしまうのです。

これを回避できる方法はあるみたいなのですが、
パーマリンクら辺をプラグインでいじってしまうと、後々のWordPressのバージョンアップとかで色々面倒になりそうな予感もしたので、ひとまず今のデフォルト仕様に沿うことにします。

結局、固定ページをカスタム投稿タイプの基点ページ（カスタム投稿タイプのTOPページ）として使用する場合、jobという固定ページを作り、そのページに出力させるカスタム投稿タイプはjobinfoというスラッグにして、スラッグ名称の回避をしました。現状、たぶんこれしかベストな方法がないんですね＾＾；

ややこしいんですが、このバグの原因は自分の単なるイージーミスです。

注意点

注意点として、一度カスタム投稿タイプ用の固定ページとページネーション、カスタム投稿タイプ用のsingleページを繋げた後、カスタム投稿タイプの素であるfunctions.php記述内（今回だとcustom-post-type.php）の記述を変更した場合（カスタム投稿タイプの名称を変えたりした時など）、管理画面のパーマリンク設定から「カテゴリーベースの入力欄」に何か文字を入れたりして一度違う内容で保存、そして入力した文字を消して再度保存し直す、という行為が必要な場合があります。
これをしないとキャッシュが残っているのか、パーマリンクが正常に動作しなく、記述は合っているのに404エラーを返すことがあるからです。

カスタムタクソノミーを出力するには

ここまで書いたので、ついでに書いておきます。

オリジナルで作ったカスタムタクソノミーリストの出力には

<?php echo get_the_term_list( $post->ID,'jobinfo_tag',' ' ); ?>

などで行います。
また、

<?php echo  get_the_term_list( $post->ID, 'jobinfo_tag', '<ul><li>','</li><li>','</li></ul>' ); ?>

など、タクソノミーリストも色々な区切りでも出力できるんですね。

今回は随分長くなりましたが、これでもカスタム投稿タイプはまだ完全じゃない気もします。月別アーカイブとかは仕様上まだ微妙ですし＾＾；

WordPressやblogに素人の人でも、よりスムーズに導入できるよう最初にフォローやサポートを行う時、マニュアルが必要になる場合があります。

WordPressは構築内容によってカスタマイズが出来るので、全てを網羅したマニュアルはどうしても都度作成となってしまうけど、基本的な概念や操作については、まとめてみたら何かと有益じゃないかと思って作りました。
WEB上でも公開されているものも幾つかありますが、より簡潔にやさしい内容にしました。

そしてついでなので、電子書籍でスマートフォンに入れておけるようにもできるかな？

WordPressのマニュアル構成

このように、「WordPressとは」「基本操作編」の2種類はWordPressで構築した際に必ずお客様に渡すようにします。
そしてお客様によって「応用操作編」と「ログイン情報」はオリジナルで作って渡します。

WordPressとは

マニュアルの内容について

WordPress の仕組み

WordPressはどんなシステムなのかを

WordPress の概念

基本的なblogとしての概念を

属性について

カテゴリーとタグの考え方について

属性のメリット

カテゴリーとタグのメリットについて

基本操作編

マニュアルの内容について

ログインする

ログイン方法について

管理画面の説明

管理画面のおおまかな説明

新規投稿をする

新規追加から投稿編集画面

新規投稿画面の説明

投稿編集画面と文章入力について

画像を挿入する

画像挿入と設定について

リンクを挿入する

リンク挿入と設定について

PDF ファイルを挿入する

PDF ファイル挿入と設定について

カテゴリー設定

カテゴリー設定と新規追加について

タグ設定

タグ設定と新規追加について

プレビュー画面で投稿前の確認

プレビューの活用について

新規投稿の公開前までの手順まとめ

記事の投稿のまとめ

投稿情報の再編集

再編集について

コメントの扱い

コメントの承認など

応用操作編などについて

「応用操作編」と「ログイン情報」は、納品形態によって作成してください。オリジナルになるので、ケースバイケースでここでは公開・配布はできません。
応用操作編は、カスタムフィールドとかカスタム投稿タイプを利用した時の補足説明として作ります。
カスタムフィールドは、お客様のことを考えて管理画面も色々と改変して使い易いものにすることもあるので、やさしいマニュアルがあると便利ですよね。

僕の場合、これらのマニュアルをメールで送るなどして、電話で補足説明をします。
もちろん、訪問説明の依頼がある場合はプリントアウトを持参して直接教えたりもします。
この辺はコミュニケーションですけど、当たり前ですが、お客様対応ってすごく大事なんですよね。
マニュアルって本当に簡単なものでも良いと思うんだけど、用意しておくと、お客様の心を掴む上で結構大切なアイテムになったりしますよ。

というわけで「WordPressとは」「基本操作編」についてをPDFデータで公開・配布します。
ダウンロードは以下からどうぞ！

もちろん、配布はご自由にどうぞ。WEB制作者がお客様に渡す資料としても良いですし、お客様がこれから独自で学ぼうとするのにも良いかもしれません。
ご活用いただけたら幸いです。

電子書籍としても活用できる？

このマニュアルを作った折に友人からの要望もあり、せっかくなので電子書籍タイプにしてみようと。EPUB形式でも公開します。

本当はIndesignでEPUBに書き出したかったのですが、エラーになったりレイアウトが崩れてしまったりして、まったく使えなかったので、有名なフリーウェアSigilで作りました。

EPUBは圧縮されたものなので、実はzipに拡張子を変えて解凍できます。
解凍して見てみると、実際はxhtmlで作られているのでCSSも使えますし、色々凝ろうと思えばできると思いますが、今回はそこまでしませんでした。

モバイル端末用を想定して作ってみて解ったのですが、

• データサイズに気を配る必要がある
• 画像の扱いに困る
• クロスデバイスを意識すると結構厄介かも

という感想を抱きました。

ぶっちゃけ言ってしまうと、自分のAndroidで確認しましたが、縦長画面は画像が切れるので微妙で、横長画面のほうがまだ見れると思います。
iPadでも表示確認しました。こちらは問題なく表示されて、まぁ大丈夫。
今回のWordPress簡易マニュアルEPUB形式は、iPadで見るのが1番良いかもしれません＾＾；

EPUB形式は、iPhoneやiPad、Androidなどのスマートフォン全般で共通して読める形式になります。Adobeからもリーダーアプリが提供されてますが、個人的にはAndroid用のアプリAldikoを使ってます。

電子書籍の形式は単なる文字と画像だけではなく、ハイパーリンクだけじゃなくて動画やアニメーションも埋め込んで再生ができ、アクションも使える。
PDFなどの普通の電子データとはまた違った大きな可能性を秘めています。
ですけど、Apple系のiPhoneやiPadってFlashを見れないんですよね。
実はそんなswfの問題を解消できる手段としてEPUBは注目されてたりします。

電子書籍は様々な形式があり、まだ業界として共通の形式が定まってないのですが、こないだのAmazon Kindleの一件で今後シェア争いが激化しそうな気配もありますしね。

ちょうど最近、WEBクリエイターBOXさんでも詳しく紹介されていたので、見てみると良いかもしれません。

電子書籍がどう出てくるかで、DTPやエディトリアル系のデザイナーさんのこれからの仕事とかが大きく変革するかもしれないと思いますが、IndesignからのEPUB書き出しが本気出してくれないと大変かもしれません。ワンクリック・ポン！になると劇的に変わるでしょう。

現状としてはまだまだ結構コーディングが必要かな～

こないだ仕事で、とあるWordPressで構築したサイトにいいね！ボタンを設置した所、謎のバグに遭遇した。

紆余曲折の末、解決はしたんだけど、ちょっと気をつけておいたほうが良い点なども踏まえ、WordPress内でソースに書いて挿入する設置方法のまとめをしてみようと思った。

Facebook開発者アカウントを認証しよう

まず、Facebookはスパム対策のため、アカウントを認証する必要があります。
もちろん前提としてFacebookアカウントを持っていることが必要ですが、その上でこのページから携帯メールアドレスを確認しておきます。

余談ですが、Facebookって解り辛いんですよね。。個人的に日本語ライクじゃないというより、根本的な構造の問題もある気がしますけども。。

いいね！ボタンの設置方法

いいね！ボタンの設定

いいね！ボタンはFacebookコネクトのページからコードの発行ができます。

※クリックで拡大表示。

通常のサイトであれば上記画像のように順番に入れていけば良いのですが、WordPressなどのblogシステムの単体記事ごとにいいね！ボタンを設置したい場合、テーマファイル内のsingle.phpに記述する必要があります。
そうなるとスタティックなURLではなく、動的に変わる記事ごとのURLに対応したコードである必要があります。

ただ、それはこの時点では飛ばしてしまいましょう。正確なコードを出力するためにWordPressに適した形には後で修正します。
この段階ではURLの所に自サイトのURLを適当に入れて進みましょう。

コードの種類と取得

入力が済んで、「GET CODE」をクリックするとプラグインコードが出てきます。

■html5版

■xfbml版

■iframe版

3種類のコードが選択できます。
違いはというと、クリック時に同時にコメントを求めることが出来るのがhtml5版とxfbml版。iframe版はそれが利用できないみたいです。

いいね！と共にコメントを加える窓は、こんな風に出ます。

いいね！ボタン的には3種類の内どれでも良いのですが、html5の場合はhtml5版、コメントも同時に欲しい場合にはxfbml版、無難にいいね！のみの場合にはiframe版でしょうか。おそらく機能的に登場時からあってシンプルなのはiframe版でしょう。

ちなみに当サイトはいいね！ボタンhtml5版を入れてみたんだけど、若干重いみたい＾＾；

WordPressのコードに改める

ここまででコードは取得できましたが、WordPressのテーマに記述する際には、単体記事を動的に取得する必要があります。
パーマリンクを都度取得する必要がありますよね。
となると出番は<?php the_permalink(); ?>です。書き換えましょう。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#appId=xxxxxxxxxxxxxxx&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-width="110" data-show-faces="false" data-font="verdana"></div>

6行目のen_USの箇所はこのままだとLikeボタンになるので、日本語のいいね！にしたい場合はja_JPに変えてやると良いです。また、アプリIDはご自身のIDに変更してください。

<script type="text/javascript"><!--mce:1--></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#appId=xxxxxxxxxxxxxxx&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like href="<?php the_permalink(); ?>" send="false" layout="button_count" width="110" show_faces="false" font="verdana"></fb:like>

html5と同様です。
そしてxfbml版の場合のみ、<html>タグを下記のように変更してください。

<html xmlns:fb="https://www.facebook.com/2008/fbml">

この独自な記述が嫌な人は、無難にiframe版を使いましょう。僕も普段組み込む時はほとんどiframe版です。

<iframe src="//www.facebook.com/plugins/like.php?app_id=xxxxxxxxxxxxxxx&amp;href=<?php the_permalink(); ?>&amp;send=false&amp;layout=button_count&amp;width=110&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

iframe版は文字列が所々実体参照変換されているので気をつけて変更しましょう。

これら3種のうちどれかをいいね！ボタンを設置したい場所に記述します。

いいね！された時のFacebookで表示される情報の設定をしよう

OGP（Open Graph Protocol）を取得する

OGPとはなんだろう？これについては下記サイトに詳しく記載されてましたのでご参照ください。

• フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か

これを設定しておくと、いいね！ボタンを押した際に予め設定したOGPの情報が掲載されるようにできます。
Facebookコネクトページの下にあるので、いいね！ボタンの設定をした流れでそのまま取得してしまいましょう。
WordPressで動的な個別記事に対応するようにコードを書き換えるので、アプリID以外、空の状態で良いです。

これらのコードはmetaなので、head内に記述します。
ちなみにこれで取得したコードは、それぞれFacebookのウォール投稿に対応してます。

いいね！ボタンを押すと自分のウォールにこんな風に投稿されるのです。

このFacebookのウォールに表示されるサムネイル画像ですが、これを「記事内にある最初の投稿画像を自動的に取得」出来るようにすると、非常に便利です。
特にお客様にWordPressの管理を提供する場合にはすごく便利です。
もし記事内に画像が無い場合には、予め代わりの画像を取得出来る様に分岐させておきます。（その場合はロゴマークなどを使用すると自然ですかね。）
それらを踏まえたWordPressでの記述は以下になります。

meta property="og:title" content="<?php the_title(); ?>">
<meta property="og:type" content="blog">
<meta property="og:url" content="<?php the_permalink(); ?>">
<meta property="og:description" content="<?php bloginfo('description'); ?>">
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:admins" content="xxxxxxxxxxxxxxx">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
if ( preg_match( $searchPattern, $str, $imgurl ) ) {
echo '<meta property="og:image" content="'.$imgurl[2].'">';
} else {
echo '<meta property="og:image" content="※記事内に投稿画像が無い場合に表示される画像の絶対パス※">';
};
?>

となります。
（※便宜IDや画像パスは変えてください。）

これらをWordPressテーマ内で使用すると、いいね！ボタンの設置は完了です。

バグることがあるので注意

さて、今回わざわざコード取得からOGPまでまとめたのは、冒頭で触れたように僕が「謎のバグ」に遭遇したからです。
この時、長時間原因追求した挙句に解ったことがあります。

Facebookクローラーが取得するもの

Facebookには実はクローラーがあります。
これはいいね！ボタンがクリックされた際に該当サイトにクロールしに来ます。

その際に、サイトからウォールに投稿する必要な情報を取得していくのですが、これが思わぬ落とし穴を招くことがあります。

これらはOGPを記述していれば問題ないのですが、OGPを記述してない場合には自動的に別の所から情報を引っ張ってくるみたいなのです。
画像なんかは酷く、自動的に選ぶ（たぶんページの最初に来るimgタグ？）ので、間違った情報をウォールに提供しかねないのです。
でももっと気をつけないといけないのは、「ページのURL」。
FacebookクローラーはページURLは
<link rel=’canonical’ href=’http://www.xxxxxxxxxx’ />
を見ているようなのです。

WordPressの場合、ver2.9x以降の投稿記事・固定ページにcanonicalが自動的に出力されるようになりました。
しかし、WordPressのver2.8x以前ではそのままでは出力されないのです。

こないだ僕がWordPress案件でハマったのは、サーバが少々古く、MySQLの関係からWordPressが2.8xじゃないと使えなかったので、
OGPも利用しておらず、canonicalのことに気付きませんでした。
（ver2.8xは2009年8月位のバージョン。まだ、いいね！ボタン、無かったんじゃない？）

そしてサーバのレスポンスの遅さも相まったのか、Facebookクローラーが情報の取得が正常にできなくて、どの記事のいいね！ボタンを押しても、
URLが「WordPressをインストールしたディレクトリ」で取得されるようになっていて、
結果、blog自体のいいね！カウントが延々とされていたというバグに遭遇しました。
（※パーマリンクのカスタム構造でURLを変えてたことも影響してる気がしなくもない）

これだけならまだしも、一度いいね！が押されてクローラーに取得された場合、ソースを変更してもすぐには反映されず、クローラーのキャッシュに最初に取得した間違った情報が残ってるという状態にもなってました。
この2重の落とし穴により、原因追求に時間がかかったというわけです。

そしてそれを全て解決したのがOGPでした。OGPを設定してキャッシュをクリア。これで解決。
キャッシュが残ってる場合は、もう一度改めてクローラーに来させればキャッシュクリア出来るので、URLリンターを利用します。

• Input URL or Access Token（デバッグツール：URLリンター）

このページより、URLを入力してデバッグをクリックすると、クローラーがチェック＆キャッシュクリアしてくれます。
もちろんデバッガなので、注意事項が出てきますし、ここでページの情報が正確に取得されるかどうかを確認できます。

OGPを記述しているとその情報が最優先されます。
Facebookクローラーは、OGPを記述していない場合はcanonicalを探しに行く。
canonicalが無ければ単にURLを取得しようとするが、動的生成の場合上手く取得出来ない場合がある。
なのでOGPは是非とも指定しておきたいのです。

OGPは正確な情報をウォールに提供するだけでなく、OGPという性質上、これからのSNS全般が利用出来るものなので、Google+でも同様な取得をします。
これは今後、もっと重要で必須なタグになっていくでしょうね。

いやはや、地味ながら今回学んだことは大きいです。

このサイト、普通のライフハック的なサイトをよりマッシュアップし、サクッと読めて楽しめる情報を提供しています。

ヒロさんは普段から毎日クリエイティブな情報を沢山仕入れており、本当感心するのですが、僕がそれを外に公開してみてはどうか？と言った所、blogで公開を始めました。

細かな情報を沢山持っていて、そのような情報に特化した細やかで速報性のある更新の仕方もあり、「ザッピング」として新たなジャンルを提供しています。
さらには、独自の解釈による感想や批評も織り交ぜているので、ちょっとした息抜き+考えさせられる内容も含んだblogです。

ヒロさんはクリエイティブ思考なアンテナを張った人なので、これからも楽しい情報を提供してくれるでしょう。

今年の5月に十何年か吸っていたタバコを断煙しました。
理由は色々あったけど、自分的に30過ぎたら止めようと思ってたので、タイミング的に丁度良かったです。

最近増税やらなんやらで、多方面から完全に「悪者」扱いされまくりの愛煙家のみなさま。お気持ち察します。自分は否定派ではないです。それはタバコによって手にした人間関係やら仕事関係が事実としてありますので、止めた今でも喫煙してる人は気にならないのです。

さて、そんな自分が実際に止める時、止めたあとに何が変わったのかなどをまとめてみます。

タバコを止めた理由

まず理由から。実は1番の理由は銘柄の廃盤です。これは凄く痛かった。
元々マイナータバコだったけど、PREMIER 5mgと1mgがあって、5mgは6年前に廃盤。残った1mgに変えてから今年の3月に廃盤となり、銘柄が消滅したのです。

後は数字の順番の理由。30過ぎたら止めようっていうのは、色々な環境の変化に伴って止めた人生を歩みたくなったから。
あと、高いのは去年の増税からそうだけど、もう今後も高くなり続けるならどこかで止める必要が出ると思っていたため。そろそろ潮時と判断。

なんとなくは、なんとなく止めようとしたらどうなるか試してみたかったというだけ。実は今まで禁煙ってやったことなかったのですよ。

止める時のエピソード

前述の通り3月末で廃盤だったので、最後にカートンで買い溜めをしました。
それが無くなる5月末。無くなったら断煙スタート。（あえて禁煙とは言わない。“断つ”ということで。）
もちろん最後はゆっくりと噛み締めるように吸いました。

土日に重なるようにいよいよスタート。

土曜日はほとんど寝ていたので、1日目はわりと楽に過ぎ去った。けども2日目の夜、正確には40時間を過ぎた辺り。やたらと吸いたくなる。しかも自分でカレーを作って食べた直後。

何故吸いたくなる原因のカレーをわざわざ？それはこの1番きついと言われる2日目にあえて挑戦したかったのです。これを超えれば勝てると思ってたので。

自分なりの対策として、

こうして用意してあったのが、「ゼロコーラ」。炭酸＝刺激になりえると考えました。

この厳しい2日目の夜にコーラを飲んで深呼吸を繰り返し、「一服した気になって」ごまかす。
これが見事大成功。自己暗示もあったでしょうけど、2日目を乗り越える。

3日目は月曜日で仕事をしていたが、この日も炭酸コーラでごまかす。
ここまできたらもう負けない。ニコチンは抜けると言われているのが2～3日目まで。後は自分の意志が全て。

他にMINTIAをかじってました。そのうち意識的にタバコの習慣がどうでも良くなってきます。

先人達が残した話で、一般的にタバコを吸いたくなるシチュエーションがあるが、自分の場合、

1. 風呂上がった後の一服
2. 酒を飲んでいる時の一服
3. ご飯食べた後の一服
4. 家に帰った時の一服

この4つがランキング上位でした。この度にコーラですよ＾＾；

止めて解ったこと

太るだの、ご飯がおいしくなるだの、色々噂がありますが、さてどうなんでしょうか。
自分の場合ですが、少し太りました。（2kgくらい）でも元々50kg台なので全然です。
ではご飯が美味く感じるようになって沢山食べるようになり、太ったのか？
いえ、ご飯の美味しさは変わってません＾＾；
なんでしょうか。人によるんですかね。

他に変わったことは

• 寝起きの朝が楽になった
• 相対的にダルさが無くなった
• 頭の中がスッキリした

でしょうか。いえ、これだけでも充分と変わったんですよね。

そして間違いなく解ったことがあります。

タバコって吸っている時は一服して“ストレス解消してる”感覚ですよね？
それが無くなる・・・それは辛いんじゃないか？喫煙者はそう思ってしまいます。
でもこれは根本的に違うんだと気づきました。

タバコを吸うことによって依存性が発生し、吸わない時に吸いたくなる衝動が発生します。
この「吸いたくなる衝動」こそがストレスの元になり、吸わないと落ち着かない原因なのです。
ということは･･･

タバコを吸わなければ、喫煙者の「ニコチンが切れた時のストレスが無くなる」ので、そもそもタバコ依存によるストレス自体感じなくなる。

ということなんだと。これって喫煙している時には想像もつかないんですね。

そんなことで、3ヶ月経った今現在もまったく必要としておりません。友人・知人からは「よく一発で止められたね」と必ず驚かれますが。

止めた僕は、現在吸っている人にやめろとか言いませんし、吸ってても良いと思います。むしろ友人達はほとんど吸ってる人ばかりです＾＾；
何より嫌煙家の喫煙家を過剰なまでに嫌う傾向や、虐げる傾向が僕は好きじゃないです。

思い起こしてみると、戦後からほんの20数年前のバブルくらいまで、日本の成人男性の喫煙率は8割近くもあったのです。
そんな世代の方々がどんどん寿命を延ばしていて、一概にタバコで寿命が縮まるという考えには個人的に疑問も持ってたりします。
将来吸わない人だらけになったら寿命はもっと劇的に延びるんですかね？この辺の証明を誰かしてください。

確かに健康に悪いのは事実かもしれませんが、僕は人生の中でタバコによって築けた関係や仕事上でのコミュニケーションツールとして大いに活躍したので、安易な嫌煙家にはならないでしょう。

でも、止める人は手段として“ゼロコーラ”を試してみるのも良いかもしれません。禁煙外来とか行く前に試してみる価値はアリですよ。
ただし、砂糖がある普通のコーラだと虫歯になりますのでご注意を。

よく取り沙汰される現在と過去の環境の違い

僕は昔は良かったな～と思うことはあっても、今は今で良いかな～とも思えてます。
そりゃあ景気が悪くて、デフレの影響だの制作単価の下落だの就職が困難だのさらには増税だの周りの取り巻く環境は随分と過酷だし、大変なんだけど、世の中の利便性や満足度を相対的に考えた時、本当に今の時代が悲惨な状況なのかは単純に比較できないと思ったりするからです。

もちろん金銭的な状況もあるでしょうけど、今回はメディアに焦点を当てて考えてみます。

さて、よく“昔が良かった”的な話題が出ることもあるけど、一体どんな違いなのでしょうか？

TVが面白くない？？

TVが面白くなくなって見なくなった人が多いと聞く。スポンサーの予算とか原因が色々あるように聞くけど、本当にそれだけなのでしょうか？

例えば今と比べて昔は娯楽自体が少なかったので、家での楽しみと言えば“TVを見る楽しみ”が当たり前だったと思う。
一家の団欒の場には間違いなくあっただろうし、TVを通じて知り得た情報が夢や希望、知識に繋がったこともあるだろう。

そんな国民全員がほぼ“標準的な娯楽”として自然に捉えていた時代。TV＝面白いと普通に思える時代。
では本当に昔のTVは面白かったのでしょうか？今はネタも尽きて制作費も掛けられずにつまらないものになったのでしょうか？

いや、むしろ今の時代で昔の番組を見ても面白いと思えることは少ないはずでしょう。何か違和感を感じるし、映像の古さを抜きにしても現在で通じるとは思えない。
これはTVは“時代に合ったタイムリーな娯楽”だからこそギャップを感じるのでしょうし、今の時代には今の時代に合ったTV番組が現在放送されているはずです。

時代に合うことが直接“面白い”には結びつかないにしても、単純にTVが面白くなくなったというよりは、他の娯楽が沢山出てきたことによって選択肢が増え、「相対的にTVへの関心が薄まった」ということではないかと思ったりしてます。
そういえば一般的な娯楽の主体がラジオからTVに変移したのも、ラジオが面白くなくなったからではなく、“TVのほうが面白い”からだと思うんですよね。

現代のTV自体の視聴者層も考えると、圧倒的に50代以上と30代以下では違いがあるという現状を踏まえ、50代以上にとってはやはり今でも変わらぬ“娯楽”なのだが、30代以下は他の情報メディアに意識がいっているので、TV自体にあまり興味を示さない。それこそがイコールTVは面白くない、に繋がるのでしょう。

確かにスポンサーからの制作費などは大きく変わっているだろうが、では昔に比べてアイディアが無いかというとそうではなく、むしろテレ東とかの番組は低予算ながらも頑張って面白い企画を実現させていることも多いし、ドラマも金を出せば楽しく有意義なものを作れるかというとそれが全てとは思えず、単純に金を掛けてないからとかにはならないと思う。

昔と今を比べても、面白い良い番組やつまらない番組はどの時代にも存在したはずでしょうね。

音楽はネタ切れ？？

CDの販売数がミリオンセラーとかダブルミリオンとか、遥か昔の都市伝説のように感じる位、もうCDは物理的に売れない時代です。

音楽はTVよりも前からラジオで気軽に聴く事ができて歌うこともできる“娯楽”であり、時代と共に一般層がラジオからTVに移ったことで+映像を加えた魅力のある娯楽に昇華した経緯があります。
そのTVと音楽は密接な関係にあって、CFや挿入歌、イメージソングなど、プロモーションという名の“仕込み商法”によって大きく売れ幅が左右されたり、ヒット曲を作り出したりと意図的な側面も強く残ってたりします。売れる曲が何故売れるかと言うと、予め売れるように作られているからだ、と某音楽業界関係者からも聞いたことがある。

必ずしも良い曲が売れるとは限らないが、良い曲が出てこないのはネタ切れだとか売れないのは質が下がったからだとか、そんな意見を小耳に挟むことはあっても、売れるようにプロモーションを行うことは出来るはずなのだ。でも売れるような仕込みをしていても売れない。

これは前述したTVの影響が一番大きいと思うし、音楽を聴くという行為が“娯楽”としての側面を失っていく位、他の選択肢が増えて「音楽を聴くことへの関心・意欲が薄まった」のだと思います。

そしてCDが売れない代わりに音楽（mp3など）をデータとしてダウンロード販売とし、その売上が主流になったと言われることもありますが、実態は思ったほど売れてないという結果。CDとダウンロード販売を合わせてもミリオンなんて稀なのでしょう。
音楽をお金をかけてまで買おうという気持ち自体が沸き辛くなってきているのではないのでしょうか。

結果として絶対的ではなく相対的

上記のTVも音楽も、情報化社会という進化の中でありとあらゆる選択肢が出てきた結果、それら自身の価値が薄まってしまったと僕は解釈しています。
その情報化社会はもちろんインターネットに引き金があるし、それを利用した2次的産物による所も大きいのではないか。

TVも音楽も決して退行したのではなく、時代の変化の中で相対的に数ある娯楽の1つとしての価値になってしまった結果なんじゃないかなーという考えなんですよ。

でも「ああこれが欲しい！」と思って探しても、ピンポイントで無い時がある。うーん。とてもガジェリたいのに。

そこでふと思いついた。欲しいのなら自分で作れないだろうか。

ドメインをホームから検索したかったのでガジェットにしてみた

そのままです。iGoogleのページから直接ドメインをサーチできればと思ったのです。
いつもお名前.comを使って探すので、これをガジェットにしてしまおうと。

調べてみると、Googleガジェットは簡単に作れるようだ。xml形式でhtmlやJS、PHPを読み込めるらしい。

はい。素晴らしい解説がありました。作り方はWebOS Goodiesさんの「iGoogle ガジェットの作り方 : まずは作ってみる」を参照してください。僕も参考にしました。

そしてサクっと

出来ました。これです。

入力欄に調べたいドメインを入力し、「検索」でお名前.comに遷移します。

実はiGoogleはスマートフォンから見た時に、ちゃんとスマートフォン用のレイアウト＆インターフェイスになっていてそれなりに使い易いので、このガジェットを登録しておくことで外出先でもドメインを気軽にサーチできる、ようになります。

結構、営業さんが出先で契約を取る際にドメインを決めてたりしてたので、需要あるかな～と。
PCでも思いついたら即検索、が可能ですね。

早速Googleガジェットに登録しました。

下記からも登録可能です。

お名前.comドメインサーチ

カスタム構造で好きなようにカスタマイズする時、上手くいかないことがあります。

先日そんな状態に陥ったので、幾つかの手段を記載します。

構成タグの組合せ

通常ここから設定・変更します。
さて、このカスタム構造ですが、何を入れるのでしょうか。

WordPress Codex　パーマリンクの使い方
を参照すると、用途に応じた構成タグの一覧が掲載されています。

要は、パーマリンクをこれらに書き換える処理をしてくれるので、自分で使いたいように組み合わせることができるのです。

では一体何をどのように組み合わせるのか。
使う頻度が高い組合せだと、以下が妥当かもしれません。

• /%category%/%postname%.html ＝
  例：https://yusk.org/days/web/may-like_001.html （このサイトの設定）
• /%category%/%year%%monthnum%%day%%hour%%minute%.html ＝
  例：https://yusk.org/days/201108052230.html
• /%category%/%post_id%.html ＝
  例：https://yusk.org/days/70.html

ただし、%postname%を使った場合には、記事ごとにパーマリンクのスラッグを半角英数字で決めてあげないと、記事タイトルそのままの日本語とかになっちゃいます。
SEO的に何が良いかというと、%postname%使ったほうが良いのかもしれません。ほんの些細なことですが。

ただ、%postname%使った場合の変換は、お客様に納品してお客様ご自身が更新していく場合にはやらないほうが良い場合もあります。
記事を更新する度に指定しなくてはいけないため、うっかり忘れてしまったり億劫になると途端に日本語のURLの出来上がりです＾＾；

なので僕の場合は相手のパソコン慣れの度合いを加味して、大抵は自動的にidでパーマリンクが決まるようにするか、日付にするかどちらかにしてます。お客様ってそこまでこだわらない場合が多いので、予めこういう箇所も気を配ってあげたいところですよね。

カスタム構造が上手くいかない？404エラー？

実はカスタム構造を利用するとたまにパーマリンクが正常なのにも関わらず、ページ遷移ができない・ページ表示されない（もしくは404エラー）になることがあります。
URLは合っているのに、何故？

これは3通り考えられます。

Rewriteが使えない

実はカスタム構造のパーマリンクは、.設定した際に.htaccessが出力されます。

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

通常はこの.htaccessの中の「mod_rewrite」でURLの書き換えモジュールを指定し、「RewriteEngine On」で呼び出し可能にしています。

ですが、このRewriteが使えないサーバも中にはありまして、そんなサーバだとカスタム構造自体を使えません。サーバの管理者に問合せて設定をしてもらうか、カスタム構造自体を諦めましょう＾＾；　よっぽどでない限り大丈夫だと思いますが。
（なんかそれでも可能にするプラグインがあるようなのをどこかで見ましたが失念・・・試してないので真偽は不明）

.htaccessが生成されてない

カスタム構造を設定した際に自動的にWordPressのインストールディレクトリに.htaccessが生成されるはずですが、生成されない場合があります。

この場合はパーミッションが生成不可能になってないか確認しましょう。権限が無い場合はもちろんファイルは生成されません。
この一時だけなので、一度パーミッションを777にしてから生成するのもアリです。

それ以外（不明）

上記2つの原因じゃない場合、.htaccessが生成されてサーバもRewrite使えるのにカスタム構造が上手く機能せず、URLがリンク切れ状態になる、稀にこんな時もあります。

これは一旦カスタム構造以外の選択にして保存し、別ページに遷移させた後でまた戻り、再度カスタム構造を指定し直せば直る場合があります。
同じく下のオプションの「カテゴリーベース」の入力欄に何か単語を入れて保存、ページを切り替えて再度戻り、カテゴリーベース内の単語を消して保存をし直すことでも解消したりします。

バグ？のような気もする謎の現象ですが、発生条件などはわかりません。

ことWEBの世界では発信源が多種多様で、RSSとか駆使しまくらないと、わけがわからなくなります。RSSは登場当初、まず使わないだろうと思ってたらあっと言う間ですよ。もう業界じゃない人でも使いまくるほど無くてはならない機能になっちゃいました。

そのRSSで多種多様な情報を手に入れるのは良いんですが、つまみ読みだと今度は必要な時に取り出し辛い。なのでEverNoteとか使ってTipsとかクリップするんですよ。

クリップが溜まってくると、それはそれで整理整頓がガチャガチャになりがちで、あーもう！的な不満にも繋がるので、備忘録的な残し方をしようと、このようなblogを作ったきっかけでもあります。

いえ、そんなことは良いんです。

最近自分が気にしてることとか、「こんなことを意識しておくといいかもね！」と思うものを書いておきます。

Google+を使っておくといいかもね！

まだ1ヶ月少々ですが、Google+の勢いが凄いらしいですね。僕も登録してしまいました。

これはシンプルで使い方次第で面白いですね。なんかTwitterとは違ったゆるーいSNSという感じです。PCよりはAndroidで使ったほうがより楽しく使い易さを実感できるらしいです。

Facebookに真っ向勝負のGoogle+ですけど、FacebookはFacebookページというものでビジネスに活用できるが、Google+ではどんな「仕掛け」を活用できるかまだまだ不明点も多い。（というかまだあんまり調べてないです）
ただ、Facebookにはいいね！ボタンがあり、Googleには+1ボタンがある以上、今後両サービスは色々ヒートアップしていきそうだ。

なので、手をつけて「とりあえず触っておけ」ということなのです。実際に使ってみると出来は素晴らしいので、かなりGood！な感じです。

現在招待制みたいなので、自由に登録・発行はできませんが、Google+の招待ご希望の方がいましたらメールください。適度に招待差し上げます。
尚、その際にはGmailのアドレスが必要なので、メールに添えてお願いしますね。
いえ、まぁ、あえてここで僕が招待しなくても色々招待してくれる所はあるので需要ないかもしれませんが。

html5とCSS3を使っておくといいかもね！

まだ本格的な仕様をもってしてWEBサイト構築に使う場面は少ないのではないでしょうか。

だけど使ってみると色々と楽になります。

html5の一番気に入った点は「より理に適ったソース」を作れることでしょうか。divをネストしてidやらclassやらで割り振るのをheaderやsection、navなどの適切なタグを使えるようになるので、個人的にすごく納得できるんですね。ソースが。
これは極力綺麗でロジカルなソースを書きたい僕にとって、一番の進化だと思ってます。

ただCSS3は、現在ブラウザ対応の観点から微妙に使い辛いです。
本当はbackground指定とかborder指定とか複数できたり、物凄く便利なんですが、完全に使えるのはもう少し先かな。
なので少しかじるだけであまり使ってません。

まだ構築したことない人は、遊びで作ってみるといいかもしれませんね。

電子書籍を作ってみるといいかもね！

スマートフォンが席巻しつつあるモバイル業界。

スマートフォン対応WEBサイトは、Media Queriesを使ったCSSの適用のさせ方の工夫とか、まぁDreamweaverにもスマートフォン対応の機能が組み込まれるなど、当たり前になりつつありますよね。

その反面、Flashなどのリッチコンテンツと呼ばれるものはApple製品で読み込めないので、WEBサイトで使う際には物凄く減少傾向にありますし、その代替機能としてスマートフォン全般で読み込めるJqueryを駆使したものが俄然増殖しているのです。

ですけど、スマートフォンはそれだけじゃなく、アプリも充実してます。
これはひと昔前のiアプリとかと違い、比較的開発が難しくないこともあって新規参入している業者さんも多いのではないでしょうか？

それと最近は書籍やコンテンツの電子書籍化の波が凄いのです。スマートフォンで手軽に持ち運んで読めることの利便性や、WEBや動画との連動もあり、結構なスピードで進化してきています。

実際のスマートフォン用の電子書籍は今までのFlash形式ではなく、EPUB形式やアプリ形式が主流のようです。
今後タブレットPCも相まって流行りそうな予兆があるので、触っておいたほうが良いかもしれません。

このEPUB形式というのは、AndroidやiPhoneとかのスマートフォン全般に共通して閲覧できるフォーマットで、パッケージ化されたWEBコンテンツ形式です。中身はWEBサイトの構造に近いんですね。

そしてカタログとかの元がDTPなどのデータだと、InDesignとかから出力できるそうです。そしてEPUB形式に変換して、xmlを修正するとかもWEB制作者なら容易に変更可能っぽいので、カスタマイズとかも出来るでしょう。

ビジネスチャンスを先取り・・というほどでもないけど、いかがでしょうか。

さて、今回突然思いついて書いてみたけど、いいかもね！シリーズ化できそうかな？
最後にこんなのを貼っておきます。押せませんし、まるで意味は無い。