投稿者「たづ」のアーカイブ

スマホワイヤレス充電器 Anker PowerWave 7.5 Stand レビュー

買ったもの

Anker PowerWave 7.5 Stand
https://www.amazon.co.jp/gp/product/B07DJC28GS

概要

iPhoneを立てかけているだけで充電ができるというハイテクスマホスタンド。充電が一気に楽になるし場所も取らない。スマホの流れに取り残されないための必需品。

良い点・悪い点

良い点

  • 超楽
  • 音なども特になし
  • 場所もとらない

悪い点

  • 個体差かもしれないが5ヶ月ほどで充電できなくなった

保証は18ヶ月と長いようなので、保証をよく確認してから買うことをおすすめします。

ワイヤレス充電器を持ってない人へのおすすめ度

6点(/10点中)。機能としては10点満点ですが1回故障したので。

雑感

とにかく楽。5ヶ月で充電できなくなったので交換したのでそこがなければもっと良かった。

Googleマイマップの更新情報をSlackに通知する

やりたいこと

Googleマイマップにラーメン屋の感想を入力し、Slackに内容を通知して共有したい

調べた限り、マイマップには更新を検知するためのwebhook設定などはない。
今回はGoogle Apps Script, Fusion Tablesを利用して実現する。
※Fusion Tablesは2019年12月でサービス終了のアナウンスが流れているため注意してください

f:id:KongariBug:20181215041931p:plain

各種利用するサービスについて

マイマップ

マイマップ – 概要 – Google マップ

自分専用のGoogle Mapを作り、メモとかピンができる

https://i.gyazo.com/c68be0a1c5033d08c08c51427be08558.png

Fusion Tables

About Fusion Tables – Fusion Tables Help

スプレッドシートRDBMSのようにSQLで編集することができる。

実装

既存マイマップをFusion Tablesに落とし込む

マイマップはkmlというxml形式でエクスポートすることができる。

f:id:KongariBug:20181215042807p:plain

ダウンロードしたkmlファイルを開いてURLをたどっていくと以下のような形式のkmlがダウンロードできるリンクにたどり着く

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>hogehogeマップ</name>
<description>hogehoge</description>

上記kmlをダウンロードし、新規作成したFusion Tablesにインポートする

f:id:KongariBug:20181215043309p:plain

正しくインポートされたら name , description カラムが追加される

f:id:KongariBug:20181215044107p:plain

Google Apps Scriptでkmlを監視する

以下に全文ソース記載。やっていることは

  1. 現在のFusion Tablesのデータを取得
  2. 現在のkmlのデータを取得
  3. kmlからpinデータのみを抽出
  4. Fusion Tablesのデータと比較
  5. Fusion Tablesにないものは新規レビューとしてFusion Tablesに追加、Slackに通知
function myFunction() {
// table id を入力
var tableId = '*****************************************';
var selectSql = 'SELECT name, description FROM ' + tableId;
var res = FusionTables.Query.sql(selectSql);
// fusion tableのデータをハッシュに
var fusionTable = {};
for(var i = 0; i < res.rows.length; i++) {
var name = res.rows[i][0];
var description = res.rows[i][1];
fusionTable[name] = fusionTable[name] || [];
fusionTable[name].push(description);
}
// kml urlを入力
var kmlUrl = 'https://www.google.com/maps/d/kml?forcekml=1&mid=******************************';
var kmlResponse = UrlFetchApp.fetch(kmlUrl);
var xml = XmlService.parse(kmlResponse.getContentText());
// ハードコーディングしているが取得したほうが安全
var namespace = XmlService.getNamespace('http://www.opengis.net/kml/2.2')
// kmlのFolder Elementの中にデータあり
var folders = xml.getRootElement().getChildren()[0].getChildren('Folder', namespace);
for(var i = 0; i < folders.length; i++) {
var folder = folders[i];
// name, descriptionのみを取り出す
var placemarks = folder.getChildren("Placemark", namespace);
for(var j = 0; j < placemarks.length; j++) {
var nameElement = placemarks[j].getChild("name", namespace);
var descriptionElement = placemarks[j].getChild("description", namespace);
var name = '';
var description = '';
if(nameElement) name = nameElement.getValue().trim();
if(descriptionElement) description = descriptionElement.getValue().trim();
// 現在のFusion Tablesとの比較
if(!fusionTable[name] || fusionTable[name].indexOf(description) == -1) {
Logger.log(name + ": false");
Logger.log("name")
Logger.log(name);
Logger.log("description");
Logger.log(description);
Logger.log("fusionTable");
Logger.log(fusionTable[name]);
var insertSql = 'INSERT INTO ' + tableId + '(name, description) VALUES (\'' + name + '\', \'' + description + '\');';
FusionTables.Query.sql(insertSql);
sendSlackMessage(name, description);
}
}
}
}
function sendSlackMessage(name, description) {
// Slack incoming webhook URLを入力
var slackWebhook = 'https://hooks.slack.com/services/****************************;
var options = {
"method": "post",
"contentType": "application/json",
"payload": JSON.stringify({ "text": "*" + name + "*\n" + description })
};
UrlFetchApp.fetch(slackWebhook, options);
}

定期的に実行する

GASを定期実行するトリガーを設定する

f:id:KongariBug:20181215044913p:plain

Done

参考URL

Fusion Tables×Google Apps Script(Webアプリケーション作成編1) – Qiita

yarn install 中の node-sass エラー

make: *** [Release/obj.target/binding/src/binding.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/vagrant/rails/yuyuyui/node_modules/node-gyp/lib/build.js:258:23)
gyp ERR! stack     at ChildProcess.emit (events.js:182:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:237:12)
gyp ERR! System Linux 4.15.0-20-generic
gyp ERR! command "/usr/local/bin/node" "/home/vagrant/rails/yuyuyui/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /home/vagrant/rails/yuyuyui/node_modules/node-sass
gyp ERR! node -v v10.6.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
Build failed with error code: 1

nodeのバージョンの問題らしい

nodeのバージョンを 10.6.0 -> 9.0.0 にしたら治った。9.0.0は別の環境と揃えただけのバージョンなので良いバージョンを探すと良さそう。

rails/webpackerを使ってRailsで定義した定数をTypeScript(JavaScript)内で使う

環境

  • Rails5.1.4
  • rails/webpacker 3.2.1

公式のdocumentにあるerb-loaderを利用する。 https://github.com/rails/webpacker#erb

ubuntu@ubuntu-xenial:~/rails/yuyuyui$ bundle exec rails webpacker:install:erb
rails aborted!
Don't know how to build task 'webpacker:install:erb' (see --tasks)

taskがないと言われた(この時点ではrails/webpacker 3.0.1あたりだった)。webpackerをupgradeする

ubuntu@ubuntu-xenial:~/rails/yuyuyui$ bundle update webpacker
ubuntu@ubuntu-xenial:~/rails/yuyuyui$ bundle exec rake -T | grep erb
rake webpacker:install:erb              # Install everything needed for Erb

タスクができたので再実行する

ubuntu@ubuntu-xenial:~/rails/yuyuyui$ bundle exec rails webpacker:install:erb
Webpacker is installed �
sing /home/ubuntu/rails/yuyuyui/config/webpacker.yml file for setting up webpack paths
Copying erb loader to config/webpack/loaders
create  config/webpack/loaders/erb.js
Adding erb loader to config/webpack/environment.js
insert  config/webpack/environment.js
insert  config/webpack/environment.js
Updating webpack paths to include .erb file extension
insert  config/webpacker.yml
Copying the example entry file to /home/ubuntu/rails/yuyuyui/app/javascript/packs
create  app/javascript/packs/hello_erb.js.erb
Installing all Erb dependencies
run  yarn add rails-erb-loader from "."

いろいろファイルができた。とりあえずwebpack-dev-serverを起動してみる

ubuntu@ubuntu-xenial:~/rails/yuyuyui$ bundle exec bin/webpack-dev-server
/home/ubuntu/rails/yuyuyui/config/webpack/environment.js:4
environment.loaders.append('erb', erb)
^
TypeError: environment.loaders.append is not a function

appendがないと言われる。理由はわからないがとりあえず config/webpack/environment.js 内のappendをsetにして回避する(情報求)

environment.loaders.set('erb', erb)

これで使えるようになる。今回はTypeScriptに書きたいので、config/webpack/loaders/erb.jstest: を以下のように書き換える。

module.exports = {
test: /\.(erb|ts)$/,
enforce: 'pre',
exclude: /node_modules/,
use: [{
loader: 'rails-erb-loader',
options: {
runner: 'bin/rails runner'
}
}]
}

これで例えばconfig gemを利用して以下のようなTypeScriptが書ける。

    getCards(): Observable<Card[]> {
let url = "http://<%= Settings['api_host'] %>/api/cards.json";
return this.http.get<Card[]>(url);
}

Rails5.1 + Angular4で templateUrl, styleUrlsの代替

以前紹介したとおりRails5.1+rails webpackでtemplateUrlを使うことはできない。

Rails5.1.2でAngularを使うとtemplateUrlでエラーが出る – こんがりぃ

ちなみにドキュメントがReadmeからdocディレクトリに移ったみたい。

webpacker/typescript.md at master · rails/webpacker · GitHub

ではstyleUrlsの代替は

@Component({
selector: 'hogehoge',
styles: [require('./app.component.css').toString()]
})

これでOK。

TS2304: Cannot find name 'require'. というエラーが出た場合は

yarn add @types/node

でOK。

angular – Cannot find name 'require' after upgrading to Angular4 – Stack Overflow

BootstrapのModal内でSelect2をうまく表示する

BootstrapのModal内でSelect2を使うとレイアウトが崩れてしまう。

Modalの tabindex = -1 を取るといいというのもあるらしいが、それをしてもレイアウトが崩れて困っていたが以下のリンクの通りすればいけた。

github.com

$('.hoge').select2({
dropdownParent: $('.fuga')
})

Rails5.1.2でAngularを使うとtemplateUrlでエラーが出る

概要

エラーの出るソース

import { Component } from '@angular/core';
@Component({
selector: 'hello-angular',
templateUrl: './app.component.html'
})
export class AppComponent {
name = 'Angular!';
}

エラー内容

サーバ側

ActionController::RoutingError (No route matches [GET] "/app.component.html"):

クライアント側

http://192.168.33.99:3000/app.component.html [HTTP/1.1 404 Not Found 41ms]
Unhandled Promise rejection: Failed to load app.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load app.component.html undefined

解決法

stackoverflow.com

rails/webpackのgithub上に書いてる Use HTML templates with Typescript and Angular の手順通りにする

github.com

templateUrlではなくtemplateに落とし込んで頑張ってレンダリングするっぽい。