Lightning コンポーネント開発者ガイド

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "Lightning コンポーネント開発者ガイド"

Transcription

1 Lightning コンポーネント 開 発 者 ガイド バージョン 32.0, Winter 最 終 更 新 日 : 2014/11/10

2 Copyright salesforce.com, inc. All rights reserved. Salesforce およびその 他 の 名 称 や 商 標 は salesforce.com, inc. の 登 録 商 標 です 本 ドキュメントに 記 載 されたその 他 の 商 標 は 各 社 に 所 有 権 があります

3 目 次 使 用 開 始 第 1 章 : はじめに Lightning コンポーネントフレームワークとは? Lightning コンポーネントフレームワークを 使 用 する 理 由 コンポーネント イベント ブラウザサポート 開 発 者 コンソールの 使 用 オープンソースの Aura フレームワーク このガイドのオンラインバージョン 第 2 章 : クイックスタート ご 利 用 になる 前 に スタンドアロン Lightning アプリケーションを 作 成 する ステップ 1: 静 的 モックアップを 作 成 する ステップ 2: ユーザ 入 力 用 のコンポーネントを 作 成 する ステップ 3: 経 費 データを 読 み 込 む ステップ 4: ネストされたコンポーネントを 作 成 する ステップ 5: 新 しい 経 費 の 入 力 を 有 効 化 する ステップ 6: アプリケーションとイベントをインタラクティブにする まとめ コンポーネントの 作 成 第 3 章 : コンポーネント コンポーネントのマークアップ コンポーネントの 名 前 空 間 コンポーネントのバンドル コンポーネントの ID コンポーネント 内 の HTML コンポーネント 内 の CSS コンポーネントの 属 性 コンポーネントのコンポジション コンポーネントのボディ コンポーネントのファセット 表 示 ラベルの 使 用 入 力 コンポーネントの 表 示 ラベル 親 属 性 による 表 示 ラベル 値 の 設 定

4 目 次 ローカライズ Lightning コンポーネントの 有 効 化 Salesforce1 への Lightning コンポーネントの 追 加 アプリケーションへのコンポーネントの 追 加 コンポーネントのドキュメントの 提 供 第 4 章 : 式 式 の 例 値 プロバイダ グローバル 値 プロバイダ 式 の 評 価 式 の 演 算 子 のリファレンス 式 の 関 数 のリファレンス 第 5 章 : ユーザインターフェースの 概 要 入 力 コンポーネントの 概 要 ボタン 日 時 項 目 数 値 項 目 テキスト 項 目 チェックボックス 項 目 レベルのエラー イベントとの 通 信 第 6 章 : イベント クライアント 側 コントローラを 使 用 したイベントの 処 理 コンポーネントイベント コンポーネントイベントの 例 アプリケーションイベント アプリケーションイベントの 例 イベント 処 理 のライフサイクル 高 度 なイベントの 例 非 Lightning コードからの Lightning イベントの 起 動 イベントのベストプラクティス イベントのアンチパターン 表 示 ライフサイクル 中 に 起 動 されたイベント アプリケーションの 作 成 第 7 章 : アプリケーションの 基 本 アプリケーションの 概 要 アプリケーションの UI の 設 計 コンテンツセキュリティポリシーの 概 要

5 目 次 第 8 章 : アプリケーションのスタイル 設 定 ベンダープレフィックス 第 9 章 : JavaScript の 使 用 DOM へのアクセス JavaScript ライブラリの 使 用 JavaScript での 属 性 値 の 操 作 JavaScript でのコンポーネントのボディの 操 作 コンポーネントのバンドル 内 の JavaScript コードの 共 有 DOM へのクライアント 側 表 示 項 目 の 検 証 エラーの 発 生 第 10 章 : JavaScript Cookbook コンポーネントの 初 期 化 時 のアクションの 呼 び 出 し データ 変 更 の 検 出 ID によるコンポーネントの 検 索 コンポーネントの 動 的 な 作 成 イベントハンドラの 動 的 な 追 加 外 部 JavaScript からのコンポーネントの 変 更 マークアップの 動 的 な 表 示 または 非 表 示 スタイルの 追 加 と 削 除 第 11 章 : Apex の 使 用 コンポーネントの 操 作 Salesforce レコードの 操 作 コントローラのサーバ 側 ロジックの 作 成 Apex サーバ 側 コントローラの 概 要 Apex サーバ 側 コントローラの 作 成 サーバ 側 のアクションのコール サーバ 側 のアクションのキュー 配 置 中 止 可 能 なアクション Apex コードのテスト 第 12 章 : インターフェースの 使 用 マーカーインターフェース 第 13 章 : AppCache の 使 用 AppCache の 有 効 化 AppCache を 使 用 したリソースの 読 み 込 み 第 14 章 : アクセスの 制 御 アプリケーションのアクセス 制 御 インターフェースのアクセス 制 御

6 目 次 コンポーネントのアクセス 制 御 属 性 のアクセス 制 御 イベントのアクセス 制 御 第 15 章 : アプリケーションとコンポーネントの 配 布 デバッグ 第 16 章 : デバッグ JavaScript コードのデバッグ ログメッセージ 警 告 メッセージ リファレンス 第 17 章 : リファレンスの 概 要 リファレンスドキュメントアプリケーション aura:application aura:component aura:dependency aura:event aura:if aura:interface aura:iteration aura:renderif aura:set コンポーネント 参 照 での 属 性 の 設 定 インターフェースから 継 承 される 属 性 の 設 定 サポートされる HTML タグ サポートされる aura:attribute の 型 基 本 の 型 オブジェクト 型 標 準 オブジェクト 型 とカスタムオブジェクト 型 コレクション 型 カスタム Apex クラス 型 フレームワーク 固 有 の 型

7 使 用 開 始 第 1 章 はじめに トピック: Lightning コンポー ネントフレーム ワークとは? Lightning コンポー Salesforce1 Lightning の 概 要 昨 今 のマルチデバイスの 増 加 を 背 景 に どのような 画 面 にも 対 応 するアプリケーショ ンを 簡 単 に 構 築 できる Lightning を 作 成 しました Lightning には 次 のような 開 発 者 向 けの 魅 力 的 なツールが 多 数 用 意 されています ネントフレーム 1. Lightningコンポーネント 迅 速 な 開 発 とアプリケーションパフォーマンスの 向 上 ワークを 使 用 する を 実 現 するクライアント-サーバフレームワークが 提 供 されます このフレーム 理 由 ワークは Salesforce1 モバイルアプリケーションでの 使 用 に 最 適 です コンポーネント イベント ブラウザサポート 開 発 者 コンソール の 使 用 オープンソースの Aura フレームワー ク このガイドのオン ラインバージョン 2. Lightning アプリケーションビルダー 標 準 およびカスタム Lightning コンポーネン トを 使 用 することで コードを 作 成 することなく これまでにないほど 迅 速 にア プリケーションを 視 覚 的 に 構 築 できます これらのテクノロジを 使 用 すれば 新 しいアプリケーションをシームレスにカスタ マイズして Salesforce1 を 実 行 しているモバイルデバイスに 簡 単 にリリースできま す 実 際 Salesforce1 モバイルアプリケーション 自 体 が Lightning コンポーネントで 構 築 されています このガイドには Salesforce1モバイルアプリケーションで 使 用 できるカスタムLightning コンポーネントはもちろん 独 自 のスタンドアロン Lightning アプリケーションを 作 成 するための 詳 細 な 説 明 が 記 載 されています また アプリケーションおよびコン ポーネントをパッケージ 化 して AppExchange で 配 布 する 方 法 についても 学 習 しま す 1

8 はじめに Lightning コンポーネントフレームワークとは? Lightning コンポーネントフレームワークとは? Lightning コンポーネントフレームワークは モバイルデバイス 用 およびデスクトップデバイス 用 の 動 的 な Web アプリケーションを 開 発 する UI フレームワークです これは 拡 張 性 に 優 れた 単 一 ページアプリケーション を 構 築 する 最 新 のフレームワークです このフレームワークでは クライアントとサーバの 橋 渡 しをする 分 離 された 多 層 コンポーネント 開 発 がサ ポートされています クライアント 側 では JavaScript サーバ 側 では Apex が 使 用 されます メモ: このリリースには Lightningコンポーネントフレームワークのベータバージョンが 含 まれています 本 番 品 質 ではありますが いくつかの 制 限 があります Lightning コンポーネントフレームワークを 使 用 する 理 由 Lightningコンポーネントフレームワークを 使 用 したアプリケーションの 構 築 にはさまざまな 利 点 があります 標 準 のコンポーネントセット コンポーネントセットが 標 準 装 備 されているため アプリケーションの 構 築 にすぐに 着 手 できます アプ リケーションのデバイス 別 の 最 適 化 はコンポーネントが 行 うため 最 適 化 に 時 間 を 取 られることがありま せん パフォーマンス クライアント 側 で JavaScript に 依 存 するステートフルクライアントとステートレスサーバアーキテクチャを 使 用 して UI コンポーネントのメタデータおよびアプリケーションデータを 管 理 します このフレームワー クでは JSON を 使 用 して サーバとクライアント 間 のデータをやりとりします 効 率 性 を 最 大 にするため に サーバはユーザが 必 要 なデータのみを 送 信 します サーバやブラウザ デバイス ネットワークがインテリジェントに 活 用 されるため 開 発 者 はアプリケー ションのロジックやインタラクションに 集 中 できます イベント 駆 動 型 アーキテクチャ イベント 駆 動 型 アーキテクチャを 使 用 して 個 々のコンポーネントを 適 切 に 切 り 離 します どのコンポー ネントも アプリケーションイベント または 表 示 可 能 なコンポーネントイベントを 登 録 できます 短 時 間 で 開 発 デスクトップやモバイルデバイスとシームレスに 連 動 する 標 準 コンポーネントにより チームの 取 り 組 み が 迅 速 化 します アプリケーションをコンポーネントベースで 構 築 するため 並 列 設 計 が 可 能 になり 開 発 全 般 の 効 率 性 が 向 上 します 2

9 はじめに コンポーネント コンポーネントはカプセル 化 され 内 部 は 非 公 開 に 保 たれますが 公 開 形 状 はコンポーネントのコンシュー マから 参 照 できます この 強 固 な 分 離 により コンポーネント 作 成 者 は 自 由 に 内 部 実 装 の 詳 細 を 変 更 する ことができ コンポーネントのコンシューマはこうした 変 更 から 隔 離 されます デバイス 対 応 およびブラウザ 間 の 互 換 性 アプリケーションの 応 答 性 が 高 く 快 適 なユーザ 環 境 が 実 現 します Lightningコンポーネントフレームワー クは HTML5 CSS3 タッチイベントなど 最 新 のブラウザテクノロジをサポートしています コンポーネント コンポーネントは アプリケーションの 自 己 完 結 型 の 再 利 用 可 能 なユニットで UI の 再 利 用 可 能 なセクション を 表 します 粒 度 の 面 では 1 行 のテキストからアプリケーション 全 体 に 至 るものまで さまざまです フレームワークには 事 前 構 築 された 一 連 のコンポーネントが 含 まれます コンポーネントを 組 み 合 わせて 設 定 すれば アプリケーションに 新 しいコンポーネントを 作 成 できます コンポーネントが 表 示 されると ブラ ウザ 内 に HTML DOM 要 素 が 生 成 されます コンポーネントには 他 のコンポーネントのほか HTML CSS JavaScript その 他 の Web 対 応 コードを 含 める ことができます そのため 洗 練 された UI を 備 えたアプリケーションを 構 築 できます コンポーネントの 実 装 の 細 部 はカプセル 化 されています そのため コンポーネントのコンシューマがアプリ ケーションの 構 築 に 集 中 する 一 方 で コンポーネントの 作 成 者 はイノベーションに 取 り 組 み コンシューマの 作 業 を 遮 ることなく 変 更 を 実 行 できます コンポーネントの 設 定 では 定 義 に 公 開 する 指 定 の 属 性 を 設 定 しま す コンポーネントは イベントをリスンまたは 公 開 して それぞれの 環 境 とやりとりします 関 連 トピック: コンポーネント イベント イベント 駆 動 型 プログラミングは JavaScript や Java Swing など 多 くの 言 語 およびフレームワークで 使 用 され ています この 概 念 は インターフェースイベントの 発 生 時 にそのイベントに 対 応 するハンドラを 作 成 すると いうものです コンポーネントは そのマークアップでイベントを 起 動 できるように 登 録 します イベントは JavaScript コント ローラアクションから 起 動 されます このアクションは 一 般 的 にユーザがユーザインターフェースを 操 作 す ることでトリガされます このフレームワークには 次 の 2 つのタイプのイベントがあります コンポーネントイベントは そのコンポーネント 自 体 そのコンポーネントをインスタンス 化 するコンポー ネント そのコンポーネントを 含 むコンポーネントによって 処 理 されます アプリケーションイベントは 基 本 的 には 従 来 のパブリッシュ/サブスクライブモデルです イベントが 起 動 すると そのイベントのハンドラがあるすべてのコンポーネントに 通 知 されます 3

10 はじめに ブラウザサポート ハンドラは JavaScript コントローラアクションに 記 述 します 関 連 トピック: イベント クライアント 側 コントローラを 使 用 したイベントの 処 理 ブラウザサポート フレームワークは 主 要 なプラットフォームの 次 の Web ブラウザの 最 新 の 安 定 バージョンをサポートしてい ます ( 例 外 は 注 記 のとおりです) ブラウザ Google Chrome Apple Safari 5+ メモ Mac OS X および ios 用 Mozilla Firefox Microsoft Internet Explorer Internet Explorer の 使 用 をお 勧 めします Internet Explorer 7 および 8 を 使 用 すると パフォーマンスが 低 下 する ことがあります メモ: どのブラウザでも JavaScript および Cookie を 有 効 にする 必 要 があります 開 発 者 コンソールの 使 用 開 発 者 コンソールには コンポーネントおよびアプリケーションを 開 発 するためのツールが 用 意 されていま す 開 発 者 コンソールを 開 くには [あなたの 名 前 ] > [ 開 発 者 コンソール] をクリックします 4

11 はじめに オープンソースの Aura フレームワーク 開 発 者 コンソールでは 次 の 機 能 を 実 行 できます メニューバー (1) を 使 用 して 次 の Lightning リソースを 作 成 したり 開 いたりする アプリケーション コンポーネント インターフェース 行 動 メモ: Lightning リソースを 作 成 するには 名 前 空 間 プレフィックスがある Developer Edition 組 織 を 使 用 す る 必 要 があります ワークスペース (2) を 使 用 して Lightning リソースを 操 作 する サイドバー (3) を 使 用 して 特 定 のコンポーネントのバンドルに 含 まれるクライアント 側 のリソースを 作 成 したり 開 いたりする コントローラ ヘルパー スタイル ドキュメント レンダラ 開 発 者 コンソールについての 詳 細 は Salesforce ヘルプの 開 発 者 コンソールユーザインターフェースの 概 要 を 参 照 してください 関 連 トピック: コンポーネントのバンドル オープンソースの Aura フレームワーク この 開 発 者 ガイドでは 全 体 を 通 してAuraコンポーネントへの 参 照 があります たとえば コードサンプルに はコンポーネントの aura:component タグがあります これまで Lightning について 述 べてきましたが Aura と 5

12 はじめに このガイドのオンラインバージョン は 何 でしょうか? どのような 違 いがあるのでしょうか? Lightning コンポーネントは https://github.com/forcedotcom/aura で 入 手 できるオープンソースの Aura フレームワークに 基 づいて います Aura フレームワークでは Salesforceのデータから 完 全 に 独 立 したアプリケーションを 構 築 できます オープンソースの Aura フレームワークには Lightningコンポーネントフレームワークで 現 在 使 用 できない 機 能 およびコンポーネントがあります 弊 社 は これらの 機 能 およびコンポーネントをSalesforce 開 発 者 が 使 用 でき るように 作 業 を 進 めています このガイドのオンラインバージョン このガイドはオンラインで 利 用 できます 最 新 バージョンを 参 照 するには 次 の 場 所 にアクセスしてくださ い https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ 6

13 第 2 章 トピック: ご 利 用 になる 前 に 経 費 オブジェクト を 作 成 する スタンドアロン Lightning アプリ ケーションを 作 成 する まとめ クイックスタート クイックスタートでは 開 発 者 コンソールから 経 費 を 追 跡 するための スタンドア ロンの 簡 単 な Lightning アプリケーションの 作 成 と 実 行 についてステップごとに 説 明 します 7

14 クイックスタート ご 利 用 になる 前 に ご 利 用 になる 前 に スタンドアロンのLightningアプリケーションとコンポーネントを 操 作 するには 次 の 前 提 条 件 を 満 たしている ことを 確 認 してください 1. Developer Edition 組 織 を 作 成 する 2. 名 前 空 間 プレフィックスを 登 録 する 3. Lightning コンポーネントを 有 効 化 する Developer Edition 組 織 を 作 成 する Lightningコンポーネントフレームワークは Developer Edition 組 織 (または 短 縮 して DE 組 織 ) で 使 用 できます DE 組 織 は アプリケーションの 開 発 パッケージ 化 テスト インストールを 行 うためのすべての 機 能 と 権 限 が 備 わった 汎 用 の 環 境 です DE 組 織 を 使 用 していない 場 合 は 次 の 手 順 に 従 って 作 成 します 1. ブラウザで にアクセスします 2. 各 項 目 にユーザ 情 報 と 会 社 情 報 を 入 力 します 3. [メール] 項 目 には Web ブラウザから 簡 単 に 確 認 できる 公 開 アドレスを 使 用 してください 4. 一 意 の [ユーザ 名 ] を 入 力 します ユーザ 名 もメールアドレスの 形 式 にする 必 要 がありますが メールアド レスと 同 じにする 必 要 はなく 通 常 は 違 うものを 入 力 することをお 勧 めします ユーザ 名 は developer.salesforce.com でのログイン 情 報 および ID であるため 自 分 自 身 を 表 す などのユーザ 名 を 選 ぶことで より 有 益 に 使 用 できます 5. [Master Subscription Agreement ( 主 登 録 契 約 )] を 読 み チェックボックスをオンにしてから [Submit Registration ( 登 録 を 実 行 )] をクリックします 6. その 後 まもなく ログインリンクを 記 載 したメールが 届 きます リンクをクリックし パスワードを 変 更 します 名 前 空 間 プレフィックスを 登 録 する 次 に 名 前 空 間 プレフィックスを 登 録 します 名 前 空 間 プレフィックスは すべてのSalesforce 組 織 にわたって 必 ずグローバルに 一 意 なものを 指 定 します 名 前 空 間 プレフィックスでは 大 文 字 と 小 文 字 が 区 別 され 15 文 字 以 内 の 英 数 字 で 指 定 できます 名 前 空 間 プレフィックスを 登 録 する 手 順 は 次 のとおりです 1. [ 設 定 ] で [ 作 成 ] > [パッケージ] をクリックします 2. [ 編 集 ] をクリックします メモ: すでに 開 発 者 設 定 が 定 義 されている 場 合 は このボタンは 表 示 されません 3. 開 発 者 設 定 に 必 要 な 選 択 項 目 を 確 認 し [ 次 へ] をクリックします 4. 登 録 する 名 前 空 間 プレフィックスを 入 力 します 5. [ 使 用 可 能 か 調 べる] をクリックして 使 用 済 みかどうかを 確 認 します 6. 入 力 した 名 前 空 間 プレフィックスがすでに 使 用 済 みの 場 合 は 上 記 の 操 作 を 繰 り 返 します 8

15 クイックスタート 経 費 オブジェクトを 作 成 する 7. [ 選 択 内 容 の 確 認 ] をクリックします 8. [ 保 存 ] をクリックします 名 前 空 間 は 作 成 しているコンポーネントおよび Apex クラスのプレフィックスとして 使 用 されます また 次 にアクセスして 作 成 するアプリケーションをアドレス 指 定 するために 名 前 空 間 を 使 用 することもできま す https://<mysalesforceinstance>.lightning.force.com/<namespace>/<appname>.app (<mysalesforceinstance> は na1 など 組 織 をホストするインスタンスの 名 前 です) Lightning コンポーネントを 有 効 化 する 組 織 で Lightning コンポーネントを 有 効 化 するように 選 択 する 必 要 があります 1. [ 設 定 ] で [ 開 発 ] > [Lightning コンポーネント] をクリックします 2. [Lightning コンポーネントを 有 効 化 ] チェックボックスをオンにします 警 告 : Lightning コンポーネントを 有 効 化 すると Salesforce1 で Force.com Canvas アプリケーションを 使 用 できません Lightningコンポーネントを 有 効 化 すると 組 織 のすべての Force.com Canvasアプリケーショ ンが Salesforce1 で 動 作 しなくなります 3. [ 保 存 ] をクリックします 経 費 オブジェクトを 作 成 する アプリケーションの 経 費 レコードとデータを 保 存 するため 経 費 オブジェクトを 作 成 します 1. [ 設 定 ] で [ 作 成 ] > [オブジェクト] をクリックします 2. [ 新 規 カスタムオブジェクト] をクリックします 3. カスタムオブジェクト 定 義 を 入 力 します [ 表 示 ラベル] に Expense ( 経 費 ) と 入 力 します [ 表 示 ラベル ( 複 数 形 )] に Expenses ( 経 費 ) と 入 力 します 4. [ 保 存 ] をクリックして 新 規 オブジェクトの 作 成 を 終 了 します 経 費 の 詳 細 ページが 表 示 されます オブジェクトの API 名 が namespace Expense c になっていることを 確 認 します namespace は 登 録 済 みの 名 前 空 間 プレフィックスに 対 応 します 5. 経 費 の 詳 細 ページで 次 のカスタム 項 目 を 追 加 します データ 型 数 値 (16, 2) テキスト (20) 日 付 / 時 間 チェックボックス 項 目 表 示 ラベル Amount ( 金 額 ) Client (クライアント) Date ( 日 付 ) Reimbursed? ( 払 い 戻 し 済 み?) 9

16 クイックスタート 経 費 オブジェクトを 作 成 する カスタムオブジェクトの 作 成 が 完 了 すると 経 費 定 義 の 詳 細 ページは 次 のようになります 6. 経 費 レコードを 表 示 するため カスタムオブジェクトタブを 作 成 します a. [ 設 定 ] で [ 作 成 ] > [タブ] をクリックします b. [カスタムオブジェクトタブ] 関 連 リストで [ 新 規 ] をクリックして 新 規 カスタムタブウィザードを 起 動 します [オブジェクト] で [Expense ( 経 費 )] を 選 択 します [タブスタイル] でルックアップアイコンをクリックし クレジットカードアイコンを 選 択 します c. 残 りのデフォルトを 受 け 入 れ [ 次 へ] をクリックします d. [ 次 へ] および [ 保 存 ] をクリックして タブの 作 成 を 終 了 します これで 経 費 用 のタブが 画 面 上 部 に 表 示 されます 7. 経 費 レコードをいくつか 作 成 します a. [Expenses ( 経 費 )] タブをクリックし [ 新 規 ] をクリックします 10

17 クイックスタート スタンドアロン Lightning アプリケーションを 作 成 する b. 次 の 項 目 に 値 を 入 力 し 2 つ 目 のレコードについても 同 じ 操 作 を 繰 り 返 します Expense Name ( 経 費 名 ) Amount ( 金 額 ) Client Date ( 日 付 ) Reimbursed? ( 払 い 戻 し 済 み?) 昼 食 /4/1 12:00 オフ 夕 食 ABC Co. 2014/4/2 19:00 オン スタンドアロン Lightning アプリケーションを 作 成 する このチュートリアルでは 開 発 者 コンソールを 使 用 して 簡 単 な 経 費 追 跡 アプリケーションを 作 成 します このアプリケーションの 目 的 は 多 くの 標 準 Lightningコンポーネントを 利 用 することと JavaScript と Apex を 使 用 したクライアントとサーバのやりとりを 示 すことです 式 を 使 用 して 動 的 にデータを 操 作 したり イベント を 使 用 してコンポーネント 間 でデータをやりとりしたりする 方 法 をアプリケーションを 構 築 しながら 学 習 して いきます 経 費 オブジェクトを 作 成 する (ページ 9)で 説 明 されている 経 費 カスタムオブジェクトを 作 成 してあるこ とを 確 認 します 経 費 データを 保 存 するカスタムオブジェクトを 使 用 して アプリケーションでレコードを 操 作 する 方 法 クライアント 側 のコントローラアクションでユーザ 操 作 を 処 理 する 方 法 および Apex コントロー ラでデータ 更 新 を 保 持 する 方 法 を 学 習 します アプリケーションを 作 成 したら Salesforce1 への Lightning コンポーネントの 追 加 (ページ 48)の 手 順 を 実 行 して Salesforce1 に 追 加 します アプリケーションのパッケージ 化 および AppExchange での 配 布 については アプリ ケーションとコンポーネントの 配 布 (ページ 144)を 参 照 してください 11

18 クイックスタート スタンドアロン Lightning アプリケーションを 作 成 する 1. フォームには [ 実 行 ]ボタンが 押 されたときにビューおよび 経 費 レコードを 更 新 するLightning 入 力 コンポー ネント (1) が 含 まれます 2. 経 費 の 総 額 と 数 でカウンタが 初 期 化 され (2) レコードの 作 成 または 削 除 で 更 新 されます 3. 経 費 リスト (3) の 表 示 には Lightning 出 力 コンポーネントが 使 用 され 経 費 が 追 加 されるたびに 更 新 されま す 4. 経 費 リストに 対 するユーザ 操 作 (4) により レコードの 変 更 を 保 存 する 更 新 イベントがトリガされます 経 費 追 跡 アプリケーションで 作 成 するリソースは 次 のとおりです Resources 説 明 expensetracker バンドル expensetracker.app expensetracker.css 他 のすべてのコンポーネントが 含 まれる 最 上 位 コンポーネント アプリケーションのスタイル Form バンドル form.cmp formcontroller.js ユーザ 入 力 を 収 集 する Lightning 入 力 コンポーネントのコレクション フォームに 対 するユーザ 操 作 を 処 理 するアクションが 含 まれるクラ イアント 側 のコントローラ 12

19 クイックスタート ステップ 1: 静 的 モックアップを 作 成 する Resources formhelper.js form.css 説 明 コントローラアクションによってコールされるクライアント 側 のヘ ルパー 関 数 フォームコンポーネントのスタイル expenselist バンドル expenselist.cmp expenselistcontroller.js expenselist.css 経 費 レコードのデータを 表 示 する Lightning 出 力 コンポーネントのコ レクション 経 費 リストの 表 示 に 対 するユーザ 操 作 を 処 理 するアクションが 含 ま れるクライアント 側 のコントローラ 経 費 リストの 表 示 のスタイル Apex クラス ExpenseController.apxc データの 読 み 込 み 経 費 レコードの 挿 入 または 更 新 を 行 う Apex コン トローラ イベント updateexpenseitem.evt 経 費 リストの 表 示 から 経 費 項 目 が 更 新 されるときに 起 動 されるイベ ント ステップ 1: 静 的 モックアップを 作 成 する アプリケーションのエントリポイントとなる.app ファイルに 静 的 モックアップを 作 成 します 他 のコンポー ネントおよび HTML マークアップを 含 めることができます 次 のフローチャートに アプリケーションでのデータフローをまとめます アプリケーションでは クライア ント 側 のコントローラ ヘルパー 関 数 Apex コントローラを 組 み 合 わせてレコードからデータが 取 得 されま す これは このクイックスタートで 後 ほど 作 成 します 13

20 クイックスタート ステップ 1: 静 的 モックアップを 作 成 する 1. あなたの 名 前 > [ 開 発 者 コンソール] をクリックして 開 発 者 コンソールを 開 きます 2. 開 発 者 コンソールで [ファイル] > [ 新 規 ] > [Lightning アプリケーション] をクリックします 3. [New Lightning Bundle ( 新 規 Lightning バンドル)] ポップアップウィンドウの [Name ( 名 前 )] 項 目 に expensetracker と 入 力 します これにより expensetracker.app という 新 しいアプリケーション が 作 成 されます 4. ソースコードエディタで 次 のコードを 入 力 します <aura:application> <link href='/resource/bootstrap/' rel="stylesheet"/> 14

21 クイックスタート ステップ 1: 静 的 モックアップを 作 成 する <div class="container"> <h1>add Expense</h1> </div> </aura:application> アプリケーションは 最 上 位 レベルのコンポーネントであり コンポーネントへのメインエントリポイント となります これには コンポーネントや <div> タグおよび <header> タグなどの HTML マークアップ を 含 めることができます メモ: ファイルパス 名 bootstrap は このクイックスタートで 後 からアップロードする 静 的 リソース の 名 前 に 対 応 します リソースが 見 つからないというエラーがブラウザコンソールに 表 示 されても このクイックスタートでは 使 用 しないため 心 配 しないでください 5. 新 しいコンポーネントにスタイルを 追 加 します a. サイドバーで [STYLE] をクリックします これで expensetracker.css という 新 しい CSS リソース が 作 成 されます b. 次 の CSS ルールセットを 入 力 します.THIS h1 { background: url(/img/icon/creditcard32.png) no-repeat; padding-left: 40px; メモ: THIS は CSS に 名 前 空 間 を 追 加 して 別 のコンポーネントとのスタイルの 競 合 を 回 避 するため のキーワードです 背 景 のアイコンは 経 費 オブジェクトを 作 成 する (ページ 9)で 作 成 したタブ のクレジットカードアイコンを 表 します 6. Salesforce1 のスタイルを 使 用 したテーマを からダウンロード し bootstrap.css ファイルを 静 的 リソースとしてアップロードします このファイルは /dist/css ディレクトリにあります a. [ 設 定 ] から [ 開 発 者 ] > [ 静 的 リソース] をクリックします [ 新 規 ] をクリックします b. [ 名 前 ] 項 目 に bootstrap と 入 力 します [ファイルを 選 択 ] ボタンをクリックし bootstrap.css ファイルを 選 択 します このチュートリアルを 簡 略 化 するため 他 のファイルはアップロードしませ ん c. [ 保 存 ] をクリックします 7. 変 更 を 保 存 し サイドバーの[プレビュー]をクリックしてアプリケーションをプレビューします または https://<mysalesforceinstance>.lightning.force.com/<namespace>/expensetracker.app (<mysalesforceinstance> は na1 など 組 織 をホストするインスタンスの 名 前 です) に 移 動 します ヘッダーとアイコンが 灰 色 の 背 景 に 表 示 されます 関 連 トピック: aura:application 15

22 クイックスタート ステップ 2: ユーザ 入 力 用 のコンポーネントを 作 成 する ステップ 2: ユーザ 入 力 用 のコンポーネントを 作 成 する コンポーネントは アプリケーションのビルディングブロックです コンポーネントを Apex コントローラク ラスに 接 続 して データを 読 み 込 むことができます このステップで 作 成 するコンポーネントにより 経 費 の 金 額 や 日 付 など 経 費 に 関 するユーザ 入 力 を 受 け 入 れるフォームが 提 供 されます 1. [ファイル] > [ 新 規 ] > [Lightning コンポーネント] をクリックします 2. [New Lightning Bundle ( 新 規 Lightning バンドル)] ポップアップウィンドウの [Name ( 名 前 )] 項 目 に form (フォーム) と 入 力 します これにより form.cmp という 新 しいコンポーネントが 作 成 されます 3. ソースコードエディタで 次 のコードを 入 力 します namespace を 登 録 済 みの 名 前 空 間 と 置 き 換 えま す <aura:component> <aura:attribute name="expenses" type="namespace.expense c[]"/> <aura:attribute name="newexpense" type="namespace.expense c" default="{ 'sobjecttype': 'namespace Expense c', 'Name': '', 'namespace Amount c': 0, 'namespace Client c': '', 'namespace Date c': '', 'namespace Reimbursed c': false "/> <!-- Attributes for Expense Counters --> <aura:attribute name="total" type="double" default="0.00" /> <aura:attribute name="exp" type="double" default="0" /> <!-- Input Form using components --> <form> <fieldset> <ui:inputtext aura:id="expname" label="expense Name" class="form-control" value="{!v.newexpense.name" placeholder="my Expense" required="true"/> <ui:inputnumber aura:id="amount" label="amount" class="form-control" value="{!v.newexpense.namespace Amount c" placeholder="20.80" required="true"/> <ui:inputtext aura:id="client" label="client" class="form-control" value="{!v.newexpense.namespace Client c" placeholder="abc Co."/> <ui:inputdatetime aura:id="expdate" label="expense Date" class="form-control" value="{!v.newexpense.namespace Date c" displaydatepicker="true"/> <ui:inputcheckbox aura:id="reimbursed" label="reimbursed?" value="{!v.newexpense.namespace Reimbursed c"/> <ui:button label="submit" press="{!c.createexpense"/> </fieldset> </form> <!-- Expense Counters --> <div class="row"> 16

23 クイックスタート ステップ 2: ユーザ 入 力 用 のコンポーネントを 作 成 する <!-- Change the counter color to red if total amount is more than > <div class="{!v.total >= 100? 'alert alert-danger' : 'alert alert-success'"> <h3>total Expenses</h3>$<ui:outputNumber value="{!v.total" format=".00"/> </div> <div class="alert alert-success"> <h3>no. of Expenses</h3><ui:outputNumber value="{!v.exp"/> </div> </div> <!-- Display expense records --> <div class="row"> <aura:iteration items="{!v.expenses" var="expense"> <p>{!expense.name, {!expense.namespace Client c, {!expense.namespace Amount c, {!expense.namespace Date c, {!expense.namespace Reimbursed c</p> </aura:iteration> </div> </aura:component> コンポーネントでは 豊 富 な 属 性 セットが 提 供 され ブラウザイベントがサポートされます 属 性 は 型 付 けされた 項 目 で コンポーネントの 特 定 のインスタンスに 設 定 されており 式 の 構 文 を 使 用 して 参 照 でき ます すべての aura:attribute タグには 名 前 とデータ 型 の 値 があります 詳 細 は サポートされる aura:attribute の 型 (ページ 156) を 参 照 してください この 属 性 と 式 は アプリケーションを 作 成 していく 過 程 で 明 確 になります {!v.exp は 経 費 レコード 数 を 評 価 し {!v.total は 合 計 金 額 を 評 価 します {!c.createexpense は [ 実 行 ] ボタンをクリックし たときに 実 行 されるクライアント 側 のコントローラアクションを 表 します このアクションにより 新 し い 経 費 が 作 成 されます ui:button の press イベントでは ボタンをクリックしたときのアクションを 結 び 付 けられます 式 {!v.expenses は コンポーネントを 経 費 オブジェクトに 接 続 します var="expense" は 反 復 内 の 各 項 目 に 使 用 する 変 数 の 名 前 を 示 します {!expense.namespace_client c は 経 費 オブジェクト のクライアント 項 目 にバインドするデータを 表 します メモ: namespace Expense c 型 の newexpense のデフォルト 値 は sobjecttype を 含 め 正 しい 項 目 で 初 期 化 する 必 要 があります デフォルト 値 を 初 期 化 することで 経 費 が 正 しい 形 式 で 保 存 され ます 4. サイドバーで[STYLE]をクリックして form.css という 名 前 の 新 しいリソースを 作 成 します 次 の CSS ルー ルセットを 入 力 します.THIS.uiInputCheckbox { margin-left: 20px;.THIS.uiButton { margin-bottom: 20px;.THIS.row { width: 100%; margin-bottom: 20px; 17

24 クイックスタート ステップ 2: ユーザ 入 力 用 のコンポーネントを 作 成 する.THIS.blue { background: #d9edf2;.this.white { background: #ffffff;.this.uiinput.uiinputdatetime { position: relative;.this.uiinputdatetime+.datepicker-openicon { position: absolute; display: inline-block; left: 90%; top: 25px; background-position: center; padding: 2% 5%;.THIS.uiInputDefaultError li { list-style: none; メモ:.uiInputDefaultError セレクタは ステップ 5: 新 しい 経 費 の 入 力 を 有 効 化 する (ページ 26) で 項 目 検 証 を 追 加 するときのデフォルトのエラーコンポーネントのスタイルを 設 定 します 5. アプリケーションにコンポーネントを 追 加 します expensetracker.app で マークアップに 新 しいコン ポーネントを 追 加 します namespace を 登 録 済 みの 名 前 空 間 と 置 き 換 えます <aura:application> <link href='/resource/bootstrap/' rel="stylesheet"/> <div class="container"> <h1>add Expense</h1> <!-- Add the component here --> <namespace:form /> </div> </aura:application> 6. 変 更 を 保 存 し サイドバーの [プレビューを 更 新 ] をクリックしてアプリケーションをプレビューします または ブラウザを 再 読 み 込 みします メモ: このステップでは Apex コントローラクラスをまだ 作 成 していないため 作 成 したコンポーネ ントにデータは 表 示 されません お 疲 れ 様 です 入 力 フォームを 提 供 し 経 費 を 表 示 するコンポーネントが 作 成 されました Beyond the Basics 18

25 クイックスタート ステップ 3: 経 費 データを 読 み 込 む Lightning コンポーネントフレームワークには aura や ui などの 異 なる 名 前 空 間 に 整 理 され すぐに 使 用 できる 一 連 のコンポーネントが 含 まれています ui 名 前 空 間 には UI フレームワークの 一 般 的 なコ ンポーネントがあります たとえば ui:inputtext はテキスト 項 目 に 対 応 します aura 名 前 空 間 に は このステップで 使 用 する aura:iteration など 中 核 となるフレームワーク 機 能 のための 多 くの コンポーネントが 含 まれています 関 連 トピック: aura:component aura:iteration コンポーネントのボディ ステップ 3: 経 費 データを 読 み 込 む Apexコントローラクラスを 使 用 して 経 費 データを 読 み 込 みます コンポーネントの 属 性 を 介 してこのデータ を 表 示 し カウンタを 動 的 に 更 新 します 経 費 コントローラクラスを 作 成 します 1. [File (ファイル)] > [New ( 新 規 )] > [Apex クラス] をクリックし [New Class ( 新 規 クラス)] ウィンドウで ExpenseController と 入 力 します これにより ExpenseController.apxc という 新 しい Apex ク ラスが 作 成 されます 2. 次 のコードを 入 力 します public class ExpenseController public static List<Expense c> getexpenses() { return [SELECT id, name, amount c, client c, date c, reimbursed c, createddate FROM Expense c]; getexpenses() メソッドには すべての 経 費 レコードを 返 すための SOQL クエリが 含 まれています getexpenses() メソッドの 結 果 をコンポーネントのマークアップに 表 示 する form.cmp の 構 文 {!v.expenses を 思 い 出 してください メモ: SOQL の 使 用 についての 詳 細 は Force.com SOQL および SOSL リファレンス を 参 照 により クライアント 側 およびサーバ 側 からコントローラメソッドへのアクセスが 可 能 に なります サーバ 側 のコントローラは 静 的 である 必 要 があります 特 定 のコンポーネントのすべてのイン スタンスは 1 つの 静 的 コントローラを 共 有 します これらのコントローラは リストや 対 応 付 けなど 任 意 の 型 で 受 け 渡 しできます メモ: サーバ 側 のコントローラについての 詳 細 は Apex サーバ 側 コントローラの 概 要 (ページ 131)を 参 照 してください 19

26 クイックスタート ステップ 3: 経 費 データを 読 み 込 む 3. form.cmp で controller 属 性 を 含 めるように aura:component タグを 更 新 します コンポーネント の 初 期 化 時 にデータを 読 み 込 むには init ハンドラを 追 加 します namespace を 登 録 済 みの 名 前 空 間 と 置 き 換 えます <aura:component controller="namespace.expensecontroller"> <aura:handler name="init" value="{!this" action="{!c.doinit" /> <!-- Other aura:attribute tags here --> <!-- Other code here --> </aura:component> 初 期 化 時 に 次 に 作 成 する doinit アクションが このイベントハンドラで 実 行 されます この init イ ベントは コンポーネントが 表 示 される 前 に 起 動 します 4. init ハンドラに クライアント 側 のコントローラアクションを 追 加 します サイドバーで [CONTROLLER] をクリックして 新 しいリソース formcontroller.js を 作 成 します 次 のコードを 入 力 します ({ ) doinit : function(component, event, helper) { //Update expense counters helper.getexpenses(component);,//delimiter for future code コンポーネントの 初 期 化 時 に 経 費 の 最 新 の 合 計 金 額 と 総 数 が 経 費 カウンタに 反 映 されます 経 費 カウン タについては 次 のステップでヘルパー 関 数 getexpenses(component) を 使 用 して 追 加 します メモ: クライアント 側 のコントローラでは コンポーネント 内 のイベントを 処 理 し コントローラが 属 するコンポーネント アクションで 処 理 するイベント ヘルパー ( 使 用 する 場 合 ) という 3 つのパラ メータを 指 定 できます ヘルパーは コンポーネントのバンドルで 再 利 用 するコードを 保 存 するため のリソースであり コードの 再 利 用 性 および 特 殊 化 が 向 上 します クライアント 側 のコントローラと ヘルパーの 使 用 についての 詳 細 は クライアント 側 コントローラを 使 用 したイベントの 処 理 (ページ 77)およびコンポーネントのバンドル 内 の JavaScript コードの 共 有 (ページ 110)を 参 照 してください 5. 経 費 レコードを 表 示 し カウンタを 動 的 に 更 新 するヘルパー 関 数 を 作 成 します [HELPER] をクリックして 新 しいリソース formhelper.js を 作 成 し 次 のコードを 入 力 します namespace を 登 録 済 みの 名 前 空 間 と 置 き 換 えます ({ getexpenses: function(component) { var action = component.get("c.getexpenses"); var self = this; action.setcallback(this, function(a) { component.set("v.expenses", a.getreturnvalue()); self.updatetotal(component); ); $A.enqueueAction(action);, updatetotal : function(component) { var expenses = component.get("v.expenses"); var total = 0; for(var i=0; i<expenses.length; i++){ var e = expenses[i]; total += e.namespace Amount c; 20

27 クイックスタート ステップ 3: 経 費 データを 読 み 込 む //Update counters component.set("v.total", total); component.set("v.exp", expenses.length);,//delimiter for future code ) component.get("c.getexpenses") は サーバ 側 アクションのインスタンスを 返 します action.setcallback() は サーバ 応 答 の 後 でコールされる 関 数 を 渡 します その 関 数 で action オブ ジェクトが 戻 されます そのオブジェクトに 対 する 2 つの 異 なるポインタであることを 示 すため このオ ブジェクトを a と 呼 びます ただし 最 終 的 には 同 じ action オブジェクトになります updatetotal では 経 費 を 取 得 し 金 額 値 と 経 費 期 間 の 合 計 を 求 め total および exp 属 性 でそれらの 値 を 設 定 しま す メモ: $A.enqueueAction(action) は アクションをキューに 追 加 します すべてのアクションコー ルは 非 同 期 であり バッチで 実 行 されます サーバ 側 のアクションについての 詳 細 は サーバ 側 のア クションのコール (ページ 132)を 参 照 してください 6. 変 更 を 保 存 し ブラウザを 再 読 み 込 みします 経 費 オブジェクトを 作 成 する (ページ 9)で 作 成 した 経 費 レコードが 表 示 されます カウンタについて は プログラムロジックを 後 から 追 加 するため この 時 点 では 動 作 しません これで アプリケーションで 経 費 オブジェクトが 取 得 され レコードがリストとして 表 示 され aura:iteration によって 反 復 処 理 されるようになりました カウンタには 経 費 の 合 計 金 額 と 総 数 が 反 映 されます このステップでは 経 費 データを 読 み 込 むApexコントローラクラスを 作 成 しました getexpenses() から 経 費 レコードのリストが 返 されます デフォルトでは フレームワークで getter はコールされません メソッ ドにアクセスするには そのメソッドでデータを 公 開 アノテーションをメソッドに 付 加 します コンポーネントにアクセスできるのは アノテーションが 付 加 されたメソッドのみです ExpenseController クラスを 使 用 するコンポーネントのマークアップでは ステップ 2: ユーザ 入 力 用 のコン ポーネントを 作 成 する (ページ 16)に 示 すように {!expense.name または {!expense.id という 式 で 経 費 名 または 経 費 ID を 表 示 できます Beyond the Basics クライアント 側 のコントローラ 定 義 は 角 括 弧 および 中 括 弧 で 囲 まれます 中 括 弧 は JSON オブジェクト を 表 し オブジェクト 内 のすべてのものは 名 前 - 値 のペアの 対 応 付 けです たとえば updatetotal は クライアント 側 のアクションに 対 応 する 名 前 で 値 は 関 数 です 関 数 は 他 のオブジェクトと 同 様 に JavaScript で 順 に 渡 されます 21

28 クイックスタート ステップ 4: ネストされたコンポーネントを 作 成 する ステップ 4: ネストされたコンポーネントを 作 成 する コンポーネントの 拡 大 に 伴 い 粒 度 とカプセル 化 を 保 持 するために 分 割 する 場 合 があります このステップで は 繰 り 返 しのデータを 含 みその 属 性 が 親 コンポーネントに 渡 されるコンポーネントの 作 成 について 説 明 しま す また コンポーネントの 初 期 化 時 にデータを 読 み 込 むため クライアント 側 のコントローラアクションも 追 加 します 次 のフローチャートに 新 しい 経 費 を 作 成 するときの アプリケーションでのデータフローを 示 します コン ポーネント form.cmp で [ 送 信 ]ボタンをクリックするとデータが 取 得 され JavaScript コードで 処 理 され サー バ 側 のコントローラに 送 信 してレコードとして 保 存 されます レコードのデータは このステップで 作 成 する ネストされたコンポーネントに 表 示 されます 22

29 クイックスタート ステップ 4: ネストされたコンポーネントを 作 成 する 1. [ファイル] > [ 新 規 ] > [Lightning コンポーネント] をクリックします 2. [New Lightning Bundle ( 新 規 Lightning バンドル)] ポップアップウィンドウで expenselist と 入 力 します これにより expenselist.cmp という 新 しいコンポーネントが 作 成 されます 3. expenselist.cmp で 次 のコードを 入 力 します namespace を 登 録 済 みの 名 前 空 間 と 置 き 換 えます <aura:component> <aura:attribute name="expense" type="namespace.expense c"/> 23

30 クイックスタート ステップ 4: ネストされたコンポーネントを 作 成 する <!-- Color the item blue if the expense is reimbursed --> <div class="{!v.expense.namespace reimbursed c == true? 'listrecord recordlayout blue' : 'listrecord recordlayout white'"> <a aura:id="expense" href="{!'/' + v.expense.id"> <div class="itemtitle">{!v.expense.name</div> <div class="recorditem">amount: <ui:outputnumber value="{!v.expense.namespace amount c" format=".00"/> </div> <div class="recorditem">client: <ui:outputtext value="{!v.expense.namespace client c"/> </div> <div class="recorditem">date: <ui:outputdatetime value="{!v.expense.namespace date c" /> </div> <div class="recorditem">reimbursed? <ui:inputcheckbox value="{!v.expense.namespace reimbursed c" click="{!c.update"/> </div> </a> </div> </aura:component> ここでは {!expense.namespace Amount c ではなく {!v.expense.namespace Amount c を 使 用 しています この 式 は expense オブジェクトおよびその amount 値 にアクセスします 名 前 空 間 でプレフィックスを 付 ける 必 要 があるのは カスタム 項 目 のみです expense の 型 は Expense c です 非 プリミティブ 型 には mynamespace.myapexclass の 形 式 を 使 用 します また href="{!'/' + v.expense.id" は 経 費 ID を 使 用 して 各 経 費 レコードの 詳 細 ページへのリン クを 設 定 します 4. サイドバーで [STYLE] をクリックし 次 の CSS ルールセットを 入 力 します.THIS.recordLayout { list-style: none; padding: 14px; margin: 10px; border-bottom:1px solid #cfd4d9;.this.listrecord { margin: 14px; border-radius: 5px; border: 1px solid #cfd4d9; position: relative;.this.uioutputtext { line-height: 1.1em; 24

31 クイックスタート ステップ 4: ネストされたコンポーネントを 作 成 する.THIS.itemTitle { font-size: 15px; padding-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;.this.recorditem { text-overflow: ellipsis; white-space: nowrap;.this a:hover { text-decoration: none; background-color: #235636; 5. form.cmp で ネストされた 新 しいコンポーネント expenselist を 使 用 するように aura:iteration タ グを 更 新 します 既 存 の aura:iteration タグを 見 つけます <aura:iteration items="{!v.expenses" var="expense"> <p>{!expense.name, {!expense.namespace Client c, {!expense.namespace Amount c, {!expense.namespace Date c, {!expense.namespace Reimbursed c</p> </aura:iteration> そのタグを expenselist コンポーネントを 使 用 する aura:iteration タグに 置 き 換 えます namespace を 登 録 済 みの 名 前 空 間 と 置 き 換 えます <aura:iteration items="{!v.expenses" var="expense"> <namespace:expenselist expense="{!expense"/> </aura:iteration> 経 費 の 詳 細 の 表 示 を 処 理 する expenselist コンポーネントに 各 expense レコードを 単 に 渡 す 場 合 と マークアップが 似 ていることがわかります 6. 変 更 を 保 存 し ブラウザを 再 読 み 込 みします ネストされたコンポーネントを 作 成 したので その 属 性 を 親 コンポーネントに 渡 します 次 に ユーザ 入 力 の 処 理 方 法 と 経 費 オブジェクトの 更 新 方 法 ついて 説 明 します Beyond the Basics コンポーネントを 作 成 すると そのコンポーネントの 定 義 を 提 供 することになります コンポーネント を 別 のコンポーネントに 挿 入 する 場 合 は そのコンポーネントへの 参 照 を 作 成 します つまり 同 じコ 25

32 クイックスタート ステップ 5: 新 しい 経 費 の 入 力 を 有 効 化 する ンポーネントの 異 なる 属 性 を 持 つ 複 数 のインスタンスを 追 加 できるということです コンポーネントの 属 性 についての 詳 細 は コンポーネントのコンポジション (ページ 40)を 参 照 してください 関 連 トピック: コンポーネントの 属 性 aura:iteration コンポーネントの 初 期 化 時 のアクションの 呼 び 出 し ステップ 5: 新 しい 経 費 の 入 力 を 有 効 化 する テキストをフォームに 入 力 して [ 送 信 ] を 押 すときに 新 しい 経 費 レコードを 挿 入 します このアクションは press 属 性 でボタンコンポーネントに 結 び 付 けられます まず レコードを 挿 入 または 更 新 する 新 しいメソッドで Apex コントローラを 更 新 します 1. ExpenseController クラスで 次 のコードを getexpenses() メソッドの 下 に 入 力 public static Expense c saveexpense(expense c expense) { upsert expense; return expense; saveexpenses() メソッドでは upsert 操 作 を 使 用 して 経 費 レコードを 挿 入 または 更 新 できます メモ: upsert 操 作 についての 詳 細 は Apex コード 開 発 者 ガイド を 参 照 してください 2. [ 送 信 ]ボタンが 押 されたときに 新 しい 経 費 レコードを 作 成 するコントローラ 側 のアクションを 作 成 します formcontroller.js で doinit アクションの 後 に 次 のコードを 追 加 します createexpense : function(component, event, helper) { var amtfield = component.find("amount"); var amt = amtfield.get("v.value"); if (isnan(amt) amt==''){ amtfield.setvalid("v.value", false); amtfield.adderrors("v.value", [{message:"enter an expense amount."]); else { amtfield.setvalid("v.value", true); var newexpense = component.get("v.newexpense"); helper.createexpense(component, newexpense);,//delimiter for future code createexpense では ui:inputdefaulterror で 表 されるエラーメッセージを 追 加 するデフォルトのエ ラー 処 理 を 使 用 して 名 前 項 目 と 金 額 項 目 を 検 証 します コントローラでは setvalid(false) を 使 用 して 入 力 値 を 無 効 化 し setvalid(true) を 使 用 してエラーをクリアします 項 目 検 証 についての 詳 細 は 項 目 の 検 証 (ページ 115)を 参 照 してください 引 数 を helper.createexpense() というヘルパー 関 数 に 渡 すと saveexpense という Apex クラスがト リガされます 26

33 クイックスタート ステップ 5: 新 しい 経 費 の 入 力 を 有 効 化 する メモ: ステップ 2: ユーザ 入 力 用 のコンポーネントを 作 成 する (ページ 16)で aura:id 属 性 を 追 加 したこ とを 思 い 出 してください aura:id により コンポーネントとそのコントローラの 範 囲 内 で 構 文 component.find("amount") を 使 用 してコンポーネントを 名 前 で 検 索 できます 3. レコードの 作 成 を 処 理 するヘルパー 関 数 を 作 成 します updatetotal 関 数 の 後 に 次 のヘルパー 関 数 を 追 加 します createexpense: function(component, expense) { this.upsertexpense(component, expense, function(a) { var expenses = component.get("v.expenses"); expenses.push(a.getreturnvalue()); component.set("v.expenses", expenses); this.updatetotal(component); );, upsertexpense : function(component, expense, callback) { var action = component.get("c.saveexpense"); action.setparams({ "expense": expense ); if (callback) { action.setcallback(this, callback); $A.enqueueAction(action); createexpense から upsertexpense がコールされ saveexpense というサーバ 側 のアクションのイン スタンスが 定 義 されて expense オブジェクトがパラメータとして 設 定 されます サーバ 側 のアクション が 返 された 後 にコールバックが 実 行 され レコード ビュー およびカウンタが 更 新 されます $A.enqueueAction(action) により サーバ 側 のアクションがアクション 実 行 キューに 追 加 されます メモ: さまざまなアクションの 状 態 を 使 用 でき コールバックでそれらの 動 作 をカスタマイズできま す アクションのコールバックについての 詳 細 は サーバ 側 のアクションのコールを 参 照 してくださ い 4. 変 更 を 保 存 し ブラウザを 再 読 み 込 みします Breakfast, 10, ABC Co., Apr 30, :00:00 AM と 入 力 してアプリケーションをテストします 日 付 項 目 では 日 付 ピッカーを 使 用 して 日 時 値 を 設 定 することもできます [ 送 信 ] ボタンをクリックします レコードがコンポーネントのビューとレコードの 両 方 に 追 加 され カウンタが 更 新 されます メモ: Apex コードをデバッグするには 開 発 者 コンソールの [Logs (ログ)] タブを 使 用 します たとえ ば 日 時 項 目 の 入 力 規 則 がない 場 合 に 無 効 な 日 時 形 式 を 入 力 すると INVALID_TYPE_ON_FIELD_IN_RECORD 例 外 が 発 生 する 可 能 性 があります これは 開 発 者 コンソールの [Logs (タブ)] とブラウザの 応 答 ヘッ ダーの 両 方 にリストされます 入 力 規 則 がある 場 合 は Apexエラーがブラウザに 表 示 されます JavaScript コードのデバッグについての 詳 細 は JavaScript コードのデバッグ (ページ 146)を 参 照 してください 以 上 でこのステップは 完 了 です いくつかのコンポーネント クライアント 側 およびサーバ 側 のコントロー ラ ヘルパー 関 数 が 含 まれる 簡 単 な 経 費 追 跡 アプリケーションを 正 常 に 作 成 できました これで アプリケー ションは ビューおよびデータベースを 更 新 するユーザ 入 力 値 を 受 け 入 れるようになります また カウンタ 27

34 クイックスタート ステップ 6: アプリケーションとイベントをインタラク ティブにする は 新 しいユーザ 入 力 値 を 入 力 するたびに 動 的 に 更 新 されます 次 のステップでは インタラクティブにイベン トを 使 用 するレイヤを 追 加 する 方 法 について 説 明 します 関 連 トピック: クライアント 側 コントローラを 使 用 したイベントの 処 理 サーバ 側 のアクションのコール ステップ 6: アプリケーションとイベントをインタラクティブにする イベントは コンポーネント 間 でデータの 共 有 を 可 能 にすることによって インタラクティブレイヤをアプリ ケーションに 追 加 します 経 費 リストビューのチェックボックスをオン/オフにしたときに 関 連 するコンポー ネントデータに 基 づいてビューとレコードの 両 方 を 更 新 するイベントを 起 動 する 必 要 がある 場 合 があります 次 のフローチャートに expenselist コンポーネントでチェックボックスをオン/オフにすることによって データの 変 更 が 取 得 されるときの アプリケーションでのデータフローを 示 します [Reimbursed? ( 払 い 戻 し 済 み?)] チェックボックスをオン/オフにすると このブラウザのクリックイベントにより ここで 作 成 するアプ リケーションイベントが 起 動 されます このイベントは 経 費 オブジェクトをハンドラコンポーネントに 渡 し そのコントローラは Apex コントローラメソッドをコールして 関 連 する 経 費 レコードを 更 新 します ここ では このサーバ 応 答 を 処 理 しないため その 後 の 応 答 はクライアント 側 で 無 視 されます 28

35 クイックスタート ステップ 6: アプリケーションとイベントをインタラク ティブにする イベントを 起 動 して 親 コンポーネントのイベントを 処 理 するには まずイベントとそのハンドラを 作 成 しま す 1. [ファイル] > [ 新 規 ] > [Lightning イベント] をクリックします 2. [New Event ( 新 規 イベント)] ウィンドウで updateexpenseitem と 入 力 します これにより updateexpenseitem.evt という 新 しいイベントが 作 成 されます 3. updateexpenseitem.evt で 次 のコードを 入 力 します イベントで 定 義 している 属 性 が 起 動 元 のコンポーネントからハンドラに 渡 されます 29

36 クイックスタート ステップ 6: アプリケーションとイベントをインタラク ティブにする namespace を 登 録 済 みの 名 前 空 間 と 置 き 換 えます <aura:event type="application"> <aura:attribute name="expense" type="namespace.expense c"/> </aura:event> フレームワークには コンポーネントイベントとアプリケーションイベントという 2 種 類 のイベントがあ ります ここでは アプリケーションイベントを 使 用 します アプリケーションイベントが 起 動 されると ハンドラに 通 知 されます この 場 合 は form.cmp に 通 知 されて イベントが 処 理 されます expenselist.cmp には change="{!c.update" で 示 されるクライアント 側 のコントローラアクション に 接 続 されるチェックボックスが 含 まれていることを 思 い 出 してください 次 に update アクションを 設 定 します 4. expenselist サイドバーで [CONTROLLER]をクリックします これにより expenselistcontroller.js という 新 しいリソースが 作 成 されます 次 のコードを 入 力 します namespace を 登 録 済 みの 名 前 空 間 と 置 き 換 えます ({ ) update: function(component, evt, helper) { var expense = component.get("v.expense"); var updateevent = $A.get("e.namespace:updateExpenseItem"); updateevent.setparams({ "expense": expense ).fire(); チェックボックスをオンまたはオフにすると update アクションが 実 行 され reimbursed パラメータ の 値 が true または false に 設 定 されます updateexpenseitem.evt イベントは 更 新 済 みの expense オブジェクトを 使 用 して 起 動 されます 5. ハンドラコンポーネント form.cmp で 次 のハンドラコードを <aura:attribute> タグの 前 に 追 加 しま す namespace を 登 録 済 みの 名 前 空 間 と 置 き 換 えます <aura:handler event="namespace:updateexpenseitem" action="{!c.updateevent" /> このイベントハンドラは 作 成 したアプリケーションイベントが 起 動 されると updateevent アクション を 実 行 します 6. イベントを 処 理 するための updateevent アクションを 結 び 付 けます formcontroller.js で 次 のコー ドを createexpense コントローラアクションの 後 に 入 力 します updateevent : function(component, event, helper) { helper.upsertexpense(component, event.getparam("expense")); このアクションは ヘルパー 関 数 をコールし { Name : "Lunch", namespace Client c : "ABC Co.", namespace Reimbursed c : true, CreatedDate : " T20:53:09.000Z", namespace Amount c : 20 形 式 のパラメータと 値 が 含 まれた 経 費 オブジェクトを 含 む event.getparam("expense") を 渡 します 完 成 です! アプリケーションイベントを 使 用 して 経 費 追 跡 アプリケーションでインタラクションのレイヤが 正 常 に 追 加 されました ビューで 払 い 戻 し 済 み 状 況 を 変 更 すると update イベントが 起 動 され 親 コンポー 30

37 クイックスタート ステップ 6: アプリケーションとイベントをインタラク ティブにする ネントで 処 理 されてから サーバ 側 のコントローラアクション saveexpense が 実 行 され 経 費 レコードが 更 新 されます Beyond the Basics ライフサイクルの 表 示 中 には このチュートリアルで 使 用 した init イベントなどのいくつかのイベン トがフレームワークによって 起 動 されます たとえば サーバ 応 答 をクライアントが 待 機 しているとき や 応 答 を 受 信 したことを 示 すために donewaiting イベントが 起 動 されたときに waiting イベント 実 行 中 のアプリケーションの 動 作 をカスタマイズすることもできます 次 の 例 に waiting イベント 実 行 中 にアプリケーションでテキストを 追 加 する 方 法 と donewaiting イベントの 起 動 時 にテキストを 削 除 する 方 法 を 示 します <!-- form.cmp markup --> <aura:handler event="aura:waiting" action="{!c.waiting"/> <aura:handler event="aura:donewaiting" action="{!c.donewaiting"/> <aura:attribute name="wait" type="string"/> <div class="wait"> {!v.wait </div> /** formcontroller.js **/ waiting : function(component, event, helper) { component.set("v.wait", "updating...");, donewaiting : function(component, event, helper) { component.set("v.wait", ""); 新 しいレコードを 作 成 するために [ 送 信 ] ボタンをクリックするか 経 費 項 目 のチェックボックスをオン にすると このテキストがアプリケーションによって 表 示 されます 詳 細 は 表 示 ライフサイクル 中 に 起 動 されたイベント (ページ 96) を 参 照 してください https://<mysalesforceinstance>.lightning.force.com/<namespace>/expensetracker.app (<mysalesforceinstance> は na1 など 組 織 をホストしているインスタンスの 名 前 です) にアクセスする と スタンドアロンアプリケーションとして 先 ほど 作 成 したアプリケーションに 現 時 点 でアクセスできます Salesforce1 でアクセスできるようにするには Salesforce1 への Lightning コンポーネントの 追 加 (ページ 48)を 参 照 してください アプリケーションをパッケージ 化 して AppExchange で 配 布 するには アプリケーションとコン ポーネントの 配 布 (ページ 144)を 参 照 してください 関 連 トピック: アプリケーションイベント 31

38 クイックスタート まとめ まとめ ここでは 経 費 レコードを 操 作 するコントローラやイベントを 含 むいくつかのコンポーネントを 作 成 しまし た 経 費 追 跡 アプリケーションでは アプリケーションの 初 期 化 時 に 経 費 データとカウンタを 読 み 込 む ユー ザ 入 力 を 受 け 入 れて 新 規 レコードを 作 成 しビューを 更 新 する イベントを 介 して 関 連 コンポーネントデータと やりとりすることでユーザ 操 作 を 処 理 する という 3 つの 異 なるタスクが 実 行 されます form.cmp が 初 期 化 されると init ハンドラがクライアント 側 の doinit コントローラをトリガし そのコ ントローラが getexpenses ヘルパー 関 数 をコールします getexpenses は 経 費 を 読 み 込 むためにサーバ 32

39 クイックスタート まとめ 側 の getexpenses コントローラをコールします コールバックが v.expenses 属 性 の 経 費 データを 設 定 し カウンタを 更 新 するために updatetotal をコールします [ 送 信 ] ボタンをクリックすると クライアント 側 の createexpense コントローラがトリガされます 項 目 の 検 証 後 createexpense ヘルパー 関 数 が 実 行 され そこでは upsertexpense ヘルパー 関 数 によってサーバ 側 の saveexpense コントローラがコールされ レコードが 保 存 されます コールバックは 新 しい 経 費 を 経 費 リストに 転 送 し form.cmp の v.expenses 属 性 を 更 新 します これにより expenselist.cmp の 経 費 が 更 新 されます 最 後 に ヘルパーが updatetotal をコールし v.total および v.exp 属 性 で 示 されるカウ ンタを 更 新 します expenselist.cmp が 経 費 のリストを 表 示 します [Reimbursed? ( 払 い 戻 し 済 み?)] チェックボックスをオン/ オフにすると click イベントがクライアント 側 の update コントローラをトリガします パラメータとし て 渡 された 関 連 経 費 を 使 用 して updateexpenseitem イベントが 起 動 されます form.cmp がイベントを 処 理 し クライアント 側 の updateevent コントローラをトリガします このコントローラアクションが upsertexpense ヘルパー 関 数 をコールし このヘルパー 関 数 がサーバ 側 の saveexpense コントローラを コールして 関 連 レコードを 保 存 します 33

40 コンポーネントの 作 成 第 3 章 コンポーネント トピック: コンポーネントの マークアップ コンポーネントは Lightning コンポーネントフレームワークの 機 能 単 位 です コンポーネントは モジュール 形 式 で 再 利 用 可 能 な UI のセクションをカプセル 化 し ます テキスト 1 行 からアプリケーション 全 体 までさまざまな 粒 度 に 対 応 できます コンポーネントの 名 前 空 間 コンポーネントの バンドル コンポーネントの ID コンポーネント 内 の HTML コンポーネント 内 の CSS コンポーネントの 属 性 コンポーネントの コンポジション コンポーネントの ボディ コンポーネントの ファセット 表 示 ラベルの 使 用 ローカライズ Lightning コンポー ネントの 有 効 化 Salesforce1 への Lightning コンポー ネントの 追 加 アプリケーション へのコンポーネン トの 追 加 コンポーネントの ドキュメントの 提 供 34

41 コンポーネント コンポーネントのマークアップ コンポーネントのマークアップ コンポーネントリソースにはマークアップが 含 まれ.cmp サフィックスが 付 いています マークアップに は テキストまたは 他 のコンポーネントへの 参 照 を 含 めることができます また マークアップはコンポーネ ントに 関 するメタデータの 宣 言 も 行 います まず helloworld.cmp コンポーネントのシンプルな Hello, world! の 例 から 始 めましょう <aura:component> Hello, world! </aura:component> この 例 では コンポーネントを 可 能 な 限 りシンプルにしています テキスト Hello, world! は <aura:component> タグでラップされています このタグは すべてのコンポーネント 定 義 の 最 初 と 最 後 に あります コンポーネントには ほとんどの HTML タグを 含 めることができるため <div> や <span> などのマークアッ プを 使 用 できます HTML5 タグもサポートされています <aura:component> <div class="container"> <!--Other HTML tags or components here--> </div> </aura:component> メモ: JavaScript または CSS への 参 照 を 除 き コンポーネントのマークアップ 内 のすべてで 大 文 字 と 小 文 字 は 区 別 されません コンポーネントの 名 前 空 間 各 コンポーネントは 1 つの 名 前 空 間 に 属 しています 名 前 空 間 は 関 連 するコンポーネントをまとめてグループ 化 するために 使 用 されます <mynamespace:mycomponent> をマークアップに 追 加 することで 別 のコンポーネントまたはアプリケーショ ンがコンポーネントを 参 照 できます たとえば helloworld コンポーネントは auradocs 名 前 空 間 内 にあ ります 別 のコンポーネントは <auradocs:helloworld /> をマークアップに 追 加 することで このコン ポーネントを 参 照 できます メモ: 組 織 で Lightning コンポーネントフレームワークを 使 用 するには 名 前 空 間 を 登 録 する 必 要 がありま す ご 利 用 になる 前 に (ページ 8)を 参 照 してください コンポーネントのバンドル コンポーネントのバンドルには コンポーネントまたはアプリケーションとそれに 関 連 するすべてのリソース が 含 まれます 35

42 コンポーネント コンポーネントの ID リソース リソース 名 使 用 方 法 関 連 トピック コンポーネントまたはア プリケーション sample.cmp または sample.app バンドル 内 の 唯 一 の 必 須 リソース コンポーネン トまたはアプリケーショ ンのマークアップが 含 ま コンポーネント (ページ 34) aura:application (ページ 148) れます 各 バンドルに 含 まれるコンポーネントま たはアプリケーションリ ソースは 1 つのみです CSS スタイル sample.css コンポーネントのスタイ ル コンポーネント 内 の CSS (ページ 38) コントローラ samplecontroller.js コンポーネント 内 のイベ ントを 処 理 するためのク ライアント 側 コントロー ラメソッド クライアント 側 コントロー ラを 使 用 したイベントの 処 理 (ページ 77) ドキュメント sample.auradoc 説 明 サンプルコード およびコンポーネント 例 への 1 つ 以 上 の 参 照 コンポーネントのドキュ メントの 提 供 (ページ 50) レンダラ samplerenderer.js コンポーネントのデフォ ルトの 表 示 を 上 書 きする クライアント 側 レンダラ DOM へのクライアント 側 表 示 (ページ 111) ヘルパー samplehelper.js コンポーネントのバンド ル 内 の JavaScript コードか らコール 可 能 な JavaScript 関 数 コンポーネントのバンド ル 内 の JavaScript コードの 共 有 (ページ 110) コンポーネントのバンドル 内 のすべてのリソースは 命 名 規 則 に 従 い 自 動 的 に 結 び 付 けられます たとえば コントローラ <componentname>controller.js は そのコンポーネントに 自 動 的 に 結 び 付 けられます つ まり コンポーネントの 範 囲 内 で 使 用 できます コンポーネントの ID コンポーネントには ローカル ID とグローバル ID という 2 種 類 の ID があります ローカル ID ローカル ID はコンポーネント 内 で 一 意 であり 範 囲 はそのコンポーネント 内 のみです ローカル ID を 作 成 するには aura:id 属 性 を 使 用 します 次 に 例 を 示 します <ui:button aura:id="button1" label="button1"/> 36

43 コンポーネント コンポーネント 内 の HTML このボタンコンポーネントを 検 索 するには cmp.find("button1") をコールします ここで cmp は ボタ ンが 含 まれるコンポーネントへの 参 照 です aura:id は 式 をサポートしていません aura:id にはリテラル 文 字 列 値 のみを 割 り 当 てることができます 詳 細 は https://<mysalesforceinstance>.lightning.force.com/auradocs/reference.app (<mysalesforceinstance> は na1 など 組 織 をホストするインスタンスの 名 前 です) の JavaScript API を 参 照 してください グローバル ID すべてのコンポーネントには 一 意 の globalid があります これはコンポーネントインスタンスに 対 して 生 成 される 実 行 時 に 一 意 の ID です グローバル ID は コンポーネントの 有 効 期 間 以 外 では 同 じである 保 証 はな いため テストでは 利 用 しないでください HTML 要 素 に 一 意 の ID を 作 成 するために globalid を 要 素 のプレフィックスまたはサフィックスとして 使 用 できます 次 に 例 を 示 します <div id="{!globalid + '_footer'"></div> JavaScript で getglobalid() 関 数 を 使 用 して コンポーネントのグローバル ID を 取 得 できます var globalid = cmp.getglobalid(); 逆 の 操 作 も 可 能 で グローバル ID があればコンポーネントを 取 得 できます var comp = $A.getCmp(globalId); 関 連 トピック: ID によるコンポーネントの 検 索 コンポーネント 内 の HTML HTML タグは フレームワークで 第 一 級 のコンポーネントとして 処 理 されます 各 HTML タグは コンポーネン トに 変 換 され 他 のコンポーネントと 同 様 の 権 限 を 使 用 できます コンポーネントに HTML マークアップを 追 加 できます 厳 密 な XHTML を 使 用 する 必 要 がある 点 に 注 意 してくだ さい たとえば <br> ではなく <br/> を 使 用 します HTML 属 性 と onclick などの DOM イベントも 使 用 で きます 警 告 : <applet> や <font> など 一 部 のタグはサポートされていません サポートされていないタグの 全 リストは サポートされる HTML タグ (ページ 155)を 参 照 してください HTML のエスケープ 解 除 書 式 設 定 済 みの HTML を 出 力 するには aura:unescapedhtml を 使 用 します これは たとえば サーバで 生 成 された HTML を 表 示 し DOM に 追 加 する 場 合 に 便 利 です 必 要 に 応 じて HTML をエスケープする 必 要 があ ります これを 行 わないと アプリケーションにセキュリティの 脆 弱 性 が 生 じるおそれがあります <aura:unescapedhtml value="{!v.note.body"/> などで コントローラから 値 を 渡 すことができます 37

44 コンポーネント コンポーネント 内 の CSS {!<expression> はフレームワークの 式 の 構 文 です 詳 細 は 式 (ページ 53)を 参 照 してください 関 連 トピック: サポートされる HTML タグ コンポーネント 内 の CSS コンポーネント 内 の CSS CSS を 使 用 してコンポーネントのスタイルを 設 定 します CSS をコンポーネントのバンドルに 追 加 するには 開 発 者 コンソールのサイドバーで[STYLE]ボタンをクリック します 外 部 CSS リソースの 場 合 は アプリケーションのスタイル 設 定 (ページ 104)を 参 照 してください コンポーネントのすべての 最 上 位 要 素 には 特 殊 な THIS CSS クラスが 追 加 されています これにより 事 実 上 CSS に 名 前 空 間 設 定 が 追 加 されます これは コンポーネントの CSS が 別 のコンポーネントのスタイル 設 定 を 上 書 きすることを 回 避 するのに 役 立 ちます CSS ファイルがこの 規 則 に 従 わない 場 合 フレームワークはエ ラーを 発 生 させます サンプルの hellohtml.cmp コンポーネントを 見 てみましょう CSS は hellohtml.css 内 にあります コンポーネントのソース <aura:component> <div class="white"> Hello, HTML! </div> <h2>check out the style in this list.</h2> <ul> <li class="red">i'm red.</li> <li class="blue">i'm blue.</li> <li class="green">i'm green.</li> </ul> </aura:component> CSS ソース.THIS { background-color: grey;.this.white { background-color: white;.this.red { background-color: red; 38

45 コンポーネント コンポーネントの 属 性.THIS.blue { background-color: blue;.this.green { background-color: green; 出 力 最 上 位 要 素 は THIS クラスと 一 致 し 灰 色 の 背 景 で 表 示 されます <div class="white"> 要 素 は.THIS.white セレクタと 一 致 し 白 の 背 景 で 表 示 されます このルールは 最 上 位 要 素 用 であるため セレクタにはスペースがありません <li class="red"> 要 素 は.THIS.red セレクタと 一 致 し 赤 の 背 景 で 表 示 されます これは 下 位 のセレク タであり <li> は 最 上 位 要 素 ではないため スペースが 含 まれます 関 連 トピック: スタイルの 追 加 と 削 除 コンポーネント 内 の HTML コンポーネントの 属 性 コンポーネントの 属 性 は Apex のクラスのメンバー 変 数 に 似 ています これらは 型 付 けされた 項 目 で コン ポーネントの 特 定 のインスタンスに 設 定 されており 式 の 構 文 を 使 用 したコンポーネントのマークアップ 内 か ら 参 照 できます 属 性 を 使 用 すると コンポーネントをより 動 的 に 扱 うことができます 属 性 をコンポーネントに 追 加 するには コンポーネントのマークアップで <aura:attribute> タグを 使 用 し ます サンプルコンポーネント helloattributes.cmp を 見 てみましょう <aura:component> <aura:attribute name="whom" type="string" default="world"/> Hello {!v.whom! </aura:component> すべての 属 性 には 名 前 と 型 があります 属 性 には required="true" を 指 定 して 必 須 としてマークできま す デフォルト 値 を 指 定 することもできます このサンプルには whom という 名 前 の 文 字 列 型 の 属 性 があります 値 が 指 定 されない 場 合 は デフォルトの world になります 厳 格 な 要 件 ではありませんが <aura:attribute> タグは 通 常 コンポーネントのマークアップの 先 頭 に 置 きます こうすることで コンポーネントの 形 状 を 一 目 で 簡 単 に 参 照 できるためです 属 性 名 の 先 頭 文 字 は 英 字 またはアンダースコアにする 必 要 があります 2 文 字 目 以 降 には 数 字 やハイフンも 使 用 できます 39

46 コンポーネント コンポーネントのコンポジション メモ: 式 にはハイフンを 含 む 属 性 は 使 用 できません たとえば cmp.get("v.name-withhyphen") は サポートされますが <ui:button label="{!v.name-withhyphen"/> はサポートされません ブラウザに helloattributes.cmp を 読 み 込 むと 前 述 の helloworld.cmp コンポーネントとまったく 同 じ に 見 えます ここで?whom=you を URL に 追 加 して ページを 再 読 み 込 みします クエリ 文 字 列 の 値 によって whom 属 性 の 値 が 設 定 されます コンポーネントを 要 求 するときにクエリ 文 字 列 で 属 性 値 を 指 定 すると そのコンポーネ ントの 属 性 を 設 定 することができます 警 告 : これは 文 字 列 型 の 属 性 でのみ 機 能 します 式 helloattributes.cmp のマークアップに Hello {!v.whom! という 行 があります これがコンポーネン トの 動 的 出 力 を 担 います {!<expression> はフレームワークの 式 の 構 文 です この 場 合 評 価 する 式 は v.whom です 定 義 した 属 性 の 名 前 が whom で v. が ビューを 表 すコンポーネントの 属 性 セットに 値 を 提 供 します 属 性 の 検 証 helloattributes.cmp に 有 効 な 属 性 のセットを 定 義 したので フレームワークでは 有 効 な 属 性 のみがそ のコンポーネントに 渡 されることが 自 動 的 に 検 証 されます クエリ 文 字 列?fakeAttribute=fakeValue を 追 加 して helloattributes.cmp の 要 求 を 試 してみてくださ い helloattributes.cmp に fakeattribute 属 性 がないというエラーが 表 示 されます 関 連 トピック: サポートされる aura:attribute の 型 式 コンポーネントのコンポジション コンポーネントを 細 分 化 された 複 数 のコンポーネントで 構 成 することで さまざまなコンポーネントとアプ リケーションを 作 成 できます コンポーネントをどのようにまとめられるか 見 てみましょう nestedcomponents.cmp は コンポーネントを 別 のコンポーネント 内 に 入 れる 例 です コンポーネントのソース <aura:component> Observe! Components within components! <auradocs:hellohtml/> <auradocs:helloattributes whom="component composition"/> 40

47 コンポーネント コンポーネントのコンポジション </aura:component> 出 力 既 存 のコンポーネントを 入 れるのは HTML タグの 挿 入 に 似 ています コンポーネントをその <namespace>:<component> 形 式 の 記 述 子 で 参 照 するだけです nestedcomponents.cmp は auradocs 名 前 空 間 内 に 存 在 する hellohtml.cmp コンポーネントを 参 照 します したがって その 記 述 子 は auradocs:hellohtml です nestedcomponents.cmp が auradocs:helloattributes をどのように 参 照 しているかについても 注 目 して ください HTML タグに 属 性 を 追 加 するのと 同 様 に コンポーネント 内 の 属 性 値 をコンポーネントタグの 一 部 として 設 定 できます nestedcomponents.cmp では helloattributes.cmp の whom 属 性 を component composition に 設 定 しています hellohtml.cmp のソースは 次 のようになります コンポーネントのソース <aura:component> <div class="white"> Hello, HTML! </div> <h2>check out the style in this list.</h2> <ul> <li class="red">i'm red.</li> <li class="blue">i'm blue.</li> <li class="green">i'm green.</li> </ul> </aura:component> CSS ソース.THIS { background-color: grey;.this.white { background-color: white;.this.red { background-color: red;.this.blue { background-color: blue; 41

48 コンポーネント コンポーネントのコンポジション.THIS.green { background-color: green; 出 力 helloattributes.cmp のソースは 次 のようになります コンポーネントのソース <aura:component> <aura:attribute name="whom" type="string" default="world"/> Hello {!v.whom! </aura:component> 属 性 の 渡 し 方 属 性 をネストされたコンポーネントに 渡 すこともできます nestedcomponents2.cmp は nestedcomponents.cmp と 似 ていますが passthrough 属 性 が 含 まれている 点 が 異 なります この 値 は auradocs:helloattributes の 属 性 値 として 渡 されます コンポーネントのソース <aura:component> <aura:attribute name="passthrough" type="string" default="passed attribute"/> Observe! Components within components! <auradocs:hellohtml/> <auradocs:helloattributes whom="{!v.passthrough"/> </aura:component> 出 力 helloattributes が 渡 された 属 性 値 を 使 用 していることがわかります 定 義 とインスタンス オブジェクト 指 向 プログラミングに 慣 れているユーザなら クラスとそのクラスのインスタンスの 違 いをご 存 じでしょう コンポーネントにも 同 じような 概 念 があります.cmp リソースを 作 成 することで そのコン 42

49 コンポーネント コンポーネントのボディ ポーネントの 定 義 (クラス) を 指 定 します.cmp にコンポーネントタグを 追 加 することで そのコンポーネン ト (のインスタンス) への 参 照 を 作 成 します もちろん 異 なる 属 性 を 持 つ 同 じコンポーネントのインスタンスを 複 数 追 加 することもできます nestedcomponents3.cmp では 異 なる 属 性 値 を 持 つ 別 のインスタンスの auradocs:helloattributes を 追 加 します auradocs:helloattributes コンポーネントの 2 つのインスタンスでは それぞれの whom 属 性 の 値 が 異 なっています コンポーネントのソース <aura:component> <aura:attribute name="passthrough" type="string" default="passed attribute"/> Observe! Components within components! <auradocs:hellohtml/> <auradocs:helloattributes whom="{!v.passthrough"/> <auradocs:helloattributes whom="separate instance"/> </aura:component> 出 力 コンポーネントのボディ すべてのコンポーネントのルートレベルタグは <aura:component> です すべてのコンポーネントは <aura:component> から body 属 性 を 継 承 します body 属 性 の 型 は Aura.Component[] です 1 つのコンポーネントの 配 列 にすることも 空 の 配 列 にすること もできますが 常 に 配 列 です コンポーネントでは 属 性 のコレクションにアクセスするには v を 使 用 します たとえば {!v.body は コンポーネントのボディを 出 力 します ボディコンテンツの 設 定 継 承 された 属 性 の 値 を 設 定 するには <aura:set> タグを 使 用 します <aura:component> 内 で 使 用 できるのは 数 種 類 のタグのみです これには <aura:attribute> <aura:registerevent> <aura:handler> <aura:set> などがあります コンポーネント 内 で 許 可 され るタグのいずれかで 囲 まれていない 独 立 したマークアップは ボディの 一 部 と 見 なされます これは その 独 43

50 コンポーネント コンポーネントのファセット 立 したマークアップを <aura:set attribute="body"> 内 にラップするのと 同 じです body 属 性 にはこの 特 殊 な 動 作 があるため <aura:set attribute="body"> を 省 略 できます <aura:component> <div>body part</div> <ui:button label="push Me/> </aura:component> これは 次 の 指 定 を 簡 易 にしたものです <aura:component> <aura:set attribute="body> <div>body part</div> <ui:button label="push Me/> </aura:set> </aura:component> <aura:component> だけでなく body 属 性 があるどのコンポーネントを 使 用 する 場 合 も 同 様 です 次 に 例 を 示 します <ui:panel> Hello world! </ui:panel> これは 次 の 指 定 を 簡 易 にしたものです <ui:panel> <aura:set attribute="body"> Hello World! </aura:set> </ui:panel> コンポーネントのボディへのアクセス JavaScript のコンポーネントのボディにアクセスするには component.get("v.body") を 使 用 します 関 連 トピック: aura:set JavaScript でのコンポーネントのボディの 操 作 コンポーネントのファセット ファセットは Aura.Component[] 型 の 属 性 です body 属 性 は ファセットの 一 例 です ユーザが 定 義 したファセットと v.body の 唯 一 の 違 いは 必 要 に 応 じ て aura:set タグを 省 略 する 簡 易 表 記 が v.body でしか 機 能 しない 点 です 独 自 のファセットを 定 義 するには Aura.Component[] 型 の aura:attribute タグをコンポーネントに 追 加 します たとえば facetheader.cmp という 新 しいコンポーネントを 作 成 するとします 44

51 コンポーネント 表 示 ラベルの 使 用 コンポーネントのソース <aura:component> <aura:attribute name="header" type="aura.component[]"/> <div> <span class="header">{!v.header</span><br/> <span class="body">{!v.body</span> </div> </aura:component> このコンポーネントにはヘッダーファセットがあります ヘッダーの 出 力 は v.header 式 を 使 用 して 配 置 さ れています header および body 属 性 が 設 定 されていないため このコンポーネントに 直 接 アクセスしたとき コンポー ネントからの 出 力 はありません コンポーネント hellofacets.cmp でこれらの 属 性 を 設 定 します コンポーネントのソース <aura:component> See how we set the header facet.<br/> <auradocs:facetheader> Nice body! <aura:set attribute="header"> Hello Header! </aura:set> </auradocs:facetheader> </aura:component> 関 連 トピック: コンポーネントのボディ 表 示 ラベルの 使 用 このフレームワークでは 表 示 ラベルがサポートされており コードと 項 目 表 示 ラベルを 分 離 できます このセクションの 内 容 : 入 力 コンポーネントの 表 示 ラベル 表 示 ラベルで 入 力 コンポーネントの 目 的 を 説 明 します 入 力 コンポーネントの 表 示 ラベルを 設 定 するに は label 属 性 を 使 用 します 親 属 性 による 表 示 ラベル 値 の 設 定 親 属 性 による 表 示 ラベル 値 の 設 定 は 子 コンポーネントの 表 示 ラベルを 制 御 する 場 合 に 便 利 です 45

52 コンポーネント 入 力 コンポーネントの 表 示 ラベル 入 力 コンポーネントの 表 示 ラベル 表 示 ラベルで 入 力 コンポーネントの 目 的 を 説 明 します 入 力 コンポーネントの 表 示 ラベルを 設 定 するには label 属 性 を 使 用 します 次 の 例 に 入 力 コンポーネントの label 属 性 で 表 示 ラベルを 使 用 する 方 法 を 示 します <ui:inputnumber label="pick a Number:" value="54" /> 表 示 ラベルは 入 力 項 目 の 左 側 に 配 置 され labelclass="assistivetext" を 設 定 することで 非 表 示 にで きます assistivetext は アクセシビリティをサポートするために 使 用 されるグローバルスタイルクラス です 親 属 性 による 表 示 ラベル 値 の 設 定 親 属 性 による 表 示 ラベル 値 の 設 定 は 子 コンポーネントの 表 示 ラベルを 制 御 する 場 合 に 便 利 です コンテナコンポーネントに inner.cmp という 別 のコンポーネントが 含 まれているとします コンテナコン ポーネントの 属 性 で inner.cmp の 表 示 ラベル 値 を 設 定 します これを 行 うには 属 性 型 とデフォルト 値 を 指 定 します 内 部 コンポーネントの 表 示 ラベルを 設 定 する 場 合 次 の 例 のように 親 属 性 でデフォルト 値 を 設 定 す る 必 要 があります 次 のコンポーネントは _label 属 性 のデフォルト 値 My Label を 含 むコンテナコンポーネントです <aura:component> <aura:attribute name="_label" type="string" default="my Label"/> <ui:button label="set Label" aura:id="button1" press="{!c.setlabel"/> <auradocs:inner aura:id="inner" label="{!v._label"/> </aura:component> 次 の inner コンポーネントには テキストエリアコンポーネントおよびコンテナコンポーネントで 設 定 され た label 属 性 が 含 まれます <aura:component> <aura:attribute name="label" type="string"/> <ui:inputtextarea aura:id="textarea" label="{!v.label"/> </aura:component> 次 のクライアント 側 のコントローラアクションで 表 示 ラベル 値 を 更 新 します ({ ) setlabel:function(cmp) { cmp.set("v._label", 'new label'); コンポーネントが 初 期 化 されると My Label という 表 示 ラベルのボタンおよびテキストエリアが 表 示 されま す コンテナコンポーネントのボタンがクリックされると setlabel アクションによって inner コンポー 46

53 コンポーネント ローカライズ ネントの 表 示 ラベル 値 が 更 新 されます このアクションによって label 属 性 が 検 索 され その 値 が new label に 設 定 されます 関 連 トピック: 入 力 コンポーネントの 表 示 ラベル コンポーネントの 属 性 ローカライズ このフレームワークでは 入 力 および 出 力 コンポーネントでクライアント 側 ローカライズのサポートを 提 供 し ます コンポーネントは ブラウザのロケール 情 報 を 取 得 し それに 従 って 日 時 を 表 示 します 次 の 例 では デフォ ルトの langlocale および timezone 属 性 を 上 書 きする 方 法 を 示 します 出 力 には デフォルトで hh:mm 形 式 の 時 刻 が 表 示 されます コンポーネントのソース <aura:component> <ui:outputdatetime value=" t00:17:08.997z" langlocale="de"/> </aura:component> timezone="europe/berlin" このコンポーネントは Mai 7, :17:08 AM と 表 示 されます さらに グローバル 値 プロバイダ $Locale を 使 用 してブラウザのロケール 情 報 を 取 得 できます このフレー ムワークは デフォルトでブラウザのロケールを 使 用 しますが グローバル 値 プロバイダを 利 用 して 他 のロ ケールを 使 用 するように 設 定 できます ローカライズサービスの 使 用 フレームワークのローカライズサービスでは 日 付 時 刻 数 値 通 貨 のローカライズを 管 理 できます 次 の 例 では $Locale とローカライズサービスを 使 用 して 設 定 済 みの 形 式 で 日 時 を 設 定 します var dateformat = $A.get("$Locale.dateFormat"); var datestring = $A.localizationService.formatDateTime(new Date(), dateformat); ブラウザの 日 付 情 報 を 取 得 しない 場 合 は 独 自 の 日 付 形 式 を 指 定 できます 次 の 例 では 日 付 形 式 を 指 定 し ブラウザの 言 語 ロケール 情 報 を 使 用 します var dateformat = "MMMM d, yyyy h:mm a"; var userlocalelang = $A.get("$Locale.langLocale"); return $A.localizationService.formatDate(date, dateformat, userlocalelang); 47

54 コンポーネント Lightning コンポーネントの 有 効 化 次 の 例 では 2 つの 日 付 を 比 較 して 一 方 がもう 一 方 より 後 の 日 付 かどうかを 確 認 します if( $A.localizationService.isAfter(StartDateTime,EndDateTime)) { //throw an error if StartDateTime is after EndDateTime 関 連 トピック: グローバル 値 プロバイダ Lightning コンポーネントの 有 効 化 組 織 で Lightning コンポーネントを 有 効 化 するように 選 択 する 必 要 があります 1. [ 設 定 ] で [ 開 発 ] > [Lightning コンポーネント] をクリックします 2. [Lightning コンポーネントを 有 効 化 ] チェックボックスをオンにします 警 告 : Lightning コンポーネントを 有 効 化 すると Salesforce1 で Force.com Canvas アプリケーションを 使 用 できません Lightningコンポーネントを 有 効 化 すると 組 織 のすべての Force.com Canvasアプリケーショ ンが Salesforce1 で 動 作 しなくなります 3. [ 保 存 ] をクリックします Salesforce1 への Lightning コンポーネントの 追 加 作 成 した Lightning コンポーネントを Salesforce1 ユーザが 使 用 できるようにしま す 追 加 するコンポーネントで aura:component タグに implements="force:apphostable" を 追 加 して 変 更 を 保 存 する 必 要 がありま す エディション 使 用 可 能 なエディション: Enterprise Edition Performance Edition Unlimited Edition および Developer Edition ユーザ 権 限 Lightning コンポーネント タブを 作 成 する アプリケーションの カスタマイズ <aura:component implements="force:apphostable"> apphostable インターフェースを 使 用 すると コンポーネントをSalesforce1のナビゲーションメニューで 使 用 できます Salesforce1 ナビゲーションメニューにコンポーネントを 追 加 するには 次 の 手 順 に 従 います 48

55 コンポーネント アプリケーションへのコンポーネントの 追 加 1. このコンポーネントのカスタムタブを 作 成 します a. [ 設 定 ] で [ 作 成 ] > [タブ] をクリックします b. [Lightning コンポーネントタブ] 関 連 リストで [ 新 規 ] をクリックします c. カスタムタブに 表 示 する Lightning コンポーネントを 選 択 します d. タブに 表 示 する 表 示 ラベルを 入 力 します e. タブのスタイルを 選 択 し [ 次 へ] をクリックします f. プロファイルへのタブの 追 加 を 指 示 するメッセージが 表 示 されたら デフォルトを 受 け 入 れて[ 保 存 ]を クリックします メモ: カスタムタブの 作 成 を 前 提 条 件 として Salesforce1ナビゲーションメニューでコンポーネント を 有 効 化 できますが Salesforce フルサイトからの Lightning コンポーネントへのアクセスはサポート されていません 2. Salesforce1 ナビゲーションメニューに Lightning コンポーネントを 追 加 します a. [ 設 定 ] から [モバイル 管 理 ] > [モバイルナビゲーション] をクリックします b. 作 成 したカスタムタブを 選 択 し [ 追 加 ] をクリックします c. 項 目 を 選 択 し [ 上 へ] または [ 下 へ] をクリックして 並 び 替 えます ナビゲーションメニューに 指 定 した 順 序 で 項 目 が 表 示 されます [ 選 択 済 み] リストの 最 初 の 項 目 が ユーザの Salesforce1 のランディングページに 表 示 されます 3. Salesforce1モバイルブラウザアプリケーションを 起 動 して 出 力 を 確 認 します ナビゲーションメニューに 新 しいメニュー 項 目 が 表 示 されます メモ: デフォルトで 組 織 のモバイルブラウザアプリケーションは 有 効 になっています Salesforce1 モ バイルブラウザアプリケーションの 使 用 についての 詳 細 は Salesforce1アプリケーション 開 発 者 ガイ ド を 参 照 してください アプリケーションへのコンポーネントの 追 加 アプリケーションにコンポーネントを 追 加 する 準 備 ができたら 最 初 にフレームワークに 標 準 で 付 属 している コンポーネントを 検 討 します これらのコンポーネントは 拡 張 したり 作 成 するカスタムコンポーネントに コンポジションを 使 用 して 追 加 したりして 利 用 することもできます メモ: 標 準 で 付 属 するすべてのコンポーネントの 詳 細 は https://<mysalesforceinstance>.lightning.force.com/auradocs/reference.app (<mysalesforceinstance> は na1 など 組 織 をホストするインスタンスの 名 前 です) にある Components フォルダを 参 照 してください ui 名 前 空 間 には Web ページでよく 使 用 される 多 くのコンポーネントが 含 まれています コンポーネントはカプセル 化 され 内 部 は 非 公 開 に 保 たれますが 公 開 形 状 はコンポーネントのコンシューマ から 参 照 できます この 強 固 な 分 離 により コンポーネント 作 成 者 は 自 由 に 内 部 実 装 の 詳 細 を 変 更 することが でき コンポーネントのコンシューマはこうした 変 更 から 隔 離 されます 49

56 コンポーネント コンポーネントのドキュメントの 提 供 コンポーネントの 公 開 形 状 は 設 定 可 能 な 属 性 とコンポーネントとやりとりするイベントによって 定 義 されま す 公 開 形 状 は 基 本 的 には 開 発 者 がコンポーネントとやりとりするための API です 新 しいコンポーネント を 設 計 するには 公 開 する 属 性 と コンポーネントが 開 始 または 応 答 するイベントについて 検 討 します 新 しいコンポーネントの 形 状 を 定 義 したら 複 数 の 開 発 者 が 並 行 してそのコンポーネントを 開 発 できます こ れは チームでアプリケーションを 開 発 する 場 合 に 便 利 なアプローチです アプリケーションに 新 しいカスタムコンポーネントを 追 加 する 場 合 は 開 発 者 コンソールの 使 用 (ページ 4)を 参 照 してください 関 連 トピック: コンポーネントのコンポジション コンポーネントの 属 性 イベント コンポーネントのドキュメントの 提 供 コンポーネントのドキュメントは 作 成 したコンポーネントを 他 のユーザが 理 解 し 使 用 するのに 役 立 ちま す 次 の 2 種 類 のコンポーネント 参 照 ドキュメントを 提 供 できます ドキュメント 定 義 (DocDef): 説 明 サンプルコード 例 への 参 照 などを 含 む コンポーネントの 詳 細 なドキュ メント DocDef は 幅 広 い HTML マークアップをサポートし コンポーネントの 概 要 と 機 能 を 説 明 するのに 役 立 ちます インライン 説 明 : テキストのみの 説 明 通 常 は 1 文 か 2 文 で タグ 内 の description 属 性 で 設 定 します DocDef を 入 力 するには 開 発 者 コンソールのコンポーネントサイドバーにある [DOCUMENTATION] をクリック します 次 の 例 では np:mycomponent の DocDef を 示 します メモ: DocDef は 現 在 コンポーネントとアプリケーションでサポートされています イベントとインター フェースでは インライン 説 明 のみがサポートされます <aura:documentation> <aura:description> <p>an <code>np:mycomponent</code> component represents an element that executes an action defined by a controller.</p> <!--More markup here, such as <pre> for code samples--> </aura:description> <aura:example name="mycomponentexample" ref="np:mycomponentexample" label="using the np:mycomponent Component"> <p>this example shows a simple setup of <code>mycomponent</code>.</p> </aura:example> <aura:example name="mysecondexample" ref="np:mysecondexample" label="customizing the np:mycomponent Component"> <p>this example shows how you can customize <code>mycomponent</code>.</p> </aura:example> </aura:documentation> ドキュメント 定 義 には 次 のタグが 含 まれます 50

57 コンポーネント コンポーネントのドキュメントの 提 供 タグ <aura:documentation> <aura:description> <aura:example> 説 明 DocDef の 最 上 位 定 義 幅 広 い HTML マークアップを 使 用 してコンポーネントを 記 述 します 説 明 にコー ドサンプルを 含 めるには コードブロックとして 表 示 される <pre> タグを 使 用 します <pre> タグに 入 力 するコードはエスケープされる 必 要 があります たとえば <aura:component> と 入 力 して <aura:component> をエ スケープします コンポーネントの 使 用 方 法 を 示 す 例 を 参 照 します 幅 広 い HTML マークアップ をサポートし 視 覚 的 な 出 力 とコンポーネントのソース 例 の 前 にテキストとし て 表 示 されます 例 は インタラクティブな 出 力 として 表 示 されます 例 は 複 数 作 成 できます 例 は 個 々の <aura:example> タグでラップする 必 要 があ ります name: 例 の API 名 ref: <namespace:examplecomponent> 形 式 のコンポーネント 例 への 参 照 label: タイトルの 表 示 ラベル コンポーネント 例 の 提 供 DocDef にはコンポーネント 例 への 参 照 が 含 まれます コンポーネント 例 は aura:example を 使 用 して 結 び 付 けられると コンポーネント 参 照 ドキュメント 内 にインタラクティブなデモとして 表 示 されます <aura:example name="mycomponentexample" ref="np:mycomponentexample" label="using the np:mycomponent Component"> np:mycomponent の 使 用 方 法 を 示 すコンポーネント 例 を 次 に 示 します <!--The np:mycomponentexample example component--> <aura:component> <np:mycomponent> <aura:set attribute= myattribute >This sets the attribute on the np:mycomponent component.</aura:set> <!--More markup that demonstrates the usage of np:mycomponent--> </np:mycomponent> </aura:component> インライン 説 明 の 提 供 インライン 説 明 は 要 素 の 短 い 概 要 を 提 供 します インライン 説 明 では HTML マークアップはサポートされて いません description 属 性 を 介 するインライン 説 明 が 次 のタグでサポートされています タグ <aura:component> 例 <aura:component description="represents a button element"> 51

58 コンポーネント コンポーネントのドキュメントの 提 供 タグ <aura:attribute> <aura:event> <aura:interface> <aura:registerevent> 例 <aura:attribute name="langlocale" type="string" description="the language locale used to format date value."/> <aura:event type="component" description="indicates that a keyboard key has been pressed and released"/> <aura:interface description="a common interface for date components"/> <aura:registerevent name="keydown" type="ui:keydown" description="indicates that a key is pressed"/> ドキュメントの 表 示 作 成 したドキュメントは https://<mysalesforceinstance>.lightning.force.com/auradocs/reference.app (<mysalesforceinstance> は na1 など 組 織 をホストするインスタンスの 名 前 です) で 表 示 できます 関 連 トピック: リファレンスの 概 要 52

59 第 4 章 式 トピック: 式 の 例 値 プロバイダ 式 の 評 価 式 の 演 算 子 のリ ファレンス 式 の 関 数 のリファ レンス 式 を 使 用 すると コンポーネントのマークアップ 内 で 計 算 することや プロパティ 値 やその 他 のデータにアクセスすることができます 式 は 動 的 出 力 や 値 を 属 性 に 割 り 当 ててコンポーネントに 渡 す 場 合 に 使 用 します 式 はリテラル 値 変 数 サブ 式 演 算 子 などで 構 成 され 1 つの 値 に 解 決 されます メソッドコールは 式 に 使 用 できません 式 の 構 文 は {!<expression> です <expression> は 式 のプレースホルダです コンポーネントが 表 示 されるとき またはコンポーネントが 値 を 使 用 するときに {! 区 切 り 文 字 内 にあるすべてが 評 価 され 動 的 に 置 換 されます 空 白 文 字 は 無 視 されます 評 価 の 結 果 プリミティブ ( 整 数 文 字 列 など) boolean JavaScript オブジェクト コ ンポーネントまたはコレクション コントローラメソッド (アクションメソッドな ど) その 他 の 有 益 な 値 が 得 られます 重 要 : 他 の 言 語 に 慣 れている 場 合! を 感 嘆 符 演 算 子 と 混 同 することがあ ります (これは 多 くのプログラミング 言 語 で boolean 値 を 否 定 する 演 算 子 で す) Lightning コンポーネントフレームワークでは {! は 式 の 先 頭 に 使 用 する 単 なる 区 切 り 文 字 です Visualforce を 使 い 慣 れている 場 合 は この 構 文 も 目 にしています ビュー コントローラの 値 または 表 示 レベルからアクセスする 属 性 名 など 式 の 識 別 子 は 先 頭 を 文 字 または 下 線 にする 必 要 があります 2 文 字 目 以 降 には 数 字 や ハイフンも 使 用 できます たとえば {!v.2count は 有 効 ではありませんが {!v.count は 有 効 です {! 構 文 は.app または.cmp ファイルのマークアップのみで 使 用 します JavaScript では 文 字 列 構 文 を 使 用 して 式 を 評 価 します 次 に 例 を 示 します var thelabel = cmp.get("v.label"); {! をエスケープする 場 合 は 次 の 構 文 を 使 用 します <aura:text value="{!"/> 53

60 式 aura:text コンポーネントは {! を 式 の 先 頭 と 解 釈 しないため プレーンテキスト ではこの 構 文 が {! と 表 示 されます 関 連 トピック: 式 の 例 54

61 式 式 の 例 式 の 例 式 のいくつかの 使 用 例 を 次 に 示 します 動 的 出 力 式 を 使 用 する 最 も 簡 単 な 方 法 は 式 の 出 力 です 式 には コンポーネントの 属 性 リテラル 値 boolean など の 値 を 使 用 できます <p>{!v.desc</p> {!v.desc という 式 の 場 合 v はコンポーネントの 一 連 の 属 性 からなるビューを 表 し desc はコンポーネン トの 属 性 です この 式 は 単 にこのマークアップを 含 むコンポーネントの desc 属 性 値 を 出 力 します 式 にリテラル 値 を 含 める 場 合 は テキスト 値 を 単 一 引 用 符 で 囲 みます ( 例 : {!'Some text') 数 字 は 引 用 符 で 囲 みません ( 例 : {!123) boolean の 場 合 true には {!true false には {!false を 使 用 します 値 を 渡 す 式 を 使 用 して 値 を 渡 します 次 に 例 を 示 します <aura:iteration items="{!v.expenses" var="expense"> {!v.expenses 式 は aura:iteration タグに expenses 属 性 を 渡 します この 式 はまだ 評 価 されていま せん aura:iteration タグが 表 示 時 に 式 を 評 価 して items 値 を 取 得 します <ui:button aura:id="newnote" label="new Note" press="{!c.createnote"/> 式 {!c.createnote は コントローラのアクションをボタンコンポーネントの press 属 性 に 割 り 当 てま す c はコンポーネントのコントローラを 表 し createnote はアクションです 条 件 式 条 件 式 に 該 当 するのは 上 記 の 2 つの 特 殊 なケースのみですが 数 例 を 示 しておきます <a class="{!v.location == '/active'? 'selected' : ''" href="#/active">active</a> 式 {!v.location == '/active'? 'selected' : '' は location 属 性 が /active に 設 定 されてい るかどうかを 確 認 して HTML の <a> タグの class 属 性 を 条 件 に 応 じて 設 定 します true の 場 合 は 式 が class を selected に 設 定 します <aura:attribute name="edit" type="boolean" default="true"> <aura:if istrue="{!v.edit"> <ui:button label="edit"/> <aura:set attribute="else"> You can t edit this. </aura:set> </aura:if> 55

62 式 値 プロバイダ このスニペットは <aura:if> コンポーネントを 使 用 して 条 件 に 応 じて 編 集 ボタンを 表 示 します 関 連 トピック: 値 プロバイダ クライアント 側 コントローラを 使 用 したイベントの 処 理 値 プロバイダ 値 プロバイダは データにアクセスする 1 つの 方 法 で オブジェクトがプロパティやメソッドをカプセル 化 す る 場 合 と 同 じようなやり 方 で 関 連 する 値 をまとめてカプセル 化 します 最 も 一 般 的 な 値 プロバイダは v と c で ビューやコントローラで 使 用 されます 値 プロバイダ v c 説 明 コンポーネントの 属 性 セット 固 有 のアクションおよびイベントハンドラを 含 むコンポーネントのコント ローラ どのコンポーネントにも v 値 プロバイダがありますが コントローラの 設 定 は 必 須 ではありません どちら の 値 プロバイダも コンポーネントの 定 義 時 に 自 動 的 に 作 成 されます 値 プロバイダの 値 には 指 定 したプロパティとしてアクセスします 値 を 使 用 するには 値 プロバイダとプロ パティ 名 をドット (ピリオド) で 区 切 ります たとえば v.body です メモ: 式 は その 式 を 含 む 特 定 のコンポーネントにバインドされます このコンポーネントは 属 性 値 プロ バイダとも 呼 ばれ 渡 される 式 をその 子 コンポーネントの 属 性 に 解 決 するために 使 用 されます 項 目 および 関 連 オブジェクトへのアクセス コンポーネントの 属 性 がオブジェクトやその 他 の 構 造 化 されたデータ (プリミティブ 値 ではない) の 場 合 は 同 じドット 表 記 を 使 用 してその 属 性 の 値 にアクセスします たとえば {!v.accounts.id は 取 引 先 レコードの ID 項 目 にアクセスします ネストが 深 いオブジェクトまたは 属 性 については ドットを 繰 り 返 し 追 加 して 構 造 をトラバースし ネストさ れた 値 にアクセスします 関 連 トピック: 式 の 例 グローバル 値 プロバイダ グローバル 値 プロバイダは コンポーネントが 式 で 使 用 できるグローバルな 値 およびメソッドです グローバル 値 プロバイダは 次 のとおりです 56

63 式 グローバル 値 プロバイダ globalid コンポーネントの ID (ページ 36)を 参 照 してください $Browser $Browser (ページ 57)を 参 照 してください $Locale $Locale (ページ 58)を 参 照 してください $Browser $Browser グローバル 値 プロバイダは アプリケーションにアクセスしているブラウザのハードウェアおよび オペレーティングシステムに 関 する 情 報 を 提 供 します 属 性 formfactor 説 明 ブラウザを 実 行 しているハードウェアの 種 類 に 基 づいて FormFactor Enum 値 を 返 し ます DESKTOP: デスクトップクライアント PHONE: 電 話 (ブラウザ 対 応 の 携 帯 電 話 やスマートフォンを 含 む) TABLET: タブレットクライアント (istablet が true を 返 します) isandroid isios isipad isiphone isphone istablet iswindowsphone ブラウザが Android デバイス 上 で 実 行 されているか (true) 否 か (false) を 示 します すべての 実 装 で 使 用 できるわけではありません ブラウザが ios デバイス 上 で 実 行 さ れているか (true) 否 か (false) を 示 します すべての 実 装 で 使 用 できるわけではありません ブラウザが ipad 上 で 実 行 されている か (true) 否 か (false) を 示 します すべての 実 装 で 使 用 できるわけではありません ブラウザが iphone 上 で 実 行 されてい るか (true) 否 か (false) を 示 します ブラウザが 電 話 (ブラウザ 対 応 の 携 帯 電 話 やスマートフォンを 含 む) 上 で 実 行 されてい るか (true) 否 か (false) を 示 します ブラウザが ipad 上 または Android 2.2 以 降 を 搭 載 したタブレット 上 で 実 行 されているか (true) 否 か (false) を 示 します ブラウザが Windows Phone 上 で 実 行 されているか (true) 否 か (false) を 示 します Windows Phone のみが 検 出 され タブレットやその 他 のタッチ 対 応 の Windows 8 デバイ スは 検 出 されません 例 : 次 の 例 は 一 定 の $Browser 属 性 を 取 得 する 方 法 を 示 します コンポーネントのソース <aura:component> <pre> [istablet={!$browser.istablet] [isphone={!$browser.isphone] [isandroid={!$browser.isandroid] [formfactor={!$browser.formfactor] 57

64 式 グローバル 値 プロバイダ </pre> </aura:component> $Locale $Locale グローバル 値 プロバイダは ブラウザのロケールに 関 する 情 報 を 提 供 します 属 性 language country variant timezone numberformat 説 明 言 語 コードを 返 します ISO 3166 に 従 った 国 コードを 返 します ベンダおよびブラウザ 固 有 のコードを 返 します Java の java.util.timezone パッケージ に 基 づいてタイムゾーン ID を 返 します Java の DecimalFormat クラスに 基 づいて 数 値 の 形 式 を 返 します サンプル 値 en de zh US DE GB WIN MAC POSIX EST PST GMT America/New_York #,##0.### # は 数 字 カンマは 3 桁 区 切 り 文 字 のプ レースホルダ ピリオドは 小 数 点 区 切 り 文 字 のプレースホルダを 表 します 末 尾 のゼロを 表 示 する 場 合 は # をゼロ (0) に 置 換 します decimal grouping percentformat currencyformat 小 数 点 区 切 り 記 号 を 返 します 桁 区 切 り 記 号 を 返 します パーセント 形 式 を 返 します 通 貨 形 式 を 返 します., #,##0% #,##0.00;( #,##0.00) は 通 貨 記 号 を 表 し 通 貨 のマークに 置 換 されます currency_code currency ISO 4217 に 従 った 通 貨 コードを 返 します 通 貨 のマークを 返 します USD $ 例 : 次 の 例 は 一 定 の $Locale 属 性 を 取 得 する 方 法 を 示 します コンポーネントのソース <aura:component> <pre> [language={!$locale.language] [timezone={!$locale.timezone] [numberformat={!$locale.numberformat] 58

65 式 式 の 評 価 [currencyformat={!$locale.currencyformat] </pre> </aura:component> フレームワークは 入 力 および 出 力 コンポーネントのローカライズもサポートします 関 連 トピック: ローカライズ 式 の 評 価 式 は JavaScript やその 他 のプログラミング 言 語 の 式 が 評 価 される 方 法 とほぼ 同 じ 方 法 で 評 価 されます 演 算 子 は JavaScript で 使 用 可 能 なものの 一 部 で 評 価 順 序 や 優 先 順 位 は 概 ね JavaScript と 同 じです 特 定 の 評 価 順 序 は 括 弧 を 使 用 して 指 定 します 式 に 関 して 意 外 に 思 われる 点 は 評 価 が 行 われる 頻 度 です シンプルな 回 答 は 必 要 なだけ 評 価 されます より 複 雑 な 回 答 については フレームワークが 変 更 が 行 われた 時 点 を 検 出 し 影 響 を 受 けるコンポーネントの 再 表 示 をトリガすることができます 連 動 関 係 は 自 動 的 に 処 理 されます この 点 は フレームワークの 基 本 的 な 利 点 の 1 つです フレームワークは ページで 何 らかの 内 容 を 再 表 示 す る 時 点 を 検 出 します コンポーネントが 再 表 示 されると そのコンポーネントが 使 用 する 式 が 再 評 価 されま す action メソッド 式 は onclick onhover その 他 の on で 始 まるコンポーネントの 属 性 など ユーザインターフェース イベントのアクションメソッドの 指 定 にも 使 用 されます 一 部 のコンポーネントは <ui:button> の press 属 性 など 他 の 属 性 を 使 用 してユーザインターフェースイベントへのアクションの 割 り 当 てを 簡 略 化 します アクションメソッドは {!c.theaction のような 式 を 使 用 して 属 性 に 割 り 当 てる 必 要 があります この 式 は アクションを 処 理 するコントローラ 関 数 への 参 照 である Aura.Action を 割 り 当 てます 式 を 使 用 してアクションメソッドを 割 り 当 てると アプリケーションやユーザインターフェースの 状 態 に 基 づ く 条 件 付 きの 割 り 当 てを 行 うことができます 詳 細 は 式 の 例 (ページ 55) を 参 照 してください 式 の 演 算 子 のリファレンス 式 言 語 では 演 算 子 がサポートされ より 複 雑 な 式 を 作 成 できます 算 術 演 算 子 算 術 演 算 子 に 基 づく 式 では 数 値 が 返 されます 演 算 子 + - 使 用 方 法 説 明 2 つの 数 字 を 加 算 します 一 方 の 数 字 からもう 一 方 の 数 字 を 減 算 します 59

66 式 式 の 演 算 子 のリファレンス 演 算 子 * / % - 使 用 方 法 2 * 2 4 / 2 5 % 2 -v.exp 説 明 2 つの 数 字 を 乗 算 します 一 方 の 数 字 をもう 一 方 の 数 字 で 除 算 します 最 初 の 数 字 を 2 つ 目 の 数 字 で 除 算 した 残 りの 整 数 を 返 します 単 項 演 算 子 後 続 の 数 字 の 正 負 記 号 を 逆 にします たとえば expenses の 値 が 100 の 場 合 -expenses は -100 になります 数 値 リテラル リテラル 整 数 浮 動 小 数 使 用 方 法 e10 説 明 整 数 は 小 数 点 や 指 数 のない 数 字 です 小 数 点 のある 数 字 または 指 数 のある 数 字 です Null null リテラルの null 数 明 示 的 な null 値 と 未 定 義 値 のあ る 数 字 を 一 致 させます 文 字 列 演 算 子 文 字 列 演 算 子 に 基 づく 式 では 文 字 列 値 が 返 されます 演 算 子 + 使 用 方 法 'Title: ' + m.note.title 説 明 2 つの 文 字 列 を 連 結 します 文 字 列 リテラル 文 字 列 リテラルは 単 一 引 用 付 で 囲 む 必 要 があります ( 例 : 'like this') リテラル 文 字 列 \<escape> 使 用 方 法 'hello world' '\n' 説 明 文 字 列 リテラルは 単 一 引 用 付 で 囲 む 必 要 があります 二 重 引 用 符 は 属 性 値 を 囲 む 場 合 にのみ 使 用 し 文 字 列 ではエスケープする 必 要 があります 空 白 文 字 : \t (タブ) \n ( 改 行 ) 60

67 式 式 の 演 算 子 のリファレンス リテラル 使 用 方 法 説 明 \r ( 行 頭 復 帰 ) エスケープ 文 字 : \" (リテラル ") \' (リテラル ') \\ (リテラル \) Unicode null '\u####' null Unicode のコードポイント # 記 号 は 16 進 数 です Unicode リテラル は 4 桁 にする 必 要 があります リテラルの null 文 字 列 明 示 的 な null 値 と 未 定 義 値 のある 文 字 列 を 一 致 させます 比 較 演 算 子 比 較 演 算 子 に 基 づく 式 では true または false の 値 が 返 されます 比 較 の 目 的 で 数 字 は 同 じ 型 として 処 理 されます 他 のすべての 比 較 では 値 と 型 の 両 方 がチェックされます 演 算 子 代 替 方 法 使 用 方 法 説 明 == eq 1 == 1 1 == eq 1 オペランドが 等 しい 場 合 に true が 返 さ れます この 比 較 は すべてのデータ 型 で 有 効 です!= ne 1!= 2 1!= true 1!= '1' オペランドが 等 しくない 場 合 に true が 返 されます この 比 較 は すべてのデー タ 型 で 有 効 です null!= false 1 ne 2 < lt 1 < 2 1 lt 2 最 初 のオペランドの 数 値 が 2 つ 目 のオペ ランドより 小 さい 場 合 に true を 返 しま す < 演 算 子 を < にエスケープして コンポーネントのマークアップで 使 用 で きるようにする 必 要 があります または lt 演 算 子 を 使 用 できます > gt 42 > 2 42 gt 2 最 初 のオペランドの 数 値 が 2 つ 目 のオペ ランドより 大 きい 場 合 に true を 返 しま す <= le 2 <= 42 2 le 42 最 初 のオペランドの 数 値 が 2 つ 目 のオペ ランド 以 下 の 場 合 に true を 返 します 61

68 式 式 の 演 算 子 のリファレンス 演 算 子 代 替 方 法 使 用 方 法 説 明 <= 演 算 子 を <= にエスケープして コンポーネントのマークアップで 使 用 で きるようにする 必 要 があります または le 演 算 子 を 使 用 できます >= ge 42 >= ge 42 最 初 のオペランドの 数 値 が 2 つ 目 のオペ ランド 以 上 の 場 合 に true を 返 します 論 理 演 算 子 論 理 演 算 子 に 基 づく 式 では true または false の 値 が 返 されます 演 算 子 &&! 使 用 方 法 isenabled && haspermission haspermission isrequired!isrequired 説 明 両 方 のオペランドが true の 場 合 に true を 返 します && 演 算 子 を && にエスケープして コンポーネントのマークアップで 使 用 できるようにする 必 要 があります または and() 関 数 を 使 用 して 2 つの 引 数 を 渡 すこともでき ます たとえば and(isenabled, haspermission) です いずれかのオペランドが true の 場 合 に true を 返 します 単 項 演 算 子 オペランドが false の 場 合 に true を 返 します この 演 算 子 を {! の 形 式 で 式 の 先 頭 に 使 用 する! 区 切 り 文 字 と 混 同 しないようにします 式 区 切 り 文 字 をこの 否 定 演 算 子 と 組 み 合 わせて 値 の 論 理 否 定 を 返 すことができ ます たとえば {!!true は false を 返 します 論 理 リテラル 論 理 値 が 非 論 理 値 と 等 しくなることはありません つまり true == true のみ false == false のみ 1!= true および 0!= false null!= false です リテラル true false 使 用 方 法 true false 説 明 boolean の true 値 boolean の false 値 条 件 演 算 子 条 件 演 算 子 は 従 来 の 3 項 演 算 子 のみです 62

69 式 式 の 関 数 のリファレンス 演 算 子? : 使 用 方 法 (1!= 2)? "Obviously" : "Black is White" 説 明? 演 算 子 の 前 のオペランドは boolean と して 評 価 されます true の 場 合 は 2 つ 目 のオペランドが 返 されます false の 場 合 は 3 つ 目 のオペランドが 返 されます 関 連 トピック: 式 の 関 数 のリファレンス 式 の 関 数 のリファレンス 式 言 語 には 算 術 文 字 列 配 列 比 較 boolean 条 件 などの 関 数 が 含 まれています すべての 関 数 で 大 文 字 と 小 文 字 が 区 別 されます 算 術 関 数 算 術 関 数 は 数 値 の 算 術 処 理 を 行 います この 関 数 は 数 値 の 引 数 を 取 ります 対 応 する 演 算 子 列 に 同 じ 機 能 の 演 算 子 (ある 場 合 ) を 記 載 します 関 数 代 替 方 法 使 用 方 法 説 明 対 応 する 演 算 子 add concat add(1,2) 最 初 の 引 数 を 2 つ 目 の 引 数 に 加 算 しま す + sub subtract sub(10,2) 最 初 の 引 数 から 2 つ 目 の 引 数 を 減 算 しま す - mult multiply mult(2,10) 最 初 の 引 数 を 2 つ 目 の 引 数 で 乗 算 しま す * div divide div(4,2) 最 初 の 引 数 を 2 つ 目 の 引 数 で 除 算 しま す / mod modulus mod(5,2) 最 初 の 引 数 を 2 つ 目 の 引 数 で 除 算 した 残 % りの 整 数 を 返 しま す abs abs(-5) 引 数 の 絶 対 値 を 返 し ます つまり 引 数 なし が 正 の 場 合 はそのま 63

70 式 式 の 関 数 のリファレンス 関 数 代 替 方 法 使 用 方 法 説 明 対 応 する 演 算 子 まの 数 値 負 の 場 合 はマイナス 記 号 を 除 いた 数 値 を 返 しま す たとえば abs(-5) は 5 で す neg negate neg(100) 引 数 の 正 負 記 号 を 逆 にします たとえ - ( 単 項 ) ば neg(100) は -100 です 文 字 列 関 数 関 数 代 替 方 法 使 用 方 法 説 明 対 応 する 演 算 子 concat add concat('hello ', 'world') 2 つの 引 数 を 連 結 します + add('walk ', 'the dog') 配 列 関 数 関 数 代 替 方 法 使 用 方 法 説 明 対 応 する 演 算 子 length myarray.length 配 列 の 長 さを 返 しま す 比 較 関 数 比 較 関 数 は 2 つの 数 値 引 数 を 取 り 比 較 の 結 果 に 応 じて true または false のいずれかを 返 します eq およ び ne 関 数 は 引 数 に 文 字 列 などの 他 のデータ 型 を 取 ることもできます 関 数 使 用 方 法 説 明 対 応 する 演 算 子 equals equals(1,1) 指 定 した 引 数 が 等 しい 場 合 に true を 返 します この 引 数 に == または eq は 任 意 のデータ 型 を 使 用 でき ます notequals notequals(1,2) 指 定 した 引 数 が 等 しくない 場 合 に true を 返 します この 引 数 に!= または ne 64

71 式 式 の 関 数 のリファレンス 関 数 使 用 方 法 説 明 対 応 する 演 算 子 は 任 意 のデータ 型 を 使 用 でき ます lessthan lessthan(1,5) 最 初 の 引 数 の 数 値 が 2 つ 目 の 引 数 より 小 さい 場 合 に true を 返 しま す < または lt greaterthan greaterthan(5,1) 最 初 の 引 数 の 数 値 が 2 つ 目 の 引 数 より 大 きい 場 合 に true を 返 しま す > または gt lessthanorequal lessthanorequal(1,2) 最 初 の 引 数 の 数 値 が 2 つ 目 の 引 数 以 下 の 場 合 に true を 返 します <= または le greaterthanorequal greaterthanorequal(2,1) 最 初 の 引 数 の 数 値 が 2 つ 目 の 引 数 以 上 の 場 合 に true を 返 します >= または ge boolean 関 数 boolean 関 数 は boolean 引 数 を 処 理 します 論 理 演 算 子 と 同 じ 機 能 です 関 数 使 用 方 法 説 明 対 応 する 演 算 子 and and(isenabled, haspermission) 両 方 の 引 数 が true の 場 合 に true を 返 します && or or(haspermission, hasvippass) いずれかの 引 数 が true の 場 合 に true を 返 します not not(isnew) 引 数 が false の 場 合 に true を 返 します! 条 件 関 数 関 数 使 用 方 法 説 明 対 応 する 演 算 子 if if(isenabled, 'Enabled', 'Not enabled') 最 初 の 引 数 を boolean とし て 評 価 します true の 場 合 は 2 つ 目 の 引 数 を 返 しま す それ 以 外 の 場 合 は 3 つ 目 の 引 数 を 返 します?: (3 項 ) 65

72 第 5 章 ユーザインターフェースの 概 要 フレームワークには 共 通 のユーザインターフェースコンポーネントが ui 名 前 空 間 に 備 えられています こ れらのすべてのコンポーネントは aura:component または aura:component の 子 コンポーネントのいずれ かを 拡 張 します aura:component は デフォルトの 表 示 を 行 う 抽 象 コンポーネントです ui:input や ui:output などのインタラクティブなユーザインターフェースコンポーネントは キーボード 操 作 およびマ ウス 操 作 などの 共 通 のユーザインターフェースイベントを 提 供 する ui:interactive を 拡 張 します 各 コン ポーネントのスタイルは 適 宜 設 定 できます 使 用 可 能 なすべてのコンポーネントについては https://<mysalesforceinstance>.lightning.force.com/auradocs/reference.app (<mysalesforceinstance> は na1 など 組 織 をホストするインスタンスの 名 前 です) のコンポーネント 参 照 をご 覧 ください 関 連 トピック: 入 力 コンポーネントの 概 要 コンポーネント コンポーネントのバンドル 66

73 ユーザインターフェースの 概 要 入 力 コンポーネントの 概 要 入 力 コンポーネントの 概 要 ユーザは 値 を 選 択 または 入 力 するために 入 力 要 素 を 使 用 してアプリケーションとやりとりします フレーム ワークには テキスト 項 目 ボタン チェックボックスなど 一 連 の 入 力 要 素 が 備 えられています ui:input には ui:inputtext や ui:inputcheckbox などの 子 コンポーネントがあり それぞれが 共 通 の 入 力 要 素 に 対 応 しています これらの 各 コンポーネントでは さまざまな 入 力 イベントがサポートされ ユー ザインターフェースイベントのイベント 処 理 が 簡 略 化 されます 入 力 コンポーネントの 使 用 独 自 のカスタムコンポーネントで 入 力 コンポーネントを 使 用 するには.cmp または.app リソースに 入 力 コ ンポーネントを 追 加 します 次 の 例 は テキスト 項 目 およびボタンの 基 本 設 定 です <ui:inputtext label="name" aura:id="name" value="" placeholder="first, Last"/> <ui:outputtext aura:id="nameoutput" value=""/> <ui:button aura:id="outputbutton" label="submit" press="{!c.getinput"/> ui:outputtext コンポーネントは 対 応 する ui:inputtext コンポーネントの 出 力 値 のプレースホルダと して 機 能 します ui:outputtext コンポーネントの 値 は クライアント 側 の 次 のコントローラアクションを 使 用 して 設 定 できます getinput : function(cmp, event) { var fullname = cmp.find("name").get("v.value"); var outname = cmp.find("nameoutput"); outname.set("v.value", fullname); 使 用 可 能 な 共 通 の 項 目 コンポーネントは 次 のとおりです データ 型 日 時 数 値 テキスト 説 明 日 時 を 入 力 するための 入 力 項 目 数 値 を 入 力 するための 入 力 項 目 1 行 のテキストを 入 力 するための 入 力 項 目 関 連 コンポーネント ui:inputdate ui:inputdatetime ui:outputdate ui:outputdatetime ui:inputnumber ui:outputnumber ui:inputtext ui:outputtext ボタン ボタンは クリックおよびアクションの 実 行 が 可 能 であり テキスト 表 示 ラベル 画 像 またはその 両 方 を 設 定 できます ボタンは 次 の 3 通 りの 方 法 で 作 成 できます 67

74 ユーザインターフェースの 概 要 ボタン テキストのみのボタン <ui:button label="find" /> 画 像 のみのボタン <!-- Component markup --> <ui:button label="find" labelclass="assistivetext" class="img" /> /** CSS **/ THIS.uiButton.img { background: url(/path/to/img) no-repeat; width:50px; height:25px; assistivetext クラスは ビューに 表 示 ラベルは 表 示 されませんが 支 援 技 術 には 使 用 できます テキストと 画 像 を 含 むボタン <!-- Component markup --> <ui:button label="find" /> /** CSS **/ THIS.uiButton { background: url(/path/to/img) no-repeat; HTML 表 示 テキストと 画 像 を 含 むボタンのマークアップの 結 果 次 の HTML になります <button class="default uiblock uibutton" accesskey type="button"> <span class="label bbody truncate" dir="ltr">find</span> </button> クリックイベントの 操 作 ui:button コンポーネントの press イベントは ユーザがボタンをクリックすると 起 動 されます 次 の 例 の press="{!c.getinput" は 入 力 テキスト 値 を 出 力 する 関 数 名 getinput を 使 用 して クライアント 側 の コントローラアクションをコールします <aura:component> <ui:inputtext aura:id="name" label="enter Name:" placeholder="your Name" /> <ui:button aura:id="button" label="click me" press="{!c.getinput"/> <ui:outputtext aura:id="outname" value="" class="text"/> </aura:component> /* Client-side controller */ ({ getinput : function(cmp, evt) { var myname = cmp.find("name").get("v.value"); var mytext = cmp.find("outname"); 68

75 ユーザインターフェースの 概 要 日 時 項 目 var greet = "Hi, " + myname; mytext.set("v.value", greet); ボタンのスタイル 設 定 ui:button コンポーネントは 通 常 の CSS スタイル 設 定 を 使 用 してカスタマイズできます コンポーネント の CSS リソースで 次 のクラスセレクタを 追 加 します.THIS.uiButton { margin-left: 20px; ボタンコンポーネントが 最 上 位 レベルの 要 素 である 場 合.THIS.uiButton セレクタでスペースは 追 加 され ません アプリケーションですべての ui:button コンポーネントのスタイル 設 定 を 上 書 きするには アプリケーショ ンの CSS リソースで 次 のクラスセレクタを 追 加 します.THIS.uiButton { margin-left: 20px; 関 連 トピック: クライアント 側 コントローラを 使 用 したイベントの 処 理 コンポーネント 内 の CSS 日 時 項 目 日 時 項 目 では クライアント 側 のローカライズ 日 付 ピッカー 共 通 のキーワードイベントとマウスイベント がサポートされます このような 項 目 コンポーネントから 出 力 を 表 示 する 場 合 は それぞれの ui:output コ ンポーネントを 使 用 します たとえば ui:inputdate コンポーネントの 出 力 を 表 示 するには ui:outputdate を 使 用 します 日 時 項 目 は 次 のコンポーネントで 表 されます データ 型 日 付 説 明 text 型 の 日 付 を 入 力 するための 入 力 項 目 関 連 コンポーネント ui:inputdate ui:outputdate 日 時 text 型 の 日 時 を 入 力 するための 入 力 項 目 ui:inputdatetime ui:outputdatetime 69

76 ユーザインターフェースの 概 要 日 時 項 目 日 時 項 目 の 使 用 次 に 日 付 ピッカーを 使 用 した 日 付 項 目 の 基 本 設 定 を 示 します <ui:inputdate aura:id="datefield" label="birthday" value=" " displaydatepicker="true"/> この 例 の 結 果 次 の HTML になります <div class="uiinput uiinputdate"> <label class="uilabel-left uilabel"> <span>birthday</span> </label> <input placeholder="mmm d, yyyy" type="text" class="uiinput uiinputdate"> <a class="datepicker-openicon" aria-haspopup="true"> <span class="assistivetext">date Picker</span> </a> <div class="uidatepicker"> <!--Date picker set to visible when icon is clicked--> </div> </div> 日 時 のローカライズ 次 のコードは Mai 8, :00:00 AM として 表 示 される クライアント 側 のローカライズを 使 用 した 日 時 項 目 の 基 本 設 定 です <ui:outputdatetime langlocale="de" timezone="europe/berlin" value=" "/> 日 時 項 目 のスタイル 設 定 日 時 項 目 の 外 観 と コンポーネントの CSS リソースでの 出 力 のスタイルを 設 定 できます 次 の 例 は mystyle セレクタを 使 用 して ui:inputdatetime コンポーネントにスタイルを 設 定 します <!-- Component markup --> <ui:inputdatetime class="mystyle" label="date" displaydatepicker="true"/> /* CSS */.THIS.myStyle { border: 1px solid #dce4ec; border-radius: 4px; 関 連 トピック: 入 力 コンポーネントの 表 示 ラベル クライアント 側 コントローラを 使 用 したイベントの 処 理 ローカライズ コンポーネント 内 の CSS 70

77 ユーザインターフェースの 概 要 数 値 項 目 数 値 項 目 数 値 項 目 には 数 値 を 含 めることができます 数 値 項 目 では クライアント 側 の 書 式 設 定 ローカライズ 共 通 のキーワードイベントとマウスイベントがサポートされます ui:inputnumber コンポーネントの 出 力 を 表 示 するには ui:outputnumber を 使 用 します 数 値 項 目 の 使 用 次 の 例 に 10 の 値 を 表 示 する 数 値 項 目 を 示 します <aura:attribute name="num" type="integer" default="10"/> <ui:inputnumber aura:id="num" label="age" value="{!v.num"/> 前 の 例 の 結 果 次 の HTML になります <div class="uiinput uiinputtext uiinputnumber"> <label class="uilabel-left uilabel"> <span>enter age</span> </label> <input aria-describedby placeholder type="text" class="uiinput uiinputtext uiinputnumber"> </div> 有 効 な 数 値 を 返 す ui:inputnumber コンポーネントの 値 には 有 効 な 数 値 が 予 期 され カンマは 使 用 できません カンマを 含 めるには type="string" の 代 わりに type="integer" を 使 用 します 次 の 例 は 100,000 を 返 します <aura:attribute name="number" type="integer" default="100,000"/> <ui:inputnumber label="number" value="{!v.number"/> 次 の 例 も 100,000 を 返 します <aura:attribute name="number" type="string" default="100000"/> <ui:inputnumber label="number" value="{!v.number"/> 数 値 項 目 の 書 式 設 定 とローカライズ format 属 性 は 数 値 入 力 の 形 式 を 決 定 します 指 定 されていない 場 合 は ロケールのデフォルト 形 式 が 使 用 されます 次 のコードは 指 定 された format 属 性 に 基 づいて 10, を 表 示 する 数 値 項 目 の 基 本 設 定 です <ui:label label="cost" for="costfield"/> <ui:inputnumber aura:id="costfield" format="#,##0,000.00#" value="10000"/> 71

78 ユーザインターフェースの 概 要 テキスト 項 目 数 値 項 目 のスタイル 設 定 次 の 例 は mystyle セレクタを 使 用 して ui:inputnumber コンポーネントにスタイルを 設 定 します <!-- Component markup --> <ui:inputnumber class="mystyle" label="amount" placeholder="0" /> /* CSS */.THIS.myStyle { border: 1px solid #dce4ec; border-radius: 4px; 関 連 トピック: 入 力 コンポーネントの 表 示 ラベル クライアント 側 コントローラを 使 用 したイベントの 処 理 ローカライズ コンポーネント 内 の CSS テキスト 項 目 テキスト 項 目 には 英 数 字 と 特 殊 文 字 を 含 めることができます テキスト 項 目 は placeholder size 共 通 のキーワードイベントとマウスイベントなど ui:inputtext および ui:input の 機 能 とイベントを 継 承 します このような 項 目 コンポーネントから 出 力 を 表 示 する 場 合 は それぞれの ui:output コンポーネント を 使 用 します たとえば ui:inputphone コンポーネントの 出 力 を 表 示 するには ui:outputphone を 使 用 します テキスト 項 目 は 次 のコンポーネントで 表 されます データ 型 メール 電 話 テキスト 説 明 メールアドレスを 入 力 するための 入 力 項 目 電 話 番 号 を 入 力 するための 入 力 項 目 1 行 のテキストを 入 力 するための 入 力 項 目 関 連 コンポーネント ui:input ui:output ui:inputphone ui:outputphone ui:inputtext ui:outputtext テキスト 項 目 の 使 用 次 に メール 項 目 の 基 本 設 定 を 示 します <ui:input aura:id=" " label=" " 72

79 ユーザインターフェースの 概 要 チェックボックス この 例 の 結 果 次 の HTML になります <div class="uiinput uiinputtext uiinput "> <label class="uilabel-left uilabel"> <span> </span> </label> <input type=" " class="uiinput uiinputtext uiinput "> </div> テキスト 項 目 のスタイル 設 定 テキスト 項 目 および 出 力 の 外 観 のスタイルを 設 定 できます コンポーネントの CSS ファイルで 対 応 するクラ スセレクタを 追 加 します 次 のクラスセレクタは テキストの 文 字 列 表 示 のスタイルを 指 定 します たとえば ui:inputphone コン ポーネントのスタイルを 設 定 するには.THIS.uiInputPhone を 使 用 します.THIS.uiInput { //CSS declaration.this.uiinputphone { //CSS declaration.this.uiinputtext { //CSS declaration 次 の 例 は mystyle セレクタを 使 用 して ui:inputtext コンポーネントにスタイルを 設 定 します <!-- Component markup--> <ui:inputtext class="mystyle" label="name"/> /* CSS */.THIS.myStyle { border: 1px solid #dce4ec; border-radius: 4px; 関 連 トピック: 入 力 コンポーネントの 表 示 ラベル クライアント 側 コントローラを 使 用 したイベントの 処 理 ローカライズ コンポーネント 内 の CSS チェックボックス チェックボックスは クリックおよびアクションの 実 行 が 可 能 であり 複 数 の 選 択 肢 のグループとして 表 示 で きます チェックボックスは 動 作 とイベントを ui:input から 継 承 する ui:inputcheckbox を 使 用 して 作 成 できます value および disabled 属 性 は チェックボックスの 状 態 を 制 御 し click や change などの イベントはその 動 作 を 決 定 します イベントは チェックボックスごとに 別 個 に 使 用 する 必 要 があります 次 に チェックボックスを 設 定 する 基 本 的 な 方 法 をいくつか 示 します 73

80 ユーザインターフェースの 概 要 チェックボックス オン チェックボックスをオンにするには value="true" を 設 定 します 次 の 例 は チェックボックスの 初 期 値 を 設 定 します <aura:attribute name="check" type="boolean" default="true"/> <ui:inputcheckbox value="{!v.check"/> オフの 状 態 <ui:inputcheckbox disabled="true" label="select" /> 前 の 例 の 結 果 次 の HTML になります <label class="uilabel-left uilabel" for="globalid"><span>select</span></label> <input disabled="disabled" type="checkbox id="globalid" class="uiinput uiinputcheckbox"> イベントの 操 作 ui:inputcheckbox の 共 通 イベントには click イベントと change イベントがあります たとえば click="{!c.done" では 関 数 名 done を 使 用 してクライアント 側 のコントローラがコールされます 次 のコードは チェックボックス 項 目 にチェックマークを 入 れます <!--The checkbox--> <ui:inputcheckbox label="cross this out" click="{!c.crossout" class="line" /> /*The controller action*/ crossout : function(cmp, event){ var elem = event.getsource().getelement(); $A.util.toggleClass(elem, "done"); チェックボックスのスタイル 設 定 ui:inputcheckbox コンポーネントは 通 常 の CSS スタイル 設 定 を 使 用 してカスタマイズできます この 例 では 次 の 画 像 を 含 むチェックボックスを 示 します <ui:inputcheckbox labelclass="check" label="select?" value="true" /> 次 の CSS スタイルは 指 定 された 画 像 を 持 つデフォルトのチェックボックスに 置 き 換 わります.THIS input[type="checkbox"] { display: none;.this.check span { 74

81 ユーザインターフェースの 概 要 項 目 レベルのエラー margin: 20px;.THIS input[type="checkbox"]+label { display: inline-block; width: 20px; height: 20px; vertical-align: middle; background: url('images/checkbox.png') top left; cursor: pointer;.this input[type="checkbox"]:checked+label { background:url('images/checkbox.png') bottom left; 関 連 トピック: クライアント 側 コントローラを 使 用 したイベントの 処 理 コンポーネント 内 の CSS 項 目 レベルのエラー 項 目 レベルのエラーは ユーザ 入 力 後 に 項 目 で 検 証 エラーが 発 生 した 場 合 に 表 示 されます フレームワークで はデフォルトのエラーコンポーネント ui:inputdefaulterror が 作 成 され click や mouseover などの 基 本 イベントが 提 供 されます 詳 細 は 項 目 の 検 証 を 参 照 してください 関 連 トピック: クライアント 側 コントローラを 使 用 したイベントの 処 理 コンポーネント 内 の CSS 75

82 イベントとの 通 信 第 6 章 イベント トピック: クライアント 側 コ ントローラを 使 用 したイベントの 処 理 コンポーネントイ ベント アプリケーション イベント イベント 処 理 のラ イフサイクル JavaScript または Java Swing を 使 用 した 開 発 の 経 験 があれば イベント 駆 動 型 プログラ ムの 概 念 を 理 解 されていることと 思 います ここでは インターフェースイベント が 発 生 したときに 応 答 するハンドラを 記 述 します イベントは ユーザ 操 作 によっ てトリガされている 場 合 もあれば それ 以 外 の 場 合 もあります Lightningコンポーネントフレームワークでは JavaScript コントローラのアクションか らイベントが 起 動 されます イベントには そのイベントの 起 動 前 に 設 定 可 能 で 処 理 時 に 読 み 取 り 可 能 な 属 性 を 含 められます イベントは.evt リソースの aura:event タグによって 宣 言 され コンポーネン トとアプリケーションのいずれかのタイプを 設 定 できます イベントタイプは aura:event タグの type="component" または type="application" のいずれ かで 設 定 されます 高 度 なイベントの 例 非 Lightning コード からの Lightning イ ベントの 起 動 イベントのベスト プラクティス 表 示 ライフサイク ル 中 に 起 動 された イベント 76

83 イベント クライアント 側 コントローラを 使 用 したイベントの 処 理 クライアント 側 コントローラを 使 用 したイベントの 処 理 クライアント 側 のコントローラは コンポーネント 内 のイベントを 処 理 します これは すべてのコンポーネ ントのアクションの 関 数 を 定 義 する JavaScript リソースです 各 アクション 関 数 は コントローラが 属 するコンポーネント アクションで 処 理 するイベント ヘルパー ( 使 用 する 場 合 ) の 3 つのパラメータを 取 得 します クライアント 側 のコントローラは 名 前 - 値 ペアの 対 応 付 けが 含 まれる JSON オブジェクトであることを 示 すために 角 括 弧 と 中 括 弧 で 囲 まれます クライアント 側 のコントローラの 作 成 クライアント 側 のコントローラは コンポーネントのバンドルの 一 部 です これは <componentname>controller.js という 命 名 規 則 で 自 動 的 に 結 び 付 けられます 開 発 者 コンソールを 使 用 してクライアント 側 のコントローラを 作 成 するには コンポーネントのサイドバーで [CONTROLLER (コントローラ)] をクリックします クライアント 側 のコントローラアクションのコール HTML タグの 実 装 が 異 なるイベントを 見 てみましょう 次 のサンプルコンポーネントでは 3 つの 異 なるボタン を 作 成 しますが 3 つのボタンのうち 最 後 の 2 つのボタンのみが 機 能 します これらのボタンをクリックする と text コンポーネントの 属 性 が 指 定 された 値 で 更 新 されます target.get("v.label") は ボタンの label 属 性 の 値 を 参 照 します コンポーネントのソース <aura:component> <aura:attribute name="text" type="string" default="just a string. Waiting for change."/> <input type="button" value="flawed HTML Button" onclick="alert('this will not work')"/> <br/> <input type="button" value="hybrid HTML Button" onclick="{!c.handleclick"/> <br/> <ui:button label="framework Button" press="{!c.handleclick"/> <br/> {!v.text </aura:component> クライアント 側 コントローラのソース { handleclick : function(component, event) { var attributevalue = component.get("v.text"); aura.log("current text: " + attributevalue); var target; if (event.getsource) { // handling a framework component event target = event.getsource(); // this is a Component object component.set("v.text", target.get("v.label")); 77

84 イベント クライアント 側 コントローラを 使 用 したイベントの 処 理 else { // handling a native browser event target = event.target.value; // this is a DOM element component.set("v.text", event.target.value); on で 始 まるブラウザの DOM 要 素 イベント (onclick や onkeypress など) はすべて コントローラアクショ ンに 結 び 付 けることができます コントローラアクションに 結 び 付 けることができるのはブラウザイベントの みです コンポーネントの 任 意 の JavaScript は 無 視 されます JavaScript についての 知 識 があるユーザなら HTML タグがフレームワークの 第 一 級 オブジェクトであることを 知 っているため 1 番 目 の Flawed ボタンのようなものを 自 分 で 記 述 して 試 してみることをお 勧 めします ただし このフレームワークには 独 自 のイベントシステムがあるため この Flawed ボタンは 機 能 しませ ん HTML タグは Lightning コンポーネントに 対 応 付 けられるため DOM イベントは Lightning イベントに 対 応 付 けられます フレームワークイベントの 処 理 クライアント 側 のコンポーネントコントローラのアクションを 使 用 して フレームワークイベントを 処 理 しま す マウスおよびキーボードの 一 般 的 な 操 作 に 対 応 するフレームワークイベントは 標 準 コンポーネントで 使 用 できます コントローラの handleclick アクションを 呼 び 出 す Hybrid ボタンの onclick 属 性 を 見 ていきましょう Framework ボタンで 使 用 される 構 文 は press 属 性 のある <ui:button> コンポーネントの 構 文 と 同 じで す この 簡 単 なサンプルでは Framework ボタンの 操 作 と Hybrid HTML ボタンの 操 作 に 機 能 的 な 違 いはほとん どありません ただし コンポーネントは 障 害 者 や 補 助 技 術 を 使 用 するユーザもアプリケーションを 使 用 で きるように アクセシビリティを 考 慮 して 設 計 されます より 複 雑 なコンポーネントを 構 築 する 場 合 再 利 用 可 能 な 標 準 コンポーネントを 使 用 すれば 本 来 であれば 自 分 で 作 成 しなければならないプラミングの 一 部 を 標 準 コンポーネントが 処 理 してくれるため 作 業 を 簡 略 化 できます また これらのコンポーネントは 安 全 であ り パフォーマンスが 最 適 化 されています コンポーネントの 属 性 へのアクセス handleclick 関 数 の 各 アクションの 最 初 の 引 数 は コントローラが 属 するコンポーネントです このコンポー ネントに 対 して 最 もよく 行 われる 操 作 の 1 つは その 属 性 値 の 参 照 と 変 更 です component.get("v.<attributename>") では <attributename> 属 性 の 値 が 返 されます aura.log() ユーティリティ 関 数 は ブラウザコンソールの 検 出 を 試 みて そこに 属 性 値 を 記 録 します 78

85 イベント コンポーネントイベント コントローラでの 別 のアクションの 呼 び 出 し アクションメソッドを 別 のメソッドからコールするには ヘルパー 関 数 を 使 用 して helper.somefunction(component) で 呼 び 出 します ヘルパーリソースには コンポーネントのバンドル の JavaScript コードで 再 利 用 できる 関 数 があります 関 連 トピック: コンポーネントのバンドル 内 の JavaScript コードの 共 有 イベント 処 理 のライフサイクル コンポーネントの 初 期 化 時 のアクションの 呼 び 出 し コントローラのサーバ 側 ロジックの 作 成 コンポーネントイベント コンポーネントイベントは コンポーネント 自 体 またはそのコンポーネントをインスタンス 化 するあるいは そのコンポーネントを 含 むコンポーネントによって 処 理 されます カスタムコンポーネントイベントを 作 成 する カスタムコンポーネントイベントは.evt リソースの <aura:event> タグを 使 用 して 作 成 できます イベン トには そのイベントの 起 動 前 に 設 定 可 能 で 処 理 時 に 読 み 取 り 可 能 な 属 性 を 含 められます コンポーネントイベントの 場 合 は <aura:event> タグに type="component" を 使 用 します たとえば 次 のコンポーネントイベントには message 属 性 が 1 つ 設 定 されています <aura:event type="component"> <!-- add aura:attribute tags to define event shape. One sample attribute here --> <aura:attribute name="message" type="string"/> </aura:event> イベントを 処 理 するコンポーネントは イベントデータを 取 得 できます このイベントの 属 性 を 取 得 するに は ハンドラのクライアント 側 コントローラで event.getparam("message") をコールします コンポーネントイベントを 登 録 する コンポーネントは マークアップに <aura:registerevent> を 使 用 して イベントを 起 動 できるように 登 録 します 次 に 例 を 示 します <aura:registerevent name="samplecomponentevent" type="auradocs:compevent"/> ここでは イベントを 起 動 して 処 理 する 場 合 に name 属 性 の 値 がどのように 使 用 されるかを 確 認 します 79

86 イベント コンポーネントイベント コンポーネントイベントを 起 動 する JavaScript でコンポーネントイベントへの 参 照 を 取 得 するには getevent("evtname") を 使 用 します この evtname は <aura:registerevent> の name 属 性 と 一 致 します fire() を 使 用 して コンポーネントの インスタンスからイベントを 起 動 します たとえば クライアント 側 コントローラの 次 のアクション 関 数 でイ ベントを 起 動 します var compevent = cmp.getevent("samplecomponentevent"); // set some data for the event (also known as event shape) // compevent.setparams(...); compevent.fire(); それ 自 体 のイベントを 処 理 するコンポーネント コンポーネントは マークアップの aura:handler タグを 使 用 して それ 自 体 のイベントを 処 理 できます <aura:handler> の action 属 性 は イベントを 処 理 するクライアント 側 コントローラのアクションを 設 定 します 次 に 例 を 示 します <aura:registerevent name="samplecomponentevent" type="auradocs:compevent"/> <aura:handler name="samplecomponentevent" action="{!c.handlesampleevent"/> メモ: イベントはそれぞれその 名 前 で 定 義 されるため <aura:registerevent> と <aura:handler> の name 属 性 は 一 致 している 必 要 があります インスタンス 化 されたコンポーネントのコンポーネントイベントを 処 理 する イベントを 登 録 するコンポーネントは イベントの name 属 性 を 宣 言 します たとえば <auradocs:eventsnotifier> コンポーネントには <aura:registerevent> タグが 含 まれます <aura:registerevent name="samplecomponentevent" type="auradocs:compevent"/> <auradocs:eventsnotifier> を 別 のコンポーネントでインスタンス 化 するときは <aura:registerevent> タグの name 属 性 の 値 を 使 用 してハンドラを 登 録 します たとえば <auradocs:eventshandler> コンポー ネントのマークアップに <auradocs:eventsnotifier> が 含 まれる 場 合 は eventshandler が eventsnotifier をインスタンス 化 し eventsnotifier が 生 成 したすべてのイベントを 処 理 できます <auradocs:eventshandler> が <auradocs:eventsnotifier> をインスタンス 化 する 方 法 を 次 に 示 しま す <auradocs:eventsnotifier samplecomponentevent="{!c.handlecomponenteventfired"/> samplecomponentevent は <auradocs:eventsnotifier> にある <aura:registerevent> タグの name 属 性 の 値 と 一 致 します 80

87 イベント コンポーネントイベントの 例 コンポーネントイベントを 動 的 に 処 理 する コンポーネントには JavaScript を 使 用 してハンドラを 動 的 にバインドできます この 方 法 は コンポーネント がクライアント 側 で JavaScript を 使 用 して 作 成 されている 場 合 に 役 立 ちます イベントハンドラの 動 的 な 追 加 (ページ 123)を 参 照 してください コンポーネントイベントのソースを 取 得 する JavaScript の evt.getsource() を 使 用 して どのコンポーネントがコンポーネントイベントを 起 動 したかを 確 認 します この evt はイベントへの 参 照 です 関 連 トピック: アプリケーションイベント クライアント 側 コントローラを 使 用 したイベントの 処 理 高 度 なイベントの 例 コンポーネントイベントの 例 以 下 に コンポーネントイベントを 使 用 して 別 のコンポーネントの 属 性 を 更 新 する 簡 単 な 使 用 事 例 を 示 しま す 1. ユーザがノーティファイアコンポーネント cenotifier.cmp のボタンをクリックします 2. cenotifier.cmp のクライアント 側 コントローラが コンポーネントイベントにメッセージを 設 定 し イ ベントを 起 動 します 3. ハンドラコンポーネント cehandler.cmp にはノーティファイアコンポーネントが 含 まれ 起 動 されたイ ベントを 処 理 します 4. cehandler.cmp のクライアント 側 コントローラが イベントで 送 信 されたデータに 基 づいて cehandler.cmp の 属 性 を 設 定 します この 例 のイベントおよびコンポーネントは docsample 名 前 空 間 にあります この 名 前 空 間 は 特 別 なもので はありませんが コードの 数 か 所 で 参 照 されます 必 要 に 応 じて 別 の 名 前 空 間 を 使 用 するようにコードを 変 更 します コンポーネントイベント ceevent.evt 次 のコンポーネントイベントには 属 性 が 1 つ 設 定 されています この 場 合 は 起 動 時 にこの 属 性 を 使 用 してイ ベントに 一 定 のデータを 渡 します <aura:event type="component"> <aura:attribute name="message" type="string"/> </aura:event> 81

88 イベント コンポーネントイベントの 例 ノーティファイアコンポーネント cenotifier.cmp このコンポーネントは aura:registerevent を 使 用 して コンポーネントイベントを 起 動 する 可 能 性 がある ことを 宣 言 します コンポーネントのボタンには press ブラウザイベントがあり クライアント 側 コントローラの firecomponentevent アクションに 結 び 付 けられています ボタンをクリックすると アクションが 呼 び 出 されます <aura:component> <aura:registerevent name="cmpevent" type="docsample:ceevent"/> <h1>simple Component Event Sample</h1> <p><ui:button label="click here to fire a component event" press="{!c.firecomponentevent" /> </p> </aura:component> cenotifiercontroller.js クライアント 側 コントローラが cmp.getevent("cmpevent") をコールして イベントのインスタンスを 取 得 します この cmpevent は コンポーネントのマークアップにある <aura:registerevent> タグの 名 前 属 性 の 値 と 一 致 します このコントローラがイベントの message 属 性 を 設 定 して イベントを 起 動 します { firecomponentevent : function(cmp, event) { // Get the component event by using the // name value from aura:registerevent var cmpevent = cmp.getevent("cmpevent"); cmpevent.setparams({ "message" : "A component event fired me. " + "It all happened so fast. Now, I'm here!" ); cmpevent.fire(); ハンドラコンポーネント cehandler.cmp ハンドラコンポーネントには <docsample:cenotifier> コンポーネントが 含 まれ <docsample:cenotifier> にある <aura:registerevent> タグから name 属 性 の 値 cmpevent を 使 用 し てハンドラを 登 録 します イベントが 起 動 されると ハンドラコンポーネントのクライアント 側 コントローラで handlecomponentevent アクションが 呼 び 出 されます <aura:component> <aura:attribute name="messagefromevent" type="string"/> <aura:attribute name="numevents" type="integer" default="0"/> <!-- handler contains the notifier component 82

89 イベント アプリケーションイベント Note that cmpevent is the value of the name attribute in aura:registerevent in cenotifier.cmp --> <docsample:cenotifier cmpevent="{!c.handlecomponentevent"/> <p>{!v.messagefromevent</p> <p>number of events: {!v.numevents</p> </aura:component> cehandlercontroller.js コントローラがイベントで 送 信 されたデータを 取 得 し そのデータを 使 用 してハンドラコンポーネントの messagefromevent 属 性 を 更 新 します { handlecomponentevent : function(cmp, event) { var message = event.getparam("message"); // set the handler attributes based on event data cmp.set("v.messagefromevent", message); var numeventshandled = parseint(cmp.get("v.numevents")) + 1; cmp.set("v.numevents", numeventshandled); すべてをまとめる このコードをテストする 場 合 は リソースをサンプルアプリケーションに 追 加 して ハンドラコンポーネント に 移 動 します たとえば docsample アプリケーションがある 場 合 は 次 のアドレスに 移 動 します (mysalesforceinstance は na1.salesforce.com など 組 織 をホストするインスタンスの 名 前 です) サーバ 上 のデータにアクセスする 場 合 は この 例 を 拡 張 して ハンドラのクライアント 側 コントローラから サーバ 側 コントローラをコールします 関 連 トピック: コンポーネントイベント コントローラのサーバ 側 ロジックの 作 成 アプリケーションイベントの 例 アプリケーションイベント アプリケーションイベントは 従 来 の 公 開 / 登 録 モデルに 従 います アプリケーションイベントは コンポー ネントのインスタンスから 起 動 されます イベントのハンドラを 提 供 するすべてのコンポーネントに 通 知 され ます 83

90 イベント アプリケーションイベント カスタムアプリケーションイベントを 作 成 する カスタムアプリケーションイベントは.evt リソースの <aura:event> タグを 使 用 して 作 成 できます イベ ントには そのイベントの 起 動 前 に 設 定 可 能 で 処 理 時 に 読 み 取 り 可 能 な 属 性 を 含 められます アプリケーションイベントの 場 合 は <aura:event> タグに type="application" を 使 用 します たとえ ば 次 のアプリケーションイベントには message 属 性 が 1 つ 設 定 されています <aura:event type="application"> <!-- add aura:attribute tags to define event shape. One sample attribute here --> <aura:attribute name="message" type="string"/> </aura:event> イベントを 処 理 するコンポーネントは イベントデータを 取 得 できます このイベントの 属 性 を 取 得 するに は ハンドラのクライアント 側 コントローラで event.getparam("message") をコールします アプリケーションイベントを 登 録 する コンポーネントは マークアップに <aura:registerevent> を 使 用 して アプリケーションイベントを 起 動 できるように 登 録 します name 属 性 は 必 須 ですが アプリケーションイベントでは 使 用 されません name 属 性 が 関 係 するのは コンポーネントイベントのみです 次 の 例 では name="appevent" を 使 用 しています が この 値 はどこにも 使 用 されていません <aura:registerevent name="appevent" type="auradocs:appevent"/> アプリケーションイベントを 起 動 する JavaScript で $A.get("e.myNamespace:myAppEvent") を 使 用 して mynamespace 名 前 空 間 の myappevent イベントのインスタンスを 取 得 します fire() を 使 用 して イベントを 起 動 します var appevent = $A.get("e.auradocs:appEvent"); // set some data for the event (also known as event shape) //appevent.setparams({... ); appevent.fire(); アプリケーションイベントを 処 理 する ハンドラコンポーネントのマークアップで <aura:handler> を 使 用 します <aura:handler> の action 属 性 は イベントを 処 理 するクライアント 側 コントローラのアクションを 設 定 します 次 に 例 を 示 します <aura:handler event="auradocs:appevent" action="{!c.handleapplicationevent"/> イベントが 起 動 されると クライアント 側 コントローラの handleapplicationevent アクションがコール されます 84

91 イベント アプリケーションイベントの 例 アプリケーションイベントのソースを 取 得 する evt.getsource() はアプリケーションイベントでは 機 能 せず コンポーネントイベントでのみ 機 能 します コンポーネントイベントは 通 常 cmp.getevent('myevt').fire(); のようなコードによって 起 動 されるた め 誰 がイベントを 起 動 したかが 明 白 です 他 方 どのコンポーネントがアプリケーションイベントを 起 動 し たかはやや 不 明 瞭 です アプリケーションイベントは $A.getEvt('myEvt').fire(); のようなコードに よって 起 動 されます アプリケーションイベントのソースを 確 認 する 必 要 がある 場 合 は evt.setparams() を 使 用 して イベントを 起 動 する 前 にイベントデータにソースコンポーネントを 設 定 します たとえば evt.setparams("source" : sourcecmp) を 使 用 します この sourcecmp はソースコンポーネントへの 参 照 です アプリケーションの 表 示 中 に 起 動 されるイベント いくつかのイベントは アプリケーションを 表 示 中 に 起 動 されます すべての init イベントは コンポーネ ントまたはアプリケーションが 初 期 化 されたことを 示 すために 起 動 されます コンポーネントが 別 のコンポー ネントまたはアプリケーションに 含 まれる 場 合 は まず 内 部 のコンポーネントから 初 期 化 されます 表 示 中 に サーバコールが 実 行 された 場 合 は aura:waiting が 起 動 されます 最 後 に すべての 表 示 が 完 了 したこと を 示 すために aura:donewaiting が 起 動 されてから aura:donerendering が 起 動 されます 詳 細 は 表 示 ライフサイクル 中 に 起 動 されたイベント (ページ 96) を 参 照 してください 関 連 トピック: コンポーネントイベント クライアント 側 コントローラを 使 用 したイベントの 処 理 高 度 なイベントの 例 アプリケーションイベントの 例 以 下 に アプリケーションイベントを 使 用 して 別 のコンポーネントの 属 性 を 更 新 する 簡 単 な 使 用 事 例 を 示 し ます 1. ユーザがノーティファイアコンポーネント aenotifier.cmp のボタンをクリックします 2. aenotifier.cmp のクライアント 側 コントローラが コンポーネントイベントにメッセージを 設 定 し イ ベントを 起 動 します 3. ハンドラコンポーネント aehandler.cmp が 起 動 されたイベントを 処 理 します 4. aehandler.cmp のクライアント 側 コントローラが イベントで 送 信 されたデータに 基 づいて aehandler.cmp の 属 性 を 設 定 します この 例 のイベントおよびコンポーネントは docsample 名 前 空 間 にあります この 名 前 空 間 は 特 別 なもので はありませんが コードの 数 か 所 で 参 照 されます 必 要 に 応 じて 別 の 名 前 空 間 を 使 用 するようにコードを 変 更 します アプリケーションイベント aeevent.evt 85

92 イベント アプリケーションイベントの 例 次 のアプリケーションイベントには 属 性 が 1 つ 設 定 されています この 場 合 は 起 動 時 にこの 属 性 を 使 用 して イベントに 一 定 のデータを 渡 します <aura:event type="application"> <aura:attribute name="message" type="string"/> </aura:event> ノーティファイアコンポーネント aenotifier.cmp ノーティファイアコンポーネントは aura:registerevent を 使 用 して アプリケーションイベントを 起 動 す る 可 能 性 があることを 宣 言 します name 属 性 は 必 須 ですが アプリケーションイベントでは 使 用 されませ ん name 属 性 が 関 係 するのは コンポーネントイベントのみです コンポーネントのボタンには press ブラウザイベントがあり クライアント 側 コントローラの fireapplicationevent アクションに 結 び 付 けられています このボタンをクリックすると アクションが 呼 び 出 されます <aura:component> <aura:registerevent name="appevent" type="docsample:aeevent"/> <h1>simple Application Event Sample</h1> <p><ui:button label="click here to fire an application event" press="{!c.fireapplicationevent" /> </p> </aura:component> aenotifiercontroller.js クライアント 側 コントローラが $A.get("e.docsample:aeEvent") をコールして イベントのインスタン スを 取 得 します このコントローラがイベントの message 属 性 を 設 定 して イベントを 起 動 します { fireapplicationevent : function(cmp, event) { // Get the application event by using the // e.<namespace>.<event> syntax var appevent = $A.get("e.docsample:aeEvent"); appevent.setparams({ "message" : "An application event fired me. " + "It all happened so fast. Now, I'm everywhere!" ); appevent.fire(); ハンドラコンポーネント aehandler.cmp ハンドラコンポーネントは <aura:handler> タグを 使 用 して ハンドラコンポーネントがアプリケーショ ンイベントを 処 理 することを 登 録 します 86

93 イベント アプリケーションイベントの 例 イベントが 起 動 されると ハンドラコンポーネントのクライアント 側 コントローラで handleapplicationevent アクションが 呼 び 出 されます <aura:component> <aura:attribute name="messagefromevent" type="string"/> <aura:attribute name="numevents" type="integer" default="0"/> <aura:handler event="docsample:aeevent" action="{!c.handleapplicationevent"/> <p>{!v.messagefromevent</p> <p>number of events: {!v.numevents</p> </aura:component> aehandlercontroller.js コントローラがイベントで 送 信 されたデータを 取 得 し そのデータを 使 用 してハンドラコンポーネントの messagefromevent 属 性 を 更 新 します { handleapplicationevent : function(cmp, event) { var message = event.getparam("message"); // set the handler attributes based on event data cmp.set("v.messagefromevent", message); var numeventshandled = parseint(cmp.get("v.numevents")) + 1; cmp.set("v.numevents", numeventshandled); コンテナコンポーネント aecontainer.cmp コンテナコンポーネントには ノーティファイアコンポーネントとハンドラコンポーネントが 含 まれます こ の 点 は ハンドラにノーティファイアコンポーネントが 含 まれるコンポーネントイベントの 例 とは 異 なりま す <aura:component> <docsample:aenotifier/> <docsample:aehandler/> </aura:component> すべてをまとめる このコードをテストする 場 合 は リソースをサンプルアプリケーションに 追 加 して コンテナコンポーネント に 移 動 します たとえば docsample アプリケーションがある 場 合 は 次 のアドレスに 移 動 します (mysalesforceinstance は na1.salesforce.com など 組 織 をホストするインスタンスの 名 前 です) 87

94 イベント イベント 処 理 のライフサイクル サーバ 上 のデータにアクセスする 場 合 は この 例 を 拡 張 して ハンドラのクライアント 側 コントローラから サーバ 側 コントローラをコールします 関 連 トピック: アプリケーションイベント コントローラのサーバ 側 ロジックの 作 成 コンポーネントイベントの 例 イベント 処 理 のライフサイクル 次 のチャートは フレームワークによるイベントの 処 理 の 概 要 を 示 しています 88

95 イベント 高 度 なイベントの 例 1 イベントの 起 動 を 検 出 する フレームワークがイベントの 起 動 を 検 出 します たとえば ノーティファイアコンポーネントのボタンク リックでイベントがトリガされていることがあります 2 イベントタイプを 判 断 する 2.1 コンポーネントイベント イベントを 起 動 した 親 コンポーネントまたはコンテナコンポーネントのインスタンスが 特 定 されます こ のコンテナコンポーネントが 関 連 するすべてのイベントハンドラの 場 所 を 確 認 し さらなる 処 理 が 行 える ようにします 2.2 アプリケーションイベント どのコンポーネントにもこのイベントのイベントハンドラを 指 定 できます 関 連 するすべてのイベントハ ンドラの 場 所 が 確 認 されます 3 各 ハンドラを 実 行 する 3.1 コンポーネントイベントハンドラの 実 行 イベントのコンテナコンポーネントで 定 義 された 各 イベントハンドラが ハンドラコントローラによって 実 行 されます このときに 次 の 操 作 も 実 行 できます 属 性 を 設 定 する またはコンポーネント 上 のデータを 変 更 する (コンポーネントが 再 表 示 されます) 別 のイベントを 起 動 する またはクライアント 側 あるいはサーバ 側 のアクションを 呼 び 出 す 3.2 アプリケーションイベントハンドラの 実 行 すべてのイベントハンドラが 実 行 されます イベントハンドラが 実 行 されると イベントインスタンスが イベントハンドラに 渡 されます 4 コンポーネントを 再 表 示 する ( 省 略 可 能 ) イベント 処 理 中 にコンポーネントが 変 更 された 場 合 イベントハンドラおよびコールバックアクションの 実 行 後 に 自 動 的 に 再 表 示 することができます 関 連 トピック: DOM へのクライアント 側 表 示 高 度 なイベントの 例 次 の 例 は 比 較 的 簡 単 なコンポーネントイベントおよびアプリケーションイベントの 例 に 基 づいています コ ンポーネントイベントとアプリケーションイベントの 両 方 で 機 能 する 1 つのノーティファイアコンポーネン トと 1 つのハンドラコンポーネントを 使 用 します イベントに 結 び 付 けられたコンポーネントについて 説 明 す る 前 に 関 与 する 個 々のリソースを 見 ていきます 次 の 表 は この 例 で 使 用 する 各 種 リソースの 役 割 をまとめたものです これらのリソースのソースコードは 表 の 後 に 記 載 されています 89

96 イベント 高 度 なイベントの 例 リソース リソース 名 使 用 方 法 イベントファイル ノーティファイア ハンドラ コンポーネントイベント (compevent.evt) およびアプリケー ションイベント (appevent.evt) コンポーネント (eventsnotifier.cmp) およびそ のコントローラ (eventsnotifiercontroller.js) コンポーネント (eventshandler.cmp) およびその コントローラ (eventshandlercontroller.js) コンポーネントイベントとアプリケーション イベントを 別 々のリソースに 定 義 します eventscontainer.cmp に コンポーネン トイベントとアプリケーションイベントの 両 方 の 使 用 方 法 が 示 されます ノーティファイアには イベントを 開 始 する onclick ブラウザイベントが 含 まれます このコントローラはイベントを 起 動 します ハンドラコンポーネントには ノーティファ イアコンポーネント (またはアプリケーショ ンイベントの <aura:handler> タグ) が 含 ま れ イベントの 起 動 後 に 実 行 されるコント ローラアクションをコールします コンテナコンポーネント eventscontainer.cmp 完 全 デモの UI にイベントハンドラを 表 示 し ます コンポーネントイベントおよびアプリケーションイベントの 定 義 は 別 々の.evt リソースに 保 存 されますが ノーティファイアコンポーネントとハンドラコンポーネントの 個 別 のバンドルに どちらのイベントでも 機 能 するコードを 含 めることができます コンポーネントとアプリケーションのどちらのイベントにも イベントの 形 状 を 定 義 する context 属 性 が 含 まれます このデータがイベントのハンドラに 渡 されます コンポーネントイベント compevent.evt <aura:event type="component"> <!-- pass context of where the event was fired to the handler. --> <aura:attribute name="context" type="string"/> </aura:event> アプリケーションイベント appevent.evt <aura:event type="application"> <!-- pass context of where the event was fired to the handler. --> <aura:attribute name="context" type="string"/> </aura:event> 90

97 イベント 高 度 なイベントの 例 ノーティファイアコンポーネント eventsnotifier.cmp ノーティファイアコンポーネントには コンポーネントイベントまたはアプリケーションイベントを 開 始 する press ブラウザイベントが 含 まれます ノーティファイアコンポーネントは aura:registerevent タグを 使 用 して コンポーネントイベントおよび アプリケーションイベントを 起 動 する 可 能 性 があることを 宣 言 します name 属 性 は 必 須 ですが アプリケー ションイベントでは 空 のままにします parentname 属 性 はまだ 設 定 されていません 以 下 に この 属 性 がどのように 設 定 され eventscontainer.cmp に 表 示 されるのかを 示 します コンポーネントのソース <aura:component> <aura:attribute name="parentname" type="string"/> <aura:registerevent name="componenteventfired" type="auradocs:compevent"/> <aura:registerevent name="appevent" type="auradocs:appevent"/> <div> <h3>this is {!v.parentname's eventsnotifier.cmp instance</h3> <p><ui:button label="click here to fire a component event" press="{!c.firecomponentevent" /> </p> <p><ui:button label="click here to fire an application event" press="{!c.fireapplicationevent" /> </p> </div> </aura:component> CSS ソース.auradocsEventsNotifier { display: block; margin: 10px; padding: 10px; border: 1px solid black; クライアント 側 コントローラのソース このコントローラはイベントを 起 動 します { firecomponentevent : function(cmp, event) { var parentname = cmp.get("v.parentname"); // Look up event by name, not by type var compevents = cmp.getevent("componenteventfired"); compevents.setparams({ "context" : parentname ); compevents.fire(); 91

98 イベント 高 度 なイベントの 例, fireapplicationevent : function(cmp, event) { var parentname = cmp.get("v.parentname"); // note different syntax for getting application event var appevent = $A.get("e.auradocs:appEvent"); appevent.setparams({ "context" : parentname ); appevent.fire(); ボタンをクリックしてコンポーネントイベントやアプリケーションイベントを 起 動 することはできますが ま だハンドラコンポーネントをイベントに 結 び 付 けて 応 答 するようにしていないため 出 力 に 変 化 はありませ ん コントローラがイベントを 起 動 する 前 に コンポーネントイベントまたはアプリケーションイベントの context 属 性 をノーティファイアコンポーネントの parentname に 設 定 します ハンドラコンポーネントを 確 認 しな がら この 設 定 が 出 力 にどのように 影 響 するかについて 説 明 します ハンドラコンポーネント eventshandler.cmp ハンドラコンポーネントには ノーティファイアコンポーネントまたは <aura:handler> タグが 含 まれ イ ベントの 起 動 後 に 実 行 されるコントローラアクションをコールします コンポーネントのソース <aura:component> <aura:attribute name="name" type="string"/> <aura:attribute name="mostrecentevent" type="string" default="most recent event handled:"/> <aura:attribute name="numcomponenteventshandled" type="integer" default="0"/> <aura:attribute name="numapplicationeventshandled" type="integer" default="0"/> <aura:handler event="auradocs:appevent" action="{!c.handleapplicationeventfired"/> <div> <h3>this is {!v.name</h3> <p>{!v.mostrecentevent</p> <p># component events handled: {!v.numcomponenteventshandled</p> <p># application events handled: {!v.numapplicationeventshandled</p> <auradocs:eventsnotifier parentname="{!v.name" componenteventfired="{!c.handlecomponenteventfired"/> </div> </aura:component> CSS ソース.auradocsEventsHandler { display: block; margin: 10px; padding: 10px; 92

99 イベント 高 度 なイベントの 例 border: 1px solid black; クライアント 側 コントローラのソース { handlecomponenteventfired : function(cmp, event) { var context = event.getparam("context"); cmp.set("v.mostrecentevent", "Most recent event handled: COMPONENT event, from " + context);, var numcomponenteventshandled = parseint(cmp.get("v.numcomponenteventshandled")) + 1; cmp.set("v.numcomponenteventshandled", numcomponenteventshandled); handleapplicationeventfired : function(cmp, event) { var context = event.getparam("context"); cmp.set("v.mostrecentevent", "Most recent event handled: APPLICATION event, from " + context); var numapplicationeventshandled = parseint(cmp.get("v.numapplicationeventshandled")) + 1; cmp.set("v.numapplicationeventshandled", numapplicationeventshandled); name 属 性 はまだ 設 定 されていません 以 下 に この 属 性 がどのように 設 定 され eventscontainer.cmp に 表 示 されるのかを 示 します ボタンをクリックでき UI がイベントタイプを 示 すものに 変 更 されます クリック 数 が 1 つ 増 え コンポーネ ントイベントかアプリケーションイベントかを 示 します これで 終 了 ではありません イベントの context 属 性 が 設 定 されていないため イベントのソースが 未 定 義 です コンテナコンポーネント eventscontainer.cmp コンポーネントのソース <aura:component> <auradocs:eventshandler name="eventshandler1"/> <auradocs:eventshandler name="eventshandler2"/> </aura:component> コンテナコンポーネントには 2 つのハンドラコンポーネントが 含 まれます このコンテナコンポーネント は 両 方 のハンドラコンポーネントの name 属 性 を 設 定 します この 属 性 がパススルーされ ノーティファイ アコンポーネントの parentname 属 性 が 設 定 されます この 操 作 によって ノーティファイアコンポーネン トまたはハンドラコンポーネント 自 体 の 説 明 で 確 認 した UI テキストのギャップが 埋 められます いずれかのイベントハンドラの [Click here to fire a component event (コンポーネントイベントを 起 動 する 場 合 は ここをクリック)] をクリックします 処 理 されたコンポーネントイベント 数 のカウンタには 起 動 元 のコン ポーネントのハンドラのみが 通 知 されるため このコンポーネントのみのイベント 数 が 増 加 します 93

100 イベント 非 Lightning コードからの Lightning イベントの 起 動 いずれかのイベントハンドラの [Click here to fire an application event (アプリケーションイベントを 起 動 する 場 合 はここをクリック)]をクリックします 処 理 されたアプリケーションイベント 数 のカウンタには 処 理 してい るすべてのコンポーネントが 通 知 されるため 両 方 のコンポーネントのイベント 数 が 増 加 します 関 連 トピック: コンポーネントイベントの 例 アプリケーションイベントの 例 イベント 処 理 のライフサイクル 非 Lightning コードからの Lightning イベントの 起 動 Lightning イベントは Lightning アプリケーション 外 の JavaScript から 起 動 できます たとえば Lightning アプリ ケーションで 一 定 の 非 Lightning コードをコールし 終 了 後 にそのコードが Lightning アプリケーションと 通 信 す るようにする 必 要 のある 場 合 があります たとえば 別 のシステムにログインする 必 要 のある 外 部 コードをコールして 一 部 のデータをLightningアプリ ケーションに 返 すことができます このイベント mynamespace:externalevent をコールしてみましょう この JavaScript を 非 Lightning コードに 含 めて 非 Lightning コードの 終 了 時 にこのイベントを 起 動 します var myexternalevent; if(window.opener.$a && (myexternalevent = window.opener.$a.get("e.mynamespace:externalevent"))) { myexternalevent.setparams({isoauthed:true); myexternalevent.fire(); window.opener.$a.get() は Lightning アプリケーションが 読 み 込 まれているマスタウィンドウを 参 照 しま す 関 連 トピック: アプリケーションイベント 外 部 JavaScript からのコンポーネントの 変 更 イベントのベストプラクティス 以 下 にイベントを 使 用 する 場 合 のベストプラクティスをいくつか 示 します 低 レベルのイベントをビジネスロジックイベントと 区 別 する クリックなどの 低 レベルのイベントをイベントハンドラで 処 理 し approvalchange イベントやビジネスロ ジックイベントに 相 当 するものなどは 高 レベルのイベントとして 再 起 動 することをお 勧 めします 94

101 イベント イベントのアンチパターン コンポーネントの 状 態 に 基 づく 動 的 アクション コンポーネントの 状 態 に 応 じてクリックイベント 時 に 異 なるアクションを 呼 び 出 す 必 要 がある 場 合 は 次 のア プローチを 試 します 1. コンポーネントの 状 態 を New ( 新 規 ) や Pending ( 待 機 中 ) などの 非 連 続 値 としてコンポーネントの 属 性 に 保 存 します 2. クライアント 側 コントローラに 次 に 実 行 するアクションを 判 断 するロジックを 配 置 します 3. コンポーネントのバンドルでロジックを 再 利 用 する 必 要 がある 場 合 は ロジックをヘルパーに 配 置 します 次 に 例 を 示 します 1. コンポーネントのマークアップに <ui:button label="do something" press="{!c.click" /> が 含 まれる 2. コントローラで click 関 数 を 定 義 している この 関 数 は 適 切 なヘルパー 関 数 に 代 行 させますが 正 しい イベントを 起 動 する 可 能 性 もあります ディスパッチャコンポーネントを 使 用 したイベントのリスンおよび リレー イベントをリスンしているハンドラコンポーネントのインスタンスが 多 数 あるときは イベントをリスンする ディスパッチャコンポーネントを 指 定 したほうがよい 場 合 があります ディスパッチャコンポーネントは コ ンポーネントのどのインスタンスで 詳 細 情 報 を 受 け 取 るかを 判 断 する 一 定 のロジックを 実 行 し 別 のコンポー ネントイベントまたはアプリケーションイベントをこれらのコンポーネントのインスタンスで 起 動 することが できます 関 連 トピック: クライアント 側 コントローラを 使 用 したイベントの 処 理 イベントのアンチパターン イベントのアンチパターン イベントを 使 用 する 場 合 に 回 避 すべきいくつかのアンチパターンが 存 在 します レンダラでイベントを 起 動 しない レンダラでイベントを 起 動 すると 無 限 の 表 示 ループが 生 じることがあります 次 のようなコードは 記 述 しないでください afterrender: function(cmp, helper) { this.superafterrender(); $A.get("e.myns:mycmp").fire(); 95

102 イベント 表 示 ライフサイクル 中 に 起 動 されたイベント 代 わりに init フックを 使 用 して コンポーネントを 構 築 してから 表 示 するまでの 間 にコントローラのアク ションを 実 行 します コンポーネントに 次 のコードを 追 加 します <aura:handler name="init" value="{!this" action="{!c.doinit"/> 詳 細 は コンポーネントの 初 期 化 時 のアクションの 呼 び 出 し (ページ 120)を 参 照 してください onclick および ontouchend イベントを 使 用 しない コンポーネントの onclick イベントと ontouchend イベントに 異 なるアクションを 使 用 することはできませ ん フレームワークは タッチ/タップイベントをクリックに 変 換 し 存 在 する onclick ハンドラを 有 効 にし ます 関 連 トピック: DOM へのクライアント 側 表 示 イベントのベストプラクティス 表 示 ライフサイクル 中 に 起 動 されたイベント コンポーネントはそのライフサイクルの 間 にインスタンス 化 され 表 示 され さらに 再 表 示 されます コン ポーネントが 再 表 示 されるのは プログラムまたは 値 が 変 更 されて 再 表 示 が 必 要 になった 場 合 のみです たと えば ブラウザイベントがアクションをトリガしてデータが 更 新 された 場 合 などです コンポーネントのライフサイクルは クライアントが HTTP 要 求 をサーバに 送 信 し コンポーネント 設 定 デー タがクライアントに 返 されると 開 始 します 以 前 の 要 求 によってコンポーネント 定 義 がすでにクライアント 側 にあり コンポーネントにサーバとの 連 動 関 係 がない 場 合 は このサーバとの 往 復 のやりとりは 行 われませ ん クライアントの 表 示 ライフサイクルに 進 む 前 に コンポーネント 要 求 のサーバ 側 およびクライアント 側 処 理 に ついて 簡 単 に 理 解 しておくと 役 立 ちます フレームワークは インターフェース コントローラ アクション の 定 義 を 含 む コンポーネント 定 義 とそのすべての 連 動 関 係 をサーバに 作 成 します コンポーネントインスタ ンスが 作 成 されると 逐 次 化 されたコンポーネント 定 義 とインスタンスがクライアントに 送 信 されます 定 義 はキャッシュされますが インスタンスデータはキャッシュされません クライアントは 応 答 の 逐 次 化 を 解 除 して JavaScript オブジェクトまたは 対 応 付 けを 作 成 します その 結 果 コ ンポーネントインスタンスの 表 示 に 使 用 するインスタンスツリーが 作 成 されます クライアントはコンポーネ ントのバンドル 内 のカスタムレンダラを 検 索 するか デフォルトのレンダラメソッドを 使 用 します 次 の 図 は コンポーネント 定 義 とインスタンスの 逐 次 化 が 解 除 された 後 のクライアントでのコンポーネントの 典 型 的 な 表 示 ライフサイクルを 表 しています 96

103 イベント 表 示 ライフサイクル 中 に 起 動 されたイベント 1. init イベントは コンポーネントを 構 成 するコンポーネントサービスによって 起 動 され 初 期 化 が 完 了 し たこと 通 知 します <aura:handler name="init" value="{!this" action="{!.c.doinit"/> init ハンドラをカスタマイズして 独 自 のコントローラロジックを 追 加 できます 詳 細 は コンポーネン トの 初 期 化 時 のアクションの 呼 び 出 し (ページ 120) を 参 照 してください 2. render() がコールされて コンポーネントの 表 示 が 開 始 されます aura:component のレンダラには render() という 基 本 実 装 がありますが ユーザのコンポーネントはカスタムレンダラでこのメソッドを 上 書 きできます 詳 細 は DOM へのクライアント 側 表 示 (ページ 111) を 参 照 してください 3. afterrender() は これらのコンポーネント 定 義 のそれぞれについてコールされ 表 示 が 完 了 したこと を 通 知 します これにより フレームワークの 表 示 サービスが DOM 要 素 を 挿 入 した 後 DOM ツリーを 操 作 できます 4. クライアントがサーバ 要 求 XHR への 応 答 の 待 機 を 終 了 したことを 示 すために donewaiting イベントが 起 動 されます このイベントは クライアント 側 コントローラアクションに 結 び 付 けられたハンドラを 追 加 することで 処 理 できます 5. フレームワークは 再 表 示 が 必 要 なコンポーネントがあるかどうか 確 認 し 属 性 値 の 更 新 を 反 映 する 場 合 など 汚 れた ( 更 新 が 必 要 な) コンポーネントがあれば 再 表 示 します 最 後 に donerendering イベン トが 表 示 ライフサイクルの 終 了 時 に 起 動 されます ui:button コンポーネントがサーバから 返 されたときに 何 が 起 こるかと ボタンがクリックされてその 表 示 ラベルが 更 新 されたときに 行 われる 再 表 示 について 見 てみましょう <!-- The uiexamples:buttonexample container component --> <aura:component> <aura:attribute name="num" type="integer" default="0"/> <ui:button aura:id="button" label="{!v.num" press="{!c.update"/> </aura:component> /** Client-side Controller **/ ({ update : function(cmp, evt) { cmp.set("v.num", cmp.get("v.num")+1); ) 97

Lightning コンポーネント開発者ガイド

Lightning コンポーネント開発者ガイド Lightning コンポーネント開発 者ガイド バージョン 35.0, Winter 16 @salesforcedocs 最終更新日 : 2015/12/15 本書の英語版と翻訳版で相違がある場合は英語版を優先するものとします Copyright 2000 2015 salesforce.com, inc. All rights reserved. Salesforce およびその他の名称や商標は

More information

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

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

More information

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

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

More information

CEAS/Sakai 困ったときのヘルプ集20150401

CEAS/Sakai 困ったときのヘルプ集20150401 CEAS/Sakai 連 携 システム 困 ったときのヘルプ 集 (version 1.1) 2015.4.1. 本 書 では 問 い 合 わせ 口 に 寄 せられる 問 い 合 わせの 内 頻 度 の 高 い 物 を 中 心 にリスト アップし 主 な 対 処 法 をまとめて 掲 載 しています エラー 画 面 が 表 示 されたり 問 題 が 発 生 した 際 に 参 考 にしてください なお

More information

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

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

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-1 ステップアンケートとは ステップアンケートとは 1 画 面 につき1 質 問 を 表 示 する 段 階 式 アンケートのことです 本 機 能 では 運 用 中 の 既 存 会 員 に 対 するステップアンケートをより 簡 単 に 設 定 実 施

2. ステップアンケート 機 能 の 概 要 2-1 ステップアンケートとは ステップアンケートとは 1 画 面 につき1 質 問 を 表 示 する 段 階 式 アンケートのことです 本 機 能 では 運 用 中 の 既 存 会 員 に 対 するステップアンケートをより 簡 単 に 設 定 実 施 ステップアンケート 1. はじめに (1) 対 象 本 書 の 内 容 は スパイラル ( 以 下 本 サービス という ) をご 利 用 のユーザーを 対 象 としています (2) 本 書 の 目 的 本 書 では ユーザーが 本 サービスの ステップアンケート 機 能 を 理 解 し 適 切 な 設 定 が 行 えるようになること を 目 的 としています (3) 必 要 なシステム Internet

More information

28年オンライン調査システム操作説明書

28年オンライン調査システム操作説明書 平 成 28 年 科 学 技 術 研 究 調 査 オ ン ラ イ ン 調 査 シ ス テ ム 操 作 説 明 書 科 学 技 術 研 究 調 査 では 郵 送 に 加 えてオンライン 調 査 システムを 利 用 した インターネットによるご 回 答 も 可 能 となっています オンライン 調 査 システムの 利 用 には フリーソフトである AdobeReader の 所 定 バージョン 等 の 利

More information

教員用

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

More information

Microsoft Word - Developer_Tools

Microsoft Word - Developer_Tools Developer Tools : Windows Internet Explorer 8 Beta 1 for Developers Web 作 業 の 操 作 性 を 向 上 2008 年 3 月 詳 細 の 問 い 合 わせ 先 ( 報 道 関 係 者 専 用 ) : Rapid Response Team Waggener Edstrom Worldwide (503) 443 7070 rrt@waggeneredstrom.com

More information

Office 10 パッケージ版「画面の操作/個人設定」

Office 10 パッケージ版「画面の操作/個人設定」 Office 10 パッケージ 版 画 面 の 操 作 / 個 人 設 定 バージョン 10.1 Copyright (C) 2013-2014 Cybozu ログイン サイボウズ Officeにログインする 法 や ログアウトする 法 を 説 明 します ログインする 前 に サイボウズ Officeにログインする 前 に システム 管 理 者 から 連 絡 されたアクセスURLを お 使 いのWebブラウザーのお

More information

教員用

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

More information

目 次 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

PowerPoint Presentation

PowerPoint Presentation 登 録 を 受 け 付 けるWebフォームを 作 成 したい 1. 概 要 ホームページ 上 で 会 員 登 録 を 受 け 付 ける 登 録 フォームの 作 り 方 を 説 明 します 弊 社 のシステムを 利 用 すると 会 員 登 録 や 資 料 請 求 などの 登 録 フォームを 作 成 することが 可 能 です cgiプログラムを 組 む 必 要 はありません < フォーム 作 成 設 定

More information

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

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

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

ア ク セス 統 計 の 確 認 月 ごとのアクセス 数 を 確 認 する 1 ア クセス 統 計 画 面 を 表 示 し 確 認 する 月 を 選 択 しま アクセス 統 計 画 面 の 表 示 方 法 アクセス 統 計 画 面 を 表 示 する (P.70) 最 も 古 い 月 の 統 計 デー

ア ク セス 統 計 の 確 認 月 ごとのアクセス 数 を 確 認 する 1 ア クセス 統 計 画 面 を 表 示 し 確 認 する 月 を 選 択 しま アクセス 統 計 画 面 の 表 示 方 法 アクセス 統 計 画 面 を 表 示 する (P.70) 最 も 古 い 月 の 統 計 デー ア ク セス 統 計 の 確 認 ア ク セス 統 計 の 確 認 お 客 様 のホームページへアクセスされた 回 数 を 確 認 しま 統 計 データの 保 証 期 間 統 計 デー タの 保 証 期 間 は 1 年 (12ヶ 月 ) で ア ク セス 統 計 画 面 を 表 示 す る 1 管 理 者 メ ニ ューを 表 示 し ア クセス 統 計 をクリックしま 管 理 者 メニューの 表 示

More information

目 次 はじめに...... 4 1 2 3 3.1 アプリケーションのインストール...... 5 初 期 設 定......... 6 電 話 帳 を る......... 8 電 話 帳 の 種 類......... 8 3.1.1 社 内 電 話 帳......... 8 3.1.2 共 有

目 次 はじめに...... 4 1 2 3 3.1 アプリケーションのインストール...... 5 初 期 設 定......... 6 電 話 帳 を る......... 8 電 話 帳 の 種 類......... 8 3.1.1 社 内 電 話 帳......... 8 3.1.2 共 有 Web 電 話 帳 アプリ Android ユーザガイド 050 plus for Biz 4.1 版 平 成 28 年 6 月 20 日 NTT コミュニケーションズ 株 式 会 社 目 次 はじめに...... 4 1 2 3 3.1 アプリケーションのインストール...... 5 初 期 設 定......... 6 電 話 帳 を る......... 8 電 話 帳 の 種 類.........

More information

Parallels Remote Application Server

Parallels Remote Application Server Parallels Remote Application Server Chrome 用 Parallels Client ユーザーガイド v15 Copyright 1999-2016 Parallels IP Holdings GmbH and its affiliates.all rights reserved. Parallels IP Holdings GmbH Vordergasse 59

More information

高知大学 学生用

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

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

送信アイコン操作ガイド

送信アイコン操作ガイド 送 信 アイコン 操 作 ガイド 日 本 ワムネット 株 式 会 社 技 術 部 2016 年 6 月 第 2.12 版 1 目 次 1 はじめに... 3 2 インストール... 4 Windows でのインストール 方 法... 5 MacOS X でのインストール 方 法... 6 3 アンインストール... 8 Windows でのアンインストール 方 法... 8 MacOS X でのアンインストール

More information

スライド 1

スライド 1 Dynamo Inventory Manager. 使 い 方 ガイド 本 社 ご 担 当 者 様 向 け Release :009/0/ Copyright 008-009, DYNAMO CO.,LTD. All Rights Reserved. INDEX はじめに-----------------------------------------------------------------------------------------------

More information

迷惑メールフィルタリングコントロールパネル利用者マニュアル

迷惑メールフィルタリングコントロールパネル利用者マニュアル 迷 惑 メールフィルタリングサービス コントロールパネル 利 用 者 マニュアル( 一 般 ユーザ 向 け) 第 1.6 版 目 次 1. 本 マニュアルについて... 1 2. はじめに... 1 3. 使 用 方 法... 2 3.1. ご 使 用 の 前 に... 2 3.2. ログイン / ログアウト 操 作... 2 3.2.1. ログイン 操 作... 2 3.2.2. ログアウト 操

More information

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

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

More information

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

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

More information

ToolTip for ASP.NET Web Forms

ToolTip for ASP.NET Web Forms 2015.05.20 更 新 グレープシティ 株 式 会 社 目 次 製 品 の 概 要 2 ComponentOne Studio for ASP.NET Web Forms のヘルプ 2 主 な 特 長 3 クイックスタート 4 手 順 1:アプリケーションの 作 成 4 手 順 2:C1ToolTip の 作 成 とコントロールへの 割 り 当 て 4 手 順 3:コントロールのカスタマイズ

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

後 述 の Force.com( 機 能 説 明 ) に 機 能 の 補 足 説 明 を 記 載 してあります ユーザインターフェイスか らのApexの 削 除 と 編 集 (トライアル 組 織 ) (トライアル 組 織 ) 実 行 されるスクリプトの 最 大 行 数 200,000 200,000

後 述 の Force.com( 機 能 説 明 ) に 機 能 の 補 足 説 明 を 記 載 してあります ユーザインターフェイスか らのApexの 削 除 と 編 集 (トライアル 組 織 ) (トライアル 組 織 ) 実 行 されるスクリプトの 最 大 行 数 200,000 200,000 後 述 の Force.com( 機 能 説 明 ) に 機 能 の 補 足 説 明 を 記 載 してあります 月 額 無 料 (0 円 ) 1,500 円 ( 月 額 1,575 円 ) 6,000 円 ( 月 額 6,300 円 ) 3,000 円 ( 月 額 3,150 円 ) 9,000 円 ( 月 額 9,450 円 ) 最 大 使 用 ユーザ 数 100ユーザ 上 限 なし 上 限 なし

More information

Excel 2010 の 使 用 を 開 始 する 長 い 間 Microsoft Excel 2003 を 使 用 していたユーザーが Excel 2010 に 移 行 する と Excel 2003 のコマンドやツール バー ボタンがどこにあるのかわからなくなることがよ くあります そのため ト

Excel 2010 の 使 用 を 開 始 する 長 い 間 Microsoft Excel 2003 を 使 用 していたユーザーが Excel 2010 に 移 行 する と Excel 2003 のコマンドやツール バー ボタンがどこにあるのかわからなくなることがよ くあります そのため ト このガイドの 内 容 Microsoft Excel 2010 の 外 観 は Excel 2003 と 大 きく 異 なるため Excel 2003 のユーザーが 少 しでも 早 く 慣 れることができるようにこのガイドが 作 られました このガイドを 読 むと 新 しいインターフェイスの 主 な 要 素 について 学 んだり Excel 2010 の 無 償 のトレーニングを 見 つけたり *

More information

メール 受 信 画 面 のレイアウトを 変 更 することができます ここでは 初 期 設 定 のレイアウトで 表 示 されているボタ ンやマークについて 解 説 します メール 一 覧 画 面 には 受 信 したメールが 一 覧 表 示 されます メール 受 信 タブをクリックすると 受 信 箱 フ

メール 受 信 画 面 のレイアウトを 変 更 することができます ここでは 初 期 設 定 のレイアウトで 表 示 されているボタ ンやマークについて 解 説 します メール 一 覧 画 面 には 受 信 したメールが 一 覧 表 示 されます メール 受 信 タブをクリックすると 受 信 箱 フ .3 1...3 メール 受 信 タブのサブメニューから 直 接 受 信 箱 以 外 のフォルダを 表 示 することもできます 共 有 メー ルボックスのフォルダは 指 定 できません 3. 35 メール 受 信 画 面 のレイアウトを 変 更 することができます ここでは 初 期 設 定 のレイアウトで 表 示 されているボタ ンやマークについて 解 説 します メール 一 覧 画 面 には 受

More information

F-Secure Anti-Virus for Mac 2014

F-Secure Anti-Virus for Mac 2014 F-Secure Anti-Virus for Mac 2014 目 次 2 目 次 第 1 章 : 製 品 を 使 用 するには...3 1.1 インストールした 後 に...4 1.1.1 ライセンスの 管 理...4 1.1.2 本 製 品 を 起 動 する...4 1.2 コンピュータの 保 護 状 況 を 確 認 するには...4 1.2.1 全 体 の 保 護 ステータスを 表 示 する...4

More information

Web10.pptx

Web10.pptx 情 報 処 理 技 法 (マルチメディア)I 1 第 10 回 CSS 基 礎 (2) 2 HTML5 コンテンツモデル 3 コンテンツモデル HTML5 のタグは 7つのカテゴリに 分 けられるコン テンツモデルを 採 用 している コンテンツモデルから 要 素 の 中 に 何 を 含 んでよい かが 決 定 される 参 考 W3C: HTML5 content models http://www.w3.org/tr/2011/wd-html5-20110525/content-models.html

More information

スライド 1

スライド 1 SkyVisualEditorオンラインセミナー ~ 第 5 回 基 本 編 ~ Salesforceで 見 積 作 成 画 面 を 作 成 しよう 2014 年 9 月 16 日 ( 火 ) はじめに 本 セミナーの 目 的 SkyVisualEditorの 機 能 および 設 定 方 法 の 紹 介 を 目 的 としています 本 日 のセミナーのご 対 象 者 Salesforceで 見 積 画

More information

目 次 1. 会 員 登 録... 3 1.1 推 奨 動 作 環 境... 3 1.1.1 サイト 閲 覧 環 境... 3 1.1.2 シミュレーション 動 作 環 境... 3 1.1.3 各 種 設 定 について... 4 1.2 メールアドレスおよびニックネームの 登 録... 9 1.2

目 次 1. 会 員 登 録... 3 1.1 推 奨 動 作 環 境... 3 1.1.1 サイト 閲 覧 環 境... 3 1.1.2 シミュレーション 動 作 環 境... 3 1.1.3 各 種 設 定 について... 4 1.2 メールアドレスおよびニックネームの 登 録... 9 1.2 OSE 先 物 オプション シミュレーター 会 員 登 録 株 式 会 社 シンプレクス インスティテュート 更 新 日 :2015 年 4 月 30 日 目 次 1. 会 員 登 録... 3 1.1 推 奨 動 作 環 境... 3 1.1.1 サイト 閲 覧 環 境... 3 1.1.2 シミュレーション 動 作 環 境... 3 1.1.3 各 種 設 定 について... 4 1.2 メールアドレスおよびニックネームの

More information

目 次 1. Monaca Localkitとは 1.1. 概 要 1.2. 動 作 環 境 2. セットアップ 2.1. Monaca Localkitの 入 手 方 法 2.2. Monaca Localkitのインストール 2.3. ファイアウォール 設 定 (windows8.1) 2.4.

目 次 1. Monaca Localkitとは 1.1. 概 要 1.2. 動 作 環 境 2. セットアップ 2.1. Monaca Localkitの 入 手 方 法 2.2. Monaca Localkitのインストール 2.3. ファイアウォール 設 定 (windows8.1) 2.4. Monaca Localkit β 版 利 用 マニュアル Copyright 2014 Asial Corporation. All rights reserved. 1 目 次 1. Monaca Localkitとは 1.1. 概 要 1.2. 動 作 環 境 2. セットアップ 2.1. Monaca Localkitの 入 手 方 法 2.2. Monaca Localkitのインストール

More information



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

More information

SciFinder エラーへの対処法

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

More information

目 次 1 ログインする 1 2 研 修 情 報 を 登 録 する 2 step1 登 録 フォームに 入 力 する 2 step2 プレビューで 入 力 内 容 を 確 認 する 18 step3 下 書 き 保 存 する 20 step4 登 録 する 21 step5 管 理 者 による 承

目 次 1 ログインする 1 2 研 修 情 報 を 登 録 する 2 step1 登 録 フォームに 入 力 する 2 step2 プレビューで 入 力 内 容 を 確 認 する 18 step3 下 書 き 保 存 する 20 step4 登 録 する 21 step5 管 理 者 による 承 京 都 市 社 会 福 祉 研 修 情 報 システム 京 福 祉 の 研 修 情 報 ネット 操 作 マニュアル - 主 催 者 編 - 第 1.3 版 2016 年 5 月 16 日 目 次 1 ログインする 1 2 研 修 情 報 を 登 録 する 2 step1 登 録 フォームに 入 力 する 2 step2 プレビューで 入 力 内 容 を 確 認 する 18 step3 下 書 き 保

More information

目 次 1. ログインについて... 3 1-1 パスワードを 忘 れました どうしたらいいでしょう?... 3 1-2 パスワードを 変 更 したいのですが... 4 1-3 アカウントを 変 更 したいのですが... 4 1-4 個 人 情 報 は 入 力 しなくてはいけませんか?... 5 2

目 次 1. ログインについて... 3 1-1 パスワードを 忘 れました どうしたらいいでしょう?... 3 1-2 パスワードを 変 更 したいのですが... 4 1-3 アカウントを 変 更 したいのですが... 4 1-4 個 人 情 報 は 入 力 しなくてはいけませんか?... 5 2 イーデスク3 利 用 マニュアル1 ログイン する http://edesk.jp/ イーデスク3 利 用 環 境 パソコンで 利 用 する 場 合 OS Microsoft Windows 2000, XP, Vista Mac OS 10.1.x, 10.2.x 以 降 ブラウザ Microsoft Windows の 場 合 Microsoft Internet Explorer 5.5 SP2

More information

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

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

More information

JavaScript演習

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

More information

Meet-Me Number/Pattern の 設定

Meet-Me Number/Pattern  の 設定 45 CHAPTER Meet-Me Number/Pattern の 設 定 Meet-Me 会 議 では 電 話 番 号 の 割 り 当 てが 必 要 です Cisco CallManager Administration は ユーザがこの 機 能 を 利 用 できるように 一 連 の Meet-Me 会 議 電 話 番 号 をユーザに 通 知 しておく 必 要 があります ここでは 次 の 内

More information

サポート技術方法

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

More information

SCTM12.0_Product Release Notice_V1

SCTM12.0_Product Release Notice_V1 製 品 リリース 案 内 製 品 名 : SilkCentral Test Manager 12.0 出 荷 開 始 日 : 2012 年 4 月 16 日 1. はじめに マイクロフォーカスは テスト 管 理 ツールの 新 バージョンである SilkCentral Test Manager 12.0 をリリー スいたします 2. システム 要 件 SilkCentral Test Manger 12.0

More information

スライド 1

スライド 1 SkyVisualEditorオンラインセミナー ~ 第 3 回 基 本 編 ~ Salesforceでワークフローの 申 請 画 面 を 作 成 しよう 2014 年 7 月 15 日 ( 火 ) はじめに 本 セミナーの 目 的 SkyVisualEditorの 機 能 および 設 定 方 法 の 紹 介 を 目 的 としています 本 日 のセミナーのご 対 象 者 Salesforceで 既

More information

クーポン販売かんたんインストールガイド

クーポン販売かんたんインストールガイド インストールガイド 目 次 セットアップの 流 れ... 3 シリアル 番 号 の 登 録... 4 M2Plus 会 員 に 登 録 していない 方... 4 すでに M2Plus 会 員 の 方... 6 M2Plus Launcher のダウンロード... 7 ipod touch/iphone/ipad から 直 接 ダウンロードする 場 合... 7 コンピュータからダウンロードする 場

More information

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

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

More information

32bit または 64bit アーキテクチャに 対 応 快 適 な 操 作 性 を 得 るために 高 性 能 CPU を 推 奨 します HDD 容 量 は 約 1GB 以 上 1GB 以 上 にはコンテンツ 領 域 は 含 まれません またコンテンツの 増 大 に 比 例 してシステム 領 域

32bit または 64bit アーキテクチャに 対 応 快 適 な 操 作 性 を 得 るために 高 性 能 CPU を 推 奨 します HDD 容 量 は 約 1GB 以 上 1GB 以 上 にはコンテンツ 領 域 は 含 まれません またコンテンツの 増 大 に 比 例 してシステム 領 域 CMSKIT Ver.2.3 動 作 環 境 2015 年 10 月 20 日 株 式 会 社 ノア 本 書 は CMSKIT Ver.2.3 をサーバーに 導 入 して 実 行 させるとき お 客 様 にご 用 意 いただく 動 作 環 境 を 示 しています 動 作 環 境 とは 株 式 会 社 ノアが CMSKIT Ver.2.3 の 正 常 動 作 を 確 認 した 環 境 をいいます 本

More information

目 次 ログインする 前 に... 4 メンバー 管 理 編 ( 管 理 者 )... 5 ログインする... 6 トップページについて... 7 メンバー 管 理 をする... 8 メンバー 管 理 画 面 について... 8 1 医 療 機 関 指 定... 9 2 新 規 追 加 指 定...

目 次 ログインする 前 に... 4 メンバー 管 理 編 ( 管 理 者 )... 5 ログインする... 6 トップページについて... 7 メンバー 管 理 をする... 8 メンバー 管 理 画 面 について... 8 1 医 療 機 関 指 定... 9 2 新 規 追 加 指 定... 取 扱 説 明 書 心 電 クラウド ブラウザ 編 Ver.1.6C 目 次 ログインする 前 に... 4 メンバー 管 理 編 ( 管 理 者 )... 5 ログインする... 6 トップページについて... 7 メンバー 管 理 をする... 8 メンバー 管 理 画 面 について... 8 1 医 療 機 関 指 定... 9 2 新 規 追 加 指 定... 9 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

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

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

More information

<『みずほ e-ビジネスサイト』操作マニュアル>

<『みずほ e-ビジネスサイト』操作マニュアル> みずほ e-ビジネスサイト 操 作 マニュアル 個 人 住 民 税 一 括 納 付 編 Copyright 2016 Mizuho Bank, Ltd. この 操 作 マニュアルについて 表 記 について このマニュアルでは 操 作 方 法 を 説 明 するために 以 下 の 表 記 を 使 用 しています メニュー 名 アイコン 名 ボタン 名 項 目 名 は[ ]で 囲 んでいます ( 例 )[OK]ボタンをクリックしてください

More information

Untitled

Untitled VPN 接 続 の 設 定 AnyConnect 設 定 の 概 要, 1 ページ AnyConnect 接 続 エントリについて, 2 ページ ハイパーリンクによる 接 続 エントリの 追 加, 2 ページ 手 動 での 接 続 エントリの 追 加, 3 ページ ユーザ 証 明 書 について, 4 ページ ハイパーリンクによる 証 明 書 のインポート, 5 ページ 手 動 での 証 明 書 のインポート,

More information

ユーザーガイド

ユーザーガイド 印 刷 の 管 理 バージョン 1.1 ユーザーガイド 2016 年 7 月 www.lexmark.com 内 容 2 内 容 変 更 履 歴... 3 概 要... 4 アプリケーションを 使 用 する... 5 アプリケーションへのアクセス... 5 アプリケーションを 管 理 する... 5 問 題 に 対 処 する... 7 アプリケーションが 適 切 にロードできない...7 アプリケーションにログインできない...

More information

Exchange Online OWAユーザー操作マニュアル

Exchange Online OWAユーザー操作マニュアル 大 阪 工 業 大 学 Exchange Online OWA ユーザー 操 作 マニュアル [Office365] 2014 年 6 月 9 日 [2.0 版 ] 目 次 1 利 用 上 の 制 約 事 項... 3 1.1 推 奨 ブラウザ... 3 1.2 送 受 信 メールサイズ 制 限... 3 1.3 メールボックス 利 用 制 限... 3 1.4 ブロックされるファイル 拡 張 子...

More information

改 版 履 歴 版 発 行 年 月 日 改 版 内 容 作 成 者 1.0 2014/04/15 初 版 ビッグローブ - 2 -

改 版 履 歴 版 発 行 年 月 日 改 版 内 容 作 成 者 1.0 2014/04/15 初 版 ビッグローブ - 2 - BIGLOBE クラウドストレージ ios アプリ 操 作 マニュアル 2014 年 4 月 15 日 ビッグローブ 株 式 会 社 - 1 - 改 版 履 歴 版 発 行 年 月 日 改 版 内 容 作 成 者 1.0 2014/04/15 初 版 ビッグローブ - 2 - 目 次 目 次... 3 はじめに... 4 1. ログイン... 5 1.1 新 規 ログイン( 初 めて ios アプリをご

More information

1.ログインするためのパソコンの 設 定 (USBトークンの 設 定 ) Internet Explorer(IE)の 場 合 方 法 1 情 報 バーからアドオン(ActiveXコントロール)をインストールする 画 面 はIE8です またIEのバージョンにより 操 作 方 法 画 面 や 表 示

1.ログインするためのパソコンの 設 定 (USBトークンの 設 定 ) Internet Explorer(IE)の 場 合 方 法 1 情 報 バーからアドオン(ActiveXコントロール)をインストールする 画 面 はIE8です またIEのバージョンにより 操 作 方 法 画 面 や 表 示 Web4BA vol.3 Web 建 設 物 価 初 期 設 定 方 法 (ご 利 用 の 手 引 き) Web 建 設 物 価 を 初 めてご 利 用 になる 場 合 には 次 の2つの 設 定 と 登 録 が 必 要 です 1 パソコンの 設 定 USBトークンを 認 識 させるためのソフトウェアをインストールします ご 利 用 になるパソコン1 台 ごとに 設 定 が 必 要 です 設 定 できるパソコンの

More information

1 本 書 の 目 的 及 び 用 語 1.1 本 書 は Tap Style Cloud 利 用 約 款 ( 以 下 本 利 用 約 款 という )に 規 定 される サービスの 詳 細 を 定 めるものです なお 本 書 に 使 用 される 用 語 は 以 下 の 1.1 用 語 集 での 記

1 本 書 の 目 的 及 び 用 語 1.1 本 書 は Tap Style Cloud 利 用 約 款 ( 以 下 本 利 用 約 款 という )に 規 定 される サービスの 詳 細 を 定 めるものです なお 本 書 に 使 用 される 用 語 は 以 下 の 1.1 用 語 集 での 記 Tap Style Cloud サービス 仕 様 書 Ver2.0.0 大 日 本 印 刷 株 式 会 社 1 本 書 の 目 的 及 び 用 語 1.1 本 書 は Tap Style Cloud 利 用 約 款 ( 以 下 本 利 用 約 款 という )に 規 定 される サービスの 詳 細 を 定 めるものです なお 本 書 に 使 用 される 用 語 は 以 下 の 1.1 用 語 集 での

More information

1-2 PDF ファイルの 編 集 テキストを 追 加 画 像 を 追 加 リンクを 追 加 コメントの 追 加 図 形 標 記 の 追 加 注 釈 の 非 表 示 PDF ページの 処 理 PDF ファイルに 透 かしを 追 加 PDF ファイルの 背 景 の 編 集 ベイツ 番 号 の 編 集

1-2 PDF ファイルの 編 集 テキストを 追 加 画 像 を 追 加 リンクを 追 加 コメントの 追 加 図 形 標 記 の 追 加 注 釈 の 非 表 示 PDF ページの 処 理 PDF ファイルに 透 かしを 追 加 PDF ファイルの 背 景 の 編 集 ベイツ 番 号 の 編 集 スーパーPDF 変 換 編 集 作 成 (Windows 版 ) 製 品 ガイド ご 登 録 に 関 する 注 意 事 項 : 登 録 メールのメールアドや 登 録 コードなどの 情 報 をコピー&ペーストする 際 には スペースがないことをご 確 認 お 願 いいたします ほかご 登 録 時 に 何 かご 問 題 がありましたら 弊 社 サポートセンター http://www.wondershare.jp/ask-a-question.html

More information

1. はじめに 独 立 行 政 法 人 日 本 学 術 振 興 会 科 研 費 電 子 申 請 システム( 以 下 電 子 申 請 システム という ) は 申 請 者 申 請 者 の 所 属 研 究 機 関 担 当 者 ( 以 下 所 属 研 究 機 関 担 当 者 という ) と 日 本 学 術

1. はじめに 独 立 行 政 法 人 日 本 学 術 振 興 会 科 研 費 電 子 申 請 システム( 以 下 電 子 申 請 システム という ) は 申 請 者 申 請 者 の 所 属 研 究 機 関 担 当 者 ( 以 下 所 属 研 究 機 関 担 当 者 という ) と 日 本 学 術 独 立 行 政 法 人 日 本 学 術 振 興 会 科 研 費 電 子 申 請 システム 研 究 者 向 け 操 作 手 引 ( 一 部 基 金 ) ( 交 付 内 定 時 決 定 後 用 ) 第 2.3 版 1. はじめに 独 立 行 政 法 人 日 本 学 術 振 興 会 科 研 費 電 子 申 請 システム( 以 下 電 子 申 請 システム という ) は 申 請 者 申 請 者 の 所 属

More information

主催者または特権ユーザー・講演者マニュアル

主催者または特権ユーザー・講演者マニュアル -Web 会 議 のスタンダード- MeetingPlaza Version 8.0 (ミーティングプラザ Version 8.0) リファレンスマニュアル 補 足 主 催 者 または 特 権 ユーザー 講 演 者 マニュアル (ASP サービス システム 販 売 共 通 ) NTTアイティ 株 式 会 社 2016 年 03 月 MeetingPlaza は NTTアイティ 株 式 会 社 の 登

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション WiLL Mail トライアルアカウント 用 簡 易 マニュアル 1 メールを 配 信 する(シンプルDB 編 ) 1.データベースを 設 定 する 2.メールを 作 成 する 1 新 規 メールを 作 成 する 2 配 信 対 象 設 定 をする 3 基 本 設 定 をする 4コンテンツを 編 集 する 5 設 定 内 容 を 確 認 する 6 配 信 を 行 う p3,4 p5 p6,7 p8,9

More information

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

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

More information

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

SciFinder (Web 版) エラーへの対処法 SciFinder (Web 版 ) のエラーへの 対 処 法 2013 年 6 月 27 日 改 訂 SciFinder (Web 版 )でエラーが 起 きた 場 合 は,まずはご 利 用 環 境 が 推 奨 環 境 下 にあるかどうかをご 確 認 ください. http://www.jaici.or.jp/sci/scifinder/require.html 特 に Java は 最 新 バージョンの

More information

システム設計書

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

More information

2. 更 新 内 容 下 記 機 能 改 善 仕 様 変 更 不 具 合 対 応 を 行 いました 動 作 環 境 の 追 加 3.1. 受 講 者 / 管 理 者 クライアントの 動 作 環 境 に 下 記 の OS と Web ブラウザを 追 加 しました Windows 10 Microsof

2. 更 新 内 容 下 記 機 能 改 善 仕 様 変 更 不 具 合 対 応 を 行 いました 動 作 環 境 の 追 加 3.1. 受 講 者 / 管 理 者 クライアントの 動 作 環 境 に 下 記 の OS と Web ブラウザを 追 加 しました Windows 10 Microsof 2015 年 10 月 23 日 株 式 会 社 デジタル ナレッジ KnowledgeDeliver 6.1 リリースノート 日 頃 は 弊 社 KnowledgeDeliver / KnowledgeClassroom をご 愛 顧 いただき 誠 にありがとうございます 本 ドキュメントでは KnowledgeDeliver の 最 新 バージョン 6.1 と KnowledgeClassroom

More information

CTI サーバの概要

CTI サーバの概要 CHAPTER 1 この 章 では を 示 します CTI サーバの 次 の 項 目 について 説 明 します CTI サーバの 動 作 方 法 CTI サーバの 可 能 な 構 成 CTI サーバのメッセージ セット CTI サーバの 動 作 方 法 CTI サーバは Unified CCE と CTI クライアント アプリケーションをつなぐインターフェイスを 提 供 します CTI サーバは コール

More information

FOCUSシステムへのSSL-VPNによるログイン手順

FOCUSシステムへのSSL-VPNによるログイン手順 FOCUS システム SSL-VPN 利 用 者 マニュアル 第 1.05 版 (2013 年 1 月 版 ) SSL-VPN を 利 用 する 際 の 動 作 環 境 - 1 - ( 第 1.05 版 ) FOCUS システムへの SSL-VPN 接 続 では Java によるポートフォワーディング 方 式 を 用 いて FOCUS 内 のサーバと 接 続 します その 際 に 使 用 する 利

More information

Google Chrome OS 用 Cisco AnyConnect セキュアモビリティクラ

Google Chrome OS 用 Cisco AnyConnect セキュアモビリティクラ Google Chrome OS 用 Cisco AnyConnect セキュア モビリティ クラ イアント ユーザ ガイド(リリース 4.0.x) AnyConnect ユーザ ガイド 2 AnyConnect の 概 要 2 Google Chrome OS でサポートされるデバイス 2 Google Chrome OS への AnyConnect のインストールまたはアップグレード 3 Google

More information

- 目 次 - 第 章 システムの 概 要.... ポータルサイトとは.... 2 利 用 環 境 とブラウザ 操 作 時 の 留 意 事 項.... 3 添 付 ファイル 登 録 時 の 留 意 事 項... 2 第 2 章 基 本 操 作... 3 2. ログインとログアウト... 3 2. 2

- 目 次 - 第 章 システムの 概 要.... ポータルサイトとは.... 2 利 用 環 境 とブラウザ 操 作 時 の 留 意 事 項.... 3 添 付 ファイル 登 録 時 の 留 意 事 項... 2 第 2 章 基 本 操 作... 3 2. ログインとログアウト... 3 2. 2 操 作 マニュアル 学 生 編 - (204 年 3 月 ) - 目 次 - 第 章 システムの 概 要.... ポータルサイトとは.... 2 利 用 環 境 とブラウザ 操 作 時 の 留 意 事 項.... 3 添 付 ファイル 登 録 時 の 留 意 事 項... 2 第 2 章 基 本 操 作... 3 2. ログインとログアウト... 3 2. 2 ポータル 画 面 の 構 成... 4

More information

内 容 @fukuoka-u.ac.jp へアクセスする... 1 A.fu ポータルからアクセスする 方 法... 1 B. 総 合 情 報 処 理 センターの Web サイトからアクセスする 方 法... 1 C.URL を 直 接 入 力 してアクセスする 方 法... 1 @fukuoka-

内 容 @fukuoka-u.ac.jp へアクセスする... 1 A.fu ポータルからアクセスする 方 法... 1 B. 総 合 情 報 処 理 センターの Web サイトからアクセスする 方 法... 1 C.URL を 直 接 入 力 してアクセスする 方 法... 1 @fukuoka- 教 職 員 用 メール マニュアル 2013/07/01 総 合 情 報 処 理 センター 内 容 @fukuoka-u.ac.jp へアクセスする... 1 A.fu ポータルからアクセスする 方 法... 1 B. 総 合 情 報 処 理 センターの Web サイトからアクセスする 方 法... 1 C.URL を 直 接 入 力 してアクセスする 方 法... 1 @fukuoka-u.ac.jp

More information

Microsoft Word - Active.doc

Microsoft Word - Active.doc 利 マニュアル 梅 校 メールサーバをご 利 されていた 教 員 の 皆 さまへ 2009 年 1 7 のメールサーバ 移 に 伴 い 学 外 からの 電 メールの 送 受 信 はウェブメール(Active!mail) からのみ 可 能 となりました Active!mail の 利 法 については 本 マニュアルをご 確 認 ください 次 Active!mail にログインする...2 Active!mail

More information

HTML5 Builder First Step Guide

HTML5 Builder First Step Guide HTML5 Builder ファーストステップガイド 1 目 次 1.はじめに...3 2.HTML5 Builder IDE 画 面 について...4 3.IDE のデザイン 画 面 について...9 4.サーバー Web アプリケーション "Hello World"... 11 4-1.アプリケーションの 新 規 作 成... 11 4-2.コントロールの 追 加... 13 4-3.ボタン クリックに

More information

目 次 1.はじめに 1 1.クライアント 環 境 1 2. 初 期 設 定 1 1.システムログイン 1 3.プロジェクト データの 管 理 4 1.プロジェクトの 新 規 作 成 4 2.ファイルのアップロード 5 3.ファイルのダウンロード 6 4.タスク 8 1.タスクの 設 定 8 2.オ

目 次 1.はじめに 1 1.クライアント 環 境 1 2. 初 期 設 定 1 1.システムログイン 1 3.プロジェクト データの 管 理 4 1.プロジェクトの 新 規 作 成 4 2.ファイルのアップロード 5 3.ファイルのダウンロード 6 4.タスク 8 1.タスクの 設 定 8 2.オ InSite Creative Workflow Version 4.1 操 作 ガイド 目 次 1.はじめに 1 1.クライアント 環 境 1 2. 初 期 設 定 1 1.システムログイン 1 3.プロジェクト データの 管 理 4 1.プロジェクトの 新 規 作 成 4 2.ファイルのアップロード 5 3.ファイルのダウンロード 6 4.タスク 8 1.タスクの 設 定 8 2.オートタスクの

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 操 作 マニュアル( 事 業 者 編 ) 平 成 23 年 1 月 1 SHIFTで 作 成 されるホームページ: 構 成 SHIFT 作 成 メニュー HP 完 成 イメージ 登 録 画 面 への 入 り 方 (コミュニティ 利 用 の 場 合 ) 商 工 会 HP(イメージ) ログイン 画 面 1. 都 道 府 県 ID パスワードを 入 力 して OK をクリックします コミュニティTOP 画

More information

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

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

More information

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

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

More information

Microsoft Word - 16Webサイトマニュアル1202.doc

Microsoft Word - 16Webサイトマニュアル1202.doc ウェブサイト 登 録 マニュアル ~ 出 展 者 マイページの 利 用 について~ 2015 年 12 月 2 日 日 本 経 済 新 聞 社 日 経 メッセ 街 づくり 店 づくり 総 合 展 ウェブサイト 事 務 局 TEL: 050-3734-5939 E-mail: office@shopbiz.jp ( 受 付 時 間 : 土 日 祝

More information

Microsoft Corporation のガイドラインに 従 って 画 面 写 真 を 使 用 しています Microsoft Windows Windows Vista は 米 国 Microsoft Corporation の 米 国 及 びその 他 の 国 における 登 録 商 標 又 は

Microsoft Corporation のガイドラインに 従 って 画 面 写 真 を 使 用 しています Microsoft Windows Windows Vista は 米 国 Microsoft Corporation の 米 国 及 びその 他 の 国 における 登 録 商 標 又 は 書 類 閲 覧 用 端 末 要 件 平 成 28 年 3 月 金 融 庁 総 務 企 画 局 企 業 開 示 課 Microsoft Corporation のガイドラインに 従 って 画 面 写 真 を 使 用 しています Microsoft Windows Windows Vista は 米 国 Microsoft Corporation の 米 国 及 びその 他 の 国 における 登 録 商

More information

BizDataBank とは インターネット 上 (クラウド)に 大 切 なデータを 保 存 することが 出 来 る 便 利 なアプリケー ション(オンラインストレージ)です 本 資 料 について BizDataBank サービスは マイナーバージョンアップ 等 もあるため 実 際 のクライアントと

BizDataBank とは インターネット 上 (クラウド)に 大 切 なデータを 保 存 することが 出 来 る 便 利 なアプリケー ション(オンラインストレージ)です 本 資 料 について BizDataBank サービスは マイナーバージョンアップ 等 もあるため 実 際 のクライアントと BizDataBank(iOS 版 ) ユーザーガイド Last update 2013.11.28 Ver.2.0.3 BizDataBank とは インターネット 上 (クラウド)に 大 切 なデータを 保 存 することが 出 来 る 便 利 なアプリケー ション(オンラインストレージ)です 本 資 料 について BizDataBank サービスは マイナーバージョンアップ 等 もあるため 実

More information

目 次 1. はじめに... 3 1.1. はじめに... 3 1.2. 使 用 環 境 について... 3 1.3. 入 力 制 限 について... 3 1.4. 登 録 システムについて... 4 2. アカウント 登 録... 6 2.1. アカウント 登 録 機 能 (パスワードを 発 行

目 次 1. はじめに... 3 1.1. はじめに... 3 1.2. 使 用 環 境 について... 3 1.3. 入 力 制 限 について... 3 1.4. 登 録 システムについて... 4 2. アカウント 登 録... 6 2.1. アカウント 登 録 機 能 (パスワードを 発 行 サービス 付 き 高 齢 者 向 け 住 宅 登 録 システム 操 作 マニュアル 旧 様 式 対 応 2015 年 5 月 8 日 版 サービス 付 き 高 齢 者 向 け 住 宅 登 録 事 務 局 1 目 次 1. はじめに... 3 1.1. はじめに... 3 1.2. 使 用 環 境 について... 3 1.3. 入 力 制 限 について... 3 1.4. 登 録 システムについて...

More information

ライセンス

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

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

Microsoft Word - Webメール ユーザーマニュアル0414.doc

Microsoft Word - Webメール ユーザーマニュアル0414.doc 兵 庫 大 学 Web メール ユーザーマニュアル Contents 1. はじめに...4 1.1. Outlook Web Access (Web メール)とは... 4 2. ログオン ログオフ...5 2.1. ログオン... 5 2.2. ログオフ... 7 3. TOP 画 面...8 3.1. TOP 画 面 (Internet Explorer のみ)... 8 3.2. TOP 画

More information

Microsoft PowerPoint - 130522_リビジョンアップ案内_最終.pptx

Microsoft PowerPoint - 130522_リビジョンアップ案内_最終.pptx WaWaOfficeシリーズ バージョン8.2リビジョンアップ 2013 年 6 月 18 日 リリース 予 定 株 式 会 社 アイアットOEC ローカル 機 能 の 改 善 プレビュー 表 追 加 の 覧 表 にプレビュー 表 を 設 定 可 能 にしました 1 表 2 表 1 +プレビュー 表 から 選 択 設 定 法 個 設 定 個 設 定 基 本 設 定 PC 専 パラメータの 覧 表 時

More information

目 次 章 ポータル 画 面.... ポータル 画 面 のレイアウト....2 地 図 を 選 択 する...2 2 章 基 本 操 作...3 2. 画 面 構 成...3 2.2 ヘルプを 表 示 する...4 2.3 地 図 を 移 動 する...4 2.4 地 図 を 拡 大 / 縮 小 す

目 次 章 ポータル 画 面.... ポータル 画 面 のレイアウト....2 地 図 を 選 択 する...2 2 章 基 本 操 作...3 2. 画 面 構 成...3 2.2 ヘルプを 表 示 する...4 2.3 地 図 を 移 動 する...4 2.4 地 図 を 拡 大 / 縮 小 す 地 図 情 報 とよなか 操 作 手 順 書 Copyright (C) Toyonaka City, All rights reserved. 目 次 章 ポータル 画 面.... ポータル 画 面 のレイアウト....2 地 図 を 選 択 する...2 2 章 基 本 操 作...3 2. 画 面 構 成...3 2.2 ヘルプを 表 示 する...4 2.3 地 図 を 移 動 する...4

More information

マカフィー・マルチアクセス(MMA) McAfee Internet Security for Mac 説明書

マカフィー・マルチアクセス(MMA) McAfee Internet Security for Mac 説明書 マカフィー マルチアクセス マカフィー インターネットセキュリティー for Mac 説 明 書 1 初 めに この 資 料 は マカフィー インターネットセキュリティー for Mac の 製 品 仕 様 やサポート 情 報 について 解 説 しています [ 補 足 ] 当 資 料 は 2014 年 2 月 7 日 当 時 の 最 新 バージョンの 製 品 およびWebサイトを 基 に 資 料 を

More information

CSSの基礎

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

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

Microsoft Word - Office365メールManual[学生][新実習室用]_2013,3,31_.doc

Microsoft Word - Office365メールManual[学生][新実習室用]_2013,3,31_.doc 新 学 生 用 電 子 メール 使 用 方 法 (Office 365) 新 学 生 用 電 子 メールシステムへのアクセス コンピュータ 実 習 室 以 外 から 使 用 する 場 合 (スマートフォンからの 利 用 も 含 む)は まず 産 業 医 大 の 学 生 用 ホームページの 新 学 生 用 電 子 メールシステムの 利 用 案 内 のホームページ (http://www.info.uoeh-u.ac.jp/office365.html)にアクセスしてから

More information

iStudy E-Server Mini Datasheet

iStudy E-Server Mini Datasheet ~ でペーパーレス 会 議 を 変 える!~ 1. 製 品 概 要 は 厚 さわずか のペーパーレス 会 議 アプライアンスサーバです 同 時 接 続 クライア ントまでのペーパーレス 会 議 を 台 で 開 催 することができます が 実 現 するペーパーレス 会 議 は 紙 資 料 を 単 に 電 子 化 し 紙 資 源 資 料 作 成 にかかる 時 間 コストを 削 減 するだけでなく 会 議

More information

スライド 1

スライド 1 SkyVisualEditorオンラインセミナー ~ 第 10 回 基 本 編 ~ AppComponentをつかってみよう 2015 年 2 月 10 日 ( 火 ) はじめに 本 セミナーの 目 的 SkyVisualEditorの 機 能 および 設 定 方 法 の 紹 介 を 目 的 としています 本 日 のセミナーのご 対 象 者 AppComponentについて 興 味 ご 関 心 のあるご

More information

技術報告会原稿フォーマット

技術報告会原稿フォーマット Web 情 報 共 有 サービス 利 用 マニュアル 1. ファイルの 保 存 ブラウザを 開 き https://webshare.kyokyo-u.ac.jp を 開 く.ログイン 画 面 が 表 示 されるので,ユーザ ID(メールの ID) とパスワードを 入 力 し,ログインボタンをクリックする( 図 2). ログインに 成 功 すると,TOP フォルダの 一 覧 が 表 示 される (

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

Copyright(c) 2011, Oracle. All rights reserved. 2 / 28

Copyright(c) 2011, Oracle. All rights reserved. 2 / 28 Oracle Application Express 4.0 を 使 用 した データベース オブジェクトの 操 作 Copyright(c) 2011, Oracle. All rights reserved. Copyright(c) 2011, Oracle. All rights reserved. 2 / 28 Oracle Application Express 4.0 を 使 用 した

More information

(Microsoft PowerPoint - \217\211\212\372\220\335\222\350\203}\203j\203\205\203A\203\213_NEW200904.ppt)

(Microsoft PowerPoint - \217\211\212\372\220\335\222\350\203}\203j\203\205\203A\203\213_NEW200904.ppt) Salesforce 初 期 設 定 マニュアル 目 次 1 初 期 設 定 (システム 管 理 者 ) 初 期 設 定 について カスタム 項 目 設 定 入 力 項 目 のカスタマイズ ページレイアウト 入 力 画 面 のレイアント 変 更 データインポート - 顧 客 データの 一 括 インポート ロール 設 定 - 組 織 図 設 定 ユーザ 設 定 - Salesforce 利 用 者 の

More information

タック 健 診 Web ソリューション 団 体 利 用 者 向 け ユーザマニュアル 2016/1/22 Ver. 1.00 目 次 1. はじめに... 1 2. 動 作 環 境... 1 3. ログイン... 2 3.1. 団 体 ログイン... 2 3.2. 利 用 者 ログイン... 3 3.3. マイページ... 4 4. 新 規 予 約... 5 4.1. コース 条 件 の 選 択

More information

BizDataBank とは インターネット 上 (クラウド)に 大 切 なデータを 保 存 することが 出 来 る 便 利 なアプリケー ション(オンラインストレージ)です 本 資 料 について BizDataBank サービスは マイナーバージョンアップ 等 もあるため 実 際 のクライアントと

BizDataBank とは インターネット 上 (クラウド)に 大 切 なデータを 保 存 することが 出 来 る 便 利 なアプリケー ション(オンラインストレージ)です 本 資 料 について BizDataBank サービスは マイナーバージョンアップ 等 もあるため 実 際 のクライアントと BizDataBank(iOS 版 ) ユーザーガイド Last update 2013.10.7 Ver.2.0.1 BizDataBank とは インターネット 上 (クラウド)に 大 切 なデータを 保 存 することが 出 来 る 便 利 なアプリケー ション(オンラインストレージ)です 本 資 料 について BizDataBank サービスは マイナーバージョンアップ 等 もあるため 実 際

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