GitHub のインターフェースを拡張できる「GitHub Blocks」が Technical Preview となっていました

こんにちは、CX事業本部 Delivery部の若槻です。

以前に GitHub Next について紹介をしました。

その GitHub Next のプロジェクトの1つである GitHub Blocks では、GitHub Repository 上のドキュメントの表示や検索、編集のインターフェースを拡張できるドキュメントブロックが提供されます。

• GitHub Blocks

今回は、今まで 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 などのエディターを利用してリポジトリ上のコンテンツの編集をするのが当たり前でしたが、今後はその体験が大きく変わりそうな予感がしますね。引き続きキャッチアップしていきたいです。

以上