2018-09-14

コードを知っているのはわれわれである

機械好きな人々が、機械的な人生観を持つのはまったく論理的なことだ。
革新を背後で推進するものはしばしば、ノーバート・ウィーナーの言葉によると、「歯車が回るのが見たいというガジェット好きの欲望」である。
そしてそうした人々が現在、社会の動きを支配または媒介している、複雑なシステムやソフトウェアのデザインや構築をコントロールしているのも、同様にまったく論理的なことだ。
コードを知っているのは彼らである。
社会がさらにコンピュータ化されていけば、プログラマーは知られざる立法者となる。
ヒューマンファクターを周縁的な関心だと規定することで、テクノロジー主義者は、自身の欲望の実現の主たる障害物も取り去ることができ、テクノロジーの進歩の飽くなき追及は自己正当化される。
テクノロジーを、主にテクノロジー的利害に基づいて判断することは、ガジェット好きに白紙委任状を与えるようなものだ。

オートメーション・バカ -先端技術がわたしたちにしていること-

作者: ニコラス・G・カー,篠儀直子
出版社/メーカー: 青土社
発売日: 2014/12/25
メディア: 単行本
この商品を含むブログ (16件) を見る

ニコラス・カーについてもっと注目すべきだった。
読み直すたびに新たな発見があるタイプの本だ。
週末、ゆっくり彼の著作を読もう。

われわれは知られざる立法者になれる（た）か。

2018-09-07

puppeteer でviewportを指定するとスクリーンショットのfullPage: true が効かなくなる問題

js test

これで解決！

await page.setViewport({
  width: 320,
  height: await page.evaluate(() => document.body.clientHeight),
});

なにが問題なのか

puppeteer でscreenshot をフルスクリーンで撮るにはscreenshot()のオプションにfullPage: trueを指定します。

await page.screenshot({
  path: `${outdir}/test.png`,
  fullPage: true
});

これでばっちりだと思いきや、なぜかsetViewportでwidthやheightを指定すると無効化されてしまいます？？？

await page.setViewport({
  width: 320,
  height: 3000,
});

ならばと、widthだけを指定してみたところ怒られます。。

await page.setViewport({
  width: 320,
  // height: 3000,
});

なんでや。。

Protocol error (Emulation.setDeviceMetricsOverride): Invalid parameters height: integer value expected

どうすればいいのかと悩んでいたところ、単純にコンテンツの高さを取得する方法で解決できました。
それが冒頭のコードです。

await page.setViewport({
  width: 320,
  height: await page.evaluate(() => document.body.clientHeight),
});

古典的な解決策ですね。

2017年の8月に起票されてるけどいまだにOpenのままです。
Chrome seems to have a hard limit when taking screenshots of tall pages · Issue #359 · GoogleChrome/puppeteer · GitHub

作って動かすALife ―実装を通した人工生命モデル理論入門

作者: 岡瑞起,池上高志,ドミニク・チェン,青木竜太,丸山典宏
出版社/メーカー: オライリージャパン
発売日: 2018/07/28
メディア: 単行本（ソフトカバー）
この商品を含むブログ (1件) を見る

2018-09-03

バッグハンガーが手放せない

ずっと欲しかったがバッグハンガー、名前がわからなかったので手に入らなかった。
そんなある日Amazonのリコメンドに表示されていて購入することができた。
アルゴリズム万歳である。
もう人間の時代は終わった、アルゴリズムの支配する世界へようこそ。

バッグハンガーを手に入れることができるのならアルゴリズムが与える情報しか得られないとしてもそれは素晴らしい世界だろう。

さて、バッグハンガーが何かを知らない人のためにいちおう説明すると、形は上の画像のとおりだ。変なフックかなにかのようだが、テーブルの上にこれを置くだけでバッグが床に触れずにぶら下げられるという革命的な製品なのだ。

何が革命なのかというと、

場所を取らない
マグネットではない
軽い
重いバッグでも一日中ぶらぶらし放題

なのだ。これが革命でなくなんなのか。

机の上に置くだけでこんなふうにMacBook Proが入ったリュックもほらご覧の通り。
見た目からはちょっと頼りない感じがするがめちゃくちゃ頼れる。
たとえ壊れたとしてもまた買えばいい価格設定だからたくさん買って色んな所に置いておける。お店で地面に直接カバンを置きたくないときなどバッグハンガーを持ち歩けば解決する。

バッグの重みによってバッグハンガーが安定する設計になっていてつくづく感心してしまう。

リヒトラブバッグハンガー A7595-24 ブラック

出版社/メーカー: リヒトラブ(LIHIT LAB.)
メディア: オフィス用品
この商品を含むブログを見る

2018-08-21

Puppeteer でループ処理を同期的に実行しスクリーンショットを撮るサンプル

puppeteer 使い勝手がよいですね。
今後のE2Eテストのデファクトスタンダードになっていく予感がします。

puppeteer のREADME にあるexample.js を改造して外部のExcelファイルから読み込んだURLリストをループで回してスクリーンショットを取得するスクリプトです。
URLリストは各国のAmazonのサイトです。国によってけっこう違いがありますね。
ExcelのURLを変更すれば別サイトのスクリーンショットも撮れるはずです。全体的なソースコードはGithubにあげています。

動作確認したpuppeteerのバージョンは1.7.0 です。

/**
 * Access Amazon website,
 * Just only take a screenshot.
 *
 */
const puppeteer = require('puppeteer');
const makeDir = require("make-dir");
const XLSX = require("xlsx");

const config = {
  dataFile: './data/amazonList.xlsx',
  dataSheetName: 'TestSheet'
}

function getWorkSheetJson() {
  const workbook = XLSX.readFile(config.dataFile);
  const worksheet = workbook.Sheets[config.dataSheetName];
  // console.log(worksheet);

  return XLSX.utils.sheet_to_json(worksheet);
}

function makeDateString() {
  return new Date().toLocaleString().replace(/\s|\//g, '-').replace(/:/g, '');
}

async function screenshotPage() {
  const jsonData = getWorkSheetJson();
  const dateString = makeDateString();
  const outdir = `./ss/${dateString}/`;
  // スクリーンショットを格納するディレクトリを作成
  makeDir(outdir);

  for (let i in jsonData) {
    const siteData = jsonData[i];

    await (async () => {
      if (siteData.URL) {
        const siteURL = siteData.URL;

        const browser = await puppeteer.launch({
          defaultViewport: {
            width: 1200,
            height: 6000,
          }
        });
        const page = await browser.newPage();
        const region = siteData.region.replace(' ', '_');

        try {
          await page.goto(siteURL, {
            timeout: 20000
          });

          console.log(`page loaded: ${siteURL}`);
          await page.waitFor(5000);
          await page.screenshot({
            path: `${outdir}/${region}.png`,
          });
        } catch (error) {
          console.log(error);
          browser.close();
        }

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

screenshotPage();

進化的アーキテクチャ ―絶え間ない変化を支える

作者: Neal Ford,Rebecca Parsons,Patrick Kua,島田浩二
出版社/メーカー: オライリージャパン
発売日: 2018/08/18
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

2018-07-25

Windows 10でRuby Sass Compass 環境構築

Mac で開発していたSassでコンパイル案件をやることになった。
開発機がWindowsだったので手元のMacでやるかNodeでやるか迷ったのだけれでもWin10だったらわりとスムーズにいくのではと思い、環境を再現した。
やっぱり文字コードやらWindows固有の問題でつまづいてコマンドを叩いたら即環境構築というわけにはいかなかった。

Ruby Gem Sass Compass

まず、パッケージマネージャーにはChocolatey を使います。

Ruby Gem Sass Compass をインストールします。

# Ruby をインストール
> cinst ruby

Gem を使用するにはMSYS2というパッケージをインストールします。

# MSYS2のインストール
> cinst msys2 --params "/NoUpdate"

# 環境変数を再読み込みします
> refreshenv

# 以下を実行する
# 2 - MSYS2 repository update
# 3 - MSYS2 and MINGW development toolchain
> ridk install 2 3

msys2をインストールするコマンドで別Windowが立ち上がったのでこちらで作業を続けます。

Sass Compass をインストールします。

> gem install sass
> gem install compass

ここからWindows 環境との闘いになります。

プロジェクトルート（setting.rb がある階層）で以下のコマンドを実行すれば .sass から.css が生成されるはずです。
ここからコマンドはGit bash 上で実行しています。

$ compass compile

文字コードエラー：Invalid Windows-31J character

Windows の文字コードはWindows-31J というS-JIS に似たなにかです。
そのためcompassだと文字をうまく処理できず以下の文字列を含んだエラーになってしまいます。

Invalid Windows-31J character

これを解決するには以下の通り文字コードをUTF-8だよと明示してあげて処理する必要があります。

`.scss` の先頭にUTF-8であることを明示する

コンパイル対象の.scss ファイルすべての先頭に以下を追記します。

@charset "UTF-8";

`config.rb` の先頭にUTF-8であることを明示する

Encoding.default_external = 'utf-8'

キャッシュディレクトリ深すぎる問題

compass がコンパイルするときにキャッシュディレクトリを作成するのですが、環境によってはそのディレクトリが深すぎてWindows ではファイルが生成できなかったりします。。
そのため、明示的にキャッシュディレクトリを指定してあげる必要があります。

`config.rb`にキャッシュディレクトリを指定する

以下を追記します。

cache = true
cache_path = 'C:/temp/sass/'

上記を踏まえてcompass を実行してみます。

$ compass compile
 modified config.rb
    clean c:/Dev/...
   delete c:/Dev/...
   delete c:/Dev/...
    write c:/Dev/...
    write c:/Dev/...

無事、.cssファイルが生成されました。
めでたしめでたし。

参考

Compassのimport-onceでエラー。コンパイル時に「No such file or directory」が出る場合の解決方法
 chocolateyでruby on rails環境を構築
 Windows環境のcompassで”Invalid Windows-31J character”のエラー
 Windows環境でStyleDoccoを使う際に発生する「Invalid Windows-31J character」の解決方法 - Change the World!
sass - File to import not found or unreadable: compass - Stack Overflow
Compassのimport-onceでエラー。コンパイル時に「No such file or directory」が出る場合の解決方法

2018-06-13

whatismybrowser から、OS とブラウザのバージョンの組み合わせでUser Agent を取得する

JavaScript

まとめ

検索ワードに OS とブラウザのバージョン + whatismybrowser で検索する
検索候補の上のほうに whatismybrowser.com というサイトが表示されるのでアクセスする
Here's how we parse the user agent:下に User Agentが表示されているのでコピーする

詳細

例えば、iOS 10.8 で Chrome 60 の組み合わせでUser Agent の文字列を取得したい場合、検索ワードを以下のように設定する。

iOS 10.8 Chrome 60 whatismybrowser

すると検索結果の候補に以下のページが出てくる。 https://developers.whatismybrowser.com/useragents/parse/602616-chrome-mac-os-x-blink

f:id:snowlong:20180613165824p:plain

あとはHere's how we parse the user agent:下の文字列をコピーするだけだ。

よもやま話

User Agent のキーワードと whatismybrowser という単語を組み合わせて https://developers.whatismybrowser.com/ というサイトが候補に出てくるようにした。
すごいのはGoogleとwhatismybrowser だ。

どういった人たちが運営しているのかよくわからないが2010年からあるらしく、莫大なUAについての情報を持っているし増え続けている。

APIも公開していて、UAのパーサーのメンテナンスやサードパーティーのライブラリが更新が止まったりといった問題を解決できまっせとのこと。

Everything you wanted to know about user agents...
ユーザーエージェントについて知りたいことのすべてがある

パーサーはUAParser.jsを使用していてこれを使ったアプリケーションのテストを行いたいときにUser Agent が網羅されているサイトを探していて見つけた。

github.com

2018-05-16

Win10 の英字キーボードでの入力切替について

以下を参考にしたりして。

http://ko-log.net/tech-log/archives/2561460.html

レジストリはいじりたくない前提。

結局、Microsoftの英語と日本語のIMEをインストールしてそれをWin + spaceで切り替えるか、日本語のIMEのON/OFFでCtrl + spaceで切り替えるの二択かなというところで落ち着きそう。
やはりAlt + `は打ちづらい。

昔よりもMicrosoftのIME賢くなっているようにみえるのでこれでしばらく試してみる。

Surface Ergonomic 無線キーボード英字キー配列 3RA-00021

posted with amazlet at 18.05.16

マイクロソフト
売り上げランキング: 120,665

Amazon.co.jpで詳細を見る