JavaScript / PHPにて「lz-string」を用いてデータの圧縮・展開する方法

文字数が多いGETパラメータを送信したいというケースがあった。また、送信側はJavaScriptで圧縮し、受信側はPHPで展開したい。以前に「pako」ライブラリで似たようなことをしたがあまり圧縮されなかったため他の方法を探したところ「lz-string」ライブラリが良さそう。以下に実装方法をメモ。

lz-string

Github(JavaScript用)

https://github.com/pieroxy/lz-string

Github(PHP用)

https://github.com/nullpunkt/lz-string-php

導入方法

JavaScript

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/npm/lz-string@1.5.0/libs/lz-string.min.js"></script>

PHP

composerで導入する場合はサーバにSSH接続し以下コマンドでインストールする。

composer require nullpunkt/lz-string-php

手動で導入する場合はGithubよりダウンロードし展開した上で「/src/LZCompressor」ディレクトリを丸ごとアップロードすること。今回SSHが使えない環境のためこちらの方法を取った。

ソースコード

JavaScript

<script src="https://cdn.jsdelivr.net/npm/lz-string@1.5.0/libs/lz-string.min.js"></script>
<script>
const text = `Webエンジニア / プログラマが勉強したことのメモ。`;

//通常のURLエンコード&圧縮
const url_encode = encodeURI(text);
console.log(url_encode); //Web%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%20/%20%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%81%8C%E5%8B%89%E5%BC%B7%E3%81%97%E3%81%9F%E3%81%93%E3%81%A8%E3%81%AE%E3%83%A1%E3%83%A2%E3%80%82
console.log(url_encode.length); //199

//lz-stringを用いたURLエンコード&圧縮
const lzstring_encode = LZString.compressToEncodedURIComponent(text);
console.log(lzstring_encode); //OoUwRoFQyM8MgdDI0wyCKGABAeiYdYZC3DIBoZCXDIPYZAZBkEmlQdn1B1BkH0GQZQZALBkDsGQQ4ZAjhkCAGIA
console.log(lzstring_encode.length); //87
</script>

尚、今回はPHP側で展開するがJavaScriptでURLデコード&展開したい場合は以下のようになる。

console.log(LZString.decompressFromEncodedURIComponent(lzstring_encode)); //Webエンジニア / プログラマが勉強したことのメモ。

PHP

<?php
foreach( glob( "./LZCompressor/*.php") as $filename ){
    require $filename;
}

use \LZCompressor\LZString;

$encode_text = 'OoUwRoFQyM8MgdDI0wyCKGABAeiYdYZC3DIBoZCXDIPYZAZBkEmlQdn1B1BkH0GQZQZALBkDsGQQ4ZAjhkCAGIA';
$decode_text = LZString::decompressFromEncodedURIComponent($encode_text);
var_dump($decode_text); //string(69) "Webエンジニア / プログラマが勉強したことのメモ。"

所感

199→87文字と約半分ほど圧縮できたので十分使っていけそう。