2018年6月15日

プログラミング

手書き風コンポーネント集wired-elements【今日のGitHubトレンド】

目次

  1. はじめに
  2. wired-elementsとは
  3. インストールしてみる
  4. まとめ

はじめに

GitHubのトレンドリポジトリを紹介するシリーズです。
今回は手書きワイヤーレベルのコンポーネントが使えるnpm、wired-elementsをご紹介します。

サービス開発において「デザインはまだ決まっていないけど先行して機能は作ってしまいたい」というケースはあると思います。
そんなときにmaterial UIやbootstrapを使用するのも良いですが、デザインを中途半端に当ててしまうより、ワイヤーだとわかるようなUIを当てられるのがwired-elementsです。

 2018-06-15 17.26.47.png (17.1 kB)

こんな手書き風なワイヤーを実装することができます!
これらは静的な画像ではなく、しっかりとオンオフにしたり動的な動きができることがポイントです!

wired-elementsとは

公式サイトが手書きでとてもかわいらしいのですが、説明がある通り手書き風のワイヤーコンポーネント集です。
 2018-06-15 17.29.20.png (93.5 kB)

フォームのパーツはもちろんこと、このようなパーツが用意されています。

カード

 2018-06-15 17.28.35.png (43.4 kB)

プルダウン

 2018-06-15 17.28.51.png (10.4 kB)

ハートボタン

 2018-06-15 17.29.06.png (10.6 kB)

プログレスバー

 2018-06-15 17.29.53.png (23.0 kB)

トグルボタン

 2018-06-15 17.30.16.png (6.5 kB)

インストールしてみる

では、実際に使っていきます。
今回Reactのプロジェクトで使用していきます。

まずはCreate React AppでReactアプリケーションを作っていきます。
詳細はこちらの記事でもご紹介しています。

npx create-react-app wired-react

そしてディレクトリを移動し、必要なライブラリをインストールします。
cd wired-react
yarn install

そしてwired-elements をインストールします。
yarn add wired-elements

これで準備はOKです!

実際に使っていく

app.js を更新していきます。
まずimport 'wired-elements'; でライブラリをインポートしていきます。

そしてこのようにJSX内にwired関連の記述をしましょう。

<wired-input placeholder="bagelee"></wired-input>
<wired-checkbox text="bagelee を見たことがある"></wired-checkbox>
<wired-checkbox text="bagelee をもっと読みたい"></wired-checkbox>
<wired-button >送信</wired-button>

そしてyarn startするとこのような表示となります。

 2018-06-15 17.26.06.png (42.2 kB)

他のパーツを使いたい場合はこちらのリファレンスを読んでみてください。
ですが、もともとのソースコードもとてもシンプルなので、ソースコードをそのまま読むのでも良いかもしれません。

オーバーライドする為には

部分的に手書きのUIを変えたいなど、オーバーライド(上書き)したいケースもあると思います。
そういった場合には、package.jsonの記述をこのようにしてyarnコマンドで再インストールしましょう。

  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4", 
    "wired-elements" : "eishis/wired-elements#master", // forkしてきたGitHubのmasterブランチを指定
    "wired-elements" : "../wired-elements" // ローカルに保存されているwired-elementsを指定
  }

まとめ

今回は手書きのコンポーネントを使うことができる、wired-elementsをご紹介しました。
色々とカスタマイズのPropsも公式サイトで紹介されているので、ぜひそちらもご覧ください。
また「もうちょっとこんな機能があったら良いのに」という場合には、ぜひforkしてオーバーライド、もしくはそこからプルリクエストを送り公式にリクエストしてみるのも良いかもしれません。

Reactのお仕事に関するご相談

Bageleeの運営会社、palanではReactに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

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