htmlソースメモ

投稿

Twilogのバックアップを使ってツイッターの投稿を丸ごと自分のサイトに表示する

5/17/2024 06:56:00 午前

　Twilogのバックアップファイル"767i_bot-230930.xml.gz"を解凍して得られた"767i_bot-230930.xml"の構造は次の通り。 <?xml version="1.0" encoding="UTF-8"?> <tweets> <tweet> <id>1655731020979933184</id> <time>230509 092652</time> <text>～</text> </tweet> <tweet> <id>1410361141390241797</id> <time>210701 071434</time> <text>～</text> </tweet> ～ </tweets> 　「time」の形式が気に入らなければテキストエディタで置換する。（例：検索文字列「<time>(\d{2})(\d{2})(\d{2})\ (\d{2})(\d{2})(\d{2})」、置換文字列「<time>20$1/$2/$3\ $4:$5:$6」）　このファイルを自分のサイトにアップロードして、ブラウザで開いた時に投稿の一覧表を表示する。　その前に、上のコードに次のように使うxslファイル"767i_bot.xsl"を指定する。 <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="767i_bot.xsl"?> <tweets> ～ </tweets> その"767i_bot.xsl"のコードは次の通り。（一部修正あり） <xsl:stylesheet vers...

見ているwebページの文章をマストドンでシェアするためのブックマークレット

5/06/2024 09:42:00 午前

　私には必要ないのだけど、ブラウザで見ているページの一部を引用して、ページタイトルとURLを含めてマストドンにシェアするためのブックマークレットがあれば良いと思う。でも、Twitterの時と異なり、個人が運営しているサーバーに対する負荷も気になる。だから、これまでは作ろうと思ってなかったのだけど、とりあえず、コードだけは残しておこうと思う。　Twitterで同じようなことをする際にはシェア用のURLの後ろにシェアする文字列が連なっているURLにアクセスしていて、その為のブックマークレットは簡単に作れた。マストドンでも同じような方法でブックマークレットを作れるらしい。　私が使っている"mastodon-japan.net"の場合は"https://mastodon-japan.net/share?text=～"の"～"に投稿したい文字列が入力されるようなブックマークレットを作れば良い。"fedibird.com"の場合は"https://fedibird.com/share?text=～"の"～"に投稿したい文字列が入力されるようなブックマークレットを作れば良い。　それぞれのコードは次のとおりである。 mastodon-japan.netの場合 javascript:(function(){if(document.getSelection()!=''){window.open('https:// mastodon-japan.net /share?text='+encodeURIComponent('"'+document.getSelection()+'"\n'+document.title+'\n')+encodeURIComponent(document.location.href));}else{window.open('https:// mastodon-japan.net /share?text='+encodeURIComponent(document.title+'\n')+enco...

リロードでスクロールがリセットされるかテスト

11/02/2023 08:46:00 午前

リロードでスクロールがリセットされるかテストするためのコード。・History: scrollRestoration プロパティ - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/History/scrollRestoration <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>リロードでスクロールがリセットされるかテスト</title> <script> if (history.scrollRestoration) { // history.scrollRestoration = 'manual'; //Firefoxはmanualにしないとリセットされない。 // history.scrollRestoration = 'auto'; //Edgeはautoにしてもdiv内はリセットされる。 } </script> </head> <body> <div style="width:300px; height:100px; overflow-y:scroll;"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> </div> <div style="margin-top:800px;"> bodyをスクロールさせる </div> </body> </html> 切り替えるためのブックマークレットのコード javascrip...

スクロールアンカリングを無効にするコードが機能するかどうかのテストコード

10/31/2023 02:42:00 午後

スクロールアンカリングを無効にするコードが機能するかどうかのテストコードスクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring あるノードがアンカーとして適切でないと思われる場合は、以下のように overflow-anchor を使用してそのノードを除外することができます。無効にする必要がある場合は仕様書では、新しいプロパティである overflow-anchor を追加し、スクロールアンカリングを文書全体、もしくは一部で無効にできるようにしています。基本的には、自動的に有効にされたスクロールアンカリングをオプトアウトする仕組みです。指定できる値は、 auto または none のどちらかです。 auto が初期値です。対応しているブラウザーでは、スクロールアンカリングの動作をします。そして、コンテンツの急な移動も少なくなります。 none は、文書全体、もしくは一部でスクロールアンカリングを明示的にオプトアウトするための値です。文書全体でスクロールアンカリングを無効にするには、 <body> 要素にこのプロパティを指定してください。メモ: 仕様書にも書かれていますが、スクロールアンカリングが無効にされた場合、その子孫要素から再び有効にすることはできません。例えば、スクロールアンカリングが文書全体で無効にされた際、文書内の一部に overflow-anchor: auto を指定しても、その部分でスクロールアンカリングは動作しません。 CSS Scroll Anchoring Module Level 1 https://drafts.csswg.org/css-scroll-anchoring/#exclusion-api Note: It is not possible to turn scroll anchoring "back on" for descendants of a overflow-anchor: none element. However, descendant s...

メールソフトみたいなコード

10/30/2023 06:15:00 午後

メールソフトみたいなコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>メールソフトみたいなコード</title> <style> #content-container { width:300px; height:500px; border:1px solid gray; padding:5px; } #content-top { height:30px; display:flex; } #content { height:470px; overflow-y:auto; } #content-body { line-height:20em; border:1px solid gray; padding:5px; } #content-bottom { height:20px; } #button-container { height:100px; width:300px; border:1px solid gray; padding:5px; overflow-x: hidden; overflow-y: scroll; } .button{ width:300px; border-bottom:1px solid gray; padding:5px; } </style> <s...

iframeを使わずにコンテンツを切り替える

10/28/2023 12:44:00 午後

　iframeの中に表示するコンテンツを切り替えるコードのようなiframeを使わないコード、要するにiframeを使わずにコンテンツを切り替えるJavaScript。 // HTML <div id="content"></div> <button onclick="changeContent('Hello, World!')">Click me</button> // JavaScript function changeContent(newContent) { document.getElementById('content').innerHTML = newContent; } サンプル test20231028-1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>コンテンツを切り替えてもスクロールが維持されてしまう問題</title> <style> #content { height:100px; width:300px; overflow-y:scroll; line-height:3em; } .button{ width:300px; border:1px solid gray; padding:5px; } </style> </head> <body> <div id="content"> <p>下のボタンでコンテンツ変更</p> </div> <div class="button" onclick="changeContent('一つ目のコンテンツ１行目<br>一つ目のコンテンツ２行目&lt...

onloadでiframeに追加したsandbox属性が無視される。

10/17/2023 05:40:00 午後

対処法：ChromiumベースのブラウザやIEでは iframe を含むページが先頭から表示されない場合がある。（iframe で開くページのURLに「#～」があると起こる）の続きのようなもの。そもそもの発端「 iframe を含むページが先頭から表示されない場合がある。（「#～」との関係）」そこ対処法でiframeにsandbox属性を追加することにしたが、iframeの中を切り替える必要が生じて、そのうちの一つがGoogleカレンダーで、Googleカレンダーを埋め込みたいが、sandbox属性が邪魔をする。 test3-1-0.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>バグ？</title> </head> <body> <div style="height:200px;"> バナー、ヘッダなど。 </div> <div style="height:250px;"> <h4>↓↓↓iframe↓↓↓</h4> <iframe src="test00-0.html#y500" name="test00" id="test00" title="test00" sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts"></iframe> </div> <div style="height:1000px;"> <a href="test3-1-0.html">このページへのリンク</a><br> iframe内切替<br> [<a href="test00-0.html#y500" t...