intra-mart Accel Platform — テーマ仕様書   第5版  

Size: px
Start display at page:

Download "intra-mart Accel Platform — テーマ仕様書   第5版 2015-12-01  "

Transcription

1 Copyright 2013 NTT DATA INTRAMART CORPORATION 1 Top

2 目 次 改 訂 情 報 はじめに 本 書 の 目 的 対 象 読 者 本 書 の 構 成 テーマ 概 要 テーマとは 画 面 レイアウトやスタイルを 切 り 替 える 仕 組 み テーマモジュール 用 語 テーマの 詳 細 ThemeFilter ThemeManager PageBuilder テーマモジュール テーマモジュールの 作 成 標 準 テーマカスタマイズの 概 要 スクラッチ 開 発 サンプル 付 録 テーマモジュールのフォルダ ファイル 構 成 テーマモジュールのサンプル ユーティリティプラグイン intra-mart が 提 供 するテーマの 一 覧 2

3 改 訂 情 報 変 更 年 月 日 変 更 内 容 初 版 第 2 版 下 記 を 追 加 変 更 しました テーマモジュール の JSSP からGoogleChromeFrameの 記 述 を 削 除 テーマモジュールのサンプル の JSSP からGoogleChromeFrame の 記 述 を 削 除 第 3 版 下 記 を 変 更 しました テーマモジュール に ヘルプドロップダウン を 追 加 しました テーマモジュール の header の 画 像 を 変 更 しました 第 4 版 下 記 を 変 更 しました PageBuilder の 設 定 ファイルで 指 定 する に FullThemeBuilder の 設 定 ファイルを 追 記 しました 第 5 版 下 記 を 変 更 しました PageBuilder に ライブラリ 群 の 切 り 替 え を 追 加 しました テーマモジュール に ライブラリ 群 の 切 り 替 え を 追 加 しました テーマモジュールのサンプル の head を 修 正 しました 3

4 はじめに 本 書 の 目 的 本 書 ではテーマの 詳 細 について 説 明 します 説 明 範 囲 は 以 下 のとおりです テーマの 持 つ 機 能 の 全 体 像 テーマを 実 現 する 構 造 と 動 作 テーマモジュールの 作 成 方 法 対 象 読 者 本 書 では 次 の 利 用 者 を 対 象 としています intra-mart Accel Platform に 画 面 を 持 つアプリケーションを 作 成 したい 開 発 者 の 方 テーマモジュールを 作 成 カスタマイズしたいデザイナの 方 本 書 の 構 成 テーマ 概 要 テーマの 持 つ 機 能 の 全 体 像 について 説 明 します テーマの 詳 細 概 要 で 説 明 したテーマの 全 体 像 を 実 現 するための 構 成 要 素 を 説 明 します ThemeFilter テーマの 入 り 口 となるサーブレットフィルタについて 説 明 します ThemeManager テーマモジュールを 管 理 する 部 分 について 説 明 します PageBuilder テーマモジュールとコンテンツを 組 み 合 わせたHTMLを 生 成 する 部 分 について 説 明 します また テーマモジュールとコンテンツとの 組 み 合 わせを 決 定 する 方 法 についても 説 明 します テーマモジュール テーマモジュールを 説 明 します テーマモジュールの 作 成 4

5 テーマモジュールの 作 成 方 法 について 説 明 します 5

6 テーマ 概 要 テーマとは テーマとは 画 面 レイアウトやスタイルを 切 り 替 える 仕 組 み その 構 成 ファイル 群 を 指 します 読 者 の 立 場 によって 見 え 方 が 異 なるものになります アプリケーションの 開 発 者 の 立 場 からは 画 面 レイアウトやスタイルを 切 り 替 える 仕 組 みとしての 側 面 が 主 なもの となるでしょう デザイナの 立 場 からは 構 成 ファイル 群 特 に HTML と CSS とで 画 面 のデザインを 行 う 対 象 となるでしょう ユーザの 立 場 からは 画 面 の 見 た 目 や 操 作 感 の 違 い として 見 えるでしょう 画 面 レイアウトやスタイルを 切 り 替 える 仕 組 み 画 面 レイアウトやスタイルを 切 り 替 える 仕 組 みは 主 に 以 下 の 機 能 で 実 現 します ThemeFilter ThemeManager PageBuilder 主 にアプリケーションの 開 発 者 が 関 係 する 部 分 になります これらの 章 を 読 むことで 設 定 ファイルの 書 き 方 や プログラムからの 指 定 によってテーマモジュールの 組 み 合 わせ 方 を 制 御 できるようになります テーマモジュール テーマを 構 成 するファイル 群 を テーマモジュール と 呼 びます テーマモジュールは JSSP CSS CSJS 画 像 設 定 ファイル で 構 成 されます テーマモジュールには 標 準 標 準 (シンプル) v5 互 換 v6 互 換 の4 種 類 があります 標 準 (シンプル) 以 外 のテーマモジュールには いくつかのカラーバリエーションがあります 6

7 用 語 JSSP JSSP とは JavaScriptServerPage の 略 称 で スクリプト 開 発 モデルで 実 装 された HTML と JavaScript の 組 み 合 わせを 指 します CSJS CSJS とは ClientSideJavaScript の 略 称 で クライアントつまり Web ブラウザ 上 で 動 作 する JavaScript のこと を 指 します SSJS SSJS とは ServerSideJavaScript の 略 称 で サーバ 上 で 動 作 する JavaScript のことを 指 します 7

8 テーマの 詳 細 テーマ 概 要 で 述 べたとおり テーマは 大 きく 分 けて 2 つの 部 分 でできています 画 面 レイアウトやスタイルを 切 り 替 える 仕 組 み ThemeFilter ThemeManager PageBuilder テーマモジュール 以 降 の 説 明 ではこれらの 機 能 の 詳 細 を 解 説 していきます ThemeFilter ThemeFilter は javax.servlet.filter を 実 装 した Java のクラスです *.jsp と JSSP に 対 してマッピングされてい ます ここでは ThemeFilter の 役 割 と 制 御 方 法 を 説 明 します 項 目 ThemeFilter の 役 割 テーマモジュールを 適 用 する 条 件 HTML の 生 成 キャッシュ 制 御 制 御 パラメータ キャッシュ 制 御 テーマの 適 用 制 御 PageBuilderの 制 御 ThemeFilter の 役 割 ThemeFilter は 以 下 の 機 能 を 持 っています リクエストされたページの URL やパラメータなどをチェックし テーマモジュールを 適 用 するかどうかを 決 定 します テーマモジュールを 適 用 する 場 合 コンテンツに 対 してテーマモジュールを 適 切 に 適 用 し HTMLを 生 成 し ます レスポンスに キャッシュ 制 御 の HTTP ヘッダを 付 与 します テーマモジュールを 適 用 する 条 件 ThemeFilter は コンテンツに 対 してテーマモジュールを 適 用 するかどうかを 決 定 します 以 下 の 条 件 のいずれ かを 満 たす 場 合 テーマモジュールを 適 用 します 8

9 Content-Type が 指 定 されていない Content-Type が text/html である なお 後 述 の テーマの 適 用 制 御 で フラグに false を 指 定 した 場 合 上 記 の 条 件 に 合 致 してもテーマモジュール は 適 用 されません HTML の 生 成 ThemeFilter はテーマモジュールを 適 用 する 条 件 に 合 致 した 場 合 コンテンツをバイト 配 列 としてメモリ 内 に 保 存 し 後 述 の PageBuilder に 渡 します ThemeFilter は PageBuilder が 生 成 した HTML をレスポンスとして Web ブラウザに 送 信 します テーマモジュールを 適 用 する 条 件 に 合 致 しない 場 合 レスポンスの 操 作 は 行 いません 対 象 のサーブレット サー ブレットフィルタが 生 成 したレスポンスがそのまま Web ブラウザに 返 ることになります キャッシュ 制 御 HTTP ヘッダに 以 下 のものをセットします Cache-Control: No-Cache Pragma: No-Cache なお 後 述 の キャッシュ 制 御 で フラグに true をセットした 場 合 これらの HTTP ヘッダはセットされません 制 御 パラメータ ThemeFilter には 動 作 を 変 更 するためのパラメータが 存 在 します キャッシュ 制 御 Cache-ControlとPragma に No-Cache を 指 定 するかどうかを 制 御 します このパラメータを 指 定 しない 場 合 または false を 指 定 した 場 合 キャッシュ 制 御 の HTTP ヘッダがレスポンスに 付 与 されます true を 指 定 した 場 合 キャッシュ 制 御 の HTTP ヘッダはレスポンスに 付 与 されません このパラメータは リクエストの 属 性 として 指 定 してください JavaScript の 例 function init(request) { //キャッシュ 制 御 の HTTP ヘッダを 出 力 しない request.setattribute('x-jp-co-intra-mart-disable-no-cache',true); //キャッシュ 制 御 を 自 ら 行 う let response = Web.getHTTPResponse(); response.setheader("cache-control", "private,max-age=3600"); response.setheader("last-modified", new Date(2013,9,1,13,0,0)); 9

10 Java の 例 request.setattribute(themefilter.disable_no_cache, true); response.setheader("cache-control", "private,max-age=7200"); テーマの 適 用 制 御 テーマモジュールを 適 用 するかどうかを 制 御 します このフラグに false を 指 定 した 場 合 テーマ 適 用 の 条 件 に 合 致 していてもテーマモジュールは 適 用 されません true を 指 定 した 場 合 テーマモジュールを 適 用 するかどうかはテーマ 適 用 の 条 件 に 従 います このパラメータは リクエストのパラメータとして 指 定 してください クエリパラメータとして 指 定 することで 一 時 的 にテーマモジュールを 適 用 させないで 画 面 表 示 を 確 認 する 場 合 に 使 うことを 想 定 しています PageBuilderの 制 御 セッションをスコープとした PageBuilder のビルダーモジュールを 指 定 します 通 常 は リクエストをスコープとしてビルダーモジュールが 決 まりますが このパラメータを 指 定 するとセッションを スコープとしてビルダーモジュールを 指 定 することができます これは 外 部 メニューに 指 定 された intra-mart Accel Platform の 画 面 を 現 在 のテーマで 表 示 するためのパラメータです このパラメータは リクエストのパラメータとして 指 定 してください <form action="somewhere">... <input type="hidden" name="imui-session-scope-builder-module" value="headwithcontainer"/>... </form> ThemeManager ここでは ThemeManager の 役 割 を 説 明 します ThemeManager の 役 割 テーマモジュールの 情 報 を 管 理 します システムに 登 録 されているすべてのテーマモジュールの 情 報 ログイン しているユーザのテーマの 情 報 などを 取 得 する 機 能 を 提 供 します 詳 細 は API リスト を 参 照 してください PageBuilder 10

11 PageBuilder ここでは PageBuilder の 役 割 と 制 御 方 法 を 説 明 します 項 目 PageBuilder の 役 割 組 み 合 わせ 方 の 制 御 設 定 ファイルで 指 定 する リクエストへのパラメータで 指 定 する 適 用 順 位 指 定 例 設 定 ファイルで 指 定 する 例 リクエストへの 属 性 として 指 定 する 例 リクエストへのパラメータとして 指 定 する 例 ライブラリ 群 の 切 り 替 え 適 用 順 位 指 定 例 設 定 ファイルで 指 定 する 例 リクエストへのパラメータとして 指 定 する 例 リクエストへの 属 性 として 指 定 する 例 PageBuilder の 役 割 PageBuilder は テーマモジュールの JSSP と コンテンツを 組 み 合 わせた HTML を 生 成 します テーマモジュールは 以 下 の 4 つの JSSP で 構 成 されています head HTML の head タグの 部 分 header ヘッダ 部 body footer ボディ 部 フッタ 部 組 み 合 わせ 方 は head, header, body, footer head, body, footer head, body body テーマ 適 用 無 し 11

12 の 5 パターンであるものと 定 義 しています 実 装 は 以 下 の6つがあります 1. HeadWithFooterThemeBuilder head, body, footer を 含 んだ HTML を 生 成 します header (メニューや ユーティリティ)を 表 示 したくないが footer は 表 示 したい 場 合 に 使 用 します body は <div id= imui-container > で 囲 まれて 出 力 されます 2. HeadWithContainerThemeBuilder head, body を 含 んだ HTML を 生 成 します header (メニューや ユーティリティ) footer を 表 示 したくないが CSS やクライアントサイド JavaScript は 使 用 したい 場 合 に 使 用 します 主 に intra-mart Accel Platform 向 けに 作 成 した 画 面 を 表 示 するために 使 用 することを 想 定 して います body は <div id= imui-container > で 囲 まれて 出 力 されます 3. HeadOnlyThemeBuilder head, body を 含 んだ HTML を 生 成 します header (メニューや ユーティリティ) footer を 表 示 したくないが CSS やクライアントサイド JavaScript は 使 用 したい 場 合 に 使 用 します 主 に iwp7.2 以 前 のシステム 向 けに 作 成 した 画 面 を 表 示 するために 使 用 することを 想 定 していま す body は 指 定 された URL の HTML そのものが 出 力 されます 4. BodyOnlyThemeBuilder DOCTYPE htmlタグ body を 含 んだ HTML を 生 成 します header (メニューや ユーティリティ) footer を 表 示 せず CSS やクライアントサイド JavaScript も 使 用 しない 場 合 に 使 用 します body は 指 定 された URL の HTML そのものが 出 力 されます 5. NoThemeBuilder 指 定 された URL の HTML をそのまま 返 します テーマを 一 切 使 用 せず 自 分 で 作 成 した HTML をそのまま 出 力 したい 場 合 に 使 用 します body は 指 定 された URL の HTML そのものが 出 力 されます 6. FullThemeBuilder head, header, body, footer のすべてを 含 んだ HTML を 生 成 します body は <div id= imui-container > で 囲 まれて 出 力 されます 基 本 はこれを 使 用 します 上 記 の 順 に 処 理 すべき PageBuilder を 検 索 し その PageBuilder がリクエストを 処 理 します リクエストを 処 理 すべきかどうかは それぞれのモジュールが 持 つ 設 定 ファイルに 記 載 されたパスがリクエストパスに 合 致 するか どうかや 後 述 のパラメータなどに 合 致 するかどうかで 判 断 します リクエストパスが 設 定 ファイルに 合 致 しない 場 合 や パラメータで 指 定 されていない 場 合 FullThemeBuilder が 12

13 リクエストを 処 理 します コラム CSSモジュール 一 覧 内 のスタイルの 一 部 は <div id= imui-container > の 内 部 の 要 素 だけに 適 用 されます この div で 内 容 が 囲 まれない PageBuilder (HeadOnlyThemeBuilder, BodyOnlyThemeBuilder, NoThemeBuilder) を 利 用 し かつ CSSモジュール 一 覧 のスタイルを 適 用 したい 場 合 は <div id= imui-container > で 内 容 を 囲 むように 実 装 してください 組 み 合 わせ 方 の 制 御 head, header, body, footer の 組 み 合 わせは 上 述 の PageBuilder の6つの 実 装 の 設 定 で 決 まります それぞれ の 設 定 ファイルを 記 述 したり リクエストへパラメータを 指 定 したりすることで どの 組 み 合 わせ 方 にするかを 指 定 することができます 設 定 ファイルで 指 定 する どの 組 み 合 わせ 方 にするかが 静 的 に 決 定 する 場 合 設 定 ファイルに 記 述 します 設 定 ファイルは WEB-INF/conf 配 下 の PageBuilder の 実 装 毎 のフォルダに 配 置 します ファイル 名 は 任 意 で す HeadWithFooterThemeBuilder WEB-INF/conf/theme-head-with-footer-path-config HeadWithContainerThemeBuilder WEB-INF/conf/theme-head-with-container-path-config HeadOnlyThemeBuilder WEB-INF/conf/theme-head-only-path-config BodyOnlyThemeBuilder WEB-INF/conf/theme-body-only-path-config NoThemeBuilder WEB-INF/conf/theme-no-theme-path-config FullThemeBuilder WEB-INF/conf/theme-full-theme-path-config 注 意 それぞれの 設 定 ファイルは 異 なる XML Schema で 定 義 されています いずれかの 設 定 ファイル を 別 のフォルダにコピーしても 動 作 しないので 注 意 してください リクエストへのパラメータで 指 定 する どの 組 み 合 わせ 方 にするかが 動 的 に 決 定 する 場 合 や forward する 場 合 リクエストへパラメータを 指 定 します forward を 行 うと PageBuilder が 処 理 対 象 とする URL は forward 前 の URL となります forward 後 のペー 13

14 ジに 対 して forward 前 の PageBuilder とは 別 の PageBuilder を 指 定 したい 場 合 リクエストにパラメータを 指 定 することで PageBuilder を 切 り 替 えることができます 指 定 するキー imui-theme-builder-module 適 用 したい PageBuilder HeadWithFooterThemeBuilder 指 定 する 値 headwithfooter HeadWithContainerThemeBuilder headwithcontainer HeadOnlyThemeBuilder BodyOnlyThemeBuilder NoThemeBuilder headonly bodyonly notheme 上 記 の 値 をリクエストのパラメータ または 属 性 として 指 定 することで PageBuilder が 切 り 替 わります 適 用 順 位 設 定 ファイル パラメータ 属 性 の 適 用 は 以 下 の 順 に 検 索 し 最 初 に 合 致 した PageBuilder を 使 用 します 設 定 ファイルに 記 述 したものより 属 性 に 指 定 したものの 方 が 優 先 されます 1. 属 性 2. パラメータ 3. 設 定 ファイル 指 定 例 設 定 ファイルで 指 定 する 例 例 として へのリクエストを head, body, footer を 含 んだ HTML としたい 場 合 を 取 り 上 げます この 場 合 使 用 する PageBuilder は HeadWithFooterThemeBuilder になります HeadWithFooterThemeBuilder の 設 定 ファイルは 以 下 のようになります <?xml version="1.0" encoding="utf-8"?> <theme-head-with-footer-path-config xmlns="http://www.intra-mart.jp/theme/theme-head-with-footer-pathconfig"> <path>/sample/page</path> </theme-head-with-footer-path-config> path の 中 に コンテキストパス 以 下 のパスを / から 記 述 します 別 の 例 とし て へのリクエストを 異 なるビルダーモジュールで 表 示 する 場 合 を 取 り 上 げます この 場 合 正 規 表 現 を 利 用 して path を 表 現 します path 要 素 に regex 属 性 を true として 追 加 することで 正 規 表 現 として 扱 われます 14

15 <?xml version="1.0" encoding="utf-8"?> <theme-head-with-container-path-config xmlns="http://www.intra-mart.jp/theme/theme-head-withcontainer-path-config"> <path regex="true">/example/[^/]+?</path> </theme-head-only-path-config> <?xml version="1.0" encoding="utf-8"?> <theme-head-with-footer-path-config xmlns="http://www.intra-mart.jp/theme/theme-head-with-footer-pathconfig"> <path regex="true">/example/[^/]+?/[^/]+?</path> </theme-head-with-footer-path-config> リクエストへの 属 性 として 指 定 する 例 function init(request) { request.setattribute("imui-theme-builder-module", "headwithfooter"); forward("somewhere"); リクエストへのパラメータとして 指 定 する 例 <form name="form" action="sample/page"> <input type="hidden" name="imui-theme-builder-module" value="headwithfooter"> <input type="submit" value="submit"/> </form> ライブラリ 群 の 切 り 替 え intra-mart Accel Platform 2015 Winter(Lydia) からライブラリ 群 の 切 り 替 え 機 能 を 追 加 しました この 機 能 は jquery のバージョンを 切 り 替 えることを 主 な 目 的 としています 指 定 されなかったり 存 在 しない 組 み 合 わせ 名 を 指 定 されたりした 場 合 設 定 ファイルリファレンス - ライブラリ 群 設 定 に 指 定 された version を 辞 書 の 昇 順 でソートし 最 初 のものが 利 用 されます 標 準 では iap が 指 定 されたことになります ライブラリの 切 り 替 えは 上 記 の 設 定 ファイル パラメータ 属 性 でライブラリ 群 の 組 み 合 わせ 名 を 指 定 します どの ような 組 み 合 わせ 名 が 用 意 されているかは 設 定 ファイルリファレンス - ライブラリ 群 設 定 を 参 照 してくださ い 適 用 順 位 設 定 ファイル パラメータ 属 性 の 適 用 は 以 下 の 順 に 検 索 し 最 初 に 合 致 したライブラリ 群 の 組 み 合 わせを 使 用 します 設 定 ファイルに 記 述 したものより 属 性 に 指 定 したものの 方 が 優 先 されます 1. 属 性 2. パラメータ 15

16 3. 設 定 ファイル 指 定 例 設 定 ファイルで 指 定 する 例 設 定 ファイルの path 要 素 に libraries-version 属 性 を 追 加 します ここでは /sample/page に 対 して iap を 指 定 します この 指 定 によって /sample/page は jquery や jqueryui を 使 用 するようになりま す <?xml version="1.0" encoding="utf-8"?> <theme-head-with-footer-path-config xmlns="http://www.intra-mart.jp/theme/theme-head-with-footer-pathconfig"> <path libraries-version="iap ">/sample/page</path> </theme-head-with-footer-path-config> リクエストへのパラメータとして 指 定 する 例 リクエストのパラメータとして 指 定 する 場 合 キーに IMUI_THEME_LIBRARIES_VERSION を 値 にライブラリ 群 の 組 み 合 わせ 名 を 指 定 します <form name="form" action="sample/page"> <input type="hidden" name="imui_theme_libraries_version" value="iap "> <input type="submit" value="submit"/> </form> リクエストへの 属 性 として 指 定 する 例 リクエストの 属 性 として 指 定 する 場 合 キーに IMUI_THEME_LIBRARIES_VERSION を 値 にライブラリ 群 の 組 み 合 わせ 名 を 指 定 します function init(request) { request.setattribute("imui_theme_libraries_version", "iap "); forward("somewhere"); テーマモジュール ここではテーマモジュールの 役 割 と 構 成 を 説 明 します 16

17 項 目 テーマモジュールの 役 割 テーマモジュールの 構 成 設 定 ファイル theme-config message JSSP head header body footer 画 像 CSS CSS のフォルダ ファイル 構 成 CSJS テーマモジュールの 役 割 テーマモジュールは 画 面 レイアウトとスタイルを 定 義 した JSSP CSS CSJS 画 像 をまとめたものです 一 般 ユーザから 見 た 場 合 テーマモジュールはテーマそのものに 見 えます また テーマを 切 り 替 える と 現 在 利 用 しているテーマモジュールとは 別 のテーマモジュールを 使 って 画 面 を 表 示 することになります テーマモジュールの 構 成 テーマモジュールは 以 下 のような 要 素 で 構 成 されます 設 定 ファイル JSSP 画 像 CSS CSJS 詳 細 なフォルダ ファイル 構 成 は テーマモジュールのフォルダ ファイル 構 成 を 参 照 してください 17

18 コラム テーマを 切 り 替 えるには 下 図 の テーマ 画 面 で 利 用 したいテーマの このテーマを 利 用 する ボ タンをクリックします 詳 細 は 一 般 ユーザ 操 作 ガイド を 参 照 してください テーマ 画 面 設 定 ファイル theme-config %CONTEXT_PATH%/WEB-INF/conf/theme-config 配 下 に テーマモジュール 毎 に 設 定 ファイルが 存 在 しま す ファイル 名 は 任 意 ですが システム 上 一 意 になるようにテーマID と 同 じ 名 前 をつけることをお 勧 めします こ のファイルには テーマID や JSSP のパス などが 記 述 されています theme 要 素 の 属 性 は 以 下 の 通 りです id テーマIDを 定 義 します システム 上 一 意 になるような 値 を 指 定 してください imagepath テーマ 画 面 で 使 用 するサムネイル 画 像 のパスを 指 定 します theme-folder このテーマのJSSPのパス テーマIDと 同 じ 名 前 をつけることをお 勧 めします sortkey テーマ 画 面 に 表 示 する 際 のソートキー 昇 順 でソートされます ソートキーが 同 じ 場 合 テーマID でソートさ れます この 値 には 0 以 上 の 整 数 を 指 定 してください author 作 成 者 ( 未 使 用 ) version バージョン( 未 使 用 ) theme 要 素 の 子 要 素 として client-type-info 要 素 を 定 義 します client-type-info 要 素 の 属 性 は 以 下 の 通 りで す 18

19 id クライアントタイプIDを 指 定 します 現 在 は pc のみ 指 定 できます default このテーマをデフォルトテーマとするかどうかのフラグです 通 常 は false を 指 定 します この 値 が true の 設 定 ファイルの 中 で 最 初 に 見 つかったテーマモジュールがデフォルトテーマとなります 例 として 標 準 テーマ 青 色 の 設 定 ファイルを 下 に 示 します <?xml version="1.0" encoding="utf-8"?> <theme-config xmlns="http://www.intra-mart.jp/theme/theme" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://www.intra-mart.jp/theme/theme theme.xsd "> <theme id="im_theme_dropdown_blue" author="intra-mart" version="8.0" imagepath="ui/theme/im_theme_dropdown_blue/images/thumbnail.png" theme-folder="theme/im_theme_dropdown_blue" sortkey="10"> <client-type-info id="pc" default="true"/> </theme> </theme-config> message テーマ 画 面 で 使 用 するメッセージプロパティを 定 義 します 定 義 するメッセージキーは 以 下 の 二 つです CAP.Z.IWP.THEME.テーマID.NAME テーマ 画 面 で 表 示 されるテーマの 名 前 CAP.Z.IWP.THEME.テーマID.DESCRIPTION テーマ 画 面 で 表 示 されるテーマの 説 明 %CONTEXT_PATH%/WEB-INF/conf/message/platform/theme/テーマID 配 下 に 以 下 のファイルを 作 成 しま す caption.properties caption_en.properties caption_ja.properties caption_zh_cn.properties 詳 細 は 多 言 語 化 対 応 を 参 照 してください JSSP head HTML の head タグを 実 装 します UIコンポーネントが 必 要 とする CSJS CSS などシステムを 動 作 させるため に 必 要 な 情 報 が 記 述 されています 19

20 標 準 テーマ 青 色 を 例 にすると head タグは 主 に 以 下 の 要 素 で 構 成 されています これらの 要 素 は 全 テーマモ ジュールで 必 須 な 要 素 です 文 字 コード 文 字 コードを UTF-8 に 指 定 します <meta charset="utf-8" /> InternetExplorer 向 けの 設 定 対 象 ブラウザの 最 新 のレンダリングエンジンを 使 用 するように 指 定 します <meta http-equiv="x-ua-compatible" content="ie=edge"> Google Chrome 向 けの 設 定 Google Chrome が 翻 訳 を 行 うかどうかを 問 い 合 わせるダイアログの 表 示 を 抑 制 します <meta name="google" content="notranslate"> base タグ base タグを 指 定 します <base href='<imart type="string" value=base></imart>' target="_self"> テーマのCSS テーマの CSS を 読 み 込 みます <imart type="imuilink" href="ui/theme/im_theme_dropdown_blue/css/theme.css"></imart> UIコンポーネントのCSS UIコンポーネントの CSS を 読 み 込 みます <imart type="imuilink" href="ui/css/imui.css"></imart> twitter bootstrap のCSS twitter bootstrap の CSS を 読 み 込 みます <link rel="stylesheet" type="text/css" href="ui/css/bootstrap.css"> IE8 向 けの 設 定 IE8 向 けに HTML5 の 要 素 を 扱 えるようにするライブラリを 読 み 込 みます 20

21 <!--[if lt IE 9]> <script type="text/javascript" src="ui/libs/html5.js"></script> <![endif]--> 3rd party ライブラリの 読 み 込 み テーマ および UIコンポーネントが 利 用 する サードパーティライブラリを 読 み 込 みます <imart type="imuiscript" src="ui/libs/jquery js"></imart> <imart type="imuiscript" src="ui/libs/jquery-ui custom.js"></imart> <script type="text/javascript" src="ui/libs/jstree_pre1.0_fix/jquery.jstree.js"></script> <script type="text/javascript" src="csjs/libs/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script> <imart type="imuiscript" src="ui/libs/jquery.jqgrid-4.3.3/js/jquery.jqgrid.src.js" suffix="min" regexp="src" defer="defer"></imart> <link rel="stylesheet" type="text/css" href="ui/libs/jquery-file-upload/css/jquery.fileupload-ui.css"> <script type="text/javascript" src="ui/libs/jquery-file-upload/js/tmpl.min.js" defer="defer"></script> <script type="text/javascript" src="ui/libs/jquery-file-upload/js/jquery.iframe-transport.js" defer="defer"> </script> <script type="text/javascript" src="ui/libs/jquery-file-upload/js/jquery.fileupload.js" defer="defer"></script> <script type="text/javascript" src="ui/libs/jquery-file-upload/js/jquery.fileupload-ip.js" defer="defer"> </script> <script type="text/javascript" src="ui/libs/jquery-file-upload/js/jquery.fileupload-ui.js" defer="defer"> </script> <script type="text/javascript" src="ui/libs/jquery-file-upload/js/jquery.fileupload-jui.js" defer="defer"> </script> <script type="text/javascript" src="ui/js/jquery.imui.fileupload.js" defer="defer"></script> <script type="text/javascript" src="csjs/libs/lightbox2/js/lightbox.js"></script> <imart type="imuiscript" src="ui/libs/chardinjs/js/chardinjs.js" suffix="min" regexp="src" defer="defer"> </imart> <link rel="stylesheet" type="text/css" href="ui/libs/chardinjs/css/chardinjs.css"> セッション 自 動 維 持 機 能 の 読 み 込 み セッション 自 動 維 持 機 能 を 実 現 するタグを 記 述 します <imart type="imuisessionkeeper"/> UIコンポーネントのCSJS UIコンポーネント の ClientSideJavaScript を 読 み 込 みます <imart type="condition" validity=loadsystemlocale><imart type="imuiscript" src=systemlocalescript /> </imart> <imart type="condition" validity=loadtenantlocale><imart type="imuiscript" src=tenantlocalescript /> </imart> <imart type="imuiscript" src=userlocalescript></imart> <imart type="imuiscript" src="ui/js/imui.js"></imart> <script src="ui/js/imui-form-util.js"></script> テーマのCSJS 21

22 テーマの ClientSideJavaScript を 読 み 込 みます 読 み 込 む ClientSideJavaScript ClientSideJavaScript の 実 装 は 各 テーマによって 異 なります <imart type="imuiscript" src="ui/theme/im_theme_dropdown_blue/js/theme.js"></imart> <script type="text/javascript" src="csjs/im_json.js" ></script> <script type="text/javascript" src="csjs/im_window.js" ></script> ライブラリ 群 の 切 り 替 え intra-mart Accel Platform 2015 Winter(Lydia) からライブラリ 群 の 切 り 替 え 機 能 を 追 加 しました 標 準 では 上 記 の テーマのCSS UIコンポーネントのCSS twitter bootstrap のCSS IE8 向 けの 設 定 3rd party ライブラリの 読 み 込 み セッション 自 動 維 持 機 能 の 読 み 込 み UIコンポーネントのCSJS テーマの CSJS の 組 み 合 わせを 定 義 しています この 組 み 合 わせはテーマ 共 通 モジュールとして 提 供 しています どのような 組 み 合 わせ 名 が 用 意 されているかの 詳 細 は 設 定 ファイルリファレンス - ライブラリ 群 設 定 を 参 照 してください 組 み 合 わせの 指 定 方 法 は ライブラリ 群 の 切 り 替 え で 説 明 します imart type= head のプレースホルダー <imart type= head > 内 に 指 定 された 文 字 列 と 置 き 換 えられるプレースホルダーです <imart type="replaceheadtop"></imart> imuiajaxsubmit のメッセージ 表 示 用 関 数 imuiajaxsubmit の 結 果 を 表 示 するための 関 数 です <script> (function($) { $(document).ready(function() { var message = '<imart type="string" value=message />'; var options = <imart type="string" value=options />; var messagetype = '<imart type="string" value=messagetype />'; var detail = <imart type="string" value=detail />; if(messagetype == 'warning') { $.imuiformutil.showwarningmessage(message, detail, options); else { $.imuiformutil.showsuccessmessage(message, options); ); )(jquery); </script> header ヘッダー 部 分 を 実 装 します 標 準 テーマでは グローバルナビゲーション ユーティリティ マイメニューなどが 実 22

23 装 されています ロゴ 標 準 テーマでは intra-mart のロゴ 画 像 を 配 置 します この 画 像 をクリックすると テナント 管 理 で 設 定 するホーム URLへ 遷 移 します グローバルナビ 標 準 テーマでは ドロップダウンメニューを 配 置 します このドロップダウンメニューには テナント 管 理 のメニュー 設 定 でグローバルナビ(PC 用 )をメニューグループとして 定 義 したメニューが 含 まれます グローバルナビ(PC 用 )の 設 定 は テナント 管 理 者 操 作 ガイド を 参 照 してください マイメニュー 標 準 テーマでは マイメニューを 表 示 するためのアイコンを 配 置 します 検 索 ボックス 標 準 テーマでは サイト 内 をキーワード 検 索 するための 検 索 ボックスを 表 示 するためのアイコンを 配 置 します IM- ContentsSearch をインストールすると このアイコンが 表 示 され 検 索 ボックスから 全 文 検 索 を 行 うことができま す ユーティリティ ユーティリティは 個 人 設 定 やログイン/ログアウトなど 業 務 外 の 操 作 をまとめたメニュー 群 です ユーティリティは UserUtilityTag と そのタグが 呼 び 出 すプラグインで 構 成 されています 標 準 で 提 供 しているプラグインは ChangeToSPItemProvider スマートフォン 版 へ CompanyItemProvider 会 社 切 り 替 え LoginLogoutItemProvider ログインログアウト PersonalSettingsItemProvider 個 人 設 定 です プラグインは UtilityItemProvider インタフェースを 実 装 したクラスとして 作 ります このプラグインの 作 成 方 法 は ユーティリティプラグイン を 参 照 してください ヘルプドロップダウン ヘルプドロップダウンは 画 面 に 簡 易 ヘルプを 表 示 する 機 能 とドキュメントライブラリへのリンクをまとめたメ ニュー 群 です メニューはサイトヘルプカテゴリに 登 録 されたメニューアイテムが 表 示 されています 23

24 コラム ヘルプドロップダウンは 2014 Winter(Iceberg) からの 機 能 になります body ボディ 部 分 を 実 装 します 標 準 テーマは 以 下 のように 実 装 されています <div id="imui-container"> <imart type="replacecontents"/> </div> なお v5,v6 の 互 換 テーマでは グローバルナビゲーションもこの JSSP に 実 装 されています footer フッター 部 分 を 実 装 します 標 準 テーマでは Copyright 表 記 Powered by intra-mart 画 像 などが 実 装 されてい ます 注 意 使 用 許 諾 により Copyright 表 記 Powered by intra-mart 画 像 を 表 示 しないことは 禁 じられていま す 画 像 ロゴやアイコンなど テーマモジュール 固 有 の 画 像 ファイルを 格 納 します CSS テーマが 使 用 する CSS を 実 装 します CSS を 使 った 際 のパフォーマンス 劣 化 を 避 けつつ テーマモジュール 間 で 共 通 な 部 分 を 共 有 するた めに LESS を 用 いて 実 装 しています テーマモジュールのビルド 時 に LESS で 書 いた.less ファイルをコンパイルし CSS に 変 換 します また CSS の 最 小 化 も 行 います 変 換 した CSS と 最 小 化 した CSS の 両 方 を Web サーバ またはアプリケーションサーバ にデプロイします CSS 上 の 共 通 な 部 分 として 以 下 のものがあります これらはテーマモジュールを 作 成 する 際 に 必 須 なファイルで す intra-mart Accel Platform が 提 供 する CSS Module List intra-mart Accel Platform が 提 供 するコンポーネント 24

25 スクリプト 開 発 モデル JavaEE 開 発 モデル jqueryui が 定 義 するコンポーネント また これらのファイルが 要 求 するパラメータも 必 要 になります CSS のフォルダ ファイル 構 成 CSS をビルドするのに 必 要 なフォルダ LESS ファイルの 構 成 は 以 下 の 通 りです テーマモジュール 固 有 のファイルは body.less, footer.less, header.less, parameter.less の 4 つです theme.less は そのほかの LESS ファイルをインポートするように 実 装 されていて このファイルをコンパイルす ることで 全 ての 定 義 を 取 り 込 んだ theme.css を 生 成 することができます imart/ui/theme/テーマid/css/ theme.less 以 下 の.less ファイルをまとめる less ファイル theme テーマモジュール 固 有 の less ファイルを 配 置 します body.less #imui-container の 定 義 footer.less footer header.less テーマのヘッダ parameters.less LESS のパラメータ common テーマモジュール 共 通 の less ファイルを 配 置 します components.less intra-mart Accel Platform が 提 供 するコンポーネント default.less HTML 要 素 を 定 義 します icons.less CSS Sprites jqueryui.less jqueryui が 提 供 する CSS mixins.less 共 通 の 関 数 modules.less intra-mart Accel Platform が 提 供 する CSS モジュール parameters.less LESS の 共 通 パラメータ portal.less ポータル theme/parameters.less の 必 須 パラメータは 以 下 のものです 25

26 /* テーマの 基 準 色 のカラーコード /* テーマの 暗 い 基 準 色 のカラーコード /* テーマの 基 準 文 字 色 のカラーコード /* テーマの 基 準 色 を 背 景 色 としたときの 文 字 色 のカラーコード /* ボタンのハイライトのカラーコード /* ボタンのボーダーのカラーコード /* グローバルナビの 左 端 からの 位 置 /* ツールバーの 高 さ CSJS テーマが 使 用 する CSJS を 実 装 します 標 準 テーマでは グローバルナビ 検 索 ボックス マイメニュー iframeの 大 きさを 制 御 する 関 数 を 実 装 していま す iframe の 大 きさを 制 御 する 関 数 は テーマモジュール 共 通 のものです この 関 数 は 以 下 のように 実 装 されていま す id が IM_MAIN の iframe が 存 在 する 場 合 その 高 さ 幅 をウィンドウの 高 さ 幅 からグローバルナビゲー ションなどを 除 いた 大 きさまで 広 げる id が IM_MAIN の iframe の 中 の iframe に imui-no-resize-iframe が class 属 性 にセットされている 場 合 その iframe は 大 きさの 変 更 対 象 外 とする 26

27 (function($) { $(document).ready(function() { fitiframe(); $(window).resize(fitiframe); ); function fitiframe() { // ヘッダー 部 分 の 高 さを 取 得 する var header = $('#imui-header').height(); // iframe の 高 さは window の 高 さからヘッダーの 高 さを 引 いた 値 var height = $(window).height() - header; // #IM_MAIN の 中 の iframe の 大 きさをセット $('#IM_MAIN').find('iframe:not(".imui-no-resize-iframe")').height(height).width($(window).width()); // #IM_MAIN の 大 きさをセット $('#IM_MAIN').height(height).width($(window).width()); //iframe のコンテンツ 読 み 込 みが 終 了 したら iframe 内 の min-width を window の 幅 にする $($('#IM_MAIN')).load(function () { try { if ($('#IM_MAIN').get(0).contentDocument && $("#IM_MAIN").contents().find('body').css('minwidth') > $(window).width()) { $("#IM_MAIN").contents().find('body').css('min-width', $(window).width()); $("#IM_MAIN").contents().find('#imui-container').css('min-width', $(window).width()); catch(ignore) { ); )(jquery); 27

28 テーマモジュールの 作 成 ここではテーマモジュールの 作 成 方 法 について 説 明 します 標 準 テーマカスタマイズを 使 って 標 準 テーマをカスタマイズする 方 法 と HTML や CSS などはじめから 作 り 込 んでいくスクラッチ 開 発 の 方 法 があります 項 目 標 準 テーマカスタマイズの 概 要 スクラッチ 開 発 設 定 ファイル JSSP CSS 画 像 CSJS サンプル 準 備 設 定 ファイル JSSP CSS 画 像 CSJS 標 準 テーマカスタマイズの 概 要 ここでは 標 準 テーマカスタマイズの 概 要 を 説 明 します 標 準 テーマカスタマイズは 標 準 テーマ 標 準 テーマ(シンプル)をカスタマイズしたテーマモジュールを 生 成 する ツールです このツールは テーマの 標 準 的 な 色 とロゴファイルを 変 更 したテーマモジュールを 簡 単 に 生 成 するこ とを 目 的 としています カスタマイズ 可 能 な 項 目 は テーマの 標 準 的 な 色 ロゴ 画 像 グローバルナビの 開 始 位 置 です HTML を 修 正 するようなカスタマイズ 特 定 の 要 素 だけを 変 更 するような 細 やかなカスタマイズには 対 応 で きません カスタマイズできる 標 準 テーマには v5 v6 の 互 換 テーマは 含 まれません 詳 細 は 標 準 テーマカスタマイズ 操 作 ガイド を 参 照 してください 28

29 スクラッチ 開 発 必 要 なファイルをすべて 作 り 込 んでいく 方 法 です intra-mart e Builder for Accel Platform でユーザモジュール プロジェクトを 作 り テーマモジュールに 必 要 なファイルを 作 成 していきます 注 意 スクラッチ 開 発 を 行 うと 標 準 テーマやそのカスタマイズでは 実 現 できない 見 た 目 や 操 作 性 を 実 装 することが 可 能 です その 反 面 CSS モジュールや UI コンポーネントを 適 切 にカスタマイズしな いと 思 わぬ 画 面 のレイアウト 崩 れ CSJS の 競 合 などが 発 生 する 恐 れがあります スクラッチ 開 発 を 行 う 場 合 は 対 象 となる 全 画 面 で 全 操 作 を 行 ってもレイアウトの 崩 れがないこと 操 作 した 際 に CSJS のエラーが 発 生 しないことなどを 十 分 に 確 認 してください 設 定 ファイル theme-config src/main/conf/theme-config 配 下 にテーマID と 同 じファイル 名 を 持 つ xml ファイルを 作 成 します 内 容 は 設 定 ファイル を 参 考 にしてください message src/main/conf/message/platform/theme 配 下 にテーマID と 同 じフォルダ 名 のフォルダを 作 り その 中 にプロパ ティファイルを 作 成 します message を 参 照 し 各 言 語 分 プロパティファイルを 作 成 します JSSP src/main/jssp/src/theme 配 下 にテーマID と 同 じ 名 前 のフォルダを 作 成 し その 中 に PageBuilder が 要 求 する head, header, body, footer の 4 つの JSSP を 作 成 します head head の 内 容 を 含 む JSSP を 実 装 します これら 以 外 に jquery のプラグインなど 必 要 なものがあれば 追 記 してく ださい 既 存 のテーマからコピーするのが 簡 単 です この 場 合 テーマID を 修 正 する 必 要 があります <imart type="imuilink" href="ui/theme/テーマid/css/theme.css"></imart>... <imart type="imuiscript" src="ui/theme/テーマid/js/theme.js"></imart> header 必 要 な 要 素 を 実 装 してください 29

30 汎 用 的 なテーマモジュールを 作 成 する 場 合 ロゴ グローバルナビ マイメニュー 検 索 ボックス ユーティリ ティ ヘルプドロップダウン は 必 須 です 汎 用 的 ではないテーマモジュールを 作 成 する 場 合 必 須 な 要 素 はありません 必 要 な 要 素 だけを 実 装 してくださ い id に imui-header を 持 つ div や header 要 素 を 含 むようにしてください <header id="imui-header"> <!-- ロゴ -->... </header> ロゴ ロゴは img タグとして 実 装 することになると 思 います この 画 像 をクリックしたとき ホームURL へ 指 定 された URL に 遷 移 することが 望 ましい 動 きになります ホームURL を 取 得 するには ThemeManager.getEncodedHomeUrl を 呼 び 出 してください <a href='<imart type="string" value=home></imart>'><img src="ui/theme/テーマid/images/logo.png"></a> let thememanager = new ThemeManager(); home = thememanager.getencodedhomeurl(); グローバルナビ MenuGroupManager を 呼 び 出 すことで ユーザにひも 付 いたグローバルナビのメニュー 情 報 を 取 得 することが できます imuidropdown タグを 利 用 して 表 示 する 例 を 下 に 挙 げます 30

31 /* imuidropdown の data 属 性 にセットするメニュー 情 報 */ var menu = []; function init(request) { /* * グローバルナビ * imuidropdown の 形 式 にメニュー 情 報 を 変 換 します */ var menugroupmanager = new MenuGroupManager(); var resultobject = menugroupmanager.getavailablemenutree('im_global_nav_pc'); if (!resultobject.error) { var context = Contexts.getAccountContext(); var menutree = resultobject.data; walk(menutree, menu, context.locale); function walk(menutree, menu, locale) { if (menutree) { var menuitem = menutree.menuitem; var item = {; menu.push(item); item.label = 'Menu'; if (menuitem.displaynames[locale]) { item.label = menuitem.displaynames[locale].displayname; if (menuitem.type!== 'FOLDER') { item.href = menuitem.url; var children = menutree.children; if (children && children.length > 0) { item.children = []; for (var i = 0; i < children.length; i++) { var child = children[i]; walk(child, item.children, locale); <imart type="imuidropdown" data=menu /> マイメニュー マイメニューは CSJS で 実 装 されています header.js の 該 当 部 分 ( 行 目 )を 参 照 してください 検 索 ボックス 検 索 ボックスは SearchBoxTag を 実 装 してください <imart type="searchboxtag" id="imui-nav-global-search-wrapper"/> このタグは 下 記 のような HTML を 生 成 します 31

32 SearchBoxTag に 指 定 する id その 中 の imui-nav-global-search.imui-form-global-search.imui-formglobal-search-input.imui-form-global-search-submit に 対 してスタイルを 当 ててください また 表 示 / 非 表 示 を 切 り 替 えるように CSJS で 関 数 を 作 成 してください <ul id="imui-nav-global-search-wrapper"> <li class="imui-nav-global-search active"> <a><span class="im-ui-icon-common-16-search-white"></span></a> <form style="display: block;" method="get" action="search" target=" search_window "> <fieldset class="imui-form-global-search"> <input type="search" name="q" class="imui-form-global-search-input"> <input type="submit" value=" 検 索 " class="imui-form-global-search-submit"> </fieldset> </form> </li> </ul> ユーティリティ ユーティリティは UserUtilityTag を 実 装 してください <imart type="userutilitytag" id="imui-user-utility" /> このタグは 下 記 のような HTML を 生 成 します UserUtilityTag に 指 定 する id その 中 の li.imui-nav-global-pulldown さらにその 中 の ul.imui-nav-globalpulldown-inner に 対 してスタイルを 当 ててください また 表 示 / 非 表 示 を 切 り 替 えたり ドロップダウンするように CSJS で 関 数 を 作 成 してください 32

33 <ul id="imui-user-utility"> <li class="imui-nav-global-pulldown"> <a href="javascript:void(0);"> 青 柳 辰 巳 </a> <ul class="imui-nav-global-pulldown-inner" style="display:none"> <li> <a href="javascript:void(0)"> 個 人 設 定 </a> <ul> <li> <a href="...">パスワード</a> </li> <li> <a href="...">カレンダー</a> </li>... </ul> </li> <li> <a href="mobile_fw/to_sp">スマートフォン 版 へ</a> </li> <li> <a href="logout">ログアウト</a> </li> </ul> </li> </ul> ヘルプドロップダウン MenuGroupManager を 呼 び 出 すことで ユーザにひも 付 いたサイトヘルプのメニュー 情 報 を 取 得 することができ ます imuidropdown タグを 利 用 して 表 示 する 例 を 下 に 挙 げます 33

34 /* imuidropdown の data 属 性 にセットするメニュー 情 報 */ var helpmenu = []; function init(request) { /* * ヘルプドロップダウン * imuidropdown の 形 式 にメニュー 情 報 を 変 換 します */ var menugroupmanager = new MenuGroupManager(); var locale = Contexts.getAccountContext().locale; var resultobject = menugroupmanager.getavailablemenutree('im_site_help_pc'); var childrendata = []; if (!resultobject.error) { for(var index=0; index<resultobject.data.children.length; index++) { childrendata.push({ href: resultobject.data.children[index].menuitem.url, label: resultobject.data.children[index].menuitem.displaynames[locale].displayname, identity: resultobject.data.children[index].menuitem.id ) helpmenu = [ { iconclass:"im-ui-icon-common-16-help-white", children:childrendata ] <imart type="imuidropdown" data=helpmenu /> id 属 性 start_help_pc に 対 して 簡 易 ヘルプを 呼 び 出 すスクリプトを 実 装 してください また href 属 性 の URL に 遷 移 しないように URL を 無 効 化 してください body id が imui-container となる div と その 中 に <imart type= xxx /> を 必 ず 実 装 してください <div id="imui-container"> <imart type="replacecontents"/> </div> footer poweredbyim.png を 表 示 してください 34

35 <footer id="imui-footer"> <div class="imui-footer-inner"> <ul class="imui-footer-utility"> <li><img src="ui/theme/テーマid/images/poweredbyim.png"/></li> </ul> </div> </footer> CSS src/main/public/ui/theme 配 下 にテーマID と 同 じ 名 前 のフォルダを 作 成 し その 中 に css フォルダを 作 成 しま す このフォルダの 中 にテーマモジュールで 使 用 するCSSを 配 置 します CSS ファイルの 名 前 は theme.css, theme.min.css と 命 名 することをお 勧 めします head.html に imuilink タグの href 属 性 に theme.css と 記 述 さ れているので この 名 前 にすることで 修 正 を 最 小 限 に 抑 えることができます テーマが 使 用 するCSS の 通 り CSS は LESS を 利 用 して 生 成 しています テーマモジュール 間 で 共 通 な 部 分 を 共 有 するため スクラッチでテーマモジュールを 作 成 する 場 合 も LESS を 使 用 して CSS を 生 成 してください 基 となる LESS ファイル 群 は %CONTEXT_PATH%/ui/theme/ 元 とするテーマID/css に 配 置 されています こ のフォルダに 含 まれるファイルをコピーしてください LESS ファイル 群 をコンパイルし テーマ の CSS を 生 成 します また パフォーマンス 向 上 を 目 的 として 最 小 化 し たテーマの CSS も 生 成 することをお 勧 めします LESS ファイルをコンパイルするには lessc や koala などを 利 用 してください LESS ファイルの 修 正 は テーマ 固 有 の LESS ファイル theme/parameter.less にとどめることをお 勧 めします 共 通 の LESS ファイルに 対 してカスタマイズを 行 うことはお 勧 めしません 画 像 src/main/public/ui/theme 配 下 にテーマID と 同 じ 名 前 のフォルダを 作 成 し その 中 に images フォルダを 作 成 し ます このフォルダの 中 にテーマモジュールで 使 用 する 画 像 を 配 置 します テーマ 毎 に 必 要 な 画 像 は 以 下 の4つです マイメニューのアイコン btn_im_01.png ロゴ 画 像 logo.png Powred by intra-mart 画 像 poweredbyim.png テーマ 画 面 に 表 示 するサムネイル 画 像 thumbnail.png CSJS 35

36 src/main/public/ui/theme 配 下 にテーマID と 同 じ 名 前 のフォルダを 作 成 し その 中 に js フォルダを 作 成 します このフォルダの 中 にテーマモジュールで 使 用 する CSJS を 配 置 します CSJS ファイルの 名 前 は theme.js, theme.min.js と 命 名 することをお 勧 めします head.html に imuiscript タグの src 属 性 に theme.js と 記 述 され ているので この 名 前 にすることで 修 正 を 最 小 限 に 抑 えることができます テーマモジュールに 必 須 の iframeの 大 きさを 制 御 する 関 数 と 作 成 するテーマモジュールで 必 要 になる CSJS を 作 成 します iframe の 大 きさを 制 御 する 関 数 は %CONTEXT_PATH%/ui/theme/テーマID/js/im_fit_iframe.js として 配 置 さ れています サンプル ここでは 以 下 のようなテーマを 作 成 していきます テーマカラーは # とします ヘッダーは ロゴ グローバルナビ 検 索 ボックス ユーティリティ マイメニューの 全 要 素 を 配 置 します 標 準 テーマとの 違 いは 上 下 の2 段 とし 丈 夫 にロゴ 検 索 ボックス ユーティリティ マイメニュー を 下 段 にグローバルナビを 配 置 します フッタは Powred by intra-mart 画 像 だけを 配 置 します head, body は 標 準 テーマと 同 じにします テーマID は sample_theme とします 準 備 36

37 intra-mart e Builder for Accel Platform でモジュールプロジェクトを 作 成 しておきます モジュールプロジェクト の 作 り 方 は intra-mart e Builder for Accel Platform アプリケーション 開 発 ガイド の モジュール プロジェクト 作 成 を 参 照 してください 設 定 ファイル theme-config まず 設 定 ファイルを 作 成 します src/main/conf/theme-config/sample_theme.xml を 作 成 します 内 容 は 以 下 のようになります <?xml version="1.0" encoding="utf-8"?> <theme-config xmlns="http://www.intra-mart.jp/theme/theme" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://www.intra-mart.jp/theme/theme../../schema/theme.xsd "> <theme id="sample_theme" author="intra-mart" version="8.0" imagepath="ui/theme/sample_theme/images/thumbnail.png" theme-folder="theme/sample_theme" sortkey="0"> <client-type-info id="pc" default="false"/> </theme> </theme-config> message src/main/conf/message/platform/theme/sample_theme に 以 下 の4つのファイルを 作 成 します caption.properties caption_en.properties caption_ja.properties caption_zh_cn.properties 内 容 は 以 下 のようになります CAP.Z.IWP.THEME.SAMPLE_THEME.NAME=Sample Theme CAP.Z.IWP.THEME.SAMPLE_THEME.DESCRIPTION=This is sample theme. CAP.Z.IWP.THEME.テーマID.NAME をキーに 持 つ 値 がテーマ 名 CAP.Z.IWP.THEME.テーマ ID.DESCRIPTION をキーに 持 つ 値 がテーマの 説 明 になります また Java のプロパティファイルとなるため ASCII 以 外 の 文 字 列 は native2ascii 等 でエンコードしてください 37

38 JSSP 次 に JSSP を 作 成 します head 既 存 のテーマの head をコピーし それを 修 正 します ここでは 標 準 テーマ 青 色 をコピー 対 象 とします 以 下 のファイルを src/main/jssp/src/theme/sample_theme にコピーします %CONTEXT_PATH%/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/head.html %CONTEXT_PATH%/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/head.js head.html は 標 準 テーマ 青 色 のテーマID である im_theme_dropdown_blue を sample_theme に 書 き 換 え るように 修 正 します --- %CONTEXT_PATH%/imart/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/head.html +++ src/main/jssp/src/theme/sample_theme/head.html -10,7 +10,7 <link rel="icon" href="<imart type="string" value=base></imart>favicon.ico" type="image/x-icon" /> <link rel="shortcut Icon" type="img/x-icon" href="<imart type="string" value=base></imart>favicon.ico" /> - <imart type="imuilink" href="ui/theme/im_theme_dropdown_blue/css/theme.css"></imart> + <imart type="imuilink" href="ui/theme/sample_theme/css/theme.css"></imart> <imart type="imuilink" href="ui/css/imui.css"></imart> <link rel="stylesheet" type="text/css" href="ui/css/bootstrap.css"> -39,7 +39,7 <imart type="imuiscript" src=userlocalescript></imart> <imart type="imuiscript" src="ui/js/imui.js"></imart> <script src="ui/js/imui-form-util.js"></script> - <imart type="imuiscript" src="ui/theme/im_theme_dropdown_blue/js/theme.js"></imart> + <imart type="imuiscript" src="ui/theme/sample_theme/js/theme.js"></imart> <script type="text/javascript" src="csjs/im_json.js" ></script> <script type="text/javascript" src="csjs/im_window.js" ></script> head.js は 修 正 不 要 です header header は 以 下 のように 実 装 します src/main/jssp/src/theme/sample_theme/header.html 38

39 <header id="imui-header" class="container-fluid sample-header"> <div class="row-fluid"> <!-- ロゴ --> <div class="span6"> <a id="logo" href='<imart type="string" value=home></imart>'><img src="ui/theme/sample_theme/images/logo.png"></a> </div> <div class="span6"> <!-- マイメニュー --> <div style="float:right;"> <ul id="imui-nav-global-launcher-wrapper" style="display:inline-block;"> <li class="imui-nav-global-launcher"><a class="action"><img src="ui/theme/sample_theme/images/btn_im_01.png" alt="im launcher"></a></li> </ul> </div> <!-- ユーティリティ --> <div style="float:right;"> <imart type="userutilitytag" id="imui-user-utility"></imart> </div> <!-- 検 索 ボックス --> <div style="float:right;"> <imart type="searchboxtag" id="imui-nav-global-search-wrapper"></imart> </div> </div> </div> <div class="row-fluid"> <!-- グローバルナビ --> <div class="span12"> <imart type="imuidropdown" data=menu /> </div> </div> </header> src/main/jssp/src/theme/sample_theme/header.js 39

40 var home; var menu = []; function init(request) { /* * ロゴ */ var thememanager = new ThemeManager(); home = thememanager.getencodedhomeurl(); /* * グローバルナビ * imuidropdown の 形 式 にメニュー 情 報 を 変 換 します */ var menugroupmanager = new MenuGroupManager(); var resultobject = menugroupmanager.getavailablemenutree('im_global_nav_pc'); if (!resultobject.error) { var context = Contexts.getAccountContext(); var menutree = resultobject.data; var tmpmenu = []; walk(menutree, tmpmenu, context.locale); for (var i = 0; i < tmpmenu[0].children.length; i++) { // 再 帰 的 にメニューの 情 報 を 取 得 します menu.push(tmpmenu[0].children[i]); function walk(menutree, menu, locale) { if (menutree) { var menuitem = menutree.menuitem; var item = {; menu.push(item); item.label = 'Menu'; if (menuitem.displaynames[locale]) { item.label = menuitem.displaynames[locale].displayname; if (menuitem.type!== 'FOLDER') { item.href = menuitem.url; var children = menutree.children; if (children && children.length > 0) { item.children = []; for (var i = 0; i < children.length; i++) { var child = children[i]; walk(child, item.children, locale); body 既 存 のテーマの body をコピーします 40

41 以 下 のファイルを src/main/jssp/src/theme/sample_theme にコピーします %CONTEXT_PATH%/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/body.html %CONTEXT_PATH%/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/body.js footer footer は 以 下 のように 実 装 します src/main/jssp/src/theme/sample_theme/footer.html <footer> <img src="ui/theme/sample_theme/images/poweredbyim.png"/> </footer> src/main/jssp/src/theme/sample_theme/footer.js function init() { CSS 既 存 のテーマの LESS ファイルをコピーし それを 修 正 します 以 下 のフォルダを src/main/public/ui/theme/sample_theme にコピーします %CONTEXT_PATH%/ui/theme/im_theme_dropdown_blue/css 修 正 対 象 は src/main/public/ui/theme/sample_theme/css/theme 配 下 にある 以 下 の3ファイルです parameter.less footer.less header.less parameter.less テーマカラーを # にします その 他 の 値 は 修 正 #005678; footer.less footer の 背 景 を 黒 に Powred by intra-mart の 画 像 を 中 央 に 配 置 します 41

42 footer { background-color: #000; height: 100px; margin-top: 20px; text-align: center; img { margin-top: 24px; header.less ヘッダのスタイルを 指 定 します #imui-nav-global-launcher-wrapper {... #imui-header{ /* nav-global */ #imui-nav-global{ /* nav-global(wrap) */.imui-nav-global-wrap{ position:relative; min-width:960px; margin:0 10px; 画 像 既 存 のテーマの 画 像 ファイルをコピーし それを 修 正 します 以 下 のフォルダを src/main/public/ui/theme/sample_theme にコピーします %CONTEXT_PATH%/ui/theme/im_theme_dropdown_blue/images コピーしたファイルの 内 thumbnail.png のみこのテーマモジュールと 実 体 が 伴 いません あとでスクリーンショッ トを 取 得 し その 画 像 と 入 れ 替 えてください CSJS このテーマモジュールで 使 用 する 関 数 を 実 装 します 42

43 今 回 は iframe の 大 きさ 制 御 マイメニュー 検 索 ボックスの 制 御 関 数 を 実 装 します 詳 細 は Appendix を 参 照 してください 43

44 付 録 テーマモジュールのフォルダ ファイル 構 成 44

45 テーマモジュール build.xml build_js_css.xml message.properties message_en.properties message_ja.properties message_zh_cn.properties module.xml pom.xml src main conf message platform theme caption.properties caption_en.properties caption_ja.properties caption_zh_cn.properties テーマID caption.properties caption_en.properties caption_ja.properties caption_zh_cn.properties theme-config テーマID.xml jssp platform src theme テーマID body.html body.js footer.html footer.js head.html head.js header.html header.js public ui theme テーマID css CSS を 参 照 してください images logo.png poweredbyim.png thumbnail.png... js CSJS を 参 照 してください 45

46 テーマモジュールのサンプル 項 目 設 定 ファイル message sample_theme.xml JSSP head header body footer CSS parameter.less header.less footer.less CSJS フォルダ ファイル 構 成 設 定 ファイル message src/main/conf/message/platform/theme/sample_theme/caption.properties 1 2 CAP.Z.IWP.THEME.SAMPLE_THEME.NAME=Sample Theme CAP.Z.IWP.THEME.SAMPLE_THEME.DESCRIPTION=This is sample theme. caption_en.properties, caption_ja.properties, caption_zh_cn.properties も 同 じ 内 容 です sample_theme.xml src/main/conf/theme-config/sample_theme.xml 46

47 <?xml version="1.0" encoding="utf-8"?> <theme-config xmlns="http://www.intra-mart.jp/theme/theme" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://www.intra-mart.jp/theme/theme../../schema/theme.xsd "> <theme id="sample_theme" author="intra-mart" version="8.0" imagepath="ui/theme/sample_theme/images/thumbnail.png" theme-folder="theme/sample_theme" sortkey="0"> <client-type-info id="pc" default="false"/> </theme> </theme-config> JSSP head src/main/jssp/src/theme/sample_theme/head.html 47

48 <head> <meta charset="utf-8" /> <meta name="author" content="ntt DATA INTRAMART CORPORATION" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="google" content="notranslate"> <base href='<imart type="string" value=base></imart>' target="_self"> <link rel="icon" href='<imart type="string" value=base></imart>favicon.ico' type="image/x-icon" /> <link rel="shortcut Icon" type="img/x-icon" href='<imart type="string" value=base> </imart>favicon.ico' /> <imart type="string" value=libraries/> <imart type="replaceheadtop"></imart> <script> (function($) { $(document).ready(function() { var message = '<imart type="string" value=message />'; var options = <imart type="string" value=options />; var messagetype = '<imart type="string" value=messagetype />'; var detail = <imart type="string" value=detail />; if(messagetype == 'warning') { $.imuiformutil.showwarningmessage(message, detail, options); else { $.imuiformutil.showsuccessmessage(message, options); ); )(jquery); </script> </head> src/main/jssp/src/theme/sample_theme/head.js 48

49 let base; let message; let detail; let locale; let options = {; let messagetype = 'success'; let libraries; function init(request) { //imuiajaxsubmit で 送 られたメッセージキーをチェックし 存 在 すればメッセージを 表 示 if (request['imui-message-key'] == Client.get('x-jp-co-intra-mart-ajaxsubmit-message-key')) { message = Client.get('x-jp-co-intra-mart-ajaxsubmit-message'); messagetype = Client.get('x-jp-co-intra-mart-ajaxsubmit-message-type'); if (messagetype == 'warning') { detail = Client.get('x-jp-co-intra-mart-ajaxsubmit-detail-message'); if (request.getparameter("imui-message-closable")!= null) { options.closable = request.getparameter("imui-message-closable").getvalue() === 'true'? true : false; if (request.getparameter("imui-message-duration")!= null) { options.duration = request.getparameter("imui-message-duration").getvalue() - 0; if (request.getparameter("imui-message-escape")!= null) { options.escape = request.getparameter("imui-message-escape").getvalue() === 'true'? true : false; if(detail!= null){ detail = (ImJson.parseJSON(detail)[0]).toSource(); else { var a = new Array(); detail = a.tosource(); options = (options).tosource(); base = Web.base() + '/'; var thememanager = new ThemeManager(); var contents = new Content(themeManager.getLibrariesPath()); libraries = contents.execute(); header src/main/jssp/src/theme/sample_theme/header.html 49

50 <header id="imui-header" class="container-fluid sample-header"> <div class="row-fluid"> <!-- ロゴ --> <div class="span6"> <a id="logo" href='<imart type="string" value=home></imart>'><img src="ui/theme/sample_theme/images/logo.png"></a> </div> <div class="span6"> <!-- マイメニュー --> <div style="float:right;"> <ul id="imui-nav-global-laucher-wrapper" style="display:inline-block;"> <li class="imui-nav-global-launcher"><a class="action"><img src="ui/theme/sample_theme/images/btn_im_01.png" alt="im launcher"></a></li> </ul> </div> <!-- ユーティリティ --> <div style="float:right;"> <imart type="userutilitytag" id="imui-user-utility"></imart> </div> <!-- ヘルプドロップダウン --> <div style="float:right;"> <imart type="imuidropdown" data=helpmenu id="imui-nav-help-dropdown" style="top:10px;position:relative;"/> </div> <!-- 検 索 ボックス --> <div style="float:right;"> <imart type="searchboxtag" id="imui-nav-global-search-wrapper"></imart> </div> </div> </div> <div class="row-fluid"> <!-- グローバルナビ --> <div class="span12"> <imart type="imuidropdown" data=menu /> </div> </div> </header> src/main/jssp/src/theme/sample_theme/header.js 50

51 51

52 var home; var menu = []; var helpmenu = []; function init(request) { /* * ロゴ */ var thememanager = new ThemeManager(); home = thememanager.getencodedhomeurl(); /* * グローバルナビ * imuidropdown の 形 式 にメニュー 情 報 を 変 換 します */ var menugroupmanager = new MenuGroupManager(); var resultobject = menugroupmanager.getavailablemenutree('im_global_nav_pc'); if (!resultobject.error) { var context = Contexts.getAccountContext(); var menutree = resultobject.data; var tmpmenu = []; walk(menutree, tmpmenu, context.locale); for (var i = 0; i < tmpmenu[0].children.length; i++) { // 再 帰 的 にメニューの 情 報 を 取 得 します menu.push(tmpmenu[0].children[i]); gethelpdropdown(); function walk(menutree, menu, locale) { if (menutree) { var menuitem = menutree.menuitem; var item = {; menu.push(item); item.label = 'Menu'; if (menuitem.displaynames[locale]) { item.label = menuitem.displaynames[locale].displayname; if (menuitem.type!== 'FOLDER') { item.href = menuitem.url; var children = menutree.children; if (children && children.length > 0) { item.children = []; for (var i = 0; i < children.length; i++) { var child = children[i]; walk(child, item.children, locale); function gethelpdropdown(){ var menugroupmanager = new MenuGroupManager(); var locale = Contexts.getAccountContext().locale; var resultobject = menugroupmanager.getavailablemenutree('im_site_help_pc'); 52

53 var resultobject = menugroupmanager.getavailablemenutree('im_site_help_pc'); var childrendata = []; if (!resultobject.error) { for(var index=0; index<resultobject.data.children.length; index++) { childrendata.push({ href: resultobject.data.children[index].menuitem.url, label: resultobject.data.children[index].menuitem.displaynames[locale].displayname, identity: resultobject.data.children[index].menuitem.id ) helpmenu = [ { iconclass:"im-ui-icon-common-16-help-white", children:childrendata ] body src/main/jssp/src/theme/sample_theme/body.html <div id="imui-container"> <imart type="replacecontents"> </imart> </div> src/main/jssp/src/theme/sample_theme/body.js 1 function init(){ footer src/main/jssp/src/theme/sample_theme/footer.html <footer> <img src="ui/theme/sample_theme/images/poweredbyim.png"/> </footer> src/main/jssp/src/theme/sample_theme/footer.js 1 function init(){ 53

54 CSS parameter.less src/main/public/ui/theme/sample_theme/css/theme/parameter.less /* テーマの 標 準 的 な 色 のカラーコード /* テーマの 標 準 的 な 暗 い 色 のカラーコード /* テーマの 標 準 的 な 文 字 色 のカラーコード /* テーマの 標 準 的 な 色 を 背 景 色 としたときの 文 字 色 のカラーコード /* グローバルナビの 左 端 からの 位 置 158px; /* ボタンのハイライトのカラーコード /* ボタンのボーダーのカラーコード /* ツールバーの 高 さ /* グローバルナビの 高 さ @theme-header-color-type:linear; header.less src/main/public/ui/theme/sample_theme/css/theme/header.less 54

55 55

56 #logo { position: relative; top: 5px; #imui-user-utility { position: relative; top: 10px; > li.imui-nav-global-pulldown { > a { &.ui-state-active { > span.ui-button-text { color: #333333; > span.ui-button-text { color: #ffffff; #imui-nav-global-search-wrapper { position: relative; top: 13px; form { float: left; > li.imui-nav-global-search { > a { > span { float: right; margin: 3px; /* IM-Launcher area */ #imui-nav-global-laucher-wrapper { margin-top: 4px;.imui-nav-global-launcher{ margin-left:8px;.action{ z-index: 1000; position:relative;.imui-nav-global-launcher.active{ position:relative; /* IM-Launcher area box */.imui-box-launcher{ position:absolute; top:5px; 56

57 top:5px; right:20px; width:830px; z-index:999; padding:30px px; background: rgb(0,0,0); background: rgba(0,0,0,0.8);.theme-border-radius(10px, 10px, 10px, 10px);.theme-box-shadow(0px, 3px, 10px, #333333); a{ display:block; overflow:hidden;.imui-list-launcher{ margin-left:5px; margin-bottom:20px; li{ float:left; text-align:center; padding:0 10px 0 0; height:80px; width:80px; a { span.imui-list-launcher-label{ display:block; font-size:75%; text-decoration:none; padding:2px 10px; background:#000000; width:60px; overflow:hidden; white-space: normal; word-wrap: break-word; word-break: break-all; 10px, 10px, 10px); span.imui-list-launcher-info{ margin-left:140px; width:500px;.imui-btn-launcher-back{ position:absolute; left:10px; top:28px; border:1px solid #888888;.theme-border-radius(3px, 3px, 3px, 3px); a{ line-height:50px; 57

58 imui-btn-launcher-add{ position:absolute; right:68px; bottom:4px;.theme-border-radius(3px, 3px, 3px, 3px);.imui-btn-launcher-settings{ position:absolute; right:38px; bottom:4px;.theme-border-radius(3px, 3px, 3px, 3px);.imui-btn-launcher-close{ position:absolute; right:7px; bottom:7px; padding:0px 1px; border:1px solid #888888;.theme-border-radius(3px, 3px, 3px, 3px); #imui-header{ /* nav-global */ #imui-nav-global{ border-bottom:3px /* nav-global(wrap) */.imui-nav-global-wrap{ position:relative; min-width:960px; margin:0 10px; { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #EEE; position: absolute; top: 6px; right: 3px; 58

59 imui-triangle-down { width: 0; height: 0; border-top: 6px solid #EEE; border-left: 5px solid transparent; border-right: 5px solid transparent; footer.less src/main/public/ui/theme/sample_theme/css/theme/footer.less footer { background-color: #000; height: 100px; margin-top: 20px; text-align: center; img { margin-top: 24px; CSJS src/main/public/ui/theme/sample_theme/js/theme.js 59

60 60

61 /* * 検 索 ボックス */ (function($) { $.widget("imui.imuisearchbox", { active: false, _create: function() { var self = this; var form = $(this.element).find('form'); var trigger = $(this.element).find('li.imui-nav-global-search'); self.formarea = form; self._close(); trigger.children('a').bind('click', function() { if (self.active) { self._close(); this.focus(); else { self._open(); self.formarea.find('.imui-form-global-search-input').focus(); return false; ); form.bind('submit', function() { if (self.active) { self._close(); );, _open: function() { this.active = true; $(this.element.children('li')).addclass('active'); this.formarea.show();, _close: function() { this.active = false; $(this.element.children('li')).removeclass('active'); this.formarea.hide(); ); $.widget("imui.imuimenuitem", { defaultelement: "<ul>", delay: 150, options: { iconclass: null, position: { my: "left top", at: "right top", collision: 'flip none', _create: function() { var self = this; 61

62 var self = this; this.activemenu = this.element; this.element.addclass( "imui-menu ui-widget ui-widget-content" ).attr({ id: this.menuid, role: "menu" ).bind( "mouseover.imuimenuitem", function( event ) { if ( self.options.disabled ) { return; cleartimeout($.data(self.options.root.element, 'imui_dropdown_menu.closealltimer')); var target = $( event.target ).closest( ".imui-menu-item" ); if ( target.length ) { self.focus( event, target ); ).bind("mouseout.imuimenuitem", function( event ) { if ( self.options.disabled ) { return; cleartimeout($.data(self.options.root.element, 'imui_dropdown_menu.closealltimer')); var timer = settimeout(function() { self.closeall(); self.options.root._close();, 500); $.data(self.options.root.element, 'imui_dropdown_menu.closealltimer', timer); var target = $( event.target ).closest( ".imui-menu-item" ); if ( target.length ) { self.blur( event ); ).find('a').each(function() { var anchor = $(this); var iconclassname = anchor.data('iconclass') self.options.iconclass; if (anchor.data('icon')) { anchor.prepend( $('<span class="imui-menu-item-icon"/>').css('background-image', 'url(' + anchor.data('icon') + ')') ); else if (iconclassname) { anchor.prepend( $('<span class="imui-menu-item-icon"/>').addclass(iconclassname) ); if ($(anchor).next('ul').length == 0) { anchor.bind('click', function() { self.closeall(); self.options.root._close(); 62

63 , ); ).end().imuiscrollmenu({ position: this.options.position ).find('ul').imuiscrollmenu({position: this.options.position); this.refresh();, refresh: function() { var self = this; // initialize nested menus var submenus = this.element.find("ul:not(.imui-menu)").addclass( "imui-menu ui-widget ui-widget-content" ).attr("role", "menu").hide(); // don't refresh list items that are already adapted var items = submenus.add(this.element).children( "li:not(.imui-menu-item):has(a)" ).addclass( "imui-menu-item" ).attr( "role", "presentation" ); items.children( "a" ).addclass( " ui-state-default" ).attr( "tabindex", -1 ).attr( "role", "menuitem" ); items.children('a').each(function() { var html = $(this).html(); $(this).empty().append($('<span class="imui-menu-item-label"/>').wrapinner(html)); ); submenus.each(function() { var menu = $(this); var item = menu.prev("a"); item.attr("aria-haspopup", "true").prepend('<div class="imui-triangle-right"></div>'); );, focus: function( event, item ) { var self = this; this.blur(); if ( this._hasscroll() ) { var bordertop = parsefloat( $.curcss( this.element[0], "bordertopwidth", true) ) paddingtop = parsefloat( $.curcss( this.element[0], "paddingtop", true) ) 0, offset = item.offset().top - this.element.offset().top - bordertop - paddingtop, scroll = this.element.scrolltop(), elementheight = this.element.height(), 63

64 elementheight = this.element.height(), itemheight = item.height(); if ( offset < 0 ) { this.element.scrolltop( scroll + offset ); else if ( offset + itemheight > elementheight ) { this.element.scrolltop( scroll + offset - elementheight + itemheight ); this.active = item.first().children( "a" ).addclass( "ui-state-focus" ).end(); // highlight active parent menu item, if any this.active.parent().closest(".imui-menu-item").children("a:first").addclass("ui-stateactive"); self.timer = settimeout(function() { self._close();, self.delay) var nested = $(">ul", item); if (nested.length && /^mouse/.test(event.type)) { self._startopening(nested); this.activemenu = item.parent(); this._trigger( "focus", event, { item: item );, blur: function(event) { if (!this.active) { return; cleartimeout(this.timer); this.active.children( "a" ).removeclass( "ui-state-focus" ); this.active = null;, _startopening: function(submenu) { cleartimeout(this.timer); var self = this; self.timer = settimeout(function() { self._close(); self._open(submenu);, self.delay);, _open: function(submenu) { cleartimeout(this.timer); this.element.find(".imui-menu").not(submenu.parents()).hide().attr("aria-hidden", "true"); /* var position = $.extend({, { of: this.active, $.type(this.options.position) == "function" 64

65 , $.type(this.options.position) == "function"? this.options.position(this.active) : this.options.position ); submenu.show().removeattr("aria-hidden").attr("aria-expanded", "true").position(position); */ submenu.width(submenu.width()); submenu.show().removeattr("aria-hidden").attr("aria-expanded", "true").css('opacity', 0).imuiScrollMenu('adjust',$.extend(this.options.position, {of: submenu.parent().parent())).css('opacity', 1);, closeall: function() { this.element.find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end().find("a.ui-state-active").removeclass("ui-state-active"); this.blur(); this.activemenu = this.element;, _close: function() { this.active.parent().find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end().find("a.ui-state-active").removeclass("ui-state-active");, _hasscroll: function() { // TODO: just use.prop() when we drop support for jquery older than 1.6 return this.element.height() < this.element[ $.fn.prop? "prop" : "attr" ]( "scrollheight" );, select: function( event ) { // save active reference before closeall triggers blur var ui = { item: this.active ; this.closeall(); this._trigger( "select", event, ui );, destroy: function() { this.element.removeattr('aria-activedescendant').find('.imui-menu').andself().removeclass('imui-menu ui-widget ui-widget-content ').removeattr('role').removeattr('tabindex').removeattr('aria-labelledby').removeattr('aria-expanded').removeattr('aria-hidden').show(); 65

66 show(); this.element.find('.imui-menu-item').unbind('.imuimenuitem').removeclass('imui-menu-item').removeattr('role').children('a').removeclass('ui-state-hover').removeattr('tabindex').removeattr('role').removeattr('aria-haspopup').removeattr('id').children('.ui-icon').remove(); $.Widget.prototype.destroy.call(this); ); $.widget("imui.imui_dropdown_menu",{ options: { iconclass: null, menubarclass: '',//'imui-nav-global-list imui-menubar ui-widget-header ui-helper-clearfix', menubaritemclass: '',//'imui-menubar-item', activeforie8: null, _create: function() { // this will be ul var that = this; // items will be toplevel li var items = this.items = this.element.children('li').addclass(that.options.menubaritemclass).children('a'); // let only the first item receive focus items.slice(1).attr( "tabindex", -1 ); //this.element.addclass("imui-menubar ui-widget-header ui-helper-clearfix"); this.element.addclass(this.options.menubarclass); items.each(function() { var anchor = $(this); anchor.bind('mouseenter.imui_dropdown_menu', function(event) { anchor.addclass('ui-state-hover'); ).bind('mouseleave.imui_dropdown_menu', function(event) { anchor.removeclass('ui-state-hover'); ).bind('click.imui_dropdown_menu', function(event) { if (anchor.next('ul').size() == 0) { that._trigger('select', event, {item: anchor.closest('li')); ); ); items.next('ul') 66

67 items.next('ul').imuimenuitem({ select: function( event, ui ) { ui.item.parents( "ul.imui-menu:last" ).hide(); that._trigger( "select", event, ui ); that._close(); // TODO what is this targetting? there's probably a better way to access it $(event.target).prev().focus();, iconclass: this.options.iconclass, root: this ).hide(); items.each(function() { var input = $(this), menu = input.next('ul'); input.bind("click.imui_dropdown_menu focus.imui_dropdown_menu mouseenter.imui_dropdown_menu mouseleave.imui_dropdown_menu", function(event) { // ignore triggered focus event if ( event.type == "focus" &&!event.originalevent ) { return; //サブメニューがないメニューは eventをそのまま 続 行 if ($(this).next('ul').length!= 0) { event.preventdefault(); if ( event.type == "click" && menu.is( ":visible" ) && that.activemenu && that.activemenu[0] == menu[0] ) { that._close(); return; if ( ( that.open && event.type == "mouseenter" ) event.type == "click" ) { that._open( event, menu ); if (event.type == 'mouseenter') { cleartimeout($.data(that, 'imui_dropdown_menu.closealltimer')); that._open(event, menu); return; if (event.type == 'mouseleave' && menu.is(':visible')) { cleartimeout($.data(that.element, 'imui_dropdown_menu.closealltimer')); var timer = settimeout(function() { that._close();, 500); $.data(that.element, 'imui_dropdown_menu.closealltimer', timer); return; ).addclass('ui-button ui-widget ui-button-text-only imui-menubar-link').wrapinner( "<span class='ui-button-text'></span>" ).removeclass( "ui-button-text-only" ).addclass( "ui-button-text-icon-secondary" ); 67

68 //for IE8 if (input.width() > input.children().outerwidth(true)) { input.width(input.children().outerwidth(true)); //サブメニューがある 場 合 は 下 向 き 三 角 アイコンを 追 加 if (input.next('ul').length!= 0) { input.prepend('<div class="imui-triangle-down" style="position: absolute;top: 10px;right:.5em;"></div>'); ); $(that.element).each(function(event){ $(this).bind('focusin.imui_dropdown_menu', function(event) { cleartimeout(that.closetimer); ); $(this).bind('focusout.imui_dropdown_menu', function(event) { that.closetimer = settimeout(function() { that._close(event);, 100); ); );, _close: function(event, menu) { if (!this.activemenu!this.activemenu.length ) { //for IE8 if ($.data(this.element, 'imui_dropdown_menu.active')!= null) { this.activemenu = $.data(this.element, 'imui_dropdown_menu.active'); else { return; this.element.children('li').removeclass('active'); this.activemenu.imuimenuitem("closeall").hide(); this.activemenu.prev().removeclass("ui-state-active").removeattr("tabindex"); this.activemenu = null; this.open = false; //for IE8 this.options.activeforie8 = null; $.removedata(this.element, 'imui_dropdown_menu.active');, _open: function(event, menu) { var that = this; if (menu.length == 0) { return; if ( this.activemenu && this.activemenu[0] == menu[0] ) { //for IE8 68

69 //for IE8 if (this.options.activeforie8!= null) { this.activemenu = this.options.activeforie8; else { return; this.element.children('li').addclass('active'); if (this.activemenu) { this.activemenu.imuimenuitem("closeall").hide(); this.activemenu.prev().removeclass("ui-state-active"); var button = menu.prev().addclass("ui-state-active"); menu.width(menu.width()); if (menu.width() < menu.parent().width()) { menu.width(menu.parent().width()); this.activemenu = menu.show().css('opacity', 0).imuiScrollMenu('adjust', { collision: 'flip none', my: 'right top', at: 'right bottom', of: button, true).css('opacity', 1); //for IE8 this.options.activeforie8 = this.activemenu; $.data(this.element, 'imui_dropdown_menu.active', this.activemenu); this.open = true; this._trigger('select', event, {item: this.activemenu.closest('li'));, destroy: function() { this.element.find(':imui-imuimenu').imuimenuitem('destroy'); this.element.removeclass('imui-menubar ui-widget-header ui-helper-clearfix').removeattr('role').unbind('.imui_dropdown_menu'); this.element.children('li').removeclass('imui-menubar-item').removeattr('role'); $('> li > a', this.element).removeclass('ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default').removeattr('role').unbind('.imui_dropdown_menu'); 69

70 unbind('.imui_dropdown_menu'); $.Widget.prototype.destroy.call(this); ); /* * マイメニュー */ $(document).ready(function() { $('#imui-user-utility').imui_dropdown_menu(); $('#start_help_pc').children().removeattr('href'); var starthelp = function(){ $('body').imuisitetour('start'); ; $('body').imuisitetour(); $('#start_help_pc').on('click.sitehelp',starthelp); var parent = $(this).parent()[0]; var removelauncher = function() { $('.imui-box-launcher').remove(); $('div[aria-labelledby=ui-dialog-title-imui-launcher-add-dialog]').remove(); $('#imui-launcher-add-dialog').remove(); $(parent).removeclass('active'); ; $('a', '.imui-nav-global-launcher').bind('click', function(event) { event.preventdefault(); if ($('.imui-box-launcher').size() == 0) { var launcher = new Array(); launcher.push('<div class="imui-box-launcher">') launcher.push('<div id="imui-list-launcher" class="imui-list-launcher"><ul><li></li> </ul></div>'); launcher.push('<p class="imui-btn-launcher-back"><a href="javascript: void(0);"> <span></span></a></p>'); launcher.push('<p class="imui-btn-launcher-add"><a href="javascript: void(0);"> <span></span></a></p>'); launcher.push('<p class="imui-btn-launcher-settings"><a href="user/mymenu/settings"><span class="im-ui-icon-common-24-settings"></span></a></p>'); launcher.push('<p class="imui-btn-launcher-close"><a href="javascript: void(0);"> <span></span></a></p>'); launcher.push('<div id="imui-launcher-add-dialog"></div>'); launcher.push('</div>'); $(this).after(launcher.join('')); $('.imui-box-launcher').hide().fadein(200); $('.imui-box-launcher.imui-btn-launcher-back').hide(); $('.imui-box-launcher.imui-btn-launcher-add').hide(); $('.imui-box-launcher.imui-btn-launcher-settings').hide(); var parent = $(this).parent()[0]; $(parent).addclass('active'); $.ajax({ headers:{'x-jp-co-intra-mart-ajax-request-from-imui-form-util':'true', 70

71 headers:{'x-jp-co-intra-mart-ajax-request-from-imui-form-util':'true', datatype:'text', type:'get', url:'user/mymenu/js_launcher', data:{, success:function(data) { eval(data.replace(/<\/?script[^>]*>/g, ''));, error:function(request, textstatus, errorthrown) { removelauncher(); if (jquery.imuiformutil && jquery.imuiformutil.transitiontoerrorpage) { jquery.imuiformutil.transitiontoerrorpage(request, textstatus, errorthrown); else { imuishowerrormessage(request.statustext + '(' + request.status + ')', ''); ); $('.imui-box-launcher.imui-btn-launcher-back a').mouseover(function() { $('.imui-btn-launcher-back').addclass('ui-state-hover'); $(this).find('span:first').removeclass('im-ui-icon-launcher-16-move-upgray').addclass('im-ui-icon-launcher-16-move-up-black'); ).mouseout(function() { $('.imui-btn-launcher-back').removeclass('ui-state-hover'); $(this).find('span:first').removeclass('im-ui-icon-launcher-16-move-upblack').addclass('im-ui-icon-launcher-16-move-up-gray'); ).mouseout(); $('.imui-box-launcher.imui-btn-launcher-add a').mouseover(function() { $('.imui-btn-launcher-add').addclass('ui-state-hover'); ).mouseout(function() { $('.imui-btn-launcher-add').removeclass('ui-state-hover'); ).mouseout(); $('.imui-box-launcher.imui-btn-launcher-settings a').mouseover(function() { $('.imui-btn-launcher-settings').addclass('ui-state-hover'); ).mouseout(function() { $('.imui-btn-launcher-settings').removeclass('ui-state-hover'); ).mouseout(); $('.imui-box-launcher.imui-btn-launcher-close a').click(function() { $('.imui-box-launcher').fadeout(200, function() { removelauncher(); ); ).mouseover(function() { $('.imui-btn-launcher-close').addclass('ui-state-hover'); $(this).find('span:first').removeclass('im-ui-icon-launcher-16-closegray').addclass('im-ui-icon-launcher-16-close-black'); ).mouseout(function() { $('.imui-btn-launcher-close').removeclass('ui-state-hover'); $(this).find('span:first').removeclass('im-ui-icon-launcher-16-closeblack').addclass('im-ui-icon-launcher-16-close-gray'); ).mouseout(); else { $('.imui-box-launcher').fadeout(200, function() { removelauncher(); 71

72 removelauncher(); ); ); ); )(jquery); /* * iframe の 大 きさ 制 御 関 数 */ (function($) { $(document).ready(function() { fitiframe(); $(window).resize(fitiframe); ); function fitiframe() { var header = $('#imui-header').height(); var height = $(window).height() - header; $('#IM_MAIN').find('iframe:not(".imui-no-resizeiframe")').height(height).width($(window).width()); $('#IM_MAIN').height(height).width($(window).width()); //iframe のコンテンツ 読 み 込 みが 終 了 したら iframe 内 の min-width を window の 幅 にする $($('#IM_MAIN')).load(function () { try { if ($('#IM_MAIN').get(0).contentDocument && $("#IM_MAIN").contents().find('body').css('min-width') > $(window).width()) { $("#IM_MAIN").contents().find('body').css('min-width', $(window).width()); $("#IM_MAIN").contents().find('#imui-container').css('min-width', $(window).width()); catch(ignore) { ); )(jquery); フォルダ ファイル 構 成 src main conf message platform theme sample_theme caption.properties caption_en.properties caption_ja.properties caption_zh_cn.properties routing-jssp-config routing-service-config theme-config 72

73 theme-config sample_theme.xml generated java jssp src theme sample_theme body.html body.js footer.html footer.js head.html head.js header.html header.js plugin public ui theme sample_theme css common components.less default.less icons.less jqueryui.less mixins.less modules.less parameters.less portal.less theme body.less footer.less header.less parameters.less theme.css theme.less theme.min.css images btn_im_01.png logo.png poweredbyim.png thumbnail.png js theme.js theme.min.js resources schema storage public system webapp test conf 73

74 conf message routing-jssp-config routing-service-config generated java jssp src plugin public resources schema storage public system webapp ユーティリティプラグイン ここではユーティリティプラグインの 作 成 の 概 要 と サンプルプログラムについて 説 明 します 項 目 ユーティリティプラグイン 作 成 の 概 要 プラグイン 本 体 plugin.xml サンプルプログラム プラグイン 本 体 plugin.xml 処 理 を 実 行 するサーバ 側 のプログラムを 呼 び 出 すための CSJS 処 理 を 実 行 するサーバ 側 のプログラム 実 行 例 サンプルプログラムの 実 装 例 プラグイン 本 体 plugin.xml CSJS フォルダ 構 成 ユーティリティプラグイン 作 成 の 概 要 ここではユーティリティプラグインの 作 成 の 概 要 を 説 明 します ユーティリティプラグインは PluginManager が 管 理 するプラグインとして 実 装 します このプラグインは 以 下 の 要 素 で 構 成 されます plugin.xml プラグイン 本 体 74

75 この 他 に 必 要 であれば 以 下 のような 要 素 を 追 加 します 処 理 を 実 行 するサーバ 側 のプログラムを 呼 び 出 すための CSJS 処 理 を 実 行 するサーバ 側 のプログラム Java JSSP 設 定 ファイル ルータの 設 定 ファイル 多 言 語 ファイル プラグイン 本 体 プラグイン 本 体 は UtilityItemProvider インタフェースを 実 装 したクラスとして 作 ります サブメニューを 持 つプラグインを 作 成 する 場 合 UtilityItemProvider#getChildrenを 実 装 し UtilityItemProvider を 実 装 したクラスのインスタンスを 返 します プラグインが 呼 び 出 されると ul > li > a のような DOM が 構 築 されます 対 象 のリンクをクリックした 際 の 動 作 は a タグの href で 表 現 したり a タグに id を 割 り 振 り その id で 何 らかの 処 理 を 行 うように 実 装 することになりま す isvisible getlabel geturl scriptsource getchildren toliststring plugin.xml PluginManager が 管 理 する plugin.xml を 作 成 します extension 要 素 の point 属 性 には jp.co.intra_mart.foundation.ui.theme.utility.item を 指 定 してください その 他 の 要 素 属 性 については PluginManager の API リファレンス を 参 照 してください 処 理 を 実 行 するサーバ 側 のプログラムを 呼 び 出 すための CSJS ユーティリティメニューをクリックした 際 クライアント 側 で 動 作 するロジックを 実 装 します オプショナルです 処 理 を 実 行 するサーバ 側 のプログラム ユーティリティメニューをクリックした 際 サーバ 側 で 動 作 するロジックを 実 装 します オプショナルです 設 定 ファイル 75

76 必 要 であれば 以 下 のようなファイルを 作 成 します ルータの 設 定 ファイル 多 言 語 ファイル サンプルプログラム ここでは ユーティリティプラグインのサンプルとして ログインユーザのロケールを 切 り 替 えるプラグインを 作 成 し ます このプラグインは UtilityItemProvider を 実 装 したクラスとして 実 装 します メニューは 現 在 のロケールを 表 示 す る 親 メニューと 選 択 可 能 なロケールの 一 覧 を 表 示 するサブメニューとで 構 成 します ロケール 切 り 替 えのサーバ 側 のプログラムは 既 存 のロケール 切 り 替 えの 仕 組 みを 流 用 します プラグイン 本 体 plugin.xml 処 理 を 実 行 するサーバ 側 のプログラムを 呼 び 出 すための CSJS 処 理 を 実 行 するサーバ 側 のプログラム 既 存 のロケール 切 り 替 えの 仕 組 みを 流 用 します プラグイン 本 体 jp.co.intra_mart.sample.localeitemprovider として 実 装 します 以 下 の 必 要 なメソッドを 実 装 します isvisible getlabel geturl scriptsource getchildren toliststring isvisible ここでは 認 証 済 ユーザであればこのプラグインを 表 示 できるようにします public boolean isvisible() { AccountContext context = Contexts.get(AccountContext.class); return context.isauthenticated(); getlabel ここでは 認 証 済 ユーザのロケールを 表 示 します アカウントコンテキストに 格 納 されているロケールを 表 示 します 表 示 する 際 にエスケープを 行 います 76

77 public String getlabel() throws JspException { AccountContext context = Contexts.get(AccountContext.class); Locale locale = context.getlocale(); String name = locale.getdisplayname(locale); return Util.escape(name, Escaping.STRICT_HTML); geturl ここでは 表 示 だけを 行 い 処 理 はしないため null を 返 します public String geturl() throws JspException { return null; scriptsource ここでは CSJS のパスを 返 します UserUtilityTag プラグインには CSJS の 実 装 を 直 接 HTML に 出 力 する 方 法 がないため 外 部 ファイルに 実 装 し た 関 数 を 呼 び 出 すという 方 法 を 採 ります このメソッドが 返 すパスに CSJS の 実 装 を 記 述 します public String scriptsource() { return "sample/js/changelocale.js"; getchildren ここでは システムに 登 録 されているロケールの 一 覧 を 返 します また 返 すクラスは UtilityItemProvider を 実 装 したクラスとして 実 装 します public List<UtilityItemProvider> getchildren() throws JspException { final List<UtilityItemProvider> children = new ArrayList<UtilityItemProvider>(); // システムロケールの 一 覧 を 作 成 します LocaleInfo[] localeinfos = SystemLocale.getLocaleInfos(); for (LocaleInfo localeinfo: localeinfos) { children.add(new LocaleListItemProvider(localeInfo)); return children; toliststring このプラグインが 返 す HTML を 生 成 します ul > li > a となるように 実 装 します また サブメニューを ul > li の 中 の ul として 返 すように 実 装 します 77

78 public String toliststring() throws JspException { final StringBuilder buf = new StringBuilder(); final String url = geturl() == null? StringUtil.EMPTY_STRING : "href=\"" + geturl() + "\""; buf.append("<li><a ").append(url).append(">").append(getlabel()).append("</a>"); if (getchildren()!= null) { buf.append("<ul>"); for (final UtilityItemProvider item : getchildren()) { buf.append(item.toliststring()); buf.append("</ul>"); buf.append("</li>"); return buf.tostring(); サブメニューの 項 目 の 一 つ 一 つはこのクラスで 実 装 します private static class LocaleListItemProvider implements UtilityItemProvider { private LocaleInfo localeinfo; public LocaleListItemProvider(final LocaleInfo localeinfo) { this.localeinfo = localeinfo; ラベルとして システムロケールの 一 つを 表 示 します インスタンス 化 した 際 のロケールの 値 を 表 示 します public String getlabel() throws JspException { return Util.escape(this.localeInfo.getDisplayName(), Escaping.STRICT_HTML); クリックした 際 の URL を 返 します ここで CSJS の 関 数 を 呼 び 出 すことになります public String geturl() throws JspException { return String.format("javascript:changeLocale('%s');", this.localeinfo.getlocale()); HTML として li タグを 返 します public String toliststring() throws JspException { final StringBuilder buf = new StringBuilder(); final String url = "href=\"" + geturl() + "\""; buf.append("<li><a ").append(url).append(">"); buf.append(getlabel()).append("</a>"); buf.append("</li>"); return buf.tostring(); plugin.xml 78

79 プラグインの 設 定 を 記 述 します extension 要 素 の point 属 性 に jp.co.intra_mart.foundation.ui.theme.utility.item を 指 定 します また item 要 素 の classname 属 性 に プラグイン 本 体 のクラス 名 を 指 定 します <?xml version="1.0" encoding="utf-8"?> <plugin> <extension point="jp.co.intra_mart.foundation.ui.theme.utility.item"> <item id="sample_localeitemprovider" name="localeitemprovider" classname="jp.co.intra_mart.sample.localeitemprovider" version="1.0" rank="1" enable="true" /> </extension> </plugin> 処 理 を 実 行 するサーバ 側 のプログラムを 呼 び 出 すための CSJS ここでは 簡 単 のため 既 存 のロケール 切 り 替 えの 仕 組 みを 呼 び 出 すような 実 装 を 行 います プラグイン 本 体 の scriptsource メソッドが 返 す 値 である sample/js/changelocale.js に 下 記 の 実 装 を 記 述 しま す アクセス 先 の user/settings/locale/update_locale は ルータの 設 定 サーバ 側 のロジックの 実 装 などはテナ ント 管 理 モジュールで 実 装 されています function changelocale(locale) { (function($, locale) { var form = $('<form/>').attr('id', 'sampleform') // 既 存 のロジックを 呼 び 出 します.attr('action', 'user/settings/locale/update_locale').attr('method','post'); var locale = $('<input/>').attr('type','hidden').attr('name','locale').attr('value',locale); form.append(locale); form.appendto('body'); imuiajaxsubmit('#sampleform', 'POST', 'json', 'home', []); )(jquery, locale); 処 理 を 実 行 するサーバ 側 のプログラム このサンプルでは 実 装 を 行 いません サーバ 側 のロジックはテナント 管 理 モジュールで 実 装 されています 79

80 実 行 例 このプラグインをデプロイすると 以 下 のような 画 面 が 表 示 され ロケールを 切 り 替 えることができるようになりま す サンプルプログラムの 実 装 例 プラグイン 本 体 src/main/java/jp/co/intra_mart/sample/localeitemprovider.java 80

81 81

82 package jp.co.intra_mart.sample; import java.util.arraylist; import java.util.list; import java.util.locale; import javax.servlet.jsp.jspexception; import jp.co.intra_mart.common.aid.jdk.java.lang.stringutil; import jp.co.intra_mart.foundation.context.contexts; import jp.co.intra_mart.foundation.context.model.accountcontext; import jp.co.intra_mart.foundation.i18n.locale.localeinfo; import jp.co.intra_mart.foundation.i18n.locale.systemlocale; import jp.co.intra_mart.foundation.ui.tags.theme.utilityitemprovider; import jp.co.intra_mart.system.ui.util.util; import org.jamon.escaping.escaping; public class LocaleItemProvider implements UtilityItemProvider { private static class LocaleListItemProvider implements UtilityItemProvider { private LocaleInfo localeinfo; /** * コンストラクタ localeinfo ロケール 情 報 */ public LocaleListItemProvider(final LocaleInfo localeinfo) { this.localeinfo = localeinfo; /** * サブメニューを 返 します null:サブメニューはありません JspException public List<UtilityItemProvider> getchildren() throws JspException { return null; /** * このメニューのラベルを 返 します ロケール 名 JspException エラーが 発 生 したときにスローします public String getlabel() throws JspException { return Util.escape(this.localeInfo.getDisplayName(), Escaping.STRICT_HTML); /** * このメニューをクリックしたときの URL を 返 します * <br/> * このメニューをクリックするとロケールを 82 選 択 したことになるので CSJS のロケール 変 更 リクエス

83 * このメニューをクリックするとロケールを 選 択 したことになるので CSJS のロケール 変 更 リクエス トを 送 信 するように 実 装 します JspException エラーが 発 生 したときにスローします public String geturl() throws JspException { return String.format("javascript:changeLocale('%s');", this.localeinfo.getlocale()); /** * このUtilityItemProviderを 表 示 するかどうかを 返 します true: 表 示 する public boolean isvisible() { return true; /** * このUtilityItemProviderが 使 用 する 外 部 CSJSのパスを 返 します null: 外 部 CSJSを 使 用 しません public String scriptsource() { return null; /** * このUtilityItemProviderのHTML 表 現 を 返 します * <br/> * 親 メニューのリストの 子 要 素 とします メニュー 項 目 とする liタグ JspException public String toliststring() throws JspException { final StringBuilder buf = new StringBuilder(); final String url = "href=\"" + geturl() + "\""; buf.append("<li><a ").append(url).append(">"); buf.append(getlabel()).append("</a>"); buf.append("</li>"); return buf.tostring(); /** * 子 メニューのリストを 返 します List 子 メニューのリスト JspException エラーが 発 生 したときにスローします public List<UtilityItemProvider> getchildren() throws JspException { 83

84 final List<UtilityItemProvider> children = new ArrayList<UtilityItemProvider>(); LocaleInfo[] localeinfos = SystemLocale.getLocaleInfos(); for (LocaleInfo localeinfo: localeinfos) { children.add(new LocaleListItemProvider(localeInfo)); return children; /** * このプラグインを 表 示 したときのラベルを 返 します ラベル JspException エラーが 発 生 したときにスローします public String getlabel() throws JspException { AccountContext context = Contexts.get(AccountContext.class); Locale locale = context.getlocale(); String name = locale.getdisplayname(locale); return Util.escape(name, Escaping.STRICT_HTML); /** * クリックしたときの 遷 移 先 URL を 返 します null JspException エラーが 発 生 したときにスローします public String geturl() throws JspException { return null; /** * ロケールの 切 り 替 え 項 目 を 表 示 するかどうかを 決 定 します * <br/> * 認 証 済 ユーザであれば 切 り 替 え 項 目 を 表 示 します 切 り 替 え 項 目 を 表 示 する 場 合 は true, しない 場 合 は false public boolean isvisible() { AccountContext context = Contexts.get(AccountContext.class); return context.isauthenticated(); /** * このプラグインを 動 作 させるのにCSJSが 必 要 な 場 合 そのパスを 返 します public String scriptsource() { return "sample/js/changelocale.js"; 84

85 /** * このUtilityItemProviderのHTML 表 現 を 返 します liタグ public String toliststring() throws JspException { final StringBuilder buf = new StringBuilder(); final String url = geturl() == null? StringUtil.EMPTY_STRING : "href=\"" + geturl() + "\""; buf.append("<li><a ").append(url).append(">").append(getlabel()).append("</a>"); if (getchildren()!= null) { buf.append("<ul>"); for (final UtilityItemProvider item : getchildren()) { buf.append(item.toliststring()); buf.append("</ul>"); buf.append("</li>"); return buf.tostring(); plugin.xml src/main/plugin/jp.co.intra_mart.sample.locale_item_provider/plugin.xml <?xml version="1.0" encoding="utf-8"?> <plugin> <extension point="jp.co.intra_mart.foundation.ui.theme.utility.item"> <item id="sample_localeitemprovider" name="localeitemprovider" classname="jp.co.intra_mart.sample.localeitemprovider" version="1.0" rank="1" enable="true" /> </extension> </plugin> CSJS src/main/public/sample/js/changelocale.js 85

86 function changelocale(locale) { (function($, locale) { var form = $('<form/>').attr('id', 'sampleform').attr('action', 'user/settings/locale/update_locale').attr('method','post'); var locale = $('<input/>').attr('type','hidden').attr('name','locale').attr('value',locale); form.append(locale); form.appendto('body'); imuiajaxsubmit('#sampleform', 'POST', 'json', 'home', []); )(jquery, locale); フォルダ 構 成 86

87 message.properties message_en.properties message_ja.properties message_zh_cn.properties module.xml src main conf message routing-jssp-config routing-service-config generated java jp co intra_mart sample LocaleItemProvider.java jssp src plugin jp.co.intra_mart.sample.locale_item_provider plugin.xml public sample js changelocale.js resources schema storage public system webapp test conf message routing-jssp-config routing-service-config generated java jssp src plugin public resources schema storage public system webapp intra-mart が 提 供 するテーマの 一 覧 87

88 intra-mart が 提 供 するテーマの 一 覧 テーマ 一 覧 テーマサンプル 画 像 テーマ 名 intra-mart Accel Platform 標 準 テー マ ( 黒 ) テーマID im_theme_dropdown_black intra-mart Accel Platform 標 準 テー マ ( 青 ) im_theme_dropdown_blue intra-mart Accel Platform 標 準 テー マ ( 茶 ) im_theme_dropdown_brown intra-mart Accel Platform 標 準 テー マ (セラドングリーン) im_theme_dropdown_celadon_green intra-mart Accel Platform 標 準 テー マ (ココアブラウン) im_theme_dropdown_cocoa_brown intra-mart Accel Platform 標 準 テー マ (コッパーラスト) im_theme_dropdown_copper_rust intra-mart Accel Platform 標 準 テー マ ( 灰 色 ) im_theme_dropdown_gray intra-mart Accel Platform 標 準 テー マ ( 緑 ) im_theme_dropdown_green intra-mart Accel Platform 標 準 テー マ (ヒアシンスブルー) im_theme_dropdown_hyacinth_blue 88

89 テーマサンプル 画 像 テーマ 名 テーマID intra-mart Accel Platform 標 準 テー マ (アイビーグリーン) im_theme_dropdown_ivy_green intra-mart Accel Platform 標 準 テー マ (ラベンダーグレー) im_theme_dropdown_lavender_gray intra-mart Accel Platform 標 準 テー マ (ミディアムパープル) im_theme_dropdown_mediumpurple intra-mart Accel Platform 標 準 テー マ (ネイビーブルー) im_theme_dropdown_navy_blue intra-mart Accel Platform 標 準 テー マ (オレンジ) im_theme_dropdown_orange intra-mart Accel Platform 標 準 テー マ (オーキッド ピンク) im_theme_dropdown_orchid_pink intra-mart Accel Platform 標 準 テー マ (ピンク) im_theme_dropdown_pink intra-mart Accel Platform 標 準 テー マ ( 赤 ) im_theme_dropdown_red intra-mart Accel Platform 標 準 テー マ (レッドオレンジ) im_theme_dropdown_red_orange intra-mart Accel Platform 標 準 テー マ (ローズグレー) im_theme_dropdown_rose_gray 89

90 テーマサンプル 画 像 テーマ 名 テーマID intra-mart Accel Platform 標 準 テー マ (サーモンピンク) im_theme_dropdown_salmon_pink intra-mart Accel Platform 標 準 テー マ ( 紫 ) im_theme_dropdown_violet intra-mart Accel Platform 標 準 テー マ (ヨットブルー) im_theme_dropdown_yacht_blue intra-mart Accel Platform 標 準 テー マ ( 黄 ) im_theme_dropdown_yellow intra-mart Accel Platform 標 準 テー マ (イエローグリーン) im_theme_dropdown_yellow_green intra-mart Accel Platform 標 準 テー マ シンプルスタイル im_theme_dropdown_simple iwp/iaf Version6 互 換 テーマ ( 青 ) im_theme_60_blue iwp/iaf Version6 互 換 テーマ ( 緑 ) im_theme_60_green iwp/iaf Version6 互 換 テーマ (オレ ンジ) im_theme_60_orange iwp/iaf Version6 互 換 テーマ ( 赤 ) im_theme_60_red 90

91 テーマサンプル 画 像 テーマ 名 テーマID iwp/iaf Version5 互 換 テーマ ( 青 ) im_theme_50_blue iwp/iaf Version5 互 換 テーマ ( 緑 ) im_theme_50_green iwp/iaf Version5 互 換 テーマ (オレ ンジ) im_theme_50_orange iwp/iaf Version5 互 換 テーマ ( 赤 ) im_theme_50_red 91

HTMLとメタデータ

HTMLとメタデータ HTMLとメタデータ http://www2.mmc.atomi.ac.jp/~artnavi1/lib rarysci/index.htmlを 例 にHTMLを 理 解 する IPアドレス ドメイン 名 http://www2.mmc.atomi.ac.jp httpとはhyper Text Transfer Protocol( 何 でもリンクできるテ キストの 通 信 手 順 : 説 明 JPNIC)

More information

CSSの基礎

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

More information

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1............... 1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................

More information

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド   第3版  

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド   第3版   1 Top 目次 intra-mart Accel Platform 標準テーマカスタマイズ操作ガイド第 3 版 2014-12-01 2 改訂情報 intra-mart Accel Platform 標準テーマカスタマイズ操作ガイド第 3 版 2014-12-01 変更年月日 変更内容 2013-10-01 初版 2014-01-01 第 2 版下記を変更しました はじめに の UIデザインガイドライン

More information

Microsoft PowerPoint - 08回目.pptx

Microsoft PowerPoint - 08回目.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 4 回 目 10/17 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I.スタイルシート II.レイアウト III. 課 題 3 I.スタイルシート 1.スタイルシート 4 スタイルシート: 文 書 のスタイルの 設 定 が 書 かれているデータ CSS:スタイルシートの 書 き 方 ( 言 語 )の 一 つ Cascading

More information

本 資 料 では アメブロのヘッダー 画 像 とメニューバーの 設 定 をご 自 身 で 行 っていただくた めのものです < 目 次 > 1. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 な

本 資 料 では アメブロのヘッダー 画 像 とメニューバーの 設 定 をご 自 身 で 行 っていただくた めのものです < 目 次 > 1. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 な アメブロ ~ヘッダー 画 像 メニューバーの 設 定 方 法 ~ 本 資 料 では アメブロのヘッダー 画 像 とメニューバーの 設 定 をご 自 身 で 行 っていただくた めのものです < 目 次 > 1. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 なヘッダー 画 像 を 作 成 する

More information

経営論集2011_07_小松先生.indd

経営論集2011_07_小松先生.indd 20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML

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

intra-mart Accel Platform — ViewCreator ユーザ操作ガイド   第6版 2016-04-01  

intra-mart Accel Platform — ViewCreator ユーザ操作ガイド   第6版 2016-04-01   Copyright 2012 NTT DATA INTRAMART CORPORATION 1 Top 目 次 intra-mart Accel Platform ViewCreator ユーザ 操 作 ガイド 第 6 版 2016-04-01 改 訂 情 報 ViewCreator について 基 本 的 な 設 定 データ 参 照 一 覧 リスト 集 計 クロス 集 計 とグラフ 集 計 データ

More information

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

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

More information

intra-mart Accel GroupMail 2016 Spring — リリースノート   初版 2016-04-01  

intra-mart Accel GroupMail 2016 Spring — リリースノート   初版 2016-04-01   intra-mart Accel GroupMail 2016 Spring リリースノート 初 版 2016-04-01 Copyright 2016 NTT DATA INTRAMART CORPORATION 1 Top 目 次 intra-mart Accel GroupMail 2016 Spring リリースノート 初 版 2016-04-01 1. 改 訂 情 報 2. はじめに 3.

More information

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

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

More information

スマホ 用 メニューバーの 色 変 更 1 html/user_data/packages/default/img/icon_header 上 記 フォルダにアイコンが 入 っています 2 data/smarty/templates/default/header.tpl 画 像 名 ( 色 )を 変

スマホ 用 メニューバーの 色 変 更 1 html/user_data/packages/default/img/icon_header 上 記 フォルダにアイコンが 入 っています 2 data/smarty/templates/default/header.tpl 画 像 名 ( 色 )を 変 カスタマイズダウンロード 版 の 新 バージョン(2.13.3 ~)マニュアル レスポンシブ Web デザインのヘッダー 部 グローバルメニューは 右 上 の 3 本 線 アイコン に 格 納 され ます クリックすると メニュー 項 目 が 展 開 します 上 部 メニューはそれぞれ テキスト から 左 上 のアイコン( 画 像 )に 切 り 替 わります 管 理 画 面 でのブロック 配 置 ヘッダー

More information

intra-mart Accel Platform — UIデザインガイドライン(PC版)   第5版 2015-04-01  

intra-mart Accel Platform — UIデザインガイドライン(PC版)   第5版 2015-04-01   intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 0-0-0 Copyright 0 NTT DATA INTRAMART CORPORATION Top UIデザインガイドライン( PC 版 ) intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 0-0-0. 改 訂 情 報. 禁 止 事 項. はじめに..

More information

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 Active! mail 6.52 ユーザーズマニュアル(スマートフォン 版 ) Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 権 の 侵 害 とな

More information

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

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

More information

目 次 1. Web メールのご 利 用 について... 2 2. Web メール 画 面 のフロー 図... 3 3. Web メールへのアクセス... 4 4. ログイン 画 面... 5 5. ログイン 後 (メール 一 覧 画 面 )... 6 6. 画 面 共 通 項 目... 7 7.

目 次 1. Web メールのご 利 用 について... 2 2. Web メール 画 面 のフロー 図... 3 3. Web メールへのアクセス... 4 4. ログイン 画 面... 5 5. ログイン 後 (メール 一 覧 画 面 )... 6 6. 画 面 共 通 項 目... 7 7. Web メール 操 作 説 明 書 京 都 与 謝 野 町 有 線 テレビ 0 目 次 1. Web メールのご 利 用 について... 2 2. Web メール 画 面 のフロー 図... 3 3. Web メールへのアクセス... 4 4. ログイン 画 面... 5 5. ログイン 後 (メール 一 覧 画 面 )... 6 6. 画 面 共 通 項 目... 7 7. メール 一 覧 画 面...

More information

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 Active! mail 6.54 ユーザーズマニュアル(スマートフォン 版 ) Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 権 の 侵 害 とな

More information

Microsoft Word - メディア技術基礎.docx

Microsoft Word - メディア技術基礎.docx メディア 技 術 基 礎 (Web) 脇 田 玲 先 生 (2010) 田 中 浩 也 (2011) HTML の 基 本 的 な 書 き 方 テキストエディタで index.html を 作 成 して 以 下 のサンプルを 入 力 してみましょう 始 めの 2 行 は HTML を 書 く 前 のおまじないの 様 なものです ここで 登 場 する HTML タグについての 説 明 は 以 下 の

More information

07_経営論集2010 小松先生.indd

07_経営論集2010 小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,

More information

情報資源組織演習B:

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

More information

スライド 1

スライド 1 Webプログラミング2 2.Webプログラミング 概 要 (2) ( 復 習 )Webとは 様 々な 利 用 シーン 様 々なデバイス/ブラウザ パソコン 携 帯 電 話 ゲーム 機 /TV 電 子 ブックリーダー 学 校 案 内 / 会 社 案 内 オンラインショップ ブログ/ 掲 示 板 /SNS/Twitter/Facebook 学 内 / 社 内 システム スケジューラ/カレンダー/Webメール

More information

bmobilized 操 作 マニュアル Ver.0404 目 次 ログインパスワードの 設 定 変 更... カスタマイズページへのログイン... ダッシュボード... 4 ツールの 基 本 操 作... 5 編 集 プラグイン... 6 電 話 をかける プラグイン... 6 編 集 コンテンツ

bmobilized 操 作 マニュアル Ver.0404 目 次 ログインパスワードの 設 定 変 更... カスタマイズページへのログイン... ダッシュボード... 4 ツールの 基 本 操 作... 5 編 集 プラグイン... 6 電 話 をかける プラグイン... 6 編 集 コンテンツ 操 作 マニュアル 04/04 株 式 会 社 インターアローズ bmobilized 操 作 マニュアル Ver.0404 目 次 ログインパスワードの 設 定 変 更... カスタマイズページへのログイン... ダッシュボード... 4 ツールの 基 本 操 作... 5 編 集 プラグイン... 6 電 話 をかける プラグイン... 6 編 集 コンテンツ 選 択... 8 編 集 デザイン...

More information

文 書 構 造 とスタイル

文 書 構 造 とスタイル 第 4 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用 文 書 構 造 とスタイル 自 己 紹 介 のHTML 文 書 放 送 太 郎 の 自 己 紹 介

More information

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

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

More information

SciFinder エラーへの対処法

SciFinder エラーへの対処法 SciFinder エラーへの 対 処 法 2016 年 3 月 18 日 改 訂 SciFinder でエラーが 起 きた 場 合 は,まずはご 利 用 環 境 が 推 奨 環 境 下 にあるかどうかをご 確 認 ください. http://www.jaici.or.jp/scifinder/require.html 目 次 ケース 1:SciFinder にアクセスできない... 2 ケース 2:ID

More information

HTML5&CSS3 レッスンブック

HTML5&CSS3 レッスンブック STEP 7-6 Chapter 7 FINISHING & ARRANGE style.css STEP 7-6 で 置 き 換 えた style.css の 設 定 です DESIGN POINTS デザインのポイント Google Fontsの Bowlby One で 表 示 ナビゲーションメニューの 各 リンクは 四 角 形 にデザイン コンテンツは 罫 線 で 囲 まない メインコンテンツの

More information

Microsoft PowerPoint - css [互換モード]

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

More information

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

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

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

コンピュータサイエンス 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

(1)

(1) 第 回 アビリンピック 京 都 大 会 ホームページ 部 門 練 習 問 題 (1) 仕 様 1 ホームページの 内 容 府 立 京 都 高 等 技 術 専 門 校 のホームページを 作 成 する 2 ページ 構 成 とファイル index.html guid.html course.html mystyle.css ie.css 以 上 のファイルと 素 材 はホームページよりダウンロードして

More information

HTML5 による Webサイト制作の基本 株式会社サイバーガーデン 益子 貴寛 2012年4月7日 土曜日 CSS Nite in OKAYAMA, Vol.2 with Microsoft アップル http://www.apple.com/jp/ ローソン http://www.lawson.co.jp/

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

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

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

More information

intra-mart Accel Platform — 外部ソフトウェア接続モジュール 仕様書   第2版 2014-04-01  

intra-mart Accel Platform — 外部ソフトウェア接続モジュール 仕様書   第2版 2014-04-01   Copyright 2012 NTT DATA INTRAMART CORPORATION 1 Top 目 次 intra-mart Accel Platform 外 部 ソフトウェア 接 続 モジュール 仕 様 書 第 2 版 2014-04-01 改 訂 情 報 はじめに 本 書 の 目 的 対 象 読 者 本 書 の 構 成 概 要 外 部 ソフトウェア 接 続 モジュールとは 仕 様 外 部

More information

改 訂 履 歴 版 数 日 付 改 訂 内 容 改 訂 箇 所 1.0 2015 年 3 月 31 日 初 版 作 成 - - i -

改 訂 履 歴 版 数 日 付 改 訂 内 容 改 訂 箇 所 1.0 2015 年 3 月 31 日 初 版 作 成 - - i - ( 事 業 者 向 け) 1.0 版 2015 年 3 月 31 日 改 訂 履 歴 版 数 日 付 改 訂 内 容 改 訂 箇 所 1.0 2015 年 3 月 31 日 初 版 作 成 - - i - 目 次 1. はじめに... 1 2. システム 動 作 環 境... 1 2.1. 動 作 の 条 件 注 意 事 項... 1 2.1.1. JAVA スクリプトの 設 定... 1 2.1.2.

More information

日 付 更 新 者 内 容 2013/11/29 月 橋 新 規 作 成 2

日 付 更 新 者 内 容 2013/11/29 月 橋 新 規 作 成 2 オープンデータマップ (SVG 地 図 操 作 用 スクリプト) デモ コンテンツ 操 作 ガイド 1 日 付 更 新 者 内 容 2013/11/29 月 橋 新 規 作 成 2 目 次 1. デモ コンテンツ 操 作 ガイド... 4 Google Chrome の 設 定... 4 コンテンツのロード... 4 アイコン 等 について... 5 POIの 設 定... 7 POI を CSV

More information

JavaScriptプログラミング入門

JavaScriptプログラミング入門 JavaScript 2015 8 15 1 2 1.1 JavaScript.................................. 2 1.2..................................... 3 1.3 if................................... 4 2 6 2.1.....................

More information

slide.key

slide.key Responsive Web Design Adaptive Web Design マルチ 環 境 対 応 の 考 え 方 考 え 方は? 違 いは? Responsive Web Design.content {! position: absolute;! }! @media screen and (min-width: 768px) {!.content {! position: relative;!

More information

Peace & Piece 画面設計書

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

More information



 スタートアップガイド Ver. 3.0 管 理 者 編 株 式 会 社 アバンセシステム クラウド コンピューティング 事 業 部 JECC E-mail jecc_support@avancesys.co.jp URL http://www.avancesys.co.jp/ ANPIC スタートアップガイド 管 理 者 編 2 ごあいさつ このたびは 安 否 情 報 システム ANPIC をご 導

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

1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1..............................

1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1.............................. 1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1.............................. 4 2.............................. 6 3...........................

More information

2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正

2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正 1 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく

More information

スライド 1

スライド 1 株 式 会 社 アジタス コーディングレギュレーション 改 訂 履 歴 初 版 2009/10/01 一 部 修 正 2010/12/06 対 応 ブラウザ 修 正 画 像 ファイルの 形 式 修 正 補 足 追 記 2011/05/02 対 応 ブラウザ 修 正 2013/04/12 文 言 内 容 一 部 修 正 2014/02/25 対 応 メーラーの 追 加 2014/04/08 メールアドレスの

More information

(Microsoft PowerPoint - \203|\203P\203J\203\223\221\200\215\354\201y201005\211\374\222\371\224\305\201z.ppt)

(Microsoft PowerPoint - \203|\203P\203J\203\223\221\200\215\354\201y201005\211\374\222\371\224\305\201z.ppt) ホームページセミナー 構 築 編 ポケカン 基 本 操 作 ホームページ 作 成 北 大 阪 商 工 会 議 所 目 次 ポケカン 基 本 操 作 Pokecan(ポケカン)とは.. 3 ログイン/ログアウト ログアウト Pokecanにログイン.. 5 管 理 ページトップ.. 6 マイホームページを 開 く.. 7 Pokecanからログアウト.. 8 初 期 設 定 管 理 ページトップ A.

More information

Ver2.2.0 新機能ガイド

Ver2.2.0 新機能ガイド アプリケーション 新 機 能 ガイド ~Version 2.9.0~ 1 目 次 1 はじめに... 3 2 新 機 能... 3 3 機 能 紹 介 フォトレポート... 4 3.1 売 場 ノート フォトレポート の PC 画 面 対 応 #902... 4 4 機 能 紹 介 お 知 らせ... 18 4.1 店 舗 スタッフ 回 答 の 店 長 閲 覧 不 可 オプション 追 加 #916...

More information

JavaScript( 言 語 )とは 情 報 システムのプログラミング ソースコード 記 述, 外 部 ファイル 保 存, コンパイル,テスト,デバッグ... 大 変 な 作 業 もっと 手 軽 なプログラミング 特 別 な 言 語 処 理 系 は 不 要! Webブラウザだけで 実 行 可 能

JavaScript( 言 語 )とは 情 報 システムのプログラミング ソースコード 記 述, 外 部 ファイル 保 存, コンパイル,テスト,デバッグ... 大 変 な 作 業 もっと 手 軽 なプログラミング 特 別 な 言 語 処 理 系 は 不 要! Webブラウザだけで 実 行 可 能 JavaScript 入 門 1 JavaScript( 言 語 )とは 情 報 システムのプログラミング ソースコード 記 述, 外 部 ファイル 保 存, コンパイル,テスト,デバッグ... 大 変 な 作 業 もっと 手 軽 なプログラミング 特 別 な 言 語 処 理 系 は 不 要! Webブラウザだけで 実 行 可 能 ( 実 際 は,HTMLファイル 内 or 外 部 ファイル として

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

03 CMS機能審査表.xls

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

More information

m_sotsuron

m_sotsuron iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone

More information

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

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

More information

JavaScript演習

JavaScript演習 JavaScript 入 門 1 JavaScript( 言 語 )とは 情 報 システムのプログラミング ソースコード 記 述, 外 部 ファイル 保 存, コンパイル,テスト,デバッグ... 大 変 な 作 業 もっと 手 軽 なプログラミング 特 別 な 言 語 処 理 系 は 不 要! Webブラウザだけで 実 行 可 能 ( 実 際 は,HTMLファイル 内 or 外 部 ファイル として

More information

...... ......

More information

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えよう スタイルシートでデザイン(2) CSS (Cascading Style Sheets) ここまで HTML は 文 章 の 意 味 的 な 役 割 を 記 述 するもので 表 示 はブラウザ 次 第 であること を 強 調 してきました あるブラウザでの 表 示 方 法 を 前 提 に HTML で 見 た 目 を 制 御 しようとす ると 他 の 環 境 では 意 味 が 通 じにくい 相 互

More information

試 作 ツールは MIT ライセンスによって 提 供 いたします その 他 内 包 されたオ ープンソース ソフトウェアについてはそれぞれのライセンスに 従 ってご 利 用 くださ い 2

試 作 ツールは MIT ライセンスによって 提 供 いたします その 他 内 包 されたオ ープンソース ソフトウェアについてはそれぞれのライセンスに 従 ってご 利 用 くださ い 2 情 報 連 携 用 語 彙 データベースと 連 携 するデータ 設 計 作 成 支 援 ツール 群 の 試 作 及 び 試 用 並 びに 概 念 モデルの 構 築 ( 浦 安 市 都 市 整 備 部 市 街 地 開 発 課 液 状 化 対 策 推 進 室 ) 操 作 説 明 書 2014 年 9 月 30 日 実 施 企 業 : インディゴ 株 式 会 社 独 立 行 政 法 人 情 報 処 理 推

More information

What 色 々な Web サービスを 提 供 している 会 社 です http://www.heartrails.com/ http://twitter.com/heartrails( 会 社 ) http://twitter.com/joraku( 私 ) ぜひ 名 前 を 覚 えていってくださ

What 色 々な Web サービスを 提 供 している 会 社 です http://www.heartrails.com/ http://twitter.com/heartrails( 会 社 ) http://twitter.com/joraku( 私 ) ぜひ 名 前 を 覚 えていってくださ HeartRails APIs for MA5 ハートレイルズの 提 供 API について http://www.heartrails.com/ What 色 々な Web サービスを 提 供 している 会 社 です http://www.heartrails.com/ http://twitter.com/heartrails( 会 社 ) http://twitter.com/joraku( 私

More information

機 能 概 要 概 要 平 成 24 年 度 シームレスな 地 域 連 携 医 療 の 実 現 実 証 事 業 に 対 応 するため 地 域 連 携 システム( 能 登 北 部 版 )を 構 築 する 機 能 < 機 能 追 加 変 更 一 覧 > 1. 画 像 連 携 機 能 院 内 で 撮 影

機 能 概 要 概 要 平 成 24 年 度 シームレスな 地 域 連 携 医 療 の 実 現 実 証 事 業 に 対 応 するため 地 域 連 携 システム( 能 登 北 部 版 )を 構 築 する 機 能 < 機 能 追 加 変 更 一 覧 > 1. 画 像 連 携 機 能 院 内 で 撮 影 厚 生 労 働 省 シームレスな 健 康 情 報 活 用 基 盤 実 証 事 業 地 域 連 携 システム システム 仕 様 書 1 機 能 概 要 概 要 平 成 24 年 度 シームレスな 地 域 連 携 医 療 の 実 現 実 証 事 業 に 対 応 するため 地 域 連 携 システム( 能 登 北 部 版 )を 構 築 する 機 能 < 機 能 追 加 変 更 一 覧 > 1. 画 像 連

More information

はじめに 本 書 の 目 的 は 制 作 の 効 率 化 クオリティの 向 上 各 作 業 者 間 のスタイルの 統 を 図 る 目 安 になることで 常 にブラッシュアップを 繰 り 返 し 現 時 点 での 最 適 解 の 共 有 に 活 用 するものです 目 次 基 本 仕 様 ファイル ディ

はじめに 本 書 の 目 的 は 制 作 の 効 率 化 クオリティの 向 上 各 作 業 者 間 のスタイルの 統 を 図 る 目 安 になることで 常 にブラッシュアップを 繰 り 返 し 現 時 点 での 最 適 解 の 共 有 に 活 用 するものです 目 次 基 本 仕 様 ファイル ディ 株 式 会 社 クロノドライブ コーディングガイドライン 改 訂 履 歴 2009/10/01 初 版 2010/12/06 一 部 修 正 2011/05/02 対 応 ブラウザ 修 正 画 像 ファイルの 形 式 修 正 補 足 追 記 2013/04/12 対 応 ブラウザ 修 正 2014/02/25 文 言 内 容 一 部 修 正 2014/04/08 対 応 メーラーの 追 加 2014/06/05

More information

3. システム 要 件 IM- 社 内 便 Ver.7.2 は 以 下 の 製 品 上 で 動 作 します サーバ 要 件 Windows Server 2003 R2 Windows Server 2008 Windows Server 2008 R2 Red Hat Enterprise Lin

3. システム 要 件 IM- 社 内 便 Ver.7.2 は 以 下 の 製 品 上 で 動 作 します サーバ 要 件 Windows Server 2003 R2 Windows Server 2008 Windows Server 2008 R2 Red Hat Enterprise Lin IM- 社 内 便 ver7.2 リリース ノート 第 2 版 2016/06/02 1. はじめに (1) IM- 社 内 便 が 動 作 するには intra-mart WebPlatform / AppFramework Ver.7.2(パッチ 3) 以 上 ワークフロー 連 携 を 行 うには intra-mart WebPlatform / AppFramework advanced 以

More information

■新聞記事

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

More information

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

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

More information

SPARQL Finder設置方法

SPARQL Finder設置方法 簡 易 LOD 検 索 サイト 作 成 ツール (SPARQL Finder) 設 定 方 法 2013/12/25 大 阪 大 学 産 業 科 学 研 究 所 加 藤 敦 丈, 古 崎 晃 司 概 要 目 次 概 要 本 ドキュメントは, 簡 易 LOD 検 索 サイト 作 成 ツール の 利 用 方 法 を 解 説 したものです. ツールの 詳 細,ダウンロードは 公 開 サイト https://sourceforge.jp/projects/easylod/wiki/easylodsite

More information

IM-Annotation for Accel Platform — 操作ガイド   第3版 2015-08-01  

IM-Annotation for Accel Platform — 操作ガイド   第3版 2015-08-01   Copyright 2014 NTT DATA INTRAMART CORPORATION 1 Top 目 次 IM-Annotation for Accel Platform 操 作 ガイド 第 3 版 2015-08-01 1. 改 訂 情 報 2. はじめに 2.1. 本 書 の 位 置 づけ 3. 各 部 の 名 称 3.1. フォーム 編 集 画 面 3.2. アプリケーション 実 行 画

More information

◆TOPページデザインを制作する際の注意点 ※別紙(sample_1

◆TOPページデザインを制作する際の注意点 ※別紙(sample_1 2011/4/26 改 定 デザインカンプ 制 作 ガイドライン 別 紙 (sample_1.pdf) 参 照 カンプ 制 作 に 入 る 前 にディレクターと 打 ち 合 わせを 行 い 目 的 に 合 ったトップページデザインを 制 作 すること 1. 著 作 権 について デザインで 使 用 する 写 真 素 材 およびイラスト 素 材 は 弊 社 提 供 の 素 材 集 サイトから 使 用

More information

スライド 1

スライド 1 ログイン 登 録 確 認 編 集 Copyright(C)2013 Agilecore Co.,Ltd.All right reserved. 1 ログイン Copyright(C)2013 Agilecore Co.,Ltd.All right reserved. 2 1 パソコンのWEBブラウザから 下 記 URLに 接 続 してください https://www.kintai-ebisu.com/koara-series/

More information

Microsoft Word - class_specification_guide_v60.doc

Microsoft Word - class_specification_guide_v60.doc IM-FormatCreator クラス 指 定 手 順 書 Ver 6.0 IM-FormatCreator i 1 はじめに 1 1.1 目 的 1 2 プログラムの 作 成 2 2.1 ファンクション コンテナ(.JS)の 作 成 2 2.2 プレゼンテーションページ(.HTML)の 作 成 3 3 クラス 指 定 項 目 の 設 定 5 3.1 クラス 指 定 設 定 画 面 5 3.2 クラスパス

More information

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

Microsoft PowerPoint - SCkenkyukai2012tanaka.mshr.ppt [互換モード] 利 用 者 のブラウザ 操 作 をWebサービス 化 するための 開 発 最 適 化 支 援 環 境 株 式 会 社 富 士 通 研 究 所 田 中 昌 弘 目 次 背 景 Webサービスを 追 加 開 発 にコストがかかる 課 題 関 連 研 究 利 用 者 のブラウザ 操 作 からWebサービスを 自 動 生 成 する 手 法 提 案 手 法 利 用 者 のブラウザ 操 作 から 不 要 な 通

More information

著 作 権 について 本 レポートは 著 作 権 法 で 保 護 されている 著 作 物 です 本 レポートの 著 作 権 は pinky に 属 します MAKI の 許 可 なく 本 レポートの 一 部 または 全 てを いかなる 手 段 におい ても 複 製 転 載 流 用 転 売 等 するこ

著 作 権 について 本 レポートは 著 作 権 法 で 保 護 されている 著 作 物 です 本 レポートの 著 作 権 は pinky に 属 します MAKI の 許 可 なく 本 レポートの 一 部 または 全 てを いかなる 手 段 におい ても 複 製 転 載 流 用 転 売 等 するこ アメブロカスタマイズ 大 百 科 著 作 権 について 本 レポートは 著 作 権 法 で 保 護 されている 著 作 物 です 本 レポートの 著 作 権 は pinky に 属 します MAKI の 許 可 なく 本 レポートの 一 部 または 全 てを いかなる 手 段 におい ても 複 製 転 載 流 用 転 売 等 することを 禁 じます 使 用 許 諾 契 約 書 本 契 約 は 本 冊

More information

目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.ページ 更 新 の 設 置 例 5. 変 換 指 定 6. 制 限 解 除 キー 7. 利 用 規 定 8. 更 新 履 歴

目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.ページ 更 新 の 設 置 例 5. 変 換 指 定 6. 制 限 解 除 キー 7. 利 用 規 定 8. 更 新 履 歴 ページ 更 新 管 理 L-TOOL PgUpdater (ver 1.2) 取 扱 説 明 書 Little Net http//l-tool.net/ - 2015 年 07 月 24 日 版 - 目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.ページ 更 新 の 設 置 例 5. 変 換 指 定 6. 制 限 解 除 キー 7. 利 用 規 定 8. 更 新 履 歴 1. 概

More information

前 書 き 広 域 機 関 システム System for Organization for Cross-regional Coordination of Transmission Operators(OCCTO) rev:2016-01-00 商 標 類 Windows Office Excel

前 書 き 広 域 機 関 システム System for Organization for Cross-regional Coordination of Transmission Operators(OCCTO) rev:2016-01-00 商 標 類 Windows Office Excel 広 域 機 関 システム 操 作 マニュアル 共 通 2016-01-00 前 書 き 広 域 機 関 システム System for Organization for Cross-regional Coordination of Transmission Operators(OCCTO) rev:2016-01-00 商 標 類 Windows Office Excel Word Internet

More information

おすすめページ

おすすめページ 4-5 第 4 章 高 度 なリストのデザイン スマートフォン 向 けのCSSを 読 み 込 む スマートフォンのように 画 面 サイズの 小 さい 端 末 で 見 たときは 専 用 のCSSを 読 み 込 むように します 画 面 サイズが 小 さいときはレイアウトを 変 更 する スマートフォンなど パソコンに 比 べて 画 面 の 小 さい 端 末 で Web サイトを 閲 覧 しようとすると

More information

平成21年1月21日 1

平成21年1月21日 1 eコミマップ 表 画 面 操 作 マニュアル Ver. 2.4.1 2015/06/30 国 立 研 究 開 発 法 人 防 災 科 学 技 術 研 究 所 目 次 1 はじめに... 3 2 システムの 説 明... 3 3 操 作 マニュアル... 4 3.1 E コミマップ 一 覧 画 面... 4 1 ログイン 画 面... 4 2 項 目 一 覧 タブ... 5 3 項 目 一 覧 タブ(ログインしていない

More information

改 訂 履 歴 訂 番 日 付 頁 変 更 内 容 1.0.0 2014/02/28 - 新 規 作 成 1.1.0 2014/11/07 表 紙 タイトルを 修 正 修 正 前 : 東 日 本 大 震 災 アーカイブデータベースシステム 修 正 後 : 災 害 アーカイブデータベースシステム 改

改 訂 履 歴 訂 番 日 付 頁 変 更 内 容 1.0.0 2014/02/28 - 新 規 作 成 1.1.0 2014/11/07 表 紙 タイトルを 修 正 修 正 前 : 東 日 本 大 震 災 アーカイブデータベースシステム 修 正 後 : 災 害 アーカイブデータベースシステム 改 災 害 アーカイブデータベースシステム 運 営 主 体 管 理 者 用 運 用 マニュアル 改 訂 履 歴 訂 番 日 付 頁 変 更 内 容 1.0.0 2014/02/28 - 新 規 作 成 1.1.0 2014/11/07 表 紙 タイトルを 修 正 修 正 前 : 東 日 本 大 震 災 アーカイブデータベースシステム 修 正 後 : 災 害 アーカイブデータベースシステム 改 訂 履 歴

More information

¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ

¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ HTTP/2 HTTP/1.1 (1999 ) 2015 5 RFC7540! Google SPDY ( ) 1 TCP TCP TLS HTTP Upgrade HTTP 1 HPACK 1 / 24 3 : HTTP : HTML4 2 / 24 testform.html: POST testform2.html: GET iedemo: IE default.css: CSS proxy.pac:

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

Web±ÜÍ÷¤Î³Ú¤·¤µ¤ò¹â¤á¤ëWeb¥Ú¡¼¥¸²ÄÄ°²½¥·¥¹¥Æ¥à

Web±ÜÍ÷¤Î³Ú¤·¤µ¤ò¹â¤á¤ëWeb¥Ú¡¼¥¸²ÄÄ°²½¥·¥¹¥Æ¥à Web Web 2 3 1 PC, Web, Web. Web,., Web., Web HTML, HTML., Web, Web.,,., Web, Web., Web, Web., Web, Web. 2 1 6 1.1.................................................. 6 1.2.................................................

More information

第 10 問 スマートフォンはパソコンとは 異 なり コンピュータウイルスなどの 不 正 プログラムの 侵 入 感 染 フィッシングなど の 詐 欺 に 遭 うことがないため セキュリティソフトをスマートフォンに 導 入 する 必 要 はない 2. 以 下 の 設 問 に 答 えよ 第 11 問 C

第 10 問 スマートフォンはパソコンとは 異 なり コンピュータウイルスなどの 不 正 プログラムの 侵 入 感 染 フィッシングなど の 詐 欺 に 遭 うことがないため セキュリティソフトをスマートフォンに 導 入 する 必 要 はない 2. 以 下 の 設 問 に 答 えよ 第 11 問 C 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 HTML5 では タグの 省 略 は 一 切 認 められていない 第 2 問 インターネット 上 のすべてのコンピュータは イーサネットで 繋 がっている 第 3 問 新 規 にウェブサイトを 公 開 する 際 は HTML ドキュメントをアップロードした 後 に

More information

Acrobat早分かりガイド

Acrobat早分かりガイド Adobe PDF を 加 工 編 集 する PDF を 再 利 用 する PDF ファイルの Word 文 書 書 き 出 し [ 名 前 を 付 けて 保 存 ] ダイアログが 開 くので ファイルの 書 き 出 し 先 を 指 定 し [ 保 存 ] ボタンをクリックします Acrobat を 使 用 すると Adobe PDF から Word の フォーマットに 書 き 出 してファイルを

More information

アメブロで無料レポートを配布するブログパーツの作り方

アメブロで無料レポートを配布するブログパーツの作り方 あいあいスクール アメブロで 無 料 レポートを 配 布 する ブログパーツの 作 り 方 あいあいスクール 代 表 畠 茂 雄 (はたけ しげお) 著 作 権 について このレポートは 著 作 権 法 で 保 護 されている 著 作 物 です このレポートの 著 作 権 は あいあいスクール に 属 します 著 作 権 者 の 許 可 なく このレポートの 全 部 又 は 一 部 をいかなる 手

More information

はじめに 本 資 料 のご 対 象 者 SkyVisualEditorの 担 当 になったがどこから 手 をつけて 良 いかわからないご 担 当 者 様 SkyVisualEditorをこれから 検 討 してみたいご 担 当 者 様 向 けの 基 礎 的 な 内 容 です 本 セミナーのゴール Sk

はじめに 本 資 料 のご 対 象 者 SkyVisualEditorの 担 当 になったがどこから 手 をつけて 良 いかわからないご 担 当 者 様 SkyVisualEditorをこれから 検 討 してみたいご 担 当 者 様 向 けの 基 礎 的 な 内 容 です 本 セミナーのゴール Sk SkyVisualEditorスタートアップガイド 2015 Terrasky Co., Ltd. All Rights Reserved. はじめに 本 資 料 のご 対 象 者 SkyVisualEditorの 担 当 になったがどこから 手 をつけて 良 いかわからないご 担 当 者 様 SkyVisualEditorをこれから 検 討 してみたいご 担 当 者 様 向 けの 基 礎 的 な

More information

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

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

More information

SciFinder (Web 版) エラーへの対処法

SciFinder (Web 版) エラーへの対処法 SciFinder (Web 版 ) のエラーへの 対 処 法 化 学 情 報 協 会 2012 年 4 月 改 訂 ケース1:SciFinder (Web 版 ) にアクセスできない 症 状 : ブラウザの お 気 に 入 り から SciFinder (Web 版 ) にアクセ スしている 場 合, 左 記 のエラ ー (HTTP 500 内 部 サーバー エラー)によりアクセスできな い. 解

More information

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

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

More information

e-Gov電子申請システムを利用した

e-Gov電子申請システムを利用した e-gov 電 子 申 請 システムを 利 用 した RPS 法 に 係 る 申 請 書 提 出 マニュアル -ITEM2000 形 式 のファイルを 利 用 した 申 請 方 法 について- 平 成 22 年 4 月 資 源 エネルギー 庁 省 エネルギー 新 エネルギー 部 新 エネルギー 等 電 気 利 用 推 進 室 電 子 政 府 の 実 現 に 向 けた 政 府 全 体 の 取 組 みの

More information

スライド 1

スライド 1 e 研 修 PDCA 運 用 チェック Simple e-learning Management System Plus 操 作 説 明 書 管 理 者 機 能 ( 運 用 チェックテーマ 資 材 作 成 管 理 編 ) 05 年 月 Ver..7 アーチ 株 式 会 社 機 能 e 研 修 管 理 機 能 LOGIN 画 面 (PC 環 境 用 ) 説 明 e 研 修 管 理 機 能 LOGIN

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

はじめに をご 利 用 いただき 誠 に 有 難 うございます 本 ガイドは を 利 用 したサーバ 構 築 の 方 法 や Biz/PrintServer で 構 築 し たサーバからの 移 行 について 理 解 していただくことを 目 的 として 作 成 致 しました 本 製 品 の 導 入 に

はじめに をご 利 用 いただき 誠 に 有 難 うございます 本 ガイドは を 利 用 したサーバ 構 築 の 方 法 や Biz/PrintServer で 構 築 し たサーバからの 移 行 について 理 解 していただくことを 目 的 として 作 成 致 しました 本 製 品 の 導 入 に サーバ 構 築 ガイド Copyright (C) Open Stream,Inc. All Rights Reserved. はじめに をご 利 用 いただき 誠 に 有 難 うございます 本 ガイドは を 利 用 したサーバ 構 築 の 方 法 や Biz/PrintServer で 構 築 し たサーバからの 移 行 について 理 解 していただくことを 目 的 として 作 成 致 しました

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

3. 管 理 画 面 (ダッシュボード) ログインすると 下 図 のダッシュボードの 画 面 となります ( 権 限 によって 左 のメニューが 異 なります ) 4.ブログの 投 稿 方 法 管 理 画 面 の 左 側 のメニューから 投 稿 をクリックします ここに 投 稿 された 公 開 記

3. 管 理 画 面 (ダッシュボード) ログインすると 下 図 のダッシュボードの 画 面 となります ( 権 限 によって 左 のメニューが 異 なります ) 4.ブログの 投 稿 方 法 管 理 画 面 の 左 側 のメニューから 投 稿 をクリックします ここに 投 稿 された 公 開 記 2011.12.8 カメリア パルの 会 ホームページ 編 集 マニュアル http://pal.nono1.jp 1.はじめに カメリア パルの 会 のホームページは フリーのブログシステム(WORDPRESS)を 使 用 してい ます このシステムの 特 徴 としては ブログの 基 本 的 使 用 方 法 である 日 記 を 追 加 するだけでなく 固 定 的 なページを 作 成 することができ

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

Microsoft PowerPoint - A07回目②.pptx

Microsoft PowerPoint - A07回目②.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 7 回 目 2 11/14 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I. JavaScript( 画 像 関 係 ) II. 課 題 3 I.JavaScript 1.JavaScriptを 使 用 するためのお 約 束 4 の 間 に

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

目 次 1. Internet Explorer の 設 定 3 2. NetISMS ナビゲータへのログイン 15 3. ActiveX コントロールのインストール 17 4. Internet Explorer 以 外 の 設 定 18 1

目 次 1. Internet Explorer の 設 定 3 2. NetISMS ナビゲータへのログイン 15 3. ActiveX コントロールのインストール 17 4. Internet Explorer 以 外 の 設 定 18 1 NetISMS システム 端 末 設 定 ガイド 注 意 事 項 各 社 各 部 門 等 でのセキュリティ 上 の 規 定 と 相 反 する 場 合 があります 必 ずご 自 身 の 使 用 する PC 端 末 のセキュリティ 管 理 者 等 にご 確 認 願 います 第 4.0 版 2016 年 7 月 1 日 目 次 1. Internet Explorer の 設 定 3 2. NetISMS

More information

Microsoft PowerPoint - CSS Nite(2010.09.23).ppt

Microsoft PowerPoint - CSS Nite(2010.09.23).ppt 2010/09/23 iuiを 使 ってサクッとiPhone 最 適 化 株 式 会 社 中 部 システム 吉 樹 0 Chubu System Co,.ltd [http://www.cscweb.org] 自 紹 介 2001 年 株 式 会 社 中 部 システム 社 2002 年 RPG 中 の 開 発 に 従 事 2003 年 主 に 製 造 販 売 業 を 中 にSEとして 活 動 2005

More information

アスラテック株式会社 会社案内

アスラテック株式会社 会社案内 JavaScript SDK for V-Sido CONNECT 利 用 の 手 引 き Mac 編 アスラテック 株 式 会 社 目 次 1. はじめに 1-1. 本 マニュアルの 概 要 p.3 1-2. 使 用 する 機 材 など p.4 1-3. 各 機 器 の 接 続 構 成 と 開 発 イメージ p.5 2. 初 期 設 定 とVSidoConn4Macの 導 入 2-1. Bluetoothのペアリング

More information

変 更 履 歴 2012-03-29 バージョン 1.17 [6-2. CSS パースエラー 時 の 対 応 ]の 記 述 を 変 更 2012-03-12 バージョン 1.16 [4. 出 力 切 替 機 能 ]に 注 意 点 を 追 記 2011-11-11 バージョン 1.15 [4. 出 力

変 更 履 歴 2012-03-29 バージョン 1.17 [6-2. CSS パースエラー 時 の 対 応 ]の 記 述 を 変 更 2012-03-12 バージョン 1.16 [4. 出 力 切 替 機 能 ]に 注 意 点 を 追 記 2011-11-11 バージョン 1.15 [4. 出 力 ユーザーズ マニュアル Ver1.17 ノイアンドコンピューティング 株 式 会 社 変 更 履 歴 2012-03-29 バージョン 1.17 [6-2. CSS パースエラー 時 の 対 応 ]の 記 述 を 変 更 2012-03-12 バージョン 1.16 [4. 出 力 切 替 機 能 ]に 注 意 点 を 追 記 2011-11-11 バージョン 1.15

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 操 作 マニュアル( 事 業 者 編 ) 平 成 24 年 10 月 SHIFTで 作 成 されるホームページ: 構 成 SHIFT 作 成 メニュー HPイメージ お 問 合 わせ フォーム BtoBページ 掲 示 板 メインページ 商 品 ページ 電 子 決 算 公 告 ページ 1 登 録 画 面 への 入 り 方 (コミュニティ 利 用 の 場 合 ) 商 工 会 HP(イメージ) ログイン

More information