◆ base64 で埋め込む
◆ 文字数制限なら複数記事に分散させて fetch して結合する
◆ あくまでできるってだけでやらないほうが安全 

ライブドアブログは前に全員プレミアム化したことで ブログ文章や画像は無制限です
一応 10GB がベースで徐々に増えていく表示もありますが無制限に使えるようになってるらしいです

ですが 好きなファイルをアップロードしておける領域は 500MB までという制限付きです


例えば zip ファイルをダウンロードさせたり 画像のように音楽や動画を埋め込んだり ということをしようとすればすぐに達してしまう目に見えた制限です


どうにかしてこの制限以上にアップロードしたい! というときの方法です

最近では DataURI スキームなどクライアントサイドにも色々機能があります
単純にダウンロードするなら
<a download="filename.zip" href="data:application/zip;base64,(略)"></a>

という風にブログ記事内に書いてしまうこともできます
(略) とかいてるところに zip の中身が base64 エンコードされたテキストで入るので ここには長いテキストが入ります

たった 120kb の zip でも base64 だと 4/3 倍で 160kb つまり 160 * 1024 = 163840 文字です

すごい量に思えますが 実際にこの文字数を保存してみると保存できました

HTML はただでさえテキスト量が増えますからね
例えば 10x10 の表をこういうスペースインデントつきで書いたとします
<table>
    <tbody>
        <tr>
            <td>
                0-0
            </td>
            <td>
                0-1
            </td>
            <td>
                0-2
            </td>
            ...
            <td>
                0-9
            </td>
        </tr>
        <tr>
            <td>
                1-0
            </td>
            <td>
                1-1
            </td>
            <td>
                1-2
            </td>
            ...
            <td>
                1-9
            </td>
        </tr>
        ...
        <tr>
            <td>
                9-0
            </td>
            <td>
                9-1
            </td>
            <td>
                9-2
            </td>
            ...
            <td>
                9-9
            </td>
        </tr>
    </tbody>
</table>
長いので途中略してますが これをちゃんと書いたら 6000 字弱です
九九の表を 1 つ作るだけでこれなので 数十万文字くらい問題ないようにしないと HTML 構造を多用して長文書く人は困りますよね


また 最近は インラインの svg も増えてきています
svg は画像を 「この座標からこの座標までこの色で線を引きます」 みたいな命令を XML で記述したものなので これまた大量の文字数です
まあ これは DataURI スキームとは違いますが画像を文字にして埋め込んでるのは一緒なので文字数は仕方ないです


ちょっと話がそれましたが こんな感じで本文に中に埋め込んでしまうことができます

直接ダウンロードするのじゃなくて JavaScript で扱いたいデータの場合でも JavaScript の文字列として base64 でデータを埋め込んで atob 関数でバイナリデータにして処理することができます


また もしその記事内に文字数の都合で入り切らなくても 複数の記事に分けて保存し JavaScript で結合すればサイズの大きいデータも扱うことが可能です
データ用の記事にはこのように script タグで base64 のテキストだけ書きます

データ記事1
<script type="text/base64" id="data">xxxxxxxxxx</script>

データ記事2
<script type="text/base64" id="data">xxxxxxxxxx</script>

使う側の記事
<script>
!async function(){
    var p1 = fetch("/data-article1").then(e => e.text())
    var p2 = fetch("/data-article2").then(e => e.text())
    var ress = await Promise.all([p1, p2])
    var base64 = ress.map(e => new DOMParser().parseFromString(e, "text/html").getElementById("data").innerHTML.trim()).join("")
    return base64
}()
</script>

とすれば結合された base64 を取得できます
あとは DataURI スキームにするなり バイナリデータとして扱うなり好きにできます

さいごに

この記事はあくまで技術的に可能です と言ってるだけです

記事に必要なデータを許容されるテキスト量でインラインに持つことは自然といえるかと思いますが ブログとして中身のないデータだけの別の記事を大量に作るのは本当にやるとさすがに怒られるかと思います

外部のアップローダなどを使うと JavaScript からではクロスオリジン制限で扱えないという不便な仕様なのが悪いのですが ライブドアを使ってる以上任意のデータは 500MB まででそれを超えるなら別サービスに移るのがいいでしょう


ところでライブドアって画像が別ドメインなので 画像のピクセルデータ使って canvas 操作できないんですよねー