最新版! Lottieアニメーションの実装方法 - Lottie-Player編 4月5日公開澤田 悠♥ 35
CSS Nite LP64「Coder's High 2019」フォローアップ(6)中村 享介さん 記事公開日:2020年1月 2日(木) 2019年10月19日に大崎ブライトコアホールで開催したCSS Nite LP64「Coder's High 2019」のフォローアップとして、中村 享介さん(ピクセルグリッド )の『高速なウェブのためのモダンアーキテクチャ JAMstack』セッションのスライドなどを公開します。 スライド(PDF)動画 セッション6で、JAMstackを紹介させていただいた、中村享介です。 JAMstackは新しいアーキテクチャのため、すぐに理解するのは難しいかと思いますが、 事前にHTMLを生成しておくというポイントだけでも押さえておくと、今後さまざま情報が出てきてもついていきやすいはずです。 また、今回は概念とそれによるメリットの説明だけで、じゃあ実際どうやって
CSS Nite LP64「Coder's High 2019」フォローアップ(7)カイトさん 記事公開日:2020年1月 2日(木) 2019年10月19日に大崎ブライトコアホールで開催したCSS Nite LP64「Coder's High 2019」のフォローアップとして、カイトさん(キテレツ)の『Nuxt.jsがもたらすWordPressの新たな可能性』セッションのスライドなどを公開します。 スライド(PDF)動画 こちら(Notion)にまとめていただいていますが、下記に転載します。 JAMStackとNUXTについての質問です。JAMStackはJSが膨大になることを防止することの理由が挙げられていましたが、NUXTを利用すると反対にJSが膨大になってしまうのではと思ったのですが、どうなのでしょうか? 中村享介さんより: その質問、僕のセッションでの説明のせいかもしれないですね
まずは作ったサイトを貼っておきます。 https://wp-nuxt-for-netlify.netlify.com/ いかがですか?現在住んでいるオーストラリアのADSLな爆遅回線でも、爆速です。 WordPress は heteml のレンタルサーバーですよ? 感動しすぎたので、徒然なるままに〜。 ざっくり構成 WordPress側 リニューアル中の家族ブログ( https://nishida.lol ) Heteml レンタルサーバー(月額 2000円) Heteml で無料SSL WP REST API でGET APIだけ利用 https://v2.wp-api.org/ フロント側 Nuxt Nuxt.js 1.0.0 nuxt generate で静的ファイル生成 netlify にホスティング https://www.netlify.com/ GitHub 上で nuxt
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse(Google ChromeのデベロッパーツールのAuditsタブ)というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑な処理を行っているため、サーバーサイド処理が重い。 UI 上無駄な遅延処理を行っているため、クライアントサイドの描画が遅い。 というサーバー側とクライアント側両方の課題がありました。クライアントサイドの「無駄な遅延処理」というのは; 検索結果取得が REST API 化されているにも関わず、再検索の度にページリロードを行い、サーバーサイドの描画からやり直している。 という実装に問題がありました。下図がリニューアル前のページ描画の様子です
Vue.jsとNuxt.jsを使用して、スマホアプリで見かけるようなアニメーションを伴った滑らかなページ遷移をWebページに実装するチュートリアルを紹介します。 Native-Like Animations for Page Transitions on the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近見かけたページ遷移のアニメーション 使用する理由 前提となる知識 始めてみよう フックの設定 最近見かけたページ遷移のアニメーション フロントエンドのUIで、最近私が最も刺激を受けたのは、スマホアプリで見かけるような滑らかなページ遷移(トランジション)です。こういったインタラクションを実装するのは難しそうに見えますが、一度実装方法をマスターしてしまえば、さまざまなUIに使用することができます。 ここで紹介する方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く