テンプレートエンジン

はじめに こんにちは。弁護士ドットコム UX エンジニアの白井です。社名にもなっている 弁護士ドットコム というサービスを運営する専門家プラットフォーム事業本部に所属し、普段は開発業務やユーザーリサーチに携わっています。 この記事では、デザイナーとエンジニアが日々の開発を行ううえで課題となっていた HTML テンプレートの実装方法について、どのようなプロセスを通じて改善していったのかについて詳しくご紹介します。 はじめに HTML テンプレートとは HTML テンプレートを扱う仕組み HTML テンプレート開発上の課題 なぜ HTML テンプレートが重要か (1) HTML マークアップの品質…

mustacheの導入について書きます。mustacheは、テンプレートエンジンです。色々な言語で利用できるということなので、一度学習しておくと他でも使えるので勉強しておくに越したことはないと思います。今回は、Rubyのmustacheパッケージを使って勉強します。 mustacheとは 公式サイト 環境 Rubyのインストール mustacheのインストール まとめ 参考サイト mustacheとは テンプレートエンジンです。多くの言語で対応しているそうです。mustacheは、「口ひげ」という意味です。mustacheで使う記号({)が、口ひげに見えることからそのように呼ばれているそうです…

1.index.htmlを表示させる。 @Controller public class IndexController { @GetMapping("/") public String index() { return "index"; } } ・("/")はルートパスを指すため、Webアプリケーションの最上位URLにアクセスしたときに呼び出されるメソッドに対して指定する。 ・localhost:8080にアクセスしたときにindex.htmlが表示される。 ・"src/main/resources/templates/index.html"に配置しておく。 2.index.htmlから画面…

CTOをしております、村上です。 今回から、社内勉強会の内容をログとして投稿させていただきます。(今回の発表者は私です) 担当制で、各回の担当者には議論したいアジェンダとその材料を持って来てもらいます。 業務に完全に直結するものは業務でアウトプットすると思うので、世の中で話題になっているものや自分の中で興味が出ているものなどを想定しています。 ただ、業務と少しずらしていれば問題なしです。 ログなので内容として不正確、不十分なところはあると思いますが、ご了承ください。 概要 どちらも、SPAのレスポンスの良さを極力Javascriptを使わないで実現する仕組み REST APIではなくHTMLの…

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ1の16日目を担当します。 qiita.com 今回は、htmxのhx-getでパーツ読み込みをした際に、読み込み元のtitleタグが置き換わってしまう現象を防ぐ方法をご紹介します。 hx-getでパーツ読み込み？ 発生する現象 index.html /parts/index.html index.htmlを表示したときのtitle どうやって解決するか index.html 結果 まとめ hx-getでパーツ読み込み？ htmxでは、テンプレートエンジンのよう…

kubell Advent Calendar 2024 シリーズ 1の12/9の記事です。 qiita.com こんにちはkubellのフロントエンド開発部の末竹(magcho)🐧です。 今日においてフロントエンドのUIにおけるカタログ・テスト基盤としてStorybookが採用されることがあるかと思います。 特に最近のStorybookではコンポーネントテスト・UIテスト・振る舞いテストとしての機能が充実しています。 Storybookは公式にReact, Vue, Angular, ...をサポートしており少しの設定でこれらのフレームワーク(テンプレートエンジン)で作られたコンポーネントを掲…

この記事は 株式会社SUPER STUDIO - Qiita Advent Calendar 2024 - Qiitaの2日目の記事になります。 はじめに 業務で遭遇した問題 共通処理をモジュールにすべきか、サービスクラスにすべきか 👀聞いてみた 「共通処理がそのクラスの自然な一部として機能するなら」とは？ 「共通処理が独立した責任として扱えるなら」とは？ 「自然な一部」についての見解 「独立した責任」についての見解 どんな判断基準が良さそうか？ はじめに この記事で書いていることは過去の自分が間違った認識で書いた記事です。 この記事公開後、会社の先輩に「こうやで」と教えてもらいました。 なの…

はじめに SENSYプロダクトチームの清水です。今回はBigQuery上で動的にクエリを生成し実行することのできるEXECUTE IMMEDIATE関数を紹介いたします。 常日頃から利用する機能ではないですが、特定の場面ではとても役に立つものです。 問題設定 BigQueryのpublicデータで公開されている4つのデータセットを例とします。 bigquery-public-data.crypto_bitcoin bigquery-public-data.crypto_bitcoin_cash bigquery-public-data.crypto_dash bigquery-public-d…

こんにちは、エキサイト株式会社の平石です。 今回は、HTMXでheadタグ内の要素を扱う方法をご紹介します。 はじめに 環境 標準のHTMXではheadタグを扱えない headタグを扱いたいとき merge re-eval hx-preserve append 終わりに 参考文献 はじめに ソースコードはJava SpringBootを利用していますが、それ以外の言語、フレームワークでも動作するかと思います。 環境 今回のソースコードは以下の環境で動作確認をしています。 Java 21 SpringBoot 3.3.5 また、テンプレートエンジンとしてThymeleafを利用しています。 標準…

この記事は 食べログアドベントカレンダー 2024 の3日目の記事です 🎅🎄 こんにちは。食べログサービス本部デザイン部で飲食店様向けのUIデザインや実装を担当している、デザイナーの皆川です。 当社では、業務効率化を目的として、社内向けに生成AIを活用したチャットボットを導入しています。 今回、そのチャットボットにコードレビューを試験的に手伝ってもらい、そのプロンプトの最適化プロセスと所感をまとめました。本格的な効率化には他の方法も考えられますが、まずは手軽に試した結果をご紹介します。 また、本記事で触れるのはSlimのみですが、他言語でも応用できそうなので興味があれば試してみてください。 S…

はじめに この記事は バイセルテクノロジーズ Advent Calendar 2024の3日目の記事です。前日の記事は藤澤さんの「少数精鋭でユーザーの信頼を勝ち取る！大規模リリースを乗り越えるためのシステム監視とユーザーサポート」でした。 こんにちは、テクノロジー戦略本部 開発1部の尾沼です。 先日、私たちはバイセルリユースプラットフォームの出品管理基幹システム「EXS」をリリースしました。中古商品を大量に、効率的に複数のモールへ出品することを通じてバイセルのEC販売事業を支えています。 現在、EXSが連携しているECモールのほとんどは国内のものです。しかし、海外ECモールとして唯一、eBay…

FlaskではJinjaテンプレートエンジンを用いてHTMLを生成しますが、標準のフィルタや関数だけでは要件を満たせない場合があります。その際、自作の関数やフィルタをJinjaに追加して活用することができます。本記事では、その具体的な方法を解説します。 1. 自作フィルタの追加方法 フィルタとは？ Jinjaでは、テンプレート内でデータを加工するために「フィルタ」を使用できます。たとえば、upperフィルタを使って文字列を大文字に変換するなどが可能です。 自作フィルタの手順 Python関数を作成 Flaskアプリケーションに登録 実装例 以下の例では、文字列を逆順にするフィルタを作成します。…

わりと迷わず買ったので、一通り写経含めてやってみた。 1〜4章 環境構築から、周辺の説明。 今回のアーキテクチャとか。 本の中だと、APIを作成してフロントエンドから扱う感じなので、普通にテンプレートエンジン使うなら？ とかはちょっと寄り道してみたりはした。 askamaを使えばいいっぽい。 axumのexamplesにもaskamaを使ったサンプルがあるので、そこからコードを拝借してみたはいいものの、そのままだと動かないかも。 プロジェクトルートにtemplatesディレクトリを作って、その中にHTMLを置けば良い。 cargo add askama github.com let app =…

ぶれいどいいよね はい、おはようございます。僕です。今日もな、しょうもななことを書いていきます。ということでPHPのテンプレートエンジンにはBladeっていうのがあるんですよ。 Blade Templates - Laravel 11.x - The PHP Framework For Web Artisans で、大体の人はこういうの使うときはフレームワーク組込済みのなんやかんやでなんやかんやしていくと思うのですよ。けども、フレームワーク使えないときとかあるじゃないですか。そういうときにBladeOneならフレームワークに頼らずテンプレートだけ利用できるってものらしい…。github.com…