シリコンバレースーパーウエア

Silicon Valley Super Ware 2020年8月4日 GPXファイルの読み込み　その3 拡張機能の違い XMLファイルの読み込みについてお届けしています！ GPSのトラッキングデータとしては、「GPX」という形式のファイルが広く使われています。 この形式のファイルをサポートできるといろいろなサービスから取り込んだファイルを利用できます。 所が、拡張機能の表記方法が、サービスによって違います！ 今日はその辺の詳しい話です 拡張機能の表記方法が違う！ このサービスをサポートするにあたって、３つのサービスから取り込むGPXを調べました。 Garmin Connect STRAVA Runkeeper いずれのサイトも、GPSのデータ、特にランニングや自転車などのデータを中心にアップロードして 見やすい形のUIを提供するサービスです。ここからGPXのファイルをダウンロードして今回紹介する サービスで扱おうといのがサービスの趣旨です。 基本的に同じデータ構造（schema）を使っているのでほぼ同じ処理でデータを取り込めるのですが、 拡張機能に関してはサービスにより若干の違いがあるのでその編の対応が必要になります。 拡張機能で扱うデータは、今回のサービスでも利用している心拍数などのデータです。 このデータは元々のGPSのデータの構造ではカバーされていなかったため、 XMLでは拡張データとして扱うようになっています。 心拍数以外では、歩数や、スピードなど後から取り入れられたデータが扱われています。 私自身がガーミンのデバイスを使っているので基本はガーミンの提供するデータで 「TCX」や「GPX」をサポートするというのが元々のコンセプトです。 その後、サービスを公開したので、他のデバイスを使う人も利用したいという 要望に合わせて他のサービス経由で取得した...

Silicon Valley Super Ware 2020年8月4日 GPXファイルの読み込み　その２ 今回は、前回に引き続きGPXのファイルを読み込む話です。 JavaScriptの標準機能を使えば、ファイルの中身は簡単に取り込むことができるというが 前回の話でした。この取り込んだ中身をXMLのタグ情報を基にプログラム内で扱うにはどうするか というのが今回のテーマです。 現行のサービスではjQueryの機能「parseXML()」という組み込みのメソッドを呼び出しています。 今回のリニューアルでは、jQueryに換えてフロントエンドのフレームワークにVue.jsを使う というのが一つの方針です。従ってこの機能を使わずに実装しようというのが方針です。 そこで、今回は「npm」を使って、外部のモジュールを組み込んでその機能を使って処理しようというのが 基本方針です。 xml2js XMLを扱うモジュールは沢山ありますが、今回は「xml2js」というモジュールを利用します。 インターネットで検索すればいろいろ出てきますが、利用者数も多く情報も比較的多い 「xml2js」を今回採用しました。 このモジュールを使うと、XML形式の文字列をJavaScriptで扱いやすい、JSON形式に変換してくれます。 オブジェクトを作成した後に、「parseString()」というメソッドを呼び出すだけです。 コールバック関数を利用して、変換した結果を使えば、JavaScriptで簡単に処理できます。 ファイルの読み込み自体は、JavaScriptの「FileReader」と、「xml2js」で完了です ここまでが、一般的なXMLファイルをJavaScriptで扱う場合の基本的な操作です。 今回、紹介しているWebサービスでは、XMLファイルはGPSのトラッキングデータの中身になります。 この中身のデータを処理するのが...

Silicon Valley Super Ware 2020年8月4日 GPXファイルの読み込み 今月のテーマは趣味を基にしたWebサービスの紹介です。 このサービスの紹介を通してついでに、ファイルの読み込み、 特にXMLファイルの扱いも一緒にやってしまおうという予定です。 ランニングの世界では、GPSのデータを基にトレーニングの記録をつけたり、 トレーニングの強度を決めたりするのが一般的になって幾つかのWebサービスも 存在します。 大手のGPSのメーカも独自でサイトを運営して製品の利用者に提供しています。 私が利用しているデバイスはガーミンの物なので、基本はガーミン製品を念頭に考えています。 ただし、GPSのデータ自体はある程度標準化が進んでいて、大手のサービスの多くは 「GPX」という形式のファイルをサポートしていて、これ以外に「TCX」というファイルを サポートすると、基本的にかなり多くのサービスから取り込んだGPSデータが使えます。 GPXもTCXもどちらも「XML」と呼ばれる、タグ付きの書式で書かれています。 タグ付きという意味ではHTMLの親戚という感じで、ファイルの書式自体は余り 複雑ではありません。 XMLファイル XMLファイルは、いろいろなデータを階層構造で記述できるため、応用範囲が広く いろいろな所で利用されています。JavaScriptのプログラミングの場合、 もっと簡単に扱うことが出来る、「JSON」の方が一般的ですが、多くのプログラムでは JSONと並んで良く使われている書式です。 今回は、多くのサービスでサポートされて広く普及しているGPXのデータを中心に扱っていきます。 TCXのファイルも非常に良く似た形式ですが、一番大きな違いは GPXは標準で距離情報を持っていないところです。 従って、移動距離は、GPSで計測した緯度と経度を基に計算して求める...

Silicon Valley Super Ware 2020年8月3日 手直しの時期が来ました！ さて、現在も公開されている、私の趣味のWebサービス 「心拍数で登山・ハイキング」のペースを管理するための支援ツールです。 元々は、2010年頃、最初にJavaのデスクトプアプリとして制作して、一部の希望者に配布したのが始まりです。 その後、Python版も作ったりして、数年前からWebサービス版を公開しています。 作ったのが数年前なので、「jQury」ベースの実装です。 ユーザーインターフェースもいろいろご意見を頂いているので、そろそろ改善をと思っていますが、 まだリニューアルはできていません。 そこで、最近連載でも採用している、Vue.jsを使ってUIを刷新しようかという事で 今月のテーマに取り上げました。 何を直すか？ 前回も紹介していますが、現在公開中のサービスは下のボタンをクリックして頂くとご覧になれます。 あなたの登山データを解析します！ まずは、同じ機能をVue.jsのUIに置き換えるというのが一つです。 最初にほぼ同じUIをVueで作るのが第一段階です。 そのうえでデータ処理を書き直そうと考えています。 実は、GPSのデータの形式は、「GPX」や「TCX」と呼ばれる、「XML」形式が使わえれる事が多くなっています。 このXML形式のファイルを読んでデータを取り込む部分を作り直す事を考えています。 理由は簡単で、このXMLの取り込みも「jQuery」の機能を使っているので、まずは、「jQUery」を 除外して、少しモダンな形に変えるのが一つの目的です。 ファイルの読み込みも基本機能の一つ このファイルの読み込みもWebサービスでよく使われる基本機能の一つなのでこの連載でも ぜひ取り上げたいと思っていたので、丁度良い題材だと思います。 ...

Silicon Valley Super Ware 2020年7月30日 2020年8月のテーマは！　～あなたの趣味をサービスに！～ さて、2020年の7月も終わりに近づいてきました。 Webサービスで稼ごう！という事で4月からWebサービスの実装の仕方を中心に連載をしています。 今日は来月のテーマについてです！ サービスを作るために必要な「要素技術」はとりあえずカバーしたので 8月は少し違った観点でお届けしようと考えています。 テーマは、趣味を生かしたWebサービスです！ 以前にも触れた話題ですが改めて取り上げようと考えています。 Webサービスを作る上で大事なのは「専門的知識」です。 より深い知識があるエリアは他にない価値あるサービスにしやすい傾向があります。 趣味の話題はより深くこだわりのある知識を持っている事も多く ユニークなサービスを企画しやすい分野です。 私の趣味は「登山やハイキング」なので、それを生かしたサービスを以前作成しています 今回は、このサービスのリニューアルを考えているので、このサービスの紹介を中心に お届けします。 登山やハイキングの為のWebサービスとは？ まずは、既に稼働しているサービスをご覧ください！ あなたの登山データを解析します！ 簡単に言うと、登山やハイキングのGPSのデータを解析するというサービスです。 別の趣味に、マラソンもあるのですが、ランナーの多くはGPS付きの時計を使って 走った場所、距離、タイム、心拍数などを記録してトレーニングなどに使うのは 一般的になっています。 同じような考え方を登山やハイキングでもやってみようという事で始めたサービスです サイトをご覧いただけるとお分かりかと思いますが、現在提供している機能は 移動距離・標高差のデータ 心拍数のデータ 心拍数の分布 移動速度（歩行時、休...

Silicon Valley Super Ware 2020年7月29日 サービスの障害について考える！ 今日は予定を少し変更して、サービスの障害の話にします。 というのも、今回の外部サービスとして利用しているSendGridのサービスに 昨日障害が発生していました。 障害は起こりえる物です！大切なのはそれにどのように対応するかです。 もちろん、障害が起きない方が良いに越したことはありませんが、 完全に障害を取り除くことは現実的には相当ハードルが高いのも事実です。 大企業の提供するサービスには小さな障害が社会的な問題になる事もあるので、 相当なお金をかけて、その可能性を極限まで「ゼロ」に近くなるような努力をしています。 しかし、完全に「ゼロ」にはなかなかできないのが現状です。 逆に言うと、一般的なサービスは障害は起きるものと考えた方が無難です。 障害ではなくても、システムのメインテナンスの為に一時的ですが サービスが中断されることも多いのが現状です。 外部のサービスをあなた自身のサービスに組み込む場合、 あなたの作る部分だけではなく、外部のサービスの障害も 結果的にあなたのサービスの問題になる場合もあるわけです。 障害の影響を見積もる！ サービス一般の話はいろいろな障害の可能性があるので余り役に立つ話はできません。 今回は今回採用した、「SendGrid」のサービスの障害を中心に考えてみます。 今回の連載では、「メッセージの送信」と「メッセージの追跡（トラッキング）」 について実際に使ってみようという趣旨で連載してきました。 実際は完全なサービスにすることを考えると、他の機能も実装する必要があることは 既に触れた通りです。 考えられる障害は メッセージが配信されない 宛先の登録ができない 送信者の登録ができない 配布リストに宛先が登録できない （上記の）情報の...

Silicon Valley Super Ware 2020年7月28日 番外編、メッセージの追跡情報の取得！ 7月の残りは、今月実装した、SendGridを利用したサービスの番外編として、 送ったメッセージの追跡（トラッキング）について触れています。 ビジネスの場合、あなたが配信したメッセージが読まれたかどうかは、気になる物です。 SendGridのサービスでは、送信したメッセ時の配信完了、開封、リンクのクリックなどを 追跡してデータを集める事も可能です。 こうしたデータを解析してマーケティング戦略を作れば、より効果的にあなたのビジネスを展開できます。 今回は具体的な実装について解説します。 WebHookの設定 WebHookは、SendGridが検出した、メッセージのイベント情報を希望のサーバー（ＵＲＬ）に 送ってもらうための機能です。 結構いろいろなイベントを検出できます。 通知の有無 グループの再登録 配信完了 グループ登録の解除 スパムレポート(受信者がスパークとしてマークした) エラーで返送（サーバーの受取距離） 遅延（一時的な配信拒否～サーバの障害など） 登録解除 送信処理中（SendGridがメッセージを受け付けた） 開封 リンクのクリック 配信不能（登録解除、無効な宛先リストの指定などで） など結構細かく配信したメッセージの状態を追跡する事ができます。 イベントを検出すると、予め指定したリンクにデータを送信してくれます。 バックエンドの実装例 バックエンドの実装例です。 this.app.post(API_TRACKING_EVENTS, async (req, res) => {    const events: string = JSON.stringify(req.body);   ...