JavaScriptに関するniwaiwaiのブックマーク (7)

  • Flatis

  • 「SEO的に優れた無限スクロールの実装方法」Googleからのアドバイス ::SEM R (#SEMR)

    SEO的に優れた無限スクロールの実装方法」Googleからのアドバイス Googleが検索エンジンに配慮した無限スクロールの導入方法を公式ブログでアドバイス。クローリングできるようページ分割したものを用意するのが原則。プログレッシブ・エンハンスメントを前提に設計しよう。 公開日時:2014年02月14日 02:16 米Googleは2014年2月13日、検索エンジンフレンドリーな無限スクロール(Infinite Scroll)の導入方法についてのアドバイスを公式ブログに掲載した。John Mueller, Maile Ohyed, Joachim Kupkeの3人による上級者向けの投稿だ。 記事では、翻訳ではなく、軽く Google のアドバイスの要点を押さえつつ、私個人の意見を述べていく。 無限スクロールとは Twitter や Facebook でも導入されているので既にお馴染みか

    「SEO的に優れた無限スクロールの実装方法」Googleからのアドバイス ::SEM R (#SEMR)
  • SVGMagic

    div要素の背景画像としてSVGを使用します。 SVGMagicの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="SVGMagic.min.js"></script> </head> SVG画像をPNG画像に変換するのには、PHPを使用しています。 converter.php(ダウンロードファイル一式に含まれています) SVGMagic.min.js内では、配布元のサーバーのファイルを参照してい

  • 人気上昇中のJavaScriptライブラリを調べてみた[ジャンル別に比較]

    連載 INDEX 次回 → こちらのページで【2015年版】も発表! ■ 2014年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて稿では、2013年中に人気が急上昇してきており、「2014年では必須の知識」となりそうなJavaScriptライブラリ(Library)をランキング形式で発表する。 なお、稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」(「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み)を使って、ライブラリの人気をジャンルごとに比較した(※ライブラリ名が一般的な英単語の場合、Web検索時に、その英単語にもヒットしてしまう。このノイズがGoogleトレンドでの結果として入り込んでいる可能性が高いことをご了承いただきたい。各ジャンルは、筆者が独自

  • 今、AngularJSというフレームワークがヤバい - (゚∀゚)o彡 sasata299's blog

    2013年11月05日10:36 JavaScript 勉強会 今、AngularJSというフレームワークがヤバい 先週の土曜日、ランサーズさんで行われた 第3弾 週末ランサーズ に参加して個人的に今アツい AngularJS について話してきました。 AngularJS は ng-repeat が便利だったり、コードの見通しが良くなるなどいろいろなメリットがあると思うのでうまく使えば大変メリットがあると思います。特に、データの状態(要素の追加・削除や、状態のon/off など)を制御すればそれに合わせて view の表示はすべて AngularJS がやってくれるというのは素晴らしいですね。 ちなみに、以下の資料の中で ng-app とか ng-repeat とか出てきますが(これは directive と呼ばれます)、この ng というのは AngularJS の2文字目と3文字目を表

  • WebWorkerで爆速プリロード | blog.bouze.me

    HTMLで画像とか動画とかのリソースをページが表示される前にプリロードするパターンあるじゃないですか、あれでちょっと思いついたのがあるんでメモしときます。 以前やったPOOL inc.のトップページ、例のごとく最初にビデオをある程度プリロードしてから再生してるんですが、数が40程あって全部の読み込みを待つのさすがにダルいよねってことで2, 3読み込んだら再生をはじめて、残りのビデオは裏で読みってやってみたんですが、この読み込みの処理がなかなかヘビーでして、再生してるビデオがコマ落ちしてまともに再生されないんです。 どうしよう、どうしようということで読み込み処理をビデオの再生とは別のスレッドにしてみたんです。HTML5のAPI、Web Workerで。すると狙いどおりビデオがコマ落ちすることなくバックグラウンドで読み込みができるようになりました。40同時に並列でダウンロードしても処理

    WebWorkerで爆速プリロード | blog.bouze.me
  • HTML5で組んでるならこの魔法のjsも入れておけっていう話

    現在、A!@attripさん発で話題になっている「たった2行でIE5.5~IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS

    HTML5で組んでるならこの魔法のjsも入れておけっていう話
  • 1