このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

フロントエンド開発支援ツール UIパーツを管理する「UI Parts Manager」を公開しました!

JavaScript

2015.12.10

この記事は最終更新日から1年以上が経過しています。

logo_uipm

「UIPM」~ UI Parts Manager ~

「UI Parts Manager」FrontEnd Developer Tool

「これは何?」

フロントエンド開発環境にて、UIパーツをGUIで管理する Nodeモジュールとなっております。

uipm001

インストール

インストール

$ npm install ui-parts-manager

使い方

var uipm = require('ui-parts-manager');
uipm();

Grant.jsやGulpのタスクに追加すると良いかと思います。

 

起動すると、開発環境のルートに「uipm.json」が生成されます。

追加したUIパーツ情報はこちらのjsonファイルで管理されます。

uipm002

ポート番号はデフォルトは「8818」となっております。

パパイヤです。

 

ここからcssの追加を行いましょう。

uipm003
開発環境のルートから「/」でcssファイルのあるパスを指定します。

 

uipm003b

(レイアウト崩れましたら連絡いただけるとありがたいです。できる限り絶賛対応いたします ><)

cssファイルを追加したら、メニューバー右にあるプラスアイコンでカテゴリを追加します。

uipm004

ダブルクリックで編集。名前を入力できます。

uipm005

右下のプラスアイコンでアイテム項目を追加し、ダブルクリックで編集。

こちらにHTMLを入力していきます。

uipm006

このような感じでパーツの種類ごとになど自由に管理していくことが可能となっております。

uipm007

twitter bootstrapを読み込んで見た例となります。

その他、詳細は以下を確認していただければと思います。

GitHub

https://github.com/webcyou/ui-parts-manager

npm

https://www.npmjs.com/package/ui-parts-manager

と、言った訳で開発中のUIパーツを管理できるnodeパッケージとなっております。

どれがどのUIパーツかわかんねーよー!

と言った方は使っていただければと思います。

 

ちなみに、バージョンもv0.0.9と言うことで、本当に動いて使えるほどのものだったりして

imgの読み込み対応とかも未実装だったりしますので、

そこのところ、考慮していただければとは思っております><

追って、時間のある時にでもこちょこちょバージョンUPしていければと思っております。

 

この機能が欲しいとか、これ作ったのでマージしてとか、

募集しておりますので宜しく御願いします mm

(のんびり開発していければと思ってはおります。。)

 

と言った訳で、ではでは mm

Comment

Related Article

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

2020.01.31

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

2020.01.24

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

2019.10.21

正規表現 先読み後読み 論理積

2019.07.28

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

2019.06.22

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

2019.03.24

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

ブラウザフィンガープリントは、Cookieの代用となるのか? JSライブラリ Fingerprintjs2など。

2019.02.03

CATEGORY LIST

LATEST NEWS

部下を育てる技術

イベント

2020.04.08

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

JavaScript

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

まだ間に合う!!ラズベリーパイ購入なら「RSコンポーネンツ」で!最大40%オフの年に1度の大特価期末セール中!

RaspberryPi

2020.01.25

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

JavaScript

2020.01.24

TSUKUMO の初売りでNAS (Synology DiskStation DS218j)購入!!

イベント

2020.01.04

Mac用 エミュレーター 「OpenEmu」が、V2.2リリース!GameCube対応して更に神アプリ進化!

Game

2020.01.01

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻その2

Game

2019.12.31

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻

Game

2019.12.14

MacでWindowsアプリ(TeraPad)を動かす(Wine 4.0.3)

mac

2019.12.08

kindleストア7周年記念セール中!技術書なども40%OFF以上でお買い得!(11/7まで)

イベント

2019.10.28

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

JavaScript

2019.10.21

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US