2018年4月10日

プログラミング

技術・ツールコミュニティサービスのSpectrumがOSSに!【今日のGitHubトレンド】

目次

  1. はじめに
  2. spectrumとは
  3. 環境構築
  4. まとめ

はじめに

GitHubはご存知の通り、世界最大のソースコードの共有サービスです。
ユーザー数はなんと3,821万人を超えています。
※2018年4月時点

このようにAPIからユーザー数も調べることができます。https://api.github.com/users?since=38210000

GitHubの流行はいわばテクノロジーの流行とも言えます。
このシリーズでは、GitHubで人気のリポジトリをご紹介していきます。

今回ご紹介するリポジトリはSpectrumです。
後ほどご紹介しますが、Spectrumは技術やデザイン、ツールなどのコミュニティサービスで、チャットでディスカッションの場となっているサービスです。
2018年4月3日にオープンソース化され、話題となりました。

詳細は公式のこちらの記事もご覧ください。
🎉🎉 Announcement: Spectrum goes Open Source! 🎉🎉

Spectrumとは

Spectrumは技術やツールなどのコミュニティサービスです。

このように様々なツールや技術などのコミュニティがあり、検索し加入することができます。
 2018-04-09 22.58.19.png (445.7 kB)

Web系のフレームワークコミュニティなども活発です。
 2018-04-09 22.59.06.png (407.8 kB)

例えばReactのコミュニティはここです。

 2018-04-09 23.00.41.png (217.2 kB)

個々のテーマのスレッドがあり、中ではチャット形式でディスカッションされています
 2018-04-09 23.07.22.png (151.8 kB)

こういった技術的な議論の場としては、redditHacker Newsがありますが、Spectrumは今時のUIで見やすく、また技術やツールなどに特化しており見やすいのが特徴です。

環境構築

では、環境構築していきましょう。

Spectrumはこのような構成になっています。

spectrum/
├── api        # API server
├── athena     # Worker server (notifications and general processing)
├── chronos    # Worker server (cron jobs)
├── docs
├── email-templates
├── hermes     # Worker server (email sending)
├── hyperion   # Server rendering server
├── mercury    # Worker server (reputation)
├── mobile     # Mobile apps
├── pluto      # Worker server (payments; syncing with Stripe)
├── public     # Public files used on the frontend
├── shared     # Shared JavaScript code
├── src        # Frontend SPA
└── vulcan     # Worker server (search indexing; syncing with Algolia)

また使われている技術はこちらです。

RethinkDB: データストレージ
Redis: バックグラウンドJob及びキャッシュ
GraphQL: API
Flowtype: JavaScriptの片付け
PassportJS: Node.jsによる認証
React: フロントエンド及びモバイルアプリ
Expo: モバイルアプリのビルド
DraftJS: WYSIWYGエディタ

Spectrumはmonorepoで管理しています。monorepoは複数にわたる npm package を 1つのリポジトリで管理するやり方です。
サーバサイドではNode.js、フロントエンドではReact、モバイルアプリはReact Nativeが使われており、Full-stack JavaScript と謳っています。

リポジトリをクローンする

git clone git@github.com:withspectrum/spectrum.git

セットアップファイルをインストールする

node shared/install-dependencies.js

rethinkdbをインストールする

rethinkdbはNoSQLのデータベースです。
運営元会社が倒産し、オープンソース化されたという経緯がありますが、JSON形式でレスポンスを返してくれる手軽さもあり、またWeb上のコンソールも使いやすいです。
Mac OSの場合、brewでインストールします。
brew update && brew install rethinkdb

データベースをmigrateする

まずrethinkdbを立ち上げます。
rethinkdb

localhost:8080 にアクセスすると、このようにrethinkdbのコンソールが表示されます。
 2018-04-10 7.53.58.png (77.4 kB)

そして別タブを開き、migrationやseedデータ投入を行います。
yarn run db:migrate
yarn run db:seed

サーバの起動

APIサーバはこちらで起動します。
yarn run dev:api

フロントのUIはこちらで起動します。
yarn run dev:web

localhost:3000 にアクセスすると、無事Spectrumが立ち上がりました。

 2018-04-09 23.49.54.png (515.4 kB)

まとめ

以上がSpectrumのご紹介です。
Spectrumはコミュニティとしても勢いがあります。またコードとしてもほぼJavaScriptで構築されている、モダンな作りになっています。
ぜひSpectrumで好きなツールのコミュニティに参加してみたり、コードを見てcontributeにチャレンジしてみてください。

0

0

AUTHOR

eishis

Eishi Saito 総務

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

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

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

簡単に自分で作れる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