数百サイトのクローラーを効率よく運用する仕組み - ZOZO TECH BLOG
こんにちは！ バックエンドエンジニアのりほやんです！ 2017年の2月28日にIQONはリブランディングを行い、タグラインを "わたしの「好き」がここにある” に刷新しました。 この “わたしの「好き」がここにある” という体験をユーザーにしていただくには、IQONに掲載されている商品情報がとても重要になります。 そして、正確な商品情報の掲載にはクローラーが正しく運用され稼働していることが必要不可欠です。 本記事では、IQONの商品情報を支えるクローラーの運用をどのように仕組み化しているかについてご紹介します。 クローラーを作成、運用されている方々のお役に立てたら幸いです。 弊社テックブログでは以前、『速くクロールすること』に注目した記事を公開しましたが、今回は『正しくクロールすること』に注目しました。 『速くクロールすること』に注目した『Docker / Apache Mesos / M
[CSS]レスポンシブ対応、サイドバーをアニメーションでスライド表示・非表示させるテクニック
レスポンシブ対応、アイコンをクリック・タップすると、サイドバーをアニメーションでスライド表示・非表示させるCSSのテクニックを紹介します。 スライドは単にそう見えるだけで、transformでサイドバーを変形させています。 滑らかなアニメーション、美しいグラデーション、スライドするにつれて透明度が変化するのも美しいですね。 サイドバーをアニメーションでスライドさせるデモ 実装 サイドバーをアニメーションでスライドさせるデモ 実際の動作は、デモでお楽しみください。 デスクトップサイズでも、スマホサイズでも期待通り。動作します。 ※CSS変数で実装されているため、IEでは動作しません。 実装 実装の仕組み アイコンはフォームのチェックボックスで実装されており、そのオン・オフをトグルにしてサイドバーを表示しています。 トグルの切り替え時のみJavaScriptが使用されており、それ以外はアニメー
![[CSS]レスポンシブ対応、サイドバーをアニメーションでスライド表示・非表示させるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/53964eacab91455a44fbd61cad063b621fb7c445/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017030805.jpg)
プラグインを使わずにCSSとjQuery数行でできるドロワーナビ | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、制作担当の奥田です。 今やレスポンシブウェブデザインや、スマホ制作には欠かせない、ドロワーナビ。 jQueryのプラグインも豊富に存在しますが、DEMOのソースと環境を揃えてあげないといけなかったり、ちょこちょこ修正が必要だったりと、意外と面倒です。 実は特に難しい事はせずに、数行のjQueryコードとCSSで実装可能なのです。 今回はプラグインを使わずに作るドロワーナビをご紹介いたします。 Table of contentsコンテンツとナビゲーションを用意開いている状態を作成するjQueryで制御するコンテンツとナビゲーションを用意まずはコンテンツとナビゲーションを用意します。 固定ヘッダーとコンテンツ、そしてリスト型のナビゲーションを用意し、#drawernavとします。 DEMO.コンテンツとナビゲーションを用意 <div id="page"> <!-- コンテンツ --
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
CSSの変態向き - ID, classを顔文字でコーディングする方法 - kojika17
HTMLのIDとclassに顔文字記述しても、CSSではスタイルが適用されません。 ただCSSをごにょごにょするだけで、ID, classを顔文字、日本語でもコーディングすることができます。 誰が得をするのか全くわからないけど、紹介します。 HTMLのID, classを顔文字にする HTMLのID, classを顔文字、または日本語で書きます。 下準備はこれでおｋ。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body ID="（( ◉౪≡౪◉ )）≡౪◉ )）"> <div class="(」・ω・)」うー！"> <h1 ID="(／・ω・)／にゃー！">にゃー！</h1> </div> </body> </html> CSSでごにょご
様々なブラウザ環境に対応する為のJavaScriptライブラリ「Modernizr」
配布元：Modernizr ライセンス：MIT & BSD licenses. ModernizrはTwitterなどの大手サイトでも採用されているブラウザの機能の実装状況を調査するためのJavaScriptライブラリです。 たとえばModernizrを読み込んだサイトではhtml要素が次のように書き換えられます。 <html lang="ja" class="no-js"> ↓ <html lang="ja" class="js flexbox flexbox-legacy rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms c
絶対に使いたい、modernizr 2.0
最近では、すっかりCSS3を利用する人には定着した「modernizr」当初は、CSS3の対応状況をチェックするツールと誤解をしていた人も多くいました。しかし、このツールは、CSS3やHTML5のサポート状況をclass名としてhtml要素に反映し、そのclass名を利用して「プログレッシブ・エンハンスメント」を適用するJavaScriptです。 html 要素に CSS3のサポートされているか？されていないか？で別々の class名を記述します。 例えばブラウザが「multiple background」を サポートしている場合 <html class="multiplebgs"> </html> サポートしていない場合 <html class="no-multiplebgs"> </html> CSSの記述 .multiplebgs div p { /* properties for
alertify.js - browser dialogs never looked so good
Unfortunately, I will no longer be maintaining alertify.js. I have many ongoing projects that aren't leaving me with enough time to do what needs to be done. If anyone wants to create a fork and maintain - by all means go for it! It's been great seeing people use it and enjoy it and this decision is simply because I don't believe it's fair that developers are looking for help and not getting it. I
Baraja: A Plugin for Spreading Items in a Card-Like Fashion | Codrops
With this jQuery plugin items can be spread in a card-like fashion and displayed in an unusual way. Several parameters allow many different spreading results, allowing a unique pattern. Baraja is an experimental and fun jQuery plugin that allows to move elements in a card-like fashion and spread them like one would spread a deck of cards on a table. It uses CSS transforms for rotating and translat
文字列を省略して「…」を付与する方法 – CSS/jQuery | DevelopersIO
通常、設計・デザインの段階であらかじめ表示する文字数の上限を決めておき、PHPやRuby、Javaなどサーバサイドで表示する文字列を加工することが多いかと思います。 しかし、この方法だと動的に変化する領域を基準に表示する文字数を制限する場合や、文字サイズや表示領域のサイズに合わせて上限を算出する場合に限界があります。 そこで、クライアントサイドで表示領域から文字列がはみ出す場合、文字列を省略して省略記号「…」をつける方法を紹介してみたいと思います。 実現方法として以下の2つの方法があります。 text-overflowプロパティを使う jQueryで表示領域の幅・高さに合わせて文字列を加工する text-overflowプロパティを使う text-overflowプロパティを用いると、文字列が表示領域からはみ出してしまった場合、はみ出した文字列を省略記号「…」で省略することができます。 尚
jQueryでナビゲーションに自動でclassを付与するプラグインを作ってみた | soplog(そぷログ)
TLでちょっと話題に上がったので作ってみました（大分出遅れ）。 グローバルナビやローカルナビの現在地に、自動で class を付与するプラグインです。 作ってはみたのですが、きっと規模がでかくなると例外がボコボコ出てくると思います。 例えばこのプラグインでは、 /about/company/index.html が現在地の場合、 /about/index.html /company/index.html どちらにも class が付与されてしまいます。 こういった例外に全て対応するのはとても面倒難しいので、本末転倒ですが、 システム側で対応することをおすすめします。 サンプル サンプル－ダウンロード ※サンプルはローカルでは正常に動作しません。環境に合わせて設定してください。 使用例 <script src="https://ajax.googleapis.com/ajax/libs/jq
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/20150320drawer
CSS Lecture: 有名サイトが使っているid名class名集めてきました！