About the content 2017年3月のDroidKaigiの講演です。映像はRealmによって撮影・録音され、主催者の許可を得て公開しています。 2015年初めにオープンソースプロダクトとして登場したReact Nativeは、現在も活発に開発が続いています。Facebook Messengerだけではなく、プロダクションでの事例も少しずつ出てきました。 React Nativeを使うと、何が嬉しいのでしょうか。実際に業務でAndroid, iOS両対応のアプリを開発・リリースした経験から、Android Javaでの開発と比べて楽になる点や難しくなる点をお話します。 ＜対象＞ 最近のJavaScriptはどんな空気感で開発をしているのか見てみたい方 心のどこかでまだReact Nativeを銀の弾丸だと思っている方 AndroidとiOSのコードはどこまで共通化できるのか知
Every year, as part of the F8 conference, Facebook builds iOS and Android apps that give attendees a schedule for the conference, and let them learn more about the talks and speakers. The apps have also provided reminders for upcoming talks and ad-hoc announcements to attendees. We've released the 2017 source code on GitHub, and produced a series of tutorials. These are designed to introduce React
GitHub - facebook/react-native: A framework for building native applications using React
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
React Nativeとは？ 鎌倉正也（以下、鎌倉）：それでは、始めさせていただきます。「フロントエンドエンジニアがReact Nativeを触ってみた」というタイトルで発表させていただきます。鎌倉と申します。 まずは、自己紹介なんですけれども。普段はフロントエンドエンジニアとして、ReactとかReduxとか使って、Webアプリを使っております。今年の1月くらいから、React Nativeの調査を始めまして、今日に至るという感じです。 そして今日のアジェンダですね。今日の内容は、React Nativeについてという話と、なぜReact Nativeを調査し始めたのかというのと、React Nativeのアーキテクチャの話。あとは、デモのアプリも作っていたので、その紹介を少ししようかなと思っています。 まずは、React Nativeについてなんですけど。ご存知の方もけっこういると思
Open Source AdoptionYoga already powers widely used open source frameworks. It enables these frameworks to offer a simple and intuitive layout API that allows for engineers to collaborate more easily across platforms. Yoga has unlocked exciting features such as calculating layouts off of the main thread to help ensure smooth UI performance. Why You May Consider YogaPERFORMANCEYoga was built to be
米Appleが、モバイルアプリ開発ツールを手掛けるカナダのBuddybuildを買収した。Buddybuildが1月2日（現地時間）、公式ブログで発表した。 Buddybuildは2015年創業のバンクーバーに拠点を置く非公開企業。「世界初のイテレーションプラットフォーム」を謳い、モバイルアプリ開発者にGitHub、BitBucket、GitLabなどで使えるアプリ開発ツールを提供している。「git push」ごとに安全なビルド環境を構築し、UIテストやAppleのTestFlightのためのβテストの準備などもサポートする。 関連記事 Apple、「Developer Program」で一部開発者は年額99ドルから無料に Appleが、一定の条件を満たす組織に対し、「Apple Developer Program」の年間メンバーシップの料金（99ドル）を無償にすると発表した。 Apple
今回は、自分が普段どのように開発しているのか、一部をご紹介します。 参考になれば幸いです。動画内でご紹介した設定内容はこちらの記事にまとめました： https://blog.craftz.dog/my-dev-workflow-using-tmux-vim-48f73cc4f39e ▶ Inkdrop - Markdownノートアプリ https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=vEwyheX8gH4 ▶ 関連ブログ記事: vim + tmuxでVSCodeっぽい開発環境を作る https://blog.craftz.dog/building-vscode-like-environment-using-vim-and-tmux-47cf7d43
Why Discord is Sticking with React Native – Discord Blog
From Blocky to Brilliant: Improving Video Quality on Discord Go Live on AMD GPUs
ディープリンクをめぐる歴史とReact NativeにFirebase Dynamic Linksを導入する手順 - KitchHike Tech Blog
Firebase Dynamic LinksをReact Nativeアプリに組み込むために調査したDeep Links（ディープリンク）の歴史を記事にしました。 はじめに こんにちは。KitchHikeインターンエンジニアのタクです。 スマートフォンでリンクをタップすると、アプリが起動してアプリ内のコンテンツへ遷移したことはありませんか？ メールやWebサイトのリンクからアプリを起動させて画面遷移させる技術を Deep Linking (ディープリンキング) といい、実現するリンクのことを Deep Links (ディープリンク)といいます。アプリの普及と共にディープリンクは広く使われるようになりましたが、実装には煩雑な手順と設定が残っており、開発者にとって悩みの種になっているかもしれません。 Firebase Dynamic Linksを導入すると、ディープリンクを実現する上でのURL
なかざんです。ウォーターセルという新潟の会社でアグリノートという農業向けアプリを作っています。 業務で使う構成のPoCとして、Webとモバイルネイティブの両方で動く、React Nativeのサンプルプロジェクトを作ってみたので、そこで得られた知見をご紹介します。 つくったもの 私たちが愛してやまないJetBrains製IDEのアイコンとボタンを並べて、ボタンを押すと製品ページに行けるアプリです。押したときにはピコッと鳴ります。 ソースコードはこちら。 https://github.com/Nkzn/react-native-multi-target-sample ネイティブ版はこんな感じです。 Webアプリ版はこんな感じ。 見てもらったほうが早い 今回は実物を触ってもらいやすい環境が作れたので、実際に触ってみたほうが雰囲気がつかみやすいと思います。 ネイティブ版 ネイティブ版はExpoで
Quipper での CodePush を使った OTA 配信とその自動化 - スタディサプリ Product Team Blog
この記事は React Native Advent Calendar 2017 6 日目の記事です。5 日目は Quipper 同僚の @hotchemi によるQuipperにおけるReact Native活用事例でした。 こんにちは、Quipper で Software Engineer をやっている @yuya-takeyama です。 入社以来ほとんど Web のサーバサイド・クライアントサイドをやってきましたが、最近は React Native アプリのプロジェクトで TypeScript を書いています。 昨日の記事でも軽く触れてますが、Quipper で最近運用が始まった OTA (Over The Air) によるアプリ配信の運用とその自動化について詳しく紹介します。 なお、実際に動くコード例として以下のリポジトリを用意しました。 quipper/ReactNativeCo
v0.57でいろいろ変わるという記事を書きましたが、本当にMetro BundlerがTypeScriptを食べてくれるのか半信半疑だったので、実際に試してみました。 結論 ビルドだけならゼロコンフィグに近い感じで行けました。型チェックをする場合はMSのブログでのやり方よりも、もうひと工夫必要です。 サンプルコード v0.57.0-rc.3でプロジェクトを作ってみました。これをベースにお話します。 前提条件：Babel 7のTypeScript対応の仕組み React NativeのTypeScript対応は、Babel 7のTypeScript対応に乗っかった形で実現されています。 ここで重要なのは、 Babelはtscを内部で実行するわけではない ということです。 今回導入された@babel/preset-typescriptは、FlowTypeの babel-plugin-flow-
React NativeのレイアウトエンジンYogaの仕組み [前編] - Adwaysエンジニアブログ
こんにちは、@binaryta です。 先日「React Native OSS ペアプロ会 #3 byFACTBASE」というイベントに参加してきました。 factbase.connpass.com OSSにcommitすることを主眼としていて、React Nativeのissueの問題に解決策を提示したり、解決できそうならPull Requestを送るといった内容です。 このイベントに参加中、レイアウトのバグを直そうとしていた際にYogaを知りYogaに興味を持ちました。 僕は「React Native OSS ペアプロ会」には初回から参加していますが、今後も定期的に開催するみたいなので、興味ある方は是非参加してみてください。 対象 Yogaはクロスプラットフォーム間で共通にレイアウト処理をするべく作られたレイアウトエンジンです。そのためiOSではObjective-C, Android
![React NativeのレイアウトエンジンYogaの仕組み [前編] - Adwaysエンジニアブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/72abfaebb5f46a2b58ed269573255d4ad3c6f6bf/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2FA%2FAdwaysEngineerBlog%2F20180824%2F20180824163608.png)
React Native for Windows + macOS · Build native Windows & macOS apps with Javascript and React
Extend your desktop experience to more than just Windows! Try out our fully supported macOS extension to React Native. React Native for Windows + macOS brings React Native support for the Windows SDK as well as the macOS 10.14 SDK. With this, you can use JavaScript to build native Windows apps for all devices supported by Windows 10 and higher including PCs, tablets, 2-in-1s, Xbox, Mixed reality d
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。今回の記事では、AutoReserveでおこなっているコード共通化の取り組みについて紹介します。 背景 AutoReserveのネイティブアプリはReact Nativeで書かれており、またウェブ版は、Reactで書かれています。 ウェブ版では、React Native for Webという、React上でReact NativeのコンポネントのAPIを使えるようにするライブラリを使用しています。 React Native for Webを採用したことで、ハローでは現在、エンジニア1人でiOS、Android、ウェブの全てのプラットフォームに同時展開できるようになりました。 また、不具合修正やデザインの修正も、一箇所を修正するだけで同時にできるようになりました。それぞれのプラ
GitHub - react-native-jp/react-native-at-airbnb-jp-translation
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
React Native is being deprecated. We recommend using Snack Expo instead.
React Native入門 ─ Hello,Worldからネイティブ連携まで Kameda Shohei（GLOBAL EDUCATIONAL P...） モバイルアプリ開発におけるWeb技術の可能性を探る特集・第一弾でご紹介するのはReact Native。その生い立ち、チュートリアルから、コードベースやUIを記述する言語、パフォーマンスまで解説します。 概要 React Nativeは2013年にFacebook社内のハッカソンで生まれたプロジェクトです。2014年にiOSアプリのFacebook Ads ManagerをReact Nativeを用いて開発し、2015年3月にオープンソースとして公開されました。そして、半年後の2015年9月にAndroidをサポートし、今年のF8では、MicrosoftがReact NativeでWindowsプラットフォーム（PC, Mobile
会社プロジェクトを 0.44.3 (2017年6月時点の最新版)から 0.49.5(2017年11月頭時点の、最新版のstable)に上げた。思ったより大変だったのでメモっておく。 そもそも何故 ReactNative のバージョンを上げるのか？ RN はまだまだ絶賛進化中で、本体のバージョンが上がることで React / React Native のパフォーマンスの向上や、周辺環境の向上、例えば Flow での型チェックがさらに進化するなど恩恵を受けれる。 実際にアップグレードしてCIの実行速度も20%ほど向上した。以下は CircleCI のビルド時間の中央値の値。真ん中あたりでガクッと下がったのがRNのバージョンを上げたタイミング。 また、破壊的な変更が本体に入ることも多く、例えば RN 0.47 から Android ネイティブライブラリ作成で利用されていたcreateJSModu
https://react-native-meetup.connpass.com/event/53572/ 発表資料
GitPoint
What is GitPoint? View repository and user information, control your notifications and even manage your issues and pull requests. Built with React Native, GitPoint is one of the most feature-rich unofficial GitHub clients that is 100% free. What is GitPoint? View repository and user information, control your notifications and even manage your issues and pull requests. Built with React Native, GitP
ReactNative + Scala.jsファーストインプレッション - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く
ちょっと訳あって仕事の一貫としてReactNative + Scala.js の技術検証している。あたまには「全部C#」のライフベアさんの事例がある。弊社、最近メンバー増えてきたけどまだこの規模だと「あのひとはあれができるけどあのひとはこれができなくて」がボトルネックになりうるので、 筋の良い 共通の基盤技術を持つという選択肢のひとつとして検証したいというのがモチベーションとしてある。というわけで、 Reduxは使ってない。「Scalaを基盤技術にしてどこまでできるのか」が検証の目的だから。 Vue.js + Scala.jsでElectronアプリ作ったときと同じ感じで、MVWhateverのVとWhateverの部分は素直にJSで書いている。分厚いMをScalaで書き、UIだけReactNativeで記述する。 以下ファーストインプレッション pros Vue.js + Scala.j
React Native + Expoで1年以上運用したCTOが集まってみた 後編 - KitchHike Tech Blog
こんにちは、エンジニアの Miho です！Expo に関わるCTO達の座談会、 前編は React Native や Expo の仕組みについて理解を深めながら、導入のメリットや eject の必要性など、1年以上運用してきたからこそ語れる話題で盛り上がりました。 tech.kitchhike.com 後編は、オープンソースコミュニティという視点を中心に、Expo のもつ可能性をさらに深掘りしていきたいと思います！ Expo を支える組織 温度感あるOSSコミュニティ、Expo Expo のメリット・デメリット復習 コミュニティへの関わり方と、今後の展望 We’re Hiring! Expo を支える組織 藤崎 祥見（以下、S）：改めて Expo の価値や導入のメリットを振り返りたいと思います。React Native を含めて、クロスプラットフォームという特徴は間違いなく、少人数でのネイ
React NavigationRouting and navigation for Expo and React Native apps.
GitHub - aws-amplify/amplify-js: A declarative JavaScript library for application development using cloud services.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Swift および Objective-C を使用した iOS メモリー管理で絶対に失敗しないための 7 つのヒント
IBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.
Takuya Digital crafts(man|dog). Love photography. Always making otherwise sleeping. born in 1984. Rollout.io導入アプリがリジェクトされた話題は、3月7日にHackerNewsで盛大に盛り上がりました。 Hot Code Pushというのは、App Storeのレビューを通さずにアプリの挙動を変更できる仕組みのこと。 Rollout.ioはこの仕組みを利用してバグ修正が迅速に行えるサービスを提供していました。 上記Hacker Newsのコメ欄にRolloutのCEOのErezが出てきたりして、顔面蒼白ぶりがひしひしと感じられますねぇ。 これだからプラットフォーム依存は怖い！ ネイティブの動きを変えられるようにするのはダメ 何がダメかっていうと、以下のAPIを使って動的に挙動を変えられ
こんにちは、React Nativeエンジニアの@kiriminです。去年の末くらいからReact Nativeでの開発案件に携わっていまして、ある程度形になってきたので、Webフロント開発の経験がないAndroidエンジニアがReact Native案件にいきなりJoinして感じた事やReact Nativeでの開発の雰囲気などについて週次で開催している社内LT会で共有しました。 ネイティブエンジニアチームによるReact Native開発案件の一例として共有したいと思います。 TL;DR・React Nativeの学習コストはかなり低い ・最新のJavaScriptでの開発はそれなりに快適 ・思ったよりはよく出来ていてAndroidとiOSをあまり意識せず同時に実装出来るのは本当 ・ただしネイティブと遜色ないデザインを実現するにはかなりの努力が必要 ・Reduxは面白いけど難しい An
Opens in a new windowOpens an external siteOpens an external site in a new window After years of native mobile development, we’ve decided to go full steam ahead building all of our new mobile apps using React Native. As I’ll explain, that decision doesn’t come lightly. Each quarter, the majority of buyers purchase on mobile (with 71% of our buyers purchasing on mobile in Q3 of last year). Black Fr
この記事は React Native Advent Calendar 2020 の 13 番目の記事です。私の視点や感覚をもとに、 React Native を採用する際の現状を記述したものです。 次の方を対象としています。 技術をビジネスの競争力へ転換する責任を負う方 採用の責任を負う方 技術的な詳細については拙著を参照してください。 書いているひと エンジニアリングマネージャーの januswel です。現在は育成をメインに、採用を少し手伝ったり、メンバーのキャリアと組織の方向性をすり合わせるなど、主にピープルマネジメントを担当しています。また、チームでの採用技術の軸足を揃えたり、実案件も少し関わらせていただいてます。 React Native とはなにか React を用いて様々なプラットフォーム上でアプリケーションを構築可能なオープンソースソフトウェアです。開発は Facebook
GitHub - fastlane/fastlane: 🚀 The easiest way to automate building and releasing your iOS and Android apps
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
What is React Native?React Native is a JavaScript framework for building cross-platform apps. This guide covers everything you need to know to start developing React Native apps. How to use this guideBuilding with React Native is extremely efficient — but getting started can be a little tricky. You should use this guide as a companion to the official Facebook documentation for getting started. Thi
GitHub - iSimar/HackerNews-React-Native: Hacker News iOS and Android App - Made with React Native.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
この記事は React Native Advent Calendar 2017 の 4 日目の記事です。 TL;DRエラートラッキングサービス Sentry の React Native における導入方法の紹介Sentry を使えば、 OS ・バージョン等どのような環境でどのような問題が起きたかがわかるようになるどのユーザがどのようなシチュエーションで問題に遭遇したかがわかるようになる基本的な使い方を紹介 エラートラッキングの必要性とその方法一切の問題無くアプリケーションが動作するのであればそれに越したことはありませんが、十分なテストを以てしても予期せぬ障害は起きるものですよね。 そういった問題は全て解決されるべきですが、そのためには以下が不可欠でしょう。 問題が発生したことに気付ける仕組み問題が発生する原因を（容易に）知ることが出来る仕組み文字通り解釈すれば前者をエラートラッキングと呼ぶ
React Native Meetup Portlandでハイブリットアプリ開発について話しました - tomoima525's blog
先日React Native Meetup Portlandという勉強会でReactNativeとNativeのハイブリットアプリ開発について発表をしてきました。アメリカの自社開催以外のの勉強会で発表することは初めてだったので、知見と反省をメモしておこうと思います。 経緯 会社のオフィスは現在サンフランシスコとポートランドにあります。ポートランドは今アメリカで一番人気な街と言われているのですが、実はスタートアップやIT企業も数多くあります。React Nativeは今人気なフレームワークで、つい先週もReact ChainというReact Native(React.jsでない)のカンファレンスが開催されたばかりです。色々な経緯でそんなポートランドのReact NativeのMeetupグループにオフィスを提供して勉強会を開くことになり、自分が発表者の1人として登壇させてもらうことになりまし
Facebook gave all attendees of React Conf early access to the source code of React Native, a new way to write native mobile apps. The technology takes everything that's great about React.js and applies it to native apps. You write JavaScript components using a set of builtin primitives that are backed by actual native iOS or Android components. First off, I know it sucks it's not completely public
Introduction · React Native
Welcome to the very start of your React Native journey! If you're looking for getting started instructions, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more! Many different kinds of people use React Native: from advanced iOS developers to React beginners, to people getting started programming for the first time in the
React Nativeが発表されました。名前の通りReactでNative Appが書けるすごいやつです！ 日付超えたのだけど試すくらい寝る前にやってみたいな、と思いまして！ nodeとnpmの他にwatchmanが必要です。最初watchman入れてなくて、なんだこれはって感じだったんですけど、感動につながる重要なファクターなので迷わず入れましょう。注意点って書いたのはこのことです。これだけのことを注意点と大げさに書いてしまったわけです!（なんてことだ！） brew install watchman そして、インストールして、プロジェクト作成。 npm install -g react-native-cli react-native init ReactNativeSample 出来上がったReactNativeSample.xcodeprojをXcodeで開いてRunすればOK
React Nativeで作ったスマホアプリにAdmob（広告）とRevenue Cat（課金）を使ってマネタイズする
【2022年10月23日改訂】React Nativeを使ってアプリを作った際、マネタイズの方法としてよく検討される「広告収益」と「課金」について、AdmobとRevenueCatを使った実装や設定方法を解説します。※ExpoのManaged Workflowでも課金処理が実装できるようになりました。EAS Buildの設定などが必要ですが、この本では解説しませんのでご注意ください。なお、サンプルアプリはManaged Workflowで実装しております。
React Native Playground
The React Native Playground June 2nd, 2015 - April 1st, 2017 The Playground helped developers share React Native applications in-browser. Her spirit lives on in fresh, supported tools like Snack and Repl.it, and in source form on Github. As we remember the life and times of our dearly departed friend, let's take a step back from our busy work lives, gather with colleagues, and ask: how can I help?
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか
makeitopen.com · Building the F8 App
「React Native」はなにがすごい？ リクルートのエンジニアが徹底調査
Yoga Layout | A cross-platform layout engine
Apple、モバイルアプリ開発ツールのBuddybuildを買収 Android版は2月末で終了
tmuxとvimによる開発作業フロー 〜 ターミナルで効率的にアプリを開発するための設定など
React Native for WebとExpoを組み合わせてピコピコさせてみたよ - Qiita
React Native v0.57がTypeScriptに対応したらしいので動かしてみた - Qiita
ウェブとReact Nativeアプリのコード共通化による同時展開 - Hello Tech
Repl.it - React Native
React Native入門 ─ Hello,Worldからネイティブ連携まで
ReactNative 本体のバージョンのアップグレードを行う - Qiita
Our choice in ReactNative
React Navigation | React Navigation
AppleのHot Code Pushリジェクト問題、React Nativeへの影響は？
初見から実務でReact NativeやったAndroidエンジニアが社内LTで所感を共有しました
React Native is the Future of Mobile at Shopify
組織戦略としての React Native | DevelopersIO
React Native Express
Sentry で始める快適エラートラッキング on React Native
First Impressions using React Native
春、React Native、恋の予感...初めて触れた感動とその注意点。