On/Off Flipswitch HTML5/CSS3 Generator - Proto.ioOn/Off FlipSwitch Generate pure CSS3 On/Off flipswitches with animated transitions.
2D/3D双方をこなせるCanvasタグを使ったアニメーションライブラリ·taccgl MOONGIFT
taccglはHTML5/Canvasを使った2D/3Dアニメーションライブラリです。 Web上でインタラクティブなアニメーションを実現したいならば参考にしてみて欲しいのがtaccglです。2Dおよび3Dに対応したアニメーションをHTML5のCanvasで実現します。 例です。立方体が回転します。 完全にばらばら。 細く切れた断片が飛んでくるデモ。 平面として回転するデモ。 円形になるものも。 カール。 ボックスが下から飛んでくるデモ。 オブジェクトが回転します。 水平方向への回転。 GPUアクセラレーションが有効であればそちらを使うようになっており、より滑らかなアニメーションが実現します。既存ページへのアニメーションの追加も行えるようになっており、インパクトある表現が可能です。 taccglはJavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGI
レスポンシブWebデザインの請求書テンプレート·sprInvoice MOONGIFT
sprInvoiceはHTML5で作られた請求書のテンプレートです。 Webサービスで課金を行っている場合、請求書をオンラインで出力して欲しいと言われるかもしれません。そんな時に使えるのがsprInvoiceです。 通常の請求書。 スマートフォンレベルの幅にした場合。 支払い済み請求書。 こちらももちろんレスポンシブ。 支払いが遅延している場合。 こんな感じに表示されます。 sprInvoiceはPCはもちろんのこと、スマートフォンにも対応しています。デザインはレスポンシブWebデザインになっており、請求完了または未払いのテンプレートも用意されています。意外と使えるソフトウェアではないでしょうか。 sprInvoiceはHTML5製、GPL/MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る MOONGIFTではプレミアムサービスを提供していますが、その
これは必須！HTML5用ゲームコントロールに·HTML5 Virtual Game Controller MOONGIFT
HTML5 Virtual Game Controllerはタブレットやキーボード、ジョイスティックなどの入力に対応したWebゲーム用ライブラリです。 PCでゲームをする場合、キーボードやマウスでの操作が一般的です。しかしより楽しもうと思うならばゲームパッドの利用は必要でしょう。さらにスマートフォンの場合は入力UIが限られます。そこで使ってみたいのがHTML5 Virtual Game Controllerです。 デスクトップ。キー入力と矢印キーで操作します。 動きはスムーズです。 iPhone版。画面上のコントローラを使います。 スムーズな操作とは言いがたいかも知れません…。 ボタンの認識も今ひとつです。 HTML5 Virtual Game Controllerではゲームコントローラーライクな入力インタフェースが画面の両端に表示されます。左側が移動キー、右側がアクション用のボタンです。
ブラウザキャッシュではなくローカルストレージを使ったキャッシュシステム·basket.js MOONGIFT
basket.jsはローカルストレージにJavaScriptをキャッシュして高速化をはかるソフトウェアです。 Webの高速化を語る上でキャッシュの存在は欠かせません。そこで使ってみたいのがbasket.jsです。何とHTML5のローカルストレージを使ってキャッシュする仕組みを提供します。 最初の実行。underscore.jsなどが読み込まれています。2回目以降は消えます。 でもちゃんとjQueryオブジェクトは存在します。 basket.requireメソッドを使って対象ファイルを読み込みます。有効期限を設定することも可能です。読み込み失敗をハンドリングすることもできます。普段はそのまま利用でき、remove()やclear()でファイルを解除できます。 basket.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る ロ
Webサイトをもっと万人に対してアクセスしやすくするために·HTML_CodeSniffer MOONGIFT
HTML_CodeSnifferはウェブアクセシビリティ改善のためのブックマークレットです。 Webは限られた人たちのものではなく万人向けのものであるべきです。そこで考えられるべき項目として障害のある人に対するアクセシビリティです。そのチェックに使えるブックマークレットがHTML_CodeSnifferです。 実行すると右上にフローティングウィンドウが出ます。エラー、警告、通知の3つに分けてポイントが出ます。もちろんポイントが少ない方が良いです。 各項目の説明を見られます。これらはW3Cのウェブコンテンツ・アクセシビリティ・ガイドラインに則っています。 指摘されている箇所を確認できるマーカーも出ます。 MOONGIFTの場合…がっくりするくらいのエラー数です…。 アクセシビリティと漠然と言われてもなかなか具体的な施策が思いつきませんが、エラーや警告という形で表してくれれば対応もとりやすくな
HTML5/CSS3を使った多機能デザインフレームワーク·HTML KickStart MOONGIFT
HTML KickStartはBootstrapライクなデザインテンプレートフレームワークです。 最近ではWebサイトのベースにBootstrapを利用することが多いのですが、今回はその類似ソフトウェアとしてHTML KickStartを紹介します。こちらもかなり高機能です。 Typography。 リストとメニュー。 メニューは階層対応。 テーブル。 ツールチップ。上下左右自在です。 アイコン。 プログラミングコード。 ボタン。 タブ。 パン屑。 グリッド。 画像。 スライドショー。 動画、地図、カレンダー。 フォーム。 入力フィールドのサイズ。 その他色々。 極力シンプルなHTML構造設計、jQuery利用、HTML5、モーダルウィンドウなどが特徴に挙がっています。唯一残念なのは現状はレスポンシブWebデザインでないことかも知れません。しかし全てのデバイスへの対応を考えないならむしろ手
多彩なデバイスに対応したWebサイト構築に最適なデザインフレームワーク·Centurion MOONGIFT
CenturionはレスポンシブWebデザインに対応したCSSフレームワークです。 レスポンシブなWebサイトを構築するためには様々なデバイスでの表示を考慮したり、そのためのノウハウが必要になります。そこでベースとして取り入れてみたいのがCenturionです。 デスクトップでの表示です。 スマートフォンレベルまで幅を狭めた場合。 メニューはスライドして表示されます。 タブレットはこれくらい。 グリッドもあります。 Centurionはシンプルなフレームワークなので、それほど束縛は強くないと思います。カスタマイズ性も考慮されているとのことなので、Centurionをベースにしつつ独自の要素を盛り込んでWebサイトを構築できるでしょう。 CenturionはHTML5製のオープンソース・ソフトウェア（GPL/MIT License）です。 MOONGIFTはこう見る Bootstrapは個人
レガシーなWebブラウザでもsessionStorageを·sessionStorage MOONGIFT
sessionStorageはHTML5非対応のWebブラウザでもsessionStorageを使えるようにするライブラリです。 HTML5の機能の一つ、Web Storage。その一つであるsessionStorageをレガシーなWebブラウザでも使えるようにするソフトウェアがsessionStorage（名称が紛らわしいですが…）です。 最初の画面です。この時点でセッションが開始しています。 26秒経過しています。 別なタブです。こちらでは8秒。タブごとにセッション情報が管理されています。 IE8でも動きます。もちろんタブごとに情報が違います。 使い方は簡単で、sessionStorageオブジェクトに対してsetItem(key, value)でデータの保存、getItem(key)でデータの取得になります。テキストのみ保存できるようですが、データをシリアライズすればサーバとの連携も
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
HTMLコードを解析して問題箇所と理由を知らせてくれるブックマークレット・HTML_CodeSniffer
HTMLの構文チェックをその場で できるブックマークレットです。 問題箇所の数や、問題箇所もお しえてくれます。割と便利そう だったのでご紹介してみます。 HTMLのlintです。ブックマークレットを起動させてその場で解析、問題箇所も教えてくれます。 OSSとしてGithubでも公開されてますので日本語に直しての利用も出来ますね。 ↑ 起動させるとすぐに解析してくれます。 ↑ 表示されたボックス下部のView Reportに進むと個別箇所が一覧で表示され、それぞれの問題箇所を上図のようにアイコンで教えてくれます。 errorとwarningの表示/非表示のスイッチも出来ます。なかなか便利ですね。 HTML_CodeSniffer
HTML5でつくられた、ページ遷移・画面遷移のアイディアがすごい
HTMLファイ部のほんだです。シュッ 「ページ遷移」、聞くだけでゾクゾクしませんか？ 僕は大好きです。 Web Creator's Contest Q（HTML、CSS、JavaScript エンジニアのためのコンテストサイト）では、 ページ遷移・画面遷移をテーマにしたコンテストを開催中です。 とても好評で、5回目となった当コンテスト。 今回のテーマも、力の入ったコードがたくさん投稿されています！ 魅力的な画面遷移エフェクトのコード集！ Cubic Transition ※「▶Play」ボタンをクリック！
ネイティブアプリのようなWebアプリを作るために
※image via 003 FREE WEB GRAPHICSデバイスの多様化に伴い、拡張性の高いWebアプリの重要性が見直されています。サイバーエージェントのデカグラフを構成するサービスも基本的にはWebベースで作られていますが、これはアプリの改善スピードを上げたり、各サービス間の回遊性を高めるという狙いもあるようです。 ただし、スマートフォンユーザーはネイティブアプリ先行でサービスに触れているため、これまでのWebアプリでは当たり前だったことが、今ではストレスに感じてしまうことも多いです。HTML5の登場やJavascriptのライブラリの充実などにより、最近ではリッチなWebアプリを作る環境が急速に整ってきてはいますが、それでもスマートフォン向けに満足度の高いWebアプリを提供するハードルは非常に高いと言えると思います。 そこで、「もっさり＆カクカク」な印象のあるWebアプリの操作
Modernizr.jsを使ってHTML5のクロスブラウザ問題に立ち向かう！ - Taste of Tech Topics
こんにちは！ しょこたんです。 HTML5の対応も着々と進み、開発をしてみよう！ とはいっても、なんだかんだで気になるのは、 クロスブラウザ問題。 特にIEは9にならないとHTML5の恩恵は受けられないとのこと。 せっかくHTML5のコードを書いても、 それでscriptエラー！ なんて出したら、台無しです。 今までは、そういった問題に対して、ブラウザのバージョンを調べて判断し、 遷移をかえることをやっていました。 たとえば <span class="rem"><!--[if lte IE 6.0]></span> <span class="rem"><meta http-equiv="refresh" content="0;url=./endosnipe_ie6.html" /></span> <span class="rem"><![endif]-->
ドラッグ＆ドロップでファイルをアップできるHTML5のデモ:phpspot開発日誌
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery | InsertHTML ドラッグ＆ドロップでファイルをアップできるHTML5のデモ。 デスクトップなどからファイルをブラウザにドロップしてサムネイルを表示→ボタンを押下でアップロード実施というインタフェースのアップローダ実装デモです。 ソースをDLしてそのまま使うことも可能です。 ドロップするとサムネイルと共にボタンが表示されます。 ボタンを押すとファイルがアップロードされます。 使い慣れるといちいちダイアログからファイルを選ぶのが馬鹿らしくなりますね。 サンプルにはPHPスクリプトもおまけでついてきますが、値をValidateしていなかったりするため、実際に利用するには注意が必要そうです。 関連エントリ これは必見のWEBデザインの近未来。HTML5で構築
HTML5の新要素を IE8以下を対応させる方法
HTML5が少しづつですが普及してきて日本の一般企業でも HTML5が利用されるようになってきました。ただ、その際に気になるのは IE です。IE6 はブラウザ対象から外れてきていますが、IE7, IE8 は対象から外すことはできません。しかしながら、IE7、IE8 は HTML5の新要素（nav, article, header, footer, section, hgroup）を認識することができません。そのため CSS が思った通りに表示されなかったりします。 どうしたら良いでしょうか？HTML5+CSS基礎講座で紹介している内容ですが抜粋してご紹介いたします。 これを解消するには JavaScript を利用します。イギリスのHTML5関連ブログ HTML5Doctor の筆者の一人でもある Remy SharpはIEにHTML5を対応する JavaScript を用意してくれてい
スマートフォン向けのHTML5製フレームワーク・Lungo.js
今更ですけどLungo.jsを少し触って 見ました。Lungo.jsはHTML5+CSS3の スマートフォン向けフレームワーク です。jQueryやmootoolsなどを必要 としない非依存型のライブラリです ので覚えておいて損は無いかも。 スマフォ向けフレームワークです。GPLv3ライセンスでOSSとして公開されています。 スマフォ向けのフレームワークは相当出回っていますので珍しくないかもですけど・・触った感じはなかなか使いやすそうでした。コアファイルは非圧縮で40kbほど。 以下、公式サイトのサンプルです。 Sample スターターキット的にも使えそうです。 ↑ 実機でのスクリーンショット この手のは沢山あるので好みで選べばいいですね。詳細は以下でどうぞ。 Lungo.js
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
Loading...
html5-memo.com
