wordpress の PostViews プラグインで日付を表示する

Wordpress 便利ですね！これが無料ってホント信じられないです。

さて、その Wordpress の PostViews プラグインって便利なんですが、閲覧数順に表示したい場合もあると思います。でも PostViews では日付を取れないので、中身を改造してやる必要があります。でも簡単！1 分あればできます。

1. ファイルを開く

「wp-postviews」→「wp-postviews.php」をあなたが愛してやまないテキストエディタで開きましょう。

2. 「%POST_DATE%」を追加する

$temp = str_replace("%POST_DATE%", $post->post_date, $temp);

これを追加してアップロードします。追加する場所は、「%POST_URL%」で検索して出た箇所に次々と追加してやればいいです。これで %POST_DATE% が設定画面で扱えるようになります。

3. 管理画面で整形する

管理画面の「設定」→「PostViews」を開いて、「Most Viewed Template:」にあるテキストエリアで整形し、「Save Changes」を押して保存します。例えば、こんな風に。
<div>
<span class="popular_date">%POST_DATE%</span>
<a href="%POST_URL%" title="%POST_TITLE%">%POST_TITLE%</a>
</div>

「3.」の画面で、「Most Viewed Template:」の「Allowed Variables:」に「%PostViews%」がないよ！って焦っても大丈夫です。「wp-postviews」→「postviews-options.php」を開いて、「Allowed Variables:」を検索しましょう。そしたら見えるはずです。そこに「- %POST_DATE%
」を追記してアップロードすれば、ほら、出てきましたね？

「京巡りガイド」を公開しました

昨年、京都で遊ぼう！ として公開した、京都での観光名所やホテル等の観光案内（ルート検索付き）のウェブサービスですが、今回「京巡りガイド」としてリニューアル公開しました。
以前は JavaScript ベタ書きでしたが、今回 jQuery + jQuery Mobile で構築してみました。データを読み込むのに Cache_Lite をかましてるので、3 時間はキャッシュから取得します。ローディングアニメーションは、自作の jQuery プラグイン「jquery.wakeup.js」を使ってます。

京巡りガイド

**動作確認環境
スマートフォン

• iPhone 4 以降
• iPod touch(iOS 4) 以降
• Android(OS 2.3) 以降

タブレット

• 新しい iPad

パソコン

• Safari 5 以降
• Chrome 20 以降
• Firefox 14 以降

「京巡りガイド」では、GPS現在地や指定した出発地から目的地までのルートを検索できます。ルートは、JRや私鉄、地下鉄の各鉄道や市バスを利用した結果が検索されます。
検索画面では次の情報を見られます。駅とバス停では時刻表、ホテルとショップでは電話番号、神社仏閣と観光スポットでは写真、全てのカテゴリで地図を表示します。
詳細画面では次の情報を見られます。駅とバス停では乗り換えられる距離にある駅やバス停、ホテルとショップでは電話番号とルート検索、神社仏閣では写真とWikipediaの情報とルート検索、観光スポットでは写真とルート検索、全てのカテゴリで地図および近くに駅があった場合は食べログサイトへのリンクを表示します。また、ルート検索の保存も可能です。

神社仏閣やホテルなどの一覧を見る

「検索して選ぶ」でホテル名などを入力（セレクトメニューでカテゴリを絞ることも可能）するか、「カテゴリから選ぶ」「最寄りの施設から選ぶ」でのボタンを押すと一覧ページが表示されます。
「検索して選ぶ」では、よみがなでも検索できます。「カテゴリから選ぶ」で表示した場合、初期状態では「五十音順」の「あ行」になっています。「五十音順」では「あ行」「か行」「さ行」「た行」「な行」「は行」「ま行」「や～ん」を、「近距離順」では「500m以内」「1km以内」「2km以内」を選べます。

「基本情報」では、「読み方」「（出発地からの）直線距離」「路線（駅・バス停のみ）」「Tel（ホテル・ショップのみ）」が表示されます。また、「時刻表」（駅・バス停のみ）は「駅から時刻表」（駅）・「京都市バス」（バス停）へ、「予約」（ホテル・ショップのみ）は「楽天トラベル」もしくは「るるぶ」へ、「評価」（ショップのみ）は「食べログ（掲載されている場合のみ）」へ、それぞれジャンプします。「写真」（神社仏閣・観光スポットのみ）を押すと、Google画像検索での該当施設を検索した結果が表示され、「Tel」（ホテル・ショップのみ）は電話をその場でかけられます。また、「出発地にする」を押して、出発地に指定することができます。
「地図」を開くと、出発地が青いピンで、該当施設を赤いピンで表示した地図が表示されます。
「ルートなどの詳細」を押すと、出発地から該当施設までのルートなどを示すページに移ります。

ルートなどの詳細を見る

一覧ページで「ルートなどの詳細」を押すと、出発地から該当施設までの電車やバスによるルートや周辺地図などの詳細ページが表示されます。
「基本情報」では、一覧ページでの「基本情報」に加え、「目的地周辺の飲食店」として、該当施設の周囲1km以内にある駅を元に検索した「食べログ」へのリンク（周囲に駅がない場合は表示されません）が、神社仏閣の場合はWikipediaの情報が、それぞれ表示されます。

「ルート」を開くと、最大3件までルート情報が表示されます。駅やバス停の情報と、路線や時刻表（駅の場合は「駅から時刻表」、バス停の場合は「京都市バス」にジャンプします）、乗り換え（ある場合）のボタンが表示されます。
また、出発地から経由地も含めた該当施設までの大まかな地図も表示します。

「乗り換え」を押すと乗り換え元と乗り換え先をピンで示した地図を表示します。

「（該当施設）周辺地図」を開くと、該当施設周辺の地図を表示します。大きな地図で見る場合（iOSの場合は地図アプリに自動切り替え）は、「大きな地図で見る」を押してください。

「SNS連携」を開くと、TwitterとFacebookへ投稿できるエリアが表示されます。投稿したくない共有先はフリップスイッチでオフにできます。投稿するには、ナビゲーションエリア（パソコンやiPadは画面左、その他は画面下）にある「SNS連携」を開いて接続します。

降りる駅までの情報を見る

詳細ページの「ルート」内の路線名を押すと、路線内の駅やバス停の一覧ページが表示されます。乗車駅・バス停は赤で、降車駅・バス停は黄で表示されます。
※バスの場合は、往路と復路で通るバス停が異なるので、目安とお考えください。

「乗り換え」を押すと、その駅やバス停で乗り換えられる路線が表示されます。

foursquareのExplorer機能を使って現在地から近くの施設を探す

foursquareのExplorer機能を使って、現在地から近くの施設を探すことができます。ナビゲーションエリア（パソコンやiPadは画面左、その他は画面下）にある「SNS連携」を開いてfoursquareに接続します。

ナビゲーションエリアにある「最寄りの施設から選ぶ」内の「explorer」を押し、表示されたページで「飲食店」「カフェ」「バー」「ショップ」「美術館等」を選ぶと、結果が表示されます。電話番号が登録されている場合は、電話ボタンが表示されます。また、foursquareでのvenueページへジャンプするボタンも表示されます。

ルート検索を保存する

全てのページは、「このページを保存」を押すことにより、端末内のストレージに情報を保存することができます。

出発地が現在地で詳細ページを保存した場合は、次回アクセスした際の現在地からルートを計測します。

保存したページを削除したい場合は、「削除モード」を押してモードを変更し、削除したいページを押してから「削除」を押してください。

GPS計測について

GPSはGeolocation API を用いて計測しており、スマートフォン端末でのGPS設定が有効の場合に発動しますが、パソコンでアクセスした場合は取得せずに、現在地を「京都駅」としています。

Studygift で思うこと

既に炎上しきった感のある Studygift ですが、自分なりに思ったことを書こうかと。

「勉強したいのに、金銭的な問題で継続できない人」を支援するのは大いに賛成です。しかし Stydugift はその純粋な想いを実現するのに手段として正しかったのかどうかは、かなりの疑問を感じる。

1) 扉ページを見ただけで疑問を感じる

現在は「studygiftの今後について」という文章が掲載されているトップページですが、当初は坂口氏がどどーんと登場したものでした。ウェブサイトとしては「勉強したいのに、金銭的な問題で継続できない人」を支援するという名目でしたが、これだけ見ると、ただの個人援助にしか思えませんでした。確かにそのときは坂口氏だけが「被支援者」だったのかもしれませんが、あまりにも個人を前面に押し出していたのです。坂口氏が幾人もの「被支援者」の中の一人という位置づけがもしあったとしたら、もっと違った見せ方があったと思います。

2) 問題だったのは金銭的問題ではなく、勉学に対する態度だったこと

その違和感の内に読み進めて行くと、「奨学金をもらってたけど、勉強してなかったから打ち切られちゃった」という内容にぶち当たります。就職活動のために始めたという SNS、Google+ ではフォロワが国内でトップになったはいいけど、どうもその影響もあり、勉強してなかったのではと思ってしまいます。現に坂口氏の撮る写真についても、「良いと思える写真を撮れるまで撮りまくった」ということを見ました。「撮りまくる」時間を勉学に充てなかった理由はなんだったのでしょうか。そして、大学とは就職までの橋渡しと思っているところに果たして、「勉強する意欲があるのか」ということに疑問符が付きます。

3) Google+ で国内一位だったことに対する過剰な自信

Studygift のページでは、状況説明よりも Google+ で国内一位になったことの方が大々的に踊っていた感じを受けました。穿った考えかもしれませんが、「有名になった私だったら集められる」という驕りがあったのではないかとさえ思えるのです。確かにサービスの初っ端としてはインパクトがあったかもしれませんが、後続する被支援者たちが「あの人ぐらいに有名にならないと掲載されない」と万が一考えるようになってしまったらどうなんでしょう。

そして、炎上後に色々と発覚しましたよね。中でも、ウェブサイト内では「このままだったら退学になる」みたいな書き方でしたが、実は退学済みだったことが大きいですね。学校が「退学処分」を決めたというのは、様々な経緯を考慮された上で決めたことだと思います。大学側にとっても学生が減ることは運営上痛いと思いますし、退学は最後の手段だと思うのです。しかしそれが成された元生徒に対してこれだけ大々的に学費調達を謳われては、大学にとっても迷惑な話だと思います。

もう、至る所で胡散臭さを感じるんですよ。結局、現在は「全額返金」になりましたが。今となっての関心はただ一つ、体制を立て直し、坂口氏の「次の被支援者」はいつ登場するのか、ということです。もしこれがなければ本当に、「勉強したいのに、金銭的な問題で継続できない人」を支援するためのサービスではなく、坂口氏個人を支援するサービスになってしまいますよね。

ローディングアニメーションを生成する jQuery プラグイン jquery.wakeup.js

ローディングアニメーションを生成する jQuery プラグインを作ってみました。wakeUp() でアニメーション開始、goToSleep() でアニメーション停止を行います。アニメーションの形やスピードなどは、プロパティを与えて設定します。
GitHub: jquery.wakeup.js

☆確認環境
Chrome/Safari/Firefox/Opera（heart 以外）

☆プロパティ一覧

• type：アニメーションの形（circle/dot/line/beat/star/heart）
• color：色（CSSで定義できる値）
• size：サイズ（canvasのサイズ、数値）
• speed：アニメーションのスピード（ミリ秒）
• clockwise：右回りか左回りか（trueが右回り）
• item：表示されるアイテムの量（数値）
• itemSize：表示されるアイテムのサイズ（数値）
• phase：アニメーションの段階（数値）
• fade：fade inもしくはfade out する際の完了までの時間（ミリ秒）
• fadeIn：fade inするかどうか（trueで実施）
• fadeOut：fade outするかどうか（trueで実施）

☆ファイルの読み込み

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script type='text/javascript' src='jquery.wakeup.js'></script>

【使い方（dot）】
☆html

<button id='dot'>Play/Stop</button>
<div id='wake_dot'></div>

☆JavaScript

[ 開始 ]
var option = {
  type: 'dot',
  color: 'rgb(255, 0, 0)',
  size: 50,
  speed: 30,
  clockwise: false,
  item: 20,
 itemSize: 1
};
$('#wake_dot').wakeUp(option);

[ 終了 ]
$('#wake_dot').goToBed();

☆結果



【使い方（heart）】
☆html

<button id='heart'>Play/Stop</button>
<div id='wake_heart'></div>

☆JavaScript

[ 開始 ]
var option = {
  type: 'heart',
  color: 'rgb(255, 0, 255)',
  size: 30,
  speed: 50
};
$('#wake_heart').wakeUp(option);

[ 終了 ]

☆結果

BlogPreviewer（Chrome/Safari 機能拡張）を公開しました

Chrome 機能拡張 BlogPreviewer を公開しました。以前に previewForBlogger として公開したものですが、Blogger の UI が昨年変更されてから、この拡張が使えなくなっておりました。そこで、今回新たに BlogPreviewer として公開しました。また、Safari をお使いの方で、previewForBlogger をインストールされていた方は、アップデートすると本拡張がインストールされます。Chrome 拡張だと Blogger という名前がダメなので、名称を変更させていただきました。

インストール後、Blogger の記事作成・編集ページを開くと、以下のようなボタンが表示されます。


ボタンを押すと、プレビューエリアが下から顔を出します。


リアルタイムで更新され、以前では HTML モードでしか動作しませんでしたが、今回は作成モードでも動作します。

興味のある方は、以下からどうぞ。
[ Chrome ]
BlogPreviewer: Google Chrome 機能拡張

[ Safari ]
previewForBlogger: Safari 機能拡張（Social Networking 内の中ほどにあります）

SelectorHighlighter（Chrome 機能拡張）を公開しました

Chrome 機能拡張 SelectorHighlighter を公開しました。HTML 内に記述されたスタイルや CSS を読み込んで表示し、それらに含まれるセレクタをクリックすると、ページ内で該当する箇所の背景色が変わります。

操作画面は、右クリックによるメニューから呼び出すことができ、以下のような操作画面が出現します。


セレクタをクリックすると、該当箇所の背景色が変わります。


「Minimum」をクリックすると、小さく表示されます。


色は赤・青・黒の三種類から選べます。


興味のある方は、以下からどうぞ。
SelectorHighlighter: Google Chrome 機能拡張

Magic Trackpad を使ってみてる

今年、ずっと愛用してきた Logicool Performance Optical Mouse G400 のクリクリが職場放棄してしまいました。一昨年にそのクリクリの手応え（コリコリする感じ）がなくなり、ツルツルとした感触になっても動いてたので使ってたけど、どんだけツルツル回しても知らんぷりされるようになってしまいました。

仕方ないので、iMac を買ったときにひょっこりついてきた Mighty Mouse を使ってたんだけど、そのクリクリもストライキを起こしてしまい、よく使う方向のみ動かないとかいうのは嫌がらせにしか思えません。

仕方ないので、この際とばかり Magic Trackpad を購入しました。さて、その使い勝手はと言いますと、極上ですなこれ。なんなのこれ。二本指でのタップで右クリック、二本指のスワイプでブラウザの戻る/進むができ、三本指で Spaces の切り替えができ、四本指のスライドで MissionControl や Exposé の起動ができる。これだけでもすごくステキ！さらに MagicPrefs っていうのを一緒に使えば、さらに色んなジェスチャーでの認識が可能になります！


ただし、不満点がないわけではなく、細かい操作をする場合はマウスの方が未だにしっくり来ます。ぼくだとプログラミングするときの必要動作、デザイナならデザインツールでの必要動作で多少の難を感じるかもしれません。あと、これはどうすれば良いのかよくわかんないんですが、ドラッグするのが至難の業。ドラッグはトラックパッドを押し込んでのクリックが必要なんですが、その他の動作が滑らかだけに、力を入れるのが億劫になってしまいがちで、しかもクリックするときにカーソルがズレてしまうこともあります（もちろんこれはぼくの指が原因ですが）。

ということで、細かい動きやドラッグ操作はマウスに任せてます。

アップル - Magic Trackpad - デスクトップのためのマルチタッチトラックパッド。