FigmaのコンポーネントをVariantsで状態管理する｜ふじけん / kenshir0f
こんにちは、ふじけん(@kenshir0f)です。 Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何が変わったのか紹介したいと思います。 Variantsとは？複数のコンポーネントの状態をひとつにまとめて管理する機能です。 例えば、Buttonの[Default, Hover, Focus, Disabled]といった状態をそれぞれコンポーネントで作っていましたが、Variantsを使うことでひとつのコンポーネントで整理できるようになりました。 チュートリアル公式がチュートリアルを用意しているので、実際に触って試したい方はこちらをどうぞ。 Variantsの使い方(準備) Variants は複数のコンポーネントに対して使うことができます。状態の違うコンポーネントまとめてくれるので、複数のコンポーネント
デザイナーがデザインツールを使わずに、React を使ってデザインした話 | MEDLEY Developer Portal
2020-06-19デザイナーがデザインツールを使わずに、React を使ってデザインした話メドレーのデザイナー酒井です。最近、JobMedleyからCLINICSに異動しました。 自分はデザインはもちろん、HTML/CSS/JS 実装してプルリク送ったりしているちょっとフロントエンド実装領域に軸足が寄ったタイプのデザイナーです。 ここでは以前所属していた JobMedley 事業部の話をさせていただきます。 当時、JobMedley の社内システムのリニューアルプロジェクトにデザイナーとして参加していました。通常、デザイナーがデザインをするときには Skecth や Figma のようなデザインツールを利用するのが一般的かと思います。 弊社でも基本的にはデザインツールでデザインを行うことが多いのですが、プロジェクトによっては、よりリアルなモックアップが必要なため、デザイナー自身がコーディ
Figmaで色の変数管理をする🎨｜わたなべなつき
こんにちは！コネヒト株式会社デザイナーのなっぴーこと、わたなべなつきです。 コネヒトでは、最近SketchからFigmaに移行しました！まだまだ慣れない点も多く、日々、FigmaでのUI運用を試行錯誤しています。 今回は、そんな日々の試行錯誤の中で発見した、FigmaのLibrary機能を使って、色を変数管理する方法についてしたためてみました🎨 Sketch&Zeplin→Figma移行時の「色」に関する課題弊社ではこれまでSketchでUI制作後、ZeplinにUIデータをimportし、エンジニアさんにZeplinのUIデータを参照していただいていました。 Figma移行に伴い、エンジニアさんから「ZeplinのときはStyleguide機能があって、実装時に共通化する色がわかりやすかったけど、Figmaにはないの？」というご意見があがりました。 Figmaでも色に変数がつけられる！
(更新回数①最終更新3.14)【Next.js】環境変数設定方法２選
何について書く？ Next.jsにおける環境変数の設定方法を2つ紹介 Next.js標準機能 Amplifyに設定してデプロイ時、適用する方法 内容 前提:Node.jsで動くPJファイルの環境変数はprocess.envオブジェクトに格納される Next.js標準機能（Next.jsバージョン9.4以降） PJファイル内に下記ファイルを作成することで、次の３種類の環境に合わせた 環境変数がprocess.envにセットされる。[environment]= development(ローカル開発環境),production(本番環境),test(テストコード実行環境) ※ステージング環境は未対応。 .env : 全ての環境に対する環境変数 .env.local : ローカル用環境変数。全ての環境の環境変数を上書き。 .env.[environment] : 特定の環境に対する環境変数。 .e
登さん、LAPRASをどう思いますか？そしてエンジニアは今後どうすべきですか？ - LAPRAS NOTE
2020年4月、無償かつ即日利用可能なリモートデスクトップ環境が公開され話題を呼びました。 現在16万人を越えるユーザーを擁する「シン・テレワークシステム」です。 今回登場いただくのは、そのシン・テレワークシステムの開発者として知られる登大遊さん。 登さんは、多忙な業務の傍ら次世代の人材育成にも関心を寄せ、安易な解決策に走るITエンジニアの未来に警鐘を鳴らしています。 「万人受けするアウトプットには価値がない」と断言する登さんに、これからを担うITエンジニアが抱える課題とその解決策について話を聞きました。 プロフィール NTT東日本 特殊局員 独立行政法人情報処理推進機構 サイバー技術研究室長 登 大遊さん（@dnobori） 1984年兵庫県生まれ。筑波大学在学中の2003年に、IPA（独立行政法人情報処理推進機構）の「未踏ソフトウェア創造事業 未踏ユース部門」に採択。自作の『SoftE
時代の変化でこれから生まれる8のデザイナー職 デザイン会社 ビートラックス: ブログ
”デザイナー”という仕事は時代やテクノロジーの進化によりどんどんその内容が変化する。一昔前はWebデザイナー、そのもう少し前はグラフィックデザイナーと呼ばれていた人達もいまではUIデザイナーやUXデザイナーを名乗っている。 また、クリエイティブテクノロジストなど最近だと数年前には存在していなかった肩書きのデザイナー関連職も出て来ている。 理由は単純で、Webデザイナーやグラフィックデザイナーの仕事がどんどん減って来ているから。言い換えると、世の中のニーズが変化するにつれ、デザイナーに必要とされるスキルと役割が変わってくる。ビジネスやユーザーの問題を解決するのがデザイナーの最大の役割なのであれば、その仕事内容が求められる フリーランスWebデザイナーという職業も無くなる4つの理由 いままでは1mmにこだわるのがデザイナーの仕事だったかもしれないが、これからビジネスにデザインを活用出来る人材が
【境界が無くなる】デザイナーとエンジニアの仕事内容 デザイン会社 ビートラックス: ブログ
アメリカ、特にサンフランシスコ周辺の会社を見てみると、エンジニアに加えてデザイナーの需要が高まっている。これは見た目やUXが優れたプロダクトへの人気が上がっており、企業としてもよりユーザー目線で使いやすくニーズにあった製品を作る為に、企画段階からデザイナーを参加させる事が増えていているからであろう。 それに伴いデザイナーの役割が、これまでの”見た目を美しくする”事から”ユーザー視点で最適な問題解決方法を見つけ出す”へと広がりを見せている。 このビジネスに対するデザインの重要性の高まり-デザインシフト-でデザイナーやエンジニアに求められるその役割と仕事の範囲に変化がおき始めている。恐らく10年程前と比べてみると、それぞれの仕事の範囲が多種多様に広がっているのに加えて、オーバーラップする領域も増えているだろう。 デザインの未来を示す15の変化で下記のような項目があった。 “デザイナーとエンジニ
エンジニア一人分の費用でプロダクトを開発できるアプリ開発サービス「ワンエンジニア」をリリース！
ネイバーズミール株式会社（本社：東京都千代田区、代表取締役：重光洋平）は、２０２１年７月２９日に、エンジニア一人分の費用でプロダクトを開発できるアプリ開発サービス「Onenginer（ワンエンジニア）」（https://onenginer.com）を公式にリリースしたことをお知らせいたします。 ■ Onenginerとは？ 初期フェーズのプロダクト開発を実現するサービスです。"こんなサービスを創りたい！"と素晴らしいアイディアを思いついても、サービスを世の中に出すまで莫大な時間と労力がかかります。チーム開発では、適正なメンバーを集め、異なるスキルや個性を持ったメンバーをまとめ、プロジェクトを成功に導いていくのは、一筋縄ではいかないことも多々あります。NoCodeツールで作成したアプリも、軌道に乗った後に自社運営に切り替える際には、コードを引き継ぐことができない為、また一からコードを書かなく
エシカルデザインとは – 時間と環境と生活に優しいデザイン デザイン会社 ビートラックス: ブログ
デザイナーの仕事の一つが、ユーザーが夢中になるプロダクトを作り出すこと。UXデザイナーを中心に、提供側のビジネスゴールを達成するために様々な“仕掛け”が施され、ユーザーが無意識のうちに夢中になっていることも多い。 我々が頻繁にインスタをチェックしたり、Amazonで必要のないものをついつい買ってしまったり、Netflixを延々と見続けてしまうのも、優秀なデザイナーによる数々の仕掛けのおかげだろう。 これは同時に、プロダクトがどのようにデザインされるかによって、それを使う人々の行動や思考パターンをかなり支配できるということにもなる。 大きな視点で見ると、ユーザーの人生をある程度左右するレベルの役割を担っていることにもなる。 倫理的側面からデザインを考えてみよう利益を優先する過程でユーザーの生活に対して必ずしもポジティブな影響を与えない状況が生まれる可能性がある。 デザイナー本来のユーザーニー
技術ようつべチャンネル集 - Qiita
役立つYouTubeのチャンネルまとめ 数学、物理、アルゴリズム、プログラミング、などなど自分が使う技術に役立ちそうだな、困ったときによく見たなと思うチャンネルを紹介する。 取っ掛かり、ハマりがち、コツみたいな物が拾える。数学がメイン。随時更新していくつもり。 当たり前だけどちゃんと本も読んで勉強するんだぞ。 背景 YouTubeは視聴する登録チャンネルの数が増えると、チャンネルが埋もれて発掘困難になりがち (chrome拡張でできるチャンネルのフォルダ分け機能は、ぽちぽち登録するのも面倒で、そのフォルダの中から掘り出すのも難しい) モチベが上がる(おべんつよしたい)チャンネルを探してるうちに湧いてくる、わんにゃんコンテンツ(だいちゅき)に流され一日が終わるため、 モチベが上がる有用なチャンネルにすぐにたどり着くために、よく使うQiitaに列挙しておくことにした Streamや大学専用サイ
解像度を上げる 🔬
2023 年 4 月にアップデートしました。 ビジネスにおいて「解像度が足りない」という言葉が使われるようになりました。この解像度という概念を、深さ、広さ、構造、時間の4つの軸で整理して、それぞれでどうやって解像度を上げれば良いのかについて解説しています。 このスライドを使ったYouTube での解説動画はこちら (2023年4月版) 東京大学 FoundX の各種リソース •FoundX Review - 起業家向けノウハウ情報 •FoundX Resource - 整理された記事の紹介 •FoundX Online School - 30以上の学習ビデオ教材 •FoundX Founders Program - 個室の無償提供とコミュニティ
小ネタ: Next.js のサーバサイド側の共通処理を括り出したい (Middlewareパターン) - Qiita
困った共通処理 Next.js で、全ページ共通の処理がある場合、あんまり頭のよくないコードを書くことになります。 export const getServerSideProps = async (ctx) => { // （全ページ共通処理）共通情報を取得する。 let commonInfo; try { commonInfo = await getCommonInfo(); } catch (exception) { // 取得できなければ404で返す ctx.res.status = 404; return { props: { notFound: true } }; } // いろいろな処理… } これを全ページにコピペして書くなんて信じられな〜い！ もちろん関数に抽出すればもっと短くなるかもしれないけど、 try { } catch () { return ... } は短くなら
Next.js + Firebase Authentication | shimar's blog
Next.jsとTypeScriptに入門したバックエンドエンジニアです。 以前、Nuxt.jsのアプリケーションでFirebase Authenticationによる認証を試したのですが、似たようなことをNext.jsでもやってみたので、纏めておこうと思います。 (Nuxt.jsとFirebase Authenticationを試した際にこちらの記事を書きました。) 要件 次の要件を満たす簡単なサンプルプリケーションを作ってみました。 サインインのページを提供する サインアップのページを提供する サインイン、サインアップは、メールアドレスとパスワードを使用する アクセスするのに認証が必要なページを2つ提供する トップページ プロフィールページ トップページからログアウトできる 認証していない状態で、認証が必要なページにアクセスした場合、サインインページにリダイレクトする 認証している状態
Vercelを使わずにAWSだけでNext.jsのISR対応!【serverless-next.js】
追加の記事を作成しました。 ※ 混乱させるかもしれないので一応、ところどころamplifyって出てきますが、apiの作成にamplify使っているだけで、デプロイとかにはホスティングにはamplify使ってないので。わかりにくくてすみません。 ※現状では、bucketRegionを指定すると、エラーになってしまいます。 https://github.com/serverless-nextjs/serverless-next.js/issues/1111 解決済み serverless-next.jsでISRに対応したNext.jsをデプロイのサポートが！ついに！ つい先日こちらのプルリクがマージされてました。 まだα版ではありますが。 ということで、やってみました！ 結論躓くことなくうまくいきました！ Vercel使わずにも生きていけるかも！ 実際に試した構成 serverless-nex
Vercel・SWRのコードを読んでみようの会
はじめに SWRのコードを読んだときのメモがてら、大まかな処理の解説をしていきます。 どの処理を追うか？ 基本となる、データ取得とデータ更新の処理を追います。 手元でクローンしたほうが追いやすいかもです。 注意 2021/5/23の状態のmasterの最新コードを参照しています。当たり前ですが、この解説は時とともに信憑性をなくしていきます。 データの取得 実際にuseSWRの data プロパティがどのようなデータ源から取得されリターンされているか追います。 function useSWR<Data = any, Error = any>( ...args: | readonly [Key] | readonly [Key, Fetcher<Data> | null] | readonly [Key, SWRConfiguration<Data, Error> | undefined] |
「光」 は 「電磁波」 の一種 | コラム | 光と色の話｜美術館・博物館への取り組み｜シーシーエス株式会社
「光」 は 「電磁波」 の一種 〜「電磁波の性質と人間生活との関わり」〜 「光」は「電磁波」の内の一種であって、歴史的には「人間の眼」の感覚である「光」という概念が、 電磁波の物理的エネルギーとしての紫外、可視、赤外という広義の「光」という概念に拡張されてきました。 今回は電磁波と言われるものの基本的な性質、その一種である「光」にも当然共通する性質についてお話します。 電磁波にはどんなものがある？ 「電磁波」とは、電磁的エネルギーが空間を振動しながら伝播していく物理現象を指して言う言葉です。光も電磁波の一種ですが、電磁波と呼ばれるものには、「光」よりもずっと波長の短い γ （ガンマ）線、 X 線などから、広義の「光」（紫外・可視・赤外）、更には「光」よりずっと波長の長いマイクロ波や放送用の電波まで、多くの種類があります。 X 線は、健康診断の時などにお世話になるレントゲン撮影に使われる「電
Next.js の状態管理 2020
Next.js といえば、SSG（JAMstack）が最近は特に話題ですね。1年前まではgetInitialPropsを用いて、どう SSR するのかという事が話題の中心でした。Next.js 9.3 以降、SSR をする際にはgetInitialPropsではなくgetServerSidePropsを使用することを推奨すると記載されています。（そして、getInitialPropsを使用することで自動最適化が無効となってしまう旨も）getStaticPropsやgetServerSidePropsを利用することで、私たちは SSG・SSR をページ単位で切り替えることができます。 「SSG・SSR」が共存する可能性がある場合、SSR にはgetServerSidePropsを利用することになります。この変化による影響範囲は多大で、状態管理とデータフェッチについて、再考する必要がでてきまし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
aws amplify
https://recharts.org/en-US/