JavaScript関連のことを調べてみた2021年06月24日

Cordova：InAppBrowserのエラー処理で林檎にしてやられた件

良い子の皆さんは、InAppBrowserをそのままエラー処理なしで使ってなんかないと思います。

僕はクズ野郎なのでエラー処理なしで使ってました。
そうすると、ネット接続不良時とか、画面が真っ白になってアプリが死にます。クレーム殺到オワタ！(*^-^*)ﾉミ_☆

というわけ、ようやく一般常識に気づいた僕は、InAppBrowserのエラー処理を実装してみました！

“`javascript
this.Ref.addEventListener(“loaderror”, function(){
// なんか処理
});
“`

えらい！これでぼくもまっとうなぷろぐらまーだ！

と思ってたら、iPhoneでエライことになります。
どうもiOSの場合、InAppBrowserでリンク先への遷移実行中（ブラウザが考えてるとき）に再度リンクをタップするとエラーが発生するらしいです。クレーム殺到オワタ！(*^-^*)ﾉミ_☆

“`javascript
this.Ref.addEven

[JavaScript]paizaスキルチェックD 「足し算」/JavaScriptで数値化するには?

https://paiza.jp/works/mondai/skillcheck_sample/addition

足し算 (paizaランク D 相当)
今度は、javaScriptで挑戦しました。
Rubyが完璧とは程遠い中でJavaScriptを勉強し始めたため、若干混ざってしまいます…
こちらの問題はpaizaのスキルチェックDの見本問題集の問題ですので、コードの公開は自由だそうです。

問題を開いて言語を選択した段階で、下記の通りコードが与えられますので、
追記、修正していきます。

“`
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);
// 自分の得意な言語で
// Let’s チャレンジ！！
var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (line) => {

【Javascript】forEach関数について-学習ノート1

# 初めに
javascriptのforEach()関数について学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

前回の記事：https://qiita.com/redrabbit1104/items/c3501e087f54facc52fe

# forEach()関数
関数を引数にする関数（高階関数）の一つ。配列の要素を一つひとつに対して関数の中で記述した特定の処理を行うことができる。

# for of文と比較しながら使ってみる
forEach()関数を使ってchangesという配列の各要素の値を２倍にしコンソールに表示してみます。

“`javascript
const changes = [100, 400, -300, 120, -50, -330, 1400, 500];

changes.forEach(function (change) {
console.log(change * 2);
});
“`
配列の各要素の値が

正規表現の文字クラスが具体的にどの文字が引っかかるか一覧

ES2018から正規表現に便利な文字クラスが死ぬほど追加された。
なんとなく分かった気になってたけど、具体的にどの文字にマッチするのかいつまでもモヤモヤしてた。

ので、`\u0000`から`\uFFFF`までどの文字に引っかかるのか全部試して一覧にした。
小難しいこと抜きに己の肉眼で確かめたい人向け。説明は一切しないし出来ない。
サロゲートペアとか何も考慮してないし雑だが許せサスケ。

あと`\d`を`\D`みたいに大文字にしたら反転するのは省略した。

`\p{sc=Hiragana}`とか`\p{sc=Katakana}`とか`\p{Emoji}`とか便利かもしれない。まぁ`[ぁ-ゖ]` `[ァ-ヶ]` `[ｦ-ﾝ]`でいいけど。
全部`/\p{sc=Hiragana}/u`みたく`u`フラグつけないと使えません。

# 参考

– [Unicodeの文字プロパティを指定した正規表現をみてみる（ECMAScript2018）](https://blog.tes.co.jp/entry/2018/06/29/145450)
– [Unicode property escapes i

Railsアプリに隠しコマンド・隠しページを実装してみる

## 概要

Railsアプリを作っている際、特定のコマンドを知っている人だけが辿り着けるページみたいなものがあれば面白いなと思い調べてみたところ、JavaScriptを上手く使えば実装できる事がわかったので試してみました。

実運用できるレベルかどうかは別として完全に遊び心みたいな感じです。（URLを直打ちすれば普通に飛べちゃうみたいな野暮なツッコミは無しでお願いします（笑））

## 完成イメージ


今回はかの有名な [コナミコマンド](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%8A%E3%83%9F%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89) （上上下下右左右左BA）を入力した場合、隠しページにつながる導線をアラートメッセージで表示するような仕組み

Chrome Developer Tools で Web サイトの一部からリンクの一覧を取得する

## 手順

要素を選択した後にこのコマンドをコンソールで実行するだけです。

“`js
$$(‘a’, $0).map(a => a.href)
“`

## 使ってみた

### Yahoo News のトピックス一覧

コマンドはそのまま使えます。

[](https://raw.githubusercontent.com/KtoZ/gif/main/20210623230112.gif)

### TechCrunch Japan の新着順一覧

無駄なリンクを取り除くために selector に h2 を追加します。

“`js
$$(‘h2 a’, $0).map(a => a.href)
“`

[](https://raw.githubusercontent.com/KtoZ/gif

Windows + Adobe CC illustrator / CEP 5 でイラレのカスタム UI を作ってみる (3) ボタンを作ってリロードする

## Introduction
Adobe illustrator (イラレ) の仕事では線幅やカラーが厳格に指定されている図形を多用する場合があります。(例えば地図作成や誌面デザイン、手芸の手順書 etc.)
illustrator では既定で直線や円などの描画モードがワンボタンで選べるので、同様に所定の図形をワンボタン化できないか調べてまとめました。

この記事は CC 版 illustrator / Windows 環境が対象です。この章ではボタン作成の第一歩として、エクステンションをリロードするためのボタンを作ってみます。

## illustrator のエクステンションはリロードが大変
エクステンション開発に当たっては、コードを組んでは試すような試行錯誤が必要になります。ところが illustrator でこれをやろうとするとリロードの問題に突き当たります。エクステンションの中身を更新しても、illustrator を再起動しない限り変更が反映されないのです。

試しにサンプルプログラムでボタン押下時に出力されるアラートの文章を変えてみましょう。
これは jsx フォルダ下

Windows + Adobe CC illustrator / CEP 5 でイラレのカスタム UI を作ってみる (2) 中身をざっと見る

## Introduction
Adobe illustrator (イラレ) の仕事では線幅やカラーが厳格に指定されている図形を多用する場合があります。(例えば地図作成や誌面デザイン、手芸の手順書 etc.)
illustrator では既定で直線や円などの描画モードがワンボタンで選べるので、同様に所定の図形をワンボタン化できないか調べてまとめました。

この記事は CC 版 illustrator / Windows 環境が対象です。この章では UI 作成の前に、まずはサンプルスクリプトの中身がどう絡み合っているかを紐解いていきます。
※読み飛ばしても OK

## エクステンションの中身をざっと把握する

エクステンションのコードがどう動いているのかのイメージを押さえます。(超雑感)
(HTML の感覚が20年くらい前で止まってるのでご容赦を…)

#### index.html – ユーザーの触るパネル
ユーザー目線ではエクステンションの画面を見て、そこにあるボタンを押下することになります。このインターフェースは中身的には HTML を開いて表示しているわけで、 index.h

TweetボタンのテキストをJavascriptで動的に変更する

# 概要
[最近作ったサイト](https://aiju-k.github.io/how_much_is_your_hour/)で、Tweet機能を実装する際に、診断メーカーとかでよくある「ツイート内容を動的に書き換える」のにひと工夫必要だったので、ここでまとめておこうと思う。

# 機能の詳細
* ツイートボタンをクリックすると、Javascriptが動いて、テキストを生成してツイート画面に遷移、という流れ

# 実装
### まずTwitter公式が提供するテンプレートのツイートボタンを試してみる
* Twitterの公式で、ツイートボタンを生成できる
* リンク：https://publish.twitter.com/#
* 下にスクロールすると、下記のオプションがあるので、右の”Tweet Buttons”をクリック
![スクリーンショット 2021-06-23 21.21.07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/710484/456a39b4-9b66-02ed-b563-3da7

Windows + Adobe CC illustrator / CEP 5 でイラレのカスタム UI を作ってみる (1) 環境準備

## Introduction
Adobe illustrator (イラレ) の仕事では線幅やカラーが厳格に指定されている図形を多用する場合があります。(例えば地図作成や誌面デザイン、手芸の手順書 etc.)
illustrator では既定で直線や円などの描画モードがワンボタンで選べるので、同様に所定の図形をワンボタン化できないか調べてまとめました。

この記事は CC 版 illustrator / Windows 環境が対象です。この章では開発環境の準備をメモしました。

## illustrator の開発
illustrator は以前から JavaScript によるスクリプティングが可能でした。スクリプトを記述して特定フォルダに保存しておきメニューから起動します。(当時は UI は特になし)
(スクリプトのリファレンスは以下)
https://www.adobe.com/devnet/illustrator/scripting.html

以前は開発・デバッグ用のツール “Adobe ExtendScript Toolkit” があったようなのですが、CC 向けはすでに

【Vue.js】ミックスインの使い方と注意

## はじめに
仕事で使う事になったので1からVue.jsについて学んだ。ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。

## ミックスインの使い方と注意
### ミックスインとは
[^オプション]: data(){}, filters(){}, など
Vue.jsのインスタンスのオプション[^オプション]を共通化させて再利用できるようにする仕組み。
以下の例では、`import { tokyoNumber } from “@/tokyoNumber”;`としている部分でミックスイン`tokyoNumber`を読み込んでいる。

“`vue:CountNumber.vue