Helpfeel Skeleton

Helpfeel Skeleton


iOS, Android 共通
Helpfeel Skeletonの位置づけ
SDKやライブラリではありません
公開しているサンプルコードを参考にして、適宜必要な箇所をコピー・アンド・ペーストして利用します
以下の観点で、アプリにHelpfeelが組み込まれた様子を体験できます
画面遷移の仕方や速度感

Helpfeel Skeltonの開発には、外部ライブラリやSDKは使用していません
git clone してIDEで読み込むだけですぐに試せます

画面の構成
以下の3画面から成ります
Home
アプリのホーム画面を想定しています
Guide
Helpfeelを表示する画面
Chat support
既存のチャットサポート画面を想定しています

Helpfeel Skeleton for iOS
iOSにおけるWebView実装のポイント
「戻る」ボタンを適切な位置に設置しましょう
このSkeltonでは、検索画面から個別記事に遷移するときに、WebViewを2つ重ねて使い、スライドするアニメーションを利用することによってiOSらしいネイティブ感を増す工夫がされています
これを利用する場合は、cookieやsessionStorageが共有されるように気をつけましょう

セットアップガイド
XCodeで読み込むだけで動きます

各画面
アプリのホーム画面を想定
「Menu」を押すとTableView (Drawerを想定している) が開く

UITableViewController にGuide, Chat supportへの導線を置く

「Guide」をタップすると HelpfeelViewController の画面が開く
self.present(navVC, animated: true, completion: nil)

既存のチャットサポート画面を想定

メインコード概説
XCode の Master, Detail App テンプレートを使用

HelpfeelSkeleton2/MasterViewController.swift
Drawerを想定している画面
swift
class MasterViewController: UITableViewController {
// ...
override func viewDidLoad() {
super.viewDidLoad()
// ...
prependNewMenuItem(label: "Chat support")
prependNewMenuItem(label: "Guide")
// ...
}

// TableView内のitemがクリックされたとき
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath as IndexPath)
let label = cell?.textLabel?.text
// MenuItemごとにViewControllerを指定
switch label {
case "Guide":
// ...
popupNextVC(title: "Your app guide", vc: vc)
break
case "Chat support": {
// ...
}
}
}

HelpfeelSkeleton2/HelpfeelViewController.swift
Helpfeelを表示するWKWebViewの画面
swift
class HelpfeelViewController: UIViewController, UIGestureRecognizerDelegate, WKNavigationDelegate, WKUIDelegate {
// Initialize webView and add to subview
func initWkWebView () {
// Share session between WebViews
let webViewConfiguration = WKWebViewConfiguration()
let processPool = HelpfeelViewController.processPool
webViewConfiguration.processPool = processPool

// Set webView size
// ...
self.webView.uiDelegate = self
self.webView.navigationDelegate = self
self.view.addSubview(self.webView)
}

// Executed before fire HTTP request
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: (WKNavigationActionPolicy) -> Void) {
let url = navigationAction.request.url!.absoluteString
// ...
if (self.isHelpfeelRootUrl(url: url)) {
// Return to the root of the transition history (※1)
self.navigationController!.popToRootViewController(animated: true)
return
}
let vc = storyboard!.instantiateViewController(withIdentifier: "helpfeelVC3")
setupNextVC(url: url, button: 101, vc: vc) // buttonPrevious
// 右から左へ画面がスライドインして表示される (※2)
self.navigationController!.pushViewController(vc, animated: true)
}
}
※1: ルート画面に遷移する
WkWebView内でクリックされたリンクのURLを見てroot ViewControllerに戻すか判定している

※2: WkWebViewの画面遷移を複数のViewControllerを用いて実現する
HelpfeelViewControllerを再帰的に使用している


Helpfeel Skeleton for Android
Androidにおける実装のポイント
Android OSの戻るボタンで、WebViewのページの遷移も戻れるように実装しましょう
localStorageの利用はデフォルトで無効になっています。Helpfeelの動作に必要なので、必ず有効にしましょう
音声入力も利用したい場合はandroid.webkit.WebView内で音声入力

セットアップガイド
AndroidStudioで読み込むだけで動きます

各画面
アプリのホーム画面を想定

NavigationDrawerにGuide, Chat supportへの導線を置く
「Guide」をタップするとHelpfeelActivity Intentが起動
Toolbar
NavigationIcon (←): Intentを終了
Chat menu item
ChatSupportActivity Intentを起動して、HelpfeelActivity Intentを終了
Helpfeelでは問題が解決しなかった場合の導線を想定
既存のチャットサポート画面を想定
ChatSupportActivity Intent


メインコード概説
Android Studio の Navigation Drawer Activity テンプレートを使用
app/src/main/java/com/notainc/helpfeel_skeleton/MainActivity.kt
kt
class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {
// ...
override fun onNavigationItemSelected(item: MenuItem): Boolean {
when (item.itemId) {
R.id.nav_helpfeel_chrome -> {
// Chrome Custom Tab版
this.startChromeCustomTabsIntent()
}
R.id.nav_helpfeel -> {
// WebView版
val intent = Intent(this, HelpfeelActivity::class.java)
startActivity(intent)
}
}
}
}
Chrome Custom Tabs
Activityを実装しなくて良い
その代わり、表示しているウェブページのタイトルやURLを非表示にできない、など、自由度が小さい
自由度が高い

app/src/main/java/com/notainc/helpfeel_skeleton/HelpfeelActivity.kt
Guide画面 (WebView)
kt
class HelpfeelActivity : AppCompatActivity() {
// ...
override fun onRequestPermissionsResult(...) {
// 権限リクエスト承認後の処理
}

fun setWebView() {
// ...
webview.webViewClient = object: WebViewClient() {
// WebView内でのクリックイベントをジャックする設定などを書ける
}

webview.webChromeClient = object: WebChromeClient() {
override fun onPermissionRequest(request: PermissionRequest) {
// WebViewから音声入力を扱うための権限をリクエスト
// ...
requestPermissions(activit, ...)
}
}
webview.settings.javaScriptEnabled = true
webview.settings.javaScriptCanOpenWindowsAutomatically = true
webview.loadUrl(this.helpfeelUrl)
}
}