text.sakura.ne.jp【公式】雑記ブログ

個人サイト『text.sakura.ne.jp』のメモ用ブログです。気になったことや試したことを記録しています。

HTMLとCSSで作るスロットマシーン

HTML

■ はじめに

🔵、💖、🟫などの記号がスロットマシーンのように上から下へと流れるHTMLとCSSです。

■ 表示例

  • 🔵
    💖
    🟫
    ⭐
    🔵
    💖
    🟫
    ⭐
    🔵
    💖
  • 💖
    🟫
    ⭐
    🔵
    💖
    🟫
    ⭐
    🔵
    💖
    🟫
  • 🟫
    ⭐
    🔵
    💖
    🟫
    ⭐
    🔵
    💖
    🟫
    ⭐

■ ソースコード(HTML)

<div class="slot"><ul>
<li>🔵<br>💖<br>🟫<br>⭐<br>🔵<br>💖<br>🟫<br>⭐<br>🔵<br>💖</li>
<li>💖<br>🟫<br>⭐<br>🔵<br>💖<br>🟫<br>⭐<br>🔵<br>💖<br>🟫</li>
<li>🟫<br>⭐<br>🔵<br>💖<br>🟫<br>⭐<br>🔵<br>💖<br>🟫<br>⭐</li>
</ul></div>

■ ソースコード(CSS)

.slot {box-sizing:content-box;display:flex;width:calc(5px * 2 + 20px * 3 + 10px * 2 + 7px);height:calc(20px * 1.5 * 3 + 7px);margin:0;padding:0;border:solid 10px #ecddab;border-radius:5px;overflow:hidden;}
.slot ul{display:flex;margin:5px;padding:0;animation:slot 0.4s linear infinite;}
.slot li{list-style:none;width:20px;margin:0 10px 0 0;padding:0;font-size:20px;font-family:"Helvetica Neue","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Arial,sans-serif;line-height:1.5;}
.slot li:last-child{margin:0;}
@keyframes slot{0%{transform:translateY(-200%);}to{transform:translateY(0%);}}

■ 回転が停止している時の表示例

  • 🔵
    💖
    🟫
    ⭐
    🔵
    💖
    🟫
    ⭐
    🔵
    💖
  • 💖
    🟫
    ⭐
    🔵
    💖
    🟫
    ⭐
    🔵
    💖
    🟫
  • 🟫
    ⭐
    🔵
    💖
    🟫
    ⭐
    🔵
    💖
    🟫
    ⭐

都道府県や市区町村のサイトを検索する方法

Google

■ はじめに

Google検索で、都道府県や市区町村のサイトの記事を検索する方法をまとめました。

■ 検索の例

https://www.google.com/search?q=intitle:(都|道|府|県|市|区|町|村) inurl:("pref"|"city"|"town"|"vill"|"tokyo.lg.jp"|"tokyo.jp"|"mlit") site:jp | site:com

■ 検索ワードの例

intitle:(都|道|府|県|市|区|町|村) inurl:("pref"|"city"|"town"|"vill"|"tokyo.lg.jp"|"tokyo.jp"|"mlit") site:jp | site:com

■ 解説

・ intitle:(都|道|府|県|市|区|町|村)
→ タイトルにいずれかの文字が含まれる
・ inurl:("pref"|"city"|"town"|"vill"|"tokyo.lg.jp"|"tokyo.jp"|"mlit")
→ URLアドレスにいずれかの文字が含まれる
→ pref[県]、city[市]、town[町]、vill[村]、tokyo.lg.jp[東京都]、tokyo.jp[東京都]、mlit[国土交通省]
・ site:jp | site:com
→ ドメインは｢.jp｣または｢.com｣

base64エンコードしたサイト(data:)、アーカイブ保存できるか？

実験

はじめに

ファイルをbase64エンコードして作った“サイト”に、短縮URLのアドレスを付与したら、普通のサイト同様にWEBアーカイブサイトに登録することができるのか。
実際にファイルを用意して実験してみました。

《 base64エンコードとは 》
画像やHTMLファイル、CSSファイルなどを『data:image/png;base64,～(画像の場合)』といった形に変換すること。変換したものはHTMLファイルの中で使用することも可能。
例：<link rel="stylesheet" href="data:text/css;charset=utf-8;base64,～">
例：<img src="data:image/png;base64,～">

《 短縮URLとは 》
長いURLのサイトに短いURLでもアクセスできるようにする転送サイトのこと。
転送後の例：https://goo.gl/maps/7EhJt1BdaGAbyjtE6
転送前の例：https://www.google.com/maps/@35.6846293,139.9921047,2a,75y,335.49h,90t/(以下省略)

実験の流れ

① テスト用サイトをパソコン内に作る
② テスト用サイトをbase64エンコードする
③ 短縮URLに登録する
④ 生成された短縮URLをWEBアーカイブサイトに登録する
⑤ base64エンコードされたサイトが表示されるか調べる

実験の材料

・ 公開用ファイル

data:text/plain;charset=UTF-8;base64,44OG44K544OI55So44OV44Kh44Kk44Or

・ base64エンコードツール

・ 短縮URL

https://tinyurl.com/3mawzk8b

・ WEBアーカイブサイト

実験の結果

① Internet Archive - Wayback Machine
https://web.archive.org/
【✕ 失敗】エラー表示

② ウェブ魚拓
https://megalodon.jp/
【✕ 失敗】エラー表示

③ Webpage archive
https://archive.today/
【✕ 失敗】エラー表示

おわりに

WEBサイトのスクリーンショット画像を生成するサービスも試してみましたが、上記と同様にエラー表示が出て画像を作ることもできませんでした。

base64エンコードしたサイト(data:)、短縮URLに登録できるか？

実験

はじめに

ファイルをbase64エンコードして作った“サイト”を、短縮URLに登録できるか。
実際にファイルを用意して実験してみました。

《 base64エンコードとは 》
画像やHTMLファイル、CSSファイルなどを『data:image/png;base64,～(画像の場合)』といった形に変換すること。変換したものはHTMLファイルの中で使用することも可能。
例：<link rel="stylesheet" href="data:text/css;charset=utf-8;base64,～">
例：<img src="data:image/png;base64,～">

《 短縮URLとは 》
長いURLのサイトに短いURLでもアクセスできるようにする転送サイトのこと。
転送後の例：https://goo.gl/maps/7EhJt1BdaGAbyjtE6
転送前の例：https://www.google.com/maps/@35.6846293,139.9921047,2a,75y,335.49h,90t/(以下省略)

実験の流れ

① テスト用サイトをパソコン内に作る
② テスト用サイトをbase64エンコードする
③ 短縮URLに登録する

実験の材料

・ 公開用ファイル

data:text/plain;charset=UTF-8;base64,44OG44K544OI55So44OV44Kh44Kk44Or

※ base64エンコード済み

・ base64エンコードツール

・ 短縮URL

実験の結果

① TinyURL.com
https://tinyurl.com/
【〇 成功】https://tinyurl.com/3mawzk8b

② Bitly
https://bitly.com/
【✕ 失敗】エラー表示

③ URL Shortener
https://www.shorturl.at/
【✕ 失敗】エラー表示

④ Tiny URL
https://tiny.cc/
【✕ 失敗】エラー表示

⑤ Shorte.st
https://shorte.st/
【✕ 失敗】エラー表示

⑥ v.gd
https://v.gd/
【✕ 失敗】エラー表示

⑦ is.gd
https://is.gd/
【✕ 失敗】エラー表示

※ Googleのクッションページを経由する方法も試しましたが、“無効なURL”というエラーが出ました。
https://www.google.com/url?rct=j&uact=8&url=data:text/plain;charset=UTF-8;base64,44OG44K544OI55So44OV44Kh44Kk44Or

おわりに

現時点で、base64エンコードしたページを登録できる有名な短縮URLはTinyURL.comだけのようです。