カテゴリーアーカイブ JavaScript

takahashi 著者:takahashi

GoogleChrome 70 がリリース HTTPページの警告の厳格化やPWAの正式対応などが追加

いつの間にかGoogleChrome Ver.70がリリースされていたようですね。

New in Chrome 70 – Google Developers

米国現地時間の10月16日にリリースされたVer.70では、幾つか大きな変更がされているようです。

・非SSLサイトで文字入力を行うと、アドレスバーに赤文字の”保護されていない通信”が表示されるように変更

ついに、SSL通信(アドレスがhttps://から始まるもの)に対応していないサイトで、フォームなどのテキストボックスに文字を入力すると、無効なSSLが設定されたサイトと同様にアドレスバーの”保護されていない通信”の表示が赤文字に変化するように変更されました。

これは以前から予告されていた変更で、Chromeの”常時SSLが基本”という考え方を反映した物にするために、段階的に変更されてきたものです。

Moving towards a more secure web – Google Security Blog

入力フォームのない非SSLサイトでは、黒文字の”保護されていない通信”が表示されるだけですが、入力フォームの存在する非SSLサイトの場合は入力フォームに一文字でも何か文字を入力した時点で、アドレスバーの”保護されていない通信”が無効なSSL証明書を搭載したサイトと同様に赤文字に変わります。

事情を知っているユーザーならまだしも、こういった事情を知らない一般ユーザーからすると、セキュリティ的に問題のあるサイトとして見られてしまう可能性があります。

そもそもChromeがこういった対応をする前から、ユーザーになにか情報を入力させる機能を提供する場合はSSLに対応するのが常識でしたし、最近はLet’s Encryptのような無料のSSL証明書もでていますので、まだSSLに対応されていないサイトをお持ちの方はすぐにSSL対応化していただくことをお勧めします。

・Windows版ChromeがPWAに正式に対応

いままで実験的機能として実装されていたPWA(プログレッシブウェブアプリ)ですが、ついにWindows版Chromeで正式に有効化されたようです。
PWAとはWebアプリとして提供されているインターネット上のWebサイトを、あたかもネイティブ(OSにインストールしたような)アプリとして動いているかのように動作させるできることができる機能です。

通常、Webサイトとして作られたWebアプリは、インターネットにつないでいないと起動できないうえ、ユーザーがWebサイトを開かないと何もできない受動的な仕組みでした。
PWAが有効になることで、こういったWebサイトをPWAに対応させることで、対応ブラウザを通してOSのアプリの一つとしてインストールできたり、インターネットに接続していなくても起動できたり、Webサイトを閉じていても通知が受け取れたり、といった恩恵が受けられるようになります。
またPWAの本質はWebサイトなので、各OS用にプログラムを書き直したり、ビルドし直したり、といった作業をほとんどすることなくクロスプラットフォームアプリを作れるのも大きな利点です。

有名どころでは、現時点でTwitter LiteGoogle PhotoなどのサービスがPWAに対応していますので、早速体験してみたい!という方は是非試してみてはいかがでしょうか。

Twitterにアクセスできなくなった「Twitter for Mac」の代わりはChromeのPWAで「Twitter Lite」を使うのが最適? – AAPL.Ch

なお、公式ブログによると、macOS版ChromeではVer.72で正式対応予定とのことですが、早く試したいという方は従来通り実験機能を有効にすることで現時点でも利用できるようになります。(有効化の方法は上記記事をご覧ください。)

・WebWorkerで実装した各処理に名前を付けることが可能に。

WebWorkerとは、javascriptの処理をバックグラウンドで行わせることができる仕組みです。

Javascriptは少し特殊で、基本的にすべての処理をメインスレッド(メインのプロセス)だけで行います。
そのため、Javascriptで書いたプログラムのどこかで重い処理を行ってしまうと、その処理が終わるまでほかの処理を行うことができないため、結果的にWebアプリがフリーズしたような状態になってしまうことがありました。

こういった処理にWebWorkerを使用することで、その部分の処理はメインスレッドとは別のスレッド(プロセス)で行わせることができるため、重い処理を行わせてもWebアプリがフリーズしにくくなり、快適な動作をさせることができます。

今回のアップデートで、WebWorkerで書かれた各処理ごとに名前が付けられるようになったようで、これにより複数のWebWorkerを使用した場合のデバッグがしやすくなるようです。

ほかにも多くの修正が行われたChrome Ver.70。
今回は魅力的な機能もいくつか正式実装されているようですので、Chrome使いの皆さんは変更点を是非チェックしてみてください。

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

Vue.jsの単一ファイルコンポーネント

 Vueはwebページを部分部分に分け、管理することができるJavaScriptフレームワークです。Vueはコンポーネントという単位で、下の画像の四角に当てはまる部分それぞれのHTML、JS、CSSを管理します。小さな四角を集めて大きな四角を作る形です。この手法は関数を小さく分割し、繋げて、積み重ねる、という手法に似ており私は大変好みです。

 単一ファイルコンポーネントはこのコンポーネントを一ファイル一コンポーネントで扱う仕組みです。大本のbodyからtemplateがtemplateを呼び、大きなwebページを管理しやすく作ります。具体的な1コンポーネントコードは例えば次の画像です。

 template内にHTML、script内にJS、style内にCSSときれいにわかれて一つのパーツを作れます。この分割によって改良されたことがシンタックスハイライト、文字の色分けです。HTML中にJS、CSSを直書きしようとした場合、3言語の文法が入り乱れて実に読みにくいです。ここからここまでJS、ここからここまでCSS、という区分で背景色を色分けするエディタはありましたが、余分に色を使う、短文が入ると斑模様になって結局分かりにくい、ということになりました。また、細かい単位、パーツ単位での単体テストが容易になりました。Vueは管理しやすく、記述しやすい便利なフレームワークです。

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

【cordova-react】react.jsでCSSっぽいものを書いてみる

 

最近になってやっとreactの書き方が分かってきました。が、コンポーネントの操作は分かったけどCSSってreactだとどう書くの?

と思いreactで使えるライブラリを漁っていました。material-uiやbootstrapでもかけるのですが、自分にとってはstyled-componentが

使いやすいかなと感じ、チュートリアルでいじってみました。

styled-componentは、render外で定義したstyleの設定とrender内で定義したコンポーネントを紐付けて使うのが主な特徴で

おなじみのボタンやテキストを整えてスタイリッシュなアプリを簡単に作ることができます。

広い範囲でlibraryが提供されているので、最初は書き方に戸惑うことがあるかもしれませんが、慣れてくれば上にあげたライブラリと

同じくらいの働きをしてくれます。

サンプルコードで味気ないですがコードを載せておきます。

import React, { Component } from 'react';
import {BrowserRouter as Router, Switch, Route, Redirect,  Link, NavLink, withRouter} from 'react-router-dom'
import ReactDOM from 'react-dom'
import styled from 'styled-components';


const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
margin-top:6px;  
margin-left: 250px;  
  color: ${props => props.inputColor || "palevioletred"};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;


class Sample extends Component {
  constructor(props) {
    super(props);
	  this.state = {
		}
  }

  render() {
    return (
	   
</div> ); } } export default Sample;

[/java script]

 

公式リファレンスからとってきただけですが、断片的で見にくかったのでフルコードで載せてしまいます。

説明することはあまりないですが、tips程度に解説します。まず、class Sampleの上にclass Inputと定義しています。

これは、render内に書いたinputタグのことを指しています。さきほど言ったようにここでコンポーネントのデザインを変更したりできます。

styled.inputの後に何やら見慣れない「`」という記号があります。(グレイブアクセントと読む)その後ろに通常のcssで使うような

設定がありますが、このグレイブアクセントは関数でいう()のようなもので、後ろの設定は引数と考えてください。

 

この定義をいくつか使うことで、ユーザーの目に優しいデザインをつくることが可能になります。自分もこのライブラリに触れたのが

数日前だったので、動かし方を完全に覚えた訳ではありませんが、cssを触ったことのあるまたは他のライブラリを使ったことがあるとい

う方は感覚的に触っていけばその内馴染んで自在にコンポーネントを作れそうですね。

未経験の方は絵を描く感覚で筆者と一緒にじっくり覚えていきましょう。

 

※es6で書いているので、es5でコードを書いているは適所合わせてください。

 

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

【cordova-react】ログで値が表示されない時の対処法

reactで開発している時に、console.logで変数の中身を見ようとしてログを出す時にハマりました。

 

通常のログならば普通に中身を出してくれるのですが、base64の画像のURLを見るときはobject Objectで隠されて出力されてしまいます。

ここは、console.logと書かずに下記のように少し書き方を変えてみます。


console.log(JSON.stringify(files));

 

JSON.stringifyという関数を使って中の引数に見たい値を追加してください。おそらく中身全部見れるようになったと思います。

 

リサイズした画像や何らかのURIを変換してそれを出力しようとする時によく起きるみたいです。

エラーではありませんが、中身がちゃんと出力されているか気になるというかたは使ってみてもいいと思います。

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

【Cordova】「cordova-plugin-fcm」で取得したトークンが登録されていない時の対処法

以前、「cordova-plugin-fcm」プラグインの getToken() でトークン取得できない時の対処法について紹介しましたが、こちらの方法で取得できたトークンが実は使えなかったので、さらなる対処法についてです。
一応下に以前の記事を載せておきますが、こちらは非推奨ですのでご注意ください。

【Cordova】プラグイン「cordova-plugin-fcm」のgetTokenでnullが返ってくるときの対処法
https://cpoint-lab.co.jp/article/201810/【cordova】プラグイン「cordova-plugin-fcm」のgetTokenでnullが返ってくると/

 

では、今回行った対応策ですが、まず Firebase Console Messaging の設定を確認します。
で、いつから変わったのかは知らないのですが、クラウドメッセージングの設定の APNs証明書を登録する項目で、この証明書に代わり、APNs 認証キーを設定できる様になっていました。
実際の画面はこちら。

推奨しているのは、こちらのAPNs 認証キーとのことでしたので、証明書からキーに変更します。
なお、認証キーは Apple DeveloperCertificates, Identifiers & Profiles ページから作成できます。
そして、この認証キーは一度しかダウンロードできないので、万が一にも消してしまわないように注意してください。

次に、Xcodeの設定です。
Xcode の Workspace Settings から、Build System を変更します。
恐らく、New Build System になっていると思いますので、これを Legacy Build System に変更します。

変更点は上記の2点です。
あとはいつも通り Build して実行したところ、無事に getToken() でトークンが取得できました!

 

以上、getToken() で null が返ってくるときの対処法でした。
Push通知に関しては、もしAndroidで問題なく動いているのなら、iOSの原因は十中八九 証明書周りのはずなので、まずはそのあたりを調査することをおすすめします。

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

【Cordova】プラグイン「cordova-plugin-fcm」のgetTokenでnullが返ってくるときの対処法

現在進行形で格闘中のアプリの修正の中で、解決したものがあったのでそれをご紹介。
タイトル通り、「cordova-plugin-fcm」で端末の一意のトークンを取得する getToken() で、なぜか取得した値が null になる時の対処法です。
他にも同じエラーに悩んでいる人はいたようだったので、ある程度簡単に情報はヒットしました。
で、今回参考にしたサイトはこちら。

getToken() returns ‘null’ only after install・Issues #104・fechanique/cordova-plugin-fcm・GitHub
https://github.com/fechanique/cordova-plugin-fcm/issues/104

 

解決策としましては、もしトークンが取得できなかった場合は、onTokenRefresh() を使って、トークンを再取得しなおす方法が良いとのこと。
実際のコードはこちら。

FCMPlugin.getToken(
    (token) => {
        if(token == null){
            FCMPlugin.onTokenRefresh(function(token){
                // onTokenRefresh() でトークンを取得時の処理
            });
        } else {
            // getToken() でトークンを取得した時の処理
        }
    },
    (err) => {
        // エラー時の処理
    }
);

こんな感じです。
もし、getToken() で取得したトークンが null だったら、onTokenRefresh() でトークンを再取得しています。
現時点では、問題なくトークンが取得できました!
取得できたトークンはデータベースに保存なりして、プッシュ通知の送付に使います。

…が、なぜか今度はプッシュ通知が送れず…。
Androidだと、上記のトークンが取得できない問題もなく、あっさりとプッシュ通知送付まで実装できたのですが、まさかiOSでつまづくとは…。
一難去ってまた一難という感じですが…引き続き頑張ります。

 

ということで、cordova-plugin-fcm プラグインでトークンが取得できない時の対処法でした。
同じことにお困りの方は、是非お試しください。

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

【cordova-react】プラグインについての豆情報(二つあります)

今日はお題は二つの小ネタです。一つ目はcameraプラグインについてです。

 

cordova-camera-pluginとphonegap-camera-pluginはコルドバでカメラを使うことができるプラグインです。

自分のファイルの中にこの両方が入っており、どちらか消しても問題ないだろうと思いcordova-camera-pluginを削除したのですが

動かなくなりました。慌てて入れ直すとあっさりと元通り。なんでニコイチやねんと思いました。

米国のサイトまでいって調べたのですが、原因は分からずじまいです。

 

二つ目はプラグインを入れるタイミングの話です。

cordova platform rm androidした後にプラグインを入れてadd platformすると下記の画像のように怒られます。

原因は確信ではないのですが、直前に入れたプラグインを記憶できないためだと思われます。

なので必ず新しいplatformを入れてからプラグインを導入してくださいね、という感じです。赤文字は怖いですが大抵グレイドルか

プラグイン関係なので恐れることはないと思います。

以上小ネタでした。

 

  • この記事いいね! (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)
村上 著者:村上

【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)