ITエンジニア/デザイナ向けにオープンソースを毎日紹介

フレームワーク - Vueの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2020/06/02

CostBox - PWA対応のシンプルな支出管理

お金を管理する際の基本は、支出を把握することです。節約しているつもりではあっても、記録しないと意味がありません。記録することで可視化し、状態を把握できます。その次に改善するフェーズがあります。今回紹介するCostBoxは支出を記録するのに特化したアプリケーションになります。## CostBoxの使い方メイン画面です。!

List

  • 2020/04/24

Trollo - Vue/Vuex製のカンバンシステム

Trelloのようなカンバン機能はプロジェクト管理に限らず利用できそうです。自分たちで開発しているWebサービスの中に組み込みたいと思った方も少なくないでしょう。しかし実際に開発してみると意外と機能が多いと感じるかも知れません。そこで使ってみたいのがTrolloです。Vueで作られていますので、Vueアプリケーションの...

List

  • 2020/04/16

Gantt-elastic - Vue製のガントチャート

プロジェクト管理では必ずといってもいいほど使われるのがガントチャートです。プロジェクト管理のシステムには組み込まれているものが多いですし、Excelなどを使って自作のガントチャートを利用するケースもあります。今回紹介するGantt-elasticはVueベース、Webブラウザで使えるガントチャートライブラリです。## ...

List

  • 2020/03/11

東京都 新型コロナウイルス感染症対策サイト - オープンデータを活用したコロナウイルス情報集約サイト

新型コロナウイルスが一気に広まっています。学校が休校になり、会社はリモートワーク推奨に、さらに多くのイベントが中止や無観客での開催を余儀なくされています。いつまでこの状況が続くのか先行き不透明な状態ですが、ただうつむいていても意味がありません。この時だからこそできることもあるはずです。今回紹介する東京都 新型コロナウイ...

List

  • 2020/02/05

mute.vc - VCな人たちをまとめてミュート

Twitterにはブロックではなくミュート機能というのもあります。ブロックするほどではないけれど、ツイートを見たくないという時に使える機能です。せっかくTwitterを楽しんでいるのに、見たくないツイートで残念な気分になるのは避けたいものです。今回紹介するmute.vcはいわゆるVC(ベンチャーキャピタル)に関わる人た...

List

  • 2020/01/28

massCode - マルチプラットフォームで使えるスニペット管理

開発をしていてプロジェクトをまたいで繰り返し使うようなコードはスニペットとして登録しておくと便利です。ライブラリ化するまでもないコードだったり、Webブラウザの開発者ツールで頻繁に実行するコードもスニペットにしておくと便利です。今回紹介するmassCodeはマルチプラットフォームで使えるスニペット管理となっています。#...

List

  • 2019/11/16

Credit Card Form - Vue製のクレジットカード入力コンポーネント

Web上でものを買う場合、クレジットカード番号を入力する機会は多いかと思います。決済情報を入力する際にはなるべく手間取らないようにしないと、せっかくの決済機会を逃してしまうことになります。そこで使ってみたいのがCredit Card Formです。アニメーションや表示を工夫してスムーズにクレジットカード情報の入力ができ...

List

  • 2019/11/05

Vue-Blocks - Vue製のデータフローエディタ

ノードをつなぎ合わせてユーザがその場で動作を変えられる仕組みは人気ですが、そのUIはとても複雑です。専用のライブラリを使いますが、それ以外の仕組みとの相性を選びます。もしVueで作っているならばVue-Blocksがその役割にぴったりでしょう。## Vue-Blocksの使い方デモ画面です。!

List

  • 2019/10/11

TaskTreemap - プロジェクトのタスク規模と進捗をツリーマップで可視化

プロジェクト管理において可視化は大事な要件です。一覧にすると膨大に見えるタスク群も、規模を比べたり、その進捗を可視化することで全体像が見えてきます。定性的に「たくさん」ではなく、定量的に見なければなりません。そこで使ってみたいのがTaskTreemapです。タスクの規模と進捗をツリーマップを用いて表現します。## Ta...

List

  • 2019/10/06

Goodwork - ストレスないプロジェクト管理

システム開発に限りませんが、プロジェクト管理の有無が成否を分けるのは間違いありません。ステータスや新しい要望を適切に管理することで、スムーズな開発を実現できます。今回紹介するのはLaravel製のシンプルなプロジェクト管理、Goodworkです。## Goodworkの使い方ホーム画面です。並んでいるのはタスクです。!

List

  • 2019/09/13

Postwoman - PWAなWeb API開発環境

Web APIはプログラミング言語からの利用を前提としていますので、試す際にもコードが必要です。しかしそのためにHTTPクライアントを操作するコードを書くのは面倒です。そこでPostman

List

  • 2019/09/01

json.pizza - キーボード操作主体のJSON整形サービス

JSONはシステム連携で使われる一方、可読性の高さも特徴となっています。とは言え、改行やインデントをなくした状態ではとても読む気にはなれません。整形が必要です。今回紹介するjson.pizzaはJSONを貼り付けて、素早く整形できるサービスとなっています。## json.pizzaの使い方JSONを貼り付けて、Ctrl...

List

  • 2019/08/17

News Vue.js - Vue.jsのニュースポータル

フレームワークの使い方を学ぶのに、そのフレームワークを使っている事例を参考にするのは良い方法です。何ができるのか、何ができなさそうかが判断できます。そのフレームワークらしい書き方を学ぶこともできるでしょう。今回紹介するNews Vue.jsはVue.jsを学ぶのにぴったりなWebサイトです。Vue.jsに関するニュース...

List

  • 2019/08/16

OverVue - Vue開発で役立つプロトタイピングツール

Vueの人気が高まっています。HTMLとJavaScriptが分かれるので、分業しやすいのも利点でしょう。しかし、それでもプログラマーでないと最適な構造で画面を作っていくのは簡単ではありません。そこで使ってみたいのがOverVueです。画像を元にして画面を設計できるソフトウェアです。## OverVueの使い方立ち上げ...

List

  • 2019/07/25

vue.py - Pythonで作るVue.jsアプリ

JavaScriptはWebブラウザ上での動作が保証されている唯一のプログラミング言語です。しかし、別な言語を使いたいと考える人も数多くいます。サーバサイドと言語を合わせたいという要望もあります。もしあなたがPythonを使っているならば、vue.pyを使ってWebブラウザ画もPythonで書いてみるのはいかがでしょう...

List

  • 2019/06/27

COCO Annotator - 機械学習用に画像のタグ付け

機械学習で面倒なのは最初のデータセット作りでしょう。画像のタグ付けを行う場合、まずトレーニング用のデータをアノテーションしなければなりません。この結果によって精度が変わるのでしっかりやらないといけませんが、手間がかかります。そんなアノテーションを少しでも楽にしてくれるのがCOCO Annotatorです。## COCO...

List

  • 2019/06/24

CostBox - シンプルな支出管理

お金の管理はきちんとしていますか。貯金しようと考えている人は、ちゃんと支出、入金を管理しているそうです。その際、何か買った時にすぐにメモしておくのが大事でしょう。そうしないといつの間にか財布からお金が飛んでいってしまいます。今回紹介するCostBoxは支出管理に特化したWebアプリケーションです。## CostBoxの...

List

  • 2019/06/14

CSS Grid Generator - CSSグリッドを簡単に作成

CSS3ではグリッドが簡単に作れる機能が実装されていますが、テキストできちんとした設計を行うのは大変です。左右の関係を考えながら組むのですが、入れ子になっていたりするとすぐに破綻してしまいます。最初の設計をきちんと行わなければなりません。そこで使ってみたいのがCSS Grid Generatorです。Webブラウザ上で...

List

  • 2019/05/19

leaderboard-app - プロジェクトへの貢献度を可視化する

プロジェクトへの貢献度で評価が分かれると言った場合、どのように貢献度を見れば良いでしょうか。開発者であればIssueへの対応具合によって推し量ることができます。プロジェクトをIssueを使ったチケット制にすることで、プロジェクトへ貢献していると自然とIssueへの投稿量が増えていくものです。今回紹介するleaderbo...

List

  • 2019/05/06

PWABuilder - PWAを開発する際のお供に

PWA(Progressive Web Apps)に注目が集まっています。ネイティブアプリにしかできないことはたくさんありますが、Webアプリケーションでも十分という領域はどんどん増えています。そんな中、iOSも対応範囲を増やしており、実用レベルになってきています。PWAを作っている方はPWABuilderを使ってどれ...