canvas を画面サイズに合わせる方法
キャンバス要素を画面全体に表示します。 結論 sample-fit-canvas-screen-size.html <!DOCTYPE html> <html> <head> <meta name="viewport...
HTMLを簡易に解析（tokenize / parse）する
目次 はじめに DOMParser を使用する HTMLから文字列を抽出する 正規表現を使用して、簡易にタグとタグ以外を分解する 正規表現を使用して、もう少し考えて分解する HTMLのドキュメントツリーを簡易に作成する はじめに JavaScript で HTML を簡易に解析（...
robots.txt でクローラを全拒否する
巡回を全拒否する robots.txt User-agent: * Disallow: / 説明 User-agent: * すべてのクローラを対象にする。 Disallow: / ルート配下の全ディレクトリを対象にする。 備考：失敗例 robots.txt User-agent...
Bloggerのコメント欄で使用できるHTMLタグ
使用可能なタグ a, em, strong, i, b, br, ※ <a> は、 <a rel="nofollow"> になる rel 属性を付けた場合、消されて onfollow になる ※ <br> は、「 <...
HTML5の全要素
html, head, title, base, link, meta, style, body, article, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address, p, hr, pre...
HTMLで高さ指定あり画像をアスベクト比維持自動縮小する
やりたいこと 「 <img> で height 属性を指定するが、領域の横幅が width 属性の指定を下回る場合、横幅の縮小に合わせてアスベクト比を維持したまま縦幅も縮小する」です。遅延読み込みやリフロー（レイアウト）の再実行防止などで画像の幅高さを事前に指定する必...
HTMLパース処理を中断して強制初回描画する
サイトの高速化について試行錯誤していたら、面白そうな現象を発見したので覚書です。 なにをするのか？ ページがヘッダー部・コンテンツ部・フッター部に分割されているものとします。この時、「ヘッダー部のみをコンテンツ部・フッター部のHTMLパース処理を待たずに表示する」です。意図せずに...
CORS制限付き外部iframeのfocusイベントを取得する
やりたいこと メインページ上の外部iframeをクリックした時に、メインページで特別な処理をしたい。 具体的には、Bloggerの埋め込みコメントフォームをクリックした時に処理を実施したい。Bloggerの埋め込みコメントフォームは、 www.blogger.co...
Bloggerのコメント欄を標準jsなしで返信可能にする
はじめに Bloggerのコメント欄改善です。標準jsを読み込めば、返信（リプライ）できるようにできます。ですが、できるだけスクリプトを使用したくないため、自作して最小限のスクリプトで済ますようにします。 仕様 コメントをJavaScript無効で表示する...
Bloggerのskinタグを消す
覚書として記載します。 コード <style><!--/*<b:skin><![CDATA[*/]]></b:skin> 出力 <style><!--/...
IE対策の「X-UA-Compatible:IE=edge」は必要か？
HTML ヘッダーの見直しをしている際に、理解した内容の覚書です。 次のような記載について考慮している方が対象です。 <meta http-equiv="X-UA-Compatible" content="IE=11"> or ...
Webページでユーザデータを保存する方法
URL URLに指定してデータを保存する。 URLの最大長問題があるため、最大で2,048文字（IEのURL最大文字数）までに抑えたほうが良さそう。 短縮URLと組み合わせると、URLの見栄えも良くなる。 例 GitHub - nwtgck/nipp: 🎒 ...
JavaScriptなしでGoogleAnalyticsデータを収集する
はじめに JavaScript無効環境では、analytics.jsやgtag.jsでデータ収集することはできません。そのため、別の方法でデータ収集する必要があります。 ここでは、 Measurement Protocol を利用して、データを収集します。 Measurement...
古いブラウザに自動で polyfill を適用する
古いブラウザへのes6対応です。 古いブラウザにも一応対応したい。ただし、煩わしいことはしたくない。最新ブラウザでpolyfillによるコード量増加などの悪影響を防ぎたい。とかの場合に使うといいかも…。 ただし、HTML5やCSS3、JavaScriptの最新構文を使用できるわけ...
Bloggerの空テンプレートを作成する
Bloggerの自作テンプレート作成に向けての第一歩です。 空テンプレート Bloggerテンプレートの最小構成です。 空テンプレートの基準は以下の通りです。詳しくは参考の資料を参照してください。 <b:skin> を含む <b:section> を含む ...
画像のないimgタグのSEO対策
画像のない <img> のSEO対策です。 問題 画像のない <img> を配置して、alt属性がないと警告を受ける。画像には、alt属性を付けましょう…。 だが、alt属性をを付けるとalt属性の文字列が表示されてしまう。alt属性の文字列が画面上に表示...
FontAwesome を SVG で使用する【JavaScript なし】
はじめに 「FontAwesome を JavaScript なしで使用する方法」または、「FontAwesome の一部のアイコンを使用する方法」です。 JavaScript 無効環境で FontAwesome を使用したページを閲覧すると文字化けしたような表示になるのを目にし...
HTMLにテキストファイルを埋め込んでダウンロードする
やること ブログなどのファイルが置けないない環境で、小規模なテキストファイルを外部ホスティングせずに、ダウンロード可能にする。 HTMLファイル内にファイルを埋め込む リンクのクリックでダウンロードする 追記 data: で画像ファイルの埋め込みなどと同じように埋め込めるようです...
table要素をCSV形式でダウンロードする機能を実現する
table要素をCSV形式でダウンロードする機能を実現するために作成しました。 大抵のテーブルにそのまま使用できるといいな…。 仕様・制約 指定のtableをCSVで取得する UTF-8BOMありで出力する Excel対策のため カンマ(,)、ダブルクォーテーション("...
GoogleChartAPIでテーブルをグラフで表示する
GoogleChartAPIのサンプルです。 下記記事のGoogleChartsとの比較用にテーブルをグラフ化します。 GoogleChartsでテーブルをグラフで表示する 完成品 番号 データ１ データ2 データ3 1 1025 7840 1917 2 452 2553 211...