Go to Qiita Advent Calendar 2024 Top
LoginSignup
18
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@ofuna(maru u)

"React"で作ったブログエンジンをお願いだから紹介させてください！お願いします！！

Last updated at Posted at 2016-12-15

そこそこの感じのブログとか、メディアをコマンド一発で作ることが出来るアプリをめっちゃ気合い入れて作りました！（React + Rubyで）

それをfacebookでシェアしたところ、、、

あああああああ.png

なんと！！！！！！！！！

..................

.................

...............

.............

6いいね 。。。（見てくださった方は神様や。。。）

GithubのStar数は

スクリーンショット 2016-12-15 19.15.41.png

..................

.................

...............

.............

デデデン！！！！

2star . . .fooooooooooo!!!

てか、もともと公にリリースする前から2だったやんか
（しかも、そのうちの一人は自分。。。ort）

これは！！！！いわゆるクソライブラリを作ってしまったのか！！！！ああああ！！！！と、少し落ち込みます

5d68bae0fc3bf0ee01ca55dda91feff0_s.jpg

いや、でもそう決めつけるのは早計だ！と

一旦待ってみようと！

見てくれた絶対数が少ないだけで、本当は良いと思ってくれる人がいるんじゃないかと！！

というわけで、Reactで作ったブログ生成アプリの使い方をお願いだから紹介させてくださいお願いします！！

※qiitaの趣旨に合うように、Reactの構成とかもちゃんと書きます！！！

Notee

以下のGIFのようなブログが一発で立ち上がります！

notee_edit.gif

こちらが、Noteeで作ったブログです！

Like a cat
https://cat.closedcafe.com

Noteeのインストール

Gemfileに'notee'を追加して

Gemfile
gem 'notee'

インストールした後、rake notee:startコマンドでnoteeをごそっとインストールしてきます。（rake notee:destroyで消せるのでお気軽に行ってください！）

$ bundle install
$ bundle exec rake notee:start

NoteeのSetting

後、設定しなきゃいけないのは、reCAPTCHAだけです！

reCAPTCHAに関しては、以下のWikiを参考にしてください。

Setting Recaptcha

config/initializers/notee.rb
require 'notee'

# Recommendation using .env

Notee.configure do |config|

  # root-user
  config.notee_id = "your_name"
  config.notee_password = "your_password"

  # recaptcha
  config.recaptcha_key = "hogehoge"
  config.recaptcha_secret_key = "hogehoge"

  # blog
  config.blog_meta = {
      title: "Notee",
      url: "http://hogehoge.com",
      keyword: "hoge, hoge, hoge",
      description: "【react&rails】notee is creating CMS(blog) app by only one command.",
      og_image: "http://hogehoge.com/hoge.png"
  }

  # google-analytics
  config.google_analytics = "hogehogehogehoge"
end

この部分さえ正しくセッティングしてもらえれば、あとは何もしなくてもブログ、メディアを始めることが可能です！

# recaptcha
  config.recaptcha_key = "hogehoge"
  config.recaptcha_secret_key = "hogehoge"

Noteeの機能一覧

  • markdown記法でかける
  • 書いた内容をリアルタイムにPreviewできる
  • 画像とかも割と簡単にアップロードできる
  • codeはもちろんシンタックスハイライト対応
  • rakeコマンド１発でブログが作れる（RailsEngine使用）
  • Comment機能もcode1行で実現
  • User登録機能あり（メディア運営も可能）

ブログの初期デザインはこんな感じです！

mo.gif

もちろん、スマホ対応もしています！！！

ここまで読んでくださり、ありがとうございます！
よかったらリポジトリも見てみてください！！！

React

Reactの構成

noteeはrails engine製なので、RailsでReactを扱うように基本的には./frontendディレクトリの中にreactをかきます。そして、reactのコードをコンパイルして一つのファイルにしてから、assetsにぶち込む形を取っています。

そして、frontend内のディレクトリ構成は以下のようになっています。

frontend
　├ config /
　│ └ development /
　│ └ production /
　├ node_modules /
　├ src /
　│ └ javascripts /
　│　　└ actions /
　│　　└ components /
　│　　　 　└ :hogehoge/
　│　　　 　└ commons /
　│　　└ constants /
　│　　└ dispatcher /
　│　　└ stores /
　│　　└ utils /
　└ package.json

config /

それぞれの環境に合わせたwebpack用の指令書みたいなの

frontend/config/production.js

var webpack = require('webpack')

module.exports = {
  entry: {
    application: './src/javascripts/app.js',
  },
  output: {
    path: '../app/assets/javascripts/notee',
    filename: '[name].js'
  },

  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify('production'),
        BROWSER: JSON.stringify(true)
      }
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel?presets[]=react,presets[]=es2015,presets[]=stage-2'
      }
    ]
  }
}

productionはproductionできちんと設定しないとWARNINGがでまくります。

src/javascripts/components/commons

ここに複数画面で使用するコンポーネントをまとめて置いてあります。

src/javascripts/utils

ここに、view以外の共通で使用するコードをまとめて置いておきます。（EventEmitter系とか！）

こちらが参考になったURLです！

フロントエンドエンジニアのための「俺の最近のRailsのJS開発環境」を考察する
http://qiita.com/izumin5210/items/c642ae75f916d301456a

WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する
http://qiita.com/necojackarc/items/afa674ab10aafa9784eb

5年間開発しているRailsプロジェクトにReact + Reduxを導入した話
https://www.wantedly.com/companies/wantedly/post_articles/30026

Reactでの学び

Components群の切り分け方

今回自分は、各メインセクションとなるであろうページにごとにディレクトリを作成し、

  • Posts
    • PostSection
      • PostPreview
      • ...
      • etc
  • Users
    • UserSection
    • UserSectionEdit
  • Categories
    • CategorySection
      • CategoryForm
    • CategorySectionEdit
  • ...
  • etc

のように、親ページには全てSectionという名前をつけて管理することにしました。
何が、親で何が子なのかかなりわかりにくくなるので、親と子の判別はしっかりやったほうがいいと思います。

また、各ページで共通の部品に関しては、先ほども述べたように

  • Components
    • Commons
      • authority
      • snackbar
      • table

のように、Commonsにまとめておき、propsを調整しながら呼び出して各ページで使用するという方法になりました。

上記の二つを徹底することでかなり見通しのいいディレクトリ構成になったと思います。
また、共通コンポーネントなどを作る際には、material-uiなどを参考に作るととても意識しやすいと思います！
出来るだけ汎用性が高いように作ることを心がけました。

EventEmitterは一箇所で管理するのがオススメ

先ほど乗せたutils/の中にEventUtilのような、Eventを管理するモジュールを使用したことでかなり全体の見通しが良くなりました。

また、Eventをちゃんとページ遷移時にdeleteしておかないと挙動が変になったり、WARNINGデタリシマス！

細かい警告やエラーはサイクルを意識すると大体消える

細々出てくるエラーは大体、サイクルを意識せずにsetstateしたり、setstate前のstateを呼び出そうとして起こります！そのときは、以下の記事を参考にどのタイミングで行うべきなのか考えると基本はうまくいくはずです。

視覚的にサイクルを意識するときはここ
http://qiita.com/kawachi/items/092bfc281f88e3a6e456

役割的にサイクルを意識するときはここ
http://qiita.com/yukika/items/1859743921a10d7e3e6b

何回も見るのでストックしておくといいと思います！！！

最後に

ここまで読んでいただいてありがとうございました！
もっと良いものを作れるように頑張ってきます！笑

紹介させていただきありがとうございました！

Notee
https://github.com/funaota/notee

notee_facebook.png

※ポエム

18
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
18
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?