JavaScript関連のことを調べてみた2021年07月13日

初心者のための静的サイト・ジェネレーター・ガイド①

今回からは、色んな種類がある静的サイトジェネレーターについて
それぞれご紹介していきたいと思います:mega:

静的サイトの世界は、HTMLやCSS、時にはJSを超えて発展していますが、静的サイトジェネレーターの進歩がこのことに大きく貢献しています。

著者：Thom Krupa@thomkrupa 2020年11月18日
原文：https://bejamas.io/blog/static-site-generators/


急速に進化しているJamstackのエコシステムと静的サイトジェネレーターは、そのアプローチとツールに大きな関心が寄せられています。まだ主流にはなっていませんが、VCがこの分野の企業への投資を競うことで、より広く普及する道が開かれるのは確かです。

静的サイトジェネレーターを使用することの利点は、スピード、セキュリティ、スケ

[Rails]ローディング(ロード画面)の実装

おしゃれなサイトはローディングをよく実装していますので、今回はポートフォリオにて実装してみました。

思ったよりかんたんに実装できて、サイト全体の雰囲気がアップするのでおすすめです！

参考にしたサイトは以下で、「1.【サンプル】ローディング（テキストだけでふわっと）」をRailsのアプリケーションに落とし込んで解説していきます。
[【jQuery】 ローディング、実装サンプル集](https://125naroom.com/web/3835)

#開発環境

> ruby 2.6.3
> Rails 5.2.6

#実装方法

今回はHTMl,CSS,JavaScriptを使ってローディングを実装していきます。
ではいってみましょう〜！

#ビュー
まずはビューから、このビューのid名、class名に対してCSSやJavaScriptをあてていきます。

今回はhomes/topで実装。

`1番上の行`から記述していってください。

“`erb:views/homes/top.html.erb

Google Spreadsheet: TrelloのURLからカードのタイトルをセルに表示する方法

Google SpreadsheetのセルにTrelloのカードのURLを入力したら、そのURLからTrelloカードのタイトルを取得する方法です。

## Trello APIのキーとトークンを取得する

Trello APIを使ってカードの情報を取得するので、Trello APIのキーとトークンが必要です。

キーは下記URLから取得して、控えておきます:

https://trello.com/app-key

トークンは、上のページで手動生成し、控えておきます:


## Google App Scriptに`TRELLO`関数を作る

Google Spreadsheetには、セルで使える関数をJavaScriptで実装できる機能があるので、`TRELLO`という関数を実装します。この`TRELLO`関数は第一引数にTrelloのカードURLを与えると、Tre

YouTube公式のJavaScriptサンプルを試そうとしてうまくいかない。

YouTubeソムリエAI の作成のため、YouTube公式の「JavaScript コード サンプル」を試してみます。この記事ではうまくいっていません。。。お分かりになる方、お知恵を拝借したく。。。

（背景）「SPARKS」という「アイデアのプロトタイピング支援に特化したクラウドファンディング」にプロトアウトスタジオの卒業制作を掲載しています。2021年7月21日まで。よろしければご覧ください。拡散いただけるとうれしいです。

https://camp-fire.jp/projects/view/448374

さて、このサンプルには「API キー」とは別に「OAuth 2.0 クライアント ID」が必要なようです。

https://developers.google.com/youtube/v3/code_samples/javascript?hl=ja

>auth.js スクリプトでは、Google APIs Client Library for JavaScript を使用し、API にアクセスしてユーザー リクエストを承認する方法を示します。このページの以降のサンプ

【JavaScript】str.matchAll(re)はre.exec(str), re.test(str)の最後のマッチ位置を引き継ぐので注意

正規表現が間違えてるのかと3時間ぐらい格闘して10キロ痩せた

# re.exec(str)

普通に使ったら何回実行しても結果は同じ。

“`js
const re = /\d/;
const str = “abc123def”;

re.exec(str)[0] // 1;
re.exec(str)[0] // 1;
re.exec(str)[0] // 1;
“`

正規表現にgフラグをつけると実行するたびに次のマッチの結果が返ってくる。

“`js
const re = /\d/g;
const str = “abc123def”;

re.exec(str)[0] // 1;
re.exec(str)[0] // 2;
re.exec(str)[0] // 3;
“`

マッチするものがなくなったら一旦nullを返してまた最初から始まる。

“`js
const re = /\d/g;
const str = “abc123def”;

re.exec(str)?.[0]; // 1
re.exec(str)?.[0]; // 2
re.exec(str)?.[0]

3Dグラフィックの基礎

#3Dグラフィックの基礎を JavaScript で実践

波紋のシミュレーションをワイヤフレームで表示します。
視点変換、透視変換の基礎が学べます。

“`

```

##文字列にした数値の扱い方の注意点

```main.js
console.log('5' * 3);
// 出力結果：15
// '5'は文字列でも数値であれば計算してくれる

console.log('5' - '3');
// 出力結果：2
// 両方文字列でも数値であれば計算してくれる

console.log('5' + 3);
// 出力結果：53
// +（プラス）の場合は連結になる

console.log(parseInt('5',

クレジットカード利用明細を自動で作るGoogle Apps Script

みなさんはクレジットカードを利用する際、
「利用お知らせメール」機能は利用されていますか？

カード会社によっては決済するとリアルタイムに
利用金額をメールでお知らせしてくれるサービスがあるので安心・便利ですよね！

本記事では、そのメールを利用して
**スプレッドシートに月々の利用明細を自動 & リアルタイムに作ってくれる Google Apps Script** を紹介します。

明細シートの完成イメージはこんな感じ。

## まずはコードから
```javascript
function getPayments() {
// メール検索クエリを作成
const SUBJECT = 'ご利用のお知らせ【〇〇カード】'; // 利用お知らせメールの件名
const ADDRESS = '

firestoreからget()したtimestampがnullになる件

firestoreにcreatedAtやupdatedAtを追加した後に

```
doc(id).get().date()
```

でデータを取ろうとしたら　

```
[
name: "test",
createdAt: null,
updatedAt: null,
]
```

とデータを吐き出してきた!
原因を探っていくとどうやら[こいつ](https://firebase.google.com/docs/reference/node/firebase.firestore.DocumentSnapshot#data)が関係あるらしい
リンク先を参考に

```
doc(id).get().data({serverTimestamps: "estimate"})
```

とうつとうまく行った。
オプションや説明については[こちら](https://qiita.com/1amageek/items/dc3ef8faffa792779d44)の分かりやすい記事を参照することをすすめる！