Blog改造ネタ 色々

ここでは、「Blog改造ネタ 色々 」 に関する記事を紹介しています。
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
今日は寒かったですねぇ・・・、雪にはなりませんでしたが、雨が冷たかったです。

先日より、jQueryというJavaScriptのライブラリを使って、このBlogの動的な部分を少しずつ改造しています。
その辺の話をだらだらと

・サムネイルの表示位置
当初のバージョンでは、レイアウト上のどこの位置にあるリンクでも、一律、マウスカーソルの右下に表示するようになっていました。

その場合、ページの右側にある「リンク」の時は画面の外にサムネイルが描画されて、隠れて見えない、水平スクロールバーがその時だけ表示される、と言った状態になっていました。

そこで、昨日の修正では、リンクの上にマウスが乗っかった時点でのマウスカーソルのx座標(Xm)
ウインドウの横幅(Xw)、そしてサムネイル画像の横幅(Xt)から、
「Xw - Xm > Xt」の時には、マウスカーソルの左側に、それ以外の時はマウスカーソルの右側に表示させるようにしました。
一応、これで「横方向」については狙い通り、画面内にサムネイルが表示されるようになりました。

ただ、縦方向については、一応同様のロジックを組み込んではいるのですが、何故か上下の判定が上手くいかず、画面外にはみ出してしまいます。
縦方向については、画面の縦スクロールの問題もあるので、「現在のウインドウ上でのy座標」なのか、「下方向にある程度スクロールした状態での、ページトップからのy座標」なのか、そのあたりを上手く取得できていないようです。


・BadRequest対策
サムネイル画像そのものについては、「HeartRails Capture」というサービスを利用しています。
使い方そのものはリンク先の説明を読んでもらうとして、ここでは省略

HeartRails Capture | サムネイル画像/PDF ファイル作成サービス

問題なのは、「拍手」ボタンのように「<a>(アンカー)タグ」のhref属性が"javascript:"と指定されているモノや「PageTopへ」のように、同一ページ内へのリンクでhref属性が"#pageTop"と指定されているモノ
こういった、ある意味特殊なリンクについては、上記のサムネイル画像作成サービスにurlを渡しても、BadRequestとなって、エラー画像が渡されてしまいます。

他に、方針として、自Blog内に飛ぶリンクについてもサムネイル画像は要らないだろうということで、BadRequestや自Blog内リンクについては、サムネイル表示をスキップするように判定ロジックを追加してます。

ロジックそのものはこんな感じ

function checkReqURL(url) {
if (url == null || url.length == 0) return false;
var chkURLs = [
"http://fow1228.blog87.fc2.com/",
"http://bookmark.fc2.com/user/post",
"javascript",
"#"];
for (i in chkURLs) {
if (url.indexOf(chkURLs[i]) == 0) return false;
}
return true;
}


chechkReqURLに、判定したいurlを引数で渡して、表示対象であればtrueを表示させない場合はfalseを返却します。

ロジックそのものも単純で、まずnull、文字列長が0の場合をチェック
<a>タグでは、hrefは必須属性なのでnullが渡されることは無いと思うのですが、まぁ、お約束ってことで。

で、chkURLsという文字列配列にいわばブラックリストの文字列を定義しておき、引数から渡されたurlを、その配列の文字列にマッチするかを一つずつチェック
マッチしちゃったら、falseを返して終了

上記のチェックを全てくぐり抜けたら、初めてサムネイル表示対象である、という判定になります。


このやり方は実装も簡単で分かり易いのですが、もっとブラックリスト対象のurlを増やしたいと言った時に、配列要素がどんどん増えていくんですよねぇ・・・
それプラス、(必ずしも悪いわけでは無いですが)メンテをする時に直接ロジックそのものに手を入れる必要がある、と

そこで現在考えているのが、BadRequestになるようなチェックは、こちら(クライアント側、JavaScript側)以外にも、サービス提供側でも行っているはずなので、BadRequestのチェックはサービス側に任せてしまいたいなぁ、と

そういった場合、「HeartRails Capture」で公開されているAPIを使えば指定urlのステータスチェックが出来そう、という所までは確認したのですが、そのやりとりで利用されるJSONデータの取り扱い方をまだ理解してません。
とりあえず、jQueryでJSONデータをどうやって取り扱えば良いか、まずはその勉強ですねぇ


そして、「・デザインとロジックの分離」ということで、続きも書き始めているのですが・・・
コレがまた長くなりそうな気配・・・

内容も分かりづらいのですが、書きたくなったネタなので、近いうちにアップしたいと思います。


関連記事
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://fow1228.blog87.fc2.com/tb.php/731-b54cbd52
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。