約束の地

キャロ組

Web

Integromat に Google Cloud Vision と Markdown の シナリオ が登場

Web

Integromat ポスト IFTTT と名高い Webサービス です。https 「シナリオ」に Google Cloud Vision と Markdown が登場 ついこの前、Integromat の「シナリオ」に、Google Cloud Vision と Markdown が追加されました。 使い方次第では面白いことができそうで…

Webブラウザ を自動で操作することができる Kantu Browser Automation

Kantu Browser Automation 知ったのは MOONGIFT 経由です。 Selenium 実際に使ってヘルプページを見たりすると分かりますが Selenium ベースなので、最近のモダンなフロントのページには使用できないです。ただ、それ以外のページではとても便利に使えます*1…

Puppeteer でポップアップ画面を操作の対象とする

Web

Puppeteer こちらです。読み方は「パピティア」のようです*1*2。 ポップアップ画面を操作の対象とする。 page.goto でページを訪れ、その際にポップアップが出てきたとき、このポップアップのボタンを押そうとしても「要素が見つからない」と怒られてしまい…

Puppeteer でページ全体のスクリーンショットを撮影する

Web

Puppeteer こちらです。読み方は「パピティア」のようです*1*2。 ページ全体のスクリーンショットを撮影する スクリーンショットは page.screenshot で撮影できます。このとき options として引数に fullPage: true を与えるとページ全体のスクリーンショッ…

Bonfire Frontend #2 速記メモ

Bonfire Frontend #2 【増枠】Bonfire Frontend #2 - connpass 画像回帰テスト Snapshotテスト 前回成功したDOMをexpectedにする UIコンポーネントのキャプチャ画像の比較 Storybookでコンポーネントのテストツール キャプチャを取得するツールも色々ある 画…

Puppeteer でページの読み込み完了を待つ

Web

Puppeteer こちらです。読み方は「パピティア」のようです*1。 ページの読み込み完了を待つ page.goto したあとにページの読み込み完了を待つには、引数に options として waitUntil: 'networkidle0' を付与します。以下、例です。 await page.goto('https:/…

appear.in でデスクトップ共有ができない(画面が真っ黒)

Web

環境 おま環の可能性が高いですが、以下の状況にて appear.in でデスクトップ共有をすると、Guest の画面では真っ黒になります。 状況 共有元のWebブラウザ Chrome 70.0.3528.3 68.0.3440.106 どちらでも同様だった Guest の Webブラウザ だめ Chrome 70.0.3…

OSS の IDE(コードエディタ)の選別を断念した話

背景 クローズドで利用できる OSS の IDE(エディタ)がほしい。 結論 どれも実用に至ると判断できませんでした。以下、試したものと所感です。 Codebox 最終コミットは3年半前 基本的な機能はある ペアプロできる Chrome だと インデント が 3以下 の場合に…

CodePen の クローン である OSS の CodePan をインストールする

CodePen CodePen とは、ご存知、Webブラウザで完結できるフロントエンドの開発環境です。 CodePan その CodePen の クローン OSS の CodePan というものがあります。これをインストールします。 なお、デプロイ済みのデモはこちらです。 手順 特に難しいとこ…

Docker を管理する Webアプリ Portainer を Docker Compose で起動する

Web

Portainer これです。 Shipyard という素敵なプロダクトがあったのですが、そちらが終了のためにこちらへの移行がなされています。 結論 以下のような docker-compose.yml になります。 version: '2' services: portainer: container_name: my-portainer hos…

NET::ERR_CERT_SYMANTEC_LEGACY 一覧

Web

前提 Chrome 70 2018年8月上旬ごろの話です 今まさに現時点では状況が異なる可能性があります

nginx の設定ファイルテスト (dry-run) で "http" directive is not allowed と出たとき

Web

nginx の設定ファイルのテスト (dry-run) これです。 $ sudo nginx -t 結論 /etc/nginx/sites-enabled/ 配下などのところに設定ファイルを置いていませんか。

nginx のリバースプロキシを IPアドレス だけで構成する

Web

結論 conf ファイルを以下のように書きます(抜粋)。 server { listen 12345; server_name 192.168.123.123; location / { proxy_pass http://192.168.123.124:54321; (以下省略) 上記の設定をすれば、http://192.168.123.123:12345 にアクセスすると htt…

Twitter API で、ツイートをリツイートした人を 100人 より多く取得する方法

Web

背景 Twitter API には GET statuses/retweeters/ids: というエンドポイントが用意されており、これを用いると「あるツイートをリツイートした人の情報」を得ることができます。 しかし、このエンドポイントで取得できる人数は 100人 までです。他のエンドポ…

Chrome で NET::ERR_CERT_SYMANTEC_LEGACY のエラーが出た時

Web

状況 メッセージにあるようにシマンテック系の証明書(Rapid SSL)が原因です。 前提 バージョンは 70以上 とします。 結論 以下のいずれかになります。 Chrome 70 以上を使うのをやめる そのサイトを使うのをやめる(推奨) チェックする方法 以下のサイト…

Twitch でサイドバー(ルーム、チャット領域)が出なくなってしまったとき

Web

結論 以下の赤枠の中の部分をクリックする。 以下はフルスクリーン時。 補足 けっこうハマりました。

画像を WebP に変換する方法(Ubnutu 16.04 LTS)

Web

結論 1. webp のパッケージをインストールする。 インストールします。 $ sudo apt-get install webp 2. cwebp コマンドで変換する もっとも単純なコマンドだと以下のようになります。 $ cwebp INPUT_FILENAME.jpg -o OUTPUT_FILENAME.webp

pre タグを使いたくない場合は white-space を当ててやる

Web

pre タグ 例えばデータベースから \n 込みのテキストを持ってきてそれを Webページ に展開したい場合、preタグ を使うとサクサクと改行を反映できます。が、フォントが強制されるのがつらいです。 white-space プロパティ その場合は white-space のスタイル…

MaterializeCSS の Cards の高さを揃える方法

Web

MaterializeCSS とは CSS のフレームワークです。 Cards Components Materialize にはいわゆる「カード型」のコンポーネントを生成できる API*1 があります。 カードを並べると高さが揃わないことがある このカードをそのまま並べていくと、以下のように高さ…

HTML を埋め込むだけで(サーバーサイド不要で)フォームでメールを送れる Formspree

Web

やりたいこと Webページ にメールフォームを設置したい でもサーバサイドのコード書く(環境作る)のはめんどい XSS とか CSRF とかもめんどい 静的ページだけで完結させたい GitHub Pages とか Netlify とか そんな方へ Formspree を使うのはいかがでしょう…

Google Analytics において、HTTP のサイトでも Twitter からの参照元が取得できる理由

Web

前提知識 ツイートに埋め込まれた外部リンクは https://t.co/1234567890 のような 短縮URL に変換される その t.co のリンクをクリックしたとき、ユーザは以下のリンクの遷移をたどる ツイートのページ → t.co → リンク先のページ*1 つまり t.co はリダイレ…

Chrome デベロッパーツール で Vue のタブが出ないときの対処方法

Web

結論 vue.js を読み込みましょう。 <script src="vue.js"></script> だめだったこと CDN(もちろんだめ) vue.min.js を読み込んで Vue.config.devtools = true; を書き加えた この場合、拡張機能のアイコンをクリックした際に「Vue のタブをさっそく見てみましょう」的なメッセージ(以下…

SlideShare へのファイルのアップロードが失敗した場合はファイル名を疑う

Web

概要 Oops, something went wrong. Upload failed というメッセージが出て何回アップロードを繰り返しても失敗する場合の対処としては、「ファイル名を変更してみる*1」とよいということです。 補足 何らかの条件の上で日本語が入っているとダメっぽい気がし…

Google の Song Maker を使って幻水IIの「回想」を作ってみた

Song Maker これです。 幻水IIの「回想」を作ってみた 「Cubase 使えばよくね?」となりイントロで断念したのであとはお願いします。

h5ai で設定したほうがよいオプション

h5ai 以前紹介しましたこれです。 オプション設定 private/conf/options.json でオプションを設定できるのですが、以下の2つはデフォルトから変えておいたほうがよいかなと思いました*1。 *1:もちろん場合によります

ヘッドレス Chrome でスクリーンショット(画像やPDF)を取得する

ヘッドレス Chrome Chrome 59 から Headless Chrome が搭載されました。PhantomJS の現状を考えると、早めにこちらに移行するのがいいかと思います。詳しくは以下の公式ページなどを。 スクリーンショットを取得する 上記の公式ページに書かれていますが、動…

Ubuntu 16.04 LTS にて Lighthouse をコマンドライン(CLI)で実行する

Lighthouse これです。

Babel で JSX をトランスパイルする(最小限操作)

目標 最小限。

JavaScript 開発のまとめ(用語、ツール……)

前提 2018/02/18 現在でかき集めた内容です リポジトリ等へのリンクを付け加えたい

Chrome Developer Tools の Network の結果を保存(HARファイル)して開く方法

Web

結論 Developer Tools の Network タブを開いて HARファイル をウィンドウの中にドラッグ・アンド・ドロップすればよい。 補足 HARファイル を保存するためには、Network タブのウィンドウ内の適当なところで右クリックをし、出てくるメニューから「SAVE as …

Powered by はてなブログ