P2Pブラウザ「Beaker」のドキュメント(上級編)を和訳してみた



Beakerは、https://beakerbrowser.com/ にて公開されているHypercoreと呼ばれるピアツーピアのプロトコルを用いたブラウザです。このHypercoreと同様のものとしてIPFS(Interplanetary File System) https://ipfs.io/ があります。


![beaker.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/e9822ead-8714-d664-9212-45691ba51819.png)


IPFSは、Brave Browserに組み込まれていてHypercoreと比較し知名度が高いと思われます。著者もIPFSの方を先に知っていました。会社勤めを辞めたおり、Hacker NewsにてこのBeakerを知り、IPFSと比較して日本語の記事がまるで検索されなかったので、暇つぶしも兼ねて https://beakerbrowser.com/ にて公開されている記事を和訳してみた次第です。

なお、
- 和訳は、[DeepL](https://www.deepl.com/) にて英語から日本語に訳し、日本語文章としておかしな部分が無いように調整した程度のものです。単語の統一性まで確認するほどの厳密な和訳作業はしていません。

- 以降の用いられる画像ファイルは、https://beakerbrowser.com/  にて公開されている画像ファイルと同一物です。

- 「[P2Pブラウザ「Beaker」のドキュメント(中級編)を和訳してみた](https://qiita.com/bitlonginthetooth/items/f90aef89592ce7491a6b)」の続きです。


# 上級編
## Webterm

Webtermは、Beakerに同梱されているWebベースの端末環境です。表面的には  Unix  の "bash" 端末に似ていますが、ブラウザと  Hyperdrive  環境のために特別に設計されています。

![](img/webterm-87e34d79ee2162a7f80c0f3271963dd9.png)

### 基本的な使い方

ターミナルを開くには、Ctrl+~を押すか、ブラウザのツールバーにある「ターミナル」ボタンをクリックします。

ターミナルは、Unixの「bash」に似たコマンド構文を使用します。

```
command [-s|--switch {param}] {param1} {param2}
```

現段階では、パイピングやサブ・インボイスはありません。コマンドはすべてJavaScriptの関数に変換され、beaker.terminal APIを使って作成できます。

### 内蔵コマンド

いつでもhelpと入力すれば、利用可能なコマンドの全リストを見ることができます。ここでは、便利なビルトインをいくつか紹介します。

- go  ターミナルと添付のページを指定されたパスまたは  URL  に移動します。
- cd. ターミナルを指定されたパスまたは  URL  に移動します。
- ファイルシステム
    - ls. 指定された場所にあるファイルをリストアップします。
    - pwd. 現在の端末の位置を取得する。
    - mv. ファイルやフォルダーを移動する。
    - cp. ファイルまたはフォルダーをコピーする。
    - mkdir. フォルダーを作成する。
    - mount. マウントリンクを作成する。
    - rm. ファイル、フォルダー、またはマウントを削除する。
    - meta. ファイルのメタデータを表示または編集する。
    - cat. ファイルの内容を表示する。
    - edit. 編集。ファイルを編集する。
- コマンドの管理
    - term ls. インストールされているコマンドページを一覧表示する。
    - term install. 新しいコマンド・ページをインストールする。

### 環境変数

Webtermは、コマンドを呼び出す際に環境変数を使用できます。これらは、'$' ドル記号を先頭に持つ単語です。

```
echo $cwd
```

環境変数を表示したり変更したりするには、envコマンドを使用します。デフォルトでは、Webtermは以下の環境変数を定義しています。

- $@ Webtermが添付されている現在のページのURL。
- $cwd Webtermが現在作業している場所のURL。

### 新しいコマンドの作成とインストール

インストールされているWebtermのコマンドは、termコマンドで管理できます。コマンドはbeaker.terminal APIを使ってコマンドを登録したWebページから提供されます。

コマンドを呼び出すには、@ 構文を使用してページを訪問しているときと、term installを使用してページをインストールするときの2通りの方法があります。

https://example.com/term.html にある、次のようなコードを持つページの例を見てみましょう。

``` js
<script>
beaker.terminal.registerCommand({
  name: 'alert',
  help: 'Display an alert box',
  usage: 'alert {message}',
  async handle (opts = {}, message = '') {
    alert(message)
  }
})
</script>
```

コマンドを実行する簡単な方法は、https://example.com/term.html にアクセスし、webtermを開き、次のように入力することです。

```
@alert "Hello world!"
```

もし、どこからでもコマンドを起動できるようにしたい場合は、以下のようにインストールします。

```
term install example https://example.com/term.html
```

この場合、このページのコマンドは「example」名前空間の下にインストールされます。そうすると、alert()をどこからでも呼び出すことができるようになります。

```
example alert "Hello world!" 
```

と入力すれば、どこからでも  alert() を呼び出すことができます。
もし@構文を使ってコマンドを呼び出すと、そのページが訪問されたときに、そのページ内でコマンドが実行されます。コマンドをインストールした場合、そのコマンドを呼び出すと、ページが見えないウィンドウで開かれ、実行されます。

---
## マウントの作成

「マウント」とは、あるハイパードライブをサブフォルダーとして別のハイパードライブにリンクさせるツールです。

マウントはさまざまなユースケースで役に立ちます。コレクションを作成したり、コードモジュールの依存関係をアタッチしたりと、さまざまな用途で使用できます。

マウントされたドライブは、サブフォルダーと同じように動作します。マウントされたドライブを「所有」していない場合、そのドライブが自分のものであっても、読み取り専用になります。

### エディターにて
ハイパードライブにアクセスし、エディターを開きます。次に、フォルダーアイコンをクリックして、ファイルリストを展開します。

![editor-list-files.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/28b2ff7d-7e4b-8397-926e-9ccfd433fa4c.png)


ファイル一覧で右クリックし（ただし、ファイル上ではありません）、「New Mount」を選択します。

![editor-new-mount.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/debcdb79-4c2a-2386-7ff4-bb5382228344.png)


マウントするハイパードライブを選択するプロンプトが表示されます。目的のドライブがリストにない場合は、入力欄にドライブのURLを入力してください。

![select-drive-dialog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/b7f8b98b-0e3b-dd6c-4bec-470b6b34b7a8.png)


次に、マウントの名前を入力するプロンプトが表示されます。これはマウントが表現する「フォルダー」の名前です。名前を決めて、"OK "を押してください。

![mount-name-dialog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/3bdebf09-1bfe-829c-619f-0a6a964ec282.png)


新しいマウントがエディターのファイル一覧に表示されます。

![mount-in-editor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/314da886-45c0-dc1c-fa88-87efecb1910a.png)



### ファイルエクスプローラーで

ハイパードライブにアクセスし、「Explore Files」をクリックしてファイルエクスプローラーを開く。

![open-files-explorer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/22093a3e-72f6-9ba5-92e1-7948ead1b3fa.png)


ファイル一覧で右クリックし（ただし、ファイル上ではありません）、「New Mount」を選択します。


![files-explorer-new-mount.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/06fa96e2-81a9-d797-b5bf-81554779d2c2.png)



マウントするハイパードライブを選択するプロンプトが表示されます。目的のドライブがリストにない場合は、入力欄にドライブのURLを入力してください。
![select-drive-dialog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/c1e3e552-1225-415c-7766-1469e722b50b.png)


次に、マウントの名前を入力するプロンプトが表示されます。これはマウントが表現する「フォルダー」の名前です。名前を決めて、"OK "を押してください。

![mount-name-dialog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/3636d27a-41a9-09c7-c31b-d90f8ee34b39.png)


エクスプローラーのファイル一覧に新しいマウントが表示されます。

![mount-in-files-explorer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/7aed8607-a443-a0fb-c1ff-dc6eecea2c8a.png)

---
## ファイルのメタデータを編集する

Hyperdriveのファイルは、メタデータ値を持つことができます。

メタデータはUTF-8の文字列として保存されます。各値はキー文字列で識別されます。ファイルには好きなだけメタデータ値を付けることができますが、あまりやりすぎると読み込みが遅くなるので注意してください。

### エディターで
修正したいファイルにアクセスし、エディターを開きます。ツールバーの「File Metadata」ボタンをクリックします。

![editor-file-metadata.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/4126efef-cf04-a2cb-8800-8a37a3e9d9f3.png)


左側にメタデータのキー、右側に値を表示したドロップダウンが表示されます。新しい値を追加するには、下部の空の入力を使用します。既存の値を修正したり、値を削除するだけで削除できます。

![editor-file-metadata-dropdown.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/0ae734eb-e560-5bb6-4e67-bec73c9af410.png)



終了したら、「Save」をクリックして変更を書き込みます。

---
## ハイパードライブのフォーク

「ハイパードライブをフォークする」とは、親に接続されたコピーを作成することを意味します。

フォークは開発フローにおいて有用です。これは、その起源を追跡するクローンを作成します。これにより、元のドライブとの比較やマージが容易になります。

次のような場合にドライブをフォークできます。

- 変更をすぐに公開せずにドライブ上で作業したい場合。
- 他の人と一緒にドライブで作業する場合。
  
### フォークの作成

ハイパードライブをフォークするには、アドレスバーの左側にある「サイト情報」ボタンをクリックします。次に、「Tools」、「Fork Drive」の順にクリックします。


![fork-drive.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/b3cdc546-da1b-0438-46c5-abda2760cdbb.png)


フォークのラベルを選択する画面が表示されます。ラベルは、オリジナルや他のフォークと区別するために個人的に使用します。ラベルを選択し、「Create fork」をクリックして完了です。

![fork-drive-dialog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/0db20347-8cd8-804d-1b78-9a6850c2ae63.png)

「Copy」タブを開くと、ドライブの独立したコピー（親ドライブに接続されていない）を作成できます。

### フォークの管理

フォークにアクセスすると、アドレスバーのサイト情報ボタンにフォークのラベルが表示されます。

![fork-site-info.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/3b9c3676-593e-eda3-3354-3dec8cb0b6f3.png)



あるサイトのすべてのフォークを表示するには、サイト情報ボタンをクリックし、「Forks」サブメニューをクリックします。

![site-info-forks.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/6e9ffdca-3b58-83e4-a0f2-75af6168dfb0.png)


サイト情報パネルから、利用可能なフォークの一覧を見ることができます。フォークとオリジナルを行き来したり、削除したり、新しいフォークを作成できます。

ハイパードライブのフォークは、リスト内のフォーク番号をクリックすると「My Library」で見ることができます。

![my-drives-forks.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/297f1162-a6c1-5bd2-b52d-6d1977e93b85.png)


---
## ハイパードライブの比較と統合

ハイパードライブ間でファイルをコピーすると便利なことがあります。これは、ハイパードライブをフォークして何らかの変更を加えた後にとくに役立つ場合があります。

「Compare and Merge」インターフェイスを開くには、ハイパードライブに移動し「サイト情報」ボタンをクリックし、「Forks」サブメニューに移動して、「Diff/Merge Original」をクリックします。

![menu-diff-merge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/e0ef091e-3b25-9b15-9d43-343a46476375.png)


これにより、比較のインターフェイスが表示されます。

![diff-merge-interface.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/25cd3e8b-cbba-6bd9-61b4-ae6c5f7a2424.png)


左上のドロップダウンでソースドライブ、右のドロップダウンでターゲットドライブを選択します。

### ドライブのマージ

左のナビにあるチェックボックスをクリックして結合したいファイルを選択し、「Merge{n} Changes」をクリックすると、対象ファイルにコピーされます。

左ナビで個々のファイルを選択すると、差分を確認できます。

![diff-merge-individual-file.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/e577ddc1-0d78-e08f-9a75-71079d027cb1.png)



「Merge」は、選択したファイルのみを上書きして対象ドライブにコピーします。

### 他のユーザーのドライブ 

対象ドライブを所有していない場合は、このような画面が表示されます。

![diff-merge-not-owner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520265/7ce00f15-4db8-e57e-a70a-1c2acef499e4.png)


ドライブの所有者にURLを送信します。同じインターフェイスが提供され、変更を確認し、結合できます。