JavaScript | Men of Letters（メン・オブ・レターズ） – 論理的思考/業務改善/プログラミング https://laboratory.kazuuu.net Mon, 21 Nov 2022 20:39:09 +0000 ja hourly 1 https://wordpress.org/?v=6.9 https://laboratory.kazuuu.net/wp-content/uploads/2021/02/cropped-L-32x32.png JavaScript | Men of Letters（メン・オブ・レターズ） – 論理的思考/業務改善/プログラミング https://laboratory.kazuuu.net 32 32 【JavaScript】table()関数を用いてテーブルをコンソールに書き込み https://laboratory.kazuuu.net/javascript-writes-a-table-to-the-console-using-the-table-function/ https://laboratory.kazuuu.net/javascript-writes-a-table-to-the-console-using-the-table-function/#respond Mon, 21 Nov 2022 20:39:09 +0000 https://laboratory.kazuuu.net/?p=12650 【JavaScript】table()関数を用いてテーブルをコンソールに書き込みしてみます。

table()関数を用いると、テーブルをコンソールに書き込むことができますので、JavaScriptで複雑な配列やオブジェクトを視覚化する際に重宝します。

■構文,パラメーター

console.table(tabledata, tablecolumns)

tabledataは、テーブルに入力するデータを渡します。これは必ず必要となる。

tablecolumnsは、テーブル列の名前を持つ配列を渡します。これはオプションとなる。

■環境

Windows10（Google chrome）

Javascript Playground: PLAYCODE（https://playcode.io/）

■table()関数を用いてテーブルをコンソールに書き込む

では、早速table()関数を用いてテーブルをコンソールに書き込んでみます。

■コード

var test = [["田中"], ["吉田"], ["佐々木"]];

console.table(test)

今回はvarを用いてtestという変数を用います。変数内には、角括弧”[ ]”を用いて、今回は3つの日本語の文字列を格納します。この際に、各文字列の格納も角括弧”[ ]”を用います。

格納後、consoleに対してtable()関数を用います。これでコンソールに書き込みを行います。書き込みを行うので、括弧内にtest変数を渡します。

■実行・検証

このスクリプトを保存し実行してみます。

実行してみると、test変数内の情報がコンソールに書き込まれ表示させることができました。

なお、変数を定義し、文字列を格納する際に、各文字列を角括弧”[ ]”を用いて格納しないと、コンソール上で表形式で出力させる際に、1文字ずつ出力となる。

]]> https://laboratory.kazuuu.net/javascript-writes-a-table-to-the-console-using-the-table-function/feed/ 0 Webページに3Dコンテンツを表示するJavaScriptライブラリ「Three.JS」を使用する https://laboratory.kazuuu.net/using-three-js-a-javascript-library-for-displaying-3d-content-on-web-pages/ https://laboratory.kazuuu.net/using-three-js-a-javascript-library-for-displaying-3d-content-on-web-pages/#respond Tue, 01 Feb 2022 21:01:12 +0000 https://laboratory.kazuuu.net/?p=11316 Webページに3Dコンテンツを表示するJavaScriptライブラリ「Three.JS」を使用してみます。

■CDNからthree.jsをロードする

Three.JSを使用するために、今回はCDNからthree.jsをロードし使用してみます。

■コード

<script type="module">
    import * as THREE from 'https://cdn.skypack.dev/three';
</script>

今回は、インストールやビルドツールなしで最適化されたnpmパッケージをロードでき、個人・商用を問わず永久無料で利用できるSKYPACK（https://www.skypack.dev/）を使用します。

■コード

<!DOCTYPE html>
<html lang="ja">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Three.JSのテスト</title>
    <!--背景-->
    <style>
        body{
            background: #000;
            padding: 0px;
            margin: 0px;
        }
    </style>
<body>

    <script type="module">
        import * as THREE from 'https://cdn.skypack.dev/three';
        //シーン
        const scene = new THREE.Scene();
        //カメラ
        const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);
        //Renderer
        const renderer = new THREE.WebGLRenderer();
        //直方体のジオメトリクラス
        const geometry = new THREE.BoxGeometry();
        //ジオメトリを描画するためのマテリアル
        const material = new THREE.MeshBasicMaterial( { color: 0xFF0000 } );
        //メッシュの作成
        const cube = new THREE.Mesh( geometry, material );

        //シーンにキューブを追加
        scene.add(cube);
        renderer.setSize(window.innerWidth,window.innerHeight);
        camera.position.z = 5;
        document.body.appendChild(renderer.domElement);
        //アニメーション
        function animate(){
            requestAnimationFrame(animate);
            renderer.render(scene,camera);
        }
        animate();

        setInterval(function(){
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
        },5);
    </script>
</body>
</html>

three.jsを介してオブジェクトを表示するには、scene、camera、およびcameraを介してcameraをレンダリングするrendererの3つが必要となりますので、これらを作成します。

そのほかにもメッシュの作成などを行い、今回はcube（3Dコンテンツ）を表示させてみます。

cube（3Dコンテンツ）を表示させ、アニメーションを追加します。追加したものをWebページで表示させます。

■検証・実行

今回のコードを「index.html」という名前で保存し、Visual Studio Code（VSCode）の拡張機能で、簡易的なローカルサーバーを起動することができる「Live Server」を使用し、Webページを表示させてみます。

「Live Server」を起動しWebページを表示させてみると、今回作成したcube（3Dコンテンツ）を表示させることができました。

]]> https://laboratory.kazuuu.net/using-three-js-a-javascript-library-for-displaying-3d-content-on-web-pages/feed/ 0 Webブラウザ上でface-api.js/JavaScriptによる簡単な顔認識 https://laboratory.kazuuu.net/simple-face-recognition-with-face-api-js-javascript-in-a-web-browser/ https://laboratory.kazuuu.net/simple-face-recognition-with-face-api-js-javascript-in-a-web-browser/#respond Tue, 15 Jun 2021 05:54:24 +0000 https://laboratory.kazuuu.net/?p=9135 Webブラウザ上でface-api.js/JavaScriptによる簡単な顔認識を行ってみます。

今回は、Tensor Flow上に構築されたface-api.js（https://github.com/justadudewhohacks/face-api.js）ライブラリを使用して、顔認識を簡単に行ってみます。

■PC環境

・Windows10 Pro

・Visual Studio Code 1.57.0

・git version 2.31.1.windows.1

■リポジトリのクローンを作成する

まずは、リポジトリのクローンを作成します。作成しますので、Windows10のコマンドプロンプトを起動します。

C:\Users\<ユーザー名>>git clone https://github.com/justadudewhohacks/face-api.js.git

起動後、上記のコマンドを入力し、Enterキーを押します。

Cloning into ‘face-api.js’…
remote: Enumerat ing objects: 9124, done
remote: Counting objects: 100% (11/11), done.
remote: Compressing objects: 100% (11/11), done.
remote: Total 9124 (delta 6), reused o (delta 0), pack-reused 9113
Receiving objects: 100% (9124/9124), 210.79 MiB | 4.13 MiB/s, done.
Resolving deltas: 100% (6281/6281), done.

Enterキーを押すと、クローンの作成が開始されます。しばらくすると、完了します。

■Webアプリの準備

完了後、カレントディレクトリ（作業ディレクトリ）内に「face-api.js」というフォルダが作成されていることが確認できます。

フォルダの中身を確認すると、上記のようになっています。フォルダ内に「dist」と「weights」のフォルダがありますが、今回は「dist」の「face-api.js」と、「weights」内のファイル全てを使います。

確認後、カレントディレクトリ（作業ディレクトリ）内に、今回は「test_face_api」というフォルダを作成します。

作成後、「face-api.js」というフォルダ内の「weights」のフォルダをコピーします。

コピー後、「test_face_api」というフォルダ内に「weights」のフォルダを貼り付けます。その後「weights」の名前を「models」という名前に変更します。

 

変更後、「face-api.js」フォルダ内の「dist」の「face-api.min.js」をコピーします。

コピー後、「test_face_api」というフォルダ内に「face-api.js」のフォルダを貼り付けます。

■顔認識をテストする簡単なWebアプリの作成

貼り付け後、顔認識をテストする簡単なWebアプリの作成を行います。コードエディタ（Visual Studio Code）を開きます。「test_face_api」フォルダ内にindex.htmlを作成します。

■index.html

<!DOCTYPE html>
<html lang = "ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>顔認識のテスト</title>
    <script defer src="face-api.min.js"></script>
    <script defer src="script.js"></script>
    <style>
        body{
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        canvas{
            position: absolute;
            top:0;
            left: 0;
        }
    </style>
</head>
<body>
    <input type="file" id="imageUpload">
</body>
</html>

アップロードした画像で顔認識のテストを行えるようにします。次に「test_face_api」フォルダ内にscript.jsを作成します。

■script.js

const imageUpload =document.getElementById('imageUpload')

Promise.all([
    faceapi.nets.faceRecognitionNet.loadFromUri('./models'),
    faceapi.nets.faceLandmark68Net.loadFromUri('./models'),
    faceapi.nets.ssdMobilenetv1.loadFromUri('./models')
]).then(start)

function start(){
    const container = document.createElement('div')
    container.style.position = 'relative'
    document.body.append(container)
    document.body.append('Loaded')
    imageUpload.addEventListener('change', async() =>{
        const image = await faceapi.bufferToImage(imageUpload.files[0])
        container.append(image)
        const canvas = faceapi.createCanvasFromMedia(image)
        container.append(canvas)
        const displaySize = { width: image.width, height:image.height}
        faceapi.matchDimensions(canvas, displaySize)
        const detections = await faceapi.detectAllFaces(image)
        .withFaceLandmarks().withFaceDescriptors()
        const resizedDetections = faceapi.resizeResults(detections,
        displaySize)
        resizedDetections.forEach(detection => {
            const box = detection.detection.box
            const drawBox = new faceapi.draw.DrawBox(box, {label: 'Face'})
            drawBox.draw(canvas)
        })
    })
}

script.js内で顔検出の実行処理などを記述します。

■実行、デバッグ

記述後、実行、デバッグを行います。今回はVisual Studio Codeの拡張機能で「Live Server」と「Debbuger for Chrome」を事前にインストールし、GoogleChromeにて実行、デバッグを行います。なお、今回使用する画像は、著作物を考慮し、フリーで高品質な画像素材が検索できるPixabay（https://pixabay.com/ja/）からダウンロードしてきた画像を使います。（商用利用可能OKの画像）。

実行、デバッグしてみると、使用した顔検出・顔認識モデルの影響か、それともそれ以外が原因か、一人の顔の認識できませんでしたが、顔としての認識はされているので、今回はこれで顔認識のテストを終了します。

]]> https://laboratory.kazuuu.net/simple-face-recognition-with-face-api-js-javascript-in-a-web-browser/feed/ 0 Node.js/JavaScriptとPuppeteerを使ってAmazon（アマゾン）をスクレイピングする https://laboratory.kazuuu.net/scraping-amazon-with-node-js-and-puppeteer/ https://laboratory.kazuuu.net/scraping-amazon-with-node-js-and-puppeteer/#respond Thu, 29 Apr 2021 06:14:44 +0000 https://laboratory.kazuuu.net/?p=7987 Node.js/JavaScriptとPuppeteerを使用し、Amazon（アマゾン）をスクレイピングすることについて解説しています。

なお、JavaScriptの実行にはNode.jsとnpm（Node Package Manager）を使用するので、コンピュータにNode.jsとnpmがインストールされている必要があります。

■PC環境

・Windows10、Administrator（管理者）アカウント

・node –version v14.15.0

・npm –version 6.14.8

■空のディレクトリを用意する

まずはWindows10上に空のディレクトリを用意します。今回は「C:\Users\Administrator（フォルダパス）」に「web_scraping」というディレクトリを用意しました。

■package.json（初期値）を作成する

用意したあとに、Windows10の検索ボックスで「cmd」と入力し、コマンドプロンプトをクリックします。クリックすると、コマンドプロンプトが起動します。

C:\Users\Administrator>cd web_scraping

上記のコマンドを入力し、Enterキーを押します。cdコマンドでディレクトリに移動します。

C:\Users\Administrator\web_scraping>npm init -y

移動後、上記のコマンドを入力し、Enterキーを押します。package.json（初期値）を作成します。

Enterキーを押すと、package.jsonが作成され、package.jsonの中身が出力されます。

■Puppeteerのインストール

C:\Users\Administrator\web_scraping>npm install puppeteer

出力後、上記のコマンドを入力し、Enterキーを押します。

> puppeteer@9.0.0 install C:\Users\Administrator\web_scraping\node_modules\puppeteer
> node install.js

Downloading Chromium r869685 - 166.1 Mb [====================] 100% 0.0s
Chromium (869685) downloaded to C:\Users\Administrator\web_scraping\node_modules\puppeteer\.local-chromium\win64-869685
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN web_scraping@1.0.0 No description
npm WARN web_scraping@1.0.0 No repository field.

+ puppeteer@9.0.0
added 54 packages from 72 contributors and audited 54 packages in 45.876s

8 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

Enterキーを押すと、インストールが開始され、完了となります。

■スクリプトを作成する

完了後、スクリプトを作成するために、「C:\Users\Administrator（フォルダパス）」の「web_scraping」ディレクトリ内に「scrapers.js」というjsファイルを作成します。作成後、このファイルをコードエディタで開きます。

■コード（scrapers.js）

const puppeteer = require('puppeteer');

async function scrapeProduct(url){
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url);

    const [el] = await page.$x('//*[@id="productTitle"]');
    const txt = await el.getProperty('textContent');
    const rawTxt = await txt.jsonValue();

    console.log({rawTxt});

    browser.close();
}

scrapeProduct('https://www.amazon.co.jp/商品詳細ページ');

Webブラウザでアマゾン（https://www.amazon.co.jp/）の商品詳細ページにアクセスし、ページ内の要素を取得し、コンソールに要素内のテキストを出力します。今回は商品のタイトルを取得して出力してみます。

■ページ内の特定要素（Xpath）を取得する場合

アマゾン（https://www.amazon.co.jp/）のページ内の特定要素（Xpath）を取得する場合は、GoogleChrome上で取得した要素にマウスを移動し選択します。

選択後、右クリックします。クリックすると、メニューが表示されますので、この中から「検証」をクリックします。

クリックすると、右側にWebページのソースが表示され、選択した部分が水色に表示されます。この状態で右クリックします。すると、メニューが表示され「Copy」をクリックします。さらにメニューが表示されますので「Copy Xpath」をクリックします。

クリックすると、特定要素（Xpath）がコピーされますので、あとはコードエディタへ追加します。

■実行

スクリプトが完成した後は、実際にAmazon（アマゾン）をスクレイピングできるのか検証のため、実行させてみます。今回は、コマンドプロンプトから実行してみます。

C:\Users\Administrator\web_scraping>node scrapers.js

実行する際は、上記のコマンドを入力し、Enterキーを押します。

Enterキーを押すと、ブラウザが自動的に起動し、今回指定したアマゾン（https://www.amazon.co.jp/）の商品詳細ページにアクセスし、ページ内の特定要素を取得し、出力させることができました。

]]> https://laboratory.kazuuu.net/scraping-amazon-with-node-js-and-puppeteer/feed/ 0 Node.jsとPuppeteerを使ってWebサイトをスクレイピングする https://laboratory.kazuuu.net/scraping-a-website-using-node-js-and-puppeteer/ https://laboratory.kazuuu.net/scraping-a-website-using-node-js-and-puppeteer/#respond Thu, 08 Apr 2021 02:05:58 +0000 https://laboratory.kazuuu.net/?p=7431 Node.jsとPuppeteerを使ってWebサイトをスクレイピングしてみます。

なお、JavaScriptの実行にはNode.jsとnpm（Node Package Manager）を使用するので、コンピュータにNode.jsとnpmがインストールされている必要があります。

■PC環境

・Windows10、Administrator（管理者）アカウント

・node –version v14.15.0

・npm –version 6.14.8

■Web Scraperの設定

Web Scraperの設定のために、プロジェクト用のフォルダを作成しますので、Windows10の検索ボックスで「cmd」と入力し、コマンドプロンプトをクリックします。クリックすると、コマンドプロンプトが起動します。

C:\Users\Administrator>mkdir web-scraper

起動後、上記のコマンドを入力し、今回は「web-scraper」というフォルダを作成します。作成のために、エンターキーを押します。

C:\Users\Administrator>cd web-scraper

押した後に、上記のコマンドを入力し、「web-scraper」というフォルダ内に移動します。移動のためにエンターキーを押します。

押した後に、npm（node package manager）を使用し、パッケージをインストールします。その前に、プロジェクトの依存関係やメタデータを管理するpackages.jsonファイルを作成するために、npmを初期化します。

C:\Users\Administrator\web-scraper>npm init

初期化のために、上記のコマンドを入力し、エンターキーを押します。

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (web-scraper)

エンターキーを押すと、上記のメッセージが表示されます。「package name: (web-scraper)」と表示されていますので、フォルダの名前である「web-scraper」と入力します。その後、エンターキーを押します。

version: (1.0.0)

エンターキーを押すと、バージョンが表示されていますので、エンターキーを押します。今回は1.0.0をインストールします。

description:

エンターキーを押すと、「description:（説明）」と表示されますので、今回は「a web scraper」を入力し、エンターキーを押します。

entry point: (index.js)

エンターキーを押すと、「entry point: (index.js)」と表示されていますので、エンターキーを押します。

test command:

エンターキーを押すと、「test command:」と表示されていますので、エンターキーを押します。

git repository:

エンターキーを押すと、「git repository:」と表示されていますので、エンターキーを押します。

keywords:

エンターキーを押すと、「keywords:」と表示されていますので、エンターキーを押します。

author:

エンターキーを押すと、「author:」と表示されていますので、エンターキーを押します。

license: (ISC)

エンターキーを押すと、「license: (ISC)」と表示されていますので、エンターキーを押します。

{
  "name": "web-scraper",
  "version": "1.0.0",
  "description": "a web scraper",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

エンターキーを押すと、作成したpackages.jsonファイルの内容が表示されていますので、確認し、「y」と入力し、エンターキーを押します。

C:\Users\Administrator\web-scraper>npm install --save puppeteer

エンターキーを押した後に、npmを使用し、Puppeteerをインストールしますので、上記のコマンドを入力し、エンターキーを押します。

> puppeteer@8.0.0 install C:\Users\Administrator\web-scraper\node_modules\puppeteer
> node install.js

Downloading Chromium r856583 - 164.6 Mb [====================] 100% 0.0s
Chromium (856583) downloaded to C:\Users\Administrator\web-scraper\node_modules\puppeteer\.local-chromium\win64-856583
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN web-scraper@1.0.0 No repository field.

+ puppeteer@8.0.0
added 54 packages from 73 contributors and audited 54 packages in 92.698s

8 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

エンターキーを押すと、ダウンロードが開始され、インストールが始まります。しばらくすると、インストールが完了します。

インストール後、「C:\Users\Administrator\（フォルダパス）」の「web-scraper」のフォルダにあるpackage.jsonのファイルをコードエディタを開き、編集します。

■コード

{
  "name": "web-scraper",
  "version": "1.0.0",
  "description": "a web scraper",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "puppeteer": "^8.0.0"
  }
}

package.jsonのファイルの「”scripts”」の部分に「”start”: “node index.js”」と記述します。記述後、保存します。

npm ERR! missing script: start

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2021-04-08T01_28_15_781Z-debug.log

なお、この記述がない場合は、アプリケーションを実行した際に上記のエラーが発生します。

■jsファイルの作成

保存後、web scraperには、browser.js、index,js、pageController.js、pageScraper.jsという4つのjsファイルが必要ですので、「C:\Users\Administrator\（フォルダパス）」の「web-scraper」のフォルダ内に作成します。これを作成することで、web scraperのブラウザインスタンスを設定し、起動すると、自動的にChromiumを開き、Webスクレイピングできるようになります。

コードエディタを開き、下記のコードを記述し、jsファイルを作成していきます。作成後、ファイルを保存します。

■browser.js

const puppeteer = require('puppeteer');

async function startBrowser(){
    let browser;
    try {
        console.log("Opening the browser......");
        browser = await puppeteer.launch({
            headless: false,
            args: ["--disable-setuid-sandbox"],
            'ignoreHTTPSErrors': true
        });
    } catch (err) {
        console.log("Could not create a browser instance => : ", err);
    }
    return browser;
}

module.exports = {
    startBrowser
};

■index.js

const browserObject = require('./browser');
const scraperController = require('./pageController');

//ブラウザを起動しブラウザインスタンスを作成
let browserInstance = browserObject.startBrowser();

// ブラウザのインスタンスをスクレーパーコントローラーに渡す
scraperController(browserInstance)

■pageController.js

const pageScraper = require('./pageScraper');
async function scrapeAll(browserInstance){
    let browser;
    try{
        browser = await browserInstance;
        await pageScraper.scraper(browser);

    }
    catch(err){
        console.log("Could not resolve the browser instance => ", err);
    }
}

module.exports = (browserInstance) => scrapeAll(browserInstance)

■pageScraper.js

const scraperObject = {
    url: 'https://www.yahoo.co.jp/',
    async scraper(browser){
        let page = await browser.newPage();
        console.log(`Navigating to ${this.url}...`);
        await page.goto(this.url);

    }
}

module.exports = scraperObject;

なお、今回は自動でChromiumを開き、Webサイトへアクセスしますが、pageScraper.jsのファイルで「url: ‘https://www.yahoo.co.jp/’」と指定して、Yahoo!Japanへアクセスしてみます。

■今回のプログラムのファイル構造

■Web scraperアプリケーションの実行

すべてのjsファイルの作成が完了後、Web scraperアプリケーションを実行してみます。

実行する場合は、Windows10の検索ボックスで「cmd」と入力し、コマンドプロンプトをクリックします。クリックすると、コマンドプロンプトが起動します。

C:\Users\Administrator\web-scraper>npm run start

起動後、上記のコマンドを入力し、アプリケーションを実行します。実行のため、エンターキーを押します。

> web-scraper@1.0.0 start C:\Users\Administrator\web-scraper
> node index.js

Opening the browser......
Navigating to https://www.yahoo.co.jp/...

エンターキーを押すと、上記のメッセージが表示され、自動でChromiumを開きます。Chromiumには「Chromeは自動テストソフトウェアによって制御されています。」と表示されています。表示された状態で今回指定したYahoo!Japan（https://www.yahoo.co.jp/）にアクセスし、サイトが表示されることを確認できました。

]]> https://laboratory.kazuuu.net/scraping-a-website-using-node-js-and-puppeteer/feed/ 0 JavaScript / Node.jsでWebクローラーの作成とWebスクレイピング https://laboratory.kazuuu.net/creating-a-web-crawler-with-javascript-node-js/ https://laboratory.kazuuu.net/creating-a-web-crawler-with-javascript-node-js/#respond Wed, 07 Apr 2021 01:06:32 +0000 https://laboratory.kazuuu.net/?p=7409 JavaScript / Node.jsでWebクローラーを作り、Webスクレイピングを行ってみます。

なお、JavaScriptの実行にはNode.jsとnpm（Node Package Manager）を使用するので、コンピュータにNode.jsとnpmがインストールされている必要があります。

■PC環境

・Windows10、Administrator（管理者）アカウント

・node –version v14.15.0

・npm –version 6.14.8

■新規フォルダの作成と、crawler.jsという空のファイルを作成する

まずは、新規フォルダの作成と、crawler.jsという空のファイルを作成します。

今回は「C:\Users\Administrator（フォルダパス）」という場所に、「simple-web-crawler」という名前のフォルダを作成します。

■コード

var request = require('request');
var cheerio = require('cheerio');
var URL = require('url-parse');

作成後、コードエディタを開き、上記のコードを記述します。

なお、今回は、下記の3つのライブラリを使用します。

・Request（HTTPリクエストを行う）

・Cheerio（ページ上のHTML要素を解析して選択する）

・URL-parse（URLを解析する）

記述後、ファイルを保存します。保存する際に、「crawler.js」という名前でファイルを保存します。保存する場所は、「C:\Users\Administrator」の「simple-web-crawler」というフォルダになります。

■npmを使用し、ライブラリをインストールする

保存後、npmを使用し、ライブラリをインストールしますが、その前にpackage.jsonというファイルを作成し、今回のプロジェクトの説明と依存関係を指定します。

■コード

{
  "name": "simple-webcrawler-javascript",
  "version": "0.0.0",
  "description": "A simple webcrawler written in JavaScript",
  "main": "crawler.js",
  "author": "Stephen",
  "license": "ISC",
  "dependencies": {
    "cheerio": "^0.19.0",
    "url-parse": "^1.0.5",
    "request": "^2.65.0"
  }
}

そのために、コードエディタを開き、上記のコードを記述します。

記述後、ファイルを保存します。保存する際に、「package.json」という名前でファイルを保存します。保存する場所は、「C:\Users\Administrator」の「simple-web-crawler」というフォルダになります。

保存後、Windows10の検索ボックスで「cmd」と入力し、コマンドプロンプトをクリックします。クリックすると、コマンドプロンプトが起動します。

C:\Users\Administrator>cd simple-web-crawler

起動後、上記のコマンドを入力し、「C:\Users\Administrator」の「simple-web-crawler」というフォルダに移動するために、エンターキーを押します。

C:\Users\Administrator\simple-web-crawler>npm install
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN simple-webcrawler-javascript@0.0.0 No repository field.

added 68 packages from 68 contributors and audited 68 packages in 4.328s

2 packages are looking for funding
  run `npm fund` for details

found 4 vulnerabilities (2 low, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details

エンターキーを押すと、ライブラリのインストールが開始され、上記のようなメッセージが表示されます。今回はライブラリが古いので、脆弱性が見つかりましたなどの表示がありますが、テストで動作確認を行うため、脆弱性が見つかりましたなどは、いったん無視し進めます。

■JavaScriptでのWebページの取得と解析

ライブラリをインストール後、JavaScriptでのWebページの取得と解析を行います。行う場合は、コードエディタで「C:\Users\Administrator」の「simple-web-crawler」というフォルダの「crawler.js」を開き、Webページの取得と解析を行うコードを記述します。

■コード

var request = require('request'); 
var cheerio = require('cheerio'); 
var URL = require('url-parse');

var pageToVisit = "https://www.yahoo.co.jp/";
console.log("閲覧ページ: " + pageToVisit);
request(pageToVisit, function(error, response, body) {
   if(error) {
     console.log("Error: " + error);
   }
   // ステータスコードの確認 (200はHTTP OK)
   console.log("ステータスコード: " + response.statusCode);
   if(response.statusCode === 200) {
     // ソース内のdocumentのbodyを解析
     var $ = cheerio.load(body);
     console.log("ページタイトル:  " + $('title').text());
   }
});

記述するコードは上記になります。今回はYahoo！Japan（https://www.yahoo.co.jp/）のページの取得と解析を行ってみます。

記述後、このコードを「crawler.js」に上書き保存します。

■実行

保存後、JavaScriptでのWebページの取得と解析を行うため、スクリプトを実行してみます。

実行する際は、Windows10の検索ボックスで「cmd」と入力し、コマンドプロンプトをクリックします。クリックすると、コマンドプロンプトが起動します。

C:\Users\Administrator>cd simple-web-crawler

起動後、上記のコマンドを入力し、「C:\Users\Administrator」の「simple-web-crawler」というフォルダに移動するために、エンターキーを押します。

C:\Users\Administrator\simple-web-crawler>node crawler.js

押した後、上記のコマンドを入力し、エンターキーを押します。

エンターキーを押すと、今回指定したYahoo！Japan（https://www.yahoo.co.jp/）をWebクローラーが収集（クローリング）を行い、「ステータスコード:200（リクエストが成功）」となり、「ページタイトル」を取得することができました。

]]> https://laboratory.kazuuu.net/creating-a-web-crawler-with-javascript-node-js/feed/ 0 PHPを使用しアラートメッセージボックスをポップアップ表示する https://laboratory.kazuuu.net/using-php-to-populate-alert-message-boxes/ https://laboratory.kazuuu.net/using-php-to-populate-alert-message-boxes/#respond Thu, 25 Feb 2021 02:25:16 +0000 https://laboratory.kazuuu.net/?p=6520 PHPを使用しアラートメッセージボックスをポップアップ表示してみます。

なお、PHP自体ではアラート（警告）メッセージボックスが表示できませんので、PHP本体内のJavaScriptコードを使用してアラートメッセージボックスをポップアップ表示してみます。

■環境

・Windows10（Microsoft Edge）

・WampServer Version 3.2.3 64bit

・PHP Version 7.3.21

■アラート（警告）メッセージボックスを表示する

では、アラート（警告）メッセージボックスを表示するスクリプトを書いてきます。

■コード

<?php
echo '<script>alert("ようこそのWebの世界へ")</script>';
?>

アラート（警告）メッセージボックスが表示する際は、PHPのecho文を使用し、中にJavaScriptのscriptタグを書きます。書いた後に、アラート（警告）メッセージボックスが表示するために、alert()と書きます。

書いた後に括弧内にアラート（警告）メッセージボックスで表示させる文字列を書きます。これで、アラート（警告）メッセージボックスを表示することができます。

■実行

では、このスクリプトを「hello.php」という名前で保存し、実行させてみます。

実行させてみると、Webブラウザにアラート（警告）メッセージボックスが表示され、さらに「localhostの内容」と表示されます。表示されたボックスの中にalert()の括弧内に書いた文字列が表示されることが確認できました。なお、アラート（警告）メッセージボックスの「OK」ボタンをクリックすると、ボックスが閉じます。

■PHP の関数 ( function )を使用し、アラート（警告）メッセージボックスが表示する

では、次にPHP の関数 ( function )を使用し、アラート（警告）メッセージボックスを表示するスクリプトを書いていきます。

■コード

<?php
function func_alert($message){
    echo "<script>alert('$message');</script>";
}
func_alert("ようこそのWebの世界へ");
?>

func_alertという関数を定義し、括弧内にmessageという引数を指定します。関数の中にecho文を使用し、中にJavaScriptのscriptタグを書きます。書いた後に、アラート（警告）メッセージボックスが表示するために、alert()と書きます。括弧内にはmessageという引数を指定します。

指定後、func_alertという関数を呼び出す。その際に括弧内にアラート（警告）メッセージボックスが表示するための文字列を書きます。

■実行

では、このスクリプトを「hello.php」という名前で保存し、実行させてみます。

実行させてみると、関数を呼び出され、Webブラウザにアラート（警告）メッセージボックスが表示されることが確認できました。

]]> https://laboratory.kazuuu.net/using-php-to-populate-alert-message-boxes/feed/ 0 Nuxt.jsをインストール、新規アプリケーションをローカルWebサーバー/環境で公開する（Windows10） https://laboratory.kazuuu.net/install-nuxt-js-and-publish-new-application-on-local-web-server-windows10/ https://laboratory.kazuuu.net/install-nuxt-js-and-publish-new-application-on-local-web-server-windows10/#respond Wed, 04 Nov 2020 02:54:10 +0000 https://laboratory.kazuuu.net/?p=4242 Nuxt.jsをインストール、新規アプリケーションをローカルWebサーバー/環境で公開してみます。

■PC環境

・Windows10、Administrator（管理者）アカウント

・node version 14.15.0

・npm version 6.14.8

■プロジェクトを作るためのフォルダを用意する。

まずNuxt.jsの新しいプロジェクトを作るためのフォルダを用意する。

今回は、「C:\test（フォルダパス）」に設定してます。

■コマンドプロンプトを起動する

Windows10のデスクトップ画面に、「ここに入力して検索」と表示されている検索ボックスで「コマンドプロンプト」と検索します。検索すると、コマンドプロンプトが表示されますので、こちらをクリックします。クリックすると、コマンドプロンプトのウインドウが表示されます。

■Nuxt.jsのインストール

npx create-nuxt-app demo

表示後、上記のコマンドを入力し、Enterキーを押します。「npx create-nuxt-app <project-name>」となります。今回はプロジェクト名は「demo」と入力します。

create-nuxt-app v3.4.0
✨ Generating Nuxt.js project in demo
? Project name: (demo)

Enterキーを押すと、「Project name（プロジェクト名」の入力が表示されますので、今回のプロジェクト名である「demo」と入力し、Enterキーを押します。

Programming language: (Use arrow keys)
> JavaScript
TypeScript

Enterキーを押すと、「Programming language: (Use arrow keys)（プログラミング言語:(矢印キーを使用））」と表示されますので、今回は「Javascript」を矢印キーで選択し、Enterキーを押します。

? Package manager: (Use arrow keys)
Yarn
>Npm

Enterキーを押すと、「 Package manager: (Use arrow keys)（パッケージマネージャー:(矢印キーを使用））」と表示されますので、今回は「Npm」と矢印キーで選択し、Enterキーを押します。

? UI framework: (Use arrow keys)
> None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Chakra UI
Element
Framevuerk
iView
Tachyons
Tailwind CSS
Vuesax
Vuetify.js

Enterキーを押すと、「UI framework: (Use arrow keys)（UIフレームワーク:(矢印キーを使用））」と表示されますので、今回は「None」を矢印キーで選択し、Enterキーを押します。

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios
( ) Progressive Web App (PWA)
( ) Content

Enterキーを押すと、「? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)（Nuxt.jsモジュール：（＜スペース＞を押して選択、＜a＞を押してすべてを切り替え、＜i＞を押して選択を反転します））」と表示されますので、今回は「Axios」をスペースキーで選択し、Enterキーを押します。

Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
( ) Prettier
( ) Lint staged files
( ) StyleLint
( ) Commitlint

Enterキーを押すと、「Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)（静的解析ツール：（<スペース>を押して選択、<a>を押してすべてを切り替え、<i>を押して選択を反転します））」と表示されますので、今回は「ESLint」をスペースキーで選択し、Enterキーを押します。

? Testing framework: (Use arrow keys)
None
Jest
>AVA
WebdriverIO

Enterキーを押すと、「Testing framework: (Use arrow keys)（テストフレームワーク:(矢印キーを使用））」と表示されますので、今回は「AVA」を矢印キーで選択し、Enterキーを押します。

Rendering mode:
Universal (SSR / SSG)
> Single Page App

Enterキーを押すと、「Rendering mode:（レンダリングモード：）」と表示されますので、今回は「Single Page App」と選択し、Enterキーを押します。

? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
Static (Static/JAMStack hosting)

Enterキーを押すと「Deployment target: (Use arrow keys)（展開するターゲット:(矢印キーを使用））」と表示されますので、今回は「Server (Node.js hosting)」を矢印キーで選択し、Enterキーを押します。

Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) jsconfig.json (Recommended for VS Code if you’re not using typescript)
( ) Semantic Pull Requests
( ) Dependabot (For auto-updating dependencies, GitHub only)

Enterキーを押すと「Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)（開発ツール：（<スペース>を押して選択、<a>を押してすべてを切り替え、<i>を押して選択を反転します））」と表示されますので、今回は「jsconfig.json」をスペースキーで選択し、Enterキーを押します。

? Continuous integration: (Use arrow keys)
> None
GitHub Actions (GitHub only)

Enterキーを押すと「Continuous integration: (Use arrow keys)（継続的インテグレーション(矢印キーを使用））」と表示されますので、今回は「None」を矢印キーで選択し、Enterキーを押します。

? Version control system: (Use arrow keys)
Git
> None

Enterキーを押すと「Version control system: (Use arrow keys)（バージョン管理システム:(矢印キーを使用））」と表示されますので、今回は「None」を矢印キーで選択し、Enterキーを押します。

Installing packages with npm

Enterキーを押すと、npmを使用したパッケージのインストールが開始されます。

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now
deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number
of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencie
s.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade t
o fsevents 2.

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\babel-plugin-espower\node_modules\core-js

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\babel-plugin-espower\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\babel-plugin-espower\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\call-matcher\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> ejs@2.7.4 postinstall C:\test\demop\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\empower-core\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\espurify\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\babel-plugin-espower\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\call-matcher\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> ejs@2.7.4 postinstall C:\test\demop\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\empower-core\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\espurify\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

 

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\babel-plugin-espower\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\call-matcher\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> ejs@2.7.4 postinstall C:\test\demop\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\empower-core\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\espurify\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@3.6.5 postinstall C:\test\demop\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now
deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number
of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencie
s.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade t
o fsevents 2.
npm

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\babel-plugin-espower\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\call-matcher\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> ejs@2.7.4 postinstall C:\test\demop\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\empower-core\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\espurify\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@3.6.5 postinstall C:\test\demop\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now
deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number
of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencie
s.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade t
o fsevents 2.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {“node”:”<8.10.0″} (current: {“node”:”14.15.0
“,”npm”:”6.14.8″})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\babel-plugin-espower\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\call-matcher\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> ejs@2.7.4 postinstall C:\test\demop\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\empower-core\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\espurify\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@3.6.5 postinstall C:\test\demop\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now
deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number
of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencie
s.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade t
o fsevents 2.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {“node”:”<8.10.0″} (current: {“node”:”14.15.0
“,”npm”:”6.14.8″})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”an
y”} (current: {“os”:”win32″,”arch”:”x64″})

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\babel-plugin-espower\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\call-matcher\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> ejs@2.7.4 postinstall C:\test\demop\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\empower-core\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\espurify\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@3.6.5 postinstall C:\test\demop\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now
deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number
of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencie
s.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade t
o fsevents 2.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {“node”:”<8.10.0″} (current: {“node”:”14.15.0
“,”npm”:”6.14.8″})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”an
y”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar
\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”a
ny”} (current: {“os”:”win32″,”arch”:”x64″})

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\babel-plugin-espower\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\call-matcher\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> ejs@2.7.4 postinstall C:\test\demop\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\empower-core\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\espurify\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@3.6.5 postinstall C:\test\demop\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

 

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\babel-plugin-espower\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\call-matcher\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> ejs@2.7.4 postinstall C:\test\demop\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\empower-core\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\espurify\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@3.6.5 postinstall C:\test\demop\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> nuxt@2.14.7 postinstall C:\test\demop\node_modules\nuxt
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now
deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number
of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencie
s.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade t
o fsevents 2.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {“node”:”<8.10.0″} (current: {“node”:”14.15.0
“,”npm”:”6.14.8″})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”an
y”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar
\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”a
ny”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN require-extension-hooks-vue@3.0.0 requires a peer of vue-template-compiler@2.5.x but none is installed. You mu
st install peer dependencies yourself.

 

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\babel-plugin-espower\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\call-matcher\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> ejs@2.7.4 postinstall C:\test\demop\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\empower-core\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\espurify\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@3.6.5 postinstall C:\test\demop\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> nuxt@2.14.7 postinstall C:\test\demop\node_modules\nuxt

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\babel-plugin-espower\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\call-matcher\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> ejs@2.7.4 postinstall C:\test\demop\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\empower-core\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\espurify\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@3.6.5 postinstall C:\test\demop\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> nuxt@2.14.7 postinstall C:\test\demop\node_modules\nuxt
> opencollective || exit 0

:-:

> core-js@2.6.11 postinstall C:\test\demop\node_modules\@nuxt\babel-preset-app\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\babel-plugin-espower\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\call-matcher\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> ejs@2.7.4 postinstall C:\test\demop\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

> core-js@2.6.11 postinstall C:\test\demop\node_modules\empower-core\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@2.6.11 postinstall C:\test\demop\node_modules\espurify\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js@3.6.5 postinstall C:\test\demop\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> nuxt@2.14.7 postinstall C:\test\demop\node_modules\nuxt
> opencollective || exit 0

:-:
.==-+:
.==. :+- .-=-

🎉 Successfully created project demo

To get started:

cd demop
npm run dev

To build & start for production:

cd demop
npm run build
npm run start

To test:

cd demop
npm run test

インストールが開始され、しばらくすると「cd demop npm run test」と表示されますので、これが表示されれば、インストールは完了となります。

■ローカルWebサーバー/環境でサイトを公開する

C:\test>cd demo

インストール後、上記のコマンドで新しく作成したプロジェクト「demo」に移動します。

npm run dev

移動後、上記のコマンドを入力し、Enterキーを押します。

i NuxtJS collects completely anonymous data about usage. 11:46:12
This will help us improving Nuxt developer experience over the time.
Read more on https://git.io/nuxt-telemetry

? Are you interested in participation? (Y/n)

Enterキーを押すと、「i NuxtJS collects completely anonymous data about usage.（i NuxtJSは、使用状況に関する完全に匿名のデータを収集します。）」といった内容が表示され、「Are you interested in participation? (Y/n)（参加に興味がありますか？ （Y / n））」と質問されますので、今回は「Y」と入力し、Enterキーを押します。

╭───────────────────────────────────────╮
│ │
│ Nuxt.js @ v2.14.7 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: client-side │
│ ▸ Target: server │
│ │
│ Listening: http://localhost:3000/ │
│ │
╰───────────────────────────────────────╯

i Preparing project for development 11:48:32
i Initial build may take a while 11:48:32
√ Builder initialized 11:48:32
√ Nuxt files generated 11:48:32

√ Client
Compiled successfully in 9.62s

i Waiting for file changes 11:48:46
i Memory usage: 132 MB (RSS: 219 MB) 11:48:46
i Listening on: http://localhost:3000/

Enterキーを押すと、上記のように表示されますので、「i Listening on」と表示されている箇所のURLをコピーし、Webブラウザを起動します。起動後、WebブラウザのアドレスバーにコピーしたURLを貼り付けます。

貼り付けた後、アクセスします。

アクセスすると、サイトが公開されました。

]]> https://laboratory.kazuuu.net/install-nuxt-js-and-publish-new-application-on-local-web-server-windows10/feed/ 0 【大人の入門講座】プログラムをmicro:bit（マイクロビット）に組み込む https://laboratory.kazuuu.net/incorporate-programs-into-the-micro-bit/ https://laboratory.kazuuu.net/incorporate-programs-into-the-micro-bit/#respond Tue, 27 Oct 2020 02:22:55 +0000 https://laboratory.kazuuu.net/?p=3943 作成したプログラムをmicro:bit（マイクロビット）に組み込む場合について解説します。

■作成したマイプロジェクトを開く

まず、micro:bit（マイクロビット）とPCをMicroUSBケーブルで接続します。

接続後、Microsoft MakeCode for micro:bit（https://makecode.microbit.org/）にアクセスします。

アクセス後、作成したマイプロジェクトを選択し、開きます。

■micro:bit（マイクロビット）本体に作成したマイプロジェクトのファイルを移動して書き込み

プログラミングエディターの下に「ダウンロード」ボタンがありますので、こちらをクリックします。

クリックすると、「ダウンロード完了…」というウインドウが表示されます。表示されると、自動的にファイルのダウンロードが開始され完了となります。完了すると、Webブラウザの指定されている保存場所に、hex形式のファイルがダウンロードされます。

ダウンロードされたhex形式のファイルを、PCに接続されているmicro:bit（マイクロビット）本体に移動させます。移動すると、プログラムが組み込まれます。

■ワンクリックで書き込み

別の方法は、「ダウンロード」ボタンをクリックすると、「ダウンロード完了…」というウインドウが表示されますが、「デバイスを接続する」ボタンをクリックします。

クリックすると「接続してワンクリック書き込み」というウインドウが表示されますので、「デバイスを接続する」ボタンをクリックします。

クリックすると、Webブラウザ（今回はGoogleChrome）に「makecode.microbit.org が接続を要求しています」と書かれたウインドウが表示されます。ウインドウ内には「BBC micro:bit」というデバイスが認識されていますので、こちらのデバイスを接続し、「接続」ボタンをクリックします。

クリックすると、プログラムの書き込みが行われます。

■「micro:bitに保存」ボタンをクリックして書き込み

別の方法は、プログラミングエディターの下に「ダウンロード」ボタンがありますが、ダウンロードボタンの右側に「…」というボタンがありますので、こちらをクリックするとプルダウンメニューが表示され「micro:bitに保存する」という項目がありますので、こちらをクリックすると、接続しているmicro:bitに作成したマイプロジェクトのプログラムが書き込まれます。

]]> https://laboratory.kazuuu.net/incorporate-programs-into-the-micro-bit/feed/ 0 【JavaScript入門】Window.alert() メソッド – 警告ウィンドウを表示する https://laboratory.kazuuu.net/window-alert-method-display-a-warning-window/ https://laboratory.kazuuu.net/window-alert-method-display-a-warning-window/#respond Tue, 27 Oct 2020 00:50:31 +0000 https://laboratory.kazuuu.net/?p=3937 Window.alert() メソッド – 警告ウィンドウを表示してみます。

■PC環境

・Windows10

・簡単に書いたコードを共有ができる「jsFiddle（https://jsfiddle.net/）」

■Document.write() メソッドを使って文字列（文章）の内容を表示する

Window.alert() メソッドを使って警告ウィンドウを表示してみます。

■コード

Window.alert() はポップアップウインドウにメッセージを表示します。

括弧内に短い言葉を入力することで、ユーザーにエラーを通知することができます。フォームフィールドのエラーを修正するための指示などの情報をユーザーに提供する場合にも役立ちます。役立つものですが、誤用や多用してしまうと、Webサイトの訪問者にとって迷惑となりえます。

alert('警告を表示')

なお、Window.alert() は上記のように、alert() と短縮することができます。

また、HTML5では、スクリプトのタイプを指定する必要はなくなりました。つまり、「＜script type = “text / javascript”＞」という指定はなくなり、「＜script＞」の記述のみとなりました。

■実行・検証

jsFiddle（https://jsfiddle.net/）において、Window.alert() メソッドを使って実際に警告ウィンドウが表示されるのかを確認します。

確認してみると、ポップアップウインドウが表示されることを確認できました。

]]> https://laboratory.kazuuu.net/window-alert-method-display-a-warning-window/feed/ 0