キャッシュを有効にしつつ、cssやjsファイルの変更を確実に反映させる | doop
Webサイトを開発させる上で、キャッシュのせいでcssやJavascriptがうまく反映されないと言う事はよくある話。 私が作っているサイトでも、サイトのレスポンス向上のためにキャッシュを利用しているが、 修正がうまく反映されず、「あれ？」と思う事がしばしば。 特に、開発環境では頻繁にファイルを更新するため、.htaccessでキャッシュを抑止しているけれど、 本番環境と開発環境で異なるファイルを管理するのも若干ストレスだったりする。 そんな訳で、回避策を検討してみた。 条件としてはこちら。 サイトはphpで開発している 対象はcssファイル、js（javascript）ファイル レスポンス向上のため、キャッシュは利用する ファイルを修正した際、ユーザにキャッシュクリアをさせなくても、修正した内容は確実に反映される 対象ファイル（この場合css、jsファイル）以外の修正は行わない では、実
[JS]実装も超シンプル、高さや幅が異なるエレメントを揃えるシンプルなスクリプト -equalize.js
エレメントの高さ（height）、幅（width）だけでなく、outerHeight, innerHeight, outerWidth, innerWidthのサイズを揃えるjQueryのプラグインを紹介します。 デモ：幅 equalize.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="js/equalize.js" type="text/javascript"></script> Step 2: HTML HTMLは適用する要素を内包するラッパーを用意します。 下記はデモの高さを揃える方のHTMLです。 <div id="heigh
IE6でGooglemapsを使うときの注意点
Google Maps API version2 を使ってGooglemapの表示をするようにしたのですが、 IE6でだけ地図が灰色になってしまって表示ができませんでした。 以前も同じ所でつまづいたのでメモです。 DD_belatedPNG.jsを使用していて、Googlemapの表示場所がDD_belatedPNG.jsの指定範囲内だとGooglemapの表示がされないようです。 <!--[if IE 6]> <script src="<?php bloginfo('template_url'); ?>/js/DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('img, .png_bg'); </script> <![endif]--> 上記の様にimg要素全体に指定しているとダメなようです。 <
jQuery で CSS を切り替えて文字サイズを変更する 2 つの方法。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog 最近、文字サイズの切り替えボタンを設置しているサイトも多くなってきましたね。 自治体や病院など公共性の高いサイトを中心に、導入が進んでいるようです。 僕自身も医療系のサイトに関わることが多いのですが、「設置して当然」の要件となりつつある感じ。 まー、正直「周りがやってるから」というのが主な理由なんですが、結果としてユーザビリティやアクセシビリティにつながるなら良しとしましょう（誰 今回は、その「ボタンをクリックして文字サイズを変更」する機能を実現する方法について、定番を 1 つと、新しく見付けたのを 1 つご紹介します。 定番の方は、プラグインを追加するだけなので手軽＆気軽にできるのが特徴。 新発見の方は、いろいろ書かないといけないので若干メンドくさいですが、その
PhotoshopでのWeb制作効率を向上させる「JSX」とは
ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。 しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。 しかし、最
要素をランダムにフェードイン／アウトさせる「LivingFade jQuery Plugin」
要素のフェードイン／アウトをランダムにさせる「LivingFade jQuery Plugin」を利用すると少し異なった印象を与えられそうです。 また、昨今見られるページ表示後に要素をフェードインさせる、あるいはリンクをクリック後に要素をフェードアウトさせてから遷移させるなども簡単に導入できそうです。 sponsors 使用方法 LivingFade jQuery Pluginからjquery.livingfade-0.2.jsをダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.livingfade-0.2.js"></script> <script type="text/javascript"> $(do
【Javascript】 ブロック要素の表示効果（フェードイン・フェードアウト） | ホームページ制作に役立つ！ブレイン・エイチシー
画像のフェードイン＆フェードアウトはよく見かけるが ブロック要素にこの効果をかけたいとき、どうすればと思っていると。 ネット上に無いものはないのでしょうか？ やっぱりありました。 写真つきの記事などの塊（ブロック要素）ごとフェード効果。 非常に助かりました。 組み込みは簡単。 headタグ内でまずスクリプトを読み込む。 そして、bodyタグの最後あたりに var cf = new Crossfader( new Array(‘cf1′,’cf2′,’cf3′), 500, 2000 ); のスクリプトを実行するだけ。 ※ここでの「cf1」や「cf2」というのがブロック要素のID名。 Javascriptのソースはこちらから http://www.brandspankingnew.net/archive/2006/09/javascript_css_crossfader.htm
[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する
まずは下記ならびにフォトグラファー 木村 隆宏さんのサイトを御覧ください。 こちらのサイトでは、アクセス時にポートフォリオを順番にフェードさせることで非常に印象的となっています。 今回はこちらで使用しているJavaScriptをのぞきながら、どう実現しているのかを見ていきたいと思います。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 使用方法 フォトグラファー 木村 隆宏ではJavaScriptライブラリjQueryを利用し、fade.jsでフェードを制御しています。 該当部分を抜粋し、汎用的に書き換えたのが以下となります。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $('.fade
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
[JS]一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考：video, audioのサポート状況 video, audio
スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries
これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです。 この発想はちょっと素敵でした。指定したサイズに応じて要素にclassを与えるので、Media Queryを使用したPCとスマフォ向けサイトで見た目をまったく別のものにすることも出来そう。 特にjQueryやmootoolsといったスクリプトに依存してないのもいいですね。イメージ的には部分的にMedia Queryを手軽に使える、という感じでした。 わずか5KBほどの非依存型軽量ライブラリです。ディスプレイサイズ等で要素が指定した数値になると、class名を与えてくれるので、環境によってデザインを簡単に変更できるようになります。 上記はMedia Query T
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
スマホ用JavaScriptフレームワーク5つ＋1を徹底研究（1/5） - ＠IT
スマホ用JavaScriptフレームワーク5つ ＋1を徹底研究 jQuery Mobile、iUI、jQTouch、 Sencha Touch、Wink toolkit、PhoneGapとは アシアル株式会社 鴨田健次 2011/6/22 スマートフォン向けJavaScriptフレームワーク／ライブラリを使うと、スマートフォンアプリっぽい見た目のページデザイン、UI（ユーザーインターフェイス）パーツやページ遷移アニメーションを簡単に実装できます。多くは、おのおののフレームワークのルールにのっとったHTMLを書くことで、それらの機能を実現します。 本稿では、jQuery Mobileを筆頭として、いくつか発表されているスマートフォンサイト向けJavaScriptフレームワークを紹介します。 ■ PCサイト向けJavaScriptフレームワークについて PCサイト向けJavaScriptフレー
JavaScript入門
HOME JavaScript入門 ここでは、ビギナーの方を対象としたJavaScriptの解説を行っています。 JavaScriptは、Webページに組み込んでいろいろなアクションを起こすことができます。 是非JavaScriptを覚えて、一ランク上のWebページ作りに励んでみて下さい。 当サイトでは主に「初めてJavaScriptを触る人」、特にプログラム自体初めての方を対象にしています。 初めての方は様々な専門用語が出て来ると非常に難しく感じることがあるので、ここでは極力専門用語を使わないようにしています。 ここで書かれてあることをマスターしたなら、 後は色々なサイトでレベルを磨いていってください。 なお最初に断っておきますが、JavaScriptを理解するにはHTMLをある程度使える必要があります。 HTMLを十分使えない方は、まずそちらを勉強なさって下さい。 HTMLを理解してい
もう知らないでは許されない！！「これからはじめる」という人のためのjQuery Mobile情報まとめ | ke-tai.org
もう知らないでは許されない！！「これからはじめる」という人のためのjQuery Mobile情報まとめ Tweet 2011/5/27 金曜日 matsui Posted in Android, iPhone, 記事紹介・リンク | 4 Comments » モバイルサイト作成のためのフレームワーク「jQuery Mobile」が、すごい人気ですね。 当初は数ある選択肢の中の一ツールとして程度の扱いでしたが、AdobeのDreamweaverが本格対応するなど、その勢いは留まるところを知らず、根幹的な技術になりそうな気配すらあります。 今回は過去に当サイトで掲載させていただいた情報も含め、jQuery Mobileを学ぶ上で知っていた方が良さそうなリンクをまとめてみました。 本家サイト。英語が苦手な私は、主にダウンロード用途ぐらい。 → jQuery Mobile 本家サイト（英語） [j
Google AJAX Feed APIを使って複数のフィードをまとめて表示するjQueryプラグイン | へびにっき
Google AJAX Feed APIを使うとJavaScriptだけでRSS/ATOMフィードを読み込むことができますが、標準の機能では「複数のフィードをまとめて」「日付順に（新しい順に）」表示することができないので、jQueryプラグインを作りました。 jquery.googleMultiFeed.js (github) タイマーを使って逐次処理を行っているので、全フィードの読み込みを待つことなく、読み込まれたものから順に表示されていきます。Google AJAX Feed APIの（というよりJSONPの）制約でフィードを並列的に読み込むことはできないのですが、Google側でキャッシュ＆タイムアウト処理が行われているため、多数のフィードを読み込んでもさほどストレスなく表示されるはずです。 jQuery 1.4以上が必要です。jqueryの.jsファイルはscriptタグを使って静
Google AJAX Feed API入門
他のサイトが配信しているATOMやRSSフィードをJavaScriptを使って取得しようとした場合、同一生成元ポリシー(Same-Origin Policy)の制限によって直接他のサーバにあるデータへアクセスできずサーバ側でいったんフィードを受信するなどの処理が必要でした。 Google AJAX Feed APIを使用すると、Googleがフィードのキャッシュとしての役割を果たしてくれるため、サーバ側のプログラムを必要とせず、クライアント側のスクリプトだけで各種フィードを取得することが出来ます。 ここではGoogle AJAX Feed APIを使ってATOMやRSSフィードを取得する方法などを解説していきます。 Google AJAX Feed APIとは ドキュメント
jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
特定の子要素が存在しない場合、親要素を非表示にしたい
popdom.jp