月別アーカイブ 10月 2018

村上 著者:村上

【Android】Mapboxを使って地図上にピンを立てる方法

今回は、Mapboxを使って、Androidアプリで地図を表示する方法について。
導入は簡単でしたので、今回はそれプラス、地図にマップピンを立てたいと思います。

導入は本家サイトをご参考ください。
なお、マップの表示にはアクセストークンが必要なため、ユーザー登録を行ってください。

Install Maps SDK for android|Mapbox
https://www.mapbox.com/install/android/

上記で紹介している手順通りにSDKの導入やPermissionの設定、MapViewの指定を行えば、問題なく地図が表示できるはずです。
で、地図が表示されたら、いよいよマップピン表示!

コードは下記のとおりです。
重複している箇所があるので、必要なところのみコピー&ペーストしてください。

private MapView mapView;
private MapboxMap mapboxMap;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Mapbox.getInstance(this, "[access_token]");
    setContentView(R.layout.activity_map);

    mapView = findViewById(R.id.mapView);
    mapView.onCreate(savedInstanceState);
    mapView.getMapAsync(this);

    Double lng = [緯度];
    Double lat = [経度];
    mapView.getMapAsync(mapboxMap -> mapboxMap.addMarker(new MarkerOptions()
            .position(new LatLng(lat, lng))
            .title("写真を撮影した場所")));
}

こちらを実行すると、下の写真のようにマップピンが地図上に表示されます。

会社で撮影した写真の位置情報を使用したので、若干の誤差はあれど、ほぼあっていますね!

 

以上、地図上にピンを立てる方法でした。
しかしこれだけだと、マップの中心位置≠マップピンが立っている場所、なので、マップの中心位置やピンの場所によっては、地図をかなりスワイプしたりドラッグする必要がある場合があります。
次回は、こちらを解消すべく、地図の中心位置をコード上で操作する方法についてご紹介できればと思います。

  • この記事いいね! (0)
著者:杉浦

Pythonやjavascriptで現れる__の通称

 Double UNDERsocoreを略してdunderと読みます。発端は How do you pronounce “__” (double underscore)?らしいです。発端はどうあれ今はgoogleで`dunder __`と検索すると10万件以上ヒットするほど使われています。
 Pythonやjavascriptには__で囲われた変数が現れます。

__name__

__proto__

などです。この__は予約された変数で、プログラムを実行した時点ですでに中身が設定されている変数です。必然、中身を調べるわけですが、検索エンジンによっては__を読み取ってくれないことがあります。dunderはそのような時に助けなってくれる呼び方です。
 javascriptでは__proto__以外で__の絡んだ値をそうそう扱わないですが、pythonはまま使います。その中でもよく使うのは以下のあたりです。

class hogehoge
	def __init__(self, hoge, fuga):
		#コンストラクタ定義
if __name__ == '__main__':
	# メイン実行の関数呼び出し

 __init__はコメントの通りclassのコンストラクタ定義。if __name__ == ‘__main__’:は直接実行(__name__ = __main__)されているか、他ファイルから呼び出されてい実行(__name__ = ファイル名)されているかで場合分けです。過去のプログラムの一部を使いたい時はよくありますので、その時に備えて書いたりするわけです。

  • この記事いいね! (0)
asaba 著者:asaba

【cordova-react】reactでパスワードをハッシュ化する方法

今回はハッシュ値について軽く説明します。reactで探していたらnpmで便利なライブラリを見つけたのでスクショとコードで説明していきます。

まずコマンドでnpm install js-sha512と入力すると、js-sha512がディレクトリのフォルダ内にインスールされるのでそれを先頭でimportします。

import sha512 from 'js-sha512';

[/java script]

このライブラリは、独自のアルゴリズムを使ってハッシュ化をしてくれます。少ないコードで済むように設計されているので初心者でも感覚的に触ることができてかなり覚えやすいです。

下のコードは、stateされているパスワードを引数にしてsha512で変換しているのが分かります。ものすごく簡単です。

var password = ReactDOM.findDOMNode(this.refs.password).value.trim();

var hashPass = sha512(password)

[/java script]

これを実装した前提で画面を見ていきます。

 

適当に作った入力フォームです。ここにパスワードとメールアドレスを入れて送信します。

すると下のような数値が乱立した値がログで吐き出されているのが分かります。

これがハッシュ値です。アカウントを管理するアプリには、外部からてきとうにの改ざんを防ぐための手段としてパスワードのハッシュ化が必ずと言ってよいほど必要になります。

このようにして簡単で短いパスワードを長くランダムに変換することにより、外部から触れられないしくみになっています。

 

もっと複雑な暗号化などを実装したいという方でなければこれでも十分いけると思います。

 

  • この記事いいね! (0)
takahashi 著者:takahashi

Windowsの”付箋”機能が進化! ついにWindows端末間での同期が可能に

最近PCを使っていてふと気づいたのですが、

いつの間にかWindowsの付箋機能がパワーアップしていました。

起動直後は特に今までと変わりはないのですが、
タスクバーの付箋を右クリックして出てくるメニューの”すべてのメモ”をクリックすると…

付箋を一覧にして表示、さらには検索もできます。
使い勝手がGoogle Keepに似た形になりました。

さらに、

自動同期機能も搭載されました!
これは便利ですね。

アップデートしてもデータは引き継がれるようですので、普段から付箋機能を愛用している方は是非アップデートして使ってみてはいかがでしょうか。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】Bluetoothをアプリから有効にする方法

今回は、Corodvaのプラグイン「BluetoothSerial」についてです。
こちらのプラグインは、iBeaconのプラグインを利用するために、インストールしました。

GitHubはこちらから。

GitHub – don/BluetoothSerial: Cordova (PhoneGap) Plugin for Serial Communication over Bluetooth
https://github.com/don/BluetoothSerial

現在、開発中のアプリに Beaconの受信機能を実装していますが、このBeaconを使うときは、BluetoothがONになっている必要があります。
ですが、人によっては、スマートフォンの Bluetooth を、使うときはONにして、いつもはOFFにしている場合もあるかと思います。
というか、まさに私がそのタイプ。
なので、アプリを起動したタイミングで、BluetoothがONになっているかを確認し、もしOFFだったら、ユーザーに確認してONにする、ということをやりました。

 

インストール方法については、下記のコマンドを実行するだけです。

cordova plugin add cordova-plugin-bluetooth-serial

さて、BluetoothをONにするためのコードはこちら。

bluetoothSerial.enable(function() {
    // Bluetoothが有効
    // その時の処理
}, function() {
    // ユーザーがBluetoothを有効にしなかった
    // その時の処理
});

こちらを実行すると、BluetoothがOFFの場合は、下の画像のようなダイアログが表示されます。

こうしておけば、Bluetoothの有効化を促すことができますね。
なお、既にONのときには何も起こりません。

ちなみに、ただONかOFFかだけを確認したい場合は、isEnabled を使います。
書き方は、下記のとおりです。

bluetoothSerial.isEnabled(function() {
    // BluetoothがON
    // その時の処理
}, function() {
    // BluetoothがOFF
    // その時の処理
});

メッセージでBluetoothの有効化を促したい場合などは、こちらの方法が使えると思います。

 

以上、Corodvaアプリから Bluetoothを有効にする方法でした。

  • この記事いいね! (0)
著者:杉浦

GUIによるCSS作成webサービスLayoutIt!の紹介

 CSSはウェブページのスタイルを指定するための言語です。スタイルを指定ということもありCSSとグラフィカルな画面は密接に関係しています。CSSを作るときは画面とCSSを行き来することが増えがちです。自分はブラウザの開発者ツールで仮のコーディングを行い出来上がったものをファイルへコピペする、というやり方で多少軽減していますがそれでも面倒です。
 LayoutIt! – Interface Builder for CSS Grid and Bootstrapは画面を作り、画面に沿ったCSSやHTMLのコードを出力してくれます。
 LayoutIt!はBootstrapのひな型構築とGridのひな型構築の二つの機能を持っています。Bootstrapはデザインテンプレートであり、classにBootstrapの用意した名を割り当てることで様々なデザイン、機能を実現します。下画像はLayoutIt!のBootstrap Builderの使用画面です。
 
 左のサイドバーから右にパーツをドラッグして様々なレイアウトを作成できます。当然、既に配置したパーツもドラッグで再配置できます。納得いくレイアウトが出来上がったら赤丸のダウンロードからHTMLコードをダウンロード。残りの作業は手元で細かい部分を肉付けすることだけです。
 Gridはその名の通り格子状のデザインのことです。LayoutIt!のCSS Grid GeneratorではBootstrap Builder同様に画面上でGridを作り、そのコードをダウンロードできます。下画像はCSS Grid Generatorの使用画面です。

 例によって左のサイドバーと表のドラッグで画面をコントロールします。異なるのはGridをクリックした際の動作です。GridのAreaに名前をつけ、その中にまたGridを作ることが出来ます。完成したら赤丸のget the codeからコードをダウンロード。Gridの中身の肉付けは手元の作業です。

  • この記事いいね! (0)
著者:ym

Google Payが実店舗で非接触QUICPayに対応

昨日の発表で実店舗で Google Pay を使った非接触支払いに対応しました。

今まで Google Pay だと非接触支払いに対応していなかったのですが、ようやく対応した形です。技術的には、iD や Edy ではなく、QUICPay+ で非接触支払い対応した形です。

iD は docomo 系、Edy は楽天系、なので QUICPay ということかな。いずれも日本限定仕様。
海外だと日本独自の Felica ではなくグローバルな NFC 決済、Mastercard コンタクトレス PayPass や、VISA の payWave 、またまた日本独自の流れで進んでいるかたち。

対応するクレジットカードは「一部のJCB」と「JACCS」。

はじめは JCB の Yahoo!カード を登録してみたのですが、残念ながら Yahoo!カード JCB は現時点では未対応の様です。JACCSカードもあるのでそちらを登録しました。キャンペーンが始まっているので利用して見ようと思います。

ちなみに、たまに Felica 動作が不安定でレジ前で使えない時があるので、楽天Pay のQRコード決済もできるように準備しておいた方がいいですよ。

対応店舗と対応クレジットカード

 

 

  • この記事いいね! (0)
村上 著者:村上

【Cordova】iBeaconとの推定距離を取得する方法【JavaScript】

試して分かりましたが、これは一筋縄ではいかないやつですね。
これに関しては、私にBeaconの知識がないのも原因でしょう。

ということで、早速本題へ。
今回、参考にさせていただいたサイトはこちらです。

RSSI と TxPower からビーコンとの距離および近接度(Proximity)を推定する – Qiita
https://qiita.com/shu223/items/7c4e87c47eca65724305

まず、ビーコンの信号から TxPower と RSSI という値を取得します。
ちなみに、それぞれの値は下記のようなものです。

  • TxPower:ビーコンが発する信号の強さ
  • RSSI:デバイス(AndroidやiOS端末)が受信した電波の強度

で、これらの値と距離との関係は、下記のような式で表すことができるとのこと。
なお、d は距離を表しています。

RSSI = TxPower - 20 * lg(d)

で、こちらの式から、距離 d の計算式は下記のとおりです。

 
d = 10 ^ ((TxPower - RSSI) / 20)

こちらの式をJavaScriptで書くとこうなります。

var d = Math.pow(10.0, (TxPower - RSSI) / 20.0

これで一応は、距離が取得できました。

 

こちらを実際に cordova-plugin-ibeacon に導入すると、下記のようになります。

delegate.didRangeBeaconsInRegion = function(pluginResult) {
    var beaconData = pluginResult.beacons[0];
    console.log("d = "+((Math.pow(10.0, (beaconData.tx - beaconData.rssi) / 20.0))));
}

ビーコンの信号が取得されている間、定期的に呼ばれる関数内で使用しています。
ちなみに、実際に取得できるデータはこちら。

{
    "eventType":"didRangeBeaconsInRegion",
    "region":{
        "identifier":"[ビーコンの名前]",
        "uuid":[ビーコンのUUID],
        "major":"1",
        "minor":"3",
        "typeName":"BeaconRegion"
    },
    "beacons":[
        {
            "uuid":[ビーコンのUUID],
            "major":"1",
            "minor":"3",
            "proximity":"ProximityNear",
            "rssi":-67,
            "tx":-58,
            "accuracy":1.7
        }
    ]
}

こちらを実行すると、ビーコンの信号を受信している間ずっと定期的に計算したビーコンとの距離が出力されていました。

が、参考にした記事によると、この値は「自由空間」という「障害物がない空間」での測定を前提とした計算方法らしいです。
障害物などの有無によって、電波の受信強度が変わるので、実際にはそのあたりも考慮する必要があるとのこと。
…はい、だんだん分からなくなってまいりました!

 

ということで、本日はいったんここまでとしたいと思います。
実際に取れた値も、やけに振れ幅が多いし…実際に使うにはまだまだでしょう。
もう少し、Beaconについての学習も進めていきたいと思います。

以上、Beaconとの距離を計算する方法でした。

  • この記事いいね! (0)
asaba 著者:asaba

【jquery】successを卒業してdoneにしてみる

今までajaxで通信が成功した時はsuccess: function(data, textStatus, xhr) {} error: function(data, textStatus, error) {}に分けていました。

しかし、ajaxを使い始めて間もないころに上記のコードは現在非推奨で、もしかしたら将来使えなくなるのでは?という意見もちらほら見

受けられました。

jqueryリファレンス曰くどうやら前まで書いていたsuccessコードは、jquery1.4以前の書き方らしくjquery1.8以降は下記の書き方を推奨

しているみたいです。


Login(e) {
$.ajax({
url: "test.html",
type: 'GET',
contentType: 'application/json; charset=UTF-8',
headers: {
'Content-Type': 'application/json',
},
}).done(function(data, textStatus){
console.log("success");
}).fail (function(xhr, textStatus, errorThrown){
console.log("error");
});
}

successのところがdoneに変わっているのが見受けられます。そして、headerやcontentTypeなどの処理が)}でぶった切られ、その後

うぐにdone処理に移っています。筆者はこのheaderとdone部分を切り分けているところが気持ち悪く感じ、書いている時は違和感しか

ないです。(今も)

今後jqueryを使ってajax通信をしたいという方は今後はこのやり方でいいと思います。

ちなみに筆者が現在開発に使っているcreate-reactでajax以外にもaxiosという非同期通信の方法があるみたいです。

こちらもajaxと同じように簡単にapiを叩いたりjsonデータを受け取ったりできるので、余裕があれば勉強したいと思っています。

 

  • この記事いいね! (0)
著者:杉浦

世界測地系と日本測地系

 測地系とは位置を表すための前提条件のことをいいます。具体的には地球はどのようになっているかという定義です。技術の発展によりより正確に地球のことがわかるようになり、測地系は更新されていきます。また、グローバル社会が謳われるようになり測地系の名前も世界測地系と改められました。少々ややこしいことに、ただ名前を変えただけのローカルな測地系もあります。例えば日本測地系2011という測地系があります。幸い学術的には日本測地系2011やJGD2011の名で使われていますが、場によっては世界測地系と呼ばれます。
 GNSSが使用している測地系はWGS84という世界測地系です。元々はGPS用のアメリカの規格ですがGNSSの広がり方によって本当に世界単位で使われています。
 座標系という位置の表し方の定義があります。緯度経度、XYなどです。測地系は最初に述べた通り地球の形の定義づけです。位置に関する値を取り扱う時は、どの測地系に従ったどの座標系の値なのか、ということを気を付ける必要があります。特に測地系は異なってもせいぜい数メートル、数十メートル単位のずれで直感的に間違いが分かりにくいです。テストの際には先達の作ったソフト等と突き合わせて検証を行うべきでしょう。

  • この記事いいね! (0)