2018年2月1日

プログラミング

bageleeアプリを支える技術

目次

  1. はじめに
  2. React Nativeとライブラリについて
  3. REST APIを使った記事取得
  4. まとめ

はじめに

bageleeアプリを支える技術

 

bageleeがiOS/Android向けアプリになりました!
アプリ版bageleeの開発はReact Nativeを使って、クロスプラットフォームで行われています。今回はこのアプリを支える技術について紹介していきます!

詳細はこちらです!

React Nativeとライブラリについて

React Nativeを使ったアプリ開発を行う際には、オープンソースのライブラリを正しく選択し使うことが重要になります。アプリ版bageleeも複数のライブラリを使用していますが、そのうちでも特に導入すると効果の高いものをご紹介します。

react-navigation

GitHubリポジトリ
公式サイト

ナビゲーション(画面遷移)を実装するライブラリです。実用的なアプリではナビゲーションはほぼ必須ですので、ほとんどの場合何かしらのナビゲーションライブラリを導入することになります。React Nativeの公式のドキュメントにも紹介されていますが、複数ある中でもreact-navigationはスタンダードなライブラリという位置付けです。

アプリ版bageleeでは、StackNavigatorによる画面遷移とTabNavigatorによるタブ切り替えを組み合わせて使っています。

react-navigation

react-native-vector-icons

GitHubリポジトリ

React Naviteアプリ内でFont AwesomeやIoniconsなどのアイコンフォントを使えるようにするライブラリです。アイコンフォントを使うと画像ファイルを個別に用意する必要がなくなるため、特に開発初期において開発スピードが向上することが期待されます。

react-native-vector-icons

react-native-firebase

GitHubリポジトリ
公式サイト

Googleが提供するアプリ用プラットフォームのFirebaseをReact Nativeアプリでも使えるようにするライブラリです。アプリ版bageleeでは今のところプッシュ通知にFirebaseを利用していますが、他にも無料で使える便利な機能が様々ありますので、今後の記事でも紹介していく予定です。

REST APIを使った記事取得

bageleeはWordPressを使っているので、WordPressのREST APIを使うことで、サーバーサイドの追加実装はほとんど行わずにアプリ側から記事情報が取得できました。

REST APIについては公式ドキュメントのほか、こちらの記事も参考にしてください。
RailsからWordPressの記事一覧をREST APIで取得する

閲覧数はWP-PostViewsというプラグインを使っていますので、REST APIの結果に閲覧数フィールドを追加するためのWordPressプラグインは独自に作成する必要がありました。

まとめ

通常のアプリ開発ではiOS、Android、サーバーサイドとそれぞれ別々に実装が必要ですが、アプリ版bageleeではReact NativeとWordPress REST APIを活用することで開発を初めてから短期間でリリースすることができました。

bageleeではますますおいしいデザイン・プログラミング情報をお届けする予定ですので、今までのWeb版と合わせてアプリ版もよろしくお願いします!
ぜひこちらからインストールしてみてください。
 

0

0

AUTHOR

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP