pixivサイトリニューアルの軌跡 長寿サービスの刷新において大切なこと
2018年12月6日、株式会社リンクアンドモチベーションのイベントスペースにて、エンジニア向けの勉強会に特化した書き起こしメディア「ログミーTech」が主催するイベント「ログミーTech Live #2」が開催されました。第2回となる今回のテーマは「レガシーシステムのリニューアル」。長期間運用され、設計が古くなってしまった「レガシーシステム」のリニューアルを行った3社が一堂に会し、システムリニューアルにおける知見と新システムへの移行について語ります。プレゼンテーション「11歳のpixivが迎えた3度のリニューアル 」に登場したのは、ピクシブ株式会社UX/UIエンジニアの渡邉拓巳氏。過去2回のサイトリニューアル失敗を経験して学んだ知見と、3度目のリニューアルにおいて大切にしたある方針について明かしました。講演資料はこちら 11歳のpixivが迎えた3度のリニューアル 渡邉拓巳氏（以下、渡邉）
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
jQuery→JavaScript書き換え一覧表 - Qiita
<ul> <li id="first">テキストテキストテキスト</li> <li id="second">テキストテキストテキスト</li> <li id="third">テキストテキストテキスト</li> <li id="fourth">テキストテキストテキスト</li> </ul> <ul> <li class="first">テキスト<strong>テキスト</strong>テキスト</li> <li class="second">テキスト<em>テキスト</em>テキスト</li> <li class="third">テキスト<span>テキスト</span>テキスト</li> <li class="fourth">テキストテキストテキスト</li> </ul> <ul> <li lang="en">テキストテキストテキスト</li> <li></li> <li><span>テキ
.load()したHTMLに命令を効かせる - jQuery syntax
.load()は他のJavaScriptと同様HTMLやCSSが読み込まれた後に実行されるため、読み込まれたHTMLにはスクリプトが効きません。具体的に言うとロールオーバー処理などを行っている場合は、読み込んだHTMLだけ効かないということがあります。 そういうときは関数を使いましょう $(document).ready(function(){ $("#sample").load("../sample/index.html #load", function() { //ここに読み込まれた後実行したい命令を書きます }); });こうすると「読み込みが完了したら中に書かれた命令をする」という事が可能です。ここで改めて必要な処理をかけてやりましょう。二重で処理がかかると困るものにだけ注意してください。 何度も同じ処理が必要な場合は関数を応用するのも良い方法です。 $(document).rea
【卒jQueryへの道】生JSとライブラリとフレームワークの理解 - クモのようにコツコツと
JavaScript Advent Calendar 2017 - Qiitaの第5日目です。 「こいつ、動くぞ！*1」自分の作ったものが動く！この喜びをいち早く体験させてくれたjQuery。 だが、HTML→CSS→jQueryという道を辿った方が「次」のステップに進むときに感じる「壁」があります。それはいったい何なのか。 JS（JavaScript）の中でのjQueryの位置付け、そして他のライブラリ、フレームワークとの違いを理解し、この「壁」を突破したい。 これは「脱jQuery」ではなく「卒jQuery」への道。愛するべき我が母校jQueryでの経験を糧に、JSという大空に羽ばたいていきませう！*2 目次： JSのライブラリとフレームワーク jQueryの位置付け ライブラリ、フレームワークを使うメリット ライブラリとフレームワークの違い 生JSとライブラリとフレームワークの関係
PhotoSwipeとInfinite Scrollを共存させる
LightBox系のプラグインとしては、非常に多機能でインタラクションも秀逸な「PhotoSwipe」。 PhotoSwipe http://photoswipe.com/ 非jQueryという点もポイントになりますが、 反面、ちょっとピーキーだったり、導入がちょっと面倒だったり、jQueryしか使ったことが無い方には少し敷居がある感じです。（※jQuery版もあるようですが） 今回、そんなPhotoSwipeでギャラリーページをつくる際のちょっとした勘所として『PhotoSwipeとInfinite Scrollを共存させる』を書かせていただきます。 以前、クライアントワークでギャラリーページの作成があり、画像拡大を「PhotoSwipe」で行うことにしました。しかし、ギャラリーというと… ・今後どんどん画像は増えていくことでしょう。 ・1ページ内にあまりに画像が大量にあったり、ページを
ちょいちょいわからなくなるcheckbox, radio, selectboxの値の取り方 - Qiita
<select id="select" name="select"> <option value="0">sample</option> <option value="1">sample1</option> <option value="11">sample11</option> <option value="101">sample101</option> </select>
ASCII.jp：
アクセスランキング Apple AirTagは窃盗対策に使えなくなったってホント？ 自作PC 簡単に固定ナットのネジ穴作りができる「ちょっとナッターII」が便利でした PC とうとうWindowsからコントロールパネルが廃止! マイクロソフトが公表 トピックス 普通預金の金利が高い、超オススメの銀行はこちら トピックス 楽天モバイル料金を全額ポイントで支払っている僕が伝えたい爆裂お得なキャンペーン デジタル PS5がほぼ8万円に、だったら9万円台のゲーミングPCを選んでみては？ スマホ シャープ「AQUOS R9」はデザインやチップの変更で評価が分かれたが、実機であらためて実力を検証した iPhone 【iPhone 16の噂＆予想まとめ】まもなく登場iPhone 16はどうなる!? これ読んで待とう！ iPhone アップル「iPhone 16 Pro」新色は「デザートチタニウム」か P
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選 | TechAcademyマガジン
【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選 フリーで使えるjQueryのプラグインをまとめています。jQueryは初心者でも扱いやすく最も普及しているJavaScriptのライブラリです。Webサイトの印象も大きく変わるプラグインばかりなので、ぜひ使ってみてください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事
【jQuery】背景にパララックス効果を追加するParallaxify | VOYAGER
Parallaxifyは、ジャイロセンサーやマウスに基づいて要素や背景に視差効果を追加するjQueryプラグイン。 // Run it on single element $('#my-wrapper').parallaxify(); // or globally $.parallaxify(); $('#my-element').hover( function(){ $(this).parallaxify(args); }, function(){ $(this).parallaxify('destroy'); } ); <div data-parallaxify-range-x="100" data-parallaxify-range-y="50"></div> <div data-parallaxify-background-range="100"></div> data-paral
Rails5.1に向けてフロントエンド周りで起こっている革命まとめ - Qiita
こんにちは Rails5.1に向けて、DHHのjqueryを依存から外す発言を発端にフロントエンド周りが急激に発展しているので、簡単にですがまとめてみました。 各issue, PRの詳細には踏み込みませんが、知見に溢れているので読んでみるの推奨です。 間違い、足りないものがあったら編集リクエストお願いします。 jQuery依存を無くす話が出る rails(issue): Drop jQuery as a dependency jquery-ujsはjqueryに依存しないようにする jquery-ujs: Drop jQuery as a dependency "jquery"-ujsじゃなくなったので名前変更 rails-ujs誕生 実際にRailsからjquery依存がなくなる rails: Drop jQuery as a dependency jsライブラリを入れる方法がnpmパッ
アニメーションやグラフ等、SVGを使ったJavaScript＆jQueryプラグイン11
2016年11月24日 JavaScript, jQuery, SVG 今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。 ↑私が10年以上利用している会計ソフト！ ラインアート 1. DrawSVG See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen. Webサイト｜GitHub｜デモ SVGのパスを使ってラインをアニメーションさせるためのプラグイン。2kbと軽量です。デモ画面右下の「RETURN」ボタンをクリックして試してみてください。 var mySVG = $('#my_svg_element').draw
「table」って実はここまでできるんです！jQuery tableプラグイン12選｜SeleQt【セレキュト】
＜table＞はHTMLで最も古い要素のひとつです。tableはかつてWebレイアウトに広く使われていました。しかし、tableを基盤としたレイアウトは廃れ（HTMLメールを除いて）、現在tableを使うのは、表データを見せるために使うときくらいでしょう。 HTMLスペックの古い部分は、一般的にモバイル中心のデザインに合っておらず、そしてbox要素の外では機能的な発展はありません。とはいえ、table機能の使い勝手がもっとよくなったらいいと思いませんか？ この記事では、jQueryで動く厳選したプラグインについてザっと説明し、tableの可能性が広がればいいなと思います。これからご紹介するプラグインは、簡単なデザイン修正から機能豊かな解決策にまで多岐に及びます。 jQueryで動くtableプラグイン12選 Dynatable Dynatableはフィルター、分類、ページ付けなどの機能をも
HTMLのテーブルをJSONで動的に更新できる「Tabulator」がスゴい！
テーブル（表組み）をかっこよく、使いやすく表示するJavaScriptライブラリーはたくさんありますが、決定版になりそうなのが「Tabulator」です。JSONデータを簡単に読み込めるので、更新が必要なサイトやアプリにおすすめ。 標準HTMLのテーブル（table）は、複数の基本的なデータをレイアウトするのにとても便利ですが、テーブルにもっとほかの使い道がないでしょうか。外部APIからデータを取得したり、テーブルをソートあるいは編集可能にしたりする必要があるなら、もう少し気の利いたものが必要です。 思い当たることがあるなら、Tabulatorはおすすめのライブラリーです。Tabulatorは複雑なインタラクティブなテーブルの構築を簡単にするために設計された軽量なjQuery UIプラグインです。数行のJavaScriptで、ほぼすべてのデータソースをきれいにフォーマットされたインタラクテ
hiraku.js - jQuery Offcanvas Menu Plugin made with love by appleple
"hiraku" means "open" in Japanese. As you can imagine, "offcanvas-menu" is like a drawer and it is often used to create additional space especially for mobile layout. It is very easy to find source codes or plugins for Offcanvas-menu via Google by searching with "offcanvas JavaScript", but we can't find any plugins which meet all features that hiraku.js has. That's Why we made it from the scratch.
jQueryのプラグインが面白い！スクロール時にユーザを引きつけよう
PCでも、スマートフォンでも、画面をスクロールさせた時の各パーツ等の*「動き・挙動」*というのは、ユーザーの興味を引きつける上で非常に重要な要素です。 最近では動画以外の要素にも動きをつけて表示するホームページが増えてきました。 今回は、ページ下部へとスクロールさせるごとにユニークな動きをする、簡単に設置できるjQueryのプラグインをご紹介します。デモページと併せ、「どんな動きをするか」という具体的な説明もご覧ください。 注目！スクロール時にユーザを引きつけるjQueryプラグイン12選 1. セクションが重なるようにレイヤー表示「StickyStack.js」 配布ページ｜デモ 一つひとつのセクションをレイヤーに見立て、ページトップから積み重なるように表示するエフェクト効果を実装できます。垂直に配置した各パネルを上部に固定配置しながら、積み重なるようにスクロールすることができます。言葉
Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ
Webデザイン制作で人気の Bootstrap フレームワークには、役立つツールやコンポーネントがあらかじめパッケージされており、すぐにサイトやアプリの制作をはじめることができます。しかし、ときには必要な機能が十分に揃っていないケースがあるのも事実です。 この記事では、Bootstrap の機能を最大限に拡張できる、50種類のプラグインやアドオン、コンポーネントをまとめてアルファベット順にご紹介します。 ここでは、ボタンやパンくずリスト、カレンダー、ツリーメニュー、ビデオプレイヤー、WYSIWYGエディターなどウェブ制作に必要な機能をすべてまとめています。今後のプロジェクトに活用してみてはいかがでしょう。 制作に活用したいBootstrap 用プラグイン、アドオン、コンポーネント（アルファベット順） アクセシビリティ （英: Accessibility） Accessibility Plu
jQuery：要素の追加・複製・置換・削除といったDOM操作に関する備忘録 - NxWorld
jQueryで要素の追加・削除といったDOM操作に関するメソッドの動きをさっと確認できる一覧がほしくて作ったのでシェアします。 追加 .prepend() マッチした要素内の先頭に指定した要素を追加します。 下記サンプルコードはイメージのように「Blockの中にXを追加する」というものになり、.prepend()は要素をマッチした要素内の先頭に追加するので、もともとあったAより上にXが追加されます。
4webtbt.com is Expired or Suspended.
「 4webtbt.com 」のページは、ドメインが無効な状態です。 ウェブサイト管理者の方はこちらから変更・更新を行ってください。 「 4webtbt.com 」is Expired or Suspended. The WHOIS is here.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
