レンダリングを妨げる JavaScript を削除する | PageSpeed Insights | Google for Developers
レンダリングを妨げる JavaScript を削除する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このルールは、HTML ページのスクロールせずに見える範囲に、レンダリングをブロックする外部 JavaScript ファイルへの参照が含まれていることを PageSpeed Insights が検出した場合にトリガーされます。 概要 ブラウザでは、ページを表示する前に HTML マークアップを解析して DOM ツリーを構築する必要があります。 この処理の途中でスクリプトが出現するたびに、パーサーは HTML の解析を停止してスクリプトを実行してから、解析を続行する必要があります。外部スクリプトの場合はリソースがダウンロードされるのを待つ必要もありますが、その際リソースのダウンロードによってネットワーク ラウンド トリップが発生し、ページが最初に表示される
リソース（HTML、CSS、JavaScript）を圧縮する | PageSpeed Insights | Google for Developers
リソース（HTML、CSS、JavaScript）を圧縮する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このルールは、リソースのサイズを圧縮によって削減できることを PageSpeed Insights が検出した場合にトリガーされます。 概要 圧縮（軽量化）とは、ブラウザによるリソースの処理に影響を与えることなく、不要なデータや重複データ（コードのコメントや書式など）の削除、使用されていないコードの削除、短い変数名や関数名の使用といった処理を行うことを指します。 詳しくは、前処理とコンテキスト固有の最適化をご覧ください。 推奨される解決方法 HTML、CSS、Javascript のリソースを圧縮します。 HTML の圧縮: HTMLMinifier をお試しください。 CSS の圧縮: CSSNano、csso をお試しください。 JavaScr
Pikabu – Flexible Framework for Off-Canvas Flyout Panels | Mobify
Pikabu A speedy, flexible framework for off-canvas flyout panels. Simple markup Few containers and classes means implementation is a breeze. Native scrolling Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don’t support it. Customization No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs. Compatibility This thing works
hammer.jsの使い方 | まとめーたー
photoBy: http://s3.bitelia.com/files/2012/07/hammer-js-800x436.jpgjquery で スワイプやタッチジェスチャーを可能にするライブラリまずはダウンロードとご紹介http://eightmedia.github.io/hammer.js/ からダウンロードできます。 スマートフォンにマルチタッチ機能をつけることができます。 jquery.hammer.min.js は https://github.com/hammerjs/jquery.hammer.js からダウンロードできます。 使い方 スワイプで実行 jquery、hammer.js は読み込み済み #hoge を swipe で #hogeの テキストを取得 読み込む順番を逆にしないと動かない場合がある <script src="/app/webroot/js/jqu
カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2）|WD Online
2016.01.04 課題解決のためのUI実装講座 Web Designing 2016年1月号 カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2） スワイプ対応タブメニューを実装してみよう Text：町田なつみ、古川佑太朗 スワイプに対応したタブメニューの事例から、そのメリットや気をつけるべき点が把握できたところで、サンプルを使って実装例を解説していこう。 サンプルファイルダウンロードのご案内 このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。 ［SWIPE TAB 01］タブ部分を配置し横スクロールに対応させる それでは、スワイプ対応タブメニューをつくってみよう。コンテンツ部分のスワイプ時に連動して、タブメニューをスクロールさせ、常にカレントのタブが表示されるようにする。さ
フロントエンジニア必見！フロントエンド界隈で注目を集めるRiot.js入門資料まとめ
JavaScriptのフレームワークはReact、Angularなどが人気ですが、ここ最近フロントエンド界隈を中心にRiot.jsが注目を集めています。 軽量でHTMLに似通った文法を採用しており、扱いやすいJSフレームワークとして人気急上昇中です。 そこで今回は、これからRiot.jsを始めるエンジニア、Riot.jsに興味のあるエンジニアに向けて、Riot.jsの入門資料（記事・スライド）をまとめました。 比較的扱いやすいJSフレームワークなので、難しく考えずにまずは使ってみてください。 JavaScript案件を提案してもらう Riot.js入門記事 Riot.js — A React-like user interface micro-library http://riotjs.com/ja/ Riot.jsの日本語公式サイトです。 ガイド、FAQ、APIなど、各メニューが日本語化
Accelerated Mobile Pages Foundations | Google Codelabs
1. Overview In this codelab, you'll learn how to build Accelerated Mobile Pages – or AMP for short. To achieve this you will implement a simple news article web page that conforms to the AMP specifications while incorporating several typical web features commonly used on mobile news sites. What you'll learn How AMP improves the user experience of the mobile web. The foundations of an AMP site. AMP
Webサイトからプッシュ通知を送ろう！ JavaScriptでのプッシュ通知の実装方法 - ICS MEDIA
スマートフォンアプリではおなじみのプッシュ通知ですが、ウェブサイトからもプッシュ通知できることをご存知でしょうか？ JavaScriptのServiceWorkerとPush APIを使用することで、ウェブサイトからでもスマートフォンアプリと同様にユーザーにプッシュ通知を送ることができます。また、モバイルだけでなくデスクトップでも通知を行うことができるため、ユーザーエンゲージメントの向上の手法として有効です。 プッシュ通知のデモ プッシュ通知を行う簡単なサンプルを用意しました。Chrome 42以降のブラウザで確認してください（2018年3月現在のChrome 65で動作することを確認しています）。 「プッシュ通知の配信設定」のトグルを選択すると、「cURLコマンド」のボックスにコマンドが生成されます。このコマンドをMacをお使いの方はTerminal上から実行してください。Windows
モバイルページ読込を高速化するAMPを三ヶ月間運用してどうだったのか - ICS MEDIA
※AMPは画像を遅延読み込みする機能が存在するため、ファーストビューでの転送容量が少なくなる傾向があります。当サイトもHTTP/2やリバースプロキシーを利用するなどWordPressを極限まで早くするようチューニングしていますが、AMPページではそれよりも高速に表示されています。 筆者はモバイルブラウザでのページ読み込み高速化によって、アクセス数が伸びる、SEO的に有利になる、エンゲージメントが向上する、といったことに期待していました。 AMP対応の効果は今のところ局所的 結論からいうと、AMP対応して得られたメリットは局所的なものでした。一部の記事がバズったときに、アクセス数の向上を確認できたというものです。まずアクセス数の数値から、AMPの状況を見ていきましょう。次のグラフはAMP対応してから現在までのアクセス数の記録です。 ▲アクセス解析はAMPページのみに絞り込んで表示 上位1位の
hifive - HTML5企業Webシステムのための開発プラットフォーム
JSLintとはJSLintプラグインの使用方法チェックルール一覧 - JSLintJSLint独自の項目JSHintと共通の項目JSHintとはチェックルール一覧 - JSHintEnforcing OptionsRelaxing OptionsEnvironmentsLegacyJSHintが必ずチェックする項目JSLintとはJSLint (JSLint.com - What is JSLint? を大まかに和訳しました。) JSLintとは、対象のJavaScriptプログラムから問題となる箇所を検索するコード品質ツールです。 C言語が登場して間もない頃、コンパイラによって捕えることができなかったプログラムミスがあったため、ソースファイルを検証するためのツールとしてLintが開発されました。今ではC言語は成熟し、コンパイラがエラーを捕えて警告出来るようになったためLintは必要なく
ちょっとしたエフェクトやアニメーションを付けたい時に参考になるCSSテクニックのまとめ - NxWorld
既に多くの方がご存知だとは思いますが、ちょっとしたエフェクトやアニメーションなどもわざわざJavaScriptを利用しなくとも実装できるようになったりと、CSSを利用して様々な見せ方や動きを実装できるようになりました。 そこで今回は主にCSSを利用してエフェクトやアニメーションを付けたいときに参考になりそうなのもので、且つ使用頻度が高そうなデモやテクニックをまとめてみました。 一部紹介しているものの中にはクラス付加などの動きについてJavaScriptを利用してはいますが、基本的な動きはいずれもCSSを用いて表現しているものになります。 image hover 63 effects イメージにhoverするとキャプションが表示されるというエフェクトが多数まとめられています。 HTMLもシンプルでエフェクトはすべてCSSで実装されています。 Css3 Transform rotate, sc
Codrops | Useful resources and inspiration for creative minds
Codrops Demos Hub Discover our curated collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Stay in the loop: Get your dose of frontend twice a week 👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox. Zero fluff, all quality, to make y
【jQuery】複数の要素に対して繰り返し処理をする（each・for） - TASK NOTES
HTMLで特定の要素を全て取得して回したい場合はJavaScriptなどで繰り返し処理をしますが、jQueryを使った場合の方法をまとめます。 対象としてはこのようなHTMLの場合です。 <div class="comment">コメント1</div> <div class="comment">コメント2</div> <div class="comment">コメント3</div> ... .each()メソッド jQueryで繰り返しといえばeach()メソッドです。基本的な構文は以下の通り。 $('セレクタ').each(function(index, element){ 〜 }); 第1引数には各要素のインデックス番号が、第2引数には繰り返し処理中の要素が参照されます。2つの引数はどちらも省略可能です。このメソッドを使えば要素数分、繰り返して指定した関数を実行してくれるわけですね。簡
jQueryの基本的な書き出し比較とまとめ | Webスクリプターがつぶやくブログ
社内でJavaScript職人の地位が確立されてきた僕です。 元々コーディング大好きマンなので楽しい限りです。 PHPを忘れそうですがw 今回は後輩（デザイナー）から、jQueryの書き出し（書き始め方？）が色々あってよくわからないと言われたので、比較とまとめをしていきます。 おそらく、後輩に限らず、デザイナーやコーダーの方がよく使うものは下記辺りではないかと。印象も参考までに載せておきます。 １）$(function(){...});←多分1番使う ２）$(document).ready(function(){...});←次によく使う ３）jQuery(function($){...});←あまり使わないけど、検索したら見かける ４）jQuery(document).ready(function($){...});←WordPressでよく見る ５）(function($){...})
Google Sites
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
(その場で編集するUI) の実装方法を考えてみた - Cyokodog :: Diary
画面上の変更したいデータや文章をクリックすると、画面遷移をせずその部分のみが編集可能状態になるユーザインターフェースのことを Edit-In-Place あるいは In-Place-Editor と呼ぶそうです。 jQueryでEdit-In-Place（その場編集）を実現するためのプラグイン＆チュートリアルいろいろ - IDEA*IDEA inplace edit で始める DOM スクリプティング - 脱エンタープライズ志向 今回は jQuery による In-Place-Editor の実装方法について考えてみます。 In-Place-Editor の効果的な使い方 登録文書を承認ワークフローでまわすようなシステムの場合、同一文書に対し複数ユーザが修正や加筆をするというケースがよくあります。その際起こる問題として「データ編集中に他者に更新を先越され、登録処理で排他エラーになってしまっ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
【jQuery】［Masonry］の表示の不具合を解消するために［imagesLoaded］を併用する方法。
【jQuery】［Masonry］の表示の不具合を解消するために［imagesLoaded］を併用する方法。 ［jQuery Masonry］を使う際、Webkit系のブラウザ（Safari、Chrome）によっては、読み込みの際にボックスが重なり、初動では意図したように表示されないケースがあります。 巷のブログでは、その不具合を解決するために「<img>要素に［width］［height］属性をそれぞれ記述しておけば大丈夫」という記事を見かけます。 しかし実際には、その方法では問題を解決しきれません。 そこでお勧めするのは、同じjQueryプラグインの［imagesLoaded］を併用するワザです。 ［imagesLoaded］を使うと、画像を表示する際、先にデータを完全に読み込み、読み込みが完了した後に任意の処理を実行できるようになります。 この特性を利用して、［Masonry］側の計
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hammer.JS - Hammer.js
301 Moved Permanently