GoogleStreetViewを足踏みで仮想散歩するPGM

JavaScriptからカメラを起動し、カメラの画素変化を検知し、その変化率に応じて、前進・右回り・左回りを判定し、それに応じてGoogleStreetViewの画像を変化させるPGMを作成しました。

以下の手順で使用できます
1. googleApiキーをセット
2. カメラを起動
3. 仮想散歩開始ボタンをクリック
4. 再度仮想散歩開始ボタンをクリック
5. 以後足踏みで前進、左腕を一定時間振っていることで左回り、右腕を一定時間振ることで右回りの操作になります。

ボタンをクリック

これで雨の日でも雪の日でも室内で散歩できますねww

参考にしたサイト
IndexedDBをKey Value Storeとして扱う

## はじめに

自分でPWAのアプリケーションを作成した際、データの保存のためIndexedDBを使いました。
ただ機能的にはLocalStorageで十分だったため、Key Value Storeのように簡単に扱えるようなライブラリを作成しました。

[npm](https://www.npmjs.com/package/indexed-kv)
[github](https://github.com/tkdalic/indexed-kv)

本記事はIndexedDBとは何かと、どのようにKey Value Storeのように使うかを説明します。

## IndexedDBとは

[IndexedDB API](https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API)によると、

> IndexedDB は、ファイルや blob を含む構造化された多くのデータを保存する、クライアントサイドのローレベル API です。

とのことです。
クライアントサイドでデータを保存する仕組みで、以下の特徴があります。

– オブジェ

Yahooニュースに無限ループを見つけた

# Yahooニュースの非同期無限ループ

見つけたYahooニュースの非同期無限ループは`setInterval(checkPosition, 100)`。
どのニュースでもHTMLの`

object更新

日付：

時間：

```

```js:jsonDat

Contextの最適化

# この記事について
この記事では`useReducer`または`useState`と`Context`を使うことで値をグローバルに保持しつつ再レンダリングを減らす方法について解説している。

# Context について

## Context とは
`Context`とは React において複数コンポーネント間で値を共有するための仕組みである。値を間接的に渡すことで`props`による受け渡しを減らし、コード量を減らす事ができる。

## Context の注意点
`Context`を使う事で、コンポーネントの再利用を難しくしてしまったり、可読性が悪くなる可能性があるため、使う時には慎重に使う必要がある。 しかし、contextを用途に合わせて使っていくのは悪くないので、使う時には以下の点に気をつける。

1. アプリケーション内の全てのstateを一つにまとめる必要はなく、責務によってcontextを分けるようにする。(いくつもProviderを作っても問題ない)

2. contextはグローバルにアクセスできる必要はなく、 必要に応じて小さい単位で保ち、必要な場所で正しく使

【JavaScript】多分これが一番簡単なwait関数だと思います

#概要
タイトル通り、処理を待機する関数のコードを紹介します。ただし、関数内でしか使えません。

#ソースコード
##関数
```js
async function wait(second) {
return new Promise(resolve => setTimeout(resolve, 1000 * second));
}
```

##使用例
```js
async function log() {
console.log("3秒後にログを表示します。");
await wait(3);
console.log("3秒経過しました。");
}

log();
```

専門学校生がLaravelとjQueryで抽選機作ってみた（機能紹介編）

# はじめに
初投稿です！！
2019年の11月あたりから夏休み中に独学したLaravelで、成人式の交流会のために制作しておりました。
今回の記事は主に機能の説明をして、開発エピソードはまた今度にしていこうと思います。
[GitHubのリポジトリ]https://github.com/kbc18a11/Lottery
[実際に制作したもの]https://seizinshikilottery.herokuapp.com/
今回作ったもののトップページです。

#使用技術
* Laravel
* jQuery
* Bootstrap
* MySQL
* Heroku

#実装した機能
■ユーザー関係
ユーザー登録
ログイン・ログアウト

■大会関係
大会主催
大会検索
自ユーザー主催大会一覧表示

■当選関係
当選種類作成
当選種類編集
当選種類削除

コメント欄はいらない！Webmentionを使ってブログにツイッターでの反応を表示する　（Part 1）

2020年。Gatsbyなどを使ってブログをゼロから一晩で作れる時代になった。特に投稿を、レポジトリの一部として、Github/Gitlabに保管すると、staticなプロジェクトとしてデプロイもすごく楽。だが、コメント機能を実装したければ、もともと不要だったデータベースが必要になって、一気にめんどくさくなる。自分でDBを管理したくない人は、Disqusのようなthird-partyサービスを使う選択肢もあるけど、有料。そこにWebmentionが登場する！

## Webmentionとは

厳密にいえば[Webmention](https://ja.wikipedia.org/wiki/Webmention)というのは**プロトコル**の名前である。そして現在は、[W3Cの勧告](https://www.w3.org/TR/webmention/)である。

ただ、SNS・チャットによくあるみんなお馴染みの「メンション」のような概念として理解しても良い。Twitter/FB/Instagramと違って、自分のブログを誰が読んで、どこでリンクをシェアしているかは、Googleの分析を

GoogleFormとGASを使用してフロントエンドとバックエンドの連携を見直そうとした話

## バグの報告ってどうしていますか？
自分は普段サーバーサイドエンジニアとして働いているのですが、サーバーサイドエンジニアと言えど、いつでもコンソール画面やSQLを眺めている訳ではありません。
普通にブラウザから自社のサイトを見て回ります。

その時に発見してしまう**フロントのバグ**。

- 出るべくしている文言が出ていない
- 画像が出ていない
- 地味なデザイン崩れ
- なぜかボタンが押せない

これってサーバーサイドエンジニアの立場からフロントエンドの人に報告するときは皆さんどうしていますか？
おそらく報告フローがきちんとしている所だと、こういう問題は起こらないと思いますが、うちの会社は報告フローが雑すぎて転職したばっかの自分には分からなすぎた。

1個のWebサイトの中に、各領域（各サービス）があり、それぞれの領域で担当者やリーダーが異なるので、このページのバグは誰に報告すればいいんや...ってそもそも調べるのも面倒だったし時間の無駄感すごかった。

**■今の報告フロー**
1. バグ発見
2. 担当者一覧から担当者を探す
3. チャットで通知
4. タスク立ててもらう

製薬企業研究者がJavaScriptの基本的な文法についてざっくりまとめてみた

# はじめに

ここでは、JavaScriptの基本的な文法をざっくりとまとめてみます。

# 変数とデータ型

変数は、`var 変数名 = 値`で宣言します。`let`や`const`を使うこともできます。
各行の最後には、セミコロン`;`を書くようにします（セミコロンがなくても動作しますが、書いた方が良いです）。
`//`以降は、その行の最後までコメントと認識され、プログラムの実行範囲から除外されます。
複数行にわたってコメントアウトしたい場合は、`/* */`を用います。

```javascript:variable.js
var str = '文字列'; // 文字列
console.log(str);

var num = 12345; // 数値
console.log(num);

var isBool = true; // 真偽値
console.log(isBool);

var arr = ['Python', 'R', 'JavaScript', 'PHP']; // 配列
console.log(arr);

var obj = {'Python': 'A

５つのプログラミング言語のまとめ

これから学ぶ５つのプログラミング言語について、概要をまとめます。
#HTML
*HTML（HyperText Markup Language）*

- ウェブページを作成するために開発された言語。インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されている。

- HTMLはプログラミング言語ではなくマークアップ言語と言い、意味付けしたい箇所をタグで囲んで（マークアップ）して表現するのが特徴。

#CSS
*CSS(Cascading Style Sheets)*

- HTMLのレイアウトを指定するための規格。

- HTMLは文字情報だけでレイアウトの規格がないが、CSSを用いることで、要素に対して文字の大きさや色、罫線の太さ、位置などのレイアウトを指定できる。

#JavaScript

- 動的なWebページを作成する事のできるプログラミング言語。通常はブラウザ上で実行される。
- キーボードやマウス操作で画面を動かせたり、アニメーションを表示したりすることができる。

#Ruby
- まつもとゆきひろ氏によって開発された言語。

- プログラマーにとっ