レンジャーブログ

JavaScript

2015.04.25

Javascriptで処理中画面を表示する

レンジャーピンクの水落です。

最近すっかり暖かくなってきましたね。

自宅周りの雪も殆どなくなってきました。(もうすぐ5月なのにまだあるんですよ・・・

では、今回のタイトルの話題に

kintoneでJavaScriptを利用して処理を行う際、

どうしても時間のかかってしまう処理があります。(件数の多いデータ更新処理など)

そんな時に処理中表示の処理を簡単に行えるプラグインが BlockUI です。

詳細は続きから

2015.04.15

kintoneでGoogleMapsAPIを使わないでマップを利用したい!

今日は天気も良くあたたかいなぁ~

新潟は雨だって予報で言ってたんだけどすごく天気がいい!

出社する前にあまりにも天気が良かったから、空を見ながら身体を伸ばしていたら

目の前に鳥の糞が三つも落ちてきました・・・うむ、これがきっと春の訪れを教えてくれているんだなぁ~と思う今日この頃でした。

はい、のんびんことキントレンジャーブルーです。

てなことで春の訪れも感じることができましたし、ブログでも更新しようかと思います。
(べ、べつに鳥の糞が落ちてきて当たらなかったことを報告したかっただけじゃないんだからね///)

ではタイトルにもかきましたが、Google Maps APIを利用しないでkintoneで便利にマップを利用する方法を書いていきたいと思います。

そもそもなんでこんなことを書いたかといいますと・・・Google Maps APIにはライセンスがあり、使うにあたっていろいろと制約があるのです。

Google Maps APIライセンスはこちら

無償版では

”エンド ユーザーが自由にアクセスできる一般公開のサービスであれば、この API を利用できます。”

といったルールがあるわけです。

無償版をkintoneで利用するにはこの壁があります!

壁なんて壊せばいい!!って思った人・・・正解です!

そう・・・GoogleMapsAPI for Business(有償版)を利用すればいいんです!

なんだ簡単じゃないですか、利用料金をきちんと払って使えば問題なく利用できますね

・・・って思っていた時期が私にもありましたよ・・・

Google Maps API for Businessは利用料金がなかなかのお値段じゃないですか!!?

ちょっとパパのお小遣いでは・・・無理かな

で す が、やっぱりGoogleMapsって便利なんですよねぇ~

お客様とお話させていただくと、

「住所を入力したらMapが見れるといいな~」とか「iphoneで見たときにナビが起動できるといいなぁ」といった要望は必ずでます。

そんなときに「え、あ、GoogleMapsを使うにはライセンス料金ががががが・・・」なんて言えない小心者ののんびんです。

はい!前置きが長くなりました。

ここからはお客様からマップを利用したいと要望が出たときの、のんびんテクニックを書いていこうと思います。

いや、別に利用料金払ってるから必要ないと思った人・・・

お小遣いの少ないパパの生き様を・・・みてやってください!!!

まずはこんな感じのお試しアプリを作ってみます

表示されているフィールドの情報は以下の通りです。

フィールド名 フィールドコード フィールドタイプ
名前 名前 文字列 (1行)
郵便番号 郵便番号 文字列 (1行)
都道府県 都道府県 文字列 (1行)
市区町村 市区町村 文字列 (1行)
番地・建物名 番地・建物名 文字列 (1行)
MapLink スペース

はい、ではこの情報を設定したアプリができたら次にjavascriptを作ります!


(function () {
 
        "use strict";
 

        // 詳細画面を開いた時に実行します
        function detailShow(event){
                var detailRec = event['record'];
                // 都道府県が存在するかチェックしています。 
                // ※チェックする内容はフォームの必須入力によって変化します
                if (detailRec['都道府県']['value'] != undefined && detailRec['都道府県']['value'].length != 0){
                        // 住所情報を結合します。
                        var mapPram = detailRec['都道府県']['value'] + detailRec['市区町村']['value'] + detailRec['番地・建物名']['value'];
                        // 結合した住所情報をgoogleMapsのURLにパラメータとして追加します。
                        mapPram = "https://maps.google.co.jp/maps?q=" + mapPram;

                        // リンク用のエレメントを作成
                        var elem = document.createElement("a");
                        elem.href = mapPram;
                        elem.target = "_blank";
                        elem.title = "住所をマップで確認";
                        var str = document.createTextNode("住所をマップで確認する");
                        elem.appendChild(str);

                        // 「MapLink」スペース内に設定した要素を追加します
                        var elMap;

                        if (event.type == "mobile.app.record.detail.show"){ 
                                // スマホの場合はヘッダー部分に表示する
                                elMap = kintone.mobile.app.getHeaderSpaceElement();
                        } else {
                                elMap = kintone.app.record.getSpaceElement('MapLink');
                        }
                                elMap.appendChild(elem);
                }
        };

        // 詳細画面が開いた時のイベント
        kintone.events.on('app.record.detail.show', detailShow);
        // 詳細画面が開いた時のイベント(モバイル)
        kintone.events.on('mobile.app.record.detail.show', detailShow);
 
})();




てな具合にjavaScriptを設定してみてください。

設定後、アプリにレコードを追加します。

今回は弊社の情報を入力してみます。

入力後、保存ボタンを押下すると、詳細画面が表示されます。

詳細情報画面にはなんと!!!リンクが出来上がっています。(赤線で囲んであります)

そのリンクを押下することで・・・

このように別タブにマップが表示されます。

いかがでしょうか?

このようなマップの利用方法もあります。

参考になれば幸いです。

以上、ブルーことのんびんでしたぁ~

面白いと思ったら、ぽちぽちをお願いします。

2015.03.23

初投稿!(キントレンジャーピンク)

みなさんこんにちは。

キントレンジャーピンクの水落です。

初回ですので簡単な自己紹介をします!

キントレンジャーではエンジニアを担当しています。

Excel×kinotoneでのExcel帳票や、kintoneで他のレンジャーが

使えるようなJavaScriptの開発をしています。

次回から、開発中に便利だなと思ったVBAやJavaScriptを

少しずつ載せていこうと思いますので、よろしくお願いします(^^

Copyright (C) IT Plus One inc. All Rights Reserved.