RN Features 2020年6月号 - サンプル動画付きReact Native Gallery, State管理ライブラリRecoil, react-native-reanimeted - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーで React Native の気になるニュースを持ち寄ってみました！書籍 React Native が発売されましたね！ 自分はReact Native Meetup #10に参加して応募したところなんと当選しました！いま読んでいるので、来月のRN Featuresで取り上げたいですね〜。 はじめに React Native Meetup #10 React Native ライブラリのサンプル動画付きギャラリー アニメーション付きで Dark mode に変わるスケルトンアプリ react-native-reanimate v2-alphaでAndroidアニメーション遅い問題が解決？ Facebook製の新しいState管理ライブラリ「Recoil」 60FPS で動くスクロールボトムシートのライブラリ WinUI 3 と RNW (React
Designstripe | Crayon
Change any SVG file into an animated video with a scribble sketch effect, and export it as a GIF or a Lottie file 🎉 Crayon is a free tool created by designstripe.We are building a smart design experience that anyone can use to create remarkable visuals, regardless of your design experience.😄👋 We’re casting our net across the globe to hire a diverse team of in-house studio artists & makers to pr
「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 前回の記事では、Lottieの概要から、Figmaを使った作り方、LottieFilesを用いた書き出し方法を紹介しました。 本記事ではAdobe After Effectsを使ったLottieの作成方法から書き出し方、表示確認までを紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する 作り方 - Bodymovinで書き出し After Effectsでアニメーションを作成し、After Effectsの拡張機能「Bodymovin」を使って書き出す方法と、「LottieFiles」で書き出す2種類の方法を紹介します。 ▼Lottieの作成・書き出し・実装までの一連の流れ 完成品のサンプルを別ウインドウで開く アニメーシ
After EffectsでLottieデータを作成する際、 画像が使えない問題からどうしてもパスのデータを生きた状態で AE上に持ってこないといけなかったのですが AEはパスの癖がややあってイラストレーター上で作る方が早かったり 同じパスデータを使いたいということがありました。 色々調べたところ２種のインポート方法があるようです 20201019追記：有料ツールを使えばイラストレーターのレイヤー名＋パス全てをそのままAE移植できるよう。overloadという有料ツールをプロの方は使っているそう 1. １つのオブジェクト（パス）をコピペでAEヘ持ってくる 2. いくつか重なっているオブジェクトをまとめて１つのオブジェクトとしてAEに読み込ませる 一つ目のパスをコピペする方法 とりあえず単体のパスだけ欲しい時には便利です １つのオブジェクト（パス）をコピペでAEヘ持ってくる 1. まずIll
魅せろ！ Flutter で目を惹く UI デザインを実装する - enechain Tech Blog
はじめに こんにちは、enechain でソフトウェアエンジニアをしている @tomohiko-tanihata です。 先日、国内最大級の Flutter カンファレンスである FlutterKaigi2023 が開催されました。私たち enechain は、モバイルアプリに Flutter を採用しており、昨年に引き続き、今年も FlutterKaigi の Silver スポンサーとして協賛しました！ チームのみんなでセッションに応募したところ、私のセッションが採択され、登壇する機会を得ました 🎉 セッションのタイトルは「魅せろ！Flutter で目を惹く UI デザインを実装する」で、目を惹く UI デザインを実現するための 4 つの方法について紹介しました。 当日の発表資料には GIF をたくさん貼っており、PDF で公開するのに不向きなスライドになっていたので、記事として F
TOPブログ【Bodymovin】コーディング苦手なデザイナーさんも、リッチなアニメーションをWebサイトで動かしてみよう！【After Effects】 【Bodymovin】コーディング苦手なデザイナーさんも、リッチなアニメーションをWebサイトで動かしてみよう！【After Effects】 更新日：2020/05/08 コーディングの動きの指示をする際、「このサイトのこの部分に似せて欲しい」などの具体的な指示があれば分かりやすいですが、動きを伝えるというのは難しいと思います。 また、デザイナー自身で動きが付けられるとやりとりの手間が少なくなるかと思います。 しかしJavaScriptなど、コーディングで再現するとなると苦手意識がある方も多いのではないでしょうか。 デザイナーが作るアニメーションとして、gifやAPNGの形式も魅力的です。 しかしgifは色数制限や透過の処理、APNG
Swift+Railsなスタックで7年くらいアプリ作ってきましたが、最近はReactNative+Firebaseに完全移行しちゃいました。Expo素敵すぎる...もっと早く手出しておけばよかった... そこらへんの話はまた今度にして、ExpoSDK(v37)を勉強がてらさらっと眺めてみます。 AR https://docs.expo.io/versions/v37.0.0/sdk/AR/ iOSのみ、three.jsのラッパー Accelerometer https://docs.expo.io/versions/v37.0.0/sdk/accelerometer/ 端末の加速度を監視できる Admob https://docs.expo.io/versions/v37.0.0/sdk/admob/ モバイル広告「Google Admob」のラッパー Amplitude https://
Lottie London ロッティロンドン / アイライナー【ルックファンタスティック ビューティーボックス購入品】 - MICHIコスメ～旅行とハンドメイドも～
投稿日:2021/01/17 最終更新日:2021/01/17 こんばんは～！今日は久々のHIT商品！ 安いし、日本のプチプラに負けず劣らず。 （ブログ表紙の画像、間違えてリトルロンドンにしてしまいました） ★★★ →骨格ストレート情報のTwitterはこちら →骨格タイプ別のお洋服紹介はこちら ★★★ Lottie London ロッティロンドン / アイライナー ふつう ロッティロンドンというのは、アイシャドウが有名なブランドだそうです。 アフィリエイトリンクではないです。 どの商品もプチプラで、買いやすいかな～と思います。 商品について 目もとをドラマティックに際立たせるLottie London「AMトゥPM」収納式アイライナー。肌の上でなめらかに伸びる、柔らかくしなやかなフォーミュラ。赤みや荒れを引き起こす引っ掛かりや不快感がありません。昼間のスタイルにも、パーティー向けのスモー
皆さんこんにちは、福岡で課題解決部に所属しているエンジニアの petamoriken です。iOSDC Japan 2020のデザインスポンサーとして公式サイトを作った話をエンジニア目線で紹介していきます。 https://iosdc.jp/2020/ 公式ロゴ、サイトデザインについては既に公開されている #iOSDC Japan 2020 の公式ロゴ・サイトデザインができるまで を御覧ください。 技術スタック ゼロからの静的なサイトの構築ということで今回は Next.js の SSG の技術を試してみることにしました。Next.js 自体はまだ社内での採用事例はあまりありませんが、個人的に Next.js を使って SSR するサイトを作っていることもあり、特に問題なく開発を進めることができました。 また CSS in JS として Zero-Runtime な Linaria を採用し
コーポレートサイトをAstro3とmicroCMSとCloudflareをつかってリニューアルしました｜noco株式会社 note編集部
概要nocoの取締役CPOの多田と申します。 今回、gulpとejsでできていたコーポレートサイトを、Astro3を使ってリニューアルしました。 インフラはCloudflareを使い、コンテンツ管理にはmicroCMSを利用しました。CI/CDを完備し、TypeScriptによる素晴らしい開発体験の仕組みができたので共有します。 新しいコーポレートサイト背景弊社のコーポレートサイトは、2022年以前STUDIOを使ってノーコードで作成されていました。 STUDIOは手軽にかっこいいサイトが作れるため重宝していましたが、2022年の前半にいくつかの課題があり、gulpをつかって静的なサイトとしてリニューアルしました。 最大の課題は、「オウンドメディアをサブディレクトリで運用したい」というものでした。この手のサービスは「サブドメイン」を自由に設定することはできますが、リバースプロキシなどを駆使
ReactNativeといえば検索サジェストで『オワコン』とでてしまう事で開発界隈の中で話題ですが、個人的には未だにベストプラクティスだと考えております。 その理由はいくつかありますが、それについてはまた別の機会でお話しするとして、今回はそんな2022年の今でも一戦級で使えるReactNativeを久々にやってみたい人や新しいライブラリの発見をしたい人のために、まとめを作ったので是非みてください 読者の対象はクロスプラットフォームが向いているであろう、個人開発〜中小規模の開発している方を想定しています。 時代と勢いを感じたライブラリ5選 1.react-native-purchase 今でもReactNativeでIAPを実装しようとすると、react-native-iap (https://github.com/dooboolab/react-native-iap)というライブラリが有力
はじめに 先日、社内で開催した「モバイルエンジニア向けの社内勉強会」が凄く実りがあったので、それについて書きました。 他の地銀や固い雰囲気のある会社さんで働いていらっしゃる方も、ぜひ社内で勉強会などをプレゼンするときに「北國銀行はやってますよ！」みたいに、この記事を積極的に使っていただけると嬉しいです。 どんな会社？ 我々デジタルバリューは金沢に本店がある「北國銀行」をはじめとする北國フィナンシャルホールディングスの一員で、システム開発を中心に仕事をしています。 銀行というと「半沢直樹」のイメージが強いかも知れませんが、北國銀行は全くそんなことがありません。 少し例を出すと、こんな感じです。 頭取とも会話する機会がある（何ならコーヒー飲みながら立ち話をすることもある） UNIQLOのTシャツとか髪染めもOK（勿論、お客様に失礼のないように言動は注意する） ただ求められるセキュリティ水準など
はじめに コードを自分で書かずにアニメーションが実装できる、とても便利なライブラリがあることをご存知でしょうか？ Lottie(ロッティー) 自分で一から書くとなると難易度の高いイメージがあるアニメーション実装が、「Lottie」を利用することで簡単にできます。 まず「Lottie」(公式サイト：https://airbnb.design/lottie/)とは、Airbnbが開発したアニメーションライブラリです。 CSSやJavaScriptを自分で書くことなく、簡単にアニメーションが実装できるので、コーディングが苦手なデザイナーの方でも気軽に利用できて嬉しいですね。 LottieはAdobe MAX 2020のセッションでも紹介され、いまクリエイター界隈でホットな話題となっています。 この記事ではLottieを使って、簡単にアニメーションをWeb上に表示するまでの流れをまとめました。 今
Motionityはブラウザで動作するモーショングラフィックエディターWebアプリです。特にユーザー登録等も不要で誰でも無料で利用可能です。 複数レイヤーを使って任意のオブジェクトを時間経過に合わせて動くよう設定し、モーショングラフィックとしてダウンロードできる、というもの。 一般的なシェイプや画像、テキストの他、動画や音源の追加や、勿論ローカルファイルのアップロードもできるようになっています。ただ、動画追加はちょっと重くて動きませんでした。 肝心のモーションは各レイヤーの▶ボタンをクリックすると設定項目が表示されるので設定する感じです。個人的にちょっとUIがとっつきにくかったですが、他の方は問題ないかも。 WebベースなのでDLしなくていいですし、クロスプラットフォームで動作してくれるのは良いですね。データのインポート/エクスポートやLottieのアップロードも可能です。 Motioni
パスワードにさよなら？スマホ・PCで顔や指紋認証でログイン Passkey認証ができるWebサイトの作りかた | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
こんにちは 技術戦略部のあずまです。 エンジニアの皆様は、ログイン機能が必要なサイトの「ログイン方法」の要件として何を思い浮かべますか？ 多くの方はID/パスワードでの認証を一番に思いつくのではないかと思います。 ID/パスワード認証はポピュラーな認証方法ですが、パスワードの漏洩からの不正アクセスのリスクや忘れてしまったときの不便さがあります。 そこで今回は、Passkey認証のできるサイトの作り方をフロントエンドの実装にフォーカスしてご紹介したいと思います。 （本記事は昨年12月末に社内勉強会で行ったPasskey勉強会をもとに作成しました。） Passkeyとは？ Passkeyとは、「FIDO/WebAuthn Level3」の実装につけられた名前で、スマートフォンやパソコンなどの端末に保存された認証情報を利用してパスワードレスでログインを行う機能です。 WebAuthnとは、ユーザ
フロントエンド技術選定のヒント 【令和五年度版】 - KAKEHASHI Tech Blog
こちらの記事は カケハシ Advent Calendar 2023 の 4日目の記事になります。 こんにちは。カケハシでエンジニアをしている今川です。 今回はこれからフロントエンドの技術選定をする方向けに、どんな技術・ツールを使えばいいかのヒントになるような記事を書いていきたいと思います。 ただし、本記事では個人的な好みというよりは、npm trendsやGitHub Star Historyなど客観的な指標からどんな技術が世間に受け入れられているかの比較にしていきたいです。 もちろん数値などの比較以外に、ドキュメントを読んだり使ってみたりすることも重要だということは言うまでもないと思います。あくまでも今回の記事が知らないライブラリを知る機会だったり、ヒントになれば幸いです。 もくじ パッケージマネージャ ランタイム フロントエンドフレームワーク レンダリングフレームワーク ビルドツール
フロントエンドエンジニアの仕事内容や業務事例、働く環境などについて紹介する「LINEフロントエンドエンジニア採用説明会」。そこでフロントエンド開発センターUIT1室の木村氏が、LINEギフトの開発について共有しました。 自己紹介とアジェンダ 木村好汰氏：私から「LINEギフト」のフロントエンド開発について紹介します。はじめに自己紹介します。木村好汰と言います。フロントエンド開発センターのUIT1室 Front-end Dev5 Team に所属している、フロントエンドエンジニアです。 2019年頭にLINEに中途入社したので、在籍3年目になります。入社以来、LINEギフトに主に関わってきています。プライベートではゲームや映画が好きです。よろしくお願いします。 今回お話しするのはLINEギフトというサービスの紹介と、LINEギフトのフロントエンドエンジニアが、実際に何を作っているのか。LIN
Let's Make One of Those Fancy Scrolling Animations Used on Apple Product Pages | CSS-Tricks
Let’s Make One of Those Fancy Scrolling Animations Used on Apple Product Pages Apple is well-known for the sleek animations on their product pages. For example, as you scroll down the page products may slide into view, MacBooks fold open and iPhones spin, all while showing off the hardware, demonstrating the software and telling interactive stories of how the products are used. Just check out this
みなさんこんにちは！編集部です。 寒くなってきましたが、しっかり保湿していますか？ 今回はAdobe AfterEffects(以下Ae)を使用してSVGアニメーションを制作する方法をご紹介したいと思います。 Bodymovinをインストールする まずAeのプラグインBodymovinをAdobeストアからDLします。 DLできない場合はLottieのGITHUBからもDLできます。 動かしたいベクターをAi形式で保存する SVGはベクターデータに動きをプラスしていくのでpngやJpgなどは使えません。 動かしたい画像は事前にベクターデータを用意しておきましょう。 ベクターデータをAdobe Illustrator(以下Ai)で開き、新規HDTVにペーストして保存します。 通常のアートボードでも問題ないと思いますがAe用のAiデータはこっちの方がいいって偉い人が言ってたのでわたしはこの形式
RN Features 2021年3月号 - React Native 0.64 リリース, JSIを使った高速化の例, React Native コンポーネントライブラリの紹介 - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティの活動サマリー React Native 0.64 リリース Hermes opt-in on iOS Inline Requires enabled by default Hermes with Proxy Support React Nativeで機密性の高いユーザーデータを保存するためのアプローチ サンプルコード ユーザーデータを安全に保存するためのハイブリッドアプローチ 概要図 類似ライブラリについて OSSなReact Native アプリ Pix Stack JSIを使った高速化の例 高速な key-valueストレージ react-native-mmkv React Nativeアプリを50倍速く改善した方法
様々なジャンルを昇華した独自のパンク・サウンドに乗せて、彼女たちが直面する現実を皮肉っぽく歌ったセルフ・タイトルのデビュー作から約3年、パンデミックの最中に出来上がったGoat Girlのセカンド・アルバム『On All Fours』がリリースされる。 ”On All Fours”というのは”四つん這い”という意味で冗談みたいなタイトルだが、本作のプロデューサーであるDan Careyと夕食を取っていた時に、彼の妻からジョン・バースの『やぎ少年ジャイルズ（原題：Giles Goat-Boy）』を薦められ、酔っ払いながら読んだ中で見つけたパッセージから取ったそう。なんとも雑な名付け方だなと思ったが、そういえばもともとバンド名もスタンダップ・コメディアン、ビル・ヒックスのネタである「Goat Boy」から来ていて、本のタイトルに感じるものがあったのだろう。 前作の音楽スタイルを軸にしつつも、ス
動く！LINE DEVELOPER DAY 2020公式サイトの企画から完成までを公開！｜LINE CREATIVE CENTER
これらのサイトを見ると、大きな画像とテキストを中心に整理されたレイアウトのデザインとスクロール、マウスのトラッキング、パララックスの3つの効果を多く使用していることが分かると思います。 スクロールアニメーションは、初期段階でのたくさんのアイデアの一つに過ぎませんでしたが、進行することが決定し、すぐに制作に取り組みました。まずは企画チームとUIデザイナーが縦横に動かすことができる画面を構成し、私はテストのアニメーションのための環境を設定しました。 a：Sketch design画面の構成 b：After EffectsでSketch textの移動 SketchからAEUXというプラグインを介して、After Effectで簡単に素材を移動することができます。また、最近よく使用されているFigmaにも対応しています。 c：すべてのテキストをSketch画面に合わせて修正する After Ef
Lottie（公式サイト：https://airbnb.design/lottie/）とは、民泊マッチングサービスAirbnbが開発したアニメーションライブラリです。 Webサイトはもちろん、iOSやAndroidのアプリにも組み込むことができ、従来の方法よりも動作が軽く、簡単に実装することができます。 Lottieでどんなことができるのか、まずは下の作例をご覧ください。 【作例】 マウスオーバーでアイコンが動きます ↓ このように、マウスアクションなどに連動してアニメーションを再生することができます。 この記事では、Lottieの魅力と、実際に作例のメールアイコンを作成し、Webサイトに実装するまで一連の流れをご説明します。 Adobe After Effectの使い方については、詳しく画像付きで解説します。また、HTML・Javascriptは、サンプルコードを記載しています。 ぜひこ
こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。 「ウェブサイトで使うアイコン・イラストを動かしたい」 「Lottieを作ってみたいけど、After Effectsはむずかしそう」 そう思っている方は多いのではないでしょうか？ これまでLottieといえばAfter Effectsで作るのが主流でしたが、いまはFigmaのプロトタイプとプラグインを使って作成できます！ この記事では、Figmaを使ったLottieの作成方法を解説します。プロトタイプ機能を使ったことがない人でも簡単に作れるので、ぜひチャレンジしてみてください。 FigmaでLottieを作るメリット Lottieは軽量かつ美しいアニメーションを手軽に実装できるライブラリです。FigmaでLottieを作成することで、次のようなメリットがあります。 After Effectsを使えなくて
gsapのScrollTriggerプラグインとlottie-reactを利用したスクロールアニメーションの実装について｜nap5
実装のポイントとしては2点あります。 1つ目はサイズをレスポンシブに調節することです。 emotionのcss文字列内挿でクラス指定できるのがハンディです。 // https://lottiereact.com/hooks/useLottie#params const {goToAndStop, animationContainerRef, View, animationItem} = useLottie( { animationData, loop: false, autoplay: false, className: css` width: 400px; height: 400px; @media (max-width: 768px) { width: 300px; height: 300px; } `, }, {} ); もう一つはScrollTriggerのハンドリングをPCとSP
Jose Felix Posted on Jun 7, 2020 • Updated on Sep 20, 2020 • Originally published at jfelix.info Resources are extremely important for a programmer since they can greatly improve productivity while coding. I have been collecting many links throughout months and I wish to share some of them with you. Hopefully, they will be as useful to you as they have been to me. Without further ado here some gre
思わず見惚れるページ遷移アニメーション事例10選【CSS/JavaScript】 - Workship MAGAZINE(ワークシップマガジン)
複数のページで構成されたWebサイトを閲覧していると、ページを行ったりきたりする動作が発生します。 ページ間の移動という単調な動作にアクセントをつけて、読者の注目度を上げてくれるのが、ページ遷移アニメーションです。 本記事では、パフォーマンスへの影響を最小限におさえながら、ユーザーをひきつけられる、おすすめのページ遷移アニメーションをご紹介します。 1. Vue.jsを使った6種類のページ遷移アニメーション Vue.jsを使った、高速で洗練されたページ遷移のセット。 フェードやズームといった基本的なページ遷移と、すこし個性的なページ遷移をあわせて6種類制作しています。 See the Pen Vue2 page transitions with GSAP by Tim Rijkse (@timrijkse) on CodePen.0 2. ブラウン管テレビ風のページ遷移アニメーション ブラ
アニメーションを使ってWebサイト制作！Lottieを使うメリットとプロジェクトの進め方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、くりちゃんです。 いつもはThree.jsについての記事を書いているのですが、今日はちょっと時間がないので、別の話を書きたいと思います。 先日LottieとCSSアニメーションを組み合わせたゴリゴリに動く特設サイトをリリースしました🎉🎉🎉🎉🎉 頑張ってデザイナーさんにLottieのアニメーションを用意していただいて、ぼくはそれを発火させただけなので正直ほぼ何もやっていなのですが、おかげさまでクライアント様・社内で良い評価をいただけたみたいです！ LIGでは一週間に一回、エンジニアで今週何をしたかなどの報告をする共有会があるのですが、そこで「デザイナーとどのように進めていったのか？」「どういうアニメーションだったらLottieを使うのか？」と質問をいただいたので、エンジニア目線で答えていきたいと思います。 まずLottieとは ✋ Lottieはアニメーションライブラリ
※ 2020/5/17 アップデート: 最新版で動くことを確認およびリンクを修正 ※ Flutter Interact 2019 で 2Dimensions / Flare は Rive に名称変更すると発表されました: Use Rive and Flutter for dynamic, interactive, & animated experiences (Flutter Interact '19)。こんにちは、UI デザイナー / フロントエンドデベロッパーの kay です。現在新プロダクト開発チームでは Flutter を使いモバイルアプリを開発しているのですが、今回はアニメーション作成ツール Rive を用いた Flutter 向けアニメーションを紹介します。 Rive とはRive 社（旧 2Dimensions）が開発しているブラウザーベースのベクター 2D アニメーション作
HTML has a built-in native audio player interface that we get simply using the <audio> element. Point it to a sound file and that’s all there is to it. We even get to specify multiple files for better browser support, as well as a little CSS flexibility to style things up, like giving the audio player a border, some rounded corners, and maybe a little padding and margin. But even with all that… th
実はLottieアニメーション自体は結構昔から存在しているのですが、プロトタイピングやデザインツールとして（特に日本で）多く利用されているAdobe XDでサポートされたことにより、Lottieが再注目されているようなので、Lottieアニメーションの作り方から実装方法までを深掘りしてみたいと思います。 Lottieアニメーションとは？Lottieとは？Lottieは、2017年にAirbnbが発表し、json形式のファイルとして書き出したベクターアニメーションを、モバイルやWebでネイティブにレンダリングすることができるアニメーションライブラリです。 とはいえ、Web制作におけるアニメーションの実装は、すでにいろいろな方法があります。 連番ビットマップ画像のアニメーション（GIF、APNG、WebP） 動画ファイルを使ったアニメーション CSSアニメーション SVGアニメーション Can
01AfterEffectsでパスアニメーションを作る この記事は、「デザイン女子部 Advent Calendar 2020」の23日目の記事です！ 今回は、SVGのパスアニメーションを簡単に実装できる、BodymovinとLottie.jsの使い方を簡単に紹介したいと思います。まずは、AfterEffects（以下、AE）を使ってパスアニメーションを作りましょう。AEの使い方については、ここでは詳しい説明は省略します（大変長くなってしまうので…。）ただ、AEを使ってどんなことが出来るのか、少しでもイメージがわくように、私が実際に作業した事例を基に、おおざっぱに紹介しちゃいますね！！！ AfterEffectsの編集画面 AfterEffectsの編集画面はこんな感じ。初めて開く人は何が何やらわからずびっくりしちゃうかもしれませんね。 ペンツールや選択ツール、回転ツールなどを切り替えるツ
はじめに こんにちは、計測プラットフォーム開発本部iOSブロックの中岡です。普段はZOZOMAT/ZOZOGLASSの運用・保守や計測技術を使った新規事業の開発をしています。 目次 はじめに 目次 計測フレームワークとは Swift Package Managerへの移行の経緯 Swift Package Managerへの移行 移行作業でハマったこと まとめ 計測フレームワークとは 私たちのチームは、ZOZOMAT/ZOZOGLASSの機能を開発し、それらをライブラリとしてZOZOTOWN iOSチームに提供しています。このライブラリのことを私たちは計測フレームワークと呼んでいます。そしてこのライブラリの提供方法として今まではCocoaPodsを利用していました。元々はCarthageを利用していたのですが、Apple silicon導入に伴いCocoaPodsへ移行しています。そちらの
Today at the What’s next for Windows — developer event, we’ll show you the next era of Windows and how we are embracing Windows == open platform. This means everyone has open access to run the widest range of apps on Windows, enabling all developers to build the apps and experiences that empower users to create, learn, and play. We focus on five key areas of improvement for Windows 11: The new Mic
こんにちは！東芝UIデザインチームの小林 Jです。 突然ですが、皆さんは何を使ってプレゼン資料を作っていますか？Windowsユーザーなら「Microsoft PowerPoint」、Macユーザーなら「Keynote」でしょうか。どちらも優秀なツールですが、もう一つ選択肢を広げてみませんか？ 私のおすすめは「Adobe XD」です。 UIデザインツールとして広く使われているXDは、東芝でもよく活用しているツールの一つです。 UIチームから毎年２名が参加させて頂いているJEITA(電子情報技術産業協会)様の主催する「HID専門委員会」にて、アドビ様のXDエバンジェリストの方から、XDによるプレゼンテーションについて講習を受ける機会がありました。その時に得た知識や気づきを織り交ぜ、XDの可能性や魅力をプレゼンテーションツールという側面からご紹介したいと思います。 １.スライドづくりはUIプロ
グラフィック・デジタル問わず、血の通わないものづくりは、そのものの感情まで削ぎ落としてしまいます。 さらに、感情のないものは人に語り継がれず、一時的な記録となって消えてしまいます。 人が人に語ることで、記憶は強くなり、そして語り継がれるに値する記憶となり、次の語り手に引き継がれる。 私たちは、「継がれる記憶を作るためにどうするべきか」をものづくりの真意ととらえ、その上で、ブランド策定、企画、グラフィック・インターフェイスデザイン、エンジニアリングをお手伝いしています。
Adobe XD でドキュメントアセットによる作業
Adobe XD ユーザーガイド はじめに Adobe XD の新機能 よくある質問 Adobe XD でのデザイン、プロトタイプ、共有 カラーマネジメント 必要システム構成 ハードウェアとソフトウェアの要件 Adobe XD、Big Sur、Apple Silicon | macOS 11 ワークスペースの基本 Adobe XD でのアプリ言語の変更 UI デザインキットへのアクセス Adobe XD のアクセシビリティ ショートカットキー ヒントとテクニック デザイン アートボード、ガイド、レイヤー アートボードの基本を学ぶ グリッドとガイドを使う スクロール可能なアートボードの作成 レイヤーの操作 スクロールグループを作成する シェイプ、オブジェクト、パス オブジェクトの選択、サイズ変更および回転 オブジェクトの移動、分散および整列 オブジェクトのグループ化、ロック、複製、コピー、お
Colour Palette — Lottie Canto
PLEASE NOTE: These often sell out very fast. If you manage to get one you will receive a confirmation email. If you don’t receive a confirmation email you unfortunately didn’t get one. Don’t worry there will be another batch soon! As always these are strictly one per person, If you buy more than one your order will be refunded. ( Also, I often receive a lot of emails and DM’s after these sell out.
Adobe After Effects + Lottie (Bodymovin) でモーションをつける - MIYOUWI : BLOG :
アイコンをクリックした時にちょっとしたモーションが入っていることによって、使っているデジタルツールに親近感を持つことはないですか？ ちょっとほっこり 今回は、複雑な計算式なしに、Adobe After Effects を使って描画したモーションを、Lottie (Bodymovin) を使って簡単に実装できる方法を紹介します。 １）Lottieとは Lottie は、Airbnbから登場したWeb、iOS、Android、React Native、Windows 対応のモバイルライブラリです。Adobe After Effectsで表示できるアニメーションをリアルタイムでレンダリングし、簡単に複雑な動きをするアニメーションを作成することができます。Lottieは、Bodymovinというオープンソースライブラリを使い、After Effects で作ったSVGアニメーションデータを拡張機能
LottieFiles plugin for WordPress – Add animations to your website for free
Add free Lottie animations to your WordPress site with the LottieFiles for WordPress plugin -- even if you can't code or design.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最新版！ Lottieアニメーションの作り方 - After Effects編 - ICS MEDIA
AfterEffectsにillustratorのパスを生きた状態で持ってくる方法｜Nviveto
【Bodymovin】コーディング苦手なデザイナーさんも、リッチなアニメーションをWebサイトで動かしてみよう！【After Effects】 | 東京のホームページ制作 / WEB制作会社 BRISK
React Native Expo 全SDK まとめ - Qiita
#iOSDC Japan 2020 の公式サイトが出来るまで - pixiv inside
【浦島太郎さん必見】2022年にReactNativeでアプリ作うべきライブラリ5選
地方銀行でモバイルエンジニア向け社内勉強会を実施してみた - Qiita
【デザイナー向け】コードを書く必要なし！After EffectsとLottieでアニメーション実装！
ブラウザで動作するモーショングラフィックエディターWebアプリ・「Motionity」
JavaScriptとマークアップどちらもこだわれる フロントエンドエンジニアが語る「LINEギフト」開発
SVGアニメーションをAfterEffectsで作ろう！｜ケーワンプラス｜ケーワン・エンタープライズStaffブログ
[INTERVIEW] Goat Girl | Monchicon!
Airbnbが開発したアニメーションライブラリ「Lottie(ロッティー)」の使い方と魅力を解説！
FigmaでLottieアニメーションを作ってみよう！作成方法やメリット、注意点を解説 - necco note | necco inc.
40+ High-Quality Free Resources for Web Development
Rive（旧 Flare） でつくる Flutter アニメーション｜kay
Let’s Create a Custom Audio Player | CSS-Tricks
Lottieアニメーションについて深堀りしてみる｜けんじ
AE × Bodymovin × Lottie.jsでSVGアニメーション！ | ノマクリ
計測フレームワークのSwift Package Manager導入への道のり - ZOZO TECH BLOG
What Windows 11 Means for Developers
Adobe XDでプレゼン資料を作ってみたら驚くほど簡単で自由自在だった｜東芝 UIデザイン
UNIEL ltd.