ブックマークレットとは

ブラウザーのブックマーク機能を活用して、ブラウザー上でJavaScriptプログラムを動作させるためのプログラムです。

ブラウザー上で利用するkintoneにおいてもブックマークレットが活用できることに気づいて、その活用の可能性を検証してみました。

その中から、広く活用できそうなものをいくつか紹介します。

利用方法と参考情報：

参考：ブックマークレットの登録方法 - Qiita
登録用となっているソースコードを全文コピーし、ブックマークのURL欄に張り付けて使用ください。
よく使用するブックマークレットは、ブックマークバーに表示しておくと便利です。

既存のkintoneブックマークレット記事

kintoneでブックマークレットを活用するメリット

通常のJavaScriptカスタマイズやプラグインは、利用するアプリ固有の機能追加に向いています。

利用者自身のブラウザーで動くブックマークレットは、アプリ固有ではなく、もっと汎用的に活用できる機能をサポートするのに向いていると思います。

ブックマークレットの処理内で、kintoneのJavaScript APIやREST APIを使うものは、kintoneスタンダードコースでのみ動作します。

APIを使わない画面上のカスタマイズであれば、通常カスタマイズを行うことができない、kintoneライトコースでも使うことができます。

ちょっとデメリット

アプリカスタマイズであれば管理者が作成して利用者に使ってもらうことができますが、ブックマークレットは個別の利用者が自身のブラウザーに設定する必要があります。利用者のスキルやリテラシーによっては、ここがネックになるかもしれません。

効率的でメンテナンスが容易なブックマークレット配布方法をご存知の方は、ぜひノウハウを共有お願いします。

動作確認環境

PC：　Chrome(Mac/Win), Firefox(Win), Safari(Mac), Edge(Win)
スマートフォン：　Chrome(iOS), Safari(iOS)

注意書き

画面レイアウトを変更しているプログラムはkintoneのDOM要素を使用しています。将来のアップデート等で正常に作動しなくなる可能性があります。
悪意のあるプログラムが仕込まれたブックマークレットをkintone画面で動作させた場合、kintone内のデータを操作したり、外部に送信したりすることが技術上可能になります。ブックマークレットやカスタマイズを使用する時は処理内容を確認して信頼できるものを適用するようにしましょう。
JavaScriptやCSSについてはまだまだ勉強中なので、もっといい書き方や間違いなどがあれば、コメントいただけると嬉しいです！

①アプリ一覧

【kintoneスタンダードコース】

利用するアプリの数が増えてくると、kintoneの中でアプリを探し出すのが結構たいへんになりませんか？

このブックマークレットは、そのユーザーにアクセス権のあるアプリが一発で一覧表示され、そこからアプリ画面へ直接リンクで移動できるというものです。

スマートフォンのブラウザー上のモバイルビューでも使えますので、現状（2019年1月）アプリを探す機能がないモバイルシーンにおいては非常に重宝しています。

利用するアプリが最大数十個程度のユーザー向けです。
表示順はアプリ設定の更新日時の新しいもの順となります。

機能・利用方法

PC版

モバイル版

ブックマークレット（登録用）

アプリ一覧

javascript:(function(){if(location.href.indexOf('cybozu.com/k')==-1){window.alert("kintoneの画面から操作してください");return}const domain=location.origin+'/k/';kintone.api(kintone.api.url('/k/v1/apps',true),'GET',{},function(resp){var apps=resp.apps;apps.sort(function(a,b){var dt1=a.modifiedAt;var dt2=b.modifiedAt;if(dt1<dt2){return 1}if(dt1>dt2){return-1}return 0});var result='<body style="font-family: sans-serif;"><h3>アプリ一覧</h3><p>◇：アプリ設定画面</p>';if(apps.length==100){result+='<p>※検索結果が100件以上あります</p>'}else if(apps.length==0){window.alert("検索結果がゼロ件でした");return}else{result+='<p>（検索結果：'+apps.length+'件）</p>'}result+='<ul>';apps.forEach(function(app){result+='<li>'+app.appId+': <a href="'+domain+app.appId+'/">'+app.name+'</a></li>'});result+='</ul><p><a href="."> << 前の画面に戻る<a></p></br></body>';document.open();document.write(result)},function(error){console.log(error)})})();

コードの内容

アプリ一覧

javascript:(function () { 
    // kintoneの画面でのみ動作させる 
    if (location.href.indexOf('cybozu.com/k') == -1) { 
        window.alert("kintoneの画面から操作してください"); 
        return; 
    } 
    const domain = location.origin + '/k/'; 
    // アプリ情報一括取得処理 
    kintone.api(kintone.api.url('/k/v1/apps', true), 'GET', {}, function (resp) { 
        var apps = resp.apps; 
        apps.sort(function(a, b) { 
            var dt1 = a.modifiedAt; 
            var dt2 = b.modifiedAt; 
            if (dt1 < dt2) {return 1;} 
            if (dt1 > dt2) {return -1;} 
        return 0; 
        }); 
        var result = '<body style="font-family: sans-serif;"><h3>アプリ一覧</h3><p>◇：アプリ設定画面</p>'; 
        if (apps.length == 100) { 
            result += '<p>※検索結果が100件以上あります</p>'; 
        } else if (apps.length == 0) { 
            window.alert("検索結果がゼロ件でした"); 
            return; 
        } else { 
            result += '<p>（検索結果：' + apps.length + '件）</p>'; 
        } 
        result += '<ul>'; 
        apps.forEach(function (app) { 
            result += '<li>' + app.appId + ': <a href="' + domain + app.appId + '/">' + app.name + '</a></li>' 
        }); 
        result += '</ul><p><a href="."> << 前の画面に戻る<a></p></br></body>'; 
        document.open(); 
        document.write(result); 
    }, function (error) { 
        console.log(error); 
    }) 
})();

②アプリ検索

【kintoneスタンダードコース】

アプリ一覧ブックマークレットに検索機能を追加しました。

キーワードを１つ設定して、アプリ名で検索し、一覧表示します。

利用するアプリの数が非常に多いユーザーや、kintoneの管理者の方向きの機能で、大量のアプリの中からキーワードで絞り込んで目的のアプリを見つけることができます。

また、管理者向けに、各アプリの設定画面への直リンク（□）も表示するようにしています。

表示順はアプリ設定の更新日時の新しいもの順となります。

キーワードを入れずにOKを押すと、アクセス権のあるアプリが全件表示されます（最大100件）。

機能・利用方法

PC版

モバイル版

ブックマークレット（登録用）

アプリ検索

javascript:(function(){if(location.href.indexOf('cybozu.com/k')==-1){window.alert("kintoneの画面から操作してください");return}var keyword=window.prompt("検索キーワード：");kintone.api(kintone.api.url('/k/v1/apps',true),'GET',{"name":keyword},function(resp){var apps=resp.apps;var result='<body style="font-family: sans-serif;"><h3>検索結果</h3><p>□：アプリ設定画面</p>';if(apps.length==100){result+='<p>※検索結果が100件以上あります</p>'}else if(apps.length==0){window.alert("検索結果がゼロ件でした");return}else{result+='<p>（キーワード：'+keyword+', 検索結果：'+apps.length+'件）</p>'}result+='<ul>';apps.sort(function(a,b){var dt1=a.modifiedAt;var dt2=b.modifiedAt;if(dt1<dt2){return 1}if(dt1>dt2){return-1}return 0});const domain=location.origin+'/k/';apps.forEach(function(app){result+='<li>'+app.appId+': <a href="'+domain+app.appId+'/">'+app.name+'</a> <a href="'+location.origin+'/k/admin/app/flow?app='+app.appId+'">□</a></li>'});result+='</ul><p><a href="."> << 前の画面に戻る<a></p></br></body>';document.open();document.write(result)},function(error){console.log(error)})})();

コードの内容

アプリ検索

javascript: (function () { 
    // kintone画面でのみ作動させる 
    if (location.href.indexOf('cybozu.com/k') == -1) { 
        window.alert("kintoneの画面から操作してください"); 
        return; 
    } 
    // 検索キーワード取得 
    var keyword = window.prompt("検索キーワード："); 
 
    // kintoneアプリ情報一括取得処理 
    kintone.api(kintone.api.url('/k/v1/apps', true), 'GET', { 
        "name": keyword 
    }, function (resp) { 
        var apps = resp.apps; 
        var result = '<body style="font-family: sans-serif;"><h3>検索結果</h3><p>□：アプリ設定画面</p>'; 
        // API取得件数：100件 
        if (apps.length == 100) { 
            result += '<p>※検索結果が100件以上あります</p>'; 
        } else if (apps.length == 0) { 
            window.alert("検索結果がゼロ件でした"); 
            return; 
        } else { 
            result += '<p>（キーワード：' + keyword + ', 検索結果：' + apps.length + '件）</p>'; 
        } 
        result += '<ul>'; 
 
        // アプリ一覧を更新日時降順に並び替え 
        apps.sort(function (a, b) { 
            var dt1 = a.modifiedAt; 
            var dt2 = b.modifiedAt; 
            if (dt1 < dt2) { return 1; } 
            if (dt1 > dt2) { return -1; } 
            return 0; 
        }); 
 
        // アプリ一覧作成 
        const domain = location.origin + '/k/'; 
        apps.forEach(function (app) { 
            result += '<li>' + app.appId + ': <a href="' + domain + app.appId + '/">' + app.name + '</a> <a href="' + 
                location.origin + '/k/admin/app/flow?app=' + app.appId + '">□</a></li>'; 
        }); 
        result += '</ul><p><a href="."> << 前の画面に戻る<a></p></br></body>'; 
        document.open(); 
        document.write(result); 
    }, function (error) { 
        console.log(error); 
    }) 
}) ();

③印刷レイアウト変更

【kintoneライトコース／スタンダードコース】

kintone標準のレコード印刷画面、ちょっとイケてないです。そもそも印刷などしないためにクラウドを使うんだ！と言ってしまえばそれまでです。しかし実際の活用シーンにおいては、紙に印刷したり、またはレコードの内容をPDFに出力するニーズもまだまだあるのが現実です。

このブックマークレットはkintoneの印刷用画面のレイアウトや装飾を変更します。APIは利用していないため、通常のカスタマイズや連携サービスを使うことができない、kintoneライトコースでも利用できます。

機能・利用方法

ブックマークレット（登録用）

印刷レイアウト変更

javascript: (function () { if (location.href.indexOf('cybozu.com/k') == -1) { window.alert("kintoneの画面から操作してください"); return } var size = window.prompt("文字のサイズ(pt)：", "14"); var newSS; const f = 1.1; const styles = `@media print {.body-record-print .subtable-label-gaia,.body-record-print .show-subtable-gaia th:first-child {-webkit-print-color-adjust: exact;}} #record-gaia,div.control-value-gaia {font-size: ${size}px;} .body-record-print .showlayout-gaia .row-gaia .control-value-gaia,.body-record-print .control-group-gaia {border-style: none; background-color: #f5f5f5;} .control-label-text-gaia{border-left: 4px solid #777;font-size: ${size*f}px;font-weight:bold;padding-left: 5px;} .control-label-gaia {color:#777;} .body-record-print .subtable-label-gaia,.body-record-print .show-subtable-gaia th:first-child {border-width: 1px;background-color: #e0e0e0 !important;font-size: ${size}px;text-align: center;}`; newSS = document.createElement('link'); newSS.rel = 'stylesheet'; newSS.href = 'data:text/css,' + escape(styles); document.getElementsByTagName("head")[0].appendChild(newSS) })();

コードの内容

印刷レイアウト変更

javascript: (function () { 
    if (location.href.indexOf('cybozu.com/k') == -1) { 
        window.alert("kintoneの画面から操作してください"); 
        return 
    } 
    var size = window.prompt("文字のサイズ(pt)：", "14"); 
    var newSS,  
    const f=1.1; 
    const styles = `@media print { 
        .body-record-print .subtable-label-gaia,.body-record-print .show-subtable-gaia th:first-child { 
            -webkit-print-color-adjust: exact; 
        } 
    }  
    #record-gaia,div.control-value-gaia { 
        font-size: ${size}px; 
    }  
    .body-record-print .showlayout-gaia .row-gaia .control-value-gaia,.body-record-print .control-group-gaia { 
        border-style: none;  
        background-color: #f5f5f5; 
    }  
    .control-label-text-gaia { 
        border-left: 4px solid #777; 
        font-size: ${size * f}px; 
        font-weight:bold; 
        padding-left: 5px; 
    }  
    .control-label-gaia { 
        color:#777; 
    }  
    .body-record-print .subtable-label-gaia,.body-record-print .show-subtable-gaia th:first-child { 
        border-width: 1px; 
        background-color: #e0e0e0 !important; 
        font-size: ${size}px; 
        text-align: center; 
    }`; 
    newSS = document.createElement('link'); 
    newSS.rel = 'stylesheet'; 
    newSS.href = 'data:text/css,' + escape(styles); 
    document.getElementsByTagName("head")[0].appendChild(newSS) 
})();

④印刷幅調整

【kintoneライトコース／スタンダードコース】

kintoneのレコードを印刷するときに悲しいのが、アプリフォームのレイアウトによっては、印刷時に右端が切れてしまうこと。

全体を縮小するといいんですが、そうすると今度は文字が小さくなってしまう。

このブックマークレットは、印刷レイアウト画面の幅を強制的に調整します。③のレイアウト変更と一緒に使ってもいいし、標準の印刷用画面でも単独で利用できます。

標準の印刷用画面でも使えますし、上記の印刷レイアウト変更ブックマークレットと合わせて用いてもOKです。
kintoneライトコースでも利用できます

機能・利用方法

ブックマークレットを起動し、レイアウト幅をピクセルで設定します。
Chromeの場合は、1034px ぐらいでちょうどおさまります（私の環境での数値なので微調整してください）
そのままOKを押すと1034px, 手動で入力する場合は数値を入力します。

ブックマークレット（登録用）

印刷幅調整

javascript:(function () { var w1 = document.getElementsByClassName("layout-gaia")[0].style.width; var w2 = window.prompt("幅を指定してください（現状："+w1+"px => ）", 1034); document.getElementsByClassName("layout-gaia")[0].style.width=w2+"px"; })();

コードの内容

印刷幅調整

javascript: (function () { 
  var w1 = document.getElementsByClassName("layout-gaia")[0].style.width; 
  var w2 = window.prompt("幅を指定してください（現状：" + w1 + "px => ）", 1034); 
  document.getElementsByClassName("layout-gaia")[0].style.width = w2 + "px"; 
})();

⑤レコード内容をコピー

【kintoneライトコース／スタンダードコース】

kintoneのレコードを印刷ではなく、文字で取り出して使いたい場合がたまにあります。

このブックマークレットは、レコード詳細画面で、表示されているレコードデータをまるっとクリップボードにコピーします。その後はメール等の本文に貼り付けて加工したり、メモ帳などに貼り付けたり、いろいろできます。

現状、PCビューでのみ作動します。kintoneライトコースでも利用できます

ブックマークレット（登録用）

レコード内容をコピー

javascript:(function(){if(location.href.indexOf('cybozu.com/k')==-1){window.alert("kintoneの画面から操作してください");return}var e=document.getElementsByClassName("layout-gaia")[0].innerText;copyTextToClipboard(e);alert("クリップボードにコピーしました！");function copyTextToClipboard(a){var b=document.createElement("textarea");b.textContent=a;var c=document.getElementsByTagName("body")[0];c.appendChild(b);b.select();var d=document.execCommand('copy');c.removeChild(b);return d}})();

コードの内容

クリップボードコピー関数は以下のサイトを参考にしました。
JavaScript でテキストをクリップボードへコピーする方法

レコード内容をコピー

javascript: (function () { 
    if (location.href.indexOf('cybozu.com/k') == -1) { 
        window.alert("kintoneの画面から操作してください"); 
        return 
    } 
    var contents = document.getElementsByClassName("layout-gaia")[0].innerText; 
 
    copyTextToClipboard(contents); 
    alert("クリップボードにコピーしました！"); 
 
    function copyTextToClipboard(textVal) { 
        var copyFrom = document.createElement("textarea"); 
        copyFrom.textContent = textVal; 
        var bodyElm = document.getElementsByTagName("body")[0]; 
        bodyElm.appendChild(copyFrom); 
        copyFrom.select(); 
        var retVal = document.execCommand('copy'); 
        bodyElm.removeChild(copyFrom); 
        return retVal; 
    } 
})();

このブログを検索

IT音痴オーバーフォーティーおやじのストック記事倉庫

kintoneをもっと便利にしてくれるブックマークレットの活用

ブックマークレットとは

kintoneでブックマークレットを活用するメリット

ちょっとデメリット

動作確認環境

注意書き

①アプリ一覧

機能・利用方法

PC版

モバイル版

ブックマークレット（登録用）

コードの内容

②アプリ検索

機能・利用方法

PC版

モバイル版

ブックマークレット（登録用）

コードの内容

③印刷レイアウト変更

機能・利用方法

ブックマークレット（登録用）

コードの内容

④印刷幅調整

機能・利用方法

ブックマークレット（登録用）

コードの内容

⑤レコード内容をコピー

ブックマークレット（登録用）

コードの内容

コメント

コメントを投稿

このブログの人気の投稿

投稿時間:2021-06-17 05:05:34 RSSフィード2021-06-17 05:00 分まとめ(1274件)

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

投稿時間:2024-02-12 22:08:06 RSSフィード2024-02-12 22:00分まとめ(7件)