こんにちは、技術書典のWeb担当 @vvakame です。 そしてこの記事の編集を担当した技術書典代表 @mhidaka です。 一年の大半という長きに渡り、燻っていましたが遂にアーキテクチャを刷新した新しいWeb UIをリリースしました! 大規模変更となるためOpt-Inでの公開です。一週間くらい様子を見て問題がなさそうであれば移行Stepを進め、Opt-Outに切り替えます。 ここまで大きな変化が技術書典WebのUIに起こったことはありません。不安に感じるかもしれませんが、 ユーザーにとっては変化がないことのほうが改善が行われないリスクだと判断しました。今後もやきもきさせてしまうことがあるかもしれませんが、暖かく見守ってください。 今回は何もかもを作り直しており、さらなる前進のための基盤を整えました。 アーキテクチャの刷新は大変に大きな変更なのでUIの構造自体は旧来のものを維持していま
オリジナルのスライド https://drive.google.com/open?id=1usMYktUlwjYVZEUfcSbYERe8ZO2mwnSP
ヌーラボのスケートボード担当のReoです。プロスケーターとして活動する傍らヌーラボでは当サイトやBacklog / Cacoo / Typetalkのサイト更新を担当しています。 ヌーラボは大半がエンジニアで構成されており、サイト更新をメインで行う担当者がいなかったため2017年10月にWebサイトの担当者として入社しました。 マーケティングチームの所属ではありますが、技術者としてスキルアップを目指せるポジションで入社させてもらい、個人的にもWebアプリを作りたいという気持ちもあります。 そこで本稿では、Webデザイナーだった私がフロントエンドエンジニアを目指すためにJavaScriptとReactを学んでオセロゲームを制作したお話しをします。 はじめに ヌーラボ入社前は未経験のWebデザイナーとして、社長と従業員1人の小さな制作会社に1年ほど雇ってもらい、HTMLとCSS、サイト制作に必
このたび、スノウロビンでは React Native でのアプリ開発にチャレンジしました。 本記事では入門レベルを超えてプロダクションに採用してわかった知見を紹介します。 どんなアプリをつくったか医者と患者に分かれて、ビデオ通話とチャットができる、医療系ビデオ通話アプリを開発しました。ビデオ通話とチャットにはTwilioの Programmable Video と Programmable Chat というサービスを使っています。 以下の4種類のアプリを開発しました。 iOS 医者アプリAndroid 医者アプリiOS 患者アプリAndroid 患者アプリReact Native を採用した理由4種類のアプリでしたが、 iOS / Android ともにデザイン・基本的な挙動は同じということで、効率よく開発するためにクロスプラットフォーム技術の採用を検討しました。 React Native
コンポーネント設計がReact Nativeの開発速度に直結する CTOの Shoken です。キッチハイクでは1年半前に0ベースからReact Nativeでアプリ開発を始めました。React Nativeアプリを長期的に開発・メンテナンスする際に重要になるのがコンポーネント設計です。1年半の開発を通して、デザイナーとエンジニアがコンポーネント設計での共通認識を持っていることが、機能追加・修正などの開発速度に直結するという学びを得ました。この記事では、キッチハイクアプリのコンポーネント設計の考え方を紹介します。 コンポーネント設計がReact Nativeの開発速度に直結する Atomic Designという共通言語 コンポーネントを構成する4つの要素 "デザインとしての構造性" と "コードとしての再利用性" ButtonはAtomなのかMoleculeなのか問題 Atomic Des
こんにちは、React Nativeエンジニアの@kiriminです。去年の末くらいからReact Nativeでの開発案件に携わっていまして、ある程度形になってきたので、Webフロント開発の経験がないAndroidエンジニアがReact Native案件にいきなりJoinして感じた事やReact Nativeでの開発の雰囲気などについて週次で開催している社内LT会で共有しました。 ネイティブエンジニアチームによるReact Native開発案件の一例として共有したいと思います。 TL;DR・React Nativeの学習コストはかなり低い ・最新のJavaScriptでの開発はそれなりに快適 ・思ったよりはよく出来ていてAndroidとiOSをあまり意識せず同時に実装出来るのは本当 ・ただしネイティブと遜色ないデザインを実現するにはかなりの努力が必要 ・Reduxは面白いけど難しい An
こんにちは、株式会社ピケ CTO の中西(@nakanishy)です。 Dish というランチ検索アプリのフロントエンドとデザインを担当しています。 Dish では、React Native を採用して iOS アプリの開発をしています。iOS アプリを正式にリリースしたことがなく、また React Native も初めてだったので、苦戦する場面も多々ありましたが、良かった点もたくさんありました。 この記事では、Web 開発者の視点で React Native の良かった点と悪かった点を紹介したいと思います。 React Native の良かった点 高速に開発できる React Native は、ライブリロードとホットリロードをデフォルトでサポートしているので、Web 開発をしているかの如く高速に開発が進められました。保存すると即座に変更が反映されます。また、ホットリロードの場合、状態を維
ここはReact Native vs Flutter - Which to Learn? - YouTubeを参考にプラスアルファしています。 XamarinのXamarin社にとっての存在意義はフレームワーク販売による直接的収益でした。 Xamarin社をマイクロソフトが買収したのはXamarinかなり成熟してからだったので、買収時点のマイクロソフトにとってのXamarinの存在意義は企業ブランド向上がメインだと感じてます。 FacebookがReact Nativeの開発に着手した直接の動機は「InfoQ: Facebook:「HTML5に賭けたのは間違い」発言の技術的な理由と反応」でしょう。それをわざわざOSSで公開するのは、アプリ開発者コミュニティーによるReact Nativeのデバッグと技術力誇示による企業ブランド向上が目的だと思います。 GoogleがFlutterの開発に着
先日React Native Meetup Portlandという勉強会でReactNativeとNativeのハイブリットアプリ開発について発表をしてきました。アメリカの自社開催以外のの勉強会で発表することは初めてだったので、知見と反省をメモしておこうと思います。 経緯 会社のオフィスは現在サンフランシスコとポートランドにあります。ポートランドは今アメリカで一番人気な街と言われているのですが、実はスタートアップやIT企業も数多くあります。React Nativeは今人気なフレームワークで、つい先週もReact ChainというReact Native(React.jsでない)のカンファレンスが開催されたばかりです。色々な経緯でそんなポートランドのReact NativeのMeetupグループにオフィスを提供して勉強会を開くことになり、自分が発表者の1人として登壇させてもらうことになりまし
REST API に疲れたあなたへ贈る GraphQL 入門 from Keisuke Tsukagoshi www.slideshare.net これみたんだけど、多分だけどスキーマさえ定義すれば、とりあえず読み書きだけするAPIに関してはロジックを書かないでいいってことだよねぇ。 ちょっと複雑なAPIは書く必要ありそうだけど。クライアント側でロジック書くのは気持ち悪いし。 しかし、タイトルにもあるけど GraphQL Lambda ReactNative の3点セットで爆速でアプリ開発できそうじゃないかねぇ。 ついでに callstack.github.io UIはこれにすればデザインももう出来てるというね。。 やるとしたら掲示板チックな何かかなぁ 500ブックマーク行ったらやろうかな(行かないで終わるパターン)
2018年3月23日から24日にかけて、レバレジーズ株式会社が主催する国内最大級のエンジニア向け技術イベント「MANABIYA -teratail Developer Days-」が開催されました。同社が運営するITエンジニア向けのQ&Aフォーラム「teratail」の中で解決できない問題を解くため、一流エンジニアたちが一同に会して、プレゼンテーションやパネルディスカッションを行いました。トークセッション「React Nativeコミュニティの現在と未来」では、React Native JapanのOrganizerである中田一成氏が登壇。Expoなどの基礎知識や事例を紹介しながら、React Nativeコミュニティの今日までの軌跡と今後の方向性を解説します。 React Nativeはどういうもの? 中田一成氏(以下、中田):React Nativeコミュニティと現在と未来というタイト
はじめに 最近はアプリ開発にReact Native(以下RN)を使用するケースも増えてきているようですが、RNはネイティブアプリを開発する最強のライブラリというわけではありません。 メリットをうまく利用すればとても良いアプリができると思いますが、失敗すると、さらに倍の時間をかけてSwift、Javaで作りなおし、、、といったことも発生するかもしれません。 特徴や他社事例をよく調査し、チームの状況に応じて、採用するかどうか判断することがとても大事です。 この記事では、どういった状況に置かれたチームが、RNで開発するのに適しているか、僕なりの考えを書きますので、参考にしていただければと思います。 RNがどういったものであるかの説明や、実装方法については書きません。 目次 はじめに 目次 1. なるべく早くリリースしたいチーム 2. iOS/Androidで仕様・見た目を揃えたいチーム 3.
blog.nkzn.info というわけで、2月に予告していたReact Nativeの本ができました。 タイトルは「Cheap Dive into React Native」です。Deep Diveと名付けるのはちょっと面の皮が薄くて無理だったので、ちょっとトーンダウンしてみました。 techbookfest.org 配置 き02にいます。XamaritansとPEAKSに挟まれてます。 配布形態 あれ これ サイズ B5 ページ数 88ページ 頒布価格 1000円(おつりオペレーションを極限まで軽くしたかった) 表紙について 妻と「オライリーベースで身も蓋もない感じにしよう」と相談しているうちにこうなりました。 どこからどうみてもなかざん本です。 便所スリッパ識別性高いwww— Atsushi Eno (@atsushieno) 2018年4月13日 みんな見つけてくれよな! モチベー
※サンプルではRedux不使用の為、ステートの管理はそれぞれのコンポーネント内で行っています。 ※サンプルのpackage.jsonの記載の中でreactのバージョン設定の部分とreact-native-router-fluxに関してはバージョンを固定する為に^(キャレット)を外しています。 ★2-3. 今回使用したサンプルの画面設計図 こちらはおまけになりますが、今回のサンプル実装に関する設計図になります。 あまりReactNative特有の処理はほとんどないのでUIモックに近い形になってはいますが、ご参考になれば幸いです。 3. NativeBaseの基本概要について こちらはiOS/Androidでの端末によるデザインの違いをよしなにすることができるUI Component Libraryになります。 このライブラリで提供されているコンポーネントに関しては、基本的にはReactNat
はじめに 個人的に元々のキャリアがWebに近しいところからのスタートであったので、JavaScriptに関する部分もiOSやサーバーサイド同様にキャッチアップしていきたいという思いがあったことや、先日参加させて頂いたTry!Swiftの中でもReactNativeに関連するお話をお聞きする機会があったことも踏まえて、今年から取り組んでみていました。 今回は自分のこれまでReactNativeを始めるにあたって、「こんな感じで取り組んでみました。」という備忘録と調べながらのサンプル作成において活用したものや参考リンク等をざっくりとまとめてみました。 あまりコードそのものに関する解説はない記事にはなってしまうかと思いますが、取り組む上で参考にした記事のリンクや自分で作成したリポジトリ内のコードや動きに関する部分はできるだけ掲載していきますので、これからReactNativeに携わる際の少しでも
前置き僕が所属しているソニックガーデンではRemottyというツールを自社で開発し、普段の業務に使っています。リモートワークをするためにオフィスと言ってもいいような場所で、業務中は常にオンラインとなり、リアルタイムチャット(対面の会話の代替)とトピックベースの掲示板(メールなど非同期コミュニケーションの代替)の両方を備えたオフィスとなるようなツールです。 オフィスにいられない間にもチャットや掲示板に反応できるように、iOSとandroidそれぞれにネイティブアプリのクライアントアプリがあり、それぞれを別の開発者が担当していました。iOS版はその当時新卒2年目だった若者が作ったものを僕が引き継ぐ形でメンテしていました。 もともと自社向けに開発していたプロダクトではありますが、働き方改革の流れなどの関係もあってここ1年〜2年ぐらいの間に有償で使ってくださるお客さまが出てきました。 そうなってく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く