はてなブックマーク

ReactNative0.43(2017-04-03)より、FlatListが新しいcomponentとして追加されました。 FlatListにはこれまでのListViewで解決できなかった問題にリーチできるように設計されてます。特にパフォーマンス周りの問題です。AndroidにおけるRecylcerViewの登場のような出来事だと思っています。 具体的に嬉しいのはonViewableItemsChangedの追加です。ListViewでは同等のプロパティがiOSのみでのサポートでしたが、FlatListではAndroidでも動くらしいです（まだiOSでしか見てないです）。画面に表示されている行(item)を取得するが出来るので、各種パフォーマンス改善に役立てる事が出来ます。 ListViewに過去バージョンごとに追加されていったapiについても一通り既に実装されていますが、セクションヘッ

ReactNativeを使って３つプロダクトをリリースしてきました。クロスプラットフォームなので計６アプリになります。使えば使うほどサクサク開発できる環境の大ファンになっています。(最後にリリースしたもの宣伝してるので、どんなものが出来るか興味ある方は触ってみてください。) これら全てPrivateなプロジェクトなんですが、ユーザーが増えてるものもあり、数字を追いたくなります。とりあえずでGoogle Analyticsを使ってたんですが、綺麗なコホートとか見たくてちょっと調べてみました。結論を言っておくと、Facebook Analyticsを使ってみようと思ってます。 Google Analytics react-native-google-analytics-bridge https://github.com/idehub/react-native-google-analytics-

「React Nativeって時々聞くけど、どれくらいのものが作れるの？」とか「どこで調べればいいの？」とかそういった時に役立つリンクをまとめてみました。 公式ドキュメント まずはお約束として、ドキュメントです。 https://facebook.github.io/react-native/ 公式Showcase ReactNativeで作られたアプリが載っています。 日本のアプリだとCoinyさんのアプリが載っています。 最近、いい感じのニュースソースがないアプリは載らないようになりました。なので厳選されています。以前は自分の個人で作ったやつも載せてもらってたのでちょっと切ないです(´・ω・｀) React Native Playground React NativeのコードがWeb上で実行出来るサービスです。ユーザーがちょっとしたボタンアクションなど登録しています。アプリもあったはず

アニメーションはモダンなアプリ体験に不可欠なものになってますよね。 手のひらのなかのツールの使い心地に鈍感な人は減ってきてるのではないでしょうか。 JSでモバイルアプリを作る時、「アニメーションは実装できるけど、カクカクしてたりして、それないほうが良いよね」みたいな話になったことはありませんでしたか？ 僕もTitanium,Ionic Frameworkと触ってきて、こういうフレームワークは割りきって使うものという印象をずっと持ってました。 ただ、去年React Nativeを使ってiOS, Androidアプリ（短歌を投稿するSNSアプリです）をリリースしてみて、とても気に入って、今回アニメーションやらインタラクション、どこまで出来るのが実験的にアプリを出してみました。 Phrasal Verbs Flashcard 最近ロンドンに来て、英語学習者の友達が増えたのもあって内容はFlash

Firebaseが新しくなりましたね！ せっかくなのでFirebaseの強みを活かして、リアルタイムなチャットアプリを作成してみましょう！React Nativeを活用して、iOS版とAndroid版を同時に作ります！ 素早く（気持ち的に５分くらい）作ることを目標にするので実用性は無視します(/･ω･)/ 1. Firebaseプロジェクトを作る。 新しくなったコンソール画面から新プロジェクトを作ります。適当な名前をつけて下さい。 https://console.firebase.google.com/ 2. Databaseのセキュリティを変更する。 さて、作成後はプロジェクトの詳細画面に飛ばされてたと思います。 次にDatabaseのセキュリティを設定します。 Firebaseはエンドポイントさえ指定すればマルチプラットフォームで使えてしまいます。 その代わりセキュリティルールを指定し

ReactNativeではジェスチャーを扱うためのメソッドがViewに備わっていて、そのあたりはGestureResponderSystemで解説されてます。 それとは別にPanResponderというものがあって、これは特にDragを扱いやすくするよう別途用意されているものです。（と理解してます） PanResponderについてはググると結構コード上げてる人が多い(公式ので十分だし)ので、簡単に理解した内容をまとめます。 簡単な使い方 いきなりTinderみたいなことやってる完成系のコードを見ると結構ボリュームあって動揺するので、まず実装に必要なキモだけ書いてみると... １. componentWillMountなどでPanResponderインスタンスを生成する。 componentWillMount: function() { this._panResponder = PanRe

React Nativeの場合、iOSでPush通知する方法は表示で提供されていますが、 Androidの場合、自分で頑張るか外部のパッケージに頼ることになると思います。(04/2016現在) ちょっと面倒がありそうな状況だから無難にGoogle Cloud Messagingをチョイスした方がいいよね、という判断で以下進めました。Parseもなくなるし。(Javaの時はParseしか使ったことなく、GCMも始めてなので回りくどいことしてたら教えてください） Google APIsでプロジェクトを作る 「プロジェクトを作成」で今回用のプロジェクトを作ります。 GCMを許可してキーなどを得る GCMのクイックスタートから 「プロジェクトでGCMで有効にすること」と、「キーの取得」が同時に出来るので上記URLから進めます。 「GET A CONFIGURATION FILE」をクリックして、

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

オリジナルの記事はブログにあります。 Apple TV向けのアプリは、iOSネイティブ開発で使われるView Controllerなどを使わず、jsとTVMLという謎マークアップで作成することができます。 Apple大先生もバイナリをアップロードしなくていいから迅速にアップデートできるよ的なことを言ってるので、これはWeb技術者の出番なのではないでしょうか。 tvOSでWeb Viewが利用不可らしいことから考えて、おそらくtvでweb的なことをするならTVML使ってUIを統一しろよ！って事なのだと私は理解しました。 コードとしては、Appleが用意したTVMLを使用したUI Catalogを大いに参考にします。こちらはclientというディレクトを掘って、jsとtemplateとなるxml.jsを静的においていますが、今回このxml.jsを動的に生成出来ないかということを実験してみました

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?