JavaScript関連のことを調べてみた2019年12月13日

DataTablesを日本語化したときの留意点

#DataTablesについて
[DataTables](https://datatables.net/)はHTML上で表を扱う時に非常に便利なライブラリです。
高機能で、必要になりそうな操作はほとんどがプラグイン形式で用意されています。
そのなかで、1点、重要と思われる留意点を見つけましたので共有したいと思います。

#国際化プラグイン（language.urlオプション）はテーブルの初期化を非同期にする
[国際化プラグイン](https://datatables.net/plug-ins/i18n/)を使ってUIの日本語化（国際化）を行うと、設定オブジェクトの取得がAjaxで行われるため、`$(dom).DataTable()`による初期化とそれ以降の処理のタイミングがずれます。
公式ドキュメントにもちゃんと[注意書き](https://datatables.net/reference/option/language.url)がありました。

>Note that when this parameter is set, DataTables’ initialisation will

DECK.GLを使ってGoogleMapタイムラインをビジュアライズしてみよう！#1

初めて技術ブログを書きます！

記念すべき１回目の記事は、データビジュアライゼーション！
DECK.GLというめちゃかっこいいJavaScriptライブラリを使って、GoogleMapのタイムラインをビジュアル化してみたいと思います。

# DECK.GLってなに？
DECK.GLとは、Uberが作ったJavaScriptの地理情報に特化したデータビジュアライゼーションライブラリです。
[https://deck.gl/](https://deck.gl/)

メチャかっこいいですね！:sparkles:

2016年にリリースされてから、今でも進化を続けているオープンソースのライブラリです。
GitHubはこちら → https://github.com/uber/deck.gl

DECK.GLについてもっと語りたいところですが、それ

【Perl】動的にを増やし、複数ファイルをサーバにアップロードする

#なぜmultiple属性を使わないのか？
HTML5を日頃から使用している方なら複数ファイルアップロードを実装する場合、multiple属性を使うことを真っ先に思いつくと思いますが、今回はあえてmultiple属性を使用せずに、一つファイル選択が終了したらまた真下に次のタグを増やしていくようにしました。というのも、クライアント端末のブラウザのバージョンが古く、HTML5に対応していないからという業務上の都合です。

#前提条件
-サーバにPerlをインストールしていること
-jqueryをサーバ上に配置していること

#機能
-動的にタグを増やし、複数ファイルアップロードができる。
–タグに個数制限を設ける。

##フロント側処理
“`perl:uploadform.cgi
#!/usr/bin/perl
#アップロードフォーム
#メイン

&disp

#画面部HTML
sub disp{
print <

A-FRAME: 物理演算でボーリングっぽい動きを実現してみる１１（これまでのまとめ）

A-Frameをつかって物理演算をできるようにしてみます。
これまで１０回の記事を通して、物理演算ライブラリについて学んできました。

– [A-FRAME: 物理演算でボーリングっぽい動きを実現してみる１（ボールの速度）](https://qiita.com/matsukatsu/items/7b5a2bddecd1102e18a2)
– [A-FRAME: 物理演算でボーリングっぽい動きを実現してみる２（ボールの形状）](https://qiita.com/matsukatsu/items/9a3b6b81a35f9f867ca4)
– [A-FRAME: 物理演算でボーリングっぽい動きを実現してみる３（ボールの重さ）](https://qiita.com/matsukatsu/items/50feef3430b323bfb43f)
– [A-FRAME: 物理演算でボーリングっぽい動きを実現してみる４（ボールの平行移動への抵抗）](https://qiita.com/matsukatsu/items/cea871316cdb0a1d8526)
– [A-FRAME: 物理演算でボ

Rails JQuery 動かない

# JQueryはちゃんと書けている。ソースも更新されている。
しかし、狙い通りに動作しない。Javascriptのエラーもでてない。
単純にalert();とかconsole.log()；とかやっても反応しない。

全く動かないわけではなく、ページを再読み込みしたときは狙い通りに動く。
ぐぬぬ。

## 理由はturbolinksだった。

“`application.html.erb
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
“`

turbolinksがあるとSPAのような動きをするらしい。(SPAよく知らないが)

>[Rails 4のturbolinksについて最低でも知っておきたい事](https://kray.jp/blog/must-know-about-turbolinks/)
>turbolinksの動作は、すごく大雑把に言うと以下の通りです。
>
>1. リンクのclickイベントをフック
>2. リンク先のページをXHRで取り寄せる
>3. レスポン

Angular を技術選定の一つに取り入れる内容を書いていたら、今のフロントエンドに思っていることを綴ってしまった記事

本記事は [DMM Advent Calendar 2019](https://qiita.com/advent-calendar/2019/dmm) の 13日目 の記事です。

今回は、割とまだ世間一般的には認知や使用率が低いとされている（気がする） [Angular](https://angular.jp/) をフロントエンドの開発の一選択肢に入れてもいいのではないか？

という内容をゆるく考えてみたので、お付き合いいただければ幸甚です。

※1 筆者はまだ Angular を十分に使いこなせているわけではなく、徐々に理解を深めている最中です。内容に至らないところなどありますがご承知ください。ただ、この段階でも十分に Angular を使うメリットがあるかなと思いましたので、記事に書き起こしています。

※2 また、この記事は基本 Angular に限らず技術のここがだめみたいな比較はしない体でいきます。いろんな技術にはメリット / デメリット絶対存在しますし、そもそも置かれている状況でそのメリット / デメリットも人によって捉え方は様々です。

※3 ゆるく考えていたのですが、

JSを使った様々なSafariブラウザからのアクセス判定の方法

ITP対応のため、各アドテクノロジーツール提供元企業がJavaScriptを使ってどのようにSafariブラウザからのアクセスを判定しているのか個人的に気になったのでまとめました。参考までにどうぞ。

# SafariブラウザのUser Agent例

|デバイス| OS | User Agent |
|:-:|:-:|:–|
|iPhone|Safari 13 on iOS 13|`Mozilla/5.0 (iPhone; CPU iPhone OS 13_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1`|
|iPad|Safari 12.1 on iOS 12.2|`Mozilla/5.0 (iPad; CPU OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1 Mobile/15E148 Safari/604.1`|
|mac|Sa

shufooのPDFチラシをembedで表示する

スーパーのチラシの比較検討用に一枚のHTMLで近隣のチラシをずらっと並べようとしまして、

* 固定URLの画像チラシはimgの直接リンク
* テキスト(HTML)形式の特売情報はiframe

としていましたが、自動で更新される[Shofoo!](http://www.shufoo.net/)からの配信チラシはどうしようかと悩みました。

こんなの。

デジタルチラシはFlash製でもうずっと読めないので毎回(あれば)PDFチラシを見ているのですが、これを毎回クリックするのも面倒くさいし自作のHTMLにどう組み込めばいいのかも不明でした。

のでコードを読んでなんとかします。

# Shoofooのチラシを生成する

Shofooのサイトからは情報がみつからなかったので、シンプルなスーパーのサイトからソースをのぞくとこんな感じでした

僕は、なぜ絵文字の長さが、直感に反するのか理解したい…!!

対象者

– UnicodeやUTF-16について、よくわかってない人 -> [ここから](https://qiita.com/youya66/items/e2272b8da466c4e01c47#%E6%96%87%E5%AD%97%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%82%82%E3%81%86%E4%B8%80%E5%BA%A6)
– “?”.split(“”)で文字化けする理由がわからない人 -> [ここから](https://qiita.com/youya66/items/e2272b8da466c4e01c47#es2015%E3%81%A7%E7%B5%B5%E6%96%87%E5%AD%97%E3%81%AE%E9%95%B7%E3%81%95%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B)
– […”?‍?‍?”].lengthが5になる理由がわからない人 -> [ここから](https://qiita.com/youya66

JavaScriptとソートアルゴリズムで学ぶ再帰処理

ソートアルゴリズムもよくわからんし、再帰処理もよくわからん人間が
なんと勉強しました。

“`javascript:main.js

{

// 再帰の基本
// まずはあの有名な高田健志を発見する再帰処理

const haveKenshi = list => {

if(list.length <= 0) return if(list.pop() == "高田健志") console.log("高田健志ってすごいよなぁ！？") haveKenshi(list) } const talent = ["もこう","横山緑","高田健志","こくにい"] haveKenshi(talent) } /** * ["もこう","横山緑","高田健

【サーバレス時代の負荷テスト戦略】面倒な負荷テストとはおさらばしよう 〜CircleCIで実現する継続的負荷テストとチューニングTips〜

# 負荷テストとサーバレス


負荷テストに対する考え方は時代とともに変化してきました。従来はサーバスペックやシステムの限界性能を測るという考え方でしたが、クラウドネイティブなシステムではそれに加えて、システムの弾力性（スケールアウトのしやすさ）も考慮する必要があります。

本記事では、負荷テストによるシステムの弾力性の評価と、改善する方法についてツールの具体的な使用方法やアプリケーションのチューニング Tips を交えて説明します。システムの弾力性を評価するために、プロダクション環境でのユーザからのリクエストを想定したロードテストを検討します。

ロードテストでは以下の項目を検証します。

### ドリップテスト

ドリップテストは通常、数日間にわたって行われます。通常のバックグラウンド負荷レベルをシミュレートします。遅延またはエラー率の増加が

カルネージハートぽいAPIのJavaScript対戦ゲーム作った紹介

JavaScriptのプログラムを書いて対戦させるゲームを作ったのですが、カルネージハートを少し意識したルール・APIとなっているので、きっと[カルネージハート Advent Calendar](https://qiita.com/advent-calendar/2019/carnage-heart)を観に来る方であれば興味を持ってもらえるんじゃないかと思い13日目の記事として紹介。

## 作ったもの
以下のようにJavaScriptのプログラムを書いて対戦できるゲームです。 Sourcer ( https://github.com/benishouga/sourcer ) といいます。

## カルネージハートっぽさ
– カルネージハートのように以下のように状況を判断してアクションするというようなプログラムが書きやすいAPIとなっています
–

jQuery UIを利用してダイアログ表示

“`jQuery UI“`を使って、クイズを作る。テキストボックスに答えを入力して、送信ボタンを押すと正解か不正解かのダイアログを表示する。
“`jQuery“`を使うのは初めてであり、“`Javascript“`もこれまであまり触ってこなかったので、足跡をここに記す。

まず、`html`ファイルを作り、デザインを整える。

“`html:quiz.html

クイズ

ITクイズ～基礎編～

HTML

JavaScript

jquery.ui

元記事を表示

Slack App + Google App Scriptsで【学生団体】の作業効率を爆上げ【その２】

## その１はこちらから
[Slack App + Google App Scriptsで【学生団体】の作業効率を爆上げ【その１】](https://qiita.com/nomunomu0504/items/a883ae46a50cc04b284b)

## 開発
### ④：取得した内容を元にFacebookページに投稿するための準備
ここでは、管理しているFacebookページにGASから投稿するために、FacebookAppを作成して、FacebookGraphAPIを経由します。が、このAPIにはトークンが必要になります。一般的なものは、トークンに有効期限があるので、無期限のトークンを発行して、GASで利用します。

#### FAcebook PageのページIDの取得
公式のこちらを参照してください。ページIDを取得したら、GASの PageId 変数を書き換えてください
[FacebookページIDを見つけるにはどうすればよいですか。- Facebook Help](https://www.facebook.com/help/1503421039731588)

####

初めてのchrome拡張機能、qiitaのヘッダの色を変更

#やること
初めてchromeの拡張機能を作る人向け
例として、Qittaの派手な緑色をグレーに変更するためにクロームの拡張機能を作る

今回は自分で使うだけで公開設定はしない
本当に最低限の設定

~~これでQiita使っているのがぱっと見バレないね!!~~

# 流れ
– 自分のPCにファイルを作る
– ファイルにはhttps\://qitta.com/がつくときにはcontent.jsを実行する用に設定するmanifest.json
– 実行したい文を書いたcontent.js
– chromeで読み込む

# ファイル構成
“`
src
|- manifest.json
|- content.js
“`
フ

09. Typoglycemia

## 09. Typoglycemia
スペースで区切られた単語列に対して，各単語の先頭と末尾の文字は残し，それ以外の文字の順序をランダムに並び替えるプログラムを作成せよ．ただし，長さが４以下の単語は並び替えないこととする．適当な英語の文（例えば”I couldn’t believe that I could actually understand what I was reading : the phenomenal power of the human mind .”）を与え，その実行結果を確認せよ．

###Go
“`go
package main

import (
“fmt”
“math/rand”
“strings”
“time”
)

/*
* 配列からランダムで1要素を取り出し値を返す、またその配列は削除する
*/
func choice(m *[]string) string {
// 値数内の乱数を発生
i := rand.Intn(len(*m))

// 該当の単語を取得しマップから削除
str := (*m)[i]

// これは便利（

ESLint設定ファイルまとめ✨

[ESLintの設定ファイル](https://eslint.org/docs/user-guide/configuring)が
それぞれ何を設定しているのかイマイチ把握してなかったのでまとめました
必要であればテンプレートとしてお使いください?‍♀️
([個別のルール](https://eslint.org/docs/rules/)までは記載してません)

“`javascript:eslintrc.js
module.exports = {
// Environments (構成情報)
// ==============================

// ESLintを処理するプロセッサの指定
// https://eslint.org/docs/user-guide/configuring#specifying-processor
parser: ‘@typescript-eslint/parser’,

// ECMAScriptのバージョンやJSXなどのパーサのオプションを指定
// https://eslint.org/docs/use

アプリを使わずにiPhoneで写真を撮る方法

#はじめに
アロハ！
　今回は、ネイティブアプリを使わずにiPhoneで写真を撮る方法を書きます。
一般的にiPhoneで写真を撮る方法は、おそらく３つあります。
１つ目は、Appleがプレインストールしている「カメラ」アプリ。
２つ目は、誰かが作ったカメラ系アプリ。Swiftで書いたり、Objective-Cで書いたり。私も以前、「お天気カメラ」というアプリをAppStoreでリリースしていました。（数年前に公開停止しました。）
お天気カメラで写真を撮ると、位置情報からopenweathermap.orgのAPIを叩いて、気象情報を取得して、写真にオーバーレイして保存できるものでした。懐かしい・・・。
３つ目は、Safariを使う方法です。今回は、このお話です。
アプリを入れずに写真を撮って、サーバーへ送ったりできるので、いろんな使い道があります。例えば、文字が書かれた看板を撮影し、OCRで読み込んで、翻訳するといったことにも使っています。東京都内の某店舗にご協力いただいて、絶賛実験中（NFCやQR

Javascriptでテーブルの特定列の表示・非表示を切り替える

# 実装したいもの

HTMLのテーブルで、チェックボックスを用いて、列ごとに値の表示・非表示を行いたい。

– [x] 住所
– [x] 年齢

|氏名|住所|年齢|
|:-:|:-:|:-:|
|山田|東京|20|
|佐藤|神奈川|24|
|渡辺|大阪|18|

たとえば、上記テーブルで「住所」の列だけを、非表示になるようにしたい。

– [ ] 住所
– [x] 年齢

|氏名|年齢|
|:-:|:-:|
|山田|20|
|佐藤|24|
|渡辺|18|

こんな感じ。

# コード

以下のようにコードを記述する。テーブルはPHPで出力していてもよい。

“`sample.html

住所

Viewport固定幅のようにHTMLのスケールを変える

レスポンシブにコンテンツ全体の幅を変えたくて作りました。

https://codepen.io/tsunet111/pen/xxbOrjN

See the Pen
Scalable container b