One, a React Framework
One aims to make web + native with React and React Native much simpler, and faster. One takes Vite, makes it serve React web and React Native. Then adds FS routes, render modes, loaders, middleware, a CLI, Hono, etc. One is a simpler framework because it's being designed alongside a sync engine, Zero.
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でも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
Flutterとは何か？ 使うメリットや特徴を理解する
2018年12月、Googleは「Flutter」というモバイルアプリ用のフレームワークをリリースしました。さまざまなモバイルフレームワークがある中で、改めてGoogleがリリースしたFlutterとはどのようなもので、どういった利点や特徴があるのでしょうか。まだ知らないという方や聞いたことはあるがよく分からないという方も多いと思います。今回は、筆者の経験や感想などを踏まえて、Flutterについて紹介していきます。 はじめに Flutterは、「モバイルアプリフレームワーク」という位置付けで紹介されることが多くなっています。「モバイルアプリフレームワーク」とは、「モバイル」つまり、AndroidとiOSを同じソースを共有して、同時に作成することができるもの。もちろん、厳密には100％同じソースとは言い切れない場合もあります。そこで、もう少し広義の意味では同じ言語でiOS／Androidの
TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは。LINE Growth Technology UITチームの慶島(@pittanko_pta)です。 この記事では、TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します。 検証環境 TypeScriptからJavaScriptへのトランスパイルは https://www.typescriptlang.org/play (TypeScript 3.9.2 / targetはESNext) で行いました。 Tree-shaking の挙動については https://rollupjs.org/repl/ にトランスパイルしたJavaScriptコードを貼り付けて検証しました
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でコードを共通利用できる開発効率の高さから、多くの開発者が興味を寄せています。 開発のスピ
「ネイティブアプリ開発者は絶滅危惧種なのか？」への感想文 - ナカザンドットネット
ポジション MSがRNめっちゃ使ってるという話について Brownfield事例は実質的にネイティブの事例 Skypeの事例ならどうなのか ネイティブアプリ開発者の仕事は減るのか まとめ みんなの反応 Xamarin勢の反応 Cordova勢の反応 iOSネイティブアプリ開発者の反応 jp.techcrunch.com こちらの記事への雑な感想です。感想は私の主観であり、ポジショントークであり、所属する組織の意見とは無関係であることを先に述べておきます。 また「ネイティブ」という言葉に「C/C++などから作られた機械語」という本来の意味に加えて、「プラットフォームの標準言語（WindowsのC#, AndroidのJava, iOSのObj-C）や標準開発ツールである」というニュアンスを含めることをご容赦ください。 ポジション こんな感じのポジションの人です。 中小企業向けにBtoBでアプ
Kotlin/Nativeがベータに到達、Kotlin 1.3にバンドル。Win/Mac/iOS/Android/WebAssemblyのバイナリ生成。KotlinConf 2018 － Publickey
Kotlin/Nativeがベータに到達、Kotlin 1.3にバンドル。Win/Mac/iOS/Android/WebAssemblyのバイナリ生成。KotlinConf 2018 KotlinはJavaVM上で動作するプログラミング言語として登場しましたが、それ以外にも以前からKotlinのコードからネイティブコードを生成する「Kotlin/Native」の開発も進められていました。 オランダのアムステルダムで10月3日から5日まで開催されたプログラミング言語Kotlinのイベント「KotlinConf 2018」の基調講演で、この「Kotlin/Native」がベータに達し、Kotlin 1.3の一部としてバンドルされることが発表されました。 Kotlin/NativeがKotlin 1.3の一部としてバンドル Kotlin/NativeはWindows、macOS、Linux、iO
React Native製アプリのクオリティを上げるために工夫した事
Illustration by unDrawInkdropというMarkdownノートアプリを一人で作っているTAKUYAです。最近、React Nativeを使って、iOS版とAndroid版の新しいバージョンをリリースしました。React Nativeは、JavaScriptとReactを使ってクロスプラットフォームなモバイルアプリが開発できるフレームワークです。 どうすればReact Nativeでハイクオリティなアプリが作れるのか、今回の開発を通して多くのことを学びました。本稿では、よりよいアプリを作るために自分が工夫したことをシェアします。既にReact Nativeでアプリを作っている方も、これから作ろうと思っている方も参考になるかと思います。 概要OSSライブラリは慎重に選ぶネイティブ拡張モジュールは出来るだけ使わないUIテーマの対応タブレットの対応動作を軽く保つ違和感のない
FlutterとAngularでModelを再利用
同じようなプロダクションコードおよびテストコードを３回も書きたくない！ Web App : JavaScript iOS App : Swift Android App : Java, Kotlin
人気が下降しプログラマの求人も少ないプログラミング言語ワースト10は？ 一方で仕事の多い言語は？ CodementorXとCoding Dojoの調査結果
人気が下降しプログラマの求人も少ないプログラミング言語ワースト10は？ 一方で仕事の多い言語は？ CodementorXとCoding Dojoの調査結果 仕事としてどんなプログラミング言語が扱えるかは、プログラマのスキルやキャリアにとって重要事項でしょう。 フリーランスエンジニアのマッチングサイト「CodementorX」は、GitHubやTwitter、Stack Overlowなどのコミュニティサイトにおける人気や、同社の求人データの傾向などを基に、人気が下降し求人も少ないプログラミング言語を、記事「Worst Programming Languages to Learn in 2018 | Codementor Blog」で発表しています。 一方、プログラミング学習サイトの「Coding Dojo」は、求人サイトIndeed.comの情報を基に、仕事の多いプログラミング言語を「Th
AppleもiOS/macOSをProgressive Web Apps（PWA）対応へ。次のSafari 11.1でService Workerなど実装
AppleもiOS/macOSをProgressive Web Apps（PWA）対応へ。次のSafari 11.1でService Workerなど実装 Appleが、iOSとmacOSの次バージョンにバンドルされるSafari 11.1で、Progressive Web Apps（PWA）の重要な構成要素であるService Workerをサポートすることが分かりました。次のiOSとmacOSのバージョンはiOS 11.3/macOS 10.13.4で、現在ベータ版としてAppleが開発中です。 PWAとは、HTML、CSS、JavaScriptなどのWeb技術によって開発されるWebアプリケーションの一種です。Webサーバから配信されて実行されるだけでなく、リソースをローカルに保存しオフラインでの実行にも対応。Service Workerによるバックグラウンド処理やプッシュ通知なども
コスパで学ぶ自動テストのはじめ方 - 若くない何かの悩み
Qiita 週間ランキング1位を獲得しました Kuniwak です。ご愛顧ありがとうございます。 qiita.com さて、本題に移りたいと思います。 つい最近ですが、勤め先の別チームに向けて自動テストの導入を支援するための資料を作成しておりました。こちらを共有したいと思います。 speakerdeck.com 資料中にある「仕様化テストを推奨しない」という決断には賛否両論あるかと思います。仕様化テストを推奨しなかった理由は、仕様化テストにかかるコストは相当に高く、本当に余裕があるときでないと選べない選択肢だったからです。今回自動テストを導入しようとしているチームは、見るからに余裕のない状況だったので仕様化テストからやれとは言えませんでした。 もし、「自分だったらこうする」等のアドバイスがあれば、ぜひ参考にしたいと思います。コメントなどに書いていただけると嬉しいです。
やばい、iOSにネイティブアプリ要らなくなるかも。SafariもPWAに対応する可能性 - Qiita
これ以上は長くなるため後述． Chromeは既に，Safariもようやく 上記の通り，Service WorkersがPWAでも最重要な機能の一つである．Chromeでは既に対応済み． しかしSafariが対応しておらず，世間的にはモチベーションの上がらない状況であった（やちまもその一人である）． Safariにおいて，Service Workersの実装状況 No active development が Under Consideration になったのは2015/12/041のことである． 20ヶ月という永遠とも呼べる時を経て，2017/08/032にようやく In Development となったわけであった． だから何なのか SafariにService Workersの実装がなされると，一気にウェブアプリへの移行が進む可能性が大きい． ブラウザの制約が弱まり，ウェブアプリの不採
2週間半のReact Nativeアプリ開発を振り返る - c-bata web
React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~ 作者: 松澤太郎出版社/メーカー: マイナビ出版発売日: 2018/08/29メディア: 単行本（ソフトカバー）この商品を含むブログを見る ここ2週間ちょっとReact NativeでiOSアプリ書いてました。 サーバサイドをメインでやってきた自分にとって面白い技術で、今後も趣味で使ってみたいなと思えているのでTipsや所感を残しておきます。 目次 選定理由 Tips エラーハンドリング・状態管理 入力欄をキーボードの出現に合わせて動かすアニメーション 今回使ったライブラリ react-native-focus-scroll react-navigation react-native-vector-icons react-native-camera react-native-vid
AppleのHot Code Pushリジェクト問題、React Nativeへの影響は？
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を使って動的に挙動を変えられ
iOS 9以下でもiPhone safariでインラインで動画再生する方法第三弾 - Qiita
いよいよFelicaポート搭載のiPhone 7が発表されましたね！サプライズもありまだまだ日本でのiPhone一強は続くのではないかと感じさせられました。 さて、そのiPhone 7に搭載される予定のiOS 10ではいよいよsafariでも動画のインライン再生が可能になります。 [iOS 10 Safari から video の inline 再生が可能になります - latest log] (http://uupaa.hatenablog.com/entry/2016/08/29/171809) ##iOS 9以下でもインライン再生する [iPhone Safariで動画をインライン再生する方法 - Qiita] (http://qiita.com/hadakadenkyu/items/75162099d0bf7cdcfdc7) [【音声対応】 iPhone Safariで動画をインラ
5カ月でAngularJSとTypeScriptでSPAを開発。その技術の選択理由と開発過程は？（前編） Developers Summit 2016
5カ月でAngularJSとTypeScriptでSPAを開発。その技術の選択理由と開発過程は？（前編） Developers Summit 2016 シングルページアプリケーション（SPA）は、最近注目を集めているWebアプリケーションのアーキテクチャです。HTML全体の書き換えは行わず、変更が必要な部分だけをJavaScriptで動的に書き換えていくことにより、反応がよくユーザー体験にすぐれたWebアプリケーションを実現できます。 このSPAの開発を、技術の選択、仕様の策定、開発を含めて5カ月で行った経験談が、2月18日に都内で行われた「Developers Summit 2016」（通称デブサミ）のセッション「5か月でAngularJSとTypeScriptでSPAをつくった話」で紹介されました。 注目されているアーキテクチャをいまどきの技術を採用して開発した事例は、立ち見がでる人気
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mapbox
iOS8 safariではviewportが解釈されるよりも前にJavaScriptが実行されるらしい - Qiita
