月別アーカイブ 2月 2019

takahashi 著者:takahashi

GoogleChromeで本格的で詳細な地震情報が受信できる拡張機能 “強震モニタ Extension”

緊急地震速報を自宅でも受信、特に自宅で常時稼働させているLinuxサーバー上で緊急地震速報を受信できるものはないかといろいろな探していたのですが、Windows、Android以外で使える緊急地震速報ソフトはなかなかありません。

あらゆるOSで利用できるGoogleChromeの拡張機能として緊急地震速報を受信できるものは存在していますが、ポップアップを表示するのみで残り秒数がわからなかったり、見逃しやすかったりといまいちな感じでした。

そんな中、先日別のことを調べていたら、たまたま偶然理想的な緊急地震速報Chrome拡張を発見しました!

その名も 強震モニタExtension です。

起動すると、このように日本全国の揺れの状態を地図上に色で表示した画面が表示されます。
揺れの強さの単位は震度ではなくgal(ガル)で表されます。

これだけではただ全国の揺れの状況を確認できるだけですが、設定を行うことで、地震発生時に音声を含めた通知を行わせることができます。

設定がかなり細かくできるので、最初見たときは戸惑いますが、通知の設定では基準として震度も指定できるので、地震に詳しくない人でも安心です。

実際どのように動作するかもチェックしたいポイントかと思います。
Youtube上で実際に動作している動画を見つけましたのでご紹介します。

画面右上の枠が今回ご紹介している拡張機能の画面です。

精度の高い緊急地震速報が発表される前から揺れの状態を監視することができるので、左上のウェザーニューズ社の緊急地震速報よりも早く警告が表示されており、ちゃんと通知音や地震の到達済みエリアも表示されていて、かなり高性能なアプリになっているようです。
(ちなみに、左上のウェザーニューズ社の地震速報も、有料会員になれば個人でも利用可能とのこと。個人で緊急地震速報を受信できるサービス自体あまり多くないので、こちらも貴重です。)

なお、Android版の強震モニタもあるようですので、Androidスマートフォンを持っていればスマホで同様の情報を見ることができます。

強震モニタEx

強震モニタEx

minamix86posted withアプリーチ

大きな地震が起きた際、震源地に近い地域にいた場合は地震発生から到達までほんの数秒しかない、という場合もよくあるようです。
テレビでも緊急地震速報は確認できますが、常にテレビをつけているとは限りませんし、いつ起きてもすぐに地震速報が受け取れる環境があると安心ですよね。

専用の機器が必要になるサービスが多く、そういったものを個人で導入しようとすると費用的な問題がありますが、PCやスマホで受信するものは無料~数百円程度で利用できるのでとてもありがたいです。

ちょっと地震の対策をしておきたいな~と思っている方は、是非こういった速報系アプリもチェックしてみてはいかがでしょうか。

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

【Cordova】アプリに指紋認証機能を追加できるプラグイン「cordova-plugin-keychain-touch-id」

実際に使ってはいないのですが、面白そう&いつか使ってみたいと思ったので、覚書としてまとめ。
指紋認証機能を実装するためのCordovaプラグイン「cordova-plugin-keychain-touch-id」です。

GitHub のページはこちらから。

GitHub – sjhoeksma/cordova-plugin-keychain-touch-id: Touch ID plugin with saving password in keychain for IOS and android
https://github.com/sjhoeksma/cordova-plugin-keychain-touch-id

なお、Android、iOS の両方に対応しています。

プラグインについて書かれた記事はこちら。

指紋認証プラグインcordova-plugin-keychain-touch-idを使ってパスワードをセキュアに保存しよう|モナカプレス
https://press.monaca.io/atsushi/2898

とても詳細に書かれているので、参考になります。
また生体認証は、指紋以外にも、顔認証に対応していればこちらも使用できます。

 

まだ実際に実装していないので、ざっくりとしたまとめになりますが…プラグインには下記の3種類のメソッドがあります。

  • window.plugins.touchid.isAvailable
  • window.plugins.touchid.save
  • window.plugins.touchid.verify

上からそれぞれ、「生体認証が使用可能かどうかのチェック」、「パスワードの保存」、「保存したパスワードの取得」が行えます。
window.plugins.touchid.isAvailable では、生体認証が使用可能かのチェックと、使用できる生体認証の種類(指紋 or 顔)を判断できます。
で、保存したパスワードを取得する際に実行する window.plugins.touchid.verify で、生体認証を使用しているようです。
認証に成功したら、保存したパスワードを取得できます。

 

以上、Cordova プラグインで生体認証機能を使用する方法でした。
そこまで複雑な設定等は必要なさそうだったので、是非機会があれば使用してみたいです。

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

【git】初心者向け:githubでリポジトリをさくっと作る

今回は、githubでリポジトリを作りましょうという初級者向けのお題になります。githubを使っているエンジニアさんには分かると思いますが、gitなにそれ美味しいの?みたいな初心者さんだとまずどこから触って作ればいいかも分からない状態です。特に、リポジトリを作る手段においては手段が多くどの方法で作ればいいのか初学者さんには分かりにくいかと思います。作ってみてもコードと連携してくれなくてまた一から作り直したりと途方に暮れる思いをしてしまうかと思われます。今回は、なるべくめんどくさいことをせずに簡単にリポジトリをつくっちゃおうというテーマに沿って進めていきたいと思います。それでは本題に入りたいと思います。

まず、gitにログインしてリポジトリタグをクリックしてダッシュボードに移動したら左側のNEWというボタンをクリックします。

 

すると、次のような画面が現れるかと思います。リポジトリネームという空欄に、任意で決めたリポジトリ名を記述します。initialize this repository with  a REDUME(リポジトリの概要と設計書のような役割を持つファイルです。複数で開発するとき以外はあまり使われないです)のチェックボックスをクリックしてクリエイトリポジトリ(緑のボタン)押してください。

記入漏れが無ければ下のような画面に移動すると思います。矢印が指しているアップロードファイルをクリックします。(機械的な説明ですみません)

クリックすると、真ん中にファイルが並んだような画面に移動します。このページにリポジトリにしたいプロジェクトをドラッグします。ドラッグ後は、画面下のコミットチェンジという緑のボタンを押してください。

以上で、リポジトリの作成手続きは終了です。画面左上に自分の作成したリポジトリ名が表示されるので、確認してみてください。(ここではsamplerという名前を使っています)

説明下手なので自信がないのですが、いかがでしょうか。画面便りのレクチャーですが、後はこれでコマンドなりソースツリーなりでリモートリポジトリを作れば、gitと連動したプロジェクトを作ることができます。自分もgit初心者ですが、backlogでも同じような作業をしていたのでまだとっつきやすかったのです。これから開発に入って作業をする初心者の方も、プロジェクトメンバーでgitを触る前に個人で練習用のリポジトリやgitの操作を試してみて慣らしておくと捗ると思います。

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

【Vue.js】デフォルト値による簡易な引数で呼び出せる柔軟なコンポーネント

 Vue.jsではしばしばカスタムHTMLタグとも言える程、小さな部品を作りたくなります。例えばform中の入力欄です。簡易に作るのであれば次の様にlabelとinputに必須属性とユーザ向けの多少の文言をつけるのみです。

<label for="login_username">ユーザ名</label>
<input
  id="login_username"
  type="text"
  name="username">

 実際にはこれにデザインが加わります。

<div class="row">
  <div class="col-md-12">
    <div class="form-group row">
      <label
        class="col-md-3 col-form-label text-md-right"
        for="login_username">ユーザ名</label>
      <input
        id="login_username"
        type="text"
        class="col-md-9 custom-control-input"
        name="username">
    </div>
  </div>
</div>

 Vue.jsを用いるならば、inputタグのvalueと何かしらの変数を同期させたくなるでしょう。動的なバリデーション、警告を追加もするでしょう。

<div class="row">
  <div class="col-md-12">
    <div class="form-group row">
      <label
        class="col-md-3 col-form-label text-md-right"
        for="login_username">ユーザ名</label>
      <div class="col-md-9">
        <input
          id="login_username"
          v-model="vModelValue"
          type="text"
          class="custom-control-input"
          name="username"
          @input="validation()">
       <div
          v-show="isValidationErr"
          class="text-black-50">{{ localValidationErrMsg }}</div>
      </div>
    </div>
  </div>
</div>

 シンプルなtype=”text”でこれです。inputタグの属性に凝ると更にvalue、placeholder、required、typeがnumberならばstep、max、minなどが増えます。これはたかだか一つの入力欄でありフォーム全体を考えた場合、inputタグセットが十個近く並んだりもします。素のHTMLコードのままその様なものを記述した場合、可読性が落ちてしまい開発も保守もやり難くなってしまいます。Vue.jsでコンポーネントとしてまとめることでとりあえずの解決を図ります。

 上のJSFiddleでコンポーネントを用いているHTMLコードは18行程です。実際はコンポーネント定義をHTMLコードと別の1ファイルにまとめるため、コンポーネント定義部はカウントしていません。上述した20行程のinputタグ周りを重ねて書くよりよっぽど楽になりました。
 コンポーネントを用いることで記述は楽になりましたが、全てtype=”text”で様々な属性が全くないinputタグセットでしかなく、柔軟性が犠牲になっています。属性を指定するための引数を増やすことによってもっと柔軟なコンポーネントにします。柔軟にするうえで気を付けることに、呼び出し側で不要なコードが増えない様することがあります。コンポーネントを呼び出すための引数にデフォルト値を与えることによってこれを実現します。

 inputタグの効果が多彩になりました。メールアドレスは\や日本語の様なメールアドレスに含まれることのない文字を打つと、その文字を消して警告を表示します。コードのHTMLを見て頂けばわかる通り引数がinputタグの属性の大部分をカバーする様になっています。それだけ大量の引数が用意されているにもかかわらず、コンポーネント呼び出しが短くまとまっているのがデフォルト値の効果です。

<input
 :value="value"
>
/** 省略 */
props:{
  value: {type: String, default: null},
}

の様に記述するとコンポーネント呼び出し時に引数valueを指定しない場合、value=nullとなりHTMLコード上でもvalue属性は指定されなかったことになります。これと同じ様ことを他の属性にも適用することで大量の引数を用意しつつも、呼び出しを簡単にしています。
 実際のコーディングではンポーネントの定義を1ファイルにまとめる単一ファイルコンポーネントの仕組みを用います。これにより、JSFiddleで表示しているなかなかリッチな画面を作るHTMLコードは次の様にまとまります。

<div id="app">
  <form-input
    label="ユーザ名"
    id="edit_username"
    name="username"
    placeholder="例:浜松 太郎"></form-input>
  <form-input
    label="メールアドレス"
    id="edit_mail"
    name="mail"
    type="mail"
    validation-template="mail"></form-input>
  <form-input
    label="番号"
    id="edit_number"
    name="number"
    type="number"
    value="0.53"
    max="1" min="0" step="0.01"></form-input>
  <form-input
    label="色"
    id="edit_color"
    name="color"
    type="color"
    value="#F0115F"></form-input>
</div>
  • この記事いいね! (0)
村上 著者:村上

【React】IBM Watsonの音声認識機能「Speech to text」を実装する

Watson STT(Speech to Text)を React で実装する方法についてです。
最初は Cordova のプラグインで探していたのですが、認証がユーザ名とパスワードを使用する、少し古いタイプだったので、使用を断念…。

代わりに、下記の記事を参考に、React で実装しました。

Watsonで入門するリアルタイム音声認識 – Qiita
https://qiita.com/ovrmrw/items/a0b29d6959333c5a746c

全コードが載っているので、ほぼコピー&ペーストで実装しました。
ただ、getTokenAsync() でトークンを取得しているのですが、こちらは別途、API を開発する必要があります。

コードはこちら。

import React, { Component } from 'react';
import recognizeMic from 'watson-speech/speech-to-text/recognize-microphone';

class WatsonSTTPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      token: null,
      isRecording: false,
      recognizeStream: null,
      transcripts: [],
    };
    this.toggleMicrophoneState = this.toggleMicrophoneState.bind(this);
    this.startRecognizeStream = this.startRecognizeStream.bind(this);
    this.stopRecognizeStream = this.stopRecognizeStream.bind(this);
    this.getTokenAsync = this.getTokenAsync.bind(this);
  }

  getTokenAsync() {
    // 要変更
    return fetch('[URL]')
      .then(res => res.json())
      .then(data => data.token);
  }

  toggleMicrophoneState() {
    if (this.state.recognizeStream) {
      this.stopRecognizeStream();
    } else if (!this.state.isRecording) {
      this.setState({ isRecording: true });
      this.getTokenAsync()
        .then(token => {
          this.setState({ transcripts: [] });
          this.startRecognizeStream(token);
        });
    }
  }

  startRecognizeStream(token) {
    const stream = recognizeMic({
      token,
      model: 'ja-JP_BroadbandModel',
      objectMode: true,
      extractResults: true,
    });

    stream.on('data', data => {
      if (data.final) {
        const transcript = data.alternatives[0].transcript;
        this.setState({ transcripts: [...this.state.transcripts, transcript] });
      }
    });

    this.setState({ recognizeStream: stream });
  }

  stopRecognizeStream() {
    if (this.state.recognizeStream) {
      this.state.recognizeStream.stop();
      this.state.recognizeStream.removeAllListeners();
    }
    this.setState({ isRecording: false,
      recognizeStream: null });
  }
  render() {
    return (
      <div>
        <textarea>{this.state.transcripts.join(', ')}</textarea>
        <button onClick={this.toggleMicrophoneState}>{!this.state.isRecording ? 'Watson STT 起動' : 'Watson STT 終了'}</button>
      </div>
    );
  }
}
export default WatsonSTTPage;

必要最低限なので、必要に応じて修正してください。

 

以上、React で Watson Speech to Text を実装する方法でした。
まだ完成ではありませんが、残るは API でトークンを取得するだけなので、ほぼほぼOKかなと思います。
是非、参考にしていただければ幸いです。

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

アクセス権のあるファイルを削除する方法

今回はファイルを過剰に作成してしまい削除が非常にめんどくさくなった時のことを書いていきます。いきなりですが、こんな現象に見舞われた経験はないでしょうか。

これは、管理者の許可をもらっていないために削除できない状態です。別のアカウントで作ったファイルやエディタで作ったファイルを削除しようとすると見舞われるみたいです。あとgitで作ったファイルを削除しようとするときもよく会いますね。(会いたくない)突然の出来事だったので動揺してしまいましたがきちんとした修正方法があったのでそちらにのっかって消していきたいと思います。そもそもgitの扱いも慣れていないのにむやみにファイルを作るなというのが第二の本心ですが・・・.wでは、削除方法を垂れ流していきます。

まず、削除したいフォルダのプロパティからセキュリティから詳細設定をクリックします。

次詳細設定をクリックすると、次のような画面が表示されます。画面上段の所有者の横にある変更というリンクを開きます。すると、編集ダイアログが表示されるので一番下のテキスト欄にログインしている自分のアカウントを選択して「OK」をクリックします。その後に表示されるダイアログで「サブコンテナーととオブジェクトの所有権を置き換える」のチェックを入れて適用ボタンを押します。

 

すると、確認メッセージが表示されるので、ここで「はい」を選べば使っているpcユーザーのアクセス許可が変更されます。以上でアクセス権の変更は終了です。一旦消そうと思ったフォルダとこのプロパティダイアログを全て閉じて、再度削除をしてみてください。それでも消せない場合は、使っているファイルを閉じた後に削除を試してみてください。厄介だったアクセス権の問題もこれで解決しました。がしかししっかりと理解を深めて操作しなければ今回と同じ轍を踏むのでそれを避けるためにも意味をしっかりと理解しながら付き合っていくべきだと感じました。以上です。

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

Apple製品開発者用ドキュメントアーカイブの紹介

 Appleは開発者用ドキュメントを多く公開しており、それらは次のページにまとまっています。
Apple Developer Documentation
日本語ドキュメント – Apple Developer
 残念ながら日本語ドキュメントは数が少ないです。日本語ドキュメントのうち現役でリンクが張られているものは12本ですが、英語版は177本です。
 英語版は数多く、ドキュメント内の繋がりも複雑です。広範なApple製品全般を扱っているため、目当てのものを探すのは一苦労です。Documentation Archiveを用いると情報の新鮮さは多少落ちるでしょうが検索はずいぶん楽になります。
Documentation Archive
 下図の様にわかりやすくまとめられた表から目的のものにアクセスできます。ここから古いものを見つけて中にある単語らをキーワードに最新があるかないかチェック、あればそちらを見つからなければ手元にある方を参照できます。

 最近よくお世話になっているのは赤丸のSafari Web Content Guideです。このガイドの中にはSafariがHTML、CSS、JavaScriptの何にどう対応しているかが記述されています。例えばHandling Events章のSupported Events節にはload, unloadイベントが廃止予定で非推奨、代わりにpageshow, pagehideを使うべき、とあります。これはMDN Web DocsでもCan I useでもわからず問題点の確証を得るのが結構手間でした。

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

microSDに新規格が登場。その名も「microSD Express」

デジカメなどでよくお世話になる”microSD”カードですが、最近アップデートが活発なUSB規格のように、microSDにも従来より高速な規格が登場しました。

その名も”microSD Express”

最大985MB/sを実現する高速SDカード規格「SD Express」 – PC Watch

NVMe 1.3およびPCIe 3.1をベースとしていて、理論値転送速度はなんと最大で985Mbpsにも及ぶそうです。
これだけの速度があれば、普通にSSDの代わりとして使うこともできそうですね。

SD Express/microSD Express の速度高速化は、端子の数を増やすことによって実現しているようです。

なので、SD Express規格の性能をフルに引き出すには、SD Expressに対応したリーダ/ライタが必要になります。

一方で、下位互換性も担保されているようなので、従来の速度に落ちてしまいますが、今までのリーダ/ライタを使ってデータを読み書きすることも可能です。

今までに販売されたカメラでは残念ながらこの新しい規格のSDカードのスペックを生かすことはできませんが、今後このSD Expressシリーズに対応し、一般向けに高精細な映像が撮影機器が発売されれば、個人てもテレビ局並みの4K、8K映像が手軽に撮影できたり…なんてことになったら素敵ですよね。

今後の展開が楽しみです。

SD Express 公式アナウンス動画
microSD Express 公式アナウンス動画

SD Association

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

HoloLens2、ついに発表!!より実用的なガジェットに進化している模様。

2016年に初代HoloLensが発売されて以降、暫く音沙汰がなかったHoloLensですが、ここ最近、HoloLensの後継機、HoloLens2 についてのうわさがネットのニュースサイトなどで多数出回っていました。

そしてその噂通り、先日マイクロソフトが開催した発表会で、HoloLens2が発表されたようです!

Microsoft HoloLens 2発表、3500ドル。視野角から画素密度、視線+ハンドトラッキングまで徹底改良 – engadget

詳細は上記engadgetさんの記事などを参照いただければわかりやすいと思います。

個人的に気になった点をご紹介します。

1.本体がよりコンパクトに。

初代機と比較して、見た目がかなりコンパクトになりました。

公式サイト より

発表会の映像では、HoloLensの父と呼ばれているアレックス・キップマンさんが実際に HoloLens2を装着している映像を見ることができますが、初代気に合ったゴツさが消え、よりスマートになった印象があります。

より”ARメガネ”に近づいてきた感じがしてワクワクしますね!

2. 指のトラッキングが可能に

HoloLens2では、装着車の指の一本一本が詳細にトラッキングすることが可能になり、指を使ったUIの操作は勿論、なんとホログラフィックのピアノを演奏することも可能なレベルだというから驚きです。

今頃指のトラッキング…?と思われる方もいるかもしれませんが、最近はやり始めたVRでも、指のトラッキングは一応できるとはいえちょっと難しい部分もあるようなので、ピアノが弾けるレベルで高精細トラッキングができるようになったというのは凄いと思います。

3. 虹彩認証を搭載。瞬時にユーザーを識別可能に。

これだけでも凄すぎる要素が満載ですが、MR以外でもすごい点があります。

その点の一つが、なんとHoloLens2にはWindows Hello の虹彩認証機能が搭載されている点。

HoloLensを装着した際にユーザーの光彩をスキャンし、瞬時にサインインが可能だそうです。

個人的に主に気になったのは上記3点ですが、他にも注目したい点が満載の内容になっています。
ここまで来ると、SF映画の中で登場するデバイスをそのまま現実の世界に持ってきたかのように感じてしまいますね。

“電脳コイル”のような世界がもうすぐそこに迫っているように感じられて、とても夢が広がる内容だと思います。

今回は企業向けの内容がメインで、HoloLens本体も初代より安価になったとは言えまだまだ高額なのが惜しいですが、今まででも既にたくさんのコンシューマー向けガジェットを販売してきたMicrosoftなので、将来的にコンシューマー向けのHoloLensが発売されることを期待したいです。

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

glitchを使ってみた

少し前は、試しコードを書く時はsandBoxを使っていたのですが、javaScriptの開発の幅を広げたいなと思ったのでglitchというエディタを使ってみました。glitch・・・日本語では裏技とかチートとかに該当する言葉でしょうか。

使用感に関してはほんとにチート使ってるのかみたいな感覚になるくらい快適だったので推していきたいと思います。このglitchというエディタの特徴は数えればいくつもあるのですが、まず目につくのはオンラインエディタなのですぐに開発に取り掛かれる点ですね。面倒なインストールもいらないので、自分のpcに余計なファイルを入れる必要は一切ありません。そしてサーバーサイド側のコードとフロント側のコードを同じ画面で作ることができる点も良いなと思いました。二つのコードを見比べながらコーディングすることで、リファクタリングを効率よくとり行うことができます。また、gitかfacebookのアカウントがあれば、エディタの色を変えたり作ったファイルを保存してgitにインポートまたはエクスポートすることもできるので、個人的にはgitに登録してからglitchを使うことをおすすめします。そしてなによりフロントエンドエンジニアにとってうれしいのが、webサーバーを自分で建てなくても自動でssl化してくれるところだと思います。今流行りのpwaもこのエディタで取り掛かればwebサーバーの準備にもたつくことなくすぐに試すことができるのでおすすめです。gitでも一応疑似的にssl化できるのですが、めんどうな上にわかりにくかったのでここでは説明しません。今は日本語対応はできていませんが、簡単な英語ばかりなのでここに関しても慣れてしまえば問題なさそうです。

 

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