フレームワーク - Vueの記事一覧
Credit Card Form - Vue製のクレジットカード入力コンポーネント
Web上でものを買う場合、クレジットカード番号を入力する機会は多いかと思います。決済情報を入力する際にはなるべく手間取らないようにしないと、せっかくの決済機会を逃してしまうことになります。そこで使ってみたいのがCredit Card Formです。アニメーションや表示を工夫してスムーズにクレジットカード情報の入力ができ...
Vue-Blocks - Vue製のデータフローエディタ
ノードをつなぎ合わせてユーザがその場で動作を変えられる仕組みは人気ですが、そのUIはとても複雑です。専用のライブラリを使いますが、それ以外の仕組みとの相性を選びます。もしVueで作っているならばVue-Blocksがその役割にぴったりでしょう。## Vue-Blocksの使い方デモ画面です。!
TaskTreemap - プロジェクトのタスク規模と進捗をツリーマップで可視化
プロジェクト管理において可視化は大事な要件です。一覧にすると膨大に見えるタスク群も、規模を比べたり、その進捗を可視化することで全体像が見えてきます。定性的に「たくさん」ではなく、定量的に見なければなりません。そこで使ってみたいのがTaskTreemapです。タスクの規模と進捗をツリーマップを用いて表現します。## Ta...
Goodwork - ストレスないプロジェクト管理
システム開発に限りませんが、プロジェクト管理の有無が成否を分けるのは間違いありません。ステータスや新しい要望を適切に管理することで、スムーズな開発を実現できます。今回紹介するのはLaravel製のシンプルなプロジェクト管理、Goodworkです。## Goodworkの使い方ホーム画面です。並んでいるのはタスクです。!
Postwoman - PWAなWeb API開発環境
Web APIはプログラミング言語からの利用を前提としていますので、試す際にもコードが必要です。しかしそのためにHTTPクライアントを操作するコードを書くのは面倒です。そこでPostman
json.pizza - キーボード操作主体のJSON整形サービス
JSONはシステム連携で使われる一方、可読性の高さも特徴となっています。とは言え、改行やインデントをなくした状態ではとても読む気にはなれません。整形が必要です。今回紹介するjson.pizzaはJSONを貼り付けて、素早く整形できるサービスとなっています。## json.pizzaの使い方JSONを貼り付けて、Ctrl...
News Vue.js - Vue.jsのニュースポータル
フレームワークの使い方を学ぶのに、そのフレームワークを使っている事例を参考にするのは良い方法です。何ができるのか、何ができなさそうかが判断できます。そのフレームワークらしい書き方を学ぶこともできるでしょう。今回紹介するNews Vue.jsはVue.jsを学ぶのにぴったりなWebサイトです。Vue.jsに関するニュース...
OverVue - Vue開発で役立つプロトタイピングツール
Vueの人気が高まっています。HTMLとJavaScriptが分かれるので、分業しやすいのも利点でしょう。しかし、それでもプログラマーでないと最適な構造で画面を作っていくのは簡単ではありません。そこで使ってみたいのがOverVueです。画像を元にして画面を設計できるソフトウェアです。## OverVueの使い方立ち上げ...
vue.py - Pythonで作るVue.jsアプリ
JavaScriptはWebブラウザ上での動作が保証されている唯一のプログラミング言語です。しかし、別な言語を使いたいと考える人も数多くいます。サーバサイドと言語を合わせたいという要望もあります。もしあなたがPythonを使っているならば、vue.pyを使ってWebブラウザ画もPythonで書いてみるのはいかがでしょう...
COCO Annotator - 機械学習用に画像のタグ付け
機械学習で面倒なのは最初のデータセット作りでしょう。画像のタグ付けを行う場合、まずトレーニング用のデータをアノテーションしなければなりません。この結果によって精度が変わるのでしっかりやらないといけませんが、手間がかかります。そんなアノテーションを少しでも楽にしてくれるのがCOCO Annotatorです。## COCO...
CostBox - シンプルな支出管理
お金の管理はきちんとしていますか。貯金しようと考えている人は、ちゃんと支出、入金を管理しているそうです。その際、何か買った時にすぐにメモしておくのが大事でしょう。そうしないといつの間にか財布からお金が飛んでいってしまいます。今回紹介するCostBoxは支出管理に特化したWebアプリケーションです。## CostBoxの...
CSS Grid Generator - CSSグリッドを簡単に作成
CSS3ではグリッドが簡単に作れる機能が実装されていますが、テキストできちんとした設計を行うのは大変です。左右の関係を考えながら組むのですが、入れ子になっていたりするとすぐに破綻してしまいます。最初の設計をきちんと行わなければなりません。そこで使ってみたいのがCSS Grid Generatorです。Webブラウザ上で...
leaderboard-app - プロジェクトへの貢献度を可視化する
プロジェクトへの貢献度で評価が分かれると言った場合、どのように貢献度を見れば良いでしょうか。開発者であればIssueへの対応具合によって推し量ることができます。プロジェクトをIssueを使ったチケット制にすることで、プロジェクトへ貢献していると自然とIssueへの投稿量が増えていくものです。今回紹介するleaderbo...
PWABuilder - PWAを開発する際のお供に
PWA（Progressive Web Apps）に注目が集まっています。ネイティブアプリにしかできないことはたくさんありますが、Webアプリケーションでも十分という領域はどんどん増えています。そんな中、iOSも対応範囲を増やしており、実用レベルになってきています。PWAを作っている方はPWABuilderを使ってどれ...
MySigMail - メールの署名を作成
メールの署名はどういったものを使っているでしょうか。日本ではテキストメールが多いので、アスキーアートのように装飾されたものを使っているかも知れません。逆にとてもシンプルな人もいるでしょう。そんなメールの署名欄をビジュアル的に作成できるのがMySigMailになります。## MySigMailの使い方メイン画面です。左側...
Vuestagram - Vue製のInstagramクローン
技術的なトライをしたい時に、すでにある有名なものを真似するのは良いアイディアです。必要な機能、操作性など参考になるものがあると開発しやすいでしょう。オープンソースによるクローンソフトウェアの中には、技術力を試したいという目的の場合が多いです。今回紹介するVuestagramはVueを学ぶ際にぴったりな素材です。Inst...
Vuetify Theme Generator - Vuetifyのカラーリングをビジュアルで設定
Vue向けに開発されているUIフレームワーク、Vuetifyは人気があります。UIコンポーネントも多く、サポートされているWebブラウザも幅広くなっています。しかしVuetifyを自在にカスタマイズできるデザイナーの方はまだ多くなく、Vuetify標準のUIに寄ってしまいがちです。そこでせめて色だけでもカスタマイズしま...
Vue-CRM - Vueを使ったCRMテンプレート
社内システムはバックオフィス向け、または営業向けのシステムになります。営業向けのシステムとして最も有名なのはCRMでしょう。顧客との関係性を向上させることによって、よりきめ細かいフォローアップや売り上げ増につなげられるようになります。そんなCRMを自社開発するといった場合に使えそうなVueテンプレートがVue-CRMで...
tiptap - Vue.js向けのリッチなWYSIWYGエディタ
WYSIWYGなエディタは開発者ではない人たちにコンテンツを作ってもらいたい時に活躍します。HTMLを手書きするのは困難ですし、編集している内容と結果が異なるので、結果を想像しながら作るのは慣れない人にとっては難しいでしょう。もしVue.jsを使っているならば導入したいWYSIWYGエディタがtiptapになります。多...
Vue Dark Mode - Vueのダークモード用デザインテーマ
macOS Mojaveで取り入れられたダークモード。元々その手のユーティリティはたくさんありましたが、OS標準に入ってきたのが大きなインパクトです。それに伴ってダークモードへの注目が集まっています。近くリリースされるSafariではダークモードがサポートされるそうです。そんな時に使えそうなのがVue Dark Mod...