なんだか急に写真ブログがやりたくなったのでWordPressを使って新しくブログサイトを作成してみました。ブログ名は『Snap of the Dead』。『GOURMET of the DEAD』に続く「オブ・ザ・デッド」シリーズです。（次は嫁の料理ブログ『Cooking of the Dead』を企画中）

写真と短いコメントだけを掲載するとてもシンプルな構成になっています。タグで絞り込みができるだけです。撮影場所の位置情報とかカメラの設定とかも掲載しようかなと思ったけどシンプルさを優先しました。

ちょっとだけ工夫したところ

その１：サムネイル一覧を表示する

WordPress 2.9から実装されたアイキャッチ機能を使えば使う画像を取得できますが、こ今回はflickrに上げてある写真を使うためアイキャッチ機能ではたぶんダメってとで見つけた方法がこちら。

• 記事内の一番最初の画像を取得してサムネイル画像表示 | 簡単ホームページ作成支援-Detaramehp

その２：マウスオンした画像だけハイライト表示

よくある挙動でやりかたはいろいろあるけど、とにかく楽に、画像データは増やさずにやりたい、ってことで見つけたのがこの方法がこちら。

• ASCII.jp：jQueryだけで作る、サムネイル画像を魅力的に見せる方法｜29分でできる！ あのサイトの“技”を盗め

その３：iPhone/iPad最適化

iOSでWebサイトの表示サイズが自動調整されます。最初に表示するときの横幅サイズ、ズームの倍率制御などを制御するViewortという概念があります。初期表示のデフォルトは980pxになっているのですが、本ブログは640pxなのでそのままではかなりズームアウトした状態で表示されてしまいます。そこでViewportで初期サイズを660pxにしています。

• Viewport [iPhone生活]

また、そのままでは文字が小さくて見づらいので、iPhone/iPadから見たときだけ文字サイズだけ140%になるように調整しています。

• iPhoneでWebサイトを表示した場合の文字サイズの調整 « infoalive labs

利用しているプラグイン

サイト内容がシンプルなのでプラグインもほとんど使っていません。

Open Graph Pro

「いいね！」ボタンを押したときに送信される情報をコントロール

Ultimate Google Analytics

8桁のコードを入れるだけでGoogle Analyticsを簡単導入

wp-flickr-press

flickrにある写真データを簡単挿入

WP-PageNavi

ページ送りを表示

百式の田口さんとF.Ko-Jiさんによる新サービス「ドットインストール」がついに一般公開されましたね。かなり話題になっているのでもうすでに利用されている人も多いのではないでしょうか。

• 3分動画でマスターするプログラミング学習サイト – ドットインストール

ドットインストールってなに？

ドットインストールはプログラミングの基礎知識を動画で学べるサイトです。HTML、CSS、JavaScript、jQuery、PHP、MySQLなど26レッスン400コマ（2012/1現在）もの膨大な学習プログラムがなんと全て無料で利用できます。「PHPの基礎」のような解説系だけでなく「PHPで作る簡易掲示板」のような実践編もあって、基礎から学ぶこともやりたいことから学ぶことができます。

ドットインストールの魅力

豊富なレッスンメニュー

まずは豊富なレッスンメニューに圧倒されました！これは書籍にしたら何冊分の価値があるのだろうｗ とりあえずここで基本を学んで次のステップで専門書に手を出すといいかも。今までとりあえず買って積んでる本が何冊も…。

サクサク学べる3分動画

1コマが3分以内なのでやりたいときにやりたい分だけ時間を計算して学べるのがいいです。長くても3分だと思うと気負いなくドンドン先に進められます。書籍だと次の章がどれくらいの長さかわからなくて「うーん、また今度にしよ」ってなってたかも。動画はYoutubeを使っているので寝る前にベットに横になりながらiPadで3コマだけってぐーたらな受講スタイルもアリです。

やる気の出る仕組み

レッスン内の動画を全て見終えると「すべて完了したユーザー」欄に自分のアイコンが追加されます。他のユーザーのアイコンをクリックするとその人が完了したレッスン、受講状況がわかります。ただそれだけですがそれが微妙にモチベーションを刺激されます。ラジオ体操のスタンプのような感覚でしょうか。勝手にライバルを見つけて勝手に競い合うことができますｗ

2011年11月16日、TRIM JIGSAW（トリムジグソー）のウェブストアがオープンしました！TRIM JIGSAWは前回の記事に出てきたG1950をはじめ、GOODENOUGH、NEXUS7、Let It Ride、m&mなどをブランドを取り扱う富山県のアパレルショップです。旧INSTANT KARMA時代から通い続けて10数年、上京してからも盆と正月の帰省のときには必ずよっています。ハイクオリティーなアイテムが揃っているオススメのショップです。マメに更新されるブログも要チェックです。

• トリムジグソウ［TRIMJIGSAW］
• トリムジグソー オフィシャルブログ

今なら500ポイントプレゼントキャンペーン中です。

TRIM JIGSAWとは？

Webサイトには次のように書かれています。

店名の「トリムジグソー」は直訳すると「こざっぱりとした工具」という意味。ちょっと無骨だけど使いこすのが楽しい服や小物などトータルに提案するショップとして、扱うブランドから空間まで吟味したものをじっくり取り揃えていきたいと思っています。

取り扱いブランド一覧

• GOODENOUGH
• NEXUS7
• OriginalFake
• Gallery1950
• m&m
• BALABUSHKA REMNANTS
• ANOKHA
• UNRIVALED
• Let It Ride
• CHALLENGER
• UCS
• TOKYO NATURAL HIKING CLUB

などなど

アクセス

アメリカの大手動画配信サービス「Hulu（フールー）」が今年の9月に日本に上陸しました。ハリウッド映画や人気の海外ドラマが定額（1,480円）で見放題ってことで、TV界に黒船到来！と大変話題になっていました。会員登録すれば1ヶ月間の無料トライアルってことでとりあえず試された方も多いのではないでしょうか？

継続で利用していますか？
結論から言うと、私はHuluを継続利用することに決めました。

ネット宅配レンタルの「TSUTAYA DISCUS」

映画レンタルは5年くらい前からツタヤのネット宅配レンタル「TSUTAYA DISCUS」を使っていました。これはTSUTAYAのサイトで観たい映画をリストに登録しておくと、在庫のあるものから順番に2本づつ郵便で自宅まで届けてくれるというサービスです。見終わったら専用の封筒に入れてまたポストに入れるだけで返却完了、返却次第また次の2本が自動で送られてきます。もし返却が遅れても延滞料はかかりません。返却するまで次の2本が送られてこないだけです。2本／週のペースなら月に8本のペースになります。それで料金は1,958円／月です。実店舗同様の豊富なラインナップをどこからでも利用できるのが魅力です。

Apple TVで知ったビデオオンデマンドの快適さ

ネット宅配レンタルはなんて便利なんだろう！と感動していたある日、我が家にApple TVがやってきました。そしてはじめて体験したビデオオンデマンド。観たい作品をクリックすればその場でダウンロードがスタート、ほとんど待つことなく作品が再生されます。処理待ちも遅延もありません。観たいものがあればすぐ観れる！郵送を待つことも、在庫の順番待ちもありません。これはすばらしい！でも、ものすごく便利なんですがまだApple TVの日本向けラインナップは貧弱です。観たい作品があっても字幕・吹き替えの選択も自由にはできません。また、定額サービスはないので1本視聴するのに300〜500円かかります。

ビデオオンデマンド×定額制の衝撃

そしてHuluの登場です。映画だけでなく数千に及ぶドラマコンテンツをオンデマンドで提供、しかも一切の視聴制限なしの見放題です。見たい作品を見たいときに何本見ても1,480円！しかも、PCだけでなくiPhone/iPad、Androidなどからも視聴が可能！外出先や移動中にだって映画が観れます！さらに視聴途中に再生端末を変更してもちゃんと続きから再生されます。TVで、PCで、タブレットで、スマートフォンで、観たいときに観たい作品を観たいスタイルで。これは未来だよ。ちょっと映画のラインアップが少ないのが弱点です。

Huluの特徴

• 数百の映画、数千のドラマがラインアップ（随時追加予定）
• TV、PC、タブレット、スマートフォンなどマルチデバイス対応
• 字幕・吹き替えを自由に選択可能
• 充実した検索・関連作品紹介機能
• マイページで視聴履歴やお気に入り管理機能

Huluを使ってみて

画質は自動選択に設定してありますが480p（DVDレベル）で観れています。720p（HD画質）に対応しているのは一部だけのようです。

主に自宅（Wi-Fi環境）で利用しています。ソファに座ってMacbook Airで見るときと、ベッドに寝転がりながらiPadで見るときが半々くらいです。ベッドで寝る前にドラマを1本見るのが最近の楽しみです。

アニメ見放題1,000円のバンダイチャンネルも気になりますが、そんなにあれもこれも有料サービスは無理ってことで自粛です。HuluとApple TVがあればTSUTAYA DISCUSは解約してもいいかもな…。

新しいデジカメを手に入れて写真を撮る機会が増えたのはいいのですが、それにともなって増えていく写真データをどうやって管理するか？新しい悩みが…

• ローカルにデータを保存したくない
• いつでもどこからでも写真データにアクセスしたい
• 家族（嫁）と写真を共有したい（見るだけ）

MacBook Airはストレージの容量が少ないので大量の写真データをローカルに保存するのは避けたいところです。かといって、外付けハードディスクなどに保存すると接続してないと使えないので不便です。自分だけでなく嫁もいつでも見たいときに簡単に写真を見れるのが望ましい。NASとかファイルサーバーを導入するのが良いのかな？

いろいろ悩んだ結果、Flickrで管理することにしました。ただし、無料アカウントではいろいろ制限があるのでプロアカウントを契約することに。円高の今なら料金もちょっとお得ってことで2年コースを申し込みました。

Flickr（プロアカウント）を使うメリット

• 写真をオリジナル解像度で無制限に保存しておける
• タイトルや説明文など追加情報を付与できる
• キーワードで写真を検索できる
• TagやSets、Collectionsなど写真を細かく分類できる
• 位置情報付きの写真データなら地図上に表示できる
• 写真の公開範囲を細かく指定できる

Flickrについての詳しい解説は下記サイトがオススメです。

• Flickrの使い方

Flickr ノーマルアカウントとプロアカウントの違い

Flickrの写真を共有する

写真単位、セット単位で細かく公開範囲が指定できます。Flickrユーザー同士であればアカウント単位で公開範囲を指定できます。Flickrアカウントを持っていない人に一部公開する場合はGuest Pass機能も便利です。

Guest Passの使い方については下記ブログ記事が詳しいです。

• Flickrアカウントがない人へも写真を共有できる Guest Pass が便利 – まちゅダイアリー(2010-09-26) 

おまけ：iPhone/iPadからFlickrするなら

Mobile Potosは写真の投稿も閲覧も、Flickrの一連の機能が利用できるアプリです（250円）。写真編集とExif表示ができない点を除けば気に入っています。

[N]ネタフルのコグレマサト、[mi]みたいもん！のいしたにまさき共著による『マキコミの技術』出版記念セミナー「ソーシャルストリーム全盛時代だからこそ見直すブログ術 ＆一歩踏み出すマキコミ術」に参加してきました。

アジャイルメディア・ネットワークの徳力さん司会のもと、両著者をはじめ、ライブドアの佐々木さん、シックスアパートの関さんなど豪華メンバーが集結！facebookやTwitterといったソーシャルメディアが全盛のいま、あらためてブログの役割について考えてみようとテーマで、ブログを書いているとどんなことが起こるのかパネルディスカッションが行われました。

いろいろな気付きのあるセミナーでしたが、それはそれでおいておいてｗ
そのときにシックスアパートから紹介されたブログサービス「zenback」がおもしろそうだったので早速導入してみました。

• zenbackであなたのブログに全てのフィードバックを。

当ブログではブログ記事の最下部にzenbackのブログパーツが表示されるようになっています。[N]ネタフル、404 Blog Not Found、ITmedia オルタナティブ・ブログをはじめ、結構いろいろなブログで使われています。

zenbackってなに？

より多くの人にブログ記事を読んでもらうためのさまざまな仕組みをパッケージにした無料のブログパーツです。ブログ記事についての次のような関連情報を自動的に表示してくれます。表示したい関連情報、表示する順番、表示する件数などを自分好みにカスタマイズできます。

• その記事についての自分のブログ内の関連記事
• その記事についてのTwitterでのつぶやき
• その記事についてのfacebookコメント
• その記事についてのはてなブックマーク
• その記事についてのzenbackユーザーの関連記事（必須）
• その記事についてのzenbackキーワード（必須）

注1：一部の関連情報とzenbackからのお知らせは非表示にはできません。
注2：法人向けにさらにサイト管理機能を強化した「zenbak BIZ」もあります。

zenbackが使えるブログ動作環境

• テンプレートやサイドバーの編集ができること
• JavaScriptが利用できること
• RSSを配信していること
• パスワードで閲覧制限されていないこと

zenbackを使ってみよう！

上記の利用条件を満たしていれば、zenbackの導入はびっくりするほど簡単です。所要時間は5分程度です。関連記事、関連キーワードの表示には数時間〜最大30時間ほどかかるようです。

1. zenbackのサイトでユーザー登録
2. ブログのURLを登録
3. 表示したい関連情報を選択
4. コードが生成されるのでそれをブログのテンプレートにコピペ
5. あとはデータが反映されるのを待つだけ

zenbackを使ってみて

もっとめんどい設定があるものと思って二の足を踏んでいましたがこんなに簡単ならもっと早く導入すれば良かったかも。あまりに簡単に設定できてキャプチャー撮るのを忘れたのでもうひとつのブログ（Gourmet of the Dead）の分も設定しました。どちらのブログもWordPressを使っていますが、ColdSleepは記事の終わりに表示したかったのでsingle.phpに、Gourmet of the Deadではサイドバーに表示したかったのでsidebar.phpにコードを貼り付けました（記事詳細ページでのみ表示したかったので<?php if(is_single()): ?>で条件付けしています）。

後輩が書いているローカルグルメブログ（じゃみじゃみ.net）が楽しそうだったので自分でもグルメブログをやってみることにしました。ブログ名は『GOURMET of the DEAD（グルメ・オブ・ザ・デッド）』で、主に埼玉県新座市（東武東上線志木駅）周辺のB級グルメ情報を掲載していく予定です。

『なんとか・オブ・ザ・デッド』っていろいろありますが、「ofthedead.info」ドメインさえあればサブドメイン変えていくつでもサイト作れるんじゃね？ってことで勢いでドメインを取得したので、「食」がテーマにもかかわらずゾンビ満載なブログになっています。ちなみにゾンビ映画では『Dawn of the Dead（2004年リメイク版）』がお気に入りです。グルメサイトはぐるナビやら食べログやら巨大メディアが検索上位を独占しているレッドオーシャンですが、ローカル（東武東上線志木駅周辺）に特化してどこまでやれるのか試してみたいと思っています。

新ブログも本ブログと同じくWordPressで構築しています。各記事で紹介するお店の位置情報をうまく見せられないか悩んだ結果、カテゴリーやキーワードなどで一覧で、記事一覧と一緒に位置情報の一覧もGoogle maps上に表示されるようにしました。まだまだ微調整が必要な状態ですがどんどん改良していきたいと思います。

いま一番の課題は記事内容とゾンビが全く関係ないことですｗ

『グルメ・オブ・ザ・デッド』で使っているWordPressプラグイン

Akismet

スパムコメント・スパムトラックバックを防いでくれます。

All in One SEO Pack

記事ごとにSEO要素（タイトル、meta keywords、meta description）を個別設定できるようになります。

Category Order

カテゴリーの表示順位を任意に変更できるようになります。

Contact Form 7

お問合せフォームを簡単に設置できます。

Custom Query String

ページ内に表示する記事数をテンプレートごとに個別に設定できるようになります（トップページは3件表示、検索結果は10件表示など）。

Disqus Comment System

Twitterやfacebookアカウントで認証できる高機能なコメントシステムが設置できます。

Geo Mashup

記事に含まれる位置情報をGoogleマップ上に表示してくれます。カテゴリーごとにマーカーの色を変えたり、カテゴリー別の地図を生成したりとかなり高機能です。

Google XML Sitemaps

検索エンジンのクローラー用にXMLファイルを自動生成してくれます。

Slimbox Plugin

簡単なタグを挿入するだけでLightboxが使えるようになります。

Thumbnail For Excerpts

抜粋記事にサムネイル画像を追加してくれます。

Ultimate Google Analytics

8桁のコードを登録するだけでGoogle Analticsが使えるようになります。

WP-PageNavi

ページ送りを表示してくれます。CSSで好みのデザインにカスタマイズできます。

WP Multibyte Patch

wp-multibyte-patch.phpを編集することで抜粋文字数、抜粋文末の[...]の削除など調整できます。

WP Social Bookmarking Light

Twitter、facebook、Google+、はてななどのソーシャルメディアボタンを簡単に追加できます。

WP Super Cache

ページをキャッシュして高速表示してくれます。

WPtouch

iPhone用に最適化してくれます。細かいカスタマイズも可能。

WordPressが3系になり、複数のブログを1つのWordPressで管理できるマルチサイト機能が搭載されましたが、このブログ1本しかない自分には関係ない機能だと思ってスルーしていました。そんなおり、新たにもう1つブログを作ることにしたので、この機会にマルチサイト機能を試してみました。作業メモとしてブログに残しておきます。

マルチサイトの運用形態としては「サブディレクトリ形式」と「サブドメイン形式」の2つの方法がありますが、今回はサブドメイン形式を試してみました。

サブディレクトリ形式

• http://example.com/blog1/
• http://example.com/blog2/

サブドメイン形式

• http://blog1.example.com/
• http://blog2.example.com/

WordPressのマルチサイト設定手順（さくらインターネット編）

1. さくらのコントロールパネルからサブドメインを追加
   サブドメインの対象フォルダはWordPressがインストール済のディレクトリを指定（ディレクトリ変更の反映に数分かかります）
2. wp-config.phpにマルチサイト機能を有効化するために下記の記述を追加
   define(‘WP_ALLOW_MULTISITE’, true);
   追加する場所は「/* 編集が必要なのはここまでです！〜」の前あたり
3. ログインしなおすと「ツール」に「ネットワーク」が追加されており、そこから「サブドメイン」を選択
4. 赤枠で激しくエラーメッセージが出ますが気にせず、画面に表示された3つの変更作業を実施
   1. blogs.dirの作成
   2. wp-config.phpに追記
   3. .htaccessに追記（または新規作成）
5. ログインしなおし、右上の「サイトネットワーク管理者」をクリック
6. 「サイト」から「新規追加」でサブドメインのサイトを追加
7. これで作業完了
   （「ダッシュボード」から編集するサイトを変更可）

参考にした記事

• WordPressのマルチサイト機能で複数のブログを管理する
• WordPress3.0をインストールする

Tumblrを快適に利用する環境といえば、FireFoxでGreasemonkeyスクリプト（Minibuffer、AutoPagerize、LDRize、ReblogCommand）を使うのが有名です。ニュースやコラムの抜粋、名言、ジョーク、話題の写真、ネタ画像、たまにエロ画像など、ダッシュボードに流れてくるさまざまな情報の洪水の中を「J」キー連打で潜っていき、「これは！」というものがあれば「P」キーでマーキングし、潜り終えたら「T」キーで一気にリブログ！この一連のショートカットが使えないとめんどくさくてTumblrに潜る気になれません。そんな風に思っていたところ、Google Chromeでも同等の環境が構築できるようになっている！とのことで早速試してみました。

結論からいうとこれは完璧！もうTumblrのためだけFireFoxを用意する必要はありません。もうすでにGoogle Cromeをメインブラウザにしていますが、これで完全にGoogle Chromeに移行できます。

快適Tumblr生活（できること）

1. 「J」キーでダッシュボードを進む（「K」キーで戻る）
2. 気になったものには「P」キーでマーキング
3. 「T」キーで一気にリブログ

必要な機能拡張

1. AutoPatchWork
2. Chrome Keyconfig
3. Taberareloo

機能拡張の設定

1. 上記3つの可能拡張をインストール
2. 機能拡張の管理画面を開く
3. AutoPatchWorkは特に設定は不要
4. Chrome Keyconfigは「Basics」タブにある「Smooth Scrol」と「LDRize」にチェック
5. Taberarelooは「デフォルトのポスト先」タブでTumblrに行にチェック、さらに「ポスト関連」タブのユーザースクリプトの設定のところの「Dashboard – ReBlog」にチェック

Tumblr with Google Chrome 参考画像

Chrome Keyconfigが邪魔なときはどうする？

GmailやGoogle Readerなどもともとショートカット操作が設定されているサイトを利用するときに、Chrome Keyconfigが邪魔になるときがあります。そんなときは「esc」キーでChrome Keyconfigの動作を一時無効にできます。再度「esc」キーで復帰します。

Web系の勉強会・セミナーに参加したときに会社の名刺ではなく、個人名刺をいただくことが増えてきました。組織ではなく個人のブランディングも考える時代なんですね。

会社名刺と違って個人名刺であればデザインはフリーダム！アイディア勝負の奇抜なものから、デザイン力をアピールするクールなもの、運営するWebサイトの世界観を踏襲したものなどいろいろなパターンがあってどれもステキです。Twitterやfacebookなどのアカウント、運営サイトのURLなどが掲載してあればその後もオンラインの交流ができます。

うーん、個人名刺は欲しい！
でもデザインするセンスがない (ﾉД`)

そんなときに見つけた（思い出した）のが「TwitterのIDで簡単に作れるミニ名刺カード｜Proca」です。その名の通り、TwitterのIDさえ持っていればTwitterのアイコンとプロフィール情報を取得してミニ名刺を作ってくれるサービスです。Twitterのアイコンがあるとユーザー名までは覚えていなくても「あぁ、このアイコンは見覚えある」となって話がはずむかも？

ミニ名刺ってことで、サイズは横幅は通常のものと同じ（90mm）ですが高さが約半分（30mm）の大きさです。サイズが違うだけでかなりインパクトがあります。名刺の内容はテキスト情報、背景・文字色は変更できますが、フォントの種類やサイズは変更できません。ある程度制限はあるものの、逆にあれこれ悩む必要もなくなって丁度いいですｗ

お値段は50枚で1,500円とお手頃です。専用のケース（革orフェルト）も一緒に注文できます。とりあえず今回は初めてなので50枚とグレーのフェルトケースをポチりました！発送は5営業日以内ってことでしたが、2月27日に注文して3日後の3月2日には届いました。発色も紙質も思っていた以上にハイクオリティーで満足です。今週末の勉強会でこれを配るのが楽しみです。

Proca 参考画像

Proca注文の流れ

1. Proca.jpにアクセスします。
2. Twitter連携を「許可」します。
3. 名刺のタイプ（QRコードの有無）を選択します。
4. Twitterのアイコン・プロフィールが反映されます。
5. 名刺に掲載する内容・色を編集します。
6. デザインが完成したらカゴに入れて注文ページにGo！

反省点

Twitterとfacebookのアカウントを載せたのですが、ユーザーページのURLをそのまま、「http://twitter.com/#!/coldsleeper」と掲載しちゃいました。間違いではないけどあまりスタイリッシュじゃないですね。あらためて他の方の名刺とかを見ると「Twitter : @coldsleeper」みたいなに記載してあります。該当サービスをやっている人ならこれで十分伝わりますね。次回作るときには修正したいところです。