GASでGoogleカレンダーの予定を取得する方法【GAS】

■はじめに

事前にカレンダーに予定を設定しておいてください。

■手順

ソースコードの全量は以下

※「[Googleのメールアドレス]」はそれぞれ置き換えてください。

function calSample(){
var cal = CalendarApp.getCalendarById("[Googleのメールアドレス]");
var date = new Date();
var events = cal.getEventsForDay(date);
for(var i = 0; i < events.length; i++){
var title = events[i].getTitle();
Logger.log(title);
}
}

以下で、Googleカレンダーインスタンスを生成します。

var cal = CalendarApp.getCalendarById("[Googleのメールアドレス]");

以下で、当日の日付を取得します。

var date = new Date();

以下で、当日のカレンダーの予定を全て取得します。

var events = cal.getEventsForDay(date);

上記で取得した予定をFor文でループさせて、タイトルをログに出力しています。

for(var i = 0; i < events.length; i++){
var title = events[i].getTitle();
Logger.log(title);
}

■翌日の予定を取得する方法

ソースコードの全量は以下

※「[Googleのメールアドレス]」はそれぞれ置き換えてください。

function calSample(){
var cal = CalendarApp.getCalendarById("[Googleのメールアドレス]");
var date = new Date();
date.setDate(date.getDate() + 1);
var events = cal.getEventsForDay(date);
for(var i = 0; i < events.length; i++){
var title = events[i].getTitle();
Logger.log(title);
}
}

元々、new Dateで当日の日付を取得していましたが、以下で+1日を設定しています。

これで、翌日のカレンダーの予定が取得できます。

date.setDate(date.getDate() + 1);

GASからSlackにメッセージを送信する方法【GAS】

■はじめに

GASからSlackにメッセージを送信する方法を記載します。

Slackのワークスペースを作成しておいてください。

■Slackアプリの作成

こちらにアクセスし、Slackのワークスペースにサインインする。

※サインインしたら、Slackのワークスペースが表示されるので、別タブでもう一度「こちら」を開く

「Create New App」を押下し、適当なアプリ名とワークスペースを選択してアプリを作成する。

サイドメニューの「Incoming Webhooks」を押下する。

Active Incoming WebhooksをONにする。

画面下部の「Add New Webhook to Workspace」を押下する。

使用するチャンネルを選択して、「許可する」を押下する。

「Copy」を押下する事で、クリップボードAPIで使用するURLがコピーされる。

■GASでメッセージを送信

ソースコードの全量は以下。

※「apiUrl」変数には、「■Slackアプリの作成」手順で取得したAPIのURLを設定する事。

function sendMessage() {
var payload  = {
'text' : "HELLO"
};
var options = {'method':'post', 'contentType':'application/json', 'payload':JSON.stringify(payload)};
var apiUrl = "https://hooks.slack.com/services/XXXXXXXXX/ZZZZZZZZZZZ/YYYYYYYYYYYYYYYYYYYYYYYY"
UrlFetchApp.fetch(apiUrl, options);
}

react-tabsでタブを作成する【React】

■はじめに

ここでは、「react-tabs」というライブラリを使用してタブを作成します。

こちらの公式サイトに書かれているような物が作成できます。

■手順

以下のコマンドで「react-tabs」をインストールしてください。

npm install react-tabs

ソースコードの全量は以下(App.jsに上書きすれば動きます。)

import React from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
class App extends React.Component{
render()
{
var textData = ""
function changeText(e) {
textData = e.target.value
}
function btnClick() {
alert(textData);
}
return (
<div>
<Tabs>
<TabList>
<Tab>Tab1</Tab>
<Tab>Tab2</Tab>
</TabList>
<TabPanel>
<h2>タブ1</h2>
</TabPanel>
<TabPanel>
<h2>タブ2</h2>
</TabPanel>
</Tabs>
</div>
);
}
}
export default App;

ReactをDockerで実行する方法【React/Docker】

■はじめに

ReactとDockerの環境構築は完了している前提で記載します。

まだの方は、それぞれの環境構築を行ってからご覧ください。

■手順

以下のコマンドを実行し、Reactプロジェクトを作成します。

create-react-app dockersample

以下のコマンドを実行し、reactアプリが正常に動作することを確認します。

cd dockersample
yarn start

以下のコマンドで、Dockerfileを生成します。

vi Dockerfile

「Dockerfile」に以下を記載します。

# ベースイメージの作成
FROM node:12.16.1
# コンテナ内で作業するディレクトリを指定
WORKDIR /usr/src/app
# package.jsonとyarn.lockを/usr/src/appにコピー
COPY ["package.json", "yarn.lock", "./"]
# パッケージをインストール
RUN yarn install
# ファイルを全部作業用ディレクトリにコピー
COPY . .
# コンテナを起動する際に実行されるコマンド
ENTRYPOINT [ "yarn", "start" ]

以下のコマンドで、イメージを生成する(ビルドする)

docker build -t sample .

以下のコマンドでdockerを起動する

docker run -it --name sample -p 3000:3000 -v $PWD:/usr/src/app sample

ブラウザで「http://localhost:3000/」にアクセスして、Reactの画面が表示されればOK!

配列と配列で重複チェック【JavaScript】

■はじめに

2つ以上の配列があり、A配列にB配列の要素が重複しているか?重複している場合はどれが重複しているのか?

を調べる方法を記載します。

「filter」関数を使用しての実装になります。

■手順

A配列にB配列の要素重複確認

const arrayA = ['Apple', 'Google', 'Facebook', 'Zoom', 'Slack'];
const arrayB = ['Apple', 'Facebook'];
const result = arrayA.filter(item => arrayB.includes(item));
console.log(result); // ["Apple", "Facebook"]

A配列にB配列とC配列の要素重複確認

const arrayA = ['Apple', 'Google', 'Facebook', 'Zoom', 'Slack'];
const arrayB = ['Apple', 'Facebook'];
const arrayC = ['Google'];
const result = arrayA.filter(item => arrayB.includes(item) || arrayC.includes(item));
console.log(result); // ["Apple", "Google", "Facebook"]

ID指定でオブジェクトを取得する方法【React】

■はじめに

以前、「ボタン押下時にテキストの値を取得する方法【React】」でテキストの変更時処理で変数に値を保持して操作していました。

ここでは、オブジェクトを取得することで、必要な時に最新の値が取得できるようになります。

どちらが良いかは、好みな気もしますが、個人的には、こちらの方法の方がしっくりきます。

■手順

まずは、App.jsのソースコードの全量は以下

import React from 'react';
class App extends React.Component{
render()
{
function btnClick() {
alert(document.getElementById('target').value);
}
return (
<div>
<h1>Hello World</h1>
<input type="text" id="target"/><br/>
<button onClick={btnClick}>ボタン</button>
</div>
);
}
}
export default App;

以下のようにすることで、IDを指定してオブジェクトを取得できます。

document.getElementById('[id名]')

取得したオブジェクトの「.value」でテキストフィールドの場合は入力されている値を取得できます。

環境毎に分けて定数を定義する方法【React】

■はじめに

前回の記事の「定数クラス」に環境毎に分けた定数を定義する方法を記載します。

APIの向き先などで使用することはあると思います。

■手順

プロジェクトは「create-react-app」を使用して作成しておいてください。

※そうすることで、環境を分ける定数が自動で用意されます。

以下のようにConst.jsを作成します。

class Const {
ENV = () => {
if (process.env.NODE_ENV === 'development') {
return {
API_URL: "http://hogehoge.com/",
API_KEY: "aaaaa"
}
} else if (process.env.NODE_ENV === 'test') {
return {
API_URL: "http://hugahuga.com/",
API_KEY: "aaaaa"
}
} else if (process.env.NODE_ENV === 'production') {
return {
API_URL: "http://example.com/",
API_KEY: "aaaaa"
}
} else {
return {
API_URL: "http://aaaaaaa.com/",
API_KEY: "aaaaa"
}
}
}
}
export default new Const();

以下のIF文で環境を判定しています。

process.env.NODE_ENV

上記は、ビルド方法によって値が変わります。

具体的には、以下のように変わります。

実行コマンド NODE_ENVの値
yarn start development
yarn test test
yarn build production

画面読み込み終了後に呼び出す処理【React】

■はじめに

「render」から呼び出すと複数回呼び出されますが、画面読み込み後に「1回だけ呼び出したい」場合の書き方を紹介します。

APIでデータを取得したい場合や、DOMを書き換えたい場合には、ここで処理する方が良いと思います。

■手順

ソースコードの全量は以下

import React from 'react';
class App extends React.Component{
componentDidMount() {
// 読み込み後処理
}
render()
{
return (
<div>
<h1>HELLO</h1>
</div>
);
}
}
export default App;

「componentDidMount」が画面読み込み後に呼び出される処理です。

このなかで、APIの実行などを行いましょう。

GoogleAppScriptとは【GAS】

Google App Scriptとは

GoogleAppScript(GASと呼ばれます)とは、Googleが提供しているプログラミング言語です。

基本的には、JavaScriptと同じ書き方ができます。

GASの利点として、Googleが提供しているサービス(スプレットシートやGmailなど)との連携が容易に行える点です。

(例えば、特定のタイトルのGmailが送られてきたら、スプレットシートに転記するなど)

■GASを使用する前の準備

Googleアカウントを作成しておいてください。

GoogleDriveで、色々作業をします。

■GASの使い方

GoogleDriveでスプレットシートを作成し、開きます。

「ツール」の「スクリプトエディタ」を選択します。

これで、GASを使用する準備ができました。

面倒な環境構築などは一切必要ありません。

■GASの関数実行

「関数を選択」のプルダウンから、実行したい関数を選択し、「スタートボタン」を押下することで実行できます。

ちなみに、初回実行時には、権限確認が表示されますので、画面の操作にしたがって許可してください。

■コンソールログの出力

GASのコンソールログは以下の書き方で出力できます。

Logger.log("コンソールログ");

出力したログは、「command + Enter」を押下するか、「表示」の「ログ」を選択する事で確認できます。

ピュアなJavaScriptで指定のオブジェクトまでスクロールする方法【JavaScript】

■はじめに

ページ内リンク(スヌース)などで、たまに利用したのでその方法を記載します。

Reactを使用する場合など、jQueryなどが使用できない場合があると思いますので、ここではシンプルなJavaScriptで記載しています。

■手順

ソースコードの全量は以下

var targetElement = document.getElementById("ID名");
window.scroll({
top: targetElement.getBoundingClientRect().top + window.pageYOffset,
behavior: "smooth"
});

1行目で、移動したいオブジェクトをID指定で取得する。

「window.scroll」で取得したオブジェクトまでの距離を計測して移動する。