- 0.0.1. JavaScriptを基本からまとめてみた【18】【WebAPIを叩く】
- 0.0.2. Logic Proのアーティキュレーション機能でノート発音中にキースイッチを切り替えたい
- 0.0.3. Vue + Laravelでformの入力情報をパラメーターから受け取り、復元する方法
- 0.0.4. 【React Native】下から引っ張るタイプのモーダルを作る
- 0.0.5. EJSで何が入ってるかわからない文字列をJavaScriptの変数に渡す
- 0.0.6. “/”を忘れたかっただけなのに
- 0.0.7. [JS]簡単なフォームバリデーション
- 0.0.8. Nest-js Headerデコレータのカスタム
- 0.0.9. Node.js（axios）からDirectCloud-BOX APIでファイル一覧の取得とnode話
- 0.0.10. 【Ruby on rails】JavaScript 非同期通信のコメント機能でエラーメッセージを出す バリデーション
- 0.1. 初めに
- 0.2. バリデーションをかけておく
- 1. サンプル
- 2. ソース
JavaScriptを基本からまとめてみた【18】【WebAPIを叩く】
##はじめに
####学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。##WebAPIを叩くとは
『WebAPIを叩く』とは、プログラマー的表現でプログラミング上から外部とデータのやり取りをする事を指す。##UIとは
『UI』とは、ユーザーインターフェイス（User Interface）の略称で、一般的にユーザー（利用者）と製品やサービスとのインターフェース（接点）すべてのことを意味する。
WebサイトでいうところのUIは、サイトの見た目や、使いやすさのことを指す。よくUI＝見た目、と勘違いをしている方もいるが、レイアウトや使用されている画像はもちろん、文字のフォント、メニューやボタンの操作性などユーザーが目にするもの・操作するものすべてが含まれる。##index.htmlを作成
“`in
Logic Proのアーティキュレーション機能でノート発音中にキースイッチを切り替えたい
#困った経緯
* Broadway LITEs（ブラス音源）をセールで購入！[^1]
* アーティキュレーション機能にキースイッチを登録するため、マニュアルをダウンロード
* PLEASE READ AND FOLLOW THIS MANUAL!って赤字で言われたので全力で読んだ[^2]
* Fall Downなどの奏法は、Sustainのノートの途中でキースイッチを押すと滑らかに切り替わる
* ↑アーティキュレーション機能でどうやって表現すればいいんだ…[^1]: Full版が欲しい（記事執筆時点で$2295）
[^2]: マニュアルに書いてありました。この音源を使っている方はぜひ読んであげてください。#結論
Logic Pro内蔵のScripter MIDIプラグインを使いました。https://support.apple.com/ja-jp/guide/logicpro/lgce728c68f6/mac
“`javascript:Scripter.js
//—————————–
Vue + Laravelでformの入力情報をパラメーターから受け取り、復元する方法
#はじめに
一週間前から初めて触るVue + Laravelの環境で新規案件を開発しはじめました。
入力フォームの情報を確認画面に渡し、入力ミスなどで入力フォームに戻る際に、Laravelでフォームの情報を受け渡ししようかと奮闘しましたができず、結局Javascriptの力技で解決しました。。。多分
本来のやり方ではないと思いますが、良かったら参考にしてください。# 環境
– バックエンド:PHP – Laravel8
– フロントエンド:Vue.js
– DB:Mysql ver8.0
– Docker使用# 最初にやろうとしたこと
新規入力フォーム“`vuejs:userCreate.vue
【React Native】下から引っ張るタイプのモーダルを作る
最初からプルタブが露出しているタイプのモーダルが作りたかったので、ライブラリを使って作ってみました。
完成はこんな感じ
#ライブラリを使用
Reanimated Bottom Sheetというライブラリを使用します。リファレンスは[こちら](https://github.com/osdnk/react-native-reanimated-bottom-sheet)“`:ライブラリのインストール
npm install reanimated-bottom-
EJSで何が入ってるかわからない文字列をJavaScriptの変数に渡す
# はじめに
基本的なEJS構文についてはmiwashutaro0611様の記事をご参考ください。https://qiita.com/miwashutaro0611/items/36910f2d784ff70a527d
# 先に結論
次のように変換します。“`javascript
<%# markdown は何が入っているかわからない文字列です。%><% var json_ejs = JSON.stringify({markdown:encodeURIComponent(markdown)}) %>
“`
—
# 以下 説明(試したこと)
### 普通の渡し方
普通にやると“`javascript
var text = <%= markdown %>
“`ですが改行
“/”を忘れたかっただけなのに
こんにちは。つんあーです。
みなさん、JS（あるいはTS）でファイルパスを操作する時、どうしていますか？
（紛らわしいのですが、今回はブラウザが対象の話です。Node.jsはそんなに悩まないですからね）パスの末尾の`/`の扱いって、なかなか困りますよね。
こんなのとか、“`javascript
const url = location.href;
fetch(url + ‘/data.json’).then(… // /は必要なんだっけ?// => 404 : http://localhost/page//data.json
// 違う、そうじゃないの
“`あるいはこんなのとか、
“`javascript
const url = location.hostname;
fetch(url + ‘data.json’).then(… // /は必要なんだっけ?// => 404 : http://localhostdata.json
// お゛お゛お゛お゛ん
“`みたいなやつです。
私はよくこんなことをやってます。きっとあなたも1度はやった
[JS]簡単なフォームバリデーション
##この記事について
JavaScriptの学習の記録。
学習している書籍の演習問題をヒントにBMI測定プログラムを作りました。
(掲載のコードは書籍に記載のコードではありません。)
フォームのバリデーションや正規表現について記載しています。学習書籍
[いちばんやさしいJavaScriptの教本 第2版 ECMAScript 2017（ES8）対応 人気講師が教えるWebプログラミング入門 「いちばんやさしい教本」](https://www.amazon.co.jp/dp/B07RPT6K35/ref=sspa_dk_detail_1?psc=1&pd_rd_i=B07RPT6K35p13NParams&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUEyTk1QUjdHNFdHTVY1JmVuY3J5cHRlZElkPUExMDE3MDYzMjBZQUFLUURLNDRJWSZlbmNyeXB0ZWRBZElkPUEzOUszUExMMEJXMTVUJndpZGdldE5hbWU9c3BfZGV0YWlsJmFjdGlvbj1jbGlja1JlZGlyZWN0JmR
Nest-js Headerデコレータのカスタム
###### tags: `nest-js`
“`typescript
import { createParamDecorator, ExecutionContext,BadRequestException } from ‘@nestjs/common’
import * as admin from ‘firebase-admin’export const CustomHeaders = createParamDecorator(
(data: string, ctx: ExecutionContext) => {
const req = ctx.switchToHttp().getRequest()
const value = req.headers[data].split(‘Bearer ‘)[1]return admin.auth().verifySessionCookie(value, true).then((decodedClaims) => {
return decodedClaims.user_id
Node.js（axios）からDirectCloud-BOX APIでファイル一覧の取得とnode話
一連の記事の流れになります。
– [紙で申請を出す居酒屋店員のシフト希望と管理業務をちょっとスマートにする](https://qiita.com/n0bisuke/items/0c6d6a236b31e3897d41)
– [Node.js（axios）からDirectCloud-BOX APIでファイルのDL #linedc](https://qiita.com/n0bisuke/items/0aec6dc65a1fc0b4c5b5)
– [Node.js（axios）からDirectCloud-BOX APIでファイルアップロード](https://qiita.com/n0bisuke/items/35659ffdf00f2158da98)同じような書き方にはなるのですが、DirectCloudのAPIのドキュメントは注意といった記事です。
また、タイトルにあるnodeはNode.jsの話ではないです。
## ファイル一覧取得を試す（GET/POST）
`/openapp/v1/files/index/{node}`でファイルの一覧を照会できます
> [APIリ
【Ruby on rails】JavaScript 非同期通信のコメント機能でエラーメッセージを出す バリデーション
初めに
非同期通信でのコメント機能は実装ずみで、「40１字以上のコメント」はNGというバリデーションは、
かけていたものの、エラーメッセージが出るようにしていませんでした・・・。
少し実装に苦労はしたものの、非同期通信への理解が深まったのでまとめていきます！！
バリデーションをかけておく
“`perl:app/models/post_comment.rb
class PostComment < ApplicationRecord default_scope -> { order(created_at: :desc) }
# あるコメントに紐づくユーザーも記事も１
belongs_to :user
belongs_to :postv
動画IDからサムネイル、nocookieのurlを取得する
前回の記事で動画のIDを取得する方法をご紹介しました。
今回はこの動画IDでどの様なことができるかを実際に見ていきます。https://qiita.com/gatolife/items/c372e41a0065c5d91387
“`javascript:index.js
//ex) console.log(change_to_img_url(“-mMmOKHzuWc”);
//前回の get_video_id 関数を使用すると
// console.log(change_to_img_url(get_video_id(“https://www.youtube.com/watch?v=-mMmOKHzuWc”)));// といったことができる
const change_to_img_url = (id) => {
id = “http://img.youtube.com/vi/” + id + “/mqdefault.jpg”;
return id;
}const change_to_nocookie_url = (id) => {
YouTubeの動画のIDを取得する
動画のIDを取得することで、
動画のurlに応じてサムネイルを変更したり、
YouTubeが提供しているyoutube.nocookie.comにて動画を見ることが容易になります。
（説明下手くそ・・・）
動画のIDの使い方は下の記事で紹介しています。https://qiita.com/gatolife/items/7a56477786945b96a91b
“`javascript:get_id.js
//——///
// ex) console.log(get_video_id(“https://www.youtube.com/watch?v=-mMmOKHzuWc&list=PLRBp0Fe2GpgmsW46rJyudVFlY6IYjFBIK&index=1”));//PC版サンプルurl
//https://www.youtube.com/watch?v=-mMmOKHzuWc&list=PLRBp0Fe2GpgmsW46rJyudVFlY6IYjFBIK&index=1//短縮url版サンプルurl
//https://youtu.be/-mMmOK
【JavaScript】データ型とは
#はじめに
こんにちは。JavaScriptを学習中の佐藤です。
今日は、データ型についてアウトプットしていきます！##データ型とは
データの分類のことで、数値型や文字列型などのデータ型がある。また、JavaScriptは「動的型付け言語」とも呼ばれ、変数に格納された値によってデータ型が定義される。実際のコードでみてみましょう。
“`javascript:JavaScript
let width = ‘wide’; //文字列型で定義
width = 1200; //数値型に変更される
“`というように、後から代入された値によってデータ型が変更される。
また、変数の型はtypeof演算子を使って確認できる。“`javascript:JavaScript
let width = ‘wide’;
console.log(typeof width); //string（文字列型）width = 1200;
console.log(typeof width); //number（数値型）
“`
一方、「動的型付け言語」とは反対に、1度定義
LINE BotのNode.js SDKでプロフィール取得のメモ #linedc
userIdからプロフィールを取得したいってのをちょくちょく使うけど忘れるのでメモ
> [SDKのサンプルコード](https://github.com/line/line-bot-sdk-nodejs/blob/next/examples/kitchensink/index.js#L118-L130)
`client.getProfile()`を利用します。
“`js
const profile = await client.getProfile(event.source.userId);
console.log(profile);
“`“`js
{
userId: ‘Ubxxxxxxxxxxxxxxxxxxxxxx’,
displayName: ‘n0bisuke’,
pictureUrl: ‘https://profile.line-scdn.net/ch/v2/p/xxxxxxxxxxxxxxxxxxxxxxxx/exist’,
statusMessage: ‘こんにちは’,
language: ‘ja’
}
“`## コピペ用: リ
シンプルアナログ時計
本当にシンプルな時計が欲しくて作ってみました。
画像群は Google図形描画 で作成。
jsなのでローカルPC時刻に依存。サンプル
ソース
analogue.htm
<html>
<head>
<title>
<style>
img{width: 860px;height: 860px;}
#base {width: 860px;height: 860px;position: relative;}
.clock {
position: absolute;
top: 0px;
left: 0px;
}
.clock_hour_shd {
position: abso
【個人開発】地域の魅力を発信できるデジタルパンフレットサービス「Openパンフレット」を作った
# はじめに
* デジタルパンフレット作成公開サービス **[Openパンフレット](https://open-pamphlet.com)** をリリースしました。
* 個人開発です。
* バックエンドはだいたいAWSです。
* Android未対応?https://open-pamphlet.com
バックエンドの技術者がフロントやらインフラやらアプリやら色んな所に手を出して作ったシステムになっています。
記事本文はZennで書いているので[こちら](https://zenn.dev/ymasutani/articles/42fb40f4e00f1d)です。
# 宣伝
Android版の開発のためクラウドファンディング募集しています。
よかったら見て下さい。励みになります。https://camp-fire.jp/projects/view/467291
Slackの古い投稿を自動定期削除する
# やりたいこと
Slackの特定のチャンネルに投稿された発言を定期的に削除したい# 仕様とか
* 投稿から一定時間経過したSlackの発言を削除する
* 一度に削除できる投稿数には上限がある (https://api.slack.com/lang/ja-jp/rate-limit)
* サーバーレス (GASを利用)
* パブリック・プライベートチャンネル両方対象
* ユーザー権限で実行するためSlackAppのTokenを発行するユーザー自身に投稿削除権限が必要# 手順
## Slack側の設定### 1) Appの作成
Slack API のサイトに行き、右上の `Your apps` からApp管理ページを開く
https://api.slack.com/
`Create New App` からAppの作成
devツールで、ページ上にDOMを大量に複製したいとき
自分用備忘録。
#結論
① 複製したいDOMをChromeのdevツール Elementタブで特定
② １でみつけた要素を右クリック→Copy > Copy Element
③ devツールのConsoleで以下スクリプト実行```console.js
const newElm = document.createElement('p'); // 適当なタグでおｋ
const target = document.getElementById('**任意のid**'); // 大量に複製する要素のブチ込み先
newElm.innerHTML = '**②でコピーしたやつ**';
// 1000件ブチ込む
for(let i=0;i<1000;i++){target.appendChild(newElm.firstChild.cloneNode(true))} ``` #あとがき cloneNode(true)だと内包する要素までコピーしてくれる これに気づかなくて地味にハマった 特定のページだけゴリゴリに重いなーってことがあったので、検証用に作った。 もっといい感じのやり方が
Node.js で標準入力から同期的に一行読み取る
# 前座：既存の手法（非同期 or 入力全行）
主に競技プログラミングなどのシーンで標準入力からデータが受け渡されることは多いです。競技でなくとも、同様の形式でコーディングテストが行われることもあります。
こういったときに Node.js だと少し煩雑な手順を取る必要があります。
## `readline`
https://nodejs.org/api/readline.html#readline_readline_createinterface_options
```js
const rl = require("readline").createInterface({
input: process.stdin,
output: process.stdout,
});const lines = [];
rl.on("line", (line) => {
lines.push(line);
// ... 多分入力処理
});rl.on("close", () => {
// 入力が閉じたのでデータは受け取った
// データを全て受け取った前提の
【JavaScript】変数について
#はじめに
はじめまして。
エンジニア転職に向けて学習中の佐藤です。
このQiitaでは、学習中のアウトプットや、同じところでつまずいてしまう駆け出しエンジニアに向けて発信していきます！誤った情報がありましたら、ご指摘いただけると幸いです！
##変数について(let,const,var)
letは値を再代入できる。```js:JavaScript
let width = 1280;
whidth = 640;
console.log(width); //640が出力される
```
一方、constは値を再代入できない。定数と呼ばれる。
値を変えないものに上書き禁止のものに関しては、constを使用する。```js:JavaScript
const height = 680;
height = 340;
console.log(height); //エラーになる
```
varはletと同じように値の再代入ができるが、ES6のアップデート以降は使用されていない。```js:JavaScript
var width = 1280;
whidth =
