タグのリンクを無効化するには？

##aタグにはdisable属性がない

Chromeの場合、＜input＞ ＜textarea＞ ＜select＞タグなどはdisabledを書けば非活性になりますが、**＜a＞タグにはdisable属性がないので利きません。**

##aタグのリンクを無効化するには？

“`ruby:css
pointer-events:none;
“`
上記で非活性化することができます。
＜img＞タグも同様です。

##ある条件のときだけ複数の項目を一括で非活性にするには？

そういう場合はJavaScriptを使います。
変更したい項目を＜div＞で囲み、idを付与します。

タグ名で要素を指定することで、項目を複数取得することが出来ます。
【document.getElementById(“ID名”).**getElementsByTagName(“input”)**】

それをFor文で回して各項目ごとにdisable属性や、css.Style属性を付与していきます。

“`ruby:JavaScript
window.onload = function(){
var

技術書展8にて出典していた技術本をBOOTHにて販売開始しました。（対応が遅れてしまい申し訳ありませんでした。。。）

技術書展8にて出典していた技術本「WebRTCとngrokを使用したリアルタイムビデオチャットWEBアプリの作成」 

 

BOOTHにて販売開始しました！

 

継続して販売して欲しいという要望をいただいていたのに対応が遅れてしまい申し訳ありませんでした。

 

本書から得られる内容を下部に記載しておきます。

 

 https://kasata.booth.pm/items/2067296Vuex の初級編 Vue CLI版 #Vue.js #vuex

# 概要
Vuex の初級編的な内容で
Vue CLI で実装例となります。

・ components間で、prop等で
　値を受け渡した時に。反映できない場合がありましたので
　vuexに、変更してみました。
　
# 参考のコード
https://github.com/kuc-arc-f/vuex_sample_1
***

# 構成
Vue CLI
vuex : 3.4.0
vue: 2.6.11

# 参考
https://vuex.vuejs.org/ja/

https://qiita.com/okumurakengo/items/0521049e79f927632cab

# vuex 追加
“`
npm install vuex –save
“`

# package.json
https://github.com/kuc-arc-f/vuex_sample_1/blob/master/package.json

***
# 実装など
　getters, mutations を定義しています。
・store.js
https://github.com/kuc

React初心者が試行錯誤しながらサイト作ってみた（その1）

# つまずいた部分のメモ

## Material-UIはどうやってスタイル変えるの！？
パッと(これが原因で後でエラーが…)調べたところ`makeStyles`と`withStyles`が出てきた

今回は`makeStyles`を使うことにしました．

## makeStyles が使えない事件!!
早速使って見たら以下のエラーが，，，

“`javascript:Header.js
const useStyles = makeStyles({
title: {
flexGrow: 1,
},
});
export default class Header extends.React.Component() {
render (){
const classes = useStyles();//Error
return (…);
}
}
“`

ちゃんと公式サイトで調べたら`makeStyles`はフックAPIだということが判明! <-- ちゃんと調べろ自分 というわけで関数コンポーネントに変更したらできました． ```javas

luma.glへの挑戦

# luma.gl
世の中には多くのWebGLフレームワークが存在します。

高度に抽象化された例では、three.jsが有名だし、PlayCanves、Babylon.js、A-frameなどのゲーム用のフレームワークもよく使われている気がします。

私が注目しているのが、[deck.gl](https://deck.gl/)というUberが出している可視化エンジンで、これのベースとなっているのが、今回注目する[luma.gl](https://luma.gl/)です。

特徴としては以下があるとのこと。
1. シンプルに抽象化されたハイパフォーマンスなデータ可視化のAPIを提供する
2. WebGL1とともに、WebGL2のAPIをサポートすることで、クロスプラットフォームにおける煩雑さを軽減する

deck.glに比べて注目度は低いように思いますが、既にこれをベースとしてエコシステムが生まれています。標準化を目指した志の高いライブラリらしいです。具体的には、以下のライブラリが良く使いそうです。

1.[loaders.gl](https://loaders.gl/) : GLTF

Vue CLI と kintone CLI の共存を探る（JavaScript 編）

`Vue CLI` でセットアップしたプロジェクトで `kintone CLI` を利用したカスタマイズ環境を作る目論見です。
どうにかこうにか形になりました。
ざっくり書いていますので読みづらいかも知れません。

こちらは JavaScript 編です。
TypeScript 編は以下をご覧ください。

[Vue CLI と kintone CLI の共存を探る（TypeScript 編）](https://qiita.com/iShinkai/items/9aa400b1ca0425e452a5)

# 目的

`Vue CLI` で作られるプロジェクトの整然さと `kintone CLI` で行えるカスタマイズの開発やデプロイの簡易性を両立させる。
`@kintone/rest-api-client` を利用する。
`kintone UI Component` は諦める。（`React` でしか動かないので）
場合により `Vuetify` の利用を検討する。

フォーマッティング・lint に関しては以下の方針。
`Vetur` はフォーマットを実行させず、シンタックスハイライ

【JavaScript】For文 VS While文　処理速度はどっちが早い？まさかの結果に…

こんにちは！
今回、Quita初投稿です。
ブログ書いたり、Noteに投稿したことはあったんですが、なんとなくQuitaは敷居が高くて、避けていました（言い訳です…笑）
どうせ書くなら、読者の方にとって価値ある情報を提供していきたいと思っていますので、ご指摘・ご感想いただけると嬉しいです！

本記事では**JavaScript**処理速度の違いについて、調べてみました。

# JavaScriptにおける処理速度の計測方法
JavaScriptには処理速度を計測する方法がいくつかあります。
代表的なものは以下の３つ

## 1. performance.now()を使った方法
今回はこちらの関数を使って計測します。
`performance.now()`はタイムスタンプを返します。
単位はミリ秒で、精度はブラウザによって異なるようですが、Firefoxでは２ミリ秒と書かれています。
[▶︎詳しくはこちら](https://developer.mozilla.org/ja/docs/Web/API/Performance/now)
どのように計測するかというと、ざっくりとこんなイメー

ブラウザ JS で複数ファイルを無圧縮 zip にまとめてダウンロードする

クライアントサイドの JavaScript で、複数ファイルを zip にまとめてダウンロードする方法になります。

サーバーから取得したファイルでも、JavaScript で動的に生成したコンテンツでも、どちらも同様に保存できます。

既に類似記事はあるかと思いますが、自分にとって使いやすいコードを載せようと思います。

# 1. コード

サーバーから取得したファイルを zip にまとめる例です。

ここでは、JSZip という外部ライブラリを使用して zip にします。

ここではファイルの元のディレクトリは考えず、全て同じフォルダに入れて zip にします。

※モダンな JavaScript の書き方をしているため、IE などではトランスコンパイルや Polyfill が必要です。

“`js
(async () => {

// 動的 import が使えない状況の想定
await new Promise(resolve => {

const s = document.createElement(‘script’);
s.onload = () => { r

kintoneでWebカメラの映像を表示して添付ファイルに保管

## 概要
今回調べもので canvas の表示を画像として kintone の添付ファイルに保管できないか調べる機会がありました。試しに kintone アプリを作る際に折角なら canvas に Web カメラ画像を取り込んで保管するまでを実装を思い立ち、今回試してみました。

## Web カメラ画像を canvas に表示する
先ず kintone に実装する前に、html ファイルでWebカメラの表示試験を行います。
id が contents の div 内に、video と canvas を追加します。

“`html

Webカメラの映像をvideoとcanvasに表示

javascript学習(2020/06/23)

###位置情報の取得

“`JavaScript:sample.js
navigator.geolocation.getCurrentPosition(success, fail);
“`
navigatorオブジェクトのgeolocationオブジェクトのgetCurrentPositionメソッド。
このメソッド内の()内には2つのパラメータを含める。1つ目には位置情報が取得できたときに呼び出すファンクション名を、2つ目には失敗したときに呼び出すファンクション名を指定する。

###エラーコード

“`JavaScript:sample.js
error.code
“`

| エラーコード | 説明 |
|:—————–|——————:|
|1|位置情報を取得する許可がない|
|2|何らかのエラーが発生して位置情報が取得できなかった|
|3|タイムアウト|

###Web API(Application Programming Interface)
Wec APIとは特定のデータを取得したり、画像をアップロー

【Nuxt.js】Nuxt文法編：@click

# 前置き
「すごく勉強になる！?」
とコメントいただけた
人気の文法編です?
今回は@click！

**❓どんな時に使うか**
クリックでJSを実行したい時に使います?
使用率は高いのでぜひマスターしてください?

TODOリストをクリックで削除したり
https://note.com/aliz/n/nda7438249ca8
クリックでページ遷移したり
https://note.com/aliz/n/nd9f344e4686f
modalをクリックで開閉したり…！
https://note.com/aliz/n/nd6e771724cd7

# @click
**@click
v-on:click**
どちらでも同じ意味です。
@はv-on:の省略です?

**v-on:hoge**
hogeイベントが起きた時

**v-on:**
DOMイベントの発火時に
JavaScriptを実行?

**v-on:click**
クリックイベントが起きた時に
JavaScriptを実行?

# 実行式を直接記載
**@click=”実行式”**
実行式を直接書きます✍️
ただ通常は次のme

create-react-appでhot reloadが効かなくなった話

会津大学でプログラム書いてる学生です。

備忘録代わりにcreate-react-appでreact書いてた際にhot reloadが効かなくなった話をします。

# もくじ

– [かんきょう](#かんきょう)
– [あらすじ](#あらすじ)
– [しこうさくご](#しこうさくご)
– [たいおうさく](#たいおうさく)

—

# かんきょう

– ubuntu 18.04.4 LTS
– create-react-app 3.3.1
– react 16.13.1 くらい

# あらすじ

久々にcreate-react-appでなんか作るか！と思いコーディング。
この際typescriptも入れよう！と思い途中からTypescriptを導入。
日をまたいで、さぁコーディングするかと`npm run start`したら**ホットリロードが効かない**ことに気づく。
なんかわからんけど効かない。
おそらく途中からtypescriptを導入したので、そのへんで色々あるのかなぁと予想。

# しこうさくご

## ためしたもの

### react-app-rewire-hot-l

【JavaScript】Photon + PlayCanvasを使ってモバイル・デスクトップで動く一人称視点のマルチプレイができる空間を作る【WebGL】

PhotonのJavaScript SDKとPlayCanvasを組み合わせて利用するためのリポジトリです。
大体30分ほどで、ブラウザー上で動く、リアルタイムで位置と回転が同期されているゲームを作ることができます。PlayCanvasとネットワークエンジン PhotonのJavaScript SDKを使用してリアルタイム通信のできる空間を作っていきます。
### 今回作るもの
前回の記事[【JavaScript】 PlayCanvasの公式サンプルを使ってモバイル・デスクトップで動く一人称視点の空間を作る【WebGL】
](https://qiita.com/yushimatenjin/items/4310401a26522ba4d502)の続きとして、リアルタイムで動ける3Dのゲームを作ります。


※ こちらは一つのURLを3画面で開いたものを録画したものです。
今回の完成品となるプロジェクトはこちらです
https://playcanv.as/p/f6yr7YSW/

それでは早速作っていきます
###

適切な型情報を書く

## TL;DR

型情報はこのように書こう。

NG

“`JavaScript
type User = {
id: number;
name: string;
role: string; // ここがダメ
}
“`

OK

“`JavaScript
enum UserRole {
Admin,
User,
Guest,
}

type User = {
id: number;
name: string;
role: UserRole; // 入ってくる値の情報がわかりやすい！
}
“`

## stringとかnumberとか入れるのはやめたい。

TypeScriptを真面目に活用したいならここは意識しておきたい、というメモです。

実際に開発していると、stringやnumberに何が入るのかコードから読み取れない、と思うことがある。

例えば、誰かがUser型を作りroleにstringを入れたとします。

“`JavaScript
type User = {
id: number;

クリックしたところがおしゃれに光るナビゲーションバー 8日目【WEBサイトを作る30日チャレンジ】

# ナビゲーションバーをクリックした箇所にスライドさせてグラデーションをかける

■ポイント
・CSSでグラデーションの処理（linear-gradientを使用）
・JavaScriptのdocument.querySelectorで要素を取得
・offsetLeftでクリックした対象要素の左からの幅をpx単位で（左）へ移動させる
・offsetWidthでクリックした対象要素のWidth（幅）を決定
（説明がわかりずらいかもしれません・・・検証ツールで幅の変化等を見て頂くとわかりやすいです）
offsetLeftの説明はこちらのサイト様を参考にいたしました（わかりやすかった、ありがとうございます）
https://syncer.jp/javascript-reference/element/offsetleft
念の為こちらも載せときます↓
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft
・addEventListenerでクリックされた場所に反応するように指定
・そしてトップバーだけじ

mongooseを使って、dbを一括で消す方法

# 概要
“`zsh
❯ mongo
MongoDB shell version v4.0.3
connecting to: mongodb://127.0.0.1:27017
WARNING: No implicit session: Logical Sessions are only supported on server versions 3.6 and greater.
Implicit session: dummy session
MongoDB server version: 3.4.20
WARNING: shell and server versions do not match
Server has startup warnings:
2020-06-23T01:59:36.690+0000 I STORAGE [initandlisten]
2020-06-23T01:59:36.690+0000 I STORAGE [initandlisten] ** WARNING: Using the XFS filesystem is strongly recomme

tusdとtus-js-client, uppyを使ったファイルアップロードをapache2.4のCentOS7で構築する（http編）

## 目的
– 音の処理をするwebアプリ作っています。
– ユーザの音源をfile uploadしたいので、レジューム可能なMITライセンスのライブラリの`tus.io`を使いたいと思っていました。そのテストです。本当はhttpsとクッキーによるユーザ管理を前提にしているのですが、まずは慣れるためにhttpで動かしてみました。
– `tus.io`は日本語の情報が少ないのですが頑張ってChromeの日本語変換機能を活用しながら動かしてみました。
– Webアプリは[LATS](https://www.usptomo.com/PAGE=20120207AVB) (Linux, Apache, Textfile and ShellScript)で作っているので、tusのデーモンは`tusd`を使います。

## 環境

– CentOS7
– apache 2.4.41
– browser Firefox77 (MacOS)など

## 参考
1. [【tus】動画などの大容量ファイルアップロードに嬉しい「Resumable Upload」が簡単に実現できる。](https://qii

ApolloClient(React Hooks)でMutation後にQueryをRefetchする。

ApolloClientにて、`useMutation`でデータを更新した後に`useQuery`のデータを再取得する方法に関して
ざっと調べた結果です。

# useQueryのrefetch関数を利用する。

`useQuery`関数の戻り値に含まれる`refetch`関数を実行することで、データの再取得ができます。
`useMutation`関数が同一コンポーネント内、もしくはすぐ配下のコンポーネントならば、
こちらの関数を利用すれば事足ります。

“`js
const { data, loading, error, refetch } = useQuery(ANY_GET_QUERY);

const [update, { loading, error }] = useMutation(ANY_SET_QUERY, {
onCompleted() {
refetch();
},
});
“`

[FETCHING DATA > Queries > Refetching – APOLLO DOCS](https://www.apollographql.com/

【JavaScript】html要素の基準フォントサイズを取得する

#html要素の基準フォントサイズ取得
WEBサイトのレスポンシブル対応などで、html要素の基準フォントサイズが知りたくなったときにそれを取得することがあったのでメモ。

“`javascript

let root = document.documentElement; //htmlのルート要素を取得
let style = window.getComputedStyle(root).getPropertyValue(‘font-size’); //ルート要素のcssプロパティを全て取得し、その中からフォントサイズを取得
let stFontSize = parseFloat(style); //float型の数値に変換
“`

#window.getComputedStyleでcssプロパティを取得
“`javascript
let style = window.getComputedStyle(root).getPropertyValue(‘font-size’);
“`
この部分がポイントで、 window.getComputedStyle()の引数に入れたeleme

【1週間】Web ゲームを爆速で開発するために実践したこと?個人開発向け

(内心)
作ったゲームを沢山の人に触ってもらってリアクションが欲しいなぁ～
そうだ、記事投稿して宣伝しよう！

といった**下心で書いた記事です**。すみませんでした 遊んでください?

Web Game 処女作?
シンプルでストレス発散になるゲームが爆誕！
敵さんを吹っ飛ばして 1,000 G 以上を目指してみてね?https://t.co/h8w574aGGQ

★アドバイス急募★
『こうしたらもっと面白くなる』など、ご意見ご感想を頂けると嬉しいっす(〃´∪｀〃)ゞ#今日の積み上げ