ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

thumbnail

Labels:  JavaScript, ツール/ライブラリ 投稿者:tsuyoshi

レスポンシブ対応の LP を簡単に作れるツールを React Redux で作った。ソースコードあり

pook チームの tsuyoshi です。レスポンシブ対応の LP を簡単に作れるツールへのニーズが社内で高まってきたので React Redux の練習がてら先日の開発合宿で作りました。社内でもランディングページの制作を依頼されたり、発注したりするわけですが、大体が同じようなデザインではないでしょうか?要件としては、アイキャッチがあって、レスポンシブ対応で、コンバージョンボタンがある。ぐらいです。企画などが立ち上がる度に新規作成しているとキリがありません。そういった工数を削減するためにも直感的な入力でLPを簡単に作れるツールを作ってみました。
その名も、 react-lp2cool(リアクトエルピーツクール)。

注意)残念ながらプロダクションレベルで使えるものではありません。作った物の共有程度なので、モックの作成ぐらいにとどめてください

こちらからダウンロードして頂くとすぐに使えます。サーバーやインストールも不要です。必要なのは、 index.html と bundle.js の二つだけ。ブラウザが動く環境であれば、すぐにLPを作れるのが、このツールの特徴です。

DEMO

アイキャッチと、タイトルを挿入

画像を選択して、タイトルを入力するだけです。

セクションを選択して追加し順番を入れ替える。

大まかなデザインは選択して入力し、細かい部分の調整は直接 HTML をいじることができます。ドラッグ&ドロップで入れ替え機能もついていて便利です。

レスポンシブ対応のコンバージョンボタンを置く

Bootstrap が内蔵されているので、レスポンシブ機能がお手軽に実装できます。

ダウンロードして完成

右下の「ダウンロード」ボタンを押すと最終的に index.html ファイル1枚にまとまります。操作画面は react ですが、出力はただの HTML です

いかがでしょうか?それなりのデザインのLPを作ることができました。(上記所要時間5分くらいです)

所感

React と Redux を使ってみる利点は、それなりの UI やインタラクションを持ったツールをライブラリなどをうまく利用することで、サクッと実装できる点です。
今回は編集ページに以下のようなライブラリを用いました
meterial-ui : ダイアログや、編集フォームのデザイン
react-sortable-hoc : ドラッグ&ドロップで並べ替え
redux-form : フォームの制御全般

コードもこちらに用意していますが、1泊2日の合宿で作った全く自信のないコードですので、あまり参考にしないでいただけると幸いです。主にランサーズ流 React.js/redux アプリ開発入門に記載してある構成を利用しているので、全体感を掴むにはこちらのソースコードとブログの解説を読むことを強くお勧めします。

ちなみに、社内でこのツールの運用を検討した結果、今回作ったツールのように HTML を直接書く運用よりも、 json や yaml 形式で必要項目を管理するやり方のほうが、社内利用でのニーズにマッチしているようでした。残念ながらモック程度の用途にとどまりそうです。

お知らせ

現在私が所属する pook チームでは、フロントエンド職の募集以外にも、サーバーサイド職の募集も行っています。新しい働き方を一緒に生み出しませんか?ご応募待ってます。

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。


【中途採用】
サービスリードエンジニア
テックリード(アーキテクト)
フロントエンドエンジニア
サーバーサイドエンジニア
業務エンジニア(社内システム基盤・基幹システム)

【インターン・学生バイト】
19新卒対象サマーインターン
エンジニアインターン

その他採用情報

関連記事

React Redux を用いた SPA 新規サービスを運用して得た知見と実装例

@tsuyoshi です。先日行われた React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 と言うイベントで使ったスライドをアップロードしました。 https://pook.life/ と言うサービスをReact Redux の …

GoogleOAuth2.0を使って、超簡単にユーザー情報を取得した話

ランサーズ Advent Calendar 2019 4日目の記事となります。 みなさんこんにちは。ランサーズでエンジニアとしてインターンをしている神谷(@Gunji Kamiya)です。 今回の記事では、タイトルにもある通り、GoogleOAuthを使った実 …

thumbnail
Webpack で git 管理してもよいような環境ごとに値の異なる定数を設定する方法

森です。仕事でのちょっとしたコミットをブログ記事化するシリーズです。今日は Webpack の話題です。 課題 環境ごとに値の異なる定数として、git で管理できるものと git で管理すべきではないものがあります。後者は dotenv と Webpack の …