---
```table-of-contents
title:
minLevel: 0
maxLevel: 0
includeLinks: true
```
---
## **Obsidian PublishでのカスタムJavaScriptの記述方法**
---
### **はじめに：ファイルの準備と配置**
Obsidian PublishでJavaScriptコードを実装するには、まずコードを記述したJSファイル（例：custom-publish.js）を作成し、それを**Obsidian Vaultのルートフォルダ**に配置する必要があります。
その後、Obsidianの**Publish設定画面**で、作成したJSファイルをカスタムJavaScriptファイルとして指定し、サイトにアップロードします。
**ファイル配置と設定の手順**：
1. **JSファイルの作成**: 任意のテキストエディタでJavaScriptコードを記述し、例としてcustom-publish.jsという名前で保存します。
2. **Vaultへの配置**: custom-publish.jsファイルをObsidian Vaultの一番上の階層（ルートフォルダ）に移動させます。
3. **Publish設定**:
* ObsidianでPublish機能を開きます。
* 「**オプション**」または「**設定**」セクションに進みます。
* 「**カスタムJavaScript**」などの項目で、ファイルパスとしてcustom-publish.jsを指定します。
* サイトを再公開する際に、このファイルがサイトに反映されます。
---
### **本文：具体的な使用例とコード**
ここでは、前回提示した使用例から、特に実用的な2つの具体的な実装方法を、custom-publish.jsの内容として示します。
#### **1\. Google Analytics (GA4) の導入**
サイトのトラフィックを測定するために、Google Analytics 4（GA4）のトラッキングコードを埋め込みます。
このコードは、Googleから提供されるスニペットをそのまま使用します。
JavaScript
// custom-publish.js の内容
// Google AnalyticsのトラッキングIDをここに置き換えてください
// 例: G-XXXXXXXXXX
var GA\_MEASUREMENT\_ID \= 'YOUR\_GA4\_MEASUREMENT\_ID';
// Google Analyticsをロードするための標準的なスニペット
(function(w,d,s,l,i){w\[l\]=w\[l\]||\[\];w\[l\].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)\[0\],
j=d.createElement(s),dl=l\!='dataLayer'?'\&l='\+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtag/js?id='\+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer',GA\_MEASUREMENT\_ID);
// ページビューを送信する（上記のスニペット内で自動的に処理されることが多いですが、
// イベントを手動で追加する場合の例として残します）
// gtag('js', new Date());
// gtag('config', GA\_MEASUREMENT\_ID);
console.log("Google Analytics script loaded.");
**ポイント**:
* \<script\>タグそのものではなく、JavaScriptのコード（関数呼び出しや変数定義）を直接ファイルに記述します。
* YOUR\_GA4\_MEASUREMENT\_IDの部分を、ご自身のGA4の測定ID（例：G-ABCDEFG123）に置き換えてください。
#### **2\. 外部リンクを新しいタブで開く**
Obsidian Publishで公開されたページ内の**すべての外部URL**（自分のサイトのドメインを含まないリンク）を、クリック時に自動的に新しいタブ（target="\_blank"）で開くように設定します。
JavaScript
// custom-publish.js の内容
// ページが完全に読み込まれた後に実行される関数
document.addEventListener('DOMContentLoaded', () \=\> {
// サイトのベースURL（ご自身のPublishドメインに置き換えてください）
// 例: 'https://publish.obsidian.md/myvault'
const siteBaseUrl \= window.location.origin;
// ページ内のすべてのリンク（\<a\>タグ）を取得
const links \= document.querySelectorAll('a');
links.forEach(link \=\> {
const href \= link.getAttribute('href');
// リンクが有効なURLを持ち、かつサイトのベースURLを含まない場合
if (href && href.startsWith('http') && \!href.startsWith(siteBaseUrl)) {
// target="\_blank"属性を追加
link.setAttribute('target', '\_blank');
// 外部リンクであることを示す rel="noopener noreferrer" を追加
// これはセキュリティとパフォーマンスのために推奨されます
if (\!link.hasAttribute('rel')) {
link.setAttribute('rel', 'noopener noreferrer');
} else if (\!link.getAttribute('rel').includes('noopener')) {
link.setAttribute('rel', link.getAttribute('rel') \+ ' noopener noreferrer');
}
// 外部リンクに視覚的なマークを付ける場合（CSSと連携）
// link.classList.add('external-link');
}
});
console.log("External links set to open in new tab.");
});
**ポイント**:
* document.addEventListener('DOMContentLoaded', ...)で囲むことで、HTML要素がすべて読み込まれた後にスクリプトが実行されることを保証します。
* window.location.originを使用して、現在のサイトのルートURLを取得し、これを含まないリンクを外部リンクと判断しています。
---
### **まとめ**
カスタムJavaScriptをObsidian Publishに適用する際は、以下の点に注意してください。
1. **ファイル名とパスの確認**: 使用するJSファイルの正確なファイル名と、Obsidian Publish設定で指定したパスが一致しているか確認してください。
2. **デバッグ**: 意図した動作にならない場合は、ブラウザの\*\*開発者ツール（Consoleタブ）\*\*を開き、エラーメッセージやconsole.logで出力したメッセージがないか確認しながらデバッグを進めてください。
3. **DOM操作のタイミング**: 多くのカスタムJSは、HTML要素が画面に存在することが前提となります。そのため、document.addEventListener('DOMContentLoaded', ...)やwindow.onload \= function() { ... }などを使用して、**要素が読み込まれてからスクリプトを実行する**ように記述することが重要です。
---
**引用文献名とURLのリスト**
* Obsidian Publish \- Obsidian 日本語ヘルプ
* https://publish.obsidian.md/help-ja/%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E3%81%A8%E3%82%A2%E3%83%89%E3%82%AA%E3%83%B3%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9/Obsidian+Publish