[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita
2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。 まずはView Transitions APIの特徴から紹介したいと思います。 特徴1：異なるDOM要素間でアニメーションできる アニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。 例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。 特徴2：アニメーションがCSSで自由自在 アニメー
![[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/40f0bdd895644cfec9e8497e08ce9c0883edb8d0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSlMlRTMlODElQUElRTMlODElOTclNUQlMjAlRTMlODMlOTElRTMlODMlQUYlRTMlODMlQkMlRTMlODIlQTIlRTMlODMlODMlRTMlODMlOTclRTMlODElOTclRTMlODElOUZWaWV3JTIwVHJhbnNpdGlvbnMlMjBBUEklRTMlODElQTdNUEElRTMlODIlOTJTUEElRTMlODElQkYlRTMlODElOUYlRTMlODElODQlRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWFhYTFiMTIzMDhkZDMyYmMzOTg1Zjg5MjVhYWZiOWI4%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhY2Nlc3MzMTUxZnEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWMzODc4MWE1MWNmYzRiZGJlNTcyYzdjM2RkZDMxNDE0%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3626912c51af4270ad5c67dd51388c1e)
Next.jsを勉強してみる その② 〜画面作成編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まいどです。 右腕が折れても、意外と仕事ってできるもんですね。3ヶ月前に右腕の上腕骨を骨折したバックエンドエンジニアのやなさんです。 さて、前回はNext.jsの開発環境を構築する記事を書きました。 画面作成に必要なものをインストール 今回はTypeScriptで書いてみようと思うので、ターミナルで以下コマンドを実行します。 # typescriptで記述するので必要なライブラリをインストール # Next.jsのプロジェクトルートで実行すること npm install --save-dev typescript @types/react @types/react-dom @types/node コンポーネントで画面のひな形を作成 各画面を作成する前にひな形となるファイルを作成します。 今回の雛形にはheadタグやシステム共通となるヘッダー、フッターを定義しています。 ※ 画面のstyle
こんなツールがあったのか！Webページが世界各地でどのように見えるか、位置情報を使ったコンテンツも確認できる -Geo Screenshot
Webページが世界各地のブラウザでどのように見えているか、位置情報を使ったコンテンツのローカライズ、コンテンツが国によってフィルタで妨げられていないかなどを確認できる無料オンラインツールを紹介します。 対応都市の一覧 ワールドワイド ローケーション 世界各地65ヵ所以上のデータセンターに対応。 結果はすぐに サーバーのクラスタはキューを使わずに、直ちにスクリーンショットを生成。 Webkitエンジン レンダリングには、WebFonts/CSS3をサポートしたWebkitエンジンを使用。 マルチデバイス 多数の異なる解像度のデバイスをサポート。 ローカライズ HTTPヘッダーに含まれる言語指定、多言語フォントのサポート。 API スクリーンショットを処理するバッチのAPIを提供。 単に世界各地でどのように見えるかだけでなく、Geo Location（位置情報）を使ったサイトの確認にも役立ちま
Facebookページの投稿をGraph APIで取得する方法
Facebookページの投稿をGraph APIで取得する方法を紹介します。 １．はじめに Facebookページの投稿を取得して、ウェブページなどに反映させたいことがあると思いますが、Facebookページの投稿を取得する方法がわかりません。 ということで、Facebookページの投稿を取得する方法を紹介します。 ここではGraph APIを使って取得します。 また、Graph APIを使って取得するために、ここでは「Graph APIエクスプローラ」を利用します。 またFacebookページは、私の管理している「小粋空間」を利用します。 ２．Facebookページの投稿をGraph APIで取得する Graph APIエクスプローラのページにアクセスしてログインします。 「FQL Query」の部分に、 me?fields=id,name がデフォルトで設定されていると思います。 この
URLだけでサイトのスクリーショット（サムネイル）を表示できるAPIまとめ | QWERTY.WORK
サイトのサムネイルに『Mozshot』を使っていましたが、使用者が多いせいか最近は画像が重たくてページの表示が最近遅いです。でも、こういったサービスは便利なので、他にないか探してみました。 wordpress.comのAPI エンコードしたURLを指定します。「w」パラメータで画像の幅を自由に指定できWordpressのプラグインではないので、Wordpressを使用していないサイトでも使えます。 https://s.wordpress.com/mshots/v1/https%3A%2F%2Fja.wordpress.com?w=250 【サンプル】wordpress.com のスクリーンショットを幅250pxで取得してみました。 WordPressのプラグインは以下があり、ショートコードでサムネイル表示できるので便利です。 Browser Shot BM Shots HeartRails
Movable Typeの記事ページで直接編集できる「EntryEditorプラグイン」
Movable Typeの記事ページで直接編集できる「EntryEditorプラグイン」を公開します。 １．主な機能 Movable Type 6から提供されるDataAPIを利用して、記事ページ上で記事の各フィールドを編集できるようにします。 このプラグインは、コミュニティ機能を利用して開発した同様のプラグインをDataAPI用にリファクタリングしたものです。 コミュニティ機能を利用する場合、そもそもコミュニティブログやコミュニティ掲示板のテーマを元に作る必要がありますが、DataAPIはそういった制限がないので、通常のウェブサイトやブログでも管理画面にログインせずに記事の更新が可能になります。 プロトタイプで操作してみたものをYouTubeにアップしました。 評価用のベータ版を公開後、Movable Type 6のリリースとあわせて正式版をリリースする予定です。 ベータ版では既存フィー
Google Analytics APIでページのアクセスランキングを作る方法
Google Analytics APIを使って、ウェブサイトやブログなどの人気ページのアクセスランキングを作る方法を紹介します。 １．完成イメージ 本エントリーで紹介する手順で作成すれば、ブログに次のようなランキングを表示できるようになります。 厳密には、ランキング用HTMLファイルを出力するところまでの説明となります。 ブログにランキングを表示させる手順は割愛していますので、出力ファイルを適宜インクルードしてください。 ２．作成手順 「Google Analytics API class for PHP」の中ほどにある「googleanalytics.class.zip」をクリックして、ファイルをダウンロード。 アーカイブを展開して、中にあるGoogle Analytics APIを利用するためのライブラリ「googleanalytics.class.php」をサーバにアップロードして
お手軽WordPress Tips：wordpress.comのAPIを使ってスクリーンショットを取得する
ちょっとネタ的なTips。WordPressで スクリーンショットを取りたい時に、 wordpress.comの非公開APIを使って スクリーンショットを手軽に取得しよう という内容。使い方次第ではなかなか 便利なんじゃないでしょうか。 wordpress.comのスクリーンショットを取得するAPIを使うとキャプチャせずともスクリーンショットが撮れるので楽です。 非公開API以下のようにスクリーンショットを取得できるようです。 http://s.wordpress.com/mshots/v1/http%3A%2F%2Fexample.com%2F?w=250 このブログだと以下のような感じ http://s.wordpress.com/mshots/v1/http%3A%2F%2Fkachibito.net%2F?w=500 URL部分をエンコーディング、w=数値で幅を設定出来ます。この非
ブログにPDFを直接埋め込めるWordPressプラグイン「Embed PDF」:phpspot開発日誌
WordPress ? DirtySuds - Embed PDF WordPress Plugins ブログにPDFを直接埋め込めるWordPressプラグイン「Embed PDF」。 正式なドキュメントはPDFで発行されることが多いですが、そんなPDFをGoogle Doc Viewer を使って、そのままページ内で閲覧できるようにするものです。 直接PDFひらいてもいいのですが、他のテキストと共にPDFを埋め込めるっていうのは意外と便利ではないでしょうか？ 利用は、プラグインをダウンロードして有効にし、投稿記事内で、[embed]PDFのURL[/embed] のように記述するだけ。 WordPressプラグインのフィルタ機能を活用した便利な機能ですね。 元となったPDFファイルはこちら(PDF注意)です サムネイル表示も出来ます。Google Doc Viewerって凄い！ 関連エ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
任意のWebサイトからデータを抽出し、リンクカード化してくれるAPI・「Microlink」 | かちびと.net
WEBディレクターなら知っておきたいWEBサービス25選｜designaholic -Creative Column-