<p>ドメインのwwwあり／なしを統一するためには、DNS設定にてWebサーバを指定し、Webサーバ内の.htaccessファイルなどで転送先を指定することが多いです（私調べ）<br><strong>Google Domains&nbsp;は、ドメインサービス単体で wwwあり／なしを統一できます</strong>ので、特にSTUDIOなどのhtaccess設定が行えないサーバを利用する際には重宝します。<br>さっそく、その方法をご紹介します。<br><br>今回は、<strong>wwwありのアドレスをwwwなしに転送</strong>してみます。<br>※すでにwwwなしでは常時SSLでウェブサイトに繋がるように設定済の状態です</p>

<h2 id="h9d3a2bd697">ドメイン設定画面を開く</h2><p><a href="https://domains.google/intl/ja_jp/" target="_blank" rel="noopener noreferrer">Google Domains</a> にログインし、「マイドメイン」から、転送設定したいドメインを選びます。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/a876cc4253a14dedabe97216f2c71c40/google-domains-select1.png?w=622&amp;h=321" alt="" width="622" height="321"></p>

<h2 id="h3cef706217">ウェブサイト設定を開く</h2><p>ウェブサイト設定を開きます。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/2731f468f104409a8f19619e8233460d/google-domains-select2.png?w=622&amp;h=395" alt="" width="622" height="395"></p>

<h2 id="h3dc90f4997">転送先を追加する</h2><p>ウェブサイト画面にて「転送先アドレスを追加」をクリックします<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/eaa68d6d8ab94f30b1982e9637fd8f9a/google-domain-transfer.png?w=622&amp;h=62" alt="" width="622" height="62"></p>

<h2 id="hb4e1968ee1">転送設定を編集する</h2><h3 id="h2290ad0562">転送元の設定</h3><p>どのサブドメインを、どこに転送したいのかを設定します。今回は、wwwありのアドレスをwwwなしに転送したいので、上段の空白の欄の右にあるゴミ箱アイコンをクリックします。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/3663106182a24a55858e0aa0c8a559dc/google-domains-transfer.png?w=622&amp;h=532" alt="" width="622" height="532"><br><br>ゴミ箱アイコンをクリックすると、このように、取り消し線がひかれた状態になります。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/518b4f21cc7545069ede87186fbdd937/google-domains-transfer2.png?w=622&amp;h=479" alt="" width="622" height="479"></p>

<h3 id="h578ee42523">転送先の設定</h3><p>次は、どこに、どのように転送したいかを設定します。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/9d58a861249447ac94cbe73068f6d874/google-domains-transfer3.png?w=622&amp;h=1022" alt="" width="622" height="1022"><br><strong>転送先には、wwwなしのURLをhttpsから入力</strong>します。URL末尾の/（スラッシュ）は不要です。<br>詳細オプションに関して、今回の目的であれば</p><ul><li>恒久的なリダイレクト</li><li>パスを転送する</li><li>SSLがオン</li></ul><p>を選択すると良いでしょう。<br><br>青い「転送」ボタンを押せば、設定完了です。</p>

<h2 id="h522c885e07">設定できたか確認する</h2><p>変更内容が反映されるまでには、最長で 48 時間ほどかかることがあります（と設定ページに記載されています）。個人の体験としては数時間後には反映されています。一晩寝て起きてチェックするぐらいでちょうど良いです。<br>ある程度時間が経ったら、wwwありのURLをブラウザで開き、設定できているかを確認します。<br>無事にwwwなしに転送されれば設定完了です！🎉</p>

Google Domains で wwwあり／なし転送する方法

<p>よく「ドメイン会社のおすすめは？」と聞かれるので、書いてみます。私の好みです。異論は認めます。個人〜小・零細企業向けです。</p>

<h2 id="hb127587345">ドメイン取得</h2><h3 id="hadea4991ad">Value Domain</h3><p><a href="https://www.value-domain.com/" target="_blank" rel="noopener noreferrer">https://www.value-domain.com/</a><br>私が持っているドメインはだいたいここで取得しています。</p><ul><li>取り扱っているトップレベルドメインの種類が多い</li><li>値段も手頃</li><li>迷惑メールを送ってこない</li><li>うそ、大げさ、紛らわしいサービスの押し付けがない</li></ul><p>老舗なので、何かわからないことがあった場合も対策を検索しやすいです。ただし、管理画面の構成はとても分かりにくいと思います。慣れるまでが大変です。</p><h3 id="h0263107ecc">Google Domains</h3><p><a href="https://domains.google/intl/ja_jp/" target="_blank" rel="noopener noreferrer">https://domains.google/intl/ja_jp/</a></p><ul><li>管理画面がスッキリわかりやすい</li><li>ドメイン転送やメールアドレス転送のサービスがある</li><li>迷惑メールを送ってこない</li><li>うそ、大げさ、紛らわしいサービスの押し付けがない</li></ul><p>近年のイチオシではありますが、取り扱っているトップレベルドメインが少なく、価格も高めなのが弱点です。</p>

<h2 id="hf3356e6f75">メール</h2><p>先に、「<strong>おすすめしない方法</strong>」を書きます。<br>それは「（１）レンタルサーバやレンタルECカートの契約時についてくるメールオプションを使う」こと、さらにそれを「（２）Gmail（gmail.com）等の無料メールサービスに転送」して普段使いにすることです。さらに（３）そのGmailアカウントを全従業員で共有していたらもう…。<br><br>（１）に関しては、レンタルサーバやカートの乗り換えをするたびに、メールアカウントも同時に移行作業が必要になるため、お勧めしません。移行が面倒だから今のサービスを使い続け、結果的に生産性が落ちて業務が滞る悪夢。同じ会社で契約するにしても、プランは分けておいた方が無難です。移り変わりの激しい現代ですから、身軽な方が良いです。<br><br>（２）既存のメールボックスが不便だからGmailやYahoo!メール等に転送してしまうのだと思いますが、このメール転送によって、転送元のサーバが迷惑メールを送信していると誤認されたり、あるいはPOP受信によってタイムラグが生じるので、お勧めしません。メールは届かなければ意味がありません。<br><br>（３）メールのパスワード共有は脆弱性を生みます。２要素認証も設定しにくくなりますし。さらに、誰かが辞めるたびにパスワード変更しなければなりません。でも、この構成でパスワード変更している組織は（私の観測範囲では）少ないです…そこから情報が漏洩したり、悪意によってデータを消されてしまうトラブルが起きます。<br><br>前置きが長くなりましたが、<strong>おすすめのメールサービスは Google Workspace</strong> です。<br>Gmail と同等以上の機能を独自ドメインで使えるほか、Google DriveやCalendarなど便利な機能が揃っています。初期設定がやや難しいこと、ログインアカウントごとに月額費用がかかるのが難点と言えば難点ですが、1ユーザあたり月額750円ほどで便利と安心（諸説あります）が手に入るなら、お買い得では。<br><strong>スマホ含むメーラーでメールを受信したい、他のサービスと連携したい、そんなときにも設定が楽</strong>なんですよ…だいたいGmail系ならメールアドレスとパスワードだけ入力して認証すれば、メールサーバのアドレスは入力しなくてOKなので。<br>さらに、メール共有返信と顧客情報管理をあわせて HubSpot を導入するのもおすすめです。無料〜始められます。<br><a href="https://www.hubspot.jp/" target="_blank" rel="noopener noreferrer">https://www.hubspot.jp/</a></p>

<h2 id="h326902b899">レンタルサーバ</h2><p>個人的にはホームページをいわゆるレンタルサーバで運用するのってもうあんまりないよなと感じていますが、強いて言えば。あったら何かと便利なこともあります。<br></p><h3 id="h724fcc0ced">コアサーバー</h3><p><a href="https://www.coreserver.jp/" target="_blank" rel="noopener noreferrer">https://www.coreserver.jp/</a><br>あまり有名ではないほうだとは思いますが、最安のCORE-Miniプランでも、静的サイトは充分早いし、WordPressもそれほどガッツリじゃなければいけます。テストサーバー（仮サイト）な用途におすすめ。お気に入り。<br></p><h3 id="hd7419b979d">エックスサーバー</h3><p><a href="https://www.xserver.ne.jp/" target="_blank" rel="noopener noreferrer">https://www.xserver.ne.jp/</a><br>大手です。サポートしっかりしてます。広告やキャンペーンが見た目にうるさいのがちょっと難点ですが、管理画面に入ってしまえば大丈夫。</p>

<h2 id="h251a067cdc">蛇足：ホームページ制作全般</h2><p>何を作るのかによりすぎますよね…。<br><br>「プロが作ってプロが更新するサイト」なら、構成も含めて相手のプロに任せるのがベストです。諸々制約が生まれるので、依頼より先にレンタルサーバ等を契約するのはおすすめしません。<br><br>「知識がなくても制作更新できるサイト」に関しては、無料で始められるものも多いので、片っ端から試してフィーリングが合うものを選んだら良いと思います。GoogleサイトでもWixでもStrikinglyでもAmeba Owndでも。<br>正直なところ、プロが作るサイトには<strong>見劣りするかもしれませんが、業種や目的によっては、見る人からすれば「それはどうでも良い」ポイントだったりもします</strong>。<br>１ページの中で、正確な営業日、営業時間、場所がわかればそれで良い、というジャンルもあるので。実店舗なら、まずGoogleマイビジネスに掲載すればそれで充分かもしれません。<br><a href="https://www.google.com/intl/ja_jp/business/" target="_blank" rel="noopener noreferrer">https://www.google.com/intl/ja_jp/business/</a><br>そして、この掲載作業ができないスキルレベル or モチベーションの場合は、自力でのホームページの制作更新は難しいように思います。<br><br>これらふたつのほかに、「プロが作って、知識がなくても更新できるサイト」があります。これが難しくて（笑）特にこのジャンルでは、<strong>どのサービスやプラットフォームを選ぶかよりも、誰が作るか、誰が更新するか</strong>の影響が大きいと思います。<br><br>制作できるプロが限られてくる点を除けば microCMSが私の「推し」ではあります。<br><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">https://microcms.io/</a><br><br>STUDIOもおすすめです（更新しやすいと私の顧客からも好評です）<br><a href="https://studio.design/ja" target="_blank" rel="noopener noreferrer">https://studio.design/ja</a><br><br>超有名なWordPressもこのジャンルですよね。定期メンテナンス契約を結ぶ前提であれば良いと思います。おすすめというよりは「これしか選択肢がないなら、これしかないよね」という立ち位置のような気がします。<br><span style="font-size: 0.75em">※WordPressはホームページを制作するためではなくブログ制作のためにあると思っています</span><br><br>並べておいてナンですが、これら３つは比較対象として比べられるものではないですね。他にも色々あるのですが、どれもが、ある人（場合）にはおすすめでもある人には全くおすすめできない、みたいなことがあるので、なんとも言い難いです。</p>

2021年版 やんわりとWeb周りのおすすめをボヤく（ドメイン・メールなど）

<p>静的サイト（Jamstack含む）にお問い合わせフォームをつけたいという要望はとても多いです。私のWebサイトにも念のためフォームを設置しています。せっかくなので、顧客管理ができるCRMの<strong>HubSpotのForm APIと連携</strong>して、フォームのデータがそのままCRMに入るようにしてみました。<br><br>私は個人事業主でほぼ紹介のみで仕事を得ているため（ありがとうございます🙏）、営業することもないのですが、顧客のためにも勉強したく、HubSpot CRMを無料の範囲で試しています。それぞれのCRMで得意なこと、できることが異なりますが、競合のSと比べて設定が手軽なことや、Zと比べるとローカライズやサポートがよい点で、たいへん好印象です😊</p>

<h2 id="h55fe10791b">HubSpot APIについて</h2><p>HubSpotはCRMとデータを連携するためのAPIを公開しています。HubSpotの契約内容によって、使えるAPIや利用上限が異なっています。Forms APIは、無料版のHubSpotでも利用でき、10秒につき100リクエストの制限がありますが、<strong>小規模なサイトであれば充分にまかなえる範囲</strong>でしょう。<br><br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/cd92ca3341314af78f6f7cece6f6ef3a/hubspot-forms-api-free.png?w=624&amp;h=358" alt="" width="624" height="358"><br><a href="https://developers.hubspot.com/apisbytier" target="_blank" rel="noopener noreferrer">API by Tires</a>より引用<br><br>Forms API は今ちょうど<a href="https://developers.hubspot.com/docs/api/marketing/forms" target="_blank" rel="noopener noreferrer">リニューアル中でbeta版</a>のようなので、今回はstable版である <a href="https://legacydocs.hubspot.com/docs/methods/forms/submit_form" target="_blank" rel="noopener noreferrer">v3のAPI</a>を利用します。<br>無料の<a href="https://developers.hubspot.com/" target="_blank" rel="noopener noreferrer">Developerアカウント</a>を作成すれば、Sandboxとして使えるテストアカウントも作成できるようになります。</p>

<h2 id="h79d85cd1e1">フォームを作成する</h2><p>まずはHubSpotでフォームを作成します。アカウント種別によってナビゲーションが異なるようですが、無料アカウントでは<strong>[マーケティング]→[フォーム]</strong>からフォームを作成できました。<br>今回は[埋め込みフォーム]を選択し、「お問い合わせ」テンプレートを選択して「開始」ボタンを押します。<br><br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/0f19438081664f68ab88ca303bcbcba2/hubspot-select-template.png?w=624&amp;h=483" alt="" width="624" height="483"><br><br><br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/21f4b4a29dd84494a808f8e65032e99a/hubspot-edit-template.png?w=624&amp;h=480" alt="" width="624" height="480"><br><br>必要であれば、適宜、項目名や必須項目の扱いなどを変更していきます。<br>[更新]→[公開]ボタンをクリックすると、フォーム埋め込みコードのモーダルが開きます。<br><br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/6c7462f8e06a4122bc4103b8e44044d3/hubspot-code.png?w=300&amp;h=453" alt="" width="300" height="453"><br><br>この画面の<strong>portalIdとformIdを後ほど使用しますので、値をメモ</strong>しておきます。</p>

<h2 id="hdb3d23accd">フォームを受信トレイと連携する</h2><p>HubSpotでは従来のメールフォーム同様にメール通知も送信できますが、受信トレイにて独立した「フォーム」エリアにも内容を表示できます。フォームで送信された内容に気づきやすくなりますので、この連携も設定しておきます。<br><br>画面上部の歯車アイコンから、<strong>受信トレイ設定</strong>を開きます。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/f602ac600b2d4284acccb1e1a9b0679c/hubspot-inbox-settings.png?w=624&amp;h=393" alt="" width="624" height="393"><br>チャネル欄にある「<strong>チャネルを接続」</strong>ボタンを押します。<br>どのチャネルを接続しますか？と尋ねられますので<strong>「フォーム」を選択</strong>します。<br><br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/f802552c5e18489abca8ca0abf5d3ef9/hubspot-connect-form.png" alt="" width="1642" height="767"><br>フォームを受信トレイに接続する画面が開きますので、先ほど作成したフォームを選択して、右下の「次へ」ボタンを押します。<br><br>これでフォームを受信トレイに接続できました！<br>※もしメール通知が欲しい場合は、フォームの編集画面の「オプション」の「次の宛先に送信通知を送る」からメールアドレスを設定できます。</p>

<h2 id="h238a854b0a">フォームをページ内で表示する</h2><p>いよいよ、フォームをページ内で表示します。<br><strong>フォーム作成にあたり、下記の記事を参考にしました。英語ですが各項目の説明もありますので、ぜひ参考にしてください。</strong></p><ul><li><a href="https://www.devtwins.com/blog/hubspot-forms-react-submit-form-using-hubspot-api" target="_blank" rel="noopener noreferrer">HubSpot Forms in React: Submit a Form Using HubSpot API</a></li></ul><p><br>かなりの部分がそのままですが、下記にコードを貼り付けます。<br>オリジナルとの違いは、項目名の違い、HTMLにTailwindのクラスを付与していること、フォーム送信後に送信完了画面に転送していることです。<br>メモしてある <strong>portalId と formGuid の値をコード内で置き換え</strong>てください。あとは、適宜、React Hook Formなどでイケてる<strong>バリデーションを加えたり、フォーム送信完了・失敗の処理を入れてから使用</strong>してください（React歴3ヶ月の私は、ここで力尽きました…あとで頑張ろう💪）</p>

<pre><code>import { useState, VFC } from "react";
import axios from 'axios';
import { useRouter } from 'next/router'

export const Component: VFC = () =&gt; {
  const router = useRouter();
  
  // 項目を設定
  const [lastname, setLastname] = useState("");
  const [firstname, setFirstname] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const handleSubmit = async (e) =&gt; {
    // デフォルトの動作をブロック
    e.preventDefault();
    
    // フォーム送信へ
    await submit_hubspot_form(firstname, lastname, email, message);
  }

  const submit_hubspot_form = async (firstname, lastname, email, message) =&gt; {
    const portalId = 'ポータルID';
    const formGuid = 'フォームGUIDを記入';
    const config = {
      headers: {
        'Message-Type': 'application/json',
      },
    }

    return await axios.post(`https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formGuid}`,
      {
        portalId,
        formGuid,
        fields: [
          {
            name: 'firstname',
            value: firstname,
          },
          {
            name: 'lastname',
            value: lastname,
          },
          {
            name: 'email',
            value: email,
          },
          {
            name: 'message',
            value: message,
          },
        ],
      },

      config
    ).then(() =&gt; {
      // フォーム送信後にリダイレクトする
      router.push('/')
    });
  }

  return (
    &lt;form className={'mt-4'} onSubmit={handleSubmit}&gt;
      &lt;fieldset&gt;
        &lt;legend className={'block text-gray-700 text-sm font-bold mb-2'}&gt;お名前&lt;/legend&gt;
        &lt;div className={'flex gap-2'}&gt;
          &lt;div className={'flex-1'}&gt;
            &lt;label className={'block text-gray-700 text-sm font-bold mb-2'} htmlFor="lastname"&gt;姓 [必須]&lt;/label&gt;
            &lt;input
              className={'appearance-none border border-gray-500 rounded w-full py-2 px-3'}
              id="lastname"
              name="lastname"
              type="text"
              value={lastname}
              placeholder="佐藤"
              onChange={e =&gt; setLastname(e.target.value)}
              required/&gt;
          &lt;/div&gt;
          &lt;div className={'flex-1'}&gt;
            &lt;label className={'block text-gray-700 text-sm font-bold mb-2'} htmlFor="firstname"&gt;名&lt;/label&gt;
            &lt;input
              className={'appearance-none border border-gray-500 rounded w-full py-2 px-3'}
              id="firstname"
              name="firstname"
              type="text"
              value={firstname}
              placeholder="あゆみ"
              onChange={e =&gt; setFirstname(e.target.value)}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;div className={'mt-4'}&gt;
        &lt;label className={'block text-gray-700 text-sm font-bold mb-2'} htmlFor="email"&gt;メールアドレス [必須]&lt;/label&gt;
        &lt;input
          className={'appearance-none border border-gray-500 rounded w-full py-2 px-3'}
          id="email"
          name="メールアドレス"
          placeholder="your@email.address"
          type="email"
          value={email}
          onChange={e =&gt; setEmail(e.target.value)}
          required/&gt;
      &lt;/div&gt;
      &lt;div className={'mt-4'}&gt;
        &lt;label className={'block text-gray-700 text-sm font-bold mb-2'} htmlFor="message"&gt;お問い合わせ [必須]&lt;/label&gt;
        &lt;textarea
          className={'h-48 appearance-none border border-gray-500 rounded w-full py-2 px-3'}
          id="message"
          name="message"
          value={message}
          onChange={e =&gt; setMessage(e.target.value)}
          required/&gt;
      &lt;/div&gt;
      &lt;button className={'mt-6 bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-8 rounded focus:outline-none focus:shadow-outline'} type="submit"&gt;送信する&lt;/button&gt;
    &lt;/form&gt;
  );
};</code></pre>

<h2 id="ha081e33752">こうなります</h2><p><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/288d04e2f817442793926af80ac40ea3/hubspot-form-inbox.png?w=640&amp;h=492" alt="" width="640" height="492"><br>フォームからお問い合わせを送信すると、受信トレイの「フォーム」にて確認できます。<br>フォームから入力した<strong>氏名がデータベースに反映されており、過去に同じメールアドレスでやりとりしている場合はきちんとその情報も紐づいて表示</strong>されます👾✨<br>なんて便利なんでしょう🥺 もうHubSpotなしの生活には戻れませんね！<br><br>メール通知を設定している場合は、下記のようなメールが届きます。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/7261aa329695448195e529f19f446440/hubspot-email.png?w=300&amp;h=480" alt="" width="300" height="480"><br><br>ここでお気づきの方もいらっしゃると思いますが、どのページのフォームから送信されたなどをオプションとして送信データに含めることができます。また、送信時にうまいことすることでトラッキングも有効にできるそうです。<br><a href="https://legacydocs.hubspot.com/docs/methods/forms/submit_form" target="_blank" rel="noopener noreferrer">ドキュメント</a>を見て実装してください💪<br><br><span style="font-size: 0.75em">※公開後に気づきましたが、Vercelあんまり関係なかったですね…</span></p>

Next.js / Vercel / HubSpot Forms APIの組み合わせでお問い合わせフォームを作ってみた

<p><a href="https://microcms.io/features/sdk" target="_blank" rel="noopener noreferrer">microCMSにはSDKが用意されており</a>、さまざまなプラットフォームで GET API を手軽に扱えるようになっています。今日は microCMS JavaScript SDKを使い、ブログ記事のプレビュー機能を実装してみました。<br><br>実装にあたっては、下記の２つの記事がとても参考になりました。</p><ul><li><a href="https://blog.microcms.io/nextjs-preview-mode/" target="_blank" rel="noopener noreferrer">Next.jsのPreview Mode＋Vercelでプレビュー機能を実現する</a></li><li><a href="https://dev.classmethod.jp/articles/vercel-microcms-nextjs-blog/" target="_blank" rel="noopener noreferrer">[Next.js+Vercel+microCMS] microCMS と Next.js でブログを作る</a></li></ul><p>とても詳しく丁寧に解説されているので、まず、<strong>上記2つの記事をご覧いただくことを強くお勧めします</strong>。<span style="font-size: 0.75em">読んだ前提で書きます。</span><br><strong>上記の記事の方法を用いればパーフェクト</strong>なのですが、これらの記事中ではSDKを使わない方法が紹介されているので、この記事ではSDKを使う場合の書き方を忘備録として残しておきます。<br><br>※すでに記事の公開機能は実装されており、プレビュー機能を追加で実装することを目的とした記事です</p>

<h2 id="h071706b600">プレビュー用の関数を作る</h2><p>プレビュー用の関数を作成します。他のページ用のプレビューも後日作るかも、ということで名称はblogPreviewにしています。<br>/pages/api/blogPreview.jsx</p><pre><code>import { client } from "@pages/api/microcms";
	

	export default async (req, res) =&gt; {
	  
	  // リクエストにスラッグがない場合は404エラーを表示
	  if (!req.query.slug) {
	    return res.status(404).end();
	  }
	  
	  // 記事が存在するか確かめる
	  const content = await client.get({
	    endpoint: 'blog',
	    contentId: req.query.slug,
	    queries: {draftKey: req.query.draftKey}
	  }).then().catch(error =&gt; console.error(error));
	  
	  // 記事が返ってこない場合は401エラーを表示する
	  if (!content) {
	    return res.status(401).json({ message: 'Invalid slug' });
	  }
	  
	  // 記事のIDとdraftKeyを渡して本来のパスにリダイレクトする
	  res.setPreviewData({
	    slug: content["id"],
	    draftKey: req.query.draftKey,
	  });
	  res.writeHead(307, { Location: `/blog/${content["id"]}` });
	  res.end('Preview mode enabled');
	};</code></pre>

<h2 id="heaacf45827">記事ページにdraftKey処理を追加する</h2><p>プレビュー用の関数からdraftKeyを渡されたときに、それをAPIに渡します。<br>通常の記事の取得コードに<code>queries: { draftKey: '●●●' }</code>を加えれば、下書き状態の記事を取得できるようになります。<br><br>/pages/blog/[id].tsx（記事取得部分の抜粋）</p><pre><code>export const getStaticProps = async (context) =&gt; {
	

	  // 記事IDを取得する
	  const slug = context.params.id;
	  
	  // draftKeyを取得し、クエリを作成する
	  const draftKey = context.previewData?.draftKey
	    ? { draftKey: context.previewData.draftKey }
	    : {};
	

	  // 記事を取得する
	  const blogPost = await client.get({
	    endpoint: 'blog',
	    contentId: slug,
	    queries: draftKey,
	  })
	

	  // 記事が存在しなければ404エラーを返す
	  if (!blogPost) {
	    return { notFound: true }
	  }
	

	  // 記事とdraftKeyをpropsに渡す
	  return {
	    props: {
	      blogPost,
	      ...draftKey
	    },
	  }
	}</code></pre>

<h2 id="h6003113644">プレビュー有効表示を追加する</h2><p>今のままでは、果たしてプレビュー表示なのか本番表示なのかの区別がブラウザ画面上でつきませんので、プレビューが有効な場合の表示を追加します。あわせて、プレビュー機能をオフにするためのリンクも作成します。<br><br>/src/components/Pages/Post/Id/Component.tsx（抜粋）</p><pre><code>export const Component: VFC&lt;Props&gt; = (props) =&gt; {
	  return (
	    &lt;&gt;
	      {props.draftKey &amp;&amp; (
	        &lt;p className={'bg-yellow-100 text-yellow-900 p-4 text-center'}&gt;
	          プレビュー表示がONになっています。
	          &lt;Link href={`/api/exitPreview`}&gt;
	            &lt;a className={"underline"}&gt;プレビュー表示をOFFにする&lt;/a&gt;
	          &lt;/Link&gt;
	        &lt;/p&gt;
	      )}
	      {/* 以下に記事内容を表示するコンポーネントが続く */}
	    &lt;/&gt;
	  );
	};</code></pre><p>※装飾としてTailwindのクラス名が入っています</p>

<h2 id="hbf63b8d1b1">プレビューオフ用の関数を用意する</h2><p>プレビューをオフにするための関数を用意します。オフにした後はトップページにリダイレクトする仕様です。<br>/pages/api/exitPreview.tsx</p><pre><code>export default (_req, res) =&gt; {
	  res.clearPreviewData();
	  res.writeHead(307, { Location: `/` });
	  res.end('Preview mode disabled');
	}</code></pre>

<h2 id="h9ac49d6989">microCMS上でプレビューリンクを設定する</h2><p>microCMSにログインし、[API設定]→[画面プレビュー]から、画面プレビュー用のURLを設定します。<br><code>https://あなたのドメイン/api/blogPreview?slug={CONTENT_ID}&amp;draftKey={DRAFT_KEY}</code><br><br>これで、Vercel上で画面プレビューができるようになりました！<br>記事を下書き保存して、画面プレビューボタンを押してから約5秒でプレビューが表示されました。<br><br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/44728c22e70f45a48967d3823684e5ce/Screen%20Shot%202021-08-04%20at%2018.31.05.png?w=680&amp;h=590" alt="プレビューであることが明記された記事ページが表示されている" width="680" height="590"></p>

<h3 id="h9710ffdf15">余談</h3><p><a href="https://github.com/microcmsio/microcms-js-sdk" target="_blank" rel="noopener noreferrer">SDKのreadme</a>にグローバルドラフトキーの記載があり、記事ごとのdraftKeyの扱い方について記載がなかったことから「SDK使う時はグローバルドラフトキーしか使えないのかな？？」と、私は大きな勘違いをしていました🥲しばらくハマってました。そんなワケがないのに。考えなくてもわかりそうなことを、なぜ…。<br>ドラフトキーはクエリにつけてあげる、これでOKです。<br>（<a href="https://github.com/trickstar13/microphp" target="_blank" rel="noopener noreferrer">PHP版</a>のプレビュー機能を作った時にもクエリパラメータとしてつけてたはずなのに、なぜこんな勘違いをしてしまったのか…）<br></p><h3 id="h59d77c9733">余談すぎる余談</h3><p>「Post/Id/Component.tsx」はもともと「Blog/Id/Component.tsx」だったのですが、なぜかVercel上にデプロイすると「そんなディレクトリはない」と言われるので、BlogからPostにディレクトリ名を変更したのでした。ローカルではBlogのままでも動くのに…謎…。</p>

microCMS SDK と Next.js で Vercel を使ったプレビューを実装したメモ

<p>SNSシェア時に表示するためのOG画像。あるほうが目に留まりやすいと分かっていても、ブログ記事を書くたびに画像ソフトを開いてチマチマ作るのは面倒じゃありませんか？<br><br>そこで、microCMSの画像API機能を活用すると、記事<strong>タイトルからOG画像を自動で生成</strong>できるようになります！<strong>microCMSにアップロードした画像には、ImgixのAPIを使ってさまざまな画像加工ができる</strong>からです。<br><br>タイムリーなことに、本日、<a href="https://prtimes.jp/main/html/rd/p/000000005.000062982.html" target="_blank" rel="noopener noreferrer">MicroCMS社が日本の企業として初めてimgix社のサービスパートナーに認定された</a>とのことです（おめでとうございます🎉）<br><br>--<br>2021/09/27追記：<br>microCMS公式ブログに「<a href="https://blog.microcms.io/imgix-ogp/" target="_blank" rel="noopener noreferrer">imgixで動的画像・OGPを作成する</a>」記事が追加されました。Next.js を使用してOGP を生成する方法が詳しく解説されていますので、おすすめです！<br>--</p>

<h2 id="h06af735ef5">画像APIの基本的な使い方</h2><p>まずは、表示したい画像を、microCMSの管理画面からアップロードします。その<strong>ファイルを表示する際に、パラメーターを与えると画像をいい感じに加工できます</strong>。<br>基本的な使い方はぜひ <a href="https://document.microcms.io/image-api/introduction" target="_blank" rel="noopener noreferrer">microCMSの画像APIガイド</a> をご覧ください。<br><br>具体的には、テンプレートにあったサイズの画像を表示するときに<strong>縦横幅を指定したり、画質を指定したり、高解像度の画像を出し分ける</strong>のに使ったりします。srcset属性の中で<code>画像URL?auto=format&amp;q=50&amp;w=640&amp;h=480&amp;dpr=2 2x</code>と指定すれば、表示したい場所に合わせた高解像度（2倍）対応の画像を出し分けられる、といった具合です。<br><br>切り抜き機能もただのクロップではなく、<strong>人物の顔を検出してその周りをトリミング</strong>できます<strong>。</strong>また、画像に<strong>色調フィルタをかけたり</strong>、透かしとして文字を入れたりなどさまざまな加工を自動で行えます。<br><br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/1808215af8a34b6b836d3b25778b7991/Screen%20Shot%202021-08-03%20at%2019.51.47.png" alt="" width="1530" height="796"><br><a href="https://docs.imgix.com/apis/rendering/size/crop" target="_blank" rel="noopener noreferrer">Crop Mode | Face Cropping</a>&nbsp;より引用<br><br>読めば読むほど夢が広がる <a href="https://docs.imgix.com/apis/rendering" target="_blank" rel="noopener noreferrer">imgix の公式ガイド</a>をご覧ください。</p>

<h2 id="h55a9bb298d">一行の単語や文字列を画像内に表示する</h2><p>画像に自動で透かしを入れたい、クレジット表記を入れたい、そんな時には、かんたんに画像APIで加工できます。<br><br>まず、microCMSに<strong>画像をアップロード</strong>します。<br>アップロードできたら、ファイル名を右クリックして「<strong>リンク先URLをコピー</strong>」します。<br>画像ファイルのURLを取得できます。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/3b7456ea81ea4085810ce3f7d67a7d13/Screen%20Shot%202021-08-03%20at%2019.38.34.png" alt="" width="2057" height="1049"><br><br>あとは、取得した<strong>URLの末尾にパラメータを与える</strong>だけ！😆 wow! <br>URLの末尾に<code>?txt=Hello&amp;txt-size=64&amp;txt-align=middle,center</code>を書き足してみます。<br>具体的にはこのようなURLになります。pngまでが画像のURLで、?から先が書き足したパラメータです。</p><pre><code>https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/4b96e32e9dff4999aeeca5b4d221618f/og-image-templage.png?txt=Hello&amp;txt-size=64&amp;txt-align=middle,center</code></pre><p>このURLをブラウザで開いてみましょう。<br>どうでしょうか。アップロードした画像の真ん中に「Hello」の文字が合成され、表示されているはずです🎉<br><br><code>txt</code>は表示する文字、<code>text-size</code>はテキストの大きさ（ピクセル）、<code>text-align</code>は文字を画像のどの位置に配置するかの設定です。文字色も<code>&amp;text-color=ffffff</code>のように書き加えれば変更できます。画像のクレジット表記なら、text-alignはright,bottomが良さそうですね。<br><br>見た目を確認したら、あとはHTML内の使いたい場所にて画像URLを記述して呼び出すだけです。</p>

<h3 id="h332c8a5af6">自分でパラメータをチマチマ書くのが面倒</h3><p>…という方には、 ブラウザ上で、いくぶん楽にパラメータを生成できるジェネレータもあります。色々試せますよ。<br></p><ul><li><a href="https://sandbox.imgix.com/create" target="_blank" rel="noopener noreferrer">Imgix Sandbox</a></li></ul>

<h2 id="h07a6d26fc5">複数行のテキストを背景画像に合成する</h2><p>さて、いよいよ本題です！複数行の文字を画像に重ねたい場合は、上記のように画像の末尾にパラメータをつけるほかに、<strong style="background-color:#ffffff">文字組エンドポイント（~text）を活用する必要があります</strong>。OG画像を生成したいので、記事タイトルを背景画像に合成してみます。<br></p><h3 id="hc953739b3f">全体の流れ</h3><ol><li>背景画像を用意してmicroCMSにアップロードする</li><li>テキストをBase64でエンコードする</li><li>1を使い、文字組エンドポイントで文字を画像化する</li><li>画像化したテキストのURLをさらにBase64エンコードして、マークとして画像に重ねる</li></ol><p><br></p><h3 id="h06c45c964e">完成コード例</h3><pre><code>import base64url from "base64url";

const ogImageUrl = generateOgImage(blogPost.title);

const generateOgImage = (title: string) =&gt; {
  // タイトルを Base64 エンコーディング
  const base64title = base64url(title);

  // 文字画像のURLを作成
  const textImage = `https://images.microcms-assets.io/~text?txtsize=48&amp;w=1000&amp;h=400&amp;txt-align=left,middle&amp;txtfont=Hiragino%20Sans%20W6&amp;txt64=${base64title}`;
	
  // 文字画像のURLをBase64 エンコーディング
  const textImageUrl = base64url(textImage);
	
  // 文字画像と背景画像を合成する
  return `https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/ad4aa327209b4488b03806659f54f092/og-image-template.png?w=1200&amp;mark-align=center%2Cmiddle&amp;mark64=${textImageUrl}`;
}</code></pre><p>※コードを見て「アーハ！」となった方は、ここから下は読まなくて大丈夫です👍<br><span style="font-size: 0.75em">状況を言葉で説明するよりもコードを見てもらう方が分かりやすいんじゃないかってよく思います…</span></p>

<h3 id="h8eb6637d77">1 背景画像を用意してmicroCMSにアップロードする</h3><p>OG画像の背景となる画像を適宜、用意します。<br>私は 1200 x 630 px で下記のような画像を作成しました。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/ad4aa327209b4488b03806659f54f092/og-image-template.png" alt="" width="1200" height="630"><br><br>画像ができたらmicroCMSにアップロードして、URLをメモしておきます。</p>

<h3 id="h9427998e5f">2 テキストをBase64でエンコードする</h3><p>まずは、背景画像に合成したいタイトルテキストを、お使いの言語の何らかの仕組みを利用して、Base64でエンコードします。Base64といってもそんじょそこらのBase64ではなく、<a href="https://blog.imgix.com/2016/03/01/base64-encoding" target="_blank" rel="noopener noreferrer">URLセーフのBase64にする必要があります</a>。</p>

<p>一般的なBase64エンコーディングでは、パラメータとして使用するには不適当な記号類が含まれてしまうため、それらを取り除いた文字列が URL-safe な Base64ということのようです。</p><ul><li>参考）<a href="https://qiita.com/kunihiros/items/2722d690b1525813c45e" target="_blank" rel="noopener noreferrer">Base64 エンコードと Base64 URL エンコードの違い</a></li></ul><p><br>とはいえ、自分でそれを処理するのはちょっと面倒だし誰か作っていないかなーと思って探したらありました。ありがたいですね。誰かの善意と熱意のおかげで私は今日も生きていけます。</p><ul><li><a href="https://github.com/brianloveswords/base64url" target="_blank" rel="noopener noreferrer">base64url</a></li></ul><p>※今回 Next.js で使いたかったので上記パッケージを利用しましたが、他の言語でも探せばきっとあると思います</p>

<h3 id="hf7e37db291">3 文字組エンドポイントで文字を画像化する</h3><p>複数行の文字列をいったん文字のみの状態で画像化するため、文字組エンドポイントを活用します。<br>下記のようなURLを叩くと、文字が画像化されて生成されます。<strong>実際にBase64エンコーディングした文字列を添えれば、ブラウザで表示確認できます</strong>。</p><pre><code>https://images.microcms-assets.io/~text?txtsize=48&amp;w=1000&amp;h=400&amp;txt-align=left,middle&amp;txtfont=Hiragino%20Sans%20W6&amp;txt64=【記事タイトルをBase64エンコーディングしたもの】</code></pre><p><br><code>https://images.microcms-assets.io/~text</code>までが、microCMS画像APIの文字組エンドポイントです。<br>?の後に続けて、<code>txtsize</code>や<code>w</code>や<code>h</code>などの文字に関する設定をパラメータとして追加します。<code>txtfont</code>でフォントも指定できます。<strong>画像APIとはパラメータの形式が異なっている</strong>ので要注意👾<br><br>ここで指定する<code>w</code>（幅）や<code>h</code>（高さ）は、OG画像の大きさではなく、重ねたい文字列そのものの最大の範囲、大きさを指定します。私は1200 x 630 pxの背景画像に文字を重ねたいので、1000 x 400 pxを指定しました。背景画像より大きなサイズを指定した場合、文字列が画像よりも外にはみ出すことになります。<br><br>使えるフォントは公式の<a href="https://docs.imgix.com/apis/rendering/text/txt-font" target="_blank" rel="noopener noreferrer">text-fontガイド</a>で検索表示できます…が、日本語フォントは出てこないもよう？実装にあたり大変参考にさせてもらった下記の記事に記載されている「Hiragino Sans」を私は指定しました。<br></p><ul><li>参考）<a href="https://qiita.com/kubotak/items/9c6849ce749493481279" target="_blank" rel="noopener noreferrer">imgixのRendering APIを利用してQiitaのようなOGPを作る</a></li></ul>

<h3 id="h0571ea2df8">4 画像化した文字をマークとして扱い、背景画像に重ねる</h3><p>さて、ここで上記の文字組エンドポイントのURLを、さらに、まるっと Base64 エンコードします。<br>エンコードできたら、メモしておいた背景画像のURLに、mark64パラメータとして付け加えます。<br></p><pre><code>【メモしておいた画像のURL】?w=1200&amp;mark-align=center%2Cmiddle&amp;mark64=【3でBase64エンコーディングしたURL】</code></pre><p><br>これでOG画像の完成です！<br>このURLをog:imageとしてmetaタグに設定すれば、シェア時に表示されます。<br><br>実際には、下記のような形式になります。</p><pre><code>&lt;meta property="og:image" content="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/ad4aa327209b4488b03806659f54f092/og-image-template.png?w=1200&amp;mark-align=center%2Cmiddle&amp;mark64=aHR0cHM6Ly9pbWFnZXMubWljcm9jbXMtYXNzZXRzLmlvL350ZXh0P3R4dHNpemU9NDgmdz0xMDAwJmg9NDAwJnR4dC1hbGlnbj1sZWZ0LG1pZGRsZSZ0eHRmb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dDY0PTQ0S3o0NE84NDRPSDQ0S2o0NE96NDRLdzZMSzc1NVNvNDRHcjQ0R2s0NEdFNDRHbQ"&gt;</code></pre><p><br>Webサイトを制作するうえでは、<strong>microCMS上で任意のOG画像をアップロードできるようにしておき、OG画像が指定されていない場合にのみ上記の自動生成をog:imageに設定するようにする</strong>と都合が良さそうです👻</p>

<h2 id="h664e06e632">生成した画像がどう表示されるか確認する</h2><p>単に生成される画像を確認したい場合は、該当ページでDevToolsやconsole.logで<code>og:image</code>を確認するのが一番早いです。さらに下記のページを利用すると、<strong>シェア時の表示を確認したり、SNS側の画像キャッシュをクリアできます</strong>。<br></p><ul><li><a href="https://developers.facebook.com/tools/debug/" target="_blank" rel="noopener noreferrer">Facebook OG debugger</a></li><li><a href="https://cards-dev.twitter.com/validator" target="_blank" rel="noopener noreferrer">Twitter Card Validator</a></li><li><a href="https://poker.line.naver.jp/" target="_blank" rel="noopener noreferrer">LINE PagePoker</a></li></ul><p><br></p>

<h2 id="h3bcda3e6b0">最後に</h2><p>microCMSじゃなくてimgixの機能では？というツッコミもあるかもしれませんが、<strong>imgixを気軽に使える形で採用してくれたmicroCMS</strong>の優しさと選定判断（？）に感謝しています。<br><br>microCMSは個人開発者向けのHobbyプランは無料で使い始められますので、気軽に試せます。<br>有料のStandardプランも月額税込 5,390円〜です。もちろん画像機能だけではなく本筋のCMS機能を使えてこの価格。それぞれデータ転送量に制限があるものの、全体的にかなり良心的だと思います。<br>人を雇ったり、誰かに作業を依頼する人件費や、自分であれこれ単純作業する手間が省けることと比較すれば、価値ある支出になるのでは。<br>OG画像に関してはSNS側である程度キャッシュされるので、それほど転送量にも影響がありませんしね🙂<br><br>※詳しくは<a href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">microCMSの料金ページ</a>でご確認ください</p>

OG画像だって自動生成できる！そう、microCMSならね

<p>iOS &amp; Android アプリのアップデートを公開する時の手順について、たまに行う程度で忘れそうになるのでメモしておきます。<br></p><h2 id="h1a1bea36ec">用意するもの</h2><ul><li>アプリストアに掲載するためのリリースノート（Gitのログ等を確認すると早い）</li><li>アプリの見た目が変わった場合は、新しいスクリーンショット</li><li>新しいバージョン番号とビルド番号</li></ul><p><br></p><h2 id="h91ef8a767c">アプリをビルドする</h2><p>Ionic &amp; Capacitor でアプリを制作しているため、まずはこれらでビルドする。<br>（実機確認は事前に行っている前提）</p><pre><code>ionic build --prod
ionic cap sync

# Xcodeを開く
ionic cap open ios
# Android Studioを開く
ionic cap open android</code></pre><p><br></p><h2 id="hc75451390d">iOS</h2><p>XCodeを開き、TARGETS からアプリのプロジェクトを選択して、General タブを開き、Version のバージョン番号と Build のビルド番号をそれぞれ変更する。<br><br>Productメニューから、Archiveを選択する。<br><br>アーカイブが終わるとアーカイブの一覧が開くので「Distribute App」ボタンをクリックする。<br>内容を確認しながら、次へ次へと進んでいく。<br>Upload ボタンを押すとファイルがサーバにアップロードされる。<br>30分ぐらい待つと処理が完了したお知らせが届く。<br><br><a href="https://developer.apple.com/" target="_blank" rel="noopener noreferrer">Apple Developer</a> にサインインする。<br>App Store Connectに移動する。<br>マイAppを選択する。<br><br>iOS Appの横の＋アイコンから、新バージョンを追加する。<br>リリースノートを入力して、アップロードするビルドを選択する。<br>※ビルドを選択できない場合、何かで引っかかっている可能性があるので、Appleからのメールや「Test Flight」を確認する<br>「審査へ提出」をクリックする。<br><br>ここ数ヶ月は、日本時間の夕方に提出すれば、翌朝には審査が通っている印象。</p>

<h2 id="he3dc5884eb">Android</h2><p>Android Studioでプロジェクトの build.gradle を開き、VersionCode等を変更する。<br>BuildメニューからGenerate Signed Bundleを選択して、内容を確認しながら次へ進む。<br><br><a href="https://developer.android.com/distribute/console" target="_blank" rel="noopener noreferrer">Android Play Console</a> にログインして、更新したいアプリを選択する。<br>製品版メニューから、「新しいリリースを作成」をクリックする。<br>生成した android/app/release/app-release.aab をアップロードする。<br>リリースノートを入力して保存する。<br>リリースのレビュー→製品版としての公開を開始、を選択する。<br><br>ここ数ヶ月は、数日待てば公開されるかな〜？という印象。気長に待つべし。</p>

iOS & Android アプリのアップデートを公開する時の手順メモ

<p>コーディング費用について、定期的にお問い合わせをいただいておりますので、こちらに目安を公開いたします。<span style="font-size: 0.75em">とても正直に書きました。</span><br>リニューアル案件のご依頼が多く、その場合は、さまざまな個別の要件が重なることもあり、価格表は用意しておりません。また、相見積もりを前提とするご依頼はお断りしております。<sup>※</sup><br>※価格だけを選定基準とする場合、私よりも他の方に依頼される方が安いです。</p>

<h2 id="ha530580420">コーディング費用の目安</h2><p>デザインデータやサイト構造が用意されている前提で、ざっくりと<strong>1サイト30万円〜60万円ぐらい</strong>の範囲に収まることが多いです。</p><ul><li>環境構築＆コーディング期間1ヶ月〜2ヶ月（事前打ち合わせを含まない）</li><li>納品後の保守は有償で承ります</li><li>必要に応じて更新方法動画などのガイドを用意します</li><li>制作期間が2ヶ月以上にわたる見込みの場合、着手時に前金として半金をご入金いただきます</li></ul><p><br></p>

<h2 id="h57b5691452">前提・特徴</h2><p>更新担当者の方が使用しているソフトやスキルにあわせて、納品内容を変えております。また、更新担当者の方が使い慣れているCSSフレームワークやコーディングガイドラインがある場合、ご共有いただければその方針に可能な限りあわせます。<br>事前にご相談いただけましたら、他システムとの連携にあたって都合の良いような構造を検討したり、ご提案いたします。既存サイトからのソース変換のご要望や、段階的なリニューアルなどのご要望にもお答えします。<br>フルリモートを前提としておりますが、必要に応じて東京近郊での対面打ち合わせや作業も検討いたします。</p>

<h2 id="h25928df5bc">見積もりの基準</h2><p>原則として、固定単価ではなく、お仕事のしやすさや、自分が引き受けたい仕事かどうかを基準にして価格を決めています。全体的には、古い技術を採用する方が高く、新しい技術を採用する方が安くなります。<br>原稿がWebの仕様を考慮しているか、予定通り揃うかなどの要因も含めて、お見積もり金額が多少上下することがあります。</p><h3 id="h3ea2a0f84a">デザインデータの種類</h3><p>（金額高）Illustrator &gt;&gt;&gt;&gt;&gt; PhotoShop &gt; XD &gt; Figma（金額低）<br>Illustrator でのWebデザイン管理は、色、コンポーネントの管理やデータのやりとり、もろもろの確認や調整に大きな工数がかかるため、見積もりが高くなります。ロゴデータのやりとりにAIファイルを使用するなどの場合は高くなりません。<br>Figma は Auto Layout や Constraints 、Styles やコンポーネント機能を活用いただけると助かります。<br>比較からは省きましたが Avocode や Zeplinなどのツールも使えます。</p><h3 id="h7439687926">成果物の種類</h3><p>（金額高）ダイナミックサービング<sup>※</sup> &gt; レスポンシブ（金額低）<br>※公開当初「非レスポンシブ」としておりましたが、より正確な「ダイナミックサービング」に表現を変更しました</p><h3 id="h8ed8c09758">制作環境の指定</h3><p>（金額高）DreamWeaver &gt; VS Code等のソフト（金額低）<br>ローカル環境を構築できない前提か、ローカルでPHP等が使えるかの違いです。現在メインのエディタは Intellij IDEA、共同作業の場合は VS Codeを使用しています。<br>（金額高）Sass 使用不可 &gt; Sass 使用可（金額低）<br>（金額高）Git 使用不可 &gt; Git 使用可（金額低）</p>

<h2 id="ha739b3b8f6">その他</h2><h3 id="h61a96bd2b6">使用可能なツール</h3><ul><li>（便利）Google Drive系＞iWork系＞Microsoft Office系（場合によって不便）</li><li>Dropbox</li><li>Slack</li><li>Asana / Repsona / Backlogなど</li></ul><p>その他のツールも必要に応じて覚えられます。</p><h3 id="he6afe9d8e4">ジャンル・スキル</h3><ul><li>Web ショップ制作（futureshop、MakeShop）</li><li>CMS テンプレート制作</li><li>HTML コーディング、各種CMS対応（microCMSなど）、Webデザイン、文章執筆</li><li>STUDIOでのサイト制作</li><li>Web サイト改善カウンセリング</li><li>Web 制作関連ツール講師</li><li>Futureshop 認定マイスター、アクイア認定サイトビルダー（Drupal 8）</li><li>Next.js/Nuxt.js（静的サイトジェネレーターとして少々）</li><li>Angular（趣味のWebアプリ制作のみ経験あり）</li><li>Tailwind使用可だと嬉しいです…！</li></ul><h3 id="h82cf96508e">新規で引き受けていない案件の種類</h3><ul><li>違法・グレーな商材に関わる案件</li><li>楽○市場用のコーディング（私に依頼すると高くなりすぎると思います）</li><li>WordPress サイトのテーマコーディング（ECサイトにオプションとして追加する場合や、Snow Monkey 使用の場合は引き受けます）</li></ul>

<h2 id="h6a5297362b">追記</h2><p>あくまで私個人、現時点での見積もり基準です。全てのコーダーがこのような基準を持っているわけではなく、また、これが良いと推薦する意味でもありません。私とは全く逆のタイプの方もいて、はじめて健全な市場だと思います。<br><br>さまざまなタイプのコーダーがいるのに、一度でも頼んでみないと方向性が分からないというのはあまりにリスキーです。<br>この基準を見て『明らかにうちとは合わないな』と思う会社の方もいらっしゃると思います。事前に方向性がわかる方が、お互いにとって、そしてその先のクライアントにとっても、良いと思っています。</p>

コーディング費用について

<p>Google Maps Platform の、<a href="https://cloud.google.com/maps-platform/places?hl=ja" target="_blank" rel="noopener noreferrer"><strong>Places API</strong></a>&nbsp;を活用すると、Google マイビジネスに掲載している営業時間をウェブページに埋め込めます。<br>何かと営業時間に変化が起きがちな昨今ですが、店舗オーナーが<strong>Google マイビジネスを更新することで、自動的にウェブページの営業時間も更新</strong>できるようになります。</p>

<h2 id="h6c3ec8ec0a">免責</h2><p>「やってみたら動いたよ」の段階で記事を書いています。何かを間違えている可能性もあります。試す場合は自己責任でお試しください🙇‍♀️</p><h2 id="h8a175a9b0e">前提</h2><ul><li>PHPが動く環境（レンタルサーバーなど）がある</li><li>Google マイビジネスに営業時間を登録済み</li></ul><p>※<a href="https://studio.design/" target="_blank" rel="noopener noreferrer">STUDIO</a>などPHPを動かせない環境であっても、別途用意したレンタルサーバーにUPしたファイルをiframeで読み込むことで使えます。</p><h2 id="hc610f8af76">Places APIについて</h2><p><a href="https://cloud.google.com/maps-platform/pricing/sheet?hl=ja" target="_blank" rel="noopener noreferrer">Places APIは有償のサービス</a>です。<br>利用にあたり、クレジットカードを紐付ける必要があります。<br>ただし、<strong>毎月$200までは無料で使えます</strong>ので、小規模なサイトであれば無料の範囲で使えそうです。</p><h3 id="h9c09ad62bb">利用登録する</h3><p><a href="https://cloud.google.com/maps-platform/?hl=ja" target="_blank" rel="noopener noreferrer">Google Maps Platform</a>にアクセスして、「始める」をクリックします。<br>初めて利用する場合にはクレジットカードの紐付けをうながされます。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/f8598d43900a439e859abc583a7ff297/Screen%20Shot%202021-04-22%20at%2014.19.52.png?w=765&amp;h=381" alt="Google Maps Platformのトップページ" width="765" height="381"></p><h3 id="hdf1ef281a5">プロジェクトを作成する</h3><p>まだ作成していない場合は、<a href="https://cloud.google.com/resource-manager/docs/creating-managing-projects?hl=ja" target="_blank" rel="noopener noreferrer">プロジェクトを作成</a>します。<br>ウェブサイト名など、わかりやすいプロジェクト名で作りましょう。</p><h3 id="h473648fc81">Places APIを有効にする</h3><p>作成したプロジェクトにて、Places APIを有効にします。<br><strong>APIとサービス→ライブラリ</strong>をクリックして「<strong>Places API</strong>」を検索し、有効にします。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/b7d21602d8c843cda51d84ea3182d394/Screen%20Shot%202021-04-22%20at%2014.28.34.png?w=400&amp;h=539" alt="APIとサービス→ライブラリ" width="400" height="539"></p><h3 id="h7acc4a1629">キーを取得する</h3><p><strong>APIとサービス→認証情報→認証情報を作成→APIキー</strong>をクリックします。<br>「自分のAPIキー」をコピーするためのモーダルが出てきますので、コピーしてわかりやすい場所にメモしておきます。<br>※<strong>テストが終わったらAPIキーには適切な制限をかけ</strong>て、不正アクセスを予防しましょう。アクセス元のサーバのIPアドレス等を入力します。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/c57b9ac756d84cdcac9273464e71793e/Screen%20Shot%202021-04-22%20at%2014.31.29.png?w=765&amp;h=406" alt="APIとサービス→認証情報→認証情報を作成" width="765" height="406"></p><h2 id="h2c914f1317">Places IDを取得する</h2><p>営業時間を表示したい場所のPlace IDを取得します。<br><a href="https://developers.google.com/maps/documentation/places/web-service/place-id" target="_blank" rel="noopener noreferrer">Place IDsページ</a>にて、表示したい場所の名称（例：六義園、東京タワー）を入力し、出てきた場所をクリックします。<br>※リターンキーを押すのではなく、選択肢をクリックする<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/bf34a7744b504b45ab56b1bd67c3e02a/Screen%20Shot%202021-04-22%20at%2014.38.07.png?w=765&amp;h=406" alt="表示したい場所の名称（六義園）を入力中の様子" width="765" height="406"><br>クリックすると その場所のPlace ID が表示されますので、わかりやすい場所にメモしておきます。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/29bee0b9662c46ad9a253cfbbef1c021/Screen%20Shot%202021-04-22%20at%2014.38.22.png?w=765&amp;h=478" alt="Place IDをハイライトしている" width="765" height="478"></p><h2 id="hdaf3f54bb1">JSONを取得してみる</h2><p>さて、営業時間のJSON情報を取得してみましょう。<br>【Place ID】と【APIキー】をメモしていた情報に書き換えて、ブラウザでアクセスします。<br>パラメータに関する詳細は <a href="https://developers.google.com/maps/documentation/places/web-service/details" target="_blank" rel="noopener noreferrer">Place Details</a> に掲載されています。</p><pre><code>https://maps.googleapis.com/maps/api/place/details/json?place_id=【Place ID】&amp;key=【APIキー】&amp;fields=opening_hours,business_status&amp;language=ja</code></pre><p>下記のような文字列が表示されたら成功です。</p><pre><code>{
   "html_attributions" : [],
   "result" : {
      "business_status" : "OPERATIONAL",
      "opening_hours" : {
         "open_now" : true,
         "periods" : [
            {
               "close" : {
                  "day" : 0,
                  "time" : "2000"
               },
               "open" : {
                  "day" : 0,
                  "time" : "0900"
               }
            },
            {
               "close" : {
                  "day" : 1,
                  "time" : "2000"
               },
               "open" : {
                  "day" : 1,
                  "time" : "1000"
               }
            },
            {
               "close" : {
                  "day" : 2,
                  "time" : "2000"
               },
               "open" : {
                  "day" : 2,
                  "time" : "1000"
               }
            },
            {
               "close" : {
                  "day" : 3,
                  "time" : "2000"
               },
               "open" : {
                  "day" : 3,
                  "time" : "1000"
               }
            },
            {
               "close" : {
                  "day" : 4,
                  "time" : "2000"
               },
               "open" : {
                  "day" : 4,
                  "time" : "1000"
               }
            },
            {
               "close" : {
                  "day" : 5,
                  "time" : "2000"
               },
               "open" : {
                  "day" : 5,
                  "time" : "1000"
               }
            },
            {
               "close" : {
                  "day" : 6,
                  "time" : "2000"
               },
               "open" : {
                  "day" : 6,
                  "time" : "0900"
               }
            }
         ],
         "weekday_text" : [
            "月曜日: 10時00分～20時00分",
            "火曜日: 10時00分～20時00分",
            "水曜日: 10時00分～20時00分",
            "木曜日: 10時00分～20時00分",
            "金曜日: 10時00分～20時00分",
            "土曜日: 9時00分～20時00分",
            "日曜日: 9時00分～20時00分"
         ]
      }
   },
   "status" : "OK"
}</code></pre><p>臨時休業中の場合は、下記のような結果になるでしょう。</p><pre><code>{
   "html_attributions" : [],
   "result" : {
      "business_status" : "CLOSED_TEMPORARILY"
   },
   "status" : "OK"
}</code></pre><h2 id="hf4ed84c8b5">PHPで処理する</h2><p>あとはこのJSONを煮るなり焼くなりしてページに表示させます。</p><h3 id="hec9aa2616d">営業時間リストをそのまま表示する例</h3><p>例えばこんな、<strong>営業時間のリストを表示する</strong>パターン。<br>phpファイルをインクルードするか、あるいはそのままページ中にPHPを書き込み、必要な場所に表示します。<br>※HTMLやPHPはいい感じに書き換えて使ってください。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/a4cb27d624b44823a8600d5e58df10e7/Screen%20Shot%202021-04-22%20at%2015.06.16.png?w=250&amp;h=178" alt="" width="250" height="178"></p><pre><code>&lt;?php
$json = getJsonFromApi(); // JSONデータを取得

// 営業中なら営業時間を取得する
if ($json["result"]["business_status"] == 'OPERATIONAL'){
  $json = $json["result"]["opening_hours"]["weekday_text"];

  echo '&lt;ul&gt;';
  foreach ($json as &amp;$line) {
    echo '&lt;li&gt;'. $line . '&lt;/li&gt;';
  }
  echo '&lt;/ul&gt;';

}

// 臨時休業中は臨時休業のお知らせを掲載
else if ($json["result"]["business_status"] == 'CLOSED_TEMPORARILY'){
  echo "臨時休業中";
}

// 状況を取得できなければエラーを表示する
else {
  echo $json["error_message"];
}


/*
 * JSON を Place API から取得する
 */
function getJsonFromApi()
{
  $apiUrl = 'https://maps.googleapis.com/maps/api/place/details/json?place_id=【Place ID】&amp;key=【APIキー】&amp;fields=opening_hours,business_status&amp;language=ja';
  $ch = curl_init($apiUrl);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  $response = curl_exec($ch);
  curl_close($ch);
  $json = trim($response);
  return json_decode($json, true);
}
?&gt;</code></pre><h3 id="hb5a930e3c9">今日の営業時間を表示する例</h3><p><strong>アクセスした日の営業時間を表示</strong>します。曜日を頼りに「本日」を決めています。<br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/64fd347cade14008bea50d4f6e4e0960/Screen%20Shot%202021-04-22%20at%2015.10.53.png?w=250&amp;h=32" alt="" width="250" height="32"></p><pre><code>&lt;?php

$today = date('w'); // 今日の曜日を取得
$json = getJsonFromApi(); // JSONデータを取得
$isOpen = $openHour = $openMin = $closeHour = $closeMin = null;
$message = null;

// 営業中なら営業時間を取得する
if ($json["result"]["business_status"] == 'OPERATIONAL'){
  $json =$json["result"]["opening_hours"]["periods"];
  // 今日と同じ曜日の営業時間を取得する
  for ($i = 0; $i &lt; count($json); $i++) {
    if ($json[$i]["open"]["day"] == $today){
      $isOpen = true;
      $open = $json[$i]["open"]["time"];
      $openHour = substr($open, 0, 2);
      $openMin = substr($open, 2, 4);
      $close = $json[$i]["close"]["time"];
      $closeHour = substr($close, 0, 2);
      $closeMin = substr($close, 2, 4);
    }
  }
  if ($isOpen){
    $message = "本日営業しています（".$openHour.':'.$openMin. '〜' . $closeHour.':'.$closeMin.'）';
  } else{
    $message = "本日はお休みです";
  }
}
// 臨時休業中は臨時休業のお知らせを掲載
else if ($json["result"]["business_status"] == 'CLOSED_TEMPORARILY'){
  $message = "本日は臨時休業です";
}
// 状況を取得できなければエラーを表示する
else {
  $message = $json["error_message"];
  echo $message;
  exit;
}

// メッセージを表示
echo $message;

/*
 * JSON を Place API から取得する
 */
function getJsonFromApi()
{
  $apiUrl = 'https://maps.googleapis.com/maps/api/place/details/json?place_id=【Place ID】&amp;key=【APIキー】&amp;fields=opening_hours,business_status&amp;language=ja';
  $ch = curl_init($apiUrl);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  $response = curl_exec($ch);
  curl_close($ch);
  $json = trim($response);
  return json_decode($json, true);
}
?&gt;</code></pre><h2 id="h34b5cf8240">APIへのアクセス数を減らしたい場合</h2><p>Places APIは従量課金のため、アクセスが多くなるほど利用料金が高くなっていきます。<br>できるだけ<strong>APIからの情報取得を頻度を減らしたい</strong>場合、下記の方法も取れます。</p><ul><li>PHPファイルでインクルード用の静的ファイルを書き出す</li><li>表示したい場所にてインクルード用の静的ファイルを読み込む</li><li>CRONで定期的に静的ファイルの情報を書き換える（1日に1回、1時間に1回など）</li></ul><h3 id="h0067e0f0cd">インクルード用のファイルを出力する</h3><p>空の today.inc ファイルを作成し、書き込めるようにtoday.incの権限設定を変更します（おそらく必要な作業だと思います…666？）<br>today.inc に対して、本日の営業時間と、HTMLコメントにて更新時刻を出力する内容です。</p><pre><code>&lt;?php
$updatedTime = date('Y年m月d日 H時i分s秒 時点の営業時間');
$today = date('w'); // 今日の曜日を取得
$json = getJsonFromApi(); // JSONデータを取得
$isOpen = $openHour = $openMin = $closeHour = $closeMin = null;
$message = null;

// 営業中なら営業時間を取得する
if ($json["result"]["business_status"] == 'OPERATIONAL'){
  $json =$json["result"]["opening_hours"]["periods"];
  // 今日と同じ曜日の営業時間を取得する
  for ($i = 0; $i &lt; count($json); $i++) {
    if ($json[$i]["open"]["day"] == $today){
      $isOpen = true;
      $open = $json[$i]["open"]["time"];
      $openHour = substr($open, 0, 2);
      $openMin = substr($open, 2, 4);
      $close = $json[$i]["close"]["time"];
      $closeHour = substr($close, 0, 2);
      $closeMin = substr($close, 2, 4);
    }
  }
  if ($isOpen){
    $message = "本日営業しています（".$openHour.':'.$openMin. '〜' . $closeHour.':'.$closeMin.'）';
  } else{
    $message = "本日はお休みです";
  }
}
// 臨時休業中は臨時休業のお知らせを掲載
else if ($json["result"]["business_status"] == 'CLOSED_TEMPORARILY'){
  $message = "本日は臨時休業です";
}
// 状況を取得できなければエラーを表示する
else {
  $message = $json["error_message"];
}

/*
 * 掲示内容をインクルード用ファイルに書き込む
 */
$message = $message . '&lt;!-- '. $updatedTime . '--&gt;';
$result = file_put_contents("today.inc", $message);
if ($result){
  echo "更新しました";
}else{
  echo "ファイルに書き込めませんでした";
}

/*
 * JSON を Place API から取得する
 */
function getJsonFromApi()
{
  $apiUrl = 'https://maps.googleapis.com/maps/api/place/details/json?place_id=【Place ID】&amp;key=【APIキー】&amp;fields=opening_hours,business_status&amp;language=ja';
  $ch = curl_init($apiUrl);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  $response = curl_exec($ch);
  curl_close($ch);
  $json = trim($response);
  return json_decode($json, true);
}
?&gt;</code></pre><h3 id="hefd57b218f">インクルードする</h3><p>上記のPHPにアクセスして、無事に today.inc が出力できたら、表示したい場所にて today.inc をインクルードします。</p><h3 id="hb0cca0d8f7">CRONを設定する</h3><p>レンタルサーバのコントロールパネル等で、CRONを設定します。<br>例として、さくらサーバの新コントロールパネルでは<strong>スクリプト設定→CRON設定</strong>から、新しいCRON設定を追加できます。<br><br>さくらサーバにてwgetで更新する場合は下記のような設定を追加します。</p><pre><code>/usr/local/bin/wget 'https://○○○/getSchedule.php' -q -O /dev/null</code></pre><p>これを適切な時刻に動作させて、営業時間情報を定期的に書き換えます。</p>

<h2 id="h427172cf9e">2021年12月30日追記</h2><p>Google マイビジネスはGoogle ビジネス プロフィールに名称が変わったようです。<br>また、Google Maps APIでは「特別営業時間（special hours）」の取得に対応していないようです。<br><a href="https://issuetracker.google.com/issues/35829064" target="_blank" rel="noopener noreferrer">2016年から特別営業時間への対応を求める声が上がっています</a>が、いまだリクエストが通っていないようです。<br><a style="color:#202124" href="https://developers.google.com/my-business/reference/businessinformation/rest/v1/accounts.locations#Location.SpecialHours" target="_blank" rel="noopener noreferrer">Google My Business API（こちらは名称そのまま？）では</a><a href="https://developers.google.com/my-business/reference/businessinformation/rest/v1/accounts.locations#Location.SpecialHours" target="_blank" rel="noopener noreferrer">「特別営業時間」を取得できそう</a>ですが、利用するには<a href="https://developers.google.com/my-business/content/prereqs#request-access" target="_blank" rel="noopener noreferrer">審査が必要</a>なようです。</p>

雑記