ウェブ制作で 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 各種ブラウザ付きでスクリーンショットを撮影できるオンラインツール。目的の
海外サイト Speckyboy.com で公開された Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019 より許可をもらい、翻訳転載し、さらにオススメCSSツール15個を追加しています。 2020年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。 CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。 今回は、2020年に注目したい最新CSSツール、リソースガイド65個をまとめてご紹介します。これからCSSを本格的に学ぶひとも、普段からバリバリでCSSを使いこなしているひとも、一度は確認しておきたい内容となってい
この記事では、Webデザインやグラフィックデザインの制作がグンと捗る、便利すぎる最新オンラインツールをまとめてご紹介します。 通常、時間のかかってしまう面倒な作業も、これらのツールやサービスをうまく活用することで、より快適にデザイン制作をすすめることができます。お気に入りのツールを自分のワークフローに取り入れ、自分だけの爆速制作スタイルを確立してみませんか。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イラスト系ライブラリ 2. デザインコレクション 3. モックアップツール 4. デザインからコードへの変換ツール 5. Web制作お役立ちツール 6. プロトタイプツール 7. アイコン素材パック 8. 面白ツール Webデザイン制作が変わる！便利な最新オンラインツールまとめ イラスト系ライブラリ Illustrations 商用利用もでき
Figmaは、現在人気となっているプロトタイプツールのひとつです。 SketchやAdobe XDと比較すると、「リアルタイムで他の人とコラボレーションできる」点が優れています。つまり、ネット環境さえあれば、ブラウザ上でいつでもプロジェクトを起動できます。 しかし、Figmaには大きな欠点とし、SketchやAdobe XDユーザーが使っているツールが見つからないことも。そんなときは、Figmaをカスタマイズ、拡張できるプラグインを利用してみましょう。 この記事では、Figmaのデザイン制作が捗る便利プラグイン52個をまとめてご紹介します。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. 生産性アップ、便利系 2. アニメーション向け 3. デザイン、クリエイティブ系 4. 配色、カラーパレット系 5. 地図、チャート図 6. ワイヤーフレーム
2019年も残すところわずかとなり、今年もWeb制作を快適にするオンラインツールがたくさん公開されました。 この記事では、今年紹介したツールのなかでも特に話題になった2019年の便利オンラインツールベスト85個をまとめてご紹介します。 実際に制作フローに取り入れて便利だったツールを選りすぐったこのコレクションには、「無料で利用できることを基本としたツール」を揃えています。これらのツールやサービスを活用して、より快適なWeb制作ライフを過ごしましょう。 2019年に登場した最新オンラインツール一覧 以下は、2019年にかけて当サイトで紹介した、ウェブ制作が捗る便利ツール一覧となります。今回未紹介のツールが中心となっているので、こちらも一度目を通しておくことをオススメします。 ウェブデザイン制作が爆速に！便利な最新オンラインツール47個まとめ ウェブデザイン制作が加速中！便利な最新オンラインツ
この記事では、絵を描くのが苦手という非デザイナーのひとにも役立つ、商用利用可能な無料イラスト素材を公開しているサイトをまとめてご紹介します。 最近のウェブサイトのランディングページやスマホアプリなどでよく見かける、キャラクターをつかったイラストスタイルに対応した、比較的新しい素材ライブラリが中心に揃います。 日本生まれのイラスト素材をダウンロードしたいときは、以下の記事でまとめているので、一緒に確認してみてはいかがでしょう。 全て無料、本当は教えたくないフリーイラスト素材サイト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 で動かすまでをやってみたいと思います！
Flutter vs React Native vs Native: Deep Performance Comparison | inVerita
Flutter vs React Native vs Native: Deep Performance Comparison The Story Behind the Research As a custom software development company, inVerita and its mobile development team continuously dig into the performance of cross-platform mobile solutions available on the market, that’s how Flutter vs React Native vs Native Part I emerged. Yes, it was quite controversial as one can state we weren’t using
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
この記事では、日々進化を続けるWeb制作で役立つ、便利な最新オンラインツールをまとめてご紹介しています。 これまではむずかしいと思っていたことや、面倒な作業をボタン一発で完了できるなど、デザイン制作の時間短縮にぴったりなツールから、遠隔でのテレワークにも便利な新機能、ユニークなツールやサービスなどが揃います。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Tail Blend CSSmix-blend-modeプロパティをリアルタイムで
_%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に対応する なぜ画面構造を配信するの
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はブラウザ上でデザインを行うため、共同作業によるリアルタイムのコラボ
React Native のこれまでとこれから 2019年11月編 - KitchHike Tech Blog
Expo の登場、Airbnb の離脱、Hermes の発表。React Native の開発の歴史を振り返ります。React Native のコミュニティについても調べてみました。React Native には本体のレポジトリだけでなく、リリースについてのレポジトリや、コミュニティの会話のためのレポジトリがあったのが意外でした。 はじめに 業務委託でキッチハイクのアプリ開発をお手伝いしている、エンジニアの有吉です。キッチハイクチームは、モバイルアプリの開発をずっとReact Native で行ってきました。アプリの開発開始から2年半ほど経ったこのタイミングで、React Native のこれまでとこれからについて思いを馳せてみます。 React Native のこれまで 公式のBlog · React Native も参考にしつつ、過去の出来事の中で印象に残ったことを挙げてみます。Rea
Create and ship animations to your products faster. Bring your websites and apps to life with the simplest editor for Lottie animations.
【作例付き】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.
はじめに 本記事は 個人開発 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の組み込みはプラットフォームに応じたさまざまな実装方法が用意されていますが、一般的なウェブの方法を例に紹介します。実装編の前編となる本記事では、手軽に組み込むことができる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)を損なうことなく、アプリケーション内で良好なベースラインパフォーマンスを保証するために行ったステップを紹介します。 ベースラインを確立し、目標を設定する。 測定できないものは直せない パフォーマンスを向上させるために、容易に解決できる問題がいくつかありましたが、その前に
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個まとめ
超便利！確認しておきたい最新CSSツール、リソースガイド厳選65個 2020年度
ウェブ制作をスピードアップ！便利すぎる最新オンラインツール、無料素材51個まとめ
2020年に注目したい人気プロトツール「Figma」のベストプラグイン厳選52個まとめ
2019年間ベスト！Web制作を変える便利オンラインツール厳選85個
商用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アカウントリンクまとめ
インフラが苦手な人の個人開発（ECS、terraform） - Qiita
HTMLでLottieを配置する方法 - ICS MEDIA
Supabseチームはどのようにフロントエンドの高速化に成功したのか - バンクーバーで考え中