サスケ Works｜URL フィールドを画像に置き換える方法

> Blog > 技術 > サスケ Works｜URL フィールドを画像に置き換える方法

小原達也/ 2023年 11月 22日/ 技術サスケWorks

こんにちは！小原です。

先日サスケWorksで、画像のURL → 画像そのものに置き換えたいというケースがありました。
本記事ではその手順をご紹介いたします。

プログラミングコードは登場するものの、コピペだけで作成できますのでアプリ作成初心者の方も安心して読み進めていただけると思います。

サスケWorksの概要やNorthTorchでの活用方法などは以下の記事でお伝えしておりますので、あわせてご覧になってみてください。
>> 社内の書籍管理ツールとしてサスケWorksを使い始めました

※ 本記事の内容はプレミアムプランにご加入の方のみ作成可能です。ご注意ください。

完成イメージ

先に完成イメージを確認します。

設定前はURLが文字列として表示されています。

before

今回のカスタマイズにより、URLが画像に置き換わります。

after

カスタマイズ方法

今回のカスタマイズの流れは以下の通りです。

URLフィールドを追加
コードを貼り付け
動作確認

順番に解説していきます。

1.URLフィールドを追加

まずは、URLを入力するためのフィールドを用意します。

右上の歯車マークをクリックしてください。

続いてサイドバーより「レコード項目の設定」を選択します。

続いて右上の「開発者編集モードに切り替え」をクリックしてください。

実際にURLフィールドをアプリに追加していきましょう。

汎用項目パーツからアプリ項目に「URL」をドラッグ & ドロップします。
最後に右上の「変更を保存する」ボタンをクリックします。

レコード登録画面上でURLフィールドが追加されていればOKです。

2.コードを貼り付け

続いて、URLから画像に置き換える動作を加えます。

まずは先ほどと同様、アプリの右上の歯車マークをクリック。

今回はサイドバーから「カスタムコード」を選択します。

右上の「新規登録」ボタンをクリックして、設定画面に進みましょう。

続いて入力する設定は、以下を参考にしてみてください。

状態: 公開
名称: URLから画像を表示させる（分かりやすいものでOKです）
適用画面: レコード一覧画面
コード種別: JavaScript

JavaScript とはプログラミング言語の一種です。
この後にコピペしていただくコードは JavaScript で書かれているためこれを選択します。

入力が終わったら「保存」ボタンをクリックして設定を終了します。

次に以下の画面に遷移するので、「ソースコードの入力」をクリックして先に進みましょう。

黒い画面が表示されたら、すでに書かれているコードを削除してください。
まずは、以下の状態になっていれば大丈夫です。

そのうえで以下のコードをコピーして、先ほどの黒い画面に貼り付けてみてください。

/*!
 * SaaskeSDK
 * Copyright (c) North Torch Co.,ltd. 2023
 * Released under the MIT License.
 * ライセンスの全文は以下をご参照ください
 * LICENSE: https://github.com/northtorch/saaske-sdk/blob/main/LICENSE.md
 * README: https://github.com/northtorch/saaske-sdk/blob/main/readme.md
*/

function convertUrlsToImages(imgSize = 50) {
    function replaceUrlsWithImgTags() {
        // URL レコードの a タグを全取得
        const aTags = document.getElementsByClassName("type_url");

        for (let i = 0; i < aTags.length; i++) {
            // a タグ全体を取得し、URL部分のみを抽出
            const aTag = aTags[i].querySelector('a');
            const imgSrc = aTag.getAttribute('href');

            // img タグを作成して、画像をセット
            const imgTag = document.createElement('img');
            imgTag.setAttribute("src", imgSrc);
            imgTag.setAttribute("width", imgSize);

            // a タグを img タグに置き換え
            aTag.parentNode.replaceChild(imgTag, aTag);
        }
    }
    window.addEventListener('load', replaceUrlsWithImgTags);

    // ページネーションで移動したときにも反映させる
    // ajaxComplete でページの変遷後の状態を検出
    $(document).ajaxComplete(function () {
        replaceUrlsWithImgTags();
    });
}

convertUrlsToImages();

「一時保存ボタン」をクリックして、変更を反映させましょう。

プログラミングコードの編集はこれで終わりです。

3.動作確認

最後に設定がうまくいったかを確認します。

まずは「レコード登録」タブをクリックして、先ほど追加したURLに画像へのアドレスを入力します。

よろしければ動作確認用として弊社のロゴURLをご利用ください。
https://www.northtorch.co.jp/wp-content/uploads/2018/06/logo.png

続いて「レコード一覧」タブをクリックして、一覧画面に遷移してみてください。

検索バーの右端にある歯車マークをクリックすると、下方向にメニューが開きます。
「表示項目」として先ほど追加したURLフィールドを選択して、「追加」ボタンをクリックしましょう。

しばらくするとURLフィールドに画像が表示されます。

補足

画像の大きさを調整する方法

先ほどコピペしていただいたコードの最後にdisplayImage();というものがありました。

画像の大きさを変えたい場合はdisplayImage(100);のように、カッコ内に数字を設定してください。

つまり、100に書き換えた場合のコードは以下のようになります。

/*!
 * SaaskeSDK
 * Copyright (c) North Torch Co.,ltd. 2023
 * Released under the MIT License.
 * ライセンスの全文は以下をご参照ください
 * LICENSE: https://github.com/northtorch/saaske-sdk/blob/main/LICENSE.md
 * README: https://github.com/northtorch/saaske-sdk/blob/main/readme.md
*/

function convertUrlsToImages(imgSize = 50) {
    function replaceUrlsWithImgTags() {
        // URL レコードの a タグを全取得
        const aTags = document.getElementsByClassName("type_url");

        for (let i = 0; i < aTags.length; i++) {
            // a タグ全体を取得し、URL部分のみを抽出
            const aTag = aTags[i].querySelector('a');
            const imgSrc = aTag.getAttribute('href');

            // img タグを作成して、画像をセット
            const imgTag = document.createElement('img');
            imgTag.setAttribute("src", imgSrc);
            imgTag.setAttribute("width", imgSize);

            // a タグを img タグに置き換え
            aTag.parentNode.replaceChild(imgTag, aTag);
        }
    }
    window.addEventListener('load', replaceUrlsWithImgTags);

    // ページネーションで移動したときにも反映させる
    // ajaxComplete でページの変遷後の状態を検出
    $(document).ajaxComplete(function () {
        replaceUrlsWithImgTags();
    });
}

convertUrlsToImages(100);

この数値の初期値は50になっていますので、これを大きくすれば画像は大きく、小さくすれば画像は小さくなります。

ソースコードの簡単な解説

前述の通り、今回のソースコードはJavaScriptで書かれています。

処理を簡単に説明すると、以下の通りです。

一覧画面のURL行の要素をすべて取得
URL行の要素のうち、純粋な文字としてのURLを取得
URLを画像に置き換える（aタグをimgタグに置き換える）

URLは1行とは限らず複数行になることがあるため、for 文で繰り返し処理を行っています。
そのため、データが複数あったとしてもすべてのURLが画像に置き換わるようになっています。

厳密にはもう少し細かいことを行っていますが、大きな流れは上記の通りになります。

ソースコード公開中

本記事で紹介したコードは、GitHubからもご覧いただけます。

https://github.com/northtorch/saaske-sdk/blob/main/convertUrlsToImages.js

サスケWorks関連記事はこちら

本ブログでは、サスケWorksのカスタマイズ系記事も順次アップ予定です。

NorthTorch - サスケWorks 関連記事

ぜひ、別記事の方もご覧ください。

サスケ Works｜URL フィールドを 画像に置き換える方法