無い物を認識してもらう html5で書いたのをIE8でもみれないとイヤ〜っていうことになったので対応させることにしたが、なにかと面倒だったのでメモ。 要点は以下の通り。 ベタにhtmlファイルに書いてあるhtml5新要素の認識 →html5.jsをつかう タグつくって動的にappendされるhtml5新要素の認識 → innershiv.jsをつかう それでも認識しないやつ(初期レンダリングでhiddenになってるやつとか) →$(“#hoge”).html($(“#hoge”).html()); で強制認識 具体的には headのCSSやJSより先に読み込む。 JS内でhtml5新要素を生成するようなところで、 var html5NewElement1 = innerShiv("ほげ"); $("div#main").append(html5NewElement1); こん
誰かとファイルを共有したい時、知っておくと便利な無料ウェブサービスが「Hosted File Share」です。 ファイルサイズ無制限で各種ファイルをアップロード可能で、アップロード後のページアドレスを相手にメールなどで渡すことでファイルの共有が可能。画像やPDFファイルはダウンロードページに埋め込みで表示されるので、ダウンロードする前に内容を確認することができます。 ツイートボタンも設置されているので、アップロード直後にTwitter経由でファイルを共有することもできます。Twitterと連携する画像共有サービスはいろいろ存在するものの、画像ファイル以外との連携はちょっと難しいため、さまざまなファイルをみんなで共有したい時にも便利です。 「Hosted File Share」の利用方法は以下から。Hosted File Share - Free Hosted File Sharing f
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
Type study: An all CSS button The Typekit Blog ステップで学べるCSS3ボタンのデザインチュートリアル。 <a>タグを利用したエレメントに徐々にスタイルを与えていってボタンを作成していくチュートリアルです。 徐々にやっていくことでどうやって実現されているかが分かりやすいです。 押した際のエフェクトも実現 関連エントリ jQueryによってカスタマイズされたCSSボタン２０ シンプルさがなんともいい感じのCSSボタン集「Super Simple CSS Buttons」 クールなメニューやボタンを実装するCSSチュートリアル５５ CSSでクールなボタンを作るまとめ
CSS drop-shadows without images ? Nicolas Gallagher CSSでリアルでクールなドロップシャドウ効果を描画するサンプル例が色々公開されています。 一昔前なら、どう考えても画像を使っていると思ってしまうこうしたグラフィックもCSSで実現できてしまいます。 パターンも多くて実用的です。ヘッダ、メニュー等、ありとあらゆる部分に応用できそう。 画像編集ツールは一切不要です。 例えば、1個の要素を見てみましょう。 HTML では <div> にclassをふって中身は<p>のみだけというのに、これだけのデザインが実現します。 当然、要素を回転させることも出来ますが綺麗に描画できています。 なんとも夢のような話ですが、CSS3対応の Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ という大体の
Initializr HTML5サイトの土台を作ってくれる「Initializr」。 １からHTMLを作っていくのもいいですが、Initializrを使えばウィザード形式で進めると基本的なファイルをzipでダウンロード可能です。 基本HTMLを含むか、jQueryを含むか？の設定や、サーバ設定も含んだ形でパッケージ化が可能です。 HTMLに初期コンテンツを含むかどうか？ jQueryを含むかどうか？ その他設定した後、ダウンロード デザインはHTML５のロゴをモチーフにしたのだと思いますが、UIはなかなか分かりやすいウィザードになっています。 関連エントリ HTML5を使ったサイトをまとめたギャラリーサイト色々 見ておくべきHTML5サイト集 HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 PCやスマフォでどこでも持ってる音楽を聴けるHTML5ベース
ブロック要素に巻いて立体感を出せるリボンをWEB上でジェネレート「3D Ribbon Generator」 2011年03月01日- 3D Ribbon Generator - CSS3d.net ブロック要素に巻いて立体感を出せるリボンをWEB上でジェネレート「3D Ribbon Generator」。 様々なタイプをベースに自由にデザインして使えます。 かなり自由にカスタマイズが効きます。 ジェネレートボタンを押せば、HTMLとCSSがその場で出力されるという便利なツールです。 既存CSSに貼りつけてHTML書きなおせばOKというお手軽さはいいですね IEでも使えるところもポイント。 関連エントリ レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集 CSS角丸ボックスジェネレーター「RoundedCornr」 オンラインで動く、色, CSS, robots.txt, .ht
d3.js データのビジュアリゼーションに使えるJSライブラリ「d3.js」 ユニークで様々なビジュアリゼーションが可能になっており、更にアニメーションしたりインタラクティブな要素を盛り込めるのも特徴 次のようなデータビジュアリゼーションをjavascriptのコードを使って描画でき、サンプルコードなんかも公開されています。 IEには対応していませんが、かなり色々なことができるので覚えておいてもよいかも。 関連エントリ 色々と使えそうなグラフや図が描けるビジュアリゼーションライブラリ集 データの様々なヴィジュアリゼーションが可能なFlexライブラリ「birdeye」
JavaScriptjQuery UI の Dialog 機能はダイアログをモーダル表示することができる。サンプルを見ると、背景がグレーアウトされて、手前のダイアログしか操作できないTab キーを動かしてもダイアログからフォーカスを移せないといった動作になっている。いままでいろんなライブラリの擬似モーダル実装を見てきたが、Tab キーを押したらこっそり裏側の部分にフォーカスを移せるものばかりだったので、Tab キーにちゃんと対処していたところに驚いた。どうやって実装してるんだろうと思って jquery.ui.dialog.js を見てみたら、次のように泥臭く実装していた。 // prevent tabbing out of modal dialogs if (options.modal) { uiDialog.bind('keypress.ui-dialog', function(even
概要 これはGoogle Docs spreadsheetに書かれたデータをjsonに変換するツールです。入れ子構造も再現できます。 どんな時つかうの？ 開発時のテスト用に webアプリ開発でajax側とか作ってるけど、まだサーバー側ができてなくて、でもとりあえずテスト用のjsonが欲しい時とかあると思います。きっと。 直接jsonファイル作ってもいいけど、ある程度大きなjsonファイルになると管理も大変だし、入れ子構造になるとわけわかんなくなるし、json変更したら動作が変わったとかなったらめんどいですよね。 お客さんに直接入力してもらえる google docsなので、お客さんから直接データを入力してもらえます。ITにうといお客さんもExcelなら使える人も多いです。そんな案件の時にご使用ください。 組込み方法 ツール -> スクリプト -> 挿入 でsheet2jsonを検索してくだ
The JSON Formatter was created to help folks with debugging. As JSON data is often output without line breaks to save space, it can be extremely difficult to actually read and make sense of it. This tool hoped to solve the problem by formatting and beautifying the JSON data so that it is easy to read and debug by human beings. To further expand the debugging capabilities, advanced JSON validation
自分のサイトの情報を、ユーザーがいつも開くブラウザに表示できるのは、サイト運営者としては実に魅力があるものです。 それを実現するには、ブラウザの拡張機能を作成すれば良いのですが、ある程度知識や技術がなければ作成できませんし、そもそも機能に魅力がなければ使われることもありません。 今回は、そういったハードルを一気に低くしてくれるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! カンタンに自サイトのブラウザ拡張機能を作れる「ExtensionFactory」「ExtensionFactory」は、URLを指定するだけで、カンタンにGoogle Chromeなどのブラウザ拡張機能を作成するサービス。 ただ単に新着記事を表示するだけでなく、新着記事通知やお気に入りといった機能も持ち
RDBMSとNoSQLを巡る議論でいつも私が違和感を感じるのは、RDBMSに固執しようとする人と、NoSQLに固執しようとする人と、それぞれが極端にどちらかを擁護し、極端にどちらかの長所や可能性に対して目を瞑ろうとしているように見受けられることである。 これまでRDBMSを業務で使ってきた人にNoSQLの制約の話をすると、大抵の場合、「そんなのじゃ業務には使えない」という反応が返ってくる。特に即時一貫性が保てないという話をすると「まったく使い物にならない」と脊髄反射的に拒否反応を示されることが多い。 私が思うに、クラウドがシステム構築で活用されていくのに比例して、これからは「RDBMSとNoSQLを適材適所で使い分ける」ことがこれからのアーキテクトに求められるのではないか。 これまではRDBMSがあったから何もかも一貫性が保障されていた。だが、本当にそこまですべてのデータに即時一貫性が必要
Twitterでも話題になっていましたが、Gmailユーザの0.08%にあたる15万人のアカウントのメール、チャットログ、連絡先、添付などの全てのデータが消滅する騒ぎがありました。 Googleは、この記事が書かれた当時は、「アカウント復旧作業中」とのことでしたが、現在ではかなり復旧したようです。Gmailのデータが全て消えてしまったら...と想像するだけでも恐ろしい話ですが、この機会にローカルバックアップの重要性について、今一度考えてみるべきかもしれません。 システムやハードディスク、自宅のパソコンに何か問題が起きた場合に備えて、リモートサーバにファイルを保存するなど、オフサイトバックアップは重要ですが、自分が管理していないデータのバックアップもとても重要です。 Gmailユーザ数の膨大さから考えると、0.08%（最初の発表の50万人、0.29%から引き下げ）という数値は決して大きく感じ
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
今回は、そのかんたんログインの問題点について説明します。 「契約者固有ID」を用いるかんたんログイン かんたんログインとは、携帯電話の「契約者固有ID」を用いたログイン手法です。 第1回で説明したように、携帯電話のブラウザのリクエストヘッダには契約者固有IDと呼ばれるIDを付けることができます。契約者固有IDは、携帯電話事業者によって詳細は異なりますが、すべての携帯電話事業者が対応しています。 図1は、NTTドコモの携帯電話がサポートしている契約者固有IDである「iモードID」がサーバに送信される様子です。この情報は、ユーザーがそれと意識することなく送信されます。携帯電話のかんたんログインとは、契約者固有IDのみを用いて認証を行い、ログイン機能を実現することです。 かんたんログインは、ベーシック認証のようにIDとパスワードを管理する必要もなく、Cookieのように対応する端末を考慮する手間
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く