ブラウザ上でPDFを表示するJSライブラリ「PDF.js」:phpspot開発日誌
PDF.js PDF.jsを使えば、PDFをそれっぽいインタフェースとともにブラウザ上で表示してしまえます。 なんでもJavaScriptでやりゃいいってもんじゃないよ、という気もしますが、面白かったのでご紹介です。 PDFを一貫して同じインタフェースで表示させたいというようなニーズにマッチしそうですが、動かないブラウザもあるみたい。 世界は広いということを認識させられるライブラリですね 関連エントリ HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ド派手なビジュアリゼーションを実現できるJSライブラリ「Toxiclibs.js」 ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」 OpenOffice等の文書をWEBで表示するJSライブラリ「WebODF」
Backbone.js と比較しながら Knockout.js を試してみた - present
Backbone.js を試したから Knockout.js にも挑戦 JavaScript のクライアント MVC フレームワークは Backbone.js でいこうと思っていたんですが、Knockout.js が Ver 2.0 でかなり機能追加されて、ちょっと心変わり。もともと Knockout.js のデータバインディング機能に興味を持っていたところに、テンプレート機能が追加されて、試してみたくなりました。 念のため説明すると、Knockout.js は、.NET 開発者にはお馴染みの、データバインディングや MVVM パターンが特徴のフレームワークです。 Knockout : Home ちなみに、Backbone.js の記事はこちら。 作って覚える Backbone.js - present 作って覚える Backbone.js (2) Router 編 - present T
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
JavaScriptでの日付の処理が超便利になる「Moment.js」:phpspot開発日誌
Moment.js - A lightweight javascript date library JavaScriptでの日付の処理が超便利になる「Moment.js」 以下にできることをまとめてみます 文字列からパースして日付オブジェクトを生成 UNIXのタイムスタンプから日付オブジェクトを生成 「Dec 25, 1995」みたいな文字列から日付オブジェクトを生成 日付オブジェクトに時間を簡単に を加算・減算 指定日時からの経過時間を取得 オブジェクトをベースにフォーマットして出力する moment(date).format("dddd, MMMM Do YYYY, h:mm:ss a"); phpにもdateという関数やstrtotimeという関数があったりしますが、そういう便利機能をJSでも使うことが出来るようなものです。 日付をヘビーに使うようなプロダクトで使えそうですね。 サイ
Web Creative Park
このサイトは? JavaScriptやjQuery、jQuery Mobileなどのリファレンスを提供するサイトです。 現在総意製作中の為、情報量は少ないですが、日々追加されていっています。
ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方をざっくりと - かちびと.net
個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき
CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのようなライブラリに依存しないのも素敵ですね。 地味にいいかも。CSSPrefixerみたいにプレフィックスを付けてくれるWebサービスはいくつか存在しますが、こういうのがあるのは多くの人が面倒だと思っているからですしね。これを、jsで付けようぜ、というのがcssFx.jsです。
実装が簡単で、フォームの使い勝手を向上させるJS 3種
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス の、CSSんところにちゃっかり、CSS HappyLife ZERO が載ってて嬉しい＞＜ さて、今回はフォームです。 お問合わせフォームとか資料請求フォームとか、ウェブサイトには結構な確率で何らかのフォームが有るかと思います。 このフォームの使い勝手の良し悪しが、とても重要なのは言うまでも有りません。 でもまぁ、ビミョーなフォームが多いですよね。 本気でやり出すと、サーバーサイドに手を加えたりして云々だと大変なので、コストがかかるとかで出来ない場合も有るかも知れません。 しかし、フロントエンドで出来ることも有るので、フォームを実装する際に何事もなかったかのように極々自然と使い勝手が良くなる（だろう）機能を盛り込んだらステキですよね。きっと。 しれっとコーダーが、フォームに今回紹介する機能を実装しておけば「おー！
JavaScriptの”this”をめぐる冒険 |
JavaScriptの"this"って難しいですよね。理解しないまま使ってると、思わぬところでグローバルオブジェクトを指していたり、そもそもvarでプライベートな変数にすべきところにもthisを使っていたり…。私もthisには散々悩まされてきたので、そろそろ完璧に理解しようと思い、以下の記事をまとめてみました。間違いを見つけたら指摘して頂けるとありがたいです。なお、文中の引用文章は読みやすさを考慮して適宜改行、強調を行っています。 thisとは何か。 まずは仕様書を見てみましょう。 ECMA-262 3rd 11.1.1 The this Keyword The this keyword evaluates to the this value of the execution context. ECMA-262 5th 11.1.1 The this Keyword The this k
The Sexy Curls jQuery Plugin by Elliott Kember
The Sexy Curls jQuery Plugin! is an open-source jQuery plugin by Elliott Kember which lets you share in the beauty of the page fold. You want a demo page? You're looking at it. Go drag the fold → The source code is available at GitHub. The plugin now works in IE7. You can also now set it to curl automatically. Read the full story about this plugin at Carsonified Installation: First, make sure
100 jQuery Plugins for Image Galleries with Source Files | Stunning Mesh
Stunningmesh Blog about IT, Design, Development, SEO, Social Media, PPC, WordPress and a lot more. You'll also find a lot of Tutorials about Photoshop, Illustrator, 3D Studio Max etc. For jQuery lovers we have collected some Image Galleries with source files, you can modify these files very easily and make animation of your own desire (many are free but under license conditions). As you know jQuer
個人的に気に入ってる10のLightbox系jQueryプラグイン及び、その特徴まとめ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 個人的に気に入ってよく使っている、又は いつか役に立ちそう、いずれ使いたい的な Lightbox風に拡大実装出来るjQueryプラグ インのまとめです。使うときにいちいち引っ 張り出しているのが面倒なのでまとめにして ついでにシェアしようと思って記事にします。 オーソドックスなものから、やや特徴的なもの、Twitterで「こんなのない？」って聞かれて探したものなど10個厳選です。特徴も一緒にメモしておきます。 なお、画像を使うjQueryプラグインにご興味が有るようでしたら、以前書いた画像を使ったいろいろなjQueryプラグイン224個まとめも参考にして頂けるかと思います。 colorbox 一番よく使っているかもしれません。MITライセンスで、グループ化⇒スライド
Best jQuery Plugins of 2010
Resources Best jQuery Plugins of 2010 Henry JonesDecember 2, 201027 Comments011.2k For our “Best of 2010” series we’ve already shown your our picks for best free WordPress themes and free fonts. So for this week the focus in on jQuery. This javascript framework continued to grow in popularity during 2010, which meant an abundance of plugins being released. This made it difficult to choose our favo
簡単！本をめくるような表現を実現するjQueryプラグイン「Viewbook」
twitter facebook hatena google pocket これは簡単に導入できてよさげなプラグインです。 本をめくるような表現をさくっと導入できるViewbook - jQuery Pluginを紹介します。 また、オプションも色々あるので、オリジナルなコンテンツになりそうです。 sponsors 使用方法 Viewbook - jQuery Pluginからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.4.3.min.js"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script src="jquery.viewbook.1.0.0.js" type="text/javascript
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
積極的に取り入れたい9つのCSS3（+jQuery）テクニック
CSS3（+jQuery）を使った、ちょっといいかも！と思うエフェクトを集めてみました。 まだまだ非対応ブラウザが多い CSS3 ですが、できるだけ積極的に使ってみたいなーとも思ってます。 まずはいろいろ試してみることからはじめてみましょう！ CSS3 の登場で、いろんな CSS のトリックを使ったエフェクトが考えられてます。まだまだ CSS3 に非対応のブラウザも多いので、全てを CSS3 で表現する訳にはいかないのが現状ですが、私的には積極的にどんどん取り入れていきたいなーとも思ってます。 海外ブログなどで、色んな CSS3 を使った Tips が紹介されているので、その中からいくつかご紹介します。どれもサンプルを作って試してみたものばかりです。以下の環境で動作確認もしています。 Mac : firefox、Safari、Chrome Win : firefox、IE8、Safari、
WebSocketで目指せ“リアルタイムWeb”！第1回 node.jsの衝撃とWebSocketが拓く未来 - ＠IT
ご挨拶 こんにちは、ロンドンのNew Bambooという会社でWebエンジニアとして働いている@makoto_inoueです。ここのところ、PusherというWebSocketのクラウドサービスの開発に関わっています。今回から3回に渡ってWebSocketに関する短期連載を担当させていただきます。 私を含めたNew Bambooの面々（我々は自分たちのことをBambinoと呼んでいます）がWebSocketになぜ興味を持ったかということからはじまり、実際にクラウドサービスを始めるまでにいたったストーリーをお話ししたいと思います。そのストーリーを通じて、WebSocketが切り開く「リアルタイムWeb」な世界への可能性や技術的課題を皆さんと共有できればと思っています。
Show Markup in CSS Comments | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Let’s say you are creating a CSS file for a modular bit of a webpage. Perhaps you are the type that separates your CSS files into bits like header.css, sidebar.css, footer.css, etc. I just ran across an idea I thought was rather clever where you include the basic markup you will be styling as a com
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/06/jquery-forms.html
Contact Support