フレームワーク - Vueの記事一覧
octo - PWAとしてインストールできるMarkdownノート
使い勝手の良いMarkdownエディタを探す旅は長いです。GUIが良いのか、Webベースが良いのか。データはオフラインのみか、クラウドへ保存するものが良いのか…それぞれの利用法に合わせて最適なものを選ぶべきでしょう。今回紹介するoctoはWebベースのMarkdownノートです。オフラインファーストで、Webブラウザ内...
ことばパレット - 単語からカラーパレットを生成
色を選ぶのは難しいですよね。何となく思いつくものの、具体的に色を選ぶのには時間がかかってしまうというのは良くあることです。何となくしっくりこなくて、いつまでも探し続けてしまうことだってあるでしょう。そこで使ってみたいのがことばパレットです。単語からカラーパレットを生成します。## ことばパレットの使い方例。朝焼けという...
Singlelink - リンクを追加するだけで自分のWebサイトが完成
インターネット黎明期とは異なり、Webサイトを作ったりECサイトを立ち上げたりする手間は大きく軽減されています。発信するだけならTwitterやブログサイトを使うことですぐに実現できます。今回紹介するSinglelinkもそんな発信をサポートします。できることはリンクを載せるだけ、マイクロサイトプラットフォームです。#...
Ytmdl Web - YouTubeから音楽ファイルとしてダウンロード
YouTubeで配信されている音楽を聴いている人は多いでしょう。ミュージックビデオであれば、映像は不要で音楽さえあれば十分です。しかし、そう考えると映像の分の帯域が勿体ないと思うかも知れません。YouTubeの動画をダウンロードして音楽ファイルに変換するソフトウェア、YtmdlのWeb版がYtmdl Webです。## ...
Hyperlinkr - URLからリンクを生成するPWA
PWA（Progressive Web App）はローカルアプリケーションをWebに置き換える技術群を指し示す用語です。ローカルにインストールしたり、通知を出したり、オフラインやストレージなどがPWAで大事な機能になります。今回紹介するHyperlinkrはPWAで特定のURLをMarkdownやHTML形式でコピーし...
Layoutit Grid - Web上でCSSグリッドをビジュアル的に設計
CSSグリッドはまだモダンなWebブラウザでしか使えませんが、それまでのテーブルで組むやり方や、Divタグで組むのに比べるとシンプルで分かりやすいのが利点です。その一方、使いこなすのが難しいイメージがあります。CSSだけで全体を想像しながら作るのは困難です。そこで使ってみたいのがLayoutit Gridです。Webブ...
Icônes - 80種類以上のアイコン集を横断的に検索
世の中には多くのアイコン集があります。使いやすいものを使うのが基本ですが、ほかのアイコン集についても気になる人は多いでしょう。しかし、点在するアイコンサイトをそれぞれ訪れて、さらに検索して…というのは手間がかかります。そこで使ってみたいのがIcônesです。80種類を超えるアイコン集をまとめて検索できます。## Icô...
vue-easytable - Vue用の高機能テーブルコンポーネント
Webページでテーブル表示はよく使われますが、デフォルトでの機能の少なさには失望させられます。その結果、使い勝手の悪いテーブルで我慢するか、自分たちで機能を追加しなければなりません。今回紹介するvue-easytableは名前の通り、Vueで使えるテーブルコンポーネントになります。## vue-easytableの使い...
OTP Manager - Web/デスクトップ対応のワンタイムパスワード管理
多要素認証の基本として、ワンタイムパスワードの入力が行われています。多数のアプリがすでにありますが、何を利用しているでしょうか。筆者はAuthyを長く使っていますが、これから変えようと思っている人もいるはずです。ベンダーの色がないものが好きな方はOTP Managerを試してみましょう。Webやデスクトップアプリとして...
Snapcode - Webベースのスニペット管理
プログラミングをしていると、繰り返し使いたくなる便利な関数ができたりします。そうした関数は同じプロジェクトではなく、異なるプロジェクトでも使いたくなるでしょう。今回はそうしたちょっとしたコードを管理する、Webベースのスニペット管理であるSnapcodeを紹介します。## Snapcodeの使い方メイン画面です。タグと...
A Jira clone built with Vuejs & Nodejs/Graphql - node/GraphQLで作られたJiraクローン
意外と（？）Jiraのクローンは多いです。Webベースのプロジェクト管理として一定の地位を築きつつあり、多くの企業で使われています。10人まで無料ですが、その後は有料のサブスクリプションサービスになります。そんなJiraクローンとして名前の通り、A Jira clone built with Vuejs & Nodej...
Trello Clone - Vue製のカンバン
Trelloのようなカンバンシステムを使うことで、ステータスが変化するデータをうまく可視化できるようになりました。プロジェクト管理はもちろん、注文の処理状況、製造現場でのステータス可視化など様々な場面で活躍しています。そんなカンバン表示を自分たちのシステムにも組み込みたければオープンソースなものを使いましょう。今回はV...
Wiki.js - モダン、軽量なnode製Wikiエンジン
Wikiは2000年くらいから存在していますが、今なお新作が登場する分野でもあります。新しい技術やトレンドを取り込んで、新しいWikiが登場します。GitHub Wikiのように、サービスの中の一機能として取り込まれるケースも多いです。今回紹介するWiki.jsはnodeで作られたWikiエンジンです。レンダリングエン...
Rotten Soup - Vue/PixiJS製のローグライクゲーム
ローグは1980年代に作られたRPGで、テキストでグラフィカルなダンジョンを表現した画期的なゲームでした。現在ではグラフィカルなUIは当たり前ですが、今なおローグライクと呼ばれるローグを継承するようなゲームが多数作られています。今回紹介するRotten Soupもそんなローグライクなゲームの一つですが、Webブラウザ版...
GAS 家計簿 - Google Apps ScriptとVueで作られたWeb家計簿
IT技術の発展はめざましく、日々新しい技術が登場しています。例えばサーバレス、VueやReactの仮想DOM、ちょっと前であればRESTful APIなどがあります。それらを漏れなくキャッチアップするのは大変です。今回紹介するGAS 家計簿はサーバレスにGAS（Google Apps Script）を使って家計簿Web...
fontvuer - Vue製のマルチプラットフォームで使えるフォントビューワー
コンピュータの中には多くのフォントがインストールされています。それぞれのフォントを切り替えて表示したくらいでは、何が違うのか分からなかったりします。また、一つ一つ切り替えながら確認するのは億劫です。そこで使ってみたいのがフォントビューワーになります。今回はマルチプラットフォームで使えるfontvuerを紹介します。##...
ゆるGIFメーカー - 画像を振るわせてアニメーションGIFを生成
アニメーションGIFは動いていなければ意味がありません。しかし、アニメーションを一から作るのは大変です。動画などの素材をベースにするのはそのためです。コマ撮りで作るのは時間も労力もかかります。そこで一枚の画像からでもアニメーションGIFが作れるゆるGIFメーカーを使ってみましょう。フルフルと震える、新しいかわいらしさを...
診断チャートメーカー - 誰でも簡単に診断チャートを作成
二択の選択に沿って進めていって、最終的に何らかの診断がくだされる診断チャートは人気があるコンテンツです。動物占い的なものであったり、自分の特性に合わせた性格診断など、誰もが一度はやったことがあるでしょう。そんな診断チャートを自作できるのが診断チャートメーカーです。## 診断チャートメーカーの使い方トップページです。自作...
Grid.js - React/Angular/VueをサポートしたHTMLテーブルライブラリ
HTMLで使ってデータをテーブル表示するのは簡単です。しかし、ちょっとUIをよくしたり、ソートなどの機能を追加しようと思うと、途端に面倒になります。素のHTMLのままではとても使い勝手がいいとはいえません。そんなHTMLテーブルを手軽に高機能化してくれるライブラリがGrid.jsになります。## Grid.jsの使い方...
OBS Remote Tablet - OBSの操作をリモートから行う
オンラインでイベントが行われるようになって俄然注目が集まっているのがOBSです。OBSを使ってウェビナーやミートアップを配信している人は多いでしょう。機能が多いだけに、OBSの使いこなしによって品質が大きく変わります。今回はOBSをタブレット、Webブラウザから使えるようにするOBS Remote Tabletを紹介し...