フレームワーク - Vueの記事一覧
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...
Book Management PWA Onsen UI Vue
新しい技術を習得したいと思ったら、実際に手を動かして何かを作ってみるのがオススメです。手を動かした経験は誰にも奪われず、自分の知識になります。また、手を動かすことで問題点やハマりどころも理解でき、実際に利用する際に応用できます。今回はPWA（Progressive Web App）を体感するためのアプリケーション、Bo...
Twitter-Web-Like - Vue/MongoDBで作られたTwitterクローン
ソフトウェアを作る際に目的があれば良いですが、なかったとしたらどうしたら良いでしょうか。特に特定の技術、フレームワークを試してみたいと思ったときです。そんな時にオススメなのは、既存のサービスを真似してみることです。今回紹介するのはVueを使ったTwitterクローンのTwitter-Web-Likeになります。## T...
vbuild - VueをPythonでコンパイル
かつてはHTML/JavaScript/CSSは別々なファイルで作成していましたが、Web Componentの流れは違います。機能毎にすべて一つのファイルにまとまり、独立性と再利用性を高めています。そんなWeb Componentの流れを汲んでいるVueのファイルをPythonで解析して出力するライブラリがvbuil...
MyMo - シンプルなWebベースのメモアプリ
メモはシンプルであるのが大事です。気がついた時にすぐメモできなければなりません。立ち上げて新規ファイルを作成して…なんてやっていたら折角のアイディアを忘れてしまいます。忘れる前に、ホットな内に素早くメモするのです。そこで使えるのがMyMoです。Webベースで使える簡単なメモアプリです。## MyMoの使い方トップページ...