Skip to content

Commit 557e1c7

Browse files
author
y-yamasaki
committed
ポートフォリオからプロダクトに文字置換
1 parent e483b14 commit 557e1c7

23 files changed

Lines changed: 3036 additions & 574 deletions

‎README.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44

55
下記ページが記載されている自作ホームページです。
66

7-
- Portfolio
87
- 技術Blog
9-
- Product(tool, game, 資料等)
8+
- Product(Tool, Game, 資料等)
109

11-
ページは[こちら](https://breadmotion.github.io/WebSite/)
10+
ページは[こちら](https://breadmotion.github.io/WebSite/)

‎WebSite/blog/blog_00001.html‎

Lines changed: 718 additions & 243 deletions
Large diffs are not rendered by default.

‎WebSite/blog/blog_00012.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ <h1 class="post-detail__title">静的サイトにお問い合わせフォーム
103103
</div>
104104
</header>
105105
<section class="post-detail__body markdown-body reveal-on-scroll"><p>こんにちは！パン君です。</p>
106-
<p>このポートフォリオサイトは GitHub Pages でホスティングしている静的なWebサイトです。 </p>
106+
<p>このサイトは GitHub Pages でホスティングしている静的なWebサイトです。 </p>
107107
<p>そしてお問い合わせを実装するにはメールに送信するための仕組みがいります。<br>API実装を常駐サーバーでトンネル通信をPlayit.ggを利用して行っていますが、数週間前からトンネルの作成が出来ずに困っています...<br>(公式には連絡したのですが...)</p>
108108
<p>そこで今回は <strong>Google Apps Script (GAS)</strong> を簡易的なバックエンドAPIとして利用し、完全無料でメール送信機能を実装しました。 </p>
109109
<h2 id="なぜ-gas-google-apps-script-なのか">なぜ GAS (Google Apps Script) なのか</h2><p>静的サイトでフォームを実装する方法はいくつかあります。 </p>
@@ -225,7 +225,7 @@ <h2 id="まとめ">まとめ</h2><p>サーバーレスな環境でも GAS を組
225225
<li><strong>GAS</strong> は無料かつ手軽なバックエンドとして優秀。</li>
226226
<li><code>fetch</code> の <code>Content-Type</code> を工夫することで CORS 問題を回避できる。</li>
227227
</ul>
228-
<p>これでポートフォリオサイトから直接お仕事の相談を受け付ける準備が整いました！</p>
228+
<p>これでプロダクトサイトから直接お仕事の相談を受け付ける準備が整いました！</p>
229229
</section>
230230
<div class="share-buttons">
231231
<p class="share-buttons__title">SHARE</p>

‎WebSite/blog/blog_00013.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="ja">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>ポートフォリオの詳細表示をモーダル化してUXを改善する | PanKUN Blog</title>
5+
<title>プロダクトの詳細表示をモーダル化してUXを改善する | PanKUN Blog</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="description" content="ポートフォリオサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。" />
7+
<meta name="description" content="プロダクトサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。" />
88
<link rel="canonical" href="https://breadmotion.github.io/WebSite/blog/blog_00013.html" />
99
<link rel="alternate" hreflang="ja" href="https://breadmotion.github.io/WebSite/blog/blog_00013.html" />
1010
<link rel="alternate" hreflang="en" href="https://breadmotion.github.io/WebSite/blog/en/blog_00013.html" />
@@ -23,8 +23,8 @@
2323
"@type": "WebPage",
2424
"@id": "https://breadmotion.github.io/WebSite/blog/blog_00013.html"
2525
},
26-
"headline": "ポートフォリオの詳細表示をモーダル化してUXを改善する",
27-
"description": "ポートフォリオサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。",
26+
"headline": "プロダクトの詳細表示をモーダル化してUXを改善する",
27+
"description": "プロダクトサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。",
2828
"image": [
2929
"https://breadmotion.github.io/WebSite/assets/img/ogp.png"
3030
],
@@ -44,8 +44,8 @@
4444
}
4545
}
4646
}</script>
47-
<meta property="og:title" content="ポートフォリオの詳細表示をモーダル化してUXを改善する | PanKUN Blog" />
48-
<meta property="og:description" content="ポートフォリオサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。" />
47+
<meta property="og:title" content="プロダクトの詳細表示をモーダル化してUXを改善する | PanKUN Blog" />
48+
<meta property="og:description" content="プロダクトサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。" />
4949
<meta property="og:type" content="article" />
5050
<meta property="og:url" content="https://breadmotion.github.io/WebSite/blog/blog_00013.html" />
5151
<meta property="og:image" content="https://breadmotion.github.io/WebSite/assets/img/ogp.png" />
@@ -69,13 +69,13 @@
6969
<ol class="breadcrumb__list">
7070
<li class="breadcrumb__item"><a href="../index.html">ホーム</a></li>
7171
<li class="breadcrumb__item"><a href="../blog.html">ブログ</a></li>
72-
<li class="breadcrumb__item" aria-current="page">ポートフォリオの詳細表示をモーダル化してUXを改善する</li>
72+
<li class="breadcrumb__item" aria-current="page">プロダクトの詳細表示をモーダル化してUXを改善する</li>
7373
</ol>
7474
</nav>
7575
<header class="post-detail__header">
7676
<p class="post-detail__meta">2025/11/27 / 技術メモ</p>
77-
<h1 class="post-detail__title">ポートフォリオの詳細表示をモーダル化してUXを改善する</h1>
78-
<p class="post-detail__description">ポートフォリオサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。</p>
77+
<h1 class="post-detail__title">プロダクトの詳細表示をモーダル化してUXを改善する</h1>
78+
<p class="post-detail__description">プロダクトサイトの作品詳細を、ページ遷移なしで閲覧できるようにモーダルウィンドウ化しました。DOMParserを使ったHTML取得や、実装時のハマりポイントについて。</p>
7979
<p class="post-detail__tags"><a class="tag" href="../blog.html?tag=javascript">javascript</a> <a class="tag" href="../blog.html?tag=ui-ux">ui-ux</a></p>
8080
<div class="share-buttons">
8181
<p class="share-buttons__title">SHARE</p>
@@ -103,11 +103,11 @@ <h1 class="post-detail__title">ポートフォリオの詳細表示をモーダ
103103
</div>
104104
</header>
105105
<section class="post-detail__body markdown-body reveal-on-scroll"><p>こんにちは！パン君です。</p>
106-
<p>これまでこのサイトの「ポートフォリオ一覧」から作品をクリックすると詳細ページ（<code>portfolio/xxxx.html</code>）に遷移する仕様になっていました。</p>
107-
<p>しかしポートフォリオを見に来てくれた人は「 <strong>いろいろな作品をザッピングしたい</strong> 」はずです。<br>「クリックして詳細へ移動」→「ブラウザバックで戻る」→「またスクロールして次の作品へ...」という操作は、地味ながらストレスになります。 </p>
106+
<p>これまでこのサイトの「プロダクト一覧」から作品をクリックすると詳細ページ（<code>portfolio/xxxx.html</code>）に遷移する仕様になっていました。</p>
107+
<p>しかしプロダクトを見に来てくれた人は「 <strong>いろいろな作品をザッピングしたい</strong> 」はずです。<br>「クリックして詳細へ移動」→「ブラウザバックで戻る」→「またスクロールして次の作品へ...」という操作は、地味ながらストレスになります。 </p>
108108
<p>そこで <strong>一覧ページを維持したまま、詳細情報をモーダルウィンドウで重ねて表示する</strong> 形に改修しました。</p>
109109
<hr>
110-
<h2 id="実装の方針">実装の方針</h2><p>このサイトはビルドツールを使ってMarkdownファイルから静的なHTMLファイルを生成しています。<br>ポートフォリオの詳細ページもすでに <code>portfolio/work_01.html</code> のような形で実ファイルとして存在しています。</p>
110+
<h2 id="実装の方針">実装の方針</h2><p>このサイトはビルドツールを使ってMarkdownファイルから静的なHTMLファイルを生成しています。<br>プロダクトの詳細ページもすでに <code>portfolio/work_01.html</code> のような形で実ファイルとして存在しています。</p>
111111
<p>JSONデータにすべての情報を詰め込んでJSで構築する方法もありますが、<br><strong>「すでに生成されている詳細ページのHTMLを再利用する」</strong> 方が、SEO的にもビルドフロー的にも無駄がありません。</p>
112112
<h3 id="処理の流れ">処理の流れ</h3><ol>
113113
<li>ユーザーがカードをクリック。</li>

0 commit comments

Comments
 (0)