Vuetify Theme Generator - Vuetifyのカラーリングをビジュアルで設定
Vue向けに開発されているUIフレームワーク、Vuetifyは人気があります。UIコンポーネントも多く、サポートされているWebブラウザも幅広くなっています。しかしVuetifyを自在にカスタマイズできるデザイナーの方はまだ多くなく、Vuetify標準のUIに寄ってしまいがちです。 そこでせめて色だけでもカスタマイズしましょう。Vuetify Theme Generatorを使えばVuetify対応のカラーカスタマイズが簡単にできます。 Vuetify Theme Generatorの使い方 メイン画面です。左側で色を選択すると、プレビューに反映されます。 例えばプライマリカラーを紫にしました。 セカンダリーはブルー系に。 そんな感じでどんどん色を選んでいきます。 最後にエクスポートすればテーマカラーが生成されます。 Vuetify Theme Generatorを使うことでVuetify
Vue-CRM - Vueを使ったCRMテンプレート
社内システムはバックオフィス向け、または営業向けのシステムになります。営業向けのシステムとして最も有名なのはCRMでしょう。顧客との関係性を向上させることによって、よりきめ細かいフォローアップや売り上げ増につなげられるようになります。 そんなCRMを自社開発するといった場合に使えそうなVueテンプレートがVue-CRMです。 Vue-CRMの使い方 社内システムなので最初に認証があります。 ダッシュボードです。 注文一覧。 注文の編集画面。 顧客一覧。 顧客情報編集画面。 商品一覧。 商品編集画面。 アバウト画面。 Vue-CRMはあくまでもモックなので、これでシステムが動くわけではありません。後は内部的なデータを提供すればCRMとして動作します。CRMの基本的な画面は用意されていますので、自社システムを構築する基礎としていいのではないでしょうか。VueベースなのでAPIを作ることでシステ
Vuido - Vue.jsでデスクトップ向けネイティブアプリを開発 MOONGIFT
JavaScriptが多くの環境で動作するようになっています。Webブラウザだけでなく、サーバやスマートフォンアプリなど一つの言語でここまで幅広く動作するものはそうそうないでしょう（特にWebブラウザが問題です）。 そんなJavaScriptを使ってデスクトップアプリを作成できるのがVuidoです。Electronと異なる、ネイティブのデスクトップアプリを作ります。 Vuidoの使い方 VuidoはVue.jsを使います。下のコードはデモですが、確かにVue.jsの書き方です。 <template> <window title="my-project" width="400" height="100" margined v-on:close="exit"> <box> <text>Welcome to your Vuido application!</text> </box> </wind
vuegg - Vue.jsプロジェクトの画面を作成 MOONGIFT
ReactやVue、AngularといったJavaScriptフレームワークはHTMLを再定義しており、UIを作るのもそうそう簡単ではありません。デザイナーとの協業も難しく、苦戦している方も多いのではないでしょうか。 そこで使ってみたいのがvueggです。Vueの画面をWYSIWYGに設計できるソフトウェアです。 vueggの使い方 メイン画面です。右側に並んだツールを左側のエディタにドロップします。 ドロワーの設定もできます。 vueggで作った内容はVue.jsのプロジェクトとしてダウンロードができます。プロトタイプ開発にも使えますし、画像などを適用すれば精度の高いデザインツールとしても使えるでしょう。コンポーネントも数多く用意されているので、多くのWebサービスで使えそうです。 vueggはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 vueg
CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
VUESTIC - Vue.jsを使ったシステム管理画面テンプレート MOONGIFT
Webサービスを作っていて、必要になるのが管理画面です。多くは開発工程の最後に回されて、予算もないために簡易的な画面で作られます。しかしより良い管理を行うためには管理画面もこだわりたいものです。 今回はVue.jsを使った管理画面、VUESTICを紹介します。 VUESTICの使い方 トップページです。アイコンが大きめで分かりやすい表示です。 画面上部のアイコンをクリックするとメッセージが表示されます。 グラフです。 進捗。プログレスバーです。 入力系です。 テーブル表示も複数パターンで表示されています。 タイポグラフィ。 ボタン。 アイコンは様々なアイコン集に対応しています。 グリッド。 確認用のダイアログ。 アラート。 ログイン用のUI。 地図。 グローバルな地図。 拡大表示。ノードはアニメーションしています。 VUESTICには一般的な管理画面で必要な画面の構成要素を網羅しています。
VMS - Vue.js製のCMS MOONGIFT
CMSは常に新しいものが登場します。それはプログラミング言語だったり、フレームワークだったりします。CMSがあることで、そのプログラミング言語やフレームワークの使い方が分かるようになります。CMSは殆どの方が機能について理解していますので、コードの理解も早いでしょう。 今回はVue.jsを使ったCMS（管理画面）のVMSを紹介します。 VMSの使い方 管理画面のダッシュボードです。 ユーザ一覧。 ページを追加する画面です。 アンケート機能もあります。 こんな感じで設問を追加します。 質問の一覧です。 VMSはVue.jsでできていますので、UIの遷移などはとてもスムーズです。Vue.jsの書き方、使い方を学ぶ上でも役立つのではないでしょうか。なお、ユーザが見る画面については自分で開発する必要があるようです。 VMSはnode/JavaScript製のオープンソース・ソフトウェア（MIT L
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
