リファクタリングは、下準備がすべて 『グランブルーファンタジー』推奨ブラウザ「SkyLeap」が生まれ変わるまで
DeNAの多様に展開する事業や、それぞれの個性やライフステージに応じたフレキシブルな働き方、それらを受容するDeNAが根底に持つ考え方などを伝えるDeNA TechCon 2022 Autumn。ここで、株式会社ディー・エヌ・エーのAndroidエンジニアである手塚悠太氏が、『グランブルーファンタジー』推奨ブラウザ「SkyLeap」の開発を例に、リファクタリングの仕方について紹介しました。 リファクタリングはできていますか？ 手塚悠太氏：それでは、「レガシーな実装を丁寧にリファクタしてモダンな実装にする技術」について、手塚悠太が発表いたします。 自己紹介です。2019年にDeNAに中途入社し、当時はMOV、現在の名前はGOですね、こちらのタクシーアプリの乗務員さん向けアプリケーションを開発していました。またタクシーフードデリバリーサービス「GO Dine」のアプリケーション開発も担当をして
Xcode Previewsをまとめて実機で触れるUIプロトタイプアプリにする - nana開発者ブログ
@hiragramです。nanaのプロダクトマネージャーとiOSアプリ開発を担当しています。 nanaは現在フルリニューアルに向けた作り直しに取り組んでいます。2022年9月現在、デザインや仕様を練ることと、手触りを確かめるためのプロトタイプ実装とを、グルグル繰り返しているところです。そのグルグルをより速くするために作った仕組みを紹介します。 UI確認用のプロトタイプアプリ nanaのiOSアプリ開発において、私たちはコードを書かずとも簡単にモックを作れるようなよくあるプロトタイピングツールを使わず、ネイティブアプリとしてプロトタイプを実装しています。nanaのプロトタイプには単なるデザインの事前確認だけではなく、仕様に対する設計の事前確認、シンプルな良い設計のための仕様の事前確認といった目的があり、それらは既存のプロトタイピングツールでは実現できないためです。 SourceryでXcod
【React/Vue.js】UIコンポーネントのProps設計と具体的な作り方 | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、UI コンポーネントの Props 設計について紹介します。 コンポーネントを初めて作る方や作り慣れていない方は、どのような Props 設計にすれば、汎用的にできるのか、どこまで Props に持たせるべきか悩んだことがあるのではないでしょうか。本記事では、具体的な実装例を元に解説していきますので、ぜひ参考にしてもらえればと思います。 おすすめの記事 はじめに 本記事では、UI コンポーネントの Props 設計と具体的な作り方を紹介します。基本的に他のフレームワークや言語でも活用できますが、チームメンバーのスキルアセット、要件定義など様々な要因で本記事で紹介する内容とマッチしない場合があります。今回は設計の一例であるこ
マイクロソフト、「.NET MAUI」がリリース候補版に到達。単一コードでWin/Mac/Android/iOSのUIを記述可能に
マイクロソフト、「.NET MAUI」がリリース候補版に到達。単一コードでWin/Mac/Android/iOSのUIを記述可能に マイクロソフトは、デスクトップアプリからモバイルアプリまで単一のソースコードでクロスプラットフォーム対応を可能にするUIフレームワーク「.NET Multi-platform App UI」（以下、.NET MAUI）がリリース候補版に到達したことを発表しました。 現時点でSDKのAPIは完成し、ライブラリも正式版と互換性があるものになったとのことです。 .NET MAUIには、デスクトップとモバイルの両方のプラットフォームに適用可能なUIを構築するために最適化された40以上のレイアウトやコントロールなどが同梱。 単一のソースコードでWindows、macOS、iOS、Androidそれぞれのネイティブユーザーインターフェイスを備えたアプリケーションが開発可能
Flutterの勉強に役立ちそうなリンク集
初学者目線です。 公式 Flutter公式サイト 言わずもがな。チュートリアル、Codelab、ウィジェットカタログ、レシピ集などもある。 Flutter YouTubeチャンネル 公式が出してる、FlutterやDartに関する動画たち。 Flutter Widget of the Week 数分でウィジェットやパッケージについて学べる。 Flutter Gallery Flutterでよく使うWidgetを、Web上で触りながら確認できる。 Flutter samples Flutterで作られたサンプルアプリがまとまっている。 pub.dev パッケージの公式サイト。 Flutter Community Plus Plugins プラスプラグインの公式サイト。 動画 The Complete 2021 Flutter Development Bootcamp with Dart Ud
2022年、Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS
クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与えます。メタバースなどの影響でデザインやイラストにも3Dの人気が高まり、最近ローンチしたスタートアップでも使用しているのを見かけます。 クレイモーフィズムのスタイルをさまざまな要素に適用できるCSSを紹介します。 clay.css clay.css -GitHub 「クレイモーフィズム」とは clay.cssの特徴 clay.cssのデモ clay.cssの使い方 「クレイモーフィズム」とは 「クレイモーフィズム（Claymorphism）」は、UIデザインのフレッシュで新しいコンセプトです。呼び名はMichał Malewicz氏によって作られたもので、デザイナーはUIデザインへのこのアプローチの可能性を探求することに興奮しています。 メタバースやN
Flutterに出会ったことで脳汁プシャーになった話 - GoTheDistance
Flutterに出会ってしまったせいで、Flutterを中心に生きていこうと考えている私のポエムでございます。 エンジニアとしての頭打ち感 2016年に35で独立した時はエンジニアとして頭打ちを感じていて、エンジニアとして独立することはあまり考えていなかった。初心者ではないけど、上級者になれないなと感じていた。 エンジニア一本じゃ難しいと考えた時、その隙間を埋める役割はありかなと思った。業務系のシステム導入なら、コンサル〜要件定義の上流工程をやり、開発系なら開発寄りのディレクター。その時々で研修講師。この辺を組み合わせて、今までやってきた。 コードは細々と書いていた。JavaやPython、メンテナンスしてるシステム(WPF)やアプリ(iOS / Android)なり、kintoneでjs書いたりWordPressのプラグイン開発みたいなやつをチラホラやってた。小規模な受託なら受けていた。
Reactヘビーユーザーが思うSvelteの良いところ - Qiita
はじめに https://svelte.jp/ 皆さんはSvelte使っていますか？ 私はReactやVueをよく利用していましたが、最近Svelteにハマっています。 Reactヘビーユーザーの私が感じた、Svelteの良いところ、改善してほしいところを挙げてみました。 Reactを使う上で特に不満があったわけでもないですが、Svelteに乗り換えてみると無駄が多かったことに気付かされました。 私の思うSvelteの良いところをいくつか挙げさせていただきます。 書きやすい、分かりやすい SvelteはReactと同様に、宣言的にUIを記述することが出来ますが、Reactと比べてより少ないコードで書けるようになっています。 例えば、React.useEffectのような記述は、以下のように書くことが出来ます。
AWS Amplify Studioが変えるフロントエンド開発の未来とは
概要 こんにちは。 KDDIアジャイル開発センターの小板橋です。 この記事は、KDDI Engineer&Designer Advent Calendar 2021の11日目の記事です。 先日(2021/12/3)、re:Invent2021でAWS Amplify Studioが発表されました。 今回は、そのAWS Amplify Studioについてまとめ、検証していこうと思います。 AWS Amplify Studio AWS Amplify Studioの機能を要約すると、フロントエンド開発者に最小限のコーディングでフロントの開発ができる Amplifyのバックエンド構成およびそれらを管理する機能を統合した開発環境 ちなみに、amplify admin uiとの違いは？？ 昨年のアップデートでamplify admin uiというものが出ています。 実は今回のAWS Amplify
文化祭入退場・混雑管理システム "CAPPUCCINO" 開発・運用記
この記事は、文化祭実行委員会に所属する[1]現高校 3 年生 3 人で文化祭の入退場混雑管理システム「CAPPUCCINO」を 2 年間に渡り開発し、実際に運用した記録を残したものです。 ＊この記事は以下の 3 名による共同執筆です 著者・開発者: すばる (@su8ru / Twitter:@su8ru_) 高校３年生。普段は TypeScript に使われながらウェブフロントエンド技術で遊んでいます。 たけ (@takeno_hito / Twitter:@Takeno_hito) こうこうさんねんせい。コーディングよりはゲームのほうが好きです。上下二人に揉まれながらも一応リーダーをやってました。 ふわわあ (@fuwa2003 / Twitter:@ibuki2003) 高3。Vimmer。半言い出しっぺなのに後半コード書いてないとかで最近は肩身が狭い思いをしています。 1. CAP
Vivaldi ブラウザがオープンソースでない理由 | Vivaldi Browser
オープンソースのコミュニティに関わる人々から、なぜ Vivaldi ブラウザは完全なオープンソースではないのかと、よく訊かれます。このブログ記事で Vivaldi の立場を詳しくご説明したいと思います。 見方によっては、Vivaldi ブラウザのソースコードをオープンソースライセンスの下でリリースするのは、とても簡単なことのように思えるかもしれません。 Vivaldi は無料で提供されており、検索やパートナーとの提携で収益を得ています。そう考えると、Vivaldi の開発に役立つ可能性があるのに、なぜソースコードにアクセスできるようにしないのか？という疑問がわきますよね。 Vivaldi としては、そのような観点があることも理解していますし、Vivaldi 社内でもオープンソースやオープンソースのソフトウェアの使用を支持する人が多くいるのは事実です。この点は社内でもよく議論されています。
よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。 ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。 コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.
フロントエンド開発のための Figma
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
Tailwind CSS製UIデザインのHTMLコードをコピペできるFlowrift（便利ツールまとめも公開）
Tailwind CSSという言葉、最近よく耳にするようになっています。 カードやボタンなどUIデザインを基本としたCSSスタイリングが特長のBootstrapなどのフレームワークに比べ、Tailwind.cssはHTMLに直接スタイリングを行ってしまおうという考えで、今までのCSS設計のアプローチと全く真逆とも言えます。 そのため、ひとつの要素に追加された膨大なクラス名を見ると、カスタマイズしにくいと感じるひとも多いようです。 そんなときは、Tailwind.cssで利用可能なUIデザインのHTMLスニペットを集めた便利ライブラリFlowriftを活用してみましょう。 ヘッダーやフッター、ナビメニューといった基本から、ヒーローイメージ、CTA、サービス、お問い合わせフォーム、値段表、ギャラリー、404ページといったホームページ制作でよく利用するUIコンポーネントのコードをボタンひとつでコ
フロントエンド刷新のために DevTools を作って開発を捗らせる - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの麦島(@mugi_uno)です！ 2021年5月に新しくメンバーとして加わり、富山からフルリモートで働いています。 最近はチームメンバーに誕生日を祝ってもらって嬉しかったです🎉 さて、以前に "kintoneのフロントエンド刷新に向けた取り組み"*1 というエントリでもご紹介しましたが、現在サイボウズ社内では kintone で利用するフロントエンドの技術スタックを刷新する取り組みを進めています。 その一環として、 "Closure Tools DevTools" という Google Chrome 向け拡張機能を作成しました。 作成した DevTools は kintone に限らず利用することができるため、Chrome ウェブストアで公開しています。 chrome.google.com ソースコードも次のリポジトリでご確認いただけます。
カルーセルUIを実現するJSライブラリまとめ(2024年版) - 導入手間や機能の比較紹介 - ICS MEDIA
いずれもMITライセンスで公開されていますので、個人・商用問わず利用可能です。 Slick.js Slickスリック.jsは簡潔なコードで実装できるのが特徴のモバイルフレンドリーなカルーセルライブラリです。機能は少なめですが、ナビゲーションや表示するスライド数を変更するといった基本的な機能は備わっています。jQueryプラグインのため実装にはjQueryを読み込む必要があります。タッチ・スワイプ操作にも対応しています。ReactやVue向けのモジュール、TypeScriptのサポートは公式で提供されていませんがOSSで存在します。 このJSライブラリの基本的な実装と、アニメーションをフェードに変えた作例を用意しました。 基本の作例 サンプルを別ウインドウで開く コードを確認する <div class="slick carousel"> <div>1</div> <div>2</div> <
スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる
スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt
アクセシブルなフロントエンドコンポーネントの完全ガイド - 後編 | POSTD
※前編がこちらにあります 目次 icon links inputs keyboard navigation navigation menu modals prefers-reduced-* “skip” links SVGs tabs tables toggle switches tools tooltips video/audio players アクセシブルなインプット 2019年、WebAIMは上位100万件のWebサイトのアクセシビリティを分析し、エラーがないページの推定割合は1%未満というショッキングな結論に到達しました。アシスティブテクノロジー（支援技術）に頼っている人にとってインクルーシブで使いやすいサイトを作成するには、セマンティックHTMLの基礎を正しく理解する必要があります。Oscar Braunertのインクルーシブなインプットに関する記事は、彼の「小さく始めて共有・
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UXPin | The Full-Stack UX Design Platform
