技術をかじる猫

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

JavaScript (+LWC)のチュートリアル: リバーシを作る(3)

JavaScript (+LWC)のチュートリアル: リバーシを作る(3)

概要

LWC らしくコンポーネント化していきます。

前提知識

前回までの知識

実装

ボードの適用

初期状態はこんな感じ

見ればわかりますが、リバーシのボードは、単純に 1 マス 1 マスのブロックの集まりの繰り返しですので、単純にそれを1コンポーネントにしてみます。

  • src
    • modules
      • reversi
        • column (新規作成)
          • column.css
          • column.js
          • column.html

これを作成します。
基本的に空のテキストファイルで用意します。

続きを読む

CentOS 7 の Apache (+PHP) から、シェルを経由して sfdx コマンドを実行する

Docker に CentOS + Apache + PHP

Dockerfile を作る

CentOS インストールと PHP インストールまで自動化

FROM centos:7
RUN yum update -y && yum clean all

# Repository
# EPEL
RUN yum install -y epel-release

# remi
RUN yum -y install http://rpms.famillecollet.com/enterprise/remi-release-7.rpm

# installs
RUN yum install -y httpd
RUN yum -y install --enablerepo=remi,remi-php81 php php-devel php-mbstring php-pdo php-xml php-gd php-fpm php-mysqlnd php-opcache php-pecl-zip libzip5

EXPOSE 80
ENTRYPOINT ["/usr/sbin/httpd", "-DFOREGROUND"]

起動

コンパイルとコンテナ作成

> docker build --tag develop:1.0 .
> docker run -ti --publish 8080:80 --detach --name develop develop:1.0

http://localhost:8080 で見れるはず

コンテナ番号を確認して

> docker container ls
CONTAINER ID   IMAGE         COMMAND                  CREATED         STATUS         PORTS                  NAMES
bcd685553188   develop:1.0   "/usr/sbin/httpd -DF…"   2 minutes ago   Up 2 minutes   0.0.0.0:8080->80/tcp   develop

ログイン

>  docker exec -it bcd685553188 bash
[root@bcd685553188 /]#

Vim を突っ込んで、確認用画面作成

# yum install vim -y
# cd /var/www/html
# vim index.php

内容は

<?
phpinfo();
?>

あれ?出ない…てかHTTP応答がまんまソースやんけ
モジュールは /etc/httpd/conf.d とか /etc/httpd/modules に入ってるから、 httpd.conf いじって

LoadModule php7_module modules/libphp7.so
AddHandler php7-script .php
DirectoryIndex index.php

コンテナ再起動して再アクセスするも変化なし…?
もしかして php.ini か?とおもったらアタリ

short_open_tag = Off

テメーか原因は…ってことで On で書き換えて再起動。
表示された。

PHP から sfdx コマンドコールする

nodejs インストール

この辺 からインストールコマンドを引っ張る

# curl -fsSL https://rpm.nodesource.com/setup_18.x | bash -
# yum install -y nodejs

すると

Error: Package: 2:nodejs-18.13.0-1nodesource.x86_64 (nodesource)
           Requires: libstdc++.so.6(GLIBCXX_3.4.20)(64bit)
Error: Package: 2:nodejs-18.13.0-1nodesource.x86_64 (nodesource)
           Requires: libc.so.6(GLIBC_2.28)(64bit)
Error: Package: 2:nodejs-18.13.0-1nodesource.x86_64 (nodesource)
           Requires: libstdc++.so.6(CXXABI_1.3.9)(64bit)
Error: Package: 2:nodejs-18.13.0-1nodesource.x86_64 (nodesource)
           Requires: libstdc++.so.6(GLIBCXX_3.4.21)(64bit)
Error: Package: 2:nodejs-18.13.0-1nodesource.x86_64 (nodesource)
           Requires: libm.so.6(GLIBC_2.27)(64bit)

…さいで…

# yum install -y glibc libstdc++

でも状況変わらず…どうも要求ライブラリバージョンが合わないようで…  

yum install yum install https://rpm.nodesource.com/pub_16.x/el/7/x86_64/nodejs-16.17.0-1nodesource.x86_64.rpm

しょうがないから 16 入れるか…

sfdx 入れる

悩むこたぁない…。

# npm install sfdx-cli --global
# sfdx --version
sfdx-cli/7.185.0 linux-x64 node-v16.17.0

インストールされる先は

# ls /usr/lib/node_modules/
corepack  npm  sfdx-cli

つまり直たたきができるはず

# /usr/lib/node_modules/sfdx-cli/bin/run --version
sfdx-cli/7.185.0 linux-x64 node-v16.17.0

php から sfdx を呼んでみる

apache(+PHP) から exec コマンドを実行するとき、Path とかその他諸々空っぽなので、パス設定を行うシェルコマンドを作成しておく。

NPM_PACKAGES="/usr/lib/node_modules"
echo "export PATH="\""\$PATH:$NPM_PACKAGES/bin"\""
npm config set prefix $NPM_PACKAGES" | tee '/etc/profile.d/node-path.sh'

実行結果と確認。

# NPM_PACKAGES="/usr/lib/node_modules"
# echo "export PATH="\""\$PATH:$NPM_PACKAGES/bin"\""
> npm config set prefix $NPM_PACKAGES" | tee '/etc/profile.d/node-path.sh'
export PATH="$PATH:/usr/lib/node_modules/bin"
npm config set prefix /usr/lib/node_modules
# cat /etc/profile.d/node-path.sh
export PATH="$PATH:/usr/lib/node_modules/bin"
npm config set prefix /usr/lib/node_modules

/etc/profile.d は非ログインシェルでも読み込まれる。
apache ユーザから呼べるようにまずは指定(権限委譲まではいらんかも知れんけど、これ専用なので一応…)

# chown apache:apache /etc/profile.d/node-path.sh
# chmod +x /etc/profile.d/node-path.sh

そしたら /var/www/example.sh を作成 ※権限は気をつけて

#!/bin/bash
/etc/profile.d/node-path.sh
sfdx --version
exit 0

/etc/profile.d/node-path.sh は書かなくても読み込まれるとは思うが、一応…)
で、index.php を下記で書き換えます。

<?
$cmd = '/bin/bash /var/www/example.sh';
$output=null;
$retval=null;
exec($cmd, $output, $retval);
echo "Returned with status $retval and output:\n";
print_r($output);
?>

そして画面アクセスすると、無事に下記が表示されました。

Returned with status 0 and output: Array ( [0] => sfdx-cli/7.185.0 linux-x64 node-v16.17.0 )

JavaScript (+LWC)のチュートリアル: リバーシを作る(2)

概要

今回が単純なリバーシの実装と、シンプルな画面表示まで。   画面はこだわったものではなく、単純に文字表示のもの。つまり UI ではなく、ゲームのルール実装を優先します。

前提知識

前回までの知識

目次

  • 概要
  • 前提知識
  • 目次
  • ディレクトリ構造を変更する
  • ロジックの実装
    • まずはリバーシのボードを表示しよう
    • 石を置けるようにしよう
    • 石をひっくり返そう
    • 石が置けない事を通知する
    • ステータス表示
  • ここまでのコードまとめ

ディレクトリ構造を変更する

前回までで LWC を設定しましたはが、「example」ディレクトリって…と思ったのは自分だけか?
ということで、これをまず変更する。

具体的にはこんな感じになっているので

  • modules
    • example
      • app

これをこうしたい

  • modules
    • reversi
      • app

これ自体は簡単なので、とりあえずディレクトリ名を変更しよう。 これだけで、 npm run dev でサーバを起動すると…

500 - Error retrieving view for route "example"

と言われてしまいます。
これは example/app をアプリケーションの起動ルートとして設定されているからですね…

この設定ファイルは lwr.config.json ファイルで、こんな感じで書き換えます。

{
    "lwc": { "modules": [{ "dir": "$rootDir/src/modules" }] },
    "routes": [
        {
            "id": "reversi",
            "path": "/",
            "rootComponent": "reversi/app"
        }
    ]
}

その後再起動してみてください。前回までの画面が見えたと思います。

続きを読む

JavaScript (+LWC)のチュートリアル: リバーシを作る(1)

概要

第一回目は LWC (オープンソース版)のインストールと、基本的使い方まで

前提知識

基本的な JavaScript コードが書ける前提。

目次

  • 概要
  • 前提知識
  • 目次
  • LWC インストール
    • NodeJS のインストール(Windows)
      • 公式サイトからのインストール
      • Chocolatey を使ったインストール
    • LWC の Ubuntu (Ubuntu 22.04.1 LTS)へインストールする
      • pyenv をインストールする
      • NodeJS インストール
    •  LWC のセットアップ
  • LWC を読み解いてみる

LWC インストール

Python3 系統がインストール済みの Windows の場合、WSL にインストールする手もあります。LWC …と言うより Nodejs の関連リソースが Python2.7 を要求してくるためです。
尚、LWC にインストールして起動した場合、ファイル更新だけでは画面が更新されません。どうやらファイル監視処理がキックされないご様子…

NodeJS のインストール(Windows)

NodeJS を Windows にインストールする方法はいくつかあります。
公式サイト からダウンロード・インストールする方法と、Chocolatey を使う方法があります。
MAC 使いなら Homobrew の Windows 版と言えばわかりやすいですかね?

公式サイトからのインストール

https://nodejs.org/ja/

こちらより LTS 版をインストールすればOKです。
インストーラーはイエスマンをしておけば大丈夫ですね。

一つだけ注意点はセットアップ最後の下記画面、「Tools for Native Modules」ではチェックボックスを入れましょう。

インストールダイアログを閉じたあとで追加のインストーラーがコンソールアプリで起動します。これもイエスマンすればOKです。

追加で、Python2.7 もインストールしておきます。
なんで Python かというと、LWC 開発の 一部依存モジュールPython 2.7 に依存してしまっているからですね…。

...パッケージ腐ってんじゃねぇかゴルァとも思わなくない瞬間。

https://www.python.org/downloads/ を参照して、最新の 2.7.XXX をダウンロード&インストールしましょう。

続きを読む

良さげなライブラリの紹介があったのでメモ

trailhead.salesforce.com

具体的に良いなと思ったのが

github.com

使い方はコレ

trailhead.salesforce.com

何をやってるかというと、作業単位を一旦保存実行を待って内部キャッシュし、指定したタイミングで一括保存等をトランザクション制御つきでやってくれるというもの。
Insert してその Id を元に次のデータを…みたいな場合は利用できないが、そうではなく、互いに参照しない複数種類のレコードを生成する場合には非常に有用かな…

【メモ】ECMAScript 仕様輪読会 第25回

esspec.connpass.com

概要

tc39.es

ECMA Script 2023 の仕様書ガチ読みしようぜ☆
という輪読会。

ECMAScript 仕様輪読会 - YouTube

今回は、そのうち Construct 辺りを読もうとしたところで、一旦方針を変えた会でした。
曰く「コンストラクタ読む前にクラス定義からまず読まないと分からなくね?」とのこと。

tc39.es

リンク系

ざっくり内容

GitHub - es-meta/esmeta: ECMAScript Specification (ECMA-262) Metalanguage にてシンプルなクラス定義をパースし、仕様書と照らし合わせて実行し、追いかけながら仕様書を読んでいきます。
その内容は Youtube で公開されていて、以下の Youtube で参照することが出来ます。

www.youtube.com

言語仕様…と言うかランタイムの処理を仕様に合わせて読んでいくと、実は「えっ!?」というようなものが幾つか見つかりました。
深いところを読んでいくので、言語の裏みたいなものが見えてくる…

  1. クラス名の衝突確認を行う処理があるが、この中で Nan/Identifir/undefined などが存在する。
    でもこれはグローバルでしか検証しないので、別スコープならこの名前でクラス宣言できる。
  2. 同じレキシカルスコープで、var は同じ名前で何度も宣言できる。
    しかし、let/const は宣言時の処理系が異なるので、同名を宣言するとエラーになる。
  3. class Hoge {} と宣言したとき、内部仕様的には let Hoge = class {}; と同等の扱いで処理してる。
    だから let Hoge = class {}; Hoge = 1; などが通る。

色々刺激になりますね。隔週で次は 12/20 に開催するとのこと。
面白いので次回も参加しよっとw

ゴールドポイントカードプラスが、家計簿アプリに連携出来ないので CSV 連携する

はじめに

ことの始まりはこの Tweet

クレジットカード嫌いな人は良く「いくら使ったかわからない」という言い方をするが、要するにこの手の人は財布内の残量を見て使い方を考えるタイプな訳です。
逆に言えば、次の補充タイミングまでという短期的な視点でしか計画を立てれないので、財布にあればあっただけ期間丁度で使い切ってしまう。

もちろんこの思考でもお金を貯める事は不可能ではありません。
給料日に「毎月財布に入れるお金は給料のN%」といった割り切りをして、残りを銀行に入れ続ける方法です。
家賃や光熱費、ローンを上回る差し引き分を銀行に入れておけば、貯めること自体は不可能ではありません。

しかし、これは別の言い方をすれば「使えるだけ使ってしまう」ということを意味します。
「使えるだけ使う」のスタンスの場合、「何にいくら使った?」「無駄な出費はない?」が把握できなくなります。
もし使い方を計画できるなら、上記以上に貯める事が出来ますよね?

ならば、財布だけでなく、全収支を集計して俯瞰的に確認できる状況を作るのが最も正しいのです。

つまり 家計簿アプリ かなにかで家計管理するのが貯蓄には正しいわけです。

クレジットカードのススメ

ここではクレジットカードで買い物ををする利点を挙げていきます。

家計簿がつけやすい

クレジットカードでの購入をした場合、クレジットカード会社でその利用履歴が全て残ります。
つまり… 買い物が全てレジットカードなら、クレジットカード会社の履歴=家計簿 になるわけです。

少なくとも支出はこれで集計できる訳ですから、これほど楽なものはありません。

カードによってはポイントがつく

カードによってはポイントがつくものがあり、大抵の場合そのポイントは 1 ポイント = 1 円で使えます。
例えば

  • 楽天カード:カードでの購入金額の 1% と、使い方次第で 10% 以上までレートが上がっていきます。このポイントは楽天での決済や、楽天証券での投資で利用出来ます。
  • ゴールドポイントカードプラス:利用金額の 1% と、ヨドバシカメラでの購入金額の 10% がポイントとしてもらえます。これはヨドバシカメラでの購入時に決済で利用出来ます。
  • 三井住友VISA:Vポイントというものが手に入ります。ナンバーレスでは 0.5% で、年間更新料ありの上位カード*1 なら1%がポイントとしてもらえます。このポイントは提携ショップや、クレジット支払いの金額への充当に充てられます。

こんな感じです。
仮に、日用品・雑貨・食品の一部 などで 3 万円を使ってるとして、これが「ゴールドポイントカードプラス」「ヨドバシ」で買った場合、毎月 3000 円のポイントがつきますよね?
これは 2L のほうじ茶ペットボトル で換算すると 12 本セットがタダになって、追加でそこそこポイントがあるという状況に…

家計簿アプリのススメ

家計簿をつけるにあたって、一番面倒なのが「家計簿の入力」これにつきます。
とは言え、現金決済をしないようにすれば、カード会社の利用履歴で支出が分かります。
では、銀行の残高は?投資している場合、証券会社の収支は?といろいろあると思います。

これを全部連携して一括でやってくれるのが家計簿アプリです。
たとえば以下のようなものがあります。

ただし、最近マネーフォワードMEなどは、無料利用で連携できる先が 4 つまで制限されたみたいですね。
「クレジットカード会社」「銀行」「証券会社」くらいなら良いですが、クレジットカードが2つあるとか、証券会社も2つ、銀行も…となると流石に有料で使わざるを得ませんね(汗

自分は Zaim (+有料プラン)を使ってます。

すると、全体は映せませんがこんな感じで、いつ何にいくら使った等の詳細が出せます。

…エンタメに使いすぎがわかる…では何に使ってるの?

11 月 9 日?

…あー(汗
欲望にまかせて衝動買いしちゃったやつか…

みたいに把握できる訳です。

家計簿アプリ連携の出来ない「ゴールドポイントカード・プラス」

段々本題に入ってきました。

私はヨドバシでお米などの食材、家電、飲み物などを購入しています。
そのため、「ゴールドポイントカード・プラス」をよく使うわけですが、なんとこのカード 家計簿アプリに対応されていない *2 という困ったちゃんです(汗

これでは家計簿アプリの効果半減ですね…

他に連携する方法

が、Zaim など一部の家計簿アプリは、CSV で登録することが出来ます。
そして幸いなことに、ゴールドポイントカードプラスもCSVでダウンロードできるんですね。

CSVをダウンロードしたら、Zaim 等でも「ファイルの入出力」から

「一般的なCSVファイルをアップロードする」を使ってアップロードすれば連携出来ます。

連携前に加工しよう

ただし、ヨドバシのゴールドポイントカードのCSVですと、中身がこんな感じで、「カテゴリ」(食費、雑費、エンタメ、医療費、通信費などの種別)がつけられないのと、「支払元」(ゴールドポイントカード・プラスからの支払いですが、それを指定することが出来ない)が空欄になってしまいます。

アップロードのテストを行った図

これでは分析も面倒になってしまいますね…ということでプログラムを書いてこれを加工してしまいましょいう。

*1:「修行」と呼ばれる年間 100 万の決済をクレジットカード利用があれば、来年以降は年間更新料タダになる

*2:他のカード会社と異なり、独自のセキュリティを儲けているため、連携が出来ない

続きを読む