うかうか暇つぶし > Web小ネタ
今回Seesaaにブログを引っ越しましたのでこちらでもAutoPagerizeに対応させてみました。

AutoPagerize自体の導入方法はAutoPagerizeは便利だ。という記事で書いてますので参考にしてください。

Fc2でのやり方はその記事に書いてあるのですが、Seesaaで問題になるのはhead内の<link rel="next">の部分です。ここに次ページのURLを書けばいいんですが、Seesaaだと次ページURLをheadで取得出来ませんでした。(何かやり方あるのかも知れませんが……)

ですが、別にlinkにこだわらなくても大丈夫です。普通のaタグのリンクにrelを指定するだけでもいけます。
まとめると以下のようになります。

ブログの設定ページでデザイン→HTMLを選択します。
すでにHTMLをカスタマイズしているならそれを、初めてなら「HTMLの追加」をクリックします。
HTMLが出てきますので、初めての方はHTML名に適当な名前(カスタムHTMLとか)を付けましょう。
その下のHTML内の

<% content_main %>


このようにdivタグで囲みましょう。これで自動表示する部分が設定出来ます。
<div class="autopagerize_page_element">
<% content_main %>
</div>

次に
ブログのデザイン設定ページでデザイン→コンテンツを選択します。
編集モードノーマルで、レイアウトが表示されていますが、「記事」をクリックし、「コンテンツHTML編集」をクリックします。

<a href="<% blog.page_url(pager.next_page) %>">
という行がありますのでこのaタグにrel="next"を付け加えてください。


<a rel="next" href="<% blog.page_url(pager.next_page) %>">

これでAutoPagerizeが動作するようになります。
posted by ふっち at 10:31 | Comment(0) | TrackBack(0)
OpenIDを一つ覚えておけば統一的にログイン出来るとは言っても、長いと覚えるのは面倒です。独自ドメインを持っていれば、それに置きかえることも出来ますがそれも一般的な方法とはいえません。
そこでリンクを押すだけでログイン処理を行えれば便利ではないでしょうか?

OpenID2.0からはそれが簡単に出来るようになっています。
以下のようなリンクを作ればいいんです。

<a href="auth?identifier=http://www.yahoo.co.jp/">Yahoo Japan! IDでログイン

これはformからpostしている内容をリンクに置き換えただけです。identifier(ユーザーが入力するID)としてhttp://www.yahoo.co.jp/のURLを指定しています。

上記のリンクをhttp://test.ukauka.net/testapp/login/
に付けてみました。
posted by ふっち at 01:42 | Comment(0) | TrackBack(0)
OpenIDで認証処理を試してみました。
と、いっても
http://code.google.com/p/openid4java/wiki/SampleConsumer
にサンプルがありますのでこれをそっくり真似ただけです。

http://test.ukauka.net/testapp/login/に今回作ってみたものを置いてみました。

サンプルはcobbyというフレームワークで作っています。

openid4javaのインストールですが、maven2を使うと楽です。
作成したcobbyプロジェクトのpom.xmlに
リポジトリを追加し
<repository>
<id>alchim.snapshots</id>
<name>Achim Repository Snapshots</name>
<url>http://alchim.sf.net/download/snapshots</url>
<snapshots />
</repository>

<dependencies>
</dependencies>
内に下記を追加します。

<dependency>
<groupId>org.openid4java</groupId>
<artifactId>openid4java-consumer</artifactId>
<version>0.9.5-SNAPSHOT</version>
</dependency>

これで0.9.5がインストールされます。

あ、説明忘れてましたが、環境はEclipse3.4m6にm2eclipseプラグインとか入れてます。
こちらのサイトの記事にある環境を導入しました。
Eclipse + Maven2 + Tomcat + Seasar2 の開発環境ベスト!?プラクティス
この環境作っとくと、ライブラリをどっかから探してくる手間が大分省けます。プロジェクトを右クリックしてmaven、依存関係の追加で、パッケージ名入れると外部のリポジトリから必要なjar探してきてどんどんダウンロードしてくれます。らくちんです。(ただ、慣れるとリポジトリにないライブラリを手動でインストールするのが面倒になってきます)

maven2とかeclipseを使わない場合でしたら、
http://openid4java.googlecode.com/files/openid4java-0.9.3-bundle.jarをダウンロードして解凍してください。
拡張子はjarですが中にさらにopenid4java-0.9.3.jarとopenid4java-0.9.3-sources.jarが入ってますので取り出してlibに配置しましょう。
0.9.4はうまくいかない? という記事を見かけたことがあるので0.9.3が無難だと思います。0.9.3は私も試してみて問題ありませんでした。0.9.4は試していません。

以下アクション部分のコードです。例外処理は適当です。

LoginAction.java

package net.ukauka.test.app.action;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.openid4java.consumer.ConsumerManager;
import org.openid4java.consumer.VerificationResult;
import org.openid4java.discovery.DiscoveryInformation;
import org.openid4java.discovery.Identifier;
import org.openid4java.message.AuthRequest;
import org.openid4java.message.ParameterList;
import org.seasar.cubby.action.Action;
import org.seasar.cubby.action.ActionResult;
import org.seasar.cubby.action.Direct;
import org.seasar.cubby.action.Forward;

/**
* ログインアクション
* @author futti
*/
public class LoginAction extends Action {

public HttpServletResponse response;

public HttpServletRequest request;

public ConsumerManager consumerManager;

public String message; //結果画面に出すメッセージ

public String identifier; //formから入力するopenid

private static String targetURL = "http://test.ukauka.net/testapp/login/verify"; //openidプロパイダの処理後に表示するurl

/**
* 初期表示画面
* @return Forward
*/
public ActionResult index() {
return new Forward("index.jsp");
}

/**
* 認証処理
* @return Forward
*/
public ActionResult auth() {

try {

List discoveries = consumerManager.discover(identifier); // ユーザーから入力のあったopenidプロパイダを探しに行って、プロパイダの情報を取得してきます。
DiscoveryInformation discovered = consumerManager.associate(discoveries); //アソシエーション確立を行います。アソシエーションの応答情報が取得できます。

HttpSession session = request.getSession(true);

session.setAttribute("discovered", discovered); //ベリファイでもアソシエーションの応答情報を使うのでセッションに保持します。

String returnURL = targetURL;

AuthRequest authReq = consumerManager.authenticate(discovered, returnURL); //認証を行います。

String url = authReq.getDestinationUrl(true); //遷移先のURLを取得します。

response.sendRedirect(url); //プロパイダのログイン画面へ遷移します。
} catch (Exception e) {
e.printStackTrace();
}

return new Direct();
}

/**
* 検証処理
* @return Forward
*/
public ActionResult verify() {

ParameterList openidResp = new ParameterList(request.getParameterMap()); //プロパイダから遷移してきた際にURLに付加されているパラメータを取得します。

HttpSession session = request.getSession(true);
DiscoveryInformation discovered = (DiscoveryInformation) session.getAttribute("discovered"); //セッションからアソシエーション情報を取得します。

StringBuffer receivingURL = new StringBuffer();
receivingURL.append(targetURL);
String queryString = request.getQueryString();

if (queryString != null && queryString.length() > 0) {
receivingURL.append("?").append(queryString);
}

VerificationResult verification = null;

String url = receivingURL.toString();
try {
verification = consumerManager.verify(url, openidResp, discovered); //ベリファイを行います。
} catch (Exception e) {

}

Identifier verified = null;
if (verification != null) {
verified = verification.getVerifiedId(); //ユーザーIDを取得します。ユーザーIDが取得できない場合は失敗です。
}

if (verified != null) {
message = "成功:id=" + verified.getIdentifier();
} else {
message = "失敗:" + verification.getStatusMsg();
}

return new Forward("result_s.jsp");
}
}

verification = consumerManager.verify(url, openidResp, discovered);
で使用するURLなんですが、サンプルではrequest.getRequestURLから取得しているんですが、cubbyだと返ってくる値が実際のパスとは違っていてエラーになりました。仕方ないんで固定値を設定しています。

これで動作させると、openID入力して送信→openIDプロパイダの画面で認証処理→結果を受け取るという一連の流れが確認できます。認証が成功するとIDが取得できるのでそれを自分のサイトでユーザーと紐付けるようにすればいいと思います。

これで動作することは確認できたんですが、Yahoo Japan!のopenIDはローカル環境(http://localhost:8080/)からだとエラーになりました。サーバーにアップしてそこからやると問題なかったのですが。
はてなのopenIDだとローカルでも問題なかったので、ちょっと試してみたいとかいう場合ははてなでやると楽かもしれません。

<pre>でコードを囲むとはみ出しますね……。
posted by ふっち at 00:09 | Comment(2) | TrackBack(1)

OpenID試してみた。

[2008年04月29日 22時13分] | Web小ネタ
Yahoo!がOpenIDのプロパイダになってますので試してみました。
OpenIDは一つのIDで複数の対応サイトへのログインを行える仕組みです。

Yahoo!にログインして、登録情報のページを見ますと、OpenIDの発行/確認というメニューがありますのでクリックしますとOpenIDが発行されます。

https://me.yahoo.co.jp/a/6FJWN7Z5bphq23rYRnEK29470g--

という形式です。

これをOpenID対応サイトで入力すればいいわけです。

ということで対応サイトで試してみました。
http://twitwi.tw/

このサイトで発行してもらったOpenIDを入力して、「ログインする」ボタンを押します。
するとYahoo! Japanの確認画面になります。(Yahoo! JAPANにログイン中の場合)

あなたは、次のサイトにログインしようとしています。
twitwi.tw
このサイトへログインする場合は、「続ける」ボタンを押してください。

続けるを押すと認証完了です。

Yahoo! JAPANにログインしていない場合に上記動作を行うとYahoo! JAPANへのログイン画面が表示されログインすることで確認画面が表示されます。

で、OpenID一つで対応サイトにログイン出切ると言われても、Yahoo! JAPANのこのIDの長さは一体なんなんでしょう? とてもじゃないですがこれを覚えておけとか言われても無理です。

そんな人の為に自分の持っているドメインをOpenIDとして使う仕組みがあります。

<link rel="openid2.provider" href="https://open.login.yahooapis.jp/openid/op/auth"/>
<link rel="openid2.local_id" href="https://me.yahoo.co.jp/a/6FJWN7Z5bphq23rYRnEK29470g--"/>

これを自分の管理してるサイトのhead部分に入れます。
今回http://ukauka.net/というサイトのhtmlにこれを入れてみました。

これでOpenID対応サイトでhttp://ukauka.net/と入力すればログイン出切るようになりました。

ただ今回いろいろOpenID対応サイトで試してみたんですがYahoo! JAPANが使用しているOpenIDのバージョンが2.0ですので対応してないサイトも多いんですね。

ですので、いずれは使えるようになるのかもしれませんが、OpenIDをどれか一つ使用するならhttp://www.openid.ne.jp/
で発行してもらうのがいいかもしれません。(さすがに公式サイトのOpenIDが使用できないなんてことはないでしょうし)

でもwww.openid.ne.jpでOpenIDを発行してもらってもこのIDでYahoo! JAPANにログイン出来るわけじゃないんですよね。結局一つのIDで済ませるにはまだ時間がかかりそうです。
posted by ふっち at 22:13 | Comment(0) | TrackBack(0)

AutoPagerizeは便利だ。

[2008年04月29日 10時06分] | Web小ネタ
FirefoxのGreasemonkey用のスクリプトでAutoPagerizeというんですが、今日知りました。便利です。
複数のページに分かれているサイトをくっつけて表示してくれます。
たとえばgoogleの検索結果はデフォルトだと50件ごとに表示され、次の50件を見るには「次へ」のリンクを押さなくてはいけないんですが、このスクリプトを導入していると、次の50件が下にくっついて表示されます。延々スクロールしていけば次々に読んでいくことが出来ます。ちょっとした違いかもしれませんが、頻繁に見るサイトが対応していると結構便利です。

私の確認できる環境だとFirefox用とSleipnir用があったのでその導入方法と、自分のサイトを対応させる方法を紹介しておきます。

・Firefoxの場合
1 Greasemonkeyをインストールする。(インストール済みの場合は次へ)
https://addons.mozilla.org/ja/firefox/addon/748
このページの「FireFoxへインストール」をクリックするとインストールされます。

2 AutoPagerizeをインストールする。
http://userscripts.org/scripts/show/8551
このページの右上あたりにある「Install this script」をクリックするとインストールされます。

・Sleipnirの場合
1 SeaHorseをインストールする。(インストール済みの場合は次へ)
http://www.fenrir.co.jp/sleipnir/plugins/seahorse.html
このページの「ダウンロード」をクリックするとインストールされます。

2 AutoPagerize for SeaHorseををダウンロードする。
http://w5.abcoroti.com/~suec/script/?mode=tag&tag=AutoPagerize
このページでAutoPagerize for SeaHorseの をクリックしスクリプトファイルをダウンロードします。

3 AutoPagerize.zipを解凍します。
適当なソフトで解凍してください。AutoPagerizeというフォルダが作られその中にpluginsフォルダが作られます。

4 pluginsフォルダをSleipnirのフォルダにコピーする。
Sliepnirをインストールしてあるフォルダにpluginsフォルダをコピーします。

5 Sleipnirを再起動します。

インストールが完了したらgoogleで適当な単語で検索して試してみましょう。

・サイトを対応させる方法。

firefoxの場合
http://wedata.net/databases/AutoPagerize/items
このページのデータベースにサイトの次ページリンクや本文部分をXPathで登録する必要があるようです。
こちらのページに記述方法が載っていましたので参考にしてください。http://autopagerize.jottit.com/

Sleipnirの場合も
http://wikiwiki.jp/958/?AutoPagerize#w49da375
こちらを参照してください。

と、このように自分のサイトをFirefoxとSleipnir両方で自動ページングに対応させようとすると別々にデータベースに登録しないと行けないようです。
これでは面倒なので両方に対応出きる様にしてみました。

・autopagerizeに自分のサイトを対応させる方法(FC2ブログの場合)

ブログの管理ページのテンプレートの設定でHTMLを編集
<head>タグ内に以下を追加します。

<!--nextpage-->
<link rel="next" href="<%nextpage_url>">
<!--/nextpage-->

これで次のページのURLを認識してくれます。
本文部分のタグのclassにautopagerize_page_elementを指定します。
今使ってるテンプレートでは
<div class="body">
とあった部分を
<div class="autopagerize_page_element">
に変更しました。

それにあわせてスタイルシートも変更します。
.bodyを.autopagerize_page_elementにしました。

これはautopagerizeのデフォルトの設定にこちらが合わせるという方法です。
これでSleipnirとFirefoxの両方で自動ページングが動作することは確認できました。

他のブラウザにもautopagerizeが移植された場合デフォルトの設定が同じならこのまま使えるかも知れません。
posted by ふっち at 10:06 | Comment(0) | TrackBack(0)

IE6でposition:fixed;の代替手段

[2008年04月21日 22時20分] | Web小ネタ
IE6でposition:fixedで固定位置にオブジェクトを表示し続けることが出来ないのでその対策です。

以下のような感じのコードになります。
<!--[if lt IE 7]>
<style type="text/css">

div#header{
position: absolute;
top: expression(eval(document.documentElement.scrollTop+0));
left:0px; width:40px;text-align:center;
}
</style>
<![endif]-->

<div id="header">
</div>
の部分をスクロールしても常に同じ位置に表示されるようにします。フレームの代わりに使用したりします。

まずIE6以前の場合にのみ適用されるように以下を記述します。
<!--[if lt IE 7]>
<![endif]-->

そしてposition:fixed;の代わりに

position: absolute;
top: expression(eval(document.documentElement.scrollTop+0));

を使用します。
これの肝はIE独自拡張のexpressionです。これは動的にCSSをJavaScriptで設定するものです。私は普段使うことはないのですがIE6でだけ駄目ということであればこの方法が手っ取り早いのでこの方法
position:absolute;で絶対位置表示を指定し、top:に動的に座標を指定します。この場合scrollTopがスクロール量を表しています。

これだけですと、スクロール時に固定している部分がちょっと動いては一番上に戻るのでロゴ部分がカクカクと動いてしまいます。
これはbodyのスタイルにbackground: url(null) fixed #ffffff;を指定することで回避できました。なぜこうすると回避できるのかはいまいちわかりません。

そういえばフレームは結局どうなってしまったんでしょうか? 結構な嫌われものになってしまったようで最近では見かけることはありませんが、同じメニューをページを移動するたびに表示するのは無駄なのでトラフィックの節約になるのでデメリットばかりでもない気がするんですけどね。
posted by ふっち at 22:20 | Comment(0) | TrackBack(0)