【ガルーン活用】HTMLポートレットとJavaScriptで作る画像リサイズアプリ

ガルーン活用
スポンサーリンク

企業でグループウェアを運用していると、時々極端にサイズの大きい画像ファイルをメッセージなどに添付したりアップロードしてしまうユーザーがいます。
数個のファイルであればそれほど支障はありませんが、多くのユーザーに同様の行為をされてしまうと、途端にサーバーのストレージは枯渇します。

オンプレ環境であればサーバーのストレージリソースは有限ですし、SaaSなどのクラウド環境であればストレージの拡張やデータ領域の追加をすることになり利用費用が増加してしまいます。
最近のデジカメやスマホ、タブレット端末で撮影した画像の画素数は増加する一方であり、ITに詳しくないユーザーに対して、画像ファイルのリサイズ処理を如何に定着させるのかは、システム管理者として悩みの種です。

そこで今回の記事では、ガルーンの「HTMLポートレット」機能を利用し、画像ファイルをリサイズする簡易アプリをJavaScriptで作成してみます。

尚、当記事ではJavaScriptを使ったサンプルコードを紹介していますが、プログラミングの知識は一切不要です。
当記事で紹介するコードをそのままコピペしていただければ動作します。
是非お試しください。
 
 

前提条件や概要説明

今回紹介する画像ファイルリサイズ用の簡易アプリは、オンプレ版ガルーンの「HTMLコーポレット」で動作させることを前提としておりますが、JavaScriptのコード自体はガルーンには依存しない汎用的な作りです。
その為、ガルーンを利用していない環境でも流用可能です。

また、当記事で紹介するJavaScriptのコードでは、アップロードされた画像ファイルの縦横比を変えずに元のサイズから半分に縮小するだけです。
画像ファイル自体の圧縮はしません。

尚、古いiOSに搭載されているSafariでは、変換後の画像ファイルを直接端末に保存させてはくれず、ブラウザ内の別タブで表示します。
このように、ブラウザやそのバージョンによっては挙動が異なる場合があります。
 

HTMLポートレットの作成とコードサンプル

ガルーンの管理画面にログインし、新しく「HTMLポートレット」を作成します。

ガルーンのHTMLポートレットの作成

HTMLポートレットの新規作成画面を表示させます。

HTMLポートレットの新規作成画面

「ポートレット名」は任意の名前を指定します。
「ポートレットの内容」では、「テキスト」を選択したうえ、その下のテキストボックスに以下のコードを丸っと貼り付けてください。
その後「追加する」で登録します。

  <!DOCTYPE html>
  <html>
  <head>
    <title>画像リサイズ</title>
    <script>
      // アップロードされた画像をリサイズしてダウンロードする関数
      function resizeAndDownload() {
        // アップロードされたファイルを取得
        var input = document.getElementById("upload");
        var file = input.files[0];

        // FileReaderを使用して画像を読み込む
        var reader = new FileReader();
        reader.onload = function(e) {
          var img = new Image();
          img.onload = function() {
            // 画像をリサイズする
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            var maxWidth = img.width / 2; // リサイズ後の最大幅を元の画像の2分の1に設定
            var maxHeight = img.height / 2; // リサイズ後の最大高さを元の画像の2分の1に設定
            var width = img.width;
            var height = img.height;

            // 元の縦横比を保持しながらリサイズする
            var ratio = Math.min(maxWidth / width, maxHeight / height);
            canvas.width = width * ratio;
            canvas.height = height * ratio;
            ctx.drawImage(img, 0, 0, width, height, 0, 0, canvas.width, canvas.height);

            // ダウンロード用のリンクを作成してクリックする
            var downloadLink = document.createElement("a");
            var originalFileName = file.name;
            var resizedFileName = "resized_" + originalFileName;
            downloadLink.href = canvas.toDataURL("image/jpeg");
            downloadLink.download = resizedFileName;
            downloadLink.click();
          };
          img.src = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    </script>
  </head>
  <body>
    <h3>画像リサイズアプリ</h3>
      <p>使い方の説明などをこちらに記載してください。</p>
    <form>
      <p><input type="file" id="upload" accept="image/*"></p>
      <p><button type="button" onclick="resizeAndDownload()">ダウンロード</button></p>
    </form>
  </body>
  </html>

このHTMLポートレットを読み込むと、以下のフォームが表示されます。

画像ファイルの読み込みとダウンロードが動作することと、ダウンロードしたファイルのサイズが小さくなっていることを確認してください。

作成したHTMLポートレットの読み込み

後は、ガルーンのポータル内の配置してあげれば実装は完了です。
 

最後に

今回の記事では、ガルーンのHTMLポートレット機能を利用して、ガルーンのトップページ内に画像リサイズ用の簡易アプリを作成する方法を紹介しました。

尚、今回のサンプルコードでは実装していませんが、このコードに対してCSSを埋め込むこともできるため、必要によってCSSで装飾するのも良いかと思います。

今回も当記事をお読みいただきましてありがとうございました。
それでは皆さまごきげんよう!

タイトルとURLをコピーしました