More than 5 years have passed since last update.

完璧にポータブルなWebページを作る方法 - Webサーバーもなしで実現

Last updated at 2019-02-17Posted at 2018-11-04

きっかけ

以下の記事で、RubyとかJavaScript(ES2017)をURLに埋め込んでポータビリティを実現する方法を紹介しました。
極小WebアプリをURLに埋め込んで超ポータブルなWebアプリを作りたい！ - Qiita

そもそも、ポータビリティを完全に追求するならData URLがあります！今回はData URLでポータブルなWebページな実現とNipp¹との違いを書きました。

Data URLの構造

data:[<mediatype>][;base64],<data>

MDNから引用しています。こちらにもっと詳しくまとまっています：データ URL | MDN

画像をData URLにするのはよく見かけます。画像以外に、<mediatype>をtext/htmlにすればHTMLが記述できるようになります。つまり、HTML内にCSSを書いたりJavaScriptを書いたりできるので、Webサーバもいらずに完璧にポータブルなWebページが作れます！

具体例

例があったほうが分かりやすいと思うので、具体例を少しあげます。

簡単な時計

簡易的に時計ページです

(クリックで開かないので、コピペして開きます)
data:text/html,%3Chtml%3E%0A%3Chead%3E%0A%3Ctitle%3EClock%3C/title%3E%0A%3C/head%3E%0A%3Cbody%3E%0A%3Cdiv%20id='clock'%3E%3C/div%3E%0A%3Cscript%3E%0AsetInterval(function()%7B%0A%20%20document.getElementById('clock').innerText%20=%20new%20Date();%0A%7D,%20500);%0A%3C/script%3E%0A%3C/body%3E%0A%3C/html%3E

中のコード

<html>
<head>
<title>Clock</title>
</head>
<body>
<div id='clock'></div>
<script>
setInterval(function(){
  document.getElementById('clock').innerText = new Date();
}, 500);
</script>
</body>
</html>

VueのTodoリスト

サマー・ウォーズのワールドクロック

SHIMIZUさんのブログから元になっています: https://shimz.me/blog/d3-js/4360
見た目がとてもいいので使わせもらいました。ありがとうございます！

Nippと同じところ

URLにコードを埋め込んでいる

違うところ

Nippがやりたかったのはクライアントだけで完結するRuby環境なので、一番の違いと目的はこの点だと思います。
それ以外の点として、

Data URL: Webサーバ不要
Nipp: 静的にファイルをホストするためにWebサーバーが必要
- 補足：プログレッシブウェブアプリ(PWA)のキャッシュが効いたときに、Webサーバも経由しなくなる
Data URL: コードの圧縮はしない²
Nipp: コードを圧縮する（deflate or LZMA）

個人的な使わけとしては、NippはRubyを使いたいときにして、UIを完全に置き換える例で紹介した場合のものは、Data URLを使いたいかなと思ってます。

おまけ: Data URLのエディタ

まず最初は、Data URL用のエディタはNippで簡単に作成しました。

Nipp: https://nipp.cf/#Data_URL_Editor/es2017/S0hJLEm0KkmtKNHPKMnN0VGpTs1Lzk9JDQ3ydM7PLcjPS80r0SjW1CtKLchJTE7V0FfXT9dRUFc1MlfXrE0AAA==

それで、このNippを使って、Nippを使わずにData URLだけで、使えるエディタを作成します。これで、完璧にData URLのエディタ自体もData URL上で動きます! Data URLがリアルタイム生成されて、リアルタイムにプレビューできます。

このシンプルなエディタのコードは他のライブラリへの依存がないので、ポータブルです。

コード

<html>
  <head>
    <title>Data URI Editor</title>
    <style>
      textarea {
        width: 100%;
        height: 10em;
      }

      iframe {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <textarea id='editor' placeholder="Input HTML"></textarea>
    <textarea id='data_uri'></textarea>
    <iframe id="preview"></iframe>
    <script>
      var editor  = document.getElementById('editor');
      var dataUri = document.getElementById('data_uri');
      var preview = document.getElementById('preview');
      function update(){
        preview.src = dataUri.value = "data:text/html," + encodeURIComponent(editor.value).replace(/'/g, '%27');
      }
      editor.onkeyup = update;
      update();
    </script>
  </body>
</html>

（変更：iframeでプレビューできるようにしました）

上の記事で紹介されていたアプリケーションの名前 ↩
おそらく現在のところはないと思いますが、;base64部分に他の文字列を指定するような拡張は簡単にできそうな仕様なので、今後できるようになる可能性はあるかもしれません。 ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up