JavaScriptカスタマイズ

スマートフォン用Javascriptが機能強化されました

以前、JavascriptカスタマイズのPC用とスマートフォン用の違いにてスマートフォン用画面ではkintoneのJavascript APIが利用できないと説明をしましたが、４月のアップデートで一部の関数が利用できるようになりました。

　

３つの機能が実装

今回、新たに以下の３つの機能が実装されました。

　

　

注意点は、PC用とスマートフォン用で同じ機能でも呼び出す関数が違う点です。

例えば、レコード情報を取得する場合、PC用では、kintone.app.record.getという関数を使い、スマートフォン用では、kintone.mobile.app.record.getという関数を使います。

例えば、レコード詳細画面でメニューの横に「テスト」というボタンを表示し、見積No（フィールドコード：no）の値をポップアップ表示するスクリプトをPC用とスマートフォン用に分けると以下の様な記述になります。

　

【PC用】

function createButton(event) {
    var elButton = kintone.app.record.getHeaderMenuSpaceElement();
    var bt_div = document.createElement('div');
    bt_div.setAttribute('id', 'addButton');
    bt_div.setAttribute('name', 'addButton');
    var bt = document.createElement('button');
    bt.setAttribute('id','bt1');
    //表示させたい一覧のURLを指定
    bt.setAttribute('onClick','test();');   
    //ボタンの表示名
    bt.innerHTML = 'テスト';                                           
    bt_div.appendChild(bt);
    elButton.appendChild(bt_div);
}
 
// 一覧画面が開いた時のイベント
kintone.events.on('app.record.detail.show', createButton);
    
function test(){
    var record = kintone.app.record.get();
    alert(record['record']['no']['value']);      
      
}

　

【スマートフォン用】

window.onload=function(){
    var elButton = kintone.mobile.app.getHeaderSpaceElement();
    var bt_div = document.createElement('div');
    bt_div.setAttribute('id', 'addButton');
    bt_div.setAttribute('name', 'addButton');
    var bt = document.createElement('button');
    bt.setAttribute('id','bt1');
    //表示させたい一覧のURLを指定
    bt.setAttribute('onClick','test();');   
    //ボタンの表示名
    bt.innerHTML = 'テスト';                                           
    bt_div.appendChild(bt);
    elButton.appendChild(bt_div);
  
}  
    
  function test(){
    var record = kintone.mobile.app.record.get();
    alert(record['record']['no']['value']);      
      
  }

※スマートフォンではkintone.events.onのイベントハンドラが利用できないのでどの画面でも実行されてしまいますがご容赦を。。

　

二つのスクリプトで違う点は以下になります。

まず、PC用ではメニューの右側の要素を取得する kintone.app.record.getHeaderMenuSpaceElement() 関数を呼んでいます。

　

【PC用】

var elButton = kintone.app.record.getHeaderMenuSpaceElement();

　

スマートフォン用ではメニューの右側の要素を取る関数がないため、ヘッダーの下部を取る kintone.mobile.app.getHeaderSpaceElement() 関数を呼んでいます。

　

【スマートフォン用】

var elButton = kintone.mobile.app.getHeaderSpaceElement();

　

もう一つは、kintoneのレコードを取得する関数で、PC用では kintone.app.record.get() 、スマートフォン用では kintone.mobile.app.record.get() 関数を呼びます。

　

【PC用】

var record = kintone.app.record.get();

　

【スマートフォン用】

var record = kintone.mobile.app.record.get();

　

　

ちなみにPC用とスマートフォン用のJavascriptを管理画面で読み込む場所が異なりますのでご注意下さい。

管理画面

　

スマートフォン用の関数はまだまだ不足はしていますが、今後機能強化されてくるかと思いますので気長に待ちながら色々テストをしておきましょう。

同じカテゴリーの記事