Wiki.jsのビジュアルエディタでGoogleスライドショーとかを埋め込めるようにした

ニッチなWiki.jsの改造に関するお話です。
社内用の情報共有サイトとしてWiki.jsを導入しました。
非エンジニアの方たちが社内情報をまとめてくれているのですが、基本的にはビジュアルエディタで編集作業を行っています。
そこからGoogleスライドやスプレッドシートを埋め込みたい需要があるらしく、ちょろっと手を加えて改造しました。

実装

エディタ本体を改造するのは骨が折れるので、簡単目にJavaScriptで裏からViwer画面を埋め込んで行きます。
コードはテーマタブ内からheadに挿入するHTMLコードという欄の中にScriptタグを書き込んでいきます。

中身は外部ファイル化してsrcで読み込ませてもいいですし、そのまま中に記載してもいいかと思います。
コードの中身は以下の通りです。

(() => {
  window.addEventListener('load', function () {
    const linkNodes = document.querySelectorAll('.v-main .contents a');
    linkNodes.forEach((linkNode, index) => {
      if (linkNode.classList.contains('is-external-link')) {
        // 外部リンク
        // 別タブで開くようにする
        linkNode.target = '_blank';
        linkNode.rel = 'noopener';

        // Googleスライドの公開リンクに対して表示機能を埋め込む
        if (linkNode.href.match(/presentation.*pub/)) {
          const insertContainer = document.createElement('div');
          const previewLink = linkNode.href.replace('pub?start', 'embed?start');
          insertContainer.innerHTML = `
            <iframe src="${previewLink}"
              width="960" height="569"
              frameborder="0"
              allowfullscreen="true"
              mozallowfullscreen="true"
              webkitallowfullscreen="true">
            </iframe>
          `;
          linkNode.parentNode.appendChild(insertContainer);
        }
        // Googleスプレッドシートの公開リンクに対して表示機能を埋め込む
        if (linkNode.href.match(/spreadsheets.*pub/)) {
          const insertContainer = document.createElement('div');
          const previewLink = linkNode.href.replace(/gid=0&single=true/, 'gid=0&amp;single=true&amp;widget=true&amp;headers=false');
          insertContainer.innerHTML = `<iframe src="${previewLink}" width="960" height="569"></iframe>`;
          linkNode.parentNode.appendChild(insertContainer);
        }
      } else {
        // 内部リンク
        // pdfのプレビュー機能を埋め込む
        if (linkNode.href.match(/\.view\.pdf/)) {
          const insertContainer = document.createElement('div');
          const previewLink = linkNode.href;
          insertContainer.innerHTML = `<embed-pdf src="${previewLink}"></embed-pdf>`;
          linkNode.parentNode.appendChild(insertContainer);
        }
      }
    });
  });
})();

ちなみにinnerHTMLはあまり良くないよねっていうのは分かった上で使っております。
(どーせ、社内Wikiなので)

稼働テスト

それではテストをしていきましょう。適当なGoogleスライドを作って公開設定をしていきます。

設定ができたら、公開リンクをコピーして、

こんな感じでビジュアルエディタから先ほどのリンクを挿入すると、

ちゃんと埋め込めました。

編集画面でもプレビューに表示されるようにと思ったのですが、イベント設定と管理が面倒なのでとりあえず閲覧時のみでViwerが挿入される状態に留めました。

ちなみに、PDFのプレビュー機能も導入したのですが、こちらは別口で書きたいと思います！

本日は以上です。需要があるかはわかりませんが、、、