pyppeteerは、npmモジュールであるpuppeteerをpythonに移植したものです。 例えば、以下のようなことができます。 ヘッドレスブラウザ（chromium）を開く 実際にブラウザ内でページを読み込む CSSセレクタでHTMLエレメントを取得する HTMLエレメントをクリックし、画面遷移する JavaScriptも実行されるので動的に描画された後のHTMLを取得する Cookieも共有されるので、Cookieやセッションが必要なサイトのスクレイピングもできる インストール pip install pyppeteer # or poetry add pyppeteer シンプルな使い方 こちらのサイトにログインするサンプルを書いてみました。 import asyncio from pyppeteer.launcher import launch from pyppeteer. Continue Reading
Firestore + typescript を使ってフロントエンドアプリ（Chrome拡張）を作っているのですが、DOS攻撃をうけたり、単純に利用者数が多かったりすると普通にFirestoreの無料枠を超える可能性があります。コストリスクを下げるために、色々対策を実施したので紹介しようと思います。 Firestoreの料金 まずは、FireStoreの料金体系について紹介します。思ったより無料枠が少ないです。 無料枠 こちらを参照しました。単位が書いてないのですが、おそらくアクセスするドキュメント数です。読み取り、書き込み、削除の制限が結構厳しくて、何も考えずに実装していると超えてしまいそうです。そうじゃなくても、一覧画面とかで F5 アタックとかされたら簡単に無料枠を超えてしまいそうです。 処理区分 無料枠 保存データ 1 GiB ドキュメントの読み取り 50,000/日 ドキュメント Continue Reading
reCAPTCHAはスパムやBOTなどからサイトを保護するためのもので、v2とv3があります。今回は自分がtypescriptで作っているフロントエンドアプリ（Chrome拡張）をBOTアクセスから保護する目的でreCAPTCHAのv2とv3の両方を同じ画面に導入しました。 v2とv3 v2はWEBサイトでみかけるやつで「この中から車が写っている画像を選んでください」みたいな感じで、ユーザ操作の結果でBOTアクセスなのかどうか（True/False）を返してくれます。 v3は、ユーザフリクション（本来の目的を妨げるような事象。）は一切なく、スコア（1が正常で、0.0に近づくほどBOTの可能性が高い）を返してくれます。 処理の流れ DBにアクセスする3つのアクション（Chrome拡張起動、保存ボタン、削除ボタン）の際にv3を使ってスコアを計算する フロントエンド（Chrome拡張のポップアッ Continue Reading
Pythonでマルチプロセス処理を書いていて、サブプロセス内で同期的に変数を更新する（＝状態を持つ）必要が出てきましたので試してみました。 公式ドキュメントを見てみると、マルチプロセスで状態を管理する方法は大きく二つあるようです。 共有メモリ（Shared Memory） 特徴 メインプロセス内の共有メモリで変数を保持する 変数の型（入れ物）としては、Value, Arrayのみが提供されている Valueは一つのデータの入れ物、Arrayは複数のデータの入れ物 中に突っ込める型は、arrayモジュールで利用できる型・cypesの型のみ => 型の制約があり concurrent.futures.ProcessPoolExecutorでは利用できない 実装サンプル arrayモジュールで使える型（今回はint）を利用する実装サンプルはこんな感じです。 並列処理で、それぞれ数値を二乗し Continue Reading
ブラウザでデータを保管する場合、Web Storage（sessionStorageやlocalStorage ）を使うことが多かったと思いますが、IndexedDBが登場したことであえてWeb Storageを使う理由がなくなりました。 IndexedDBを使う場合、Dexie.jsを使用することでだいぶ実装がスッキリするので、使い方を紹介したいと思います。 Web StorageとIndexedDBの違い そもそも本当にIndexedDBを使うのが良いのか、という疑問があるので念のため、Web Storageと IndexedDBの違いを調べてみました。調べた全ての点でIndexedDBの方が良いので、やはりIndexedDB一択ですね。 項目 Web Storage IndexedDB 型 文字列のみ boolean、数値、文字列、dateなど色々 RDBのテーブル なし。key-v Continue Reading
これまでpythonプロジェクトにおいては、pipでパッケージ管理しvenvで仮想環境を構築するというスタンスだったのですが、いい加減もっと便利なツールに乗り換えることにしました。 調べてみるとpipenvとpoetryという二つの良さそうな候補があり、ちょっと迷いましたがpoetryに決めました。 ドキュメントが分かりやすいので不要かもしれませんが、この記事では知っておいた方が良さそうな部分を抜粋して動作確認しつつ、poetryの使い方をまとめています。 poetryを選んだ理由 pipenvもpoetryも調べた範囲では、担当プロジェクトでやりたいことを考えると、機能的には不足を感じませんでしたが、先駆者の皆さんのブログを読むと、以下のような点でpoetryの方が優位性が高く、githubのstar数の推移を見ても、将来的にはpoetryがはやる可能性が高そうな気がするので、poetr Continue Reading
vue + typescriptで作っているフロントエンドアプリにmarkdown editorを導入したので少し紹介します。 XSS対策をちゃんとできるかという点に着目しつつ、mavonEditorとEasyMDEを試して最終的にEasyMDEの方を採用しました。 mavonEditor 2020年6月時点でstar数も3.9kあり実績十分ぽかったのでまずはこれを試しました。 導入手順 こちらをベースにやっていくわけですが、typescript＋開発時はnode_modules・本番はCDNという前提で導入手順を記載しておきます。 ライブラリをインストールし、 npm install mavon-editor –save-dev mavonEditor.tsに以下のように記述します。cssはCDNから読み込む予定なのでここではimportしません。 import Vue from &# Continue Reading
Vue+Typescript+FirebaseでChrome拡張を作っているのですが、バンドルサイズが大きいよと警告が出たので対応しようと思います。 使っている技術 Chrome Extension Vue+Vuetify TypeScript Firebase Authentication Cloud Firestore ワーニングの内容 npm run build（cross-env NODE_ENV=production webpack –hide-modules）で本番用のコードを出力してみたところ、バンドルサイズが推奨サイズ（244 KB）を超えているというワーニングが出ました。 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). Thi Continue Reading
Chrome拡張アプリを作っていて、ユーザのデータをユーザアカウント（email）単位にCloud FireStoreに保存したいと思っています。ユーザがアクセスできる情報をセキュリティルールを設定して制限したいので、Firebase AuthenticationでGoogle認証を行うことにしました。紆余曲折あり、いくつかの方法を試したので記録しておきます。 なお、単にGoogle認証したいだけなら google-api-javascript-client を使うのが一般的かもしれません。 【不採用】Firebase Authentication in ポップアップページ 公式ページで紹介されている方法を試してみました。参考にしたのは以下の二つのページです。 Chrome 拡張機能での Firebase 認証 Firebase を JavaScript プロジェクトに追加する Fireb Continue Reading
最近Sparkを触る機会があって、少しだけ勉強したのでメモがてら残しておきます。 Sparkの分散処理の仕組み Sparkとは 高速で汎用的な分散処理システム 分散データ（RDD）をDISKを介さずにメモリ上に持つので、Hadoopの100倍ぐらい高速 Java, Scala, Python, RなどのAPIを提供 Spark SQL, MLlib, GraphX, Spark Streamingなどのリッチなツールを提供 分散処理システムの構成要素 画像は、こちらからお借りしました。 Driver Program Master Nodeで実行される起点となるプログラム SparkContextを作成し、RDDを生成して、Taskを実行していく SparkContext Sparkの色々な機能へのエントリーポイント ClusterManagerを通じてクラスターを操作する DAG Sche Continue Reading
