<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>QWERTY.WORK</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/" />
    <link rel="self" type="application/atom+xml" href="https://qwerty.work/blog/atom.xml" />
	<link rel="hub" href="https://pubsubhubbub.appspot.com/" />
<link rel="hub" href="https://pubsubhubbub.superfeedr.com" />
<link rel="hub" href="https://switchboard.p3k.io/" />
<link rel="hub" href="http://phubb.cweiske.de/hub.php" />

    <id>tag:qwerty.work,2017-10-18:/blog//1</id>
    <updated>2025-05-12T23:45:26Z</updated>
    <subtitle>パソコンとかいろいろメモ。</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type Pro 6.3.2</generator>

<entry>
    <title>Cloudflare Workers + Prerender.io で CSRサイトを SEO 対応する方法</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2025/04/cloudflare-workers-prerenderio-csr-seo.php" />
    <id>tag:qwerty.work,2025:/blog//1.1244</id>

    <published>2025-04-18T15:09:27Z</published>
    <updated>2025-05-12T23:45:26Z</updated>

    <summary>このページの概要 Javascriptを多用したサイトや、ノーコードツールで制作...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="SEO" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="cloudflare" label="Cloudflare" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="cloudflareworkers" label="Cloudflare Workers" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="csr" label="CSR" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="prerenderio" label="Prerender.io" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="seo" label="SEO" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="seo対策" label="SEO対策" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ssr" label="SSR" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<h2 id="h2_section1">このページの概要</h2>
<p>Javascriptを多用したサイトや、ノーコードツールで制作したサイトがGoogle Search ConsoleではGoogleにインデックスされましたが、Bing Webmaster Toolsに登録してもBingにインデックスできないことが多々あります。Bingでは最初は空ページで、Javascriptが後からコンテンツを読み込んでくるページは認識しないみたいです。そこで、事前にレンダリングされた静的ページのキャッシュを用意し、検索エンジンのクローラーからのアクセスはそのキャッシュに誘導してページコンテンツを認識させるといった方法があったのでメモ。</p>
<h2 id="h2_section1">目的</h2>
  <ul>
    <li>クライアントサイドレンダリング（CSR）で動作するJavaScriptサイトを Google や Bing にインデックスさせる</li>
    <li>クローラー（bot）にだけ静的HTMLを返す仕組みを構築する</li>
  </ul>

<h2 id="h2_section1">必要なもの（すべて無料で始められます）</h2>
  <ul>
    <li><a href="https://www.cloudflare.com/" target="_blank">Cloudflare</a> アカウント</li>
    <li><a href="https://github.com/" target="_blank">GitHub</a> アカウント</li>
    <li><a href="https://prerender.io/" target="_blank">Prerender.io</a> アカウント</li>
    <li>対象ドメインのDNSを Cloudflare DNS に変更すること</li>
    <li>コマンド実行環境（Windows: PowerShell / macOS/Linux: ターミナル）</li>
  </ul>

<h2 id="h2_section1">ざっくりとした仕組みの流れ</h2>
<p>Prerender.ioで静的ページのキャッシュを作成し、CloudFlareのWorkersを使って検索ボットのアクセスはPrerender.ioのキャッシュに誘導し、それ以外のアクセスは通常サイトが配信されるようにします。これを行うためにはCloudFlare Workersに登録するスクリプトをGitHubまたはGitLabに置き、それを読み込ませます。</p>

<h2 id="h2_section1">手順</h2>
  <ol>
    <li>Prerender.io に登録し、APIトークンを取得</li>
    <li>Cloudflare にドメインを追加（ネームサーバー変更）</li>
    <li>GitHub に新しいリポジトリを作成（例: <code>cf-prerender-multisite</code>）</li>
    <li>以下の 2 ファイルを作成して GitHub に push</li>
  </ol>

<h3 id="h3_section1">src/index.js</h3>
<pre class="brush:text">
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url)
    const pathname = url.pathname
    const userAgent = request.headers.get("user-agent") || ""
    const isBot = /bot|crawl|spider|slurp|bing/i.test(userAgent)

    // .xml や .txt で終わるパスは除外（Prerender.ioを経由させない）
    const isStaticFile = pathname.endsWith(".xml") || pathname.endsWith(".txt")
    if (isStaticFile) {
      return fetch(request)
    }

    const token = "YOUR_API_TOKEN"

    if (isBot) {
      const prerenderUrl = `https://service.prerender.io/https://${url.hostname}${url.pathname}${url.search}`
      return fetch(prerenderUrl, {
        headers: {
          'X-Prerender-Token': token
        }
      })
    }

    return fetch(request)
  }
}
</pre>

<h3 id="h3_section1">wrangler.toml</h3>
  <pre class="brush:text">
name = "prerender-multisite"
main = "src/index.js"
compatibility_date = "2024-04-15"

[[routes]]
pattern = "example.com/*"
zone_name = "example.com"
  </pre>

  <ol start="5">
    <li>Cloudflare Pages に GitHub を接続して「空のWorker」としてデプロイ</li>
    <li>Cloudflare DNS の A レコードで ☁️（プロキシ）を ON にする</li>
    <li>Cloudflare の「SSL/TLS」を フル（Strict） に変更（リダイレクトループ回避）</li>
    <li>Cloudflare の対象ドメイン選択した中の Wokers＆Pages の編集で「リクエスト制限失敗モード」と「失敗オープン (続行)」に変更（504エラー対応）</li>
    <li>Cloudflare Caching 構成 で Crawler Hints を ON にする（Index Now 対応）</li>
  </ol>

<h2 id="h2_section1">デバッグ方法（PowerShell / ターミナルで実行）</h2>
  <ul>
    <li>Googlebot になりすましてHTMLを取得</li>
    <pre class="brush:text">
curl -A "Googlebot" https://example.com/
    </pre>

    <li>ヘッダーのみを取得してステータス確認</li>
    <pre class="brush:text">
curl -A "Googlebot" -I https://example.com/
    </pre>

    <li>Prerender.io に直接アクセスしてHTMLを確認</li>
    <pre class="brush:text">
curl -H "X-Prerender-Token: YOUR_API_TOKEN" "https://service.prerender.io/https://example.com/"
    </pre>

    <li>Cloudflare ダッシュボードの「Workerログ」でリクエスト確認</li>
    <li>Chromeのデベロッパーツールで User-Agent を Googlebot に変更して動作確認</li>
    <li><a href="https://prerender.io/dashboard" target="_blank">Prerender.io Dashboard</a> の「Recently Cached Pages」を確認</li>
  </ul>

<h2 id="h2_section1">成功時のレスポンス例</h2>
  <pre class="brush:text">
HTTP/1.1 200 OK
Server: cloudflare
X-Prerender-Requestid: xxxxxxxx
X-Prerender-External-Lb: haproxy-private-cache
  </pre>

<h2 id="h2_section1">まとめ</h2>
  <ul>
    <li>Cloudflare Worker + Prerender.io の組み合わせで SEO に強い構成が実現</li>
    <li>通常ユーザーには動的なSTUDIOサイト、Botには高速なHTMLを返す</li>
    <li>すべて無料で始められ、Cloudflare上で完結するため保守も簡単</li>
  </ul>]]>
        <![CDATA[<h2 id="h2_section1">結果</h2>
<p>Bing検索のインデックスに成功しました。トータルで約1週間ほどかかりました。経過として、この方法でBing Webmaster Toolsで改めて「URL検査」メニューから「インデックス作成を要求」を実行して、4～5日後にステータスが「正常にインデックスが付きました」に変わりました。しかし、すぐにはBing検索の結果に表示されず、それから約3日後に検索結果として表示されるようになりました。</p>

<h2 id="h2_section1">その他の選択肢</h2>
  <ul>
    <li>
      <a href="https://developers.cloudflare.com/browser-rendering/" target="_blank">Cloudflare Browser Rendering</a>  
      公式のヘッドレスブラウザ機能。Cloudflare Workersと統合可能ですが、Prerender.ioよりやや設定が複雑です。
    </li>
    <li>
      <a href="https://github.com/GoogleChrome/rendertron" target="_blank">Rendertron</a>  
      Google製のオープンソースレンダラー。自前でデプロイが必要（<a href="https://cloud.google.com/run" target="_blank">Google Cloud Run</a> などを使用）。
    </li>
    <li>
      Firebase Hosting + SSR や Next.js の Incremental Static Regeneration（ISR）など、フレームワーク側でのSEO対策も手段の一つです。
    </li>
  </ul>

<h2 id="h2_section1">その後の実験</h2>
<p>無事にBingに登録されましたが、登録後にDNSサーバーを元に戻し、Cloudflare WorkersとPrerender.ioの仕組みを外した場合、Bingボットが改めてページをクロールしたらどうなるか実験したいと思います。数ヶ月かかるかもしれないので、履歴を書いておきます。</p>
<ul>
  <li>2025-04-25　Bing Webmaster ToolsのURL検索で表示が「正常にインデックスが付きました　URL は Bing に表示できます」となった</li>
  <li>2025-04-26　Bing検索で検索結果に表示されたのを確認</li>
  <li>2025-04-28　DNSサーバーをお名前ドットコムに戻した</li>
</ul>]]>
    </content>
</entry>

<entry>
    <title>STUDIOで制作したサイトがBingにインデックスされない問題</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2025/04/studio-bing-index-seo.php" />
    <id>tag:qwerty.work,2025:/blog//1.1243</id>

    <published>2025-04-14T23:57:22Z</published>
    <updated>2025-04-21T14:54:37Z</updated>

    <summary>Bing Webmaster Toolsに登録してもインデックスされない ウェブ...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="SEO" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="WEB" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="bing" label="Bing" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="bingwebmastertools" label="Bing Webmaster Tools" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="seo" label="SEO" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="seo対策" label="SEO対策" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="インデックス" label="インデックス" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="検索エンジン" label="検索エンジン" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<h2 id="h2_section1">Bing Webmaster Toolsに登録してもインデックスされない</h2>
<p>ウェブサイト制作のノーコードプラットホーム「STUDIO」で作成したサイトをBingウェブマスターツールに登録しても検索エンジンBingにインデックスされなくなりました。</p>
<p>以前はヘルプデスクに日本語から英文に翻訳した文章で問い合わせしたら、2023年頃は手動で解決してくれていたのですが、2024年のいつ頃からか対応してくれなくなりました。</p>
<blockquote>
<div class="urlInspectionSectionTitle">発見されましたがクロールされていません</div>
<div class="urlInspectionSectionDescription">URL は Bing に表示できません<br /><br /></div>
<p><span>検査された URL は Bing に認識されていますが、いくつかの問題があるためにインデックス作成が妨げられています。</span><a href="https://www.bing.com/webmaster/help/webmaster-guidelines-30fba23a" target="_blank">Bing Web マスター ガイドライン</a><span>に従って、インデックス作成の機会を増やすことを推奨します。</span></p>
</blockquote>
<p>以前は以下のページにある方法で<span>Bing Webマスターサポート</span>に問い合わせして解決できていました。</p>
<ul>
<li><a href="https://qwerty.work/blog/2022/05/bing-webmaster-tools-request-index.php" target="_blank">https://qwerty.work/blog/2022/05/bing-webmaster-tools-request-index.php</a></li>
</ul>
<h3 id="h3_section1"><span style="font-size: 1.5em;">インデックスされない理由</span></h3>
<p>Bing Webmaster Toolsには以下の理由が表示されていました。</p>
<ul>
<li>H1タグが見当らない</li>
<li>DESCRIPTIONが見当たらない</li>
</ul>
<p>STUDIOで制作したどのサイトもBing WebmasterToolsに登録すると、このエラーが出ます。もちろん制作時にH1やサイトの概要は設定していますが、どうやらここが問題ではなさそうです。</p>
<h2 id="h2_section1">原因はJavascriptによる仕組？</h2>
<p>何がいけないのか調べたところ、Javascriptにより動的に吐き出しているサイトがダメで、STUDIOの仕組み上に問題があるっぽいです。</p>
<p>このことについてはBingのヘルプにも説明があります。</p>
<blockquote>
<p><a class="bookmark" id="javascript"></a><span>JavaScript:</span><a name="_Hlk43067148"></a><span> Bing は</span><span>JavaScript を処理できますが、HTTP リクエスト数を最小限に抑えながら大規模な JavaScript を処理するには限界があります。Bing では、</span><a href="https://blogs.bing.com/webmaster/october-2018/bingbot-Series-JavaScript,-Dynamic-Rendering,-and-Cloaking-Oh-My"><span> Bingbot などの特定のユーザーエージェント、特に大規模なウェブサイトでは、クライアント側でレンダリングされたコンテンツと事前レンダリングされたコンテンツを切り替えるために、 ダイナミック レンダリングを</span></a><span>推奨しています。<br /><br />（参考 <a href="https://www.bing.com/webmasters/help/webmasters-guidelines-30fba23a" target="_blank">https://www.bing.com/webmasters/help/webmasters-guidelines-30fba23a</a></span></p>
</blockquote>
<p>STUDIO Communityでも触れられていました。</p>
<ul>
<li><a href="https://community-ja.studio.design/c/publish/bing-seo-6ae05b" target="_blank">https://community-ja.studio.design/c/publish/bing-seo-6ae05b</a></li>
<li><a href="https://community-ja.studio.design/c/feedback/bing-seo" target="_blank">https://community-ja.studio.design/c/feedback/bing-seo</a></li>
</ul>
<p>動的サイトといってもPHPのようにサーバーサイドでHTMLを吐き出すものはいいのですが、Javascriptでもクライアントサイドで動くものがダメみたいです。</p>
<p>Bingのシェアは10%台で低いとは言え、クライアントから「検索に結果にヒットしない」と言われると困ります。</p>
<p>そろそろ無視できないレベルにきていますので、BingもSTUDIOも早く対応して欲しいです。</p>
<p></p>]]>
        
    </content>
</entry>

<entry>
    <title>【DNS】メールを送るだけでSPFとDKIMのチェックができるテストサイト</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2025/03/dns-dkim-spf-test.php" />
    <id>tag:qwerty.work,2025:/blog//1.1242</id>

    <published>2025-03-19T16:00:41Z</published>
    <updated>2025-03-19T16:10:10Z</updated>

    <summary>ドメインの移管やメールサーバーの移転などでDNSレコードを変更した際、気になるこ...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="メール" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="dkim" label="DKIM" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="dmarc" label="DMARC" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="dns" label="DNS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="dnsレコード" label="DNSレコード" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="spf" label="SPF" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="テスト" label="テスト" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<p>ドメインの移管やメールサーバーの移転などでDNSレコードを変更した際、気になることの一つがメールの送受信。SPF、DKIM、DMARCの設定が不安の時に使えるサイトがあります。これはブラウズに表示された宛先にメール送るだけでテストできて簡単です。メールソフトで送受信テストしても、迷惑メールとして扱われてないか？Gmailではじかれていないか？不安になることがありますが、これでテストすれば少し安心できます。</p>
<?php mShot("https://www.mail-tester.com/",2);?>
]]>
        
    </content>
</entry>

<entry>
    <title>【WebDAV】無料で構築するOneDriveの代替手段</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2025/03/build-a-onedrive-alternative.php" />
    <id>tag:qwerty.work,2025:/blog//1.1241</id>

    <published>2025-03-17T08:44:22Z</published>
    <updated>2025-03-22T11:14:03Z</updated>

    <summary>OneDriveの代替手段を模索 利用頻度の高いファイルを複数のWindowsパ...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="Windows" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="onedrive代替" label="OneDrive代替" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="webdav" label="WebDAV" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="クラウドストレージ" label="クラウドストレージ" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="フォルダ同期" label="フォルダ同期" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ミラーリング" label="ミラーリング" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<h2 id="h2_section1">OneDriveの代替手段を模索</h2>
<p>利用頻度の高いファイルを複数のWindowsパソコンで自宅でも外出先で使用するのにOneDriveは便利でいいのですが、有料プランへ誘導する警告画面が鬱陶しいです。課金してまで使用することは考えていません。「同じような仕組みを構築できないかな？」と考えてたとき、レンタルサーバーのWebDAVやクラウドストレージサービスとフリーソフトで構築できたのでメモ。</p>
<h2 id="h2_section1">構築する環境の概要</h2>
<p>Windows上で任意の場所に作成したローカルフォルダと、ネットワークドライブとして割り当てたWebDAVフォルダを監視し、ファイルやフォルダに変化があれば、リアルタイムに同期を実行する環境を作ります。</p>
<h2 id="h2_section1">準備するもの</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>フリーソフト名</th><th>用途</th><th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td>WebDAV</td><td>保存領域</td><td>Xserverドライブ、OneDrive、GoogleDrive,DropBox,BOX等</td>
</tr>
<tr>
<td><a href="http://rei.to/carotdav.html" target="_blank">CarotDAV</a></td><td>WebDAVクラインアント</td><td>複数のWebDAVフォルダの接続を管理、安定したフォルダ操作、ネットワークドライブからアクセス可能</td>
</tr>
<tr>
<td><a href="https://freesoft-100.com/review/realsync.php" target="_blank">RealSync</a></td><td>フォルダ同期</td><td>一定時間ごとにローカルとリモートフォルダを監視してミラーリング</td>
</tr>
<tr>
<td><a href="https://www.2brightsparks.com/syncback/sbpro.html" target="_blank">SyncBackPro</a></td><td>フォルダ同期</td><td>リアルタイムにローカルとリモートフォルダを監視してミラーリング（有料）</td>
</tr>
<tr>
<td><a href="https://freesoft-100.com/review/nainai.html" target="_blank">NaiNai</a></td><td>タスクトレイ常駐化</td><td>常駐化に対応していないCarotDAVをタスクトレイに常駐化させる</td>
</tr>
<tr>
<td><a href="https://www.autohotkey.com/" target="_blank">AutoHotkey</a></td><td>ホットキーの実行</td><td>アプリケーションの起動と、NaiNaiで常駐化させるために必要なCarotDAVのウィンドウ操作のホットキーを実行</td>
</tr>
</tbody>
</table>]]>
        
    </content>
</entry>

<entry>
    <title>【FileMaker】PowerShell連携で画像回転とExif情報を削除</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2025/02/filemaker-powershell-image.php" />
    <id>tag:qwerty.work,2025:/blog//1.1240</id>

    <published>2025-02-05T10:47:55Z</published>
    <updated>2025-02-07T14:50:23Z</updated>

    <summary>経緯 画像も簡単に入力ができる商品管理的なデータベースが欲しいという要望があり、...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="FileMaker" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="PowerSell" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="スクリプト" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="exif削除" label="Exif削除" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="filemaker" label="FileMaker" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="powershell" label="PowerShell" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="powershell連携" label="PowerShell連携" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="スクリプト" label="スクリプト" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ファイルメーカー" label="ファイルメーカー" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="画像回転" label="画像回転" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<h2 id="h2_section1">経緯</h2>
<p>画像も簡単に入力ができる商品管理的なデータベースが欲しいという要望があり、ファイルメーカーでサンプル的に作りました。しかし、<strong>横向きの画像がどうしても縦になる</strong>と依頼主はすでに100件以上登録済みで、そのほとんどが縦向きになっており困った様子。</p>
<p><strong>原因はカメラ</strong>にあるようで、何の機種かわかりませんが恐らくスマホで、横向きで撮影しても<strong>EXIF情報に登録された向きが90度横</strong>になるみたいで、Windows上の表示は横向きなのですが、ファイルメーカーのオブジェクトフィールにピクチャ挿入してみるとEXIF情報通り90度横に表示されてしまいます。</p>
<p>解決方法として「<a href="https://forest.watch.impress.co.jp/library/software/shukusen/" target="_blank">縮小専用</a>」などのフリーソフトでリサイズするついでにEXIF情報を削除する方法が思いついたので、縮小専用でリサイズした画像を挿入したところ横向きで登録できました。<strong>EXIF情報を削除すれば解決できる</strong>ことが分かったのですが、依頼主にその方法を提案しましたが、100以上ある画像を変換して再登録するのは嫌だとのこと...。</p>
<p>他に思いつく解決策はファイルメーカー内で画像操作を行うプラグインを使うことですが、すぐに試すことができなかったり、高額だったり、バージョンが古くて対応していなかったりと現実味に欠けており、どれもピンときませんでした。</p>
<h3 id="h3_section1">目についたプラグイン</h3>
<ul>
<li><a href="https://www.factory-1987.co.jp/Factory/FileMaker_Plug-in2_folder/F-FileMaker_Plugin2.html" target="_blank">Factory's FileMaker Plug-in 2</a></li>
<li><a href="https://sites.google.com/site/scriptmakerps/%E3%83%9B%E3%83%BC%E3%83%A0" target="_blank">ScriptMakerPS</a></li>
</ul>
<h2 id="h2_section1">プラグイン不要でPowerShellと連携できる方法があった</h2>
<p>以下のサイトがヒントだったのですが、Windows上で動いているFileMakerであればスクリプトからPowerShellにコマンドを送信し、PowerShell上で画像の回転、EXIF情報の削除を行うことができることを発見しました。ちなみに、環境はWindows11とFileMaker12です。</p>
<?php mShot("https://fm-aid.com/bbs2/viewtopic.php?id=6946",2);?>
<p>&nbsp;</p>
<p>ただ、上記サイトのまま使用してもPowerShellに値を渡せなかったり、スクリプト内で画像のエクスポート・インポートがうまくいきませんでした。これはそれぞれでパスの書き方が原因で、以下のように改造したらうまくいきました。</p>
]]>
        <![CDATA[<h2 id="h2_section1">スクリプトとソース</h2>
<p>スクリプトの流れとしては以下の通りです。</p>
<ol>
<li>フィールド内の画像をフォルダに書き出す</li>
<li>書き出し先のファイルパスを変数に入れてPowerShellに渡す</li>
<li>PowerShellで該当のパスの画像を右90度回転＆EXIF削除して上書き保存</li>
<li>ファイルメーカーでピクチャを挿入</li>
</ol>
<h3 id="h3_section1">ファイルメーカーのスクリプト</h3>
<img src="/loading.gif" data-echo="/blog/2025/02/05/No-01.png" width="700" height="431" alt="スクリプトの編集画面" loading="lazy"/>
<pre class="brush:text;">
変数を設定 [$pathExport; 値:Get(テンポラリパス) & 〇〇管理::写真01]
フィールド内容のエクスポート[〇〇管理::写真01];「$pathExport」]
変数を設定 [$pathWin; 値:Replace ( Substitute ( $path ; "/" ; "\\" ) ; 1 ; 1 ; "" )]
Eventを送信[「aevt」;「odoc」;Let([    $ps =     "powershell -windowstyle hidden -Command \"     [void][Reflection.Assembly]::LoadWithPartialName('System.Drawing');
    $PathWin = '{pathWin}';    $image = [System.Drawing.Image]::FromFile($pathWin);
    $image.RotateFlip('Rotate90FlipNone');    foreach ($propertyId in $image.PropertyIdList) {        $image.RemovePropertyItem($propertyId);    }    $image.Save($pathWin, System.Drawing.Imaging.ImageFormat]::Jpeg);    $image.Dispose();    \""]; Substitute($ps; "{pathWin}"; $pathWin))]
スクリプト一時停止/続行[間隔(秒:3)]
変数を設定 [$pathInport; 値:"imagewin:" & $pathExport]
フィールドへ移動 [〇〇管理::写真01]
ピクチャを挿入 [「$pathInport」]
</pre>
<p>「Eventを送信」の部分で設定する計算式の指定の内容</p>
<img src="/loading.gif" data-echo="/blog/2025/02/05/No-02.png" width="700" height="639" alt="Eventを送信の計算式の指定" loading="lazy"/>
<pre class="brush:ps;">
Let([
    $ps = 
    "powershell -windowstyle hidden -Command \" 
    [void][Reflection.Assembly]::LoadWithPartialName('System.Drawing');
    $PathWin = '{pathWin}';
    $image = [System.Drawing.Image]::FromFile($pathWin);

    $image.RotateFlip('Rotate90FlipNone');
    foreach ($propertyId in $image.PropertyIdList) {
        $image.RemovePropertyItem($propertyId);
    }
    $image.Save($pathWin, [System.Drawing.Imaging.ImageFormat]::Jpeg);
    $image.Dispose();
    \""
]; 
Substitute($ps; "{pathWin}"; $pathWin)
)
</pre>
<p>画像の回転に関するPowerShellのコマンドは以下のページが参考になりました。</p>
<?php mShot("https://qiita.com/miyamiya/items/d1a975fb6618d46eda0c",2);?>
<p>&nbsp;</p>
<h3 id="h3_section1">削除するEXIF情報について</h3>
<p>上記のスクリプトでは画像ファイルのEXIF情報をすべて削除します。「向き（Orientation）」に関する情報のみをEXIFから削除することもできます。</p>
<h4 id="h4_section1">EXIF情報を削除する部分</h4>
<pre class="brush:ps;">
foreach ($propertyId in $image.PropertyIdList) {
    $image.RemovePropertyItem($propertyId);
}
</pre>
<h4 id="h4_section1">EXIFから向きの情報のみを削除する場合</h4>
<p>上記の部分を以下に置き換えればOKです。これでもうまくいきました。</p>
<pre class="brush:ps;">
$image.RemovePropertyItem(274)
</pre>
<p>EXIFに含まれるタグの種類は以下のページが参考になります。向きの情報である「Orientation」のタグ番号は16進数の<code>0x0112</code>であり、10進数に変換すると<code>274</code>になります。</p>
<?php mShot("https://www.vieas.com/exif23.html",1);?>
<?php mShot("https://exiftool.org/TagNames/EXIF.html",1);?>
<p>&nbsp;</p>
<h2 id="h2_section1">まとめ</h2>
<p>ファイルメーカーからPowerShellにコマンドを送信したり、変数の受け渡しができることを初めて知りました。また、PowerShellで画像の編集ができることも知りませんでした。解決不可能と思っていたことが無事に解決できて良かったです。</p>]]>
    </content>
</entry>

<entry>
    <title>【JS】ブラウザの表示領域の縦横比を計算</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2024/04/js-browser-display-area.php" />
    <id>tag:qwerty.work,2024:/blog//1.1239</id>

    <published>2024-04-25T13:52:36Z</published>
    <updated>2025-04-21T23:10:25Z</updated>

    <summary>ブラウザ表示領域のサイズと縦横比 現在のブラウザ表示領域            ...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="Javascript" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="javascript" label="Javascript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="js" label="JS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ブラウザ" label="ブラウザ" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="判別" label="判別" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="表示領域" label="表示領域" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="解像度" label="解像度" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="解析" label="解析" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="計算" label="計算" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="調査" label="調査" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<h2 id="h2_section1">ブラウザ表示領域のサイズと縦横比</h2>
<h3 id="h3_section1">現在のブラウザ表示領域</h3>
<!-- スクリプト -->
  <ul>
    <li id="size"></li>
    <li id="aspectRatio"></li>
    <li id="aspectRatioFraction"></li>
  </ul>

  <script>
    var width = window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;

    var height = window.innerHeight
      || document.documentElement.clientHeight
      || document.body.clientHeight;

    var aspectRatio = width + ":" + height;
    var aspectRatioFraction = width / height;

    document.getElementById("size").textContent = "Width: " + width + ", Height: " + height;
    document.getElementById("aspectRatio").textContent = "Aspect Ratio (width:height): " + width + ":" + height;
    document.getElementById("aspectRatioFraction").textContent = "Aspect Ratio (width/height): " + aspectRatioFraction.toFixed(2); // 2桁までの小数点以下の数字を表示
  </script>
<!--/スクリプト -->]]>
        <![CDATA[<h2 id="h2_section1">スクリプト</h2>
<pre class="brush:js">
&lt;h2&gt;ブラウザ表示領域のサイズと縦横比&lt;/h2&gt;
  &lt;ul&gt;
    &lt;li id=&quot;size&quot;&gt;&lt;/li&gt;
    &lt;li id=&quot;aspectRatio&quot;&gt;&lt;/li&gt;
    &lt;li id=&quot;aspectRatioFraction&quot;&gt;&lt;/li&gt;
  &lt;/ul&gt;

 &lt;script&gt;
  var width = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
  var height = window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;
  var aspectRatio = width + &quot;:&quot; + height;
  var aspectRatioFraction = width / height;

  document.getElementById(&quot;size&quot;).textContent = &quot;Width: &quot; + width + &quot;, Height: &quot; + height;
  document.getElementById(&quot;aspectRatio&quot;).textContent = &quot;Aspect Ratio (width:height): &quot; + width + &quot;:&quot; + height;
  document.getElementById(&quot;aspectRatioFraction&quot;).textContent = &quot;Aspect Ratio (width/height): &quot; + aspectRatioFraction.toFixed(2); // 2桁までの小数点以下の数字を表示
 &lt;/script&gt;
</pre>]]>
    </content>
</entry>

<entry>
    <title>【WebDAV】Windows10のエクスプローラーからの接続に失敗するとき</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2024/03/webdav-windows10-error.php" />
    <id>tag:qwerty.work,2024:/blog//1.1238</id>

    <published>2024-03-19T14:52:24Z</published>
    <updated>2024-03-20T16:10:37Z</updated>

    <summary>レンタルサーバーのMixhostでWebDAVを使用していますが、フリーソフトの...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="WEB" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="carotdav" label="CarotDAV" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="webdav" label="WebDAV" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="webdisk" label="WebDisk" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ウェブディスク" label="ウェブディスク" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ウェブドライブ" label="ウェブドライブ" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="クラウド" label="クラウド" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<p>レンタルサーバーのMixhostでWebDAVを使用していますが、フリーソフトの<a href="http://rei.to/carotdav.html" target="_blank">CarotDAV</a>からの接続は問題ないのですが、エクスプローラーから接続する際に問題が発生します。エクスプローラーから接続設定を行い、最初の接続は問題なく使えるのですが、再起動した２回目からはエラーになり、ミックスホストのコントロールパネルに入れなくなりました。しかも、メールの送受信までできなくなりました。こうなると<a href="http://rei.to/carotdav.html" target="_blank">CarotDAV</a>からもWebDAVのフォルダを開けなくなります。</p>
<p>これはミックスホストのサーバーがLightspeedだから？？</p>
<p><img src="/loading.gif" data-echo="/blog/2024/03/19/No-00.jpg" width="700" height="404" alt="" loading="lazy"/></p>
<h2 id="h2_section1">いろいろ試したこと</h2>
<h3 id="h3_section1">webclientの再起動</h3>
<p>Windowsのサービス「webclient」を再起動を以下のコマンドで行います。試しましたがダメでした。</p>
<pre class="brush:text;">
net stop webclient
net start webclient
</pre>
<p><?php mShot("https://learn.microsoft.com/ja-jp/troubleshoot/windows-client/networking/cannot-access-webdav-web-folder",2)?></p>
<h3 id="h3_section1">サービス「webclient」を自動実行に変更</h3>
<p><img src="/loading.gif" data-echo="/blog/2024/03/19/No-02.jpg" width="556" height="260" alt=""loading="lazy"/></p>
<p>以下のページに、同様の症状と回避方法が掲載されていました。試しましたが関係ありませんでした。</p>
<p><?php mShot("https://qiita.com/S_Katz/items/8b68bcd3dfc32ca2f033",2)?></p>
<h3 id="h3_section1">レジストリを変更してみる</h3>
<p>以下のレジストリを「1」から「2」に変更し、パソコンを再起動しましたが、改善されませんでした。</p>
<p><img src="/loading.gif" data-echo="/blog/2024/03/19/No-01.jpg" width="700" height="420" alt="" loading="lazy"/></p>
<pre class="brush:text;">HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\WebClient\Parameters</pre>
<p>ここにある</p>
<pre class="brush:text;">BasicAuthLevel</pre>
<p>の値を「2」に変更する。</p>
<p><?php mShot("https://docs.qnap.com/operating-system/qts/5.0.x/ja-jp/windows%E3%81%A7%E3%81%AEwebdav%E6%8E%A5%E7%B6%9A%E9%9A%9C%E5%AE%B3%E3%81%AE%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E3%82%B7%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0-E2E99FD6.html",2)?>
<?php mShot("https://kb.seeck.jp/archives/16018",2)?></p>
<h2 id="h2_section1">もしかしてExplorerから接続しないほうがよい？</h2>
<p>以下の参考ページは次の記載がありました。WindowsOSではExplorerより、WebDAVクライアントソフトを使うほうがいいみたいです。こりゃ困ったな。</p>
<blockquote>Windows OS では、OS 側の WebDAV の実装が不十分なため、操作が不安定になる場合があります。また、異なるOSや異なるクライアントソフトでファイル共有を行うと、OSやクライアントソフトの相性により不具合が発生する可能性があります。複数の端末でファイル共有を行う場合は、共通のWebDAVクライアントソフトを利用することをおすすめしています。</blockquote>
<p><?php mShot("https://support.kagoya.jp/kir/manual/webdav/win10/index.html",2)?></p>
<h3 id="h3_section1">Windowsでwebclientは非推奨になったらしい</h3>
<p>2023年11月にwebclientサービスは使えるけど、非推奨になったらしい。</p>
<p><?php mShot("https://learn.microsoft.com/ja-jp/windows/whats-new/deprecated-features",2)?></p>
<h2 id="h2_section1">CarotDAVのDAV Server機能が使えるかも？</h2>
<p>フリーソフトの<a herf="http://rei.to/carotdav.html" target="_blank">CarotDAV</a>にあるDAVサーバー機能で、このDAVサーバーを経由してエクスプローラーから接続すれば解決かも？<a href="http://rei.to/carotdav.html" target="_blank">CarotDAV</a>に登録してあるWEBドライブをまとめてエクスプローラーから操作できるようです。</p>
<p><?php mShot("http://wasure.net/carotdav-mount/",2)?></p>
]]>
        <![CDATA[<h2 id="h2_section1">その他</h2>
<h3 id="h3_section1">ファイルサイズ、タイムアウト時間の設定</h3>
<p><?php mShot("https://senooken.jp/post/2021/08/14/5638/",2)?></p>]]>
    </content>
</entry>

<entry>
    <title>【WIX】独自ドメイン接続が48時間待っても失敗するとき</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2024/03/wix-domain-connect-48hours.php" />
    <id>tag:qwerty.work,2024:/blog//1.1237</id>

    <published>2024-03-14T22:34:04Z</published>
    <updated>2024-03-14T23:11:00Z</updated>

    <summary>サイトオーナーじゃないとドメイン接続がコケる 結論から言うと、ドメイン接続の実行...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="WIX" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="cms" label="CMS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="dnsレコード" label="DNSレコード" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="wix" label="WIX" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ドメイン接続" label="ドメイン接続" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="失敗" label="失敗" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="権限" label="権限" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="独自ドメイン" label="独自ドメイン" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<h2 id="h2_section1">サイトオーナーじゃないとドメイン接続がコケる</h2>
<p>結論から言うと、ドメイン接続の実行は権限が「サイトオーナー」じゃなかったら48時間待っても失敗し、エラー画面が表示されます。</p>
<p>今回、お客様のサイトを<a herf="https://ja.wix.com/" target="_blank">WIX</a>で制作し、既に取得済みのドメインに、<strong>ポインティング方式</strong>で<strong>「管理者（共同所有者）」</strong>の権限でドメイン接続の実行を３回（１週間）くらい行ない、何度接続にチャレンジしても、<strong>「ドメインチェック」</strong>のステータスから進むことができず、ドメイン接続に失敗しました。</p>
<p>お客様の環境が、別に独自ドメインで運用しているメールサーバーがあり、ポインティング方式を選択しました。DNSレコードの設定を見直したり、SSLサーバー証明書関連を調べたりしましたが、時間を浪費するばかりで解決の糸口が見当たりませんでした。そこで、<a herf="https://ja.wix.com/" target="_blank">WIX</a>のカスタマーケアに問い合わせをしたところ、権限の問題であることを教えてもらえ、<strong>「サイトオーナー」</strong>権限のあるユーザーからドメイン接続を行ったところ、あっさり接続できました。</p>
<h2 id="h2_section1">各権限の違い</h2>
<p><strong>管理者（共同所有者）</strong>では独自ドメインの接続ができないことは、以下のWIXのサポートサイトにも記載がありました。</p>
<p><?php mShot("https://support.wix.com/ja/article/%E5%BD%B9%E5%89%B2%E3%83%BB%E6%A8%A9%E9%99%90%EF%BC%9A%E6%A6%82%E8%A6%81",2);?></p>
<p>以下のページでは「共同管理者が所有するドメインとの接続」ができないとの記載があります。私のケースですと、サイトオーナーとは別に、私を含めて「管理者（共同所有者）」が２名いました。「管理者（共同所有者）」が１人ならドメイン接続が成功したのかは、わかりません。</p>
<p><?php mShot("https://support.wix.com/ja/article/%E5%BD%B9%E5%89%B2%E3%83%BB%E6%A8%A9%E9%99%90%EF%BC%9A%E3%82%B5%E3%82%A4%E3%83%88%E5%85%B1%E5%90%8C%E7%AE%A1%E7%90%86%E8%80%85%E5%90%91%E3%81%91%E6%83%85%E5%A0%B1",2);?></p>
<h2 id="h2_section1">まとめ</h2>
<p>解決できたので良かったのですが、ドメイン接続の権限がないのなら、設定できないようにするとか、「あなたには権限がありません」とか、もっとわかりやすくして欲しいなと感じました。てっきり、DNSレコードの設定が悪いのかな？それとも、バックグラウンドでSSLサーバー証明書の発行が失敗しているのかな？とか、いろいろ調べるなど、かなり調査で時間を浪費しました。</p>]]>
        
    </content>
</entry>

<entry>
    <title>自動見積を自作したいときに使えるツール</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2023/12/js-automatic-quote-form.php" />
    <id>tag:qwerty.work,2023:/blog//1.1236</id>

    <published>2023-12-12T04:14:18Z</published>
    <updated>2023-12-12T04:28:57Z</updated>

    <summary>GUIで項目を設置したらコードを出力してくれるサイト 普通のJavascript...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="Javascript" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="form" label="Form" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="javascript" label="Javascript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="js" label="JS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="フォーム" label="フォーム" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="自作" label="自作" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="自動見積" label="自動見積" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<h2 id="h2_section1">GUIで項目を設置したらコードを出力してくれるサイト</h2>
<p>普通のJavascriptとHTML/CSSを出力してくれる。</p>
<p>
  <?php mShot("https://www.mitsumori-js.com/",2);?>
</p>
<h2 id="h2_section1">Vue.jsをベースにしたサンプル</h2>
<p>
  <?php mShot("https://study.katsumaru.blog/vue/quote.php",2);?>
</p>]]>
        
    </content>
</entry>

<entry>
    <title>ヘッドレスCMS、SPA、SSR、SSGについてメモ</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2023/12/memo-headless-cms.php" />
    <id>tag:qwerty.work,2023:/blog//1.1235</id>

    <published>2023-12-09T00:46:03Z</published>
    <updated>2023-12-20T06:28:46Z</updated>

    <summary>最近、「ヘッドレスCMS」というのをよく聞きますが、どういったもので、何が必要な...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="WEB" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="ヘッドレスcms" label="ヘッドレスCMS" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<p>最近、「ヘッドレスCMS」というのをよく聞きますが、どういったもので、何が必要なのかを忘れないためにメモ。</p>
<h2 id="h2_section1">ヘッドレスCMSってどんなもの？</h2>
<p>ヘッドレスCMSは通常のCMSとは異なり、フロントエンドとバックエンドが完全に切り離されていて、CMSの仕組みにとらわれず開発できます。また、表示速度が速い、CMS機能を後付けできるといったメリットがあります。</p>
<p>Wordpressなど、サーバー側で動的に処理して表示させるものとは違い、動的なページを予め静的なページで吐き出します。静的なサイトの読み込みとなるため表示が高速になるそうです。更にCDNにキャッシュさせて配信すると更に速くなるかも？解釈が違っていたらごめんなさい。</p>
<p>
  <?php mShot("https://bluemonkey.jp/media/column/Headless_CMS",2);?>
</p>
<p>その中でおすすめの構成が以下のページに書かれていました。</p>
<p>
  <?php mShot("https://www.synergate.co.jp/blog/headless-wordpress-speed/",2);?>
</p>
<h2 id="h2_section1">何が必要？</h2>
<p>ヘッドレスCMSを制作するには、幾つかの方法と組合せがあるようですが、「ジャムスタック構成」（Jamstack構成）と呼ばれるものが良いみたいです。</p>
<p>
  <?php mShot("https://jamstack-sg.com/",2);?>
</p>
<p>使用するのは以下の3つが相性がいいとのこと。</p>
<ul>
  <li>SSG（静的サイトジェネレーター）... <a href="https://www.gatsbyjs.com/" target="_blank">Gatsby.js</a></li>
  <li>ホスティングサービス ... <a href="https://pages.cloudflare.com/" target="_blank">Cloudflare Pages</a></li>
  <li>ヘッドレスCMS ... <a href="https://microcms.io/" target="_blank">microCMS</a></li>
</ul>
<p>Gatsby.jsはReactで作られた静的サイトジェネレーター。</p>
<p>
  <?php mShot("https://qiita.com/manabito76/items/fe91eefe11a74dcf5126",2);?>
</p>

]]>
        <![CDATA[<h2 id="h2_section1">GatsbyよりもAstro.jsかも</h2>
<p>以下のページによると、Gatsbyはブラックボックスになりやすいとのこと。まだ、Gatsbyでサイトを作ったことがなく、作り方もチンプンカンプンな私のレベルでは、Gatsbyは敷居が高くて手を出すのに躊躇しています。その次にNext.jsを検討しているのですが、これも使ったことのないReact製フレームワークで、Reactを書かなければならないとなるとちょっと...という感じです。</p>
<p>
  <?php mShot("https://scr.marketing-wizard.biz/utilities/post-wordpress-alternarive-headlesscms",2);?>
</p>
<p>しかし、<a href="https://astro.build/" target="_blank">Astro.js</a>ならHTML/CSSをそのまま書けば良さそうなので、SSGができて普通に書けばいいとなるとストレスは相当低くなりそうです。</p>
<p>
  <?php mShot("https://astro.build/",2);?>
</p>
<p>よって、以下の構成がいいかも？</p>
<ul>
  <li>SSG（静的サイトジェネレーター）... <a href="https://astro.build/" target="_blank">Astro.js</a></li>
  <li>ホスティングサービス ... <a href="https://pages.cloudflare.com/" target="_blank">Cloudflare Pages</a></li>
  <li>ヘッドレスCMS ... <a href="https://microcms.io/" target="_blank">microCMS</a></li>
</ul>
<h2 id="h2_section1">その他参考</h2>
<p>
  <?php mShot("https://qiita.com/hppRC/items/b22e8426d021938601fd",2);?>
  <?php mShot("https://www.ragate.co.jp/blog/articles/16888",2);?>
</p>]]>
    </content>
</entry>

<entry>
    <title>【STUDIO】カルーセルのスライドショーをふわっとフェードイン・フェードアウトさせる方法</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2023/09/studio-carousel.php" />
    <id>tag:qwerty.work,2023:/blog//1.1234</id>

    <published>2023-09-27T00:38:39Z</published>
    <updated>2023-12-01T06:53:18Z</updated>

    <summary>カルーセルの画像の入れ替え方法を変更したい STUDIOのカルーセルの写真入替の...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="STUDIO" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="studio" label="STUDIO" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="カルーセル" label="カルーセル" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="スライドショー" label="スライドショー" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="フェードアウト" label="フェードアウト" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="フェードイン" label="フェードイン" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<h2 id="h2_section1">カルーセルの画像の入れ替え方法を変更したい</h2>
<p>STUDIOのカルーセルの写真入替の動きに疑問がでてきました。画像が入れ替わる際に画面がちらついて、シックで上品、落ち着いた雰囲気のサイトを作るときにチラつきが気になります。</p>
<ul>
<li>スライドの方向は左→右の一択しかないのかな？</li>
<li>カクカクする挙動を滑らかでスムーズな動きにできない？</li>
</ul>
<p>そこで、ふわっとフェードイン・フェードアウトで入れえる方法がありました。ただ、この通りにしてもうまくいきませんでしたが、今後の参考としてメモしておきます。</p>
<?php mShot("https://studio.galera.co.jp/blog/eOddb9My",2);?>
<?php mShot("https://note.com/youile3/n/n3cecc06c00f4",2);?>
<?php mShot("https://studio.re-d.jp/journal/20230406/459/",2);?>
<?php mShot("https://spicato.com/blog/12/0411denblog/",2);?>]]>
        
    </content>
</entry>

<entry>
    <title>製造業向けのWordpressテンプレートメモ</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2023/08/wordpress-template.php" />
    <id>tag:qwerty.work,2023:/blog//1.1233</id>

    <published>2023-08-17T04:11:58Z</published>
    <updated>2023-08-17T06:13:32Z</updated>

    <summary>製造業のサイトをサイトを制作することになり、お知らせの投稿が必要になることからC...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="WordPress（WP)" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="lp" label="LP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="lpサイト" label="LPサイト" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="wordpress" label="Wordpress" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="シングルページ" label="シングルページ" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="テンプレ" label="テンプレ" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="テンプレート" label="テンプレート" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ペライチ" label="ペライチ" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ランディングページ" label="ランディングページ" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ワードプレス" label="ワードプレス" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="製造業" label="製造業" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<p>製造業のサイトをサイトを制作することになり、お知らせの投稿が必要になることからCMSはWordpressを使うことになったものの、どのテンプレートを使えばいいか悩んだので、良さそうな物とピックアップ。</p>
<h2 id="h2_section1">シングルページ・ランディングページ（LP）向け</h2>
<h3 class="pagetitle entry-title" itemprop="headline" id="h3_section13">Minimal Cafe</h3>
<p>シングルページだけどお知らせを投稿する機能が欲しいといったシンプルなサイト向け</p>
<p>価格：9,999円（税込み）</p>
<p><?php mShot("https://minimalwp.com/24812/",2);?></p>
<h3 class="pagetitle entry-title" itemprop="headline" id="h3_section13">My Song</h3>
<p>シングルページだけどお知らせを投稿する機能が欲しいといったシンプルなサイト向け</p>
<p>価格：9,999円（税込み）</p>
<p><?php mShot("https://minimalwp.com/15689/",2);?></p>]]>
        <![CDATA[<h2 id="h2_section1">製造業向けテンプレート</h2>
<h3 id="h3_section1">New Standard</h3>
<p>New Standardは、株式会社ninoyaが販売しているWordPressテンプレート。
Web集客をふまえた機能が豊富でありながら、誰もが直観的な操作で運用できるよう考えてつくられています。サイトの立ち上げから見込み顧客の獲得までカバーできるのが特徴です。LPサイトの制作できます。</p>
<p>価格：29,700円（税込み）</p>
<p><?php mShot("https://newstd.net/",2);?></p>
<h3 id="h3_section1">TCD065 NANO</h3>
<p>中堅・大企業・BtoB向けコーポレートサイト用WordPressテーマ</p>
<p>価格：34,800円（税込み）</p>
<p><?php mShot("https://tcd-theme.com/tcd065",2);?></p>
<h3 id="h3_section1">Lightning</h3>
<p>Lightningは、株式会社ベクトルが配布しているWordPressテンプレートです。
シンプルでカスタマイズしやすいデザインになっています。ブログにも対応していますが、多機能プラグイン「<strong class="marker">ExUnit</strong>」を併用することで、ビジネスサイトとして十分な機能を備えることもできます。</p>
<p>価格：無料（有料版もある）</p>
<p><?php mShot("https://lightning.vektor-inc.co.jp/",2);?></p>
<h3 id="h3_section1">Business Press</h3>
<p>Business Pressは、WordPressテーマデザイナーの内海隆雄氏が配布しているテンプレート。
シンプルで美しいビジネスサイトを目指して作られています。個人をはじめ、団体や中小企業など幅広いジャンルの内容でつくることが可能です。基本的なカスタマイズができるほか、日本語が美しく見えるよう調整されています。</p>
<p>価格：無料</p>
<p><?php mShot("https://businesspress.jp/",2);?></p>
<h3 id="h3_section1">Business Press</h3>
<p>sotypeは、Frontline Marketing Japan株式会社が販売しているWordPress。
日本語テンプレートにとことんこだわり、日本語Webフォント「Google NotoSans」を軽量化して実装しています。なかでも一番人気なのは、「MAJESTIC+」。シンプルなデザインながらも強烈なインパクトでユーザーをサイトに引き込みます。</p>
<p>価格：14,700～27,000円（税込み）</p>
<p><?php mShot("https://isotype.blue/",2);?></p>
<h3 id="h3_section1">isotype</h3>
<p>isotypeは、Frontline Marketing Japan株式会社が販売しているWordPress。
日本語テンプレートにとことんこだわり、日本語Webフォント「Google NotoSans」を軽量化して実装しています。なかでも一番人気なのは、「MAJESTIC+」。シンプルなデザインながらも強烈なインパクトでユーザーをサイトに引き込みます。</p>
<p>価格：14,700～27,000円（税込み）</p>
<p><?php mShot("https://isotype.blue/",2);?></p>
<h2 id="h2_section1">テンプレート販売サイト「WebStock」にあるテンプレート</h2>
<h3 id="h3_section1">TEKMOS</h3>
<p>トップページ、企業情報、代表挨拶、会社概要、商品紹介、お知らせ、お知らせ詳細、採用情報、お問い合わせ、サンクスページなど、10ページ程度のコーポレートサイト向き</p>
<p>価格：69,300円（税込み）</p>
<p><?php mShot("https://nbc-webstock.com/product/w1001/",2);?></p>
<h3 id="h3_section1">MI Partners</h3>
<p>トップページ、お知らせ、お知らせ詳細、事業内容、代表挨拶、会社情報、お問い合わせ、サンクスページ、プライバシーポリシー、マップなど、9ページ程度のコーポレートサイト向き</p>
<p>価格：108,900円（税込み）</p>
<p><?php mShot("https://nbc-webstock.com/product/w0901/",2);?></p>
]]>
    </content>
</entry>

<entry>
    <title>CloudFlareを使ったサイトのcPanelでDNS DCVエラーに対処</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2023/05/cloudflare-cpanel-dns-dcv.php" />
    <id>tag:qwerty.work,2023:/blog//1.1232</id>

    <published>2023-05-08T10:56:40Z</published>
    <updated>2023-08-01T12:07:33Z</updated>

    <summary>発端はcPanelからのエラーメール レンタルサーバーはミックスホストを利用して...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="Mixhost" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="SSL/TLS" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="レンタルサーバー" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="autossl" label="AutoSSL" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="cloudflare" label="CloudFlare" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="cpanel" label="cPanel" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="dcv" label="DCV" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="dns" label="DNS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="mixhost" label="Mixhost" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="エラー" label="エラー" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="クラウドフレア" label="クラウドフレア" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ミックスホスト" label="ミックスホスト" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="レンタルサーバー" label="レンタルサーバー" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<h2 id="h2_section1">発端はcPanelからのエラーメール</h2>
<p>レンタルサーバーはミックスホストを利用しています。このレンタルサーバー上で、複数のサイトを公開しています。その中で、いくつか表示を高速化させる目的で無料で使えるCDNのCloudFlareを使用しています。CloudFlareを使用しているドメインを対象にミックスホストのコントールパネルであるcPanelから、以下のメールが届きました。</p>
<p><img src="/loading.gif" data-echo="/blog/2023/05/08/No-05.jpg" width="700" height="617" alt="cPanelからのエラーメール" loading="lazy"/></p>
<blockquote>DNS DCV: No local authority: "cpanel.example.com"; HTTP DCV: "cpanel.example.com" does not resolve to any IP addresses on the internet.<br>
  <br>
DNS DCV: ローカルオーソリティがありません： &quot;cpanel.example.com&quot;; HTTP DCV: &quot;cpanel.example.com&quot; は、インターネット上のどの IP アドレスにも解決しません。</blockquote>
<p>内容としては、<strong class="marker">AutoSSLでサーバー証明書を更新するために必要な</strong><strong class="marker">ドメイン認証ができなかった</strong>ということでした。</p>
<p>この時点で、何かしらの設定をcPanel側かCloudFlare側のどちらにすればいいのか？初めてのことでチンプンカンプンでした。しかし、このまま放っておくと、サーバー証明書の期限が切れて面倒なことになると嫌だなと対処することにしました。</p>
<h2 id="h2_section1">一時的にCloudFlareを無効化してからAutoSSLを更新</h2>
<p>海外のサイトにヒントがありました。</p>
<p>
  <?php mShot("https://www.liquidweb.com/kb/how-to-repair-the-dns-dcv-error-in-cpanel/",1);?>
</p>
<p>日本語訳にしたこのページによると、この問題を解決するには、以下の4つが候補とありました。</p>
<ol>
  <li>スタンドアロンのSSL証明書を購入する</li>
  <li>cPanelのAutoSSLをオフにして、CloudflareのSSLのみを使う</li>
  <li>CloudflareのSSLはなしで、cPanelのAutoSSLのみを使う</li>
  <li>Cloudflareを一時的に停止してから、AutoSSLの証明書を更新する</li>
</ol>
<p>私はどちらのSSLも有効なまま使用したいので、<strong class="marker">迷わず4番を実行する</strong>ことにしました。</p>
<h3 id="h3_section1">手順</h3>
<p>1.CloudFlareにログインして、対象のドメインを選択</p>
<p>2.「Overview」メニューを選択し、ページ右下の「Advanced Action」にある<strong>「Pause Cloudflare on Site」</strong>をクリック</p>
<p><img src="/loading.gif" data-echo="/blog/2023/05/08/No-140.jpg" width="700" height="419" alt="「Overview」メニューを選択し、ページ右下の「Advanced Action」にある「Pause Cloudflare on Site」をクリック" loading="lazy"/></p>
<p>3.<strong>「Confirm」</strong>をクリック</p>
<p><img src="/loading.gif" data-echo="/blog/2023/05/08/No-141.jpg" width="522" height="398" alt="「Confirm」をクリック" loading="lazy"/></p>
<p>4.MixhostのcPanelの「SSL/TLS Status」を開き、<strong>「Run AutoSSL」</strong>ボタンをクリック</p>
<p><img src="/loading.gif" data-echo="/blog/2023/05/08/No-138.jpg" width="700" height="427" alt="MixhostのcPanelの「SSL/TLS Status」を開き、「Run AutoSSL」ボタンをクリック" loading="lazy"/></p>
<p>5.処理が終わるまで数分待ちます</p>
<p><img src="/loading.gif" data-echo="/blog/2023/05/08/No-00.jpg" width="700" height="160" alt="「Run AutoSSL」の処理中" loading="lazy"/></p>
<p>6.するとエラーが消え更新完了となります</p>
<p><img src="/loading.gif" data-echo="/blog/2023/05/08/No-142.jpg" width="700" height="502" alt="AutoSSLのドメイン認証が完了" loading="lazy"/></p>
<p>7.最後に、Cloudflareに戻り、「Overview」メニューを選択し、ページ右下の「Advanced Action」にある<strong>「Enable Cloudflare on Site」</strong>をクリックして有効化</p>
<p><img src="/loading.gif" data-echo="/blog/2023/05/08/No-143.jpg" width="700" height="384" alt="Cloudflareに戻り、「Overview」メニューを選択し、ページ右下の「Advanced Action」にある「Enable Cloudflare on Site」をクリックして有効化" loading="lazy"/></p>
<p>以上。</p>
<h2 id="h2_section1">エラーが残ったままになる場合</h2>
<p>cPanelの「SSL/TLS Status」の画面でエラーが一部残ったままになる場合は、CloudflareのDNSに<strong>CNAME</strong>または<strong>Aレコード</strong>の登録が不足しているのが原因かと思われます。特にサブドメインのURLです。私はこのパターンでした。以下のようにレコードを追加して、再度<strong>「Run AutoSSL」</strong>を行ってみてください。解消されるはずです。</p>
<h3 id="h3_section1">CNAMEを追加した例</h3>
<p>CloudflareのDNS Recordsにサブドメイン名とFQDN（対象ドメイン）を追加</p>
<p><img src="/loading.gif" data-echo="/blog/2023/05/08/No-144.jpg" width="700" height="470" alt="CloudflareのDNS Recordsの画面にCNAMEを追加" loading="lazy"/></p>
<h3 id="h3_section1">Aレコードを追加した例</h3>
<p>CloudflareのDNS Recordsにサブドメイン名とレンタルサーバー（Mixhost）のIPアドレスを追加</p>
<p><img src="/loading.gif" data-echo="/blog/2023/05/08/No-145.jpg" width="700" height="470" alt="CloudflareのDNS Recordsの画面にAレコードを追加" loading="lazy"/></p>
<p>この事に繋がるヒントが以下のページにありました。</p>
<p>
  <?php mShot("https://define.co.jp/ssl/certificate-generation-process/domain-control-validation#vk-htags-dfb56e88-98c0-4aac-ba09-32e85145aaaa",1);?>
</p>

]]>
        <![CDATA[<h2 id="h2_section1">まとめ</h2>
<p>今回のエラーはDNSに対してCNAMEによるドメイン認証、またはhttp通信でコモンネーム（FQDN）をCSRを元に作成したハッシュ値をファイル名にしたテキストファイル（http(s)://ドメイン/.well-known/pki-validation/ハッシュ値.txt）をサイト上で確認したかったが、それをクラウドフレアが邪魔しているといった話のようです。AutoSSLは3ヶ月に一度、サーバー証明書が自動更新される仕組みなので、3か月後もこの作業をしなければならないかもしれません。</p>
<h2 id="h2_section1">今度試してみたいこと（その1）</h2>
<p>後からの気づきですが、3ヶ月に1回この作業をするのも面倒なので、Cloudflareに設定を追加して今回のドメイン認証エラーを回避することができるのではないかと思いました。</p>
<p>例えば、</p>
<ul>
<li><code>/.well-known/pki-validation</code>の階層では「キャッシュを無視（スキップ）」、「SSLオフ」、「アプリの無効化」など、考えられるいずれかのルールを追加する</li>
<li>【効果なし】DNS Recordsにあるドメインを除き、サブドメインのAレコードをすべてCNAMEに変更する</li>
<li>【効果なし】DNS Recordsにあるドメインを除き、サブドメインのAレコードをすべて削除する</li>
</ul>
<p>このどれかで回避できちゃったりするのかもしれませんので、またエラーが出たときに試してみたいと思います。</p>
<p>以下のCloudflareによるDCVのページ（下の階層も含む）にもヒントがありそうです。</p>
<p>
  <?php mShot("https://developers.cloudflare.com/ssl/edge-certificates/changing-dcv-method/",1);?>
</p>
<h2 id="h2_section1">今度試してみたいこと（その2）</h2>
<p>以下のページではHTTPSへのリダイレクトが原因とありました。これも試してみたいと思います。</p>
<p>
  <?php mShot("https://interactivewebs.com/cpanel/cpanel-autossl-certificate-expiry-on-date-cloudflare-enabled-domain/",1);?>
</p>
<ul>
<li>【効果なし】Cloudflare側のHTTPSの強制をやめる</li>
<li>【効果なし】Cloudflare側の<code>/.well-known/pki-validation</code>の階層では「SSLオフ」のルールを追加する</li>
<li><code>.htaccess</code>で<code>/.well-known/pki-validation</code>階層ではhttpsに転送を除外する</li>
</ul>
<h2 id="h2_section1">今度試してみたいこと（その3）</h2>
<p>Cloudflareの<strong>［SSL/TLS］-［オリジンサーバー］-［認証済みOrigin Pull］</strong>を<strong>「オン」</strong>にしてみる。</p>
<p>AutoSSLの更新がうまくいってるドメインのサイトは、ここがONになっていました。次回エラーが出た際はこれを試してみたいと思います。</p>
<p><img src="/loading.gif" data-echo="/blog/2023/05/08/No-01.jpg" width="700" height="459" alt="Cloudflareの［SSL/TLS］-［オリジンサーバー］-［認証済みOrigin Pull］を「オン」にする" loading="lazy"/></p>]]>
    </content>
</entry>

<entry>
    <title>【Vue】ページ初回表示時にフォームのバリデーションエラーを発火させない</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2022/11/vue-Ignition-by-counter.php" />
    <id>tag:qwerty.work,2022:/blog//1.1231</id>

    <published>2022-11-27T05:33:25Z</published>
    <updated>2022-11-27T06:52:36Z</updated>

    <summary>何かしてからエラーを表示させたい ページに設置したお問い合わせフォームの入力内容...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="Vue" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="vue" label="Vue" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="エラー表示" label="エラー表示" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="カウンター" label="カウンター" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="バリデーション" label="バリデーション" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="初回" label="初回" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="発火" label="発火" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<h2 id="h2_section1">何かしてからエラーを表示させたい</h2>
<p>ページに設置したお問い合わせフォームの入力内容をチェックするバリデーションをVue.jsで作ってみたのですが、入力していないのにエラーを表示する仕様になってしまいました。ページを表示していきなり赤文字のエラーが表示されていると、正直気分が悪いです。</p>
<h2 id="h2_section1">初回表示時は発火させない方法</h2>
<p>バリデーションは<strong>computed</strong>（算出プロパティ）で実行するようにしています。<strong>methods</strong>にカウンターを作り、フォームのinputタグに<code>v-on.click=&quot;countUp&quot;</code>または<code>v-on.change=&quot;countUp&quot;</code>を加えて、フォームに入力があるとカウンターが<strong>0以上</strong>になり、computedの命令が実行されるうにIF文を入れることで解決できました。</p>
<h3 id="h3_section1">例</h3>
<h4 id="h4_section1">HTML部分</h4>
<p><span class="brush:xml;"><code>@change</code></span>は<code>v-on.change</code>と同じ意味です。</p>
<pre class="brush:xml;">
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;

&lt;div id=&quot;app&quot;&gt;
  &lt;input type=&quot;text&quot; v-model=&quot;message&quot; @change=&quot;countUp&quot;/&gt;  
  &lt;div&gt;カウント:{{count}}&lt;/div&gt;  
  &lt;div&gt;エラー:{{nameCheck}}&lt;/div&gt;  
&lt;/div&gt;
</pre>
<h4 id="h4_section1">JS部分</h4>
<pre class="brush:js;">
var app = new Vue({
  el: &quot;#app&quot;,
  data:{
    count: 0,
  },
  methods: {
    countUp: function() {
      this.count += 1
    },
  },
  computed: {
    nameCheck() {
      if(this.count > 0) {
        if(!this.message){  
          return &quot;入力がありません&quot;;
        }
      } 
    }
  },
})
</pre>
<h3 id="h3_section1">デモ</h3>
<p>入力欄の値を変更してフォーカスを外すとカウントの数が増えます。入力欄に何か文字があるとエラーが表示されませんが、入力欄を空にするとエラーが表示されます。</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <input type="text" v-model="message" @change="countUp"/>
  <div>カウント:{{count}}</div>
  <div>エラー:{{nameCheck}}</div>
</div>

<script>
var app = new Vue({
  el: "#app",
  data:{
    count: 0,
  },
  methods: {
    countUp: function() {
      this.count += 1
    },
  },
  computed: {
    nameCheck() {
      if(this.count > 0) {
        if(!this.message){  
          return "入力がありません";
           }
      } 
    }
  },
})
</script>

]]>
        <![CDATA[<h2 id="h2_section1">参考にさせていただいたページ</h2>
<p><?php mShot("https://ishidalog.com/?p=343",1);?></p>]]>
    </content>
</entry>

<entry>
    <title>【PHP】現在日時を取得すると9時間ずれるとき</title>
    <link rel="alternate" type="text/html" href="https://qwerty.work/blog/2022/11/php-timezone-setting.php" />
    <id>tag:qwerty.work,2022:/blog//1.1230</id>

    <published>2022-11-26T03:43:26Z</published>
    <updated>2022-11-27T03:01:23Z</updated>

    <summary>取得時間がずれる 以下のソースで現在の日時を取得すると、9時間前の時間が表示され...</summary>
    <author>
        <name>PostMaster</name>
        
    </author>
    
        <category term="PHP" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="9時間" label="9時間" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="php" label="PHP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="タイムゾーン" label="タイムゾーン" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="修正" label="修正" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="取得" label="取得" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="現在日時" label="現在日時" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="設定" label="設定" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="調整" label="調整" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="https://qwerty.work/blog/">
        <![CDATA[<h2 id="h2_section1">取得時間がずれる</h2>
<p>以下のソースで現在の日時を取得すると、9時間前の時間が表示されることがありました。これを修正する方法をメモ。</p>
<pre class="brush:php;">
date( "Y/m/d (D) H:i:s", time() )
</pre>
<p>上記を実行した結果↓ これが9時間前の時間だったらこのページを公開しているレンタルサーバーのタイムゾーンがずれていることになります。</p>
<table class="pure-table pure-table-bordered">
  <thead>
    <tr>
      <td>取得した現在日時</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><?php echo date( "Y/m/d (D) H:i:s", time() );?></td>
    </tr>
  </tbody>
</table>
<p>現在のデフォルトタイムゾーンは以下のコードで取得できます。これで結果が「Asia/Tokyo」ではなく、「UTC」と返ってきた場合はタイムゾーンが設定されていないことになり、日本（東京）はUTC（協定世界時）から+9時間の地域なので、タイムゾーンが設定されていないため-9時間のズレを発生させている原因になっていると思います。</p>
<pre class="brush:php;">
echo date_default_timezone_get();
</pre>
<table class="pure-table pure-table-bordered">
  <thead>
    <tr>
      <td>取得したデフォルトタイムゾーン</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><?php echo date_default_timezone_get();?></td>
    </tr>
  </tbody>
</table>
<h2 id="h2_section1">タイムゾーンの設定方法</h2>
<h3 id="h3_section1">php.iniを設定できるとき</h3>
<p>WEBサーバの<strong>php.ini</strong>を編集することができるときは、<code>date.timezone</code>の設定を以下のようにします。</p>
<pre class="brush:php;">
date.timezone = Asia/Tokyo
</pre>
<h3 id="h3_section1">PHPのコード上で設定したいとき</h3>
<p>レンタルサーバーの制限で<strong>php.ini</strong>を編集できない場合は、PHPのソースに以下のコードを入れてやればOKです。</p>
<pre class="brush:php;">
date_default_timezone_set('Asia/Tokyo');
</pre>
<h4 id="h4_section1">設定のサンプルソース</h4>
<h4 id="h4_section1">例1</h4>
<p>デフォルトタイムゾーンが<code>Asia/Tokyo</code>ではないときに<code>date_default_timezone_set('Asia/Tokyo');</code>を実行。</p>
<pre class="brush:php;">
if(strcmp( date_default_timezone_get(), 'Asia/Tokyo' )) {
    date_default_timezone_set('Asia/Tokyo');
}
echo date("Y-m-d H:i:s");
</pre>
<h4 id="h4_section1">例2</h4>
<p>例1と同じでIF文だけで書く方法。</p>
<pre class="brush:php;">
if(date_default_timezone_get() != "Asia/Tokyo"){
    date_default_timezone_set("Asia/Tokyo");
}
echo date("Y-m-d H:i:s");
</pre>
<h4 id="h4_section1">例3</h4>
<p>デフォルトタイムゾーンとphp.iniのdate.timezoneを<code>strcmp</code>で比較して一致しないときは<code>date_default_timezone_set('Asia/Tokyo');</code>を実行。</p>
<pre class="brush:php;">
if(strcmp( date_default_timezone_get(), ini_get('date.timezone')) ) {
    date_default_timezone_set('Asia/Tokyo');
}
echo date("Y-m-d H:i:s");
</pre>
]]>
        <![CDATA[<h3 id="h3_section1">無理やり加算する方法</h3>
<p>上記のタイムゾーンの設定を行ってもずれる場合は、取得時間に9時間を加算する方法もあります。しかし、これはレンタルサーバーの設定が変わって正しい日時が表示されるようになった場合にも加算して、今度は9時間先の日時を表示することになるので、賢いやり方ではありません。</p>
<pre class="brush:php;">
$now_date = date('Y-m-d H:i:s', strtotime('+9hour'));
</pre>
]]>
    </content>
</entry>

</feed>