技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

OSS 版 LWC でWebApp

LWC 勉強 日記

LWC というと、Salesforce の Lightning Web Component が真っ先に浮かぶ人は、Salesforce 界隈の人だと思う。
で、Salesforce プラットフォーム上のフレームワークとして有名ではあるのだけど、実際にはこいつは Opensource としても使える。

因みにこの記事執筆当時の nodejs のバージョンは

$ node --version
v14.17.1
$ npm --version
7.17.0

始め方

と言ってもそんなに難しい話ではない。
nodejs が入ってるなら、大体このコマンドで行ける。

$ npx create-lwc-app account-book

するとインストールウィザードが起動する

⚡⚡⚡⚡⚡  Lightning Web Components  ⚡⚡⚡⚡⚡


? Do you want to use the simple setup? Yes
? Package name for npm account-book
? Select the type of app you want to create (Use arrow keys)
> Standard web app 
  Progressive Web App (PWA) 
  Electron app

当然標準 WebApp を選択

? Do you want a basic Express API server? (y/N) y

express API サーバは、バックエンドで動作させるWebサーバの事。
https://white-azalea.hatenablog.jp/entry/2021/07/14/220816

で、作成したひな型がこんな感じ

f:id:white-azalea:20210719222426p:plain

開発サーバを起動

$ npm run watch と叩くと、開発用のWebサーバ (LWC用)が 3001 ポートで、API サーバが 3002 ポートで起動する。

f:id:white-azalea:20210719222656p:plain

Web サーバ（ポート 3001）にアクセスして存在しないリクエストならAPIサーバにルーティングされるよう設定されているので、API サーバの方のソース(src/api.js)で以下の様に書かれているなら

// Simple Express server setup to serve for local testing/dev API server
const compression = require('compression');
const helmet = require('helmet');
const express = require('express');

const app = express();
app.use(helmet());
app.use(compression());

const HOST = process.env.API_HOST || 'localhost';
const PORT = process.env.API_PORT || 3002;

app.get('/api/v1/endpoint', (req, res) => {
    res.json({ success: true });
});

app.listen(PORT, () =>
    console.log(
        `✅  API Server started: http://${HOST}:${PORT}/api/v1/endpoint`
    )
);

ポート 3002 はもちろん
f:id:white-azalea:20210719223026p:plain

ポート 3001 でも
f:id:white-azalea:20210719223102p:plain

とできる。

続きを読む

本当に軽量で楽なサーバ Express

日記 OSS nodejs

なんかサクッと軽量なものを作りたいなと思った時、やっぱり Node は楽なのです。
てことで見つけたのはこれ

expressjs.com

どれくらい楽かというと、

npm init して npm install express --save して

const express = require('express')
const app = express()
const port = 3000

app.get('/test', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

REST したけりゃハンドラ書けばよくね？ってレベルでシンプル。
因みに app.get, app.put, app.post, app.delete でそれぞれのHTTP動詞が書ける。

static ディレクトリ掘って app.use('/', express.static('static')); を app.listen 直前に書くだけで静的リソースもそのまま公開できるという素敵仕様です。

もっと複雑なものを作ろうと思ったら npm install express-generator -g で作成しましょう。
express --view=jade --css=sass myapp と打ち込めば、必要なてんぷれをしれっと生成してくれます。

view はテンプレートエンジンで、css はスタイルシートの言語指定です。

f:id:white-azalea:20210714220701p:plain

構成もシンプルで分かりやすいのが素敵。

障害耐性がアホみたいに高いDBとKVS

日記 メモ

ネット見てていい名前してるのでピックアップ

まずは高い障害耐性とスケーリングのコクローチDB（ゴキブリDB）。

www.cockroachlabs.com

PostgreSQL として接続して使えるので、使い方が大分楽。
障害耐性も強くて扱いやすい。

もう一つが Voldemort （ヴォルデモート）KVS.

www.project-voldemort.com

名前の由来がハリポタのヴォルデモート卿。
理由がしぶといからという身もふたもないもの。

こちらはKVSだが、同様に障害耐性の高いKVS。

どっちも面白いと言えば面白いが、実用ならコクローチに軍配上がりそう（PostgreSQL互換で扱えるのはありがたい）

Git のTips集決定版

github.com

というか見たままですね。

Git でふとしたタイミングでコレってコマンドを教えてくれる一覧表です。
英語？いえ、安心してください。日本語でも存在してます。

Git に慣れてない方も、それなりに常用する方もお試しあれ！

f:id:white-azalea:20210705200306p:plain

Marp から乗り換えよう！ Markdown スライドのSlidev

自分は個人的に Powerpoint を使いたくない。
なので、ある時期からスライド作成には Marp を使っていたのだが、他にも対抗馬ができたらしいのでやってみた。

Marp とは

Markdown で記述することができるスライドシステム。
実質的に electron で実装されており、要するに JavaScript + HTML5 で実装されている処理系である。

因みに Marp はこちら。 marp.app

VSCode/CLI の他、コアシステムをライブラリとしても利用できる。

markdown で記述し、様々なフォーマットでエクスポートできる。
編集しながら結果出力のプレビューも参照できるので、非常に扱いやすいツールである。

はてさて、Slidev はどうかというと…

Slidev

そして対抗馬となりえるMarkdoenスライドの Slidev について使っていく。
ちょっと使ってみたが、以下の様な特徴があった。

  • vue で拡張できる
  • latex 等の数式サポート

Marp は PDF 化までをきっちりサポートしていたが、意味論的にこちらは PDF はあくまで副次的。
あくまでメインは html 化して web 上のドキュメントとすることを前提としているようだ。

使い分けは必要かもしれないが、個人的にはこれ一本に乗り換えてもいいのではないかというレベルで好感度高かった。

install

npm init slidev すればプロジェクトが開始される。
スライド単位でプロジェクト作っていくスタイルかな？

PS D:\works\sandbox\slidev_sample> npm init slidev
Need to install the following packages:
  create-slidev
Ok to proceed? (y) y

  ●■▲
  Slidev Creator  v0.22.1

√ Project name: ... slidev
  Scaffolding project in slidev ...
  Done.

√ Install and start it now? ... yes
√ Choose the agent » npm
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: vite@2.4.0-beta.2
npm WARN node_modules/vite
npm WARN   vite@"^2.4.0-beta.0" from @slidev/cli@0.22.1
npm WARN   node_modules/@slidev/cli
npm WARN     @slidev/cli@"^0.22.1" from the root project

中略

> dev
> slidev --open



  ●■▲
  Slidev  v0.22.1

  theme   @slidev/theme-seriph
  entry   D:\works\sandbox\slidev_sample\slidev\slides.md

  slide show      > http://localhost:3030/
  presenter mode  > http://localhost:3030/presenter
  remote control  > pass --remote to enable

  shortcuts       > restart | open | edit


[@vue/compiler-sfc] <script setup> is still an experimental proposal.
Follow its status at https://github.com/vuejs/rfcs/pull/227.

[@vue/compiler-sfc] When using experimental features,
it is recommended to pin your vue dependencies to exact versions to avoid breakage.

一通りインストールが終わると、サーバが自動起動する。
f:id:white-azalea:20210701224255p:plain

Ctrl + C で終了します。

続きを読む

Salesforce開発の基礎編8

Salesforce 勉強 資格試験

プラットフォームイベントの基礎

trailhead.salesforce.com

イベント駆動型ソフトウェアアーキテクチャの理解

JavaScript やってるとイベントの概念は分かりやすいかもしれない。

  • イベント駆動型ソフトウェアアーキテクチャの理解
    • イベント駆動は、イベント発生側と受信側に別れ、発生側は適時イベントを垂れ流す。受信側は必要に応じてイベントを受信して処理する。そういう処理モデル
  • イベント駆動型システムのコンポーネント
    • イベント
      ビジネスプロセスにおいて意味のある状態の変化。もしくはそうしたものを扱う情報の単位。
    • イベントメッセージ
      イベントに関するデータが含まれるメッセージ。
    • イベントプロデューサ
      イベントメッセージの公開者。たとえば、発注アプリケーション
    • イベントチャンネル
      イベントを流す場所、イベントのストリーム。
    • イベントコンシューマ
      チャンネル登録者。イベントを受信する側の事。
    • イベントバス
      公開/登録モデルを使用したイベントストリーミングを可能にする通信とストレージのサービス。
  • プラットフォームイベントを使用するケースの例
    • Salesforce ←→ 外部システム のやり取り
      Salesforce 上の製品注文アプリに含まれるトリガが、発注などで発火してプラットフォームイベントを公開する。
      このイベントは イベントバスに流され、登録されてる外部システムがこのイベントを受け取って処理する。
      逆に外部サーバ何等かの通知があればイベントバスにイベントを流し込み、Salesforce 内の対応アプリがイベントバス経由でイベントを受け取る。
    • トリガを利用したイベントメッセージ
      Apex トリガからイベントを publish し、対応する Platform Event Trigger にイベントを通知することもある。
  • プラットフォームイベントの特徴
    • sObject に似てる。カスタム項目を自前で定義できる。
      ただし、これは更新/削除、イベントレコード情報表示といったことができない。
    • ネイティブおよび外部アプリケーションでのプラットフォームイベントの使用
      • イベント公開: Apex, プロセスビルダー, Flow Builder, sObject API (外部サーバ)
      • イベント受信: Apex トリガ, empApi Lightning コンポーネント, CometD (外部サーバ)
  • プラットフォームイベントと他のストリーミングイベントの違い
    他のイベントとして PushTopic イベントや汎用イベントが存在する。
    プラットフォームイベントは汎用イベントに似ているが、より強力なカスタマイズが可能
    • PushTopic イベント : Salesforce レコードの変更をメッセージ受信できる
    • 汎用イベント : 任意のメッセージコンテンツ (ペイロード) を送受信できる
  • プラットフォームイベントは次で利用
    • 事前定義されたスキーマを使用してカスタムイベントデータを送受信する
    • Apex でイベントの公開または登録を行う
    • Salesforce Platform 上かどうかに関係なく柔軟にイベントの公開と処理を行う

プラットフォームイベントの定義および公開

プラットフォームイベントの定義

f:id:white-azalea:20210615211455p:plain f:id:white-azalea:20210615211527p:plain f:id:white-azalea:20210615211629p:plain f:id:white-azalea:20210615211712p:plain f:id:white-azalea:20210615211755p:plain f:id:white-azalea:20210615212116p:plain

  • 「すぐに公開」と「コミット後公開」が選べる。
    すぐに公開は、保存に失敗しようと公開できるが、トランザクションもクソもないので取り消せない。
  • イベントの項かいには Apex からやったり、プロセスビルダーや FlowBuilder からも指定できる。

Apex だとこんな感じでできる。

// Create an instance of the event and store it in the newsEvent variable
Cloud_News__e newsEvent = new Cloud_News__e(
           Location__c='Mountain City',
           Urgent__c=true,
           News_Content__c='Lake Road is closed due to mudslides.');
// Call method to publish events
Database.SaveResult sr = EventBus.publish(newsEvent);
// Inspect publishing result
if (sr.isSuccess()) {
    System.debug('Successfully published event.');
} else {
    for(Database.Error err : sr.getErrors()) {
        System.debug('Error returned: ' +
                     err.getStatusCode() +
                     ' - ' +
                     err.getMessage());
    }
}

EventBus.publish はListで複数同時送信もできる。
Salesforce API からの場合RESTで

/services/data/v45.0/sobjects/Cloud_News__e/
{
   "Location__c" : "Mountain City",
   "Urgent__c" : true,
   "News_Content__c" : "Lake Road is closed due to mudslides."
}

をPOSTするそうな。

続きを読む

RNN で時系列データの予測をやってみる

この辺の続き

RNN を考える - 技術をかじる猫

要するに次の値を予測してもらうという NN ですな
まずは結果から

正弦波にノイズを与えたデータが学習データ青で、先頭 10 件だけはそのまま、11 件目以降を 10 件づつ与えたデータから予測させて作ったグラフが黄色である。

f:id:white-azalea:20210611011350p:plain

ん、まぁなんとなく正しそうな予感はする。
株価みたいな線形データならやれるだろうか…取り込めるデータは1系統なので、特定銘柄特化でならなりそうな気はするが…。

続きを読む