encroute.jsのAPI解説

encroute.jsは、HTML / JavaScript で制作する画面からネイティブの機能を呼び出すメソッド等を提供します。例えば、ダイアログを表示する、ブックマークを保存する機能があります。

API一覧

apliko.activity.send()

構文
apliko.apliko.activity.send(data)
戻り値
Void

アクティビティを送信します。

引数

data
{ blogId: x, objectId: y }形式のオブジェクトです。objectIdはウェブサイト・ブログIDまたは記事IDです。

apliko.storage.set()

構文
apliko.storage.set(key, value)
戻り値
Promise

キー・バリュー形式のデータ永続化の仕組み(iOSはUserDefaults、AndroidはSharedPreferences)を使用して小さなデータを保存します。

引数

key
キー
value

apliko.storage.get()

構文
apliko.storage.get(key)
戻り値
Promise

apliko.storage.set()で保存したデータを取得します。

引数

key
キー

apliko.securedata.set()

構文
apliko.securedata.set(service, id, password)
戻り値
Promise

iOSはKeyChain、Androidは暗号を伴うSharedPreferencesを使用してパスワードなどの情報を保存します。

引数

service
サービス名(例:com.example.github-token
id
ID(キー)
password
パスワード(バリュー)

apliko.securedata.get()

構文
apliko.securedata.get(service, id)
戻り値
Promise

apliko.securedata.set()で保存したパスワードを取得します。

引数

service
サービス名(例:com.example.github-token
id
ID(キー)

サンプルコード

jQueryを併用し、予め記憶したユーザー名・パスワードをフォームに自動入力する例を示します。

(function ($) {
  var serviceId = "jp.example.apliko";
  var storageKey = "username";

  (function () {
    // 保存済みログイン情報のロード
    apliko.progresshud.show();
    const promise = apliko.storage.get(storageKey);
    promise
      .then(
        function (id) {
          $("#loginId").val(id);
          return apliko.securedata.get(serviceId, id)
        },
        function () {
          apliko.progresshud.hide();
        }
      )
      .then(function (password) {
        $("#loginPassword").val(password);
        apliko.progresshud.hide();
      },
      function () {
        apliko.progresshud.hide();
      });
  }());
}(jQuery));

apliko.bookmark.set()

構文
apliko.bookmark.set(entryId, entryTitle, entryUrl)
戻り値
Promise

記事詳細画面において、表示している記事をブックマークに保存します。

引数

entryId
記事ID
entryTitle
記事タイトル
entryUrl
記事のURL

サンプルコード

jQueryを併用し、記事をブックマークに保存した後ボタンのラベルをブックマーク登録済みに変更する例を示します。

(function ($) {
  // ブックマークボタンの状態変更
  function toggleBookmarkButton($btnBookmark, bookmarkState) {
    if (bookmarkState) {
      $btnBookmark.data("isbookmarked", bookmarkState);
      $btnBookmark.text("ブックマークを解除");
    } else {
      $btnBookmark.data("isbookmarked",  bookmarkState);
      $btnBookmark.text("ブックマーク");
    }
  }

  // ブックマークボタン押下時の処理
  $(".js-bookmark").on("click", function (e) {
    const $target = $(e.target);
    const state = $target.data("isbookmarked");
    if (state) {
      const removePromise = apliko.bookmark.remove(<$mt:EntryID$>);
      removePromise.then(function () {
        toggleBookmarkButton($target, false);
      });
    } else {
      const setPromise = apliko.bookmark.set(<$mt:EntryID$>, "<$mt:EntryTitle$>", location.href);
      setPromise.then(function () {
        toggleBookmarkButton($target, true);
      });
    }
  });
}(jQuery));

apliko.bookmark.remove()

構文
apliko.bookmark.remove(entryId)
戻り値
Promise

指定した記事をブックマークから削除します。

引数

entryId
記事ID

apliko.bookmark.checkState()

構文
apliko.bookmark.checkState(entryId)
戻り値
Promise

指定した記事がブックマークに登録されているか確認します。

引数

entryId
記事ID

サンプルコード

jQueryを併用し、ブックマークに登録されているか確認してボタンのラベルを変更する処理を示します。

(function ($) {
  // ブックマークボタンの状態変更
  function toggleBookmarkButton($btnBookmark, bookmarkState) {
    if (bookmarkState) {
      $btnBookmark.data("isbookmarked", bookmarkState);
      $btnBookmark.text("ブックマークを解除");
    } else {
      $btnBookmark.data("isbookmarked",  bookmarkState);
      $btnBookmark.text("ブックマーク");
    }
  }

  // ブックマーク状態のチェック
  (function () {
    const promise = apliko.bookmark.checkState(<$mt:EntryID$>);
    promise.then(function (isBookmarked) {
      toggleBookmarkButton($(".js-bookmark"), isBookmarked);
    });
  }());
}(jQuery));

apliko.dialog.alert()

構文
apliko.dialog.alert(title, body)
戻り値
Promise

エラーメッセージ等をダイアログで表示します。

引数

title
ダイアログタイトル
body
ダイアログ本文

apliko.dialog.confirm()

構文
apliko.dialog.confirm(title, body)
戻り値
Promise

OKボタンとキャンセルボタンを伴った確認ダイアログを表示します。

引数

title
ダイアログタイトル
body
ダイアログ本文

サンプルコード

jQueryを併用し、ブックマークを削除する前に確認ダイアログを表示する例を示します。

(function ($) {
  $(document).on("click", ".js-delete", function (e) {
    e.stopPropagation();
    const $btnDelete = $(e.currentTarget);
    const title = "ブックマーク削除の確認";
    const body = "ブックマークを削除してい良いですか?";
    const promise = apliko.dialog.confirm(title, body);
    promise.then(
      function () {
        const entryId = $btnDelete.data("entryid");
        const $item = $btnDelete.closest("li");
        apliko.bookmark.remove(entryId);
        $item.remove();
      },
      function (error) {
        console.log(error);
      }
    );
  });
}(jQuery));

apliko.share.entry()

構文
apliko.share.entry(entryId, title, shareUrl)
戻り値
Promise

ネイティブの機能を利用して記事をTwitter・Facebook等に共有します。

引数

entryId
記事ID
entryTitle
記事タイトル
shareUrl
ブラウザからアクセス可能な記事URL(通常は`<$mt:EntryPermalink$>`)

apliko.progresshud.show()

構文
apliko.progresshud.show()
戻り値
Void

処理中であることを示す表示をします。

引数

なし

apliko.progresshud.hide()

構文
apliko.progresshud.hide()
戻り値
Void

処理中であることを示す表示を隠します。

引数

なし

apliko.members.login()

構文
apliko.members.login(username, password)
戻り値
Promise

PowerCMS同梱のMembersプラグインを利用しているウェブサイト・ブログにログインします。

引数

username
ユーザー名
password
パスワード

apliko.members.logout()

構文
apliko.members.logout()
戻り値
Promise

PowerCMS同梱のMembersプラグインを利用しているウェブサイト・ブログからログインします。

引数

なし

apliko.members.renewToken()

構文
apliko.members.renewToken(currentUrl)
戻り値
Void

PowerCMS同梱のMembersプラグインを利用しているウェブサイト・ブログの閲覧に必要なトークンを更新し、指定されたURLをロードします。

引数

currentUrl
トークン更新後に表示するページ(通常現在表示しているページのURL)

apliko.utility.parseQueryString()

構文
apliko.utility.parseQueryString(queryStr)
戻り値
Object

URLのクエリストリング文字列を与えると、内容を分解しオブジェクトに格納して返します。

引数

queryStr
クエリストリング文字列。一般的にはlocation.searchで取得した値です。

apliko.view.pushwebview()

構文
apliko.view.pushwebview(nextUrl)
戻り値
Void

お知らせ記事一覧からお知らせ記事詳細に移動する際に使用します。

引数

nextUrl
遷移する画面のURL

apliko.utility.getRandomArbitary()

構文
apliko.utility.getRandomArbitary(min, max)
戻り値
Integer

乱数を生成します。

引数

min
生成する乱数の最小値。
max
生成する乱数の最大値。(最大値未満の値が返ります。)