※ 本ライブラリーはKaizen Platformのエディター内でのみ利用可能です。
このページについて
グロースハッカーの皆様にご利用いただける、グロースハックライブラリーの申請方法について説明しております。
グロースハックライブラリとは
グロースハックライブラリを利用すると、スクロール位置判定による表示制御などのインタラクション処理をデザイン案に簡易的に実装することができます。
本グロースハックライブラリは、グロースハッカーの皆さまの改善活動をより良くできるよう順次拡張していきます。
更新履歴
- Ver1.1(2017/02/20) kzWindowメソッドを公開しました
ご利用いただくための準備(グロースハッカーの方へ)
UIエディターでグロースハックライブラリを使うためにはオファー担当ディレクターが予め、エクスペリエンス設定画面へ所定のコードを設定し、ライブラリを読込みできるように設定しておく必要があります。
以下手順でエクスペリエンスのディレクション担当者宛にご連絡の上、ライブラリの利用申請をしてください。
<ステップ1>
デザイン案制作に利用したいグロースハックライブラリを決定します。
<ステップ2>
デザイン案を投稿するエクスペリエンスの「掲示板画面」より、利用したいグロースハックライブラリ名を投稿ください。
掲示板画面
<ステップ3>
オファー担当ディレクターがエクスペリエンス設定画面へライブラリコードの設置を完了した後、さきほどの「掲示板画面」へ利用開始いただける旨、返信します。担当ディレクター返信時には通知メールが送信されます。
(注意:プロフィール > 通知設定画面で「コメント投稿の通知」の「メール」にチェックが入っている必要があります)
返信コメント例
<ステップ4>
グロースハックライブラリが利用できるようになり、デザイン案プレビュー画面にて動作確認いただけます。
「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 と同等です
0 コメント