日経電子版を支える広告技術 — HACK The Nikkei
本稿では、現在の日経電子版モバイル Web（以下、日経電子版）における広告掲示の技術について解説する。 広告とサイトパフォーマンスの関係 dev.to に代表されるような「高速」と言われる Web サイトは、CDN や ServiceWorker などを駆使して表示に関して適切なチューニングを行っており、日経電子版もほぼ同じ思想の元チューニングを行っているが、一点大きな違いを挙げるとするならば、広告表示の有無が挙げられる。 現在の日経電子版では 7 タイプの広告を表示しており、うち 4 タイプは外部 DSP からの配信を行っている。 その他にも様々なサイトトラッキングのサードパーティスクリプトを導入しているが、ご存知の通りこれらはメインとして打ち出したいコンテンツとはほぼ関連性はなく、パフォーマンス観点から見れば劣化させる要因でしかない。広告が無ければもっと速く表示できるのに…と思ったこと
幾何的生命体、またはなめらかな動きをプログラムする方法について - FAL 制作メモ
これはProcessing Advent Calendar 2017 - Qiitaの14日目の記事です。 図形でできた生物（？）が生まれては消えるのを繰り返すプログラムを作りました。 Geometric Beings この記事の趣旨 なめらかな動きの再現： 物理エンジン的アプローチ 考え方 実装 用途 なめらかな動きの再現： アニメーション的アプローチ 「補間」という考え方 イージング関数とそのパターン 今回のプログラムへの応用 参考情報 Easing Function Cheat Sheet Robert Penner のサイト モーション周期表 余談： 過去の似たような作例 この記事の趣旨 このたび次のようなスケッチを作りました。 （JavaScriptが有効でないと表示されません。） 森羅万象が絶えず生成消滅するこの世の摂理の儚さと美しさを描き切りました。 （意訳： なんか出てきて
Nuxt.js+Firebase HostingのサイトをPWA化してLighthouseで(ほぼ)100点満点を目指す - razokulover publog
1年くらい前に仕事でNuxt.jsをいじる機会があったんだけどそれ以来使ってなかった。 ただ、GW中にNuxt tech bookを読んだところ久々にいじりたくなってしまい。 そこでちょうどFirebase HostingとPWA化に関して調べてたとこだったので、Nuxt.jsのサイトをPWA化してFirebase Hostingで動かす手慣らしでもしておこうかと思いやってみた。 ただ、普通にやっても面白くないので一応Lighthouseのスコアを満点にすることを目指してみることにした。 コンテンツはNuxtのスターターキットの初期生成されるページ。このページを対象に行う。 以下、Firebase Hostingの設定・Nuxtのプロジェクト作成・PWA設定・Lighthouseのスコア上げの流れで説明してます。 一応ソースはこちらで。 nuxt-firebase-hosting-samp
React を TypeScript で使う際のツール考察 2018 春 | La Verda Luno
最近のフロントエンドの流れから取り残されている感じがしたので、一念発起して React で小さなアプリを作ろうと思いました。 せっかくなので、 React 関連ツールはなるべく統合して使うようにし、コード本体は TypeScript を使って開発しようと設定を始めました。 （ webpack 4 が出てきてしまいましたので、まだ周回遅れです。） 残念ながら、 create-react-app でテンプレートを作成してからツールを追加していくたびにエラーに見舞われたので、メモ書きとして記録しておきます。 執筆に長い期間かかってしまいましたので、もしその間にライブラリがアップデートされ、動かなくなっていたら申し訳ありません。 目次と使用ツール （以下のリンクは関係する部分へジャンプします。） TL;DR create-react-app React 16 TypeScript webpack
#1 なめらかな多角形から始まるジェネラティブアート｜梶田悠｜note
シリーズ概要下記のツイートのpolygon distortionを作るまでの工程をわかりやすく解説し、更により良いものにしていくまでを道のりをいくつかのnoteに分けて書いていこと思います。 作成ツールはprocessingを用います。(processing初めての方はなめらかサンショウウオさんのnoteやサイトにチュートリアルあるのでそちらも参考に。) #1 僕編 シリーズ初回の今回はまずこのnoteのメインビジュアルにある曲線的な三角形を作ります。これは僕のSNSアイコンとして使っているので僕編です。 僕の作り方を解説していきます。みんなも僕を作ってね~ 論理的な解説便宜上今回作るモノを「僕」と名前をつけます。 「僕」の構造は単純で三角形が毎フレーム描画されそれが集まってできているだけです。前のフレームで描画した三角形より少し大きくした三角形を描くので徐々に大きくなります。画像のよう
CDNを使って表示速度を2倍に 日経電子版リニューアルの舞台裏
2018年2月11日、Webフロントエンドの現場とこれからをつなぐカンファレンス「Inside Frontend #2」が開催されました。Web技術の発展とともに多様化し始めているフロントエンド領域。今、それぞれの現場はどのような課題に取り組み、どのように解決しているのか？ さまざまなノウハウを持つエンジニアたちが、自身の知見を語ります。プレゼンテーション「日経電子版を速くするためにやっていること」では、日本経済新聞社の宍戸俊哉氏が登場。日本有数のアクセス数を誇る日経電子版はいかにして表示速度を高速化しているのか？ その秘密を語ります。 グローバルのランキングで2位となった表示速度 宍戸俊哉氏（以下、宍戸）：よろしくお願いします。「日経電子版を速くする」というタイトルでお話しさせていただきます。 はじめに自己紹介をさせてください。宍戸俊哉と申します。今は日本経済新聞社で「r.nikkei.
Promise と async/await の理解度をもう1段階上げる - Qiita
はじめに 表題のモチベーションで書き上げた備忘録に加筆・修正したものを記事にしました。 記事を読んで下さった方の Promise, async/await の理解度が 1LV でもアップしてくれたら嬉しく思います。 Promise とは Promise は非同期関数を扱うためのインターフェース Promise は 悲運のピラミッド型コールバック （ネスト地獄）を根本的に解決してくれる thenable と呼ばれる then メソッドを有するオブジェクトを resolve の第一引数に入れることで Promise オブジェクトへ変換することが可能 // thenable を Promise オブジェクトへ変換する const converted = Promise.resolve({ then: (onFulfilled) => onFulfilled('be promise') }) co
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
