【Chome126】View Transitions APIで滑らかな画面遷移を実装する

2024/06/15 6 users View Transitions API

こんにちは！ Chrome 111からView Transitions APIが利用可能になりましたが、今まで試す機会がありませんでした。 今回満を持して試してみたところ非常に面白かったので、この記事で共有したいと思います。 また、2024年6月11日にリリースされたChrome 126からView Transitions APIが強化されましたので、その点につい... 続きを読む

[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita

2024/06/09 30 users API View Transitions MPA 別ページ

2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように... 続きを読む

静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能

2023/09/11 250 users SPA 静的サイトジェネレータ アニメーション astro

静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever.... 続きを読む

Next.js 13 Template と Layout の使い分け

2023/09/06 14 users layout template 再レンダリング 使い分け方

Next.js 13には、LayoutとTemplateというよく似た機能が存在します。 この記事では、それぞれの特徴と使い分け方についてまとめてみました。 Layoutとは？ Layoutは複数のページに渡って共有されるUIのことを指します。 特徴としては画面遷移が行われた際に、その状態を保持し、再レンダリングは行われません。またLayou... 続きを読む

池田 泰延 on Twitter: "Chrome 111がリリースされました🎉 このバージョンには嬉しい新機能が盛りだくさんですが、もっとも注目したいのはView Transitions API。 ウェブのUIアニメーションにとって

2023/03/07 20 users API UIアニメーション 池田 ウェブ https

Chrome 111がリリースされました🎉 このバージョンには嬉しい新機能が盛りだくさんですが、もっとも注目したいのはView Transitions API。 ウェブのUIアニメーションにとって、革命的な機能です。 画面遷移… https://t.co/jkh7za2e4W 続きを読む

Web フロントエンドの実装において本来の機能を損なってはいけない

2022/12/25 211 users 実装 フロントエンド 本来 web 機能

2022.12.24 昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方、データの取得・ルーティン... 続きを読む

Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io

2022/04/21 226 users SPA jxck.io ミッシングピース 改善 MPA

Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、 History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、 SPA が抱える多くの問題だけでなく、 MPA すら改善する可能性のある API だ。 この API の目的と... 続きを読む

SPA(Next.js)のスクリーンリーダーによる画面遷移で工夫したこと

2022/02/02 14 users SPA スクリーンリーダー Next.js

こんにちは、Ubie株式会社でデザインエンジニアをやっているtakanoripです。 UbieではユビーAI受診相談というサービスを開発しており、症状に関する質問をするページ（以下「質問ページ」という）を中心にアクセシビリティ向上のための様々な改善を進めています。 今回はその中の1つの事例をご紹介します！ Ubieでのアク... 続きを読む

【M5paper】天気情報ボードを作る（画面遷移なし）【UIFlow】｜kenta｜note

2021/05/08 271 users draw.io グラフ ラベル M5Paper 当初

CoreInkで作った、天気予報グラフのようなものを M5paperで作ろうと思います。 今回も本体を90度回転して使用します 下にグラフ、上に現在の天気など その他のスペースにいろいろ機能追加する予定。 今回は画面遷移なしで一つの情報のみをまず作ります デザイン Ｘ軸のラベルを置くの大変だった。 当初、draw.ioで書いて... 続きを読む

フロントエンドの制作者は持っておくとかなり便利！Webのさまざまなアニメーションの実装方法が分かる解説書 -動くWebデザインアイディア帳 | コリス

2021/03/23 18 users グラフ コピペ ナビゲーション バリエーション スライドショー

Webページやスマホアプリに動きやアニメーションを加えたい、そんな時にすぐに役立つコピペで利用できる解説書を紹介します。 コードはサポートサイトから最新版がダウンロードでき、画面遷移、ナビゲーション、ボタン、スライドショー、検索フォーム、グラフなど19種類にバリエーションが200個くらいあり、「この1冊が... 続きを読む

メルペイ Android のアーキテクチャとテスト - Mercari Engineering Blog

2019/12/18 5 users アーキテクチャ メルペイ デス Android テスト

こんにちは。Merpay Advent Calendar 2019 の18日目を担当する、メルペイ Android チームの @KeithYokoma です。 前回の記事ではマルチモジュール構成なプロジェクトにおける画面遷移の実装について、簡単な設計の方針から解説しました。 今回の記事では、メルペイ Android 全体として採用しているアーキテクチャやテス... 続きを読む

Nuxt.js/Vue.jsでもスワイプでページ移動したい - Qiita

2019/09/15 40 users Qiita スワイプ Nuxt.js Vue.js Pan

Nuxt.jsで開発しているけど、スワイプで画面遷移とかしたいなと思い、 いろいろ調べたときの備忘録。 vue-touch-eventsというのが良さそう(´ω｀) hammer.jsというライブラリのラッパーらしい。 hammer.jsではスワイプだけでなく、 Pan / Pinch / Press / Rotate / Tapも検知できるよう。すごい。。 インストール 続きを読む

Webサイトやスマホアプリの画面遷移や構造を設計するための無料フローチャート素材 -Greyhound Flowcharts | コリス

2019/07/31 56 users Sketch コリス プロトタイプ フローチャート 構造

Webサイトやスマホアプリで見かけるレイアウト・コンポーネント200種類以上のフローチャートが揃ったSketch, Figma対応の無料素材を紹介します。 無料とは思えないほど、非常に高品質です。 プロトタイプをデザイン...記事の続きを読む 続きを読む

新しいフレームワークを学ぶならTodoMVCではなくRealWorldを参考にしよう - Runner in the High

2019/06/09 739 users SPA 範疇 フレームワーク ToDoアプリ TodoMVC

よく新しいフレームワークを学ぶにはTodoアプリを作ってみるのがよい、と言われる。実際、Todoアプリを様々なフレームワークで作ってみたサンプルをまとめたサイトもあったりする。 ところが、実際に業務で作るようなアプリケーションはTodoアプリの範疇を超えている。とくにSPAにもなると、画面遷移やWebAPI連携、大規... 続きを読む

UIViewController の画面遷移などの振る舞いを protocol で実装する - アクトインディ開発者ブログ

2018/09/26 11 users Protocol iOS UIViewController

いこーよの iOS アプリの開発を担当している namikata です。今回は UIViewController の画面遷移などの振る舞いを protocol で実装する方法を紹介したいと思います。色々な機能の実装を進めていく上で、こう書いたら使い回しきくしいいんじゃないかなぁ、と考えながら辿り着いた実装なので、まだ見えていない問題点があ... 続きを読む

Google Developers Japan: 共通要素を使った途切れない画面遷移: RecyclerView から ViewPager へ

2018/04/09 64 users RecyclerView 共通要素

#DevFest16 1 #DevFest17 1 #hack4jp 3 A/B Testing 1 A4A 4 Actions on Google 9 Addy Osmani 1 ADK 2 AdMob 31 Ads 13 Agency 1 AIY 2 AIY Vision Kit 1 ALPN 1 AMP 56 AMP Cache 4 AMP for Email 1 AMP Story 2 a... 続きを読む

無料で動きのついたデザインモックアップを作りiOS・Androidで動作確認ができる「Fluid UI」 - GIGAZINE

2018/02/21 50 users モックアップ GIGAZINE 既存 Android パーツ

「Fluid UI」は既存のパーツを配置するだけでWebサイトやアプリのモックアップをサクサク作成でき、簡単な画面遷移や複数人での編集も行えるサービスです。実際に使ってどんなことができるのか試してみました。 FluidUI.com - Create Web and Mobile Prototypes in Minutes https://www.fluidui.com/ Fluid UI のページ... 続きを読む

画面遷移がすごいサイトのまとめ | バシャログ。

2018/02/21 155 users バシャログ チャットグループ チェケラ tvk まとめ

TVKで再放送されているあぶデカにハマっているgamiです。あの時代の関内・馬車道あたり物騒すぎるでしょ…。 さて、以前にも紹介しました、気になるデザインを共有するDesignClipという社内のチャットグループより、画面遷移がシームレスでこいつぁすげえや！となったものを幾つか紹介できればと思います。チェケラ！ 佐久間徹設計事務所 デザインはすごくシンプルで動きもいいと印象によく残ります。 下位ペ... 続きを読む

「RootViewController + Wireframe」で画面遷移での消耗を回避する - ペンギン村 Tech Blog

2018/01/14 20 users Wireframe rootViewController

2018 - 01 - 14 「RootViewController + Wireframe」で画面遷移での消耗を回避する 自己紹介 はじめまして、ペンギン村で一番やかましい住人のナガクラ( @nagakuta )です！ Slackだけでなく、ブログもやかましく更新していきます！！（宣言） TL;DR RootViewController を AppDelegate.window.rootView... 続きを読む

<a>か<button>か - hitode909の日記

2017/12/07 91 users Button submit Form input type

2017 - 12 - 07 <a>か<button>か クリックできるものがあって， <a> にするか <button> にするか，という話をしていて，いろんな観点があるなと思ったのでメモ． 単なる画面遷移なら <a> 単にformを送信したいときは， <input type="submit"> や <button> <button> はdisabled属性を使って無効状態にできるので，押せない... 続きを読む

サイトやアプリの画面遷移を分かりやすく見せる、ユーザーフローを作成する要素が揃ったプラグイン -UserFlows | コリス

2017/04/19 58 users コリス プラグイン Sketch ユーザーフロー アロー

Webサイトやスマホアプリの画面遷移を伝えるフローチャートやユーザーフローを3つのショートカットで作成できるSketchのプラグインを紹介します。 ラインやアロー、条件付きロジック、フローダイアグラムなどが簡単に作成でき ...記事の続きを読む 続きを読む

サイト構造や画面遷移を分かりやすく見せる、サイトマップ・フローチャートを作成する要素がすべて揃った無料素材 -UX Flow | コリス

2017/03/02 96 users アロー コリス Sketch用 ラベル アイコン

Webサイトやスマホアプリのサイトマップ・フローチャートを簡単に作成できるSketch用の無料素材を紹介します。 ラインやアローをはじめ、アイコン、ラベル、パネルなど、サイトマップ・フローチャートを作成するための要素がす ...記事の続きを読む 続きを読む

「line://msg/text/～ 」からのLINEメッセージ送信の仕様が危険なので注意 | LINEの仕組み

2015/08/27 476 users MSG text 意図 中身 文章

LINEにて、「line://msg/text/」で始まるURLが拡散されています。このURLは、「指定された文章を送信するためのURL」で、「LINEで送る」ボタンの中身として利用されているURLなのですが、このURLから送信に至るまでの画面遷移で、送信内容の確認画面が無い仕様のため、自分が何を送信するのかを確認できないまま送信してしまい、意図と反した投稿を行ってしまう危険性があります。 何を送... 続きを読む

Browserify, Babelify, React, Arda で画面遷移を表現する その1 | yukku++

2015/08/18 35 users browserify React arda Babelify

Browserify, Babelify, React, Arda で画面遷移を表現する その1 2015/8/17 タイトルのキーワード通り、React を使った Javascript 開発の入門的なのをやってみました。 yukku0423/demo-browserify-babelify-react-arda 考えたり試行錯誤したことを丁寧に記述してみた(つもり)ため前置きが長いです。ご了承く... 続きを読む

VASILYデザイナーチームがデザインインスピレーションを受けたアプリまとめ（2015年2月） | 株式会社VASILY(ヴァシリー)

2015/03/04 124 users iQON ヴァシリー アニメーション 良いアウトプット チーム

VASILYデザイナーチームが2月にデザインインスピレーションを受けたアプリをご紹介VASILYでは、より良いアウトプットをするためにもデザインインプットの時間を週1回設けています。画面遷移であったり、ちょっとしたアニメーションなど優れたUIをチームで共有し、実際にiQONのUIやUXという部分に反映しようと日々、試行錯誤しております。 今回はその中で、VASILYデザイナーチームが2月にデザイン... 続きを読む