フレームワーク - Vueの記事一覧
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を紹介し...
小窓さん - ワイプ付きで任意のアプリを表示できるオンライン会議ユーティリティ
オンラインで会議やイベントに登壇している際に、通知が出てしまったり、他のアプリケーションが表示されてしまったりして焦った経験はないでしょうか。普段ならなんということもない操作も、焦ったりすると間違えることが多々あります。そうしたミスを防ぎたい時に使えるのが小窓さんです。小窓さんさえ画面共有すれば、ワイプ付きで配信できま...
ChromeGalvanizer - Google Chromeのセキュリティポリシーを作成
Google Chromeのシェアが伸び、企業内でもGoogle Chromeを使っているケースが増えています。Google Chromeといえば機能拡張が便利ですが、中にはセキュリティ上好ましくないものもあるでしょう。そういった時に使いたいのがChromeGalvanizerです。Google Chromeを企業内で...
MultiReplace - 置換条件をまとめて指定してテキスト変換
文字を入れ替える置換処理を何度も繰り返し行うことがあります。正規表現を使えば複数のパターンをまとめることもできますが、それでもなお、何度も何度も行わないといけないこともあるでしょう。そこで使ってみたいのがMultiReplaceです。TSV形式で置換条件をまとめて設定できます。## MultiReplaceの使い方利用...
CostBox - PWA対応のシンプルな支出管理
お金を管理する際の基本は、支出を把握することです。節約しているつもりではあっても、記録しないと意味がありません。記録することで可視化し、状態を把握できます。その次に改善するフェーズがあります。今回紹介するCostBoxは支出を記録するのに特化したアプリケーションになります。## CostBoxの使い方メイン画面です。!
Trollo - Vue/Vuex製のカンバンシステム
Trelloのようなカンバン機能はプロジェクト管理に限らず利用できそうです。自分たちで開発しているWebサービスの中に組み込みたいと思った方も少なくないでしょう。しかし実際に開発してみると意外と機能が多いと感じるかも知れません。そこで使ってみたいのがTrolloです。Vueで作られていますので、Vueアプリケーションの...