Blog
ブログ

2020年09月28日

第16回社内勉強会

 

8月最後の金曜日であるこの日、16回目となる勉強会が開催されました。

 

テーマは「ApexコントローラとLightningコンポーネント」、そして、「Puppeteer」でした。

どちらも一から説明してくださったので、とてもわかりやすい説明会になりました。

 

ApexコントローラでLightning コンポーネントを作成してみよう

salesforceのApexコントローラを利用することで、Lightning コンポーネントを作成することが出来ます。 作成手順は以下の通りです。

1. 開発者コンソールを開きます。
2. [File] | [New] | [Lightning Component] を選択します。
3. コンポーネントに名前を付けます。
4. [Description ] 項目を使用してコンポーネントの詳細を追加します。
5. [Component Configuration] セクションでオプションを選択します。
※この設定により、Lightning ページや Lightning コミュニティページ、または Lightning Experience や Salesforce モバイルアプリケーションのクイックアクションやナビゲーション項目など、特定の用途のコンポーネントまたはアプリケーションを簡単に作成できます。(Lightning バンドル設定)
6. [Submit] をクリックして、コンポーネントを作成します。

コンポーネントのバンドル

Lightning コンポーネントでは、以下のバンドルが含まれています
・コンポーネント・・・バンドル内の唯一の必須リソース。
・CSS スタイル・・・コンポーネントのスタイルが含まれます。
・コントローラ・・・コンポーネント内のイベントを処理するクライアント側コントローラのメソッドが含まれます。
・設計・・・Lightning アプリケーションビルダー、Lightning ページ、コミュニティビルダー、または Flow Builder で使用するコンポーネントに必要なファイル。
・ドキュメント・・・説明、サンプルコード、およびコンポーネント例への 1 つ以上の参照
・レンダラ・・・コンポーネントのデフォルトの表示を上書きするクライアント側レンダラ。
・ヘルパー・・・コンポーネントのバンドル内の JavaScript コードからコール可能な JavaScript 関数
・SVG ファイル・・・Lightning アプリケーションビルダーまたはコミュニティビルダーで使用されるコンポーネントのカスタムアイコンのリソース。

式の使用

式を使用すると、計算を行ったり、コンポーネントマークアップ内のプロパティ値やその他のデータにアクセスしたりできます。
構文例:
  • {!expression}
  • 値プロバイダ

    オブジェクトがプロパティやメソッドをカプセル化する場合と同じようなやり方で関連する値をまとめてカプセル化します。
    ・v (View) :コンポーネントの属性セット。
    ・c (Controller):コンポーネントのコントローラ。

    コンポーネントのイベント処理

    ハンドラコンポーネントのマークアップで < aura:handler > を使用します。
  • < aura:handler action="{!c.doInit}"/ >
  • 初期化時のアクションの呼び出し

    コンポーネント:
  • < aura:handler name="init" value="{!this}" action="{!c.doInit}"/ >

  • コントローラ:
    ({
      doInit: function(cmp) {
      }
    })

    Apex サーバ側コントローラの作成

    1. @AuraEnabled アノテーションをメソッドに追加して、メソッドをサーバ側アクションとして公開します。
    public with sharing class CreateRecordController {
      @AuraEnabled
      public static String create(Id sampleId) {
       return null;
      }
    }
    2. controller システム属性を タグに追加して、コンポーネントをコントローラに結び付けます。
  • < aura:component controller="CreateRecordController" implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" >

  • Apex コントローラへのデータの受け渡し
    action.setParams(); でサーバ側コントローラに渡されるデータを設定します。
    var action = cmp.get("c.create");
    action.setParams
    ({
    "sampleId": cmp.get("v.recordId")
    });

    Apex サーバ側コントローラからデータを返す
    返されるデータ型
    単純 — String、Integerなど基本の型
    sObject — 標準オブジェクト型とカスタムオブジェクト型
    Apex — Apex クラスのインスタンス
    コレクション

    クライアント側のコールバック
    action.setCallback(); でクライアント側コントローラにコールバックを設定し、サーバ側のアクションが完了したときにコールされるようにします。

    action.setCallback(this,function(response) {
      var state = response.getState();
      if (state === "SUCCESS") {
      }
    })

    サーバ側のアクションのキュー配置
    $A.enqueueAction(action); でサーバ側コントローラのアクションがアクション実行キューに追加されます。


    公式からのサンプルコードやサイトで、Lightning コンポーネントの使い方や仕組みなどを分かりやすく説明してくれました。

    puppeteerの基礎

    Puppeteerとは、ブラウザで行う処理を自動化できるツールです。

    ブラウザで行える色々なことをコマンドライクに行うことができます。

    URLに遷移
    await page.goto(URL);
    ボタンクリック
    await page.click('セレクタ');
    入力
    await page.type('セレクタ', '入力内容をここに入力する')
    情報の抽出
    text = await page.$('セレクタ'); newsStr = await page.evaluate(text => text.textContent, text);
    表示待ち
    await page.waitForSelector('セレクタ', {visible: true}); await page.waitFor(3000);
    キーボードタイプ
    await page.keyboard.press('Enter');
    セレクターを利用すれば、簡単に特定のDOM要素を取得することができます。 これを利用すれば、あらゆるサイトの操作を自動化することができます。

    利用

    社員による応用例の紹介として、スクレイピング、およびニュースタイトルの形態素解析による頻出語句の解析が行われました。
    形態素解析ライブラリjanomeを利用して、形態素解析、出現頻度の解析が紹介されました

    このページの先頭へ