javascript - cles::blog

blogs:
cles::blog
NP_cles()

» ArchiveList (Tag for "javascript"

)

«Prev || 1 · 2 · 3 · 4 · 5 · 6 · 7 · 8 · | Next»

2022/05/08

Carbon で綺麗なソースコードの画像を生成する

nodejs

javascript

Carbon Hello World! - Carbon で綺麗なソースコードの画像を生成する

Carbon というソースコードの画像を生成するサービスを見つけたのでメモ。
GitHub でソースも公開されており、実装は Node.js で行われているようで、日本語の README もありました。

コードなんだからテキストデータにしろよという感じもしますが、プレゼンなどでシンタックスハイライトした状態のコードを他人に見せたいとか、OGP に埋め込みたいような場合に役に立つのではないでしょうか。

at 15:59 |

2022/02/11

User Local が Cookie 同意管理バナーツールを配布

privacy

javascript

User Local が Cookie 同意管理バナーツールの配布を行っていたのでメモ。
4 月から改正個人情報保護法が施行されるので、こういうツールの導入が国内でも本格化してきますね。

Google Analytics対応の「Cookie同意管理バナーツール」を無償で配布｜株式会社ユーザーローカル

クッキー利用可否を確認するためのJavaScriptを開発してWebサイトに実装するには、工数や費用がかかってしまうという問題がありました。その声に合わせ、クッキーの許諾可否をWebサイト上で得るためのJavaScriptを、無償で配布します。

at 19:32 |

2022/01/14

colors.js と faker.js の作者が故意にライブラリを破壊

opensource

javascript

dishonesty

colors.js と faker.js の作者が故意にライブラリを破壊するような push をしたことが騒ぎになっています。

基本的にはダウングレードすれば良いだけですが、OSS は性善説で運用されていて意図的におかしな状態のライブラリがリリースされるということは想定されていないのと、colors.js と faker.js は人気ライブラリであるということが相まって、大きな騒ぎになってしまっていますね。

このような push が行われた背景として、作者に不幸な出来事があったり、人気ライブラリでありながら思うように収益が上げられないということもあったようです。
今後はこういう作者が自暴自棄になってしまうというのも OSS のリスクとして捉えないといけないのかもしれません。

colors.jsとfaker.jsの作者が自らのライブラリを破損、背後にはオープンソースを悪用する企業への不満？ | OSDN Magazine

両ライブラリの開発者Marak Squires氏が意図的にinfinite loopを導入し、”LIBERTY LIBERTY LIBERTY”というテキスト、非ASCII文字が表示されるようにしたと記している。経緯としては1月8日に、color.jsでアメリカ国旗モジュールが加わったというバージョンをv1.4.44-liberty-2としてGitHubとnpmにプッシュしていたという。faker.jsでも、サボタージュ版とされるバージョン6.6.6がプッシュされており、ライブラリのユーザーの混乱を招いた。

at 23:37 |

2022/01/14

ぷよぷよを写経する？

programming

html5

javascript

courseware

ぷよぷよを使った写経型プログラミング学習教材を見つけたのでメモ。
写経型プログラミング学習というのは、お手本を書き写すことによってプログラミング学習する形態を指しているようです。

セガとアシアル、アクションパズルゲーム『ぷよぷよ』のソースコードを活用したプログラミング学習教材を共同で提供開始｜株式会社セガ

このたび提供する教材コンテンツでは、HTML5やJavaScriptで記述されたソースコードを書き写す作業（写経）を通して、実際に『ぷよぷよ』のプレイ画面を確認しながらコーディングを行います。プログラミング初心者にとって書き写し（写経）は、コーディングに慣れる、間違いを自分で発見し修正する能力が身につく、そして完成させたという自信につながります。完成後は背景の「ぷよ」の色を変えたり、「ぷよ」の置ける数を増やすなど簡単な設定の変更など改編も可能です。

HTML5 と JavaScript なので、それなりに経験があれば楽しめそうです。
ただ、全くの初心者が書き写すだけでプログラミングがマスターできるかと言われると微妙ですが、とりあえず触れるきっかけとしてはアリではないでしょうか。

興味がある場合は以下からどうぞ。

【公式】ぷよぷよeスポーツ×プログラミング

at 20:09 |

2021/11/26

curl で CORS の設定を確認する

ajax

javascript

慣れないとちょっと難しいウェブサーバの CORS ヘッダの設定。

原理と設定方法については「オリジン間リソース共有 (CORS) - HTTP | MDN」を一通り読めば大丈夫ですが、XMLHttpRequest などを使って実際のリクエストをしてみると上手く動かないということが多々あります。そんなときには curl でプリフライトリクエストを模したリクエストを送ってみると原因を確かめやすいです。

オリジンの https://example.com から https://example.jp/hoge にリクエストを送信する場合、curl のコマンドでは以下のように表すことができます。

curl -H "Origin: https://example.com" -H "Access-Control-Request-Method: GET" -H "Access-Control-Request-Headers: Content-Type, Authorization, X-Requested-With" -X OPTIONS  -v "https://example.jp/hoge"

上記のコマンドを実行すると以下のような結果を得ることができます^*1。

> OPTIONS /hoge HTTP/1.1
> Host: example.jp
> User-Agent: curl/7.55.1
> Accept: */*
> Origin: https://example.com
> Access-Control-Request-Method: GET
> Access-Control-Request-Headers: Content-Type, Authorization, X-Requested-With

< HTTP/1.1 200 OK
< Date: Fri, 26 Nov 2021 3:36:09 GMT
< Server: Apache/2.4
< Access-Control-Allow-Origin: https://example.com
< Access-Control-Allow-Methods: GET
< Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With
< Access-Control-Max-Age: 5
< Access-Control-Allow-Credentials: true
< Content-Length: 0
< Content-Type: text/html

上記でリクエスト>とレスポンス<で、同じ内容が帰ってきていれば問題ありません、
例えば Origin: と Access-Control-Allow-Origin:、Access-Control-Request-Method: と Access-Control-Allow-Methods:、Access-Control-Request-Headers: と Access-Control-Allow-Headers: の部分の対応をチェックすることになります。

^*1: schannelのログは除いています。

at 16:55 |

2021/09/20

気象庁から json でデータが取得できるようになってる

weathercast

jma

javascript

気象庁のウェブから天気予報のデータが JSON で取得できると教えてもらったのでメモ。
2月にリニューアルされたときにそこそこ話題になった^*1ようです。

厳密には API ではないようですが、コンテンツ自体は政府標準利用規約（CC-BY 4.0 互換）として利用できるとのこと。
以下のように Javascript からも簡単に呼出して組み込むことができますね。

publishingOffice: 

reportDatetime: 

targetArea: 

headlineText: 

text: 

（気象庁のjsonデータを加工して作成）

† 実際のコード

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
let $jq = $.noConflict(true);
$jq(document).ready(function() {
    $jq.ajax({
        dataType: 'json',
        url: "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json",
    }).then(function(data) {
	$jq("#publishingOffice").text(data.publishingOffice);
	$jq("#reportDatetime").text(data.reportDatetime);
	$jq("#targetArea").text(data.targetArea);
	$jq("#headlineText").text(data.headlineText);
	$jq("#text").text(data.text);
    });
});
</script>
<strong>publishingOffice:</strong> <span id="publishingOffice"></span><br />
<strong>reportDatetime:</strong> <span id="reportDatetime"></span><br />
<strong>targetArea:</strong> <span id="targetArea"></span><br />
<strong>headlineText:</strong> <span id="headlineText"></span><br />
<strong>text:</strong> <span id="text"></span><br />
（<a href="https://www.jma.go.jp/bosai/forecast/">気象庁</a>のjsonデータを加工して作成）

^*1: 全面リニューアルされた気象庁HP、従来コンテンツはどこへ？中の人がTwitterで解説【やじうまWatch】 - INTERNET Watch

at 18:02 |

2021/09/16

ブラウザ上で実行できる Email パーサー「PostalMime」

javascript

rfc

PostalMime - ブラウザ上で実行できる Email パーサー「PostalMime」

PostalMime というブラウザ上で動作する Javascirpt で実装されたメール（RFC5322というか、いわゆる .eml ファイル）のパーサーを見つけたのでメモ。

postalsys/postal-mime: Email parser for browser environments

生の .eml ファイルはマルチパートの扱いとか、ヘッダの MIME エンコードとか、扱おうとするといろいろと面倒が多いのでこういうライブラリがあると助かります。特に画像のような spam のリンク先を確認したりするときにメーラーで開きたくないような時に便利です。

「PostalMime」にデモページがあるので、簡単に動作確認ができます。

at 19:09 |

2021/05/21

Ubuntu に mvn を使って Node.js をインストール

javascript

nodejs

ubuntu

先日、nvm-windows をインストールしましたが、Linux 環境にはまだ nvm をインストールしたことがなかったので WSL 上の Ubuntu に「nvm(Node Version Manager)を使ってNode.jsをインストールする手順 - Qiita」を参考にして nvm を使って Node.js をインストールしてみました。

nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

結果的に手順としてはこんな感じになりました。
この、git の最新のタグを取ってくる部分はいろいろと応用が効きそうです。

git clone https://github.com/nvm-sh/nvm.git ~/.nvm
pushd ~/.nvm
git checkout `git describe --abbrev=0 --tags --match "v[0-9]*" $(git rev-list --tags --max-count=1)`
. ./nvm.sh
popd

cat <<'EOF' >>~/.bash_profile

# nvm settings
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

nvm install stable --latest-npm
nvm alias default stable

at 19:06 |

2021/05/01

terser を使って js を最適化してみる

javascript

terser という JS を最適化するコンパイラを調べてみたのでメモ。

terser/terser: 🗜 JavaScript parser, mangler and compressor toolkit for ES6+

JavaScript で作ったアプリをリリースする前に js を最適化しておきたかったんですよね。
以前は google の closure-compiler を使ったりしていましたが、最近は npm でインストールできる terser を使っている人が多いようです。

インストールは npm で一撃です。

npm install terser -g

今回はこんな感じでトップレベルまで最適化をかけてみました。
オプションになれていないので、まだまだこのあたりは慣れが必要ですが、とりあえずテストは通ったので大丈夫でしょう。
アロー関数式^*1を使っている場合には --ecma のオプションをつけないとエラーになってしまうので注意が必要です。

terser test.js --toplevel -c passes=2 -m reserved=[] --ecma 2015 -o min.js

test.js

function power(base, exponent) {
  var result = 1;
  for (var count = 0; count < exponent; count++)
    result *= base;
  return result;
}

show(power(2, 10));
show(power(2, 10));
show(power(2, 10));

min.js

function o(o,r){for(var h=1,n=0;n<r;n++)h*=o;return h}show(o(2,10)),show(o(2,10)),show(o(2,10));

^*1: アロー関数式 - JavaScript | MDN

at 21:08 |

2020/11/24

JavaScript で XPath を使う

javascript

JavaScript から HTML のノードを XPath で検索する方法を調べてみました。

Document.evaluate()^*1を使うと意外と簡単に実装できますね。
以下のプログラムを以下の HTML に対して実行すると fuga2, fuga3 のノードが取り出せることが確認できます。

var xpathResult = document.evaluate( "//p[ancestor::div[@id='hoge']]", document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
while(var node = xpathResult.iterateNext()) {
  console.log(node);
}

sample.html

<code class="html"><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>
  <body>
    <p id="fuga1">abc</p>
    <div id="hoge">
      <p id="fuga2">def</p>
      <p id="fuga3">ghi</p>
    </div>
    <p id="fuga4">jkl</p>
    <p id="fuga5">mno</p>
    <p id="fuga6">pqr</p>
  </body>
</html>

† 参考