- 1. 【Nuxt.js×microCMS】診断機能実装①ユーザーの選択に応じて診断結果をmicroCMSから取得する
- 2. vue.jsで「The template root requires exactly one element.」とエラーが表示された時は？
- 3. for文、for..in、for..of文はどれを使うの？
- 4. Udemyの動画再生停止時における再生画面中央に配置される再生ボタンを非常時にする chromeの拡張機能の紹介
- 5. JS 画像→グレースケール→ディザリング→点字アスキーアート
- 6. Vue.jsのv-bindを使ってclass属性を書き換える
- 7. 「@e99h2121 A.C.ではありますまいか A.C. 2020」の改訂版ではありますまいか A.C. 2022 １日目 Most Breakthrough Generator
- 8. 【JS】PDFKitの日本語フォント使用に詰まった話（ブラウザ上）
- 9. puppeteerでポップアップタブがロードし終わるのを待つ
- 10. javascriptでRPG＃１３
- 11. Vueの環境変数が設定できず悩んだ件（vite使用）
- 12. Kotlinで地図アプリ（ゴミ拾いアプリ）作成。（10日目）
- 13. Lambdaから同一アカウント内のEC2インスタンス情報を取得する
- 14. 独学無課金でプログラミング始めたので、記録を残します。
- 15. Symbolブロックチェーンで自分のアカウントへの署名要求を検知する
- 16. MDN Web DocsのJavaScript課題「バカ話ジェネレーター」に取り組んだ
- 17. Kotlinで地図アプリ（ゴミ拾いアプリ）作成。（9日目）
- 18. プロパティ記述子って何ですか？
- 19. 【IoT】近づくと音が鳴るおもちゃ
- 20. お年玉の決め方
【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
超えられないと思った時、どうするか。
高校生の時に同級生とよく話をした。
私：放送部で１年上の先輩も、１年下の後輩も５歳くらいから半田付けしていて、１０年差があって、音響の技術者として太刀打ちができない。
友：別の方向に進むのは、負けをごまかすために逃げるみたいで嫌だよね
私：中学校の技術の先生が「人のやらないことをしろ」って言ってたから逃げるのとは違う。
友：５歳くらいからやっていることで勝負すればいい友は、良家の出で、いわゆる「お宅」の走り。
母親は教室を開き本も出している有名人、父親は著名なホールの支配人。
家系には総理大臣になった人もいるらしい。私の周りには、
【JS】PDFKitの日本語フォント使用に詰まった話（ブラウザ上）
#はじめに
javascriptのPDFKitで、日本語フォントを使うのが色々とめんどくさかったので書きます。###参考
>[PDFKit公式サイト](https://pdfkit.org/)
>[XMLHttpRequest – MDN](https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest)##開発環境
– Node.js 14.17.0
– **PDFKit**
– **blobStream** (pdfのデータをblob変換して使用するため)
– **browserify** (require()を使えるようにするため)
– google chrome (ブラウザ)
– atom (テキストエディタ)–>自分の使っているやつで結構※プログラムは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,8Vueの環境変数が設定できず悩んだ件（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の環境を見直し。
参考サイト：
#JavaScriptからGoogleMAPを表示
前回の記事で、JavaScriptからGoogleMAP APIを使って地図の表示に失敗してましたが、本日、表示できるようになりました。
サーバ上にアップせず、ローカル環境でテストしてます。
動かなかった原因は、単純な記述ミスだったのかもしれません。#やることたち
①Lambda関数を作成する
②Lambdaのレイヤーを作成
③Lambda関数に割り当てたロールの権限を設定する
④コードを書き、実行する#①Lambda関数を作成する
・コンソール画面からLambdaの画面を開き、「関数の作成」を押下する
・「一から作成」を選択
独学無課金でプログラミング始めたので、記録を残します。
こんにちは。
プログラミングを始めたので備忘録としてアカウントを作りました。
Qiitaを始めたきっかけはこちらの記事でみかけたからです。https://qiita.com/engineerhikaru/items/5181fbf3e38cfb9b47df
お手柔らかにお願いいたします。
progateに課金を考えましたが、1月は課金分の元を取れる気がしなかったので、とりあえず独学でがんばります。
始めて数日ですが、つまづいたところの備忘録にしたいので、書き残します。
誰かのためになれば幸いです。#始めたきっかけは海外永住を目指したいから
元々、ワーホリで海外に滞在していました。
コロナ禍で諦めていましたが、やっぱり長く住みたいと思い永住権取得に向けて色々調べました。プランは
現地で職業訓練学校に通う
↓
気合で就職にこぎつける
↓
ワークビザ獲得
↓
永住権申請です。
コロナ禍で、永住権取得枠が増えており、IT系の需要も増えているようです。
(甘くないのは重々承知)未経験なので、学校のお金を貯めつつ自身に合っているかを確かめたいので、とりあえず行動しま
Symbolブロックチェーンで自分のアカウントへの署名要求を検知する
自分に宛てらてたアグリゲートボンデッドトランザクションを検知する方法を紹介します。
アプリ初期表示時の検知とアプリ起動中のリスナー検知の２種類に対応します。
すでに署名したトランザクションや、自分が署名する必要のないトランザクションには反応しません。# 対象アカウントの準備
“`js
alice = sym.PublicAccount.createFromPublicKey(
“” ,
networkType
);
“`すでに署名済みであるかどうかを調べるため、公開鍵からパブリックアカウントクラスを生成します。
# 通知ロジック
“`js
//アグリゲートトランザクション検知
bondedListener = listener.aggregateBondedAdded(alice.address);
bondedHttp = txRepo.search({
address:alice.address,
group:sym.TransactionGroup.Partial
})
.pipe(
op.delay(2000),
op.mergeMap(pageMDN Web DocsのJavaScript課題「バカ話ジェネレーター」に取り組んだ
こんにちはWebエンジニアのmasakichiです。
## これは何の記事
MDN Web DocsにあるJavaScript課題「バカ話ジェネレーター」に取り組んでみました。
コードの中身は[GitHub](https://github.com/Naughty1029/Silly_story_generator)からもご確認いただけます。## なんで記事にしたの？
これからJavaScriptの学習を進めていく方の参考になればなというのがひとつです。
また、わたし自身もまだまだ学習中の身ですので、もっとこうした方がいいよ！などのご指摘があればコメント欄などでご教示頂けたら嬉しいなと思ったからです。## バカ話ジェネレーターって？
MDNがJavaScriptのチュートリアルとして提供している課題のひとつです。
詳しい内容は[こちら](https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator)でご確認ください。## それではわたしのコードです
“`h
Kotlinで地図アプリ（ゴミ拾いアプリ）作成。（9日目）
Kotlinで制作している、GoogleMapを使った、自作のゴミ拾いアプリ。制作9日目。
最近は、サーバーサイドでMySQL + PHPや、GoogleMapAPI + JavaScript をやってました。
実機の方で、入念にテストをしてなかったので、確認したところ実機のみでエラーで強制終了するようなので、デバッグ作業をしてみました。
#実機でERROR
実機で試した頃、ERROR発生。
調べるとAPI21の端末で、LocalDateTimeを使ってる事が原因。
ThreeTenABPを使えば解決？
# ThreeTenABPを使う
“`gradle:build.gradle
dependencies {
implementation ‘com.jakewharton.threetenabp:threetenabp:1.3.0’
“`“`kotlin:MapsActivity.kt
override fun onCreate(….){
….
AndroidThreeTen.init(this)
`プロパティ記述子って何ですか？
JavaScript オブジェクトのプロパティは、「書き込み禁止かどうか」とか「各種設定可能かどうか」といった、いくつかの属性を持っています。
これらを**プロパティ属性**といいます。プロパティ属性は、**プロパティ記述子**というオブジェクトのプロパティとして保持されています。
プロパティ記述子は、**データ記述子**と**アクセサー記述子**があります。# データ記述子
|属性|説明|
|—|—|
|value|プロパティに設定された値|
|configurable|プロパティ記述子の設定変更可否|
|enumerable|for…inループの列挙可能性|
|writable|値の変更可否|# アクセサー記述子
|属性|説明|
|—|—|
|get|ゲッターと呼ばれる関数を格納する場所|
|set|セッターと呼ばれる関数を格納する場所|# データ記述子の確認
“`javascript
const obj = {prop: “値”};
const propDesc = Reflect.getOwnPropertyDescriptor(obj【IoT】近づくと音が鳴るおもちゃ
# 概要
ペットのキンカチョウが放鳥時にいつも鏡に向かって鳴いているので、鏡の中のお友達(?)が鳴き返してくれるようにしました！！
よくうさぎにもちょっかいを出すので、警戒音としても使えるのかなぁと思っています。
仕組みとしては、超音波センサーを使用していて、ある一定の距離まで近づいたら音が鳴るようにしています。# デモ動画
デモ動画では、すずめの置物で代用しています。鳥が近づくとブザーが鳴ります⚡️ pic.twitter.com/rI7FtoNftY
— みっきー (@mikiko_bridge) May 9, 2021
# 部品
| 部品名 | 品番 |
|:—:|:—:|
| obniz本体 | obniz Board 1Y |
| 超音波モジュール | HC-SR04 |
| 圧電スピーカー | ANYM-SPT08 |
| ワニ口クリップ | Access ワニグチクリップコード |
| 電源 | 自宅にあったモバイルバッテリー |# 配線
– テレビに映してみんなで結果を共有してワイワイしたい
– 上の理由を実現するのにchromeだったら簡単にcastできる（chrome castありきの話）コードだけ共有させていただきます。
“`html
OTHERカテゴリの最新記事
- 2024.09.19
JavaScript関連のことを調べてみた
- 2024.09.19
JAVA関連のことを調べてみた
- 2024.09.19
iOS関連のことを調べてみた
- 2024.09.19
Rails関連のことを調べてみた
- 2024.09.19
Lambda関連のことを調べてみた
- 2024.09.19
Python関連のことを調べてみた