- 1. 【JavaScript】map()メソッド、filter()メソッド、splice()メソッド、三項演算子
- 2. 【Vue.js】v-forの中でクリックイベントをシンプルに実装したい【e.target】
- 3. 今Vue3やるならを使おう
- 4. モーダルの実装から学んでいくCSSとJS
- 5. Kotlinで地図アプリ（ゴミ拾いアプリ）作成。（11日目）完成？
- 6. Vue.jsのv-modelについて学ぼう
- 7. Tripslayer アニメーション（deck.gl）
- 8. 外からアクセス可能な見守りタイムラプスカメラを自作する
- 9. 【Nuxt.js×microCMS】診断機能実装①ユーザーの選択に応じて診断結果をmicroCMSから取得する
- 10. vue.jsで「The template root requires exactly one element.」とエラーが表示された時は？
- 11. for文、for..in、for..of文はどれを使うの？
- 12. Udemyの動画再生停止時における再生画面中央に配置される再生ボタンを非常時にする chromeの拡張機能の紹介
- 13. JS 画像→グレースケール→ディザリング→点字アスキーアート
- 14. Vue.jsのv-bindを使ってclass属性を書き換える
- 15. 「@e99h2121 A.C.ではありますまいか A.C. 2020」の改訂版ではありますまいか A.C. 2022 １日目 Most Breakthrough Generator
- 16. 【JS】PDFKitの日本語フォント使用に詰まった話（ブラウザ上）
- 17. puppeteerでポップアップタブがロードし終わるのを待つ
- 18. javascriptでRPG＃１３
- 19. Vueの環境変数が設定できず悩んだ件（vite使用）
- 20. Kotlinで地図アプリ（ゴミ拾いアプリ）作成。（10日目）
【JavaScript】map()メソッド、filter()メソッド、splice()メソッド、三項演算子
## はじめに
本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。##map()メソッド
配列のすべての要素に対して与えた関数を実行して、その結果を配列として返します。
返り値が配列であることを望まない場合には、`forEach()`を使用します。
map()メソッドの記述例は以下の通りです。“`sample.js
const array1 = [1, 4, 9, 16];const map1 = array1.map(x => x * 2);
console.log(map1);
// Array [2, 8, 18, 32]
“`##filter()メソッド
配列の要素に対し、指定した条件に合致するもののみを取り出し、新たな配列を生成するメソッドです。
条件に合致する要素がひとつもない場合には、空の配列を返します。
記述例は以下の通りです。“
【Vue.js】v-forの中でクリックイベントをシンプルに実装したい【e.target】
#やりたいこと
v-forを使用してボタンとなる要素を複数作成。
ボタンのいずれかをクリックした際に、クリックしたボタンだけ色が変わるようにしたい。上記内容をできるだけシンプルなコードで実装したい。
####forEachを使う場合
See the Pen
button color change(vur.js sample)
今Vue3やるなら
```
これが
```vue
Tripslayer アニメーション（deck.gl）
こんにちは。
deck.gl の [Tripslayer](https://deck.gl/docs/api-reference/geo-layers/trips-layer) （＋アニメーション）を試しました。オリジナルソースを参考にし、ローカルデータファイル読み込み動作へ書き換えました。
デモ動作およびソースはこちら： [trips data animated on deck.gl trips layer by dropping-on](https://bl.ocks.org/kkdd/34f691afbf089e92a2cb4b1cca4cb582) (bl.ocks.org)
サンプルデータファイルの入手先は：
```console
$ curl https://raw.githubusercontent.com/visgl/d
外からアクセス可能な見守りタイムラプスカメラを自作する
# はじめに
実家に据え付けた[ラズパイ家族見守りサービス](https://qiita.com/mo256man/items/13084c865bfbf512a691)は順調に動いている。私以外でこれを使うに値する唯一の人物・妹にも本LINEアプリを教えた。
https://qiita.com/mo256man/items/13084c865bfbf512a691
もう一つ実家に置きたいIoTガジェットがある。ラズパイプログラミングの定番中の定番、監視カメラだ。
生活空間をのぞき見するわけではない。季節により彩りを変える庭を定点撮影し、ある程度たまったらタイムラプス動画を作りたいのだ。
メイン業務から離れてもOKのラズパイブームが職場に訪れた（半導体不足で入手困難なのに…）今、満を持してこいつに取り掛かることにした。
# 要件（←使い方あってる？）
- 当然、家庭内LAN内の外からアクセスできること。
- リアルタイムな画像取得は望まない。一定時間ごとに撮影するようにする。
- 「一定時間ごと」にこだわりたい。
15分ごとに撮影するとして、プログラムが走り始めたタイミ
【Nuxt.js×microCMS】診断機能実装①ユーザーの選択に応じて診断結果をmicroCMSから取得する
#はじめに
こんにちは！
今回は【Nuxt.js×microCMS】診断機能実装①ユーザーの選択に応じて診断結果をmicroCMSからの取得についてアウトプットしていきます！
今回の内容は以前記事にまとめた[【Nuxt.js】ボタンを押したらデータ値をとる＆色が変わる方法](https://qiita.com/Yudai_35_/items/b8a551680a8fb4101129)の内容の続きにあたる実装内容になっております！
#対象
・診断アプリを作りたい方
・ユーザーの選択に応じて表示させるものをコントロールしたい方
・[【Nuxt.js】ボタンを押したらデータ値をとる＆色が変わる方法](https://qiita.com/Yudai_35_/items/b8a551680a8fb4101129)までの内容がお済みの方
参考：microCMS公式サイトは[こちら](https://document.microcms.io/content-api/get-list-contents)
##使用環境
|使用技術 |バージョン |
|:-:|:-:|
|nuxt.js
vue.jsで「The template root requires exactly one element.」とエラーが表示された時は？
# 目的
vue.jsでとあるアプリを作ってみようとして下記のようなコードを書いていたところ、inputのところにエラーが表示されてしまった
```vuejs
{{ member.username }}
{{ member.gender }}
{{ member.introduction }}
{{ member.job }}
for文、for..in、for..of文はどれを使うの？
# 配列(反復可能オブジェクト)のループ
for文、またはfor..of文を使います。
添字が必要な場合はfor文を使います。
# オブジェクトのループ
Object.keys、Object.values、Object.entriesを使い、配列や反復可能オブジェクトに変換した後、for文、またはfor..of文を使います。
for...in文を使う場合は、列挙可能性に注意する必要があります。
Udemyの動画再生停止時における再生画面中央に配置される再生ボタンを非常時にする chromeの拡張機能の紹介
# 拡張機能紹介
皆さん,udemyは使用されていますか?
私はプログラム学習にudemyを使用しています.
udemyには様々な分野の講座があり非常に便利なのですが，学習するにあたり一つだけ, 非常に不便に思うことがありました．
**それは，以下のように動画の再生を停止したときに, 再生画面中央に再生ボタンが配置されることです！**
これでは画面を注視するために動画を停止したのに，画面が返って見辛いくなってしまいます．
そこで，再生停止中の中央に配置される再生ボタンを非表示にするchromeの拡張機能を作成しました．
ぜひご活用ください．
https://chrome.google.com/webstore/detail/hide-play-button-for-udem/ahmbcnebonghgfhcmdcg
JS 画像→グレースケール→ディザリング→点字アスキーアート
#つくりたい
discordで点字を使ったアスキーアートが流れてきたのでサクッとスマートに返したかった
#つくる
##グレースケール
まずはinput[type=file]から画像を取得してモノクロ化する
rgbと基準ベクトルの内積をとって明度を取る
```js
let img=new Image();
img.onload=()=>{
URL.revokeObjectURL(img.src);
c.width=img.naturalWidth;c.height=img.naturalHeight;//canvasサイズ
ctx.drawImage(img,0,0,c.width,c.height);//img→canvas
img=ctx.getImageData(0,0,c.width,c.height);//canvas→imageData
let mono=new Array(img.data.length/4).fill()//各ピクセルに対応した正規化された明度の配列
.map((_,i)=>{i*=4;return[...img.data.slice(i
Vue.jsのv-bindを使ってclass属性を書き換える
##はじめに
v-bindについて学んでいきましょう。
##v-bindとは
v-bindとは要素に含まれる属性を動的に設定・変更することが出来る設定方法です。
##実際に例を見てみましょう
```html:HTML
Document
「@e99h2121 A.C.ではありますまいか A.C. 2020」の改訂版ではありますまいか A.C. 2022 １日目 Most Breakthrough Generator
「アドベントカレンダーではありますまいか Advent Calendar 2020」の改訂版ではありますまいか Advent Calendar 2022 １日目
「@e99h2121 2020年のうちに読んでおきたい2020年アドベントカレンダーをピックアップしますまいか」を超えられない
https://qiita.com/kaizen_nagoya/items/b90c6758b2c18d0f5b23
超えられないと思った時、どうするか。
高校生の時に同級生とよく話をした。
私：放送部で１年上の先輩も、１年下の後輩も５歳くらいから半田付けしていて、１０年差があって、音響の技術者として太刀打ちができない。
友：別の方向に進むのは、負けをごまかすために逃げるみたいで嫌だよね
私：中学校の技術の先生が「人のやらないことをしろ」って言ってたから逃げるのとは違う。
友：５歳くらいからやっていることで勝負すればいい
自分の使っているやつで結構
※プログラムはlocalhostにサーバーを立てて実行。
[ここで詳しく解説されています](https://qiita.com/massie_g/items/2913066e596dae197539)
※**「PDFKit」「blobStream」「browserify
puppeteerでポップアップタブがロードし終わるのを待つ
# はじめに
本質的には解決していません。私が利用している範囲ではこれ十分だったので記事にしました。
解決策をご存じの方は是非コメントをお願いします。
# 問題
puppeteerを利用していてリンクをクリックした際にポップアップするタブがロードし終わるまで待ちたいのに待ってくれません。
[スタックオーバーフローの質問](https://stackoverflow.com/questions/50119325/in-puppeteer-how-to-wait-for-pop-up-page-to-finish-loading) に対する2回答を参考に実装しても、前者はロードを待ってくれず、後者は移動先のセレクターを指定しなければいけません(これは使い回し辛い!)
# 解決方法
```js
const [popup] = await Promise.all([
new Promise((resolve) => page.once('popup', resolve)),
page.click(selector)
]);
const popup_page = popu
javascriptでRPG＃１３
###こんにちは
今回は、家〜ワールドの出口を作っていきたいと思います。
では、まずマップを変更しましょう
```map.js
...(中略)
const home1 = [
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,9,9,9,9,9,9,9,9],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,8
Vueの環境変数が設定できず悩んだ件（vite使用）
## process is not definedに悩まされてviteの設定を調べ解決
Vue3でdotenvを使おうとして、`process.env.VUE_APP_HOGEHOGE`を使おうとしたところ、
```
Uncaught ReferenceError: process is not defined
```
というエラーに悩まされました。
Vue3ではdotenvをinstallしなくても使えるようなので、installせずやってみて、
うまくいかないのでinstallしてみてもだめ。
暫し考えて、viteを使っていることが関係している可能性を思いつき、調べてみたらビンゴ。
以下のページに答えがありました。
https://ja.vitejs.dev/guide/env-and-mode.html
viteでは、
`process.env.VUE_APP_HOGEHOGE`
ではなく、
`import.meta.env.VITE_HOGEHOGE`
の形式で読み込めると。
書き換えてみて、無事読み込めました?
---
## typescriptの場合の設定
Kotlinで地図アプリ（ゴミ拾いアプリ）作成。（10日目）
Kotlinで制作している、GoogleMapを使った、自作のゴミ拾いアプリ。制作10日目。
Kotlin + PHP + MySQLで、スマホアプリから、データベースへの位置情報の記録までできるようになったので、今日は、HTML + CSS + JavaScript + GoogleMap APIで、地図を表示してマーカーを複数表示できるまでやってみました。
#VSCodeの環境作成
JavaScriptでGoogleMapを使う前に、VScodeの環境を見直し。
参考サイト：
https://uetani33.net/vscode-web-extensions/
#JavaScriptからGoogleMAPを表示
前回の記事で、JavaScriptからGoogleMAP APIを使って地図の表示に失敗してましたが、本日、表示できるようになりました。
サーバ上にアップせず、ローカル環境でテストしてます。
動かなかった原因は、単純な記述ミスだったのかもしれません。
 （＋アニメーション）を試しました。オリジナルソースを参考にし、ローカルデータファイル読み込み動作へ書き換えました。
デモ動作およびソースはこちら： [trips data animated on deck.gl trips layer by dropping-on](https://bl.ocks.org/kkdd/34f691afbf089e92a2cb4b1cca4cb582) (bl.ocks.org)
サンプルデータファイルの入手先は：
```console
$ curl https://raw.githubusercontent.com/visgl/d
# はじめに
実家に据え付けた[ラズパイ家族見守りサービス](https://qiita.com/mo256man/items/13084c865bfbf512a691)は順調に動いている。私以外でこれを使うに値する唯一の人物・妹にも本LINEアプリを教えた。
https://qiita.com/mo256man/items/13084c865bfbf512a691
もう一つ実家に置きたいIoTガジェットがある。ラズパイプログラミングの定番中の定番、監視カメラだ。
生活空間をのぞき見するわけではない。季節により彩りを変える庭を定点撮影し、ある程度たまったらタイムラプス動画を作りたいのだ。
メイン業務から離れてもOKのラズパイブームが職場に訪れた（半導体不足で入手困難なのに…）今、満を持してこいつに取り掛かることにした。
# 要件（←使い方あってる？）
- 当然、家庭内LAN内の外からアクセスできること。
- リアルタイムな画像取得は望まない。一定時間ごとに撮影するようにする。
- 「一定時間ごと」にこだわりたい。
15分ごとに撮影するとして、プログラムが走り始めたタイミ
#はじめに
こんにちは！
今回は【Nuxt.js×microCMS】診断機能実装①ユーザーの選択に応じて診断結果をmicroCMSからの取得についてアウトプットしていきます！
今回の内容は以前記事にまとめた[【Nuxt.js】ボタンを押したらデータ値をとる＆色が変わる方法](https://qiita.com/Yudai_35_/items/b8a551680a8fb4101129)の内容の続きにあたる実装内容になっております！
#対象
・診断アプリを作りたい方
・ユーザーの選択に応じて表示させるものをコントロールしたい方
・[【Nuxt.js】ボタンを押したらデータ値をとる＆色が変わる方法](https://qiita.com/Yudai_35_/items/b8a551680a8fb4101129)までの内容がお済みの方
参考：microCMS公式サイトは[こちら](https://document.microcms.io/content-api/get-list-contents)
##使用環境
|使用技術 |バージョン |
|:-:|:-:|
|nuxt.js
# 目的
vue.jsでとあるアプリを作ってみようとして下記のようなコードを書いていたところ、inputのところにエラーが表示されてしまった
```vuejs
{{ member.username }}
{{ member.gender }}
{{ member.introduction }}
{{ member.job }}
# 配列(反復可能オブジェクト)のループ
for文、またはfor..of文を使います。
添字が必要な場合はfor文を使います。
# オブジェクトのループ
Object.keys、Object.values、Object.entriesを使い、配列や反復可能オブジェクトに変換した後、for文、またはfor..of文を使います。
for...in文を使う場合は、列挙可能性に注意する必要があります。
# 拡張機能紹介
皆さん,udemyは使用されていますか?
私はプログラム学習にudemyを使用しています.
udemyには様々な分野の講座があり非常に便利なのですが，学習するにあたり一つだけ, 非常に不便に思うことがありました．
**それは，以下のように動画の再生を停止したときに, 再生画面中央に再生ボタンが配置されることです！**
これでは画面を注視するために動画を停止したのに，画面が返って見辛いくなってしまいます．
そこで，再生停止中の中央に配置される再生ボタンを非表示にするchromeの拡張機能を作成しました．
ぜひご活用ください．
https://chrome.google.com/webstore/detail/hide-play-button-for-udem/ahmbcnebonghgfhcmdcg
#つくりたい
discordで点字を使ったアスキーアートが流れてきたのでサクッとスマートに返したかった
#つくる
##グレースケール
まずはinput[type=file]から画像を取得してモノクロ化する
rgbと基準ベクトルの内積をとって明度を取る
```js
let img=new Image();
img.onload=()=>{
URL.revokeObjectURL(img.src);
c.width=img.naturalWidth;c.height=img.naturalHeight;//canvasサイズ
ctx.drawImage(img,0,0,c.width,c.height);//img→canvas
img=ctx.getImageData(0,0,c.width,c.height);//canvas→imageData
let mono=new Array(img.data.length/4).fill()//各ピクセルに対応した正規化された明度の配列
.map((_,i)=>{i*=4;return[...img.data.slice(i
##はじめに
v-bindについて学んでいきましょう。
##v-bindとは
v-bindとは要素に含まれる属性を動的に設定・変更することが出来る設定方法です。
##実際に例を見てみましょう
```html:HTML
「@e99h2121 A.C.ではありますまいか A.C. 2020」の改訂版ではありますまいか A.C. 2022 １日目 Most Breakthrough Generator
「アドベントカレンダーではありますまいか Advent Calendar 2020」の改訂版ではありますまいか Advent Calendar 2022 １日目
「@e99h2121 2020年のうちに読んでおきたい2020年アドベントカレンダーをピックアップしますまいか」を超えられない
https://qiita.com/kaizen_nagoya/items/b90c6758b2c18d0f5b23
超えられないと思った時、どうするか。
高校生の時に同級生とよく話をした。
私：放送部で１年上の先輩も、１年下の後輩も５歳くらいから半田付けしていて、１０年差があって、音響の技術者として太刀打ちができない。
友：別の方向に進むのは、負けをごまかすために逃げるみたいで嫌だよね
私：中学校の技術の先生が「人のやらないことをしろ」って言ってたから逃げるのとは違う。
友：５歳くらいからやっていることで勝負すればいい自分の使っているやつで結構
※プログラムはlocalhostにサーバーを立てて実行。
[ここで詳しく解説されています](https://qiita.com/massie_g/items/2913066e596dae197539)※**「PDFKit」「blobStream」「browserify
puppeteerでポップアップタブがロードし終わるのを待つ
# はじめに
本質的には解決していません。私が利用している範囲ではこれ十分だったので記事にしました。
解決策をご存じの方は是非コメントをお願いします。# 問題
puppeteerを利用していてリンクをクリックした際にポップアップするタブがロードし終わるまで待ちたいのに待ってくれません。
[スタックオーバーフローの質問](https://stackoverflow.com/questions/50119325/in-puppeteer-how-to-wait-for-pop-up-page-to-finish-loading) に対する2回答を参考に実装しても、前者はロードを待ってくれず、後者は移動先のセレクターを指定しなければいけません(これは使い回し辛い!)# 解決方法
```js
const [popup] = await Promise.all([
new Promise((resolve) => page.once('popup', resolve)),
page.click(selector)
]);const popup_page = popu
javascriptでRPG＃１３
###こんにちは
今回は、家〜ワールドの出口を作っていきたいと思います。
では、まずマップを変更しましょう```map.js
...(中略)
const home1 = [
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,9,9,9,9,9,9,9,9],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
[6,6,6,6,6,6,6,6,6,6,6,6,8
Vueの環境変数が設定できず悩んだ件（vite使用）
## process is not definedに悩まされてviteの設定を調べ解決
Vue3でdotenvを使おうとして、`process.env.VUE_APP_HOGEHOGE`を使おうとしたところ、
```
Uncaught ReferenceError: process is not defined
```
というエラーに悩まされました。Vue3ではdotenvをinstallしなくても使えるようなので、installせずやってみて、
うまくいかないのでinstallしてみてもだめ。暫し考えて、viteを使っていることが関係している可能性を思いつき、調べてみたらビンゴ。
以下のページに答えがありました。
https://ja.vitejs.dev/guide/env-and-mode.htmlviteでは、
`process.env.VUE_APP_HOGEHOGE`
ではなく、
`import.meta.env.VITE_HOGEHOGE`
の形式で読み込めると。書き換えてみて、無事読み込めました?
---
## typescriptの場合の設定
Kotlinで地図アプリ（ゴミ拾いアプリ）作成。（10日目）
Kotlinで制作している、GoogleMapを使った、自作のゴミ拾いアプリ。制作10日目。
Kotlin + PHP + MySQLで、スマホアプリから、データベースへの位置情報の記録までできるようになったので、今日は、HTML + CSS + JavaScript + GoogleMap APIで、地図を表示してマーカーを複数表示できるまでやってみました。
#VSCodeの環境作成
JavaScriptでGoogleMapを使う前に、VScodeの環境を見直し。
参考サイト：
https://uetani33.net/vscode-web-extensions/
#JavaScriptからGoogleMAPを表示
前回の記事で、JavaScriptからGoogleMAP APIを使って地図の表示に失敗してましたが、本日、表示できるようになりました。
サーバ上にアップせず、ローカル環境でテストしてます。
動かなかった原因は、単純な記述ミスだったのかもしれません。
- 2024.09.19
JavaScript関連のことを調べてみた
-
- 2024.09.19
JAVA関連のことを調べてみた
-
- 2024.09.19
iOS関連のことを調べてみた
-
- 2024.09.19
Rails関連のことを調べてみた
-
- 2024.09.19
Lambda関連のことを調べてみた
-
- 2024.09.19
Python関連のことを調べてみた