ascii art generator
1.0.0
これは、htmx と Spring Boot を使用したテキストからのアスキー アート ジェネレーターです。このアプリケーションを使用すると、テキストからアスキーアートを生成できます。アプリケーションは Spring Boot と htmx を使用して構築されます。アプリケーションは htmx を使用してアプリケーションを対話型にし、Spring Boot を使用してアプリケーションを提供します。
開発者の皆さん、Web 開発の魅力的な世界への旅へようこそ。そこで私たちは、真に魅力的なもの、つまり独自の ASCII アート ジェネレーターの作成に着手しようとしています。これを想像してください。普通のテキストを魅力的なビジュアル アートに変換します。ワクワクしますよね？この記事では、このビジョンを現実にするための HTMX と Spring Boot の連携の魔法について詳しく説明します。
HTMX は現代の Web 開発における魔法使いの杖のようなもので、そのシンプルさとユーザーフレンドリーなアプローチで知られています。フロントエンドとバックエンドをシームレスに接続し、インタラクティブなエクスペリエンスを作成するための完璧なコンパニオンとなります。これに Spring Boot フレームワークの堅牢性を組み合わせれば、創造性を解き放つ強力な組み合わせが完成します。 HTMX について詳しくは、https://htmx.org/ をご覧ください。
私たちの主な目標は？プレーン テキストにセンスを加える ASCII アート ジェネレーターを構築します。お気に入りの引用や簡単なメッセージを入力すると、それが視覚的に素晴らしい ASCII アート作品に変化する様子を想像してみてください。それは単なるコーディングではなく、ユーザーに喜びと創造性をもたらすエクスペリエンスを作成することです。
この探索を通じて、このダイナミックなコラボレーションの複雑さを明らかにしていきます。サーバーとブラウザーの間のギャップを埋め、これらのテクノロジーが連携してユニークでインタラクティブな Web アプリケーションを作成する方法を示します。私たちは、プロセスをアクセスしやすく、楽しく、そして最も重要なことに、ユーザーフレンドリーにすることに重点を置きます。
それでは、始めましょう! start.spring.io に移動し、以下に示すようにプロジェクトを構成しましょう。
このプロジェクトでは Java 17 を使用します。ここで使用している依存関係は次のとおりです。
**Spring Web: **これは、コントローラー、DispatcherServlet、View Resolver などの重要なコンポーネントを提供し、HTTP リクエスト処理の編成とモデル-ビュー-コントローラー (MVC) アーキテクチャの実装を容易にします。
Thymeleaf : Thymeleaf は、サーバー側 Java テンプレート エンジンであり、Spring Boot の Web 開発と組み合わされることが多い重要な依存関係です。 Thymeleaf は、ビュー テンプレート エンジンとして機能し、表現力豊かな構成要素を HTML テンプレート内に直接埋め込むことで、開発者が動的でインタラクティブな Web ページを作成できるようにします。
Bananaというライブラリを使用します。これは、小さな ASCII 文字の集合体で構成される文字で構成されるテキスト バナーをさまざまな書体で生成する Java 用の Figlet ユーティリティです。ここで確認できます: https://github.com/yihleego/banana
次に、選択した IDE でプロジェクトを開いてみましょう。 Intellij Ideaを使用するつもりです。
Banana ライブラリの依存関係も pom.xml に追加します。
<dependency>
<groupId>io.leego</groupId>
<artifactId>banana</artifactId>
<version>2.1.0</version>
</dependency>
それでは、アプリケーションのコーディングを始めましょう。以下のフォルダー構造を参考にしてください。
テンプレート ディレクトリに次のような UI テンプレートを作成しました (index.html)
<!doctype html >
< html lang =" en " >
< head >
< title > ASCII Art Generator </ title >
< link
href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css "
rel =" stylesheet "
/>
< script
src =" https://unpkg.com/[email protected] "
integrity =" sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC "
crossorigin =" anonymous "
> </ script >
</ head >
< body class =" bg-gray-100 " >
< div class =" container mx-auto p-8 " >
< h1 class =" mb-8 text-center text-4xl font-bold " > ASCII Art Generator </ h1 >
< div class =" mb-6 flex justify-center " >
< form id =" input-form " class =" text-center " >
< label for =" input-text " class =" mb-2 block " > Enter Text: </ label >
< input
type =" text "
id =" input-text "
name =" input-text "
required
class =" w-full rounded-md border px-4 py-2 focus:border-blue-500 focus:outline-none "
/>
< br />
< label for =" font-select " class =" mb-2 mt-4 block " > Select Font: </ label >
< select
id =" font-select "
name =" font-select "
class =" w-full rounded-md border px-4 py-2 focus:border-blue-500 focus:outline-none "
> </ select >
< div hx-get =" /api/fonts " hx-trigger =" load " hx-target =" #font-select " > </ div >
< br />
< button
class =" mt-6 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 "
hx-post =" /api/ascii-art "
hx-target =" #ascii-art "
hx-swap =" outerHTML "
>
Generate ASCII Art
</ button >
</ form >
</ div >
< div class =" mt-10 flex justify-center " >
< pre id =" ascii-art " class =" text-center " > </ pre >
</ div >
< div class =" mt-8 flex justify-center space-x-4 " >
< button
class =" rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 "
id =" copyButton "
onclick =" copyToClipboard() "
style =" display: none; "
>
Copy
</ button >
< button
class =" rounded bg-green-500 px-4 py-2 font-bold text-white hover:bg-green-700 "
id =" downloadButton "
onclick =" downloadFile() "
style =" display: none; "
>
Download
</ button >
</ div >
</ div >
< script >
function copyToClipboard ( ) {
const el = document . createElement ( 'textarea' )
el . value = document . getElementById ( 'ascii-art' ) . textContent
document . body . appendChild ( el )
el . select ( )
document . execCommand ( 'copy' )
console . log ( 'Copied to clipboard' )
document . body . removeChild ( el )
}
function downloadFile ( ) {
const asciiArtContent = document . getElementById ( 'ascii-art' ) . textContent
const blob = new Blob ( [ asciiArtContent ] , { type : 'text/plain' } )
const downloadLink = document . createElement ( 'a' )
downloadLink . href = window . URL . createObjectURL ( blob )
downloadLink . download = 'ascii_art.txt'
document . body . appendChild ( downloadLink )
downloadLink . click ( )
document . body . removeChild ( downloadLink )
}
function adjustButtonVisibility ( ) {
const asciiArt = document . getElementById ( 'ascii-art' )
const copyButton = document . getElementById ( 'copyButton' )
const downloadButton = document . getElementById ( 'downloadButton' )
copyButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
downloadButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
}
document . body . addEventListener ( 'htmx:afterSwap' , adjustButtonVisibility )
</ script >
</ body >
</ html >このファイルは、スタイル用の Tailwind CSS フレームワークと、フロントエンドとバックエンド間のシームレスな対話用の HTMX ライブラリを組み込んだ、ASCII アート ジェネレーターの Web ページを表します。コードの主要なコンポーネントと機能を詳しく見てみましょう。
Tailwind CSS スタイルシートは、スタイル設定の目的で CDN からリンクされています。
HTMX ライブラリは CDN にリンクされています。 HTMX は、動的なリクエストを作成し、ページ全体をリロードせずにページ コンテンツを更新するために使用されます。
ここでは上から順にいくつかの HTMX タグを使用しています。
hx-get : hx-get 属性は、hx-trigger で指定されたイベントが発生したときに HTTP GET リクエストを行うための URL (/api/fonts) を指定します。
hx-trigger : この hx-trigger="load" は、ページのロード時に GET リクエストをトリガーする必要があることを示します。
hx-target : hx-target="#font-select" は、ID font-select を持つ HTML 要素を、GET リクエストからの応答で更新するターゲットとして指定します。この場合、フォント オプションがドロップダウンに動的にロードされます。
hx-post : hx-post 属性は、ボタンがクリックされたときに HTTP POST リクエストを行うための URL (/api/ascii-art) を指定します。
hx-swap : hx-swap="outerHTML" は、ターゲット要素のコンテンツ全体を POST リクエストからの応答で置き換える必要があることを示します。
これらはここで使用したタグに加えて、ページの動作を変更するために以下の JavaScript 関数を使用しています。
function copyToClipboard ( ) {
const el = document . createElement ( 'textarea' )
el . value = document . getElementById ( 'ascii-art' ) . textContent
document . body . appendChild ( el )
el . select ( )
document . execCommand ( 'copy' )
console . log ( 'Copied to clipboard' )
document . body . removeChild ( el )
}この関数は、ASCII アートのテキスト コンテンツをクリップボードにコピーする役割を果たします。
新しいtextarea要素を作成し、その値を#ascii-art要素のテキスト コンテンツに設定し、 textareaドキュメント本文に追加し、コンテンツを選択し、「copy」コマンドを実行し、メッセージをコンソールに記録し、削除します。ドキュメント本文のtextarea 。
function downloadFile ( ) {
const asciiArtContent = document . getElementById ( 'ascii-art' ) . textContent
const blob = new Blob ( [ asciiArtContent ] , { type : 'text/plain' } )
const downloadLink = document . createElement ( 'a' )
downloadLink . href = window . URL . createObjectURL ( blob )
downloadLink . download = 'ascii_art.txt'
document . body . appendChild ( downloadLink )
downloadLink . click ( )
document . body . removeChild ( downloadLink )
}この関数は、ASCII アートを含むダウンロード可能なファイルを生成します。
#ascii-art要素のテキスト コンテンツを取得し、テキストを含むBlob (バイナリ ラージ オブジェクト) を作成し、Blob を指す URL を持つリンク ( <a> ) を作成し、ダウンロード属性を「ascii_art.txt」に設定します。 ' は、リンクを文書本文に追加し、リンクのクリックをトリガーして、文書本文からリンクを削除します。
function adjustButtonVisibility ( ) {
const asciiArt = document . getElementById ( 'ascii-art' )
const copyButton = document . getElementById ( 'copyButton' )
const downloadButton = document . getElementById ( 'downloadButton' )
copyButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
downloadButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
}この機能は、アスキーアートの内容に基づいて、コピーボタンとダウンロードボタンの可視性を動的に調整します。
#ascii-art要素のトリミングされたテキスト コンテンツが空でないかどうかを確認します。そうである場合、ボタンは表示されるように設定され ( 'inline-block' )、そうでない場合は非表示になるように設定されます ( 'none' )。
これで、API /api/ascii-art および /api/fonts を作成するために必要な UI が準備できました。これには、以下のように PageController を使用します。
package dev . maheshbabu11 . asciiartgenerator ;
import io . leego . banana . BananaUtils ;
import io . leego . banana . Font ;
import org . springframework . web . bind . annotation .*;
import java . util . List ;
@ RestController
@ RequestMapping ( "/api" )
public class PageController {
@ GetMapping ( "/fonts" )
public String getFonts () {
List < String > options = Font . values (). stream (). map ( Font :: getName ). toList ();
StringBuilder optionList = new StringBuilder ();
options . forEach (
option -> {
String optionString = "<option value= " " + option + " " >" + option + "</option>" ;
optionList . append ( optionString );
}
);
return optionList . toString ();
}
@ PostMapping ( "/ascii-art" )
public String asciiArt ( @ RequestParam ( "input-text" ) String inputText ,
@ RequestParam ( "font-select" ) String font ) {
return "<pre id= " ascii-art " >" + BananaUtils . bananaify ( inputText , Font . get ( font )) + "</pre>" ;
}
}確かに！提供された Java コードで定義されている両方の API の機能を詳しく見てみましょう。
/api/fonts : この API は、ASCII アート ジェネレーターで使用できるフォント オプションのリストを提供するために呼び出されます。 Banana ライブラリの一部であるFont enum からフォント名のリストを取得します。 Java Stream API を使用して、各フォント名を HTML <option>要素にマップし、それらを StringBuilder に追加します。このメソッドは、これらの<option>要素の連結を単一の HTML 文字列として返します。
/api/ascii-art : この API は、ユーザー入力テキストと選択したフォントをパラメータとして受け取り、それに応じて ASCII アートを生成します。 BanaUtils.bananaify メソッドを使用して、入力テキストと選択したフォントに基づいて ASCII アートを生成します。生成された ASCII アートは、 <pre> HTML タグで囲まれます。
コードが完成したので、アプリケーションを実行してみましょう。アプリケーションが開始されたら、http://localhost:8080/ にアクセスしてアプリケーションを試すことができます。
アプリケーションの完全なソースコードはここで確認できますか? GitHub - MaheshBabu11/ascii-art-generator: これは、htmx と…を使用したテキストからのアスキー アート ジェネレーターです。
また、試してみたい場合は、レンダリング時にデプロイされます https://ascii-art-generator.maheshbabu11.dev/
この記事では、HTMX と Spring Boot を使用して ASCII アート ジェネレーターを構築しました。 HTMX は Web ページをよりインタラクティブにし、Spring Boot は堅牢なバックエンドを提供します。これらを使用して、ユーザーがテキストを入力し、フォントを選択し、即座に ASCII アートを生成できるツールを作成しました。このプロジェクトは、動的で魅力的な Web アプリケーションを実現するために HTMX と Spring Boot を組み合わせるシンプルさと強力さを示します。
コーディングを楽しんでください?!!! ?を残します。楽しんで読んでいただければ。
