Electron

JavaScript によるデスクトップアプリ基盤 Electron に関する投稿です。

野良 Scrapbox アプリ - リニューアル

blog.kondoumh.com 半年ぐらい新アーキで簡素な UI で作りつつ、時折ないと不便だと感じた機能だけ移植しながら自分だけで使ってきました。UI を Vuetify にして、ベータ版を Pre-release で出してましたが、もういいかなってことで正式リリースしました。 …

Electron の記事執筆とスライド作成

豆蔵デベロッパーサイトにまた Electron の記事を投稿しました。 developer.mamezou-tech.com 同様の内容を Slidev を使ってスライドにしました。Netlify に簡単に publish できるのでしました。 https://history-of-electron-quick-start.netlify.app Slide…

野良 Scarpbox アプリ - アーキテクチャ見直しドッグフーディング

豆蔵デベロッパーサイトに投稿したブログ。 developer.mamezou-tech.com WebView 使ってる場合じゃなかったんやー・・ってことで、より速くてセキュアで将来性のある BrowserView による 野良 Scrapbox アプリ再構築を試みています。 ツールバーとかタブバー…

野良 Scrapbox アプリ - 動的なタブ幅のリサイズ

blog.kondoumh.com Electron 14 がリリースされたので野良 Scrapbox に適用しました。 13の時は発生してなかったんですが、タブを作成するときにページ内リンク以外のメニューとか、ツールバーの favs などからページを開くとアプリごとサクッと落ちるように…

Electron v14 リリースに備える

Electron v14 のリリースが 8/31 に迫っています。 www.electronjs.org 2年ぐらい前から12週ごとのリリースに移行しており、機能が deplicated になってから remove されるまでの期間も短くなっています。 www.electronjs.org 起動時に webPreferences で指…

野良 Scrapbox アプリ - Linux 用バイナリも Release に含めました。

これまで Windows と macOS のビルドを Release からダウンロードできるようにしていましたが、最近 Linux デスクトップも使うようになってきたので、Linux のバイナリを配布しようと思いました。 ひとまず起動確認。 ビルドして実行したところ GNOME のドッ…

Twitter タイムラインの自動リフレッシュを Electron アプリで実現

デスクトップでは Twitter を PWA で使っていますが、タイムラインが自動更新されないのがちょっと・・と思っていました。 かなり前に Electron で作ってた Twitter client blog.kondoumh.com このアプリに自動リフレッシュを組み込んでみようと思いました。…

Electron アプリの通知 on Windows

Electron は Notification をサポートしていて、Renderer プロセスでも Main プロセスでも表示できます。 野良 Scrapbox アプリで GitHub API 使って latest release を取得し現在のバージョンと違っていたら通知を出し、クリックしたらダウンロードページを…

野良 Scrapbox アプリ - ヒストリ機能とタブ幅調整

開いたページのヒストリ機能を追加しました。 ただこの機能ちょっと問題があって、Scrapbox ではタイトルの編集で URL が変わり WebView のイベント ("load-commit") が emit されてしまうので、編集途中のタイトルまで履歴に残ってしまいます。履歴にゴミを…

野良 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 数ヶ月…

野良 Scrapbox アプリ - ブラウザで開いたページを URL Scheme 経由で開く

Scrapbox を ブラウザで開いていてから「このページ sbe で開きたいなあ」ということがよくあります。 もともと sbe には URL をペーストして新規タブでページを開く機能はありますが、やはり手動はめんどくさいものです。 Electron にはシステムの URL Sche…

Electron アプリのパッケージツールを electron-builder に移行

GitHub Actions で 野良 Scrapbox アプリの CI を 作った話の続きです。 blog.kondoumh.com ほぼ同時ぐらいに azu さんが、同じテーマのブログを書かれてました。 efcl.info 僕のはビルドするところまででしたが、リリースまで実現されていて非常に参考にな…

GitHub Actions の Matrix build で各 OS 向けの Electron アプリをビルドする

Scrapbox の野良 Electron アプリ sbe をリリースするときは、macOS / Windows のバイナリをそれぞれ MacBook Pro や Windows ラップトップでビルドし GitHub の Release Draft にアップロードして公開しています。ビルドが1箇所でできないのは結構めんどく…

野良 Scrapbox アプリ - 自分が作成したページ一覧表示と v1.0 リリース

社内で Scrapbox を使っていると大量のページが日々作られ、作成したページが埋もれて忘れてしまうことがよくあります。書きかけで放置してしまうことも。 そこで、作成したページを時折見直し加筆修正する契機になるよう、自分が作ったページ一覧を表示する…

野良 Scrapbox アプリ - 直リンページャー機能

Scrapbox ページのリンク先をパラパラめくって閲覧するような UI が欲しいという要望がありました。ページ集約用のタグとして使われているページを開いて、リンク先の(そのページをタグに指定している)ページを順番に見ていくような使い方です。 Scrapbox で…

野良 Scrapbox アプリ - ページ一覧の自動リフレッシュ

Scrapbox Electron アプリのページ一覧画面。 社内 Scrapbox は頻繁に更新されるため、手動で画面をリフレッシュするのが面倒でした。社内プロジェクトはピン留めしたページが多いので手でスクロールするのも面倒。 そこで、ページ一覧画面がアクティブにな…

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 アプリ - プロジェクトアクティビティ表示ダイアログ

またまた Scrapbox アプリの話。 社内で導入されている Scrapbox。隙間時間に閲覧・更新できて社内の活動も透明化されるということで、我々のように客先常駐が多い環境では導入効果高いです。 導入した管理者の人から、利用状況を把握するためページビュー(…

野良 Scrapbox アプリ - 見出し指定っぽいコンテキストメニュー

Scrapbox には見出し記法はなく、文字の大きさを [** text] というフォーマットで修飾する(* が多いとサイズが大きい) という仕様です。標準のメニューでは * 1個のパターンのみ Strong 記法として指定可能です。 長めの文章を書いていると、文字の大きさを…

野良 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 では当然自前で…

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

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

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

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

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

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

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

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