2012年5月18日金曜日

YUI Library(CSS)を使ってみる(gridが便利)

CSSリセットというものを改めて勉強してみていろいろ比較した結果、YUI Libraryを使うことに
しました。Yahoo製で、実際にYahooで使われているようです。
また、一般サイトでも採用しているサイトが多く有るようです。

http://yuilibrary.com/

YUI Libraryはリセットはもちろん、fontなどある程度の基本設定をしてくれたり、divでの
レイアウトを簡単にできたりするオプションがあり、なかなかイージーそうです。
他にもjavascriptやajaxなどのライブラリもあるようですが、jqueryが慣れているので
今回はCSSのみを使用しました。

YUI Libraryを使用するには先ず以下のCSSを指定します。


<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css" />
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.5.1/build/cssfonts/cssfonts-min.css" />
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.5.1/build/cssbase/cssbase-min.css" />
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.5.1/build/cssgrids/grids-min.css" />


ダウンロードも出来ますが、改変などはしないのでURLをそのまま指定しました。
cssgrids以外でブラウザ間の違いをかなり吸収し、すぐに使える状態になっています。

グリッドでは、divを左右に並べるレイアウトを簡単に実装できます。
例えば次のようにすると、左がメニュー、右がメインというようなレイアウトが
簡単に配置できます。


<div class="yui3-g">
<div class="yui3-u-1-4" id="nav">メニューとか</div>
<div class="yui3-u-1-5" id="main">メイン画面</div>
</div>


yui3-gでグリッド全体、その子としてyui3-uから始まるクラスを指定します。
単にyui3-uだと幅は決まっていません。自分で幅をpx指定などします。
例のようにyui3-u-1-4だと全体の幅の1/4の幅となります。
yui3-u-3-4だと3/4です。
他には以下のページに書かれています。
CSS Grids http://yuilibrary.com/yui/docs/cssgrids/

簡単にdivを横並びにできるので、かなり楽です。
特に僕は最近HTMLをがっつりやり始めたのでとても助かります。
floatとか、、、CSS初心者は結構悩むんですよね。


すでに作ったサイトに適用するとなるとさすがに面倒ですが、新規にサイトを
作る場合は利用すると楽だと思います。
よろしければ、どうぞ。

2012年5月9日水曜日

USB-RGB3/D その後。 #fb

USBグラフィックアダプターUSB-RGB3/Dを購入し一月半ほど経ったのですが、
僕の使用状況では具合が悪く、元に戻してしましました。

以前の記事>USB-RGB3/D購入 http://akin.sblo.jp/article/54572924.html

USB-RGB3/D側のディスプレイにFXのチャート画面(ブラウザ)を表示していると
どうもPCに負荷がかかっていって、数時間するとブラウザの動きが悪くなります。
ブラウザはChromeを使っているのですが、ディスプレイアダプターとChromeの
相性的な問題もあるのかも。
とにかくChromeがCPUをだんだん占有するようになってきて全体的なパフォー
マンスが落ち、さらに今日は気温が高かったこともあってCPUあたりが高温に
なって、それもPCを不安定にさせていたようです。

詳しい技術的なことはわからなかったりしますが、以前使っていたUltraVideo
では起こらなかったことですので、僕の環境においてはUSB-RGB3/Dに原因がある
ことは確かだと思います。

USB3.0で、他の環境ならもしかしたら大丈夫なのかもしれません。
せっかく買ったのに残念ですが、お蔵入りですね。。
というか、オークションとかアマゾンで売ってしまったほうがいいかも。

あとこれ以外に、USB-RGB3/Dで不満だった点もあります。
お昼とかに仕事を中断するときスリープしておくのですが、復帰した場合に
ウィンドウが左右で入れ替わってしまいます。
構成は3つのディスプレイで、左から、DVI,DVI,USB-RGB3/Dという構成ですが、
スリープして復帰するたびに、一番左と一番右においていたウィンドウが
入れ替わります。
ドライバとか環境によってならないことがあるかもしれませんが、僕の環境
ではそのようになりました。(ThinkPad T410s)

他に、電源を切って再度立ち上げた時に認識しないことが9割ぐらいの確率で
あります。一度USBを抜いて再度接続すると認識しますが、ちょっと面倒でした。
これもPC環境によるのかも。

ご参考になれば幸いです。





2012年5月8日火曜日

ASP.NETでPayPalのエクスプレスチェックアウトAPI実装

ASP.NET(VB)でPayPalのエクスプレスチェックアウトをAPIを使って実装することに
なりました。
PayPalのサイトを調べたのですが、とにかく資料があちこちに散らばってわかりにくい。
ASP.NET用SDKもあるのですが、.net framework1.1用とか。。
SDKじゃなくてもいけそうなので自分で作成してみました。

エクスプレスチェックアウトは以下のフローになります。
ざっくりとですが、、

��.商品とかの購入画面(用途によります)のPayPal支払いボタンクリック
��.tokenを取得して、PayPalサイトへリダイレクト
��.PayPalサイトで購入情報を確認して、購入ボタンクリック
��.自サイトに戻り、商品金額などの確認画面、支払いボタンクリック
  (このとき、PayPalからAPIで商品情報を取得して表示)
��.支払確定のAPIを呼んでトランザクション終了

��でポップアップして表示するやり方があるみたいなのですが、どうもうまくいかず。。
特にこだわらないので一旦PayPalサイトへ移動する方法です。

まずは1,2のtokenを取得する、SetExpressCheckout APIのところ。
そうそう、PayPalはsandboxというテスト環境を提供しています。
予めsandboxアカウントを作成しておきます。
APIのURLもsandbox環境のものです。


Dim wReq As HttpWebRequest = CType(WebRequest.Create("https://api-3t.sandbox.paypal.com/nvp"),
HttpWebRequest)
Dim wDataStr As String
Dim wData As Byte()
Dim wReqStream As Stream

Dim wRes As WebResponse
Dim wResStream As Stream
Dim wSr As StreamReader
Dim wResData As String
Dim wResArrData As String()
Dim wResHt As Hashtable

Dim wCt As Integer

wDataStr = "&METHOD=SetExpressCheckout" _
& "&USER=userid" _
& "&PWD=password" _
& "&SIGNATURE=signature" _
& "&VERSION=64" _
& "&PAYMENTACTION=Sale" _
& "&RETURNURL=http://localhost:58119/TestPaypal/return.aspx" _
& "&CANCELURL=" & HttpUtility.UrlEncode("http://localhost:58119/TestPaypal/kakunin.aspx
?amt=" & Request.QueryString("amt") & "&desc=" & Request.QueryString("desc")) _
& "&PAYMENTREQUEST_0_CURRENCYCODE=JPY" _
& "&PAYMENTREQUEST_0_AMT=" & Request.QueryString("amt") _
& "&PAYMENTREQUEST_0_DESC=" & HttpUtility.UrlEncode(Request.QueryString("desc"))
wData = Encoding.ASCII.GetBytes(wDataStr)

With wReq
.Method = "POST"
.ContentType = "application/x-www-form-urlencoded"
.ContentLength = wData.Length
End With
wReqStream = wReq.GetRequestStream()
wReqStream.Write(wData, 0, wData.Length)
wReqStream.Close()

wRes = wReq.GetResponse()
wResStream = wRes.GetResponseStream()
wSr = New StreamReader(wResStream)
wResData = wSr.ReadToEnd()
wSr.Close()
wResStream.Close()

'&で分割
wResArrData = wResData.Split(New Char() {"&", "="})

'ハッシュテーブルに読み込み
wResHt = New Hashtable
For wCt = 0 To wResArrData.Length - 1 Step 2
wResHt(wResArrData(wCt)) = wResArrData(wCt + 1)
Next

If wResHt("ACK") = "Success" Then
Response.Redirect("https://www.sandbox.paypal.com/webscr?cmd=_express-checkout&token="
& wResHt("TOKEN"))
Else
ltrMsg.Text = "err:" & wResData
End If


次に4の戻ってきた時のGetExpressCheckoutDetails APIの部分。
確認画面に表示する情報などを取得。
そういえば、戻ってきた時にquerystringでtokenとPayerIDが付加されています。



Dim wReq As HttpWebRequest = CType(WebRequest.Create("https://api-3t.sandbox.paypal.com/nvp"),
HttpWebRequest)
Dim wDataStr As String
Dim wData As Byte()
Dim wReqStream As Stream

Dim wRes As WebResponse
Dim wResStream As Stream
Dim wSr As StreamReader
Dim wResData As String
Dim wResArrData As String()
Dim wResHt As Hashtable

Dim wCt As Integer

wDataStr = "&METHOD=GetExpressCheckoutDetails" _
& "&USER=userid" _
& "&PWD=password" _
& "&SIGNATURE=signature" _
& "&VERSION=64" _
& "&TOKEN=" & Request.QueryString("token")
wData = Encoding.ASCII.GetBytes(wDataStr)

With wReq
.Method = "POST"
.ContentType = "application/x-www-form-urlencoded"
.ContentLength = wData.Length
End With
wReqStream = wReq.GetRequestStream()
wReqStream.Write(wData, 0, wData.Length)
wReqStream.Close()

wRes = wReq.GetResponse()
wResStream = wRes.GetResponseStream()
wSr = New StreamReader(wResStream)
wResData = wSr.ReadToEnd()
wSr.Close()
wResStream.Close()

'&で分割
wResArrData = wResData.Split(New Char() {"&", "="})

'ハッシュテーブルに読み込み
wResHt = New Hashtable
For wCt = 0 To wResArrData.Length - 1 Step 2
wResHt(wResArrData(wCt)) = wResArrData(wCt + 1)
Next

ltrGetEC.Text = wResData
ltrAmt.Text = wResHt("PAYMENTREQUEST_0_AMT")
ltrCur.Text = wResHt("PAYMENTREQUEST_0_CURRENCYCODE")


最後に4,5の支払確定する部分、DoExpressCheckoutPayment APIのところです。


Dim wReq As HttpWebRequest = CType(WebRequest.Create("https://api-3t.sandbox.paypal.com/nvp"),
HttpWebRequest)
Dim wDataStr As String
Dim wData As Byte()
Dim wReqStream As Stream

Dim wRes As WebResponse
Dim wResStream As Stream
Dim wSr As StreamReader
Dim wResData As String

wDataStr = "&METHOD=DoExpressCheckoutPayment" _
& "&USER=userid" _
& "&PWD=password" _
& "&SIGNATURE=signature" _
& "&VERSION=64" _
& "&PAYMENTACTION=Sale" _
& "&TOKEN=" & Request.QueryString("token") _
& "&PAYERID=" & Request.QueryString("PayerID") _
& "&PAYMENTREQUEST_0_CURRENCYCODE=" & ltrCur.Text _
& "&PAYMENTREQUEST_0_AMT=" & ltrAmt.Text
wData = Encoding.ASCII.GetBytes(wDataStr)


With wReq
.Method = "POST"
.ContentType = "application/x-www-form-urlencoded"
.ContentLength = wData.Length
End With
wReqStream = wReq.GetRequestStream()
wReqStream.Write(wData, 0, wData.Length)
wReqStream.Close()

wRes = wReq.GetResponse()
wResStream = wRes.GetResponseStream()
wSr = New StreamReader(wResStream)
wResData = wSr.ReadToEnd()
wSr.Close()
wResStream.Close()

ltrDoEC.Text = wResData


とりあえず、これでうまく行ってます。
書き方の良し悪しはあると思いますが、、、他に良い方法があれば教えて下さい。。

あと、SetExpressCheckoutで商品情報をもっとちゃんと入れてやると、PayPalサイトで
商品情報の詳細が出そうな感じです。
このコードのままだとPAYMENTREQUEST_0_DESCで設定した情報しか表示されません。。