飽き性の頭の中
MarkdownからTextbundleに変換するスクリプトを作りました|ObsidianからCraftへ移行のサムネイル

MarkdownからTextbundleに変換するスクリプトを作りました|ObsidianからCraftへ移行

2021-12-12に公開

こんにちは、久しぶりに少しコードを書いたのでその話です。

たまたま YouTube で見かけた Craft というメモアプリ(?)があります。

https://www.craft.do/
https://www.craft.do/

この半年くらいは Obsidian というローカルの Markdown ファイルを編集したりつなげたりできるシンプルなものを使っていました。

しかし、Craft のリッチな見た目に惹かれて試したいと思うようになった次第です。

この辺の経緯は別途書こうと思うのですが、今回はそのときに問題となったファイル形式の点についてです。この記事を訪れたということは読者の方も似たような状況なのではないでしょうか。

移行時の問題

Markdown がエクスポートできるサービスからであれば何であれ Craft にはインポートできるのですが、いくつか問題があったので挙げていきます。

画像が反映されない

Craft には Markdown と Textbundle の両方のフォーマットでインポートできるのですが、どうやら Markdown の場合は画像が反映されません。Markdown 上に記載されている画像のパスに実際に画像ファイルがあったとしても反映されないようでした。

別途 Textbundle でインポートしてみたところ、反映されることを確認したので、どうやら Textbundle という形式にする必要がありそうでした。

Daily Note にならない

今回は解決できていないのですが、別途いつかできたらなと思っている点です。

Craft には Daily Note というページを作ることができます。カレンダー上に表示されたり少し特殊な扱いとなるページなのですが、どうもインポートしてきたファイルはどうしても Daily Note として認識させられないようです。

Obsidian でも日記のようなものを書いていましたので、できるなら Daily Note として認識させたいのですが、ファイル名を調整してもどうやらこの特殊な扱いになるには別のパラメーターがあるようで現状では方法がみつけられていません…。

Markdown から Textbundle へ

というわけで前者の画像が反映されていない問題をいったん解決しました。こればかりは後回しにできない重大な問題なので、これができるか否かで Craft を本当に使うかが変わってきます。

既存のツールで変換できるのか

まずは既存のツールやスクリプトで変換できる方法はないのかと考えました。調べると、一度 Bear というアプリで読み込むと Textbundle でエクスポートできるという情報を見たので試しました。

しかし、ここでも同様の問題があって、Bear にインポートする段階で Markdown を読み込むわけですが、ここでも同じく画像は反映されないので、Textbundle が作れたとしてもそこに画像が含まれないのです…。

というわけでどうにかして Textbundle の形にする必要がありました…。

諦めて自作で Textbundle を作る

あんまり詳しくないですが、雑に調べたところ、Textbundle は Markdown ファイルと画像などその他のファイルを 1 つのフォルダに入れて扱う形式ということでした。

なので、規則的に画像と Markdown ファイルを再配置すれば、Textbundle として認識してくれるということ。結構単純そうだったので雑にコードを書いてみました。

こんな感じのコードが書いてあるだけですが、最新のものは GitHub のリポジトリを参照してください。

import fs from "fs";
import path from "path";

const OUTPUTS_PATH = "./outputs";
const INPUTS_PATH = "./inputs";
const TEMPLATES_PATH = "./templates";

const ENV = {
  notion: process.env.NOTION === "1",
};

export const removeUniqueIdFromFileName = (fileName) => {
  // Notionは "〈物語〉シリーズ セカンドシーズン b537c73e8449496e9d4bbd7c8c570922" のように最後にIDが付いた名称になるのでこれを取り除く
  const fileNameArray = fileName.split(" ");
  fileNameArray.pop();
  return fileNameArray.join(" ");
};

const main = async () => {
  if (fs.existsSync(OUTPUTS_PATH)) {
    fs.rmSync(OUTPUTS_PATH, { force: true, recursive: true });
  }
  fs.mkdirSync(OUTPUTS_PATH);

  const fileNames = fs.readdirSync(INPUTS_PATH);
  const markdownFileNames = fileNames.filter((n) => n.includes(".md"));

  markdownFileNames.forEach((fileName) => {
    const filePath = path.join(INPUTS_PATH, fileName);
    const text = fs.readFileSync(filePath).toString();

    const assetLinks = [
      ...text.matchAll(
        /!\[(.+?\.(jpg|png|jpeg|pdf))\]\(.+?\.(png|jpeg|jpg|pdf)\)/g
      ),
    ].map((r) => r[1]);

    let modifiedFileName = fileName.replace(".md", "");
    if (ENV.notion) {
      modifiedFileName = removeUniqueIdFromFileName(modifiedFileName);
    }

    const outputFolderPath = path.join(OUTPUTS_PATH, modifiedFileName);

    fs.mkdirSync(outputFolderPath);

    const inputInfoFilePath = path.join(TEMPLATES_PATH, "info.json");
    const outputInfoFilePath = path.join(outputFolderPath, "info.json");
    fs.copyFileSync(inputInfoFilePath, outputInfoFilePath);

    const outPutMarkdownFilePath = path.join(outputFolderPath, fileName);
    fs.copyFileSync(filePath, outPutMarkdownFilePath);

    assetLinks.forEach((link) => {
      const decodedLink = decodeURIComponent(link);
      const inputAssetPath = path.join(INPUTS_PATH, decodedLink);
      const outputAssetPath = path.join(outputFolderPath, decodedLink);
      const parsed = path.parse(outputAssetPath);
      if (!fs.existsSync(parsed.dir)) {
        fs.mkdirSync(parsed.dir, { recursive: true });
      }
      fs.copyFileSync(inputAssetPath, outputAssetPath);
    });
  });
};

main();

雑に書いただけなので、メンテナンスできる状態とかにはなっていないのですが、クローンして node が入っていれば実行できるかと思います。

コード書けない人でも使えるようななにかにいずれまとめられたらよいなと思っていますが、なかなか時間が取れないので後回しでしょう…。

最後に

結構シンプルなのに、いい感じにコードも GitHub 上に公開されていなかったので、もしよかったら使ったり参考にしてみてください。

雑な情報共有なので、質問等があればコメントか Twitter でリプとか飛ばしてもらえれば幸いです。

関連記事

タグ

#福岡:39

#東京:20

#大学院:15

#移住:10

#Firebase:9

#Google:9

#Sony:9

#エナジードリンク:9

#ブロックチェーン:9

#Apple:7

#Mac:7

#Next.js:7

#Webエンジニア:7

#a7iii:7

#インドネシア:6

#サントリー:6

#英語:6

#Googleフォト:5

#React:5

#TypeScript:5

#埼玉:5

#AWS:4

#Anker:4

#Canon:4

#EOS 8000D:4

#Gatsby.js:4

#Kindle:4

#ZONe:4

#iPad mini:4

#コワーキングスペース:4

#セブンイレブン:4

#ラーメン:4

#京都:4

#仮想通貨:4

#修士論文:4

#内省:4

#民主主義:4

#社会人:4

#鴨川シーワールド:4

#Docker:3

#EOS8000D:3

#Firebase Hosting:3

#GitHub Actions:3

#Google Drive:3

#Lightroom:3

#Markdown:3

#Pixel:3

#React Native:3

#Soundcore:3

#d.school:3

#iPad:3

#iPhone:3

#アマルティア・セン:3

#アメリカ:3

#ジャカルタ:3

#スピーカー:3

#デザイン思考:3

#ブログ:3

#レッドブル:3

#ワークショップ:3

#卒業旅行:3

#寿司:3

#旅行:3

#研究:3

#紅葉:3

#長崎:3

#65mm F2 DG DN Contemporary:2

#API:2

#ChatGPT:2

#Creative:2

#ECR:2

#ERC20:2

#Expo.io:2

#Firestore:2

#GPT4:2

#GitHub:2

#Kindle Oasis:2

#Kindle Paperwhite:2

#Kubernetes:2

#LINE:2

#Mac mini:2

#MacBook Pro:2

#NestJS:2

#Notion:2

#Oculus:2

#Oculus Quest:2

#Panda CSS:2

#Pixel Buds:2

#Remix:2

#Sigma:2

#Storybook:2

#VS Code:2

#Zotero:2

#pandoc:2

#re:Invent:2

#かき小屋:2

#くら寿司:2

#カフェ:2

#ギグワーカー:2

#サーチコンソール:2

#シェアオフィス:2

#スターバックス:2

#ステーキ:2

#スマートウォッチ:2

#ソラマチ:2

#チョコレート:2

#デモクラシー:2

#ニューヨーク:2

#バリ島:2

#パンとエスプレッソと:2

#ヒュッゲ:2

#ビーチ:2

#ブックスタンド:2

#マクドナルド:2

#ミズマチ:2

#モンスターエナジー:2

#リモートワーク:2

#ワイヤレスイヤホン:2

#三千院:2

#両国:2

#兵庫:2

#千葉:2

#博多:2

#堀江貴文:2

#宗教:2

#宮崎:2

#就活:2

#嵐山:2

#川越:2

#広島:2

#引用:2

#新宿御苑:2

#日米学生会議:2

#早稲田:2

#有馬温泉:2

#東寺:2

#東浩紀:2

#機械学習:2

#歯医者:2

#歴史:2

#江ノ島:2

#浅草:2

#清澄白河:2

#温泉:2

#独自ドメイン:2

#神奈川:2

#神戸:2

#英検:2

#転職:2

このブログの運営者

Profile picture

たわ / tawachan

1994年生まれ(29歳)

大学院修士課程(政治学)(2021-2023)

Web開発(2017-)

©2024 tawachan All Rights Reserved.