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

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 コンポーネントは で 入 手 できるオープンソースの Aura フレームワークに 基 づいて います Aura フレームワークでは Salesforceのデータから 完 全 に 独 立 したアプリケーションを 構 築 できます オープンソースの Aura フレームワークには Lightningコンポーネントフレームワークで 現 在 使 用 できない 機 能 およびコンポーネントがあります 弊 社 は これらの 機 能 およびコンポーネントをSalesforce 開 発 者 が 使 用 でき るように 作 業 を 進 めています このガイドのオンラインバージョン このガイドはオンラインで 利 用 できます 最 新 バージョンを 参 照 するには 次 の 場 所 にアクセスしてくださ い 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 であるため 自 分 自 身 を 表 す firstname@lastname.com などのユーザ 名 を 選 ぶことで より 有 益 に 使 用 できます 5. [Master Subscription Agreement ( 主 登 録 契 約 )] を 読 み チェックボックスをオンにしてから [Submit Registration ( 登 録 を 実 行 )] をクリックします 6. その 後 まもなく ログインリンクを 記 載 したメールが 届 きます リンクをクリックし パスワードを 変 更 します 名 前 空 間 プレフィックスを 登 録 する 次 に 名 前 空 間 プレフィックスを 登 録 します 名 前 空 間 プレフィックスは すべてのSalesforce 組 織 にわたって 必 ずグローバルに 一 意 なものを 指 定 します 名 前 空 間 プレフィックスでは 大 文 字 と 小 文 字 が 区 別 され 15 文 字 以 内 の 英 数 字 で 指 定 できます 名 前 空 間 プレフィックスを 登 録 する 手 順 は 次 のとおりです 1. [ 設 定 ] で [ 作 成 ] > [パッケージ] をクリックします 2. [ 編 集 ] をクリックします メモ: すでに 開 発 者 設 定 が 定 義 されている 場 合 は このボタンは 表 示 されません 3. 開 発 者 設 定 に 必 要 な 選 択 項 目 を 確 認 し [ 次 へ] をクリックします 4. 登 録 する 名 前 空 間 プレフィックスを 入 力 します 5. [ 使 用 可 能 か 調 べる] をクリックして 使 用 済 みかどうかを 確 認 します 6. 入 力 した 名 前 空 間 プレフィックスがすでに 使 用 済 みの 場 合 は 上 記 の 操 作 を 繰 り 返 します 8

15 クイックスタート 経 費 オブジェクトを 作 成 する 7. [ 選 択 内 容 の 確 認 ] をクリックします 8. [ 保 存 ] をクリックします 名 前 空 間 は 作 成 しているコンポーネントおよび Apex クラスのプレフィックスとして 使 用 されます また 次 にアクセスして 作 成 するアプリケーションをアドレス 指 定 するために 名 前 空 間 を 使 用 することもできま す (<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. 変 更 を 保 存 し サイドバーの[プレビュー]をクリックしてアプリケーションをプレビューします または (<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) を 参 照 してください (<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 にはリテラル 文 字 列 値 のみを 割 り 当 てることができます 詳 細 は (<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アプリケーション 開 発 者 ガイ ド を 参 照 してください アプリケーションへのコンポーネントの 追 加 アプリケーションにコンポーネントを 追 加 する 準 備 ができたら 最 初 にフレームワークに 標 準 で 付 属 している コンポーネントを 検 討 します これらのコンポーネントは 拡 張 したり 作 成 するカスタムコンポーネントに コンポジションを 使 用 して 追 加 したりして 利 用 することもできます メモ: 標 準 で 付 属 するすべてのコンポーネントの 詳 細 は (<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"/> ドキュメントの 表 示 作 成 したドキュメントは (<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 を 拡 張 します 各 コン ポーネントのスタイルは 適 宜 設 定 できます 使 用 可 能 なすべてのコンポーネントについては (<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=" " placeholder="abc@ .com"/> 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

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

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

Lightning コンポーネント開発者ガイド Lightning コンポーネント開発 者ガイド バージョン 35.0, Winter 16 @salesforcedocs 最終更新日 : 2015/9/1 Copyright 2000 2015 salesforce.com, inc. All rights reserved. Salesforce およびその他の名称や商標は salesforce.com, inc. の登録商標です 本ドキュメントに記載されたその他の商標は

More information

研究者情報データベース

研究者情報データベース 研 究 者 情 報 管 理 システム 研 究 者 向 けデータ 一 括 登 録 機 能 操 作 マニュアル 2013 年 6 月 4 日 目 次 1. はじめに... 1 1.1 本 マニュアルの 注 意 事 項... 1 2. 操 作 手 順... 2 2.1 データ 登 録 手 順... 2 2.2 データ 読 み 込 みエラー 時 の 対 応 手 順... 13 3. 登 録 データ 一 覧...

More information

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

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

More information

PowerPoint Presentation

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

More information

MetaMoJi ClassRoom/ゼミナール 授業実施ガイド

MetaMoJi ClassRoom/ゼミナール 授業実施ガイド 本 書 では 管 理 者 向 けに MetaMoJi ClassRoom/ゼミナールで 年 度 更 新 を 実 施 する 手 順 について 説 明 して います 管 理 者 ガイドと 合 わせてご 覧 ください Excelは 米 国 Microsoft Corporationの 米 国 およびその 他 の 国 における 登 録 商 標 または 商 標 です Apache OpenOffice Apache

More information

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

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

More information

V-CUBE One

V-CUBE One V-CUBE One Office 365 連 携 マニュアル ブイキューブ 2016/06/03 この 文 書 は V-CUBE One の Office 365 連 携 用 ご 利 用 マニュアルです 更 新 履 歴 更 新 日 内 容 2016/02/09 新 規 作 成 2016/03/11 Office 365 ID を 既 存 の One 利 用 者 と 紐 付 ける 機 能 に 関 する

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

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

■デザイン

■デザイン Joruri CMS 1.3.2 基 本 マニュアル (2013.6.28) デザイン デザインでは 各 ページ 内 に 構 成 されるパーツである ピース と それをページ 内 に 配 置 し 構 成 する レイアウト を 作 成 できます また スタイルシート でピース レイ アウトの HTML を 制 御 し 装 飾 する CSS を 設 定 できます ピース デザイン>ピース ピース をクリックすると

More information

Office 10 パッケージ版「リンク集」

Office 10 パッケージ版「リンク集」 Office 10 パッケージ 版 リンク 集 バージョン 10.3 Copyright (C) 2013-2015 Cybozu リンク 集 リンク 集 は よく 利 用 するWebサイトのURLを 登 録 するアプリケーションです リンク 集 には 次 の2 種 類 のリンクを 管 理 できます 共 有 リンク: すべてのユーザーが 共 有 して 使 用 できるリンクです システム 管 理 者

More information

ユーザーガイド

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

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

4.5. < 参 加 表 明 書 を 提 出 する> 調 達 案 件 一 覧 の 表 示 対 象 となる 案 件 を 検 索 し 調 達 案 件 一 覧 に 表 示 させます 参 加 したい 案 件 の 調 達 案 件 名 称 行 - 入 札 参 加 資 格 確 認 申 請 / 技 術 資 料 /

4.5. < 参 加 表 明 書 を 提 出 する> 調 達 案 件 一 覧 の 表 示 対 象 となる 案 件 を 検 索 し 調 達 案 件 一 覧 に 表 示 させます 参 加 したい 案 件 の 調 達 案 件 名 称 行 - 入 札 参 加 資 格 確 認 申 請 / 技 術 資 料 / 目 次... 4-46 4.5. < 参 加 表 明 書 を 提 出 する>... 4-46 4.5.2 < 参 加 表 明 書 受 付 票 を 表 示 する>... 4-55 4.5.3 < 選 定 通 知 書 ( 非 選 定 通 知 書 )を 表 示 する>... 4-58 4.5.4 < 技 術 提 案 書 を 提 出 する>... 4-6 4.5.5 < 技 術 提 案 書 受 付 票 を

More information

GRIDY SFA カスタム 項 目 操 作 ガイド 用 本 書 はに 必 要 な 操 作 を 解 説 しております は GRIDY SFA ののことです GRIDY SFA へ 申 し 込 み 最 初 に 登 録 を 行 った 方 がそのままとなります カスタム 項 目 はの 方 のみ 操 作 可

GRIDY SFA カスタム 項 目 操 作 ガイド 用 本 書 はに 必 要 な 操 作 を 解 説 しております は GRIDY SFA ののことです GRIDY SFA へ 申 し 込 み 最 初 に 登 録 を 行 った 方 がそのままとなります カスタム 項 目 はの 方 のみ 操 作 可 GRIDY SFA カスタム 項 目 操 作 ガイド 2016 年 1 月 20 日 ナレッジスイート 株 式 会 社 1 GRIDY SFA カスタム 項 目 操 作 ガイド 用 本 書 はに 必 要 な 操 作 を 解 説 しております は GRIDY SFA ののことです GRIDY SFA へ 申 し 込 み 最 初 に 登 録 を 行 った 方 がそのままとなります カスタム 項 目 はの

More information

変 更 履 歴 日 付 Document ver. 変 更 箇 所 変 更 内 容 2015/3/27 1.0.0 新 規 追 加 2015/9/24 誤 字 修 正 2016/2/19 1.01 動 作 環 境 最 新 のものへ 変 更 全 体 オペレーター の 表 記 を 削 除 2016/5/

変 更 履 歴 日 付 Document ver. 変 更 箇 所 変 更 内 容 2015/3/27 1.0.0 新 規 追 加 2015/9/24 誤 字 修 正 2016/2/19 1.01 動 作 環 境 最 新 のものへ 変 更 全 体 オペレーター の 表 記 を 削 除 2016/5/ KDDI Smart Mobile Safety Manager Mac ユーザーマニュアル 最 終 更 新 日 2016 年 5 月 26 日 Document ver.1.0.2 1 変 更 履 歴 日 付 Document ver. 変 更 箇 所 変 更 内 容 2015/3/27 1.0.0 新 規 追 加 2015/9/24 誤 字 修 正 2016/2/19 1.01 動 作 環 境

More information

Microsoft Word - FrontMatter.doc

Microsoft Word - FrontMatter.doc SAS 認 定 プロフェッショナルのための Base Programming for SAS 9 完 全 ガイド ii このマニュアルの 正 確 な 書 誌 情 報 は 以 下 のとおりです SAS 認 定 プロフェッショナルのための Base Programming for SAS 9 完 全 ガイド Copyright 2009, SAS Institute Inc., Cary, NC, USA

More information

スライド 1

スライド 1 セキュリティ 安 心 ブラウザ Android 版 WEBフィルタリングソフト 簡 単 マニュアル 本 マニュアルはAndroid4.2.2をベースに 構 成 しております 端 末 やOSのバージョンによって 名 称 が 違 う 場 合 があります ファイナル スマホ セキュリティのインストール ファイナル スマホ セキュリティの 初 期 設 定 ファイナル スマホ セキュリティの 使 い 方 (ブラウザ)

More information

Microsoft PowerPoint - 04_H26material_practice_No3-3.pptx

Microsoft PowerPoint - 04_H26material_practice_No3-3.pptx 参 考 : 届 書 作 成 プログラムによる 届 出 データの 作 成 方 法 (1) 事 前 準 備 1 被 保 険 者 データの 入 手 (ターンアラウンドCDを 利 用 する 場 合 ) 当 プログラムでは 提 出 先 の 年 金 事 務 所 が 保 有 している 被 保 険 者 のデータを 利 用 して 電 子 申 請 用 データを 作 成 することができます(これを ターンアラウンドCD

More information

KINGSOFT Office 2016 動 作 環 境 対 応 日 本 語 版 版 共 通 利 用 上 記 動 作 以 上 以 上 空 容 量 以 上 他 接 続 環 境 推 奨 必 要 2

KINGSOFT Office 2016 動 作 環 境 対 応 日 本 語 版 版 共 通 利 用 上 記 動 作 以 上 以 上 空 容 量 以 上 他 接 続 環 境 推 奨 必 要 2 目 次 動 作 環 境 特 長 方 法 方 法 起 動 終 了 方 法 方 法 操 作 方 法 使 方 使 方 使 方 詳 細 設 定 使 方 KINGSOFT Office 2016 動 作 環 境 対 応 日 本 語 版 版 共 通 利 用 上 記 動 作 以 上 以 上 空 容 量 以 上 他 接 続 環 境 推 奨 必 要 2 KINGSOFT Office 2016 特 長 主 特 長 以

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

設定フロー ★印は必須の設定です

設定フロー ★印は必須の設定です AutoBiz StartUp Manual オートビズ 基 本 設 定 マニュアル ( 一 括 登 録 ~ メルマガ 配 信 編 ) 目 次 1. 登 録 用 アドレスリスト(CSV ファイル)の 作 成... 2 2.シナリオ 名 の 変 更...4 3. 登 録 ページ 作 成 でフォームを 作 成... 5 4. 完 了 ページ 作 成 で 解 除 完 了 ページの 設 定... 7 5.

More information

あいち電子調達共同システム

あいち電子調達共同システム (2) 提 出 依 頼 書 の 確 認 提 出 依 頼 書 が 発 行 されると 利 用 者 登 録 で 指 定 したメールアドレスへお 知 らせが 送 信 されま すので 提 出 依 頼 書 を 確 認 します 調 達 案 件 一 覧 画 面 で 案 件 情 報 を 確 認 し 提 出 依 頼 書 を 表 示 します 操 作 1 調 達 案 件 検 索 画 面 で 検 索 条 件 を 入 力 し

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 履 修 履 歴 データベースの 仕 組 み 学 生 が 履 修 履 歴 を 登 録 して 企 業 へデータを 送 信 すると 企 業 担 当 者 が 履 修 履 歴 データを 見 られるようになります 不 特 定 の 企 業 に 履 修 履 歴 データが 閲 覧 されるわけではありません < 基 本 的 な 流 れ> A 社 データ ベース 応 募 企 業 へ データを 送 信 学 生 A 専

More information

スライド 1

スライド 1 Android 版 目 視 録 運 用 操 作 マニュアル 作 成 2012/03/22 更 新 2014/09/26 目 視 録 とは 携 帯 またはパソコンで 施 工 写 真 を 登 録 確 認 できるシステムです ご 利 用 の 為 にはIDとパスワードが 必 要 です TEG ログインID ( ) パスワード ( ) https://teg.mokusiroku.com/

More information

Microsoft Word - Active.doc

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

More information

本 マニュアルでは 今 回 のリニューアルにより 従 来 のブログ 管 理 画 面 から 変 更 になった 動 作 および 操 作 についてご 案 内 いたします 全 体 的 な 操 作 説 明 については 別 冊 の 必 読 マニュアルその1~ブログの 基 礎 知 識 ~ 必 読 マニュアルその2~ 初 めての 更 新 ガイド~ 必 読 マニュアルその3~よく 使 う 操 作 ガイド~ をご 覧

More information

POWER EGG V2.01 ユーザーズマニュアル ファイル管理編

POWER EGG V2.01 ユーザーズマニュアル ファイル管理編 POWER EGG V2.0 ユーザーズマニュアル ファイル 管 理 編 Copyright 2009 D-CIRCLE,INC. All Rights Reserved 2009.4 はじめに 本 書 では POWER EGG 利 用 者 向 けに 以 下 の POWER EGG のファイル 管 理 機 能 に 関 する 操 作 を 説 明 しま す なお 当 マニュアルでは ファイル 管 理 機

More information

事前チェック提出用現況報告書作成ツール入力マニュアル(法人用)

事前チェック提出用現況報告書作成ツール入力マニュアル(法人用) 事 前 チェック 提 出 用 現 況 報 告 書 作 成 ツール 入 力 マニュアル ( 法 人 用 ) 平 成 26 年 7 月 一 般 社 団 法 人 日 本 補 償 コンサルタント 協 会 目 次 1. ツールの 概 要 1 2. 動 作 環 境 1 3. マクロの 設 定 (1) Excel のバージョンの 確 認 2 (2) マクロの 設 定 3 4. 現 況 報 告 書 の 作 成 (1)

More information

WEBメールシステム 操作手順書

WEBメールシステム 操作手順書 ひ む か ネ ッ ト WEB メールシステム 操 作 手 順 書 目 次 認 証 画 面 を 表 示 する 認 証 画 面 を 表 示 する 3 ID パスワードの 入 力 3 パスワードを 忘 れてしまった 場 合 の 認 証 方 法 4 メール 送 受 信 メールを 受 信 する 5 メールを 送 信 する 5 メールを 確 認 する メールを 全 選 択 する 7 メールを 削 除 する 7

More information

<4D F736F F D F B B838082F090DD927582B782E995FB96405F E646F6378>

<4D F736F F D F B B838082F090DD927582B782E995FB96405F E646F6378> アンケートフォームを 設 置 する 方 法 < 目 次 > 1 アンケートフォームを 利 用 するための 設 定 をする 2 1-1 アンケートフォームの 詳 細 設 定 をする 1-2 アンケートフォームの 入 力 画 面 を 作 成 する 1-3 お 客 さんが 入 力 内 容 を 確 認 するためのページを 作 成 する 1-4 アンケート 完 了 後 に 表 示 するお 礼 画 面 を 作

More information

目 次. WEB メールへのログイン.... メール 送 信 手 順.... メール 受 信 手 順... 6. アドレス 帳 の 操 作 手 順... 8 5. フォルダーの 操 作 手 順... 8 6. メール 発 信 者 登 録 署 名 登 録 手 順... 0 7. 基 本 的 な 設 定

目 次. WEB メールへのログイン.... メール 送 信 手 順.... メール 受 信 手 順... 6. アドレス 帳 の 操 作 手 順... 8 5. フォルダーの 操 作 手 順... 8 6. メール 発 信 者 登 録 署 名 登 録 手 順... 0 7. 基 本 的 な 設 定 Web メール 手 順 書 目 次. WEB メールへのログイン.... メール 送 信 手 順.... メール 受 信 手 順... 6. アドレス 帳 の 操 作 手 順... 8 5. フォルダーの 操 作 手 順... 8 6. メール 発 信 者 登 録 署 名 登 録 手 順... 0 7. 基 本 的 な 設 定... 8. 参 考 情 報... 9 . WEB メールへのログイン 概

More information

目 次 1. 積 算 内 訳 書 に 関 する 留 意 事 項 1 ページ 2. 積 算 内 訳 書 のダウンロード 3 ページ 3. 積 算 内 訳 書 の 作 成 (Excel 2003の 場 合 ) 6 ページ 4. 積 算 内 訳 書 の 作 成 (Excel 2007の 場 合 ) 13

目 次 1. 積 算 内 訳 書 に 関 する 留 意 事 項 1 ページ 2. 積 算 内 訳 書 のダウンロード 3 ページ 3. 積 算 内 訳 書 の 作 成 (Excel 2003の 場 合 ) 6 ページ 4. 積 算 内 訳 書 の 作 成 (Excel 2007の 場 合 ) 13 積 算 内 訳 書 の 作 成 マニュアル 平 成 26 年 1 形 県 県 整 備 部 建 設 企 画 課 目 次 1. 積 算 内 訳 書 に 関 する 留 意 事 項 1 ページ 2. 積 算 内 訳 書 のダウンロード 3 ページ 3. 積 算 内 訳 書 の 作 成 (Excel 2003の 場 合 ) 6 ページ 4. 積 算 内 訳 書 の 作 成 (Excel 2007の 場 合 )

More information

贈与税 faq

贈与税 faq 電 子 申 告 に 関 するよくあるお 問 い 合 わせ 贈 与 税 の 電 子 申 告 に 関 する 概 要 と よくあるお 問 い 合 わせについて 説 明 します 26 年 分 の 贈 与 税 の 電 子 申 告 について 2015 年 1 月 21 日 1 目 次 確 認 したい 項 目 の 場 所 でクリックしてください 例 ) 対 応 プログラム 対 応 帳 票 他 の 税 目 と 異

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

端 末 型 払 い 出 しの 場 合 接 続 構 成 図 フレッツ グループから 払 出 されたIPアドレス /32 NTT 西 日 本 地 域 IP 網 フレッツ グループ フレッツ グループから 払 出 されたIPアドレス /

端 末 型 払 い 出 しの 場 合 接 続 構 成 図 フレッツ グループから 払 出 されたIPアドレス /32 NTT 西 日 本 地 域 IP 網 フレッツ グループ フレッツ グループから 払 出 されたIPアドレス / CTU 端 末 型 接 続 設 定 例 H19 年 10 月 端 末 型 払 い 出 しの 場 合 接 続 構 成 図 フレッツ グループから 払 出 されたIPアドレス 172.25.1.1/32 NTT 西 日 本 地 域 IP 網 フレッツ グループ フレッツ グループから 払 出 されたIPアドレス 172.25.1.2/32 172.25.1.1 172.25.1.2 192.168.24.1

More information

<4D6963726F736F667420576F7264202D20819C486F70658F6F93588ED297708AC7979D89E696CA837D836A83858341838B8169342E33566572816A2E646F63>

<4D6963726F736F667420576F7264202D20819C486F70658F6F93588ED297708AC7979D89E696CA837D836A83858341838B8169342E33566572816A2E646F63> 商 品 管 理 商 品 管 理 を 行 うためのメニューです 4.1 商 品 管 理 のサイドメニュー 商 品 管 理 には 以 下 のサイドメニューがあります 商 品 一 覧 登 録 済 みの 商 品 の 一 覧 を 表 示 します 既 に 登 録 済 みの 商 品 の 検 索 検 索 した 商 品 を 編 集 する 際 に 使 用 します 新 規 作 成 商 品 を 新 規 登 録 する 画 面

More information

目 次 1. 大 学 情 報 データベースシステムの 使 用 方 法 について... 1 1.1.EXCEL 一 括 登 録... 1 1.2.EXCEL ダウンロード... 2 1.2.1. 検 索 条 件 の 指 定 プレビュー... 3 1.2.2.EXCEL ダウンロード(データ 抽 出 あ

目 次 1. 大 学 情 報 データベースシステムの 使 用 方 法 について... 1 1.1.EXCEL 一 括 登 録... 1 1.2.EXCEL ダウンロード... 2 1.2.1. 検 索 条 件 の 指 定 プレビュー... 3 1.2.2.EXCEL ダウンロード(データ 抽 出 あ 大 学 情 報 データベースシステム EXCEL 一 括 登 録 マニュアル 目 次 1. 大 学 情 報 データベースシステムの 使 用 方 法 について... 1 1.1.EXCEL 一 括 登 録... 1 1.2.EXCEL ダウンロード... 2 1.2.1. 検 索 条 件 の 指 定 プレビュー... 3 1.2.2.EXCEL ダウンロード(データ 抽 出 あり)... 5 1.2.3.EXCEL

More information

C.1 共 有 フォルダ 接 続 操 作 の 概 要 アクセスが 許 可 されている 研 究 データ 交 換 システムの 個 人 用 共 有 フォルダまたは メーリングリストの 共 有 フォルダに 接 続 して フォルダを 作 成 したり ファイル をアップロードまたはダウンロードしたりすることがで

C.1 共 有 フォルダ 接 続 操 作 の 概 要 アクセスが 許 可 されている 研 究 データ 交 換 システムの 個 人 用 共 有 フォルダまたは メーリングリストの 共 有 フォルダに 接 続 して フォルダを 作 成 したり ファイル をアップロードまたはダウンロードしたりすることがで C.1 共 有 フォルダ 接 続 操 作 の 概 要 C.2 Windows から 接 続 操 作 する C.3 Mac OS X から 接 続 操 作 する 67 C.1 共 有 フォルダ 接 続 操 作 の 概 要 アクセスが 許 可 されている 研 究 データ 交 換 システムの 個 人 用 共 有 フォルダまたは メーリングリストの 共 有 フォルダに 接 続 して フォルダを 作 成 したり

More information

WebAlertクイックマニュアル

WebAlertクイックマニュアル WebAlert ユーザーズガイド 目 次 1 WebAlert とは... 3 2 管 理 画 面 ログイン 方 法... 4 3 管 理 画 面 ログアウト 方 法... 6 4 パスワードリマインダーの 利 用 方 法... 7 5 WebAlert 管 理 画 面 概 要... 8 6 アカウント 設 定... 9 6-1 アカウント 情 報... 10 6-2 アカウント 詳 細... 11

More information

同 期 を 開 始 する( 初 期 設 定 ) 2 1 Remote Link PC Sync を 起 動 する 2 1 接 続 機 器 の [PIN コード ] [ ユーザー 名 ] [ パスワード ] を 入 力 する [PIN コード ] などの 情 報 は 接 続 機 器 の 設 定 画 面

同 期 を 開 始 する( 初 期 設 定 ) 2 1 Remote Link PC Sync を 起 動 する 2 1 接 続 機 器 の [PIN コード ] [ ユーザー 名 ] [ パスワード ] を 入 力 する [PIN コード ] などの 情 報 は 接 続 機 器 の 設 定 画 面 画 面 で 見 る マ ニ ュ ア ル Remote Link 3 対 応 自 動 同 期 アプリ Remote Link PC Sync Remote Link PC Sync は 接 続 機 器 とパソコンとの 間 でファイルの 自 動 同 期 をするアプリです 本 アプリサイトの 対 応 製 品 型 番 に 記 載 された 機 器 動 作 環 境 機 種 OS Windows 8.1(32/64

More information

「1 所得税及び復興特別所得税の確定申告書データをお持ちの方」からの更正の請求書・修正申告書作成編

「1  所得税及び復興特別所得税の確定申告書データをお持ちの方」からの更正の請求書・修正申告書作成編 既 に 提 出 した 所 得 税 及 び 復 興 特 別 所 得 税 の 確 定 申 告 の 申 告 額 に 誤 り があった 場 合 で 納 める 税 金 が 多 すぎた 場 合 や 還 付 される 税 金 が 少 なす ぎた 場 合 に 提 出 する 更 正 の 請 求 書 や 申 告 をした 税 額 等 が 実 際 より 少 な すぎた 場 合 や 還 付 される 税 金 が 多 すぎた 場

More information

Microsoft PowerPoint - c3_op-manual.pdf

Microsoft PowerPoint - c3_op-manual.pdf 研 究 者 学 術 情 報 データベース 操 作 説 明 -- - 研 究 者 DBのログイン 画 面 へのアクセス 手 順 () 立 命 館 大 学 トップページ http://www.ritsumei.jp/index_j.html 研 究 産 学 官 連 携 ページ http://www.ritsumei.ac.jp/research/ 研 究 産 学 官 連 携 をクリック 研 究 産 学

More information

< 目 次 > 8. 雇 用 保 険 高 年 齢 雇 用 継 続 給 付 27 ( 育 児 休 業 給 付 介 護 休 業 給 付 ) 8.1 高 年 齢 雇 用 継 続 給 付 画 面 のマイナンバー 設 定 27 8.2 高 年 齢 雇 用 継 続 給 付 の 電 子 申 請 28 8.3 高

< 目 次 > 8. 雇 用 保 険 高 年 齢 雇 用 継 続 給 付 27 ( 育 児 休 業 給 付 介 護 休 業 給 付 ) 8.1 高 年 齢 雇 用 継 続 給 付 画 面 のマイナンバー 設 定 27 8.2 高 年 齢 雇 用 継 続 給 付 の 電 子 申 請 28 8.3 高 雇 用 保 険 マイナンバー 改 定 向 け 操 作 説 明 書 < 目 次 > 1.マイナンバー 等 の 法 令 改 定 対 応 について 3 1.1 法 令 改 定 の 変 更 点 3 1.2 その 他 主 要 な 変 更 点 4 2.マイナンバー 管 理 システムとの 連 携 設 定 5 2.1 マイナ de 社 労 夢 の 運 用 設 定 5 2.2 マイナ de 社 労 夢 CL の 運

More information

「災害用伝言板(web171)」の提供について~「災害用ブロードバンド伝言板(web171)」に新機能を追加しリニューアル~

「災害用伝言板(web171)」の提供について~「災害用ブロードバンド伝言板(web171)」に新機能を追加しリニューアル~ 平 成 24 年 8 月 29 日 災 害 用 伝 言 板 (web171) の 提 供 について ~ 災 害 用 ブロードバンド 伝 言 板 (web171) に 新 機 能 を 追 加 しリニューアル~ NTT 東 日 本 および NTT 西 日 本 ( 以 下 NTT 東 西 )は 災 害 用 ブロードバンド 伝 言 板 (web171) に 新 たな 機 能 を 追 加 し 災 害 用 伝

More information

目 次 1.はじめに 1-1. はじめに 2. 操 作 2-1. 概 要 2-2. 操 作 方 法 ( 調 査 依 頼 の 確 認 ) 2-3. 操 作 方 法 ( 回 答 登 録 ) 2-4. 操 作 方 法 (ワークシート 出 力 ) 2-5. 操 作 方 法 (ワークシート 取 込 ) 3.

目 次 1.はじめに 1-1. はじめに 2. 操 作 2-1. 概 要 2-2. 操 作 方 法 ( 調 査 依 頼 の 確 認 ) 2-3. 操 作 方 法 ( 回 答 登 録 ) 2-4. 操 作 方 法 (ワークシート 出 力 ) 2-5. 操 作 方 法 (ワークシート 取 込 ) 3. カシオグリーン 調 達 調 査 (ProChemist) カシオ 調 査 票 回 答 マニュアル Ver.20131116 カシオ 計 算 機 株 式 会 社 目 次 1.はじめに 1-1. はじめに 2. 操 作 2-1. 概 要 2-2. 操 作 方 法 ( 調 査 依 頼 の 確 認 ) 2-3. 操 作 方 法 ( 回 答 登 録 ) 2-4. 操 作 方 法 (ワークシート 出 力 ) 2-5.

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

入 札 参 加 資 格 申 請 システム 操 作 マニュアル 入 札 参 加 資 格 の 資 格 有 効 ( 変 更 ) 日 を 迎 えると 追 加 届 の 登 録 ができるようになります ( 入 札 参 加 資 格 申 請 の 定 時 受 付 では いずれかの 申 請 先 団 体 から 入 札 参

入 札 参 加 資 格 申 請 システム 操 作 マニュアル 入 札 参 加 資 格 の 資 格 有 効 ( 変 更 ) 日 を 迎 えると 追 加 届 の 登 録 ができるようになります ( 入 札 参 加 資 格 申 請 の 定 時 受 付 では いずれかの 申 請 先 団 体 から 入 札 参 あいち 電 子 調 達 共 同 システム( 物 品 等 ) 入 札 参 加 資 格 申 請 システム 操 作 マニュアル - 業 者 - 目 次... 8-1 8-1 本 店 ID( 業 者 用 ID)の 確 認 ~ 初 期 パスワード 変 更... 8-3 8-1-1 入 札 参 加 資 格 申 請 システム メニュー... 8-3 8-1-2 契 約 営 業 所 等 ID 確 認 (パスワード

More information

2. 研 究 者 / 評 価 者 情 報 修 正 この 画 面 では 研 究 者 が 自 分 自 身 の 情 報 の 修 正 を 行 います (A) 研 究 者 / 評 価 者 情 報 の 修 正 () 研 究 者 / 評 価 者 情 報 修 正 画 面 を 開 く HOME 画 面 メニューの 研

2. 研 究 者 / 評 価 者 情 報 修 正 この 画 面 では 研 究 者 が 自 分 自 身 の 情 報 の 修 正 を 行 います (A) 研 究 者 / 評 価 者 情 報 の 修 正 () 研 究 者 / 評 価 者 情 報 修 正 画 面 を 開 く HOME 画 面 メニューの 研 2. 研 究 者 / 評 価 者 情 報 修 正 ⅰ. 概 要 研 究 者 / 評 価 者 情 報 修 正 メニューでは ご 自 身 の 情 報 管 理 を 行 います 研 究 者 / 評 価 者 情 報 修 正 ご 自 身 の 情 報 が 表 示 されますので 確 認 を 行 います 必 要 に 応 じて 情 報 修 正 を 行 います 操 作 方 法 は 2. 研 究 者 / 評 価 者 情 報

More information

Microsoft Word - 第3章.doc

Microsoft Word - 第3章.doc 第 3 章 関 数 この 章 では 日 付 と 時 刻 を 扱 う 関 数 や 検 索 条 件 に 一 致 するデータを 取 り 出 す 関 数 の 使 い 方 また 複 数 の 関 数 を 組 み 合 わせてエラー 値 を 非 表 示 にする 方 法 を 学 習 します STEP 1: 日 付 / 時 刻 関 数 TODAY 関 数 NOW 関 数 TODAY 関 数 は パソコンの 内 蔵 時

More information

5-2 一 般 ユーザー 用 :メール 2 送 信 者 のリンクをクリックすると 受 信 メールの 内 容 を 見 ることができます 受 信 メール 内 容 画 面 項 目 送 信 者 宛 先 CC 本 文 (テキスト) 本 文 (HTML) メールアドレスのリンクをクリックするとアドレス 帳 へ

5-2 一 般 ユーザー 用 :メール 2 送 信 者 のリンクをクリックすると 受 信 メールの 内 容 を 見 ることができます 受 信 メール 内 容 画 面 項 目 送 信 者 宛 先 CC 本 文 (テキスト) 本 文 (HTML) メールアドレスのリンクをクリックするとアドレス 帳 へ 5-1 一 般 ユーザー 用 :メール お 使 いのブラウザ 上 でメールの 送 受 信 ができます メールはJobMagicのサーバーにて 管 理 されており いつでもどこでも 別 のマシーンでログインしても 同 じ 環 境 でご 利 用 いただけます 受 信 したメールを 読 む 1 受 信 したメールを 読 むには3 種 類 の 方 法 があります メニューからメールメニューをクリック 新 着

More information

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

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

More information

購買ポータルサイトyOASIS簡易説明書 b

購買ポータルサイトyOASIS簡易説明書 b 購 買 ポータルサイト yoasis 簡 易 説 明 書 横 河 電 機 株 式 会 社 本 書 は 購 買 ポータルサイト yoasis の 簡 易 的 な 基 本 操 作 について 記 載 してあります 詳 細 な 操 作 方 法 については 別 冊 の 購 買 ポータルサイト yoasis 操 作 説 明 書 をご 覧 下 さい 本 書 の 内 容 は 性 能 / 機 能 の 向 上 などにより

More information

給料らくだ7.5・かるがるできる給料5.5 追加マニュアル

給料らくだ7.5・かるがるできる給料5.5 追加マニュアル 追 加 マニュアル 給 料 らくだ 7.5 (Rev.5.10) かるがるできる 給 料 5.5 (Rev.5.10) MNL151201N-K マイナンバーモードについて 本 製 品 は マイナンバー 事 務 のうち 保 管 利 用 廃 棄 安 全 管 理 措 置 について 支 援 する 機 能 を 搭 載 しています マイナンバー 事 務 に 関 する 支 援 機 能 を 利 用 できる 状 態

More information

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

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

More information

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

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

More information

スライド 1

スライド 1 セキュリティ 安 心 ブラウザ Android 版 WEBフィルタリングソフト ONLY タブレット フィルタリングサービス 簡 単 マニュアル ONLYタフ レットフィルタリンク (ファイナル スマホ セキュリティ)のインストール ONLYタフ レットフィルタリンク (ファイナル スマホ セキュリティ)の 初 期 設 定 ONLYタフ レットフィルタリンク (ファイナル スマホ セキュリティ)の

More information

Untitled

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

More information

■ユーザ

■ユーザ Joruri CMS 2.0.0 基 本 マニュアル (2013.7.16) コンテンツ アンケート コンテンツ アンケート では 以 下 のような 機 能 特 徴 を 備 えたアンケートフォームペ ージの 作 成 を 行 うことが 出 来 ます TinyMCE の 使 用 で HTML 等 の 複 雑 な 知 識 を 必 要 とせず MS WORD のような 感 覚 でアンケ ートフォームのページを

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション インターネット 出 願 手 引 き (システムWAKABA 継 続 入 学 申 請 手 引 き) 目 次 1.システムWAKABAトップ 画 面 2 2. 学 生 種 選 択 画 面 3 3. 出 願 申 請 画 面 (1) 全 科 履 修 生 の 場 合 4 (2) 全 科 履 修 生 以 外 の 場 合 6 4.オンライン 授 業 8 5. 科 目 登 録 申 請 画 面 (1) 授 業 種 別

More information

<4D6963726F736F667420576F7264202D209841834A838C8368838997989770837D836A83858341838B5F766572312E646F63>

<4D6963726F736F667420576F7264202D209841834A838C8368838997989770837D836A83858341838B5F766572312E646F63> Google Apps for Education ( 連 絡 先 カレンダー ドライブ) 利 用 について -2015.9.1( 第 0 版 )- 東 北 学 院 大 学 情 報 処 理 センター i 目 次 0. Googl Apps for Education について... 1 1. 連 絡 先... 1 1.1. 連 絡 先 とは... 1 1.2. 連 絡 先 へのアクセス 方 法...

More information

第1章 情報処理センターの利用

第1章 情報処理センターの利用 第 5 章 電 子 メールの 利 用 この 章 では 本 学 で 利 用 できる Web メールシステム Active!Mail について 使 い 方 の 概 要 を 説 明 いたします Active!Mail はインターネットが 利 用 できる 環 境 があれば 学 内 学 外 問 わず どこから でも 利 用 できます なお 各 ユーザーのメールアドレスは 以 下 のように ユーザーID@ドメイン

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 学 校 調 査 票 ( 大 学 ) 学 部 学 生 内 訳 票 ( 様 式 第 8 号 ) 2 学 校 調 査 票 ( 短 期 大

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

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

More information

Microsoft Word - 02…C…fi…X…g†[…‰_120606.doc

Microsoft Word - 02…C…fi…X…g†[…‰_120606.doc Syncface ユーザーズガイド (2)インストール 編 c Copyright 2011 Technoface Corp. All rights reserved. Salesforce.com および no software ロゴはsalesforce.com, inc.の 登 録 商 標 です また AppExchange Success On Demand および The Business

More information

SchITコモンズ【活用編】

SchITコモンズ【活用編】 2016 SchIT コモンズ 活 用 編 株 式 会 社 スキット 1. 画 像 のサイズ 変 更 (リサイズ) 1. 画 像 の 大 き さ( 幅 )を 変 更 (ア) 画 像 を 挿 入 する 場 合 は[ 画 像 の 挿 入 ]のマークをクリックします [ 参 照 ]をクリックし 任 意 の 場 所 から 挿 入 したい 画 像 を 選 択 し [ 画 像 の 挿 入 ]をクリックします (イ)

More information

ファイルサーバー(NFS) 構築ガイド

ファイルサーバー(NFS) 構築ガイド CLUSTERPRO D for Linux ファイルサーバー(NFS) 構 築 ガイド 改 版 履 歴 版 数 改 版 日 付 内 容 1 2016/04/20 新 規 作 成 i 目 次 第 1 章 はじめに... 1 1.1 対 象 読 者 と 目 的...2 1.2 適 用 範 囲...2 1.3 表 記 規 則...2 1.4 免 責 事 項...2 1.5 商 標 情 報...3 1.6

More information

Microsoft Word - 操作手順書.doc

Microsoft Word - 操作手順書.doc さーちずまえばし 操 作 手 順 書 目 次 章 ポータル 画 面.... ポータル 画 面 のレイアウト....2 地 図 を 選 択 する... 2 2 章 基 本 操 作... 3 2. 画 面 構 成... 3 2.2 ヘルプを 表 示 する... 5 2.3 地 図 を 移 動 する... 5 2.4 地 図 を 拡 大 / 縮 小 する... 5 2.5 索 引 図 を 利 用 する...

More information

<4D6963726F736F667420576F7264202D20819B93FC97CD835683588365838082CC91808DEC95FB964081693230313589FC92F994C5816A>

<4D6963726F736F667420576F7264202D20819B93FC97CD835683588365838082CC91808DEC95FB964081693230313589FC92F994C5816A> 岡 山 大 学 情 報 データベースシステムの 操 作 方 法 1 インターネットブラウザの 設 定 まず ご 利 用 のブラウザ 環 境 に 応 じて 以 下 URL に 記 載 されている 設 定 を 行 ってください この 設 定 をしていない 場 合 岡 山 大 学 情 報 データベースシステムを 利 用 できない 場 合 があります Windows の Internet Explorer7.0

More information

Microsoft Word - TechSmith Deployment Tool Documentation.docx

Microsoft Word - TechSmith Deployment Tool Documentation.docx TechSmith Deployment Tool マニュアル TechSmith Deployment Tool は Snagit や Camtasia Studio の 組 織 全 体 への 展 開 を 担 当 する Windows IT 管 理 者 のために 設 計 されたツールです このツールのイン ターフェイスを 使 用 することで 効 率 的 かつエラーのない 方 法 で MST ( 変

More information

<4D6963726F736F667420506F776572506F696E74202D2093738E738E7B8DF48C9F8DF5835683588365838097989770837D836A83858341838B208F8994C52E707074205B8CDD8AB78382815B83685D>

<4D6963726F736F667420506F776572506F696E74202D2093738E738E7B8DF48C9F8DF5835683588365838097989770837D836A83858341838B208F8994C52E707074205B8CDD8AB78382815B83685D> 都 市 施 策 検 索 システム 利 用 マニュアル 初 版 Ver.1.0 平 成 26 年 11 月 全 国 市 長 会 目 次 入 力 の 流 れ 3 1 ログイン 5 2 メニュー 画 面 8 3 施 策 新 規 入 力 10 4 施 策 の 検 索 修 正 削 除 16 2 入 力 の 流 れ 入 力 の 流 れ ( 詳 細 は 次 ページより) 1 貴 市 区 の 専 用 ページへログイ

More information

7.4.2 お 知 らせ 利 用 者 機 能 利 用 者 TOP 画 面 バックナンバータブ を バックナンバー 検 索 画 面 お 知 らせタブを お 知 らせタブを 検 索 ボタンを バックナンバータブ を バックナンバー 検 索 結 果 画 面 7.4.3 お 知 らせ 利 用 者 機 能 (

7.4.2 お 知 らせ 利 用 者 機 能 利 用 者 TOP 画 面 バックナンバータブ を バックナンバー 検 索 画 面 お 知 らせタブを お 知 らせタブを 検 索 ボタンを バックナンバータブ を バックナンバー 検 索 結 果 画 面 7.4.3 お 知 らせ 利 用 者 機 能 ( 7.4 画 面 遷 移 図 (Web 画 面 ) 7.4.1 お 知 らせ 管 理 機 能 TOP お 知 らせ 一 覧 画 面 (1.8) 参 照 人 数 を お 知 らせリストタブ を 参 照 人 数 画 面 (1.8) 削 除 ボタンを 新 規 作 成 ボタンを お 知 らせリストタブ を 新 規 作 成 画 面 (1.7) 修 正 ボタンを お 知 らせリストタブ を 編 集 画 面 (1.9)

More information

確 定 申 告 書 作 成 システム 操 作 手 順 書 ~ 個 人 利 用 者 向 け 操 作 説 明 書 ~ 平 成 27 年 1 月 JA 長 野 県 営 農 センター ( 株 ) 長 野 県 協 同 電 算 目 次 1.システムの 起 動... 1 ... 1 ... 2 2.ログインとログアウト... 2 ... 3 ...

More information

本 操 作 説 明 書 について 本 操 作 説 明 書 は 物 品 電 子 調 達 システム 入 札 参 加 資 格 審 査 申 請 についての 操 作 を 説 明 したものです 動 作 環 境 本 アプリケーションは 以 下 の 環 境 にて 動 作 致 します OS 日 本 語 Microso

本 操 作 説 明 書 について 本 操 作 説 明 書 は 物 品 電 子 調 達 システム 入 札 参 加 資 格 審 査 申 請 についての 操 作 を 説 明 したものです 動 作 環 境 本 アプリケーションは 以 下 の 環 境 にて 動 作 致 します OS 日 本 語 Microso 兵 庫 県 物 品 電 子 調 達 システム 物 品 関 係 入 札 参 加 資 格 審 査 申 請 ~ ~ 平 成 27 年 12 月 兵 庫 県 本 操 作 説 明 書 について 本 操 作 説 明 書 は 物 品 電 子 調 達 システム 入 札 参 加 資 格 審 査 申 請 についての 操 作 を 説 明 したものです 動 作 環 境 本 アプリケーションは 以 下 の 環 境 にて 動

More information

目 次 機 能 -------------------- 3 運 用 上 の 注 意 -------------------- 4 処 理 手 順 -------------------- 5 画 面 説 明 ログイン -------------------- 6 直 送 先 選 択 1 -----

目 次 機 能 -------------------- 3 運 用 上 の 注 意 -------------------- 4 処 理 手 順 -------------------- 5 画 面 説 明 ログイン -------------------- 6 直 送 先 選 択 1 ----- DONKEL order system 御 利 用 ガイド お 得 意 様 : 様 電 話 : ご 担 当 者 様 : お 得 意 様 ID: パスワード: * 変 更 希 望 の 方 はP4をご 覧 ください ドンケル 株 式 会 社 目 次 機 能 -------------------- 3 運 用 上 の 注 意 -------------------- 4 処 理 手 順 --------------------

More information

ご 利 用 の 前 に 手 順 初 回 ご 利 用 時 に 必 ずご 確 認 ください ご 利 用 の 前 に (ご 利 用 環 境 の 確 認 ) P アクセス 方 法 (IMAGE WORKSサイトへアクセス) P 初 期 設 定 (JREのインストール) P

ご 利 用 の 前 に 手 順 初 回 ご 利 用 時 に 必 ずご 確 認 ください ご 利 用 の 前 に (ご 利 用 環 境 の 確 認 ) P アクセス 方 法 (IMAGE WORKSサイトへアクセス) P 初 期 設 定 (JREのインストール) P 大 容 量 ファイル 共 有 送 受 信 サービス 簡 易 操 作 マニュアル - スタンダードモード 用 - ご 利 用 の 前 に ご 利 用 前 に 必 ずご 確 認 ください 手 順 ご 利 用 の 前 に (ご 利 用 環 境 の 確 認 ) P アクセス 方 法 (IMAGE WORKSサイトへアクセス) P 初 期 設 定 (JREのインストール) P 基 本 操 作 ( 各 種 操

More information

目 次 1. ログイン...3 2. ユーザー 登 録...4 3. TOP...6 4. 職 員...8 (1) 職 員 の 名 刺 表 示...8 (2) 職 員 の 名 刺 一 括 ダウンロード...8 (3) 職 員 の 名 刺 帳 から 検 索...8 5. 検 索...9 (1) 氏 名

目 次 1. ログイン...3 2. ユーザー 登 録...4 3. TOP...6 4. 職 員...8 (1) 職 員 の 名 刺 表 示...8 (2) 職 員 の 名 刺 一 括 ダウンロード...8 (3) 職 員 の 名 刺 帳 から 検 索...8 5. 検 索...9 (1) 氏 名 特 許 取 得 済 み 平 成 26 年 9 月 15 日 株 式 会 社 メディケア 名 刺 ネットクラブ 画 面 説 明 書 1 目 次 1. ログイン...3 2. ユーザー 登 録...4 3. TOP...6 4. 職 員...8 (1) 職 員 の 名 刺 表 示...8 (2) 職 員 の 名 刺 一 括 ダウンロード...8 (3) 職 員 の 名 刺 帳 から 検 索...8 5.

More information

1

1 Excelファイルアクセス 1. 概 要 Excel ファイルアクセスコンポーネントは Microsoft Excel のファイルを 開 いてセルの 値 や 書 式 を 取 得 変 更 したり テーブル 全 体 を 新 しいファイルと して 保 存 したりするために 用 います Excel ファイルアクセスコンポーネントは アプリケーションビルダーのメニューから 以 下 のように 選 びます [コンポーネント

More information

目 次 ログイン 方 法... 3 基 本 画 面 構 成... 4 メールサービス... 5 メールサービス 画 面 構 成... 5 アカウント 詳 細 / 設 定... 6 高 機 能 フィルター... 7 ユーザーフィルター 設 定... 8 新 規 フィルターの 追 加... 8 My ホ

目 次 ログイン 方 法... 3 基 本 画 面 構 成... 4 メールサービス... 5 メールサービス 画 面 構 成... 5 アカウント 詳 細 / 設 定... 6 高 機 能 フィルター... 7 ユーザーフィルター 設 定... 8 新 規 フィルターの 追 加... 8 My ホ 296Cloud マニュアル 1/15 目 次 ログイン 方 法... 3 基 本 画 面 構 成... 4 メールサービス... 5 メールサービス 画 面 構 成... 5 アカウント 詳 細 / 設 定... 6 高 機 能 フィルター... 7 ユーザーフィルター 設 定... 8 新 規 フィルターの 追 加... 8 My ホームページ... 11 My ホームページ 画 面 構 成...

More information

12 星 座 今 日 の 運 勢 占 い CSV 方 式 対 応 プラン 50,000 円 プラン 9,800 円 プラン 占 いコンテンツデータを 一 般 的 なテキストデータ 形 式 であるCSVフォーマットでダウンロード する 方 式 です 占 いコンテンツデータを 一 括 してダウンロードすることができるので あなたのプログラムに インポートして 使 うことができます 1 メディアコンテンツTVのコントロールパネルへログインします

More information

目 次 動 作 環 境 について... 2 土 砂 災 害 情 報 マップとは... 3 更 新 情 報 を 見 る... 4 熊 本 県 の 防 災 災 害 情 報 を 見 る... 5 関 連 サイトのリンク 情 報 を 見 る... 6 用 語 を 調 べる... 7 利 用 上 の 留 意

目 次 動 作 環 境 について... 2 土 砂 災 害 情 報 マップとは... 3 更 新 情 報 を 見 る... 4 熊 本 県 の 防 災 災 害 情 報 を 見 る... 5 関 連 サイトのリンク 情 報 を 見 る... 6 用 語 を 調 べる... 7 利 用 上 の 留 意 熊 本 県 土 砂 災 害 情 報 マップ 操 作 ガイド 平 成 27 年 3 月 目 次 動 作 環 境 について... 2 土 砂 災 害 情 報 マップとは... 3 更 新 情 報 を 見 る... 4 熊 本 県 の 防 災 災 害 情 報 を 見 る... 5 関 連 サイトのリンク 情 報 を 見 る... 6 用 語 を 調 べる... 7 利 用 上 の 留 意 事 項 を 確

More information

参 考 1 無 線 局 情 報 入 力 支 援 ( 基 地 局 と 固 定 局 の 事 項 書 のみに 対 応 ) 無 線 局 情 報 入 力 支 援 機 能 とは 過 去 に 申 請 したデータをダウンロードし 無 線 局 インターネット 申 請 アプリケーション で 利 用 できる 便 利 な

参 考 1 無 線 局 情 報 入 力 支 援 ( 基 地 局 と 固 定 局 の 事 項 書 のみに 対 応 ) 無 線 局 情 報 入 力 支 援 機 能 とは 過 去 に 申 請 したデータをダウンロードし 無 線 局 インターネット 申 請 アプリケーション で 利 用 できる 便 利 な 3-2. 申 請 の 新 規 作 成 3 内 容 確 認 A-4. 申 請 手 数 料 画 面 (もしくは A-6. 申 請 手 数 料 の 前 納 の 申 出 事 項 その2 画 面 ) において 入 力 完 了 ボタンをクリックすると 送 信 画 面 が 表 示 されます ここで 内 容 確 認 ボタンをクリックし 入 力 内 容 を 確 認 します 上 書 き 保 存 しておくことをお 勧 め

More information

目 次 1 概 要... 1 2 動 作 環 境... 1 3 起 動 方 法... 1 4 臨 床 研 修 プログラム 検 索 サイトで 提 供 している 情 報... 2 5 情 報 閲 覧 の 流 れ... 2 6 画 面 構 成... 3 7 メニューについて... 4 7.1 可 変 メニ

目 次 1 概 要... 1 2 動 作 環 境... 1 3 起 動 方 法... 1 4 臨 床 研 修 プログラム 検 索 サイトで 提 供 している 情 報... 2 5 情 報 閲 覧 の 流 れ... 2 6 画 面 構 成... 3 7 メニューについて... 4 7.1 可 変 メニ 臨 床 研 修 プログラム 検 索 サイト 利 用 者 マニュアル 目 次 1 概 要... 1 2 動 作 環 境... 1 3 起 動 方 法... 1 4 臨 床 研 修 プログラム 検 索 サイトで 提 供 している 情 報... 2 5 情 報 閲 覧 の 流 れ... 2 6 画 面 構 成... 3 7 メニューについて... 4 7.1 可 変 メニュー... 4 7.2 固 定 メニュー...

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 問 い 合 せフォームを 作 成 する Copyright Diverta inc. All right reserved. 1 目 次 1. 管 理 画 面 の 説 明 1-1 問 い 合 わせモジュールとは 1-2 機 能 概 要 1-3 基 本 設 定 1-3-1 基 本 設 定 - 管 理 画 面 のアクセス 制 限 - 1-3-2 基 本 設 定 -メール 設 定 - 2. 問 い 合 わせフォームを

More information

目 次 機 能 概 要 -------------------------------------------------------------- 3 1. 配 信 管 理 1. メールの 配 信 履 歴 と 予 約 を 確 認 する -------------------------------

目 次 機 能 概 要 -------------------------------------------------------------- 3 1. 配 信 管 理 1. メールの 配 信 履 歴 と 予 約 を 確 認 する ------------------------------- 月 額 900 円 からはじめるメールマーケティング 一 斉 メール 配 信 サービス 機 能 ガイド 2015/6/1 更 新 目 次 機 能 概 要 -------------------------------------------------------------- 3 1. 配 信 管 理 1. メールの 配 信 履 歴 と 予 約 を 確 認 する ----------------------------------------------

More information

別冊資料-11

別冊資料-11 一 般 競 争 入 札 方 式 工 事 希 望 型 競 争 入 札 方 式 における 技 術 資 料 入 力 システムの 利 用 方 法 について Rev 8.0( 平 成 28 年 3 月 ) 国 土 交 通 省 中 国 地 方 整 備 局 - 目 次 - 1. はじめに... 1 2. 利 用 環 境 及 び 注 意 事 項... 1 3. 入 力 手 順 について... 2 3.1. 技 術

More information

5-2.操作説明書(支店連携)_xlsx

5-2.操作説明書(支店連携)_xlsx お 客 さま 向 け 送 り 状 発 行 システム 5-2. 操 作 説 明 書 ( 支 店 連 携 ) ゆうパックプリントR は 日 本 郵 便 株 式 会 社 がお 客 さまに 無 料 で 提 供 する ゆうパックや 郵 便 商 品 の 送 り 状 をパソコンで 印 刷 するためのソフトウェアです ゆうパックプリントRを 以 降 ゆうプリR と 表 記 します 本 マニュアルは 支 店 連 携

More information

この 章 では 電 子 入 札 システムをご 利 用 いただくための 事 前 準 備 について 説 明 します 事 前 準 備 と して ID 初 期 パスワードの 確 認 初 期 パスワード 初 期 見 積 用 暗 証 番 号 の 変 更 IC カード 登 録 またはICカード 更 新 を 行 っ

この 章 では 電 子 入 札 システムをご 利 用 いただくための 事 前 準 備 について 説 明 します 事 前 準 備 と して ID 初 期 パスワードの 確 認 初 期 パスワード 初 期 見 積 用 暗 証 番 号 の 変 更 IC カード 登 録 またはICカード 更 新 を 行 っ 目 次... 1 1.1 ID 初 期 パスワードの 確 認... 3 1.2 初 期 パスワード 初 期 見 積 用 暗 証 番 号 の 変 更... 6 1.3 ICカード 登 録... 10 1.4 ICカード 更 新... 18 1.5 Internet Explorer の 設 定... 25 目 次 をクリックすると 当 該 ページへ 遷 移 します この 章 では 電 子 入 札 システムをご

More information

1. アクセスする 2. 簡 易 検 索 画 面 (fig. 1) アクセスすると 最 初 に 出 る 画 面 です 検 索 語 入 力 ボックスにキーワードを 入 力 して 論 文 検 索 ボタンをクリックし ます 3. ボックス 下 部 のチェック 項

1. アクセスする  2. 簡 易 検 索 画 面 (fig. 1) アクセスすると 最 初 に 出 る 画 面 です 検 索 語 入 力 ボックスにキーワードを 入 力 して 論 文 検 索 ボタンをクリックし ます 3. ボックス 下 部 のチェック 項 CiNii Articles を 使 う 2013 芳 野 明 / 京 都 嵯 峨 芸 術 大 学 西 洋 美 術 史 博 物 館 学 研 究 室 1. アクセスする http://ci.nii.ac.jp/ 2. 簡 易 検 索 画 面 (fig. 1) アクセスすると 最 初 に 出 る 画 面 です 検 索 語 入 力 ボックスにキーワードを 入 力 して 論 文 検 索 ボタンをクリックし

More information

1. 会 員 情 報 の 照 会 / 変 更 ご 登 録 の 会 員 情 報 の 確 認 および 変 更 できます (1) 左 側 のサブメニューで[ 基 本 情 報 ]を 選 択 すると お 客 様 の 基 本 情 報 が 表 示 します (1) (2) [ 変 更 ] [ご 登 録 回 線 の

1. 会 員 情 報 の 照 会 / 変 更 ご 登 録 の 会 員 情 報 の 確 認 および 変 更 できます (1) 左 側 のサブメニューで[ 基 本 情 報 ]を 選 択 すると お 客 様 の 基 本 情 報 が 表 示 します (1) (2) [ 変 更 ] [ご 登 録 回 線 の Webビリングご 利 用 ガイド ( ) 本 書 は NTTファイナンスが 提 供 しているWebビリングサービスのご 利 用 方 法 をご 案 内 し ております お 客 さまのお 支 払 い 方 法 等 によっては 実 際 の 画 面 と 異 なる 場 合 がございますの で ご 注 意 ください 会 員 情 報 の 変 更 編 もくじ 1. 会 員 情 報 の 照 会 / 変 更 4-1 2.

More information

サポートシステム操作説明書

サポートシステム操作説明書 本 医 療 マネジメント 学 会 第 15 回 九 州 連 合 会 参 加 者 サポートシステム 操 作 説 明 書 (2016/03/01 版 ) 第 15 回 九 州 連 合 会 への 演 題 登 録 と 参 加 申 込 を うためのシステムの 操 作 法 を 説 明 するためのものです 0. システムへのユーザー 登 録 ( 連 絡 先 の 登 録 ) 第 15 回 九 州 連 合 会 ( 以

More information

<4D F736F F D2090C389AA8CA72D92F18F6F2D D F ED28CFC82AF91808DEC837D836A B E838B A815B816A2E646F6378>

<4D F736F F D2090C389AA8CA72D92F18F6F2D D F ED28CFC82AF91808DEC837D836A B E838B A815B816A2E646F6378> 1. 基 本 事 項 1.1. システムで 行 えること デジタルライブラリー では データベース 上 に 登 録 されている 様 々なカテゴリのデータを 検 索 閲 覧 できます データを 検 索 する キーワード 検 索 全 データをフリーワードで 検 索 できます 簡 易 検 索 データの 共 通 項 目 に 条 件 を 指 定 し 全 データを 横 断 して 検 索 できます 詳 細 検 索

More information

1.2. ご 利 用 環 境 1.2.1. 推 奨 ブラウザ Internet Explorer 10 11 Google Chrome(バージョン 32 時 点 で 動 作 確 認 済 み) Mozilla Firefox(バージョン 26 時 点 で 動 作 確 認 済 み) Safari 7

1.2. ご 利 用 環 境 1.2.1. 推 奨 ブラウザ Internet Explorer 10 11 Google Chrome(バージョン 32 時 点 で 動 作 確 認 済 み) Mozilla Firefox(バージョン 26 時 点 で 動 作 確 認 済 み) Safari 7 1. アーカイブデータベースを 検 索 / 閲 覧 する 1.1. データの 検 索 方 法 東 京 アーカイブ では 以 下 に 分 類 されるカテゴリの 画 像 データ 資 料 データを 閲 覧 できます 江 戸 城 浮 世 絵 双 六 和 漢 書 江 戸 東 京 の 災 害 記 録 絵 葉 書 写 真 帖 近 代 の 地 図 東 京 府 東 京 市 関 係 資 料 番 付 建 築 図 面 書

More information

サイボウズ リモートサービス ユーザーマニュアル

サイボウズ リモートサービス ユーザーマニュアル ユーザーマニュアル Copyright (C) 2011 Cybozu, Inc. 目 次 パソコンからのアクセス クライアント 証 明 書 の 登 録... 2 クライアント 証 明 書 を 登 録 する... 2 Internet Explorer 6.0/7.0/8.0(Windows)の 場 合... 2 Mozilla Firefox 3.5/3.6(Windows/Macintosh)の

More information

改 版 履 歴 版 数 日 付 内 容 担 当 V.1.0 2015/4/1 初 版 NII

改 版 履 歴 版 数 日 付 内 容 担 当 V.1.0 2015/4/1 初 版 NII Webブラウザへの インストールマニュアル 2015/4/1 国 立 情 報 学 研 究 所 改 版 履 歴 版 数 日 付 内 容 担 当 V.1.0 2015/4/1 初 版 NII 目 次 1. はじめに... 1 1-1. 本 マニュアルの 目 的... 1 1-2. 本 書 の 範 囲... 1 1-3. 動 作 環 境 について... 1 2. OS: Windows での 証 明 書

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション Android OS 向 け 新 規 インストールガイド 安 心 ネットセキュリティ このインストールガイド( 以 下 本 ガイド )に 従 い アプリケーションをインストールして ください ご 注 意 : 安 心 ネットセキュリティ( 以 下 本 製 品 )は インターネットからアプリケーションを ダウンロードしてインストールします 本 ガイド 中 に 記 載 されている ホームキー メニューキー

More information

Gmail 利用者ガイド

Gmail 利用者ガイド Gmail 利 用 者 ガイド 目 次 1. はじめに... 1 2. Gmail を 利 用 する 前 に... 2 3. 初 めてのログイン... 4 3.1. ログイン... 4 3.2. CAPTCHA の 入 力... 5 4. メールボックスの 説 明... 8 5. メールの 受 信... 9 6. メールの 送 信 返 信... 10 6.1. メールの 新 規 作 成... 10

More information