はじめに こんにちは、ziと申します。 今回は、発表からしばらく経ってしまいましたが、View Transitions APIを使ったNext.jsでのスムーズなページ・UI遷移を目指して、実装してみます。 ※もし間違いやより良い実装方法など見つけましたら、ご指摘ください！ 🙇♂️ 今回実装した最終成果はこちらです。 また、コードはこちらにあります。 View Transitions APIとは？ View Transitions APIとは、2023年4月11日現在Chrome 111とOpera 97(pre-release)以降で実装されている遷移のアニメーションを行うブラウザーAPIです。下記は、MDNからの引用です。 View transitions are a popular design choice for reducing users' cognitive load,
こんにちは。やすです。 今回は、「unsupported option -G for targetの対処法」についてお話します。 iPhone16の発表が先日あり、ios18もリリースされました。 そこで、これまでFlutterアプリをXcodeでビルドできていたのに、 急に、unsupported option -G for targetこんな感じのエラーが出て、 ビルドができなくなりました。 ただ、色々海外のサイトなどを見て、対処できました。 まだ日本語の情報が少ないと感じたので、共有したいと思います。 unsupported option -G for targetの対処法1.Podfileにコードを追加まず、Flutterプロジェクトのiosフォルダの中に、Podfileがあります。 （ios/Podfile) ここに以下の画像の緑の部分を追加します。 pod 'Firebase/
Turn a fresh Ubuntu installation into a fully-configured, beautiful, and modern web development system by running a single command. That’s the one-line pitch for Omakub. No need to write bespoke configs for every essential tool just to get started or to be up on all the latest command-line tools. Omakub is an opinionated take on what Linux can be at its best. Omakub includes a curated set of appli
フローチャートとは、図形や矢印を用いて、システム処理や業務フローを分かりやすく示す図のことです。この記事では、フローチャートの概要やメリット、基本の記号、作成のポイントなどについて解説します。━━━━...
｜目次 ・はじめに ・これまでの管理方法 ・Cloud-managed certificates とは ・Cloud-managed certificates (Automatically manage signing) を使った構築 ・iOS側の設定 ・CI/CD (Bitrise) 側への反映 ・さいごに ・WRITTEN BY: 鈴木 ｜はじめに こんにちは。CAMでネイティブエンジニアをしている鈴木です。 iOS 開発をする上で避けて通れないものとして証明書管理があります。 これまで CAM のネイティブチームでは、fastlane match を利用して証明書の管理をしていました。 しかし、チーム体制の変化や管理するアプリが増加してきたこともあり、 fastlane match での管理が煩雑になってきました。さらに、運用中のアプリには成熟期に入り更新頻度が落ち着いてきたものもあ
はじめに useActionState とは useFormState に取って代わる新しい React Hooks です。 既存の useFormState の問題点を解消するために導入されました。 useFormState useFormState とは渡されたアクションの結果に基づき state を更新するためのフックです。 const [state, formAction] = useFormState(fn, initialState, permalink?); このように useFormState にアクションと初期 state を渡すことにより、フォームが送信された後のアクションの返り値と <form> や <button> に渡せる新しいアクションを取得できます。useFormState は <form> 内でなくても使用できます。 import { useFormStat
デザインエンジニアの表(@HirokiOmote)です。 Next.jsでApp Routerがリリースされて、1年が過ぎました。 弊社では、@hiroppyさんを技術顧問に迎え、Frontendを中心とした長期的な技術選定にご協力いただきました。 本日は、そこで得た学びをご紹介したいと思います。 App Routerについて 2023年5月にNext.js 13.4がstableとしてリリースされ、App Routerが登場しました。 ツリー構造でのファイル配置が基本となりました。 ディレクトリ構成とルーティング page単位・feature(機能)ごとに切り分けたディレクトリ構成が可能になったため、より直感的で再利用性の高い構造が実現しました。 // App Router . ├── dashboard │ ├── components │ │ ├── button.tsx │ │ └
conformはプログレッシブ・エンハンスメントを意識して作られたReactのformライブラリです。 RemixやNext.jsなどのフレームワークをサポートしています。react-hook-formのServer Actions対応は現状検証段階なのですが、conformはすでにServer Actionsにも対応しています。 本稿ではNext.js(App Router)におけるconformの使い方を中心に紹介します。 Server Actions もう散々他の記事や公式ドキュメントで紹介されていますが、簡単にServer Actionsについて復習します。 基本的な使い方 Server Actionsはクライアントサイドから呼び出すことができる、サーバー側で実行される関数です。 この機能の最も一般的なユースケースは、サーバー側のデータを変更する際に呼び出すことです。ReactはJ
Server Actionで状態遷移するベストプラクティスが知りたい フォーム入力 データベース更新 画面更新 というよくある黄金シナリオを考えます。 NextJSはSSR Frameworkなので可能な限りServer Componentを利用することを推奨しています。しかしServer ComponentではHooksが使えません。 これまでのようにAPIを叩く→State更新→画面再レンダリングという黄金のパターンは使えなくなります[1]。そこでhooksに頼らずにデータの更新と再レンダリングを行う新しいNextJSのメンタルモデルに適応する必要があります。 公式ドキュメントでおすすめされる１つの方法はServer Actionを使うことです。今日はこのあたりのベストプラクティスについて備忘録としてまとめます。 Server Action Server Actionとはサーバーサイド
以前 React Hook Form を無理やり Server Action に落とし込む という記事を書いたのですが。 最近 Conform というパッケージが Server Action へ対応しており、こっちを使おうみたいな記事がちらほら見受けられます。 とはいえ React Hook Form の書きっぷりと比べると結構イマイチな書きっぷりが多く、移行するのやだなーと思っていまして。 改めて React Hook Form で Server Action に繋げる方法はないかと探したところ、公式 に思いっきり記載がありました。 現在ベータ版とのことですが、結構開発も進んでいるっぽく、それならばと思い本サイトのコンタクトフォームで組んでみたところ、あっさり動いてくれました。 React Hook Form は公式ドキュメントがかなり丁寧に書かれているので、今更ここに書くようなこともな
今回やること 前回Next13の新機能ServerActionsを使ってユーザー登録を作ったので、ログインフォームを作っていく。 認証部分は（初めてだけど）NextAuthを使う。 Nextで実装できる箇所についてはNext側で実装していくためNextAuthはログインでの認証のみ実装。 作ってみた 流れと実装方法 実装の流れ NextAuthでログインの処理 ログインしているかどうかでヘッダーの内容を変更 セッションからユーザーのIDを取得しServer側でユーザーデータを取得する 本編とは逸れるのでここに記載するが今回からNextUIとReactIconsを導入。 導入方法は割愛するので各ドキュメント等参照。 NextAuthの準備 NextAuthについて。 認証機能をNextに実装できるライブラリ。 インストール まずはドキュメントに合わせてインストールしていく。 import {
こんにちは。皆さんはGraphQL Code Generatorを利用していますか？ 筆者は普段React/TypeScript/Apollo Client(またはurql)といったスタックでWebフロントエンドを書いており、その際にはGraphQL Code Generatorをほぼ必需品と言えるほど愛用しています。 サーバー側から提供されたスキーマやクライアント側が必要なデータを宣言したオペレーションから型やコードを生成し利用することで、ロジックに関する実装量が大きく削減でき、ミスを減らすことにもつながります。GraphQLを使う理由の1つと言っても過言ではないでしょう。 そのGraphQL Code Generatorではv3 Roadmapとして今後の方針が公開されており、client-presetという新しいプリセットが紹介されています。そこでは「GraphQL Code Gen
Deploy updates instantlyCode push is a cloud service that allows developers to push app updates directly to users' devices.
align-content works in the default layout in 2024, allowing vertical centering with 1 CSS property. <div style="align-content: center; height: 100px;"> <code>align-content</code> just works! </div> Supported since: Chrome: 123 | Firefox: 125 | Safari: 17.4 What’s new? The status quo for CSS alignment is to switch to flexbox or grid because align-content doesn’t work in the default layout (flow). I
Coda brings teams and tools together for a more organized work day.
iOS の開発ではよくあることですが、 UIViewController は Views 、 outlet 、 action 、 layout 、ビジネスロジックなど、あらゆる要素で埋め尽くされてしまうため、非常にゴチャゴチャして管理しづらくなります。 実際、 UIViewController は非常にシンプルであるべきです。 UIViewController は View を管理し、アクションの発生を監視するだけで良いのです。このチュートリアルでは、私がいつもプロジェクトに適用しているベストプラクティスの1つを共有したいと思います。 解決方法 画面を複数の UIView コンポーネント に分割し、それぞれの UIView コンポーネント が全てのレイアウトとスタイルを管理します。また、アクションや変更を ViewController に通知する責任も負います。その上、 UIView コン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
