<table> <colgroup> <col style="width:12.5%;"> <col style="width:12.5%;"> <col style="width:12.5%;"> <col style="width:12.5%;"> <col style="width:12.5%;"> <col style="width:12.5%;"> <col style="width:12.5%;"> <col style="width:12.5%;"> </colgroup> <thead> <tr> <th colspan="3">3</th> <th>1</th> <th>1</th> <th colspan="2">2</th> <th>1</th> </tr> </thead> <tbody> <tr> <td colspan="3">3</td> <td>1</td>
import argparse from pathlib import Path import mistletoe # ファイルの読み込み def read_file(file_path:str) -> str: with open(file_path, "r", encoding="utf-8") as input_file: return input_file.read() # ファイルへ書き出し def write_file(file_path:str, html_str:str) -> None: with open(file_path, "w", encoding="utf-8") as output_file: output_file.write(html_str) # body タグの中身に変換する def get_body(md_str:str) -> dict: mark
マークダウンをhtmlにコンバートする方法を探していた。pipで入れられるmarkdownがよさそうなので少し試してみる。 pyenvで入れた環境 $ python --version Python 3.6.5 $ pip --version pip 19.1.1 from /Users/ito_masakuni/.pyenv/versions/3.6.5/lib/python3.6/site-packages/pip (python 3.6) $ pip install markdown Collecting markdown Downloading https://files.pythonhosted.org/packages/c0/4e/fd492e91abdc2d2fcb70ef453064d980688762079397f779758e055f6575/Markdown-3.1.
HTML 要素を画像化した複数のファイルをローカルの専用サーバーに送って保存します。 シリーズの記事です。 dom-to-imageを試す html2canvasを試す 複数の画像を生成してローカルに保存 ← 今回の記事 ライブラリ 前回まで同じ目的の2つのライブラリを比較しました。どちらも Firefox では文字サイズが変わってレイアウトが崩れるため、今回は Chrome を前提に進めます。 テキストだけを含む要素の画像化ではどちらを使ってもほとんど差がありませんでした。XMLHttpRequest でファイルを送るには Blob に変換する必要があるため、その機能をサポートしている dom-to-image を使用します。 HTML 要素を画像化した Blob の生成は簡単にできます。 サーバー 以下の記事で作ったファイルを受け取るサーバー (server.ts) を使用します。 簡
phpQuery vs php-html-parser この記事で扱う PHP のバージョン php-html-parser をインストール 実際に使ってみる まとめ phpQuery vs php-html-parser 以前、以下の記事を書きました。この記事では phpQuery というライブラリを使いましたが、phpQuery は3年以上更新が止まっており、最新の PHP に対応してないなど問題がありました。 www.utakata.work 別のライブラリを探していたら、 php-html-parser がかなり良かったので紹介します。 github.com この記事で扱う PHP のバージョン 今回、 PHP のバージョンは 8.0 を使っていますが、7.4 とか、7系でも問題なく動くと思います。 $ php -v PHP 8.0.0 (cli) (built: Nov 30 2
説明 php-html-parserを使って、スクレイピング（ウェブ抽出）を行います。 今回は例として、本サイトのブログタイトル一覧を入手します。 開発環境 php8.0 composer version 2.1.6 ※dockerでの開発環境の構築方法はこちら 実践 ①. composerからphp-html-parserを入れる root@hoge:/var/www/html# mkdir scraping root@hoge:/var/www/html# cd scraping/ root@hoge:/var/www/html/scraping# composer require paquettg/php-html-parser ②. phpファイルの作成(test.php) <?php require_once __DIR__ . '/vendor/autoload.php'; u
PHP Simple HTML DOM Parserを利用することで、HTMLの要素へ簡単にアクセスできるようになります。 導入 まずライブラリをダウンロードします。 PHP Simple HTML DOM Parser - Browse Files at SourceForge.net そして、それを読み込みます。 require_once 'simple_html_dom.php'; オブジェクトの生成 ヘルパー関数のstr_get_html()またはfile_get_html()から、simple_html_domオブジェクトを生成します。 // 文字列から $html = str_get_html( '<html><body>Hello!</body></html>' ); // URLから $html = file_get_html( 'http://example.com/'
<!-- ページ内検索ハイライトのカラーなど --> <style> .highlight{ font-weight:bold; background-color:Yellow; } </style> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- jquery.highlight-5.js プラグイン --> <script> /* highlight v5 Highlights arbitrary terms. <https://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plug
ちょっとしたコードをシェアするのにGistは便利ですが、HTMLとしてそのままブラウザに表示したり、JSONとして利用するには少々難があります。レスポンスヘッダのContent-Typeがtext/plain固定なので、Rawデータにアクセスしてもソース表示に。(↓スクリーンショット) Gistを中継するサービス HTMLの共有ではjsfiddle.netやjsdo.itが人気ですが、HEAD要素内の変更ができず、モバイル向けのサンプル表示には向きません。例えば、<meta name="viewport" content="user-scalable=no">とかが出来ません。なんとかならないかなと思っていたところ、良さそうなサービスが2つほどありました。どちらも機能はだいたい同じです。 githack: https://raw.githack.com/ RawGit: https://r
Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。 その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料
The Morning After: Should you upgrade to an iPhone 16?
This is my branch of pdf2htmlEX which aims to allow an open collaboration to help keep the project active. A number of changes and improvements have been incorporated from other forks: Lots of bugs fixes, mostly of edge cases Integration of latest Cairo code Out of source building Rewritten handling of obscured/partially obscured text - now much more accurate Some support for transparent text Impr
最近クローラーを作成する機会が多く、その時にXPathが改めて便利だと思ったので XPathについてまとめてみました！ XPathを学ぶ方の役に立てれば幸いです。 初級編 XPathとは XPathはXML文章中の要素、属性値などを指定するための言語です。 XPathではXML文章をツリーとして捉えることで、要素や属性の位置を指定することができます。 HTMLもXMLの一種とみなすことができるため、XPathを使ってHTML文章中の要素を指定することができます。 例えば、 <html> ... <body> <h1>ワンピース</h1> <div class="item"> <span class="brand">iQON</span> <span class="regular_price">1,200円</span> <span class="sale_price">1,000円</sp
背景 Webサイトをデザインするときに、スクロールしたときにナビゲーションバーの色を変えたくなったので実装してみました。 実装には、jQueryを使用しました。 ついでに、Android版Chromeのアドレスバーの色(theme-colorを使って変更)もスクロールで変えられるようにしています。 今回の実装にあまり関係ないですが、CSSフレームワークには cirrus を使っています。 デモ Android端末 pic.twitter.com/pu1zHpcaDx — jong (@fashioncrazy66) 2018年9月29日 PC pic.twitter.com/boDoeo0FqY — jong (@fashioncrazy66) 2018年9月30日 考え方 スクロール後のナビゲーションバーの色などをcssのクラスとして定義しておきます。 スクロールをjQueryで検知して
こんにちは、Twitter大好き丸の あかい です タイトルの通りなのですが、実はTwitterにはWebページを埋め込むことができます。（具体的には「ツイートには」ですが） 「WebページにTwitterを埋め込む」ではないですよ。 次のツイートをご覧ください。 つくったから見て！！！！ 特にPC版Twitterから《《《再生》》》してみて！！！！！https://t.co/a1KLMSXfaV #朱猪わらい — あかい (@Ver1000000000) July 9, 2020 ……何やら再生できそうな感じのインターフェースが表示されていますよね？ そうなのです、このツイートをWeb版Twitter公式クライアントで開いて再生ボタン押下して展開するとなんと、 このために作った拙作の朱猪わらいの動画（？）がはじまります。 （かなり適当なES2015をpolifyllもいれず生で書いたので
最近、カレー専門の機械学習エンジンを運用している関係で、Webからコーパスを作成している。具体的にはグルメサイトなどから有益な情報をコピペして貯めこんでいるのだが、手作業で広告などを除去するのが面倒で、そういえばXPathというのがあったっけ、と思いだしてみた。 配列を入れ子にして、ひとつのドキュメントから複数の箇所を抜き出せるようにしてあるのが工夫ポイントかな。 <?php $s = ""; $url = "http://www.goo.ne.jp/"; $patterns = [ 'www.goo.ne.jp' => [ '//title', 'id("news-chu-new")' ], ]; foreach( $patterns as $domain => $xpaths ){ if( strstr($url,$domain) ){ @$content = file_get_con
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
普段からビジネスにおいてよくつかわれるメール。 今となってはほんとあたりまえになりました。 わたしがこの仕事をはじめた98年前後はメールでおくってもらえますか？っていうとめんどくさいな・・・電話じゃだめなの？なんて嫌がられたものです。 さてさて、メールを受信する際に意識されているかどうかわかりませんが2通りの形式があるのをご存知でしょうか？ １つは文章だけで構成されるテキスト形式メール もう一つは画像の挿入や文字加工で見た目を整えたHTML形式メール(HTMLメールと呼びます） です。 HTMLメールというのは皆さんもよく受信される画像や文字が装飾されたメールでAmazonや楽天などのメールマガジンなどでよく使われます。。 今回はこのHTMLメールはセキュリティ上やめるべきという内容のお話です。 「テキストメール」と「HTMLメール」の特徴 テキストメールの特徴 テキストメールというのは単
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
