ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
この記事では、「それ、何使ってるの？」と思わず聞きたくなるような、最新のWeb、オンラインツールをまとめてご紹介します。 めずらしいだけでなく、面倒で手間のかかる作業がほんの数クリックで完成の時短アイテムや、今までなかったけどあると便利なツールや素材を中心にセレクト。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. アイコンツール 4. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Make Way Grid Effect 一枚の画像を選択すると、他の画像が場所をゆずって、道を空けてくれるアニメーションエフェクト。 CSS Shadow Gradients 2色の配色によるグラデーションをつかった影、シャドウグ
待機状態のUIについて整理してみる(デザイン編)
Introduction 概要 待機状態 UI のデザインについての記事です。 待機状態 UI というのは、ローディングや情報の処理待ち時に用いられる UIのことです。ここで待機状態の UI と読んでいる理由は、各デザインシステムやガイドラインなどで言い方が違うため、今回はこのように言及させてください。 この記事では、既存のデザインガイドラインや既存のデザインシステムから待機状態の UI の概観、デザインにおいて考慮することをまとめます！ ベストプラクティスを提案するわけではなく、作成する際、配慮することを頭に入れて思考できる記事にします。 背景、課題感 WebFront-end における各 UI の実装を行おうと考えているが、実装する際、ビジネス側やデザイン側と実装する UI について話し合って作ることが多いです。 小さなプロジェクトだと、デザイナーがいない事も多く、Front-end
ICS MEDIAでは「Figma」の機能紹介記事を多く公開しています。Figmaは標準でも十分な機能が備わっていますがプラグインを利用することでより便利にカスタマイズ可能です。 今回の記事では、プラグインの使い方とオススメのプラグインを紹介します。Figmaは他のデザインツールと比べ、プラグインを利用するまでのハードルが低く、とても使いやすくなっています。まだ使ったことがない人や便利なプラグインをもっと知りたいという方にオススメの記事です。 Figmaプラグインの使い方 Figmaのプラグインを見つけるにはFigmaコミュニティが便利です。Figmaアプリのホーム画面の「コミュニティ」ボタンから、Figmaコミュニティへアクセスしましょう。 プルダウンから「プラグイン」を選択すると、コミュニティに公開されているプラグインの検索が可能です。 プラグインアイコンの右下のマークで、対応している
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。 Lottieを利用すれば、手軽にそして軽量に動画を貼り付けることができるので、これまでアニメーションを試したことのないひとにもオススメです。 コンテンツ目次 1. Lottie（ロッティー）って何？ 2. Lottieを利用するメリットは？ 3. Lottieアニメーション作成手順ガイド 4. After EffectsへのAiファイルの読み込み 5. After Effectsでアニメーション作成 6. Lottie JSONファイルでア
この記事では、日常行っているWebデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめてご紹介しています。 これらの新しいツールやサービスを利用すれば、これまで後回しにしていた面倒な作業も自動化し、生産性アップ、円滑なプロジェクト進行を実現できるでしょう。「もっと早く知っておけばよかった」と思わせてくれる便利ツールが揃います。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. デザインからコードへの変換ツール 4. Web制作お役立ちツール 5. プロトタイプツール 6. コラボレーションツール 7. アイコン素材パック 8. 面白ツール 新型コロナの影響で無料提供中のオンラインツール、サービスまとめ 現在新型コロナウイルスの世界的流行の拡大によって、無料提供されて
Share Facebook Twitter LinkedIn Mail Our next generation of Flutter, built for web, mobile, and desktop Today, we’re announcing Flutter 2: a major upgrade to Flutter that enables developers to create beautiful, fast, and portable apps for any platform. With Flutter 2, you can use the same codebase to ship native apps to five operating systems: iOS, Android, Windows, macOS, and Linux; as well as we
この記事では、Webデザインやグラフィックデザインの制作スピード、生産性がアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ分けされたこれらのツールやサービスを利用すれば、面倒な作業をラクにこなし、作業の効率化をアップできるでしょう。「なぜ今まで使っていなかったのか」、そんな気持ちにさせる便利ツールが揃いました。 各ツールはカテゴリごとに整理しています、以下のリストを参考にどうぞ。 コンテンツ目次 1. Web制作便利ツール 2. イラスト系ライブラリ 3. 配色ツール 4. デザインコレクション 5. プロトタイプツール 6. コラボレーションツール 7. 面白、クリエイティブツール Web制作フローが変わる！便利な最新オンラインツールまとめ Web制作便利ツール BrowserFrame 各種ブラウザ付きでスクリーンショットを撮影できるオンラインツール。目的の
mixi2ライセンスページから学ぶ、便利なFlutterパッケージ【120over】 - くらげになりたい。
mixi2がFlutter製だと聞いて、使いはじめてみたけど、 さわり心地とか含めて、いろいろ素敵だなと思い、 ライセンスページの利用ライブラリを見てみたときの備忘録(*´ω｀*) 見てみると、知らないすてきなパッケージがたくさんあったので、 ちょっと整理してみた(2024年12月18日時点) ライセンスページは以下からみれる 設定 > mixi2について > ライセンス 注意事項 ライセンスページに書かれているものをまとめただけなので、 実際には使っていないものや間接的につかっているものも含まれている可能性があります 公式情報ではないので、あくまで参考程度で！ ベース部分 土台部分はこんな感じっぽい。馴染みある構成 状態管理など: riverpod + flutter_hooks + freezed ルーティング: go_router フォント: google_fonts(Noto Se
Figmaは、現在人気となっているプロトタイプツールのひとつです。 SketchやAdobe XDと比較すると、「リアルタイムで他の人とコラボレーションできる」点が優れています。つまり、ネット環境さえあれば、ブラウザ上でいつでもプロジェクトを起動できます。 しかし、Figmaには大きな欠点とし、SketchやAdobe XDユーザーが使っているツールが見つからないことも。そんなときは、Figmaをカスタマイズ、拡張できるプラグインを利用してみましょう。 この記事では、Figmaのデザイン制作が捗る便利プラグイン52個をまとめてご紹介します。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. 生産性アップ、便利系 2. アニメーション向け 3. デザイン、クリエイティブ系 4. 配色、カラーパレット系 5. 地図、チャート図 6. ワイヤーフレーム
この記事では、絵を描くのが苦手という非デザイナーのひとにも役立つ、商用利用可能な無料イラスト素材を公開しているサイトをまとめてご紹介します。 最近のウェブサイトのランディングページやスマホアプリなどでよく見かける、キャラクターをつかったイラストスタイルに対応した、比較的新しい素材ライブラリが中心に揃います。 日本生まれのイラスト素材をダウンロードしたいときは、以下の記事でまとめているので、一緒に確認してみてはいかがでしょう。 全て無料、本当は教えたくないフリーイラスト素材サイト83個まとめ【商用OK】 商用OK！今どきのおしゃれイラスト素材を無料ダウンロードできる優良サイトまとめ Scale 高品質なイラストが毎日アップデートされており、カラーピッカーでお好みの配色に変更することも可能。クレジット表記不要で、商用利用にもばっちり対応しています。 DrawKit 毎週アップデートが行われてい
この記事では、日々進化を続けるWeb制作で役立つ、便利な最新オンラインツールをまとめてご紹介しています。 Ai、人工知能を利用した、これまで面倒だった作業を改善できるツールも見かけるように。また、プロトタイプツールFigmaに関する便利なプラグイン、テレワークによるオンラインミーティングで使えるさーびすなども増えています。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ Web制作便利ツール Eazy CSS どんなウェブサイトのデザインも、コード知識不要でタ
WebアニメーションはRiveが便利！
みなさんは、Web アニメーション使っていますか？ おそらくLottieを使っている人が多いかと思います。 ただ、Lottieには大きな問題がありますね？ そうです。 Adobe の After Effects（AE）がないとアニメーションが作れないという問題です。 たくさんの人たちが嘆き苦しみながら AE を使うために Adobe に課金している事だと思います。 そんな人々を救うため、 最近では AE を使わなくてもアニメーションを作れるようにとLottie Labというサービスが開発されていたりします。 しかし、まだまだ公開には至っていない状態です。（2022/12/07 現在） そこで、Rive 登場 AE で行っていたアニメーションの作成から、書き出しまで全て Web 上で完結できるサービスです。 今回は、アニメーションの設定から React で動かすまでをやってみたいと思います！
WYSIWYGウェブページビルダーを支える技術とSever Driven UIへの拡張 | メルカリエンジニアリング
この記事は、Merpay & Mercoin Advent Calendar 2024 の記事です。 はじめに こんにちは。メルペイ Frontend の @togami です。 私たちのチームでは Engagement Platform、通称 EGP という内製マーケティングツールの開発をしています。ポイントやクーポンなどのインセンティブの配布、LP の作成と公開、キャンペーンの作成など CRM 関連のことをマーケターや PM がコーディングの知識なしで行えるようにするための社内ツールです。EGP はメルカリ US を除く全てのプロダクトで使われている会社全体の共通基盤となっています。 本記事ではこの中でも LP 作成機能、通称 EGP Pages について紹介します。また、 EGP Pages の拡張版であり Server Driven UI の実装である EGP Cards について
Original article: https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo 以下はRoden( Twitter / GitHub / Webサイト )によるアニメーションライブラリ紹介記事、18 amazing 🤩 GitHub repositories that will help you 🪄 make a Beautiful Projectの日本語訳です。 help youの後の文字はPC版Chromeだと見えなかった。スマホ版では見れる。 元記事はリポジトリへのリンクだけというのも幾つかあるので、適当に解説を加えています。 18 amazing 🤩 GitHub repositories that will hel
Mirrativ のWebフロントエンドで使っているライブラリを紹介する！ - Mirrativ Tech Blog
こんにちは、フロントエンドエンジニア 兼 バックエンドエンジニアの駒木です。 iOS / Android / バックエンドのライブラリ紹介に引き続き、MirrativのWebフロントエンドで使用しているライブラリをご紹介します！ JSフレームワーク: React with TypeScript / Vue.js 8割以上のアプリケーションはReact + TypeScriptで実装されていますが、数年前に立ち上げた一部のイベントページはVue.js + Vanilla JSで実装されています。 ビルド・バンドルツール: Vite / Parcel / webpack 2021年5月くらいからViteを利用し始め、以後立ち上げたプロジェクトはViteベースとなっています。 Vite 8割、Parcel + webpackが2割といったところでしょうか。 webpack → Parcel →
Mirrativ の Android アプリで使っているライブラリを紹介する！ - Mirrativ Tech Blog
こんにちは、Androidエンジニアのもりぞーです。今回は Mirrativ の Android アプリで使っているライブラリをご紹介します。 こちらの記事のAndroid版になります！ tech.mirrativ.stream ライブラリ一覧 Google開発ライブラリ 公式ライブラリでありAndroid開発のスタンダードになっているので、Googleが提供しているライブラリは必要に応じて積極的に使うようにしています。 Android Jetpack Mirrativでは現状以下のライブラリを使っています。 "androidx.appcompat:appcompat" "androidx.annotation:annotation" "androidx.browser:browser" "androidx.cardview:cardview" "androidx.constraintla
2022年、Figmaで特にお勧めしたいプラグインのまとめ
Figmaにはプラグインがたくさんあります、その中から特に便利なプラグインを紹介します。WebサイトやスマホアプリのUIを作成するワークフローに役立つ便利なプラグインばかりです。 20 Awesome Figma Plugins to improve your Workflow by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 特にお勧めしたいFigmaのプラグイン 終わりに はじめに 私はここ数年の間、Figmaの多くのプラグインを実際に試し、定期的に使用してきました。Figmaコミュニティで提供されるプラグインは改善され続け、その勢いは衰える気配がありません。 私がこれまでに使用してきたプラグインの中で、特にお勧めできる20個のプラグインと、現在も更新されているプラグインをまとめるのに良
超インタラクティブなWebサイトやゲームが作り放題の「Playful」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、インタラクティブ性の高いWebサイトやミニゲームなどを簡単に開発できる無料のWebサービスをご紹介します。 一般的なWebサイトはもちろんのこと、ノーコードで高度なロジックを組み立てる機能も提供されているので、アイデアしだいでとてもユニークな作品を作れるのが特徴です。 オリジナリティあふれるWeb作品を手軽に作りたい人はぜひ参考にしてください！ 【 Playful 】 ■「Playful」の使い方！ それでは、「Playful」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトのトップページから【Sign Up】ボタンをクリックして、無料のユーザー登録を済ませておきます。 「メールアドレス」と「パスワード」を入力します（Googleアカウントも利用可）。 次に好きなユーザー名を設定しましょう。 最後に「LET'S PLAY
_%25E3%2581%25AE%25E6%2584%259F%25E6%2583%25B3)
Airbnb’s Server-Driven UI System(Ghost Platform) の感想 - laiso
Airbnb’s Server-Driven UI System(Ghost Platform) とは何か Airbnbが社内で取り組んでいる最新UI開発システム Ghost Platformとそのコンセプトの名前 元Airbnb AndroidエンジニアRyan Brooksによるポストを参照 A Deep Dive into Airbnb’s Server-Driven UI System | by Ryan Brooks | The Airbnb Tech Blog | Medium A Deep Dive into Airbnb’s Server-Driven UI System どういうものか サーバー(API)からデータと画面構造(UI)を配信して各プラットフォームで再生する仕組み UI言語部分を抽象化したもの Web、iOS、Androidに対応する なぜ画面構造を配信するの
この記事では、日々進化を続けるWeb制作で役立つ、便利な最新オンラインツールをまとめてご紹介しています。 これまではむずかしいと思っていたことや、面倒な作業をボタン一発で完了できるなど、デザイン制作の時間短縮にぴったりなツールから、遠隔でのテレワークにも便利な新機能、ユニークなツールやサービスなどが揃います。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Tail Blend CSSmix-blend-modeプロパティをリアルタイムで
Jetpack Composeを使った複雑なアニメーション事例 - Mirrativ Tech Blog
ミラティブのAndroidエンジニアのmorizoooです。 MirrativのAndroidアプリでは、新規で作る画面には積極的にJetpack Composeを活用しています。 tech.mirrativ.stream Mirrativは、多くのユーザーがゲームや雑談などの配信をしており、配信を盛り上げるための演出として通常のアニメーションに加えてLottieも織り交ぜ、リッチなアニメーションを実装しています。 Jetpack Compose導入以前は、AnimationListenerのCallbackを入れ子にする形で複雑なアニメーションを実現していたのですが、いざJetpack Composeで実装しようとなるとどう実装するのが良いのか苦心しました。 今回の記事では、実際にアプリで使っているアニメーションを例に、Jetpack Composeで作ったアニメーションを紹介します。
ここまでBazel の利点をいくつか紹介しましたが、採用には懸念点もありました。次のセクションからは、どのような懸念があったか、それをどのように解決したのかを紹介します。 Xcode 統合 Bazel と Xcode の統合は Bazel の採用においてもっとも大きな懸念でした。 Xcode はビルドシステムと密結合したやや特殊な IDE なので、外部ビルドシステムとの統合が難しいのです。特に indexing や LLDB デバッグを正しく動作させるのは困難でした。 統合とはつまり、Bazel によるビルドのアウトプットを利用して Xcode がサポートする動作を再現することを意味していて、主に下記のような要件を満たす必要があります。 Bazel のビルド構成ファイル群を解析して Xcode プロジェクトを生成する Xcode ビルドの実行を抑制し、代わりに Bazel ビルドを実行する
Mirrativ の iOS アプリで使っているライブラリを紹介する！ - Mirrativ Tech Blog
こんにちは、iOSエンジニアのちぎらです。今回は Mirrativ の iOS アプリで使っているライブラリをご紹介します。 Mirrativ ではどんなライブラリを使用していますか？と質問されることが時々あります。設定画面のライセンス情報に一覧で表示はされているものの、ライブラリ名だけでは用途が分かりにくいものもあるので、説明を添えて一覧で確認できるようにしようというのが今回の趣旨です。 ライブラリ管理には CocoaPods、Carthage を使用しています。最新のライブラリに追従できるように、一部のライブラリでは CI（Bitrise）上で定期的にバージョン更新のためのプルリクを作成しています。Swift Package Manager はまだ導入していませんが、タイミングを見て集約していけたらいいですね。 ライブラリ一覧 HTTP通信/ストリーミング Alamofire HTTP
簡単・便利・時短！おすすめ最新オンラインツール35選
この記事では、Webデザイン制作を快適にする最新オンラインツール30個をまとめてご紹介します。 ウェブデザインだけで、あらゆるクリエイティブな場面で活躍しそうな、「あったら便利。」を実現した驚きの新しいツールを中心にセレクト。 これまで時間のかかっていた面倒なことも、ウソのように簡単にこなす便利な機能や素材などずらり揃います。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 🧰 Webデザイン便利ツール 🦄 デザインツール 🗺 プロトタイプ・アイコンツール 🤯 クリエイティブ・面白ツール Web制作の効率性アップ！おすすめ最新オンラインツールまとめ 🧰 Webデザイン便利ツール 100 Buttons 自由に利用できるHTML/CSSボタン100種類をコレクション。どれも魅力的なアニメーションが目を引きます。GitHubページも公
【Unity】MirrativのギフトとUnityを活用したリッチな演出の紹介 - Mirrativ Tech Blog
こんにちは、Unityエンジニアの菅谷です。 今回はMirrativのギフト機能について紹介します。特にMirrativ内のアバター（エモモ）を利用したMirrativ特有のギフトについて解説します。 Mirrativのギフト ギフトは配信を盛り上げるための機能の一つで、視聴者がギフトを贈ることで配信者の画面に演出が表示されます。 代表的なギフト演出を仕組みごとに紹介します。 スタンプギフトやシンプルなアニメーションギフトでは、Lottieライブラリ（iOS/Android）を利用してギフトの画像をアニメーションさせています。 LottieはAfter Effectsから出力したJsonファイルをそのまま利用することができます。 スタンプギフトは画面上にアイコンやアニメーションを表示します。 ギフトは30種類以上あり、様々なシチュエーションに合わせて贈られています。 また、エモモと連動した
Figmaは、ブラウザ上から利用できるデザインアプリですが、特にチームでの共同デザインプロジェクトに最適なツールと言えます。 さらに、「こんな機能があればいいのに」というときも、プラグインを利用することで、自分好みにアプリの使いやすさをカスタマイズできる点も人気の理由のひとつです。 今回は、何千とあるプラグインの中から、実際にインストールしてみたWeb制作の作業効率がアップする便利なFigmaプラグインやツールをまとめてご紹介します。 自分だけの「最強」Figma、はじめませんか。 Figmaって何？ Figmaには、本格的なイラストも描くことができるベクターツールをはじめ、ウェブサイトのプロトタイプ作成機能、完成したデザインをWeb用HTMLに変換など、デザインプロジェクト全体を通して必要なツールが揃います。 Figmaはブラウザ上でデザインを行うため、共同作業によるリアルタイムのコラボ
Create and edit lottie animations, ship to your apps and websites.
【作例付き】WebデザインにおけるAdobe After Effects活用法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回は後編ということで、モーションデザインの作り方を実例を元に紹介していきたいと思います。実際のサイトに使うには色々足らないですが、After Effectsで制作する際のテクニックを交えて解説していきます。 この記事はこんな方におすすめです モーションデザインに興味がある Webサイトのアニメーションを自分で作ってみたいデザイナー After Effectsを触ってみたい また、制作にあたってこちらのサイトを参考にさせていただいております。様々なモーションの作例を周期表に見立てて紹介していて、ダウンロードもできるためどのように制作すれば良いかも見れるようになっています。 画像引用元：モーション周期表 Webデザインでモーションデザインを利用する機会 デザイナーがモーションデザインをWebデザインに取り入れる機会としては以下があるかなと思います。 デザインの提案 エンジニアとの共有 動画ま
制作事例：Lottieのアニメーションを手描き風に動かしたい！ SVGとWebGLを使った2つのアプローチ ICSでは2022年に株式会社ニコン様の中長期ビジョンを紹介する特設サイト『2030年のありたい姿』の実装を行いました。この記事ではサイトのメインビジュアルとして使用している手描き感のあるアニメーションを実現するために検証・実装したSVGとWebGLの技術ご紹介します。SVGやWebGLを活用したビジュアル表現に興味のあるエンジニアはもちろん、ウェブ技術を使ってどのような表現ができるのか知っておきたいディレクター・デザイナーの方も是非ご覧ください。 ▼ 特設サイト『2030年のありたい姿』 「人と機械の共創」を魅力的なアニメーションで描きたい 『2030年のありたい姿』の重要なキーワードが「人と機械が共創する社会」でした。特設サイトではこのビジョンを広く一般の方向けに伝えるため、株式
2023/11/18(土)で開催されたフロントエンドカンファレンス沖縄 2023に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 Discord の方だけで公開されている方は、勝手に公開しない方がよいかと思いましたので、記載しておりません。 X アカウントについては、資料に記載されていたり、資料公開のツイートで分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube で配信されていて、アーカイブが残るようです。 タイムテーブル 10:10 [ゲストセッション]Figmaプロトタイプ入門〜インタラクションイメージの
iOSプロジェクトに対してモジュール分割しながらSwiftUIを部分適用している事例 - Mirrativ Tech Blog
こんにちは、クライアントエンジニアの竹澤(@to4iki)です。 MirrativのiOSチームでは、開発効率の最大化を狙い以下に取り組んでいます。 データフローの単方向化 (Fluxアーキテクチャの強制) 宣言的UIによるView実装 (SwiftUIの部分適用) 責務分割 (モジュール分割) 今回の記事では、どのような構成でSwiftUIを適用し始めたか、また、MirrativのiOSプロジェクトの構成やプロダクト特性の課題感からセットでモジュール分割を進めている点を紹介します。 背景 前提となるプロジェクト構成 導入に向けて決めたこと SwiftUIでどこまで実装するか 本体アプリではなくSwiftPackageを活用する 垂直分割するか水平分割するか 方針やTipsを明文化し育てる 新規開発部分のUI開発をFeatureモジュールで行う SwiftPackage: SwiftUI.
「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方までを紹介しました。本記事では、Lottieアニメーションの実装方法について紹介します。 Lottieの組み込みはプラットフォームに応じたさまざまな実装方法が用意されていますが、一般的なウェブの方法を例に紹介します。実装編の前編となる本記事では、手軽に組み込むことができるWeb Player（lottie-player、dotlottie-player）を使用して実装します。 iOS、Androidアプリケーション等のそのほかの実装方法は公式ドキュメントを参照ください。 アニメーションの実装 ウェブ向けの実装方法は大きく2パターンあります。HTML
「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ロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方を紹介しました。そして、実装編の前編となる記事では、HTMLメインで実装できるお手軽な実装方法を紹介しました。 実装編の後編となる本記事では、JavaScriptメインに実装する方法の基本事項、およびパフォーマンス考慮についてのポイントを紹介します。 「Lottie=軽い」と思っていませんか？ 一般的にウェブサイトの「軽い」「重い」には、読み込みデータ量の大小を指す場合と、動作負荷でのもたつきを指す場合の2つの意味があります。確かにデータ量的にはLottieは軽いといえますが、実はLottieのアニメーションは表示や動作の負荷的に重くなりがちです。
「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 画質の劣化を伴わないLottieによるアニメーションの導入は、UI改善・コンテンツの没入感の形成・リッチな体験を提供する効果が期待できます。 本記事ではLottieの概要から、まずはデザインツール「Figma」を使ってお手軽にLottieを作る方法を紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する Lottieとは ベクターとラスター まず、画像形式について少し整理しておきましょう。画像形式はベクターとラスターの2種類に分けられます。ベクターとラスターの違いについては記事『SVGで始めるマイクロインタラクション入門』で解説していますが、簡単にいうと拡大しても高い解像度を保ちボケないのがベクター画像、ボケるのがラスター画
ブラウザ上で共同編集ができ、業界のデファクトスタンダードと言っても過言ではないデザインツールのFigma。今回は、プロトタイプ機能のスマートアニメートのイージングに注目して解説します。 Figmaのイージングは、プリセットが豊富なうえに、カスタマイズが可能でアニメーションをこだわりたい方でもしっかり作り込める機能です。 プロトタイプ上での設定方法からウェブへの実装方法まで紹介していますので、デザイナーの方はもちろん、エンジニアの方にもおすすめの記事です。 用意されているイージング 前提知識として、イージングはアニメーションの変化の仕方を表現するものです。適切なイージングを設定することで、アニメーションの動きをより自然に表現できます。 Figmaでイージングを設定するには、プロトタイプ機能のスマートアニメートを利用します。スマートアニメートについては、以下の記事で詳しく紹介していますので、合
ウェブサイト・アプリで使えるLottieアニメーションの基本。作成時のポイントから注意点、活用事例まで解説 こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。 After Effectsなどで作ったリッチなアニメーションを、ウェブサイトやアプリケーションに実装できる「Lottie（ロッティー）アニメーション」をご存知ですか？ Lottieはどれだけ拡大しても高画質で、実装も簡単なアニメーションライブラリです。ウェブ制作にLottieを取り入れるメリットは多く、GoogleやMicrosoftといった大手企業も活用しているほどです。 わたしたちneccoも2020年に導入し、これまでさまざまなプロジェクトでLottieを活用してきました。 この記事では、Lottieの基本から実際の活用事例、作成方法までご紹介します。作成時の注意点もまとめているので、Lo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
これは便利！ありそうでなかった最新Web、オンラインツール36選
Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選 - ICS MEDIA
WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】
ウェブ制作がサクサク捗る！便利な最新オンラインツール37個まとめ
Announcing Flutter 2- Google Developers Blog
便利で爆速！ウェブ制作向け最新オンラインツール、無料素材37個まとめ
2020年に注目したい人気プロトツール「Figma」のベストプラグイン厳選52個まとめ
商用OK！今どきのおしゃれイラスト素材を無料ダウンロードできる優良サイト19個まとめ
もっと早く知りたかった！Web制作に便利な最新オンラインツール46個まとめ
あなたのプロジェクトを煌やかにするアニメーションライブラリ18選 - Qiita
ラクラクWebデザイン制作！便利な最新オンラインツール39個まとめ
メルカリiOSアプリのBazelを使った高速・高信頼性ビルド | メルカリエンジニアリング
Figmaを最強デザインツールにする便利な無料プラグイン、ツールまとめ
Lottielab | Create and Edit Lottie Animations
制作事例：Lottieのアニメーションを手描き風に動かしたい！SVGとWebGLを使った2つのアプローチ - ICS MEDIA
フロントエンドカンファレンス沖縄 2023 公開資料・Xアカウントリンクまとめ
HTMLでLottieを配置する方法 - ICS MEDIA
Supabseチームはどのようにフロントエンドの高速化に成功したのか - バンクーバーで考え中
JSでLottieを配置する方法 - パフォーマンスの最適化方法も紹介！ - ICS MEDIA
最新版！ Lottieアニメーションの作り方 - Figma編 - ICS MEDIA
Figmaでイージングを理解しよう！ プロトタイプの基礎から実装方法の紹介 - ICS MEDIA
ウェブサイト・アプリで使えるLottieアニメーションの基本。作成時のポイントから注意点、活用事例まで解説 - necco note | necco inc.