- 1. そんなもんチラシの裏に書いてろよ、なんて記事です。
- 1.1. Custom Visionでリアルタイム判別
- 1.2. paizaラーニング レベルアップ問題集 スタック・キューメニュー応用編 JavaScript 満員エレベーター
- 1.3. 【JavaScript:ES2015】モジュールについて(初学者向け)
- 1.4. Javascript基礎
- 1.5. paizaラーニング レベルアップ問題集 スタック・キューメニュー応用編 JavaScript warp
- 1.6. 【JavaScript】JS基礎
- 1.7. JavaScriptによるコーディングテスト中のデータ構造
- 1.8. MonacaとNCMBで経県値風アプリを作る(その1: 画面の仕様とSDKの初期化)
- 1.9. NCMBのキーをファイルストアから暗号化Zipファイルで配信する
- 1.10. モーダル機能 複数 レスポンシブル
- 1.11. Monacaでボイスレコーディングアプリを作る(その4:ファイルストアの音声ファイルをWeb Audio APIで再生する)
- 1.12. 【Vue.js】目指せ地理マスター!首都の緯度・経度から国名を当てるゲーム
- 1.13. 【JavaScript】Node.jsでのfs.readFileSync()の相対パス
- 1.14. 【JS】よく使うバリデーションまとめ
JSP/Servlet から WebAPI(フリー、APIキー不要)つかってみる
Java の JSP、Servlet から WebAPI を使ってみる
使う WebAPI はこれ、どれもランダムに画像はいった情報を返してくれる(公開してくれてる方には感謝しかない!!)– ユーザー情報取得API
https://randomuser.me/api
– ねこ画像取得API
https://aws.random.cat/meow
– きつね画像取得API
https://randomfox.ca/floof
– 星座情報取得API
https://livlog.xyz/hoshimiru/constellationここでは WebAPI つかうために3つをやってみる
説明で使ってるサンプルプロジェクトのおおもとは GitHub [java-webapp-clump](https://github.com/sueasen/java-webapp-clump) にあります– JSP から WebAPI 実行 ※JSPって書いてるけど HTML, JavaScript でも使えるところ
– Servlet から JSON 返却
– Servlet から WebAP
Javascriptでクリップボードに文字を格納する方法
クリップボードにコピーする機能と言ったほうが早いかもしれませんが、作りたかったのはユーザーがボタンを押したら任意の文字列をクリップボードに保存してあげる方法です。
# execCommandを使う方法
調べてみたら昔の記事などではexecCommand(“copy”)を使った方法がよく見かけられました。ただ、この方法は見えないテキストエリアに文字を入れてそこからコピーというやや裏技的なやり方。しかも非推奨になったので近い将来使えなくなる可能性が高いようです。# navigator.clipboard.writeTextを使う方法
で、その代わりに紹介されているのがnavigator.clipboard.writeTextを使う方法。
ただ、そのまま使うとSafariでは動作しないということで、以下であればSafariにも対応できるらしい。Safariでは試してないけどとりあえずFirefoxとChromeでは動作しました。“`
setTimeout(async () => await navigator.clipboard.writeText(“文字列”));
“`#
paizaラーニング レベルアップ問題集 スタック・キューメニュー応用編 JavaScript 3 つのキュー
3 つのキュー (paizaランク C 相当)
https://paiza.jp/works/mondai/stack_queue_advanced/stack_queue_advanced__three_queue
# 解答例
問題文に沿って実装します。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);const [N] = lines[0].split(” “).map(Number);
let [queue1, queue2, queue3] = [[], [], []];
for (let i = 1; i <= N; i++) { const Q = lines[i].split(" ").map((v, i) => i === 0 ? v : Number(v));
if (Q[0] === “push”) {
const [_,
「3D掲示板」の技術の話【THREE.js】
# 3D掲示板を作った
![3D掲示板.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41479/d0b51343-97ac-729c-5c1f-ac03c2997a78.png)
* [3D掲示板 – 3D空間にコメントを投稿できる掲示板](https://naruport.com/3dbbs/)
以前作った[元祖3D掲示板](https://naruport.com/bbs3d/)の評判が良かったのでその発展版として新・3D掲示板を作った。
改良したところは* 3D空間を自由に移動できるようにする
* スレッドを立てられるようにするという点である。
今回はこの3D掲示板の技術的な点を解説していく。# 3D掲示板の概要
3D掲示板は3D空間にコメントを投稿できる掲示板である。
ユーザーはスレッドを立てることも出来てスレッド内では3D空間でコメントを投稿して他のユーザーと会話する。
コメントできる文字はひらがな、カタカナ、英字と少しの記号のみ。画面をクリックすると全画面表示になり
【Discord.js】Discord.MessageEmbed is not a constructor
# エラー内容
“Discord.js“でボットを開発していたときの話。Embedオブジェクトを生成しようと、
“`javascript
const template = new Discord.MessageEmbed()
“`
としたら、”Discord.MessageEmbed is not a constructor”というエラー発生。
# 解決策
“v14“になってクラスの名前が変わったらしい。“MessageEmbed“から“EmbedBuilder“に変更すればよし。
“`javascript
const template = new Discord.EmbedBuilder()
“`
未経験、異業種からの転職で感じた事を書き殴る。
そんなもんチラシの裏に書いてろよ、なんて記事です。
未経験からWeb系、何だか香ばしい響きですね、
諸悪の根源は商材屋か、人売りか、それとも僕のような初学者か。記事のタイトル通り構成も可読性も悪い、書き殴りです。
似た境遇の方のアドバイスになれば良いなと感じております。
フロントエンドの話が多くなるかも知れません。私自身の背景としましては20代半ば、学歴は書きたくないほどに酷い、地方在住、前職は管理職として従事していてプログラミングの経験はありませんでした。
趣味として始めたプログラミングですがやはり学習中に詰まることが多く、それを解決できた際のアハ体験のようなもの、自身でコードを書いて思い描いた物を具現化出来る事やスキルが市場価値に直結する事に魅力を感じ、書いていて一番楽しいと感じるwebAppのプログラマーを目指し転職活動を開始しました、技術トレンドの移り変わりが早いフロント領域であれば、若さと熱意で経験豊富な方達と張り合える部分も多少はあるのでは、などと浅はかに考えたところもあります。学習や市場調査など就活にフルコミット出来る期間を半年間ほど設けまし
Custom Visionでリアルタイム判別
# Custom Visionでリアルタイム判別
今回は、Microsoft の Cognitive Services のひとつ、**Custom Vision**を使用し、カメラを起動させ、その映像についてリアル判別を行うプログラムを作成しました。Custom Vision API の説明については、本記事では省きますが、実際のリアルタイムでの処理について、まとめておきたいと思います。## 事前準備
事前に、今回のプログラムで使用するためのモデルを、Custom Vission で作成します。
作成後、Predection URLを発行しておきます。## プログラムについて
### カメラの起動
カメラの起動には、MediaDevices.getUserMedia()を使用し、起動を行う。
プログラムについては下記の通りとなっています。“` Javascript
const constraints = {
audio: false, video: {
facingMode: ‘environment’,
width: videoWidth,
paizaラーニング レベルアップ問題集 スタック・キューメニュー応用編 JavaScript 満員エレベーター
満員エレベーター (paizaランク B 相当)
https://paiza.jp/works/mondai/stack_queue_advanced/stack_queue_advanced__full_elevator
# 解答例(C++の場合参考)
エレベーターをスタックと見なします。
rideでのw_1 w_2 … w_Nをスプレッド構文[…w]に納めた。
get offはただpopをk回繰り返した。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);//乗り降りの回数 N とエレベーターの重量制限についての値 X
const [n, x] = lines[0].split(” “).map(Number);
let customer_sum = 0;//乗車人数
let kg_sum = 0;//合計体重let elevator = [];//
【JavaScript:ES2015】モジュールについて(初学者向け)
# はじめに
この記事で記録している内容は、ES2015以降のJavaScritに組み込まれているモジュールに関する話です。
※内容に誤りがあった場合は申し訳ありません。ご指摘いただけると幸いです。
### そもそもモジュールってなんだ?
モジュールとは、[Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)において以下のように説明されています。
>システムを構成する要素となるもの。いくつかの部品的機能を集め、まとまりのある機能を持った部品のこと。jsで書かれた処理を「モジュールにする」というのは言い換えると**機能ごとにファイルを分ける**ということになります。
すごく大雑把にいうと、
![スクリーンショット 2023-01-16 23.05.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/831462/8530293e-aa0a-671f-8bcc-7e16f
Javascript基礎
●歴史・・1990年台から開発が始まり、頻繁にリニューアルされている
●”use strict”・・より厳密なエラーチェックがされる。コードに存在する曖昧なエラーを早期に発見しやすくする
●変数の宣言方法
・let x;
console.log(x)・・関数の指定・const・・定数の指定、再代入不可
●変数の命名・・単語の二つ目は大文字
*Javascriptは大文字と小文字は区別される
let color;
let colorName;
let myColorName;●エスケープシーケンス・・通常の文字列では表せない特殊な文字や機能を表現するための方法
●インクリメントとデクリメント
インクリメント・・数値の値を1増加させる
num++;
デクリメント・・数値の値を1減少させる
num–;●条件分岐
ex)
const x = 100;
if(x >= 100) {
console.log(‘100以上の値です’)
}else {
console.log(‘100未満の値です’)
}・比較演算子==,===の違い
==数値と文字列を比較するとき
paizaラーニング レベルアップ問題集 スタック・キューメニュー応用編 JavaScript warp
warp (paizaランク B 相当)
https://paiza.jp/works/mondai/stack_queue_advanced/stack_queue_advanced__warp
>下記の問題をプログラミングしてみよう!
paiza 君は 1 〜 N の番号がつけられた N マスを移動します。
移動のルールは次の通りです。
・i 回目の移動をマス x からおこなう場合、その移動先はマス to[x][i] となる。
to[x][i] が -1 の場合、現在のマスに移動してくる 1 つ前のマスが次の移動先となる。
paiza 君はマス 1 から移動を始めます。
マス 1 から K 回移動をしたとき、paiza 君が止まったマスの番号を止まった順に出力してください。# 解答例(C++の場合を参考)
難易度が高くなっていますが、題意を正しく理解するのが難しいところに起因している気がします。問題文に以下のように書かれています。
>to[x][i] が -1 の場合、現在のマスに移動してくる 1 つ前のマスが次の移動先となる。この書き方ですと、移動先(to[x][
【JavaScript】JS基礎
# はじめに
Reactで開発するにあたり、JavaScriptの頻出機能にフォーカスを当てて記事に落とします。
モダンJavaScriptの基礎を理解しているのとしていないのではReactなどの習得のスピードが全然変わると思います!# 変数宣言
まず従来のJavaScriptでは変数の宣言に`var`を用いていました。
ただ、モダンJavaScriptにおいては使用されることはほとんどなくなりました。理由としては**上書き可能**であることや**再宣言可能**であるためです。
`var`での変数宣言のみでは意図しないときに変数を上書きしてしまったり、再宣言してしまったりという問題点があるためES2015から`const`と`let`という新たな変数宣言の方法が追加されました。# let
letで再宣言をすることは不可能です。ただし、letは変数を上書きすることは可能です。“`js
// 変数定義
let var = “変数です”;
console.log(var); // 変数です// 変数の上書き
var = “変数1です”;
console.log(var);
JavaScriptによるコーディングテスト中のデータ構造
## 一、ハッシュテーブル
#### 1.配列Array
“`js
const arr = [1, 2, 3]
“`#### 2.集合Set
“`js
const set = new Set([1, 2, 3]);
“`#### 3.写像Map
“`js
const map = new Map([
[‘name’, ‘tom’],
[‘title’, ‘Author’]
]);
“`## 二、スタック
“`js
function Stack(){
// スタック
this.items = [];
// 追加
Stack.prototype.push = function(element){
this.items.push(element);
}
// 削除
Stack.prototype.pop = function(){
return this.items.pop();
}
// 取得
Stack.prototype.peek
MonacaとNCMBで経県値風アプリを作る(その1: 画面の仕様とSDKの初期化)
経県値というアプリは知っていますか?各都道府県毎に、その地域で経験した内容を記録していくことで累計ポイントを獲得するアプリです。
[経県値](https://uub.jp/kkn/#app)
今回はNCMBとMonacaを使って経県値風のアプリ(地図タップアプリ)を作ります。SVGを使って日本地図を表示し、経験したことをチェックしていきます。得点は出していませんが、ちょっとカスタマイズすればできるでしょう。
まず最初の記事では画面の説明とSDKの導入までを進めます。
## コードについて
今回のコードは [memorymap-monaca](https://github.com/NCMBMania/memorymap-monaca) にアップロードしてあります。実装時の参考にしてください。
## 利用技術について
今回は次のような組み合わせになっています。
– Monaca
– Framework7
– D3.js## 仕様について
地図のデータは[D3.jsで日本地図を描き、都道府県別に色を塗る – Qiita](https://qiita.com/ran/i
NCMBのキーをファイルストアから暗号化Zipファイルで配信する
NCMBで利用するアプリケーションキーとクライアントキーは、アプリ側の設定やACL(アクセス権限)が適切に設定されていれば、万一漏洩したとしても即座に不正利用につながるものではありません。
しかし、漏洩したことが分かればキーの再生成に加えて、アプリのビルドし直しやレビュー再提出と言った手間が発生します。
そこで、キーをファイルストアに保存しておき、それを随時取得する形の運用はできないか検討しました。100%必ず安全という訳ではありませんが、参照にしてください。
今回はWebやMonacaでの利用を想定しています。他の環境であればコンパイルするので、キーの漏洩は防げるかと思います。
## ファイルストアのHTTPSファイル公開を利用する
NCMBのファイルストアでは、保存したファイルをHTTPS経由でアクセスできる機能があります。これを使って、認証キーなしでファイルストアからファイルをダウンロードできるようにします。設定は管理画面にあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.
モーダル機能 複数 レスポンシブル
“`html
×