Engineer’s Blog – 2025 Web Design Trend Research

In this engineer’s blog, I’d like to share some of the topics I’ve been studying. This time, the focus is on researching Web Design Trends for 2025.

Theme: Web Design Trends for 2025

How is the world of web design expected to evolve in 2025?
To explore the latest developments, I referred to the following article:

Notable Design Elements

While paying attention to web-specific techniques and evolving technologies, I’ve summarized some of the key trends expected to gain traction.

Striking Typography Designs

Typography has been evolving rapidly in recent web design trends.
One particularly notable technique is dynamic typography.
This approach brings movement and transformation to text, allowing for expressive, animated presentations that go beyond the limitations of static text.
Whether it’s real-time changes or interactivity triggered by cursor actions, this kind of typography not only catches the eye but also enhances the overall user experience.

株式会社Gotoschool

Why I Chose This Topic

I was drawn to this technique because it goes beyond visual appeal—it enables dynamic and engaging presentations that are unique to the web.
Especially in contexts like sales pages or product introductions where it’s important to leave a strong impression quickly, dynamic typography can be highly effective.

How to Implement It

From a technical perspective, you can achieve dynamic typography using CSS and JavaScript, implementing animations and interactive effects on text elements.

Impact on the ICT Industry

Dynamic typography can significantly enhance the appeal of e-commerce sites and promotional pages.
In online shopping, where capturing user attention directly influences purchasing decisions, animated text can draw the eye, spark interest, and potentially increase click-through rates.

Benefits in Practice

Incorporating dynamic typography helps create websites that leave a lasting impression on users.
It’s not just for decoration—it’s a thoughtful way to enrich the user experience.
When applied effectively, it can make the site’s message more intuitive and engaging, reducing bounce rates and encouraging interaction.
As the line between design and technology continues to blur, such approaches will become key differentiators in web development.

Conclusion

As we head into 2025, web design trends continue to evolve.
Rather than simply aiming for visual polish, more emphasis is being placed on impactful effects and expressive motion.
Designs that evoke a sense of “fun” or leave a strong impression are increasingly in demand.

Moving forward, it’s no longer enough for web design to simply look good—it must also be usable, communicative, and memorable.
As developers, we need to think carefully about how to reflect these multifaceted goals in our code and design.
This kind of creative thinking will play a crucial role in elevating the overall quality of web design.

技術者ブログ-2025年度WEBデザイントレンド調査について

技術者ブログとして日ごろ取り組んでいる学習内容を紹介します。
今回は、2025年度WEBデザイントレンド調査をテーマにしています。

今回のテーマ『2025年度WEBデザイントレンド調査について』

2025年度のWEBデザイン分野はどう変わっていくのか? 以下のサイトを参考に最新の動向を調査しました。

【2025】Webデザイナー厳選!2025年のWebデザイントレンド10選 – ミニナレ [web制作会社シスコム]

【代表的なデザイン】

Web特有の表現や技術の進化にも注目しつつ、最新のWebデザイントレンドをご紹介します。

【印象的なタイポグラフィのデザイン】

最近のWebデザインでは、タイポグラフィにこだわった表現がどんどん進化しています。
中でも注目なのが、「動的タイポグラフィ」という手法。これは、文字に動きや変化をつけることで、静的なテキストでは出せない“動きのある表現”を可能にするものです。文字がリアルタイムに変わったり、カーソル操作に反応したりと、視覚的に面白いだけでなく、ユーザーの操作体験も向上します。

株式会社Gotoschool

【なぜこれを選んだのか】

この表現手法を取り上げたのは、単に目を引くだけでなく、Webならではのダイナミックな演出が可能な点に魅力を感じたからです。特に販売サイトやサービス紹介ページなど、短時間で印象を与える必要のある場面では、こうした動的な表現が有効に機能すると考えています。

【どう作るのか】

技術的には、CSSやJavaScripを活用して、文字に対するアニメーション処理やインタラクティブな動きを実装します。

【ICT業界への影響】

動的タイポグラフィは、ECサイトやプロモーションページの印象を高めるのに非常に効果的です。特にネット通販では、「目に留まる」ことが購買意欲に直結するため、動きのある文字を使うことで、ユーザーの視線を集め、商品への関心やクリック数の増加が見込めます。

【実践するとどうなるか】

動きのあるタイポグラフィを取り入れると、ユーザーの記憶に残るサイトづくりが可能になります。これは、単なる装飾ではなく、ユーザー体験をより豊かにするための工夫でもあります。実際に導入することで、直感的に魅力を伝えやすくなり、サイトの離脱率が下がるなどの効果も期待できます。デザインと技術の連携が求められる今、こうした取り組みがWeb制作における差別化の大きなポイントになっていくはずです。

【まとめ】

2025年に向けて、Webデザインのトレンドはさらに進化しています。最近では、整った見た目以上に、インパクトのある演出や、動きのある表現を取り入れたデザインが注目されています。ユーザーに「面白い」「印象的」と感じてもらえるような仕掛けが求められているのです。これからのWebデザインでは、ただ美しく見せるだけでは不十分で、使いやすさ・伝わりやすさ・記憶に残る体験といった複数の要素をバランスよく設計することが重要です。私たち技術者が意識すべきなのは、そうした多面的な要件をどう実際のコードや設計に落とし込むか。その工夫こそが、Webデザイン全体の質を大きく左右するポイントになってくるでしょう。

Engineer Blog – The Basics of Git

Welcome to our engineer blog, where we share what we’re learning day to day.
Recently, I had a chance to work with Git, so in this post, I’ll be explaining its basic concepts.

Have you ever saved multiple versions of the same file on an external hard drive or similar device, managing them by changing the filenames like this?

Multiple versions of the same file. “F” stands for “Final,” and the more F’s you have, the more “final” it seems.

This kind of versioning might be enough for personal files, but when it comes to managing source code in a large-scale project, a more precise and structured system is needed. That’s where Git comes in.

What Is Git?

Git is a Version Control System (VCS). Its role is to track and manage the history of changes to files. With this tracking, you can return files to a specific past state and compare or merge changes.

In particular, for projects involving multiple people, using Git makes it possible to visualize which files were changed, when, and by whom—helping to prevent accidental overwrites or unintended edits.

What Is a Repository?

The files managed by Git are stored in a repository. Repositories are generally classified into two types: local and remote. When saving files, it’s important to be aware of which repository your changes are being applied to.

Git is a distributed VCS, meaning each developer maintains a full history of the project in their local repository. This makes it possible to edit files and review history even while offline.

Remote repositories are hosted by providers like GitHub, GitLab, or Bitbucket. (Of course, you can also create and manage your own.) Because the storage is online, it becomes easy to share work and collaborate with others.

Types of Repositories

What Is a Branch?

When adding a new feature or making changes that might affect existing code in uncertain ways, it’s risky to update the main project source directly. In such cases, you can create an independent branch. This lets you safely develop and test features without impacting the main codebase.

Once the new feature or fix is complete and has passed testing, the branch can be merged into the main project to officially apply the changes.

Branching and Merging

Stay tuned for the next post in our Engineer Blog series!

技術者ブログ – Gitの基礎

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
最近、Gitに触れる機会がありましたので、今回は、その基礎について説明します。

ちなみに、外付けHDDなどで同じファイルの複数バージョンを保存し、以下のようにファイル名によって管理していることがありますか。

あるファイルの複数バージョン。「F」は「ファイナル」を意味して、あればあるほど「ファイナル性」が高くなります。

個人のファイルでしたら、これで十分かもしれませんが、大規模のプロジェクトのソースコードの場合では、より精密な管理が必要になります。そこで、Gitが登場します。

Gitとは

Gitは、バージョン管理システム(version control system、「VCS」)です。その役割は、ファイルの変更履歴を追跡し、管理することになります。そして、追跡によって、管理されているファイルを過去の特定の時点の状態に戻すことと、変更内容を比較・統合することができます。

特に、複数人が関わるプロジェクトでは、Gitを使うと、どのファイルがいつ、誰によって、どのように変更されたかを可視化して、不意な上書きや意図しない変更を防止することができます。

リポジトリとは

Gitによって管理されているファイルは、リポジトリに保存されています。リポジトリの種類を大きく分けると、「ローカル」と「リモート」があります。ファイルを保存する時、変更点がどのリポジトリに対して適応されるか、意識する必要があります。

Gitは「分散型」のVCSのため、開発者が自分のローカルリポジトリで完全な履歴を持つことができます。オフラインの状態でも、ファイルの編集や履歴の確認などが可能です。

リモートリポジトリは、GitHub、GitLabやBitbucketなどのプロバイダーによって提供されています。(もちろん、自分で作成し、運用することも可能です。)ファイルの保存先が「オンライン」のため、チームで作業を共有したり、協力したりすることが簡単になります。

リポジトリの種類

ブランチとは

例えば、新しい機能を実装する時、あるいは既存のソースに影響範囲が分からない変更を加える時、プロジェクトのソースをその場で更新することが危険です。このような場合には、独立している「ブランチ」を作成し、プロジェクト全体に影響を与えない場所で、新しい機能・変更の動作を確認できます。

新機能、修正の開発が完了し、動作確認で問題が生じなければ、ブランチの内容をメインに統合することで、変更を正式に反映させることができます。

ブランチによる分岐と結合

次回の技術者ブログをお楽しみに。

Engineer Blog – Trends in Low-Code Tools(Part 2)

As part of our engineer blog, we introduce the topics we are actively learning.
This time, we focus on low-code tools!

Theme: Trends in Low-Code Tools

In our previous blog post, “Trends in Low-Code Tools” – dandelionS Blog, published in July 2021, we discussed the latest developments in low-code tools.

Since then, more of our team members have gained experience with OutSystems, prompting us to conduct another trend analysis to explore the future outlook of low-code tools.

What Are Low-Code and No-Code?

The adoption of low-code and no-code tools is increasing to improve app development efficiency, enabling faster development and cost reduction.

  • Low-Code: Requires minimal coding for app development. Some programming knowledge is necessary, but it allows for flexible customization.
  • No-Code: Enables intuitive app creation without coding. However, customization options are more limited.

[Comparison table with representative tools]

Comparison of Major Low-Code & No-Code PlatformsThe market share of low-code and no-code platforms is primarily based on industry recognition and the number of companies adopting them. Below are the leading platforms ranked by market share:

Microsoft Power Apps

A widely adopted platform due to its strong integration with Microsoft products (especially Office 365 and Azure). As part of the Microsoft ecosystem, it allows businesses to easily create and manage applications.

  • Adoption: Used by organizations of all sizes worldwide, from small businesses to large enterprises.

OutSystems

A low-code platform specializing in enterprise solutions, excelling in large-scale and complex app development. It features strong automation and AI functionalities and is particularly popular among large corporations.

  • Adoption: Commonly used in industries like finance, manufacturing, and public institutions.

Mendix

A low-code platform designed for enterprise applications, known for its integration with SAP and industry-specific approach. It supports both cloud-based and on-premises deployment, providing an advanced development environment.

  • Adoption: Frequently used in manufacturing and logistics industries.

Appian

Specialized in Business Process Management (BPM), this platform excels in process automation and complex workflow management. It is designed for enterprises looking to optimize business operations.

  • Adoption: Popular in industries such as banking, insurance, and pharmaceuticals.

Future of Low-Code and No-Code

The future of low-code and no-code tools looks promising, with market growth and technological advancements driving increased adoption. The integration of AI will further enhance development speed and expand possibilities for both enterprises and individual developers.

Market Growth

  • The global low-code/no-code market was valued at $17 billion in 2022.
  • It is projected to grow to $45 billion by 2027.
  • The market is expected to expand rapidly over the next 5–10 years.

Key Trends in the Low-Code/No-Code Market

Stronger Integration Between AI & Low-Code/No-Code
AI will automate development processes, allowing for natural language-based app development, eliminating the need for manual coding. Additionally, AI will optimize UI/UX design and code generation.

Examples of AI Integration:

  • Power Apps’ “Copilot” and OutSystems’ “AI Mentor”
  • Developers can input commands like “Create a product management app”, and AI will automatically generate the application.
  • AI will analyze user behavior and optimize UI layout automatically.
  • With further AI advancements, even complex logic and data analysis will be handled by AI, accelerating the shift toward true no-code development.
  • Developers’ roles will transition from coding to designing and managing applications.

Conclusion

Based on market share, Microsoft Power Apps dominates the low-code space due to its strong integration with Microsoft’s ecosystem. However, OutSystems also maintains a strong position, particularly in enterprise applications.

While large enterprises have been the primary adopters, the question remains whether low-code tools will expand further into SMEs and general users.

Looking ahead, as low-code tools and AI continue to merge, developers will focus more on designing applications, while AI handles coding. Exploring how OutSystems can integrate with AI will be a key consideration moving forward.

For our next post, we’ll explore the potential of OutSystems and AI integration and what it can achieve. Stay tuned!

技術者ブログ-ローコードツールのトレンドについて②

技術者ブログとして日ごろ取り組んでいる学習内容を紹介します。
今回は、ローコードをテーマにしています!

今回のテーマ『ローコードツールのトレンドについて』

前回:技術者ブログ-ローコードツールのトレンドについて – dandelionS Blog
は2021年7月にローコードツールのトレンドについて、ブログを作成しておりました。
弊社でもOutSystemenの経験者が増えてきており、今後のローコードツールの動向がどのようになっていくか?という目線でトレンド調査を再度実施いたしました。

【ローコード・ノーコードとは】

アプリ開発を効率化するためにローコード・ノーコードツールの導入が進んでいます。これにより、開発スピードの向上や開発コスト削減が可能になっています。

・ローコード:最小限のコーディングでアプリ開発を行える。プログラミングの知識が必要だが、柔軟なカスタマイズが可能。
・ノーコード:コーディング不要で直感的にアプリを作成できる。カスタマイズ性は限定的。

【代表的なツールと比較表】

ローコード・ノーコードプラットフォームのシェア率は、主に市場での認知度や導入企業数に基づいています。以下は、シェア率が高い順に並べた主要なプラットフォームです。

【Microsoft Power Apps】
Microsoftの製品群(特にOffice 365やAzure)と統合が強力で、企業内で広く使われているため、シェアが非常に高い。Microsoftエコシステムの一部として、業務アプリケーションを簡単に作成・管理できます。
導入事例: 世界中の企業や組織で採用されており、特に中小企業から大企業まで幅広い規模で使用されています。

OutSystems
エンタープライズ向けに特化したローコードプラットフォームで、大規模なシステムや複雑なアプリケーション開発に強みがあります。自動化やAI機能が強化されており、特に大手企業に導入されています。
導入事例: 多くの大手企業、特に金融、製造業、公共機関で使用されている事例が多いです。

【Mendix】
特に大企業やエンタープライズ向けのアプリケーション開発に強みを持つローコードプラットフォーム。SAPとの統合や産業特化型のアプローチが特徴です。クラウドおよびオンプレミスで使用可能で、高度な開発環境を提供します。
導入事例: 多くの大企業で導入されており、特に製造業や物流業界での採用が目立ちます。

【Appian】
ビジネスプロセス管理(BPM)に特化しており、業務プロセスの自動化や複雑なワークフローの管理に強みがあります。エンタープライズ向けで、特に業務オペレーションの効率化を図る企業で利用されています。
導入事例: 銀行や保険、製薬業界などで採用事例が多くあります。

Power Appsは、Microsoftと密接に統合されているため、特に企業内での採用が多いです。
OutSystemsやMendixも大手企業での導入が進んでおり、特にエンタープライズ向けアプリケーション開発に強みを持っています。

【ローコード・ノーコードの今後について】

ローコード・ノーコードツールの将来性は非常に有望で、市場規模の拡大技術革新が進むことで、今後さらに影響力を増すと考えられています。特に、AIとの統合開発スピードの向上が企業や個人開発者にとって大きなメリットになってくる。

【市場規模】
2022年のローコード・ノーコード市場は約170億ドルとなっているが、
2027年には約450億ドルに成長すると予測されている。
→市場規模は今後5〜10年で急速に成長すると予想されています。

【今後のローコード・ノーコード市場で注目されるトレンド】
・AIとローコード・ノーコードの融合強化
AIが開発プロセスを自動化され、自然言語でのアプリ開発からコーディング不要になる。また、AIがUI/UXの最適化やコード生成を支援することになる。
例.Power Appsの「Copilot」やOutSystemsの「AI Mentor」の利用
①開発者が「商品管理アプリを作って」と入力 → AIが自動でアプリを構築することが可能
②ユーザーの行動パターンからUI配置をAIが自動最適化される
③AIの進化により「ノーコード化」がさらに進み、複雑なロジックやデータ分析もAIが担当
④開発者の役割が「コーディング」から「設計・運用」にシフト
⑤AIがコードを書く → 開発者がロジックを微調整という流れとなる

【まとめ】

ローコードツールのシェア率で考えると、MicrosoftPowerAppsが非常に高いが、OutSystemsも高い順位をキープしていることが分かった。
大企業に導入されていることが多いが、今後シェアも増えて中小企業や一般ユーザーにも普及するのかがツール変更のポイントになってくるかと感じた。
将来的にはローコードとAIが融合して、開発者は設計を行い、AIがコードを作成するといったノーコード化が進んでくることもあり、OutSystemsでもAIと融合して何ができるのか?をさらに検討していくことが重要だと思います。

今回はトレンド紹介と今後のツールの予測について説明しましたので、
次回はOutsystemsとAIが融合してどのようなことができるのか等を紹介したいと思います。

Engineer Blog: Local-First

In this engirring blog, we introduce the learning topics we work on daily.

What is Local-First?

Recently, the concept of Local-First has been gaining attention. Many applications are designed with an online-first approach, where data is stored in the cloud. This allows users to access their data from any device and easily share it with others. However, applications that rely on online connectivity have several disadvantages, such as:

  • Data is inaccessible without an internet connection.
  • The application becomes unusable if the server goes down.
  • Communication with the server can introduce delays, reducing responsiveness.
  • Storing personal data in the cloud poses security risks from external access.

The Local-First approach addresses these issues. In Local-First applications, data is primarily stored on the user’s device and synchronized only when needed. This approach offers several benefits:

  • Data remains accessible even without an internet connection.
  • The application functions independently, unaffected by service outages.
  • Immediate data read/write operations without relying on a server.
  • Personal data is managed locally, reducing dependency on the cloud.

Examples of Local-First Applications

Several applications utilize the Local-First approach, including:

  • Evernote: Allows users to create and view notes even while offline. Synchronization with the cloud ensures data availability across devices.
  • Notion: An all-in-one productivity tool featuring document management, task tracking, and database functionality. Users can edit content offline, and changes are synced to the cloud to maintain data consistency.

Let’s Build an Application! (TypeScript Edition)

To experience the Local-First approach, let’s build a simple To-Do App that runs entirely within a browser! This application will store data locally, ensuring that tasks remain saved even after a page reload.

Below, we introduce the key implementation details.

ToDo の追加(データをローカルに保存)
async function addTodo(text: string) {
    const todo = {
        _id: new Date().toISOString(),  // 一意のID
        text,
        completed: false
    };
    // データをローカルに保存
    await db.put(todo);
}

ToDo の表示(保存されたデータを取得)
async function renderTodos() {
    const result = await db.allDocs({ include_docs: true });
    result.rows.forEach(row => {
        // タスクを取得して表示
        console.log(row.doc.text);
    });
}

ToDo の削除
async function deleteTodo(id: string) {
    const doc = await db.get(id);
    // タスクを削除
    await db.remove(doc);
}

Running the To-Do App

  1. Open the application in a web browser.
  2. Enter a task and click the Add button—the task will be added to the list below.
  3. Close the browser. (Normally, this would cause the entered tasks to be lost.)
  4. Reopen the application in the browser. (The previously entered tasks remain displayed.)
  5. Click on a task to delete it.

Thoughts on Running the App

One of the standout features of this To-Do App is its ability to function independently of the internet, managing data entirely within the browser. By storing data locally, users can continue using the application even while offline.

Key Takeaways:

  • Data persists even after a page reload!
  • The app works without a server!
  • Fast performance with instant data retrieval!

Applications that don’t rely on servers or the cloud might seem somewhat uncommon, but the Local-First approach proves to be highly valuable for offline functionality and data privacy. While this project was a simple implementation, it could be extended with cloud synchronization or mobile support for a more versatile experience.

Exploring the possibilities of Local-First applications has been insightful, and I look forward to leveraging this concept further.

See you in the next blog post!

技術者ブログ:ローカルファースト

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。

ローカルファーストとは

最近、ローカルファースト という考え方が注目されています。多くのアプリはオンラインを前提 に作られています。データをクラウドに保存することで、どのデバイスからでもアクセスできる、複数人での共有が容易 などのメリットがあります。しかし、オンライン依存のアプリには以下のようなデメリットもあります。

  • インターネットがないとデータにアクセスできない
  • サービス停止でサーバーがダウンすると使えなくなる
  • サーバーへの通信が発生するため、レスポンスが遅くなることも
  • 個人データがクラウド上にあるため、外部からのアクセスリスクがある

こうした問題を解決するのが、ローカルファースト という考え方です。ローカルファーストのアプリでは、まずデータをデバイス内に保存し、必要に応じて同期する ため、以下のようなメリットがあります。

  • インターネットがなくてもデータにアクセス可能
  • サービス障害の影響を受けず、ローカル保存なので、アプリが独立して動作
  • サーバーを介さず、データの読み書きが即座に行われる
  • 個人データをローカルで管理し、クラウドに依存しない

ローカルファーストの考え方を活かしたアプリには、以下のようなものがあります。

Evernote(エバーノート):オフラインでもメモの作成・閲覧が可能で、クラウドと同期することでデバイス間でデータを共有できます。
Notion(ノーション):ドキュメント管理、タスク管理、データベース機能を備えたオールインワンの生産性向上ツール。オフラインでも編集が可能で、クラウドと同期することでデータの一貫性を保ちます。

アプリを作ってみよう!(TypeScript編)

ローカルファーストの仕組みを体験するために、ブラウザだけで動作する ToDo アプリ を作ってみましょう!このアプリでは、データをローカルに保存し、リロードしても消えない仕組み を実装します。

下記に主要な部分の紹介します。

ToDo の追加(データをローカルに保存)
async function addTodo(text: string) {
    const todo = {
        _id: new Date().toISOString(),  // 一意のID
        text,
        completed: false
    };
    // データをローカルに保存
    await db.put(todo);
}

ToDo の表示(保存されたデータを取得)
async function renderTodos() {
    const result = await db.allDocs({ include_docs: true });
    result.rows.forEach(row => {
        // タスクを取得して表示
        console.log(row.doc.text);
    });
}

ToDo の削除
async function deleteTodo(id: string) {
    const doc = await db.get(id);
    // タスクを削除
    await db.remove(doc);
}

作ったアプリを実行してみました。

  1. ブラウザでアプリを開きます。
  2. タスクを入力し、追加ボタンをクリックすると、下のリストに追加されます。
  3. ブラウザと閉じます。(通常はここで入力したタスクは消えてしまいます)
  4. ブラウザで再度アプリを開きます。(上で入力したタスクは残ったまま表示されます)
  5. タスクをクリックすると、タスクが削除されます。

実際に動かしてみて感じたこと

今回作成した ToDo アプリは、インターネットに依存せず、ブラウザだけでデータを管理できる という点が大きな特徴です。ローカルにデータを保存することで、オフラインでも利用できる というメリットを実感できたのではないでしょうか?

  • リロードしてもデータが消えない!
  • サーバーがなくても動作する!
  • 動作が軽く、即座にデータを取得できる!

サーバやクラウドを使わないアプリは少し珍しく感じるかもしれませんが、ローカルファーストの考え方は、オフライン対応やデータのプライバシーを考える上で非常に有用 です。今回のアプリはシンプルな実装でしたが、クラウドとの同期を追加したり、モバイル対応に拡張したりすることも可能 です。ローカルファーストなアプリの可能性を感じつつ、活用していきたいです。
では、次回のブログでお会いしましょう。

Engineer Blog – About QR Code Generation

Welcome to our engineer blog, where we share our ongoing learning experiences. This post is part of Unit 0, which focuses on web design. Today, I’d like to introduce an opportunity I had to work with something less commonly encountered: QR code generation.

Preparation

For this implementation, I used Java. Since my development environment is Gradle-based, adding the necessary libraries was as simple as including the following in the build.gradle file. (Isn’t it convenient how accessible things have become these days?)

Reference Site:
Getting Started Developing · zxing/zxing Wiki · GitHub

The library used here is ZXing, an open-source Java library that enables the creation and reading of one-dimensional codes (such as barcodes) and two-dimensional codes (like QR codes).

Implementation

The key element for generating QR codes is the encode method of the QRCodeWriter class. As summarized in the comments, the following parameters can be specified:

  1. First parameter: The content to be displayed.
  2. Second parameter: The output format ( BarcodeFormat from the ZXing 3.5.3 API).
  3. Third parameter: The dimensions.

The generated data is stored in a variable of type BitMatrix (bm). By specifying the output format in the writeToStream method, you can save the generated QR code in your desired format. In this case, we output the QR code in PNG format.

While the actual implementation involves handling API requests and returning the output result to the screen, I’ll omit those details here.

Summary

Nowadays, if you just want to generate a QR code once for testing purposes, there’s no need to write a program from scratch. You can find many online QR code generators with just a quick search. Some even let you customize the design or offer formats tailored to specific use cases, making them surprisingly fun to explore.

This post covered only the basics, but I hope it gave you an idea of how QR code generation works. If you found this interesting, I’d be delighted.

Stay tuned for the next engineer blog post!

P.S. The content of the QR code includes a closing message!

技術者ブログ –QRコード生成について

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はWEBデザインをテーマにしている第0ユニットです。
普段触ることないQRコード生成について触れる
機会があったので、そちらをご紹介したいと思います。

準備

今回はjavaで作っていきたいと思います。
私の開発環境はgradleを使っているので、
build.gradleファイルに以下追記してあげるだけで、必要なライブラリーが読み込まれます。
(便利な世の中になりましたね…)

参考サイト:Getting Started Developing · zxing/zxing Wiki · GitHub

使用しているライブラリーは、「ZXing」です。
Javaで実装されているオープンソースで、一次元コード(バーコードなど)、二次元コード(QRコードなど)の作成/読取を行うことができる画像処理ライブラリです。

作成

作成するにあたってポイントになるのが、「QRCodeWriter」の「encode」メソッドです。
コメントにざっくり書いてありますが、以下パラメータを指定することができます。
第一引数:表示する内容
第二引数:出力フォーマット指定(BarcodeFormat (ZXing 3.5.3 API))
第三引数:縦横のサイズ

生成したものをBitMatrix型の変数(bm)に格納し、writeToStreamメソッドで出力形式を指定すれば出力することができます。今回はQRコードをpng形式で出力してみました。
本実装はAPIリクエストを受け付けてそれに対応する出力結果を画面に返却していますが、
そこの部分は割愛します。

まとめ

今の時代は、一回だけお試しに作りたい時などの場合、わざわざプログラムを組まなくても
ネットで検索すれば多数の生成サイトが見つかります。
中にはデザインをいじれたり、用途に応じてフォーマットが用意されていたりと探してみると意外と面白いです。
というわけで、本投稿ではシンプルな部分だけではありますが、
QRコードを作成する仕組みをご紹介致しました。
少しでも興味を持っていただければ幸いです。

それでは、次回の技術者ブログをお楽しみに。

※QRコード内容は締めの挨拶です!