フラットデザイン実現のためのJavaScriptフレームワーク
Webサイトデザインの新しい流行が「フラットデザイン」になりつつある。Windows 8やWindows Phoneですでにその兆候があったが、Appleが発表したiOS 7のデザインでその流れは確実になった。iOSはモバイルデバイスやタブレットデバイスで過半数を確保し、バージョンアップ率も高く同分野において支配的なポジションにある。iOSがフラットデザインへ変更することはデザインの流行に強い影響を与える可能性が高い。 フラットデザインをまとめたサイトや、フラットデザインを実現するためのJavaScriptフレームワークなどの情報がDailyJSの記事「jQuery Roundup: Go Flat!」に掲載された。フラットデザインを実現するための資料サイトとして参考になる。 jQuery Mobileを採用している場合、「jQuery Mobile Flat-UI Theme」が最初のと
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
jQueryで作られた本格的表計算ソフトウェア「jQuery.sheet」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう本格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc
メソッドチェーンを使えばWeb SQL Databaseも簡単に·mchain MOONGIFT
mchainはHTML5のWeb SQL DatabaseにおいてjQuery風にメソッドチェーンを使えるようにするライブラリ。 mchainはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5はこれまでのWebアプリケーションのあり方を大きく変える可能性があると思っている。その一つとして期待しているのがWeb SQL Databaseだ。Webブラウザ内でRDBMSが利用できる技術だ。 デモのTodoアプリ これをうまく使えば、最初に必要なデータをダウンロードして後はクライアントサイドだけで加工して完了したらアップしてもらうような仕組みが作れるようになる。そんな面白い技術を手軽に扱えるようにするJavaScriptライブラリがmchainだ。 mchainは基本的にWeb SQL Database APIをmchainでラッピングしているだけで使い方は変わらない
jQuery製で手軽に使えるHTML5による画像のドラッグアンドドロップアップローダー·Droparea MOONGIFT
DropareaはHTML5/jQueryで画像のドラッグアンドドロップによるファイルアップロードを行うライブラリ。 DropareaはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5によって大きく改善されたWebの機能の一つがファイルアップロードではないだろうか。複数のファイルがアップロードできるようになったり、ドラッグアンドドロップでもアップロードできるようになった。 アップロードするとすぐにサムネイルが表示される ドラッグアンドドロップでのアップロードとしてはGmailが有名だが、ファイルを持っていってはじめてドロップできることに気づくのでは使い勝手が良いとは思えない。それをもう少し分かりやすくしたのがDropareaだ。 DropareaはWebページに写真をアップロードするjQueryプラグインだ。特徴としてアップロードできる部分があらかじめ指定されて
jQuery プラグインを書くための資料と便利ツール - わからん
次の3つが役立っている。最近実際にいくつか読んでいるけど、複数ブラウザ対応していたり、完成度の高いものばかりというわけではないんだなと知った。そのことにネガティブな印象はなくて、そのまま使えるものじゃなくても、公開して頂けるだけありがたいといった気分。どうせなら GitHub に置いてくれれば、気軽に修正の報告ができるしいいなとは思った。 http://docs.jquery.com/Plugins/Authoring 公式サイトの Plugins/Authoring というセクションに丁寧な解説がある。 http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/ テンプレ。コメント付きのほうを一度読み下すだけでも、ためになった。わざわざこのネタのための RSS フィード もあった。 http://jquery.cod
レガシーなブラウザでもCSS3の新技術を活用する·Selectivizr MOONGIFT
SelectivizrはCSS3の機能をIE6〜8でもサポートできるようにするライブラリ。 SelectivizrはJavaScript製のオープンソース・ソフトウェア。CSS3ではIDやclassによる指定の他にもセレクタが追加されている。例えば属性値による指定でスタイルを設定することもできる。機能が追加されれば、より自由度の高いWebデザインができるようになる。 使い方 しかし足を引っ張る要素も存在する。それがレガシーブラウザだ。CSS3に対応していないWebブラウザであるIE6〜8においてセレクタを使えるようにするのがSelectivizrだ。 SelectivizrをIE6〜8において読み込めば、多様なセレクタが利用できるようになる。面白いのはjQuery、dojo、prototype.js、YUI、DOM Assistant、MooTools、NWMatcherといった有名なJa
使い道色々。jQueryを使ってSparklineグラフを描く·Peity MOONGIFT
PeityはjQueryでSparklineグラフ（円、棒、折れ線）を描くJavaScriptライブラリ。 PeityはjQuery/JavaScript製のオープンソース・ソフトウェア。Webサイトはテキストコンテンツが多い。一覧表などはテーブルタグを使えば簡単に実現できるが、それをグラフ化しようと思うと面倒に感じてしまうからだろう。 円グラフ だがライブラリを使えば容易に実現できる可能性がある。Canvasタグを使ってSparkline系グラフを描くライブラリがPeityだ。 Sparklineとは一行程度の小さなグラフで、縦軸横軸の説明は行わない。そのような説明がなくとも十分理解できるグラフについて使われる。ごく小さいので文章中に埋め込むのも容易だ。Peityでは円グラフ、折れ線グラフ、棒グラフの三種類を描くことができる。 折れ線グラフ タグの中に埋め込まれた文字を使ってグラフにして
HTML5はJavaScriptプログラムをスマートにする
現在、W3C（World Wide Web Consortium）では、HTML5標準仕様の策定作業が進んでいます。Firefox、Google Chrome、Safari、Operaといった各Webブラウザはアップデートを活発化し、HTML5の仕様を取り込んだ新機能の実装を進めています。シェアの高いInternet Explorer（IE）は、現バージョン（IE8）ではHTML5対応の遅れが目立ちますが、次期版のIE9ではWeb標準に準拠したHTML5対応が強化されます。 HTML4の仕様が1997年に公開されて以来、Webアプリケーションは、Ajaxによるリッチなコンテンツの実現、jQueryなどのJavaScriptライブラリによる開発生産性と互換性の向上、といった過程を経て進化してきました（表1）。そして、IE9がリリースされるであろう2011年には、ついにHTML5時代が幕を開け
Javascriptのパフォーマンスをあげるポイント | Branberyheag Lab
30 best practices to boost your web application performance – Web User Interface Architect JavaScriptコーディング等を 書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+=’AAA’;aaa+=’BBB’; の方が aaa=’AAA’+'BBB’;より速い 複数の文字列連結には、Array で文字
MOONGIFT : 多機能、高性能なjQuery UIウィジェット「Wijmo Open」 オープンソース・ソフトウェア/フリーウェアを毎日紹介
Wijmo Openはメニューやカレンダーなど多彩なウィジェットを提供するjQueryプラグイン。 MOONGIFTはこう見る Wijmo Openは多数のウィジェットが提供されている。この手のライブラリは増えつつあるが、大事なのはどれくらいのパターンに対応できるかということになる。Wijmo OpenはWebアプリケーション全体を規定する訳ではないので、足りないものは他のjQueryプラグインで補えるのが利点になる。 テーマ機能もあるので、いわゆる○○臭は抑えられると思われる。Webアプリケーションはもとより、ちょっとしたイフェクトやデザイン（ウィザード形式の処理など）を実装するのにも役立つと思われる。 [/s2If] Wijmo OpenはjQuery製のオープンソース・ソフトウェア。今後、モバイルのネットワーク利用が当たり前になったり、SaaSが隆盛になっていけば、Webアプリケーシ
アドビのHTML5・jQueryサポート最新事情 － ＠IT
2010/10/29 米アドビ システムズ（以下、アドビ）は10月25～27日、ロサンゼルスで年次イベント「Adobe Max 2010」を開催し、新製品や新戦略の発表を行った。 同社CTOのケビン・リンチ（Kevin Lynch）氏を中心にした初日の基調講演では、「Webサイト」「電子出版」「Web動画」「企業向けアプリ」「ゲーム」の5つの分野における「マルチスクリーン戦略」について熱弁をふるった。いま人々の生活において、スクリーンを持つすべてのデバイスによる“革命”が起きているという。 米アドビ システムズCTOのケビン・リンチ氏「マルチスクリーン革命はコンピューティングの利用法の転換点。パーソナルコンピューティング革命のときよりも大きな変化だ」 同社が掲げるマルチスクリーン戦略とは、スクリーンを持つすべてのデバイスにおけるUX（ユーザー・エクスペリエンス）を高めるという課題に対し、ア
サイトがOpenIDに対応しているならば·openid-realselector MOONGIFT
openid-realselectorはjQuery/JavaScript製のオープンソース・ソフトウェア。最近ではWebサイトの認証にOpenIDを利用するケースも増えている。かつGoogleやYahoo!など大手のWebサービスでもOpenIDプロバイダーとして使えるようになっている。 選択すれば良いだけ GoogleやmixiといったOpenID 2.0に対応したサービスではURLが共通化されたために入力する手間も省けるようになっている。そうした対応サービスを個々に並べるのが面倒という人はopenid-realselectorを使ってみよう。 openid-realselectorはGoogleやYahoo!、AOLなど主立ったWebサービスをアイコンで並べてOpenID認証をしやすくするライブラリだ。さらにユーザ名を入れる必要がある場合も、FlickrやWordPress、Blog
多数のブラウザでvideoタグに対応する·html5media MOONGIFT
html5mediaはjQuery/JavaScript製のオープンソース・ソフトウェア。HTML5を使って動画を流す場合に使われるのがvideoタグだ。現在主流になっているMPEG4にはライセンスコストがかかるので標準化が困難で、広まるのは難しい状況ではある。 Safariで実行した場合。videoタグのまま そんなvideoタグを使えばFlashを使わない、または使えないブラウザでも動画の閲覧が出来るようになる。だがIEをはじめとしてHTML5に対応していないとvideoタグが使えないので二重の開発を行う必要があるのは問題だ。そこで使ってみたいのがhtml5mediaだ。 html5mediaは多数のブラウザでvideoタグを使えるようにするライブラリだ。記述するのはvideoタグでよく、html5mediaを読み込むことでHTML5に対応していればそのままvideoタグを使い、対応し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/05/css3.html