クロップした画像をCloud Storageにアップできなかった 〜HTMLCanvasElement.toBlob()でうまいことBlobを渡せなかった話〜

input した画像を Firebase Storage に保存する実装をする方法を調べたら、大体 `type = “file”`の input タグから持ってくるみたいな見本が出てきますが、自分が触った実装は、少しイレギュラーなやつで、そこで詰まったことを書いときます。
フロントはVue.jsで、バックエンドはNode.jsの実装です。

**結論としては、**`HTMLCanvasElement.toBlob()`**をうまいこと使えてなかっただけでした。**

## 実現したいこと
自分がやった実装では、input から File を直接持ってくるんじゃなくて、[vue-advanced-cropper](https://www.npmjs.com/package/vue-advanced-cropper) っていうパッケージで、画像をクロップする必要がありました。

なので、`getResult().canvas`で返ってくる形式が File じゃなくて、 HTMLCanvasElement[*1](#HTMLCanvasElement) って形式の Object だったの

【React】useEffect の動きを確認する

# useEffectとは
コンポーネントがレンダリングされる際に実行したい処理を制御するための機能。

ちなみにコンポーネントが再レンダリングされる条件は以下である
1. stateが更新されたとき
2. propsが更新されたとき
3. 親コンポーネントが再レンダリングされるとき

### 基本構文
“`jsx
useEffect(() => {
// ① 実行させたい処理
return () => {
// ② ①の処理と対の関係になるクリーンアップ関数（省略可能）
};
}, [依存配列]); // ③ 第１引数の実行タイミングを制御する値
“`

# 依存配列を空配列にした場合
初回レンダリング時の一度だけ①が実行される。
再レンダリングされても実行されない。

– マウント時：①が実行
– アンマウント時：②が実行

“`jsx
useEffect(() => {
// ① 実行させたい処理
console.log(“①”);
return () => {
// ② ①の処理と対の関係になるクリーンアップ関数
cons

Array.reduce()を使ってGSAP3 timeline.to()のチェーンを作る

JavaScriptのPromiseの使い方を解説したMDNのドキュメントに、Array.reduce()を使って複数の処理を直列的に繋げるコードが載っていて、数学のような不思議な記述形式にちょっぴり感動しました。

MDN: [Promiseを使う](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises) — [合成 (Composition)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises#composition)

なるほど。`Something.fn().fn().fn()` …というふうにメソッドチェーンを作れるオブジェクトならこの方式が適用できるのですね。GSAP3の[Timeline](https://greensock.com/docs/v3/GSAP/gsap.timeline())も[to()](https://greensock.com/docs/v3/G

駿河屋の商品ページまたは買取商品ページから同人誌のサークル名とタイトルを取得するブックマークレット GetCircleTitle

#1. はじめに

[GoogleのISBN検索結果から著者名とタイトルを取得するブックマークレット GetAuthorTitle – Qiita](https://qiita.com/mayo00/items/4cfba983de23b0b56369)
[国立国会図書館オンラインのISBN検索結果から著者名とタイトルを取得するブックマークレット GetAuthorTitleNDL – Qiita](https://qiita.com/mayo00/items/0f3e57b76c3df5fcd04b)
の派生版です。

同人誌にはISBNのようなものがないので、タイトルをだいぶ入力して検索しないといけないので、あまり省力化はできず、サークル名の入力を省ける程度です。
大量に同人誌をスキャンするため、わずかでも省力化できるように作成しました。

先の2つのブックマークレットと異なり、検索結果から取得するのではなく、商品ページまたは買取商品ページから取得します。

#2. ソース

ブックマークレット用1行版

“`GetCircleTitle.js
javascript:(funct

【JavaScript】Macrotasks？Microtasks？どういうもの？

# はじめに
JavaScriptには２種類の非同期処理のキューが存在します。
それが、、`Macrotasks`と`Microtasks`です。
それがどういったものかを見ていこうと思います！

# Macrotasksとは
Macrotasksはタスクキューとも呼ばれており、1つずつタスクを実行します。
例えば、`setTimeout`や`setInterval`などのコールバック関数が該当します。
※ジョブキューの後に実行される。

# Microtasksとは
Microtasksはジョブキューと呼ばれており、順番が回ってきたら全てのタスクを実行します。
こちらは`Promise`などが該当します。
※タスクキューのより先に実行される。

# 動きの解説
以下のコードを利用して実行順序がどうなっているかの解説を行います。

“`js
// 非同期処理かつMacrotaskなのでタスクキューに追加
setTimeout(function task1() {
console.log(‘task1’);
});

// Promiseの即時関数を定義
new Promise(f

ブラウザからAWS S3にマルチパートアップロードをする

## はじめに

Webアプリケーションでブラウザから直接S3にマルチパートファイルアップロードをする方法を備忘録的に残します。苦しんでる人の助けになればと思います。

動作する全てのコードはここにあります。
https://github.com/inunekousapon/s3_sts_upload_sample

## やること

– STSを利用したS3への直接アップロード
– マルチパートアップロード

## やらないこと

– マルチパートアップロードの自前実装
– 署名付きURLを利用したオブジェクトのアップロード

## ブラウザからS3に直接アップロードする方法

2つの方法があります。

– 署名付きURLアップロード
– AWS Security Token Serviceを使った方法

通常、署名付きアップロードを使うのが最適な選択肢になると思います。しかし、マルチパートアップロードを選択しようと思うと実装が難しいことがわかりました。

下記は署名付きURLを利用したマルチパートアップロードの記事です。
https://zenn.dev/kujime/ar

JavaScriptを基本からまとめてみた【8】【closest()メソッド】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##「closest」とは

『closest()』は、基本的に親要素を取得することができるメソッド。
ただし、検索性と高速性を兼ね備えているのが特徴で、指定した「タグ・属性」を持つ親要素を瞬時に探し出せる。

##「closest」の使い方
#### 直近の親要素を「closest」で取得する

一般的な記述方法としては、【要素.closest(セレクタ)】のように対象要素へセレクタを指定する。

“`sample.html

• 項目１
• 項目２
• 項目３

three.jsでVRツアーを作成する

https://qiita.com/im02kai/items/31fa6cfc8e50855bebff

の続きです

Aframe や　panolens.js の方がレスポンシブルで使いやすいが
ビデオやcanvasと組み合わせ場合、複雑になるのでthree.jsから作った方が
デバッグしやすいと考えて、作成

#参考
https://threejs.org/examples/webgl_panorama_equirectangular.html
https://threejs.org/examples/webgl_geometry_terrain_raycast.html　 の　function onPointerMove( event )

#raycastで座標を取得

webgl_panorama_equirectangular.html を基に
変更

“`javascript:webgl_panorama_equirectangular.html
let mesh;
let group;
const raycaster = new THREE.Raycas

Unityを利用してthree.js用のパノラマ画像を作成する

VRツアーをthree.jsで作成しようとサンプル素材を探したところ
１フロア各所のパノラマ画像が全然なく
Unityを利用してパノラマ画像を作成しました

#インストール
Unity2020.3
Unity Recorderをpackageから
部屋のアセットを購入、インポート

#シーン設定
ライティングやマテリアルの設定で何度も録画するため、
タグ機能を使い複数の場所を同時に出力できるようにする
タグをr1 – r7までつくり
カメラの複製、位置移動、タグ設定を繰り返す

#Unity Recorder設定
![rec.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/15dc3f93-e09f-67a9-72a9-c4f7c1d65c48.

[JavaScript]Promiseで簡単に非同期通信を実現する…！

# はじめに
個人的に非同期通信にはニガテ意識がずっとありました。
そこで、`Promise`というものを知り、それを理解することで、非同期通信も併せて理解できました！
ここでは、Promiseの使い方を知って、JSの非同期通信の実装方法を学びながら併せて非同期通信についても理解しましょう！

# Promiseとは
Promiseとは、`非同期処理をより簡単に、可読性が上がるように書けるようにしたもの`です。
「非同期処理」と「コールバック処理」を組み合わせはよく使うのですが、構造が複雑化して可読性が低くなる欠点がありました。そこで誕生したのがPromiseです。

## 使い方
基本的な使い方は以下の例の通りです。引数は`resolve`と`reject`を取ります。

– **resolve**
– 処理成功時に実行する関数。thenにコールバックする。
– **reject**
– 処理失敗時に実行する関数。catchにコールバックする。
– **finally**
– Promiseオブジェクトが処理され終了する前に実行される処理。
– 引数を

Node.js 16.6.0からArray.at()が使えるようになった

# Changelog
https://github.com/nodejs/node/blob/master/doc/changelogs/CHANGELOG_V16.md#16.6.0

# Reference
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at

# `.at()`とは
– `-1`を渡すと末尾の要素を、`-2`を渡すと末尾から2番目の要素を返す、ブラケット`[]`の拡張。
– `Array[Array.length – 1]` が `Array.at(-1)`のように書ける。簡単。嬉しい。
– 去年の11月からTC39 Processの`Stage 3`に格上げされ、`Chrome 92` および `Firefox 90`から利用可能となっている。
https://github.com/tc39/proposal-relative-indexing-method

# その他の提案
もっとシンプルに自由に配列にアクセスしたい、という思

javascriptでリテラルなArrayの前はセミコロンが必要です。

表題の通りなのですが、なぜ今まで一度も引っ掛からなかったんだろう？という奇妙だけどありそうなエラーに引っかかったので共有します。まあ、セミコロン省略しないで必ず書く人は引っかからないでしょう。

一部抜粋ですがこのコードは`Uncaught TypeError: Cannot read property ‘forEach’ of undefined`のエラーになります。

“`javascript
form.target = ‘ServiceItemForm’

[
{ name: ‘shop_id’, value: this.props.currentShop.id },
{ name: ‘category’, value: category },
{ name: ‘sub_category’, value: sub_category },
{ name: ‘name’, value: name }
].forEach(item => { //ここでエラー！
….
})
“`

どう見てもちゃんとしたArrayだしなんでだ？と思ったのですが、詳しく読み

素のJavaScript（node）だけでmicroCMSのデータを全て取得してみた

例えばNextJSのビルド前だったりGatsbyJSのgatsby-node.js(nodeしか使えないページ)、ライブラリが使えない、などの何らかの形で素のJSだけでお手軽にデータを取得したい時があります。

microCMSがそのケースでした。その時に少し工夫が必要だったので知見としてコードを載せてみました。

## GETのデフォルトが10件までしか取得できない
通常は以下のようなコードで取得すると思います。

“`node.js
const axios = require(‘axios’).default;
require(‘dotenv’).config({ path: ‘../../.env’ }); // package.jsonから動かす場合はpathが通っていると思われるので不要。必要であれば.envのあるファイルの相対パスを記載

const getMicroCMSdata = async() => {
const url = `https://hoge.microcms.io/api/v1/hoge`;
const apiKeyHeaderOption

[Vue.js]トランジション

“`HTML

“`

cssは好きに書いてね

“`Vue.js
var fff = {
data: function (

vue.jsの使い方の基礎＃５【v-onの使い方】

ドキュメントに沿って手を動かしたことを自分用教科書として書いていきます（イベントハンドラの部分）
[公式ドキュメント](https://v3.ja.vuejs.org/guide/list.html)とやっていることは基本的に同じです。

Vue.js基礎知識に関する記事を随時更新しています一覧はこちら。もしよければ参考にしてください。

https://qiita.com/kty000/items/c919e01fc0c118098eb9

#v-onの基本的な使い方
`v-on`ディレクティブを使うことで、DOM イベントの購読、イベント発火時の JavaScript の実行が可能になります。

“`.vue

+1

ボタン押下数 ： {{ counter }}

—　以下略　—
“`

##メソッドを呼びたいとき
先ほどの例では、１づつ加算していく簡単な処理なのでいいですが、

[Vue.js]グローバルフック関数

“`html

USER

“`

“`Vue.js
var router = new VueRouter({
routes: [
{
path: ‘/users’,
component: {
template: ‘

ユーザーページです

‘
}
},

{
path: ‘/top’,
component: {
template: ‘

トップページです

‘
}
},
]
})

router.beforeEach((to, from, next) => {
// ユーザー一覧ペ

マークアップエンジニアがReactを使って簡単なアプリケーションを作った話

# はじめに
私は実務でReactはおろかVanilla JSすら書いたことありません（JSXは書いたことある）
jQueryチョットデキル、くらいのレベル感です。
今回作ったアプリケーションも、強い人達からしてみれば酷いものだと思います。
ですが、先日「[ヘタクソなコードを書いてもいい](https://satoru-takeuchi.hatenablog.com/entry/2021/07/11/230232)」という記事を読み、内容に感銘を受けたので今回公開まで至りました。

# 私のスキルセット
HTML, CSS（マークアップエンジニアなので一応実務レベル）
JavaScript（Class構文、非同期処理は雰囲気）

# 作ったのも
目覚ましアプリ
[Alarm App](https://elated-jennings-a0bef5.netlify.app/)（iOSでは音が鳴りません）
![alarm_app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3443/105a0297-3b7

（要管理者権限）組織のリソースを一部のユーザーとカレンダー上で管理

# はじめに
組織のリソース（会議室や貸し出し機器等）をカレンダー上で予約できるようにすることは、公式ページ

[カレンダー リソースとは](https://support.google.com/a/answer/1686462?hl=ja)

に従って行えばできるようになります。ただし、この方法では組織の全ユーザーが組織のリソースへアクセスできるため、教育現場を例に取ると生徒や学生からリソースの予約状況が見えてしまいます。

この記事では、組織のリソースを一部ユーザーとだけカレンダー上で管理するために必要な設定についてまとめます。

ここでの設定により、例えば「生徒がカレンダーに予定を追加する際に会議室のリソースは表示されず、教員の場合のみリソースが表示され、リソース予約状況も生徒のカレンダーには表示されない」ということが可能になります。とはいえ、頻繁に行うオペレーションではないので簡単に要点のみをまとめておきます。

# 設定のポイント

1. 管理コンソールの「アプリ>Google Workspace>カレンダーの設定>全般設定」で「リソース予約の許可」を**オフ**
2. 設定

GASでアプリケーションを作成する際のフォーマット

GASのアプリケーションを作成する際に
– リンククリックでの画面遷移
– ボタンをクリックでの画面遷移
を作成するのにかなりの時間を費やしました。

doPostで受け取るとCORSエラーやsameoriginで下記のようなエラーがでてきます。

“`
Access to XMLHttpRequest at ‘https://script.google.com/macros/s/********/exec’ from origin ‘https://www.bugbugnow.net’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
“`

“`
Refused to display ‘https://script.google.com/’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.
“`

これを回避するためにdoGetでやる

iOS11~12台のSafariでは、landscape時かつアドレスバー展開時に下部に50pxのスクロール可能領域が発生する

##タイトル通り
about:blankのページを開き、html・body要素のheightに関わる数値を0pxに指定、`overflow: hidden;`とした状態であれど、タイトルのような現象が発生する。
ちなみに本記事はただの備忘録です。

##どうしたか

プロダクトの仕様上、

– `document.body.scrollHeight === innerHeight`でありたい
– `scroll`や`touchmove`の差し止めをすることはできなかった

という条件があったため、妥協の下

“`js:sample
const scrollPrevent = () => {
if (window.pageYOffset > 0) window.scrollTo(0, 0);
}
window.addEventListener(“touchend”, scrollPrevent);
“`
とした。