WordPressにFirefoxOSアプリのDLリンクを貼るためのショートコード

アプリマニフェスト – アプリセンター | MDN

DLボタンを作る

「Apps.instal」あたりのコードを見ながらとりあえず動くものを作ってみます。

sample.html

[html]
<div id=’ffapp-dl-btn’ data-ffapp-dllink=’https://example.com/manifest.webapp’>Download</div>

<script>
var installButton = document.getElementById("ffapp-dl-btn");

installButton.addEventListener("click", function() {
var manifestUrl = installButton.getAttribute("data-ffapp-dllink");
var request = window.navigator.mozApps.install(manifestUrl);
request.onsuccess = function () {
// 戻り値の App オブジェクトを保存
var appRecord = this.result;
alert(‘アプリケーションはインストールされました’);
};
request.onerror = function () {
// DOMError オブジェクトからエラー情報を表示
alert(‘インストール処理中にエラーが発生しました:’ + this.error.name);
};
});
</script>
[/html]

firefoxOSまたはfirefoxブラウザでのみ動作するという変わり者ですが、とりあえずこれでインストールさせようという動作をするようになりました。

ショートコードにする

JSを毎回書いたりするのも手間ですし、そもそも投稿の本文部分にJS書けないのでショートコードにします。

functions.phpなどに書くコード

非常にシンプルなショートコード作成プログラムです。
[php]
add_shortcode(‘ffapp-dl’, ‘echo_dlBtn’);
function ffap_get_download_btn($attr){
extract(shortcode_atts(array(
‘class’ => ‘default-class’,
‘btnText’ => ‘Download’,
‘dlLink’ => ‘https://example.com/manifest.webapp’,
), $attr));

$html = "<div id=’ffapp-dl-btn’ class=’ {$class}’ data-ffapp-dllink='{$dlLink}’>{$btnText}</div>";

return $html;
}
[/php]

追加するJavaScript

ダウンロードのイベントを発火するスクリプトを記述します。

今回はちょっと頑張って「Vanilla JS」を使ってみました。

テーマのフッター部分にでも放り込んでもらえればいいかなと思います。
[html]
<script>
var installButton = document.getElementById("ffapp-dl-btn");

installButton.addEventListener("click", function() {
var manifestUrl = installButton.getAttribute("data-ffapp-dllink");
var request = window.navigator.mozApps.install(manifestUrl);
request.onsuccess = function () {
// 戻り値の App オブジェクトを保存
var appRecord = this.result;
alert(‘アプリケーションはインストールされました’);
};
request.onerror = function () {
// DOMError オブジェクトからエラー情報を表示
alert(‘インストール処理中にエラーが発生しました:’ + this.error.name);
};
});
</script>
[/html]

使い方

使用する場所では以下のようなショートコードを記述します。
[html]
[ffapp-dl class="" btnText="Download" dlLink="https://example.com/manifest.webapp"]
[/html]

プラグインにしてみた

基本的にこういう作業は「作業用プラグイン」の中でやってるので、「せっかく形になったから・・・」と単体のプラグインとして独立させてみました。

firefoxos-app-downloader

どういうわけか公式プラグインディレクトリも即日通過してしまって困惑中です。

WordPress › firefoxOS APP Downloader « WordPress Plugins

（誰が使うんだろこれ・・・）

参考記事

• Apps.install – Web API インターフェイス | MDN
• 感心。Firefox OSアプリはWebページからインストールでき、デスクトップでもAndroidでも動く！ | OpenWeb

https://github.com/hideokamoto/firefoxos-app-downloader