Electron.MyLog

Electronでつぶやきを保存する。

デモ

デモ

特徴

クロスプラットフォームGUIアプリ（Node.js, Electron製）
SQLite3でつぶやきを保存する（sql.js）
GitHub Pagesでつぶやきサイトを作成できる（git, GitHub API）
暗号通貨モナコインを投げ銭してもらうボタンを作成する（mpurse API）

開発環境

2022-09-06
Raspbierry Pi 4 Model B Rev 1.2
Raspberry Pi OS buster 10.0 2020-08-20 setup
bash 5.0.3(1)-release
Node.js 16.15.1
Electron 20
git 2.20.1
Chromium 92.0.4515.98（Official Build）Built on Raspbian , running on Raspbian 10 （32 ビット）
mpurse

$ uname -a
Linux raspberrypi 5.10.103-v7l+ #1529 SMP Tue Mar 8 12:24:00 GMT 2022 armv7l GNU/Linux

インストール

git

sudo apt install -y git

Node.js

sudo apt-get install -y nodejs npm
sudo npm cache clean
sudo npm install -g n
sudo n stable
sudo apt-get purge -y nodejs npm

新しい端末を開いてバージョンを確認する。

node -v
npm -v

このアプリ

NAME='Electron.MyLog.20220906090127'
git clone https://github.com/ytyaru/$NAME
cd $NAME
npm install
npm start

準備

アカウント・トークン作成

GitHubアカウントを作成する
repoスコープ権限をもったアクセストークンを作成する

設定

`db/setting.json`初回作成

インストール＆実行してアプリ終了する
db/setting.jsonファイルが自動作成される

`db/setting.json`セット

db/setting.jsonに以下をセットしファイル保存する

プロパティ名	デフォルト値	概要
`mona.address`	-	暗号通貨モナコインのアドレス
`github.username`	`git config --global user.name`	GitHubユーザ名
`github.email`	`git config --global user.email`	GitHubメールアドレス
`github.token`	-	アクセストークン（`repo`スコープ権限付）
`github.repo.name`	`{ルートディレクトリ名}.Site`	リポジトリ名
`github.repo.description`	`著者のつぶやきサイトです。`	リポジトリ説明文
`github.repo.homepage`	`https://${username}.github.io/${repo.name}/`（初回push時に空なら自動付与）	リポジトリ関連URL
`github.repo.topics`	`["website"]`	任意トピックス

リポジトリ状態

dst/mytestrepo/.gitが存在しないことを確認する（あればdstごと削除する）
GitHub上に同名リモートリポジトリが存在しないことを確認する（あれば削除か別名にする）

使い方

インストール、準備、設定を終え、アプリを起動したあとの使い方。

つぶやく

テキストエリアに任意のテキストを入力する
つぶやくボタンを押す
GitHubにpushされる

制限

140字以内であること
15行以内であること

HTML

テキストがURLの場合はHTMLとしてマークアップされる。

種別	HTML	概要	正規表現
URL(https)	`<a href="${text}">${text}</a>`	以下以外のURLらしき文字列すべて	`/((h?)(ttps?:\/\/[a-zA-Z0-9.\-_@:/~?%&;=+#',()*!]+))/g; // ']))/`
URL(ipfs)	`<a href="${text}">${text}</a>`	以下以外のURLらしき文字列すべて	`/((ipfs?:\/\/[a-zA-Z0-9.\-_@:/~?%&;=+#',()*!]+))/g; // ']))/`
画像	`<img src="${text}">`	URL末尾の拡張子が画像らしきURL	`/((https?:\/\/[a-zA-Z0-9.\-_@:/~?%&;=+#',()*!]+\.(png\|gif\|jpg\|jpeg\|webp\|avif)))/g; // ']))/`
音声	`<audio controls width="320" src="${text}"></audio>`	URL末尾の拡張子が音声らしきURL	`/((https?:\/\/[a-zA-Z0-9.\-_@:/~?%&;=+#',()*!]+\.(wav\|mp3\|ogg\|flac\|wma\|aiff\|aac\|m4a)))/g; // ']))/`
動画	`<video controls width="320" src="${text}"></video>`	URL末尾の拡張子が動画らしきURL	`/((https?:\/\/[a-zA-Z0-9.\-_@:/~?%&;=+#',()*!]+\.(mp4\|avi\|wmv\|mpg\|flv\|mov\|webm\|mkv\|asf)))/g; // ']))/`
YouTube	`<iframe width="320" height="240" src="https://www.youtube.com/embed/${match[1]}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`	URLがYouTubeらしきURL	`/https:\/\/www.youtube.com\/watch\?v=([a-zA-Z0-9.\-_@:/~?%&;=+#',()*!]+)/`

投げモナボタン

つぶやき一件ごとに投げモナボタンを表示することができる。

そのためにはdb/setting.jsonのmona.addressに暗号通貨モナコインのアドレスがセットされている必要がある。

ただし投げモナボタンはHTTPS上でないと起動しない。よってElectronアプリ上では動作しない。後述するGitHub Pagesにデプロイしたあと、そこで機能する。もちろんmpurseをインストールしている必要がある。

つぶやき削除

削除したいつぶやきの☒ボタンにチェックする
削除ボタンを押す
確認ダイアログでOKボタンを押す

なお、ひとつもチェックしなければ全件削除になるので注意。

GitHub Pages デプロイ

1件以上つぶやくしたら、それを表示するサイトをGitHub Pagesに展開する。

アップロードしたユーザのリポジトリページにアクセスする（https://github.com/ユーザ名/リポジトリ名）
設定ページにアクセスする（https://github.com/ユーザ名/リポジトリ名/settings）
Pagesページにアクセスする（https://github.com/ユーザ名/リポジトリ名/settings/pages）
1. SourceのコンボボックスがDeploy from a branchになっていることを確認する
2. Branchをmasterにし、ディレクトリを/(root)にし、Saveボタンを押す
3. F5キーでリロードし、そのページにhttps://ytyaru.github.io/リポジトリ名/のリンクが表示されるまでくりかえす（数分かかる）
4. https://ytyaru.github.io/リポジトリ名/のリンクを参照する（デプロイ完了してないと404エラー）

すべて完了したリポジトリとそのサイトの例が以下。

もしブラウザ拡張機能mpurseがインストールされており、db/setting.jsonのmona.addressがセットされていたら、つぶやき一件ごとに投げモナボタンが表示され、機能する。

著者

ytyaru

ライセンス

このソフトウェアはCC0ライセンスである。

ytyaru/Electron.MyLog.20220915121744