Yumrith

Markdownノートエディタ「Notyra」をリリースしました

Sun, 05 Apr 2026 00:00:00 GMT

先日、ローカル環境で動作するデスクトップ用の軽量Markdownノートエディタ「Notyra」をリリースしました。 Workでこれまで個人開発してきたプロダクトを紹介していますが、ブログで紹介するのは初めてです。

完全無料(MIT)で公開していますので気軽に利用してみてください。

Notyraとは？

Notyraは、コンピュータのローカルに保存されたMarkdownファイルを管理できる軽量デスクトップノートエディタです。
クラウドに保存することなく完全オフライン環境でセキュアに利用することが出来ます。
また、アプリはオープンソースで公開していますので、完全無料でご利用いただけます。

https://notyra.y-shin.net

Windows・Mac・Linux向けに、以下のダウンロードページで提供しています。
お好みのプラットフォーム・形式をご利用ください。

[!WARNING] Notyraは現在アプリ署名がされていないため、セキュリティ警告が表示されることがあります。安全にアプリを起動する方法については、ダウンロードページをご確認ください。アプリ署名についてはOSSであれば無償で発行できる機関があるようなので、今後検討していきたいと思います。

https://notyra.y-shin.net/download

なぜNotyraを作ったのか

元々はメモフォルダを作り、Visual Studio Code上で作成したメモを保存していました。
しかし、Visual Studio Codeの起動が遅くパッとメモを取りたい時に少しストレスになっていました。
また、メモを取るのに特化したエディタでは無いのでメモの一覧が見づらいというのもありました。

代替手段を探していたのですが、ほとんどがクラウド同期・単一のマークダウンファイル・ウェブアプリで完全ローカルで動作するデスクトップアプリで良いものが見つかりませんでした。
良いものが無いのであれば作ってみようと思ったのが開発のきっかけです。

Notyraの特徴

完全ローカル環境で動作

Notyraは外部と接続せず完全ローカル環境で動作します。クラウドへの同期機能もNotyraには備わっていません。
ノートのバックアップが必要な場合はルートフォルダをご自身で契約頂いているOneDriveやGoogle Driveの同期対象に設定いただくことで自動バックアップが可能です。

リアルタイムプレビュー

Notyraは3種類のモードでビュアーを切り替えることが出来ます。
その中でもエディタとプレビューの分割表示に関しては入力した内容がプレビューにリアルタイムで表示されるようになっています。また、スクロールもエディタとプレビューで同期するようになっています。
さらに、対象のノートをダブルクリックすることで別ウィンドウで表示・編集することが可能です。

PDF・HTMLエクスポート

ノートはPDF・HTML形式でエクスポートすることも可能です。

アプリテーマのカスタマイズ

この辺りは、おまけ機能のようなものですが、アプリの見た目を変えられる機能も提供しています。ライトモード・ダークモードの切り替えはもちろんのこと、色合いも変更することが出来ます。
公式としていくつかのテーマを提供していますが、ご自身でテーマを作成して適用させることも出来ます。

パンくずリスト

Notyraのこだわりポイントですが、サイドバーのフォルダリストで対象の子フォルダや孫フォルダをダブルクリックすると、そのフォルダをトップに持ってくることが可能です。

Notyra UI

ルートフォルダ選択後は以下のような画面に遷移します。

左からサイドバー、ノートリスト、エディタと3つの主要なセクションで構成されています。

サイドバー : 左側のサイドバーは、フォルダツリーを表示し、ノートの階層的な管理を可能にします。
ノートリスト : サイドバーの隣には、選択したフォルダ内のMarkdownノートのリストが表示され、簡単にアクセスできます。
エディタ : 画面の右側には、選択したノートを編集するためのMarkdownエディタが配置されており、リアルタイムでプレビューも可能です。

新しいウィンドウでノートを開く

ノートリストで対象のノートをダブルクリックすると新しいウィンドウでエディタを開くことが出来ます。
複数のノートを行き来する時に便利です。

アプリテーマ

まず、テーマ切り替えとしてライトモード・ダークモードを提供しています。

さらに、デフォルトテーマとして「グレー」と「パープル」の2種類を提供しています。

カスタムテーマ

デフォルトテーマ以外に、公式テーマとして4種類のカスタムテーマを提供しています。詳しくは以下のNotyraドキュメントページをご覧ください。

https://notyra.y-shin.net/docs/theme/custom-theme

技術的なお話

ここから先はNotyraの中身に興味がある方向けです。

フレームワーク

元々v1ではElectronで開発していましたが、アプリ自体の容量が大きく起動も遅いためv2からはフレームワークをTauriに変更しました。
ElectronからTauriに変更したことでCPU使用率も低く、メモリ消費も40MB程度で抑えることが出来ました。
アプリ容量も数百MBから15MB程度まで減らすことが出来、個人的には満足しています。

https://v2.tauri.app/ja/start/

画像の扱い方

Notyraでは画像の描画もサポートしています。画像の挿入方法は以下の3種類をサポートしています。

ドラッグ&ドロップ (複数可)
クリップボードから (コピペ)
画像挿入ボタンからの挿入 (複数可)

画像の扱い方はかなり悩みました。ローカルで動作させるにはルートディレクトリ内で画像を管理する必要があるためです。
チャッピー(Chat GPT)と壁打ちしながら方法を考えた結果、ルートディレクトリ内に画像専用のディレクトリ(image)を作成し、Markdownファイルの中で利用されている画像のみをimageディレクトリの中に保存することにしました。 Ctrl + Zで変更を戻す、貼り付け場所を誤る、間違った画像をアップロードするといった動作も多いと思うので、アプリの終了操作をしたタイミングで画像ファイルのクリーンアッププロセスを走らせ、Markdownファイル内で使用されていない画像を削除することにしました。

レンダリング速度

ノートリストには仮想スクロール(react-virtual)を導入しています。 1万を超えるノートもスムーズに描画することが出来ます。

https://github.com/TanStack/virtual

まとめ

今回はTauriでデスクトップアプリを開発してみたというお話でした。
久しぶりのデスクトップアプリの開発でしたが、生成AIが優秀で昔のようにGoogleで数十のタブを開きながら開発というのはなくなりましたね。

Tauriは軽量かつ高速で、個人開発のデスクトップアプリのフレームワークとしては非常に優秀だと感じました。
Electronからの移行で体感できるほどパフォーマンスが改善されたのは純粋に嬉しかったです。

Notyraはフィードバックがあれば機能追加・改善を続けていく予定です。
もし使ってみて気になった点や要望があれば、コメントやGitHubのIssueでお気軽にお声がけください。

では、また。

結局Fuwariに戻ってきた

Sat, 28 Mar 2026 00:00:00 GMT

お久しぶりです。この件に関しては投稿する予定はなかったのですが、年度末ということもあり投げておくことにしました。

本サイトのデザインテンプレートはFuwariとYukinaを組み合わせたテンプレートであるMizukiを利用していましたが、結局Fuwariに戻すことにしました。

戻ったきっかけ

Mizukiはページアニメーションも好みで見栄えがとても良いデザインで気に入っていたのですが、最近実装される機能が自分の求める方向と少し異なってきているようで、「使うかも」という安易な気持ちで新機能を取り入れていましたが、結局使わない機能がどんどん増えてページが重くなっていました。このことをきっかけに、改めてテンプレートをどうするか考え直すことにしました。

Webサイトのカテゴリは「ポートフォリオ」なので、マーケティングサイトのような派手なアニメーションは不要と整理しました
ページ遷移時に退屈させないよう、遷移アニメーションだけは残したい
サイト全体を軽くしたい

これらの条件を整理した結果、「Fuwariでいいや」という結論になり、戻ってくることにしました。一応技術ブログを名乗っているので、記事を読んでいる途中でアニメーションやサイドバーのオブジェクトが邪魔になるのも良くないと感じています。

戻ってくるにあたって

Fuwariに戻すにあたって、まずWorkページのデザインを刷新しました。以前のデザインはオブジェクト同士が窮屈で見づらく、モバイル表示ではレイアウト崩れも起きていたため、Card方式に変更しオブジェクト間のスペースも広く確保しました。

次にAwardsページはMizuki時代のデザインをそのまま流用しました。時系列がぱっと見てわかりやすいデザインが気に入っています。

最後にUsesページですが、このページは廃止しました。あまり更新しないことと、画像がほとんどAI生成の猫ちゃんだったので、画像を用意する気力が湧いたタイミングで改めて追加しようと思います。

またサイト名は左上に移動しました。

テーマカラーはFuwariデフォルトのブルー(250)を標準設定にしました。やはり寒色は落ち着きます。グリーンはダークモードだと映えるのですが、ライトモードのグリーンはあまり好みではなかったというのもあります。これから暑くなる季節でもありますしね。

最後に

Fuwariに戻してみましたが、Fuwariプロジェクトは最近あまり活発でないようです。(PRはたくさん起票されていますが) テンプレートのライブラリが古く、かなりの脆弱性がそのままになっていました。手動でバージョンを上げれば良いのと、メジャーバージョンアップ時は関連箇所を修正すれば良いだけなのですが。
このテンプレートを無料で提供していただいているので自分は何も言えないです。

本サイトの名前が決まりました

Tue, 04 Nov 2025 00:00:00 GMT

こんにちは。お久しぶりです。
9月、10月は人生において大きなターニングポイントがあり忙しかったですが、ようやく落ち着き始めました。(また記事にしようと思います。)
11月に入り一気に寒くなり体調を崩しかけましたが、なんとか持ち直しました。
インフルエンザも流行りだしているそうなので注意しないとですね。

サイト名

さて、数年前から始めた本サイトですが、そろそろ名前を決めねばと思い、生成AIの力も借りながらようやく名前が決まりました。

サイト名は<h1>Yumrith（ユムリス）</h1>と言います。

元々本名をサイト名にしていたので、本名もちょこっと入れつつ技術的な用語も入れた名前が良いなと考えていました。
Yuma + Algorithmを組み合わせた造語です。

世の中で使われていない名前というのが難しく、この辺りはChat GPTのWeb Searchの力もお借りしました。

中身は更新しないのに外側だけは頻繁に変えている私ですので、他のサイト名に変わるかもしれませんが、しばらくはこのままで行こうと思います。

一応生成AIにロゴも考えてもらいましたが、これは多分使わないと思います。
このポストのサムネイルにしておきます。

サイトデザイン

サイトのデザインもちょこっと変更しました。
FuwariというAstroテンプレートを使用していましたが、Mizukiというテンプレートを発見しこちらに変更しました。

元々、FuwariとYukinaを組み合わせて独自デザインにしていましたが、FuwariとYukinaを組み合わせたものがテンプレートとしてリリースされており、それがMizukiです。

https://astro.build/themes/details/mizuki/

Fuwariだけではサイトの動きが少なくさみしい印象で、Yukinaだけだと少し機能不足だなと思っていて、かゆいところに手の届くMizukiはとてもありがたいテンプレートです。
Fuwariファミリーですので、見た目に大きな変更はありません。

最後に

人生において大きなターニングポイントというのは「転職」でした。
フルリモート勤務からフル出社勤務になり、ワークライフバランスが大きく変わることとなりました。

前職では新入社員に環境の変化は無意識のうちにストレスとして蓄積されていると伝えていました。
自分がこの立場になり、ストレスの自覚は無いですが、無意識のうちに蓄積されていると思うので焦らずゆっくり慣れていこうと思います。

FuwariでExpressive Codeを使用しコードブロックをカスタマイズする

Sun, 02 Mar 2025 00:00:00 GMT

:::warning 2025-06-07
#476でExpressive Codeが公式サポートされ、最新のfuwariテンプレートではこの手順は不要となりました。 :::

FuwariのデフォルトコードブロックはLanguageやファイル名を表示できないため、astro-expressive-codeを利用してカスタマイズしてみました。

Expressive Codeとは

Expressive Code は、開発者がコードスニペットを美しく、分かりやすく表示できるようにするためのライブラリです。Markdownベースのドキュメント、ブログ、技術記事などで、コードの見た目を改善するために活用されます。

このライブラリはプラグインベースの設計になっており、カスタマイズ性が高いのが特徴です。

https://expressive-code.com/

インストール方法

以下のコマンドでastro-expressive-codeと@expressive-code/plugin-line-numbersをインストールする

pnpm add astro-expressive-code @expressive-code/plugin-line-numbers

astro.config.mjsで定義する

import expressiveCode from "astro-expressive-code";
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
import remnarkLinkCard from "remark-link-card";

// https://astro.build/config
export default defineConfig({
  site: "https://www.y-shin.net/",
  base: "/",
  trailingSlash: "always",
  integrations: [
    tailwind({
      nesting: true,
    }),
    swup({
      theme: false,
      animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
      // the default value `transition-` cause transition delay
      // when the Tailwind class `transition-all` is used
      containers: ["main", "#toc"],
      smoothScrolling: true,
      cache: true,
      preload: true,
      accessibility: true,
      updateHead: true,
      updateBodyClass: false,
      globalInstance: true,
    }),
    icon({
      include: {
        "preprocess: vitePreprocess(),": ["*"],
        "fa6-brands": ["*"],
        "fa6-regular": ["*"],
        "fa6-solid": ["*"],
      },
    }),
    svelte(),
    sitemap(),
    Compress({
      CSS: false,
      Image: false,
      Action: {
        Passed: async () => true, // https://github.com/PlayForm/Compress/issues/376
      },
    }),
    expressiveCode({
      themes: ["aurora-x"],
      plugins: [pluginLineNumbers()],
    }),
  ],
  markdown: {
    remarkPlugins: [[remnarkLinkCard, { shortenUrl: true, cache: true }], remarkMath, remarkReadingTime, remarkExcerpt, remarkGithubAdmonitionsToDirectives, remarkDirective, remarkSectionize, parseDirectiveNode],
    rehypePlugins: [
      rehypeKatex,
      rehypeSlug,
      [
        rehypeComponents,
        {
          components: {
            github: GithubCardComponent,
            linkcard: LinkCardComponent,
            note: (x, y) => AdmonitionComponent(x, y, "note"),
            tip: (x, y) => AdmonitionComponent(x, y, "tip"),
            important: (x, y) => AdmonitionComponent(x, y, "important"),
            caution: (x, y) => AdmonitionComponent(x, y, "caution"),
            warning: (x, y) => AdmonitionComponent(x, y, "warning"),
          },
        },
      ],
      [
        rehypeAutolinkHeadings,
        {
          behavior: "append",
          properties: {
            className: ["anchor"],
          },
          content: {
            type: "element",
            tagName: "span",
            properties: {
              className: ["anchor-icon"],
              "data-pagefind-ignore": true,
            },
            children: [
              {
                type: "text",
                value: "#",
              },
            ],
          },
        },
      ],
    ],
  },
  vite: {
    build: {
      rollupOptions: {
        onwarn(warning, warn) {
          // temporarily suppress this warning
          if (warning.message.includes("is dynamically imported by") && warning.message.includes("but also statically imported by")) {
            return;
          }
          warn(warning);
        },
      },
    },
  },
});

既存スクリプトの編集

src/layouts/Layout.astroでpreElementsを削除する

function initCustomScrollbar() {
	const bodyElement = document.querySelector('body');
	if (!bodyElement) return;
	OverlayScrollbars(
		// docs say that a initialization to the body element would affect native functionality like window.scrollTo
		// but just leave it here for now
		{
			target: bodyElement,
			cancel: {
				nativeScrollbarsOverlaid: true,    // don't initialize the overlay scrollbar if there is a native one
			}
		}, {
		scrollbars: {
			theme: 'scrollbar-base scrollbar-auto py-1',
			autoHide: 'move',
			autoHideDelay: 500,
			autoHideSuspend: false,
		},
	});
	const preElements = document.querySelectorAll('pre');
	preElements.forEach((ele) => {
		OverlayScrollbars(ele, {
			scrollbars: {
				theme: 'scrollbar-base scrollbar-dark px-2',
				autoHide: 'leave',
				autoHideDelay: 500,
				autoHideSuspend: false
			}
		});
	});
	const katexElements = document.querySelectorAll('.katex-display') as NodeListOf<HTMLElement>;
	katexElements.forEach((ele) => {
		OverlayScrollbars(ele, {
			scrollbars: {
				theme: 'scrollbar-base scrollbar-auto py-1',
			}
		});
	});
}

src/component/misc/Markdown.astroを編集し、コピーボタンのスクリプトを削除する。

---
import '@fontsource-variable/jetbrains-mono'
import '@fontsource-variable/jetbrains-mono/wght-italic.css'

interface Props {
  class: string
}
const className = Astro.props.class
---
<div data-pagefind-body class=`prose dark:prose-invert prose-base !max-w-none custom-md ${className}`>
    <!--<div class="prose dark:prose-invert max-w-none custom-md">-->
    <!--<div class="max-w-none custom-md">-->
    <slot/>
</div>

<script>
    let linkCards = Array.from(document.querySelectorAll(".rlc-container")) as HTMLElement[];
    for (let linkCard of linkCards) {
        linkCard.classList.add("no-styling");
        linkCard.style.textDecoration = "none";
        linkCard.setAttribute('target','_blank');
    }
</script>

<script>
  const observer = new MutationObserver(addPreCopyButton);
  observer.observe(document.body, { childList: true, subtree: true });

  document.addEventListener("DOMContentLoaded", addPreCopyButton);

  function addPreCopyButton() {
    observer.disconnect();

    let codeBlocks = Array.from(document.querySelectorAll("pre"));

    for (let codeBlock of codeBlocks) {
      if (codeBlock.parentElement?.nodeName === "DIV" && codeBlock.parentElement?.classList.contains("code-block")) continue

      let wrapper = document.createElement("div");
      wrapper.className = "relative code-block";

      let copyButton = document.createElement("button");
      copyButton.className = "copy-btn btn-regular-dark absolute active:scale-90 h-8 w-8 top-2 right-2 opacity-75 text-sm p-1.5 rounded-lg transition-all ease-in-out";

      codeBlock.setAttribute("tabindex", "0");
      if (codeBlock.parentNode) {
        codeBlock.parentNode.insertBefore(wrapper, codeBlock);
      }

      let copyIcon = `<svg class="copy-btn-icon copy-icon" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px"><path d="M368.37-237.37q-34.48 0-58.74-24.26-24.26-24.26-24.26-58.74v-474.26q0-34.48 24.26-58.74 24.26-24.26 58.74-24.26h378.26q34.48 0 58.74 24.26 24.26 24.26 24.26 58.74v474.26q0 34.48-24.26 58.74-24.26 24.26-58.74 24.26H368.37Zm0-83h378.26v-474.26H368.37v474.26Zm-155 238q-34.48 0-58.74-24.26-24.26-24.26-24.26-58.74v-515.76q0-17.45 11.96-29.48 11.97-12.02 29.33-12.02t29.54 12.02q12.17 12.03 12.17 29.48v515.76h419.76q17.45 0 29.48 11.96 12.02 11.97 12.02 29.33t-12.02 29.54q-12.03 12.17-29.48 12.17H213.37Zm155-238v-474.26 474.26Z"/></svg>`
      let successIcon = `<svg class="copy-btn-icon success-icon" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px"><path d="m389-377.13 294.7-294.7q12.58-12.67 29.52-12.67 16.93 0 29.61 12.67 12.67 12.68 12.67 29.53 0 16.86-12.28 29.14L419.07-288.41q-12.59 12.67-29.52 12.67-16.94 0-29.62-12.67L217.41-430.93q-12.67-12.68-12.79-29.45-.12-16.77 12.55-29.45 12.68-12.67 29.62-12.67 16.93 0 29.28 12.67L389-377.13Z"/></svg>`
      copyButton.innerHTML = `<div>${copyIcon} ${successIcon}</div>
      `

      wrapper.appendChild(codeBlock);
      wrapper.appendChild(copyButton);

      let timeout: ReturnType<typeof setTimeout>;
      copyButton.addEventListener("click", async () => {
        if (timeout) {
            clearTimeout(timeout);
        }
        let text = codeBlock?.querySelector("code")?.innerText;
        if (text === undefined) return;
        await navigator.clipboard.writeText(text);
        copyButton.classList.add("success");
        timeout = setTimeout(() => {
          copyButton.classList.remove("success");
        }, 1000);
      });
    }

    observer.observe(document.body, { childList: true, subtree: true });
  }
</script>

Fuwariでremark-link-cardを使用してリンクカードを実装する

Sun, 02 Mar 2025 00:00:00 GMT

FuwariではリンクカードはGithubのみの対応のため、その他のサイトもリンクカードとして表示させるカスタマイズを入れました。
AstroではRemark Pluginが使用できるため、今回は定番のremark-link-cardを使用しました。

remark-link-cardとは

remark-link-cardは、Markdown内のテキストリンクをカード形式に変換するためのremarkプラグインです。

::github{repo="gladevise/remark-link-card"}

インストール方法

remark-link-cardをインストールする。

pnpm add remark-link-card

astro.config.mjsでremark-link-cardを定義します。

import remnarkLinkCard from 'remark-link-card'
{/* 中略 */}
remarkPlugins: [
      [remnarkLinkCard,{ shortenUrl: true }],
      remarkMath,
      remarkReadingTime,
      remarkExcerpt,
      remarkGithubAdmonitionsToDirectives,
      remarkDirective,
      remarkSectionize,
      parseDirectiveNode,
    ],

既存のスクリプトを編集する

src/styles/markdown.cssでremark-link-cardのStyleを追記する。

.rlc-container {
  width: 100%;
  max-width: 800px;
  max-height: 130px;
  margin: 0 auto 2rem;
  background: var(--license-block-bg);

  text-decoration: none;

  border-radius: 0.75rem;
  display: flex;
  align-items: stretch;
  flex-direction: row; /* デフォルトは横並び */

  transition:
    background 200ms ease-in-out 0s,
    box-shadow 200ms ease-in-out 0s;
}

.rlc-container:hover {
  background-color: var(--btn-regular-bg-hover);
}

.rlc-info {
  overflow: hidden; /* PCではhidden */
  padding: 1rem;
  text-align: left;
  flex: 4 1 100px;
  align-items: flex-start;
  text-decoration: none;
  min-height: 100px; /* スマホ時に高さ不足にならないように */
}

.rlc-title {
  font-size: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* PCでは1行で「...」 */
.rlc-description {
  font-size: 0.875rem;
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 1行で省略 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  line-height: 1.4rem; /* 行の高さを適切に調整 */
  max-height: 3rem;
  overflow: hidden;
  flex-grow: 1; /* 説明文が途切れないように */
  padding-bottom: 4px; /* PC時の圧迫を防ぐ */
  color: var(--tw-prose-body);
}

.rlc-url-container {
  margin-top: auto; /* 説明文の下に配置 */
  display: flex;
  align-items: center;
}

.rlc-favicon {
  margin-right: 4px;
  width: 16px;
  height: 16px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.rlc-url {
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.rlc-image-container {
  position: relative;
  flex: 1 1 100px;
  padding: 0.3rem;
  aspect-ratio: 1 / 1;
}

.rlc-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-bottom-right-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* スマホ用のレイアウト調整 */
@media (max-width: 768px) {
  .rlc-container {
    flex-direction: column;
    max-height: unset;
  }

  /* 画像を上にする */
  .rlc-image-container {
    order: -1;
    flex: none;
    width: 100%;
    /*height: 150px;*/
    padding: 0.5rem;
    aspect-ratio: 1.91 / 1;
  }

  .rlc-image {
    width: 100%;
    height: 100%;
    border-radius: 0.75rem 0.75rem 0 0;
  }

  /* スマホではタイトル・説明・URLを折り返す */
  .rlc-title {
    white-space: normal;
    overflow: visible;
  }

  /* スマホでは全文表示 */
  .rlc-description {
    -webkit-line-clamp: unset; /* 制限解除 */
    -webkit-box-orient: unset;
    display: block;
    max-height: none;
    height: auto;
    overflow: visible;
    flex-grow: unset; /* スマホでは自由に伸ばす */
  }

  .rlc-info {
    overflow: visible; /* スマホではhiddenを解除 */
    min-height: unset; /* スマホでは高さ制限を解除 */
  }

  .rlc-url {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

src/components/misc/Markdown.astroでリンクカードに対してTailwind CSS (prose)を適用させないようにする。
scriptタグの中に以下を追記する。

let linkCards = Array.from(document.querySelectorAll(".rlc-container")) as HTMLElement[];
for (let linkCard of linkCards) {
    linkCard.classList.add("no-styling"); // Tailwind CSS(prose)を適用させないようにする
    linkCard.style.textDecoration = "none"; // 文字列の下線部を非表示にする
    linkCard.setAttribute('target','_blank'); //新しいタブで開く
}

参考にさせて頂いたありがたいサイト

https://sur33.com/posts/remark-link-card-with-astro/

個人WEBをAstro + Fuwariで書き直しました

Fri, 28 Feb 2025 00:00:00 GMT

個人WEBをTailwind CSSで書き直して約半年...
また、書き直してしまいました...

今回は今ホットなAstroで個人WEBをリメイクしました。

テンプレートはAstro公式サイトでビビッと来たFuwariを使用しました。
デザインがとても良く、かゆいところにも手が届いており無料で利用できることに驚いています。

https://astro.build/themes/details/fuwari/

Astroとは

Astroは、 静的サイトジェネレーター（SSG）とサーバーレンダリング（SSR） の両方をサポートする、次世代のフロントエンドフレームワークです。軽量で高速なWebサイトを構築することを目的とし、 コンテンツ中心のWebサイト（ブログ、ドキュメント、マーケティングサイトなど） に最適です。

表示も早いですが、体感ビルドも早い気がします。

また、Astroは Markdown（.md）とMDX（.mdx） をネイティブサポートしており、ブログやドキュメントサイトの構築が容易です。

https://astro.build/

Fuwariとは

FuwariはAstroのThemesで公開されているブログテンプレートの1つです。
Fuwariのリポジトリで右上のUse this templateをクリックすることで自分のリポジトリに複製することが出来ます。

AstroとTailwind CSSで設計
Swupで設計されたスムーズなアニメーションとページ遷移
ライト / ダークモード
カスタマイズ可能なテーマカラーとバナー
レスポンシブデザイン
Pagefindによる検索

ユーザ側でテーマカラーを自由に変更できる機能がユニークで面白いですね。

::github{repo="saicaca/fuwari"}

サイトのカスタマイズ

サイトの設定を編集する際はsrc/config.tsを直接変更します。
サイトタイトルやプロフィール画像、テーマカラーの変更などが出来ます。

この他に本WEBサイトでは、以下のカスタマイズを入れています。

リンクカード

FuwariではリンクカードはGithubのみの対応のため、その他のサイトもリンクカードとして表示させるカスタマイズを入れました。
AstroではRemark Pluginが使用できるため、今回は定番のremark-link-cardを使用しました。

以下で記事にしています。

https://www.y-shin.net/posts/fuwari-link-card/

ブログページにコメント機能をつける

コメント機能はこれまでと同様にgiscusを使用しました。

以下の手順でgiscusを使用するための準備をする
giscusの設定
src/components/Comments.astroを作成する

<section>
  <script src="https://giscus.app/client.js"
      is:inline
      data-repo={import.meta.env.NEXT_PUBLIC_GISCUS_REPO}
      data-repo-id={import.meta.env.NEXT_PUBLIC_GISCUS_REPO_ID}
      data-category="Announcements"
      data-category-id={import.meta.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID}
      data-mapping="pathname"
      data-strict="0"
      data-reactions-enabled="1"
      data-emit-metadata="0"
      data-input-position="bottom"
      data-lang="ja"
      crossorigin="anonymous"
      data-theme="preferred_color_scheme"
      async>
  </script>
</section>

<script is:inline>
  function updateGiscusTheme() {
    const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'
    const iframe = document.querySelector('iframe.giscus-frame')
    if (!iframe) return
    iframe.contentWindow.postMessage({ giscus: { setConfig: { theme } } }, 'https://giscus.app')
  }

  const observer = new MutationObserver(updateGiscusTheme)
  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })

  window.onload = () => {
    updateGiscusTheme()
  }
</script>

.env.localを作成する

NEXT_PUBLIC_GISCUS_REPO={repository_name}
NEXT_PUBLIC_GISCUS_REPO_ID={repository_id}
NEXT_PUBLIC_GISCUS_CATEGORY_ID={category_id}

src/pages/posts/[...slug].astroに作成したCommentsコンポーネントを追加する

import Comments from '../../components/Comments.astro';
{/* 中略 */}
<div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
    <a href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
        class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.nextSlug}]}>
        {entry.data.nextSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-start gap-4" >
            <Icon name="material-symbols:chevron-left-rounded" class="text-[2rem] text-[var(--primary)]" />
            <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
                {entry.data.nextTitle}
            </div>
        </div>}
    </a>

    <a href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
        class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.prevSlug}]}>
        {entry.data.prevSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-end gap-4">
            <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
                {entry.data.prevTitle}
            </div>
            <Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
        </div>}
    </a>
</div>

<div class="card-base z-10 px-3 md:px-6 pt-6 pb-4 relative w-full">
    <Comments />
</div>

コードブロックのデザインを変更する

FuwariデフォルトのコードブロックはLanguageやファイル名を表示できないため、astro-expressive-codeを使用してカスタマイズしました。

以下で記事にしています。

https://www.y-shin.net/posts/fuwari-expressive-code/

おわりに

Astroは今回のサイトのリメイクで初めて触れましたが、比較的入りやすかったです。
まだ深く理解できていないので今後も色々作りながら学んでいければと思っています。

参考にさせていただいたありがたいサイト

https://www.maxpou.fr/blog/giscus-with-astro/

Oh My PoshでWindows Terminalをカスタマイズする(備忘録)

Tue, 25 Feb 2025 00:00:00 GMT

Oh My Poshとは

Oh My Posh は、Windows、Mac、Linux で使えるシェルプロンプトのカスタマイズツールです。PowerShell、Bash、Zsh、Fish などに対応しており、カラフルで見やすいプロンプトを簡単に設定できます。

ディレクトリツリー

%USERPROFILE%
├── .config
│   ├── powershell
│   │   ├── user_profile.ps1
│   │   ├── user.omp.json
C:\
├── ドキュメント
│   ├── PowerShellMicrosoft.PowerShell_profile.ps1

1. Microsoft StoreでPowerShellをインストールする

Micsoroft Store Appを開く
検索バーでPowerShellと入力する
PowerShellをクリックし、入手をクリックする

2. Nerd Font をインストールする

以下のリポジトリからHack.zipをダウンロードする
::github{repo="ryanoasis/nerd-fonts"}
ダウンロードしたZIPファイルを展開し、HackNerdFontMono-Regular.ttfをダブルクリックしインストールをクリックする

3. Windows Terminalの設定を変更する

ターミナルを開く
設定をクリックする
スタートアップで規定のプロファイルを先程インストールしたPowerShellに変更する
プロファイルでPowerShellを選択し、下部の外観をクリックする
フォントフェイスをHack Nerd Font Monoに変更し保存をクリックする

4. Oh My Poshをインストールする

wingetを利用してOh My Poshをインストールする

winget install JanDeDobbeleer.OhMyPosh

%UserProfile%\.config\powershellにuser_profile.ps1を作成する
以下のスクリプトをコピペする

# set PowerShell to UTF-8
[console]::InputEncoding = [console]::OutputEncoding = New-Object System.Text.UTF8Encoding

# Prompt
$omp_config = Join-Path $PSScriptRoot ".\user.omp.json"
oh-my-posh --init --shell pwsh --config $omp_config | Invoke-Expression

%UserProfile%\.config\powershellにuser.omp.jsonを作成する
以下のJSONをコピペする

{
  "$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
  "blocks": [
    {
      "type": "prompt",
      "alignment": "left",
      "segments": [
        {
          "properties": {
            "cache_duration": "none"
          },
          "leading_diamond": "\u256d\u2500\ue0b6",
          "template": " {{ .Name }} ",
          "foreground": "#ffffff",
          "background": "#0077c2",
          "type": "shell",
          "style": "diamond"
        },
        {
          "properties": {
            "cache_duration": "none",
            "root_icon": "\uf292"
          },
          "template": "<parentBackground>\ue0b0</> \uf0e7 ",
          "foreground": "#FFFB38",
          "background": "#ef5350",
          "type": "root",
          "style": "diamond"
        },
        {
          "properties": {
            "cache_duration": "none",
            "enable_hyperlink": true,
            "style": "full"
          },
          "template": " {{ .Path }} ",
          "foreground": "#E4E4E4",
          "powerline_symbol": "\ue0b0",
          "background": "#444444",
          "type": "path",
          "style": "powerline"
        },
        {
          "properties": {
            "branch_icon": "\ue725 ",
            "cache_duration": "none",
            "fetch_status": true,
            "fetch_upstream_icon": true
          },
          "template": " {{ .HEAD }} {{ if .Working.Changed }}{{ .Working.String }}{{ end }}{{ if and (.Working.Changed) (.Staging.Changed) }} |{{ end }}{{ if .Staging.Changed }}<#ef5350> \uf046 {{ .Staging.String }}</>{{ end }} ",
          "foreground": "#011627",
          "powerline_symbol": "\ue0b0",
          "background": "#FFFB38",
          "type": "git",
          "style": "powerline",
          "background_templates": ["{{ if or (.Working.Changed) (.Staging.Changed) }}#ffeb95{{ end }}", "{{ if and (gt .Ahead 0) (gt .Behind 0) }}#c5e478{{ end }}", "{{ if gt .Ahead 0 }}#C792EA{{ end }}", "{{ if gt .Behind 0 }}#C792EA{{ end }}"]
        }
      ]
    },
    {
      "type": "prompt",
      "alignment": "right",
      "segments": [
        {
          "properties": {
            "cache_duration": "none",
            "fetch_package_manager": true,
            "npm_icon": " <#cc3a3a>\ue5fa</> ",
            "yarn_icon": " <#348cba>\uf61a</>"
          },
          "leading_diamond": " \ue0b6",
          "trailing_diamond": "\ue0b4",
          "template": "\ue718 {{ if .PackageManagerIcon }}{{ .PackageManagerIcon }} {{ end }}{{ .Full }}",
          "foreground": "#3C873A",
          "background": "#303030",
          "type": "node",
          "style": "diamond"
        },
        {
          "properties": {
            "cache_duration": "none",
            "fetch_package_manager": true,
            "npm_icon": " <#cc3a3a>\ue5fa</> ",
            "yarn_icon": " <#348cba>\uf61a</>"
          },
          "leading_diamond": " \ue0b6",
          "trailing_diamond": "\ue0b4",
          "template": "\ue235 {{ if .Error }}{{ .Error }}{{ else }}{{ if .Venv }}{{ .Venv }} {{ end }}{{ .Full }}{{ end }}",
          "foreground": "#100e23",
          "background": "#906cff",
          "type": "python",
          "style": "diamond"
        },
        {
          "properties": {
            "cache_duration": "none"
          },
          "leading_diamond": " \ue0b6",
          "trailing_diamond": "\ue0b4",
          "template": " {{ .CurrentDate | date .Format }} ",
          "foreground": "#ffffff",
          "background": "#40c4ff",
          "type": "time",
          "style": "diamond",
          "invert_powerline": true
        }
      ]
    },
    {
      "type": "prompt",
      "alignment": "left",
      "segments": [
        {
          "properties": {
            "cache_duration": "none"
          },
          "template": "\u2570\u2500",
          "foreground": "#21c7c7",
          "type": "text",
          "style": "plain"
        },
        {
          "properties": {
            "always_enabled": true,
            "cache_duration": "none"
          },
          "template": "❯ ",
          "foreground": "#e0f8ff",
          "type": "exit",
          "style": "plain",
          "foreground_templates": ["{{ if gt .Code 0 }}#ef5350{{ end }}"]
        }
      ],
      "newline": true
    }
  ],
  "version": 3
}

以下のコマンドでPowerShellプロファイルを作成する

new-item -type file -path $profile -force

以下のコマンドを入力し作成したプロファイルを編集します

notepad $PROFILE

以下のコマンドをコピペする

. $env:USERPROFILE\.config\powershell\user_profile.ps1

Terminalを再起動しデザインが反映されていることを確認する

5. Terminal Iconsをインストールする

Terminal Iconsをインストールすることで不足しているフォルダまたはファイルのアイコンを追加することが出来ます。

以下のコマンドでTerminal Iconsをインストールする

Install-Module -Name Terminal-Icons -Repository PSGallery

user_profile.ps1を編集する
以下のコマンドを追記する

# set PowerShell to UTF-8
[console]::InputEncoding = [console]::OutputEncoding = New-Object System.Text.UTF8Encoding

# Prompt
$omp_config = Join-Path $PSScriptRoot ".\user.omp.json"
oh-my-posh --init --shell pwsh --config $omp_config | Invoke-Expression

# Terminal Icons
Import-Module -Name Terminal-Icons

Terminalを再起動し、lsコマンドを入力後、アイコンが適用されていることを確認する

参考にさせていただいたサイト・動画

https://learn.microsoft.com/ja-jp/windows/terminal/tutorials/custom-prompt-setup#customize-your-powershell-prompt-with-oh-my-posh

ブログページにコメント機能が付けられる「giscus」をNext.jsで使う

Fri, 25 Oct 2024 00:00:00 GMT

お久しぶりです。私のブログにはコメントやリアクションを付けられる機能が無いので「giscus」を使ってコメント機能を実装してみました。

giscusとは

GithubのDiscussion機能を活用したコメントシステムです。Githubアカウントがあればコメントやリアクションができるようになります。

https://giscus.app

giscusの設定

Next.jsでの使用方法

1. giscus Appのインストール

giscusを導入するリポジトリを公開設定(public)にする。
以下のリンクにアクセスしgiscusをインストールする

https://github.com/apps/giscus

対象のユーザを選択する。
Only select repositoriesを選択し、対象のリポジトリを選択し、Installをクリックする。
Okay, giscus was installed on the @xxxxxx account. と出てくれば Installは完了。

2. リポジトリのDiscussions機能を有効化する

Githubの対象リポジトリに移動する。
Settingsに移動する
General > Features > Discussionsのチェックを有効化する

3. giscusの設定を生成する

giscusにアクセスする。
giscusの設定を生成する

名称	パラメータ
リポジトリ	コメント機能を追加したいリポジトリ
ページとDiscussions連携設定	Discussionのタイトルにページのpathnameを利用する
Discussionで使用するカテゴリ	Announcements
このカテゴリのみを検索します	有効化
記事へのリアクションを有効にする	有効化
テーマ	カラースキームに従う

Next.jsのスクリプトに適用する

@giscus/reactライブラリを使用しています。
生成されたscriptを参考に設定する。

ライブラリをインストールする。

npm install @giscus/react

giscus.jsxを作成する。
.envファイルにリポジトリ名、リポジトリID、カテゴリ、カテゴリIDを定義している。
また、Light / Drak Modeに対応させるため、themeの部分は可変にしている。

import Giscus from "@giscus/react";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

export const Comment = () => {
  const { theme, systemTheme } = useTheme();
  const [giscusTheme, setGiscusTheme] = useState("light");

  useEffect(() => {
    // themeが'system'の場合は、システムのテーマに基づいてGiscusのテーマを決定
    const resolvedTheme = theme === "system" ? systemTheme : theme;

    // Giscusのテーマを設定
    setGiscusTheme(resolvedTheme === "dark" ? "dark" : "light");
  }, [theme, systemTheme]);

  return (
    <Giscus
      id="comments"
      repo={process.env.NEXT_PUBLIC_GISCUS_REPO}
      repoId={process.env.NEXT_PUBLIC_GISCUS_REPO_ID}
      category={process.env.NEXT_PUBLIC_GISCUS_CATEGORY}
      categoryId={process.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID}
      mapping="pathname"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="bottom"
      theme={giscusTheme} // 動的にテーマを変更
    />
  );
};

page.jsxに作成したコンポーネントを追加する。

const Giscus = dynamic(() => import("@/app/giscus").then((m) => m.Comment), {
  ssr: false,
});

export default function Home() {
  return (
    <main>
      <Giscus />
    </main>
  );
}

以下のように表示される。

参考にさせていただいたサイト

https://giscus.app

https://blog.k-bushi.com/post/tech/web/instoducing-giscus-with-hugo-stack/

::github{repo="giscus/giscus-component"}

個人WEBをNext.js + Chakra UIで書き直しました

Sat, 07 Jan 2023 00:00:00 GMT

はじめに

あけましておめでとうございます！ HTMLでちょこちょこアップデートしてきた個人WEBサイトを、勉強も兼ねてNext.jsとChakra UIで書き直しました。元々JavaScriptやTypeScriptに苦手意識があり、なかなか手を付けられなかったですが、まあ、年も明けましたし帰省してもクソ暇なので暇つぶしがてら挑戦してみました。

microCMS

これまでのサイトにブログページを新設しました。ブログはほかのページよりも更新が多く、ページ自体も増えそうで管理が面倒だなと思っていたところにmicroCMSというAPIベースの日本製のヘッドレスCMSを見つけました。これを使えばNext.js側は動的なページを1つ作っておくだけでOK。記事を追加したいときはmicroCMSの管理画面からということで管理も楽で即採用しました。 webhookにも対応しているのもありがたいですね。

https://microcms.io/

Chakra UI

React用のUIコンポーネントライブラリです。スタイルがコンポーネント化されていてUIに一貫性を持たせやすくしたライブラリになっています。今までCSSでゴリゴリ書いていたスタイルがタグ指定だけで実現できるのは驚きでした。

https://chakra-ui.com/

Vercel

WEBホスティングサービスでは定番らしいです。Githubリポジトリと連携させて変更があれば自動でデプロイが走り常に最新状態のページが表示できるようになります。自分はmicroCMSのwebhookとも連携させて、記事を追加した際にもデプロイが走るように設定しました。

https://vercel.com/

おわりに

まだ、道半ばで使いこなせている感は全くないですが今後も勉強して少しずつサイトをアップデートできたらなと思います。

参考にさせて頂いたありがたい記事

https://qlitre-weblog.com/next-microcms-blog-w-chakra-matome

https://blog.microcms.io/microcms-next-jamstack-blog/