WebViewからReact Nativeの関数を型安全に呼び出す
今までCapacitor(=WebViewのみ)で実装されていたユビーのモバイルアプリ(Android/iOS)を、React NativeとWebViewを組み合わせたハイブリッドアプリとして刷新しています。その過程で、WebView内で実行されるJavaScriptから、React Native側で定義した関数を型安全に呼び出せるライブラリを実装しました。その使用例と仕組みを紹介します。 使い方 React Native側の実装 まずライブラリをインストールします。Peer dependenciesであるreact-native-webviewとcomlinkも入れてください。 npm install @react-native-webview-rpc/native npm install react-native-webview comlink # peer dependencies
iOS版YouTubeアプリのOSSライセンスページが魔窟 - ナカザンドットネット
気分転換で下調べも何もせずに雑に書いた記事です。個別のライブラリについては間違ったことを言っている部分が多いと思うので、参考にしないでください。 こんなツイートを見かけました。 YouTube、yogaが使われてるんだ👀 pic.twitter.com/A9GVR7ByPb— Naturalclar(Jesse K.) #StopAsianHate (@natural_clar) 2021年11月17日 Yogaといえば、FacebookMeta社が作ったAndroid / iOS向けのレイアウトエンジンです。 yogalayout.com React Nativeのレイアウトエンジンでもありますが、まあ今回はReact Nativeの話はしません。YogaはAndroid向けのLithoやiOS向けのComponentKitといった形でも提供されており、ネイティブアプリのUI実装にも活
Why we decided to rewrite our iOS & Android apps from scratch — in React Native
Our project name for the RN app rewrite, DenaliBackgroundHi, I am Naoya, a Senior Engineering Manager at Mercari. Along with my small but mighty team of frontend developers, I am responsible for delivering the Mercari app experience to our customers. Today, I’m here to explain why we’ve made the ambitious decision to completely rewrite our apps using React Native. Growth drives changeCurrently, we
僕にとってReact Nativeは“つらい” DMMが負債脱却のために取り組んだSwift化
DMM meetupは、多種多様な生命が彩るジャングルのように毎回個性豊かなさまざまなテーマを題材に、共に学び、遊び、楽しめるイベントです。今回はオンラインサロン事業に焦点をあて、事業部メンバーが課題と取り組みについて話しました。大門弘明氏からは、React NativeからSwiftへの移行について発表がありました。 React Nativeの負債化でアプリのSwift化が決定 大門弘明氏：それでは「React Nativeで書かれたアプリをSwiftで書き直しています」の発表を始めます。 まずは自己紹介をします。名前は大門と申します。2014年に新卒で合同会社DMM.comに入社して、iOSエンジニアとしてオンラインサロン事業部でお仕事をしています。 本日お話しすることですが、つらい気持ちの話と、アプリ設計の紹介を少ししようと思っています。僕にとってReact Nativeはつらい。
React Nativeをやめる話とKotlin Multiplatform | Wantedly Engineer Blog
Wantedlyのモバイルエンジニアの久保出です。今回は、Wantedly VisitアプリにおいてReact Nativeをやめる決断をしたこと、関連してKotlin Multiplatformを導入しようとしていることについて書かせていただきます。 なぜReact Nativeが導入されていたかVisitのiOSアプリは2018年にフルリニューアルしました。リニューアルプロジェクトはモバイルエンジニアを総動員して半年近くかけてリリースしました。 リニューアルでは、色々なコンテンツを見つけられるDiscoverという新機能追加も予定しており、Discoverの実験もリニューアルと並列して行うことになりました。モバイルエンジニアはリニューアルに集中していたため、Webエンジニアのリソースが使えるReact NativeがDiscoverの実装手段に選ばれました。Discoverは、リニュー
Building React Native app for multiple environments (updated for RN 0.61.4)
After weeks of caffeine-fuelled coding, your React Native project is slowly taking shape and is now ready to enter the user testing phase. Suddenly you find yourself in a situation where you need to create different builds for each environment and tester group combination. While manually changing settings and replacing files works, it’s often very time consuming and error prone, one forgotten step
React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する｜ハイクラス転職・求人情報サイト AMBI（アンビ）
React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する React Nativeは、クロスプラットフォーム開発を行うためのツールの1つです。JavaScript言語の中で、UIフレームワークのReactを用いてUIの記述と状態管理を行うことで、アプリの動作を組み立てます。本記事では、React Nativeの導入やモバイルアプリ開発の現場で起きがちな課題を解決する手段としての強みについて解説します。 ReactとReact Native Reactとは／React Nativeとは／React Nativeの正体 React Nativeの環境構築 npm文化圏の流儀にのっとったワークフロー／スタイル定義／npmのライブラリ使用／リッチな機能を追加 広がるReact Nativeの世界 Windows向けのMS公式実装／ブラウザ向けの逆輸入／
React NativeでiOS/Androidアプリを丸っと開発！ Nature Remo開発で分かった長所と短所｜ハイクラス転職・求人情報サイト AMBI（アンビ）
React NativeでiOS/Androidアプリを丸っと開発！ Nature Remo開発で分かった長所と短所 React Nativeを使って「Nature Remo」iOS/Androidアプリの開発を進める村瀨大輔（typester）さんと、北原壮さんに、導入して分かったメリットとデメリットを伺いました。 モバイルアプリ開発の現場において、現在注目されているのがFacebookやInstagramといったサービスも採用している「React Native」です。 Facebookが開発したJavaScriptのフレームワーク「React」をモバイルアプリ開発向けにしたもので、iOS/Androidアプリの開発ができます。JavaScriptがネイティブのUIを描画でき、iOS/Androidでコードを共通利用できる開発効率の高さから、多くの開発者が興味を寄せています。 開発のスピ
iOS NativeからReact Native に乗り換えた Shopify の話聞いてきた - tomoima525's blog
"最も使われているサービスのひとつを iOS Native から React Native に作り変えた" というアナウンスメントを出し話題となった Shopify で、まさにその内容を扱った React Native の meetup があり、参加してきたので内容と所感をまとめました。 React Native is the Future of Mobile at Shopify 発表内容 検証/導入フェーズ 技術スタック React Native がもたらした効果 途中でやめたこと 追加で登壇者に聞いたこと その他の発表 React Native for Web @twitter その他もろもろ React Native is the Future of Mobile at Shopify React Native で書き換えた話はしばらく前にアナウンスしていたのですが、Shopify
Cordovaをdisる人類全員に読んでほしい「Cordovaつらいを考える」｜榊原昌彦
以下の記事で「Cordova／Ionicに比べれば、まだ少しはまともな選択だろう」と述べてあるのをみて、ここ数年Web Nativeに関わって思うことをちょっとまとめてみようと思います。 私はWeb Developerですので、この記事はWeb Native寄りの意見になります。また、本記事内では、いわゆるWeb Viewでつくるガワアプリを「Web Native」、それ以外（React Native/Native Script/Swift/Kotlinなど）をまとめて「Mobile Native」と呼称しております（分類はWhere Does Ionic React Fit in the React Ecosystem?から） note: Cordovaつらいって言っちゃだめという記事ではありません。OSSの活動は続いてるので、伝聞や過去のものではなく、最新のCordovaやWeb Na
pixiv chatstoryのiOSアプリをReact Native（Expo）でリニューアルしました！ - pixiv inside
こんにちは、福岡オフィスでpixiv chatstoryの開発を担当しているtawachan（@tawachan39）です。 前回「デザイナーでも書けるReact Native」と題して、React Nativeでの開発模様を書かせていただいたのですが、先日無事リリースをすることができました（！）ので、今回はその小話を書いていければと思います。 特に、React Nativeでアプリを作ることに興味があったり実践登用することを検討している人にとって参考になることがあれば幸いです。 リニューアルのきっかけ pixiv chatstoryは既存のSwiftで書かれていたアプリをReact Nativeで書き換えるだけでなくデザインのリニューアルも行っていました。そのきっかけや経緯について簡単に紹介します。 Swiftのコードをメンテナンスするのが大変でWebの技術で置き換えたかった 現在のpi
React Native開発チームが開発者の苦情調査を実施
原文(投稿日：2019/03/15)へのリンク React Nativeチームは先頃，React Native開発者を対象に，"あなたがReact Nativeで気に入らない部分は何ですか？"という，ひとつの質問の調査を行った。最初の不満として圧倒的に多かったのは，デバッグを含む開発者エクスペリエンスだった。コミュニティへの対応やドキュメントなども，不満な部分として際立っていた。多くの開発者が，React Nativeのアプリケーションプログラミングインターフェース(API)を拡張して，SVGでの開発などで頻繁に発生するユースケースに対応することを求めていた。ネイティブ風アプリケーションのためのシームレスでクロスプラットフォームな開発ツールという，React Nativeの目標がまだ実現できていないのではないか，と指摘する声もあった。 回答した開発者の大多数は，アップグレードに多くの労力が
「ネイティブアプリ開発者は絶滅危惧種なのか？」への感想文 - ナカザンドットネット
ポジション MSがRNめっちゃ使ってるという話について Brownfield事例は実質的にネイティブの事例 Skypeの事例ならどうなのか ネイティブアプリ開発者の仕事は減るのか まとめ みんなの反応 Xamarin勢の反応 Cordova勢の反応 iOSネイティブアプリ開発者の反応 jp.techcrunch.com こちらの記事への雑な感想です。感想は私の主観であり、ポジショントークであり、所属する組織の意見とは無関係であることを先に述べておきます。 また「ネイティブ」という言葉に「C/C++などから作られた機械語」という本来の意味に加えて、「プラットフォームの標準言語（WindowsのC#, AndroidのJava, iOSのObj-C）や標準開発ツールである」というニュアンスを含めることをご容赦ください。 ポジション こんな感じのポジションの人です。 中小企業向けにBtoBでアプ
自社運営のWebアプリをPWA化した際にハマった話（OAuthなど） - APC 技術ブログ
はじめに 先進サービス開発事業部の高橋です。主にフロントエンド開発を担当しています。今回は私たちの部署で運営しているソーシャルRSSサービス「NEIGHBORS」をPWA化した際にやったことを書いていこうと思います。 NEIGHBORS | ひとりの興味をみんなの知識に とはいえ、比較的短期間で実装するという目標を掲げていたということもあり、プッシュ通知みたいなすごくネイティブっぽい機能は実装しておらず、キャッシュコントロールやホームに追加してアプリっぽく振る舞うといった比較的簡易な形で落ち着かせています。なので、この記事ではPWAの実装自体について詳しく記載していくというよりは、それまで動いていた機能がPWAというかServiceWorkerを使うことでうまく動かなくなった点に重きを置いています。 PWAとは PWA(Progressive Web App)とは、ざっくりいうと、Webア
React Nativeハイブリッドアプリへの挑戦 ~ Part3: 振り返り/今後 ~ - スタディサプリ Product Team Blog
本エントリは3部作のPart3となっております。 Part1: Monorepo/CI Part2: 導入/Bridge Part3: 振り返り/今後 モバイルエンジニアの@hotchemiです。 Part1、2では実際にインテグレーションを進めてきた中で得られた知見を公開してきましたが、今回は半年程の運用を経て我々は当初の目的を達成できているのか、という事に関しての振り返りと今後について共有できればと思います。 振り返り 現状を軽く復習しておくと私達は今年の初頭からハイブリッドスタイルの開発を初め、現在のコード比率はNative75%, React Native 25%程となっています。 Good まず、Part1で宣言した3つの目標に関して振り返ってみます。 モバイルエンジニア不足の解消(◎) 達成する事ができました。一例を紹介すると現在Quipperには3名のiOSエンジニアがいます
React Nativeハイブリッドアプリへの挑戦 ~Part1: Monorepo/CI~ - スタディサプリ Product Team Blog
本エントリは3部作のPart1となっております。 Part1: Monorepo/CI Part2: 導入/Bridge Part3: 振り返り/今後 モバイルエンジニアの@hotchemiです。 数週間前にReact Native at Airbnb(非公式の日本語訳)が世間を賑わせましたが、皆様いかがお過ごしでしょうか。 弊社でもここ数ヶ月Nativeで書かれたスタディサプリのiOS/AndroidアプリにReact Nativeを部分的に導入していく、いわゆるハイブリッドアプリ開発体制に挑戦しており、そこで得られた知見を何回かに分けて公開していければと思います。 Goals まず、なぜハイブリッドアプリという選択をしたのかについて、我々が目指していたゴールは以下の様なものです。 モバイルエンジニア不足の解消 Quipperは元々Webエンジニアの数が多い一方でモバイルエンジニアの人数
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
GitHub - wumke/react-native-exit-app: Exit,close,kill,shutdown app completely for React Native on iOS and Android.
Nature での React Native アプリの運用について / React Native App in Nature
TechCrunch | Startup and Technology News
