JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
node.jsを使ってjQueryチックにWebサイトをクローリングする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも僕です。 今日は、サーバサイドJavaScript（node.js）でjQueryチックにDOMを操作して、Webサイトをクローリングする方法についてまとめようと思うよ！ 要は、既存のWebサイトから必要な情報を収集してきて、データベースに突っ込もうということ。 これができると何がうれしいかって、簡単にまとめサイトが作れるんだよね。 クローリングする方法は数々あれど、なにゆえサーバサイドJavaScriptのnode.jsを使ってこれをするかというと、「クローリング対象の部分をjQueryのセレクタで指定できる」のが大きいわけです。 みんな、好きだよね！jQuery！とっても便利だよね！jQuery！ 好みにもよるかと思うが、JavaScriptのようなふにゃふにゃした言語をあえて使う理由は、クライアントサイドプログラミングを組むか、JQueryの恩恵を受けるためといっても過言ではあ
jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ | 私的なjQuery他
jQuery Core 1.9 Upgrade Guide | jQuery の「Changes of Note in jQuery 1.9」を読んで、 自分なりにまとめました。 誤訳して間違ったことをまとめてたり、 最新の情報でないかもしれないので 読まれる際はご注意下さい。 （※ページをそのまま訳したわけではないと、思います） jQuery 1.9 では API の削除や 挙動の変更を行っています。 この記事は、前のバージョンから更新した時、 既存のコードに影響がでそうな変更を 並べたものになります。 変更点を全部網羅しているわけではありません。 箇条書きにすると以下のような感じ： 削除された機能 .toggle(function, function) の用法 jQuery.browser() .live()と.die() jQuery.sub() document 以外の要素での A
[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
jQuery公式プラグイン・レジストリが公開。GitHubと連携など、今風の仕組みに惚れ惚れ
白石 俊平 ニュース jquery 0 Comment 2013年1月17日、jQuery「公式」のプラグイン・レジストリ（プラグインの集積場）が公開されました！ URLはこちらになります。 http://plugins.jquery.com/ このプラグイン・レジストリの目的は、従来のプラグインサイトでは解決できなかった、「断片化」と「配布」の問題を解決することだそうです。 「断片化」・・・「jQuery プラグインがWeb上の至る所にあり、探すのが面倒」という、現在の状況 「配布」・・・作成したプラグインを配布するためのサイト作成や宣伝に手間がかかる、従来のプラグインサイトでは登録が面倒だった 新しいプラグイン・レジストリは、GitHubと連携することを前提として、こうした問題をエレガントに解決し、従来のプラグインサイトを完全に置き換えるものです。 開発者にとっては、プラグインを公開
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
[JS]実装も超シンプル、高さや幅が異なるエレメントを揃えるシンプルなスクリプト -equalize.js
エレメントの高さ（height）、幅（width）だけでなく、outerHeight, innerHeight, outerWidth, innerWidthのサイズを揃えるjQueryのプラグインを紹介します。 デモ：幅 equalize.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="js/equalize.js" type="text/javascript"></script> Step 2: HTML HTMLは適用する要素を内包するラッパーを用意します。 下記はデモの高さを揃える方のHTMLです。 <div id="heigh
Webデザイナーのためのjquery入門2（前編）
82 views jQueryの社内勉強会用スライドです。だいたい1時間で終われるように、前編・後編に分けています。 後編は6月以降で公開を予定しています。 More… jQueryの社内勉強会用スライドです。だいたい1時間で終われるように、前編・後編に分けています。 後編は6月以降で公開を予定しています。 このスライドを作るにあたって、書籍「WebデザイナーのためのjQuery入門」をかなり参考にしています。 Webデザイナーのためのjquery入門2（前編） — Presentation Transcript Webデザイナーのための jQuery入門 -覚醒編（前編） -jQueryのコードを自分で考えて書けるようになろう！ 目標 日々の業務にjQueryを取り入れて、 自分で何かを作れるようになる。 大まかな内容１. 何かを取ってくる ２. それに何かをする３. まとめ 1
[JS]jQueryのプラグイン33+1選 -2012年4月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Wookmark コンテンツをレンガ状に配置するだけのシンプルなスクリプト。 jmpress.js スライドをダイナミックなアニメー
たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」:phpspot開発日誌
Hammer.js たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」。 タップ、ダブルタップ、ホールド、ドラッグ、トランスフォームといった処理を一手に扱えるようになるライブラリです スマホだけでなく、かなりのブラウザにも対応 使い方は、まずHammerオブジェクトのインスタンスを初期化します。 あとはイベントハンドラを ontap といった形で記述していくだけなので、面倒な事は何一つ考えないでいいです 若干動きが良くない部分もあるみたいですが、今後に期待したいですね 関連エントリ スマホのホーム画面っぽいものを作れるjQueryプラグイン「Promptumenu」 スマホサイト作成のフレームワーク「iUI」が新しくなっている件 PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 ス
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル:phpspot開発日誌
Animated Scroll to Top ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル。 ページの上の方にいる場合は必要ないかもしれないボタン。下に行くにつれ表示されることで上に戻れることが分かりやすく、上にいるときは邪魔にならないという使いやすいボタンが作れますね。 jQueryにて実装するチュートリアルとなっており、サンプルのダウンロードも出来るのでいざ実装する際に参考にできそう。 デモページ 最近WEBを巡回していると散見するUIですね。 関連エントリ 指定位置までスクロールするとヒントを表示させられる便利jQueryプラグイン「SlideNote」 スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」
【ハウツー】HTML5 Canvas×jQuery、グレースケールの画像を自動生成する方法 (1) 自動生成プログラムの作成手順 | エンタープライズ | マイコミジャーナル
HTML5 Canvasでグレースケール画像を自動生成 WebDesignerWallにて、HTML5 CanvasとjQueryでグレースケールを実現するチュートリアルが公開されている。画像にマウスを乗せると、グレースケールの画像がカラーになるというものだ。 HTML5 & jQuery Grayscale Demoより。グレースケールの画像にマウスを乗せると、カラーで表示される これまでこのようなユーザインタフェースを実現するには「カラーの画像」と「グレースケールの画像」の2種類を用意する必要があった。このチュートリアルではHTML5のCanvasを活用し、オリジナルの画像からグレースケールの画像を自動生成する方法を紹介している。ポートフォリオやWebアルバムなど、さまざまな場面で活用できそうだ。 本稿では、その方法を簡単に紹介していこう。 使い方 グレースケールの画像を自動生成したい
[JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2
jQueryなどの他のスクリプトに依存せずにモーダルウインドウを実装する高性能で超軽量（5KB）のスクリプトを紹介します。 JavaScript Modal Windows – TinyBox2 デモページ [ad#ad-2] TinyBox2のデモ デモはシンプルなモーダルウインドウから、アニメーション付き、AJAX対応、iFrame対応、画像対応などがあり、どれも実用的なものとなっています。 ウインドウをクローズする際はクローズボタン、もしくはウインドウ外のクリック、「ESC」キーの操作に対応しています。 デモページ：No Animation, No Close Button, Auto Width/Height, Custom Styling アニメーション：無し、クローズボタン：無し、幅と高さ：自動、カスタムスタイリング
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;
iPhone向けWebサイトの制作等に役立ちそうな情報まとめ - かちびと.net
iPhone向けのWebサイトを制作する 際に役立ちそうな情報のまとめです。 情報が多くて混乱し始めたので、個人 的なメモ。iPhone関連のWeb制作情 報は基本的に載せています。アプリ 制作とかそっち系はたいして無いの でご了承下さい。 個人的にグッと来たiPhone / iPad周りの情報をメモ的にまとめておきます。素材とかフレームワークとかTipsとかそういうの中心で、SDKとかObjective-C的な情報は無いです。順不同。 フレームワークとかスクリプト WebアプリとかiPhoneサイト向けのフレームワークとか。 jQuery Mobile スマートフォン向けのjQuery公式ライブラリ。リリースが待ち遠しいですね。 jQuery Mobile Sencha 以前触ってみたので記事にしました。HTML5とjsのみのWebアプリ向けフレームワーク。 Sencha Titaniu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
Loading...
jQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 - かちびと. net
5509.me