タグ: 技術者ブログ

In this engineer’s blog, we explore the latest AI technologies impacting the field of medicine. In recent years, advances in artificial intelligence (AI) have made a significant mark on healthcare. Among the most notable developments are in drug discovery and protein folding. These areas are critical for understanding disease mechanisms and developing new drugs, and the introduction of AI has brought about major breakthroughs.

1. The Intersection of AI and Biology

The power of AI is transforming traditional methods in biological research. Proteins are fundamental building blocks of life, and understanding their three-dimensional structures is essential to uncovering cellular functions and disease causes. However, predicting these structures has long been a complex, time-consuming, and costly task.

This is where AlphaFold, developed by DeepMind, comes in. Leveraging AI, AlphaFold can accurately predict protein structures and has had a profound impact on the scientific community.

2. The Evolution of AlphaFold and a Nobel Prize Win

Since its introduction in 2020, AlphaFold has been widely used by researchers to unravel the structures of many previously unknown proteins. Its successor, AlphaFold2, brought even greater precision, significantly advancing both science and medicine.

In recognition of this groundbreaking achievement, the leading researchers behind AlphaFold2 were awarded the Nobel Prize in Chemistry. This milestone marked the moment when AI was officially acknowledged as a transformative force in pure science. AlphaFold2’s ability to determine protein structures within minutes or hours—something that once took months using conventional experimental methods—was especially praised.

Far more than just another AI tool, AlphaFold2 is now regarded as one of the foundational technologies in life sciences.

3. The Science of Protein Folding

How proteins fold is closely linked to their function and their role in diseases. Misfolded proteins, for example, can be the cause of conditions such as Alzheimer’s or Parkinson’s disease.

Previously, it could take months to identify the structure of a single protein using experimental techniques. With AI-driven predictions, this can now be done in just a few hours. As a result, both the speed and scale of research have dramatically improved.

4. Challenges and Future Prospects

Despite its promise, AI-based structure prediction still faces challenges. For instance, not all proteins function independently—they often work in complex interactions with others. Predicting such protein complexes remains an area of ongoing development.

Another challenge is how to interpret AI-generated results in a biologically meaningful way and translate them into clinical applications. Moving forward, the integration of AI with experimental data will become increasingly important.

5. A Revolution in Drug Discovery Powered by AI

AI is already being applied in the field of drug discovery, aiding in candidate compound selection, side effect prediction, and clinical trial optimization. This contributes to shorter development timelines and reduced costs.

AI’s role is particularly vital in advancing personalized medicine, where treatments are tailored to individual patients. In the future, AI may enable the development of therapies customized for each person.

6. The Future of Healthcare: Hope Brought by AI

AI’s rapid progress is reshaping the very nature of healthcare. We may soon see a future where AI analyzes symptoms, genetic data, and lifestyle habits to instantly suggest the most effective treatments.

Of course, ethical and privacy concerns remain, but overcoming these challenges could lead to faster, safer, and more effective medical care.

Conclusion

The convergence of AI and biology has the power to accelerate and refine our understanding of disease and the development of treatments like never before. With AlphaFold2’s Nobel Prize win, AI is no longer just a supporting tool—it has been officially recognized as a new driving force in science.

What we’re witnessing now is, quite literally, the future of medicine. It will be fascinating to watch how this technology continues to evolve and transform our lives.

References:

• https://www.youtube.com/watch?si=qEp-o0qIv27JXjG6&v=hJ4LRswmZEs&feature=youtu.be
• AlphaFold Protein Structure Database

技術者ブログとして医療にかかわる最新AI技術についてご紹介します。近年、人工知能（AI）の進化は医療分野にも大きな影響を与えています。特に注目されているのが、創薬とタンパク質フォールディング（折りたたみ構造）の分野です。これらは病気のメカニズムの理解や新薬の開発において非常に重要であり、AIの導入によって大きなブレークスルーが起きています。

1. AIと生物学の出会い

AIの力は、従来の生物学の研究手法を大きく変えつつあります。タンパク質は生命の基本的な構成要素であり、その立体構造を理解することは、細胞内の働きや病気の原因を知る上で欠かせません。しかし、その予測は非常に難しく、時間もコストもかかる作業でした。

そこで登場したのが、DeepMindの「AlphaFold」です。これは、AIを活用してタンパク質の構造を高精度に予測できるシステムで、科学界に大きなインパクトを与えました。

2. AlphaFoldの進化とノーベル賞の受賞

AlphaFoldは2020年の発表以降、多くの研究者によって活用され、数多くの未解明のタンパク質構造を明らかにしてきました。その後継モデルであるAlphaFold2は、さらに正確な予測が可能となり、科学と医療の進歩を大きく前進させました。

この画期的な貢献が評価され、AlphaFold2の開発に携わった主要研究者たちはノーベル化学賞を受賞しました。これは、AI技術が純粋科学においても真に革新的であると公式に認められた瞬間でした。伝統的な実験技術では困難だったタンパク質構造解析を、数分〜数時間で可能にした点が、非常に高く評価されています。

AlphaFold2は単なるAIツールではなく、今後の生命科学の土台となる技術のひとつとして認識されています。

3. タンパク質フォールディングの科学

タンパク質がどのように折りたたまれるかは、機能や病気との関係に深く関わっています。例えば、誤って折りたたまれたタンパク質は、アルツハイマー病やパーキンソン病の原因になることもあります。

従来の実験手法では、1つのタンパク質の構造を明らかにするのに何ヶ月もかかっていたのが、AIによる予測なら数時間で済むようになりました。これにより、研究のスピードとスケールは格段に向上しています。

4. 課題と今後の展望

とはいえ、AIを活用した構造予測にも課題があります。例えば、すべてのタンパク質が単独で機能するわけではなく、複雑な相互作用の中で働いているため、複数のタンパク質が関与する「複合体」の予測はまだ不完全です。

また、AIの出す結果をどのように生物学的な意味として解釈し、臨床応用につなげていくのかも大きな課題のひとつです。今後は、AIと実験データの融合がさらに重要になるでしょう。

5. AIによる創薬の革命

AIはすでに創薬分野にも進出しており、候補化合物の選定、副作用の予測、臨床試験の最適化など、様々なステップで活用されています。これにより、開発期間の短縮とコスト削減が実現しつつあります。

特に、患者個人に合わせた「個別化医療」の実現にはAIの支援が不可欠であり、将来的には人間ごとにカスタマイズされた治療法の開発が期待されています。

6. 医療の未来：AIがもたらす希望

AIの進化は、私たちの医療のあり方そのものを変えつつあります。今後は、AIが症状や遺伝情報、ライフスタイルを解析し、最適な治療法を即座に提案する未来が現実になるかもしれません。

もちろん、倫理やプライバシーなどの課題もありますが、それを乗り越えることで「より早く、より安全で、より効果的な医療」が可能になるでしょう。

結論

AIとバイオロジーの融合は、病気の理解と治療法の開発をこれまでになく迅速かつ精密にする力を持っています。AlphaFold2がノーベル賞を受賞したことで、AIは単なるツールではなく、科学の新しい担い手として正式に認められたといえるでしょう。

私たちが今目にしているのは、まさに「医療の未来」そのものです。この技術がどのように進化し、私たちの生活を変えていくのか、今後の展開に目が離せません。

参考リリンク

• https://youtu.be/hJ4LRswmZEs?si=qEp-o0qIv27JXjG6
• AlphaFold Protein Structure Database

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:

• [2025] Top 10 Web Design Trends Selected by Web Designers – Mininare [Web Production Company Syscom]

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.

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デザイントレンド10選 – ミニナレ [web制作会社シスコム]

【代表的なデザイン】

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

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

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

株式会社Gotoschool

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

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

【どう作るのか】

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

【ICT業界への影響】

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

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

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

【まとめ】

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

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

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

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

Gitとは

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

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

リポジトリとは

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

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

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

ブランチとは

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

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

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

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が融合してどのようなことができるのか等を紹介したいと思います。

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 アプリは、インターネットに依存せず、ブラウザだけでデータを管理できる という点が大きな特徴です。ローカルにデータを保存することで、オフラインでも利用できる というメリットを実感できたのではないでしょうか？

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

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

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!