JavaScript
先日 Node.js で Google Fit から歩数や体重データを取得するのをやりました。 blog.kondoumh.com 体重データはスマホアプリから登録できるけど Fit を使う前の過去データは手入力やってられてられないので、API による登録方法を調べました。 公式ドキュメ…
今年になってから今更ですがドラクエウォーク始めました。 www.dragonquest.jp 通勤しないけど、このおかげでけっこう外歩きするようになってるので、歩数データと体重データの相関取ったりしてみたいなあと思いました。Google Fit って Web アプリは廃止さ…
Netlify Functions は AWS Lambda を基盤とした API のプラットフォームです。 blog.kondoumh.com 利用は非常に簡単ですが、最近さらに Zero configuration という仕組みが導入されました。規定のディレクトリ (netlify/functions) にコードを配置するだけで…
テレワークで外出が減って、運動不足を自覚するようになりました。人間ドックでも数値がちょっと悪くなってました。そこで YouTube の Fit boxing チャンネルなどで室内運動するようになりました。外出した日は意識して歩数を伸ばすようにしたりしてます。 …
Scrapbox のページ間リンクを可視化するやつです。 Graphviz バージョン blog.kondoumh.com D3.js バージョン blog.kondoumh.com D3.js バージョンを半年ぶりにちょっと触りました。と言っても Visualization の方式を変えたとかではなく、ノードをフィルタ…
Netlify は静的サイトをホスティングするのに便利です。 blog.kondoumh.com JSON データを置いてちょっとしたデータソース的にも使えます。 blog.kondoumh.com しかし、JSON を静的に配置できるだけだと上の記事のように更新のためのパイプラインを実装する…
GitHub では Octokit という API クライアントが提供されています。 github.com GitHub の REST API は fetch でも叩けますが、octokit/rest が使いやすくラップしてくれてます。 リポジトリ内のファイルの中身は getContent で取得して Base64 デコードする…
以前 Scrapbox から API でデータを取得して、ページ間リンクを可視化する (ための Graphviz dot ファイルを吐く) CLI を作成しました。 blog.kondoumh.com その後 Graphviz よりインタラクティブな可視化ができる技術として D3.js の force simulation を使…
Puppeteer を使うと Web 画面の E2E テストが手軽に書けます。 github.com ただ最近の Web UI は DOM 要素に ID が振られていないことが多く、Selector 書くのに Chrome DevTools などで要素をインスペクトしてパスをコードに貼り付けるという作業が多くなり…
GitHub Actions では、よく使う処理を Action として切り出して再利用できます。Marketplace にはすでに多くの Action が登録されています。 GitHub Marketplace · Actions to improve your workflow · GitHub Action には Docker Container Action と JavaS…
野良 Scrapbox アプリのページ一覧画面では Vuetify の Data table component を使っています。 Vuetify は v1 → v2 でかなり breaking change が入りました。 https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide 数ヶ月…
PWA のデプロイに利用した Netlfy。 blog.kondoumh.com JSON を生成するプログラムをデプロイすれば JSON を置いて定期更新する用途にも使えるということで、Tumblr API で取得したデータから JSON を生成するだけの Node.js アプリを書いて Netlify にデプ…
静的サイトをホスティングできる Netlify 流行ってます。Git リポジトリを指定するだけでビルド・デプロイでき、CDN でリソースをキャッシュしてくれるので、PWA のホスティングにも向いています。 PWA を作る方法は色々とありますが Vue CLI で簡単にプロジ…
Electron での開発で自分で作ったアセット (HTML / JavaScript / CSS) を WebView で表示することはあまりないと思いますが、アプリの構造上 WebView を使う必要がある場合、困るのは Main Wndow 用の DevTools では WebView コンテンツの JavaScript デバッ…
Vue の UI Component 集 Vuetify の Data tables Component を Electron アプリで使ってみたいと思い、組み込み方法を検討していました。 vuetifyjs.com 以前 electron-vue で Electron プロジェクトを生成して Vue 使う話を書きました。 blog.kondoumh.com …
コンテキストメニュー Info からページ情報を表示するダイアログを出すようにしました。 ページを開く前に概要を把握できたらと思い、ページへのリンクに対してコンテキストメニューを表示しています。 タイトル、ページを作成したユーザ、共同編集ユーザ、…
そもそも社内勉強会で喋るというのが初だったかも。 Electron early 2019 from Masahiro Kondoh www.slideshare.net 趣旨としては、 Electron 熟成してきてるよ クロスプラットフォーム開発大変だけど Electron はけっこう手軽 PWA の方が流行るかもしれない…
Scrapbox の野良 Electron アプリにちょっとしたヒストリとブックマーク機能を追加しようと思いました。 最初はメニューに履歴を追加してピン止めするような UI を作ろうとしましたが、Electron では動的にメニューアイテムを追加削除する API が提供されて…
blog.kondoumh.com Vue のことがちょっと分かった気になれました。すると、最近よく触っている Electron でのアプリ開発にも取り込みたくなります。 github.com Scrapbox in Electron は WebView でサイトの画面を表示していますが、Electron では当然自前で…
Vue 人気ありますね。あまり真剣に触ったことがなく ToDo サンプルとかだとどうも分かった気になれない。ということで JointJS 使って CodePen で書いたトイ・ダイアグラムエディタを題材に構造を検討してみます。 blog.kondoumh.com JointJS は Backbone ベ…
Scrapbox には URL をペーストすると、その Web ページのタイトルを取得して、[url title] の記法でペーストしてくれる Chrome 拡張や Bookmarklet がいくつかあります。 ScrapScripts もそのひとつ。 chrome.google.com 同僚からこの拡張の使い方を教えても…
弊社の Scrapbox 活用事例が公開されました。 medium.com 社内 Scrapbox けっこう盛り上がっていて、なにかというと更新しています。ページもすごい勢いで増加していて退屈しません。 Scrapbox の更新頻度アップに伴って Electron アプリも時々更新してます…
blog.kondoumh.com Pixel 3 XL にスイッチして1ヶ月以上快適に使ってます。電話も6インチ超えになると iPad を持ち歩く意味も希薄になり、外出時はスマホだけあればいいというミニマリズムを追求したくなってきました。 iPad では VPS に SSH 接続してコード…
今年から会社で Scrapbox が情報共有ツールとして採用されました。社内の情報が集まるようになって効果が出てきていると思います。 scrapbox.io 個人的には去年から Scrapbox を愛用しています。 blog.kondoumh.com Chrome で2つの Scrapbox アカウントを使…
最近、CodeSandbox を使ってる人を見かけるようになりました codesandbox.io 以前取り上げた CodePen はデザイナーも使う cool な JS Playground という感じで、ブログにデモとコードを一緒に貼り付けたりするのに便利でした。 blog.kondoumh.com CodeSandbo…
最近 Node.js の Web App Framework である Express で TypeScript を使って REST API を書く機会がありました。 これまでずっとサーバーサイドは Java や .NET で書いてきたので Node.js で書くこと自体が新鮮でしたし TypeScript も久々でした。 作業はも…
前回 CodePen でトイ・ダイアグラムエディタを作った時は、Konva.js を使っていました。 blog.kondoumh.com 今回は、JointJS で同様のトイプログラムを書いてみました。 JointJS: Visualize and interact with diagrams and graphs JointJS 自体は、2014年末…
2月に macOS の公式 Twitter クライアントはディスコンになりました。 iphone-mania.jp 僕のマシンでは最後の方は接続エラーが出まくるようになっていたので、使わなくなっていました。代替として推奨されている TweetDeck をインストールしたのですが、Web …
HTML / CSS / JavaScript の Playground は JSFiddle などが有名ですが、結構前から CodePen と言うサービスが普及しているようで。最近になって知りました。 codepen.io Qiita でも最近記事内に CodePen を埋め込めるようになったりしています。 qiita.com …
blog.kondoumh.com Echo Dot 買ったら Alexa スキルで Voice UI 開発ということで Hello World してみました。 Alexa スキルは AWS Lambda で実装しますが、以前 Web IDE の Cloud 9 を試すときに AWS アカウントを作っていたのでしばらく無料で試せます。 b…