ハードウェアハッカーなど気になった書籍

Amazon を覗いていたら面白そうな書籍がたくさん紹介されていていくつか気になったものをここにメモする。

ハッカー関連

gihyo.jp

ハードウェアハッカー ~新しいモノをつくる破壊と創造の冒険

ハードウェアハッカー ~新しいモノをつくる破壊と創造の冒険

第2部は欧米と中国の知的財産の扱いの話から,山寨携帯や中国特産インチキSDカードやLSIをこじ開けてその偽造ポイントをつきとめる話。そして第3部ではクラウドファンディングでハードウェアを設計製造し出荷するまでの苦労話,さらにリバースエンジニアリングを扱う第4部では,LSIのシリコンをむきだしにしてその中身まで書き換える話に,HDMIの映像信号を復号せずに改変する異様な技,はては遺伝子組み換え話まで……。

遺伝子組み換えとかまでいくのか。肉体というハードウェアの設計図までハックするのが本物のハッカーだ。

だったら、合成生物学をはじめるしかないでしょ。

バイオビルダー ―合成生物学をはじめよう (Make: PROJECTS)

バイオビルダー ―合成生物学をはじめよう (Make: PROJECTS)

アート関連

アートとサイエンスの違いは再現性があるかどうかだけで本質的に違いはない。
アートがコンピュータを用いることによって再現性が高まってきているためサイエンスとの親和性が高くなっているのかな。

ART SCIENCE IS. アートサイエンスが導く世界の変容

ART SCIENCE IS. アートサイエンスが導く世界の変容

プログラミング関連

こういう大規模サービスだと普段自分が扱っているアプリケーションとは比べ物にならない途方もないデータ量を普段の業務として扱っていてすごいなーと思う。

ドラゴンクエストXを支える技術 ── 大規模オンラインRPGの舞台裏

ドラゴンクエストXを支える技術 ── 大規模オンラインRPGの舞台裏

スクレイピングの書籍、定期的に出ていて一定の需要があるのだろうな。
ただ、どうしても出版してある程度たつとサンプルプログラムが動かなかったりしてそのへんの課題を解決する仕組みみたいなのが出版にあるといいな。

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

会社をつくりました

ひょんなことからツノウサラボという会社を立ち上げた。

まさか自分が社長になるとは思わなかった。

まだなにもない。

なにをするかはこれからゆっくり考える。

なにせ株主は自分だけだし、融資なんてどこからも受け取っていない。

取締役も自分一人だけだ。

上司もいなければ部下もいない。

嫌になれば畳んでしまえばいいだけの気楽な身分だ。

誰にも知られず、森のなかでひっそりと暮らすツノウサギのようにここにいる。

会社は大きいほうがいいなんて幻想だ。今日では誰でも自分のアイデアをもとにビジネスを始められる。高価な広告枠、営業部隊、オフィス、いや、会議も事業計画もいらない。昼間の仕事をしながら、初めは週末の数時間を費やすだけで十分だ。小さな所帯で、シンプルに、迅速に、臨機応変に―それで僕らは成功している。

小さなチーム、大きな仕事 働き方の新しいスタンダード (ハヤカワ文庫NF)

小さなチーム、大きな仕事 働き方の新しいスタンダード (ハヤカワ文庫NF)

順番は逆になってしまったけど、あとはアイデアを形にするぞ。

HPはAWSのS3で配信していて、メールアドレスなんかはG Suitesで、会計ソフトや会社設立はfreee を使っている。

誰も雇う必要がないし、なにか機材を購入する必要もない。

本当に、身一つとクラウドだけあればはじめられるのだと身をもって体験することができた。

さてこれからどこに行こう。

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

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

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

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

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

われわれは知られざる立法者になれる(た)か。

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

これで解決!

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
});

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

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 ―実装を通した人工生命モデル理論入門

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

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

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

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

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

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

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

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

  • 場所を取らない

  • マグネットではない

  • 軽い

  • 重いバッグでも一日中ぶらぶらし放題

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

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

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

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

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

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
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

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」が出る場合の解決方法

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン