こんにちは、CX事業本部 Delivery部の若槻です。
以前に GitHub Next について紹介をしました。
その GitHub Next のプロジェクトの1つである GitHub Blocks では、GitHub Repository 上のドキュメントの表示や検索、編集のインターフェースを拡張できるドキュメントブロックが提供されます。
今回は、今まで Waitlist ステータスだった GitHub Blocks が先日に Technical Preview となり、誰でも使えるプロトタイプが公開されていたので触ってみました。
プロトタイプにアクセスする
GitHub Blocks トップページより、プロトタイプにアクセスできます。
初サインインの場合は Blocks (GitHub Next) へのアクセスを求められます。
プロトタイプにアクセスできました。既定では githubnext/blocks というパブリックリポジトリが GitHub Blocks アプリで表示されます。（後述の通り権限を持っている任意のリポジトリでも利用可能）
Blocks の利用
利用可能な Blocks は適用対象が「ファイル」と「ディレクトリ」のいずれであるか、またはファイルの拡張子によって異なります。以下の表は、Markdown（.md）ファイルで利用可能な Blocks の一覧です。
| Block 名 | 説明 |
|---|---|
| Code | コードの閲覧および編集 |
| Markdown | 他の Block を埋め込み可能な Markdown コンテンツの閲覧および編集 |
| Edit code with ML | ML モデルによるコード編集プロンプト |
| Edit with Preview | コードをプレビューしながら編集 |
| IDE Blocks | ツールチップやシンボルナビゲーションの提供 |
| Decklist Block | デッキリストのレンダリング |
| Syntax Highlighter | Prism を使用した構文ハイライター |
| Lyra Block | 検索エンジン Lyra の実装 |
| Font Block | フォントファイルのプレビュー |
| Diff Block | 差分の表示 |
| Styleguide Block | リビングスタイルガイドの概念実証 |
| Rich-text Markdown Editor Block | Markdown リッチテキストエディター |
| Scrimba File Block | scrimba の利用 |
| Test File Block | 外部 API から取得したデータのレンダリング |
| skinview3d | Three.js による Minecraft スキンのレンダリング |
| YouTube | Markdown ドキュメントへの YouTube ビデオの埋め込み |
| Secretlint | Secretlint によるドキュメント編集 |
| Elastic machines config | Elastic machines config の Block |
| Liquid Viewer | Liquid 構文を使用するコンテンツの表示 |
| Emoji Block | 絵文字によるコードへのリアクション |
| Spectacle Block | Markdown のプレゼンテーションへの変換 |
一覧にはすでに GitHub 公式ではないものも登録されており、サードパーティ開発が可能になっています。
一覧に表示されているもの以外にも、URL で Blocks を直接指定することも可能です。
左ペインのファイルツリーでディレクトリを選択した場合は、ファイルでは使えなかった Minimap などの Blocks が利用可能になります。
コミット履歴の選択によるファイルの表示
右側のサイドバーでは、コミット履歴を選択することで、そのコミット時点のファイルやディレクトリの状態をプレビュー表示することができます。
githubnext / blocks より引用
変更をビジュアルな変化で確認できるのは便利ですね。
任意のリポジトリでの Blocks の利用
既定では編集権限のないリポジトリが開かれますが、任意のリポジトリを開いて Blocks を利用することもできます。
画面左上から開きたいリポジトリを検索できます。
もしくは https://blocks.githubnext.com/<Account>/<Repository> という URL で直接開くことができます。
ちなみに自分が編集権限を持っているリポジトリでも Blocks の GitHub Apps をインストールしていない場合は変更を保存することができません。
またプライベートリポジトリは GitHub Apps をインストールしなければ、閲覧もできません。GitHub Apps のインストールは こちら の URL から行えます。
インストールをしたいリポジトリを選択して、権限の許可とインストールを行います。
GitHub Apps をインストールをしたら、プライベートリポジトリも Blocks を利用して閲覧できるようになりました。
ファイルの編集も可能で、コミット一覧には対応中の変更が追加されます。
[Save] をクリックするとコミットのダイアログが表示されます。
この GitHub 上で完結するドキュメントの編集体験がとにかく素晴らしいので是非試して頂きたいです。
Blocks の開発
前述の通り Blocks はすでにサードパーティで開発できるようになっています。
GitHub Next リポジトリ を blocks で検索すれば開発用のテンプレートを探すことができます。
本記事では Blocks の詳しい開発方法については触れませんが、次の記事やツイートが参考になりそうなので興味のある方はご覧ください。
GitHub Blocks使えるようになった "GitHub Blocks" https://t.co/Fzyngp6rRI
— azu (@azu_re) February 10, 2023
ツイート主の azu さんに至っては Blocks の公開もされています。スピード感が素晴らしいですね。私も見習いたいものです。
おわりに
GitHub のインターフェースを拡張できる「GitHub Blocks」が Technical Preview となったので触ってみました。
今まではローカルで VS Code などのエディターを利用してリポジトリ上のコンテンツの編集をするのが当たり前でしたが、今後はその体験が大きく変わりそうな予感がしますね。引き続きキャッチアップしていきたいです。
以上
29
