タグ

javascriptとjqueryに関するgriefworkerのブックマーク (33)

  • technoesis.net

    We’re getting things ready Loading your experience… This won’t take long.

  • ygoto3.com

    現在開発担当している AbemaTV で、昨年末にパナソニックさんのスマートテレビ VIERA 向けにアプリケーションをリリースしました。AbemaTV リモコンボタンで AbemaTV にアクセスできます。今回このアプリケーションの UI を開発するにあたって、新しいデザインワークフローを導入しました。 記事では、 Story-Assured Design というデザインワークフローを、現在プロダクト開発で直面しているデザインの課題とともに紹介します。 Story-Assured Design とは? Story-Assured Design はその名前が示しているように、ユーザーストーリーを保証することを目的とした UI デザインのワークフローです。UI デザインを3つのステップに分けて行います。 ストーリーデザイン デザインの構造化 視覚情報デザイン 一番重要なユーザーストーリーの

  • jQueryプラグインのメソッドパターン

    jQueryプラグインのメソッドパターン このエントリーはjQuery Advent Calendar 2013の 最終目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 今回はjQueryプラグインのメソッドパターンについて紹介をしたいと思います。 jQueryプラグインのメソッドとはどいうものかというと、まず以下のようなプラグインがあったとします。 $.fn.alert = function(options){ return this.each(function(){ $(this).click(function(){ alert(options.text); return false; }) }); } セレクタで指定した要素でアラートを表示するだけの簡単なプラグインです。(プラグインの作り方は「

    jQueryプラグインのメソッドパターン
  • Qiitaのtextarea自動補完がOSSになりました - Qiita

    $('textarea').textcomplete({ // mentionは単なる名前で意味はありません。 // 分かりやすい名前をつけてください。 mention: { // 必須設定 match: /(^|\s)@(\w*)$/, search: function (term, callback) { // callback には文字列の配列を渡す $.getJSON('/search', { q: term }) .done(function (resp) { callback(resp); }) .fail(function () { callback([]); }); }, replace: function (value) { return '$1@' + value + ' '; }, // 任意設定(下記はいずれもデフォルト値) index: 2, maxCount:

    Qiitaのtextarea自動補完がOSSになりました - Qiita
    griefworker
    griefworker 2013/09/02
    GitHubのようなtextareaの補完機能を実装するjQueryプラグイン。
  • 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita

    結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合

    結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita
    griefworker
    griefworker 2013/07/17
    処理が関数の中に隠蔽される、インタフェースが統一される、非同期処理のエラー処理が容易、再利用性が高まる。
  • ScaleOut | Supership

    日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。

    ScaleOut | Supership
    griefworker
    griefworker 2013/06/19
    filedrop便利そう。有名なサービスが使ってるライブラリは導入に踏み切りやすいよな。
  • http://mmenu.frebsite.nl/

    griefworker
    griefworker 2013/05/21
    スライドして表示されるメニューを実装するためのjQueryプラグイン。Sidrとかより良い感じ。
  • Railsでbowerを使ってJSのライブラリを管理する - #詰んでる日記

    最近Perl仕事をしていて、cpanfileが無いプロジェクトで盛大にやらかしたtohaeです、こんにちは。 Perlでやらかした経験を生かし、Railsプロジェクトで使うクライアントサイドのJSもちゃんと管理しようとbowerを使うことにしました。 bower is 何? bowerってのはtwitterが作ったJSのパッケージマネージャです。最近紹介記事も多いので、詳しくはぐぐってください。 簡単に言うとJSをwgetする時代は終わったってことです!!! 今回はbowerの紹介ではなく、bowerをRailsで使う場合にはbower-railsを使うといいかもというお話をします。 bower-railsの下準備 まずはbowerをnpmで入れます。 $ npm install bower -g 次にGemfileにbower-railsを追加します。現時点ではバージョンを指定しないと

    Railsでbowerを使ってJSのライブラリを管理する - #詰んでる日記
    griefworker
    griefworker 2013/05/13
    backbone-railsみたいな、RailsでJavaScriptライブラリ使うためのgem使うよりも、bowerで管理した方が良さそう。
  • Ruby Tools : Cucumber

    meerkatstreams.com đang phát triển. Xin vui lòng trở lại sau. Chúng tôi xin lỗi vì sự bất tiện này.

    griefworker
    griefworker 2013/04/17
    iPhone版のFacebookやGmailみたいにスライドして表示できるメニューを実装するためのjQueryプラグイン。スクロールバーは強制表示なのかな。
  • Parsley - The ultimate JavaScript form validation library

    Parsley, the ultimate JavaScript form validation library Validating forms frontend have never been so powerful and easy. Get started today v2.9.2 Intuitive DOM API Like no other form validation library, simply write in English your requirements inside your form HTML tags, Parsley will do the rest! No need to write even a single JavaScript line for simple form validation. View example » Dynamic for

    griefworker
    griefworker 2013/03/05
    <input>に対して data-* の形で属性を設定すればデータのバリデーションが簡単に実装できるライブラリ。
  • Account Suspended

    If you are seeing this page, it means that web has been DISABLED for over resource usage (Bandwidth/Disk space/CPU abuse) or Overdue payment Please contact support as soon as possible...

    griefworker
    griefworker 2013/03/05
    ページを下に引っ張ると更新されるiPhone風UIを提供するjQueryプラグイン。
  • Sidr

    SidrThe best jQuery plugin for creating side menus and the easiest way for doing your menu responsive You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too). It uses CSS3 transitions (and fallbacks to $.animate with older browsers) and it supports multiple source types. Get startedLike any other plugin, you must inc

    Sidr
    griefworker
    griefworker 2013/03/02
    スマホアプリでよく見る、メニューボタンをクリックすると横からスライドして表示されるメニューを実装するためのjQueryプラグイン。
  • jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話

    jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome

    jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
    griefworker
    griefworker 2013/01/30
    TypeScriptのコードとコンパイル後のJavaScriptコードをマッピングできたりすると嬉しいんだけど。
  • jQuery Plugins

    This site is a static archive of the old jQuery Plugin Registry. New plugin releases will not be processed. The jQuery Plugin Registry is preserved for historical purposes. Search is still supported. We do not recommend using any versions of plugins from this registry. Please find jQuery plugins on npm.

    griefworker
    griefworker 2013/01/17
    jQuery公式のプラグイン・レジストリ。
  • jQuery公式プラグイン・レジストリが公開。GitHubと連携など、今風の仕組みに惚れ惚れ

    白石 俊平 ニュース jquery 0 Comment 2013年1月17日、jQuery「公式」のプラグイン・レジストリ(プラグインの集積場)が公開されました! URLはこちらになります。 http://plugins.jquery.com/ このプラグイン・レジストリの目的は、従来のプラグインサイトでは解決できなかった、「断片化」と「配布」の問題を解決することだそうです。 「断片化」・・・「jQuery プラグインがWeb上の至る所にあり、探すのが面倒」という、現在の状況 「配布」・・・作成したプラグインを配布するためのサイト作成や宣伝に手間がかかる、従来のプラグインサイトでは登録が面倒だった 新しいプラグイン・レジストリは、GitHubと連携することを前提として、こうした問題をエレガントに解決し、従来のプラグインサイトを完全に置き換えるものです。 開発者にとっては、プラグインを公開

    griefworker
    griefworker 2013/01/17
    jQuery公式のプラグイン・レジストリでプラグインを公開する手順を紹介してる。
  • 大規模JSでのBackbone.js/CoffeeScript について考えてみた - mizchi log

    これ読んでたらr7kamura君にJSのMVCどうするの的な話きかれてたのを思い出したので、自分がBackboneを使う時のパターンをr7kamura君の記事をベースに書きなおしてみた。 > サバクラ両方で動く JavaScript の大規模開発を行うために ― Gist https://gist.github.com/1362110 > client-side javascript - ✘╹◡╹✘ http://r7kamura.hatenablog.com/entry/2012/10/18/023629 以下の様なコードを書いた。かなり冗長だが、複雑なアプリだとこれぐらいの冗長性は必要になる。 (なお概念を伝えるための解説用コードなのでそのままじゃ動かない) Backbone.Model # 名前空間の初期化 App = {} App.View = {} App.Model = {}

    大規模JSでのBackbone.js/CoffeeScript について考えてみた - mizchi log
    griefworker
    griefworker 2012/11/28
    自分もBackboneでビューモデルみたいなの作ってるな。ビューに状態は持たせたくないから。ビュー描写に専念させてる。
  • jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com

    必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通:要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>

    jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
    griefworker
    griefworker 2012/05/21
    jQueryでフォームの値を取得する方法まとめ。よく迷うから助かる。
  • TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」

    TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 1.サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 2.プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 3.プラグインのダウンロード githubのjQue

    TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
    griefworker
    griefworker 2012/02/06
    一番下までスクロールしたらbottomイベントを発生させるjQueryプラグイン。続きの取得は自分で実装する必要あり。
  • [JS]スクリプトを指定したタイミングで読み込ませるスクリプト -Lazy Loading Script

    外部スクリプトファイルを指定したタイミングで読み込ませるjQueryのプラグインを紹介します。 ちょっと前に流行った画像を遅れて読み込ませる「Lazy Load」のスクリプト版という感じです。 jQuery Lazy Loading Script – On Demand Javascript plugin Webrevised [ad#ad-2] Lazy Loading Scriptの特徴 Lazy Loading Scriptの実装 Lazy Loading Scriptの特徴 外部スクリプトファイルを指定したタイミングで即時にロードします。 ファイルが既にロード済みであれば、再びロードはしません。 必要のない時にはスクリプトを読み込まないため、ロード時間を減らします。 AJAXベースのウェブアプリケーションをよりシンプルにできます。 Lazy Loading Scriptの実装 外部

    griefworker
    griefworker 2011/11/11
    外部スクリプトを遅延ロードできるjQueryプラグイン。上手く使えばページの表示を高速化できそう。
  • Web制作をちょっとだけ楽にするjQueryプラグイン 「laquu.js」 | webox blog

    知り合いが便利そうなものを作っていたのでご紹介します。 Web制作時によく使う機能をひとまとめにしたjQueryプラグインです。 読み込むjsのファイルが増えてきたり、その都度追加していくのが面倒だなと感じてきていたのでこういうのは非常に助かりますね。 Laquu.js 個人的によく使う機能 アコーディオン ドロップダウン ブランク XHTMLで非推奨とされているtarget属性の代替となる機能です。 個人的にはJSで実装するなら非推奨でも入れてしまいますが… ちなみにHTML5ではtarget属性は復活しています。 スクローラー ページ内リンクのスムーススクロールを実装する機能です。 スクロール2ビュー スクロールを検知して指定要素を表示/非表示してくれる機能です。 イメージオーバー そのうちプリロードしてくれるようにするそうです。 ツールチップ コナミコマンド ネタ機

    griefworker
    griefworker 2011/09/16
    プラグインを探しまわるの面倒なので、よく使う機能が1つのプラグインにまとまってると確かに助かるかも。