レンジャーブログ

kintone

2016.04.14

kintoneメモプラグイン作成中!

こんにちはーレンジャーピンクの水落です。

前回の自分の投稿から約一年・・・もっと書かないと!

さて、今回はkintoneで利用できるプラグインを作ってみました。

それはグリーンのお願い?から始まりました。

2016.02.10

kintoneCafé新潟Vol.3開催報告

こんにちは!レンジャーグリーンことみなとんです。

ついに!ついに!2/6に新潟市でkintoneCaféを初開催しました。
雪がちらつく寒空の中、ご参加いただいた方々ありがとうございました。

 

まず始めに。

今回のハンズオンで使用した資料一式を下記に置きました。

ハンズオン資料

公開資料を見てやってみたい方、ご参加いただいた方でもう一度じっくりやってみたい方はぜひご活用ください。

 

さてさてそれでは早速、開催報告しちゃいます。

2015.07.06

kintone Café 新潟 Vol.2 & kintothon 新潟 開催しちゃったぜ!!

夏!! なつ!! ナツ!! 柚子!!あ、間違えた。

7月だぜ~~ひゃぁぁふぅぅぅ~~

もうすぐも行けるし、川遊びもできる夏がくるぜぇぇぇ~~

・・・まぁ週末は  にいたんですけどね!!

てなわけで

みなさんこんにちは、のんびんことキントレンジャーブルーです

実は先週末、kintone Café 新潟 Vol.2を開催しました

kintone Café 新潟恒例となっている、のんびんの開催報告を始めます!!

※↑ジョイゾーの山下さんが撮影してくれました。素敵すぎる・・・

2015.06.01

kintone Café 新潟 Vol.2 ~古民家でkintoneCaféとkintothon会場予定地!

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

今回はイベントの告知です!

タイトルにもありますが、kintoneCaféVol2を開催いたします。

前回(vol.1)は12月開催の予定が大雪で1月に延期になるという、

雪国らしい感じでしたが、今回はご安心ください(笑

今回はkintothonという名のハッカソンも一緒に開催します!

レンジャーブログでは会場予定地(古民家)の写真をアップしますので

ご覧ください。

 

 

 

 

 

 

 

 

 

 

 

 

 

一気にアップしてみましたが、いかがでしたでしょうか。

廊下に設置してあるテーブルからは越後三山を真正面に見ることができます。

(写ってなくてすみません・・・)

他にはいろりがあったり、広い居間など、古民家らしさが十二分に堪能できるのではないでしょうか。

ちなみに、上の写真にもありましたが、トイレはキレイです。

重要なポイントとして、こちらの古民家で宿泊を予定していますが、宿泊の際は男女で部屋が分かれますので

その点はご安心ください。

皆様のご参加をお待ちしています。

参加希望の方はこちら

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を設定してみてください。

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

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

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

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

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

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

いかがでしょうか?

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

参考になれば幸いです。

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

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

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