はてなブックマーク

普段使っているスマートディスプレイ「Google Nest Hub」ですが、結局のところお気に入り画像と時計表示にしか使っていない。。。 それぐらいのことであれば、自作もできるだろうと思い、CordovaとAndroidを使って、自分カスタムのスマートディスプレイを作成しました。以降、カスタムスマートディスプレイ(CSD)と呼びます。 まずは、簡単に構成を説明した後、その中で利用している要素技術を説明します。 機能としては、まずは以下の3つの機能を付けますが、今後拡張していければと思います。 ・時刻表示 ・お気に入り画像の背景表示 ・音楽のバックグラウンド再生 システム構成 以下のような構成になります。 ・Androidタブレット これが今回作成するCordovaアプリが動作するAndroidタブレットです。スマートディスプレイとして設置するので、大きめがよいかと思います。私の場合は、An

スマホアプリのアプリ開発にCordovaを使っています。私は、サーバサイドはNode.js、ブラウザアプリはJavascriptを使っているので、スマホのネイティブアプリの開発もJavascriptで開発できるのは新言語を覚える必要がなく、Javascriptに専念できるので魅力的です。 さらに、iOSやAndroidの両方のネイティブアプリを1つのコードで動作できるのはありがたいです。 Cordova 今回は、Cordovaアプリを開発・デバッグするための方法や、OS独自の機能を実装できるプラグインの開発方法についてまとめておきます。いろんな開発をやっていると、Cordovaの開発方法を結構忘れがちになるので、備忘録として残しています。 Cordovaのインストール Node.jsがインストールされている前提です。 以下を実行すれば完了です。 また、開発する対象のスマホOSごとにコンパイ

バッファローの「探せるキーホルダー」や、Logitecの「ぶるタグ」、懐かしい「Stick-N-Find」やNTTドコモのProject Linkingの「Pochiru」や「Tomoru」など、あるいは、LINE Beaconなど、常に電源On状態でアドバタイズし続けるBLEデバイスの、稼働状態や出入りを監視します。 BLEアドバタイズやレスポンスのスキャンデータには、デバイスがサポートするサービスUUIDが含まれています。 そこに、以下のUUIDが含まれていたら、生存していることとしてサーバに通知します。 Stick-N-Find：bec26202-a8d8-4a94-80fc-9ac1de37daa6 Project Linking：b3b36901-50d3-4044-808d-50835b13a6cd Immediate Alert Service：0x1802 LINE Thi

お手軽にWebサーバを立ち上げられるHerokuですが、いつもアップロードしているGitHubから立ち上げる手順や、ローカルネットワークに立ち上げているGiteaから立ち上げる手順をまとめておきます。 というより、備忘録です。すぐ忘れるので。 ローカルネットワークに立ち上げたGit（Gitea）で日ごろは構成管理をして、Qiitaに投稿するときにGitHubに複製してソースを公開し、必要に応じてサンプル動作のためにherokuにデプロイしてアプリ公開する、といった活動を想定して説明していきます。 あるいは、有志の方のGitHubをカスタマイズする場合は以下の順番になります。 heroku GitHub Gitea アップロード先リポジトリを作成する アップロード先のリポジトリを作成します。作成により、HTTPSのURLが割当たります。 Giteaに作成する場合 Giteaは、GitHubの

みなさん、スマホにLINEアプリ入れてます？ （もし入れているのであれば、）せっかくLINEアプリをインストールしているので、いろんな用途に使えるように、LINE Botを作ってみたいと思います。 今回は、ちまたで流行っているトレンドキーワードを返すBotです。 ただ作るだけではモチベーションが上がらないので、以下の勉強もしたいと思います。 発話の入力処理として、ちょっとした自然言語解析も入れてみるために、「Dialogflow」を使います。 トレンドキーワードを収集するために、「Twitter REST API」を使います。 そして、LINE Botである「LINE Messaging API」を使います。 こんな感じで連携します。 (発話) ⇔ LINEアプリ ⇔ (LINE Bot) ⇔ Dialogflow ⇔ RESTfulサーバ ⇔ Twitter REST API 以下のサイ

これまでずっと、Bootstrap3で使っていたのですが、そろそろ新しいバージョンに切り替えようと思います。 ちょうど、Bootstrap 5でJQueryに依存しなくなったので、よい機会かなあと。 ですが、うわさに聞いていた通り、Bootstrap 3から4への移行で細かな差異があり、移行は結構手間がかかりました。また、Bootstrap 5になってから、JQueryがなくなったので、それの影響もありました。 今回は既存のBootstrap 3ベースで動いているものをBootstrap 5に移行するにあたり、変更した部分を整理しておきます。 ちなみに、マニュアルはそこまで詳しくは読んでおらず、実動作で試行錯誤しながら直したので、もっと良い直し方があるかもしれません。 参考URL Bootstrap 5.1.x https://getbootstrap.com/docs/5.1/getti

今更ながら、GoogleAPIをNode.jsから触ってみます。 Google Drive、Gmail、Google Calendar、Googleフォトなど、皆さんgoogleサービスにお世話になっているのではないでしょうか。 ちゃんと、APIも提供されていて、npmモジュールもあるので、今後もいろいろ使えるかもしれません。 本人認証して簡単なリスト表示をするところまでですが、後はリファレンスを見れば拡張できるかと思います。 GitHubに上げておきます。 poruruba/GoogleApiSample https://github.com/poruruba/GoogleApiSample 参考情報 googleapis/google-api-nodes-client https://github.com/googleapis/google-api-nodejs-client Goog

「便利ページ：Javascriptでちょっとした便利な機能を作ってみた」のシリーズものです。 久しぶりのネタですが、今回はWeb Bluetooth APIを使って、BLEデバイスに接続してみます。 以下のことができるようなページです。 BLE Peripheral デバイスに接続し、プライマリサービスを一覧表示します。 プライマリサービスにあるキャラクタリスティックを一覧表示します。 キャラクタリスティックに対して、任意のデータをRead・Writeをしたり、Notificationを有効にして、Notificationを受信します。 ソースコードは以下にあります。過去のいろいろな詰め合わせになってます。 poruruba/utilities https://github.com/poruruba/utilities 使いたいだけであれば、以下にアクセスしてみてください。ユーティリティの

@binzume さんが投稿をされて、ESP32でもJavascriptが動くことを知りました。( ESP32 と QuickJS で小さなJavaScript実行環境を作る ) しかもES2020に対応しているなんて素敵です。 以下のことができることを目指します。 console.logがSerial出力されること(これはすでに@binzumeさんが実装されています) LCD、Wire(I2C)、GPIOをJavascriptから触れるようにします。 JavascriptのソースコードをWebから取得します。 3番目が今回のモチベーションで、ESP32起動時にネットワークから取得することで、PlatformIOやArduino IDEから毎度コンパイル・書き込みを行う必要がなくなります。動作確認が終わったら、ROMに埋め込みます。 毎度の通りGitHubに上げておきます。 porurub

扱ったことがなかったので、PWA(Progressive Web Apps) を試してみようと思います。 WebページをPWAとして設定することで以下のことができます。 Webアプリなのに、ネイティブアプリのように、Android/Windowsにアプリとして登録することができる。 アドレスバーのようなブラウザっぽさはなく、全画面でネイティブアプリのように起動することができる。 PWAのService Workerの機能を使った実装をすることで、以下のことができます。 Webコンテンツをキャッシュ化することができ、オフラインで動かすことができる。 サーバ側からPush通知ができる。(iPhoneを除く) ということで、今回の投稿では、PWAの設定方法と、Push通知の実装をしてみます。 ただ作るだけではモチベーションが上がらないので、パスワード管理アプリ「パスワードマネージャ」を作成します

前回の記事 ESP32をAlexa Gadgets Toolkitデバイスにしよう で紹介したArduino側のソースコードを解説します。 いつもの通り、Arduinoのコードは以下のGitHubに登録しておきました。 poruruba/AlexaGadget https://github.com/poruruba/AlexaGadget Alexa GadgetデバイスのGATTの準備 以下に示す通り、FE03というUUIDのGATTサービスに、2つのCharacteristic(コマンド受信用とNotification送信用)を登録します。 ソースコードでは以下の辺りです。 BLEDevice::init("M5StickC"); BLEServer *pServer = BLEDevice::createServer(); pServer->setCallbacks(new MyCa

Alaxaには、Alexa Gadgets Toolkit という、Echoデバイス(スマートスピーカ)と連携できるAlaxa Gadgetを作れるSDKがあります。 Alexa Gadgets Toolkit https://developer.amazon.com/ja-JP/docs/alexa/alexa-gadgets-toolkit/understand-alexa-gadgets-toolkit.html Webでは、ラズパイを使った例が複数あったのですが、BLEのプロトコルも提示されているので、ESP32で実現しようと思います。 Alexa Gadgetsデバイスになれば、いろんなことができるのですが、まずは単純なところから。 今回は、「アレクサ、今何時？」といつもの問いかけをしている間、勝手にLEDが点灯するようなAlexa Gadgetsを作ってみたいと思います。 本来

HTMLからバイナリファイルをアップロードしたり、サーバからバイナリデータをダウンロードしてみます。 クライアント側として、HTMLのSubmitボタンを利用する方法と、Javascriptから送信する方法でやってみます。 サーバ側としては、Node.jsのSwagger-node(中身はExpress)のサーバの場合と、AWSのAPI Gateway＋Lambdaの場合を取り上げます。 毎度の通り、ソースコードは以下に上げておきました。 poruruba/fetch_laboratory https://github.com/poruruba/fetch_laboratory バイナリファイルの送信 それでは、送信するクライアント側のWebページから見ていきます。 まずは従来からの、HTMLのSubmitボタンで送信する場合です。 HTMLは以下のような感じになります。 <form v-

データベースにあるデータをグラフなどで可視化するツールである「Grafana」を使って、AWS CloudWatchのデータを可視化してみたいと思います。 動作が軽快で、画面もカッコよいです。 Grafana https://grafana.com/ 基本機能として、DBに保存しておいたデータをグラフ化するものなのですが、有志によるPluginを追加することで、いろいろなデータを扱えるようになります。例えば、今回取り上げるAWS CloudWatch以外にも、Zabbixサーバとの連携も可能です。また、ゲージやヒートマップ、レーダーチャートなど、多彩な表示もあるので、カッコいいダッシュボードが作れそうです。 本記事の続編はこちら GrafanaでQiitaのView数を眺める Grafanaのインストール WindowsやMacにもインストールできますが、今回はUbuntuにインストールし

前回「Obnizで戦車ラジコンを作ろう」で戦車ラジコンを作ったのですが、思いのほか面白かったので、拡張してみました。 M5Cameraをつなげて、戦車から撮影するのですが、戦車ラジコンで徘徊している最中にQRコードを見つけて、大砲を発射（ボタンを押下）すると得点がもらえる、というものです。 時間制限を付けたので、両指でキャタピラをなんとか操作しつつ、時間内にたくさんのQRコードを破壊すれば高得点です。 ということで、前回の記事ではM5Cameraは必須としていませんでしたが、今回は必須です。 毎度の通り、GitHubに上げておきました。 https://github.com/poruruba/obniz_motor 以下からもページを参照できます。（Obnizにつながないと使えないですが）。 https://poruruba.github.io/obniz_motor/ ※M5Camera

前回は、AWS Cognitoを使って、GoogleアカウントとLINEアカウントからログインできるようにCognitoユーザープールを設定しました。 AWS CognitoにGoogleとLINEアカウントを連携させる 今度は、サインイン状態をAWS API Gateway経由でLambdaに引き継いでみます。 つまりは、サインインしていないと表示できないページを作ります。 とりあえずのLambda関数を作成 とりあえず、Lambdaを作成してから、後で、それを呼び出すようにAPI Gatewayのエンドポイントを作成します。 Lambdaの管理コンソールを開きます。 https://ap-northeast-1.console.aws.amazon.com/lambda/home?region=ap-northeast-1 右上の「関数の作成」ボタンを押下します。 今回は、ほぼ何も処理

Googleから最近になって、FIDO認証デバイスの「Titanセキュリティーキー」が発売されたので、購入しました。 [Google Titanセキュリティーキー］ https://store.google.com/jp/product/titan_security_key_kit 今のところ、はやっていそうですし、せっかくなのでこれを使って遊んでいきたいと思います。 Titanセキュリティーキーがあれば、Webサーバから見てユーザID/パスワードで認証するのではなく、Titanセキュリティーキーのデバイスを認証してくれます。公開鍵をベースとしているそうです。 また、Titanセキュリティーキーには、USBに加えて、NFCとBLEの接続方法があるので、直接PCに挿さなくとも、デバイス認証してくれます。 ということで、今回は、王道のFIDOサーバを立ち上げます。 (参考) こちらもどうぞ。

ずいぶん前に、なんちゃってOpenID Connectサーバを自作しました。 なんちゃってOAuth2/OpenID Connectサーバを自作する 今回は、AWS Lambdaを使って実際に立ち上げてみたのち、CognitoのIDフェデレーションを使って、Cognitoから自作のOpenID ConnectにつないでID連携してみます。 ソース一式は以下に置きました。 https://github.com/poruruba/openid_server.git AWS LambdaでOpenID Connectを立ち上げる なんちゃってOpenID Connectの説明は、当時の投稿を見ていただくとして、手っ取り早く、Gitからソース一式をダウンロードしてください。

Rubyを初めて数日の超初心者です。 これまでもLambdaでNode.jsを使っていますが、昨年末にRubyもLambdaに対応したとのことので、Rubyにも手を出してみようと思います。 今回の投稿では、Sinatraをローカル実行で確認したのち、Lambdaに移行するところまでです。 他の方の記事もありましたが、CloudFormationやSAMを使ったりして、まだ知識が追い付かずちょっとわかりにくかったので、LambdaとAPI GatewayをAWS管理コンソールを使って１つ１つ手順を追ってみたかったのです。 また、RailsをLambdaにしたかったのですが、Lambdaが目指すマイクロサービスアーキテクチャ的にRailsシステムまでLambdaに持っていくのはお奨めしないそうで、また今度にします。以下、参考。 https://blog.eq8.eu/article/sinat

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 以前、以下の投稿で、PM2の環境設定と、扱いやすくするためのGUIであるpm2-guiの環境設定をしました。 pm2でNode.js実行環境を整備する だけど、まだまだかゆいところに届かず、設定変更するたびに、ドキュメントをあさりまわることが続いていました。 ということで、いっそのこと、PM2を扱うためのGUIを作ってしまおう！という野望のもと、pm2-guiに代わる、かゆいところに手が届き、自己満足するPM2管理のためのWebページを作りました。 中身は、メジャーな技術の組み合わせなので、よく読めば、さらにカスタマイズして気持ちのすっ

過去に、とりあえず、pm2でNode.jsの実行環境を作ったのですが、Node.jsにも慣れてきたので、pm2の設定を見直すとともに、備忘録として残しておこうと思います。 また、Webで実行状態を把握できるpm2-guiもインストールします。 pm2は、node.jsアプリの実行状態の永続化やプロセスの状態、ログの管理など、Node.jsアプリの実行管理に有用なアプリです。 pm2インストール NPMを使ってインストールします。 npm install pm2 -g [参考情報] https://pm2.io/doc/en/runtime/overview/ rootアカウントで起動する場合は、rootアカウントでログインした状態で上記を実行します。 実行するNode.jsアプリは、JSON形式の設定ファイルに指定します。 たとえば、以下に置きます。 /etc/pm2/pm2.config

OpenID Connectでは、以下の4つのアクセス権限付与フローが定義されています。 Authorization Code Grant Implicit Grant Resource Owner Password Credentials Grant Client Credentials Grant これらは、AWS Cognitoにある以下の5つのエンドポイントを組み合わせて実現します。 認証エンドポイント (/oauth2/authorize) ユーザーをサインインさせます トークンエンドポイント (/oauth2/token) ユーザーのトークンを取得します。 ログインエンドポイント (/login) ユーザーをサインインさせます。ログインページにロードされ、ユーザーにクライアントに設定されている認証オプションを提示します。 ログアウトエンドポイント (/logout) ユーザーを

AWS Cognitoを操れるようになったら、今度は生成されたIDトークン/アクセストークンを利活用してみます。 今回は例として4つを挙げました。 Googleの Actions on Google のアカウントリンクに、AWS Cognitoで認証した結果のトークンをリンクさせる Amazonの Alexaスキル のアカウントリンクに、AWS Cognitoで認証した結果のトークンをリンクさせる AWS API Gateway で、AWS Cognitoで認証した結果のトークンがないと呼び出せないようにする Google Cloud Platform の Cloud Endpoint で、AWS Cognitoで認証した結果のトークンがないと呼び出せないようにする Googleの Actions on Google のアカウントリンクに、AWS Cognitoで認証した結果のトークンをリ

試しに、ブラウザから以下のURLを打ち込んでみます。 https://localhost:3001/ 今後、いろんなところでHTTPS接続を要求されますので、以降はHTTPS接続で進めます。 準備が整いました。 それでは、ブラウザから以下のURLを入力し、表示させてみます。 https://＜ドメイン名＞.auth.ap-northeast-1.amazoncognito.com/login?response_type=code&client_id=＜アプリクライアントID＞&redirect_uri=<リダイレクト先URL＞ ドメイン名：AWS Cognitoのドメイン名のページで指定したドメイン名 アプリクライアントID：アプリクライアントのページで生成されたアプリクライアントID リダイレクト先URL：アプリクライアントの設定でとりあえず指定したコールバックURL（https://l

前回、SwaggerでRESTful環境をスマートに構築しました。 SwaggerでRESTful環境を構築する 使いこなしていく上で、手間取ったことの一つに、SecurityDefinitionsの定義があります。 SwaggerにおけるSecurityDefinitionsとは、HTTPヘッダのAuthorizationを使って、ユーザ・パスワードによるベーシック認証やOpenID Connectのトークン認証するための定義です。 swagger-nodeを使ったRESTful環境でもちゃんと対応しているんです！ せっかくなので、使ってみます。 Swagger SecurityDefitions定義 Swagger 2.0では、以下の3つの方式が定義可能です。 Basic認証 API Key OAuth2 認証フロー [参考情報] https://swagger.io/docs/spe

今回はAWS Cognitoで認証したユーザからAWS IoTのMQTTにPublishできるようにしたいと思います。 （過去を振り返ってみると、AWS Cognitoに集中して投稿してこれで記念すべき？！5つ目となりました。） 今回やることは、X.509でIoTのモノを認証するのではなく、Cognitoで認証したユーザをIoTのものとして認証し、Publish/Subscribeする、というものです。 触るAWSマネージドサービスは以下の通りです。 Amazon Cognito（フェデレーテッドアイデンティティ） IAM（ロール） AWS IoT（IoT Core） 特に、Cognitoおよびトークンについて知っていないと理解にはちょっと厳しいかも。 以下が参考になるかもです。 AWS Cognitoにサインインしないと見れないLambdaを作る あと、AWS IoT SDK for J

OpenID Connectでは、4つのアクセス権限付与フローが定義されています。 Authorization Code Grant Implicit Grant Resource Owner Password Credentials Grant Client Credentials Grant よく１、2を使っているのでなじみがあると思います。AWS Cognitoにもその選択肢があります。 3はあまりなじみがないとは思いますが、私もよく知りません。 4は、ユーザログインとは関係ないのですが、AWS Cognitoに選択肢があり、気になったので今回はこれを使ってみます。 Client Credentials Grantは、ユーザの同意を必要としないリソースにアクセスする際に利用されるそうです。 もともと、AWS Cognitoは、モバイルアプリケーション向けにユーザ登録・ログイン機能を提

前回、前々回に引き続き、もうちょっと、AWS Cognitoを操ってみます。 (ちなみに、前回、前々回は以下の通り) AWS CognitoにGoogleとYahooとLINEアカウントを連携させる AWS Cognitoにサインインしないと見れないLambdaを作る 今回は、AWS Cognitoのカスタム認証フローをつかって、合言葉ログインを作ってみます。 サインアップ時に指定したパスワードで認証するのもありですが、それに加えて、独自の認証を自作してみたいと思います。カスタマイズ次第で、本人しかもっていないハードウェアトークンなどと連携するもの良いかと思います。 以下、参考となる情報源です。 カスタム認証チャレンジLambdaトリガー https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/user-pool-la