>_ DevTrendsja

言語

ホーム

言語

セクション

フロントエンド バックエンド モバイル DevOps AI / ML ゲーム開発 ブロックチェーン 組み込み セキュリティ
TypeScript

基本的なQRコードを生成するための有料オンラインサービスに別れを告げる方法

デザイナーや版面アーティストがランディングページや印刷物のために整齐なQRコードが必要になると、同じような旅が始まります。検索で見つけた最初のジェネレーターを開き、色の調整に5分、ロゴをアップロードし、ダウンロードボタンをクリックすると、突然、そのサイトが登録、有料サブスクリプション、または遅いサーバーを経由してリダイレクトする動的コード生成を要求してきます。見覚えがありますか?

最近、lyqhtという開発者が作成したオープンソースプロジェクトmini-qrを発見しました。これは、透かし、トラッカー、サブスクリプションなしで素早く美しいベクターコードを生成する軽量なWebアプリです。

なぜこのプロジェクトは実践的に役立つか

ほとんどのオープンソースジェネレーターは、单调な白黒の正方形を基本的なフォーマットで出力します。Mini QRはさらに進んで、結果に対する適切なコントロールを備えたビジュアルスタイルエディタを提供します。

このツールでできること:

  • モジュールとフレームのスタイリング。ドットの形状、ファインダーパターン(角のマーカー)、角の丸め、カスタムテキストを含む外枠の設定を変更できます。
  • 中央へのロゴ挿入。スキャナーが中央が覆われてもコードを確実に読み取り続けるよう、アプリケーションがエラー訂正レベルを自動的に管理します。
  • さまざまなタスク用のデータテンプレート。WIFI:S:MyNet;T:WPA;P:secret;;のような生文字列を手動で組み立てる必要はありません。Wi-Fi認証情報、vCard連絡先、カレンダーイベント、地理位置情報、リンク、さらにはEPC QR決済(SEPA)の готовыеフォームがインターフェースに用意されています。
  • 任意のフォーマットへのエクスポート。結果は、印刷用のクリーンなSVG、ラスターPNG/JPG、またはターミナル内で直接ASCII/Unicode文字として配信されます。

バッチエクスポートは特に注目に値します。リンクや連絡先のリストを含むCSVテーブルをアプリに入力すると、一貫したスタイルの画像のアーカイブ全体を生成します。カンファレンスのバッジや倉庫の在庫ステッカーの場合、これは数時間のルーティン作業を節約します。

組み込みスキャナーとローカル処理

ジェネレーター alongside、アプリケーションにはスキャナーも含まれています。WebRTCストリームを通じてウェブカメラから直接動作するかアップロードされた画像を解析します。

コードに構造化データが含まれている場合(例:Wi-Fiパスワードや連絡先)、スキャナーはタイプを認識してクイックアクションボタンを表示します здесь: третьих лиц нет: все парсинг и рендеринг происходят строго в браузере на стороне клиента. Ваши данные никуда не отправляются.

Приложение также поддерживает PWA, поэтому вы можете установить его как отдельный значок на рабочем столе или телефоне и использовать без постоянного сетевого подключения.

内部構造

Технический стек проекта выглядит современно и чисто:

  • Vue 3 с TypeScript
  • Сборка с помощью Vite
  • Компоненты на основе shadcn-vue и Tailwind CSS
  • Локализация более чем на 30 языках через Crowdin
  • Тестирование компонентов через Storybook

Авторы серьезно отнеслись к доступности: интерфейс соответствует базовым требованиям WCAG A, поддерживает светлую, темную и системную цветовые темы, а также корректно обрабатывает сложные символы UTF-8 (арабская вязь, символы CJK, эмодзи).

Внутреннюю библиотеку рендеринга можно протестировать отдельно прямо в публичном Storybook проекта, что упрощает интеграцию подобных компонентов в собственные фронтенд-сервисы.

Локальный запуск

Если вы не хотите использовать публичную демо-версию на Vercel или хотите развернуть генератор во внутренней сети компании с собственными настройками бренда, проект легко запустить локально.

Клонируйте репозиторий и установите зависимости:

git clone https://github.com/lyqht/mini-qr.git
cd mini-qr
pnpm install
pnpm dev

Для продакшена проект упакован в Docker-контейнер или собирается в статическую папку командой pnpm build, после чего может обслуживаться любым веб-сервером, например Nginx или Caddy.

Проект распространяется под лицензией GPL-3.0. Это означает, что код открыт для форков и самохостинга, но вы не сможете закрыть исходники при его модификации.

Кому это пригодится

Mini QR удовлетворяет сразу двум потребностям.

Во-первых, это удобный рабочий инструмент для повседневных задач: распечатать пароль гостевого Wi-Fi для офисной кухни, подготовить SVG-коды для презентации или отформатировать ссылки на бейджах участников конференции.

Во-вторых, это хороший пример качественного приложения на Vue 3 и Tailwind. Здесь вы можете увидеть, как организовать рабочие процессы Storybook для специализированных графических компонентов, как настроить удобный экспорт файлов и как автоматизировать превью для pull requests.

Если вы регулярно работаете с QR-кодами, посмотрите демо или добавьте проект в закладки. Он чисто решает задачу без лишнего шума.

関連プロジェクト