水風呂のすゝめ 毎日めちゃくちゃに暑い。 ここ数年「およげ!たいやきくん」のように昼間は太陽とオフィスビルとアスファルトの三方向から押し寄せる35℃オーバーの熱に挟まれ、夜になっても最低気温が27℃くらいまでしか下がらない。そんな理不尽な東京鍋の中の暮らしが毎年のことにな…
はてなブログ | 無料ブログを作成しよう
水風呂のすゝめ 毎日めちゃくちゃに暑い。 ここ数年「およげ!たいやきくん」のように昼間は太陽とオフィスビルとアスファルトの三方向から押し寄せる35℃オーバーの熱に挟まれ、夜になっても最低気温が27℃くらいまでしか下がらない。そんな理不尽な東京鍋の中の暮らしが毎年のことにな…
物体のドラッグ＆ドロップ時に勢いをつけられる「towel.js」:phpspot開発日誌
towel.js 物体のドラッグ＆ドロップ時に勢いをつけられる「towel.js」。 ドラッグして勢いよく話せば、そのままズズズっとテーブルホッケーのように要素がすべるような効果をつけられます。 どんな場面に使うかはアイデア次第ですが、面白いのでご紹介させて頂きました。 ドラッグ＆ドロップというと、ピタッと止まるものが多いなかでこうした効果を実現しようというアイデア自体もなかなか面白いですね。 関連エントリ ドラッグ＆ドロップで数値の設定が出来る便利ＵＩを実装できる「jquery-drag-spinbox」 対象をドラッグ＆ドロップしてtwitter等にシェアできるプログラムと作成チュートリアル ドラッグ＆ドロップできるサイトマップ作成チュートリアル
ボックス内をスクロールすると自動でコンテンツをロードするjQueryをちょっと変えてみた
この記事は11年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。ボックス内をスクロールすると自動でコンテンツをロードするjQuery – かちびと.net を読んで、ちょっとやってみたくなったので作った。 言ってもたいしたことやってませんがｗ かちびと.netのシロさんには許可を頂いてます。 詳細は以下。 上記記事では、下までスクロールしたあとにワンテンポ置いてから（タイマー処理で）コンテンツがロードされる形になってます。 しかし、IEで見てみるとわかるのですが、内側のスクロールが完了した時点で外側のスクロールも動いちゃうんですね。 なので、ロードされる前にページの下に行ってしまう。 これをちょっと改善できないかなーと思って作ったのがこちら。 Auto Scroll Test コードは以下。 <script type=”text/javascript”> $(functio
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 10] CSS、JavaScriptを簡単に圧縮する 文＝山田岳史（ROSTRATA） Tool Online YUI Compressor URL http://refresh-sf.com/yui/ こちらはJavaScriptやCSSファイルをオンラインで瞬時に圧縮してくれるツールだ。具体的には改行やコメントの削除、また変数名を最小限の文字に置換するといった処理が行われる。これらに加えて難読化もするかどうか、不要なセミコロンを削除するかどうかなどのオプションが選択できる。アクセス数の多いサイトでは、JavaScript、CSSのわずかなサイズのテキストファイルでもトータルのトラフィック量では大きな差となるため、できるだけ圧縮しておきたい。 対象
Twitter の OAuth 許可ページがあまりにも酷い => 応急処置 - mooz deceives you
OAuth の Read と Write 先日, ツイート君に会話をまとめてもらい, 大変嫌な思いをした. Twitter の OAuth には Read 権限と Write 権限があって, Write 権限があると つぶやく 誰かをフォローする 誰かをリムーブする などのことが行えてしまう. つまり, Write 権限を要求するアプリケーションを許可することは, 「このアプリケーションが私のアカウントを使って勝手に変なことをつぶやいたり, 勝手に誰かをフォローしたり, 勝手に誰かをリムーブしても文句は言いませんよ」ということに等しい. さて, それでは OAuth の権限付与画面を見てみよう. ここでは冒頭に上げたツイート君が権限をこちらに要求してきている. では, いったい何の権限を要求してきているのだろうか. Read なのだろうか. それとも Write なのだろうか. 答えは R
jQueryとPHPで作るサムネイルがスライドするギャラリー – creamu
サムネイル表示のあるフォトギャラリーを作りたい。 そんなときに参考になるのが、『Fresh Sliding Thumbnails Gallery with jQuery and PHP』。jQueryとPHPで作るサムネイルがスライドするギャラリーです。 マウスオーバー状態でカーソルを動かすことで、サムネイルをスライドさせることができます。クリックすると、大きくプレビュー表示されますね。 右上のドロップダウンで、アルバム管理もできるようなので、複数のセットを見せることができます。 デモは以下から。 View demo ソースもダウンロードできるので、一度見てみてください。 Fresh Sliding Thumbnails Gallery with jQuery and PHP iPhone版も作られています。 Awesome Mobile Image Gallery Web App やっと
jQueryのカレンダー関連のプラグイン７つ:phpspot開発日誌
7 interesting jQuery calendar plugins | YESTUTOR jQueryのカレンダー関連のプラグイン７つが紹介されています。 Googleカレンダーっぽいものや、Appleっぽい物など種類が沢山あります。カレンダーUIを実装する際の参考に出来そうです。 探せば他にももっとありそうですね。 関連エントリ あなたの空き状況が一目でわかるカレンダー実装PHPスクリプト「Ajax Availability Calendar」 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 Ajaxを使ったクールなインタフェースを持つカレンダー実装スクリプト「PHP Event Calendar」
【レビュー】HTMLのidとclassでいい名前をつけるテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSやJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。 How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 07] CSS Spriteを手軽に作成する 文＝東 孝之（（株）ゼネラル・プレス） Tool CSS Sprite Generator URL http://ja.spritegen.website-performance.org/ CSS Spriteは、読み込みのリクエスト数を減らすことができるので、ページ最適化に有効な手段だが、実装するのに手間がかかる。そんなときは「CSS Sprite Generator」を使うといい。「CSS Sprite Generator」は、複数の画像を一枚の画像にし、CSSで表示位置を変更するスタイルシートをオンラインで生成するジェネレータである。これを使えば、複数の画像をひとまとめにして連結画像とCSSを作成し
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Flashのような8種のエフェクトを選べる汎用的なjQueryギャラリー・AviaSlider - かちびと.net
Flash製のギャラリーなどでよく 見かけるようなエフェクトが8種 用意されているjQueryを使った スライドギャラリーのAviaSlider をご紹介します。 若干怪しいですけどIEでも動きました。懲りすぎてない、汎用的なギャラリーです。
今更CSS-TRICKSのCODE SNIPPETS GALLERYのWeb制作Tips集が便利なことに気が付いた - かちびと.net
今更ですが海外記事の紹介 でよく見かけるCSS-TRICKS が構築しているページの中に CODE SNIPPETS GALLERY というページがあるのですが、 これが個人的に激しく便利な 事にようやく気が付きました・・ 何度も見てるブログなのに今まで全く気が付かなかったです・・・知っておくと地味に便利なcssやjQueryのスニペットをさらっと書いてまとめてくれています。 色分けされてて見やすいです。 探しやすい 見出しはスライドし、各スニペットの題名がリンクになっています。 例・IEにもcss3の回転を実装させる css3のtransform: rotate（回転）をIEでも実装する方法とか。 Text Rotation 例・4行のコードでドロップダウンメニューを作るjQueryコード ドロップダウンメニューを作れる簡単なコードとか。 Disable Parent Links in
[CSS]画像やコンテンツや動画を表示するCSS3で実装したLightbox
動画を表示 対応ブラウザはFirefox, Chrome, Safari, Operaの最新のバージョンで、IE6/7ではJavaScriptを使用することで動作させています。 スタイルシートのオフ時には、各リンクはページ内アンカーとして動作し、下記のように表示されます。
グーグルのBigQuery、大規模処理の「仕組みは秘密です」
先週行われたグーグルのイベント「Google I/O」で発表された、大規模データをSQLライクな命令によって高速に処理してくれる新サービス「BigQuery」。3日前に公開した記事「グーグルによるMapReduceサービス「BigQuery」が登場。SQLライクな命令で大規模データ操作」で、その概要をお伝えしました。 そのBigQueryについて、Google I/Oのセッションに参加されていたスティルハウス 佐藤一憲氏が「BigQueryってなんぞ？」とエントリをブログに書いています。自由にコピペしていいと許可をいただいたので、あらためてBigQueryとはどんなものなのか、ポイントを紹介しましょう。 大規模なデータを処理できるといえば、思い浮かぶのはMapReduceです。佐藤氏はBigQueryとMapReduceの違いをこう書いています。 MapReduceとはどう違う？ 大規模な
jQueryによってカスタマイズされたCSSボタン２０:phpspot開発日誌
20 Awesome jQuery Enhanced CSS Button Techniques - Speckyboy Design Magazine jQueryによってカスタマイズされたCSSボタン２０としてエントリがあがっていたのでご紹介。 ボタンデザインのサンプル集として覚えておけばかなり使えそうなサンプル集になってます。 ボタンでクリック率は大きく変るということもあるので、クリック率を高めたい場合はこだわってみるとよいかも。 関連エントリ iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 綺麗にデザインされたCSS3ボタンのまとめ PhotoShopで美しいボタンを作るチュートリアル39個 CSS3なボタンをWEB上で作れる「Button Maker」
Google Maps API を使って、地図のカラーバリエーションを楽しもう。
こんにちは。Google マップのエンジニアリングを担当している池嶋です。今日は、Google Maps API を使って、地図の色を自由に変えられる裏技を紹介したいと思います。 まず、この地図を見てください。 通常の Google マップのように見えますが、全体の色が薄く、赤く色がついている場所があります。赤く色をつけたのは、Google マップのデータベースに「学校」と指定されている場所です。この地図を見ると、たくさんの学校がある事がわかります。 この地図は、特別に作ったデータではなく、先日 Google I/O でも紹介された、Google Maps API で色を変えられる機能を使って作りました。この機能を使うと、自由にカスタマイズした地図を作る事ができます。 例えば、大都市における鉄道や高速道路の分布を地図の上で見る事ができます。
jQueryとCSS3で文字修飾に便利なMS OfficeのMinibar風ウィジェットを実装するサンプル:phpspot開発日誌
jQueryとCSS3で文字修飾に便利なMS OfficeのMinibar風ウィジェットを実装するサンプル 2010年05月27日- Why and how to create Microsoft Office Minibar with jQuery and CSS3 jQueryとCSS3で文字修飾に便利なMS Office 2007のMinibar風ウィジェットを実装するサンプル テキストを選択すると、ツールバーがうっすらと現れ、ツールバー内のボタンを押すと、文字が修飾されるようタグを付与してくれるようなMinibar実装サンプルです。 デモページではその場でプレビューされる機能もあります。 デモでは、b, i, uタグの他、リンクタグしかありませんが、他にも追加することで、テキスト入力をより便利にすることが出来そうですね。 関連エントリ フォームのユーザビリティに貢献するjQuery
グーグルの「パックマン」ロゴができるまで--ウェブ技術でオリジナルを忠実に再現
5月22日は、「パックマン」のリリースから30周年にあたる。Googleはこれを記念して、同社初の本格的にインタラクティブで実際にプレイできるトップページロゴをロールアウトした。1980年代の象徴的なビデオゲームであるパックマンが、本格的に動作するバージョンだ。 Googleは長年、バレンタインデー、米国独立記念日、母の日などさまざまな祝日や記念日に際して「Doodle」と呼ばれる特別なロゴを作成してきた。毎回、Google Doodleチームが同検索エンジンのトップページに表示される特別なロゴの作成に取り組む。 しかし数カ月前、同チームは5月22日がパックマンの日本での発売から30周年にあたることに気付き、いつも以上に特別なことをしなければと考えた（なお、パックマンの現在の英語表記は「Pac-Man」。当初は「Puck Man」だったが、「P」の文字の一部が欠けて「F」のように見えるケー
指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」:phpspot開発日誌
指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」 2010年05月27日- Plugins | jQuery Plugins 指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」。 $(element).footer() みたいにするだけで、element に指定した要素をページのフッターに吸い付くように配置することが出来る便利なプラグインです。 ブラウザの高さを変更してもJavaScript側で調整してくれます。 通常の例。div#footerブロックは最初の要素の直下に来てます。 フッター設定した例。ブラウザの下部に常に配置されます。 色々方法はあると思いますが、実装が簡単なので便利かもしれませんね。 関連エントリ HTMLで雑誌のような美しい段組みレイアウト
色々なエフェクトがある画像ズームJavaScript「Cloud Zoom」
twitter facebook hatena google pocket 画像をズームさせることで、小さなスペースで詳細まで見せることが可能です。 今回紹介するProfessor Cloudは軽量かつ簡単にズームをさせられます。 sponsors 使用方法 Professor Cloudからファイルをダウンロードします。 またjQueryも忘れず用意しましょう。 <link href="cloud-zoom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="cloud-zoom.1.0.1.js"></script> 上記を記述したら画像を記述していきま
オシャレなサイトに使えそうな画像ズームが行えるjQueryプラグイン「Cloud Zoom」:phpspot開発日誌
Professor Cloud オシャレなサイトに使えそうな画像ズームが行えるjQueryプラグイン「Cloud Zoom」。 写真にカーソルを合わせるだけで、次のようにカーソル部分がズームされ、こうしたUIが必要な場面において便利に使うことが出来そうです。 範囲外を反転させることも出来るみたい。 アパレルサイトとかで、細部を拡大してより商品をしってもらう、的なインタフェースが必要な際にサクッと実装出来てしまいますね。 関連エントリ GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 細部のズームアップ表現に使えるPhotoshopチュートリアル 画像を同一Window内でスムーズにズームしてくれるJSライブラリ色々
画像にクリック位置に注釈を入れられるjQueryプラグイン:phpspot開発日誌
ZURB JavaScript Annotation Plugin - ZURB Playground - ZURB.com 画像にクリック位置に注釈を入れられるjQueryプラグインが公開されています。 クリック位置に次のように注釈を入れることが出来ます。画像サイトなんかでここが凄いみたいな部分の投票とかに使えそうですね。 単に画像を注釈できるだけでなく、ajaxによってその注釈を保存することも出来るみたいです。 関連エントリ Flickrみたいに写真内に枠を作ってコメントできるようにするjQueryプラグイン CSSのみで画像に違和感なく注釈を入れるサンプル
ボックス内をスクロールすると自動でコンテンツをロードするjQuery - かちびと.net
IE6でも7でも動いてくれるのと なかなか使い勝手も良さそう なのでメモ。jQueryを使った コンテンツボックス内の自動 読み込みを実装します。 去年くらいの記事ですけど見逃してたのでメモ。 Facebookをやられてる方はピンと来るかも。下までスクロールすると自動で次のコンテンツが読み込まれますが、それをボックス内で実装したものです。基本的にどのブラウザでも動くみたいです。 Scrolling Dynamic Content box このボックス内でスクロールすると自動で次のコンテンツが読み込まれ、アイテムの数も表示されます。というか、見たほうが早いですね。 デモ コード コードです。 $('document').ready(function(){ updatestatus(); scrollalert(); }); function updatestatus(){ //ロードしたアイ
HTML5の凄さを理解できるHTML5製のプレゼンテーション·HTML5 Slides MOONGIFT
HTML5 SlidesはHTML製のオープンソース・ソフトウェア。2010年秋に仕様の確定が予定されているHTML5。ビデオタグなどの一部混乱はあるものの、大筋で仕様は固まってきており、SafariやGoogle Chromeなどは率先してHTML5に取り組んでいる。 HTML5に関するプレゼン HTML5で目玉機能になっているのがローカルストレージやオフラインアクセス、データベース、位置情報、SVG/Canvasなどだろう。そんなHTML5の魅力を知ることが出来るプレゼンテーションとしてHTML5 Slidesを紹介しよう。 HTML5 SlidesはHTMLで作られたプレゼンテーションだ。左右の矢印キーを使って読み進めることが出来、Ctrlキーと+/-キーで拡大、縮小表示ができる。内容はずばり、HTML5に関する説明で、プレゼンの途中でHTML5を試せるようになっている。 プレゼン上
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」:phpspot開発日誌
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」 2010年05月26日- jQuery Doubleselect Plugin １個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」。 次のように、１個目のSelectボックスの内容によって２個目のselectボックスの内容が容易に切り替えるようなUIが簡単に実現できてしまうプラグインです。 １個目が野菜(Vegetables)の場合は、tomato, potato, asparagus が表示されます。 １個目をフルーツ(Fruits)にすると、apple, orange, kiwi, melon になります。 いざ実装しようとすると面度臭そうなのですが、jQueryプラグインによって、比較的簡単に実装できま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
近所に住んでるツイッターユーザーを探すサービスStreamdin | 秋元@サイボウズラボ・プログラマー・ブログ
グーグルストリートビューの画像だけで作られた音楽ビデオ”Journey Is My Destination” | 秋元@サイボウズラボ・プログラマー・ブログ
IDEA * IDEA
サービス終了のお知らせ
最新POIでピボットテーブル・ピボットグラフを自動作成
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
