カテゴリーアーカイブ 言語

著者:杉浦

SVGファイルのエディタ

 SVGファイルはベクトル定義によって画像を表現するファイルです。SVGファイルの形式はBMP、PNG、JPG等のファイルと異なり独特であり対応していない画像編集ソフトが多いです。そのため専用のソフトやサービスが必要になりがちです。またその特徴上、最後の微調整はベクトルの計算、数字を直に弄る方が楽です。
 最近、自分が使った環境の一つはVectr – Free Online Vector Graphics Editorです。下画像の赤丸のバーから図形を配置してざっくりとSVGを作ります。

 次いで使用するのはIDE、今回はPhpStormです。IDEは実行環境とテキストエディタを兼ねた開発環境です。実行環境とエディタがある以上、実行が軽いものであれば、実行しながら編集する、ということも可能です。PhpStormでは下画像の様にSVGが編集できます。こちらはテキストを変更して画像を作ります。
 
 IDEでは同じようにいくつかの種類のファイルをプレビューしながら編集できます。例えば、マークダウンです。こちらはちょっと飾ったテキストを扱うのでIDEのままで読み書きするのに向いています。マークダウンはよく説明書に使われているので、よくお世話になっています。

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

【Android】Mapboxで表示した地図の中心を変更する方法

昨日の予告通り、今回はMapboxの地図の中心位置を変更する方法についてです。
前回の記事については、下記から確認頂けます。

【Android】Mapboxを使って地図上にピンを立てる方法
https://cpoint-lab.co.jp/article/201810/【android】mapboxを使って地図上にピンを立てる方法/

 

では早速実装方法について。
なお、今回のコードは Mapbox が導入済みであることを前提に進めています。

まず onCreate() 内に、下記のコードを追加します。

mapView.getMapAsync(this);

ちなみに、この時、Android Studioでは、this の部分がエラーになり、赤い波下線が引かれますので、そこにカーソルを合わせて Alt + Enter を押します。
表示される対処法の項目中に、OnMapReadyCallbackimplements するというような内容の候補があるので、こちらを選択します。
すると、onMapReady() という関数がオーバーライドされるので、その中に下記のコードを追加します。

@Override
public void onMapReady(MapboxMap mapboxMap) {
    CameraPosition position = new CameraPosition.Builder()
            .target(new LatLng(lat, lng)) // Sets the new camera position
            .zoom(11) // Sets the zoom to level 10
            .tilt(0) // Set the camera tilt to 0 degrees
            .build(); // Builds the CameraPosition object from the builder

    mapboxMap.animateCamera(CameraUpdateFactory.newCameraPosition(position), 1000);
}

ズームレベルや、傾きなどは適宜変更してください。
こちらを実行すると、起動後、カメラの位置が上記で指定した位置が中心になるように移動します。
処理としては以上で完了です。

 

意外と回りくどい方法だな…と思うのは私だけでしょうか…?
レイアウトファイルのXMLでは、地図の初期位置を簡単に指定できるので、コード上でも簡単にできてほしいですね。
ですが、意図していたことは実現できたので問題なし!
もし、同じことに取り組んでいる方は、参考にしていただければと思います。

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

【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)
村上 著者:村上

【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)
村上 著者:村上

【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)
村上 著者:村上

【React】外部関数の定義方法とその呼び出し方法

特に難しいことではないのですが、忘れそうなので備忘録として。
タイトル通り、Reactで関数を別ファイルで定義する方法と、その関数を呼び出す方法についてです。

参考にさせていただいたサイトはこちらから。

JavaScript – react 共通で使いたい関数(112279)|teratail
https://teratail.com/questions/112279

似たようなことを質問している方がいらっしゃったので、助かりました。

 

さて、まず関数の定義方法ですが、下記のように記述すると、外部から呼び出すことができます。

export default function [関数名]() {
  // 処理
}

なおこの時、1関数 1ファイルにしておくと、関数=ファイルとしてディレクトリで管理できるので便利とのことでした。

で、この関数を呼び出し、実行するときは、下記のとおりです。

// 関数の読み込み
import [任意の関数名] from '[ファイルの場所]'

// 関数の実行
[関数名]();

方法としては以上です!
あとは、指定した箇所で関数が実行されます。

 

簡単ですが、以上、関数の定義方法とその呼び出し方法でした。
export default という記述を忘れそうだと思ったので、こうしてまとめました。
うっかり忘れたときの自分のためのコピー元ですね。
もし、同じことをやりたいと思っている方がいらっしゃれば、参考にしていただければと思います。

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

【react-cordova】selectタグの使い方

selectタグを使ってsetstateで値を渡す方法を見つけたので、備忘録として残します(あんまり情報がなかったので探している方は参考にしてみてください!)


this.watch = this.watch.bind(this);

watch() {

var months = this.state.months;

$.ajax({
url: "test.html",
contentType: 'application/json; charset=UTF-8',
data : {

months,

},
success: function(data, textStatus){
console.log(months);

},
error: function(xhr, textStatus, errorThrown){
console.log("ban");
}
});
}

render下にコンポーネントを追加


<select
value={this.state.months}
onChange={ e => this.setState({months: e.target.value}) };
<option value="1"></option>;

</select>;

ES6で書いています。

まずrender内を見ると、valueでthis.state.monthsがデフォルトで最初に生成されています。

下のonchangeを踏むごとに発火してsetstateでajaxで値を飛ばしています。

option valueでは、表示したい値を設定しています。この時に一番上でbindするのを忘れないでください。

jsx内の関数は、html経験者が見るとうわってなると思いますが、stateの流れを理解すれば簡単に実装することができます。

reactで何すればいいの、stateとかpropの使い方が分からないという方はこれをひな型にしてみてください。それでは。
 

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

JetBrains製IDEの機能検索、実行ショートカット

 最近laravelを使う事になり、laravel関係の機能が優秀なJetBrains製のPhpStormにIDEを乗り換えるどうか迷い試用中です。JetBrains製のIDEは他にもPyCharmを元々使っておりJetBrains社の手先になってきています。この記事はPhpStorm、PyCharmを使っていて分かったJetBrains製IDEのショートカットを呼ぶショートカットの紹介です。
 WindowsしかりMacしかりショートカットによる命令はPCのアプリケーションにつきものです。便利な動作を簡単に実行できますが、すべてを覚えている人はそうそういないでしょう。IDEのIはintegrated、統合です。様々なアプリケーションを統合した上にあれもこれも簡単にやりたがるプログラマを相手にするため、そのショートカットと機能の数は膨大なものになっています。JetBrains製のIDEは覚えることすら楽させようとしてきます。
 実行できる事を簡単に知りたい使いたいという要望に応えているのが、下画像のアクションの検索です。

 これ自体はCtrl+Shift+Aで実行できます。画像の様に文字列を打ち込んで実行できる機能を検索、選択でそのまま実行します。IDEに備え付けられた機能のみならず、npm scriptsなどの自作命令もここから実行できます。この他にもファイル名検索(Ctrk+Shift+N)、パス内検索(Ctrk+Shift+F)、3つ合わせたどこでも検索(Shift2連打)が備わっています。


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