FFFT

主にwebプロダクト開発に関連する話をつらつらと

Googla Apps Scriptでスプレッドシートの対象セルの関数・計算式を取得する

GAS(Google Apps Script)でスプレッドシートの対象セルの関数・計算式の取得方法をまとめます。
結論ですが、Rangeクラスに生えているgetFormula()を使ってあげればOK。単純に値だけ取りたいときはgetValue()。
Rangeで取得したセル範囲の左上のセルを対象に、計算式があれば計算式を、なければ空文字を返却してくれます。

// スプレッドシートの「ツール => スクリプトエディタ」から利用するGAS(Container Bound Script)のプログラム例
// 対象シートの対象セルを選択しておく
const activeRange = SpreadsheetApp.getActiveRange();
Logger.log(range.getValue(), range.getFormula());

Rangeで複数セルを範囲にしている場合、すべてのセルの計算式が欲しいシーンもある。
その際はgetFormulas()を使えばOK。

共に公式ページに十分な説明が載ってるけど、日本語でパッと検索して欲しい情報にすぐにたどり着けなかったので記事に残しました。
「GAS スプレッドシート 計算式 取得」とか「GAS スプレッドシート 関数 取得」とかで検索する人が、「getFormula()使えば良いのね」というのにパッとたどり着ければ幸いです。

さらに詳しくは、公式ページもご覧ください。

・getFormula()
Class Range  |  Apps Script  |  Google Developers

・getFormulas()
Class Range  |  Apps Script  |  Google Developers

1分でAuth0のログイン画面を日本語化

f:id:keyama4:20200513005150p:plain

Auth0はWebアプリケーションやモバイル、Web APIで利用できる認証・認可の仕組みを提供するクラウドサービスです。
Identity as a Service(IDaaS)というやつ。
と思ったら、トライアルページにこんなことが書かれていた。(AaaS?笑)

f:id:keyama4:20200513011155p:plain

Auth0を利用することで、開発者は実装コストやメンテコストをかけずに認証、認可、MFAなどの実装が面倒くさい機能群をダッシュボードから設定、管理ができます。 そんなAuth0ですが、デフォルトの言語が英語になっているので、今回は日本語化の設定手順をまとめます。
実作業時間は1分ぐらいです。

何もいじっていなかったら初期状態で下記のログイン画面が表示されていると思います。

f:id:keyama4:20200513012613p:plain

日本語化していきます。

Default Languageを「Japanese(ja)」に

右上のアカウントメニューから「Settings」をクリック。

f:id:keyama4:20200513013835p:plain

ページ最下部のLanguagesからDefault Languageを「Japanese(ja)」に設定します。 キャプチャの数字順にクリックしていくとスムーズに設定できます。

f:id:keyama4:20200513013931p:plain

エクスペリエンスを「Classic」から「New」へ

左側のメニューから「Universal Login」をクリック。

f:id:keyama4:20200513014231p:plain

SettingsのExperienceで「New」を選択。

f:id:keyama4:20200513014355p:plain

最後に忘れずにページ下部の「Save Changes」をクリックしましょう。

これで日本語化は完了です!
メニューの「Getting Started」から「Try It Now」をクリックして確認してみましょう。 f:id:keyama4:20200513014427p:plain 日本語化されていますね。
こちらの対応でログイン画面以外のユーザー向けの画面も日本語されました。

自分の場合は、Default Languageをjaに変えても一向にログイン画面が日本語化されずにどうしたらよいか迷いました。
公式ページを呼んでも「ExperienceがNewの場合のみ、Default Languageの変更が適用される」とも書かれておらず、「???」でした。
知っていれば1分の作業なので、自分同様に迷った方にこちらの記事が役に立てたら幸いです。

次はログイン画面のカスタマイズ方法をまとめたいと思います。

pyautoguiで変数に持っている値をフォームに入力させる

自作でRPAを開発する際に、よく使われるpyautogui。
クロスプラットフォームで動作するGUIオートメーションのPythonモジュールです。
「ある箇所をダブルクリックする」「キーボードでEnterキーを押す」など人間がPCを触って行うGUI操作と近いことをプログラムで実現できます。

github.com

先日、APIから渡ってきたデータをあるソフトウェアのテキストフォームに入力したいというシーンがありました。
puautoguiはあくまでGUI操作のモジュールであり、例えば「こんにちは」と入力したい場合、愚直にGUI操作で行おうとすると下記のようになってしまう。

  1. かな全角入力に切り替える(自分の環境では「Command + Space」で切り替わるようにしているので「Command + Space」を押すプログラムを書く)
  2. キーボードの「k」を押す
  3. キーボードの「o」を押す
  4. キーボードの「n」を押す
    .....

上記のように、非常にえぐいプログラムを書くことになる。
「こんにちは」ならまだなんとかなりそうだが、「斎藤」など漢字変換が入るともはや再現は不可能でしょう。。。
そもそも、すでにある値をキーボード操作で入力させるための因数分解のような超コストがかかるプログラムを考える必要がありますが、非現実的です。むり。

そこで、クリップボードを利用して変数で持っている値をフォームに入力させます。

import pyautogui as gui
import pyperclip

def input_text(value):
    pyperclip.copy(value)
    gui.hotkey("ctrl", "v")

カーソルが対象のテキストフォームに当たっている状態で、上記の関数を実行すればOK。
GUI操作を自動化させてるPCで他の作業をすることはないと思いますが、クリップボードを使うので、RPAのプログラム実行中のPCで他の作業をすると予期せぬ値がフォームに入力されるリスクがあります。ご注意を。

【1分設定】Visual Studio Codeをターミナルから起動

こんな感じでターミナルからVisual Studio Codeを起動できるようになります。

$ code                                   // 起動
$ code ./PROJECT_ROOT    // プロジェクトを指定して起動

Visual Studio Codeを起動させて、メニューの「View」から「Command Palette...」を選択します。

f:id:keyama4:20200426052024p:plain

「code command」と入力すると表示される選択肢から「Shell Command Install....」をクリックします。

f:id:keyama4:20200426052307p:plain

これでターミナルから code コマンドで起動できるようになりました。1分かからないですね。

puppeteerでフォームのinput要素の値をクリア・リセット

puppeteerはChromiumブラウザをAPIで制御するnode.jsのライブラリです。
デフォルトでheadlessモードで動作し、Cloud Functionsなどのサーバレス環境で動作させることもでき、簡単にクローラAPIの開発が可能です。

ブラウザ操作の自動化では、しばしばフォームの値を入力するシーンがあります。
puppeteerでは、下記のように値の入力を行うためのAPIが提供されています。

await page.type(selector, value);

しかし、すでに入力値が入っているフォームのクリアやリセットを行うためのAPIは提供されていません。
2018年に下記のようにissueが出されましたが、コントリビュータによって却下されています。

github.com

フォームの値クリアには、デフォルト値や動的な変更処理など様々なケースがアプリケーションの要件で存在するため、APIとしての提供は難しいとのこと。

github.com

開発者の提案する値クリアの方法は下記になります。

await page.$eval(selector, element => element.value = '');

evaluateを使って下記のように書くこともできます。

await page.evaluate(selector => document.querySelector(selector).value = '', selector);

$evalが短くてわかりやすいですね。

【2020年度版】Slack通知はSlack AppのIncoming Webhooksを使おう!やり方を解説

f:id:keyama4:20200418144323j:plain

Slackの特定のチャネルにAPI経由でメッセージを送るカンタンな仕組みをSlackではIncoming Webhooksと呼びます。
このIncoming Webhooksは、2020年現在、2通りのやり方があります。

旧方式と新方式です。旧方式は、非推奨です。
下記の公式ページにも明確にdeprecatedの記載があり、将来的に削除する可能性があると名言されているので新方式を使いましょう。

These integrations lack newer features and they will be deprecated and possibly removed in the future.
We do not recommend their use.

api.slack.com

にも関わらず未だにgoogleで検索すると旧方式のやり方ばかりヒットする...
この記事が、新しくincoming Webhooksを使おうとしている人の役に立てれば幸いです。

そもそもIncoming Webhooksってどんなもの?どう使うの?

設定して振り出されたAPIのエンドポイントに対して下記のようなリクエストをPOSTすると設定されたチャネルでSlack Appがメッセージを投稿してくれる仕組みです。

{
  "text": "今週の金曜ロードショーは「ハリー・ポッターと死の秘宝 PART1」だぜ:+1:"
}

こんな感じ。わかりやすくてカンタンな仕組みですね。Slack Appの名称やプロフィール画像は自由に設定が可能です。
f:id:keyama4:20181116000304p:plain

なお、上記のポ●コさんは、金曜ロードショーの公式ページをクローリングして今週の映画を自動通知してくれます。詳細は下記の記事にまとめていますので良ければ見てください。
飛ばねぇ豚はただの豚ですね。リンク先に飛ばねぇやつはとかそういう意味じゃないですよ(ぼそっ)


keyama.hatenablog.com

新方式の手順

手順は知っていれば、5分もかかりません。
まずは下記にアクセスします。
https://api.slack.com/apps

アクセスするとあなたのslackアカウントで管理しているslack appの一覧が下記のように表示されます。
ログインしていない場合は、言うまでもないですがまずはログインしてください。

f:id:keyama4:20200418164627p:plain

右上の「Create App」をクリックして、アプリケーション名と、どのworkspaceに追加するか選びましょう。
アプリケーション名は後からでも変更可能ですので適当でも大丈夫です。
このとき追加したいworkspaceが選択肢に表示されない場合、対象のworkspaceの権限を持つアカウントの認証が切れています。その場合は対象のアカウントでログインし直しましょう。
「Create App」をクリックすると下記の画面が表示されます。

f:id:keyama4:20200418170114p:plain

「Add features and functionality」セクションにある「Incoming Webhooks」をクリックしましょう。

f:id:keyama4:20200418170133p:plain

トグルをクリックして、OffからOnへ。
そのままの画面を下にスクロールすると、「Webhook URLs for Your Workspace」のセクションがあります。
最下部の「Add New Webhook to Workspace」をクリック。

f:id:keyama4:20200421174528p:plain

するとこんな感じで怒られるかと思います。

f:id:keyama4:20200421174758p:plain

「ポ●コ doesn't have a bot user to install」
インストールのためのbot userをそもそも持ってないぞと。
次に何をしたら良いかわかりづらいエラーメッセージなので詰まる方がけっこういそうな印象です。

こちらのエラーは対象のSlack AppのDisplay Nameを設定することで解消されます。
Display Nameを設定すると内部的に有効なbot userが設定されるという感じなのかな。上のエラーメッセージじゃマジでわからないですね。

メニューの「App Home」から「Your App’s Presence in Slack」セクションの「Edit」をクリック。
お好きなDisplay Nameを設定しましょう。こちらの内容は後からでも変更可能です。(デフォルトで設定しておいてくれても良い気がするもんだが...)

f:id:keyama4:20200421175906p:plain

f:id:keyama4:20200421175920p:plain

設定したら作業を戻して、incoming webhookをworkspaceに追加しましょう。
メニューの「Incoming Webhooks」からページ最下部の「Add New Webhook to Workspace」をクリック。

f:id:keyama4:20200421180616p:plain

どのworkspaceに追加するかを選んで、「allow」をクリック。

f:id:keyama4:20200421180659p:plain

そうすると、「Webhook URLs for Your Workspace」に新しく追加したwebhookが表示されます。
これだけです。
「Copy」をクリックして、ターミナルでcurlを実行してみましょう。
こちらの設定画面のとおり、workspace単位でwebhookが追加されます。別のworkspaceにwebhookを導入したい場合は、「Add New Webhook to Workspace」から新たに作ればオッケー。
後はwebhook urlをコピーしてご自分で作っている通知自動化の仕組みに組み込んでいただくだけです。

見た目を変えたい!

メニューの「Basic Information」をクリック。
f:id:keyama4:20200423021152p:plain

ページ中断より少し下の「Display Information」から見た目の変更が可能です。
f:id:keyama4:20200423021641p:plain

アプリケーション名、デスクリプション、背景色、アイコンの4つが設定可能です。
アイコンのサイズは512px以上2000px以下の正方形を用意してください。

Icons must be squares between 512px by 512px and 2000px by 2000px, please!

【2020年度版】FacebookとTwitterのOGPのキャッシュ対応!最新に更新するやり方

先日、時限的なキャンペーンを打った際にLPのOGPを変更したんですが、全然反映されず「あら?」となりました。
OGPは各サービス側でキャッシュしており、「変更したよ!」というのをこちら側から知らせてあげなくちゃなりません。
その際にやった対応をまとめておきます。
作業自体は1, 2分で終わるんですが、自分の場合は広報打った直後なのに「変わらんんんんん」となり、それなりに焦ったので同じようなシーンに直面した方が、この記事を見て少しでも気持ち楽に対応してもらえたら嬉しいです。

そもそもOGPとは

「Open Graph Protocol」の略。
FacebookTwitterなどのSNSでwebページがシェアされた時に、そのページのタイトル、URL、概要、画像をSNS表示向けにカスタマイズして表示させられる仕組みのことです。
LINEでメッセージにURLを貼って送った際に画像やらタイトルやらデスクリプションがそれ向けに表示されるのもOGPが機能しています。
SNSでの拡散を集客の手段にする場合、100%対応した方が良いやつです。

FacebookのOGP更新手順

下記のFacebookのシェアデバッガーにアクセスして更新したいOGPのページのURLを貼り、「Debug」を押すのみです。
※事前にfacebookへのログインが必要です。

https://developers.facebook.com/tools/debug

Debug結果に、最新のOGPの情報が出力されていればオッケー。
出ていなければ、「Scrape Again」を押しましょう。

TwitterのOGP更新手順

Twitterもカンタンです。
下記のTwitterのCard Validatorにアクセスして更新したいOGPのページのURLを貼り、「Preview card」を押すのみです。
※こちらも事前にログインが必要。

https://cards-dev.twitter.com/validator

最新のOGPの情報が出力されていればオッケー。

【注意】更新の反映にはラグがある

最後に注意ですが、上記の手順でキャッシュがクリアされ、最新のOGPを見てくれるようになるのですが反映に数分かかります。
自分は対応後すぐにTwitterのテストアカウントで投稿して確認してみたら、過去のままで「あら?」となりましたが1,2分後に見たら最新のものになってました。