2019-02-05

PuppeteerのちょっとしたTipsいろいろ

ちょっと用事があってPuppeteerを初めて触ってみました。

以前、バイトをしていた時にSeleniumを触っていたことがありましたが、そちらと比べると、サクッとインストールできるし(npmだけで入る)、async/awaitで現代的だし、素晴らしいです。

Puppeteer触ってて調べたことをメモしておく。ちなみにv1.12.1。

PDFにマージンを設定する

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.pdf({
  path: savePath,
  format: 'A4',
  margin: {
    top: 30,
    left: 30,
    right: 30,
    bottom: 30
  }
});
await browser.close()

こんな感じ。

ブラウザを表示する(非ヘッドレスにする)

launch()を呼ぶ時に、

await puppeteer.launch({headless: false});

としてあげる。

ちなみに、要注意な点として、非ヘッドレス状態では、PDF出力は利用できずエラーになります。

(Error: Protocol error (Page.printToPDF): PrintToPDF is not implementedとなる)

直接HTMLをブラウザに流し込む

Webサイトを開くのではなく、直接HTMLの文字列を流し込みたい時。

await page.setContent('<h1>Hello Puppeteer!!</h1>');

こんな感じ。

これと、ejsを組み合わせてちょっと企んでますが、その話はまた今度。

2019-02-04

findコマンドでパスを検索する(ディレクトリも含めて検索する)

ド初心者かよ、という話。(普段からシェル慣れしている人なら、当たり前に知っていそうな話)

あまりそのようなシチュエーションもないかもしれませんが、弊研究室は、卒論発表のスライド資料を全員共通のGitリポジトリで管理しています。

ディレクトリ構成は(user name)/卒論/(ユーザー名).pptxみたいな感じになっています。(実際とは少し違うけどだいたいこういう感じ)

これをうまいことスライドだけ集めて発表用PCにコピーしたいという話。

-nameオプションはファイル名に合致するものしか検索できないので、どうしたものかと思っていたら-pathというオプションがあるみたいです。(-wholenameでも同じ)

というわけで、

$ find -path "*/卒論/*.pptx" -exec cp {} ./slides +

みたいにすることで、うまくいきました。めでたしめでたし。というわけで、これから卒論発表してきます😀

ちなみに、findのexecでハマったところ↓

takuya-1st.hatenablog.jp

2019-02-02

22歳になりました。気が狂いそうな話。

22歳になりました。

もう誕生日も終わりそうですが、本日2月2日で22歳になりました。めちゃ2が並ぶ。

今年はというと、就職というビッグイベントが待っているので、激動の1年になりそうです。頑張ります。

人生の目標としては、自立することでしょうか。なんだかんだ、親に頼りながらここまできたので、就職をきっかけに、経済的にも心理的にも自立して生きていけるようになりたいです。

具体的なアクションとしては、一人暮らしがあるのかなと現状では考えています。資金貯めたりして、2019年内くらいで引っ越ししたいな、という目標です。

気が狂いそうな話

そして、気が狂いそうな話。

悲しいことに、10年弱使ってきたTwitterアカウントがロックされました。

f:id:uutarou:20190202235425p:plain

ことの発端は、2月1日。何気なくTwitterのプロフィールにある誕生日を登録したところ、突然↑の画面に。

実は、今まで使っていたアカウント、2009年に登録したものなので、当時12歳。これがマズかったようで、Twitterのガイドラインに違反してロックと相成りました。

フォームから、解除の申請は出してみたものの、希望は薄そうです。

僕くらい、Twitter漬けの日々を送っていると、Twitterアカウントのロックは致命傷のようなもの。

何も表示されないタイムラインを見るために、5分おきくらいにTwitterのアプリを開いてしまう始末。凍結されたことを報告するためにTwitterアプリを開くアホさ。

愚痴や、情報源や、昔のサークルの人々との連絡も全てTwitterでやっていたので、アカウントが死んだことで、孤独老人のようなお気持ちになってしまいました。知らんけど。

アカウントは最悪どうでもいいので、フォロー、フォロワーだけ復元させてほしい…。Twitterさん…。

2019-01-29

今更ながらtypescript-fsaが地味に便利だなという話

3日ぶりのブログ更新です。

「ゆるふわ技術日誌」なのに、技術のことでもない日記をつらつらと書くのも、精神的に来るものがあるので、これからは更新頻度を落としても技術的なことを書くブログにしていきたい所存。

久々にReactやりたいな(というかやらないと、書き方忘れそうだな)と思ったので、小さなアプリを作り始めました。

React + TypeScriptのプロジェクトを作るのも、いつのまにか

$ create-react-app hoge --typescript

でできるようになってるし、すごい。

Reduxのアクションやreducderは、普通のJSで書くのであれば、そのままてきとうに書けばいいのだが、TypeScriptとなると、型を当ててあげないとダメですね。(ダメってことはないけど、それならJS使う)

その時に便利なのがtypescript-fsa。

github.com

Reduxの型定義ファイルにも、Actionの型とか定義されてるけど、どうもいまいちなので、その辺をよしなにしてくれる。

import { Action } from "redux";
import actionCreatorFactory, { isType } from 'typescript-fsa';

const actionCreator = actionCreatorFactory('common');

export const signedIn = actionCreator<{ uid: string }>('SIGNED_IN');

interface StateType {
  uid: string | null;
}

const defaultState: StateType = {
  uid: null
};

export default (state: StateType = defaultState, action: Action) => {
  if (isType(action, signedIn)) {
    return {
      ...state,
      uid: action.payload.uid
    };
  }

  return state;
};