Hatena::ブログ(Diary)

IT戦記 このページをアンテナに追加 RSSフィード

2011-09-05

Facebookページの顔、「Welcomeページ」のとことん簡単な作り方

はじめに

みなさんこんにちはヽ(´ー`)ノ

本日、Facebook ページにウェルカムページを簡単に追加できるサービス「ウェルカムページメーカー」をリリースいたしました!

20110905103756

どんなサービスなの?

Facebook ページを持っている人なら、誰でも「とことん簡単に」ウェルカムページを作れるサービスです!

今までも、このようなサービスはあったのですが「とことん簡単に」というところを追求したのがこのサービスです。

ウェルカムページって何?

ウェルカムページとは、 Facebook ページのトップページとなるページで簡単なメッセージや、「いいね!」を促す文言を載せたりすることができます。

有名なウェルカムページとしては レッドブルの Facebook ページ などがあります。

20110905103757

ついつい、「いいね!」をクリックしてしまいそうです!

なんで、「いいね!」されるが重要なの?

「いいね!」されることで、ユーザのニュースフィードにそのページの更新情報が流れるようになるのです。

f:id:amachang:20110905103758j:image

なので、「企業」や「ブロガーさん」がユーザともっと仲良くなるために「いいね!」してもらうことは結構重要なことみたいです><

でも、ウェルカムページ作るのめんどくさい><

でも、今までウェルカムページを作るにはどうしても Facebook アプリの知識が必要だったり、 FBML という独自のマークアップ言語を使う必要があったりと何気にめんどくさい作業だったんです><

と、言うわけで

「とことん簡単」にウェルカムページ作りたい!

という要望に応えたサービスがウェルカムページメーカーです!

使い方(ウェルカムページの作り方)

と、言うわけで簡単にウェルカムページメーカーを使って、ウェルカムページを作ってみましょう。

1. 画像を 2 枚用意する

今回は、サンプルにこんな画像を用意してみました

いいね!を押して   ... - はてなちゃんセリフ - はてなセリフ べ、べつに   嬉しい... - はてなちゃんセリフ - はてなセリフ

2. ウェルカムページメーカーに行って「さっそく作る」をクリック!

お金がない!どうしようとお悩みの方が見るサイト へ行って

20110906194424

「さっそく作る」というボタンをクリックします

3. Facebook ページを選ぶ

f:id:amachang:20110905103800j:image

ウェルカムページメーカーを追加しますか?と表示されますので、ウェルカムページを追加したい Facebook ページを選びます。

f:id:amachang:20110905103801j:image

確認画面が出るので、「ウェルカムページメーカーを追加する」を押します。

4. 画像を設定する

追加すると、以下のような画像設定画面が表示されますので、

f:id:amachang:20110905103803j:image

画像を設定して、「変更を適用する」を押します

5. 完成したウェルカムページをデフォルトページにする

以下のような更新完了ページが表示されますので、

f:id:amachang:20110905103804j:image

Facebook ページの設定に行き、「デフォルトで表示するタブ」を「ウェルカム!」に設定します。

6. これで完成!

このページに設定してみたので見てみてください! → Amachang | Facebook

f:id:amachang:20110905103805j:image

おおおお!出来てますね!簡単!

このサービスを作ろうと思ったきっかけ

で、なんでこんなサービスを作ろうかと思ったかというと先日以下のようなやりとりがあったんです。

とある会社にて

A さん:「Facebok ページにウェルカムページみたいなの作りたいんだよねー」

僕:「じゃあ、 HTML くれればやっときますよー」

A さん:「画像のほうが楽だわ」

僕:「え、 HTML より画像のほうが楽なんすか?」

A さん:「そりゃそうよ」

僕:「じゃあ、アップロードフォームがあればいいの?」

A さん:「うん」

僕:「今、作るわ」

A さん:「じゃあ、僕画像作るわ」

僕:「フォーム作った」

A さん:「画像できた」

僕:「これ、意外と便利ね」

A さん:「だね」

僕:「明日リリースするわ」

A さん:「えっ」

って感じで

打ち合わせ中に書いたサンプルコードが便利だったのでサービスとしてリリースすることにしたって感じです。

その打ち合わせ中に書いたコード

もちろん、エスケープもしてないし、 CSRF チェックとかもしてないし、 画像のバリデーションもしてないし、 HTML も超適当なのでこのままリリースしてるわけではないですが、その場でパパっと書いたコードは以下のものです。

<?php
   require_once '/home/ubuntu/php-sdk/src/facebook.php';

  $facebook = new Facebook(array('appId' => 'XXX', 'secret' => 'XXX'));
  $req = $facebook->getSignedRequest();
  $page_id = $req['page']['id'];
  if($req['page']['admin']) {
    echo('<form action="upload.php" method="post" enctype="multipart/form-data">');
    echo('<input input type="hidden" name="id" value="' . $page_id . '" />');
    echo('<input input type="file" name="before" />');
    echo('<input input type="file" name="after" />');
    echo('<input type="submit" value="upload" />');
    echo('</form>');
  }
  else if($req['page']['liked']) {
    echo('<img src="/files/' . $page_id . '/after.jpg">');
    echo('<script>setTimeout(function() { top.location.href = "http://www.facebook.com/page/' . $page_id . '?sk=wall" }, 10000)</script>');
  }
  else {
    echo('<img src="/files/' . $page_id . '/before.jpg">');
  }
<?php
if (is_uploaded_file($_FILES["before"]["tmp_name"]) and is_uploaded_file($_FILES["after"]["tmp_name"]) and isset($_POST['id'])) {
  if(!is_dir("/home/ubuntu/simplefb/files/" . $_POST['id'])) {
    mkdir("/home/ubuntu/simplefb/files/" . $_POST['id']);
  }
  $before_file = "/home/ubuntu/simplefb/files/" . $_POST['id'] . '/before.jpg';
  $after_file = "/home/ubuntu/simplefb/files/" . $_POST['id'] . '/after.jpg';
  if (move_uploaded_file($_FILES["before"]["tmp_name"], $before_file) and
    move_uploaded_file($_FILES["after"]["tmp_name"], $after_file)) {
    chmod($before_file, 0644);
    chmod($after_file, 0644);
    echo"アップロードしました。";
  } else {
    echo "ファイルをアップロードできません。";
  }
} else {
    echo "ファイルが選択されていません。";
}
まあ、たまにはこんな開発もいいよね

(´∀`*)ウフフ

というわけで

今回リリースしたサービス、「ウェルカムページメーカー」。

ぜひ使ってみてください><

ではではーヽ(´ー`)ノ

2011-08-31

WebKit サーバーというものを作ってみた

みなさん

お久しぶりですヽ(´ー`)ノ夏休みの宿題終わりました?

毎日が夏休みの最終日みたいな生活してるあまちゃんです!

さてさて

今日は WebKit サーバーというものを作ってみたので、紹介してみます。

f:id:amachang:20110831092022p:image

WebKit って何?

WebKit っていうのは ChromeSafari の中に入ってるブラウザのエンジンのことです!

実はブラウザっていうのは、エンジン部分と見た目の部分(タブとかボタンとかね)に別れていて、意外と違うブラウザでもエンジン部分は同じものを使ってるってことも多いんですよ(*´ー`)

ブラウザサーバーってどういうこと?

要は、サーバーサイドでブラウザを起動して JavaScript を実行したり、 JavaScript が実行されないと読めないページから値を持ってくるのに使ったりしようという魂胆です。

今まではそういうのなかったの?

実は、今までは JavaScript を使わないと読めないようなページから値を持ってくるのに Phantom.js という便利なソフトウェアがあったんです。

no title

f:id:amachang:20110831094757j:image

でも、 Phantom.js にはちょっとした問題点があって、今仕事でやってることに Phantom.js が合わなくなってしまったのです><

Phantom.js の問題点
  • 他のプログラムと連携しようと思ったときに、プロセス間で通信する手段やライブラリとして呼び出す手段がない
  • 度々起動したり終了したりするには重すぎる
  • メモリを食う
  • Xvfb を入れないといけない(これもメモリ食う)
  • 重い JavaScript を実行すると WebKit割り込みが発生するが、それを何も通知してくれないので何が起こってるのか分からなくなる。(この状態になると、プロセスを殺すしかなくなる)
  • 実行をタイムアウトする手段がない
  • confirm や prompt で止まってしまう(この状態になると、プロセスを殺すしかなくなる)

というわけで

これらの問題点をぜーんぶ解決しちゃうぜ!っていうのが今回作ったサーバーです。

コード

とりあえず、以下のところに置いておきました

webkitd/webkitd.py at master ? amachang/webkitd ? GitHub

今回作った WebKit サーバーの特徴

起動のしかた

とりあえず、デフォルトの設定でインストールしたての Ubuntu 11.04 サーバーがあったとして解説しますね。

これを順にやっていけば、たぶん使えると思います。

1. 必要なものをインストールする

apt-get で必要なものをインストールします

$ sudo apt-get install git-core python-qt4 python-daemon xvfb daemon rlwrap
(略)
Do you want to continue [Y/n]? Y

Y と答えます。ちょっと時間がかかります><

2. コードを持ってくる

gitWebKit サーバーのコードを持ってきます

$ git clone git://github.com/amachang/webkitd.git
(略)
3. Xvfb を起動する
$ sudo daemon -X "/usr/bin/Xvfb :1 -screen 0 1024x768x24" --name Xvfb
$ export DISPLAY=:1.0
4. WebKit サーバーを起動する!
$ python webkitd/webkitd.py start

エラーになりませんね?おおおお!これで起動しましたね!

ちなみに、詳細なオプションは、以下のようにすると見ることが出来ます

$ python webkitd/webkitd.py -h

使ってみる!

では、さっそく使ってみましょう

本当は、ソケットを使ってプログラムを書かなければいけないのですが、 telnet というコマンドを使うとコマンドラインからソケット通信を試すことが出来るのでそれを使います

1. 接続する

以下のように打って接続します

$ rlwrap telnet 127.0.0.1 1982

以下のような状態になったら、接続できています!

Trying 127.0.0.1...
Connected to 127.0.0.1.
Escape character is '^]'.

2. Yahoo にアクセスしてみる

接続できたら。

以下のように一行で書いてみてください

{ "type": "load-url", "data": { "url": "http://www.yahoo.co.jp/", "timeout": 10 } }

これは、「http://www.yahoo.co.jp/ にアクセスして 10 秒以内に完了しなかったらタイムアウトしてくれ」という意味です

成功すると以下のような結果が返されます

{"data": {"status": 200, "ok": true, "title": "Yahoo! JAPAN", "url": "http://www.yahoo.co.jp/", "finalUrl": "http://www.yahoo.co.jp/", "timeouted": false}}

おおおお!アクセスできてる

3. ページから値を取得してみる

次に値を取得してみましょう。

以下のように一行で書いてみてください

{ "type": "get-element-value", "data": { "xpath": "/descendant::a[1]", "attr": "href", "timeout": 10 } }

これは、「最初に出現したリンクの href を持ってきて」という意味です

成功すると以下のような結果が返されます

{"data": {"count": 1.0, "propValue": "http://www.yahoo.co.jp/_ylh=X3oDMTB0NWxnaGxsBF9TAzIwNzcyOTYyNjUEdGlkAzEyBHRtcGwDZ2Ex/r/mphp", "hasProp": true, "attrValue": "r/mphp", "found": true, "error": false, "hasAttr": true, "timeouted": false}}

ちゃんと、リンクを持ってこれましたね!

4. クリックしてみる

以下のようにすると最初のリンクに対してクリックをしたことにできます。

{ "type": "click-element", "data": { "xpath": "/descendant::a[1]", "timeout": 10 } }
5. 現在の状態を確認してみる

以下のようにするとブラウザの状態を確認できます。

{ "type": "server", "data": { "command": "status" } }

ちゃんとページが遷移していますね。

{"data": {"objectCount": 17, "selectedText": "", "objectCountMap": {"QUndoStack": 1, "QWindowsStyle": 1, "QSessionManager": 1, "QNetworkAccessManager": 1, "QGuiEventDispatcherGlib": 1, "WebKitPage": 1, "QWebFrame": 1, "QNetworkCookieJar": 1, "QApplication": 1, "QNativeSocketEngine": 2, "WebKitWorker": 1, "WebKitServer": 1, "QSocketNotifier": 3, "QTcpSocket": 1}, "title": "Yahoo! JAPANトップページをホームページに設定しよう", "url": "http://www.yahoo.co.jp/promotion/startpage/", "totalBytes": 23748, "height": 2083, "width": 950, "requestedUrl": "http://www.yahoo.co.jp/_ylh=X3oDMTB0NWxnaGxsBF9TAzIwNzcyOTYyNjUEdGlkAzEyBHRtcGwDZ2Ex/r/mphp"}}
他にも

以下のようなことが出来ます

  • スクロールの操作
  • 要素が出現するまで待つ
  • 任意の JavaScript を実行
  • 値の入力

ライブラリとしても使えます

この webkitd.py を今回直接実行しましたが、外部の python スクリプトから import して使うことも出来ます。

独自のコマンドや、 Java を有効にしたり、 Plugin を有効にしたり、セキュリティの設定を変えたりといろいろ拡張しやすいように作ったつもりです。

だいたいこんな感じです!

まだまだ、未完成な WebKit サーバーですが仕事で使いつつ、コードやテストをアップデートしていこうと思っていますので、生ぬるくウォッチしていただけたらなーと思います。

ではではーヽ(´ー`)ノ

2011-02-04

明日は Kanazawa.JS です!

はじめに

f:id:amachang:20110204125555j:image

実家のある金沢で JavaScript のイベントが行われることになり。

明日がその当日です!

参加される方は、忘れないように参加してくださいね!

Cheat Meals To Enhance Your Dieting

僕はとういうと

今、絶賛準備中です!

こちらで準備の様子を書いてるので、アドバイスいただけたらと思います><

がんばるよ(`・ω・´)!

2011-01-08

はてなダイアリーにいいねボタンを置く方法

たっち!

f:id:amachang:20110109030350j:image

みなさん、こんにちは

お元気ですか、僕はアイスのあとラーメンを食べて気持ち悪い状態ですが元気です。

さてさて

最近は、フェイスブックやミクシィやツイッターなどの SNS で面白いと思ったモノを紹介し合う文化が定着してきているような気がします。

そんな中で、ウェブページを紹介するために使われるためにウェブページに置かれるものが「いいね!」ボタンだったり、「ツイート」ボタンだったりするわけですね。

というわけで、はてなダイアリーにそういったボタンを配置する方法を紹介したいと思います。

ここで紹介する方法は、ちゃんと理解して置きたい人向け、 XML や HTML を分かっている人向けとなります。

はてなダイアリーには自由な HTML を貼り付けられない

まあ、普通に自由に HTML を貼り付けられる環境であれば、ただ単に提供されるボタン用の HTML を張り付けるだけなので簡単です。

でも、はてなダイアリーの場合は自由な HTML を貼り付けることが出来ません。*1

と言うわけで、はてなの許可された形の HTML 内で貼り付ける必要があるわけですね

グーグルガジェットの作り方

グーグルガジェットとは、様々なページに貼り付けやすいように設計されたブログパーツみたいなもんです。

はてなダイアリーにはグーグルガジェット用の HTML を張り付けることが出来るので、グーグルガジェットとして様々なボタンを貼り付けようということですね。

まず、簡単な XML を書く

グーグルガジェットは、以下のような XML ファイルをどこか URL を持つ場所に公開すれば良いです。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

ここにボタンの HTML を貼り付ける

]]></Content>
</Module>
XML からグーグルガジェット用の HTML を取得する

たとえば、上の XML を http://callee.jp/socialbuttons/sample/000.xml に置いてみました。

これから HTML を作るには http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/000.xml にアクセスして、「Get the Code」を押します。そうすると HTML が表示されると思います。

具体的には以下のようなものです。

<script src="http://www.gmodules.com/ig/ifr?url=http://callee.jp/socialbuttons/sample/000.xml&amp;synd=open&amp;w=720&amp;h=150&amp;title=%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AA%E3%83%BC%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%9C%E3%82%BF%E3%83%B3&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

これをはてなダイアリーの日記に貼り付ければ良いのです。

これで

グーグルガジェットは作れるようになりましたね。

次は、具体的に様々なボタンをこのグーグルガジェットを書いてみましょう。

グーグルガジェットにツイッターのボタンを貼り付ける

ツイッター用のツイートボタンは、以下のページから作ることが出来ます。

Twitter / ?

今回は以下のように作りました

f:id:amachang:20110109025002j:image

水平方向にカウントを表示

f:id:amachang:20110109025003j:image

とりあえずツイートテキストは適当に入れておきます(グーグルガジェットの場合、タイトルの自動取得はうまくいきません。)

f:id:amachang:20110109025004j:image

とりあえず URL も適当に入れておきます(グーグルガジェット内の場合、 URL の自動取得はうまくいきません。)

f:id:amachang:20110109025005j:image

言語は日本語で

f:id:amachang:20110109025006j:image

一緒にツイッターユーザー名もツイートさせることもできますが、これは使いません(とくに理由はありません)

f:id:amachang:20110109025007j:image

そうすると、 HTML が出来ますね。

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

]]></Content>
</Module>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/001.xml

次に、フェイスブックのボタンを貼り付ける

フェイスブックのいいね!ボタンは以下のページで作ることができます。

いいね!ボタン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

以下のように作ります

f:id:amachang:20110109025010j:image

なるべく、シンプルなボタンになるようにしてみました。

f:id:amachang:20110109025011j:image

「Get Code」ボタンを押して、上のほうの iframe って書いてあるテキストボックスから HTML をコピーします。

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

]]></Content>
</Module>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/002.xml

次に、はてなブックマークのボタンを貼る

はてなブックマークのボタンは以下のページで作ることができます。

はてなブックマークボタンの作成・設置について - はてなブックマーク

以下のように作ってみました

f:id:amachang:20110109025012j:image

適当に URL とタイトルを入れて、アイコンのタイプを選びます。

右側の HTML をグーグルガジェットの XML に貼り付けます。

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<a href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/amachang/" class="hatena-bookmark-button" data-hatena-bookmark-title="IT戦記" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

]]></Content>
</Module>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/003.xml

最後にミクシィイイネ!ボタンを貼り付ける

ミクシィのチェックボタンを作るのは結構めんどくさいです。

まず、 mixi Plugin の登録をする

以下のページに行きます

ソーシャル・ネットワーキング サービス [mixi(ミクシィ)]

f:id:amachang:20110109025013j:image

新規サービスの追加を押します。

f:id:amachang:20110109025014j:image

このように必要事項を埋めて、同意→作成と進みます

HTML を取得する

このページの一覧から、以下のようなページに進むことが出来ます

f:id:amachang:20110109025015j:image

上記のように設定してタグを取得してみます

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<a href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/amachang/" class="hatena-bookmark-button" data-hatena-bookmark-title="IT戦記" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe>

]]></Content>
</Module>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/004.xml

対象 URL、タイトルをカスタマイズ可能にする

とりあえずだいぶ出来てきましたが、この手順を毎回ブログを書くたびに行うのは面倒です。なので、 URL やタイトルなどはカスタマイズ可能にしておきましょう。

UserPref という仕組みを使う

さっきまでの URL に以下のように UserPref というタグを追加します。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" />
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" />
<Content type="html"><![CDATA[
...省略
]]></Content>
</Module>
UserPref の値を HTML の中で使う

_IG_Prefs というオブジェクトHTML の中の JavaScript から使うことが出来ます。

最終的には、以下のような感じになります。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" />
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" />
<Content type="html"><![CDATA[

<iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a id="twitter-share-for-article" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a>

<a id="hatena-bookmark-for-article" href="" class="hatena-bookmark-button" data-hatena-bookmark-title="" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>

<iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe>

<script type="text/javascript">
/* Get UserPrefs Values */
var prefs = new _IG_Prefs();
var articleUrl = prefs.getString('articleUrl');
var articleTitle = prefs.getString('articleTitle');

/* Facebook Like for Article */
var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article');
facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21';

/* Twitter Share for Article */
var twitterShareForArticleEl = document.getElementById('twitter-share-for-article');
twitterShareForArticleEl.setAttribute('data-url',  articleUrl);
twitterShareForArticleEl.setAttribute('data-text', articleTitle);

/* Hatena Bookmark for Article */
var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article');
hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl;
hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle);

/* Mixi Check for Article */
var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article');
mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140'

</script>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
]]></Content>
</Module>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/005.xml

グーグルガジェット内のデザインを調整

次に、グーグルガジェット内のデザインを調整

以下のように構造化して、適当に CSS を書きます
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="500" height="21" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" default-value="http://d.hatena.ne.jp/"/>
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" default-value="title" />
<UserPref name="backgroundColor" datatype="string" display_name="背景色" required="true" default-value="#FFFFFF" />
<Content type="html"><![CDATA[
<style>
body, html {
    overflow: hidden;
    margin: 0;
}

body {
    font-size: 14px;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    list-style: none;
}

#mixi-check-for-article {
    margin: 0 0 0 5px;
}
</style>

<ul>

    <li><iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe></li>

    <li><a id="twitter-share-for-article" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a></li>

    <li><a id="hatena-bookmark-for-article" href="" class="hatena-bookmark-button" data-hatena-bookmark-title="" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>

    <li><iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe></li>

</ul>

<script type="text/javascript">
var prefs = new _IG_Prefs();
var articleUrl = prefs.getString('articleUrl');
var articleTitle = prefs.getString('articleTitle');

document.body.style.background = prefs.getString('backgroundColor');

/* Facebook Like for Article */
var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article');
facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21';

/* Twitter Share for Article */
var twitterShareForArticleEl = document.getElementById('twitter-share-for-article');
twitterShareForArticleEl.setAttribute('data-url',  articleUrl);
twitterShareForArticleEl.setAttribute('data-text', articleTitle);

/* Hatena Bookmark for Article */
var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article');
hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl;
hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle);

/* Mixi Check for Article */
var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article');
mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140'

</script>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
]]></Content>
</Module>

続けるにはENTERを押すかコマンドを入力してください
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="500" height="21" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" default-value="http://d.hatena.ne.jp/"/>
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" default-value="title" />
<UserPref name="backgroundColor" datatype="string" display_name="背景色" required="true" default-value="#F9F9F9" />
<Content type="html"><![CDATA[
<style>
body, html {
    overflow: hidden;
    margin: 0;
}

body {
    font-size: 14px;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    list-style: none;
}

#mixi-check-for-article {
    margin: 0 0 0 5px;
}
</style>

<ul>

    <li><iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe></li>

    <li><a id="twitter-share-for-article" target="_top" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a></li>

    <li><a id="hatena-bookmark-for-article" target="_top" href="" class="hatena-bookmark-button" data-hatena-bookmark-title="" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>

    <li><iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe></li>

</ul>

<script type="text/javascript">
var prefs = new _IG_Prefs();
var articleUrl = prefs.getString('articleUrl');
var articleTitle = prefs.getString('articleTitle');

document.body.style.background = prefs.getString('backgroundColor');

/* Facebook Like for Article */
var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article');
facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21';

/* Twitter Share for Article */
var twitterShareForArticleEl = document.getElementById('twitter-share-for-article');
twitterShareForArticleEl.setAttribute('data-url',  articleUrl);
twitterShareForArticleEl.setAttribute('data-text', articleTitle);

/* Hatena Bookmark for Article */
var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article');
hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl;
hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle);

/* Mixi Check for Article */
var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article');
mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140'

</script>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
]]></Content>
</Module>

背景の色は、 IT 戦記の背景色に合わせてみました。

この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/006.xml

実際に貼り付ける

次は実際に貼り付けてみましょう。ぺた

以下のように微妙な感じになります

f:id:amachang:20110109025016j:image

び、微妙ですね。

不要な部分を CSS で隠します

貼り付けられたグーグルガジェットは、以下のような HTML の構造をしています。

  • table.gadget
    • tbody
      • tr
        • td
          • span.title
            • a
      • tr
        • td
      • tr
        • td
          • div
            • iframe (これ以外は不要!!!)
      • tr
        • td
          • a
            • img
        • td
          • span.powered
            • a
            • #text

貼り付ける HTML のそばに以下のような CSS を一緒に貼り付けます。

<style>
/* IE 以外用 */
/* IE では、 nth-child が使えない */
table.gadget tr:nth-child(1), table.gadget tr:nth-child(2), table.gadget tr:nth-child(4) {
    display: none !important;
}

/* IE 用 */
/*  IE ではテーブルはコンテンツがあればつぶれないので、不要なものを消して td の高さを 0px にし iframe だけ残す */
table.gadget td {
    height: 0px !important;
    padding: 0px !important;
}

table.gadget img, table.gadget span, table.gadget a, table.gadget a:hover {
    display: none;
    height: 0px !important;
    font-size: 0px !important;
}

/* 共通 */
table.gadget td, table.gadget tr, table.gadget iframe, table.gadget div ,table.gadget {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
</style>

この CSS は大変便利なのではてなダイアリーの詳細デザイン設定で、ブログ全体の CSS として設定しておくのもいいかもしれません。

というわけで

ついに完成!!!お疲れ様でした!

f:id:amachang:20110109025017j:image

こんなめんどくさいことできない><!!!

そういう人のために、汎用化したものも作っておきました。

Error 404 (Not Found)!!1

ここで生成された HTML を、前述した以下の CSS と一緒に貼り付けてくださいね。

<style>
/* IE 以外用 */
/* IE では、 nth-child が使えない */
table.gadget tr:nth-child(1), table.gadget tr:nth-child(2), table.gadget tr:nth-child(4) {
    display: none !important;
}

/* IE 用 */
/*  IE ではテーブルはコンテンツがあればつぶれないので、不要なものを消して td の高さを 0px にし iframe だけ残す */
table.gadget td {
    height: 0px !important;
    padding: 0px !important;
}

table.gadget img, table.gadget span, table.gadget a, table.gadget a:hover {
    display: none;
    height: 0px !important;
    font-size: 0px !important;
}

/* 共通 */
table.gadget td, table.gadget tr, table.gadget iframe, table.gadget div ,table.gadget {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
</style>
ちなみに僕のブログでは以下のようなの使ってます!

Error 404 (Not Found)!!1

というわけで

みなさんも、はてなダイアリーにいいねボタン貼り付けてみませんか?

ではではーヽ(´ー`)ノ

*1:管理ページが記事ページとが同じオリジン(Same origin)であるため

2010-09-19

ツイッターのふぁぼられ時間表に色を付けてみた

はじめに

何曜日の何時ごろにどれだけふぁぼられているかも表にしてみました。

Twitterで最もふぁぼられる時間帯は? - さまざまなめりっと

おおおお。おもしろーい。

と、言うわけで

じゃーん、色付けしてみた。

10 fav 以上

f:id:amachang:20100919083852p:image

50 fav 以上

f:id:amachang:20100919083853p:image

おおお

色を付けると見やすいですね。

昼ごはんの帯と、うっすらと起床時間の帯が見えてますね。

やっぱり、金曜日だけピーク時間がちょっと早いんですねえ。すごく意外な感じがします。

みんな、金曜は楽しい気持ちで早くねちゃうのかなあ。

色付け用ブックマークレットはこちら

javascript:(function(s){ s.src = 'http://amachang.sakura.ne.jp/misc/maname_table_color/maname_table_color.js'; document.body.appendChild(s); })(document.createElement('script'))

元のページに行って、ロケーションバー(URL が書いてあるところ)に貼り付けてエンターキーを叩くと色付けされます!

でも、 IE では動きません><ごめんなさい><