skysan's programming notebook

コーディングして思ったことなどを気ままに

Cookieが必要なWeb API実行にブラウザのDeveloper Toolsを使う

はじめに

Web APIを実行するときに、Cookieに認証情報を保持している場合、PostmanやVSCodeのREST ClientなどのツールでAPI実行がうまくいかなかった。

ブラウザのDeveloper ToolsからJavaScriptAPIを実行する方法で解決できたので、メモする。

前提条件

  • ログイン後の認証情報がCookieに保存されている
  • 実行するAPICookie情報を参照して、ユーザ認証チェックをしている

実行環境

実行手順

fetchAPIの例

// 例
// 認証情報はCookieに入っている前提
(await fetch("https://hoge.example.com/items/add/123", { method: 'POST' })).text();

参考

JavaScriptでデータ定義とデータアクセス処理を考える

はじめに

  • フロントサイドでデータアクセス処理する場合、以下のような懸念がある(もしくは、そういった経験がある)
    • JSONでデータ処理していてデータ定義が不明瞭
    • localStorageやsessionStorageに直接JSONを保存している
  • こういった問題を解消するため、DAOパターンを考えてみた

機能

  • データモデルクラス
    • JSONを分解し、一致するプロパティのみ保持する
    • 目的:予期せぬデータの格納を除外
    • メリット:IDEで補完機能が効く(VSCodeのインテリセンスなど)
  • DataAccessObject(DAO)
    • メモリやStorage(localStorage, sessionStorage)に保存する
    • 保存や取得したデータを定義したモデルクラスに加工する
    • 目的:localStorage→sessionStorageに仕様変更のようなケースで修正が少なくする

実装

JavaScript DAO pattern with Reflect

参考にしたサイト

LWCにおけるページ遷移とブラウザの履歴の小ネタ

はじめに

LWCで構築されたExperience Builder Siteでブラウザの履歴操作をさせたくないケースがあったので、検証してみた。

方法

  • [NavigationMixin.Navigate](pageReference,[replace])の第二引数をtrueに設定する。

To dispatch the navigation request, call the navigation service’s [NavigationMixin.Navigate](pageReference, [replace]) function. If replace is set to true, the pageReference replaces the existing entry in the browser history so the user doesn’t have to press the back button twice. The default value is false.

引用:https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate_basic

実装例

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class Page1 extends NavigationMixin(LightningElement) {
  
  goToNextPage() {
    this[NavigationMixin.Navigate]({
      type: 'comm__namedPage',
      attributes: { name: 'page2__c' }
    }, true);
  }

}

やってみた

第2引数がtrue(履歴なし)

第2引数がfalse(履歴あり)

所感

  • JSで履歴操作する機会はあまりないが、知識がないと結構詰まる
  • popstateイベントで履歴操作しようとすると、履歴が増えたり、イベント管理が大変だった(内容は割愛)
  • LWCのリファレンスの充実を切に求む
    • Component Referenceにパラメータの説明書いて...

参考にしたサイト

小ネタ:Excel JavaScript APIでシート一覧を作ってみた

はじめに

  • 今更Excel JavaScript APIを触ってみたく、Script Labで遊んでみた。
  • どこでも*1動くので、あると便利な機能を実装してみる。

Script Labについて

Microsoftが出しているOfficeアドイン。 https://appsource.microsoft.com/ja/product/office/wa104380862

Office系APIJavaScriptで操作できる。 用途としては、Officeアドインのプロトタイプ開発向けやAPI学習向けなどの記載がある。

企業によってはOfficeアドインの利用が制限されているが、自分の環境ではこのアドインはインポートできた。

個人的にうれしい点

  • Windows, Mac, Webをサポートしているので、大体どこでも動く(脚注1参照)
    • アドイン内で全て完結するので、ソース公開すれば、コピペですぐ動く
  • JavaScript/TypeScriptで動く
    • VBAではない(大事)
  • 作業用ウィンドウで動作するので、サイドパネルとして実行できる
    • 画面はHTML/CSSで作成できる

作ってみた

シート一覧

機能

  • Excelブック内のシート一覧を表示し、選択したシートを表示する
  • シートが更新されたときは更新ボタンで再描画する

ソースコード

解説というか、お作法

  • APIの使い方はクセが強い。アクセスするオブジェクトのAPIリファレンスをよく読む必要がある。
  • Excelのオブジェクトにアクセスするには、context.sync()をコールする必要がある。欲しい情報をload()で設定し、context.sync()をコールする。

参考にした公式サンプル

  • 公式のコードサンプルがあるので、それを組み合わせて簡単にできた。

learn.microsoft.com

スニペットの公開(GitHubアカウント不要)

  • GitHubアカウントがあれば簡単にGistに公開できるが、今回は利用しない。
  • ShareメニューからCopy to clipboard でどこかにエクスポートする。

注意点

  • Script Lab内のソースコードはブラウザキャッシュに保存されているので、そのうち消える。

スニペットのインポート

  • ハンバーガーメニューのImportからGistのURLか上記のYAMLをコピペで読みこむことができる。

注意点

  • GitHubにログインしていないとGistのURLでのimportに失敗する。
    • そのため、未ログインで利用するには、YAMLをそのままコピペするしかない。

所感

  • スニペットを利用する際に都度Importする必要があるが、短期集中利用するものには結構便利。
    • マクロでがっちり作ったアプリなんかは無理そう。
  • Good bye, VBA & VB Editor.
    • Mac版のVB Editorは酷かった (今は知らない。2019年頃の使用感)

fontawesomeのアニメーションが動かない

はじめに

  • fontawesomeのSpinnerアイコンに回転アニメーションを設定したが、動かない。
  • MacbookChromeでは動かないが、iOSSafariで動いていたので、調査した。
続きを読む

DockerでLWC Dev Serverを起動する

はじめに

DockerのSFDX開発環境にLWC ローカル開発サーバをインストールする。

通常sfdxコマンドからプラグインをインストールだけだが、事前に必要なモジュールがいくつかあり調査したので、備忘録として残しておく。

前準備

skysan87.hatenablog.com

続きを読む

Editor.jsとTailwindCSSのスタイルの干渉を解消する

はじめに

Nuxt.js + TailwindCSSで作成したアプリにEditor.jsを組み込もうとしたところ、headerプラグインがうまく動かなかった。 原因と解決策を検討する。

続きを読む