タグ

ブックマーク / ics.media (4)

  • ウェブページの読み込みを高速に! FacebookのInstant Articlesの導入方法 - ICS MEDIA

    ウェブページの読み込みを高速に! FacebookのInstant Articlesの導入方法 Facebookアプリのニュースフィードに流れている記事を選択したものの、読み込みが遅く記事を読むのを諦めた経験はありませんか? 記事を選択すると媒体側のサイトへアクセスしコンテンツを表示しますが、読み込み時間が遅いとせっかく良い記事を作成してもユーザーが離脱してしまう可能性があります。 記事で提案したいのは、Facebookでのページ表示を高速化させる技術「Instant Articles(インスタント記事)」です。Facebookアプリから外部ウェブページを読み込むのに平均8秒程かかると言われていますが、Instant Articlesを利用すると10倍の速度で表示できるようになります。 読み込み速度が改善すれば、快適にブラウジングできるため利用者にとっては嬉しいことでしょう。また、離脱率

    ウェブページの読み込みを高速に! FacebookのInstant Articlesの導入方法 - ICS MEDIA
  • ChromeのデベロッパーツールでJSをデバッグする方法(2018年版) - ICS MEDIA

    JavaScriptのデバッグは必ず覚えておきたいウェブ開発の必須スキルの1つです。プログラムの実行をデバッグすることで現在の変数の値や、処理がどのように進んでいるのかを確認します。これを利用してプログラムが意図した動作になっているかの分析に役立てることができます。 記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」(以下「デベロッパーツール」)を使用してJavaScriptをデバッグする際の基的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、1つ一つ順番に試しながら読み進めてください。 この記事で学べること ・デベロッパーツールの使い方 ・JavaScriptのブレークポイントの使い方 ・実行中の変数

    ChromeのデベロッパーツールでJSをデバッグする方法(2018年版) - ICS MEDIA
  • モバイルページの高速化! AMPの利点と対応HTMLの作り方 - ICS MEDIA

    AMP(Accelerated Mobile Pages=アンプ)とは、2016年2月にGoogleが導入した、モバイル端末(スマートフォン・タブレット)でのウェブページの表示を高速化するためのプロジェクトです。AMP対応のウェブページは従来に比べ平均4倍程の速度で表示できるため、さまざまなメリットがあります。 記事ではAMP導入のメリットと作り方を紹介します。AMP対応することによってアクセス数が増大した話もありますので、記事のシリーズで紹介します。 導入の利点① ページ表示が超高速になる モバイルブラウザで、AMPページにアクセスしたときにものすごいスピードでウェブページが表示されます。読み込み待ちのイライラがなくなるため、ユーザーストレスの軽減につながります。 導入の利点② 検索結果でAMP(稲マーク)が表示される モバイルでのGoogle検索で、AMP対応のウェブページは稲

    モバイルページの高速化! AMPの利点と対応HTMLの作り方 - ICS MEDIA
    div1
    div1 2016/06/21
  • ブラウザ確認が一瞬! Browsersync入門(+Gulpの利用方法) - ICS MEDIA

    ウェブサイトを閲覧するユーザーの環境は多岐に渡ります。したがって、ウェブ制作者は多くの環境の動作確認をしなければなりません。その時の手間を大きく省いてくれるBrowsersyncというツールを紹介します。 Browsersyncとはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。ローカルサーバーも起動できたり、複数のブラウザで操作の同期が可能といった便利機能も満載です。 Browsersyncのデモ動画 Browsersyncのデモ動画を紹介します。デスクトップブラウザとスマートフォン(iPhone)のブラウザが同期しており、ファイルの編集後に自動リロードしています。CSSでハリネズミを走らせるアニメーションです。HTMLCSSのファイル編集がリアルタイムに反映されていることがわかります。 Browsersyncは何を便利にしてくれるのか ファイルの編集後に複数ブラ

    ブラウザ確認が一瞬! Browsersync入門(+Gulpの利用方法) - ICS MEDIA
    div1
    div1 2015/06/17
  • 1