フォローする

Growth Hack Library

※ 本ライブラリーはKaizen Platformのエディター内でのみ利用可能です。

 
グロースハックライブラリとは

グロースハックライブラリを利用すると、フォーム入力内容の変換機能や、スクロール位置判定による表示制御などのインタラクション処理をデザイン案に簡易的に実装することができます。
本グロースハックライブラリは、グロースハッカーの皆さまの改善活動をより良くできるよう順次拡張していきます。

更新履歴

  • Ver1.1(2017/02/20)   kzWindowメソッドを公開しました
  • Ver1.0(2017/01/30)  入力フォーム改善用メソッド(半角→全角への変換、よみがな自動入力)を公開しました

ご利用いただくための準備(グロースハッカーの方へ)

UIエディターでグロースハックライブラリを使うためにはオファー担当ディレクターが予め、エクスペリエンス設定画面へ所定のコードを設定し、ライブラリを読込みできるように設定しておく必要があります。
以下手順でエクスペリエンスのディレクション担当者宛にご連絡の上、ライブラリの利用申請をしてください。

<ステップ1>
デザイン案制作に利用したいグロースハックライブラリを決定します。


<ステップ2>
デザイン案を投稿するエクスペリエンスの「掲示板画面」より、利用したいグロースハックライブラリ名を投稿ください。

掲示板画面
board.png

<ステップ3>
オファー担当ディレクターがエクスペリエンス設定画面へライブラリコードの設置を完了した後、さきほどの「掲示板画面」へ利用開始いただける旨、返信します。担当ディレクター返信時には通知メールが送信されます。
(注意:プロフィール > 通知設定画面で「コメント投稿の通知」の「メール」にチェックが入っている必要があります)

返信コメント例
reply_board.png

<ステップ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()

使用例

kzLoadTool("kzForm", function(kzForm) {
kzForm.hanZen.add("input#to-zenkaku");
});

デモページ

只今、準備中です。

 「KzForm - 入力フォームの制御ライブラリ」

KzFormライブラリを利用することで、フォーム入力時に以下の自動変換 / 入力処理を実現できます。

  • 半角入力→全角入力変換
  • 漢字入力→読み仮名(ひらがな)自動入力
  • 漢字入力→読み仮名(カタカナ)自動入力

KzFormライブラリ利用設定

ライブラリを利用するには、以下の関数宣言文が必要です。

kzLoadTool("kzForm", function(kzForm) {
      〜ここに、使用するライブラリメソッドを記述する〜
},"1.0");
 

hanZen - 「半角入力→全角入力変換メソッド」

このライブラリは「半角入力」されたテキストを「全角文字」へ自動変換します。
例えば、入力形式に全角入力のみ受け付けしている住所入力テキストフォームへ設置することで、ユーザーが半角入力した番地(数字)を全角数字に自動変換することができます。

ライブラリメソッド名
kzForm.hanZen

構文

kzForm.hanZen.add("セレクター");

プロパティ

セレクター 半角入力→全角入力変換する対象フォーム要素のセレクターを入力してください。
複数のフォームを設定したい場合は、カンマ区切り(,)で指定できます。

使用例

kzLoadTool("kzForm", function(kzForm) {
kzForm.hanZen.add("input#to-zenkaku1, input#to-zenkaku2");
},"1.0"); 

デモページ

上記フォーム入力メソッドについて、実際にフォーム入力時のインタラクションがご確認いただけるデモページを用意しています。以下ご確認ください。

デモページ

autoKana - 漢字入力 → 読み仮名(ひらがな or カタカナ)自動入力メソッド

氏名の入力テキストフィールドに漢字入力欄、読み仮名(ひらがな or カタカナ)入力欄がある場合に、このライブラリを利用することで、ユーザーが氏名を「漢字入力」したときに、「読み仮名(ひらがな or カタカナ)入力テキストフィールド」へ読み仮名の自動入力を行います。

ライブラリメソッド名

kzForm.autoKana

構文

「ひらがな」の場合
kzForm.autoKana.add("漢字入力フォームのセレクター", "自動入力対象の読み仮名フォームのセレクター");
「カタカナ」の場合
kzForm.autoKana.add("漢字入力フォームのセレクター", "自動入力対象の読み仮名フォームのセレクター", {katakana:true });

プロパティ

漢字入力フォームのセレクター はじめの引数で受け渡されるセレクターが「漢字入力」のフォームとなります。
自動入力対象の読み仮名フォームのセレクター 2番目の引数で受け渡されるセレクターが漢字入力時の自動入力対象となる「読み仮名」フォームになります。
{katakana:true } オプション katakana:true を設定することで、「カタカナ」が自動入力されます。katakana:false または オプション指定がない場合には「ひらがな」が自動入力されます。

使用例

kzLoadTool("kzForm", function(kzForm) {
kzForm.autoKana.add("input#input-kanji1", "input#auto-hiragana");
kzForm.autoKana.add("input#input-kanji2", "input#auto-katakana", {katakana:true });
},"1.0");

デモページ

上記フォーム入力メソッドについて、実際にフォーム入力時のインタラクションがご確認いただけるデモページを用意しています。以下ご確認ください。

デモページ

 

グロースハックライブラリの利用設定方法(カスタマーの方へ)

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

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


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

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);
};
});
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。