2018-08-03

【メモ】最近使ったメソッド

JavaScript

前置き

メソッドとかさ、引数や使い方しっかり覚えなくてもいいじゃんって思ってました。調べればすぐわかることだし。
「あー確かあんな処理するメソッドあったよなー」ぐらい覚えとけば、どうとでもなるじゃん？って思ってました。

でも考え改めました。
単純に、過去使った記憶あるのに調べ直してる時間もったいない。笑
覚えとけば反射的に書けるのに、いちいち調べてるの本当無駄だなぁって・・・。(今さら気づくっていう)

だから覚えるためにメモっとこっていう、そういう意図です。

メモ

array.find(function(element, index, array)[, this])

●特徴

関数の結果にマッチする配列内の最初の要素を返す。
配列内の要素一つ一つに対し関数を適用してくれる。
なんか要素取り出したい時に使った。

●引数

element
配列内の要素で、現在処理されているもの。
index
配列内の要素で、現在処理されているものの番号。
array
今findを実行している配列。
this (任意)
関数が実行される時にthisとして使われるオブジェクト。
使ったことないからピンとこない。

●戻り値

関数の結果にマッチした最初の要素。

●使用例

配列内に欲しい要素があることは推測できてるけど、indexがわからなくて取り出せない時に使ったような気がする。

const regions = ['名古屋', '東京', '仙台', '横浜', '沖縄']
const yokohama = regions.find((region) => { return region == '横浜'})
console.log(yokohama) //横浜

const nums = [10, 4, 9, 13, 20, 1, 5, 17]
const numOver10 = numbers.find((num) => { return num > 10})
console.log(numOver10) //13 (17と20は戻り値にならない)

array.filter(function(element, index, array)[, this])

●特徴

関数の結果にマッチする配列内の要素を全て取り出して、新しい配列を生成する。
配列内の要素一つ一つに対し関数を適用してくれる。
マッチした要素は残るけど、マッチしなかった要素は取り除かれる。
元の配列は変化しない。

●引数

●戻り値

関数の結果にマッチした要素が格納された配列。

●使用例

array.find()と同様だけど、該当する要素が複数あると思われる場合に使ったような気がする。

const regions = ['名古屋', '東京', '仙台', '横浜', '沖縄', '和歌山']
const matchRegions = regions.filter((region) => { return region.length == 2})
console.log(matchRegions) // ["東京", "仙台", "横浜", "沖縄"]

const nums = [10, 4, 9, 13, 20, 1, 5, 17]
const numsOver10 = numbers.find((num) => { return num > 10})
console.log(numsOver10) // [13, 20, 17]

●余談

個人的にだけど、filter() より match() とか pick() っていう名前の方が合ってると思う。どうにもならないけど。笑
filter() だとマッチする要素が返ってくるんじゃなくて、逆にマッチしない要素が入るのかな？って思っちゃう。
まあ解釈は個人によると思うけどっていうか、私があまり英語を理解してないだけか。

もちろんもっとあるけど、とりあえずまた今度編集します。

2018-07-24

Google Maps APIとの戦い　ポリゴン描画編完結(多分)

Google map Google Maps API JavaScript

2週間ぐらい前に言及したけど

そこから全く触れてなかったポリゴン描画問題

たしか、すでに頂点が描画定まってるポリゴンに対して

ポリゴンを崩さず任意の辺に新しく頂点加えられるかっていうミッション

結論からいうと、簡単にできました😘

結局PolygonクラスじゃなくてPolylineクラスを利用しました。

なぜならば有能プロパティeditableがあったから。

Polyline: editable - ポリラインの編集の有効、無効

こちらのサイトを見ていただければこの有能プロパティの動作がわかるでしょう。

ポリゴンもポリラインも、各頂点・ポイントの緯度経度セットが順々に描画されていくから

f:id:smspring0426:20180712000708j:plain

新しい点を赤い点の箇所に打とうものなら

f:id:smspring0426:20180712000905j:plain

こんな感じになっちゃうよっていうお話でした。

だから困ったなあ〜って思ってたんですけど。

Polylineクラスのeditableプロパティが、どういう仕組みか

新しく引き伸ばした箇所に生成された頂点を

元々あった頂点と頂点の間に入れて保持してくれるわけです。

なので、PolygonクラスとPolylineクラスを駆使して、
任意の位置に打ったポリゴンを編集可能な状態にし保存する一連の流れを作ってみました。

都合によりVue仕様です。

<script defer>

let map
let polygon
let polyline

function initMap() {
　map = new google.maps.Map(document.getElementById('map'), {
　　center: {lat: 35.6869, lng: 139.6444 },
　　zoom: 17
　})

　polygon = new google.maps.Polygon({
　　map: map
　})

　polyline = new google.maps.Polyline({
　　strokeWeight: 1
　})
}

window.onload = function() {
　const vue = new Vue({
　　data: {
　　　map: null,
　　　polygon: null,
　　　polyline: null,
　　　latLngs: [ [ ] ],　// ポリラインの各ポイントの緯度経度
　　　polygonLatLngs: [ ],　//ポリゴン用緯度経度
　　　saved: []　// ポリゴンとポリラインのセットが入る
　　},
　　el: '#app',
　　mounted() {
　　　this.map = map
　　　this.polygon = polygon
　　　this.polyline = polyline

　　　// クリックした箇所の緯度経度取得・ポリライン作成
　　　this.map.addListener('click', (e) => {
　　　　this.latLngs[0].push({
　　　　　lat: e.latLng.lat(),
　　　　　lng: e.latLng.lng()
　　　　})
　　　　this.makePolyline(this.latLngs[0])
　　　})

　　　// shift+enterでポリゴン保存発火
　　　document.addEventListener('keydown', (e) => {
　　　　const shift = event.shiftKey
　　　　const keyName = event.key
　　　　if (shift && keyName == 'Enter') {　this.makePolygon()　}
　　　})
　　},
　　methods: {
　　// ポリライン作成
　　　makePolyline(path) {
　　　　this.polyline.setOptions({
　　　　　path: path,
　　　　　map: this.map
　　　　})
　　　},
　　// ポリライン編集切り替え
　　　switchEditPolyline(boolean) {
　　　　this.polyline.setEditable(boolean)
　　　},
　　// ポリゴン作成
　　　makePolygon() {
　　　　this.polygonLatLngs.push(this.polyline.getPath())
　　　　const endPoint = this.polygonLatLngs[0].b[0]
　　　　this.polygonLatLngs[0].push(endPoint)
　　　　this.polygon.setOptions({
　　　　　fillColor: '81F7F3',
　　　　　strokeWeight: 0,
　　　　　paths: this.polygonLatLngs
　　　　})
　　　　this.switchEditPolyline(true)
　　　},
　　// ポリゴン保存
　　　savePolygon() {
　　　　const polygon = new google.maps.Polygon({
　　　　　map: map,
　　　　　fillColor: this.polygon.fillColor,
　　　　　fillOpacity: 0.8,
　　　　　strokeColor: this.polygon.fillColor,
　　　　　strokeWeight: 1,
　　　　　paths: this.polygonLatLngs
　　　　})
　　　　const polyline = new google.maps.Polyline({
　　　　　map: map,
　　　　　strokeWeight: 1,
　　　　　path: this.polygonLatLngs[0].b,
　　　　})
　　　　this.saved.push({
　　　　　polygon: polygon,
　　　　　polyline: polyline
　　　　})
　　　}

・・・省略

・ポリゴンは始点と終点が同じ緯度経度になるので、makePolygon内でendpoint作って配列に格納してます　　　

・ポリゴンのpathsとポリラインのpathややこしい

・this.polygonLatLngs[0].b[0]で緯度経度取得してますが、bって何。てかこの取得方法で合ってるのか　　　　　　　　

ペーペーが書いたコードなので、修正点・改善点あると思います。教えてくださる人いらっしゃったらとても嬉しいです。

とりあえずそろそろ寝る準備しなきゃ〜　　　　

2018-07-22

App MakerのHTMLwidget

G Suiteのビジネスプランに加入すると使えるようになっちゃうApp Maker

App Makerを使うと、

いい感じのアプリケーションがペタペタっと手早く作れるっぽいです。

f:id:smspring0426:20180722150728p:plain

(これはApp Maker上にあったサンプルです)

なんでペタペタっと作れるかというと、

ボタンとかテキストボックスとか主要な機能がwidget化されていて

それをドラッグ&ドロップで任意の箇所に配置すれば作れちゃうから。

htmlを書くことなく、且つcssのmarginやflexboxとかで調整しなくても

リストやボタンとかが生成できて好きな場所に配置できます。

あんまり勉強にはならないけど、

自由にカスタマイズできるからちょっと楽しい。(個人的な意見)

提供されているwidgetもかなり多いのですが

その中の1つ、HTMLwidgetについての備忘録。

HTMLwidget

HTMLwidget内の<script>は動作しないっぽい

Use the HTML widget to display arbitrary HTML. In the editor, the HTML widget doesn't execute scripts or inherit global styles, so the widget might look slightly different when you preview or publish your app.

Display Widgets | App Maker | Google Developers

英語あまり得意じゃないから自信はないけど、公式のドキュメントにも

scriptは動作しないよって書いてある・・・よね？笑

まあ実際にHTMLwidget内の<script>に色々書いてみたけど

実行されなかったので、多分間違いないと思います。

EventsプロパティのonAttachに実行させたい事を書こう

本来htmlの<script>に書きたい事は、HTMLwidgetのEventsプロパティonAttachに

書いとけば期待通りに動いてくれる。実際動いてくれた。

f:id:smspring0426:20180722153445p:plain

こんな感じ

そもそもallowUnsafeHtmlにチェック入れないと動かないよ

f:id:smspring0426:20180722153830p:plain

HTMLwidgetのプロパティ欄にあるallowUnsafeHtml

これにチェックを入れないと、

HTMLwidget内のDOMを操作する事はできないみたい。実際そうでした。

でも、XSSの危険性があるから推奨されてはいないね。

Disables HTML sanitization allowing a potentially dangerous HTML markup like scripts, applets, frames, etc.

Note: It is advisable to keep this property disabled to allow only safe HTML. If an unsafe html is allowed and user input can affect html property of the widget, it can lead to a cross-site scripting (XSS) attack.

とりあえずHTMLwidgetについてわかった事はこんな感じですね。

まだ本格的にApp Makerでアプリケーション作りに取り組んでいるわけじゃないから

全て把握はできてないんだけど

HTMLwidgetが必要な場面ってあるのかな、、、笑

他のwidgetが本当に種類豊富で、わざわざHTMLwidget使ってカスタマイズしなくても

事足りるんじゃないかっていう見解があるんだけど

まあ、世の中100%の事はないもんね。すみません、精進します。

参考にしたもの

Display Widgets | App Maker | Google Developers

appmaker - How to Call HTML Id in App Maker - Stack Overflow

2018-07-12

Googlemapにポリゴン描画その1

Google map Google Maps API JavaScript

今やってること

Google Maps APIを使って、任意のポリゴンを描画しようとしてます。

クリックしたところの座標取得＆マークして、それらマーク地点を結び合わせるとポリゴンできちゃうよ的な。

f:id:smspring0426:20180711223745j:image

イメージはこんな感じ。

やりたいこと

この座標取得→描画まではできているけど、問題はその先にあり。

完成したポリゴンの微修正をどう行おうかということです。

f:id:smspring0426:20180711224425j:image

やっぱオレンジ線みたいなポリゴンにしたいなって思った場合、

最初から描画するもいいかもしれないけれど、本当に微修正だったら既存のムラサキ線ポリゴンをちょちょっと動かしてなんとかできたら楽ですよね。

要は新たに頂点を増やせば達成できるかなーって思ってるんですけど。

試すつもりのこと

まだ調べてないからできるかどうかわからないけど、

ポリゴンの任意の辺に座標マーク(= ★)
★がある任意の辺の頂点座標取得
頂点座標が座標配列のどこにあるかサーチ
頂点座標Aと頂点座標Bの間に★をセット
ポリゴン外の新たに頂点増やしたい箇所に座標マーク(= ☆)
★の座標を☆の座標に変更

こんな流れでできないかなーみたいな。

ん？素直に頂点増やしたい箇所に座標マークすればいいのでは？って思うかもしれません。私も最初そう思ってました。

でもそれだと意図しないポリゴンになっちゃうんですよね。

なんでかっていうと、google.maps.Polygonはあくまでセットされた座標の順番でしかポリゴンを象らないというか。

f:id:smspring0426:20180712000708j:image

ピンクの点を新たにマークしたとして、

この座標は配列の一番後ろにセットされるので、6番目に線が繋がれることになります。

f:id:smspring0426:20180712000905j:image

多分こんな感じになる。

まあ私のやり方でできないだけであって、他のやり方によってはできるのかもしれない。

ちなみに今の実装具合

今大体こんな感じに実装しています。

map.addListener((e) => {

クリックした地点の中心地取得
クリックした地点の座標取得
取得した座標を配列に収める
new google.maps.Polygonに中心地と座標入れた配列セット → 描画

})

(スマホから入力してるのと、コードうろ覚えだから詳細は諦めた。今度編集する)

試すつもりのことで前述していた座標配列は、3. のことです。

実行したイメージは、

一点→二線→三角形→四角形→・・・

とポリゴンが変化していく感じ。

クリックごとに座標が蓄積される配列をまるっとポリゴンにセットしてるので、上記のような感じになります。

もしかしたらポリゴンじゃなくて、google.maps.Polylineでポリラインの方がいいかもしれない。

とにかく試したらまた書こうと思います。

ここからどうでもいいこと

日々、とてもビシビシに、バシバシに教えてもらってるおかげで色々とちょっとはましになってるけど

本当に活かしきれてるのかなー、、笑

いつも大丈夫かなってちょっと心配な気持ちを持ちながら仕事してるけど、じゃあ一体何に対して心配してるのかって言われたら、これで合ってるのかなっていう正解がわからない不安。

あ、でもタスクによるか。最近はちょっと自信ついてきたかもしれない。

2018-07-01

7月、ブログ始めました

7月1日

この日をもって、
私はエンジニア歴4ヶ月になりました

4ヶ月も経てばわからないことも
ちっとはわかるようになってきます

ただわかるようになればなるほど
わからないことが増えていくのもまた事実

それらの過程を残しておきたいのと
アウトプットの練習を目的として
ブログ始めてみます

誰かの役に立てるようになれたらいいな、、笑

In my head.

感想と考え事とメモ

【メモ】最近使ったメソッド

前置き

メモ

array.find(function(element, index, array)[, this])

●特徴

●引数

●戻り値

●使用例

array.filter(function(element, index, array)[, this])

●特徴

●引数

●戻り値

●使用例

●余談

Google Maps APIとの戦い　ポリゴン描画編完結(多分)

App MakerのHTMLwidget

HTMLwidget

Googlemapにポリゴン描画その1

今やってること

やりたいこと

試すつもりのこと

ちなみに今の実装具合

ここからどうでもいいこと

7月、ブログ始めました