WWW Watch

JavaScript カテゴリーの記事一覧

JavaScript や jQuery に関する記事の一覧を表示しています。(1 / 2 ページ)

閲覧中の URL を AMP (Accelerated Mobile Pages) バリデータに投げるブックマークレット

Twitter で流れてきて拝見したのですが、q-Az さんで、「AMP ページに #development=1 を付けて開くブックマークレット」 という記事が上がっていました。便利だなと思ったわけですが、つい先日、AMP バリデータの Web 版が公開されていますので、補足として、閲覧中の URL をこの AMP バリデータ に投げるブックマークレットも作って共有しておきます。

Continue reading

Google タグマネージャに新機能 「ワークスペース」 が追加、複数人での更新が便利に

Google タグマネージャの新機能として、「ワークスペース (Workspaces)」 と呼ばれる機能が追加されました。バージョン管理をより便利にする機能で、簡単に言ってしまえば Git などのバージョン管理システムでブランチを切るような感じで 1つのコンテナに対して異なる複数の変更を同時に進めていくことができます。

1人で小規模な Web サイトを管理している人にはそれ程大きな恩恵はないかもしれませんが、複数人で大規模な Web サイトへの JavaScript 配信をタグマネージャを利用して行っている方々には便利な機能だと思います。個人アカウントでは最大 3つまでワークスペースを作成できます。

Continue reading

jQuery 3.0 が正式リリース、通常の Web サイト制作で利用するなら軽量版 「Slim build (スリムビルド)」 が便利

jQuery

米国時間の 6月 9日付けで、jQuery 公式サイトにてアナウンスされましたが、jQuery 3.0 の正式版がリリースされました。

2014年の 10月に jQuery 公式 Blog に投稿された記事 (参考エントリー) で、次期リリースから現状の jQuery 2.x 系の後継を 「jQuery 3.0」、1.x 系の後継を 「jQuery Compat 3.0」 と名称変更した上で、今までメジャーバージョン番号が異なっていた 2つの jQuery を、jQuery 3.x に統一すると発表されていましたが、それから約 1年半を経て、今回ついに jQuery 3.0 の正式リリースとなりました。

ちなみに 「jQuery Compat 3.0」 については IE8 のサポートが Microsoft によって打ち切られたことで (参考エントリー)、リリース候補版の公開時になかったことになって消滅しています。

Continue reading

Grunt 1.0.0 がついに正式リリース、0.4.5 のリリースから約 2年

JavaScript タスクランナー 「Grunt」 は、0.4.x までは順調にリリースを重ねてきていましたが、2014年 5月の 0.4.5 リリースを最後に開発が止まり、その間に同じタスクランナー 「Gulp」 などの台頭によって徐々に存在感が薄まると 「Grunt おわた」 的な空気と共にフェードアウト気味でした。

そんな中、2年近くが経った今年 2月に、Grunt 1.0.0 の RC1 (リリース候補版) がリリースされ、その際、jQuery Foundation の協力によって再出発する旨がアナウンスされていましたが、昨日、正式リリース版の 1.0.0 がついに公開されました。

Continue reading

jQuery 3.0 および jQuery Compat 3.0 のアルファ版が公開される

jQuery米国時間の 13日付けで、jQuery 公式サイトにてアナウンスされましたが、jQuery 3.0 および jQuery Compat 3.0 のアルファ版がリリースされました。

現行版の jQuery 2.x 系の後継が 「jQuery 3.0」、1.x 系の後継が 「jQuery Compat 3.0」 と名称変更されてのリリースになります。大きいところだと .show().hide() メソッドの仕様が変わったみたい。

Continue reading

ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験

jQueryタイトルが (謎) な感じですが......

ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。

実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript (というか jQuery) でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いのかとか、そもそもの是非 (好き嫌いとか?) についてはとりあえず置いておいて、画面が移動したのがわかるようにするなら、「スクロール」 以外でもできるんじゃないの? という実験です。

Continue reading

Google Chrome 41/42 は JavaScript に関する新しい技術によってページの表示速度がさらに向上するらしい

Google ChromeChromium Blog に掲載された記事によると、Chrome 41 (現在正式リリース版)、及び Chrome 42 (現在 Beta channel) では、JavaScript に関する新しい技術が実装されることで、ページの読み込みにかかる時間をさらに短縮できるとのこと。

Continue reading

SVG のフォールバックは結局 Modernizr に落ち着いた件

SVGタイトルでほぼ言い切ってる感じなんですが......

SVG に対応していない環境 (IE8 以前とか、旧 Android の標準ブラウザとか) に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript (とりあえず jQuery) 書いて SVG 未対応ブラウザに対しては代替画像に差し替えるっていう手で落ち着きましたというお話。

Continue reading

jQuery は次期リリースから 1.x 系、2.x 系共にメジャーバージョン番号を jQuery 3.x で統一へ

jQueryjQuery 公式 Blog は、10月 29日付けで投稿された記事「jQuery 3.0: The Next Generations」 で、次期リリースから現状の jQuery 2.x 系の後継を 「jQuery 3.0」、1.x 系の後継を 「jQuery Compat 3.0」 と名称変更し、今までメジャーバージョン番号が異なっていた 2つの jQuery を、jQuery 3.x に統一すると発表しました。

Continue reading

Google+ ウィジェットの JavaScript コードに async / defer 属性がついた件

Google+Google+ プラットフォームで配布されている、「+1 ボタン」 や、「バッジ」 などを Web サイトに設置する際に使用される JavaScript のソースコードがありますが、これらソースコードに、script 要素の async / defer 属性が付与されるようになりました。

Googleの Ilya Grigorik 氏が自身の Google+ に投稿しているほか、実際のソースコードにもすでに反映されています。

Continue reading

閲覧中の Web ページ に Thumb Zone Map (親指が届く範囲マップ) をオーバーレイ表示するブックマークレットを作った

GIZMODO で紹介されていた (日本語版記事はここ)、Scott Hurff 氏による、「Thumb Zone Map」 を閲覧中の Web ページにオーバーレイ表示するブックマークレットを簡単に作ってみました。

役に立つかは不明ですが、自分の Web サイトとか、iPhone だと親指でどの程度のところまで指が届くのかな~ なんて確認するにはいいかもしれませんよ。

Continue reading

Firefox 31 が正式リリース、HTML5 track 要素や CSS Variables 最新仕様に対応など

FirefoxFirefox の最新版、Firefox 31 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

HTML5 の track 要素に対応 (WebVTT) したほか、接頭辞が -- に変更された、CSS Variables (CSS カスタムプロパティ) の最新仕様に対応し、利用可能です。その他、ECMAScript 6 の実装がさらに進んだり、CSS.escape() が実装されるなどしています。

Continue reading

iPhone Safari などで Web ページ のタイトルと URL をコピーするブックマークレットを作った

タイトルで全部言っちゃってる感はありますが、iPhone 版 Safari を使っていてちょっと面倒なのが、見ているページのタイトルや URL を指定の形式でコピーすることができない点。Blog 記事を書いていたり、Twitter などに投稿する際に見ているページからこれらの情報を簡単にコピーしたいって時が多々あります。

一応、iOS には Safari から Twitter や Facebook にシェアする機能も実装されていますが、タイトルや URL を投稿時に編集できないし、コピーを選択すると URL だけしかコピーされないしってことで、ちょっと使い勝手が悪い。

ということで、自分の希望通りのフォーマットでページタイトルと URL を取得できるブックマークレットを簡単に作って使っているわけですが、需要あるかわからないですけど公開してみようと思います。

Continue reading

jQuery 公式 Blog 「jquery-latest.js を使用するのをやめろ」

jQueryjQuery 公式 Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js (jquery-latest.js を使うな)」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境 (公開している Web サイト) で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。

Continue reading

TweetDeck に XSS の脆弱性。意図せぬリツイートが実行される

TweetDeckTweetDeck でクロスサイトスクリプティング (XSS) を狙った投稿が広まったようで、先ほどたまたま起きて TweetDeck 見てたら、自分の環境でもいきなり Chrome が XSS の警告を出して、気がつけば特定の投稿が勝手にリツイートされてるっていう・・・・・・

TweetDeck で閲覧している場合、該当の投稿がタイムラインに表示されるだけで自動的にリツイートがされてしまうようで、防ぐ手立てなしでした。

Continue reading

jQuery が 1.12 以降のブラウザサポートについて発表。 IE6/7 のサポートは 1.12 まで

jQueryjQuery 公式サイトにて、年内にリリース予定の jQuery 1.12 以降のブラウザサポートについて、1.12 が IE6/7 をサポートする最後のリリースになると発表しました。

以前、この Blog でも書きましたが、jQuery 2.x 系はすでに IE6/7/8 のサポートはしていません。1.x 系がレガシーブラウザをサポートするバージョンですが、1.12 までは現在の最新版である 1.11 同様、IE6/7/8 をサポートするものの、次バージョン (2015年リリース予定) の 1.13 では IE8 以降のみのサポートとなります。

Continue reading

スタイルの継承で Google Maps JavaScript API で表示した地図のコントロール UI がおかしくなった件

Google Maps JavaScript APIたいした話ではないんですが、ある案件で Google Maps JavaScript API を使用した地図を Web サイト内に表示して調整しているとき、通常、デフォルトでは左上の方に表示されるコントロール UI (ズームとか操作するやつです) の表示がおかしいことに気がつきました。

で、なんでだろなと思って Web コンソールで調べてみたら、思わぬところに原因がありましたというお話。

Continue reading

TinyPNG API を使って PNG 画像を最適化する grunt-tinypng 使ってみた

TinyPNGPNG ファイルの最適化 (減色 / 圧縮) を行うオンラインツールとして TinyPNG は有名ですが、開発者向けの API も提供されています。

この TinyPNG API を使った画像の最適化を Grunt タスクとして実行できる 「grunt-tinypng」 をここのところ試していたんですが、いい感じだったので紹介。これまでは 「grunt-pngmin」 を使っていたのですが grunt-tinypng に移行して試しています。

Continue reading

Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩

GruntGrunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが......

とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか?」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー (主に HTML や CSS を書くフロントエンドな人) さん向けに、初めて Grunt を使うならこれだけまずはやってみたら? っていう内容で書いてみようと思います。

なるべくコンパクトに書こうと思ったんですが、終わってみればかなり長い記事になってしまいました...... 覚悟してどうぞ。

Continue reading

Google タグマネージャで Web ページに読み込む JavaScript を管理してみる

Google タグマネージャGoogle タグマネージャ (Google Tag Manager) をこの Blog 内の各ページで読み込んでいる JavaScript コードの管理に数ヶ月前から使い始めていますが、結構使いやすくて便利なのと、ページの表示速度的にもいい結果が出たので紹介してみます。

Continue reading

Geolocation API 仕様が W3C 勧告に

W3Cすでに主要なブラウザでは実装済みなので、今さら感はありますが、Geolocation API が 10月 24日付けで W3C 勧告になりました。

Geolocation API の最初の草案 (Working Draft) が公開されたのが 2008年ですから、約 5年かけて勧告までたどり着きましたとさ。

Continue reading

Google が無料の Web コンテンツ作成ツール 「Google Web Designer」 を公開

Google Web DesignerGoogle さんが、HTML5 広告をはじめとした Web コンテンツをデザイン、作成するための無料ツール、「Google Web Designer」 を公開しました。

Photoshop などのような、視覚インターフェースを使用して、広告などの Web コンテンツを作成し、HTML5、CSS3、JavaScript を書き出すことが可能です。コードエディタも搭載されているので、出力されたコードを直接編集して、より高度なコーディングを行うこともできるようになっています。

基本的にはインタラクティブな要素を持った 「広告」 の作成を簡単に行うためのツールで、AdMob や DoubleClick といった広告プラットフォームとの連携機能も搭載されています。

Continue reading

CSS と jQuery で作るスクロールにあわせて回転するロゴ

TumblrTumblr のスタッフ Blog を見てたら、ロゴ (正確にはロゴの周囲の部分) がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。

結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transform プロパティに都度突っ込んでいくっていう感じ。ソースコード自体は数行で実装できます。

Continue reading

Web Audio API が Firefox でサポートされる

HTML5Mozilla Hacks で Firefox における Web Audio API のサポートについて記事になっていたので紹介。

現在、Firefox NightlyFirefox Aurora で実装され、デスクトップ版、および Android 版の Firefox 24 では Web Audio API の全機能が利用可能になる予定とのこと。

Continue reading

Blink で mouseenter/mouseleave イベントがサポートされるらしい

Google ChromeGoogle グループの blink-dev で、mouseenter / mouseleave イベントに関する話題が上がっていました。

簡単にいえば、Blink レンダリングエンジンで、mouseenter / mouseleave イベントをサポートするよという内容。WebKit Bugzilla の方でも 4月に mouseenter / mouseleave イベントのサポートに関する最終パッチが投稿されていて、最新のビルドでは実装済みです。

Continue reading

Firefox 23 が Content Security Policy 1.0 仕様に対応

FirefoxMozilla Hacks で、現在 Aurora チャンネルの、Firefox 23 が、Content Security Policy (CSP) 1.0 の仕様に対応した件、紹介されていました。

Content Security Policy (CSP) 1.0 は、あらかじめその Web ページで読み込まれることが想定されている JavaScript などのコンテンツを、ホワイトリストとして指定することによって、攻撃者によって挿入される悪意のあるスクリプトの読み込みを遮断し、クロスサイトスクリプティング (XSS) など、インジェクション攻撃から Web サイト や Web アプリケーションを保護するための仕組み。現在、W3C で策定が進められ、勧告候補の段階になっています。

Continue reading

jQuery 1.10.0 / 2.0.1 が同時リリース

jQuery先週ですが、 jQuery 1.10.0、および 2.0.1 が同時にリリースされました。jQuery 1.x 系と、2.x 系は、お互いに機能的には完全に互換性を保ちつつも、2.x 系は IE8 以前のサポートは捨てて、より高速に、安定して動作させることを目指したバージョンとして、一方の 1.x 系は IE8 以前をサポートするレガシーブラウザ向けのバージョンとなります。

この 2バージョンを並行して開発していく形は、jQuery 2.0 が正式リリースされた際に、今後はこういう形でいくよと予告されていたものですが、今回がその最初のリリースとなります。

Continue reading

Chrome Beta for Android 28 が Fullscreen API に対応

Chrome BetaChrome Beta for Android がバージョンアップして ver.28 (28.0.1500.21) になりましたが、Fullscreen API に対応したそうです。

Fullscreen API は Web ページ内の任意の要素をフルスクリーン表示可能にする仕組みで、現在 W3C でも標準化が進んでいます。この Blog でも、2年くらい前ですが Fullscreen API に関して書いていますので、その時に作ったデモページで実際に試してみました。

Continue reading

jQuery 2.0 が正式リリース。旧 IE サポートは 1.x 系で継続

jQuery事前に発表されていたロードマップ通りですが、jQuery のメジャーバージョンアップである、jQuery 2.0 が正式にリリースされました。

jQuery 2.0 は IE 6/7/8 への対応をやめることで、より軽量で高速、そして安定化を目指した新バージョン。こうした旧ブラウザへの対応は、jQuery 1.x 系の最新版である、jQuery 1.9 (もう少しで 1.10 がリリースされますが)で引き続き継続利用可能です。今後も jQuery 1.x 系 は 2.x 系 と互換性を持ちつつも、レガシーブラウザへの対応が可能なバージョンとして継続的にリリースされていくことになります。

Continue reading

CSS で作る Tumblr モバイルアプリ風メニュー

1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。

Tumbler の Android アプリ (Tumblr for Android) の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript (jQuery 使用) で再現してみました。実際のサンプルは下記に。

Continue reading

Google Chrome の Console でお寿司

お寿司Google ChromeConsole パネルにお寿司を流すやつ (こう書いても意味不明) が音の鳴るブログさんで公開されていましたので紹介してみます。

個人的にはアジとヒラメが好物なので注文したい。ていうかお寿司食べたい...

Continue reading

Firefox 20 で Tombloo が動かなくなった場合の対処

Firefox昨日、「Firefox 20 にしたら Open With がちょっと便利になった」 っていう記事を書いたんですが、同時に問題も発生しまして、Tombloo が動かなくなっちゃったんですよね。

どんな感じかっていうと、下記のように、コンテクストメニューから Tombloo のサブメニューが開かなくなっちゃった。もちろん、サブメニューを使わずに直接ポストしようとしても投稿に失敗します。

Firefox 20 で Tombloo の不具合

Continue reading

jQuery Core 1.9 アップグレードガイド 日本語訳

ちょっと話題としては乗り遅れた感が漂いますが、先月末に jQuery 1.9 の正式版、および jQuery 2.0 のベータ版がリリースされました。

これに際して公開された、jQuery 1.9 への移行ガイド 「jQuery Core 1.9 Upgrade Guide」 を翻訳してみたので下記に公開してみます。

Continue reading

Webkit に最適化されたサイトを IE10 に適応させるためのガイド

スラッシュドットで 「Microsoft、「WebKitはWeb標準を破壊している」と主張」 なんてストーリーが上がってて、なんぞやと思って大本の記事を見に行ったんですけど、そしたらそれが 「Webkit しか対象にしてない Web サイトを IE10 でもきちんと動作させるためにやっといた方がいいことガイド」 っていうお役立ちコンテンツだったってことで、がんばって最後まで読んだ手前、ついでなので翻訳して掲載してみようかなと思います。

Continue reading

placeholder 属性と jQuery で IE にもプレースホルダを

フォームの入力コントロール (input とか textarea) に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用する (プレースホルダ) なんてことはよくやります。

プレースホルダ

HTML5 では、プレースホルダを指定する属性として、まさにそのままの名前が付いた、placeholder 属性が新たに追加され、ブラウザさえ対応していればとても簡単に実現可能になっていますが、今のところ IE が対応していないのが悲しいところ…

Continue reading

CSS で作るスマートフォン向け片手操作メニュー

CSS で作るスマートフォン向け片手操作メニュー久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。

現在最新版の FirefoxSafariChrome では動くと思います。あと手持ちの iOS 5 (iPhone 4S) Safari では動作確認しました。他のスマートフォンとか知らない (CSS の position : fixed に対応してないヤツだと動かない)。IE?何それ美味しいの?

Continue reading

Fullscreen API を簡単に試してみた

ちょっと前、先月の話題になってしまうのですが、Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API に関連して、Mozilla が公開している Gecko:FullScreenAPI が更新されて Firefox Nightly で使えるようになったり、W3C からも Fullscreen (Editor's Draft) が公開されたりと色々動きが活発になってきましたので、いい機会ということで、お勉強ついでに簡単に試してみました。

例えば HTML5 で追加された video 要素は、今まで Flash などのアドオンに頼ってきた動画の Web ページへの埋め込み、再生を HTML 側で対応することを可能にしましたが、フルスクリーン (全画面) 表示に関しては機能として含まれていませんでした。Fullscreen API は、JavaScript を使用して、video 要素や、canvas をはじめ、任意の要素内をフルスクリーン表示することを可能にしてくれます。

Continue reading

非同期コードで Google +1 ボタンを設置してみた

Google +1先日 Google は、「Official Google Webmaster Central Blog」 で、「Google +1 ボタン」 のレンダリング速度を今までよりも 3倍高速にしたと発表しました。もともとが遅すぎたんだよという指摘はあるものの、「通常の 3倍」という響きは魅力的…

さて、この 3倍速い Google +1 ボタンに関しては、Google さんが勝手にアップデートしてくれるので、すでに設置済みのソースコードを差し替えたりという必要はないのですが、記事中には、「Asynchronous Snippet (非同期スニペット)」 という新機能も追加したよと書かれていて、そちらについて導入したい場合は、新しいソースコードを新たに取得してねと説明されています。

当 Blog は今まで Google +1 ボタンを設置していなかったのですが、いい機会なので Google +1ボタンを、この新しい非同期コードで設置してみようと思い、普通に +1 ボタン設置用ソースコードを取りに行ったのですが、現時点ではボタン設置コード生成ページの言語設定を英語にしていないと非同期スニペットオプションが表示されないようなのでメモ。

Continue reading

Firefox 4 で Minibuffer + LDRize + ReblogCommand を動かす

GreasemonkeyFirefox 4 の正式版が出たので使っていますが、ベータ版からきちんと確認していなかったことで正式版を入れてみてから初めて気がついた問題点っていうのがいくつかあります。

その中でも捨て置けない問題だったのが Greasemonkey アドオン関連で Minibuffer + LDRize + ReblogCommand という、特に Tumblr の Dashboard 上でなくてはならない UserScript セットが動作しなくなったってこと。

Continue reading

高速検索を可能にする Ajax 検索のススメ

現在発売中の Web Desingning 2009年 1月号に Movable Type 関連の記事を寄稿せていただきました。

1月号の特集記事、「特集1: WebデザイナーのためのMovable Type事例 & テクニック集」 の中で、「高速検索を可能にするAjax検索のススメ」 と題したコラム記事という形で、以前当サイトでも紹介した、Movable Type 向け Ajax サイト内検索をベースにした内容になっています。

Continue reading

CSS&JavaScript 表現アイデア帖

CSS & JavaScript 表現アイデア帖ものすごく久しぶりに更新しといて宣伝かよという感じですが、MDN さんより今月発売された 「CSS & JavaScript 表現アイデア帖」 のご紹介。

このムック本は同じく MDN さんが発行する web creators 上で過去に掲載された特集や連載の中から、CSS と JavaScript に関する記事を選んで再編したもの。私やうちの会社の中の人が書いた記事もいくつか掲載されています。これ 1冊で 150件くらいの記事がまとまっているので、もう web creators のバックナンバー漁りから解放されるかも。

Continue reading

web creators 2008年6月号

web creators 2008年6月号4月28日に発売の 「web creators 2008年6月号」、連載企画 「Webデザイン Tips & Tricks」 にて、当サイトで過去に紹介した 「CSS レイアウト切り替えスイッチ」 が紹介されました。(P88、CSS レイアウトを選べるボタンを設置)

ということで、私は特に何もしていないですが、取り上げていただいたお礼を兼ねてご紹介。

Continue reading

Yahoo! UI Library: TabView 使ってみた

JavaScript によるタブの切り替え UI の実装というネタで言えば、以前にも 「JavaScript でタブ切り替え UI を実装する」 で紹介しましたが、今回は、Yahoo! UI Library の中から、「TabView」 を使用してちょっとしたインターフェースを作ってみました。

実はサイトのリニューアルと合わせてオススメ書籍とか紹介するページを作って、そこで浅ましくアフィリエイトしようとか考えていたんですが、ただ商品を並べてもつまらないし、ちょっと変わった見せ方ができないものかということで考えた結果が、今回の TabView を使った見せ方。メモもかねて作り方を解説してみようと思います。長くなりそうなので何回かに分けるかも。

Continue reading

CSS 切り替えスイッチ用スクリプト修正

以前紹介した、「CSS レイアウト切り替えスイッチ」、及び 「12 のレイアウトを切替可能なテンプレート」 ですが、特定の状況でスクリプトエラーが発生して正常に動作しないとの指摘を受けましたので、ちょこっと修正しました。

原因は CSS の切り替え用スクリプトとして使用していた 「styleswitcher.js」 で、(X)HTML ソース内に、rev 属性を指定した link 要素が記述されていると 「Error: a.getAttribute("rel") has no properties」 のようなエラーが帰ってきて終了という状態になっていました。

Continue reading

2種類のサイト内検索を併用可能に

サイトリニューアルにあたり、サイト内検索システムを今まで使用していた 「Google Custom Search Engine」 から以前紹介した、「MT 向け Ajax サイト内検索」 に変更しました。

Google Custom Search Engine 自体は良かったのですが、検索結果表示のサイズが、横幅 500px 以下にならないという制約から、新しいデザインではちょっと収まりが悪かったため、今回の変更に至ったわけです。

Continue reading

CSS レイアウト切り替えスイッチ

CSS SwitchWeb サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。

じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。

Continue reading

MT 向け Ajax サイト内検索

以前から暴想さんで公開されている Ajax を使用した Blog 向けサイト内検索を社内的なサイトで使わせて頂いたのでお礼を兼ねて紹介。実際にベースにしたのは暴想さんのスクリプトを元に Movable Type 向けにカスタマイズされた Dakiny さんバージョン

そいつをさらにカスタマイズさせてもらって使用しましたが、そのバージョンを折角ですので公開してみようと思います。

Continue reading

div 要素に src 属性はちょっと......

アイデアとしては面白いと思うし、こんなこと書くと細けーなぁと言われそうなのでなんですが、それでもできるだけ valid な (X)HTML を書いた方がいいよと思っている者としては一応書いておきます。参考までに。

ちなみに元ネタは Sprinkle Javascript library by Jon Davis

Continue reading

JavaScript でタブ切り替え UI を実装する

先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて (他力本願)、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。

時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな~なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。

タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクとしてタブが機能するもの。 Archiva さんのスクリプトはピッタリでした。

Continue reading

12 のレイアウトを切替可能なテンプレート

1つのテンプレートで 12度おいしい XHTML + CSS テンプレートを公開してみたいと思います。といっても、ごく普通のテンプレートに CSS 切り替え機能を付けただけなんですが、Blog や Webサイトを作られる際のベースとして役立てて頂けたらうれしいです。

Continue reading

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー