# 非コード ファイルの操作

GitHub では、多くの非コード ファイル形式でのレンダリングと差分がサポートされています。

## 画像をレンダリングして違いを見極める

GitHub では、PNG、JPG、GIF、PSD、SVG など、いくつかの一般的な画像形式を表示できます。 単に表示するだけではなく、画像を異なるバージョン間で比較する方法もいくつかあります。

> \[!NOTE]
> \*
> GitHub では、PSD ファイル間の違いの比較はサポートされていません。
>
> * Firefox ブラウザーを使用している場合、 GitHub 上の SVG がレンダリングされない可能性があります。

### イメージを表示する

GitHub上のリポジトリ内のイメージを直接参照して表示できます。

SVG では現在、インラインスクリプトやアニメーションはサポートされていません。

### 差異を見る

3 つの異なるモードで画像を視覚的に比較できます: [2アップ](#2-up)、[スワイプ](#swipe)、[オニオンスキン](#onion-skin)。

#### 見開き(2-Up)

**2-up** は既定のモードであり、両方の画像を迅速に確認できます。 加えて、画像のサイズがバージョン間で変わっていれば、その違いがそのまま表れます。 このモードではサイズの違いが明瞭にわかります。アセットがより高い解像度にアップグレードされた場合などにサイズが変わります。

![2-up モードでの画像の差分のスクリーンショット。 右側の大きな画像は緑色の枠線で囲まれています。 左側の画像は赤色の枠線で囲まれています。](/assets/images/help/repository/images-2up-view.png)

#### スワイプ

**スワイプ**では画像の部分を並べて表示することができます。 異なるバージョン間で色が変わったかどうかわからない場合、 スワイプスライダーを問題の領域までドラッグして注目すると、違いが見えてきます。

![スワイプ モードでの画像の差分のスクリーンショット。 真中の線で画像が分割されています。緑色の枠線で囲まれているのが新しい画像、赤色の枠線で囲まれているのが古い画像です。](/assets/images/help/repository/images-swipe-view.png)

#### オニオンスキン

**オニオン スキン**は、要素の移動量が小さくてわかりづらい場合に役立ちます。 アイコンが 2 ピクセル左に移動しましたか？ 不透明度のスライダーを少し戻して、物が動くかどうかを確認してください。

## 3Dファイルビューア

GitHub では、 *.stl* 拡張子を持つ 3D ファイルをホストしてレンダリングできます。

GitHub上の STL ファイルを直接見ると、次のことができます。

* クリックしてドラッグすることでモデルを回転させる。
* 右クリックしてからドラッグすることでビューを変換する。
* スクロールしてズームイン及びズームアウトする。
* 様々なビューモードをクリックしてビューを変更する。

### 低速なパフォーマンスの修正

ビューアーの隅にツールヒント "WebGL 搭載ハードウェア サポートが利用できません" と表示された <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-info" aria-label="the info icon" role="img"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg> が表示された場合、WebGL テクノロジはブラウザーで使用できません。

使用しているコンピューターのハードウェアを完全に活用するためには、WebGLが必要です。 WebGL が有効になった状態で出荷される [Chrome](https://www.google.com/intl/en/chrome/browser/) や [Firefox](https://www.mozilla.org/en-US/firefox/new/) などのブラウザーを試してみることをお勧めします。

### エラー："Unable to display"（表示不能）

モデルが無効な場合、GitHubはファイルを表示できない可能性があります。 さらに、10 MB を超えるファイルは大きすぎるため、GitHubを表示するには大きすぎます。

### 他の場所へのモデルの埋め込み

インターネット上の別の場所に3Dファイルを表示するには、このテンプレートを変更し、JavaScriptをサポートするHTMLページに配置します。

```html
<script src="https://embed.github.com/view/3d/<username>/<repo>/<ref>/<path_to_file>"></script>
```

たとえば、モデルの URL が [`github.com/skalnik/secret-bear-clip/blob/master/stl/clip.stl`](https://github.com/skalnik/secret-bear-clip/blob/master/stl/clip.stl) のとき、埋め込みコードは次のようになります。

```html
<script src="https://embed.github.com/view/3d/skalnik/secret-bear-clip/master/stl/clip.stl"></script>
```

既定では、埋め込まれるレンダラーは幅 420 ピクセル、高さ 620 ピクセルになりますが、`?height=300&width=500` のように高さと幅の変数をパラメーターとして URL の末尾に渡すことで、この出力をカスタマイズできます。

> \[!NOTE]
> `ref` は、ブランチまたは個々のコミットへのハッシュとすることができます (例: `2391ae`)。

### Markdown でのレンダリング

ASCII STL 構文は Markdown に直接埋め込むことができます。 詳しくは、「[ダイアグラムの作成](/ja/enterprise-server@3.22/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams#creating-stl-3d-models)」をご覧ください。

## CSV および TSV データをレンダリングする

GitHub は、*.csv*（コンマ区切り）および .*tsv*（タブ区切り）ファイル形式での表形式データのレンダリングをサポートしています。

![レンダリングされている CSV ファイルのスクリーンショット。データが表形式で表示されています。](/assets/images/help/repository/rendered-csv.png)

表示すると、GitHub上のリポジトリにコミットされた *.csv* または *.tsv* ファイルが自動的に対話型テーブルとしてレンダリングされ、ヘッダーと行番号が含まれます。 デフォルトでは、常に 1 番目の行がヘッダ行であるとみなされます。

行番号をクリックして特定の行にリンクすることも、Shift キーを押して複数行を選択することもできます。 あとは URL をコピーして送るだけです。

### データ検索

データセットから特定の値を見つけるには、ファイルの上にある検索バーで直接、入力を開始します。 行のフィルター処理が自動的に行われます。

### エラーの処理

時々、CSV や TSV が正常にレンダリングされないことがあります。 その場合、生テキストの上にメッセージが表示され、考えられるエラーが示されます。

![CSV ファイルのテキスト ビューのスクリーンショット。 ヘッダーのメッセージに "この CSV ファイルの 0 行目にコンマが見つかりません" というエラーが示されます。](/assets/images/help/repository/csv-render-error.png)

一般的なエラーの理由は、次のとおりです。

* 列カウントの不一致。 セルは空白でもかまいませんが、各行の区切り文字の数は同じである必要があります。
* ファイルサイズの超過。 レンダリングが機能するファイルのサイズは 512KB までです。 それより大きいと、ブラウザが低速になります。
* サポートされていない区切り記号の使用 (コンマの代わりにセミコロンなど)。

## PDF ドキュメントをレンダリングする

GitHub では、PDF ドキュメントのレンダリングがサポートされています。

現在、PDF 内のリンクは無視されます。

## 文章ドキュメントの差分をレンダリングする

文章ドキュメントを含むコミットとプル要求には、そのドキュメントを\_ソース\_ ビューと\_レンダリング済み\_ビューで表示する機能があります。

ソース ビューには、入力された生のテキストが表示されますが、レンダリングされたビューでは、テキストが GitHubにレンダリングされるとどのように表示されるかが示されます。 たとえば、`**bold**` を Markdown で表示することと、レンダリングされたビューに**太字**で表示する場合の違いは次のようになります。

文章のレンダリングは、[github/markup](https://github.com/github/markup) でサポートされているレンダリングされたドキュメントでサポートされています。

* Markdown
* AsciiDoc
* 織物
* ReStructuredText
* Rdoc
* 組織
* Creole
* MediaWiki
* Pod

コミットの一部としてドキュメントに加えられた変更を表示するには、\[ <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-file" aria-label="Display the rich diff" role="img"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg>] をクリックします。

![マークダウン ファイルの差分のスクリーンショット。 ファイルのヘッダーには、ファイル アイコンが濃いオレンジ色の枠線で囲まれています。](/assets/images/help/repository/rendered-prose-diff.png)

この "リッチ diff" には、追加や削除されたコードが強調表示されています。

![マークダウン ファイルの差分のスクリーンショット。 古いテキスト "@octo-org/core" は赤い背景で打ち消されています。 新しいテキストの背景は緑色です。](/assets/images/help/repository/rendered-prose-changes.png)

### Markdown レンダリングの無効化

Markdown ファイルを表示するときに、ファイルの上部にある **\[Code]** をクリックすると、Markdown レンダリングが無効になり、代わりにファイルのソースが表示されます。

![ファイルを操作するためのオプションが示されているリポジトリ内のマークダウン ファイルのスクリーンショット。 \[コード\] というラベルが付いたボタンが濃いオレンジ色の枠線で囲まれています。](/assets/images/help/writing/display-markdown-as-source-global-nav-update.png)

Markdown レンダリングを無効にすると、ライン リンクなどのソース ビュー機能を使用できます。これは、レンダリングされた Markdown ファイルを表示する場合には使用できません。

### 属性変更を可視化する

読者に見せる文字部分とは異なり、属性への変更は、レンダリングされたドキュメントでは見えなくなります。Github ではそれをツールチップで示します。 たとえば、リンクの URL が別の web サイトに変更された場合、このような場合、次のようなヒントが表示されます: "href: /octo-org-repo/blob/CONTRIBUTING → /octo-org/octo-repo/blob/docs/CONTRIBUTING."

![マークダウン ファイルの差分のスクリーンショット。 \[CONTRIBUTING file\] リンクのツールチップには、上記の例からの URL の変更が含まれています。](/assets/images/help/repository/prose-diff-attributes.png)

### 変更についてのコメントを入力する

[コミット コメント](/ja/enterprise-server@3.22/pull-requests/how-tos/review-pull-requests/commenting-on-a-pull-request) は、*ソース* ビュー内のファイルにのみ 1 行ずつ追加できます。

### ヘッダにリンクする

[他のレンダリングされた文章ドキュメント](/ja/enterprise-server@3.22/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes)と同様に、ドキュメント内のヘッダーにカーソルを合わせるとリンク アイコンが作成されます。 レンダリング済み文章の diff の読者を特定のセクションにリンクできます。

### 複雑な diff を表示する

プルリクエストの中には、大きくて複雑なドキュメントでの多数の変更を含むものがあります。 変更の分析に時間がかかりすぎる場合、 GitHub は変更のレンダリングされたビューを常に生成できるわけではありません。 これが発生した場合、レンダリングされたボタンをクリックするとエラーメッセージが表示されます。

その場合でもソースビューは変更の分析やコメント入力に使用できます。

### HTML 要素を表示する

HTML ドキュメントへのコミットのレンダリング済みビューは、直接にはサポートしていません。 形式の中には、Markdown のように、任意の HTML をドキュメントに埋め込むことができるものがあります。 これらのドキュメントを GitHubに表示すると、その埋め込み HTML の一部をプレビューで表示できますが、一部 (埋め込み YouTube ビデオなど) は表示できません。

一般に、埋め込み HTML を含むドキュメントに対する変更の表示ビューには、 GitHubのドキュメントビューでサポートされている要素に対する変更が表示されます。 埋め込み HTML を含むドキュメントへの変更のレビューは、完全を期して、常にレンダリング済みとソースの両方のビューで行う必要があります。

## GeoJSON/TopoJSON ファイルのマッピング GitHub

GitHub では、 GitHub リポジトリ内の GeoJSON マップ ファイルと TopoJSON マップ ファイルのレンダリングがサポートされています。
`.geojson` 拡張子または `.topojson` 拡張子を使用する通常の場合と同様に、ファイルをコミットします。
`.json` 拡張子をもつファイルもサポートされますが、`type` が `FeatureCollection`、`GeometryCollection`、`topology` に設定されている場合のみです。 次に、 GitHub上の GeoJSON/TopoJSON ファイルのパスに移動します。

### ジオメトリのタイプ

GitHub上のマップでは[、Leaflet.js](http://leafletjs.com) を使用し、[geoJSON スペック](http://www.geojson.org/geojson-spec.html) (Point、LineString、Polygon、MultiPoint、MultiLineString、MultiPolygon、GeometryCollection) で概説されているすべてのジオメトリタイプをサポートします。 TopoJSON ファイルは "トポロジ" 型で、[TopoJSON 仕様](https://github.com/mbostock/topojson/wiki/Specification)に従う必要があります。

### フィーチャーのスタイリング

GeoJSON オブジェクトのプロパティに追加のメタデータを渡すと、特定の色を指定したり、説明アイコンを追加したりするなど、フィーチャーの表示方法をカスタマイズすることができます。 オプションは次のとおりです。

* `marker-size`

- `small`、`medium` または `large`

* `marker-color` - 有効な RGB 16 進数の色
* `marker-symbol` - [Maki プロジェクト](https://mapbox.com/maki/)のアイコン ID、または単一の英数字 (a から z または 0 から 9)。
* `stroke` - ポリゴンのエッジまたは線の色 (RGB)
* `stroke-opacity` - ポリゴンのエッジまたは線の不透明度 (0.0 から 1.0)
* `stroke-width` - ポリゴンのエッジまたは線の幅
* `fill` - ポリゴンの内部の色 (GRB)
* `fill-opacity` - ポリゴンの内部の不透明度 (0.0 から 1.0)

詳細については、[オープン simplestyle 仕様のバージョン 1.1.0](https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0) を参照してください。

### マップを他の場所に埋め込む

GitHub以外の場所で GeoJSON マップを利用できるようにしたいですか? このテンプレートを変更し、JavaScript をサポートする任意の HTML ページ (たとえば、 [GitHub Pages](https://pages.github.com)) に配置するだけです。

```html
<script src="https://embed.github.com/view/geojson/<username>/<repo>/<ref>/<path_to_file>"></script>
```

たとえば、マップの URL が [github.com/benbalter/dc-wifi-social/blob/master/bars.geojson](https://github.com/benbalter/dc-wifi-social/blob/master/bars.geojson)、埋め込みコードは次のようになります。

```html
<script src="https://embed.github.com/view/geojson/benbalter/dc-wifi-social/master/bars.geojson"></script>
```

既定では、埋め込まれるマップのサイズは 420px x 620px ですが、最後のパラメータとして、`?height=300&width=500` のように height 変数と width 変数 を渡すことで、出力をカスタマイズできます。

> \[!NOTE]
> `ref` は、ブランチまたは個々のコミットへのハッシュとすることができます (例: `2391ae`)。

### Markdown でのマッピング

GeoJSON と TopoJSON は Markdown に直接埋め込むことができます。 詳しくは、「[ダイアグラムの作成](/ja/enterprise-server@3.22/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams#creating-geojson-and-topojson-maps)」をご覧ください。

対話型マップを表示するには、サイト管理者が お使いの GitHub Enterprise Server インスタンスの機能を構成する必要があります。 詳しくは、「[対話型マップの構成](/ja/enterprise-server@3.22/admin/configuring-settings/configuring-user-applications-for-your-enterprise/configuring-interactive-maps)」をご覧ください。

### クラスタリング

マップに多数のマーカー (約 750 を超える) が含まれている場合、GitHubは、より高いズーム レベルで近くのマーカーを自動的にクラスター化します。 クラスタをクリックしてズームするだけで、個々のマーカーが表示されます。

### 基になるマップに問題がある

基になるマップ データ (通りの名前、道路など) は、編集可能な無料の世界地図をコラボレーションによって作るプロジェクト [OpenStreetMap](http://www.openstreetmap.org/) を利用しています。 オープンソースなので、何かが正しくないことに気付いた場合は、[サインアップ](https://www.openstreetmap.org/user/new)修正プログラムを送信します。

### GeoJSON、TopoJSON ファイルのトラブルシューティング

GeoJSON ファイルのレンダリングに問題がある場合は、[GeoJSON リンター](http://geojsonlint.com/)でそのファイルを実行し、有効な GeoJSON ファイルであることをご確認ください。 ポイントが意図しない場所 (例: 海の中など) に表示されない場合は、データが現在サポートされていない投影法が使用されている可能性があります。 現在、 GitHub は `urn:ogc:def:crs:OGC:1.3:CRS84` プロジェクションのみをサポートしています。

また、10 MB を超えるような大きな `.geojson` ファイルは、ブラウザーではレンダリングできません。 その場合は通常、大きなファイルは表示できないということを伝えるメッセージが表示されます。

場合によっては、`.geojson` ファイルを [TopoJSON](https://github.com/mbostock/topojson) に変換することで、データのレンダリングが可能となることもあります。この圧縮形式では、ファイルサイズを最大 80% 削減できます。 ファイルを小さいチャンクに分割し (州ごと、年ごとなど)、データを複数のファイルとしてリポジトリに格納することは、もちろんいつでもできます。

### GeoJSON、TopoJSON に関する参考資料

* [Leaflet.js のドキュメント](https://leafletjs.com/)
* [MapBox マーカーのスタイルに関するドキュメント](http://www.mapbox.com/developers/simplestyle/)
* [TopoJSON Wiki](https://github.com/mbostock/topojson/wiki)

## GitHub での Jupyter Notebook ファイルの使用

GitHubに *.ipynb* 拡張子を持つ Jupyter Notebook または IPython Notebook ファイルを追加すると、リポジトリに静的 HTML ファイルとしてレンダリングされます。

カスタム JavaScript プロットなどのノートブックの対話型機能は、 GitHubのリポジトリでは機能しません。 例については、「[*リンクと Interactions.ipynb*](https://github.com/bokeh/bokeh-notebooks/blob/main/tutorial/06%20-%20Linking%20and%20Interactions.ipynb)」を参照してください。

レンダリングした JavaScript コンテンツを含む Jupyter notebook を表示する場合、または、notebook ファイルを他のユーザーと共有する場合、[nbviewer](https://nbviewer.jupyter.org/) を使用できます。 例については、nbviewer でレンダリングされた「[*リンクと Interactions.ipynb*](https://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/blob/main/tutorial/06%20-%20Linking%20and%20Interactions.ipynb)」を参照してください。

Jupyter Notebookの完全に対話型バージョンを表示するには、ローカルでノートブック サーバーを設定します。 詳細については、[Jupyter の公式ドキュメント](http://jupyter.readthedocs.io/en/latest/index.html)を参照してください。

### Jupyter Notebook ファイルのトラブルシューティング

静的 HTML で Jupyter Notebook ファイルをレンダリングできない場合は、コマンド ラインで [`nbconvert` コマンド](https://github.com/jupyter/nbconvert) を使用して、ファイルをローカルで変換できます。

```shell
jupyter nbconvert --to html NOTEBOOK-NAME.ipynb
```

### Jupyter Notebookの詳細

* [Jupyter NotebookのGitHubリポジトリ](https://github.com/jupyter/jupyter_notebook)
* [Jupyterノートブックのギャラリー](https://github.com/jupyter/jupyter/wiki)

## GitHub での Mermaid ファイルの表示

GitHub では、リポジトリ内の人魚ファイルのレンダリングがサポートされています。
`.mermaid` 拡張子または `.mmd` 拡張子を使用する通常の場合と同様に、ファイルをコミットします。 次に、 GitHubの人魚ファイルのパスに移動します。

たとえば、次の内容の `.mmd` ファイルをリポジトリに追加するとします。

```text
graph TD
    A[Friend's Birthday] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D["Cool <br> Laptop"]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
```

リポジトリ内のファイルを表示すると、フロー チャートとしてレンダリングされます。

![フロー チャートのスクリーンショット。 2 つの矢印が、\[A\] というラベルが付いたボックスから \[B\] と \[C\] というラベルが付いたボックスを指しており、さらに 2 つの矢印が、\[B\] と \[C\] から \[D\] を指しています。](/assets/images/help/repository/mermaid-file-diagram.png)

### Mermaid ファイルのトラブルシューティング

グラフがまったくレンダリングされない場合は、[Mermaid ライブ エディタ](https://mermaid.live/edit)でグラフをチェックして、有効な Mermaid Markdown 構文が含まれていることを確認します。

グラフが表示されていても、期待どおりに表示されない場合は、新しい [GitHub Community ディスカッション](https://github.com/orgs/community/discussions/categories/general)を作成し、 `Mermaid` ラベルを追加できます。

#### 既知の問題

* シーケンス図のグラフは、グラフの下に追加のパディングが付加された状態でレンダリングされることがあり、グラフのサイズが大きくなるにつれてパディングが余分に追加される場合があります。 これは、Mermaid ライブラリの既知の問題です。
* ポップオーバー メニューを含むアクター ノードは、シーケンス図のグラフ内では想定のとおりに機能しません。 これは、Mermaid ライブラリの API を使用してグラフをレンダリングするときに、JavaScript イベントをグラフに追加する方法に不一致があるためです。
* すべてのグラフが a11y に対応しているわけではありません。 これは、スクリーン リーダーに頼っているユーザーに影響を与える可能性があります。

### Markdown での Mermaid

Mermaid 構文は Markdown に直接埋め込むことができます。 詳しくは、「[ダイアグラムの作成](/ja/enterprise-server@3.22/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams#creating-mermaid-diagrams)」をご覧ください。

### Mermaid に関する参考資料

* [Mermaid.js のドキュメント](https://mermaid-js.github.io/mermaid/#/)
* [Mermaid.js ライブ エディター](https://mermaid.live/edit)