HTML

ここでは、「HTML」 に関する記事を紹介しています。


上記の広告は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データをどうやって取り扱えば良いか、まずはその勉強ですねぇ


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

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


スポンサーサイト
昨日の改造の続き

サムネイルの表示の仕方をちょっと修正
昨日までのバージョンは、パッと出てきてパッと消える、という感じだったのですが、今日のバージョンではフェードイン、フェードアウト効果に修正しました。

とりあえず、昨日と同様
・FireFox 3.0.5
・Google Chrome 1.0.154.36
・IE7
で確認しました。
表示が崩れるなどのトラブルがありましたら、ご連絡いただけると助かります。

後、昨日の時点ではIE6でも動作確認が取れた、とのこと
確認、ありがとうございました~

【追記】
と思ったのですが、フェードアウトは蛇足に思えてきたので、フェードイン処理のみに修正
ネットで調べ物をしていたら、ちょっと面白いJavaScriptのサンプルを発見
簡単な改造でBlogに組み込めそうだったのでトライしてみました。

このBlog中の色々なリンクの部分にマウスが重なった際に、自動的にリンク先のページのサムネイル画像を表示する、という機能です。
また、地味な改造として、各Blogへのリンクの文字列にマウスを重ねた時に強調表示させてみたり、と

今のところ、
・FireFox 3.0.5
・Google Chrome 1.0.154.36
・IE7
にて、動作を確認しましたが、表示が崩れるなどのトラブルがありましたら、ご連絡いただけると助かります。

【追記】
全部のリンクにサムネイル表示されるのは意味がないような気がしてきたので、他のBlogやページに飛ぶリンクのみ表示するように改造してみたいところ
※言い方を変えると、このBlog内に飛ぶリンクについては表示されないように

【さらに追記】
Scriptの改造が完了
概ね期待した動作をしてくれるようになりました。
今回、自分で組み込んだJavaScriptのファイル(jsファイル)を別サーバに移して、そこからロードするようにテンプレートを修正したので、メンテナンスが随分やりやすくなりました。
※jsファイル単体で修正したものをFTPクライアントで別サーバにアップするだけでOKになったので

ということで引越し、一人暮らし開始記念(?)に、Blogのデザインをリニューアルしました。
前にテンプレートを変えてから、ずいぶん経ちますねぇ

以前のテンプレートは2列だったので、プラグインを増やしていくと、どんどん縦に長くなってしまっていたんですよねぇ
ということで、今回は3列構造にしてみました。

他にもリンクのHTMLを弄って、今までは「○○というBlogの管理者は△△」という配置にしていたのを、「△△のBlogは○○」という感じにしてみました。

相変わらずVistaのIE7やXPのIE7とかでレイアウトチェックをしているので、他の環境(IE6など)でレイアウトが崩れていたら、ご指摘ください~

今回は、色々ブログを弄ったりする人がいらっしゃるようなので、
私が参考にしているサイトやツールのご紹介なんぞを。
※といっても結構メジャーどころなので、代わり映えしませんが。

とほほのWWW入門
こちらのサイトでは、丁寧なHTMLリファレンスが掲載されています。
HTMLタグのパラメータを調べる時に良く使う他に、
逆引きリファレンスもあったりして、かなり便利です。
他、スタイルシートの書き方など
HTML関連について広範にわたってフォローされているサイトです。

難点(という程ではありませんが)JavaScript関連については、
基本的な文法やオブジェクトについてはフォローされていますが、
あまり深く踏み込んだ内容ではないかな?

ez-html
※一次配布サイトがリンクフリーか良くわからなかったので、ひとまずこちらにリンク

ツールその1。
フリーのHTMLエディタです。
オフ会の実施要綱等は全てこのツールで書きました。
※他、このブログのHTMLを自分で書いた部分なども含みます。

動作が軽く、HTML作成支援機能が必要十分備わっている為、重宝しています。

ViX
ツールその2
本来は画像ビューアなのですが、
複数の画像をアルバムという形でまとめたHTMLファイルを出力できます。

オフ会の写真のページなどは、このVixを使って元になるHTMLを生成し、
それを実施要綱のページにうまく表示できるように中身をカスタマイズして作っています。

Flash関係はまだ手を出したことが無いのですが、
そのうち挑戦してみたいです。
※ただあっちはより一層のセンスが必要かなぁ・・・

続きはちょっと突っ込んだ内容なので、ご興味のある方は~
[ブログのカスタマイズ色々]の続きを読む
サブPC作成の話題からちょっと脱線して、ご存知の方もいらっしゃるかと思いますが、唯護一刀会長ことメケメケさんの手により、現在、唯護一刀HPのリニューアルが行われています。
だんだんとコンテンツも増えてきており、当初の「掲示板のみ」という状態からかなりの進化を見せております。

そこでHPのバナーを作ろうという話が持ち上がり、紆余曲折を経て私が作成することになり、メケさん、幽香さんとメッセンジャーで話をしつつ、色々作ってみました。

まずはパターン1
「一刀のイメージは日本刀」ということで、「同好会名と日本刀のシルエット」というコンセプトで作ってみました。
日本刀のシルエットと「一」の字が重なっていて、ちょっと読みづらいのが難点です。
20070502151652.jpg

続いて、背景にヘアライン仕上げのアルミパネルをイメージしたパターンを配置し、シンプルに同好会名のみを表に出したパターン
グレイが色の成分としてかなりの割合を占めてしまい、ちょっと暗めな印象に
20070502152047.jpg

続いてパターン3
シルエットの日本刀を回転させ、スペース一杯に流れるように配置(したつもり…)
最終的に、このパターンが色々とバランスが良い、ということで決定稿となりました。
20070502151854.gif

パターン4
こちらは、パターン2のアルミパネルパターンの背景に、第三弾を重ね合わせたパターン
やはりちょっと暗めな印象に。
また、バナーサイズに縮小すると、ヘアライン仕上げっぽいところが良くわからない、という難点も有り
20070502152132.gif

さらにパターン5
これは、パターン3の諧調を反転させたパターンです。
これはこれで、結構お気に入りです。
20070502152153.gif

作り始めるとこういうのも中々楽しいです。
そのうち、このブログ用のバナーも作ってみますかねぇ
GIMPの色々なTIPSが載っている雑誌を買いました、なかなか面白かったです。
試しにこんな加工をしてみました。

◆オリジナル
20070128002110.jpg


◆線画風
20070128002141.jpg


こういうのでブログのロゴとか作れないかな?w
今日はYG内で会長に聞かれた、ブログの背景画像を固定して表示する方法の説明なんぞを~。
※CSSを直接編集できる前提で説明してしまいます。操作できない場合はまた別途方法を考えます。

メケさんのブログのHTMLソースを見ると、
syles-index.cssというスタイルシートの定義ファイルを読み込んでいることがわかります。

そのファイル中のbodyタグのスタイル定義(body { ・・・(中略)・・・ }の部分です)を見ると、
「background: ・・・」という行にurl(・・・)という定義が記述されており、
bg.imgという画像ファイルを読み込んで背景に使用していることがわかります。

◆ステップ1
このurl()の中身をまず背景として読み込みたい画像のアドレスに書き換えます。
正しく指定すると、指定した画像がモニタの解像度、及びブラウザの大きさに合わせてタイル状に繰り返して表示されるようになります。

◆ステップ2
「background: ・・・」という行の次に、「background-attachment: fixed;」という行を追加します。
このスタイル指定は、ウィンドウのスクロールを動かした時の背景の動作を決定するもので、
指定する値が「fixed」としておくと、ウインドウをスクロールさせても固定されたままとなります。

◆ステップ3(オプション)
背景をタイル状に繰り替えして敷き詰めないように設定するには、
同様に「background-repeat: no-repeat;」と指定しておきます。

とりあえず、こんな感じでどうでしょうか~。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。