iPadでPC版の閲覧時にボタンが表示されません

こんにちは。
kintoneアプリをiPadで閲覧した際に生成したボタン要素が表示されず困っております。

PCでは問題なく表示されているのですが、こちらkintoneの仕様でしょうか。
それともコードに問題がございますでしょうか。

詳しい方、ご教示いただけますと幸いです。
よろしくお願いいたします。

 

ボタンは以下コードで生成しております。

(function ($) {

'use strict';

kintone.events.on('app.record.detail.show', function (event) {

var $button=$('<button>').text('送信');

$(kintone.app.record.getSpaceElement('download')).append($button);

});

})(jQuery);

PCでは問題なく表示されるかつ、
> kintoneアプリをiPadで閲覧した際
とのことなので、やはりモバイル版ではないでしょうか?

その場合下記のようにモバイル版の表示イベントの定義も必要となります。

モバイル版の表示イベント:
mobile.app.record.detail.show

また、スペースフィールドの要素取得のgetSpaceElementもmobile版のものがあるので、要素の取得もモバイルはそれを使う必要があります。

モバイル版のスペースフィールド要素取得関数: 
kintone.app.record.getSpaceElement(id)

 

|

 

|   |

 

空白は本コードもでしょうか?

var$button=$('\<button\>').text('送信');

から

var $button=$('\<button\>').text('送信');

村濱さま

ご返信ありがとうございます。

確認してみたのですがURLはPC版のものになっておりました。
また他の表示イベントはPC版のもので動作しておりましたので、原因は他にありそうです。

例えば同アプリの以下コードはiPadで動作いたします。

jQuery.noConflict();
(function($) {
'use strict';

kintone.events.on('app.record.edit.show', function(event) {
// 数量の「x」を描画
$(kintone.app.record.getSpaceElement('x1')).text('×').attr('class', 'x');
});
})(jQuery);

もう少し調べてみます。
お忙しい中ありがとうございます。

岡崎さま

いつもご返信ありがとうございます。

空白、失礼いたしました。
本コードでは空白はございません。(質問内のコードも修正させていただきました。)

【追記です】

申し訳ありません。

当初は質問内のコードに問題があるのではと考えておりましたが実はコードに続きがありまして、その部分をコメントアウトするとボタンが表示されるようになりました。

しかしコメントアウトする前もエラーが出ていませんので原因がわかりません。

以下関数部分をコメントアウトするとボタンが表示されるようになりました。
例えばXMLHttpRequestオブジェクトを使用するコードはブロックされるなどの仕様があるのでしょうか。

よろしくお願いいたします。

function fileDownload(fileKey) {
return new Promise(function (resolve, reject) {
var url = kintone.api.url('/k/v1/file', true) + '?fileKey=' + fileKey;
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.responseType = 'blob';
xhr.onload = function () {
if (xhr.status === 200) {
// successful

var reader = new FileReader();
var attachment = {};

// blob→base64にエンコード
reader.readAsDataURL(xhr.response);

reader.onload = function () {
// 拡張子を取得
var extension = xhr.response.type.match(/(?<=\/).*/)[0];

// 添付ファイル(base64エンコード)
// 行頭の属性部分を削除(肯定後読み)
var re = new RegExp('(?<=^data:(.*?)\/(.*?);(.*?),).*');
attachment.content = reader.result.match(re)[0];

// ファイル形式を取得
attachment.type = xhr.response.type;

// ファイル名を取得
attachment.filename = '御見積書' + '.' + extension;

resolve(attachment);
};
} else {
// fails
reject(Error('File download error:' + xhr.statusText));
}
};

xhr.onerror = function () {
reject(Error('There was a network error.'));
};

xhr.send();
});
}

【追加】

上記コード20行目をコメントアウトするとボタンが表示されるようになりました。

// 拡張子を取得
var extension = xhr.response.type.match(/(?\<=\/).\*/)[0];

iPadとPCのブラウザ(Chrome)では同じコードでも動作が変わるのでしょうか。

こちら参考になるかもしれません。

https://stackoverflow.com/questions/51568821/works-in-chrome-but-breaks-in-safari-invalid-regular-expression-invalid-group

岡崎さま

ご返信ありがとうございます。
無事解決いたしました!

私も「正規表現 後読み iOS」などで検索していたのですが、解決にいたる情報が見つからず困っておりました。

現時点でiOS版のChromeは後読みに対応していない?ようですね。
リンク先にありますように後読みではなくキャプチャなしのグループ (?:slight_smile: を使うことで無事解決いたしました。

// 後読み
(?<=)

// グループ(キャプチャなし)
(?:)

ありがとうございました!