第8回「最近注目を集めているJavaScript/jQueryのツール・テクニック45」 2010年04月09日 今回は、JavaScriptやjQueryを使ったテクニックやツールなどを紹介しよう。これまで同様の記事を何度か掲載してきたが、今回は海外で多くの注目を浴びたものを厳選している。フォームやボタン、カレンダー、ナビゲーション、デバッグ関連などさまざまな記事を紹介するので、ぜひチェックしてほしい。また、後半ではJavaScriptに関するリファレンスサイトなども紹介している。 余談だが、Smashing Magazineのページ上部にネットワークタブがあることをご存知だろうか。こちらでも記事を紹介しているので、ぜひご覧いただきたい。 翻訳元サイト:Smashing Magazine http://www.smashingmagazine.com/ 原文:45 Fresh Usefu
Snippet jQuery Syntax Highlighter 多数の言語に対応して色合いも選べるシンタックスハイライト用jQueryプラグイン。 メジャーな以下の15の言語は標準サポートしていて、他にも多数のフォーマットに対応できます。 このプラグインのユニークなところは、39のカラースキームから選べるという部分。 実に多数の色合いから好きなものを選べるので、様々なタイプのデザインのマッチさせることが出来るでしょう。 実装は必要なライブラリを読み込んで、$(element).snippet("pascal") といった感じでハイライト言語を引数で渡してあげるだけです。 実装もかなり簡単です。 .snippet("php",{style:"navy",showNum:false}); styleで色合いを簡単に指定。行番号のあり・なしも指定可能です。 技術系のサイトを運営している人は覚
I love the simplicity of using (and more important re-using) jQuery plugins. So I decided to release a plugin that came from my personal need - Feature List. This jQuery plugin enables simple and easy creation of an interactive "Featured Items" widget. You can see the demo at this page, and you can download the complete source code with examples from here. What’s So Great About this Plugin? Slick
GitHub - kyanny/html5_file_api_ajax_upload_sample: HTML5 file API + ajax file upload sample HTML5 の file API というのが面白そうなのでちょっといじってみた。 デモを動かすには Plack と JSON と Path::Class が必要です。このブログ読んでる人ならどれも ready for use ですよね。もしまだのひとは cpan -i Plack JSON Path::Class でよろしく。 git clone して plackup して Firefox 3.6.x 以降で開いてください。 複数ファイルをドロップしたときになんかうまく動いてない気がするとか、 app.psgi の書き方がだいぶいい加減とか、微妙なところはたくさんあるけどとりあえず動くところまでいけたので公開
現在W3Cで仕様策定が進められているFile APIを使うと、JavaScriptからローカルファイルの情報や内容にアクセス出来るようになります。 Firefoxでは3.0時代から似たような機能が実装されていたようですが*1、今回やや仕様を変更した上で標準化されます。 まだワーキングドラフトの段階ですが、Firefox 3.6 RC1*2に既にほとんどのAPIが実装されていますので、今すぐに使ってみることができます。 そこで、試しにこんなサンプルを作ってみました。Firefox 3.6で以下のページにアクセスしてみてください。 JavaScriptでネガポジ反転 ファイル選択欄でビットマップファイル(.bmp)を選択、あるいはブラウザにドラッグアンドドロップすると、その画像をネガポジ反転(階調の反転)して表示します。複数選択も可です。*3 *4 ↓実行例 ファイル加工の際にサーバと一切通信
In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop […] In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover. The full image will slide in from the bottom once a th
Did you like my previous CSS tutorial on how to create gradient text effects? I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple
slideViewer (a jQuery image slider built on a single unordered list) 1.2 Download slideViewer 1.2 (last updated july 9 2010) What's this? slideViewer is a lightweight (3.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images: <div id="mygalleryinpost10.12.2006" class="svw"> <ul> <li><img src="picts/10.jpg" alt="my d
旧ホームページドメイン(designwork-s.com)を利用し、当ブログの名称を利用し、文中のリンクからオンラインカジノの紹介サイトへ誘導するWEBサイトが発見されました。当該WEBサイトは、当ブログとなんら関わりのない第三者の手によって作成されたもので、当ブログとは一切関係ございません。 旧ドメインについては、現在、管理・運用を行っておらず、当ブログの運営元とは無関係の第三者が取得・管理しており、無関係となります。 そのため、旧ドメインへアクセスすることにより、何らかの被害等が生じても、一切責任を負いません。 現在のDesignWorksホームページドメインはdesignwork-s.netとなります。 ご注意のほど、どうぞよろしくお願い致します。
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ
Webベースの日本語入力サービスです。海外からでもブラウザさえあれば日本語を入力す ることができます。 特別なソフトは必要ありません。 使い方 お使いのコンピュータの日本語入力を切りかえて直接入力にします。 Alt-o (Ctrl-9) で Ajax IMEモードに変更します。(ボタンで切り替えるかえることもできます) 適当な文をローマ字で入力します。 spaceを押して漢字に変換します。続けて押すことで候補選択を行います。 returnを押す、もしくは次の入力を開始することで入力を確定します。 F9で強制的にカタカナに、F8で強制的にアルファベットに変換します。 再度 Alt-o (Ctrl-9)で直接入力に戻ります 海外旅行先や留学先, 海外のネットカフェなど日本語入力環境が 無いパソコンからご使用ください。 Firefox と Internet Explorer で動作確認をしていま
WebSocketを体験してみたいのと、サーバサイドJSを試したいのと、さらにはmac版のChromeをインストールしてみたという条件が重なり、これはもう深夜だけどnode.websocket.jsを試してみるしかないな、という状況に追い込まれました。 構成 最近あたらしく調達したばかりのmacbook air にvirtualboxを入れています。その上でCentOSが動いています。 macbookをクライアントに、CentOS側をサーバとみたてて話を進めていきます。 ちなみに、virtualboxではアダプタ1をNATに、アダプタ2をホストオンリーアダプタ(IPはstaticに設定)としているので、CentOSからは外にも抜けられるしmacbook側からも自由にアクセスできます。ごきげんな環境です。 Node.JSのインストール まずは土台となるnode.jsが必要。ソースをダウンロー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く