Tutorial: Using Thymeleaf (ja)

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "Tutorial: Using Thymeleaf (ja)"

Transcription

1 Thymeleaf Tutorial: Using Thymeleaf (ja) Japanese translation by: Mitsuyuki Shiiba Document version: December 2014 Project version: RELEASE Project web site: Page 1 of 84

2 1 Thymeleafの の 紹 介 1.1 Thymeleafって 何? ThymeleafはJavaのテンプレートエンジンライブラリです XML/XHTML/HTML5で 書 かれたテンプレートを 変 換 して アプリ ケーションのデータやテキストを 表 示 することができます ウェブアプリケーション 内 のXHTML/HTML5を 扱 う 方 が 得 意 ですが どんなXMLファイルでも 処 理 できますし ウェブアプリ ケーションでもスタンドアローンアプリケーションでも 使 用 可 能 です Thymeleafのメインゴールは テンプレート 作 成 のための 優 雅 で 整 形 式 の 方 法 を 提 供 することです そのため テンプレート 内 にロジックを 記 述 する 方 法 ではなく 事 前 定 義 されたロジックの 実 行 を DOM(Document Object Model) 上 でXMLタグ 属 性 によって 指 定 する 方 法 を 基 本 としています このアーキテクチャのおかげで パースしたファイルを 賢 くキャッシュして 実 行 時 のI/O 処 理 を 最 小 限 に 抑 えることができるの で テンプレートを 高 速 に 処 理 することが 可 能 となっています さらに Thymeleafは 最 初 からXMLとウェブ 標 準 を 念 頭 に 置 いてデザインされているので 必 要 に 応 じて 完 全 にバリデーショ ンされた 状 態 のテンプレートを 作 成 することもできます 1.2 Thymeleafはどんな 種 類 のテンプレートを 処 理 できるの? Thymeleafは6 種 類 のテンプレートを 処 理 することができます これをテンプレートモードと 呼 びます: XML Valid XML XHTML Valid XHTML HTML5 Legacy HTML5 Legacy HTML5 以 外 は 整 形 式 XMLです Legacy HTML5 モードでは 閉 じていないタグ 値 がない 属 性 引 用 符 で 囲 まれていな い 属 性 が 許 容 されていますが Thymeleafはこのモードのファイルを 最 初 に 整 形 式 XMLに 変 換 します それでもHTML5として は 正 しい 状 態 です(そして 実 際 こちらがHTML5を 書 くのに 推 奨 されている 方 法 です) また バリデーションはXMLとXHTMLのみで 使 用 可 能 なことに 注 意 してください ただ Thymeleafが 処 理 できるテンプレートのタイプはこれだけではありません テンプレートを パースする 方 法 と 結 果 を 書 き 込 む 方 法 を 指 定 することで ユーザーは 独 自 のモードを 定 義 することができます Thymeleafは DOMツリーとし て 表 現 することができるものであれば 何 でも(XMLかどうかに 関 係 なく)テンプレートとして 効 率 よく 処 理 することができま す ダイアレクト: スタンダードダイアレクト Thymeleafは 非 常 に 拡 張 性 の 高 いテンプレートエンジンです( 実 際 テンプレートエンジンフレームワーク と 呼 んだほうがい いかもしれません) Thymeleafでは 処 理 対 象 のDOMノードと そのDOMノードをどのように 処 理 するかを 完 全 に 定 義 する ことができます DOMノードにロジックを 適 用 するものを プロセッサ と 呼 びます そして プロセッサ 一 式 と いくつかの 特 別 な 生 成 物 のことをダイアレクトと 呼 びます Thymeleafでは スタンダードダイアレクト というそのまますぐに 使 えるコアライ ブラリを 提 供 していて 大 半 のユーザーにとってはこれで 十 分 です Page 2 of 84

3 このチュートリアルでカバーしているのはスタンダードダイアレクトです 以 降 のページで 学 ぶ 全 ての 属 性 や 文 法 は 特 に 明 記 していなくても このダイアレクトに 定 義 してあります もちろん ライブラリの 拡 張 機 能 を 利 用 して 独 自 の 処 理 ロジックを 定 義 したい など(スタンダードダイアレクトを 拡 張 するこ とも 含 めて) 独 自 のダイアレクトを 作 りたい 場 合 があるかもしれません テンプレートエンジンは 複 数 のダイアレクトを 同 時 に 使 用 できます 公 式 の thymeleaf-spring3 と thymeleaf-spring4 連 携 パッケージはどちらも Springスタンダードダイアレクト と 呼 ばれるダイアレクトを 定 義 しています これは ほぼスタンダードダイアレクトと 同 じで そこにSpring Framework 用 の 便 利 機 能 を 少 しだけ 適 用 しています( 例 えば Thymeleaf 標 準 のOGNLの 代 わりにSpring 式 言 語 を 使 用 するなど) です ので Spring MVCを 使 用 するような 場 合 でも 時 間 の 無 駄 にはなりません ここで 学 ぶことは 全 て Springアプリケー ションを 作 成 する 際 にも 役 立 つでしょう Thymeleafのスタンダードダイアレクトはどのテンプレートモードでも 使 用 できますが 特 にウェブ 向 けのテンプレートモー ドに 適 しています(XHTMLとHTML5モード) HTML5の 他 に 具 体 的 には 以 下 のXHTML 仕 様 をサポート 動 作 確 認 しています: XHTML 1.0 Transitional XHTML 1.0 Strict XHTML 1.0 Frameset そして XHTML 1.1 です スタンダードダイアレクトの 大 半 のプロセッサは 属 性 プロセッサ です 属 性 プロセッサを 使 用 すると XHTML/HTML5テ ンプレートファイルは 処 理 前 であってもブラウザで 正 しく 表 示 することができます 単 純 にその 属 性 が 無 視 されるからです 例 えば タグライブラリを 使 用 したJSPだとブラウザで 直 接 表 示 できない 場 合 がありますが: <form:inputtext name="username" value="${user.name}" /> Thymeleafスタンダードダイアレクトでは 同 様 の 機 能 をこのように 実 現 します: <input type="text" name="username" value="james Carrot" th:value="${user.name}" /> ブラウザで 正 しく 表 示 できるだけでなく ( 任 意 ですが)value 属 性 を 指 定 することもできます(この 場 合 の James Carrot の 部 分 です) プロトタイプを 静 的 にブラウザで 開 いた 場 合 にはこの 値 が 表 示 され Thymeleafでテンプレートを 処 理 した 場 合 には ${user.name} の 評 価 結 果 値 で 置 き 換 えられます 必 要 な 場 合 には 全 く 同 じファイルをデザイナーとデベロッパーが 触 ることができるので 静 的 なプロトタイプをテンプレー トに 変 換 する 労 力 を 減 らすことができます この 機 能 のことを ナチュラルテンプレーティング と 呼 びます 1.4 全 体 のアーキテクチャ ThymeleafのコアはDOM 処 理 エンジンです 具 体 的 にいうと 標 準 のDOM APIではなく 高 性 能 の 独 自 DOM 実 装 によってテ ンプレートのインメモリツリー 表 現 を 生 成 します その 後 そのインメモリツリー 上 でノードを 走 査 してプロセッサを 実 行 し DOMを 変 更 します DOMの 変 更 は 現 在 の 設 定 や テンプレートに 渡 されるコンテキストと 呼 ばれるデータセットに 従 いま す ウェブドキュメントはオブジェクトツリーとして 表 現 されることが 本 当 によくあるので DOMテンプレート 表 現 の 使 用 はウェ ブアプリケーションにとても 適 しています( 実 際 にブラウザはDOMツリーによってメモリ 上 でウェブページを 表 現 します) ま た 多 くのウェブアプリケーションで 使 用 するテンプレート 数 は 数 十 個 程 度 である そのテンプレートが 大 きなサイズでは ない アプリケーションの 実 行 中 に 通 常 は 変 更 されない という 考 えに 基 づいてThymeleafはテンプレートのDOMツリーのイ ンメモリキャッシュを 利 用 しています これによって 多 くのテンプレート 処 理 で( 必 要 だとしても)ほんの 少 しのI/Oしか 必 要 な くなるので 本 番 環 境 での 実 行 を 速 くすることができます このチュートリアルの 後 ろの 方 にキャッシュについてと 高 速 な 処 理 のためにThymeleafがどのようにメモリとリソー スを 最 適 化 しているかについて 説 明 した 章 がありますので 詳 細 はそちらを 参 照 してください Page 3 of 84

4 しかし 制 約 もあります: このアーキテクチャではテンプレート 処 理 に 他 のアプローチよりも 多 くのメモリスペースが 必 要 にな ります つまり (ウェブドキュメントとは 対 照 的 な) 大 きなサイズのデータXMLの 作 成 には 使 わない 方 が 良 いということで す 大 まかには(といってもJVMのメモリサイズによりますが)1テンプレートを 処 理 するのに 数 十 メガバイトが 必 要 になるXML ファイルを 処 理 する 場 合 は おそらくThymeleafを 使 わない 方 が 良 いでしょう ここで データXMLに 対 してだけこの 制 約 について 考 えているのは ウェブのXHTML/HTML5に 関 しては そんなに 大 きなサイズのドキュメントは 作 成 しないからです ブラウザもDOMツリーを 生 成 するので そんなことをすると 固 まっ てしまいますもんね 1.5 次 に 進 む 前 に 読 むことをお 勧 めします Thymeleafは 特 にウェブアプリケーションに 適 しています そしてウェブアプリケーションには 標 準 というものがあります みんながこの 標 準 についてよく 知 っているべきなのですが ほとんどの 人 が 知 りません たとえウェブアプリケーションの 仕 事 を 何 年 もやっている 人 であってもです HTML5の 出 現 によって 今 日 のウェブ 標 準 はかつてないほどに 混 乱 しています XHTMLからHTMLに 戻 るの? XMLシ ンタックスはなくなるの? XHTML2.0はどこにいったの? ということでこのチュートリアルでは 先 に 進 む 前 に Thymeleafのウェブサイトの 次 の 記 事 を 読 むことを 強 くお 勧 めします: From HTML to HTML (via HTML) Page 4 of 84

5 2 The Good Thymes Virtual Grocery(グッドタイムス 仮 想 食 料 品 店 ) 2.1 食 料 品 店 用 のウェブサイト Thymeleafのテンプレート 処 理 のコンセプトを 分 かりやすく 説 明 するために このチュートリアルではデモアプリケーション を 使 用 します デモアプリケーションはプロジェクトのウェブサイトからダウンロードできます このアプリケーションは 架 空 の 仮 想 食 料 品 店 のウェブサイトで 様 々なThymeleafの 機 能 の 例 をお 見 せするのに 十 分 なシナリ オが 用 意 されています アプリケーションにはとてもシンプルなモデルエンティティが 必 要 でしょう: Products は Orders を 作 成 することによって Customers に 販 売 されます さらにこの Products について Comments も 管 理 しましょう: Example application model とてもシンプルなサービスレイヤも 作 りましょう 次 のようなメソッドを 持 つ Service オブジェクトです: Page 5 of 84

6 public class ProductService { } public List<Product> findall() { return ProductRepository.getInstance().findAll(); } public Product findbyid(integer id) { return ProductRepository.getInstance().findById(id); } 最 後 に リクエストURLに 応 じてThymeleafに 処 理 を 委 譲 するフィルタをウェブレイヤに 作 成 しましょう: private boolean process(httpservletrequest request, HttpServletResponse response) throws ServletException { } try { * Query controller/url mapping and obtain the controller * that will process the request. If no controller is available, * return false and let other filters/servlets process the request. IGTVGController controller = GTVGApplication.resolveControllerForRequest(request); if (controller == null) { return false; } * Obtain the TemplateEngine instance. TemplateEngine templateengine = GTVGApplication.getTemplateEngine(); * Write the response headers response.setcontenttype("text/html;charset=utf-8"); response.setheader("pragma", "no-cache"); response.setheader("cache-control", "no-cache"); response.setdateheader("expires", 0); * Execute the controller and process view template, * writing the results to the response writer. controller.process( request, response, this.servletcontext, templateengine); return true; } catch (Exception e) { throw new ServletException(e); } IGTVGController インターフェイスは 次 のようになります: Page 6 of 84

7 public interface IGTVGController { } public void process( HttpServletRequest request, HttpServletResponse response, ServletContext servletcontext, TemplateEngine templateengine); これで IGTVGController の 実 装 を 作 成 すれば 良 いだけです データをサービスから 受 け 取 って TemplateEngine オブジェクト を 使 用 してテンプレートを 処 理 します 最 終 的 にはこのようになりますが: Example application home page まずはテンプレートエンジンの 初 期 化 について 見 てみましょう 2.2 テンプレートエンジンの 作 成 と 設 定 フィルタの process( ) メソッドの 中 に 次 のような 文 があります: TemplateEngine templateengine = GTVGApplication.getTemplateEngine(); これは Thymeleafを 使 用 するアプリケーションにおいて 最 も 重 要 なオブジェクトの 中 の 一 つである TemplateEngine インス タンスの 作 成 と 設 定 を GTVGApplication クラスが 担 っているということです ここでは org.thymeleaf.templateengine を 次 のように 初 期 化 しています: Page 7 of 84

8 public class GTVGApplication { private static TemplateEngine templateengine; static { initializetemplateengine(); } } private static void initializetemplateengine() { } ServletContextTemplateResolver templateresolver = new ServletContextTemplateResolver(); // XHTML is the default mode, but we set it anyway for better understanding of code templateresolver.settemplatemode("xhtml"); // This will convert "home" to "/WEB-INF/templates/home.html" templateresolver.setprefix("/web-inf/templates/"); templateresolver.setsuffix(".html"); // Template cache TTL=1h. If not set, entries would be cached until expelled by LRU templateresolver.setcachettlms( l); templateengine = new TemplateEngine(); templateengine.settemplateresolver(templateresolver); もちろん TemplateEngine オブジェクトを 初 期 化 するのには 様 々な 方 法 がありますが 今 はこの 数 行 のコードで 十 分 です テンプレートリゾルバー テンプレートリゾルバーからスタートしましょう: ServletContextTemplateResolver templateresolver = new ServletContextTemplateResolver(); テンプレートリゾルバーはThymeleafのAPIである org.thymeleaf.templateresolver.itemplateresolver を 実 装 しています: public interface ITemplateResolver { } * 文 字 列 名 (templateprocessingparameters.gettemplatename())によってテンプレートを 解 決 します * このテンプレートリゾルバーで 解 決 できない 場 合 は null を 返 します public TemplateResolution resolvetemplate( TemplateProcessingParameters templateprocessingparameters); テンプレートリゾルバーは どうやってテンプレートにアクセスするかを 決 定 する 役 割 を 担 っています GTVGアプリケー Page 8 of 84

9 ションの 場 合 は org.thymeleaf.templateresolver.servletcontexttemplateresolver 実 装 を 使 用 して Servlet Context からテ ンプレートファイルを 取 得 します: Javaの 全 てのウェブアプリケーションにはアプリケーションレベルの javax.servlet.servletcontext というオブジェクトが 存 在 し それによってウェブアプリケーションのルートをリソースパ スのルートとしてリソースを 解 決 することができます テンプレートリゾルバーにはいくつかのパラメータを 設 定 することができます まず 標 準 的 なものとして テンプレート モードがあります: templateresolver.settemplatemode("xhtml"); XHTMLは ServletContextTemplateResolver のデフォルトテンプレートモードですが 意 図 を 明 らかにするために 書 いておくの は 良 い 習 慣 ですね templateresolver.setprefix("/web-inf/templates/"); templateresolver.setsuffix(".html"); prefix と suffix は 文 字 通 り テンプレート 名 から 実 際 のリソース 名 を 作 り 出 すために 使 用 されます この 設 定 を 使 用 すると product/list というテンプレート 名 は 次 の 内 容 と 同 じになります: servletcontext.getresourceasstream("/web-inf/templates/product/list.html") 任 意 ですが cachettlms でテンプレートキャッシュの 生 存 期 間 を 指 定 することもできます: templateresolver.setcachettlms( l); もちろんTTL 以 内 であってもキャッシュのサイズが 最 大 値 に 達 した 場 合 は 古 いエントリーから 削 除 されます キャッシュの 振 る 舞 いやサイズは ICacheManager インターフェイスの 実 装 によって 定 義 されます または 単 純 にデ フォルトで 設 定 されている StandardCacheManager を 修 正 しても 良 いです テンプレートリゾルバーについてのより 詳 細 な 説 明 は 後 ほど 行 います 今 はテンプレートエンジンオブジェクトの 生 成 につい て 見 てみましょう テンプレートエンジン テンプレートエンジンオブジェクトとは org.thymeleaf.templateengine のことです 現 在 の 例 ではこのようにエンジンを 作 成 しています: templateengine = new TemplateEngine(); templateengine.settemplateresolver(templateresolver); かなりシンプルですよね インスタンスを 作 成 してテンプレートリゾルバーをセットするだけです TemplateEngine に 必 須 のパラメータはテンプレートリゾルバーだけです もちろん 他 にも 色 々な 設 定 があります(メッセージ リゾルバーやキャッシュサイズなど)が それについては 後 ほど 説 明 します 今 はこれだけで 十 分 です これでテンプレートエンジンの 準 備 ができました では Thymeleafを 使 用 したページの 作 成 に 進 みましょう Page 9 of 84

10 3 テキストを 使 う 3.1 複 数 言 語 でウェルカム 私 たちの 食 料 品 店 用 の 最 初 のタスクはホームページ 作 成 です 最 初 のバージョンは 非 常 にシンプルです: タイトルとウェルカムメッセージだけです /WEB-INF/templates/home.html は 以 下 のようになります: <!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <title>good Thymes Virtual Grocery</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="all" href="../../css/gtvg.css" /> </head> <body> <p th:text="#{home.welcome}">welcome to our grocery store!</p> </body> </html> 最 初 に 見 て 欲 しいのは このファイルがどんなブラウザでも 正 しく 表 示 できるXHTMLであるということです 理 由 は XHTMLにあるタグしか 使 っていないからです(そしてブラウザは th:text のような 知 らない 属 性 は 無 視 します) また 整 形 式 の DOCTYPE 宣 言 を 持 っているので 互 換 モードではなくスタンダードモードで 表 示 されます 次 に このファイルは th:text のような 属 性 を 定 義 したThymeleafのDTDを 指 定 しているので 妥 当 な XHTMLでもありま 2 す さらに テンプレートが 処 理 されると( 全 ての th:* 属 性 が 取 り 除 かれますが) Thymeleafは 自 動 的 に DOCTYPE 内 の DTD 定 義 を 標 準 的 な XHTML 1.0 Strict のものに 置 き 換 えます(このDTD 変 換 機 能 に 関 しては 後 の 章 で 説 明 します) thymeleaf 名 前 空 間 も th:* として 定 義 されています <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> もしテンプレートの 妥 当 性 や 整 形 式 であるかどうかを 全 く 気 にしないのであれば 単 純 に 標 準 の XHTML 1.0 Strict DOCTYPE を 指 定 すればよく xmlns 名 前 空 間 の 定 義 も 不 要 であることに 気 をつけてください: Page 10 of 84

11 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>good Thymes Virtual Grocery</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="all" href="../../css/gtvg.css" /> </head> <body> <p th:text="#{home.welcome}">welcome to our grocery store!</p> </body> </html> こう 書 いてもXHTMLモードのThymeleafは 問 題 なく 処 理 することができます(IDEの 警 告 で 残 念 な 感 じになると 思 いますけ ど) バリデーションに 関 してはOKですね ではテンプレートに 関 する 本 当 に 面 白 い 部 分 に 進 みましょう: th:text 属 性 を 見 て 行 き ましょう th:text とテキストの 外 部 化 テキストの 外 部 化 とは テンプレートコードのフラグメント( 断 片 )をテンプレートファイルの 外 に 取 り 出 すことです それに よって テンプレートから 切 り 離 された 別 のファイル( 通 常 は.properties ファイル)の 中 でフラグメントを 管 理 することがで き また 簡 単 に 他 の 言 語 で 書 かれた 文 字 列 に 置 き 換 えることができます(このことを 多 言 語 対 応 または i18n と 呼 びます) 外 部 化 されたテキストのフラグメントのことを 通 常 は メッセージ と 呼 びます メッセージは そのメッセージを 特 定 するためのキーを 持 っており Thymeleafは #{} という 構 文 を 使 用 してテキストと メッセージの 紐 付 けを 行 います: <p th:text="#{home.welcome}">welcome to our grocery store!</p> ここでは 実 際 Thymeleafスタンダードダイアレクトの2つの 異 なる 機 能 を 使 用 しています: th:text 属 性 : この 属 性 は 値 の 式 を 評 価 した 結 果 をタグのボディに 設 定 します ここでは コード 内 の Welcome to our grocery store! というテキストを 置 換 します #{home.welcome} 式 : スタンダード 式 構 文 に 規 定 されています ここでは テンプレートを 処 理 する 全 てのロケールで home.welcome キーに 対 応 するメッセージを 取 得 して th:text 属 性 で 使 用 するということを 意 味 します ふむ では 外 部 化 されたテキストはどこにあるのでしょうか? Thymeleafでは 外 部 化 テキストの 場 所 は org.thymeleaf.messageresolver.imessageresolver を 実 装 することで 自 由 に 設 定 で きます 通 常 は.properties ファイルを 使 用 する 実 装 になっていますが 独 自 実 装 を 作 成 することも 可 能 です 例 えばメッ セージをDBから 取 得 することも 可 能 です ところで 私 たちのテンプレートエンジンには 初 期 化 の 時 にメッセージリゾルバーを 指 定 していません これは org.thymeleaf.messageresolver.standardmessageresolver クラスによって 実 装 された スタンダードメッセージリゾル バー を 使 用 していますよ ということです スタンダードメッセージリゾルバーは /WEB-INF/templates/home.html というテンプレートに 対 してテンプレートと 同 じフォ ルダ 内 で 同 じ 名 前 のファイルで 拡 張 子 が.properties のファイルの 中 からメッセージを 探 します /WEB-INF/templates/home_en.properties が 英 語 用 Page 11 of 84

12 /WEB-INF/templates/home_es.properties がスペイン 語 用 /WEB-INF/templates/home_pt_BR.properties がポルトガル 語 (ブラジル) 用 /WEB-INF/templates/home.properties がデフォルト 用 (ロケールが 一 致 しない 場 合 ) home_es.properties ファイルを 見 てみましょう: home.welcome= Bienvenido a nuestra tienda de comestibles! これでThymeleafのテンプレート 処 理 に 必 要 なことは 全 て 終 わりました ではHomeコントローラーを 作 成 しましょう コンテキスト テンプレートを 処 理 するために HomeController クラスを 作 成 します 前 述 の IGTVGController インターフェイスを 実 装 しま す: public class HomeController implements IGTVGController { } public void process( HttpServletRequest request, HttpServletResponse response, ServletContext servletcontext, TemplateEngine templateengine) { } WebContext ctx = new WebContext(request, response, servletcontext, request.getlocale()); templateengine.process("home", ctx, response.getwriter()); まずはコンテキストの 作 成 について 見 てみましょう Thymeleafのコンテキストは org.thymeleaf.context.icontext イン ターフェイスを 実 装 したオブジェクトです コンテキストはテンプレートエンジンの 実 行 に 必 要 な 全 てのデータを 変 数 のマッ プとして 持 ち また 外 部 化 メッセージで 使 用 されるロケールへの 参 照 を 持 っています public interface IContext { } public VariablesMap<String,Object> getvariables(); public Locale getlocale(); このインターフェイスの 拡 張 として org.thymeleaf.context.iwebcontext というインターフェイスがあります: public interface IWebContext extends IContext { } public HttpSerlvetRequest gethttpservletrequest(); public HttpSession gethttpsession(); public ServletContext getservletcontext(); public VariablesMap<String,String[]> getrequestparameters(); public VariablesMap<String,Object> getrequestattributes(); public VariablesMap<String,Object> getsessionattributes(); public VariablesMap<String,Object> getapplicationattributes(); Thymeleafのコアライブラリはそれぞれの 実 装 を 提 供 しています: Page 12 of 84

13 org.thymeleaf.context.context implements IContext org.thymeleaf.context.webcontext implements IWebContext コントローラーのコードを 見 ていただければ 分 かるように ここでは WebContext を 使 用 しています というか そうしなけ ればなりません ServletContextTemplateResolver が IWebContext の 実 装 を 必 要 とするからです WebContext ctx = new WebContext(request, servletcontext, request.getlocale()); 3つの 引 数 のうち2つだけが 必 須 です ロケールに 何 も 指 定 しなかったらシステムのデフォルトロケールが 使 用 されます( 実 際 の アプリケーションでは 絶 対 に 指 定 した 方 がよいですが) インターフェイスの 定 義 から WebContext はリクエストパラメータ リクエスト 属 性 セッション 属 性 アプリケーション 属 性 を 取 得 するメソッドを 持 っていることが 分 かりますが 実 際 のところ WebContext はもう 少 し 色 々とやっています: 全 てのリクエスト 属 性 をコンテキスト 変 数 マップに 追 加 全 てのリクエストパラメータを 持 つ param というコンテキスト 変 数 を 追 加 全 てのセッション 変 数 を 持 つ session というコンテキスト 変 数 を 追 加 全 てのサーブレットコンテキスト 属 性 を 持 つ application というコンテキスト 変 数 を 追 加 実 行 直 前 に 全 てのコンテキストオブジェクト( IContext の 実 装 )に 対 して 特 別 な 変 数 が 設 定 されます Context と WebContext のどちらもその 対 象 です この 変 数 は 実 行 情 報 ( execinfo )と 呼 ばれます この 変 数 はテンプレートで 使 用 される2 つのデータを 持 っています テンプレート 名 ( ${execinfo.templatename} ): エンジンの 実 行 時 に 指 定 される 名 前 です これは 処 理 するテンプレート 名 と 一 致 します 現 在 日 時 ( ${execinfo.now} ): テンプレートエンジンが 現 在 のテンプレートの 処 理 を 開 始 した 日 時 を 示 す Calendar オブジェ クトです テンプレートエンジンの 実 行 コンテキストオブジェクトが 準 備 できたので あとはテンプレートエンジンを 実 行 するだけです テンプレート 名 とコンテキ ストとレスポンスライターを 渡 してレスポンスへの 書 き 込 みを 行 います: templateengine.process("home", ctx, response.getwriter()); ではスペイン 語 ロケールを 使 用 して 結 果 を 見 てみましょう: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>good Thymes Virtual Grocery</title> <meta content="text/html; charset=utf-8" http-equiv="content-type"/> <link rel="stylesheet" type="text/css" media="all" href="/gtvg/css/gtvg.css" /> </head> <body> <p> Bienvenido a nuestra tienda de comestibles!</p> </body> </html> Page 13 of 84

14 3.2 テキストと 変 数 に 関 するその 他 のこと エスケープなしのテキスト 私 たちのホームページの 最 もシンプルなバージョンは 準 備 できましたが もしメッセージが 次 のようなものだったらどうしま しょう home.welcome=welcome to our <b>fantastic</b> grocery store! 今 のままでテンプレートを 実 行 するとこのようになります: <p>welcome to our <b>fantastic</b> grocery store!</p> これは 本 当 に 欲 しい 結 果 ではありません <b> タグがエスケープされてブラウザに 表 示 されてしまっています これは th:text 属 性 のデフォルトの 振 る 舞 いです ThymeleafでXHTMLタグをエスケープせずに 表 示 したいのであれば 違 う 属 性 を 使 用 しなければなりません: th:utext ( unescaped text 用 ): <p th:utext="#{home.welcome}">welcome to our grocery store!</p> This will output our message just like we wanted it: <p>welcome to our <b>fantastic</b> grocery store!</p> 変 数 の 使 用 と 表 示 さて 私 たちのホームページについてもう 少 し 見 てみましょう 例 えば ウェルカムメッセージに 次 のようなデータを 表 示 し たいかもしれません: Welcome to our fantastic grocery store! Today is: 12 july 2010 まずはじめに コントローラーを 修 正 してコンテキスト 変 数 に 日 付 を 追 加 します: public void process( HttpServletRequest request, HttpServletResponse response, ServletContext servletcontext, TemplateEngine templateengine) { } SimpleDateFormat dateformat = new SimpleDateFormat("dd MMMM yyyy"); Calendar cal = Calendar.getInstance(); WebContext ctx = new WebContext(request, response, servletcontext, request.getlocale()); ctx.setvariable("today", dateformat.format(cal.gettime())); templateengine.process("home", ctx, response.getwriter()); String 型 のtoday 変 数 をコンテキストに 追 加 したので テンプレートで 表 示 することができるようになりました: Page 14 of 84

15 <body> <p th:utext="#{home.welcome}">welcome to our grocery store!</p> <p>today is: <span th:text="${today}">13 February 2011</span></p> </body> 見 ての 通 りここでも th:text 属 性 を 使 用 しています(タグのボディを 置 換 したいので これで 問 題 ありません) ですが 構 文 が 少 し 違 いますね #{} 式 ではなく ${} 式 を 使 っています これが 変 数 用 の 式 です OGNL (Object-Graph Navigation Language) と 呼 ばれる 言 語 の 式 でコンテキスト 変 数 マップに 対 して 処 理 を 行 います この ${today} は 単 純 に todayという 名 前 の 変 数 を 取 得 する という 意 味 ですが もっと 複 雑 なこともできます( 例 えば ${user.name} は user 変 数 を 取 得 してその getname() メソッドを 呼 び 出 す という 意 味 になります) 属 性 には 様 々な 値 を 設 定 することができます: メッセージ 変 数 式 などなど 次 の 章 では どのようなものが 指 定 できるかを 全 て 見 ていきましょう Page 15 of 84

16 4 スタンダード 式 構 文 私 たちの 仮 想 食 料 品 店 の 開 発 は 少 し 休 憩 して Thymeleafスタンダードダイアレクトの 中 でもっとも 重 要 なものの 一 つについ て 学 んでいきましょう: Thymeleafスタンダード 式 構 文 です この 構 文 を 使 って 表 現 された2タイプの 属 性 値 を 既 に 見 てきました: メッセージ 式 と 変 数 式 です: <p th:utext="#{home.welcome}">welcome to our grocery store!</p> <p>today is: <span th:text="${today}">13 february 2011</span></p> ですが まだ 知 らないタイプがたくさんあります また 知 っているものにももっと 面 白 い 部 分 があります 初 めにスタン ダード 式 の 機 能 の 概 要 を 見 てみましょう 単 純 式 : 変 数 式 : ${} 選 択 変 数 式 : *{} メッセージ 式 : #{} リンクURL 式 リテラル テキストリテラル: 'one text', 'Another one!', 数 値 リテラル: 0, 34, 3.0, 12.3, 真 偽 値 リテラル: true, false Nullリテラル: null リテラルトークン: one, sometext, main, テキスト 演 算 子 : 文 字 列 結 合 : + リテラル 置 換 : The name is ${name} 算 術 演 算 子 : バイナリ 演 算 子 : +, -, *, /, % マイナス 符 号 ( 単 項 演 算 子 ): - 論 理 演 算 子 : 二 項 演 算 子 : and, or 論 理 否 定 演 算 子 ( 単 項 演 算 子 ):!, not 比 較 と 等 価 : 比 較 演 算 子 : >, <, >=, <= ( gt, lt, ge, le ) 等 価 演 算 子 : ==,!= ( eq, ne ) 条 件 演 算 子 : If-then: (if)? (then) If-then-else: (if)? (then) : (else) Default: (value)?: (defaultvalue) これら 全 ての 機 能 は 結 合 したりネストしたりすることができます: Page 16 of 84

17 'User is of type ' + (${user.isadmin()}? 'Administrator' : (${user.type}?: 'Unknown')) 4.1 メッセージ ご 存 知 の 通 り #{} メッセージ 式 は 次 のように 書 いて: <p th:utext="#{home.welcome}">welcome to our grocery store!</p> これとリンクすることができます: home.welcome= Bienvenido a nuestra tienda de comestibles! でも まだ 考 えていないことが 一 つあります: メッセージテキストが 完 全 に 静 的 ではない 場 合 はどうしましょうか? 例 えば ア プリケーションは 誰 がサイトに 訪 れているかをいつでも 知 っているとして その 人 の 名 前 を 呼 んで 挨 拶 文 を 出 したい 場 合 には どのようにすればいいのでしょうか? <p> Bienvenido a nuestra tienda de comestibles, John Apricot!</p> つまり メッセージにパラメータを 持 たせる 必 要 があるということです こんなふうに: home.welcome= Bienvenido a nuestra tienda de comestibles, {0}! パラメータは java.text.messageformat の 標 準 構 文 に 従 って 指 定 します つまり そのクラスのAPIドキュメントにあるよう に 数 値 や 日 付 にフォーマットを 指 定 することもできるということです HTTPセッションに 持 っている user という 属 性 をパラメータとして 指 定 するには 次 のように 記 述 します: <p th:utext="#{home.welcome(${session.user.name})}"> Welcome to our grocery store, Sebastian Pepper! </p> 必 要 に 応 じて 複 数 のパラメータをカンマ 区 切 りで 指 定 することも 可 能 です 実 際 のところ メッセージキー 自 体 も 変 数 から 取 得 することができます: <p th:utext="#{${welcomemsgkey}(${session.user.name})}"> Welcome to our grocery store, Sebastian Pepper! </p> 4.2 変 数 既 に 述 べたように ${} 式 は 実 際 にはコンテキスト 内 の 変 数 マップ 上 で 実 行 されるOGNL(Object-Graph Navigation Language) 式 です OGNL 構 文 や 機 能 についての 詳 細 はOGNL Language Guideを 参 照 してください: OGNL 構 文 から 次 のようなことが 分 かります 以 下 の 内 容 は: Page 17 of 84

18 <p>today is: <span th:text="${today}">13 february 2011</span>.</p> 実 際 には 次 の 内 容 と 同 等 です: ctx.getvariables().get("today"); ただし OGNLではもっとパワフルな 表 現 が 可 能 です こんな 風 に: <p th:utext="#{home.welcome(${session.user.name})}"> Welcome to our grocery store, Sebastian Pepper! </p> これは 実 際 には 次 の 処 理 を 実 行 することでユーザー 名 を 取 得 します: ((User) ctx.getvariables().get("session").get("user")).getname(); ですが GetterメソッドのナビゲーションはOGNLの 機 能 の1つにすぎません もっと 見 てみましょう: * ポイント(.)を 使 用 したプロパティへのアクセス プロパティのGetterを 呼 び 出 すのと 同 じです ${person.father.name} * プロパティへのアクセスは 角 括 弧 ([])にプロパティ 名 を 指 定 することでも 可 能 です * プロパティ 名 の 指 定 は 変 数 でも シングルクォートで 囲 まれた 文 字 列 でも 可 能 です ${person['father']['name']} * オブジェクトがマップの 場 合 ドットも 括 弧 も 同 様 に get() メソッドを 呼 び 出 します ${countriesbycode.es} ${personsbyname['stephen Zucchini'].age} * 配 列 やコレクションに 対 するインデックスを 使 用 したアクセスも 同 様 に 角 括 弧 を 使 用 します * インデックスをクォートなしで 書 きます ${personsarray[0].name} * メソッド 呼 び 出 しが 可 能 です 引 数 ありでも 可 能 です ${person.createcompletename()} ${person.createcompletenamewithseparator('-')} 式 の 基 本 オブジェクト コンテキスト 変 数 に 対 してOGNL 式 で 評 価 をする 際 に より 柔 軟 に 記 述 できるようにいくつかのオブジェクトを 用 意 していま す これらのオブジェクトの 参 照 は(OGNL 標 準 に 従 って) # シンボルで 始 まります: #ctx : コンテキストオブジェクト #vars: コンテキスト 変 数 #locale : コンテキストロケール #httpservletrequest : (ウェブコンテキストのみ) HttpServletRequest オブジェクト #httpsession : (ウェブコンテキストのみ) HttpSession オブジェクト Page 18 of 84

19 次 のようなことができます: Established locale country: <span th:text="${#locale.country}">us</span>. 詳 細 は Appendix A を 参 照 して 下 さい 式 のユーティリティオブジェクト 基 本 オブジェクト 以 外 にも 式 の 中 の 共 通 のタスクを 手 助 けするためのユーティリティオブジェクトがあります #dates : java.util.date オブジェクト 用 のユーティリティメソッド: フォーマット コンポーネントの 抽 出 など #calendars : #dates に 似 ていますが java.util.calendar オブジェクト 用 です #numbers : 数 値 オブジェクト 用 のユーティリティメソッド #strings : String オブジェクト 用 のユーティリティメソッド: contains, startswith, prepending/appending, など #objects : オブジェクト 一 般 のユーティリティメソッド #bools : 真 偽 値 評 価 用 のユーティリティメソッド #arrays : 配 列 用 のユーティリティメソッド #lists : リスト 用 のユーティリティメソッド #sets : セット 用 のユーティリティメソッド #maps : マップ 用 のユーティリティメソッド #aggregates : 配 列 やコレクション 上 での 集 約 処 理 用 ユーティリティメソッド #messages : #{ } と 同 様 に 変 数 式 内 での 外 部 化 メッセージを 取 り 扱 うためのユーティリティメソッド #ids : ( 例 えば イテレーション 結 果 などの) 繰 り 返 し 処 理 内 でid 属 性 を 取 り 扱 うためのユーティリティメソッド それぞれのユーティリティオブジェクトの 詳 細 については Appendix B を 参 照 してください 私 たちのホームページ 内 の 日 付 を 再 フォーマット ユーティリティオブジェクトについて 学 んだので それを 使 って 私 たちのホームページ 内 の 日 付 表 示 を 変 えてみましょう 次 のように HomeController で 処 理 する 代 わりに: SimpleDateFormat dateformat = new SimpleDateFormat("dd MMMM yyyy"); Calendar cal = Calendar.getInstance(); WebContext ctx = new WebContext(request, servletcontext, request.getlocale()); ctx.setvariable("today", dateformat.format(cal.gettime())); templateengine.process("home", ctx, response.getwriter()); 次 のように 書 いて: WebContext ctx = new WebContext(request, servletcontext, request.getlocale()); ctx.setvariable("today", Calendar.getInstance()); templateengine.process("home", ctx, response.getwriter()); ビュー 側 でフォーマットすることができます: <p> Today is: <span th:text="${#calendars.format(today,'dd MMMM yyyy')}">13 May 2011</span> </p> Page 19 of 84

20 4.3 選 択 したものに 対 する 式 (アスタリスク 構 文 ) 変 数 式 は ${} だけでなく *{} でも 書 くことができます 重 要 な 違 いは アスタリスク 構 文 はコンテキスト 変 数 マップに 対 してではなく 選 択 されたオブジェクトに 対 して 評 価 をする 式 であるということです 選 択 されたオブジェクトがない 場 合 は ダラー 構 文 もアスタリスク 構 文 も 全 く 同 じになります オブジェクトの 選 択 とはどういうことでしょうか? th:object のことです では ユーザープロフィールページ ( userprofile.html ) で 使 ってみましょう: <div th:object="${session.user}"> <p>name: <span th:text="*{firstname}">sebastian</span>.</p> <p>surname: <span th:text="*{lastname}">pepper</span>.</p> <p>nationality: <span th:text="*{nationality}">saturn</span>.</p> </div> これは 次 と 全 く 同 じです: <div> <p>name: <span th:text="${session.user.firstname}">sebastian</span>.</p> <p>surname: <span th:text="${session.user.lastname}">pepper</span>.</p> <p>nationality: <span th:text="${session.user.nationality}">saturn</span>.</p> </div> もちろん ダラー 構 文 とアスタリスク 構 文 は 共 存 可 能 です: <div th:object="${session.user}"> <p>name: <span th:text="*{firstname}">sebastian</span>.</p> <p>surname: <span th:text="${session.user.lastname}">pepper</span>.</p> <p>nationality: <span th:text="*{nationality}">saturn</span>.</p> </div> ダラー 構 文 内 で #object 式 変 数 を 使 用 して 選 択 されているオブジェクトを 参 照 することもできます: <div th:object="${session.user}"> <p>name: <span th:text="${#object.firstname}">sebastian</span>.</p> <p>surname: <span th:text="${session.user.lastname}">pepper</span>.</p> <p>nationality: <span th:text="*{nationality}">saturn</span>.</p> </div> 繰 り 返 しになりますが オブジェクトが 選 択 されていない 場 合 はダラー 構 文 とアスタリスク 構 文 は 全 く 同 じ 意 味 になります <div> <p>name: <span th:text="*{session.user.name}">sebastian</span>.</p> <p>surname: <span th:text="*{session.user.surname}">pepper</span>.</p> <p>nationality: <span th:text="*{session.user.nationality}">saturn</span>.</p> </div> 4.4 リンクURL その 重 要 性 から URLはウェブアプリケーションテンプレートにおけるファーストクラスオブジェクトであり Thymeleafス タンダードダイアレクト にも 特 別 な 構 文 が 用 意 構 文 URLにはいくつかのタイプがあります: Page 20 of 84

21 絶 対 URL: 相 対 URL: ページ 相 対 URL: user/login.html コンテキスト 相 対 URL: /itemdetails?id=3 (サーバー 内 のコンテキスト 名 は 自 動 的 に 付 与 されます) サーバー 相 対 URL: ~/billing/processinvoice ( 同 じサーバー 内 の 異 なるコンテキスト(= application)のurlを 呼 び 出 すこ とができます ) プロトコル 相 対 URL: //code.jquery.com/jquery min.js Thymeleafでは 絶 対 URLはどんな 場 合 でも 使 用 できますが 相 対 URLを 使 用 する 場 合 は IWebContext を 実 装 したコンテキスト オブジェクトが 必 要 です そのコンテキストオブジェクトを 使 用 して 相 対 リンクを 生 成 するための 情 報 をHTTPリクエスト 内 から 取 得 します ではこの 新 しい 構 文 を 使 ってみましょう th:href 属 性 で 使 用 します: <!-- Will produce 'http://localhost:8080/gtvg/order/details?orderid=3' (plus rewriting) --> <a href="details.html" <!-- Will produce '/gtvg/order/details?orderid=3' (plus rewriting) --> <a href="details.html" <!-- Will produce '/gtvg/order/3/details' (plus rewriting) --> <a href="details.html" いくつか 注 意 点 : th:href は 属 性 変 更 用 の 属 性 です: リンクURLを 生 成 し <a> タグのhref 属 性 にセットします URLパラメータを 指 定 することができます( orderid=${o.id} の 部 分 です) 自 動 的 にURLエンコーディングされます 複 数 のパラメータを 指 定 する 場 合 はカンマ 区 切 りで 指 定 URLパス 内 でも 変 数 式 は 使 用 可 能 / で 始 まる 相 対 URL( /order/details )に 対 しては 自 動 的 にアプリケーションコンテキスト 名 を 前 に 付 けます クッキーが 使 用 できない 場 合 またはまだ 分 からない 場 合 は ";jsessionid=" を 相 対 URLの 最 後 につけてセッションを キープできるようにすることがあります これは URL Rewriting と 呼 ばれていますが Thymeleafでは 全 てのURLに 対 して サーブレットAPIの response.encodeurl() のメカニズムを 使 用 して 独 自 リライトフィルタを 追 加 することができます th:href タグを 使 用 する 場 合 ( 任 意 ですが) 静 的 な href 属 性 をテンプレートに 同 時 に 指 定 することができます そうする ことでプロトタイプ 用 途 などで 直 接 テンプレートをブラウザで 開 いた 場 合 でもリンクを 有 効 にすることができます メッセージ 構 文 ( #{} )のときと 同 様 に URL 構 文 でも 他 の 式 の 評 価 結 果 が 使 用 可 能 です <a <a 私 たちのホームページ 用 のメニュー リンクURLの 作 成 方 法 がわかったので ホームにサイト 内 の 他 のページへの 小 さなメニューを 加 えてみましょうか <p>please select an option</p> <ol> <li><a href="product/list.html" List</a></li> <li><a href="order/list.html" List</a></li> <li><a href="subscribe.html" to our Newsletter</a></li> <li><a href="userprofile.html" User Profile</a></li> </ol> Page 21 of 84

22 サーバールート 相 対 URL 追 加 のシンタックスを 使 用 して (コンテキストルート 相 対 URLの 代 わりに)サーバールート 相 対 URLを 作 成 することができま のように 指 定 することで 同 じサーバーの 異 なるコンテキストへのリンクを 作 成 することがで きます 4.5 リテラル テキストリテラル テキストリテラルはシングルクォートで 囲 まれた 文 字 列 です どんな 文 字 でも 大 丈 夫 ですが シングルクォート 自 体 は \' の ようにエスケープしてください <p> Now you are looking at a <span th:text="'working web application'">template file</span>. </p> 数 値 リテラル 数 値 リテラルは 数 字 そのままです <p>the year is <span th:text="2013">1492</span>.</p> <p>in two years, it will be <span th:text=" ">1494</span>.</p> 真 偽 値 リテラル 真 偽 値 リテラルは true と false です: <div th:if="${user.isadmin()} == false"> ここで 注 意 して 欲 しいのは == false が 括 弧 の 外 側 にあるということです この 場 合 はThymeleaf 自 身 が 処 理 します もし 括 弧 の 中 にある 場 合 は OGNL/SpringELのエンジンが 処 理 を 担 当 します <div th:if="${user.isadmin() == false}"> nullリテラル null リテラルも 使 用 可 能 です: <div th:if="${variable.something} == null"> リテラルトークン 数 値 真 偽 値 nullリテラルは 実 は リテラルトークン の 特 定 のケースなのです Page 22 of 84

23 このリテラルトークンはスタンダード 式 を 少 しだけシンプルにしてくれます テキストリテラル( '' )と 全 く 同 様 の 動 きを しますが 次 の 文 字 しか 使 用 できません: 文 字 ( A-Z and a-z ) 数 字 ( 0-9 ) 括 弧 ( [ と ] ), ドット (. ), ハイフン ( - ) アンダース コア ( _ ) ですので 空 白 文 字 やカンマ 等 は 使 用 できません この 利 点 は 何 でしょうか?それはトークンはクォートで 囲 む 必 要 がないという 点 です ですので 次 のように 書 く 代 わりに: <div th:class="'content'"></div> こう 書 くことができます: <div th:class="content"></div> 4.6 テキストの 追 加 テキストは + 演 算 子 で 追 加 できます 文 字 列 リテラルであっても 値 やメッセージ 式 の 評 価 結 果 であっても 大 丈 夫 です: th:text="'the name of the user is ' + ${user.name}" 4.7 リテラル 置 換 リテラル 置 換 を 使 用 すると 複 数 の 変 数 から 文 字 列 を 作 成 するフォーマットが 簡 単 になります '' + '' のようにリテラ ルを 追 加 する 必 要 がありません リテラル 置 換 を 使 用 する 場 合 は 縦 棒 ( )で 囲 みます: <span th:text=" Welcome to our application, ${user.name}! "> これは 以 下 の 内 容 と 同 じです: <span th:text="'welcome to our application, ' + ${user.name} + '!'"> リテラル 置 換 は 他 の 式 と 組 み 合 わせて 使 用 することができます: <span th:text="${onevar} + ' ' + ${twovar}, ${threevar} "> 注 意 点 : リテラル 置 換 ( ) 内 で 使 用 可 能 なのは 変 数 式 ( ${} )だけです 他 のリテラル( '' )や 真 偽 値 / 数 値 トークンや 条 件 式 などは 使 用 できません 4.8 算 術 演 算 子 いくつかの 算 術 演 算 子 が 使 用 可 能 です: +, -, *, /, % th:with="iseven=(${prodstat.count} % 2 == 0)" この 演 算 子 はOGNL 変 数 式 の 中 でも 使 用 可 能 なことに 注 意 して 下 さい(その 場 合 はThymeleafスタンダード 式 エンジンの 代 わり にOGNLによって 計 算 されます) Page 23 of 84

24 th:with="iseven=${prodstat.count % 2 == 0}" いくつかの 演 算 子 には 文 字 列 エイリアスもあります: div ( / ), mod ( % ) 4.9 比 較 演 算 子 と 等 価 演 算 子 式 の 中 の 値 は >, <, >=, <= シンボルで 比 較 できます また == と!= 演 算 子 で 等 価 性 を 確 認 できます ただし XMLの 属 性 値 には < と > を 使 用 すべきではないと 策 定 されていますので 代 わりに < と > を 使 用 すべきです th:if="${prodstat.count} > 1" th:text="'execution mode is ' + ( (${execmode} == 'dev')? 'Development' : 'Production')" 文 字 列 エイリアスもあります: gt ( > ), lt ( < ), ge ( >= ), le ( <= ), not (! ), eq ( == ), neq / ne (!= ) 4.10 条 件 式 条 件 式 は 条 件 (それ 自 体 が 別 の 式 です)を 評 価 した 結 果 によって 2つのうちのどちらかの 式 を 評 価 することを 意 味 します 例 を 見 てみましょう( 今 回 は th:class という 属 性 変 更 子 を 使 用 しますね): <tr th:class="${row.even}? 'even' : 'odd'"> 条 件 式 の3つのパーツ 全 て( condition, then and else )がそれぞれ 式 になっています つまり 変 数 ( ${}, *{} )やメッ セージ( #{} )や )やリテラル( '' )を 使 うことができるということです 条 件 式 は 括 弧 で 囲 むことでネスト 可 能 です: <tr th:class="${row.even}? (${row.first}? 'first' : 'even') : 'odd'"> Else 式 は 省 略 可 能 です その 場 合 条 件 がfalseのときにはnull 値 が 返 されます <tr th:class="${row.even}? 'alt'"> 4.11 デフォルト 式 (エルビス 演 算 子 ) デフォルト 式 は then のない 特 別 な 条 件 式 です Groovyなどの エルビス 演 算 子 と 同 じです 2つの 式 を 指 定 して 最 初 の 式 がnullを 返 した 場 合 にのみ2 番 目 の 式 の 値 が 評 価 されます 実 際 にユーザープロフィールページを 見 てみましょう: Page 24 of 84

25 <div th:object="${session.user}"> <p>age: <span th:text="*{age}?: '(no age specified)'">27</span>.</p> </div> 演 算 子 は?: です 年 齢 ( *{age} )がnullの 場 合 にのみラベル( 今 回 はリテラル 値 )を 表 示 します つまり 以 下 の 内 容 と 同 じで す: <p>age: <span th:text="*{age!= null}? *{age} : '(no age specified)'">27</span>.</p> 括 弧 で 囲 むことでネスト 可 能 です: <p> Name: <span th:text="*{firstname}?: (*{admin}? 'Admin' : #{default.username})">sebastian</span> </p> 4.12 プリプロセッシング ここまで 見 てきた 式 に 加 えて Thymeleafは プリプロセッシング 式 を 提 供 します プリプロセッシングとはどういうことでしょうか?それは 通 常 の 式 よりも 先 に 評 価 されるということです それによって 最 終 的 に 実 行 される 実 際 の 式 の 変 更 をすることができます プリプロセッシング 式 は 普 通 の 式 と 全 く 同 じように 書 くことができますが 二 重 のアンダースコアで 囲 まれています ( ${expression} ) i18nの Messages_fr.properties のエントリに 言 語 特 有 のスタティックメソッドを 呼 び 出 すようなOGNL 式 が 含 まれていると しましょう: Messages_es.properties の 対 応 する 部 分 : ロケールに 応 じた 式 を 評 価 してマークアップを 作 成 する 必 要 があるので まずは(プリプロセッシングで) 式 を 選 択 して その 次 にThymeleafにそれを 実 行 させます: <p th:text="${ #{article.text('textvar')} }">Some text here</p> フランス 語 ロケールの 場 合 のプリプロセッシングは 次 と 同 等 になります: <p text here</p> プリプロセッシング 用 文 字 列 は 属 性 の 中 では \_\_ とエスケープします Page 25 of 84

26 5 属 性 値 を 設 定 する この 章 ではThymeleafでどのようにしてマークアップタグ 内 の 属 性 値 を 設 定 (または 変 更 )するかを 説 明 します タグのボディの 内 容 を 設 定 する 機 能 の 次 に 必 要 な 基 本 機 能 かもしれません 5.1 任 意 の 属 性 に 値 を 設 定 する 私 たちのウェブサイトでニュースレターを 発 行 するとしましょう ユーザーが 購 読 できるようにしたいので /WEB- INF/templates/subscribe.html テンプレートにフォームを 設 置 します: <form action="subscribe.html"> <fieldset> <input type="text" name=" " /> <input type="submit" value="subscribe me!" /> </fieldset> </form> これで 全 然 問 題 ないように 見 えます しかし 実 際 はこのファイルはウェブアプリケーションのテンプレートというよりは 静 的 なXHTMLに 見 えます まず action 属 性 がこのテンプレートファイル 自 身 への 静 的 リンクなので URLを 書 き 換 える 方 法 があ りません 次 に submitボタンのvalue 属 性 は 英 語 で 表 示 されますが 多 言 語 対 応 したいですよね ということで th:attr 属 性 を 使 いましょう これで タグの 中 の 属 性 値 を 変 更 することができます <form action="subscribe.html" <fieldset> <input type="text" name=" " /> <input type="submit" value="subscribe me!" th:attr="value=#{subscribe.submit}"/> </fieldset> </form> コンセプトは 非 常 に 直 感 的 です: th:attr には 単 純 に 属 性 に 値 を 代 入 する 式 を 書 きます 対 応 するコントローラーやメッセー ジファイルを 作 成 することによって 想 定 通 りの 処 理 結 果 が 得 られます: <form action="/gtvg/subscribe"> <fieldset> <input type="text" name=" " /> <input type="submit" value=" Suscríbeme!"/> </fieldset> </form> 新 しい 属 性 の 値 が 使 用 されていることに 加 えて /gtvg/subscribe のURLには 既 に 説 明 したようにアプリケーションコンテキ スト 名 が 自 動 的 に 付 け 加 えられています 同 時 に 複 数 の 属 性 に 値 を 設 定 したい 場 合 はどうしたらよいでしょうか?XMLでは1つのタグの 中 に 同 じ 属 性 を2つ 以 上 書 くこと はできませんので th:attr にカンマ 区 切 りのリストを 指 定 します: <img src="../../images/gtvglogo.png" /> メッセージファイルを 用 意 すれば このような 出 力 になります: Page 26 of 84

27 <img src="/gtgv/images/gtvglogo.png" title="logo de Good Thymes" alt="logo de Good Thymes" /> 5.2 特 定 の 属 性 に 値 を 設 定 する ここまでで 次 のような 書 き 方 はすごく 汚 いなぁと 思 っているかもしれませんね: <input type="submit" value="subscribe me!" th:attr="value=#{subscribe.submit}"/> 属 性 の 中 で 値 を 設 定 するというのはとても 実 用 的 ではありますが 常 にそうしないといけないというのはエレガントではあり ません ですよね なので 実 際 のところ th:attr 属 性 はテンプレート 内 ではほとんど 使 われません 通 常 は th:* 属 性 を 使 用 します この 属 性 を 使 用 すると( th:attr のような 任 意 の 属 性 ではなく) 特 定 のタグ 属 性 に 値 を 設 定 することができます ではスタンダードダイアレクトでボタンの value 属 性 に 値 を 設 定 するにはどのような 属 性 を 使 用 すればいいのでしょうか?こ れはかなり 分 かりやすいと 思 います th:value です では 見 てみましょう: <input type="submit" value="subscribe me!" th:value="#{subscribe.submit}"/> この 方 が 全 然 良 いですよね! 同 様 に form タグの action 属 性 も 見 てみましょう: <form action="subscribe.html" th:href 属 性 を home.html で 使 用 したのを 覚 えていますか?これも 同 じです: <li><a href="product/list.html" List</a></li> このような 属 性 が 非 常 にたくさん 用 意 されていて それぞれが 特 定 のXHTMLやHTML5のタグを 対 象 にしています: + + th:abbr th:accept th:accept-charset th:accesskey th:action th:align th:alt th:archive th:audio th:autocomplete th:axis th:background th:bgcolor th:border th:cellpadding th:cellspacing th:challenge th:charset th:cite th:class th:classid th:codebase th:codetype th:cols th:colspan th:compact th:content th:contenteditable th:contextmenu th:data th:datetime th:dir th:draggable th:dropzone th:enctype th:for th:form th:formaction th:formenctype th:formmethod th:formtarget th:frame th:frameborder th:headers th:height th:high th:href th:hreflang th:hspace th:http-equiv th:icon th:id th:keytype th:kind th:label th:lang th:list th:longdesc th:low th:manifest th:marginheight th:marginwidth th:max th:maxlength th:media th:method th:min th:name th:optimum th:pattern th:placeholder th:poster th:preload th:radiogroup th:rel th:rev th:rows th:rowspan th:rules th:sandbox th:scheme th:scope th:scrolling th:size th:sizes th:span th:spellcheck th:src th:srclang th:standby th:start th:step th:style th:summary th:tabindex th:target th:title th:type th:usemap th:value th:valuetype th:vspace th:width th:wrap th:xmlbase th:xmllang th:xmlspace 5.3 複 数 の 値 を 同 時 に 設 定 する ここでは2つのちょっと 特 別 な 属 性 を 紹 介 します th:alt-title と th:lang-xmllang です 2つの 属 性 に 同 じ 値 を 同 時 に 指 定 することができます 具 体 的 には: Page 27 of 84

28 th:alt-title は alt と title を 設 定 します th:lang-xmllang は lang と xml:lang を 設 定 します 私 たちのGTVGホームページで 次 のように 書 いている 部 分 は: <img src="../../images/gtvglogo.png" /> このように 書 くこともできますし: <img src="../../images/gtvglogo.png" th:title="#{logo}" th:alt="#{logo}" /> このように 書 くこともできます: <img src="../../images/gtvglogo.png" th:alt-title="#{logo}" /> 5.4 前 後 に 追 加 する th:attr と 同 じように 任 意 の 属 性 に 対 して 作 用 するものとして Thymeleafには th:attrappend と th:attrprepend 属 性 が あります 既 存 の 属 性 値 の 前 や 後 ろに 評 価 結 果 を 付 け 加 えるための 属 性 です 例 えばあるボタンに 対 して ユーザーが 何 をしたかによって 異 なるCSSクラスを 追 加 ( 設 定 ではなく 追 加 )したい 場 合 が 考 えられ ます これは 簡 単 です: <input type="button" value="do it!" class="btn" th:attrappend="class=${' ' + cssstyle}" /> cssstyle 変 数 に "warning" という 値 を 設 定 してテンプレートを 処 理 すると 次 の 結 果 が 得 られます: <input type="button" value="do it!" class="btn warning" /> スタンダードダイアレクトには2つの 特 別 な 属 性 追 加 用 の 属 性 があります: th:classappend と th:styleappend です CSSクラ スや style の 一 部 を 既 存 のものを 上 書 きせずに 追 加 します: <tr th:each="prod : ${prods}" class="row" th:classappend="${prodstat.odd}? 'odd'"> ( th:each 属 性 のことは 心 配 しないでください 繰 り 返 し 用 の 属 性 として 後 ほど 説 明 します ) 5.5 固 定 値 ブール 属 性 XHTML/HTML5 属 性 の 中 には 決 まった 値 を 持 つか その 属 性 自 体 が 存 在 しないかのどちらか という 特 別 な 属 性 がありま す 例 えば checked です: <input type="checkbox" name="option1" checked="checked" /> <input type="checkbox" name="option2" /> XHTML 標 準 では checked 属 性 には "checked" という 値 しか 設 定 できません(HTML5では 少 し 緩 いですが) disabled, Page 28 of 84

29 multiple, readonly と selected も 同 様 です これらの 属 性 に 対 して 条 件 の 結 果 によって 値 を 設 定 するための 属 性 を スタンダードダイアレクトでは 提 供 しています 条 件 の 評 価 結 果 がtrueの 場 合 はその 固 定 値 が 設 定 され falseの 場 合 は 属 性 自 体 が 設 定 されません: <input type="checkbox" name="active" th:checked="${user.active}" /> スタンダードダイアレクトには 次 のような 固 定 値 ブール 属 性 があります: th:async th:autofocus th:autoplay th:checked th:controls th:declare th:default th:defer th:disabled th:formnovalidate th:hidden th:ismap th:loop th:multiple th:novalidate th:nowrap th:open th:pubdate th:readonly th:required th:reversed th:scoped th:seamless th:selected 5.6 HTML5フレンドリーな 属 性 や 要 素 名 のサポート よりHTML5フレンドリーな 書 き 方 もできます これは 全 く 異 なる 構 文 になります <table> <tr data-th-each="user : ${users}"> <td data-th-text="${user.login}"></td> <td data-th-text="${user.name}"></td> </table> data-{prefix}-{name} 構 文 は th:* などの 名 前 空 間 を 使 用 せずに 独 自 属 性 を 書 くためのHTML5での 標 準 的 な 方 法 です Thymeleafでは (スタンダードダイアレクトだけでなく) 全 てのダイアレクトでこの 構 文 を 使 用 することができます {prefix}-{name} という 形 式 で 独 自 タグを 指 定 するための 構 文 もあります これは W3C Custom Elements specification (より 大 きな W3C Web Components spec の 一 部 です)に 準 拠 しています 例 えば th:block 要 素 (または th-block )で 使 用 すること ができますが これについては 後 述 します 重 要 : この 構 文 は 名 前 空 間 を 使 用 した th:* に 追 加 された 機 能 であって 置 き 換 えるものではありません 将 来 的 に 名 前 空 間 構 文 を 非 推 奨 にする 意 図 は 全 くありません Page 29 of 84

30 6 繰 り 返 し 処 理 ここまでホームページとしてユーザープロフィールページと ニュースレター 購 読 ページを 作 ってきました ですが 商 品 に ついてはどうでしょう? 訪 問 者 に 私 たちの 商 品 を 知 ってもらうための 商 品 一 覧 ページを 作 るべきではないでしょうか? えぇ 明 らかにYesですね ではそうしましょう 6.1 繰 り 返 し 処 理 の 基 礎 /WEB-INF/templates/product/list.html ページに 商 品 一 覧 を 掲 載 するためにテーブルが 必 要 です 1 行 ( <tr> 要 素 )に1 商 品 ず つ 表 示 したいので テンプレートの 中 に テンプレート 行 ( 各 商 品 がどのように 表 示 されるかを 示 す 行 )を 作 って それを Thymeleafで 商 品 ごとに 繰 り 返 す 必 要 があります スタンダードダイアレクトにはそのための 属 性 があります th:each です th:each を 使 用 する 商 品 一 覧 ページのコントローラーはサービスレイヤから 商 品 一 覧 を 取 得 してテンプレートコンテキストにそれを 追 加 します: public void process( HttpServletRequest request, HttpServletResponse response, ServletContext servletcontext, TemplateEngine templateengine) { ProductService productservice = new ProductService(); List<Product> allproducts = productservice.findall(); WebContext ctx = new WebContext(request, servletcontext, request.getlocale()); ctx.setvariable("prods", allproducts); } templateengine.process("product/list", ctx, response.getwriter()); では 商 品 リストを 繰 り 返 し 処 理 するために th:each を 使 いましょう: Page 30 of 84

31 <!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <title>good Thymes Virtual Grocery</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="all" href="../../../css/gtvg.css" /> </head> <body> <h1>product list</h1> <table> <tr> <th>name</th> <th>price</th> <th>in STOCK</th> <tr th:each="prod : ${prods}"> <td th:text="${prod.name}">onions</td> <td th:text="${prod.price}">2.41</td> <td th:text="${prod.instock}? #{true} : #{false}">yes</td> </table> <p> <a href="../home.html" to home</a> </p> </body> </html> 上 記 の prod : ${prods} 属 性 値 は ${prods} の 評 価 結 果 の 各 要 素 に 対 して その 要 素 をprodという 変 数 に 詰 めて このテ ンプレートのフラグメントを 繰 り 返 し 処 理 する という 意 味 になります 呼 び 名 を 決 めておきましょう ここでは ${prods} のことを 被 繰 り 返 し 式 または 被 繰 り 返 し 変 数 と 呼 びます ここでは prod のことを 繰 り 返 し 変 数 と 呼 びます 繰 り 返 し 変 数 prod は <tr> 要 素 の 内 部 だけで 使 用 できることに 注 意 してください ( <td> のような 内 部 のタグでも 使 用 可 能 です) 3 繰 り 返 し 処 理 が 可 能 な 値 Thymeleafの 繰 り 返 し 処 理 で 使 用 可 能 なのは java.util.list だけではありません 実 際 に th:each ではオブジェクト 一 式 が 繰 り 返 し 可 能 だと 見 なされます java.util.iterable を 実 装 しているオブジェクト java.util.map を 実 装 しているオブジェクト マップを 繰 り 返 し 処 理 する 場 合 の 繰 り 返 し 変 数 は java.util.map.entry の クラスになります 配 列 その 他 のオブジェクトは そのオブジェクト 自 身 のみを 要 素 として 持 つ 1 要 素 だけのリストのように 扱 われます 6.2 繰 り 返 しステータスの 保 持 Page 31 of 84

32 th:each を 使 用 する 際 に 繰 り 返 し 処 理 中 のステータスを 知 るための 便 利 なメカニズムがThymeleafにはあります: ステータ ス 変 数 です ステータス 変 数 は th:each 属 性 の 中 で 定 義 され 次 の 内 容 を 保 持 しています: index プロパティ: 0 始 まりの 現 在 の 繰 り 返 しインデックス count プロパティ: 1 始 まりの 現 在 の 繰 り 返 しインデックス size プロパティ: 被 繰 り 返 し 変 数 の 全 要 素 数 current プロパティ: 繰 り 返 し 中 の 繰 り 返 し 変 数 even/odd 真 偽 値 プロパティ: 現 在 の 繰 り 返 し 処 理 が 偶 数 か 奇 数 か first 真 偽 値 プロパティ: 現 在 の 繰 り 返 し 処 理 が 最 初 かどうか last 真 偽 値 プロパティ: 現 在 の 繰 り 返 し 処 理 が 最 後 かどうか ではどのように 使 用 するのかを 前 回 の 例 で 見 てみましょう: <table> <tr> <th>name</th> <th>price</th> <th>in STOCK</th> <tr th:each="prod,iterstat : ${prods}" th:class="${iterstat.odd}? 'odd'"> <td th:text="${prod.name}">onions</td> <td th:text="${prod.price}">2.41</td> <td th:text="${prod.instock}? #{true} : #{false}">yes</td> </table> ご 覧 のとおり th:each 属 性 の 中 で 繰 り 返 し 変 数 の 後 ろにカンマで 区 切 って 名 前 を 書 いてステータス 変 数 (この 例 では iterstat )を 定 義 します 繰 り 返 し 変 数 と 同 様 ステータス 変 数 も th:each 属 性 を 持 っているタグによって 定 義 されたフラグ メントの 内 部 でのみ 使 用 可 能 です それでは テンプレートの 処 理 結 果 を 見 てみましょう: Page 32 of 84

33 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>good Thymes Virtual Grocery</title> <meta content="text/html; charset=utf-8" http-equiv="content-type"/> <link rel="stylesheet" type="text/css" media="all" href="/gtvg/css/gtvg.css" /> </head> <body> <h1>product list</h1> <table> <tr> <th colspan="1" rowspan="1">name</th> <th colspan="1" rowspan="1">price</th> <th colspan="1" rowspan="1">in STOCK</th> <tr> <td colspan="1" rowspan="1">fresh Sweet Basil</td> <td colspan="1" rowspan="1">4.99</td> <td colspan="1" rowspan="1">yes</td> <tr class="odd"> <td colspan="1" rowspan="1">italian Tomato</td> <td colspan="1" rowspan="1">1.25</td> <td colspan="1" rowspan="1">no</td> <tr> <td colspan="1" rowspan="1">yellow Bell Pepper</td> <td colspan="1" rowspan="1">2.50</td> <td colspan="1" rowspan="1">yes</td> <tr class="odd"> <td colspan="1" rowspan="1">old Cheddar</td> <td colspan="1" rowspan="1">18.75</td> <td colspan="1" rowspan="1">yes</td> </table> <p> <a href="/gtvg/" shape="rect">return to home</a> </p> </body> </html> 繰 り 返 しステータス 変 数 は 完 璧 に 動 いていますね odd CSSクラスが 奇 数 行 のみに 適 用 されています( 行 番 号 は0から 始 まりま す) colspanとrowspan 属 性 が <td> タグに 追 加 されていますが これは <a> のshape 属 性 と 同 様 に 選 択 されている XHTML 1.0 Strict 標 準 のDTDに 従 ってThymeleafが 自 動 的 に 追 加 します XHTML 1.0 Strict 標 準 では これらの 値 が 属 性 のデフォルト 値 として 策 定 されています(テンプレートでは 値 を 設 定 していないことに 注 意 してください) ページの 表 示 には 影 響 はないので このことを 気 にする 必 要 は 全 然 ありません 例 えば HTML5(にはDTDがありませんが)を 使 用 していたら この 属 性 は 決 して 追 加 されません ステータス 変 数 を 明 示 的 に 指 定 しない 場 合 は 繰 り 返 し 変 数 の 後 ろに Stat をつけた 変 数 名 をThymeleafはいつでも 作 成 しま す: Page 33 of 84

34 <table> <tr> <th>name</th> <th>price</th> <th>in STOCK</th> <tr th:each="prod : ${prods}" th:class="${prodstat.odd}? 'odd'"> <td th:text="${prod.name}">onions</td> <td th:text="${prod.price}">2.41</td> <td th:text="${prod.instock}? #{true} : #{false}">yes</td> </table> Page 34 of 84

35 7 条 件 の 評 価 7.1 単 純 な 条 件 : if と unless 特 定 の 条 件 が 満 たされる 場 合 にのみ フラグメントを 表 示 したい 場 合 があるでしょう 例 えば 商 品 テーブルの 各 商 品 に 対 してコメント 数 を 表 示 するカラムを 用 意 する 場 合 を 想 像 してみてください もしコメント があれば その 商 品 のコメント 詳 細 ページへのリンクを 貼 りたいです この 場 合 th:if 属 性 を 使 用 します: <table> <tr> <th>name</th> <th>price</th> <th>in STOCK</th> <th>comments</th> <tr th:each="prod : ${prods}" th:class="${prodstat.odd}? 'odd'"> <td th:text="${prod.name}">onions</td> <td th:text="${prod.price}">2.41</td> <td th:text="${prod.instock}? #{true} : #{false}">yes</td> <td> <span th:text="${#lists.size(prod.comments)}">2</span> comment/s <a href="comments.html" th:if="${not #lists.isempty(prod.comments)}">view</a> </td> </table> 結 構 沢 山 のことをやっているので 重 要 な 行 にフォーカスしましょう: <a href="comments.html" th:if="${not #lists.isempty(prod.comments)}">view</a> 実 際 ほとんど 説 明 することはないですね: 商 品 の id を prodid パラメータに 設 定 してコメントページ( /product/comments ) へのリンクを 作 成 します でもそれは 商 品 にコメントがついている 場 合 だけです では 結 果 のマークアップを 見 てみましょう( 見 やすくするために デフォルト 属 性 の rowspan と colspan は 取 り 除 いていま す): Page 35 of 84

36 <table> <tr> <th>name</th> <th>price</th> <th>in STOCK</th> <th>comments</th> <tr> <td>fresh Sweet Basil</td> <td>4.99</td> <td>yes</td> <td> <span>0</span> comment/s </td> <tr class="odd"> <td>italian Tomato</td> <td>1.25</td> <td>no</td> <td> <span>2</span> comment/s <a href="/gtvg/product/comments?prodid=2">view</a> </td> <tr> <td>yellow Bell Pepper</td> <td>2.50</td> <td>yes</td> <td> <span>0</span> comment/s </td> <tr class="odd"> <td>old Cheddar</td> <td>18.75</td> <td>yes</td> <td> <span>1</span> comment/s <a href="/gtvg/product/comments?prodid=4">view</a> </td> </table> カンペキ!まさに 欲 しかったものです th:if 属 性 は boolean 条 件 のみを 評 価 するわけではないことに 注 意 して 下 さい もう 少 し 幅 広 いのです 次 のようなルールに 従 って 指 定 された 式 を true と 評 価 します: 値 が null ではない 場 合 : booleanの true 0 以 外 の 数 値 0 以 外 の 文 字 false でも off でも no でもない 文 字 列 真 偽 値 でも 数 値 でも 文 字 でも 文 字 列 でもない 場 合 ( 値 が null の 場 合 は th:if は false と 評 価 します). また th:if には 反 対 の 意 味 で 対 になるものがあります th:unless です 先 ほどの 例 で OGNL 式 の not を 使 用 する 代 わ りに これを 使 用 することもできます Page 36 of 84

37 <a href="comments.html" th:unless="${#lists.isempty(prod.comments)}">view</a> 7.2 スイッチ 文 Javaにおける switch 構 造 と 同 じように 使 用 して コンテンツを 条 件 毎 に 表 示 する 方 法 もあります: th:switch / th:case 属 性 のセットです ご 想 像 通 りの 動 きをします: <div th:switch="${user.role}"> <p th:case="'admin'">user is an administrator</p> <p th:case="#{roles.manager}">user is a manager</p> </div> 一 つの th:case 属 性 が true と 評 価 されるとすぐに 同 じスイッチコンテキスト 内 の 他 の 全 ての th:case 属 性 は false と 評 価 されることに 注 意 してください デフォルトオプションは th:case="*" で 指 定 します: <div th:switch="${user.role}"> <p th:case="'admin'">user is an administrator</p> <p th:case="#{roles.manager}">user is a manager</p> <p th:case="*">user is some other thing</p> </div> Page 37 of 84

38 8 テンプレートレイアウト 8.1 テンプレートフラグメントのインクルード フラグメントの 定 義 と 参 照 他 のテンプレートのフラグメントを 別 のテンプレートにインクルードしたいという 場 合 がよくあります よく 使 われるのは フッターやヘッダー メニューなどです そうするためにThymeleafではインクルード 可 能 なフラグメントを 定 義 する 必 要 があります 定 義 には th:fragment 属 性 を 使 用 します 私 たちの 食 料 品 店 の 全 てのページに 標 準 的 なコピーライトフッターを 追 加 したいとしましょう /WEB- INF/templates/footer.html ファイルにこのようなコードを 定 義 します: <!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <body> <div th:fragment="copy"> 2011 The Good Thymes Virtual Grocery </div> </body> </html> このコードは copy と 呼 ばれるフラグメントを 定 義 しており 私 たちのホームページで th:include または th:replace 属 性 のどちらかを 使 用 して 簡 単 にインクルードすることができます: <body> <div th:include="footer :: copy"></div> </body> これらのインクルード 属 性 の 構 文 は 両 方 ともとても 直 感 的 です そのフォーマットには3 種 類 あります: "templatename::domselector" またはそれと 同 等 の templatename::[domselector] templatename という 名 前 のテンプレー ト 内 にある DOMセレクターで 指 定 されたフラグメントをインクルードします domselector はフラグメント 名 でも 大 丈 夫 なので 上 記 の 例 の footer :: copy のように 単 に templatename::fragmentname を 指 定 することもできることに 注 意 してください DOMセレクター 構 文 はXPath 表 現 やCSSセレクターと 似 ています 詳 しくは Appendix C を 参 照 してください "templatename" templatename という 名 前 のテンプレート 全 体 をインクルードします Page 38 of 84

■新聞記事

■新聞記事 情 報 処 理 C (P.1) 情 報 処 理 C (2016 年 度 ) ホームページ 作 成 入 門 テキストエディタ(メモ 帳 TeraPad など)でHTMLファイルを 作 成 する HTML(Hyper Text Markup Language ) ホームページを 記 述 するための 言 語 のこと テキストエディタの 起 動 (TeraPad の 場 合 ) [スタート]-[プログラム]-[テキストエディタ]-[TeraPad]

More information

html_text

html_text HTML の 基 礎 2015.12.15 1. HTML ファイルの 構 成 1.1. HTML とは? Web ブラウザでホームページを 表 示 するためには,HTML(Hyper Text Markup Language)と 呼 ぶ 言 語 で 記 述 す る 必 要 が あ り ま す.HTML 形 式 のファイルは < と > で 囲 んだ 予 約 語 (タグ)を 含 むテキストファイルで,Web

More information

練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1と

練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1と ウェブデザイン 技 能 検 定 3 級 実 技 練 習 問 題 本 練 習 問 題 の 著 作 権 は 当 協 会 に 帰 属 します 協 会 の 提 供 する 一 部 又 は 全 ての 練 習 問 題 を 無 断 で 複 写 転 載 営 利 利 用 することを 禁 止 します 内 容 解 答 その 他 一 切 のお 問 い 合 わせは 受 け 付 けておりません 本 練 習 問 題 と 実 際 の

More information

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 レンタルショッピングカートマニュアル Vol.2 ~ デザイン 設 定 編 ~ ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 ファイル 管 理 ファイルのアップロード/ダウンロード デザイン 設 定 >>

More information

目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に

目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に GC スクリプト 利 用 ガイド 第 1 版 最 終 更 新 日 2016/03/31 目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に 追 加 してみよう...

More information

著 作 権 このドキュメントに 記 載 されている 情 報 は このドキュメントの 発 行 時 点 におけるマクロソフトの 見 解 を 反 映 したものです マクロソフトは 市 場 の 変 化 に 対 応 する 必 要 があるため このドキュメントの 内 容 に 関 する 責 任 を 問 われないも

著 作 権 このドキュメントに 記 載 されている 情 報 は このドキュメントの 発 行 時 点 におけるマクロソフトの 見 解 を 反 映 したものです マクロソフトは 市 場 の 変 化 に 対 応 する 必 要 があるため このドキュメントの 内 容 に 関 する 責 任 を 問 われないも Visual Studio Do-It-Yourself シリーズ 第 12 回 キャッシュ 著 作 権 このドキュメントに 記 載 されている 情 報 は このドキュメントの 発 行 時 点 におけるマクロソフトの 見 解 を 反 映 したものです マクロソフトは 市 場 の 変 化 に 対 応 する 必 要 があるため このドキュメントの 内 容 に 関 する 責 任 を 問 われないものとします

More information

データベースS 演習資料

データベースS 演習資料 2015/6/24 データベースS 演 習 資 料 第 3 回 PHP による Web インターフェース(2) 九 州 工 業 大 学 情 報 工 学 部 システム 創 成 情 報 工 学 科 講 義 担 当 : 尾 下 真 樹 1. フォームを 使 った 入 力 インターフェースの 開 発 前 回 の 演 習 に 引 き 続 き データベースをウェブから 利 用 するためのインターフェースの 開

More information

CSSの基礎

CSSの基礎 Webページの 見 た 目 を 定 義 する 視 覚 のための 言 語 CSS ファイル 視 覚 表 現 関 連 付 ける HTML ファイル 論 理 構 造 CSSの 基 礎 CSSの 記 述 方 法 基 本 的 な 形 セレクタ{ プロパティ1: 値 ; プロパティ2: 値 ; セレクタの 種 類 タイプセレクタ CSSの 記 述 HTML CSSを 適 用 する 箇 所 CSSを 記 述 する

More information

STEP8-1 各 ショップ 画 面 内 の 表 示 設 定 ( 設 定 箇 所 の 一 覧 ) この 画 面 は コンテンツ 設 定 の ショップの 画 面 一 覧 です 各 画 面 に 表 示 される 説 明 文 の 編 集 や 項 目 の 表 示 / 非 表 示 の 切 替 が 可 能 です

STEP8-1 各 ショップ 画 面 内 の 表 示 設 定 ( 設 定 箇 所 の 一 覧 ) この 画 面 は コンテンツ 設 定 の ショップの 画 面 一 覧 です 各 画 面 に 表 示 される 説 明 文 の 編 集 や 項 目 の 表 示 / 非 表 示 の 切 替 が 可 能 です レンタルショッピングカートマニュアル ~ ショップ 開 店 準 備 part2 編 ~ 1 STEP8-1 各 ショップ 画 面 内 の 表 示 設 定 ( 設 定 箇 所 の 一 覧 ) この 画 面 は コンテンツ 設 定 の ショップの 画 面 一 覧 です 各 画 面 に 表 示 される 説 明 文 の 編 集 や 項 目 の 表 示 / 非 表 示 の 切 替 が 可 能 です ネットショップを

More information

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 レンタルショッピングカートマニュアル ~ デザイン 設 定 編 ~ ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 ファイル 管 理 ファイルのアップロード/ダウンロード デザイン 設 定 >> ファイル

More information

DIコンテナ 前 回 ご 説 明 したSpring DIコンテナに 共 通 するこ とは 依 存 を 注 入 することによってシステム 内 に 存 在 するオブジェクト 同 士 の 結 びつきを 緩 くすることで あり そのための 仕 組 み 提 供 を 意 味 する [Spring のDIコンテナ

DIコンテナ 前 回 ご 説 明 したSpring DIコンテナに 共 通 するこ とは 依 存 を 注 入 することによってシステム 内 に 存 在 するオブジェクト 同 士 の 結 びつきを 緩 くすることで あり そのための 仕 組 み 提 供 を 意 味 する [Spring のDIコンテナ SpringとStruts Struts 連 携 トラストサービス 2006/05/27 DIコンテナ 前 回 ご 説 明 したSpring DIコンテナに 共 通 するこ とは 依 存 を 注 入 することによってシステム 内 に 存 在 するオブジェクト 同 士 の 結 びつきを 緩 くすることで あり そのための 仕 組 み 提 供 を 意 味 する [Spring のDIコンテナはBean

More information

第3回HP講習会資料ver1.2(2007.9.20)

第3回HP講習会資料ver1.2(2007.9.20) 1.はじめに 第 3 回 技 術 センター 職 員 向 けHP 講 習 会 では スタイルシートの 基 礎 として CSSを 使 った Webページを 作 成 していきます HTMLだけでは 出 来 ないCSSを 用 いたレイアウトを 分 かり 易 く 体 験 してもらえるように 今 回 はCSSの 中 でもクラスやIDといった 概 念 を 省 いています 2.スタイルシートとは? スタイルシート

More information

Apache Tomcatにおけるクロスサイトリクエストフォージェリ(CSRF)保護メカニズム回避の脆弱性

Apache Tomcatにおけるクロスサイトリクエストフォージェリ(CSRF)保護メカニズム回避の脆弱性 Japan Computer Emergency Response Team Coordination Center 電子署名者 Japan Computer Emergency Response Team Coordination Center DN c=jp, st=tokyo, l=chiyoda-ku, email=office@jpcert.or.jp, o=japan Computer

More information

第9回

第9回 第 9 回 2016 年 7 月 16 日 情 報 教 育 演 習 II 第 9 回 (1) CSS(4) (1) 今 回 の 課 題 (2) リストの 記 号 や 番 号 の 設 定 (2) クラスの 利 用 (2) クラスとは (2) クラスを 使 った 設 定 (3) CSSファイルでの 設 定 (3) HTMLファイルでの 利 用 (3) クラスの 利 用 例 (1) (3) クラスの 利

More information

/ 0/0/ : 実 結 果 HTMLファイルを 表 します 下 図 の 画 が 表 されます " 出 し"の 部 分 をクリックすると"コンテンツですよ "の 字 が 表 されます もう 度 " 出 し"をクリックすると"コンテンツですよ "の 字 が 非 表 になります 折 りたたみパネルの 基

/ 0/0/ : 実 結 果 HTMLファイルを 表 します 下 図 の 画 が 表 されます  出 しの 部 分 をクリックするとコンテンツですよ の 字 が 表 されます もう 度  出 しをクリックするとコンテンツですよ の 字 が 非 表 になります 折 りたたみパネルの 基 / 0/0/ : [CSS] 折 りたたみ 可 能 なパネルの 作 成 - CSSのみを 利 した 折 りたたみ 領 域 / アコー ディオンパネル このページのタグ:[CSS] [アコーディオンパネル] 新 着 記 事 覧 タグ 覧 トップページ ipentec.com CSSのみを 利 した 折 りたたみ 可 能 なパネル( 折 りたたみ 可 能 領 域 )を 実 現 するコードを 紹 介 します

More information

データ構造とアルゴリズム論

データ構造とアルゴリズム論 第 1 章.Web サーバとしての Tomcat の 機 能 学 習 のねらい 1 テキストファイルおよび HTML ファイルをブラウザに 表 示 させ Tomcat の Web サー バとしての 機 能 を 確 認 理 解 する 0.Web アプリケーションの 動 作 の 仕 組 み 講 義 で 説 明 基 礎 課 題 1-1 (Java サーブレットを 用 いた)Web アプリケーションの 動

More information

目次

目次 オブジェクト 指 向 開 発 論 2016 年 5 月 26 日 海 谷 治 彦 1 詳 細 設 計 のレビュー 目 次 アーキテクチャ 決 定 について 2 ICONIXの 全 体 手 順 テクニカル アーキテクチャ 3 動 機 : 予 備 設 計 のレビュー 現 時 点 で,ユースケース,ドメインモデル,ロバスト ネス 図 を 描 きました. これらに 整 合 性 があるかのチェックを 行 います.

More information

ライセンス

ライセンス APPENDIX B この 付 録 では Cisco Unified Service Monitor(Service Monitor)のについて 説 明 します 次 の 事 項 について 説 明 します の 概 要 (P.B-1) プロセス (P.B-3) の 概 要 Service Monitor は ソフトウェアベースの 製 品 登 録 と キー 技 術 を 特 長 としています ライ センスの

More information

S2Wicketの紹介

S2Wicketの紹介 2007 Autumn S2Wicketの の 紹 介 よういちろう 1 自 己 紹 介 田 中 洋 一 郎 株 式 会 社 エーティーエルシステムズ http://www.atl-systems.co.jp/ Blog: 天 使 やカイザーと 呼 ばれて http://www.eisbahn.jp/yoichiro/ S2Wicketコミッタ 2 [ 宣 伝 ] こみゅすけ http://commusuke.eisbahn.jp/

More information

1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-1.テキストメール 編 集 開 封 率 を

1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-1.テキストメール 編 集 開 封 率 を メールテンプレート 編 集 ユーザーマニュアル Ver1.0 2016/5/1 株 式 会 社 シャノン 1 1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-1.テキストメール 編 集 開 封

More information

システム設計書

システム設計書 二 松 學 舍 大 学 二 松 メール(Gmail) 利 用 マニュアル バージョン 2.00 発 効 日 改 訂 日 2016 年 04 月 06 日 二 松 学 舎 大 学 情 報 センター i 目 次 1. はじめに...1 2. 二 松 メール(Gmail)ログイン ログアウト 方 法...1 2.1. 二 松 メール(Gmail)ログイン 方 法... 1 2.2. 二 松 メール(Gmail)ログアウト

More information

コンピュータサイエンス 4. ウェブプログラミング

コンピュータサイエンス 4. ウェブプログラミング 4. Chris Plaintail 2014 1 / 43 1 HTML CSS 2 JavaScript DOM jquery 3 4 PHP SQL PHP SQL 2 / 43 HTML HTML CSS HTML Ajax (Asynchronous JavaScript + XML) PHP SQL 3 / 43 HTML, CSS http, https CSS HTML CSS.html

More information

1. アカウントを 登 録 する まずは Facebook にアクセスし アカウント 登 録 のために 必 要 な 情 報 を 入 力 します name1 には 名 字 name2 には 名 前 を 入 力 します ここで 入 力 したデータは 後 か ら 変 更 することも 可 能 です 全 ての

1. アカウントを 登 録 する まずは Facebook にアクセスし アカウント 登 録 のために 必 要 な 情 報 を 入 力 します name1 には 名 字 name2 には 名 前 を 入 力 します ここで 入 力 したデータは 後 か ら 変 更 することも 可 能 です 全 ての Facebook とは そもそも Facebook(フェイスブック)とは ソーシャル ネットワーキング サー ビス(SNS)と 呼 ばれるインターネット 上 のコミュニティサイトです 日 記 や 考 察 つぶやきのような 個 人 的 な 投 稿 から 企 業 の 公 式 ニュースリリースのような 投 稿 まで 世 界 中 で 幅 広 く 利 用 されています また Facebook に 投 稿 された

More information

IM-Mobile Framework

IM-Mobile Framework IM-Mobile Framework Version 7.2.0 β リリース ノート 2011/08/12 第 1 版 1 はじめに 1. IM-Mobile Framework( 以 下 本 フレームワーク と 表 記 )は intra-mart WebPlatform/AppFramework のプラグインとし て 動 作 します 本 フレームワークを 使 用 するためには intra-mart

More information

すべての 文 書 は テンプレートから 作 成 を 開 始 します 空 白 のテンプレートから 開 始 することもできます 完 成 した 文 書 のイメージに 最 も 近 いテンプレートを 見 つけてください Publisher 2013 にはテンプレートが 付 属 しております 1. [ファイル]

すべての 文 書 は テンプレートから 作 成 を 開 始 します 空 白 のテンプレートから 開 始 することもできます 完 成 した 文 書 のイメージに 最 も 近 いテンプレートを 見 つけてください Publisher 2013 にはテンプレートが 付 属 しております 1. [ファイル] Publisher 2013 の 基 本 的 使 い 方 TO_takatsuki Publisher の 向 いている 文 書 枚 数 の 少 ない 文 書 ポスター チラシ グリーティングカード ニュースレター など 記 載 枠 画 像 などの 挿 入 枠 の 大 きさを 固 定 し 文 書 や 画 像 を 配 置 したい 文 書 文 書 を 作 成 する まず テンプレートを 探 し そこから

More information

HK05

HK05 コンピュータプログラミング B 補 助 教 材 (5) 2015.04 諸 注 意 課 題 レポートの 書 き 方 一 般 にこの 授 業 のレポートでは, まず 課 題 を 自 分 の 言 葉 で 再 現 し, ソースプログラム, 実 行 結 果, 考 察 ( 場 合 により 感 想 もあってよいです. なお 考 察 は 感 想 とは 意 味 が 全 く 違 います)という 構 成 で 書 くのがよいです.

More information

1

1 目 次 はじめに... 2 音 声 ブラウザの 読 み 上 げ 手 順... 2 音 声 ブラウザへの 具 体 的 な 対 応 方 法... 3 1. 基 本 言 語 3 2.スペースの 挿 入 と 改 行 (タグ)の 挿 入 3 3. 取 り 消 し 線 4 4. 記 号 などの 表 記 4 5. 英 単 語 5 6. 数 字 5 7.イメージマップ 6 8. 表 組 み 6 9.PDF

More information

Microsoft PowerPoint -

Microsoft PowerPoint - 1: 入 門 Ktai Library ECWorks 滝 下 真 玄 (MASA-P) http://www.ecworks.jp/ info@ecworks.jp MENU 何 故 Ktai Library? Ktai Library の 基 本 的 な 使 い 方 携 帯 サイトを 作 る 場 合 の 注 意 点 まとめ 1 何 故 Ktai Library? 2 携 帯 サイトを 作 る 場

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ホームページの 基 礎 IPアドレス インターネットへの 接 続 に 必 要 なネットワーク 上 のアドレス こ のアドレスは0から255までの4 組 に 数 字 で 表 されます ( 例 192.168.1.1) URL IPアドレスはホームページの 場 所 を 示 す 住 所 です たとえば 220.133.0.1に 接 続 しようとして ブラウザーのURLに 220.133.0.1と 入 れればいいのですが

More information

1 1 3 1.1 Web............................ 3 1.2 Servlet/JSP.................................. 3 2 JSP 7 2.1................................... 7 2.2..

1 1 3 1.1 Web............................ 3 1.2 Servlet/JSP.................................. 3 2 JSP 7 2.1................................... 7 2.2.. Servlet/JSP 1 1 3 1.1 Web............................ 3 1.2 Servlet/JSP.................................. 3 2 JSP 7 2.1................................... 7 2.2........................................

More information

目 次 1.ホームページの 設 定 1.1 ホームとは 1.2 貴 方 の URL とは 1.3 公 開 レベルとは 2. 生 徒 の 登 録 2.1 生 徒 とは 2.2 生 徒 のクラス 分 類 とは 2.3 生 徒 の 個 別 登 録 2.4 生 徒 の 一 括 登 録 2.5 生 徒 の 一

目 次 1.ホームページの 設 定 1.1 ホームとは 1.2 貴 方 の URL とは 1.3 公 開 レベルとは 2. 生 徒 の 登 録 2.1 生 徒 とは 2.2 生 徒 のクラス 分 類 とは 2.3 生 徒 の 個 別 登 録 2.4 生 徒 の 一 括 登 録 2.5 生 徒 の 一 ビデオグ:E ラーニングの 操 作 手 順 書 2013 年 12 月 19 日 0.4 版 ( 中 途 提 供 ) 改 版 履 歴 2013 年 8 月 8 日 0.2 版 ( 中 途 提 供 ) 2013 年 12 月 18 日 0.3 版 ( 中 途 提 供 ) 目 次 1.ホームページの 設 定 1.1 ホームとは 1.2 貴 方 の URL とは 1.3 公 開 レベルとは 2. 生 徒

More information

HTML文章作成

HTML文章作成 HTML 文 章 作 成 Web ページは HTML(Hyper Text Markup Language) という 言 語 を 使 っ て 欠 かれた HTML ファイルでできています ここでは 簡 単 な HTML 文 章 を 実 際 につくっていきます 参 考 文 献 :エクスナレッジ HTML とスタイルシートによる Web サイト 作 成 術 1. 簡 単 なホームページをつくりましょう

More information

(Microsoft PowerPoint - \225\275\220\25423\224N\223xHTML5\225\224\211\357.ppt)

(Microsoft PowerPoint - \225\275\220\25423\224N\223xHTML5\225\224\211\357.ppt) 平 成 23 年 度 技 術 研 究 会 HTML5 部 会 HTML5を 使 ったWebアプリの 開 発 ~HTML4.0とHTML5の 比 較 ~ メンバー 富 士 通 九 州 システムズ 三 角 瞳 オーガス 大 分 シーイーシー オーイーシー オーイーシー 老 川 翔 太 行 部 佑 希 西 角 幸 恵 下 郡 剛 九 州 東 芝 エンジニアリング 渡 邉 泰 三 大 分 交 通 松 迫 翔

More information

<4D6963726F736F667420506F776572506F696E74202D2053454F82CC92B48AEE9162819591CE8DF4837D836A83858341838B2E707074>

<4D6963726F736F667420506F776572506F696E74202D2053454F82CC92B48AEE9162819591CE8DF4837D836A83858341838B2E707074> 2 3 4 5 6 http://jprs.co.jp/ 7 8 9 10 11 https://adwords.google.co.jp/select/keywordtoolexternal 12 13 14 http://www.pythagoras.bz/ Pythagoras 15 16 17 18 19 20

More information

目 次 準 備 事 項 ( 前 日 までに 行 っていただきたいこと) 4 まずは 地 図 を 表 示 してみよう 6 Google Mapsの 機 能 の 再 確 認 8 自 分 のサイトに 地 図 を 埋 め 込 む 10 中 心 地 点 にマーカーを 表 示 する 12 近 隣 の 施 設 に

目 次 準 備 事 項 ( 前 日 までに 行 っていただきたいこと) 4 まずは 地 図 を 表 示 してみよう 6 Google Mapsの 機 能 の 再 確 認 8 自 分 のサイトに 地 図 を 埋 め 込 む 10 中 心 地 点 にマーカーを 表 示 する 12 近 隣 の 施 設 に 第 3クールSeason3 WebサービスAPI 勉 強 会 Google Maps API v3の 利 用 目 次 準 備 事 項 ( 前 日 までに 行 っていただきたいこと) 4 まずは 地 図 を 表 示 してみよう 6 Google Mapsの 機 能 の 再 確 認 8 自 分 のサイトに 地 図 を 埋 め 込 む 10 中 心 地 点 にマーカーを 表 示 する 12 近 隣 の 施

More information

2 2-1 HTMLの 構 造 等 公 開 URLが 静 的 なHTMLであること 判 読 不 可 能 な 文 字 を 含 むものや 文 字 数 が 多 すぎるURL(いわゆる 動 的 なHTML)は 原 則 として 不 可 とする 2-2 任 意 なURLが 使 用 でき コンテンツ 作 成 時

2 2-1 HTMLの 構 造 等 公 開 URLが 静 的 なHTMLであること 判 読 不 可 能 な 文 字 を 含 むものや 文 字 数 が 多 すぎるURL(いわゆる 動 的 なHTML)は 原 則 として 不 可 とする 2-2 任 意 なURLが 使 用 でき コンテンツ 作 成 時 1 1-1 サイト 全 般 デザイン 等 サイト 全 体 が 標 準 化 統 一 化 されたページデザインとすること ただし サイトで 異 なるデザインで 作 成 表 示 することができること 1-2 ヘッダー フッターは 原 則 すべてのページで 統 一 したデザインとすること 1-3 ロゴ イラスト バナーなどサイトに 応 じたデザインで 作 成 すること 1-4 スマートフォンやタブレット 端

More information

サーバサイドスクリプトPHPを実感しよう

サーバサイドスクリプトPHPを実感しよう 第 3 講 サーバサイドスクリプト PHP を 実 感 しよう! クライアントサイドでは HTML に 埋 め 込 んだ(あるいは 別 ファイルから HTML に 読 み 込 まれた)JavaScript によって さまざまな 処 理 や 動 的 ページの 生 成 を 行 えることは すで に 第 3 講 までで 学 習 しました しかし HTML と JavaScript の 組 合 せではどうしても

More information

Microsoft PowerPoint - css [互換モード]

Microsoft PowerPoint - css [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく 使

More information

教員用

教員用 高 知 大 学 教 員 用 moodle2 1.1.moodle を 利 用 するためには 1.2.コースの 保 全 1.3.moodle へのログイン 1.4.ログアウト 2.1.コースの 説 明 2.2.ブロック 一 覧 2.3.HTML テキストエディタを 利 用 する 2.4.アイコン 編 集 アイコンの 説 明 3.1.ユーザを 登 録 する 3.2.ユーザを 削 除 する 4.1.ファイルのアップロード

More information

サポート技術方法

サポート技術方法 キャッシュと 同 期 の 推 奨 設 定 イントロダクション このドキュメントでは Curl RTE のパフォーマンスを 最 大 限 に 活 用 できるように Curl RTE の 設 定 と Web ブラウザのキャッシュの 特 徴 について 説 明 します この 設 定 を 採 用 することで 正 確 なプログラムの 動 作 を 維 持 しながら Curl アプリケー ションにおいて 最 も 効

More information

ホームページとは何?

ホームページとは何? ホームページ 作 成 にあたっての 基 本 事 項 ホームページとは? インターネットを 介 して 誰 もが 閲 覧 できるように 作 られたものを ホームページ と 言 います ホームページには 文 字 だけでなく 画 像 や 動 画 音 楽 なども 埋 め 込 むことができま す またホームページに 掲 載 されている 情 報 の 中 でひとまとめに 括 られたものを コンテ ンツ と 呼 んでいます

More information

... 2 1 Servlet... 3 1.1... 3 1.2... 4 2 JSP... 6 2.1... 6 JSP... 6... 8 2.2... 9 - Servlet/JSP における 日 本 語 の 処 理 - 1

... 2 1 Servlet... 3 1.1... 3 1.2... 4 2 JSP... 6 2.1... 6 JSP... 6... 8 2.2... 9 - Servlet/JSP における 日 本 語 の 処 理 - 1 Servlet/JSP Creation Date: Oct 18, 2000 Last Update: Mar 29, 2001 Version: 1.1 ... 2 1 Servlet... 3 1.1... 3 1.2... 4 2 JSP... 6 2.1... 6 JSP... 6... 8 2.2... 9 - Servlet/JSP における 日 本 語 の 処 理 - 1 Servlet

More information

Microsoft PowerPoint - css.ppt [互換モード]

Microsoft PowerPoint - css.ppt [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 W3Cで 推 奨 される

More information

サイボウズ Office 8 ファイル管理マニュアル

サイボウズ Office 8 ファイル管理マニュアル ファイル 管 理 マニュアル Copyright (C) 20 10 Cybozu, Inc. 目 次 管 理 者 マニュアル はじめに 1 ファイル 管 理 のシステム 管 理 について 2 システム 管 理 の 設 定 ファイル 管 理 の 一 般 設 定 を 変 更 する 3 フォルダにアクセス 権 を 設 定 する 5 ファイルサイズの 制 限 を 設 定 する 6 ファイルを 一 括 削

More information

: 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1

: 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1 : 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1 2 : : 1 1 : 3 : 2 (.ppsx) (A0nxxyyy.ppsx) presen (1 ) ID:A0nxxyyy Name: Title: 3 HTML (HyperText Markup Language) 4 ( ) http://pweb.cc.sophia.ac.jp

More information

例 ) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは タブ 先 のページごとにヘッダー 部 に 使 用 する 写 真 を 変 化 させている 例 です またこのサイト では トップページには ModifiableWeb i

例 ) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは タブ 先 のページごとにヘッダー 部 に 使 用 する 写 真 を 変 化 させている 例 です またこのサイト では トップページには ModifiableWeb i ModifiableWeb レイアウトデザインガイド 1. 基 本 構 成 ModifiableWeb を 使 用 したWebサイトの 基 本 構 成 は 以 下 のようになっています ModifiableWeb iframe の 外 側 の Page Header Page Footer 及 び 全 体 の 背 景 は 普 通 のWebサ イト 同 様 自 由 にデザインすることができます ModifiableWeb

More information

Microsoft PowerPoint - webapp.ppt [互換モード]

Microsoft PowerPoint - webapp.ppt [互換モード] 一 般 的 なWebアクセス Webサーバ バ レスポンス HTML ファイル HTTPリクエスト 画 像 ファイル Webブラウザ あらかじめ 用 意 されたリソースしか 提 供 できない Webアプリケーション Webサーバ バ レスポンス HTTPリクエスト HTML Webブラウザ ページを 動 的 に 生 成 プログラム 実 行 データベース 操 作 Webアプリケーション 掲 示 板 検

More information

サイボウズ ガルーン 3 ドットセールス連携ガイド

サイボウズ ガルーン 3 ドットセールス連携ガイド サイボウズ ガルーン 3 ドットセールス 連 携 ガイド 第 1 版 サイボウズ 株 式 会 社 はじめに はじめに 本 書 では バージョン 3.0.0 以 降 のサイボウズ ガルーンを バージョン 1.1.2 以 降 のサイボウズ ドット セールスと 連 携 させるための 設 定 や 設 定 後 の 操 作 方 法 について 説 明 しています 対 象 読 者 本 書 は サイボウズ ガルーン

More information

(Microsoft Word - Easy\203y\201[\203W\221\200\215\354\203K\203C\203h.doc)

(Microsoft Word - Easy\203y\201[\203W\221\200\215\354\203K\203C\203h.doc) Easy ページ 操 作 ガイド http://359ch.com ところチャンネル( 資 ) Easy ページサービス 操 作 ガイド 2009.1.8 版 1. はじめに Easy ページサービスとは パソコンからブラウザを 利 用 して 簡 単 にホームページを 公 開 更 新 できるサービス です Docomo や AU SoftBank 等 の 携 帯 電 話 を 利 用 して 同 様 にホームページを

More information

クイック スタート ガイド PowerPoint 2013 を 開 くと 最 初 にいくつかのオプションが 表 示 され テンプレート テーマ 最 近 使 ったファイル 白 紙 のプレゼンテーションのどれを 使 って 作 業 を 始 めるかを 選 択 できます オンラインのテンプレートやテーマを 探

クイック スタート ガイド PowerPoint 2013 を 開 くと 最 初 にいくつかのオプションが 表 示 され テンプレート テーマ 最 近 使 ったファイル 白 紙 のプレゼンテーションのどれを 使 って 作 業 を 始 めるかを 選 択 できます オンラインのテンプレートやテーマを 探 クイック スタート ガイド Microsoft PowerPoint 2013 は レイアウトがこれまでのバージョンから 変 わりました このガイドは 少 しでも 早 く 慣 れることができるようにそれらの 違 いをまとめたものです 必 要 な 機 能 を 見 つける リボンのタブをクリックすると そのタブのボタンと コマンドが 表 示 されます コンテキスト タブを 使 う リボンのタブには 必

More information

クリック クリック リンクを 張 るためのタグ タグ ~ リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク フォルダ 内 のファイルに

クリック クリック リンクを 張 るためのタグ タグ <a href= リンク 先 のURL ファイル 名 > ~ </a> リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク <a href= hoge.html > フォルダ 内 のファイルに Webプログラミング プログラミング1 HTML+CSS (5) (2 章 ) 2013/5/22( 水 ) 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください 演 習 名 使 用 するフォルダ 演 習 1 Z: Webプログラミング1 20130522

More information

3.コンテンツの 作 成 機 能 3-1 IDごとに 編 集 権 限 を 設 け 権 限 に 応 じたメニューが 表 示 されること 3-2 管 理 者 はすべてのページにおいて 編 集 する 権 限 があること 3-3 複 数 のユーザーが 同 時 に 同 一 のページを 更 新 できないこと 基

3.コンテンツの 作 成 機 能 3-1 IDごとに 編 集 権 限 を 設 け 権 限 に 応 じたメニューが 表 示 されること 3-2 管 理 者 はすべてのページにおいて 編 集 する 権 限 があること 3-3 複 数 のユーザーが 同 時 に 同 一 のページを 更 新 できないこと 基 ( 別 紙 ) 志 摩 市 ホームページ 構 築 業 務 CMS 機 能 調 査 表 対 応 欄 : 本 業 務 の 委 託 費 用 内 で 対 応 可 能 : 代 替 案 により 本 業 務 の 委 託 費 用 内 で 対 応 可 能 ( 代 替 案 欄 に 代 替 案 をご 記 入 ください ) : 対 応 不 可 項 目 番 号 要 件 対 応 代 替 案 1-1 1.システム 基 本 要 件

More information

WP-Single-Channel-Options-JP-140210.indd

WP-Single-Channel-Options-JP-140210.indd シングルチャネルモード 概 要 シングルチャネルモードは Swivel 認 証 システムの 最 も 一 般 的 な 導 入 方 法 の 一 つです このモー ドでは ユーザーがチャレンジ ( セキュリティストリングス ) を 受 け 取 るのと 同 じチャネル ( 通 信 経 路 ) を 使 ってレスポンス ( ワンタイムパスワード ) を 送 ります 本 ホワイトペーパーは このアプローチの 柔

More information

Web Publisher プラグイン Web Publisher プラグインにより BPMN プロセス モデル を HTML Web として 発 行 することができます エクス ポートされた Web は クリックしてサブプロセスにド リルダウンできます Web Publisher プラグインについ

Web Publisher プラグイン Web Publisher プラグインにより BPMN プロセス モデル を HTML Web として 発 行 することができます エクス ポートされた Web は クリックしてサブプロセスにド リルダウンできます Web Publisher プラグインについ ActiveModeler Avantage プロセス モデル Web パブリッシング ユーザー ガイド 2008 KAISHA-Tec Co. Ltd. Japan 5-17-8 Inokashira, Mitaka-shi, Tokyo, 181-0001 JAPAN Document Revision: 1.131 Date: 05/26/2008 Time: 10:51:35 AM ActiveModeler

More information

目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.デザイン 変 更 5. 外 国 語 対 応 6. 制 限 解 除 キー 7. 利 用 規 定 8. 更 新 履 歴

目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.デザイン 変 更 5. 外 国 語 対 応 6. 制 限 解 除 キー 7. 利 用 規 定 8. 更 新 履 歴 お 問 い 合 わせフォーム L-TOOL Inquiry (ver 4.2) 取 扱 説 明 書 Little Net http://l-tool.net/ - 2015 年 7 月 22 日 版 - 目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.デザイン 変 更 5. 外 国 語 対 応 6. 制 限 解 除 キー 7. 利 用 規 定 8. 更 新 履 歴 1. 概 要 この

More information

1/2

1/2 札 幌 学 院 大 学 社 会 情 報 学 部 AO 入 試 課 題 用 テキスト (2) 1 札 幌 学 院 大 学 社 会 情 報 学 部 AO 入 試 課 題 用 テキスト HTMLの 基 礎 知 識 (2) 1 画 像 の 表 示 HPに 画 像 を 表 示 させてみる まず HTML 文 書 と 同 じフォルダ 内 にJPEGファイル( 拡 張 子.jpg )を1 個 準 備 する ( 画

More information

版 年 月 日 変 更 内 容 第 一 版 2013 年 4 月 15 日 第 一 版 発 行 第 二 版 2014 年 10 月 22 日 第 二 版 発 行 2

版 年 月 日 変 更 内 容 第 一 版 2013 年 4 月 15 日 第 一 版 発 行 第 二 版 2014 年 10 月 22 日 第 二 版 発 行 2 Kazasu 管 理 画 面 操 作 マニュアル 株 式 会 社 学 書 2014 年 10 月 22 日 1 版 年 月 日 変 更 内 容 第 一 版 2013 年 4 月 15 日 第 一 版 発 行 第 二 版 2014 年 10 月 22 日 第 二 版 発 行 2 目 次 1. 動 作 環 境... 4 2. 塾 用 管 理 画 面 の 起 動 終 了 方 法... 5 3. 管 理 画

More information

Microsoft Word - CMS操作説明会資料.docx

Microsoft Word - CMS操作説明会資料.docx 平 成 25 年 6 月 24 日 株 式 会 社 ネクストワン 1 今 回 の 操 作 説 明 会 では 次 のようなサンプル 記 事 を 作 成 してみたいと 思 います 2 管 理 画 面 にログインする 1. 九 重 町 役 場 ホームページにアクセスします 2.アドレスバーのホームページ URL の 後 ろに admin と 入 力 します http://www.town.kokonoe.oita.jp/admin/index.php

More information

HTML文書の作成

HTML文書の作成 99 C HTML 1 1 2 HTML 1 3 2 4 HTML 2 4.1... 2 4.2... 3 4.3... 5 5 HTML 8 5.1... 8 5.2... 10 5.3... 12 6 HTML 13 7 13 1 HTML HTML [1] 2 HTML HTML Hyper-Text Markup Language World Wide Web (WWW)[2] HTML Hyper-Text

More information

もくじ

もくじ メルマガ 管 理 機 能 マニュアル 2016/7/4 株 式 会 社 ビズクリエイト 目 次 1. メルマガ 配 信 手 順... 3 2. メルマガ 作 成... 4 新 規 メルマガを 作 成 する... 4 3. メルマガ 一 覧... 8 作 成 したメルマガを 一 覧 で 確 認 する... 8 メルマガの 基 本 設 定 を 確 認 変 更 する... 9 メルマガの 基 本 設 定

More information

スライド 1

スライド 1 Hos-CanR 3.0 運 用 マニュアル Hos-CanR 3.0 運 用 マニュアル 登 録 作 業 者 用 Ver. 2 バージョン 改 訂 日 付 改 訂 内 容 Ver. 1 2010/3/15 初 版 Ver. 2 2010/8/9 ファイル 取 り 込 み 時 の 同 一 レコードの 判 定 についての 記 載 を 追 記 Hos-CanR 3.0 運 用 マニュアル 目 次 1.

More information

アフィリエイターの為のHTML

アフィリエイターの為のHTML アフィリエイターが 覚 えておくべき HTML 辞 典 著 作 権 について このレポートは 著 作 権 法 で 保 護 されている 著 作 物 です このレポートの 著 作 権 はやまひろに 属 します 著 作 権 者 の 許 可 なく このレポートの 全 部 又 は 一 部 を いかなる 手 段 においても 複 製 転 載 流 用 転 売 等 することを 禁 じます このレポートに 書 かれた

More information

コンピュータサイエンス 1. ウェブの基本

コンピュータサイエンス 1. ウェブの基本 1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /

More information

方程式を解いてみよう! C++ から PHP + JavaScriptへ

方程式を解いてみよう! C++ から PHP + JavaScriptへ 方 程 式 を 解 いてみよう! C++ から PHP + HTML + JavaScriptへ 静 岡 理 工 科 大 学 総 合 情 報 学 部 コンピュータシステム 学 科 幸 谷 智 紀 (こうや とものり) http://na-inet.jp/ 今 日 のメニュー 1. コンピュータ 環 境 と 本 日 のゴールの 確 認 2. PHPプログラムを 実 行 してみる 3. HTMLで 自

More information

textbook.indd

textbook.indd 02 XHTML+CSS part2 CSS Topics 前 回 習 得 した 基 礎 CSS を 元 に ボックス CLASS ID の 概 念 を 習 得 ボックスレイアウトを 用 いた 2 カラムのサイト 構 築 をします An Introduction to Webdesign + XHTML/CSS Coding 18 01. XHTML+CSS 2 19 20 21 22 23 24

More information

もくじ

もくじ AutoBiz StartUp Manual オートビズ スタートアップマニュアル (メルマガ) 1 目 次 管 理 画 面 の 構 成 と 基 礎 知 識 を 理 解 しよう... 4 管 理 画 面 の 構 成 について... 4 基 礎 知 識 について... 5 シナリオとは?... 5 メルマガ( 一 斉 配 信 )とは?... 5 メルマガとシナリオの 関 係... 6 読 者 の 登

More information

ご 注 意 1. 本 ソフトウェアの 著 作 権 は 株 式 会 社 サトーにあります 2. 本 ソフトウェアおよびマニュアルの 一 部 または 全 部 を 無 断 で 使 用 複 製 することはできません 3. 本 ソフトウェアは コンピュータ 1 台 につき 1セット 購 入 が 原 則 となっ

ご 注 意 1. 本 ソフトウェアの 著 作 権 は 株 式 会 社 サトーにあります 2. 本 ソフトウェアおよびマニュアルの 一 部 または 全 部 を 無 断 で 使 用 複 製 することはできません 3. 本 ソフトウェアは コンピュータ 1 台 につき 1セット 購 入 が 原 則 となっ Multi LABELIST V5 練 習 マニュアル - - 2014.3 第 2 版 2014 年 3 月 18 日 株 式 会 社 サトー ご 注 意 1. 本 ソフトウェアの 著 作 権 は 株 式 会 社 サトーにあります 2. 本 ソフトウェアおよびマニュアルの 一 部 または 全 部 を 無 断 で 使 用 複 製 することはできません 3. 本 ソフトウェアは コンピュータ 1 台

More information

Web 1990,HTTP, HTML, URL XML HTML XHTML XML Web XMLSOAPWSDL ( ) Web2.0 Web XML+WebAPI 2 http://www.xmlconsortium.org/ http://www.amazon.co.jp/ 3

Web 1990,HTTP, HTML, URL XML HTML XHTML XML Web XMLSOAPWSDL ( ) Web2.0 Web XML+WebAPI 2 http://www.xmlconsortium.org/ http://www.amazon.co.jp/ 3 XML Consortium XMLSOAWeb2.0 1 Web 1990,HTTP, HTML, URL XML HTML XHTML XML Web XMLSOAPWSDL ( ) Web2.0 Web XML+WebAPI 2 http://www.xmlconsortium.org/ http://www.amazon.co.jp/ 3 Web

More information

ノートをクラウドで 管 理 する [ 共 有 ] タブについて OneNote を 初 めて 起 動 すると クラウドに 接 続 するように 求 められ そのクラウドに 最 初 のノートブックが 作 成 されます OneNote では Microsoft アカウント (MSN Hotmail Mes

ノートをクラウドで 管 理 する [ 共 有 ] タブについて OneNote を 初 めて 起 動 すると クラウドに 接 続 するように 求 められ そのクラウドに 最 初 のノートブックが 作 成 されます OneNote では Microsoft アカウント (MSN Hotmail Mes クイック スタート ガイド Microsoft OneNote 2013 は レイアウトがこれまでのバージョンから 変 わりました このガイドは 少 しでも 早 く 慣 れることができるようにそれらの 違 いをまとめたものです タッチとマウスを 切 り 替 える タッチ デバイスで OneNote を 使 う 場 合 クイック アクセス ツール バーにこのスイッチを 追 加 できます リボンの 表

More information

IBM SPSS Statistics for Mac OS のインストール手順 (シングル ユーザー)

IBM SPSS Statistics for Mac OS のインストール手順 (シングル ユーザー) IBMSPSSStatisticsforMacOSの インストール 手 順 (シングル ユー ザー) 以 下 に 示 すのは シングル ユーザー ライセンス を 使 用 した IBM SPSS Statistics バージョン 20 のインストール 手 順 です シングルユーザー ライセンス を 使 用 すると 最 大 2 台 のコンピュータに SPSS Statistics をインストールできま

More information

高知大学 学生用

高知大学 学生用 高 知 大 学 学 生 用 moodle2 moodle(ムードル)は Web を 通 じて 利 用 する 授 業 サポートのシステムです 学 生 ユーザは 参 加 している 科 目 (コース)の 授 業 コンテンツを 使 って 受 講 ( 活 動 ) することができます ご 利 用 の 推 奨 ブラウザ Internet Explorer 8 以 上 Firefox 4 以 上 Google Chrome

More information

(1) ,,,,, <> ( ) (/ ) (2) HTML5 (3) HTML (4) html (ja) (5) JavaScript CSS (6)

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis > HTML HTML HyperText Markup Language (Markup Language) (< > ) 1 sample0.html ( ) html sample0.html // JavaScript

More information

3 システム 概 要 ウェブ アプリケーションによる 情 報 収 集 シ ステムの 概 要 をユースケース 図 にて 示 す( 図 1) 途 中 まで 行 い 一 時 的 にサーバに 格 納 しておき 再 度 先 ほどの 途 中 から 記 入 できるようになっている つまり 1 日 に 何 度 も1

3 システム 概 要 ウェブ アプリケーションによる 情 報 収 集 シ ステムの 概 要 をユースケース 図 にて 示 す( 図 1) 途 中 まで 行 い 一 時 的 にサーバに 格 納 しておき 再 度 先 ほどの 途 中 から 記 入 できるようになっている つまり 1 日 に 何 度 も1 XMLとExcelを 利 用 したWebによるアンケート 収 集 システム の 構 築 Synthesis a new web application system using XML, php and Excel 福 良 博 史 伊 東 久 美 子 荻 野 美 佐 子 FUKURA Hirofumi, Ito Kumiko, Ogino Misako 1 はじめに 0 歳 ~2 歳 の 主 として

More information

目 次 第 1 章 開 発 フロー... 4 第 2 章 要 件 定 義... 5 (1) 概 要... 5 (2) 変 換 による 制 約... 5 (3) デバイスによる 制 約... 6 (4) 端 末 の 保 証 についての 考 え 方... 6 (5) デザイン... 7 (6) デザイン

目 次 第 1 章 開 発 フロー... 4 第 2 章 要 件 定 義... 5 (1) 概 要... 5 (2) 変 換 による 制 約... 5 (3) デバイスによる 制 約... 6 (4) 端 末 の 保 証 についての 考 え 方... 6 (5) デザイン... 7 (6) デザイン ジーンコード 設 計 要 件 定 義 ガイド 第 1 版 最 終 更 新 日 2016/03/31 目 次 第 1 章 開 発 フロー... 4 第 2 章 要 件 定 義... 5 (1) 概 要... 5 (2) 変 換 による 制 約... 5 (3) デバイスによる 制 約... 6 (4) 端 末 の 保 証 についての 考 え 方... 6 (5) デザイン... 7 (6) デザインコンポーネントで

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 山 都 町 移 住 定 住 サイト マイホームページ 操 作 説 明 書 平 成 26 年 3 月 10 日 2 会 員 登 録 からホームページ 公 開 まで 会 員 仮 登 録 本 登 録 申 請 ログイン センター 承 認 ホームページ 公 開 センター 承 認 公 開 申 請 ホームページ 作 成 ホームページ 作 成 の4つのステップ 1 ホームページの 設 定 (p4) 2 レイアウト

More information

~モバイルを知る~ 日常生活とモバイルコンピューティング

~モバイルを知る~ 日常生活とモバイルコンピューティング Webプログラミングの 基 礎 PHPの 基 礎 (6) ~POST (2011/06/22) 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp メーリングリスト:riho-m-rg11@cuc.ac.jp: 資 料 ページ: http://www.cuc.ac.jp/~riho-m/rg11/ 入 力 された 文 字 を 受 け 取 りPOSTで 送 信 する 部 分 (post.htm)

More information

あいち電子自治体ガイドライン(第1章)

あいち電子自治体ガイドライン(第1章) 1-1 HTML/XHTML 5 1-2 h 6 1-3 TITLE 7 1-4 8 1-5 9 1-6 10 1-7 11 1-8 12 2-1 13 2-2 14 2-3 15 2-4 16 2-5 17 2-6 18 2-7 19 2-8 20 3-1 21 3-2 22 3-3 23 3-4 24 3-5 25 3-6 4 26 3-7 27 3-8 28 - i - 4-1 29 4-2

More information

Excel basics

Excel basics Excel 入 門 Excel は 表 計 算 およびデータ 分 析 のための 効 果 的 なアプリケーションです 最 も 効 果 的 に 使 用 するためには 最 初 にその 基 礎 を 理 解 する 必 要 があります このチュートリ アルでは すべてのブックで 使 用 する 作 業 と 機 能 をいくつか 紹 介 します 開 始 する 前 に... 1 1. 新 しい 空 白 のブックを 作

More information

メディプロ1 Javaサーブレット補足資料.ppt

メディプロ1 Javaサーブレット補足資料.ppt メディアプロジェクト演習 1 Java サーブレット補足資料 CGI の基本 CGI と Java サーブレットの違い Java サーブレットの基本 インタラクティブな Web サイトとは Interactive q 対話 または 双方向 q クライアントとシステムが画面を通して対話を行う形式で操作を行っていく仕組み 利用用途 Web サイト, シミュレーションシステム, ゲームなど WWW = インタラクティブなメディア

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 ましき はぴまるサイト マイホームページ 操 作 説 明 書 平 成 27 年 12 月 2 会 員 登 録 からホームページ 公 開 まで 会 員 仮 登 録 本 登 録 申 請 ログイン センター 承 認 ホームページ 公 開 ホームページ 作 成 ホームページ 作 成 の4つのステップ 1 ホームページの 設 定 (p4) 2 レイアウト デザインの 設 定 (p5) 3 記 事 の 登

More information

Microsoft PowerPoint - InfPro_I9.pptx

Microsoft PowerPoint - InfPro_I9.pptx 今 日 の 学 習 内 容 エディタ(emacs)を 使 った 基 本 的 なHTML の 書 き 方 Webページの 公 開 HTMLの 基 礎 知 識 HTML(Hyper Text Markup Language)は Webページを 作 るための 必 要 な 記 述 言 語 HTMLにおける 指 定 の 内 容 は: 1. 文 章 (テキスト)に 対 する 役 割 2. 文 章 やイメージなどのページ

More information

携帯電話でGoogle Mapsを使う

携帯電話でGoogle Mapsを使う PHPのファイルは UTF-8 BOMなしで 保 存 し www.cyaneum.orgのpublic_htmlに 置 く! テーマ 研 究 会 (04/28) Google Mapsを 使 う 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp メーリングリスト riho-m-rg10@cuc.ac.jp 資 料 http://www.cuc.ac.jp/rg10/ 前 回

More information

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 XHTML DOM JavaScript 2 2008 7 1 1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 2.1.2 HTML.........................

More information

ホームページ制作スターターズ

ホームページ制作スターターズ HTML タグ はじめての 方 ガイド Ver1.0 1 < 目 次 > 1ホームページ 構 造 2HTML タグ 3スタイルシート Copyright ナレッジコーディネーター All Rights Reserved. 2 第 1 章 ホームページ 構 造 Copyright ナレッジコーディネーター All Rights Reserved. 3 1HTMLとは ウェブ 上 の 文 書 を 記 述

More information

猪 名 川 町 商 工 会 BLOG TOPページ 猪 名 川 町 商 工 会 会 員 事 業 所 限 定 のオリジナルブログ トップページに 新 着 情 報 登 録 されているブログを 掲 載 みなさんの 投 稿 された 記 事 が 集 約

猪 名 川 町 商 工 会 BLOG TOPページ 猪 名 川 町 商 工 会 会 員 事 業 所 限 定 のオリジナルブログ  トップページに 新 着 情 報 登 録 されているブログを 掲 載 みなさんの 投 稿 された 記 事 が 集 約 猪 名 川 町 商 工 会 ブログ 会 員 事 業 所 向 けオリジナルブログ 操 作 マニュアル 資 料 猪 名 川 町 商 工 会 BLOG TOPページ 猪 名 川 町 商 工 会 会 員 事 業 所 限 定 のオリジナルブログ http://inagawanet.com/blog/ トップページに 新 着 情 報 登 録 されているブログを 掲 載 みなさんの 投 稿 された 記 事 が 集

More information

<4D6963726F736F667420506F776572506F696E74202D208CDA8B718AC7979D5F8EE688B590E096BE8F912E70707478>

<4D6963726F736F667420506F776572506F696E74202D208CDA8B718AC7979D5F8EE688B590E096BE8F912E70707478> Ver 1.00 用 目 次 製 品 の 導 入 P.4 製 品 概 要 P.5 試 用 版 の 制 限 ライセンスの 購 入 動 作 環 境 P.6 ファイルの 配 置 起 動 方 法 P.7 ログイン 画 面 ログイン 方 法 P.8 ライセンス 登 録 方 法 P.9 メインメニュー 顧 客 管 理 P.11 [ 顧 客 管 理 ] 顧 客 検 索 CSV 出 力 メール 一 斉 送 信 新

More information

/ [Save & Submit Code]ボタン が 下 部 やや 左 に ありますが このボタンを 押 すと 右 上 の 小 さいウィンドウ(the results tab) が 本 物 のブラウザのようにアク ションします (ブラウザの 例 : Chrome(グーグルクロム) Firefox(

/ [Save & Submit Code]ボタン が 下 部 やや 左 に ありますが このボタンを 押 すと 右 上 の 小 さいウィンドウ(the results tab) が 本 物 のブラウザのようにアク ションします (ブラウザの 例 : Chrome(グーグルクロム) Firefox( (Why) -((we))- +(learn)+ @(HTML)@? / どうしてHTMLを 覚 えるのか? -(Every webpage you look at)- +(is written)+ (in a language called HTML). / Webページはどのページであれ HTML 言 語 を 使 って 書 かれています -(You)- +(can think of)+ @(HTML)@

More information

自 己 紹 介 名 前 : 松 井 健 太 郎 出 身 : 北 広 島 市 職 業 : Webプログラマー Linuxサーバ 管 理 者 ケータイ 向 け 情 報 サイトを 運 営 しています http://ke-tai.org/ 菊 水 で 小 さな 会 社 を 営 んでいます 株 式 会 社 イ

自 己 紹 介 名 前 : 松 井 健 太 郎 出 身 : 北 広 島 市 職 業 : Webプログラマー Linuxサーバ 管 理 者 ケータイ 向 け 情 報 サイトを 運 営 しています http://ke-tai.org/ 菊 水 で 小 さな 会 社 を 営 んでいます 株 式 会 社 イ ケータイサイトのはなし ( 入 門 編 ) ke-tai.org 松 井 健 太 郎 Ver 1.0 自 己 紹 介 名 前 : 松 井 健 太 郎 出 身 : 北 広 島 市 職 業 : Webプログラマー Linuxサーバ 管 理 者 ケータイ 向 け 情 報 サイトを 運 営 しています http://ke-tai.org/ 菊 水 で 小 さな 会 社 を 営 んでいます 株 式 会 社 インフィニットループ

More information

Microsoft Word - Start Up Guide1 .docx

Microsoft Word - Start Up Guide1 .docx 日 報 共 有 ツール スタートアップガイド 1.ログインをしてみましょう 2.ユーザ 名 の 登 録 ( 変 更 )/プロフィール 写 真 を 登 録 3.グループを 作 成 してみましょう 4.グループへメンバーを 招 待 してみましょう 5.アカウントへ 新 規 ユーザを 招 待 してみましょう 6. 日 報 を 提 出 してみましょう 7. 今 日 の 予 定 をGoogleカレンダーから

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 41 ヨロン 観 光 まちづくり 支 援 サービス マイホームページ 操 作 説 明 書 1 会 員 登 録 からホームページ 公 開 まで 会 員 仮 登 録 本 登 録 申 請 ログイン センター 承 認 ホームページ 公 開 センター 承 認 公 開 申 請 ホームページ 作 成 ホームページ 作 成 の3つのステップ 1 ホームページの 設 定 (p3) 2 レイアウト デザインの 設 定

More information

Microsoft Word - chap5.doc

Microsoft Word - chap5.doc 第 5 章 フォームと PHP プログラム [1] PHP プログラムのデバッグ プログラムがうまく 動 作 しない 場 合 原 因 を 見 つけて 修 正 するデバッグが 必 要 となる PHP に 限 らず 一 般 に CGI のプロ グラムのデバッグは 結 構 面 倒 になる と いうのは 単 独 のプログラム(つまり CGI ではなくて 普 通 の Java や C のプログラ ムと 同 じようにして)として

More information

現場で役立つTuigwaaの勘所

現場で役立つTuigwaaの勘所 2007 Autumn 現 場 で 役 立 つTuigwaa Tuigwaaの の 勘 所 2007.11.11 escafe project 株 式 会 社 四 次 元 データ 西 岡 悠 平 / 染 田 貴 志 1 自 己 紹 介 西 岡 悠 平 株 式 会 社 四 次 元 データ http://www.4dd.co.jp/ Tuigwaa (escafeweb) チーフコミッタ 染 田 貴 志

More information

... 1... 2... 2... 2... 4... 4... 5 HTML/JSP/Servlet... 7 JSP... 7 Servlet... 11 Struts... 15 Struts... 15 Struts... 16... 17... 25 FormBean LoginForm

... 1... 2... 2... 2... 4... 4... 5 HTML/JSP/Servlet... 7 JSP... 7 Servlet... 11 Struts... 15 Struts... 15 Struts... 16... 17... 25 FormBean LoginForm Oracle JDeveloper 10g Struts Creation Date: May 28, 2004 Last Update: Aug 19, 2004 Version 1.0.1 ... 1... 2... 2... 2... 4... 4... 5 HTML/JSP/Servlet... 7 JSP... 7 Servlet... 11 Struts... 15 Struts...

More information

Peace & Piece 画面設計書

Peace & Piece 画面設計書 ホームページ 仕 様 書 株 式 会 社 目 次 1. 更 新 履 歴 2. 構 成 図 3. 制 作 における 基 本 事 項 4. 画 面 設 計 の 定 義 ルール 5. 各 画 面 仕 様 設 計 6. 仕 様 書 確 定 の 合 意 更 新 履 歴 更 新 日 付 更 新 箇 所 更 新 内 容 構 成 図 A-1 トップページ 会 社 サービス 特 徴 コンテンツ サブコンテンツ その

More information

03 CMS機能審査表.xls

03 CMS機能審査表.xls 厚 真 町 ホームページ 構 築 業 務 CMS 機 能 調 査 表 ( 別 紙 ) 対 応 欄 : 本 業 務 の 委 託 費 用 内 で 対 応 可 能 : 代 替 案 により 本 業 務 の 委 託 費 用 内 で 対 応 可 能 ( 代 替 案 欄 に 代 替 案 をご 記 入 ください ) : 対 応 不 可 項 目 番 号 要 件 対 応 代 替 案 1 1.システム 基 本 要 件 Windows

More information

mos-user-account-guide-079778-ja.pdf

mos-user-account-guide-079778-ja.pdf My Oracle Support ユーザー アカウントの 作 成 と 管 理 日 本 オラクル 株 式 会 社 グローバル カスタマー サポート 作 成 日 : 2009 年 8 月 19 日 更 新 日 : 2014 年 5 月 23 日 バージョン: 4.4 1 目 次 My Oracle Support にサインインするユーザー アカウントを 作 成... 3 新 規 のシングル サインオンのユーザー

More information

1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 高 いフレームレートで 再 生 ができると 一 般 的 に 動 画 は 滑 らかに 動 作 する 試 験 範 囲 : 5-2.マルチメディアと 動 的 表 現 試

1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 高 いフレームレートで 再 生 ができると 一 般 的 に 動 画 は 滑 らかに 動 作 する 試 験 範 囲 : 5-2.マルチメディアと 動 的 表 現 試 ウェブデザイン 技 能 検 定 3 級 学 科 練 習 問 題 本 練 習 問 題 の 著 作 権 は 当 協 会 に 帰 属 します 協 会 の 提 供 する 一 部 又 は 全 ての 練 習 問 題 を 無 断 で 複 写 転 載 営 利 利 用 することを 禁 止 します 内 容 解 答 その 他 一 切 のお 問 い 合 わせは 受 け 付 けておりません 本 練 習 問 題 と 実 際 の

More information

情報資源組織演習B:

情報資源組織演習B: 情 報 資 源 組 織 演 習 A( 書 誌 の 作 成 ) 第 12 回 書 誌 データ 管 理 検 索 システムの 構 築 2013 年 度 跡 見 学 園 女 子 大 学 文 学 部 准 教 授 福 田 博 同 書 誌 データ 管 理 検 索 システムの 構 築 第 9 回 で 書 誌 データベース 構 築 は 理 解 Web 検 索 では 以 下 の 様 な 方 法 が 取 られる A B

More information

第 10 問 取 得 したドメインでウェブサイトを 公 開 する 場 合 共 用 サーバは 一 切 使 えないので 専 用 サーバを 用 意 する 必 要 が ある 第 11 問 WaSP とは Web accessibility Standard Project の 略 称 である 第 12 問

第 10 問 取 得 したドメインでウェブサイトを 公 開 する 場 合 共 用 サーバは 一 切 使 えないので 専 用 サーバを 用 意 する 必 要 が ある 第 11 問 WaSP とは Web accessibility Standard Project の 略 称 である 第 12 問 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 グローバルナビゲーションとは 水 平 方 向 に 配 置 されるものを 指 し 垂 直 方 向 に 配 置 されるものはローカルナビ ゲーションと 呼 ばれる 第 2 問 イーサネットとは 1000BASE-T の 規 格 のみをさす 第 3 問 IPv6 で 定

More information

Blojsom におけるクロスサイトスクリプティングの脆弱性

Blojsom におけるクロスサイトスクリプティングの脆弱性 Japan Computer Emergency Response Team Coordination Center 電子署名者 Japan Computer Emergency Response Team Coordination Center DN c=jp, st=tokyo, l=chiyoda-ku, email=office@jpcert.or.jp, o=japan Computer

More information