JavaScript

JavaScript 関連技術に関する投稿です。

Node.js で Google Fit に体重データを登録する

先日 Node.js で Google Fit から歩数や体重データを取得するのをやりました。 blog.kondoumh.com 体重データはスマホアプリから登録できるけど Fit を使う前の過去データは手入力やってられてられないので、API による登録方法を調べました。 公式ドキュメ…

Node.js で Google Fit のデータを取得する

今年になってから今更ですがドラクエウォーク始めました。 www.dragonquest.jp 通勤しないけど、このおかげでけっこう外歩きするようになってるので、歩数データと体重データの相関取ったりしてみたいなあと思いました。Google Fit って Web アプリは廃止さ…

Netlify Functions の Zero configuration と Netlify CLI

Netlify Functions は AWS Lambda を基盤とした API のプラットフォームです。 blog.kondoumh.com 利用は非常に簡単ですが、最近さらに Zero configuration という仕組みが導入されました。規定のディレクトリ (netlify/functions) にコードを配置するだけで…

ワークアウトしたら Pixela に草を生やす PWA

テレワークで外出が減って、運動不足を自覚するようになりました。人間ドックでも数値がちょっと悪くなってました。そこで YouTube の Fit boxing チャンネルなどで室内運動するようになりました。外出した日は意識して歩数を伸ばすようにしたりしてます。 …

Scrapbox プロジェクトのグラフ構造可視化 - その後

Scrapbox のページ間リンクを可視化するやつです。 Graphviz バージョン blog.kondoumh.com D3.js バージョン blog.kondoumh.com D3.js バージョンを半年ぶりにちょっと触りました。と言っても Visualization の方式を変えたとかではなく、ノードをフィルタ…

Netlify Functions を PWA のバックエンドで使う

Netlify は静的サイトをホスティングするのに便利です。 blog.kondoumh.com JSON データを置いてちょっとしたデータソース的にも使えます。 blog.kondoumh.com しかし、JSON を静的に配置できるだけだと上の記事のように更新のためのパイプラインを実装する…

Octokit で GitHub repo からファイルの中身を取得する

GitHub では Octokit という API クライアントが提供されています。 github.com GitHub の REST API は fetch でも叩けますが、octokit/rest が使いやすくラップしてくれてます。 リポジトリ内のファイルの中身は getContent で取得して Base64 デコードする…

Scrapbox ページ一覧と Graph 可視化のプロト PWA 作成

以前 Scrapbox から API でデータを取得して、ページ間リンクを可視化する (ための Graphviz dot ファイルを吐く) CLI を作成しました。 blog.kondoumh.com その後 Graphviz よりインタラクティブな可視化ができる技術として D3.js の force simulation を使…

Puppeteer Recorder でテスト用スクリプトを生成する

Puppeteer を使うと Web 画面の E2E テストが手軽に書けます。 github.com ただ最近の Web UI は DOM 要素に ID が振られていないことが多く、Selector 書くのに Chrome DevTools などで要素をインスペクトしてパスをコードに貼り付けるという作業が多くなり…

GitHub Actions で再利用可能な Action を作る

GitHub Actions では、よく使う処理を Action として切り出して再利用できます。Marketplace にはすでに多くの Action が登録されています。 GitHub Marketplace · Actions to improve your workflow · GitHub Action には Docker Container Action と JavaS…

野良 Scrapbox アプリ - Vuetify 2 の v-data-table への移行

野良 Scrapbox アプリのページ一覧画面では Vuetify の Data table component を使っています。 Vuetify は v1 → v2 でかなり breaking change が入りました。 https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide 数ヶ月…

Netlify で定期的に JSON をジェネレートして通知する

PWA のデプロイに利用した Netlfy。 blog.kondoumh.com JSON を生成するプログラムをデプロイすれば JSON を置いて定期更新する用途にも使えるということで、Tumblr API で取得したデータから JSON を生成するだけの Node.js アプリを書いて Netlify にデプ…

Netlify と PWA で JAMstack を目指す

静的サイトをホスティングできる Netlify 流行ってます。Git リポジトリを指定するだけでビルド・デプロイでき、CDN でリソースをキャッシュしてくれるので、PWA のホスティングにも向いています。 PWA を作る方法は色々とありますが Vue CLI で簡単にプロジ…

Electron WebView のデバッグで DevTools を使う

Electron での開発で自分で作ったアセット (HTML / JavaScript / CSS) を WebView で表示することはあまりないと思いますが、アプリの構造上 WebView を使う必要がある場合、困るのは Main Wndow 用の DevTools では WebView コンテンツの JavaScript デバッ…

Vuetify の Data tables を Electron アプリに組み込む

Vue の UI Component 集 Vuetify の Data tables Component を Electron アプリで使ってみたいと思い、組み込み方法を検討していました。 vuetifyjs.com 以前 electron-vue で Electron プロジェクトを生成して Vue 使う話を書きました。 blog.kondoumh.com …

野良 Scrapbox アプリ - ページ情報ダイアログを出せるようにしました

コンテキストメニュー Info からページ情報を表示するダイアログを出すようにしました。 ページを開く前に概要を把握できたらと思い、ページへのリンクに対してコンテキストメニューを表示しています。 タイトル、ページを作成したユーザ、共同編集ユーザ、…

社内勉強会で Electron の話をしました

そもそも社内勉強会で喋るというのが初だったかも。 Electron early 2019 from Masahiro Kondoh www.slideshare.net 趣旨としては、 Electron 熟成してきてるよ クロスプラットフォーム開発大変だけど Electron はけっこう手軽 PWA の方が流行るかもしれない…

野良 Scrapbox アプリの fav 機能

Scrapbox の野良 Electron アプリにちょっとしたヒストリとブックマーク機能を追加しようと思いました。 最初はメニューに履歴を追加してピン止めするような UI を作ろうとしましたが、Electron では動的にメニューアイテムを追加削除する API が提供されて…

Vue を使って Electron アプリを開発する

blog.kondoumh.com Vue のことがちょっと分かった気になれました。すると、最近よく触っている Electron でのアプリ開発にも取り込みたくなります。 github.com Scrapbox in Electron は WebView でサイトの画面を表示していますが、Electron では当然自前で…

Vue と JointJS でトイ・ダイアグラムエディタ

Vue 人気ありますね。あまり真剣に触ったことがなく ToDo サンプルとかだとどうも分かった気になれない。ということで JointJS 使って CodePen で書いたトイ・ダイアグラムエディタを題材に構造を検討してみます。 blog.kondoumh.com JointJS は Backbone ベ…

Scrapbox Electron アプリ - タイトル付き書式でリンクを貼る機能

Scrapbox には URL をペーストすると、その Web ページのタイトルを取得して、[url title] の記法でペーストしてくれる Chrome 拡張や Bookmarklet がいくつかあります。 ScrapScripts もそのひとつ。 chrome.google.com 同僚からこの拡張の使い方を教えても…

Scrapbox Electron アプリにページ一覧と検索 UI を追加

弊社の Scrapbox 活用事例が公開されました。 medium.com 社内 Scrapbox けっこう盛り上がっていて、なにかというと更新しています。ページもすごい勢いで増加していて退屈しません。 Scrapbox の更新頻度アップに伴って Electron アプリも時々更新してます…

Pixel 3 XL を Linux マシンとして活用する

blog.kondoumh.com Pixel 3 XL にスイッチして1ヶ月以上快適に使ってます。電話も6インチ超えになると iPad を持ち歩く意味も希薄になり、外出時はスマホだけあればいいというミニマリズムを追求したくなってきました。 iPad では VPS に SSH 接続してコード…

タブ機能付きの Scrapbox クライアントを Electron で作る

今年から会社で Scrapbox が情報共有ツールとして採用されました。社内の情報が集まるようになって効果が出てきていると思います。 scrapbox.io 個人的には去年から Scrapbox を愛用しています。 blog.kondoumh.com Chrome で2つの Scrapbox アカウントを使…

CodeSandbox : Playground 感覚な GitHub も使える Desktop PWAs 対応までしてるいいやつ

最近、CodeSandbox を使ってる人を見かけるようになりました codesandbox.io 以前取り上げた CodePen はデザイナーも使う cool な JS Playground という感じで、ブログにデモとコードを一緒に貼り付けたりするのに便利でした。 blog.kondoumh.com CodeSandbo…

Express で REST API を TypeScript で書くための boilerplate ジェネレータ

最近 Node.js の Web App Framework である Express で TypeScript を使って REST API を書く機会がありました。 これまでずっとサーバーサイドは Java や .NET で書いてきたので Node.js で書くこと自体が新鮮でしたし TypeScript も久々でした。 作業はも…

JointJS でトイ・ダイアグラムエディタ

前回 CodePen でトイ・ダイアグラムエディタを作った時は、Konva.js を使っていました。 blog.kondoumh.com 今回は、JointJS で同様のトイプログラムを書いてみました。 JointJS: Visualize and interact with diagrams and graphs JointJS 自体は、2014年末…

Electron 版 Twitter クライアントを急造 - macOS PWA 版までのつなぎ

2月に macOS の公式 Twitter クライアントはディスコンになりました。 iphone-mania.jp 僕のマシンでは最後の方は接続エラーが出まくるようになっていたので、使わなくなっていました。代替として推奨されている TweetDeck をインストールしたのですが、Web …

CodePen で手軽に Web UI を推敲する

HTML / CSS / JavaScript の Playground は JSFiddle などが有名ですが、結構前から CodePen と言うサービスが普及しているようで。最近になって知りました。 codepen.io Qiita でも最近記事内に CodePen を埋め込めるようになったりしています。 qiita.com …

AWS Lambda で Alexa スキル開発 (Hello World 編)

blog.kondoumh.com Echo Dot 買ったら Alexa スキルで Voice UI 開発ということで Hello World してみました。 Alexa スキルは AWS Lambda で実装しますが、以前 Web IDE の Cloud 9 を試すときに AWS アカウントを作っていたのでしばらく無料で試せます。 b…