はてなブックマーク

ヤマレコは、山登りのための記録や情報交換ができるサービスです。 スマホにインストールすると、工程を計画できたり、軌跡を記録できたり、途中の写真を保持してくれるので、いい感じです。 さらに、ヤマレコはWebAPIを提供してくれているので、自分で好きなように整理できそうです。 今回は、自分か特定ユーザが登ってきたすべての軌跡を地図上に一度に表示してみます。そうすることで、どのあたりを多く登ってきたのかがわかります。 地図の表示には、Leafletを使います。また、地図上の軌跡の表示には、緯度経度の情報であるGPXファイルを使います。ヤマレコは、このGPXファイルを出力していただいているので都合がよかったです。 ソースコードもろもろは以下に置きました。 使用するWebAPI WebAPIは、以下に説明があります。 今回使うのは、以下の2つです。（認証不要です） getReclist：山行記録リス

普段使っているスマートディスプレイ「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がインストールされている前提です。 以下を実行すれば完了です。

バッファローの「探せるキーホルダー」や、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の

ESP32で、静的なHTMLファイルのWebサーバや、POST/JSONなどのWebAPIサーバを立ち上げます。 以下のESPAsyncWebServerを使わせていただいています。 最近になってこの存在を知ったのですが、なんでこんな便利なものに気づかなかったんだろうと思うほど、必要十分の機能を有しています。 POST/JSONで、JPEGファイルを送信して、M5Core2のLCDに表示してみます。 その中で、以下について説明していきます。 Webサーバのセットアップ 静的ページのホスティング GETエンドポイントのホスティング POST/JSONエンドポイントのホスティング ソースコードもろもろはGitHubに上げておきました。 PlatformIOの準備 今回は、開発環境としてVisual Studio Code＋Platform IOを利用します。 あらかじめ、platformio.

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? みなさん、スマホにLINEアプリ入れてます？ （もし入れているのであれば、）せっかくLINEアプリをインストールしているので、いろんな用途に使えるように、LINE Botを作ってみたいと思います。 今回は、ちまたで流行っているトレンドキーワードを返すBotです。 ただ作るだけではモチベーションが上がらないので、以下の勉強もしたいと思います。 発話の入力処理として、ちょっとした自然言語解析も入れてみるために、「Dialogflow」を使います。 トレンドキーワードを収集するために、「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 使いたいだけであれば、以下にアクセスしてみてください。ユーティリティの

# include <WiFi.h> # include "M5Lite.h" # include <HTTPClient.h> //#define LOCAL_JAVASCRIPT // ROMに埋め込む場合にはコメントアウトを外す const char *wifi_ssid = "【WiFiアクセスポイントのSSID】"; const char *wifi_password = "【WiFiアクセスポイントのパスワード】"; const char *jscode_url = "【Javascriptの取得先URL】"; WiFiClient espClient; WiFiClientSecure espClientSecure; # include "quickjs_esp32.h" // see platformio.ini # ifdef LOCAL_JAVASCRIPT exte

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

原神のホームページで、MMDファイルを公開してくれました。太っ腹！ 原神のキャンペーン公式サイトの紹介記事 https://www.gamespark.jp/article/2020/10/08/102819.html なので、これを機会に、JavascriptでMMDファイルを表示するビューアページを作ってみようと思います。 原神のキャンペーン公式サイト(中国語) http://ys.biligame.com/gczj/ ここから、MMDファイルをダウンロードします。 ※現在は以下からダウンロードできます。 https://genshin.mihoyo.com/ja/news/detail/5885 MMDファイルの表示には、three.jsにあるMMDLoaderを使いました。 mrdoob/three.js https://github.com/mrdoob/three.js という

前回の記事 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を作ってみたいと思います。 本来

<form v-bind:action="base_url + '/upload'" method="post" enctype="multipart/form-data"> <input type="file" name="upfile" accept="image/*"> <input type="text" name="param" v-model="param_value"> <input type="submit" name="submit" value="送信"> </form> （v-bindやらv-modelやら、Vueを使っていますが、感触はつかめると思います。） methodとenctypeは、POST・multipart/form-dataを指定します。それにより、バイナリファイルだけでなく、他のテキストパラメータ(上記では、paramとsubmit)も一緒に送ること

データベースにあるデータをグラフなどで可視化するツールである「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 右上の「関数の作成」ボタンを押下します。 今回は、ほぼ何も処理

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Googleから最近になって、FIDO認証デバイスの「Titanセキュリティーキー」が発売されたので、購入しました。 [Google Titanセキュリティーキー］ https://store.google.com/jp/product/titan_security_key_kit 今のところ、はやっていそうですし、せっかくなのでこれを使って遊んでいきたいと思います。 Titanセキュリティーキーがあれば、Webサーバから見てユーザID/パスワードで認証するのではなく、Titanセキュリティーキーのデバイスを認証してくれます。公開鍵をベ

ずいぶん前に、なんちゃって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ページを作りました。 中身は、メジャーな技術の組み合わせなので、よく読めば、さらにカスタマイズして気持ちのすっ

module.exports = { apps : [ { name: "Application Name(4001)", script: "./app.js", cwd : '/home/XXXX/YYYY/', env: { PORT: 4001, NODE_ENV: "development", }, env_production: { PORT: 4001, NODE_ENV: "production", } } ] } nameには、区別がつきやすいように、適当な名前を付けておきます。( )でポート番号を明記しておくと、(後々説明しますが)わかりやすいです。 scriptには、実行コマンドを指定するのですが、jsファイルを指定した場合、自動的にnode.jsと判断して、nodeで実行してくれます。 cwdは、実行時のカレントディレクトリを指定します。scriptで指定するNode

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