JavaScript関連のことを調べてみた2020年02月09日

TypeScriptの型定義からJSON Schemaを生成するオンラインツールを作ってみた

先日、[TypeScript + Tynderから始める宣言的検証生活](https://qiita.com/shellyln/items/bd926fa968131aa13e5f)の記事にて
スキーマ検証ライブラリ[Tynder](https://github.com/shellyln/tynder)を紹介いたしました。

# Tynderとは
[Tynder](https://github.com/shellyln/tynder)は、**TypeScriptのサブセット＋独自の拡張文法から成るDSL**によって

1. 型の検査
1. 単独の項目の必須・値の長さ・範囲や文字列パターンの検証
1. 複数項目の相関や整合性検証の一部 (Union typeによる)

を**宣言的**に行うことができます。

# JSON Schemaを生成するオンラインツール
今回はTynderのスキーマ変換機能を使用して
JSON Schema、GraphQL、Protobuf3 のスキーマを生成するオンラインツールを公開しました。
(GraphQL、Protobuf3については実験的機能です)

4つの数字で10を作る「テンパズル」の問題用紙を生成する

といってもやっていることは[make10 問題一覧と解答](http://www.quiz-puzzle.com/make10/answer/list.html)の問題を拝領しているのですが。

子供の頃に、電車の切符に記載されている4桁の数字を使って10を作るというのをよくやっていたと思います（こういうのをテンパズルと呼ぶのは知りませんでした）。Suicaになって、そういう数字を見ることもなくなってしまい、あっても車のナンバーくらいでしょうか。[ドラゴン桜2で、この計算が数字に強くなるのに適している](https://www.amazon.co.jp/dp/4065182026/)と書いてありました。とはいえ、毎度切符を買うわけにもいかないし、ドライブしている時くらいしかできないのは辛いです。

[テンパズル – Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%86%E3%83%B3%E3%83%91%E3%82%BA%E3%83%AB)

アプリでもあるようですが、子供向けには紙でプリントされた状態で、手を動かす方が学習効果は大きいか

Choices.js + fetchAPIでフィルタ付き動的セレクトボックス [脱jQuery]

## 概要
件名のモノが必要になった時
ググって出てきたのはajaxやcoffee script、select2にchosenと
内容が古かったり環境制約で使えないものだったりで苦しめられたので
rails6とpure javascriptで動くサンプルを遺します↓

***

親カテゴリの選択に応じて動的に子の選択肢をセットする

***

フィルタ検索機能

***

#### [Sampl

core-jsを読み込んだけど、IE11で”Exception thrown and not caught”というエラーが発生する

Babel 7.4.0から、@babel/polyfillが非推奨になったそうです。
ではどうすれば良いのかというと、もともと@babel/polyfillがインクルードしていたcore-jsとregenerator-runtimeを直接インポートしてやれば良いらしい。
[babelの公式](https://babeljs.io/docs/en/babel-polyfill)にも書いてある。

“`javascript
import “core-js/stable”;
import “regenerator-runtime/runtime”;
“`
設定ファイルにも書く必要がある。
このあたりの説明は[この記事](https://aloerina01.github.io/blog/2019-06-21-1)に詳しい。

これでコンパイルはできるのだが、IE11でエラーが出て動かない。

“`
SCRIPT5022: Exception thrown and not caught
internal-state.js
“`

Google先生に問い合わせたところ、日本語の情報は見つ

コピペして使えるkeymap.js

# keymap.js

遊びで作ってたやつで一回使ったけど作るの面倒だったやつ。
誰かの役に立てば。

“`js:keymap.js
export default {
“0”: 48,
“1”: 49,
“2”: 50,
“3”: 51,
“4”: 52,
“5”: 53,
“6”: 54,
“7”: 55,
“8”: 56,
“9”: 57,
“A”: 65,
“B”: 66,
“C”: 67,
“D”: 68,
“E”: 69,
“F”: 70,
“G”: 71,
“H”: 72,
“I”: 73,
“J”: 74,
“K”: 75,
“L”: 76,
“M”: 77,
“N”: 78,
“O”: 79,
“P”: 80,
“Q”: 81,
“R”: 82,
“S”: 83,
“T”: 84,
“U”: 85,
“V”: 86,
“W”: 87,
“X”: 88,
“Y”: 89,
“Z”: 90,
“a”: 97,
“b”:

404を許さないChrome拡張機能

調べもの中にリンク切れページや、削除済みページに出会いすぎてイライラしてたのでchrome拡張機能の作り方の勉強のついでに404のページに対抗する拡張機能を作ってみました。

github: https://github.com/mugi111/page-not-found-detector

# 作り方
まずはmanifestファイルを作成していきます。
出来上がりは↓のようになります。

“`json:manifest.json
{
“manifest_version”: 2,
“name”: “404 DETECTOR”,
“description”: “”,
“version”: “1.0.0”,
“content_scripts”: [{
“matches”: [“http://*/*”, “https://*/*” ],
“js”: [“script.js”],
“css”: [“style.css”]
}],
“background”: {
“pers

[ニコニコ動画]一般会員でもプレミアム機能を使える理由

#はじめに
**PC版**ニコ動において
実は一般会員でもプレミアム限定の機能を使えてしまうという話です。
もちろん普通に使ってたら無理なのですが、ちょっとした裏技とか強引に使う方法とかがあるということです。

プレミアム会員になると使える機能

– 好きな位置で再生
– 反転再生
– 指定した秒数だけ動画をスキップ
– 広告なし（Adblock導入すれば一般会員でも消せる）

これらの機能は理論上（？）一般会員でも使えます。

#一般会員がプレミアム機能を使える理由
これが可能な理由は「プレミアム会員かどうかの判定とか制限はすべてブラウザ側で行われているから」です。
逆にサーバー側で制限する方法が思いつきません・・・。

動画プレイヤーはブラウザで読み込まれたJavaScriptで動作しているので、プレイヤーにかかる制限なども全部JavaScriptです。

これがわかれば、２通りの制限回避方法が思いつきます。

– ニコ動のプレイヤーを使わずに直接動画を再生する
– プレイヤーのJavaScriptを書き換えてプレミアム会員だと認識させる

「ニコニコ動画のプレイヤーが制限かけてる

ブラウザ上のピュア JavaScript で OAuth 認証して Twitter API を使う

Twitter API や OAuth を学ぶために、ブラウザ上のピュア JavaScript で認証して GET してみました。

学習目的でムリやりブラウザ上で動作させるため、実用的なコードではないです。

# 1. 準備

## 1.1. Twitter API 申請など

申請に関しては他の記事が分かりやすいので、各自で調べて申請をお願いします。英作文は必要ですが、自分の場合は申請からすぐ API を使える状態になりました。

## 1.2. Access token & access token secret

ここでは簡単にするために、Twitter Developers のアプリ管理画面から自分用のアクセストークンを作成します。


# 2. サンプルソースコード

ここでは話を簡単にするために以下の条件でコードを書きます。

–

webサービスを運営してみた(2020/2/8)

# はじめに
アルバイトの出勤時間を無料で管理できるサービス[Timestamp](http://time-stamp.net/home)を運用しています。
ここでは運用開発に関する記録を残していきます

# ページビュー
ページビューの記録はほとんどが自分のものですね。
qiita記事から何人か来ていただいたみたいでうれしいです！

# 雑記

### googleアナリティクスを導入しました
[googleアナリティクスのページ](https://analytics.google.com/analytics/web/?hl=ja)に従うだけで簡単でした。

### ランディングページを作成しました
デザイン難しいですね。出来に納得していないのですが先に進むことを優先します。
利用規約とプライバシ

お絵かきできるSNSを作りたい！3

お久しぶりです。

前回canvasを使って線を引くことが出来ました。
今回はマウスかペンを使って線を引けるところまで作ります。

基本的にcanvasの上でマウスまたは指を押した座標と動かしている時の座標と離すまでの座標を１ストロークごと書きこめば完成です。

指の場合はtouchstart→touchmove→touchend、
PCの場合はmousedown→mousemove→onMouseUp
のイベントを追加し、それぞれの関数で処理を書きます。

“`html:
var can;
can=document.getElementById(“canvas”);
can.addEventListener(“touchstart”,onDown,false);
can.addEventListener(“touchmove”,onMove,false);
can.addEventListener(“touchend”,onUp,false);
can.addEventListener(“mousedown”,onMouseDown,false);
can.addEventList

フロントエンド開発時に確認すべき５つの挙動

# 0. はじめに
　フロントエンド開発をしているとユーザーの予期せぬ行動で、予期せぬ挙動やバグを生み出してしまいます。しかし、フロントエンド開発の経験が浅いと、想定できるユーザーの行動も限られてきます。そこで、本記事では、確認しておくべきユーザーの行動について記載します。[^1]
[^1]: 今後、確認すべき項目が見つかり次第、順次追加していきます。

# 1. 前のページからの遷移
　前のページからの遷移を考えないことはまずないと思いますが、実装しなければいけないページにたどり着くまでの遷移が１パターンとは限りません。複数のURLから遷移してくることもあるので、どこからきてもエラーとならないように実装する必要があります。
# 2. 次のページからの戻りの遷移（リンクまたはボタン）
　前のページからの遷移が終われば、ページ遷移後の挙動の確認です。経験が浅い開発者で意外と確認し忘れることが多い挙動だと思います。その中でも、ページ上に意図的に設置されているリンクやボタンをクリックした時の戻りの確認がこの項目です。リンクやボタンの名称は「修正する」だったり、「戻る」だったり、プロダクトオー

AI化、５分でチェック・簡単無料POC! 5min POC(Proof Of Concept) on AI!

https://randomwalkjapan.blogspot.com/2020/02/aipoc-5min-poc-proof-of-concept-on-ai.html

自分の仕事がAI化できるか試してみたい人は多いだろう。Many may wish to check if the task working on can be on AI basis.

出来そうな気がするが、人に頼むとお金がかかるし、自分でやるには大変だし。いろんなシステムも宣伝しているが、使い方を覚えるだけで大変だ。決心してやってみて結局だめだったらお金と時間の無駄だし。It looks possible but will cost if ask someone. But looks hassle if do it your own. Google search shows many advertisements on AI systems but looks hard to learn. Also, even if you decided to do it, if it fails eventually,

Adobe PhotoshopでチャンネルごとにTIFFファイルを保存する

# はじめに
Photoshopで、psdファイルをチャンネル単位に個別のグレースケールTIFFファイルに保存する、JavaScriptを作りました。

作るに至った経緯を少々。
MKの紙面印刷用データを作る過程で、CMYKからMKに変換したという画像データを支給され、それを取り込んで紙面データを作成して後工程に渡しました。すると、画像データにYが残っていたとのことで紙面データが後工程から戻されてきました。
変換後の画像データに不要色が残っていないかチェックできればこのようなことは起きないわけで、ではチェックツールを作ればよいと。

もちろん、TIFFファイルにドットが載っているかどうかチェックできなければ無意味です。このチェック方法については別途投稿します。

なお、ここではPhotshopでのJavaScriptの動かし方については触れていません。

# どう動くのか
– ひとつのフォルダ内の複数のpsdファイルを同時に処理できます。
– スクリプトを起動すると、フォルダ選択ダイアログが開きます。このダイアログでpsdファイルを収めたフォルダを指定してやります。
– psdファイル

JavaScript・TypeScriptのimport・exportの依存関係を可視化するcode-dependencyの紹介

[](https://himenon.github.io/code-dependency/project/src/)

# はじめに

現在のJavaScriptは`export`、`import`によるモジュールの切り離しと結合が可能であるため。大きなプロジェクトに成長させることができます。

実装が進むにつれてファイル間の依存が複雑になっていき、実装全体の依存関係を把握するのが難しくなっていきます。これはプロジェクトに対して新しいメンバーが増えたときに、コードリーディングの時間を十分に取る必要があります。また、OSSのライブラリに貢献したいときも同様の状況が生まれるでしょう。特に後者は開発メンバーが近くにいるとも限らず、他国の方である可能性も十分に高いため開発に参加するための準備が必要になります。

このような、全体の依存関係の設計を見直したい

初心者によるプログラミング学習ログ 233日目

100日チャレンジの233日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

233日目は

おはようございます
233日目
・udemyのjabascript講座#早起きチャレンジJamstackって何なの？何がいいの？

## はじめに

– Jamstackという言葉をきくようになって久しいですが、最近改めてJamstackを学ぶ機会がありました
– 以前[こんな記事](https://qiita.com/ozaki25/items/cf7a0d9cc346e55469bc)も書きましたがライブラリやサービスを並べただけで何も分かってませんでした
– ようやくちょっとだけ理解してきたので、Jamstackの特徴やそれを支える仕組みをまとめます
– とりあえず流行りの構成を試してみただけの昔の自分へ届けてあげたい記事です

## Jamstackとは


– https://jamstack.org/
– JamstackのJAMはJavaScript/APIs/Markupの頭文字です
– JavascriptでAPIをたたいてMarkupを配信することを

元記事を表示

javascriptの.submitでif文を使う時のエラー

“`
$(‘#form’).submit(function() {

// form1が空のとき、エラー文を表示してください
if ( $(‘.form1’).val() === ”) {
$(‘.error-message-1’).text(‘入力してーーー’);
} else {
$(‘.error-message-1’).text(”);
}

return false;
});
“`

入力してーーー！と表示されない時のエラー。

if ( $(‘.form1’).val() === ”)の、クラスの.form1が、
htmlの

“`

“`
input内のクラスに名付けないと反応しない。

ドロップダウンメニューの作り方

webサイトなどでよく見るドロップダウンメニューの作り方を自身の備忘のために記録します。
今回は、jQueryを用いて実装します。

まずはHTMLです。jQuery及びJavaScriptもここで読み込んでおきます。

“`html:index.html

• Menu1
• Menu2
  • Menu2-1
  • Menu2-2
• Menu3
  • Menu3-1

React Nativeでスマートフォンのカレンダーのデータを取得

# 調査内容
Android/iOS共にNativeコードではスマートフォンのカレンダーデータにアクセスする事ができますが、React Nativeでアクセスする方法について調査しました。今回はAndroidでのみ動作確認を行いましたが、iOSでも動作可能と思われます。

# 設定手順
以下のモジュールを利用します。
https://github.com/wmcmahan/react-native-calendar-events

“`
$ npm install –save react-native-calendar-events
$ react-native link
“`

今回はAndroidで動作確認をしますので、AndroidのNa

webpack + jQuery(webpack.config.js書き方の例)

# webpack + jQuery
自分用メモ

# webpackはモジュールバンドラー

エントリーポイントに設定したjsファイルを中心に、各モジュールのjsファイルを纏めてbundle

– モジュール管理できるため機能ごとに開発ができ保守性が上がる
– 複数のjsファイル(cssや画像も)を一つのファイルにbundleできるためリクエスト数減少とパフォーマンス向上
※ ファイルサイズの増大によるパフォーマンス低下もありうる
– 依存関係の解消

CSSをインラインのstyleではなく、CSSファイルとして出力

# 1. webpack使用の下準備
## 1.1. webpackでの基本的なパッケージのインストール

“`shell:
$ npm init -y
$ npm i -S jquery
$ npm i -D webpack webpack-cli
$ npm i -D terser-webpack-plugin optimize-css-assets-webpack-plugin mini-css-extract-plugin
$ npm i -D node-