[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);
“`
とした。

[Vue.js]ルーティング

HTML

“`html

TOP
USER

“`

Vue.js

“`js
//ルーターインスタンスを作成
var router = new VueRou

vue.jsの使い方の基礎＃４【v-forの使い方色々】

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

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

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

#v-forの基本的な使い方
`v-for`ディレクティブを使用することでアイテムのリストを配列内のデータを使って表示することができます。
`v-for` ディレクティブには、`color in colors`のように　xx in xx 形式の特別な構文が必要です。
`colors`はソースデータの配列、`color`は繰り返される配列要素のエイリアス（識別子）です。

“`Index.vue