CSV のインポート、編集、エクスポートが可能がフィールドを追加する MTAppCSVEditor と MTAppjQuery v2.4.0 リリース

2019-12-06

3分で読了

更新: 2025-12-26

本日、Movable Type の管理画面のテキストエリアの入力フィールドに CSV ファイルのインポート、編集、エクスポート機能を追加する「MTAppCSVEditor」をリリースしました！このプラグインは MTAppjQuery のオプションプラグインという位置づけで、MTAppjQuery がインストールされているのが前提となります。

これに合わせて、MTAppjQuery v2.4.0 をリリースしました。

また、MTAppjQuery v2.4.0 には、コンテンツフィールドに「プレーンテキスト」というシンプルな </code> のフィールドを追加する「<strong>PlainTextField</strong>」というプラグインが同梱されました。</p><h2>MTAppCSVEditor とは</h2><p><strong>CSV ファイルのインポート、編集、エクスポート</strong>ができるフィールドを作れます。実際に見ていただいた方が分かりやすいと思うので下記の動画をご覧ください。</p><figure class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tL3F5OyVMtg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></figure><p>MTAppCSVEditor プラグインの詳細は<a href="https://bit-part.net/products/mtappcsveditor/">こちらの製品ページ</a>をご覧ください。</p><p>フィールドに保存されるデータは、二重配列なので、MTAppjQuery プラグインが提供する <code>json_decode</code> モディファイアで MT 変数化して、同じく MTAppjQuery プラグインの <code>mt:Foreach</code> タグを使って簡単にループで取り出せます。</p><h2>MTAppjQuery v2.4.0 リリース</h2><p>MTAppjQuery v2.4.0 では下記の修正や機能向上を含みます。</p><ul><li>オプションプラグイン対応<br>MTAppjQuery にオプションプラグインを追加するシステムを導入</li><li>MTAppCategorySwitch()<br>MTAppCategorySwitch 単体で使っている場合に正常に動作しないことがある問題を修正</li><li>MTAppCSVEditor v1.0.0 リリース</li><li>PlainTextField プラグインを同梱</li></ul><h2>PlainTextField プラグインリリース</h2><p><strong>PlainTextField</strong> プラグインとは、コンテンツデータにシンプルなテキストエリアフィールドを追加するプラグインです。このプラグインをインストールすると、「プレーンテキスト」というフィールドが利用できるようになります。</p><figure><img src="/assets/upload/images/contenttype-plaintext-min.png" data-image="8547"></figure><figure><img src="/assets/upload/images/transform/_w1600Fit/contentdata-plaintext-min.png" data-image="8546"></figure><p>見た目は「埋め込みテキスト」と似ていますが、「埋め込みテキスト」の方は MT が勝手に管理画面に表示するときに HTML エスケープした文字をアンエスケープしてしまったりするので、純粋に入力した値をそのまま保存したい場合には向きません。そのような点でお困りのときはこちらの「プレーンテキスト」を利用すれば良いでしょう。</p><p>なお、mtapp.multiField() を利用する場合は、コンテンツデータの中で「テキスト（複数行）」を利用していない場合にこの「プレーンテキスト」フィールドを利用してしまうと、リッチテキストエディタの TinyMCE に必要なファイルが読み込まれなくなってしまいますので、そういう場合は必ず「テキスト（複数行）」で入力フォーマット「なし」でお使いください。</p><p>以上です。</p> </div>  <div class="my-10"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3900117988527916" data-ad-slot="5460677750" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div>  <div class="border-y border-slate-200 dark:border-slate-700 py-6 my-8"> <p class="text-sm font-medium text-slate-700 dark:text-slate-300 mb-4">この記事をシェア</p> <div class="flex items-center space-x-3">  <a href="https://x.com/intent/post?url=https%3A%2F%2Ftinybeans.net%2Fblog%2F2019%2F12%2Fmtappjquery-v2.4.0.html&text=CSV%20%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88%E3%80%81%E7%B7%A8%E9%9B%86%E3%80%81%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88%E3%81%8C%E5%8F%AF%E8%83%BD%E3%81%8C%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%20MTAppCSVEditor%20%20%E3%81%A8%20MTAppjQuery%20v2.4.0%20%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-10 h-10 bg-black text-white rounded-full hover:opacity-80 transition-opacity"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg> </a>  <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ftinybeans.net%2Fblog%2F2019%2F12%2Fmtappjquery-v2.4.0.html" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-10 h-10 bg-[#1877F2] text-white rounded-full hover:opacity-80 transition-opacity"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path></svg> </a>  <a href="https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Ftinybeans.net%2Fblog%2F2019%2F12%2Fmtappjquery-v2.4.0.html" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-10 h-10 bg-[#06C755] text-white rounded-full hover:opacity-80 transition-opacity"> <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"></path></svg> </a>  <a href="https://b.hatena.ne.jp/add?mode=confirm&url=https%3A%2F%2Ftinybeans.net%2Fblog%2F2019%2F12%2Fmtappjquery-v2.4.0.html&title=CSV%20%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88%E3%80%81%E7%B7%A8%E9%9B%86%E3%80%81%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88%E3%81%8C%E5%8F%AF%E8%83%BD%E3%81%8C%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%20MTAppCSVEditor%20%20%E3%81%A8%20MTAppjQuery%20v2.4.0%20%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-10 h-10 bg-[#00A4DE] text-white rounded-full hover:opacity-80 transition-opacity"> <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M20.47 0C22.42 0 24 1.58 24 3.53v16.94c0 1.95-1.58 3.53-3.53 3.53H3.53C1.58 24 0 22.42 0 20.47V3.53C0 1.58 1.58 0 3.53 0h16.94zm-3.705 14.47c-.78 0-1.41.63-1.41 1.41s.63 1.414 1.41 1.414 1.41-.634 1.41-1.414-.63-1.41-1.41-1.41zM8.61 17.247c1.2 0 2.056-.042 2.58-.166.523-.124.91-.298 1.16-.518.25-.22.44-.478.57-.774.13-.295.194-.663.194-1.103 0-.447-.08-.807-.242-1.082-.16-.276-.373-.47-.636-.583-.264-.113-.65-.2-1.16-.263.608-.14 1.018-.323 1.23-.55.21-.23.316-.565.316-1.005 0-.377-.067-.694-.2-.95-.136-.257-.326-.456-.57-.598-.244-.14-.593-.236-1.048-.286-.454-.05-1.063-.074-1.825-.074H5.146v7.952h3.463zM7.4 9.783h1.4c.63 0 1.06.03 1.288.09.228.06.4.163.51.31.11.145.166.35.166.612 0 .29-.06.506-.18.646-.12.14-.32.232-.6.275-.182.03-.614.043-1.297.043H7.4V9.783zm0 3.24h1.633c.594 0 1.01.023 1.246.066.236.044.43.14.58.293.15.15.226.385.226.703 0 .265-.053.47-.16.615-.107.147-.266.248-.476.304-.21.056-.725.084-1.548.084H7.4v-2.063zm9.186-3.24h1.136c.08 0 .18.006.3.018.12.012.212.03.276.05.06.018.126.044.19.076.063.03.11.072.14.124.03.05.05.11.06.18.01.068.016.157.016.265v4.064c0 .108-.006.197-.017.266-.01.068-.03.13-.06.18-.03.053-.076.095-.14.127-.065.03-.13.056-.19.075-.065.02-.156.037-.277.05-.12.01-.22.018-.3.018h-1.136V9.783z"/></svg> </a>  <div class="relative"> <button type="button" id="copy-url-btn" class="flex items-center justify-center w-10 h-10 bg-slate-600 text-white rounded-full hover:opacity-80 transition-opacity cursor-pointer" title="URLをコピー"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path> </svg> </button> <span id="copy-tooltip" class="absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-slate-800 text-white text-xs rounded whitespace-nowrap pointer-events-none z-10 invisible">コピーしました</span> </div> <script> document.getElementById('copy-url-btn').addEventListener('click', () => { navigator.clipboard.writeText('https://tinybeans.net/blog/2019/12/mtappjquery-v2.4.0.html').then(() => { const tooltip = document.getElementById('copy-tooltip'); tooltip.classList.remove('invisible'); setTimeout(() => { tooltip.classList.add('invisible'); }, 2000); }); }); </script> </div> </div> </article>  <section class="mt-12"> <h2 class="text-2xl font-bold text-slate-800 dark:text-white mb-6">関連記事</h2> <div class="grid sm:grid-cols-2 gap-6"> <article class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden card-hover"> <a href="https://tinybeans.net/blog/2026/02/mtappcolumngroup.html" class="block"> <img src="https://tinybeans.net/assets_c/2026/02/hf_20260221_182300_6b05ea7d-eef3-438b-8a1f-f2f0d3df7317-thumb-400xauto-41.jpeg" alt="hf_20260221_182300_6b05ea7d-eef3-438b-8a1f-f2f0d3df7317.jpeg" class="aspect-video object-cover w-full" loading="lazy" /> </a> <div class="p-4"> <a href="https://tinybeans.net/blog/movabletype/mtappjquery/" class="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium rounded hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"> MTAppjQuery </a> <h3 class="font-bold text-slate-800 dark:text-white mt-2 line-clamp-2"> <a href="https://tinybeans.net/blog/2026/02/mtappcolumngroup.html" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"> mtapp.columnGroup に任意のフィールドやテキストを表示するだけのフィールドを入れる方法 </a> </h3> </div> </article> <article class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden card-hover"> <a href="https://tinybeans.net/blog/2025/03/mtappjquery-set-today.html" class="block"> <img src="https://tinybeans.net/assets_c/2025/12/66c238bf-f2e6-4ca3-b411-932b247fc058-thumb-400xauto-11.webp" alt="66c238bf-f2e6-4ca3-b411-932b247fc058.webp" class="aspect-video object-cover w-full" loading="lazy" /> </a> <div class="p-4"> <a href="https://tinybeans.net/blog/movabletype/mtappjquery/" class="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium rounded hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"> MTAppjQuery </a> <h3 class="font-bold text-slate-800 dark:text-white mt-2 line-clamp-2"> <a href="https://tinybeans.net/blog/2025/03/mtappjquery-set-today.html" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"> MTAppjQuery を使ってコンテンツタイプの日付フィールドの初期値を「今日」にする </a> </h3> </div> </article> <article class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden card-hover"> <a href="https://tinybeans.net/blog/2024/11/multifield-v3-set-default.html" class="block"> <img src="https://tinybeans.net/assets_c/2025/12/65fb752d-ebd5-45b5-94b9-fb72db9ec9a2-thumb-400xauto-15.webp" alt="65fb752d-ebd5-45b5-94b9-fb72db9ec9a2.webp" class="aspect-video object-cover w-full" loading="lazy" /> </a> <div class="p-4"> <a href="https://tinybeans.net/blog/movabletype/mtappjquery/" class="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium rounded hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"> MTAppjQuery </a> <h3 class="font-bold text-slate-800 dark:text-white mt-2 line-clamp-2"> <a href="https://tinybeans.net/blog/2024/11/multifield-v3-set-default.html" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"> mtapp.multiField v3 で初期値をセットしたり始めからフィールドを表示させたりする方法 </a> </h3> </div> </article> <article class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden card-hover"> <a href="https://tinybeans.net/blog/2024/09/mtappjquery-customize-tinymce-3.html" class="block"> <img src="https://tinybeans.net/assets_c/2025/12/7a37961c-6de3-46e5-b2c6-9d26b6165030-thumb-400xauto-12.webp" alt="7a37961c-6de3-46e5-b2c6-9d26b6165030.webp" class="aspect-video object-cover w-full" loading="lazy" /> </a> <div class="p-4"> <a href="https://tinybeans.net/blog/movabletype/mtappjquery/" class="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium rounded hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"> MTAppjQuery </a> <h3 class="font-bold text-slate-800 dark:text-white mt-2 line-clamp-2"> <a href="https://tinybeans.net/blog/2024/09/mtappjquery-customize-tinymce-3.html" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"> 【第3回】段落フォーマットのドロップダウンをカスタマイズ - MTAppjQuery で Movable Type の TinyMCE をカスタマイズ </a> </h3> </div> </article> </div> </section> </div>  <aside class="w-full lg:w-80 space-y-6">  <div class="hidden lg:block bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-5"> <h3 class="font-bold text-slate-800 dark:text-white mb-4 flex items-center"> <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path> </svg> 目次 </h3> <div id="sidebar-toc-content" class="max-h-[400px] overflow-y-auto">  </div> </div>  <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-5"> <h3 class="font-bold text-slate-800 dark:text-white mb-4 flex items-center"> <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path> </svg> 最新記事 </h3> <ul class="space-y-4"> <li> <a href="https://tinybeans.net/blog/2026/04/claude-opus-47.html" class="flex items-start group"> <span class="flex-shrink-0 w-8 h-8 bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 rounded-full flex items-center justify-center text-sm font-bold mr-3">1</span> <span class="text-sm text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2">Claude Opus 4.7 がリリース！Effort xhigh の登場と垣間見えた Mythos のすごさ</span> </a> </li> <li> <a href="https://tinybeans.net/blog/2026/04/claude-code-neovim.html" class="flex items-start group"> <span class="flex-shrink-0 w-8 h-8 bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400 rounded-full flex items-center justify-center text-sm font-bold mr-3">2</span> <span class="text-sm text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2">Claude Code 作業中に「ちょっとこのファイル見たい・直したい」となったらどうしてる？</span> </a> </li> <li> <a href="https://tinybeans.net/blog/2026/04/claude-md-management.html" class="flex items-start group"> <span class="flex-shrink-0 w-8 h-8 bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400 rounded-full flex items-center justify-center text-sm font-bold mr-3">3</span> <span class="text-sm text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2">Anthropic 公式の claude-md-management プラグインで CLAUDE.md を育てていこう</span> </a> </li> <li> <a href="https://tinybeans.net/blog/2026/04/claude-code-homebrew-to-native.html" class="flex items-start group"> <span class="flex-shrink-0 w-8 h-8 bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400 rounded-full flex items-center justify-center text-sm font-bold mr-3">4</span> <span class="text-sm text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2">Claude Code を Homebrew からネイティブインストールに切り替えたら快適になった話</span> </a> </li> <li> <a href="https://tinybeans.net/blog/2026/03/claude-code-schedule.html" class="flex items-start group"> <span class="flex-shrink-0 w-8 h-8 bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400 rounded-full flex items-center justify-center text-sm font-bold mr-3">5</span> <span class="text-sm text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2">Claude Code の /schedule で「寝てる間に仕事させる」を実現しよう — /loop との違いも徹底解説</span> </a> </li> </ul> </div>  <div class="sidebar-ads-sticky">  <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-5"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3900117988527916" data-ad-slot="5254446589" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> </div> </aside> </div> </div> </main>  <footer class="bg-slate-800 dark:bg-slate-950 text-slate-300 py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid md:grid-cols-4 gap-8"> <div> <h4 class="text-xl font-bold text-white mb-4">かたつむりくんのWWW</h4> <p class="text-sm text-slate-400"> Craft CMS、Movable Type、HTML、CSS、JavaScript、PHP など、Web制作に関する技術情報を取り扱うブログです。 </p> </div> <div> <h5 class="font-semibold text-white mb-4">カテゴリ</h5> <ul class="space-y-2 text-sm"> <li> <a href="https://tinybeans.net/blog/claude-code/" class="hover:text-blue-400 transition-colors"> Claude Code </a> </li> <li> <a href="https://tinybeans.net/blog/craftcms/" class="hover:text-blue-400 transition-colors"> Craft CMS </a> </li> <li> <a href="https://tinybeans.net/blog/movabletype/" class="hover:text-blue-400 transition-colors"> Movable Type </a> </li> <li> <a href="https://tinybeans.net/blog/drupal/" class="hover:text-blue-400 transition-colors"> Drupal </a> </li> <li> <a href="https://tinybeans.net/blog/wordpress/" class="hover:text-blue-400 transition-colors"> WordPress </a> </li> <li> <a href="https://tinybeans.net/blog/othercms/" class="hover:text-blue-400 transition-colors"> その他の CMS </a> </li> <li> <a href="https://tinybeans.net/blog/web-development/" class="hover:text-blue-400 transition-colors"> Web 開発 </a> </li> <li> <a href="https://tinybeans.net/blog/tools-services/" class="hover:text-blue-400 transition-colors"> ツール・サービス </a> </li> <li> <a href="https://tinybeans.net/blog/books/" class="hover:text-blue-400 transition-colors"> 本・雑誌 </a> </li> <li> <a href="https://tinybeans.net/blog/diary/" class="hover:text-blue-400 transition-colors"> 日記 </a> </li> </ul> </div> <div> <h5 class="font-semibold text-white mb-4">リンク</h5> <ul class="space-y-2 text-sm"> <li><a href="#" class="hover:text-blue-400 transition-colors">プライバシーポリシー</a></li> <li><a href="#" class="hover:text-blue-400 transition-colors">利用規約</a></li> <li><a href="/contact/" class="hover:text-blue-400 transition-colors">お問い合わせ</a></li> </ul> </div> <div> <h5 class="font-semibold text-white mb-4">フォロー</h5> <div class="flex space-x-4"> <a href="#" class="text-slate-400 hover:text-blue-400 transition-colors"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path></svg> </a> <a href="#" class="text-slate-400 hover:text-blue-400 transition-colors"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg> </a> <a href="#" class="text-slate-400 hover:text-blue-400 transition-colors"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg> </a> <a href="https://tinybeans.net/feed.xml" class="text-slate-400 hover:text-orange-400 transition-colors" title="RSS"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M6.18 15.64a2.18 2.18 0 012.18 2.18C8.36 19 7.38 20 6.18 20A2.18 2.18 0 014 17.82a2.18 2.18 0 012.18-2.18M4 4.44A15.56 15.56 0 0119.56 20h-2.83A12.73 12.73 0 004 7.27V4.44m0 5.66a9.9 9.9 0 019.9 9.9h-2.83A7.07 7.07 0 004 12.93V10.1z"/></svg> </a> </div> </div> </div> <div class="border-t border-slate-700 mt-8 pt-8 text-center text-sm text-slate-400"> © 2026 かたつむりくんのWWW. All rights reserved. </div> </div> </footer>  <button id="back-to-top" type="button" class="fixed bottom-6 right-6 z-40 p-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all duration-300 opacity-0 invisible translate-y-4" aria-label="ページトップへ戻る"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path> </svg> </button>  <script src="/dist/js/main.js" defer></script> </body> </html>