フレームワーク - Vueの記事一覧
東京都 新型コロナウイルス感染症対策サイト - オープンデータを活用したコロナウイルス情報集約サイト
新型コロナウイルスが一気に広まっています。学校が休校になり、会社はリモートワーク推奨に、さらに多くのイベントが中止や無観客での開催を余儀なくされています。いつまでこの状況が続くのか先行き不透明な状態ですが、ただうつむいていても意味がありません。この時だからこそできることもあるはずです。今回紹介する東京都 新型コロナウイ...
mute.vc - VCな人たちをまとめてミュート
Twitterにはブロックではなくミュート機能というのもあります。ブロックするほどではないけれど、ツイートを見たくないという時に使える機能です。せっかくTwitterを楽しんでいるのに、見たくないツイートで残念な気分になるのは避けたいものです。今回紹介するmute.vcはいわゆるVC（ベンチャーキャピタル）に関わる人た...
massCode - マルチプラットフォームで使えるスニペット管理
開発をしていてプロジェクトをまたいで繰り返し使うようなコードはスニペットとして登録しておくと便利です。ライブラリ化するまでもないコードだったり、Webブラウザの開発者ツールで頻繁に実行するコードもスニペットにしておくと便利です。今回紹介するmassCodeはマルチプラットフォームで使えるスニペット管理となっています。#...
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に寄ってしまいがちです。そこでせめて色だけでもカスタマイズしま...