選択されているタグ : JavaScirpt

コーディングの書式に今更迷う


2012年は、私たちコーダーの制作環境に大きな変化があった年でした。

春先にGoogleがコーディングガイドラインを公開し、

Sass・Compassといった、CSSを支援する拡張が本格的に普及し、

レスポンシブレイアウト対応のサイトが増え、

エディタをSublime Text 2に乗り換える人が増えました。 私も乗り換えました^v^

それに伴ってコーディングやスニペットの見直しをしているわけなのですが、かえって迷って効率が下がったり、手数が増えてしまっているところです。

とりあえず、悩み中なことをまとめます。


投稿者名 うぇびん 投稿日時 2012年12月28日 | Permalink

7月23日に「jQuery逆引きマニュアル」の著者が札幌に来ます

ドキッ!○○だらけの○○って以前も使った希ガス


私が参加してる、「SaCSS(サックス) コーディング勉強会」のスペシャル版が、来月23日に開催されますのでお知らせ。

先日発売になった「jQuery逆引きマニュアル 」の著者、

を招いての、jQueryに集中したセミナーです。


投稿者名 うぇびん 投稿日時 2011年06月16日 | Permalink

yuga.jsに入ってるthickbox.jsを使いやすくしてみる

画像やHTMLをポップアップ表示する、「thickbox」というjQueryライブラリがあります。

ThickBox 3.1

ウェブサイトでよく使われる演出をまとめた「yuga.js」に組み込まれているため、目にする機会が多くなりました。
今年の「ライジングサンロックフェスティバル」のサイトでも、アーティスト紹介に利用されています。

ですが先日、WEB屋ではない友人に
「ライジングサンのアーティスト写真の閉じ方がわからなかった」
と言われました。「右上に閉じるボタンがない」ため、戸惑ってしまったらしいです。

http: //blog.webbingstudio.com/2009/07/rising_sun.html(後半)

thickbox_2

私もこのブログの画像ポップアップに、thickboxを使っています。
確かにこれはわかりにくいです。

thickbox

そこでこのように、閉じるボタンが右上に出るように改造してみました。
手順は追記以下で。

1. CSSの読み込み順を変える

もしhead内で「thickbox.css」を最後に読み込むようにしていたら、linkの順番を変えて自分のサイトのCSSが最後になるように直します。
これをしないと、thickboxの基本CSSを上書きできません。

<link rel="stylesheet" type="text/css" href="css/thickbox.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="all" />

2. thickbox.jsを直す

できれば元ライブラリはいじりたくないのですが、HTML出力部分の修正が必要です。

thickbox.js内、三か所に以下のような記述があるので

<a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key

こう書き換えます。

<a href='#' id='TB_closeWindowButton' title='Close'>X</a> close to Esc Key

閉じるのリンクを大文字の「X」にすることに抵抗がある方は、別途閉じるボタンを用意して、3.でCSSを追加するときに画像置換などで対応してください。

3. CSSを上書きする

自分のサイトのCSSに、以下の記述を追加します。

大文字のXにグロテスク系(文字の線全体に太さの差がない)のフォントを指定し、右上に絶対配置することで疑似的に「閉じるボタン」を作っています。

角丸のスタイルは、Firefox・Safari・Cromeのみ有効で、「幅÷2+10%」くらいの値を指定すると、ほぼ丸になります。
Safari・Crome用の-webkit-border-radiusはショートハンドが有効にならないようです。上下左右個別に指定しなければならない点に注意してください。

IE6以降の主要ブラウザで確認済。
yuga.js・thickboxを使っている方はお試しください。

----- EXTENDED BODY:

投稿者名 うぇびん 投稿日時 2009年08月09日 | Permalink

北海道開発オフ:jQueryでスマートなブログを考えてみる

北海道開発オフへ行ってきました。

ノートパソコンを持参して参加したはじめての勉強会。なのに、肝心のOSが真っ青な画面になってしまって動きません…
買って一ヶ月しか経ってないんですけど@@;

PHPを勉強するつもりだったのですが、仕方なく予定変更。
会場(@smokeymonkeyさんの会社)のパソコンからMovableTypeにアクセスして、やや仕事がらみの開発をすることになりました。


ときどき、ウェブサイト的なワンカラムレイアウトのブログ構築をすることがあります。
ワンカラムは目に入る文章量が少なく、ブログ的なデザインを打ち破れるのですが、各記事を移動するときにいちいちページの読み込みが発生してしまいます。

最近勉強している、jQueryを利用して、デザインもインターフェースもスマートなブログが作りたいなーと考えてみました。
(もう既出だろうけど、開発オフなのでそこは無問題 :P)

結局今日は、MovableTypeとjQueryでこんなものができました。
(ソースをコピーして、静的HTMLに直しています)

https://webbingstudio.com/souvenir/jquery_test/

メインカラム下に、JavaScriptが有効にならなかった場合のページへのリンクも貼ってあります。お暇な方は比較してみてください。

今回は右下にすぽーんと投げ捨てるようなページ切り替えになっていますが、jQueryはアニメーションの追加ライブラリが豊富なので、柔らかいフェードイン・フェードアウトや、MacOSX風ぐるりん切り替えなんかも良さげ。

現段階ではほんとうにさわりだけで、しかもFirefoxでしかチェックしてませんwww
Ajaxでの過去ログ読み込みもつけることも考えると、シンプルな見た目の割になかなか難儀そうです。また時間があるときに考えてみます。

余談ですが、ノートパソコンは帰宅後再起動したら何事もなかったように直ってました。
お昼の、9月下旬とは思えない残暑で熱にやられてしまったのか、中古なだけに実は内部がぶっ壊れる寸前なのか…
まめにバックアップ取って、仕事の重要なファイルは入れないように気をつけなくちゃです。


投稿者名 うぇびん 投稿日時 2008年09月21日 | Permalink