拡張機能グロースハックライブラリについて – Kaizen Platform(サイト改善) ヘルプセンター

概要

デザイン案では、「window」オブジェクトを利用することができませんが、「グロースハックライブラリ」を利用することで、それに代わるオブジェクトを利用可能になります。

ここでは、「グロースハックライブラリ」の利用申請方法、設定方法について記載します。

目次
【グロースハッカー向け】グロースハックライブラリの利用申請方法
　申請手順
　グロースハックライブラリの利用例など
　Chrome拡張版 UIエディターで利用したい時
 【カスタマー向け】グロースハックライブラリの設定方法

【グロースハッカー向け】グロースハックライブラリの利用申請方法

グロースハックライブラリは、初めは利用できる状態になっておらず、グロースハッカーの皆様から申請があって初めて、CS担当者によって設定が行われます。

申請手順

1. エクスペリエンスの掲示板を確認する

エクスペリエンスの掲示板タブを確認し、他のグロースハッカーによって既に申請が行われていないかを確認しましょう。

他のグロースハッカーの申請コメントに、担当CSからの設定完了コメントがついていれば、そのエクスペリエンスではグロースハックライブラリの利用が可能になっています。
その場合、新たに申請を行っていただく必要はありません。

2. 申請を行う

まだ誰も申請を行っていない場合、「トピック作成」をクリックして、グロースハックライブラリの利用申請をお願いいたします。

※コメントは一例です。

グロースハックライブラリが利用可能になったら、担当CSより掲示板にメッセージを追加させていただきますので、今しばらくお待ちください。
(注意：プロフィール > 通知設定画面で「コメント投稿の通知」の「メール」にチェックが入っていない場合、メッセージ追加のメール通知をお送りすることができません。)

1営業日が経過しても返答がない場合、お手数ですがサポートまでお問い合わせください。

グロースハックライブラリの利用例など

グロースハックライブラリ「kzWindow」は、windowオブジェクトの表示制御ライブラリです。
スクロール時にUI要素の表示状態を制御する、といった実装が可能になります。

デフォルト状態のUIエディターでは $(window).xxx の関数をご利用いただけませんが、グロースハックライブラリを利用することで、jQuery同様にwindowオブジェクトの制御メソッドが利用できるようになります。
スマートフォンのスクロール処理時にスクロール位置を判別し、メニューやアクションボタンUIを表示させる、などのUIインタラクション実装に利用ください。

ライブラリメソッド名

kzWindow.height()
kzWindow.width()
kzWindow.innerHeight()
kzWindow.innerWidth()
kzWindow.outerHeight()
kzWindow.outerWidth()
kzWindow.scrollLeft()
kzWindow.scrollTop()
kzWindow.on()
kzWindow.off()
kzWindow.scroll()

使用例

console.log(kzWindow.height())  //= 1790

kzWindow.on('scroll', function(e){
  console.log($(e.target).scrollTop())  //= 120 (現在の　window スクロール位置)
})

API リファレンス

jQuery の同名メソッドと機能は同様ですので、jQuery API リファレンスを参照ください。
※ 2019/02/13 時点でこれらメソッド群は、jQuery version 1.10.2 と同等です。

Chrome拡張版 UIエディターで利用したい時

Chrome拡張版UIエディターでデザイン案を作成する場合、かつ、エクスペリエンスが実行されない状況下でデザイン作成する場合、グロースハックライブラリをそのまま利用することができません。
お手数ですが、下記の手順でご利用ください。

1. グロースハックライブラリのコードをコンソールに貼り付ける

コードは後述のカスタマー向け設置方法に記述しています。

2. Chrome拡張版 UIエディターにて通常通りグロースハックライブラリを利用した記述を行う

コンソールに貼り付けたグロースハックライブラリを参照可能になります。

【カスタマー向け】グロースハックライブラリの設定方法

カスタマーの方がご自身でデザイン案作成時にライブラリを利用する場合は、「エクスペリエンス設定画面 > 詳細設定画面」の「エクスペリエンススクリプト」入力欄へ、以下のライブラリ読み込みコードを入力し、反映することで「グロースハックライブラリ」が利用可能となります。

エクスペリエンス設定 > 詳細設定画面

設置するグロースハックライブラリ読み込みコード

window.kzLoadTool = function(name, cb, ver) {
  var base = "https://cdn.kaizenplatform.net/ui-library/";
  var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
  if (!ver) ver = 'latest';
  o.src = base + name + '/' + ver + '/' + name + '.js';
  if (cb) {
    o.addEventListener('load', function (e) {
         cb(kzs.tools[name][ver]);
      }, false);
  }
  s.parentNode.insertBefore(o, s);
};
window.kzWindow = {};
var methods = ["height", "innerHeight", "innerWidth", "outerHeight", "outerWidth", "scrollLeft", "scrollTop", "width", "on", "off", "scroll"];
var win = kzs.$(window);
kzs.$(methods).each(function(i,k){
    kzWindow[k] = function (){
        return win[k].apply(win, arguments);
    };
});

なお、利用可能なメソッドや利用例については、上述のグロースハックライブラリの利用例などをご確認ください。

概要