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

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よりご応募ください。


【中途採用】
フロントエンドエンジニア
サーバーサイドエンジニア
コーポレートエンジニア
SREエンジニア

【新卒採用・その他】
21・22新卒
その他採用情報

関連記事

thumbnail
コンソールで git のコミットを peco で検索して emacs に表示する

森です。わりと最近書いた便利なシェルスクリプトのご紹介です。 要件 私たちのプロジェクトは、Git のコミットがある程度きれいです。個々のコミットやプルリクがクックブックのように利用できます。コミットメッセージをキーにコミットを検索して、その内容を表示したいで …

初心者のためのReact入門と勉強法について

@takepo です。 昨日09/25に【サポーターズCoLab勉強会】初心者のためのReact入門 というイベントで再度登壇させていただきました。その登壇の際の発表スライドをあげさせていただきます。 内容はReact初心者向けのものになっていて、コードサンプ …

Salesforceの人工知能、Einstein (アインシュタイン)の画像認識してみた

こんにちは。土屋です。 現在、ランサーズ社内の業務フローや会計周りの開発を担当しています。 今回はSalesforceの人工知能、アインシュタインについてです。 SalesforceのAI、Einstein (アインシュタイン)は、2017年02月現在、まだ日 …