BlogやSNS Archive

うちのブログはアクセス数の割りにコメントやはてブの数が少ないという特徴がある。まぁアクセス頂けるだけでもありがたいんだけど、ちょっとでも反応があると更新モチベーション上がるよね、ってことでWeb拍手を導入してみた。

ちなみにWeb拍手というのは、閲覧者がボタンをクリックするとクリックしたことが管理人に伝わるシンプルなツールである。

WordPressに最適!?なWeb拍手ツール【ＧＪ！】

導入に当たって一番重要だったのははてなスター風にページ遷移しないこと。別ウィンドウのお礼ページとかマジ不要ですから。ということでいろいろ探した結果、Minor Problem – Web拍手ツール【ＧＪ！】（グッジョブ！)がいいんじゃないかということになった。WordPressとGJ!でググったところ設置しているサイトも多いみたい。

設置

上記サイトを見て簡単に設置できました…と言いたい所だけど、wordpressに設置する場合 ≪ Minor Problemのテキストボックスの中身をコピペしたら半角記号が全角になっていて動かない、というミスをしました。正しくは以下のコードをコピペ、ですね。

<script type="text/javascript" src="http://prius.cc/gj/gj.js"></script><br />
<script type="text/javascript" src="http://prius.cc/gj/prototype.js"></script>

<input id = "<?php the_permalink(); ?>" type = "image" src = "" alt="拍手" style="vertical-align:middle;" onClick="goodjob('<?php the_permalink(); ?>','<?php the_title(); ?>') "><script>showbutton('<?php the_permalink(); ?>','<?php the_title(); ?>');</script><input type = "text" id ="<?php the_permalink(); ?>_gj_message" style="border-color:orange;vertical-align:middle;"> <span id="<?php the_permalink(); ?>_gj_mark"></span><br />
↑ボタンを押すと拍手を送ることができます。メッセージも送れます。<br />

設置後デザイン

Web拍手の画像や数字表示場所はweb拍手 – anaheim is on the moon.さんをそっくりそのままパクらせてもらいましたw あと同じテンプレを使っているWordPress＋WEB拍手スクリプトGJ!＋Vicuna – 絵文字ネットでWordPress+Vicuna環境にGJ!を導入する方法が書いてあるので、合わせて見るといいかもしれない。

ただ2009年5月時点では、JavaScriptファイル読み込みの記述はヘッダー(header.php)だけに書けばよかったのでそこだけ注意です。

Web拍手&はてブ

下のボタンを押すと拍手を送ることができます。同時にメッセージも送れます。

はてブはこちら。

mixiアプリというmixi上で自分の作ったWebアプリを動かせる仕組みが始まるようです。これは面白そうだな、と思いました。なぜなら、mixi上で動作する=マイミクの友人に使ってもらえるので、初期の集客力と開発モチベーションが全然違うからです。

Web2.0時代では、自作Webアプリをインターネットに公開しても

• 開発者が有名
• 開発会社が有名
• アイディアが素晴らしい
• 開発速度が速い

など、よほどの事がない限り注目されません。僕も以前NEWSING BOOSTERというWebサービス(のようなもの)を作りましたが、1日30アクセスくらいではてブも8ブクマしかつきませんでした。

その点、mixiアプリは作った瞬間からマイミクの何割かがユーザー登録してくれるわけです。マイミク100人なら20人～30人くらい。フィードバックも必ず貰えるので開発モチベーションも維持できる。人間、自分のためより他人のための方がより努力できる。

また、どこかのコミュニティに特化したアプリを作って、そのコミュニティのメンバーに使ってもらう手もあります。マイミクより使用率は低くフィードバックも少ないでしょうが、10000人のコミュで1%が使ってくれれば100人の初期ユーザーです。

ということでこれは是非開発しようと思って仕様書を読んでみました。

OpenSocialとか聞きなれない言葉を使わないで下さい＞＜

「mixiアプリはOpenSocialに対応している」これを聞いて「また新しい言語を覚えないといけないのか…」と思いましたがこれは間違いでした。OpenSocialというのはアプリ利用者の

• 友達一覧
• 参加しているコミュニティ一覧
• 住んでいる姓・名・地域などプロフィール
• アイコン

などを、OpenSocialに対応しているサイトなら同じのコマンドで呼び出せるようにしたもの。だからmixiで作ったアプリをOpenSocialに対応しているgooホームなどにコピペすればそのまま動きます。ただしmixiミュージックでの再生履歴など、他のSNSになさそうor少なそうな機能はコピペで動きません(※)。

それにしても「友達一覧」とか「コミュニティ一覧」ってのは、mixiでもGREEでもSNSには必ず存在する要素だもんな。それを共通言語化するなんて…よく考えたなぁ。感心します。

※ OpenSocialのバージョンは0.9で基本的な機能しか実装していない。将来的には各SNS独自の機能もOpenSocialに盛り込まれる可能性がある。ちなみに例に挙げただけで、mixiミュージックの再生履歴は取得できません。

mixiアプリの実体はHTMLとJavaScript

ということで、OpenSocialではプロフィール情報を取得するだけ。その後はJavaScriptで動かします。こう考えると、mixiアプリ=mixiの情報を取得して使えるJavaScriptアプリと同じです。mixiの情報を取得する所はOpenSocailの書式を新たに覚える必要があるけど、mixi Developer CenterのGadget XMLとJavaScript APIのページの例をコピペすればよし。

具体的な構成

こんな感じです。mixiアプリ画面で自前サーバのXMLファイル(OpenSocailのGadget XML)を指定します。

XMLファイル1つで完結する簡単なアプリでもいいし、画像ファイルやCSS、別出しJavaScriptファイルを使ってもOK。ここらへんは自作Webアプリと同じです。

…という感じで、特に身構えず気軽に作れるものだな、と思いました。

参考文献

• ウェブ開発の次なる主戦場、Open Social

スライドショー形式で長いが、内容は一番分かりやすかった。中でmixiアプリが不安定と書いているが、これは4月18日時点のもので現時点では不安定とは感じなかった。

• mixi Developer Center (ミクシィ デベロッパーセンター) ≫ mixiアプリ

実際の作成にあたっては公式が一番役に立つ。特にGadget XML・JavaScript API・外部サーバの呼び出しの項は必読。

• タグ「mixiアプリ」を含む新着エントリー – はてなブックマーク

最新情報のチェックはこれでOK。

その他まだ読んでないけど有用そうなリンク。

• フラスコ ≫ はじめてのflashなmixiアプリ
• mixi アプリ制作に欠かすことのできない便利な開発環境 OSDE のインストール方法をご紹介 | mixi アプリ 大全集
• はじめての mixi アプリ – IT戦記
• 「mixiアプリを作ってみよう！」連載開始 – V.S.A. III – TYZOH(タイゾウ)

ここで問題点が。

俺、JavaScript書けません。

Web拍手&はてブ

下のボタンを押すと拍手を送ることができます。同時にメッセージも送れます。

はてブはこちら。

目次

1. 旧ブログのアクセスを引き継ぎつつ、個別記事ページを生成していないSereneBach(sb)からWordPressへ移行する方法(このエントリ)
2. 新ブログのパーマリンク作成(投稿名ベース)
3. 旧ブログ→新ブログへのパーマリンク対応作成
4. SereneBachからエクスポートしたデータを編集
5. WordPressにSereneBachからエクスポートしたデータをインポート
6. 旧ブログ(sb)→新ブログ(WordPress)へのリダイレクト設定
7. 実際の移行レポートとその後←今ここ

---

今までに説明した手順で実際に移行した結果を報告します。

1.新サイト(wordpress)のbasic認証解除

構築中に.htaccessで検索に引っかからないようにしていたのを解除します。

2.旧サイト(sb)→新サイト(wordpress)へのリダイレクト開始

旧サイトの.htaccessを有効にし、新サイトにリダイレクトできるようにします。

3.念のため旧サイトのURLでアクセスして新サイトに飛ばされるか確認。

旧サイトでアクセスの多いページをpickupし、新サイトにリダイレクトされるか確認します。

終わり。作業時間は5分くらいでした。後は検索エンジンの登録が切り替わるのを待つのみ。

Web型RSSリーダーのURL変更

これは速攻でリダイレクトされました。リダイレクトを開始したのがAM5時なので4～5時間以内にリダイレクトされた事になります。

• Bloglines 03/18 09:15:37
• livedoor Reader 10:00:42
• DELCO READER rss2 11:07:03
• FreshReader 03/18 10:30:13
• Google Reader 03/18 10:31:04
• Yahoo RSSリーダー 03/18 06:53:53
• Fastladder 03/18 14:06:28
• はてなRSS 3/18 16:46:32

検索エンジンのURL変更

移転から5日経った3月22日に、「ぷりどうぐ」で検索したら新URLが一番上に来るようになりました。ただ個別ページは旧URLの方が上に来ます。旧URLから新URLへの移転はちょっと時間がかかりそうです。

(2009/3/25追記) 個別ページの登録も切り替わり始めました。Yahoo!はhttp://prius.cc/d/以下の個別ページに切り替わって完璧。Googleはhttp://prius.cc/d/temp以下まで切り替わり。META refresh分だけ遅れてるようです。MSNは…全然切り替わらない！なんとかしろよ～(汗 まぁMSN経由で来る人少ないからいいけどさ。

(2009/3/30追記) googleも完全に切り替わりました。MSNはダメです。

アクセス数について

変化なし。旧URLからのアクセスが全て飛ばされてくるので当然ですが…。ただこれから新規記事を書いても旧URLほど検索エンジンで上位に来ないかもしれません。

---

以上で移行手順は終了です。5年近く使用した旧URLは大手ニュースサイトからリンクが張られたりと価値も高くちょっと名残惜しいですが、こればっかりは時間が解決するほかないと思います。これからは地道にこのURLでエントリ書いて、5年後には旧URLで書いたエントリ数を抜きたいですね。

Web拍手&はてブ

下のボタンを押すと拍手を送ることができます。同時にメッセージも送れます。

はてブはこちら。

目次

1. 旧ブログのアクセスを引き継ぎつつ、個別記事ページを生成していないSereneBach(sb)からWordPressへ移行する方法(このエントリ)
2. 新ブログのパーマリンク作成(投稿名ベース)
3. 旧ブログ→新ブログへのパーマリンク対応作成
4. SereneBachからエクスポートしたデータを編集
5. WordPressにSereneBachからエクスポートしたデータをインポート
6. 旧ブログ(sb)→新ブログ(WordPress)へのリダイレクト設定←今ここ
7. 実際の移行レポートとその後

---

ここからが本番。旧ブログから新ブログへのリダイレクト設定を行います。SereneBachで個別記事htmlを作成していない場合はキツいです。

個別記事htmlを作成している場合

まずは簡単な方から。個別記事htmlを作成している場合、.htaccessのRedirect permanet機能のみでリダイレクトを行う事が可能です。検索エンジン相手にはステータスコード301を返し移動した事を知らせ、人間が普通にブラウザでアクセスしてきたら、移動先のURLに速攻で飛ばします。URL移転の際に、過去のアクセスを引き継ぐ一番良いと言われている方法です。

今回の場合なら、

Redirect permanent /sb/log/eid858.html http://prius.cc/d/20090312_heisei20nembunnokakuteishinkok.html
Redirect permanent /sb/log/eid857.html  http://prius.cc/d/20090311_union_bindgin_forceotsukattemi.html
Redirect permanent /sb/log/eid856.html  http://prius.cc/d/20090310_choukoii.html


～

Redirect permanent /sb/log/eid3.html  http://prius.cc/d/20040422_tanjunnanamaedana_internet2.html
Redirect permanent /sb/log/eid2.html  http://prius.cc/d/20040415_bokobokoboko.html
Redirect permanent /sb/log/eid1.html  http://prius.cc/d/20040414_torakkubakkuyattemimashita.html
Redirect permanent /sb/log/eid0.html  http://prius.cc/d/20040412_akuachitannekku_fuaiten.html

と延々書いて行けばOKです

※参考URL

• HTTPリダイレクト Others .htaccess

• .htaccessでリダイレクト機能を利用する方法

• ミケネコの htaccess リファレンス

• .htaccessによる旧URLのリダイレクト方法 (Kazuの挑戦日記)

個別記事htmlを作成していない場合

しかし個別記事htmlを作成せず、sb.cgi + パラメータでアクセスしている場合この方法は使えません。なぜなら

Redirect permanent /sb/sb.cgi?eid=858 http://prius.cc/d/20090312_heisei20nembunnokakuteishinkok.html
Redirect permanent /sb/sb.cgi?eid=857  http://prius.cc/d/20090311_union_bindgin_forceotsukattemi.html
Redirect permanent /sb/sb.cgi?eid=856  http://prius.cc/d/20090310_choukoii.html


～

Redirect permanent /sb/sb.cgi?eid=3  http://prius.cc/d/20040422_tanjunnanamaedana_internet2.html
Redirect permanent /sb/sb.cgi?eid=2  http://prius.cc/d/20040415_bokobokoboko.html
Redirect permanent /sb/sb.cgi?eid=1  http://prius.cc/d/20040414_torakkubakkuyattemimashita.html
Redirect permanent /sb/sb.cgi?eid=0  http://prius.cc/d/20040412_akuachitannekku_fuaiten.html

と.htaccessに記載した場合、「?」以降は移転先のURLのパラメータとして処理されます。つまり実質下記のようになってしまいます。

Redirect permanent /sb/sb.cgi http://prius.cc/d/20090312_heisei20nembunnokakuteishinkok.html?eid=858
Redirect permanent /sb/sb.cgi http://prius.cc/d/20090311_union_bindgin_forceotsukattemi.html?eid=857
Redirect permanent /sb/sb.cgi http://prius.cc/d/20090310_choukoii.html?eid=856


～

Redirect permanent /sb/sb.cgi http://prius.cc/d/20040422_tanjunnanamaedana_internet2.html?eid=3
Redirect permanent /sb/sb.cgi http://prius.cc/d/20040415_bokobokoboko.html?eid=2
Redirect permanent /sb/sb.cgi http://prius.cc/d/20040414_torakkubakkuyattemimashita.html?eid=1
Redirect permanent /sb/sb.cgi http://prius.cc/d/20040412_akuachitannekku_fuaiten.html?eid=0

対処方法

まずこういう.htaccessを作ります。

DirectoryIndex sb.cgi
RewriteEngine on
RewriteBase /sb
RewriteRule sb.cgi http://prius.cc/d/temp/ [R=301,L]
RewriteRule log\/index.rdf http://prius.cc/d/feed/ [R=301,L]
RewriteRule log\/atom.xml http://prius.cc/d/feed/ [R=301,L]

これで「http://prius.sakura.ne.jp/sb/sb.cgi?eid=858」へのアクセスは、「http://prius.cc/d/temp/?eid=858」へのアクセスになります。なお、最後の2行でRSSのリダイレクトを行っています。RSSはファイルへのアクセスなのでこれでリダイレクト完了です。

※Redirect parmanentでもできるかもしれませんが、僕がやった時は上手くいきませんでした。RewriteRuleBase、RewriteRuleについては、以下のURLを参考にしてください。

• mod_rewriteを用いて「http://www.hoge.jp/index.php?abc=XXXXXX」を「http://www.hoge.jp/abc/XXXXXX.html」に変換したいのですが、以下のように行うと404エラーとなりま.. – 人力検索はてな
• Blogn（ぶろぐん）を静的生成なブログにする方法 – ブログンサポート
• Kung Noi:rewriteモジュールでURLを書き換えろ！
• mod_rewrite
• .htaccess – Rewrite

meta refreshを使う

では「http://prius.cc/d/temp/?eid=858」へのアクセスを「http://prius.cc/d/20090312_heisei20nembunnokakuteishinkok.html」に飛ばしてやれば良い。これにはmeta refreshを使います。

301リダイレクトが使えないときの転送方法 ≫ 海外SEO情報ブログ・メルマガ

具体的には「http://prius.cc/d/temp/?eid=858」にアクセスがあると以下のようなHTMLを出力するようなcgiを作ります。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head></p>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>

<script type="text/javascript">
_uacct = "UA-72342-1";
urchinTracker();
</script>

<p><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta HTTP-EQUIV="Refresh" CONTENT="0; URL=http://prius.cc/d/20090312_heisei20nembunnokakuteishinkok.html">
<title>index.html</title>
</head>
<body>
</html>

…これはまぁ、実際のファイルをダウンロードして見て見て下さい。個別エントリ・プロフィール・カテゴリ・年月へのアクセスを、新URLに飛ばしています。プログラムを知らない人でも雰囲気はつかめると思います。

cgiファイルのダウンロードはこちら。

以上でリダイレクトの説明は終わりです。

次→実際の移行レポートとその後

Web拍手&はてブ

下のボタンを押すと拍手を送ることができます。同時にメッセージも送れます。

はてブはこちら。

目次

1. 旧ブログのアクセスを引き継ぎつつ、個別記事ページを生成していないSereneBach(sb)からWordPressへ移行する方法(このエントリ)
2. 新ブログのパーマリンク作成(投稿名ベース)
3. 旧ブログ→新ブログへのパーマリンク対応作成
4. SereneBachからエクスポートしたデータを編集
5. WordPressにSereneBachからエクスポートしたデータをインポート←今ここ
6. 旧ブログ(sb)→新ブログ(WordPress)へのリダイレクト設定
7. 実際の移行レポートとその後

---

エクスポートしたデータの編集が終わったので、インポート→postnameの編集を行います。

インポート！

WPの管理画面から「インポート」→「Movable Type もしくは Typepad のインポート」を選択し、編集したテキストを指定してアップロードします。

WP側の個別ファイル名(postname)リネーム

固定リンクを変えずにスムーズにMovableTypeからWordPressに移行するまでの作業ログ – IDEA*IDEA ～ 百式管理人のライフハックブログ ～の「マッピング用のSQLを作る」を参考に、post_nameの変更を行います。

なお仮にインポートに失敗しても、SQLから以下の5つのテーブルを消せば元に戻ってやりなおせます。

• wp_comments
• wp_posts
• wp_terms
• wp_term_relationships
• wp_term_taxonomy

トラックバックを許可する(SQL使用)

※これはお好みで。

[ WordPress ] 過去ログのトラックバック・コメントを一括で許可する方法 – WordPress 研究室を参考に、全てのエントリのトラックバック設定をONにします。

次→旧ブログ(sb)→新ブログ(WordPress)へのリダイレクト設定

Web拍手&はてブ

下のボタンを押すと拍手を送ることができます。同時にメッセージも送れます。

はてブはこちら。