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

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

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

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

もっと見る

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を使ってどれ...

List

  • 2019/03/11

MySigMail - メールの署名を作成

メールの署名はどういったものを使っているでしょうか。日本ではテキストメールが多いので、アスキーアートのように装飾されたものを使っているかも知れません。逆にとてもシンプルな人もいるでしょう。そんなメールの署名欄をビジュアル的に作成できるのがMySigMailになります。## MySigMailの使い方メイン画面です。左側...

List

  • 2019/01/15

Vuestagram - Vue製のInstagramクローン

技術的なトライをしたい時に、すでにある有名なものを真似するのは良いアイディアです。必要な機能、操作性など参考になるものがあると開発しやすいでしょう。オープンソースによるクローンソフトウェアの中には、技術力を試したいという目的の場合が多いです。今回紹介するVuestagramはVueを学ぶ際にぴったりな素材です。Inst...

List

  • 2018/12/22

Vuetify Theme Generator - Vuetifyのカラーリングをビジュアルで設定

Vue向けに開発されているUIフレームワーク、Vuetifyは人気があります。UIコンポーネントも多く、サポートされているWebブラウザも幅広くなっています。しかしVuetifyを自在にカスタマイズできるデザイナーの方はまだ多くなく、Vuetify標準のUIに寄ってしまいがちです。そこでせめて色だけでもカスタマイズしま...

List

  • 2018/12/17

Vue-CRM - Vueを使ったCRMテンプレート

社内システムはバックオフィス向け、または営業向けのシステムになります。営業向けのシステムとして最も有名なのはCRMでしょう。顧客との関係性を向上させることによって、よりきめ細かいフォローアップや売り上げ増につなげられるようになります。そんなCRMを自社開発するといった場合に使えそうなVueテンプレートがVue-CRMで...

List

  • 2018/12/09

tiptap - Vue.js向けのリッチなWYSIWYGエディタ

WYSIWYGなエディタは開発者ではない人たちにコンテンツを作ってもらいたい時に活躍します。HTMLを手書きするのは困難ですし、編集している内容と結果が異なるので、結果を想像しながら作るのは慣れない人にとっては難しいでしょう。もしVue.jsを使っているならば導入したいWYSIWYGエディタがtiptapになります。多...

List

  • 2018/11/25

Vue Dark Mode - Vueのダークモード用デザインテーマ

macOS Mojaveで取り入れられたダークモード。元々その手のユーティリティはたくさんありましたが、OS標準に入ってきたのが大きなインパクトです。それに伴ってダークモードへの注目が集まっています。近くリリースされるSafariではダークモードがサポートされるそうです。そんな時に使えそうなのがVue Dark Mod...

List

  • 2018/10/28

Book Management PWA Onsen UI Vue

新しい技術を習得したいと思ったら、実際に手を動かして何かを作ってみるのがオススメです。手を動かした経験は誰にも奪われず、自分の知識になります。また、手を動かすことで問題点やハマりどころも理解でき、実際に利用する際に応用できます。今回はPWA(Progressive Web App)を体感するためのアプリケーション、Bo...

List

  • 2018/10/25

Twitter-Web-Like - Vue/MongoDBで作られたTwitterクローン

ソフトウェアを作る際に目的があれば良いですが、なかったとしたらどうしたら良いでしょうか。特に特定の技術、フレームワークを試してみたいと思ったときです。そんな時にオススメなのは、既存のサービスを真似してみることです。今回紹介するのはVueを使ったTwitterクローンのTwitter-Web-Likeになります。## T...

None

  • 2018/10/05

vbuild - VueをPythonでコンパイル

かつてはHTML/JavaScript/CSSは別々なファイルで作成していましたが、Web Componentの流れは違います。機能毎にすべて一つのファイルにまとまり、独立性と再利用性を高めています。そんなWeb Componentの流れを汲んでいるVueのファイルをPythonで解析して出力するライブラリがvbuil...

List

  • 2018/09/30

MyMo - シンプルなWebベースのメモアプリ

メモはシンプルであるのが大事です。気がついた時にすぐメモできなければなりません。立ち上げて新規ファイルを作成して…なんてやっていたら折角のアイディアを忘れてしまいます。忘れる前に、ホットな内に素早くメモするのです。そこで使えるのがMyMoです。Webベースで使える簡単なメモアプリです。## MyMoの使い方トップページ...

List

  • 2018/09/27

Whalebird Desktop - Electron製。マルチプラットフォームで動作するMastodonクライアント

彗星のように現れたソーシャルサービスのMastodon。一時のブームは去りましたが、使っている人たちは徐々に増えています。Twitterと使い分けていて、両方を利用している人も多いようです。そんなMastodonユーザに使ってみて欲しいのがWhalebird Desktopです。ElectronベースのMastodon...

List

  • 2018/08/28

Notational - 思いつきを阻害しないWebノート

メモを取るアプリケーションの大事な要素として、書き手を迷わせたり、悩ませてはいけないという点があります。むしろ自然と手を動かし続け、頭の中にある情報を表現してもらわなければなりません。今回紹介するNotationalもそんなノートアプリの一つです。Vue.jsを使っており、リアルタイムに表示が更新されていくのが気持ちい...

List

  • 2018/08/21

JavaScriptのイベントをたくさん見られるサイト - 開発時に役立つ。JavaScriptのイベント処理を確認

JavaScriptでのアプリケーション開発において肝になるのがイベントのハンドリングです。マウスやキーボード操作などによって多様なイベントが呼ばれます。それらの購読、解除によってアプリケーションを構築するのですが、慣れている人であっても複雑で分かりづらいものです。どんなイベントがあって、どうデータが送られてくるのかを...

List

  • 2018/08/09

Pomotroid - シンプルなポモドーロテクニック用アプリ

ポモドーロテクニックはご存じでしょうか。25分を基本として仕事をし、終わったら5分間の休憩をします。それを何回か繰り返したら、少し長めの休憩を取ると言ったワークスタイルです。特にキッチンタイマーを使うというのが特徴になります。そんなポモドーロテクニックを使うためのソフトウェアがPomotroidです。## Pomotr...

List

  • 2018/08/04

page-transitions-travelapp - ネイティブレベルのUXを体感できるWebアプリ

ハイブリッドアプリやPWAなど、Webアプリケーションをスマートフォンのネイティブアプリ風に使う技術が発展しています。ネイティブアプリと異なり、インストールの手間がなく、プラットフォーマーによる縛りもないのがWebの魅力と言えます。そんなWeb技術を駆使して作られたのがpage-transitions-travelap...