TexTraの翻訳 APIをJavaScriptだけで取得する

**Web API の JavaScript での取得方法について** の質問があったので作ってみました。

https://mt-auto-minhon-mlt.ucri.jgn-x.jp/content/qa/detail/?q_qa_id=1790&t=1656590695

See the Pen
TexTra 翻訳 Demo by John D

【JavaScript】SessionStorageとは？

SessionStorageとは

SessionStorageは、データをセッション中保存できる仕組みのこと。

同一オリジンで、ブラウザ(タブ)が閉じられるまでは、データ保存が維持されます。
(ページの再読み込み(リロード)でも、データは消えない。)

※同一オリジンとは、
・http://www.abc.jp
・http://www.abc.jp/content
・http://www.abc.jp/login
上記は同一オリジンです。
・http://www.abc.jp
・https://www.abc.jp/content
・http://www.abd.jp/login
上記は同一オリジンではありません。

また、実装で好きなタイミングでSessionStorageを削除することができます。

実装を見る

概要：
フォーム画面を作成して、フォーム画面で入力したデータをtsファイルで取得します。
取得

“`a.ts
storageUserId = “”;

sessionStorageName(){ //userIdをセッションス

複数選択を考える

# モチベーション

Electronの勉強のために[TaskTab](https://fiplab.com/apps/task-tab-for-mac)のクローンを作っていたら複数選択で行き詰まった

## 行き詰まった理由

– 一口に複数選択といってもOSやライブラリなどで仕様が異なる
– 直感的でない仕様がある
– 複数選択のライブラリはあるがテーブルと蜜結合していることが多く使い辛い（使いたかったのはリストのため）

# 仕様を考える

> 一口に複数選択といってもOSやライブラリなどで仕様が異なる

全ての仕様を網羅することはできないので、MacのファイルマネージャーであるFinder（≒Google Slide）の仕様を目指します。

Finderの複数選択は[ibash/better-multiselect](https://github.com/ibash/better-multiselect)でほぼ分析されていますが、一部足りない仕様があったため追記しています。

“`diff_markdown:意訳
ルール

アンカー：選択を開始する位置
フォーカス：選択を終了

オリジナルのyoutubeページを作成してみました

# 概要
[「なつかしの曲(ポータル)」](https://tecoyan.blogspot.com/2020/05/0.html#btn_cntrl)は、[youtubeページ](https://www.youtube.com/watch?v=bFQyYwWV58M&t=106s)のオリジナルページです。
特長としては、国内、海外の昔なつかしい歌や曲を再生リストにして再生することができます。
再生リストはGoogleブログとサーバーのデータベースに保存しています。
このサイトのブログ記事を開くと月日別の投稿記事で再生リストの再生が始まります。
また、リスト選択でデータベースの再生リストを選択して再生できます。
# ページ詳細
このページは、基本要素とオプション要素から構成されています。以下、順に追って説明いたします。

## (1) 基本要素
このページの基本要素は、プレーヤーと再生リストです。
ページを開くと再生リストの先頭から再生がスタートします。あとは、ほったらかしにしておくと連続してリストを再生します。
イージーリスニングサイトをイメージしています。

## (2) オプショ

Python,Ruby,PHP,Java,JavaScript,Perlの条件分岐の比較

Python,Ruby,PHP,Java,JavaScript,Perlの条件分岐の比較

# Python

https://qiita.com/Morio/items/1e06e7ac768758af5ffe

# Ruby

https://qiita.com/sagawashu/items/0f08266d5f72229423d9

# PHP

https://qiita.com/Hashimoto-Noriaki/items/dfb76d440a64eccba95d

# Java

https://qiita.com/setonao/items/ebc341ddf6d95295c48e

# JavaScript

https://qiita.com/taiju_suzuki/items/e2bf11fcf1645623235f

# Perl

https://perlzemi.com/blog/20161023147731.html

ホームページのバナーはバニラのjsよりslick.jsを使った方が早いかつ品質が良い話（1）

初めて記事を書いていみました。
外国人かつ日本語学科ではないので、日本語がグダグダかもしれませんが、大目に見ていただければ幸いです。
コメント、指摘などはご自由にどうぞ。
※この記事には前編と後編があります。slick.jsは後編にて紹介します。

本記事対象

本記事は本人のキャリア経験を踏まえ、下記の方を対象に想定し、作成いたしました。

• Javascript初心者
• フロントエンド初心者
• 非IT系会社の社内SE、情報システム部
• サイト保守会社との窓口担当者
• ウェブサイトデザインに興味のある方

環境

会社の公式サイトが2013年にウェブサイト制作会社に依頼し、
多分値引きをしたか、フレームワークを使わず、バックエンドのPHPはバニラ、フロントエンドも全部バニラで開発されました。
PHPは「Template P

【Tesseract.js】で手書き文字認識を試してみる

※HTMLの`canvas`要素に手書き文字を書き込んで、`Tesseract.js`に文字認識してもらっています。

# はじめに
　先日、[【Tesseract.js】画像から数字を読み取って数独を解くWebアプリを作ってみた](https://qiita.com/fruit_ole/items/4576deeda11e86ee88e3)　という記事を投稿しました。いろいろ調べてみると、`Tesseract.js`は手書き文字もある程度認識できるということだったので、どの程度使えるのか試してみました

【実践GAS】「スプレッドシートのあの列のデータが欲しい！」って時に読んでほしい記事

# GASはいいぞ
スプレッドシートっていいですよね。最近は様々なプラットフォームで共同編集機能が追加されたりしていて技術の進歩に追いつけません。（おじさん並みの感想）
その中でもGoogle Spread Sheetはサーバーレスでスクリプトを走らせることができたりするので特に便利です。GCPとの相性も最高で、GAS X GCPで一本サービスを作れるまであります。
そんなGASで最も需要があるのはなんといっても”スプレッドシートの読み書き”です。慣れるとDBと同じ使い心地でシートからデータを取り寄せられるようになれます。
しかし、列の選択を行う方法は無数にあり、それぞれメリットとデメリットがあったので代表的なものをまとめました。

## 概要

列を取得する方法は主に3つ：
– 絶対位置参照
– `sh.getRange(c,r)`
– 最もシンプル
– 列の入れ替えで動作しなくなり、コードはマジックナンバーまみれとなる。
– 列内の値で検索
– `sh.getRange(c,r,nc,1).Values().indexOf(“hoge”) + 1`

マンデルブロ集合を JavaScript で高速に描く（WebGL編）

# はじめに


[前の記事](https://qiita.com/Satachito/items/0d963da40f2afca6920e)でマンデルブロ集合を Canvas要素に書く方法をご紹介しました。imageData を使う方法で、ms オーダーまで高速化できましたが、それでもまだリアルタイムな描画とはいえませんでした。また処理時間が画素数に比例するので、大きなエリアでは描画されるまでにタイムラグが生じていました。

https://qiita.com/Satachito/items/0d963da40f2afca6920e

前の記事の描画部分を WebGL に取り替えて高速化を図るのが本校の目的です。

実際に使えるようにしたサイトを作りました。
見たい場所をマウスで選択してズームしていけるよ

Math.clz32とUTF-8

`Math.clz32`という標準関数を、UTF-8の処理に使ってみた話です。

## `Math.clz32`とは

`clz`はCount Leading Zeros（先頭にある0の数を数える）の略で、その名の通り、引数を32ビット符号なし整数として、先頭に入る0の個数を数える関数です。

ARMやx64にも搭載されるなどメジャーで高速に実行可能な演算で、他のビット操作を構築する要素としても使えるとのことです。

## UTF-8のビットパターン

UTF-8はマルチバイトの文字コードですが、シフトJISで起きた「ダメ文字」（2バイト目にASCIIの範囲まで使っていたことで、ASCIIとしての処理が行われて誤作動する）などの問題を避ける、そして文字の区切りをはっきりさせるために、バイトごとのビットパターンによって使われる場所をはっきり区分けしています[^1]。

| 16進 | ビットパターン | 役割 |
|:-:|:-:|:-:|
| 0x00 – 0x7F | 0xxxxxxx | 1バイト文字 |
| 0x80 – 0xBF | 10xxxxxx | マルチバイト文字

【JS】new Date、1桁or2桁の年 だとバグる問題

# バグっている問題

“`sample.js
const date1 = new Date(‘0001-12-17 03:24:00’);
// > Thu Jan 12 2017 03:24:00 GMT+0900 (日本標準時)
const date2 = new Date(‘0011-12-17 03:24:00’);
// > Sun Nov 12 2017 03:24:00 GMT+0900 (日本標準時)
“`

`date1`で、期待しているのは`1年12月17日`です。

ん？？ `2017年1月12日`。

1桁or2桁の年、つまり、1~99年の場合にバグります

しかし、謎に年が100年以上の場合は上記のバグは再現できません

“`sample.js
const date3 = new Date(‘0111-12-17 03:24:00’);
// > Thu Dec 17 0111 03:24:00 GMT+0918 (日本標準時)
const date4 = new Date(‘1111-12-17 03:24:00’);
// > Sun Dec 17

【WordPress】アンカーリンク＋target＝_blankで挙動がおかしくなる時の原因と対策

## 起こった現象

WordPressで、以下のようなリンクをクリックした場合↓
“`html:html
別窓リンク
“`
問題なければ、別窓orタブがひらいて、testページの「id=”midashi”」へ、移動した状態が表示されます。

今回なぜか、クリックした元のページがtestページに遷移したうえ、別窓orタブでtestページを開く（でもidの位置へ移動はしない）という現象が起きました。

WordPressでサイト作成中に遭遇したので、WordPress上での対策として書きます。

## 原因

WordPressで使用しているテーマまたはプラグインに同梱されている「スムーススクロール」が原因でした。

スムーススクロールはだいたい“`$(‘a[href*=”#”]’).on(‘click’,function(){});“`という感じで「#」を含むリンクをクリックをすると発火するようになって

LINE WORKS Bot メッセージの送信 JavaScript サンプルコード

# Bot – メッセージの送信

Bot からのメッセージ送信方法は、ユーザー指定とトークルーム指定の２つがあります。
– [メッセージの送信 – ユーザー指定](https://developers.worksmobile.com/jp/reference/bot-user-message-send?lang=ja)
POST/bots/{botId}/users/{userId}/messages

– [メッセージの送信 – トークルーム指定](https://developers.worksmobile.com/jp/reference/bot-channel-message-send?lang=ja)
POST/bots/{botId}/channels/{channelId}/messages

グループや組織のトークルームにメッセージを送信するにはトークルーム指定を使用します。

## JavaScript Sample Code

request モジュールを使用したサンプルコードです。
事前に `npm install request` を行って request モ

const, var, let の違いをざっくりメモ

## 発端
Vue ファイルのscript タグ内、created に記載した関数のなかで、定義したはずの変数がコンソールで「**定義されていません**」というエラーになったのが、ことのおこり。

最初はキーワードを何も付けていなかった。

“`javascript
created() {
searchParams = new URLSearchParams(window.location.search);
if( searchParams.has(‘pattern’) ){
pattern = searchParams.get(‘pattern’);
if ( pattern === ‘A’ ) {
this.pattern = ‘A’;
} else if ( pattern === ‘B’ ) {
this.pattern = ‘B’;
}
}
}
“`

![image.png](https://qiita-image-store.s3.ap-northeast

（再現度高め・無料）初学者のためのWEBアプリ公開マニュアル

初学者ながらjavascriptでアプリを作成して誰かに見せたいが、
・公開をする方法がわからない・・・
・ものすごく公開するまでが大変な気がする・・・
というのが悩みでした。

しかし、簡単なNode.js（express)の記述と、GitHUbへのpushさえできてしまえば、Herokuでそこそこ簡単に公開できることを学びました。
スマホにも対応してくれます。

実際の公開方法を細かく説明いたします。

■注意：
・筆者自身、GitHubをよく理解しておらず、Herokuもよく理解していないため、GitHUbにpushすると、Herokuで公開できるという認識しかございません。
・コードを簡潔に理解するため、非同期処理を用いません。
・個人情報を含むアプリはpushしないでください。
・GitHUbへのpushに相当てこずりました・・・正しい方法でない可能性があります。

■実行環境
・windows10 pro
・vscode
・node.js(16.17.0 LTS)—要インストール
・git bush—要インストール
(ターミナルはgit bushを使ってください）

【CSS】画像のbefore・afterをスライドさせて、比較できるようなUIを作ってみた。

## 概要

みなさんは、このようなUIは見たことがあるでしょうか？

この記事では、↓このようなUIをCSSだけで作成する方法と`Image Compare Viewer`を使う方法を紹介します。


## CSSだけで実装する場合
:::note warn
CSSで実装する場合は、CSS プロパティの`resize`を使うため、
before と afterを切り替えるためのドラックするUIが少し扱いづらいですがご了承ください。
:::

### 基本的な書き方
以下のようなHTMLに対してスタイルを当てる前提で進めます。

“`HTML

人事のおじさんプログラミングを学ぶ Day7「while文を使って繰り返す」

書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
While文を使って繰り返してみた。

ウェブデザイン技能検定2級　令和4年度　対策　実技

実技の対策はYoutubeに参考の動画がありました。
学科の対策は公式の過去問やGoogle検索で見つけたもので学習。

GoogleAppsScriptは何で書くべきか(公式orローカル / JSorTS )

# 初めに

ライブラリ等でメリットデメリットが大きく変わってくるため、
大雑把になっています

# GoogleAppsScriptを書く手段

– 公式サイトで作成する
– 公式エディタ([https://script.google.com](https://script.google.com))でJavaScriptで記載する
– ローカルで作成する(EditorはVSCode)
– JavaScriptで記載し、そのままclaspでpushする
– TypeScriptで記載し、そのままclaspでpushする(自動でトランスパイルされる)
– JavaScript/TypeScriptで記載し、webpack等を使ってビルドして、claspでpushする

# それぞれのメリット・デメリット

## 公式エディタを使って、JavaScriptを使う

### メリット

– ライブラリ,サービスの使用やデプロイを、GUIで書ける
– JSDocで型を記載できる(paramとreturnしか使えない)
– 一応Gitが使える(拡張機能をインストー

JavaScript基礎知識の拾い集め

# 初めに
何か月もかけてやっと一通り基礎を勉強してきました。残りの断片的な知識は一つの文章にまとめたいと思います。

# Precedence & Associativity
優先度と結合性、[Operator precedence](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)。
（日本語版と英語版の順位は違う。ここでは英語版に準ずる）
**優先度：優先順位の大きいほうから実行する。
結合性：優先順位が同じである場合は実行の方向性を決める。**

“`jsx
let a = 5 * 2 + 6 / 3 – 2
console.log(a) // 10
// Addition (+): 11, left-to-right
// Subtraction (-): 11, left-to-right
// Multiplication (*): 12, left-to-right
// Division (/): 12, left-to-r