サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
とあるWeb制作会社にて ワイ「社長、こないだ頼まれたショッピングサイトの件なんですけど」 ワイ「ご注文フォームのコーディング、完了しましたで！」 社長「おお、ありがとうな」 ワイ「ほな、飲みに行ってきますわ！」 社長「・・・いや待てや（まだ15時やし）」 社長「何やこのフォーム」 ワイ「何ですかいな」 ワイ「デザイン通り、完璧にコーディングできてますやん」 社長「いやバリデーションが全くされとらへんがな」 ワイ「グラデュエーション？」 ワイ「何を卒業するんでっか」 社長「バリデーションや」 社長「貴様をこの会社から卒業させたろか」 バリデーションとは 社長「バリデーションちゅうのは、不正な値やないかどうか確認することや」 社長「例えば数字を入力してほしいフォームに、文字列を入力して送信されても困るやろ？」 社長「そういうのをちゃんとチェックするのがフォームバリデーションや」 ワイ「あ、あ
【流れるテロップのような表現ができるjQueryプラグイン「liScroll 」と「JQUERY NEWS TICKER」】テレビの下とかに流れる、テロップのような表現をwebサイトにも設置することができます。 「liScroll 」サンプルはこちらタブの「Result」で動作を確認ください 配布元はこちらhttp://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html もう１つ知ってるプラグインがありますんで、ご紹介します。 「JQUERY NEWS TICKER」サンプルはこちらタブの「Result」で動作を確認ください 配布元はこちらhttp://www.jquerynewsticker.com/ どちらもかっこいいですよね～。 シーンによって使い分け
グーグルは、JavaScriptでMVCアーキテクチャのアプリケーション開発をする際に便利な機能を備えたライブラリ「AngularJS 1.0」のリリースをブログで発表しました。 MVCアーキテクチャとは、ソフトウェアがデータモデル（Model）の部分とユーザーインターフェイスの部分（View）、そしてビューとモデルのあいだで制御する部分（Controller）に分離された構造のことを指します。 これらが分離されているとプログラムの見通しがよくなり変更にも対応しやすく、テストも容易になるため、何種類ものユーザーインターフェイスと複雑なロジックなどから構成される大規模なアプリケーションではMVCアーキテクチャの採用が望ましいものと考えられています。 しかしWebアプリケーションをMVCアーキテクチャで実現しようとすると、ビューの役割を果たすHTMLのコードの中に、どうしても複雑なJavaSc
Hi, I’m jQuery++. I am a MIT licensed collection of extremely useful DOM helpers and special events for jQuery 1.8 and later. I’m not aUI project like jQueryUI or jQuery Tools. Instead, I’m all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, I am jQuery’s bald-spot covering toupee. Select the plugins you want and c
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
デモページ [ad#ad-2] マウスの位置を変えると、それを光源としてアニメーションでシャドウが変化します。 ※アニメーション無しも設定できます。 マウスを上に動かすとシャドウが長くなります Real Shadowの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="realshadow.js"></script>JavaScript jQueryのセレクタで、シャドウを適用するエレメントを指定します。 <script type="text/javascript"> $(selector).rea
Fire.appはフォルダを監視してSass/Compass/CoffeeScriptを自動変換するソフトウェアです。 最近はCSS/JavaScript/HTMLをそのまま書くのではなくSassやCoffeeScript、Haml/Markdownを使ってそれぞれのフォーマットに変換するのが当たり前になってきています。そこで使ってみたいのがFire.app、自動ファイル変換ソフトウェアです。 起動します。 メニュー常駐型です。 設定画面です。 Growlを使った通知に対応しています。 Livereloadに対応しています。 履歴です。 フォルダを指定しました。プロジェクトテンプレートを生成してくれる機能があります。 生成しました。後は修正すると自動的に別フォーマットファイルを生成してくれます。 Fire.appはSass/CompassからCSSを、Haml/ERB/Markdownか
Retina.js | Retina graph... / lake.js / Timeline他...全5件 Retinaディスプレイかどうかを判別して、高解像度の画像（@2x）をサーバーにアップしておけば、自動的に呼び出してくれるJavaScriptライブラリ。
Table テーブルのコンテンツをページネーションにすることもできます。 jPagesの使い方 外部ファイル スタイルシートとスクリプトを外部ファイルとして記述します。 <link rel="stylesheet" href="css/jPages.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jPages.js"></script> アニメーションのエフェクトを使用する場合は、「animate.css」も記述します。 <link rel="stylesheet" href="css/animate.css">HTML デフォルトのHTMLの例です。 ページネーション用のdiv要素と各アイテムをリスト要素で実装します。 ※各ア
KickstrapはBootstrapをベースにしたテーマ、プラグインを提供するソフトウェアです。 最近作られるWebサービスでよく使われているBootstrap。そんなBootstrapは固定色でそれっぽさが感じられてしまうのが欠点でしたが、見事に打ち消してくれるのがKickstrapです。 色が変わると随分印象が違います。 テーマ機能があります。 青と白。 こんな感じのシンプルなテーマも。 逆にカラフルなものもあります。 基本は同じですが、印象は違いますね。 好みのテーマを選べます。JavaScriptプラグインがデフォルトよりもぐっと増えています。 Kickstrapを使えばBootstrapをより便利に使えるでしょう。JavaScriptプラグインも通知機能をはじめ、色々なものが追加されていますのでWebサイトをより強力にパワーアップできるはずです。 KickstrapはHTML
大きいサイズの画像から、クロップやリサイズなどして小さいサイズのサムネイルを自動生成するjQueryのプラグインを紹介します。 サムネイルはテキスト配置やさまざまなエフェクトにも対応しています。 jQuery NailThumb [ad#ad-2] NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコンテナとサムネイルのサイズ設定です。 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <script type="text/
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
この間の春の嵐はすごかったですね。いろいろ飛ばされないように必死だった kimoto です。帰りの電車は久々に足が浮くほどの超満員を経験しました。 さて、ちょっとモーダルウインドウを調べる機会があったのでまとめてみます。 基本的に、全て jQuery で動くものになっています。 最新の情報ってわけではないですが、場面ごとに選べるものを集めてみたのでお試しくださいませ。 超シンプルな軽量スクリプト leanModal leanModal leanModal はとにかく軽量です。デモを触ってみると、その軽さがわかると思います。 ただし、軽さを徹底的に追求した結果なのか、IE6 には対応していないとのこと。 また、イメージギャラリーなどとしては使えないとのことです。 ちょっとした文章を表示するだけの場合などはこれで十分ですね。 そこそこ軽量、そこそこ機能的Simple ModalSimple
sigma.js | a lightweightJavaScript graph drawing library ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」。HTML5 canvasベースのスタンドアロンライブラリだそうです。マウスでドラッグしたりマウス位置に応じてインタラクティブに変化させることができます。 次のようにグラフィックが美麗であるので、個人的にはグラフィック作成用途に使っちゃってもいい気がしました。 関連エントリ 複数要素の関連をビジュアライズできるライブラリ「arbor.js」HTML5のキャンバスと連動させて音声をビジュアライズしたデモ 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」
Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」 2012年04月02日- Timeline Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」。 一見スライドショーのようでもありますが、タイムライン付きのスライドショーになっています。何かの歴史を語る時には是非使いたいと思ってしまう程のクオリティです。 スライドショー内にはHTMLならなんでも埋め込めるということでYoutubeやGoogleマップがいい感じにレイアウトされて表示されています。 スライドショーと連動してタイムラインもアニメーションします。タイムライン側をクリックしてスライドショーの位置を選択することも可能。 スライドショー部分はドラッグ＆ドロップで移動することができます タイムライン部分の拡大。う〜ん素晴らしい！ この
kanazawa.js v1.7 - Back to Basics -（2012年3月31日開催）で使用したスライドです。
株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade -Creative St...他...全11件
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
