勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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文字と約半分ほど圧縮できたので十分使っていけそう。

 - PHP JavaScript

  関連記事

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法

アカウントを作成するようなページで偶にパスワードの強度を判定してメーターで表示さ ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法

横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...

JavaScriptにてカラーコードのピッカーを実装できる「jscolor」の利用方法

フォームのテキストボックスにカラーコードのピッカーを実装したかった。HTMLのみ ...