2018-04-30

reactとexpressをつなぐ

react

社内の勉強会でreactを勉強しています

サンプルをもとに作っているのですが
reactとexpressをつなぐ所が動かず・・・泣きそうになっています

何回目なのかわからないのですが１から作り直す事にしました

別のツールでつくれる事がわかりました

masalib.hatenablog.com

2018-04-29

オリンピック会場が着々と作られているのね

その他

先月ぐらいに渋谷のヒカリエにいきました
待ち時間があったのでちょっと写真をとりました

オリンピック会場が見えた・・・

ああ・・・着々と作らているのね

こんな景色がきれいな所だと仕事に手が付けられないような・・・
うちの会社は３階なので景色とか全然ないから
仕事が捗るね（笑）

都会はゴミゴミしているけど上から見ると爽快感があるね
夜だともっと綺麗なんだろうな〜

2018-04-29

千葉のモノレールはカラフルだな

千葉駅に遊びに行ったのですが
その時にモノレールを乗ったのですが
駅メモのキャンペーンをおこなっていた

モノレールにラッピングしていて
ついつい撮ってしまった

モノレールから外を見ることはできるので
面白いつくりなっていた

駅メモ以外でもラッピングしているようなので
広告としていい感じですな

千葉のモノレールは２車両しかないので簡単なのかな？？
ほとんどの車両にラッピングがされていた

2018-04-28

puppeteerでイメージダウンロード

puppeteer

node.jsのスクレイピングといえばcheerio-httpcliでした
このモジュールは便利で画像の一括ダウンロードとかもできた

f:id:masalib:20180426213826j:plain

puppeteerはあまりダウンロードについては記載がなかった
いろいろ調べたらできた

ダウンロードすべきタグ（セレクター）がわかっている場合と
わからなくて兎にも角にも一括ダウンロードするやり方があるみたい

ダウンロードすべきタグ（セレクター）がわかっている時

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    ignoreHTTPSErrors : true ,
  });
  const page = await browser.newPage();
  page.setViewport({ width: 1280, height: 926 });

  targetSelector = '#box2-inner > div.hatena-module.hatena-module-profile > div.hatena-module-body > a > img';

  await page.goto('http://masalib.hatenablog.com/');
  await page.waitForSelector(targetSelector);

  // Select the #svg img element and save the screenshot.
  const svgImage = await page.$(targetSelector);
  await svgImage.screenshot({
    path: 'Download/downimage.jpg',
    omitBac	kground: true,
  });
  await browser.close();
})();

わからないので一括ダウンロードする時

const fs = require('fs');
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.setViewport({ width: 1280, height: 926 });

  let counter = 0;
  page.on('response', async (response) => {
    const matches = /.*\.(jpg|png|svg|gif)$/.exec(response.url());
    if (matches && (matches.length === 2)) {
      const extension = matches[1];
      const buffer = await response.buffer();
      fs.writeFileSync(`Download/image-${counter}.${extension}`, buffer, 'base64');
      counter += 1;
    }
  });

  await page.goto('http://masalib.hatenablog.com/');
  await page.waitFor(10000);

  await browser.close();
})();

responseからURLを特定してダウンロードすることができるようになった
次はSPA（シングルページアプリケーション）での画像をとれるようにしたい
これができればインスタグラムの可愛い猫画像が大量にゲットできる

2018-04-27

puppeteerでサブウィンドウから戻れない・・・

puppeteer

puppeteerでテストコードを記載しています
2018/04/26の時点はv1.3です

puppeteerとは
qiita.com

サブウィンドウとは
JavaScript/ウィンドウ/サブウィンドウを開く（クリック時） - TAG index

レガシーなシステムなのでサブウィンドウを使って選択させるような仕組みが多々あります
サブウィンドウを開いた時に
ブラウザのtargetcreatedイベントが発生するので
そちらでサブウィンドウの動作を記述するのですが
サブウィンドウから親ウィンドウに戻ることができないです

サブウィンドウを開いた時の処理

	//ブラウザのタブが開くと実行される所
   browser.on('targetcreated', async (target) => {
        console.log(`Created target type ${target.type()} url ${target.url()}`);
        if (target.url() == subwindowurl){
            var page2 = await target.page();
            var inputElement2 = await page2.$('body > center > form > table > tbody > tr > td:nth-child(4) > input[type="button"]');
            await inputElement2.click();	
            page2.close();
            return;
		} else if (target.type() !== 'page') {
            return;
        } else {
            var page = await target.page();
        }
    });

サブウィンドウを閉じた時の処理

	//ブラウザのタブ閉じられる時のイベント
   browser.on('targetdestroyed', async (target) => {
        console.log(`targetdestroyed target type ${target.type()} url ${target.url()}`);
        if (target.url() == subwindowurl){
			console.log('testtargetdestroyed');
			pages = await browser.pages();	
			pages.forEach(function (pageobj) {
				if (pageobj.url() == parrentURL){
					console.log(pageobj.url() );
					//ここが動かない
					// var inputElement2 = await pageobj.$('body > center > form > table > tbody > tr > td:nth-child(4) > input[type="button"]');
					// await pageobj.click();	
				}
			});
            return;
		} else if (target.type() !== 'page') {
            return;
        } else {
            return;
        }
    });

ここでハマるわけにはいかないので
時間をまって逃げた

	await inputElement.click();	//
	console.log("popup start");

	await page.waitFor(4000);
	console.log("popupがたぶん終了しているので作成開始" );
	var inputElement = await page.$('body > center > form > table > tbody > tr:nth-child(7) > th > input[type="button"]:nth-child(1)');
	await inputElement.click();
	console.log("作成終了" );

あああ・・・イケてない

東方プロジェクト1?/ 8?7色のThe Puppeteer Alice Margatroid (通常Ver。)Complete Figure

出版社/メーカー: Griffon Enterprise
メディア: おもちゃ＆ホビー
この商品を含むブログを見る

2018-04-27

reactでスプレッド演算子（...）を利用するとエラーになる

react

reactでサンプルソースを見ながら作っているのですが
...の部分でSyntaxErrorになってしまう

ERROR in ./src/reducers/authReducer.js
Module build failed: SyntaxError: Unexpected token (14:8)

  12 |     case SET_CURRENT_USER:
  13 |       return {
> 14 |         ...state,
     |         ^
  15 |         isAuthenticated: !isEmpty(action.payload),
  16 |         user: action.payload,
  17 |       };

全然理解できていなくて泣けてくる

この「...」のことをスプレッド演算子というらしい

スプレッド演算子とは