フルAjaxで動くRailsアプリを作ってみたよ。 | Ginpen.com
scaffoldを使うとCRUDが揃った「土台」を一発で作れるわけですが、それをアレコレして全ての操作をAjax化してみたので、手順をまとめました。 記事を読むのがだりぃって方はソースコードをGitHubで公開してるので、そちらをご覧ください。 RubyもRailsもあんまり触った事がないので、識者によるツッコミ歓迎します。 (｀・ω・´) 概要 やること indexの画面だけでCRUD、つまり新規作成 (Create)、表示 (Read)、編集 (Update)、削除 (Delete)を行えるよう、scaffoldで作成したファイルをいじります。 結論 form_for()にremote: trueを与えるだけで、とりあえずAjax化します。あとはサーバー側のレスポンスの内容を整えて、クライアント側で適切に処理してやればOKです。 作業 下準備（scaffoldとか） indexに編集フ
jQuery 1.7の更新内容をまとめたよ。 | Ginpen.com
jQuery 1.7が公開されたので、早速1.6.xからの更新内容をまとめてみました。 jQuery: » jQuery 1.7 Released （リリース記事） Version 1.7 – jQuery API （公式ドキュメント、1.7で変更があったもののみ） 1.7 all tickets – jQuery Core – Bug Tracker （1.7の全チケット） リリース記事の翻訳じゃないです。 主な変更点 個人的に気になったものをピックアップしてみますよ。 既存の .bind()や .live()等に置き換わる .on(), .off()を追加 .bind(), .delegate(), .live()が統合されました。（これらも引き続き使用できます。） →詳細後述します。 toggleと.stop()の連携を改善 toggle系と組み合わせた際におかしくなってしまうのが改
jQuery.is*()シリーズを、どれだけご存知ですか。 | Ginpen.com
jQueryを使うと要素を探したりスタイルを変更したりってのが簡単なんですが、それ以外に「地味に便利」な機能がたくさんありますよね。 その中から、変数の中身の種類を判定するメソッドのシリーズを紹介します。 jQuery.is – Search Results – jQuery API ちなみに .is()というものもありますが、今回は関係ありません。 jQuery.isFunction() 関数であればtrueを返します。 個人的には一番頻繁に使います。使いどころとしては、オプションでコールバック関数を受け付ける場面でしょう。与えられたものが本当に関数であれば実行する、変なものが渡されたときは無視する、というように使えます。 JavaScriptの型の扱いはゆるいと良く言われますが、関数じゃないものに括弧()をくっつけても実行できなくてエラーになってしまいますので。 jQuery.isEm
とてもとても簡単な、jQueryプラグインのつくりかた。 | Ginpen.com
こんなに短いコードですが、jQueryプラグインを作る上で忘れられない、5つのポイントがあります。 $がjQueryである事を期待しない。 jQuery.fnにメソッドを定義する。 実行コンテキストthisはjQueryオブジェクト。 .each()を使って処理する。 thisをreturnする。 他のプラグインと併用し、$がjQueryを指していない場合も考慮して、直接$は使いません。全体を無名関数にして、その引数としてjQueryを$という名前で受け取るようにしましょう。 jQuery.fnのプロパティとして関数を設置しておくと、それが$(elem)のメソッドとして呼び出せるようになります。またその際の「実行コンテキスト」つまりthisは、当然ですがメソッドを呼び出しているjQueryオブジェクトになります。このときに複数の要素を内包している場合がある（$('.hoge')を想像してく
jQuery.gpObserveTextでリアルタイムに入力値を監視できます。 | Ginpen.com
概要 テキストの入力値変更を監視します。JavaScriptが提供するchangeイベントはフォーカスが外れたタイミングで発火しますが、jQuery.gpObserveTextを使うとリアルタイムでtextchangeイベントが発火するようになります。 ダウンロード jQuery.gpObserveText-1.0.zip [53KB] 基本的な使い方 テキストエリアに対して.gpObserveText()を実行すると監視を開始します。その後textchangeイベントを拾ってください。 $(elem) .gpObserveText() .bind("textchange", listener); デモ デモ1 : 基本的なもの Demo 1 テキストエリアに入力中の文字数を表示します。 値はリアルタイムで更新されます。 リファレンス .gpObserveText([listener])
jQuery.gpHatebuCounterなら超簡単にはてブ数を表示できます。 | Ginpen.com
概要 リンクにはてブ数を表示します。 このサイトの「最近の投稿」などでも使用しています。最初はWordPressのコードを書き換えていたのですが、こちらの方が簡単です。 ダウンロード jQuery.gpHatebuCounter-1.0.zip [57KB] 基本的な使い方 リンクに対して.gpHatebuCounter()を実行するだけです。 $(elem).gpHatebuCounter(); またWordPressの「最近の投稿」(.widget_recent_entries）に特化したjQuery.gpHatebuCounter for WordPressも用意しました。一緒にスクリプトを読み込んでおくだけで、スクリプトを書かなくても自動で「最近の投稿」に適用します。 <script src="jquery-0.0.0.min.js"></script> <script src="
jQuery.gpMsgなら簡単にメッセージを表示できます。 | Ginpen.com
概要 お知らせ的なものを簡単に表示するプラグインです。要素を作る手間すら不要です。 ダウンロード jQuery.gpMsg-1.0.zip [53KB] 基本的な使い方 jQuery.gpMsg()に対し任意の文字列を与えて下さい。 $.gpMsg("Your message."); デモ デモ1 : 基本的なもの Demo 1 ボタンを押すとメッセージを表示します。 連打しても重ならずに表示できます。 メッセージは一定時間経過で消えます。 ×ボタンを押しても消せます。 リファレンス $.gpMsg(message, [settings]) message … {String} 表示する文字列。 settings … {Object} 設定。以下のキーと値を持てる: classes … {String} メッセージ要素に追加するクラス名。空白で区切って複数指定できる。 direction
jQuery.gpTileを使うと、タイル状の背景画像ぴったりのサイズになります。 | Ginpen.com
概要 背景画像（background-image）のサイズの等倍になるよう要素のサイズを調整します。途中で切れると妙に見えるようなデザインで効果を発揮します。 ダウンロード jQuery.gpTile-1.0.zip [90KB] 基本的な使い方 .gpTile()を実行すると背景画像のサイズを取得し、背景画像をちょうど表示しきるだけのサイズに変更します。対象要素の現在サイズは下回りません。 $(elem).gpTile(); 縦方向だけに適応する場合は、 .gpTile()にオプションを与えます。 $(elem).gpTile({ direction: 'y' }); デモ デモ1 : 基本的なもの Demo 1 背景画像がぴったり表示されるようになります。 リファレンス .gpTile([settings]) settings … {Object} 設定。以下のキーと値を持てる: di
jQuery.gpFaviconでリンクにアイコンを付けられます。 | Ginpen.com
概要 リンクの内容からファビコン (Favicon)のURLを自動判断し、画像を挿入します。 ダウンロード jQuery.gpFavicon-1.0.zip [57KB] 基本的な使い方 .gpFavicon()を実行するとその中からリンクを探してURLを解釈し、ファビコンを表示させます。画面全てのリンクを対象にする場合は$(document)に対して実行します。 $(document).gpFavicon(); $(elem).gpFavicon(); また個別のリンクに対して .gpFavicon()を実行すると、そのリンクだけを対象にファビコンを表示します。 $(link).gpFavicon(); デモ デモ1 : 基本的なもの Demo 1 各リンクにファビコンを表示させます。 ファビコンが見つからない場合はデフォルトのアイコンを表示します。 自身のサイトにはファビコンは表示しま
jQuery.gpInsideは、要素を画面内に納めるjQueryプラグインです。 | Ginpen.com
概要 対象を画面に収まる位置へ移動させます。ダイアログやコンテキストメニューなどを表示する際の座標計算を省略できます。 ダウンロード jQuery.gpInside-1.0.zip [127KB] 基本的な使い方 .gpInside()を実行すると、画面のサイズや要素の位置を取得し、はみ出していた場合は収まる位置へ移動させます。 $(elem).gpInside(); デモ デモ1 : 基本的なもの Demo 1 画面をクリックすると、クリックした右下にブロックが表示されます。 ブロックがはみ出す場合は座標が調整されます。 TypeでCenterをすると、画面の中央に表示されます。 TypeでContextmenuをするとクリックした右下に表示されますが、はみ出す場合は左や上に表示されます。 デモ2 :コンテキストメニューとダイアログ Demo 2 右クリック等で表示されるコンテキストメニ
jQuery.gpFloatは、position:fixedを縦横の片方にだけ設定する、という感じのプラグインです。 | Ginpen.com
概要 例えば横方向はposition:static、縦方向はposition:fixedのように見える動きを提供します。 ちょっと言葉だけでは分かりづらいので、デモをご覧ください。 ダウンロード jQuery.gpFloat-1.0.zip [57KB] 基本的な使い方 .gpFloatX()で横方向に、 .gpFloatY()で縦方向にのみスクロールするようになります。 $(elem).gpFloatX(); $(elem).gpFloatY(); デモ デモ1 : 基本的なもの Demo 1 上部のメジャーは、画面を縦にスクロールしても移動しませんが、横にスクロールした場合は一緒にスクロールします。 左部のメジャーも同様です。 下部のフッターは座標計算時にスクロール量を確認し、もし要素ブロックの右端までスクロールしていたら、それ以上はスクロールしません。 デモ2 : バルーン Demo
CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。 | Ginpen.com
もちろん、そうでない方にも親しんで頂きたいと思います。 最近この記事が話題のようです。 CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました この記事中にjQuery 1.6/1.6.1での .attr()仕様変更がらみの話で、うちの「jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。」の記事へリンクされていました。 ただこの記事はちょっと中身が細かくて、ぱぱっと理解するのは難しいんじゃないかなあと思って、この記事を書いています。どこまでご理解頂けるかはわかりませんが、あっちの記事よりは読みやすいはず。 今さら感もないではないですが……。(´ω｀) jQuery 1.6/1.6.1で何があったの？ .attr()にまとめていた処理を .attr()と .prop()に分割した そしたら今まで動いていたも
自分のツイートを客観的に見られるツールを作りました。 | Ginpen.com
はい、作りました。名前どうしようかなあと思ったんですが、なんかもういいやこれで……。 外面さん https://ginpen.com/lab/sotodura/ 指定ユーザーの発言のうち、誰かに宛てたもの（in_reply_toがあるもの）を除いて表示するツールです。主な用途としては、 自分の発言が他人から見たときにどう表示されているのか？ あるユーザーをフォローした場合、自分のタイムラインにどう現れるのか？ を確認するのに良いんじゃないかなあと思ってます。よければ使ってみてくださいませ。 さてこの記事では、作るにあたっての技術的なところを少々つぶやいてみます。 GET search APIを利用 twitterのGET searchというAPIを利用しています。 GET search | Twitter Developers JavaScriptを用いてこれをJSONPで取得して、解析、
Debianに最新のRuby on Railsを入れようとしたらえらく手間だった件について。 | Ginpen.com
やあ良い子の諸君。今日も元気にしてるかな？ ギンペイです。僕は暑くて元気がありません。 ちょろっとウェブアプリを作りたくて、Ruby on Railsに手を出してみようかなと思ってやってみたのですが、これがなかなかどうして、うまくいきませんでした。aptitude install railsするとシェル版のrailsがインストールされるというのはよくわからない……。 ともあれ、試行錯誤の結果うまく動くようになったみたいなので、まとめておきます。 前提 環境は最小構成でインストールした直後のDebian (lenny)です。 せっかくなので最新のものをインストールしましょう。ソースコードを各サイトから持ってきます。（後の手順でwgetします。） Ruby … 「最新の安定版」の”tar.gz”版 RubyGems … 一番上の”rubygems-*.*.*.tgz” node.js … “n
IE7, IE8, IE9とかのダウンロードページまとめ。 | Ginpen.com
全国のWeb屋さんは好むと好まざるとに関わらず、IEに対応するためにあれこれ環境を揃えたりしておられると思います。で、実際に環境をを作ろうとしてみたら各種IEのダウンロード先がバラバラでどこからダウンロードしていいかわからない……という経験もあるのではないでしょうか。 なんかもうそういうのが面倒なので、fuckin’ IEシリーズのダウンロード先をまとめておきます。 IE 7 : ダウンロード詳細 Windows XP 向け Windows Internet Explorer 7 IE 8 : Internet Explorer 8 のダウンロード – Microsoft Windows IE 9 : Internet Explorer 9 の各言語のダウンロード – Microsoft Windows IE 9はWindows Vista/7専用です。XPでも使いたい方はこちらの記事をど
「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 | Ginpen.com
元ネタはこちら： 少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス 細部にこだわったWebデザインって？ ひと手間加えるだけでぐっと良くなる、という事で以下を提案しておられます。 グラデーションを加える 1pxのラインを加える シャドウを加える ノイズを加える レタープレス効果 元の記事の実践編では、Photoshopを使った画像加工で「実践」をしているのですが、同じ（ような）事をCSS3でやってみました。 デモ 先に完成品です。WebkitとFirefoxのみ。（IEでは、新しいものでも背景がちゃんと出ません。） 「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 – jsdo.it – share JavaScript,
FAQページで使えそうな、dtクリックでdd展開するスクリプトを書いてみた。 | Ginpen.com
@Stocker_jp @weboxes ありがとうございます。dtクリックでdd展開するアニメーション付きのjQueryのコード欲しいですｗFri Aug 05 14:53:54 via YoruFukurouウェブル soraiy さっくり書いてみました。 デモ 例によってjsdo.itです。 dtクリックでdd展開するアニメーション付きのjQueryのコード – jsdo.it – share JavaScript, HTML5 and CSS 解説 まず dt要素をクリックした際に処理 を行うようにします。今回は親のdl要素の方にクラス名を付ける事にしました。セレクタについては、今回は解説しません。
背景に「すりガラス」スタイルはいかが？ | Ginpen.com
このブログのデザインは私自身で作ったものなのですが、最近お褒め頂く事が多くて、嬉し恥ずかしといったところです。 特に「背景が面白い」と言う感想を幾つか頂戴しましたので、ちょいと仕組みを紹介してみたいと思います。 すりガラスみたいに 一応「すりガラス」スタイルと呼んでみています。 普通の写真やイラストなどをそのまま背景画像として配置しているのですが、文字などの部分は、すりガラスを通して覗いているようにぼやけて見えるようになります。そうすれば、主張の強かった画像の上に文字を置いても、問題なく読めますよね。 画像は二枚 すりガラス越しのような画像は、何の事はありません、そういう画像を用意しておきます。別にCSSでどうこうというわけではありません。 元の画像 加工済みの画像 作り方は人それぞれと思いますが、今回は主に以下二点の加工を行っています。 白っぽく ぼかし 白っぽくするだけなら領域の背景色
jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。 | Ginpen.com
先日jQuery 1.6がリリースされましたが、案の定.attr()関連で議論になったようで、一週間後に後方互換を保つ更新が行われました。 jQuery: » jQuery 1.6.1 Released 1.6の更新内容は先日の記事をご覧頂ければ。 jQuery1.6の更新内容をまとめたよ。 | Ginpen.com 更新内容 jQuery 1.6では.prop()メソッドの追加と.attr()メソッドの変更があり、これが「属性」と「プロパティ」の差、及び関係性についての議論を引き起こしました。結果として、1.6.1では後方互換を保つよう修正される事になりました。 つまり1.5.2から（1.6を飛ばして）1.6.1へバージョンアップする際は、.attr()関連のコードは変更が不要です。 なお.date()の方は1.6のリリースノートの通りの動作のままである事に注意してください。 前回(1.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでheight:100%を使う方法について。 | Ginpen.com