Facebook Twitter Google Maps RSS
Home Androidアプリ 【第4回】JavaScriptで3D Touch を使う方法!
formats

【第4回】JavaScriptで3D Touch を使う方法!


みなさんこんにちは!
今回で第4回目となるライブラリの解説、なのですが。
今回は例外として個人的に気になった技術を紹介いたします!

さて、突然ですがみなさんはiPhone6s触ってみましたか?
私はiPhone5sから機種変更しました!なかでも意外と3D Touch機能を使っています。
キーボードを軽く押し込むだけでカーソルを移動できたりと、慣れると便利な機能です。

そこで私は個人アプリに利用したいと思い、JavaScriptで使用できるのか調べてみたところ、、、
ありました!!かなり早く対応するんですね〜。
では実際に試してみましょう!

タッチの強さを取得する

どれほど押し込まれているかの取得はタッチイベントのForceに0~1の値で格納されており、その値を取得できます。
この値を使って様々な処理に応用できますね。

Cordovaでの扱い方

さて、個人的にここからが本題なのですがもしかするとCordovaにもプラグインがあるのでは?!と思いみてみると、、、
やっぱりありました。
私がみるのが遅すぎたのかもしれません(笑)

そのプラグインがこちら(クリック)です!!

これを使うとホーム画面に設置されるアイコンにクイックアクションを設定できたりPeekやPopといったアクションも登録できるみたいですね。
少しソースコードとともに使い方を見てみようと思います。

まずはいつも通りプラグインをダウンロードします。

$ cordova plugin add cordova-plugin-3dtouch

これで下準備は完了です。
次に処理を書いていくのですが、すべてdeviceReadyイベントが発火された後に処理を記述します。

まずはじめに、3D Touchが有効な端末かどうかを判定します。

ThreeDeeTouch.isAvailable(function (avail) {
    // ‘avail’ is a boolean
    alert(“avail? “+ avail)
});

この関数のavailにtrue/falseの値が入っており、使用できるかどうかの判定で使います。

続いてクイックアクションの設定方法ですが、クイックアクション(当記事トップ画像のもの)のアイコンを、
・Apple提供のもの
・個人オリジナルのもの
の二種類を設定できます。

一つ注意点としては、当たり前ではありますが独自の画像を使用する際は、ファイル名は一意であることを確認してください。
また、これらのクイックアクションはxmlで静的にも設定できるみたいですね。
その辺りはリンク先を見ていただくと詳しい情報がありますので、よければご覧ください。

もう一つ機能を紹介いたします。
新しい機能として、リンク先を押し込むと内容を閲覧できるPeekや、
さらに押し込むとそのページに遷移が可能なPopの実装方法も見ていきたいと思います。

リンクを開く機能を有効にするためには、
ThreeDeeTouch.enableLinkPreview();
を記述します。
また、この機能を無効にする場合は、
ThreeDeeTouch.disableLinkPreview();
を呼び出します。

なのですが、これだけだとよくわかりませんね。。。
この辺りは、また次回実際に実装してみた際に追記できればと思います。

さて、ここまで解説をいたしましたが、いかがでしょうか。
私はさらに使いこなせるように実際に機能としてアプリに盛り込んでみようかなと思っています。

この記事が少しでもみなさまのお役に立てれば幸いです。

ではまた次回!!
 
弊社開発実績はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">