2023/11/18(土)で開催されたフロントエンドカンファレンス沖縄 2023に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 Discord の方だけで公開されている方は、勝手に公開しない方がよいかと思いましたので、記載しておりません。 X アカウントについては、資料に記載されていたり、資料公開のツイートで分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube で配信されていて、アーカイブが残るようです。 タイムテーブル 10:10 [ゲストセッション]Figmaプロトタイプ入門〜インタラクションイメージの
こんにちは、くだくらげです。今年のはじめにはじめてのUIデザインという本を共著で書きました。 他の著者さんの章もとっても勉強になって面白い内容になっています。読んでいただいた方からのコメントも嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、ご興味ある方はぜひ手にとってみていただけると嬉しいです。 peaks.cc 概要 今回はUI/UXのためのSoundとHapticsのデザインについてです。 人間はおよそ８割以上を視覚からの情報に頼っていると言われています。目から入ってくる視覚情報は確かに重要ですが、一方で印象に影響を与えたり、記憶に残りやすい情報というのは聴覚や嗅覚、触覚といった別の感覚が強く影響すると言われています。 iOSやAndroidといったスマートフォン端末にはスピーカーやHapticsエンジンが組み込まれています。ディスプレイ上のインター
はじめに 本記事は 個人開発 Advent Calendar 2019 25日目の記事です。 最近connpassに掲載されている勉強会を地図を見ながら検索できるようなサイトを作りました。 （もともと同僚が勉強会でこんな感じのアプリを作っておりそれに触発された） https://connpass.net/ 使った技術としては フロント: typescript、react、redux、circleci、cloudfront、s3、terraform バックエンド: go、gin、docker、nginx、circleci、ecs、terraform な感じです。 仕事ではあまりインフラまわりを触ることがなく、CI/CD環境の知見があまりないが、それっぽいものを自分で作ってみようとしました。 フロント アプリケーション アプリケーションの土台はcreate-react-appを使いtypesc
「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方までを紹介しました。本記事では、Lottieアニメーションの実装方法について紹介します。 Lottieの組み込みはプラットフォームに応じたさまざまな実装方法が用意されていますが、一般的なウェブの方法を例に紹介します。実装編の前編となる本記事では、手軽に組み込むことができるLottie-Playerを使用して実装します。 iOS、Androidアプリケーション等のそのほかの実装方法は公式ドキュメントを参照ください。 アニメーションの実装 ウェブ向けの実装方法は大きく2パターンあります。HTMLメインの方法と、JavaScriptメインで実装する方法で
iOSプロジェクトに対してモジュール分割しながらSwiftUIを部分適用している事例 - Mirrativ Tech Blog
こんにちは、クライアントエンジニアの竹澤(@to4iki)です。 MirrativのiOSチームでは、開発効率の最大化を狙い以下に取り組んでいます。 データフローの単方向化 (Fluxアーキテクチャの強制) 宣言的UIによるView実装 (SwiftUIの部分適用) 責務分割 (モジュール分割) 今回の記事では、どのような構成でSwiftUIを適用し始めたか、また、MirrativのiOSプロジェクトの構成やプロダクト特性の課題感からセットでモジュール分割を進めている点を紹介します。 背景 前提となるプロジェクト構成 導入に向けて決めたこと SwiftUIでどこまで実装するか 本体アプリではなくSwiftPackageを活用する 垂直分割するか水平分割するか 方針やTipsを明文化し育てる 新規開発部分のUI開発をFeatureモジュールで行う SwiftPackage: SwiftUI.
「B/43」のAndroidアプリをリリースしました！使用している技術を紹介します。 - inSmartBank
こんにちは。 「B/43」のAndroidアプリ開発に携わっている あんざいゆき（yanzm） です。 先日「B/43」のAndroidアプリをリリースしました🎉🎉 play.google.com この記事では「B/43」のAndroidアプリで採用している技術や苦労した点、工夫した点などを紹介します。 採用している技術（抜粋） Jetpack Compose 一番の特徴は Full Jetpack Compose にした点です。 開発のお話をいただいた今年の春時点で Jetpack Compose は beta 版がリリースされており、夏には stable 版がリリースされることも発表されていました。 今から開発するなら Jetpack Compose でやりたいと思っていたところ、iOS / Android エンジニアをしている nakamuuu からも Jetpack Compo
大規模なマルチモジュール開発をSwiftPackageに移行して運用してみた - Timee Product Team Blog
はじめまして、iOSエンジニアの阿久津 @sky_83325 です。 タイミーでは、機能ごとにEmbedded Frameworkに分割して開発するマルチモジュール開発に取り組んでいます。 現在では、本体AppやAppExtensionの他に7つの共通Framework、そして16個の機能Frameworkという規模になってきました。 今回は、そのマルチモジュール開発をEmbedded Frameworkではなく、Swift Packageを利用した方法に乗り換えてみたので、その成果や学びについて共有できればと思います。 取り組んだ経緯・背景 タイミーでは、技術顧問の@d_dateさんと隔週で「ツバメの会」という情報共有の場を設けています。そこでは、直近タイミーで取り組んでいることの共有や相談をしたり、SwiftやiOS、その他エンジニアリングの最近の話題について議論したりしています。 そ
この記事は、Supabaseチームによる記事「Making the Supabase Dashboard Supa-fast」の和訳記事です。 Supabaseのダッシュボードは、この1ヶ月でより機能が充実しました。Monacoによる強力なSQLエディタを用意しました。私たちは、データベースのAirtableのようなビューを構築し、編集が簡単になりました。 機能・性能・DX-3つの選択 特にシングルページアプリケーションでは、新しい機能を追加すると、パフォーマンスがすぐに低下することがあります。ここでは、開発者の体験(DX)を損なうことなく、アプリケーション内で良好なベースラインパフォーマンスを保証するために行ったステップを紹介します。 ベースラインを確立し、目標を設定する。 測定できないものは直せない パフォーマンスを向上させるために、容易に解決できる問題がいくつかありましたが、その前に
アニメーション実装の選択肢のひとつになると思う。Lottieを試してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
サイト制作時に今は当たり前のようにおしゃれなアニメーションがついてる時代がきましたね。 CSS3で実装できることも増え、あんまりゴリゴリJavaScriptでってことは減ってきてる気がします（もちろん必要なときはいっぱいあるのでケースバイケースですが）。 制作者としては、意図した通りのアニメーションをつくりたい、それもなるべく手間をかけずに、という思いがあるのではないでしょうか。 そんな悩みを解決してくれるかもしれない「Lottie」を試してみました！ ※今回、After Effectsの使い方はありません、ごめんね。JavaScript側の組み込み方の説明です。 Lottieとは Airbnb制作のiOSやAndroidにも対応したアニメーション用のライブラリです。Adobe After Effectsで作ったアニメーションを、そのままWebにもってこれるやつらしい。 一部使えない機能も
2019年11月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン・アクセシビリティ Figmaチームが本国から来日！ Figma Tokyo Meetup レポート – Yahoo! JAPAN Tech Blog 私も参加していましたが、日本でのFigmaの盛り上がりを改めて感じました。 どんなふうに見えてるの？ 色覚に配慮したUI設計事例 #UI – Yahoo! JAPAN Tech Blog Yahoo!ファイナンスの例などを挙げ、色覚に配慮したUI設計について書かれています。 コーディング CSSフレームワークBulmaについて – 一休.com Developers Blog CSSフレームワークの比較など。以前はBootstrapユーザ
2019年10月7日にGoodpatchでUX Engineer Meetupというイベントがあり、主催のおすみさんに声をかけていただいて登壇することととなった。 一時期のUXデザイナーのように、UXエンジニアというのはにわかに広まりつつあるも、UX Designer以上に「何者」なのかが掴みづらい。正直ぼくもわからないというか「UXエンジニア」という肩書が適切なのかはわからない。しかし、このイベントをきっかけに「UXエンジニアは何者なのか」もとい「私は何者なのか」を考え、その内容をほぼそのまま発表した。 このイベントでは僕だけではなく、Cookpad、Goodpatchとより実践的にデザインとエンジニアリングの境界をもたずに事業を進めてきている会社のUXエンジニアも登壇するので、より実践的、事例を交えた話になるだろうとおもい、僕からはUXエンジニアと呼ばれる人々の概要と、僕自身のキャリア
After Effectsでアニメーションをつくるチュートリアル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おつかれさまです。デザイナーのみやです。 去年の暮れにようやっとFlashからAfter Effectsに移行しました。 結果、それまでけっこう時間がかかっていたアニメーション制作が格段に楽になったので、使えるようになるまでに勉強した基礎的なことを噛み砕いてお伝えします。 今回伝えたいこと After Effectsの基本的なこと 基本的なアニメーションの作りかた なぜデザイナーの僕がアニメーションを作っているのか デザイン提案の際にアニメーションを含めて提案するためです。 言葉よりも絵、絵よりも動画の方が伝えられるイメージの量も質も上がります。限られた期間で作り、限られた時間でプレゼンをする中で、不要なやり取りを極力減らし、魅力をより伝えられるのではないかと考えています。 最近のサイトは細かなところでもアニメーションしていることが多いですよね。「実装時にはグリグリ動きます」ではクライアン
ブラウザ上で共同編集ができ、業界のデファクトスタンダードと言っても過言ではないデザインツールのFigma。今回は、プロトタイプ機能のスマートアニメートのイージングに注目して解説します。 Figmaのイージングは、プリセットが豊富なうえに、カスタマイズが可能でアニメーションをこだわりたい方でもしっかり作り込める機能です。 プロトタイプ上での設定方法からウェブへの実装方法まで紹介していますので、デザイナーの方はもちろん、エンジニアの方にもおすすめの記事です。 用意されているイージング 前提知識として、イージングはアニメーションの変化の仕方を表現するものです。適切なイージングを設定することで、アニメーションの動きをより自然に表現できます。 Figmaでイージングを設定するには、プロトタイプ機能のスマートアニメートを利用します。スマートアニメートについては、以下の記事で詳しく紹介していますので、合
「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 画質の劣化を伴わないLottieによるアニメーションの導入は、UI改善・コンテンツの没入感の形成・リッチな体験を提供する効果が期待できます。 本記事ではLottieの概要から、まずはデザインツール「Figma」を使ってお手軽にLottieを作る方法を紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する Lottieとは ベクターとラスター まず、画像形式について少し整理しておきましょう。画像形式はベクターとラスターの2種類に分けられます。ベクターとラスターの違いについては記事『SVGで始めるマイクロインタラクション入門』で解説していますが、簡単にいうと拡大しても高い解像度を保ちボケないのがベクター画像、ボケるのがラスター画
先日のUX Engineer Meetupでプロトタイピングの話をしました。懇親会での話やツイート、ブログなどを見ていると結局「UXエンジニアとは」を気にしている人が多い様子だったので、自分なりの考えを書いてみます。 はじめに結論UXエンジニアという言葉に明確かつ具体的な定義はありません。 UXという1つの言葉に5つの階層があり多義的な以上、UXエンジニアも多義的だからです。自分なりに広く定義するなら「エンジニアリングを軸としながらデザインの力を掛け合わせ、より良いユーザー体験を実現する人」です。なお、デザインという言葉も広義の意味で捉えているので、まあ広い定義です。 ただ、僕自身2年以上UXエンジニアと名乗って複数社で働いていたり、世の中にUXエンジニア的な人が増えて色々な事例も生まれていることから、自分なりの考えはだいぶ整理されてきました。 なぜUXという言葉を使うのか時々、UXなんて
ウェブテクノロジーが進化するほど、年を追って重要になっているアニメーション。 効果的にユーザーの視線を目的のエリアに誘導できるだけでなく、見た目も魅力的に演出できる注目のデザインです。 この記事では、ウェブデザイン制作で活用したい最新UIインタラクション、アニメーションをまとめてご紹介します。 Webサイトやスマホアプリのアニメーション実装参考アイデアに役立てみてはいかがでしょう。 アニメーションの実装で気をつけたいポイント ウェブサイトでもモバイルアプリでも、デザインに動きを取り入れるときは、まず基本ルールを確認しておきましょう。実装しやすくなるのはもちろん、デザインの統一性も表現しやすくなります。以下の記事も参考にしてみると良いでしょう。 【保存版】ユーザーを魅了する！UXデザインの正しいアニメーション完全ガイド また、知っておくとアニメーション制作に役立現役プロデザイナーのテクニック
Includes 36,600+ assets, full access to app, and upgrades for one year. Price will increase as library grows.
rel="preload"を極めるために必要な2種類のプリロード機能 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
Safari, Chrome はデスクトップ版とスマホ版で確認しましたが共に動作の違いはありませんでした。 Firefox のバージョンが2つあるのは本稿執筆中にバージョンアップがあったので試してみたところ、タイムリーに @import の Preload Scanner に機能改善が見られたため参考までに両方載せました。 項目数で最も多くの種類のリソースを Preload Scanner が読み込めたのは Safari で、次いで IE11, Chrome, Firefox71, Opera が並ぶ結果となりました。IE11は意外な健闘を見せていますが、Preload Scanner にあたる機能を最初に導入したブラウザがIE8である事を考えると妥当な結果とも言えます。 どのブラウザも共通して対応しているのは <script> <script async> <link rel="styl
![rel="preload"を極めるために必要な2種類のプリロード機能 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/446cc54caa1510ed65919319dc78c4f7e9a1e036/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2019%2F12%2Fchrome_watarfall_2.png)
動き（英: Motion）は、感情を動かすことがよくあり、サイトデザインにとっては、ユーザーを魅了するのに必要なスパイスと言えます。静的なUIデザインに動的なダイナミックさを加え、魅力的に演出することができます。 この記事では、現在人気となっているWebアニメーションとモーショングラフィックスの最新トレンドをまとめて紹介しています。 動きが新感覚！Web制作で参考にしたいUIインタラクション、アニメーション36個まとめ 動きが新感覚！Web制作で参考にしたいUIインタラクション、アニメーション36個まとめ WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】 1. 背景アニメーション アニメーションでブランドストーリーを作成したり、楽しい製造工程を見せたり、カリスマ的なアニメーションヒーローをつかってチームを紹介したりすることができます。 ウェブサイトの背景
ウェブサイト・アプリで使えるLottieアニメーションの基本。作成時のポイントから注意点、活用事例まで解説 こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。 After Effectsなどで作ったリッチなアニメーションを、ウェブサイトやアプリケーションに実装できる「Lottie（ロッティー）アニメーション」をご存知ですか？ Lottieはどれだけ拡大しても高画質で、実装も簡単なアニメーションライブラリです。ウェブ制作にLottieを取り入れるメリットは多く、GoogleやMicrosoftといった大手企業も活用しているほどです。 わたしたちneccoも2020年に導入し、これまでさまざまなプロジェクトでLottieを活用してきました。 この記事では、Lottieの基本から実際の活用事例、作成方法までご紹介します。作成時の注意点もまとめているので、Lo
オリジナル性の高いデザイン作品の投稿で知られるDribbble（ドリブル）は、人気のトレンドやスタイルをいち早く取り入れるために、世界中のデザイナーが参考にしているデザインコミュニティです。 この記事では、Dribbbleで話題の作品ベスト100を参考に、人気グラフィックデザインに欠かせない「旬」なトレンド10個を詳しくご紹介します。 1. ニューモーフィズム by Alexander Plyuto for Heartbeat Agency 新しさと懐かしさのあるデザイントレンドが人気急上昇となっています。Googleのマテリアルデザインとスキューモーフィズムを組み合わせた新しいスタイルで、2020年注目トレンドのひとつ。シンプルでミニマルな見た目は好印象ですが、ドロップシャドウはやりすぎになってしまう恐れも。しかし、見た瞬間に驚きを与えるスタイルと言えるでしょう。 ニューモーフィズム？C
HDMI Forum Closing Public Specification Access Is Hurting Open-Source GPU Drivers - Phoronix
HDMI Forum Closing Public Specification Access Is Hurting Open-Source GPU Drivers Written by Michael Larabel in Standards on 6 January 2021 at 07:57 AM EST. 103 Comments It's been recently elaborated why the likes of FreeSync support over HDMI aren't coming to the open-source drivers, at least not yet... It stems from the decision by the HDMI Forum to prevent public access to the HDMI specificatio
こんにちは。Androidエンジニアの伊藤です。 スギサポwalkという歩数計アプリの開発を担当しており今回は Jetpack Composeを導入したので、この取り組みについて書いていきます！ Jetpack Composeとは なぜ導入しようと思ったのか どのように導入していったのか？ 問題の解決 プロダクトへの導入方針 実際に導入した箇所の説明 連続ログインボーナス 画面構成について レイアウトについて 工夫した点 改善点 実際に導入してよかったこと 今後の課題 Jetpack Composeとは Jetpack ComposeはAndroidの新しいUIツールキットです。 宣言的UIとも呼ばれ、状態をUIとして表示するという仕組みです。 AndroidでUI開発を簡素化して、直感的なAPIにより良い開発体験が得られます。 また、数多くのAndroidのプロダクトで利用されています。
Flutter初心者たちが3ヶ月で新規アプリをリリースした話 #Flutter - Tech Blog
ネイティブエンジニアの桐山です。 Timersでは新規事業として、毎月無料でましかくプリントを印刷できるサービスを始めました！ 新規アプリでFlutterを採用し、3ヶ月でiOS・Androidアプリをリリースした話の概要編をお届けします。 はじめに この度弊社で新しい家族向けアプリをFlutterで作りました！ https://famm.us/ja/print/top 毎月10枚がずっと無料の写真プリントアプリ Fammプリント Timers, Inc.写真／ビデオ無料apps.apple.com play.google.com おおまかなフロー Why Flutter? 弊社では元々家族アルバムアプリFammや年賀状アプリをネイティブで開発しており、写真を扱うネイティブ開発の知見も人的リソースもありました。新規アプリの開発するにあたって、ネイティブで開発した方が良いのでは？という意見が
はじめに 株式会社マネーフォワードPdM。おうです。🙇♂️ この記事では、個人開発でSNSを作ろうとした際に デザインや実装でこだわったこと 集客のためにやったこと 振り返って思ったこと ちょっとした宣伝 ... について、話していきます。 SNSを作るのはほんとに難しいことですが、スケールすれば、世の中には新たな情報共有の形を吹き込むことができる、非常に意味のあることだと思います。 自分の今までの行動の整理も含め、これからSNSで起業しようと思う方々に、少しでも参考になるような情報を残しいておきたく思います。 サービスの構想 私はQuoraユーザーですが、Quoraでは基本、QA形式でしかディスカッションを進められないです。もう少し、多彩なディスカッション形式がないのでは？って思った時に、下記のアイディアが浮かび上がりました。 【デュエルディスカッション】 対立的な選択肢から、自分の
*:last-child]:mb-0" style="background-image: linear-gradient(0deg, #eee 0%, #fff 100%);"> Webデザイナーのための Lottieアニメーション実装講座
Adobe After Effectsの面白いエフェクト機能24選【一部作例付き】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おつかれさまです。デザイナーのみやです。 みなさんAdobe After Effects（以下：After Effects）のエフェクト機能を使ったことはありますか？ エフェクトとは特定の処理があらかじめ用意されているAfter Effectsの機能のことで、写真を粒子状に散乱させたり、雨が落ちた地面の波紋を表現したりなど様々な表現を簡単に設定することができます。 私はAfter Effectsを業務で使うことは多々あるのですが、Webサイトでの動きの提案だったり、lottieでの実装前提だったりして、あまりエフェクト機能を使っていませんでした。 そこで全部一度使って遊んでみたところ、After Effectsにはデフォルトでかなり多くのエフェクトが用意されていることがわかりました。 その中でもアイデア次第で面白くできそうなものを、一部実例付きで紹介していきます。 独学でつまずいていません
これはno plan inc.の Advent Calendar 2023の11日目の記事です。 どもー、no plan inc.のおかむーです。 LottieというアニメーションファイルをSTUDIOのノーコードで実装してみたので、 今回も知見を共有できればと思います！！ この記事でわかること LottieアニメーションをSTUDIOで動かす方法がわかります 先に結論 STUDIO(ノーコード)でこんな感じのパリピなアニメーションが爆速で入れられます 中央上(ペンギンさん) サイド下(踊っている人々) Lottieとは Lottieは、JSONベースのアニメーションファイル形式です。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大
この記事は『最新版で比較するAdobe XDとFigmaの違い - デザイン機能編』の後編です。 前編ではAdobe XDとFigmaのデザインに関する主要な機能を比較しながら紹介しました。それぞれのツールでデザインを行う上での得意、不得意について理解いただけたかと思います。 後編では作成したデザインに画面遷移やインタラクションを追加できる「プロトタイプ機能」と、ユーザーテストやデザインのフィードバックが行える「共有リンク機能」について紹介します。最後に、各ツールに用意されている「学習手段」についても紹介します。 プロトタイプ機能の比較 プロトタイプ機能とは、デザインに画面遷移やインタラクションを追加して実際の動きを試作できる機能です。これによって、早期のユーザーテストや仕様のチェック、インタラクションのイメージ共有が容易になります。 トリガーとアクション トリガーとはユーザーが行う「クリ
GitHub - flame-engine/flame: A Flutter based game engine.
The goal of the Flame Engine is to provide a complete set of out-of-the-way solutions for common problems that games developed with Flutter might share. Some of the key features provided are: A game loop. A component/object system (FCS). Effects and particles. Collision detection. Gesture and input handling. Images, animations, sprites, and sprite sheets. General utilities to make development easi
2Dモーショングラフィックス制作特化アプリCavalryとAfter Effectの機能比較・チュートリアルまとめ｜まりーな／エンジニア
Cavalryとは 2Dモーショングラフィック制作に特化した動画作成アプリ。現在beta版が公開されている。 Cavalryのアツいところ ドキュメントをみていて、このアプリアツい・・・これから来るんじゃないか・・と思ったので触ってみた。 ○Googleシートとのデータ連携で、データと動画の作成を分けれる ○After Effectsよりも軽い（ちゃんと検証してないけど・・多分） ○要素の複製、連動に特化している ○After Effectsのエフェクトがそれぞれのオブジェクトにくっつけるイメージ(Cinema 4DにUIが近い)でわかりやすい とはいっても、本業動画製作者ではないので、ツッコミどころが満載かと思いますが・・・・それ違うよ・・・があればコメントにお願いします CavalryとAfterEffectsと基本的な動作を比較してみる ちゃんとGetting Startedからある
Adobe XDの2021年最後のアップデートとして、「ビデオの再生」と「Lottieの再生」が登場しました。MP4形式の動画と軽量なアニメーションを再生できるLottieファイルがAdobe XDで扱えるようになり、より没入感のあるプロトタイプが作成できるようになりました。 今回の記事では、これらの機能の使い方から活用方法、注意点を紹介します。動画やモーションをXDのプロトタイプに組み込むことで、開発チームとデザイナーの認識合わせに役立つはずです。 動画やモーションが入った状態のデザインを早めに確認しておきたいというデザイナーはもちろん、プロジェクトの早い段階で方向性を共有したいというディレクターもぜひご覧ください。また、Lottieファイルの対応によって実装段階でのアニメーションの再現が容易になるため、エンジニアにも見逃せない機能となっています。 ビデオの再生の使い方 ビデオの再生はそ
年末にシェアされてたこちらの記事が気になってたので、No Code（コードを書かずにぽちぽちでプロダクトが作れる）ツールを使って、奥さんの実家の酒屋さんのサイトを作ってみました。 - Lottieアニメーション組み込み - CMSブログ機能 - Scroll付随アニメーションの組み込みがざっくり実装要件でした が、3時間もかからず、 思いのほか、自由度高く作れて、「ああ、これは近い将来webマークアップ作業フローは本当に少なくなってそうだな〜」と軽い衝撃を受けました。 今回はそこで使用したwebflowの使い方について学んだことをシェアしてみようと思います。 No Code ツールの現在No Codeの語源はProduct HuntのRyanのこちらのブログに端を発するようですが、現在本当に様々なツールが出てきていて、No Codeでプロダクトを作るためのTutrialポータルまでできてい
LINEで働くエンジニアが、各職種別に日々の業務内容や開発体制、働く環境、今後の展望などについて学生向けに話した「新卒採用 職域別エンジニア会」。今回はiOS／Androidエンジニア会において、モバイルエクスペリエンス開発室副室長の岡本雄三氏が、LINEにおけるiOS／Androidクライアントエンジニアの業務内容や開発環境について紹介しました。 ミッションはLINEアプリのモバイルエクスペリエンス向上 岡本雄三氏：LINE新卒採用エンジニア座談会ということで、私から、iOS／Androidクライアントエンジニアの業務内容や仕事の環境について説明していきたいと思います。 はじめに、自己紹介いたします。私はLINE Platform Development Center2 モバイルエクスペリエンス開発室副室長の岡本といいます。よろしくお願いします。 当時はまだネイバージャパン株式会社でした
Animated icons in Lottie Framework for immediate implementation to your apps or websites.
【マルチデバイスチーム ブログリレー1日目】 イントロダクション こんにちは、エンジニアリンググループ・マルチデバイスチーム(以下「マルデバ」)の星野です。 エムスリーのエンジニアリンググループは、サービス開発を行う「事業チーム」と、各事業チームを横断してサポート/開発する「横断チーム」とに分かれております。私が所属するマルデバは「横断チーム」に位置し、各サービスの iOS / Android アプリ(およびそのBFF)の開発を専門に行なっており、私は主にこの後に紹介する m3.com アプリ、Web 講演会アプリ、m3.com CAREER アプリの開発を行っています。 今日から6日間「マルチデバイスチーム ブログリレー」と題し、マルデバメンバーでリレー形式でテックブログを執筆し、マルデバがどのような開発をしているのか・どんなチームなのか・どんなメンバーがいるのかなど、ご紹介できればと思
LottieFilesがモーションデザインの複雑さを解消。Lottieの作成、編集、テスト、共同制作、配信がとても簡単に行えます。
lottie-react-nativeがAirbnbからコミュニティ主導になった影響とこれからの動き - KitchHike Tech Blog
Airbnb が React Native からネイティブアプリへ方針転換することを発表してから1年が経ちました。lottie-react-native の開発は Airbnb 社からコミュニティ中心に移り、継続されています。この記事では lottie-react-native 開発コミュニティの変遷と現状、そしてこれからの動きを紹介します。 はじめに キッチハイクエンジニアのタクです。lottie-react-native という Airbnb 製のアニメーション表示ライブラリを導入する過程で、issue や Pull Request を通してコミュニティの動きを知る機会がありました。それがきっかけで、ライブラリの内部実装や仕組み以外も理解することが、多角的な視点で実装することに繋がるのではないかと思うようになりました。 Airbnb による Lottie のリリース、React Nat
サーバーサイドの画像編集処理でメモリ使用量を抑える方法 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 こんにちは、開発チームの山下です。 業務ではスーパーデリバリーの開発を担当しています。 今回は私がスーパーデリバリーの開発で関わったサーバーサイドにおける画像編集処理でメモリ不足を防ぐノウハウを共有したいと思います。スーパーデリバリーではユーザーが任意の画像をアップロードできる機能があるため、まれに想定以上の高解像度画像が処理されてサーバーが Out Of Memory エラーを発生させることがありました。 そこで私が任されたタスクが「画像編集処理でメモリ不足を避けるために、バリデーションを追加する」です。 TL;DR サーバーサイドでの画像編集はメモリ使用量が高い操作です。 なぜなら処理される画像データはメモリ上に非圧縮のビットマップとして展開されるた
![サーバーサイドの画像編集処理でメモリ使用量を抑える方法 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1ba30738775f08153659422c29d77c3d32b19144/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2023%2F07%2Fsmartphone_camera_bijin.png)
webpack 4.44.1 Copyright JS Foundation and other contributors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to p
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドカンファレンス沖縄 2023 公開資料・Xアカウントリンクまとめ
アプリのUI/UXのためのSoundとHaptics Design - くらげだらけ
インフラが苦手な人の個人開発（ECS、terraform） - Qiita
最新版！ Lottieアニメーションの実装方法 - Lottie-Player編 - ICS MEDIA
Supabseチームはどのようにフロントエンドの高速化に成功したのか - バンクーバーで考え中
私はいかにしてUXエンジニアになったのか｜Hiroki Tani
Figmaでイージングを理解しよう！ プロトタイプの基礎から実装方法の紹介 - ICS MEDIA
最新版！ Lottieアニメーションの作り方 - Figma編 - ICS MEDIA
UXエンジニアとは - UX Engineer Meetup登壇後記 -｜sagaraya
2021年のWebはアニメーションが重要！参考にしたいUIインタラクション40個まとめ
Shape - 36000+ Icons & Illustrations to SVG, Lottie, React.
2020-2021年に注目！Webサイトアニメーションの人気トレンド7個まとめ
ウェブサイト・アプリで使えるLottieアニメーションの基本。作成時のポイントから注意点、活用事例まで解説 - necco note | necco inc.
Dribbbleで分かる、人気グラフィックデザインに必要なトレンド10個まとめ【2020年版】
スギサポwalkへのJetPack Compose導入の取り組み - メドピア開発者ブログ
個人でSNSサービスをリリースしたけど、開発から集客までのリアリティを包み隠さずお話しします。
WebデザイナーのためのLottieアニメーション実装講座 | C5log
【パリピ注意】LottieというアニメーションファイルをSTUDIOのノーコードで実装してみた - Qiita
最新版で比較するAdobe XDとFigmaの違い - プロトタイプ機能編 - ICS MEDIA
Adobe XD 待望の動画再生機能が登場！ビデオの再生とLottieの再生の使い方 - ICS MEDIA
Webflowのはじめかた｜Shintaro Nakajima
リリースから10年目を迎えても、やりたいことはまだまだある iOS／AndroidのLINEアプリを開発するエンジニアの働き方
A micro-animations library
スマホアプリ開発で採用している技術 - エムスリーテックブログ
LottieFiles: ウェブサイト＆アプリ用の軽量アニメーションを無料でダウンロード。
日本関心度マップ ON THE MAP JAPAN | ヤフー・データソリューション