<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>

Google マイビジネスの営業時間をPHPでウェブページに埋め込む方法

<p>Zoho CRMのキャンペーンに連絡先を追加するとき、標準では「予定」「開封済」などのステータスが設定されています。この選択肢を変更する場所が分かりにくかったので、ここにメモしておきます。<br><br>下記の赤丸の部分の選択肢（セレクトボックス）を変更します。<br><br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/27fd1127197047beaff5931ad3d902d3/picture_pc_9480d29aedd71a6acda09f820035920b.webp" alt="" width="800" height="149"><br><br>CRMの[設定]→[カスタマイズ]→[タブ＆項目]と進み、[キャンペーン]の該当するレイアウトを開きます。<br><br>上部に表示されている、Standardなどのレイアウト名が表示されている▼の右横にある歯車をクリックすると…<br><br><img src="https://images.microcms-assets.io/assets/a619d099a2ac44cf8affabdce4124388/750625edad9e4960b4c70a4ba3bcd7c6/picture_pc_bf33a5318c196976e7adb96ad79e0192.webp" alt="" width="800" height="390"><br><br>「○○メンバーのステータス」という選択肢が現れるのでクリックします。<br><br>※この組織では「キャンペーン」を「イベント」にリネームしているので「イベントメンバーのステータス」という項目名になっています。<br><br>ここでキャンペーンの連絡先リスト、参加者の選択肢の内容を変更できます。</p>

Zoho CRM キャンペーンタブ、連絡先ステータスの選択肢を変更する方法

<p>日英翻訳、また英日翻訳をする際に便利なウェブサービス「YarakuZen」「Grammarly」「Weblio辞書」をご紹介します。<br>効率よく作業をすすめるためにたくさんのソフトウエアを試しましたが、ここ数年はこの3つのサービスを継続使用しており、とても満足しています。<br><br>私は日英＆英日翻訳をウェブ制作に付随する作業として引き受けてきました。現在はメール翻訳が中心です。</p>

<h2 id="h7159949650">YarakuZen（翻訳エンジン・自動翻訳）</h2><p><a href="https://www.yarakuzen.com/" target="_blank" rel="noopener noreferrer">https://www.yarakuzen.com/</a><br><br>YarakuZenはドキュメントを自動翻訳してくれるサービスです。<br>また、自動翻訳した結果を自分で修正でき、それがクラウド上に自動保存されることで、翻訳エンジンとしても機能します。<br>私は英日翻訳の場合にはこのツールひとつで完成させています。<br></p><h3 id="h99602802b6">いつでもどこでも同じデータベースを使える</h3><p>YarakuZenはオンラインサービスなので、異なる端末からでも同じ自分専用の翻訳データベースを利用できます。<br>WindowsでもMacでも、iPadでも利用可能です。<br><br>今までOmegaTなどの翻訳エンジンを利用していましたが、自宅マシンと持ち運び用のラップトップ端末でデータベースを同期するのがおっくうでしたが、それが解消されました。<br><br>また、パソコンの買い換え時にデータ移行する手間もなくなりました。<br></p><h3 id="h2ffcc73f7c">自動翻訳してくれる</h3><p>日英、英日を含む自動翻訳に対応しています。<br>※自動翻訳しない、という設定も可能です。<br><br>自動翻訳に期待しすぎてはいけませんが、日英翻訳の場合は、翻訳前に文章を整えておくことで、ちょっと手を入れれば良いレベルまで翻訳してくれることもあります。<br><br>また、英日翻訳の場合も、自分が今まで知らなかった慣用句表現などを自動で提示してくれることがあり、助かっています。<br><br>自分が過去に翻訳した対訳データが、自動翻訳よりも優先的に表示されますので、過去の翻訳資産を有効活用しながら手早く翻訳を進められます。<br><br>また、有料になりますが、画面上からプロに翻訳を依頼できます（使った事はありません…）<br></p><h3 id="h1d19dfd676">途中データも自動保存される</h3><p>翻訳途中のデータは自動的にクラウドに保存され、一覧で見ることができます。<br>複数の翻訳作業をすすめている場合、端末を問わずドキュメントを共有でき、進行状況も一目で分かるので重宝します。<br></p><h3 id="h68e16dead8">すっきりデザイン</h3><p>ムダのないクリーンなデザインレイアウトで、作業に集中できます。<br>2015年から利用していますが、ずっと安定して動作しています。<br></p><h3 id="h39c4b2c09f">料金について</h3><p>基本機能は無料で利用できますが、対訳データ（フレーズ集）の保管が1000までという制限がつきます。<br>一番お手頃な有料プランはパーソナルプランのプレミアムで、月額1,280円（税別）です。これを契約すると、対訳データ保管数は10,000になります。<br></p><h2 id="h85fb7a63f8">Grammarly（英文校正）</h2><p><a href="https://www.grammarly.com/" target="_blank" rel="noopener noreferrer">https://www.grammarly.com/</a><br><br>Grammarlyは英文の校正サービスです。<br>言ってしまえばそれだけですが、無料で使える範囲でも、初歩的な英文のミスをしっかり校正してくれますので、これを使わない手はありません。<br><br>YarakuZenに日英対訳データを自分で入力するとき、Grammarlyで一文ごとに下書きしてYarakuZenの入力欄にペーストするという使い方や、YarakuZenで訳し終わったデータをまとめてGrammarlyにペーストしてチェックするという使い方ができます。<br></p><h3 id="h8360fadcde">Yes、クリーンな画面</h3><p>画面はやはりクリーンで、作業に集中できます。<br>画面内にペーストしたときに自動的にプレーンテキストになってくれるのも地味にありがたいです。<br></p><h3 id="h1d2425aa79">連携手段が豊富にある</h3><p>また、ChromeプラグインやMacのネイティブアプリ、WindowsのMS Officeなどへの連携が豊富です。<br>私は現在はそれほど翻訳作業が多くないので、ブラウザのみで手軽に使用しています。<br></p><h3 id="h39c4b2c09f">料金について</h3><p>基本的な校正は無料で利用できます。<br>プレミアムプラン（月額11.66米ドル〜）を契約すると、文脈にあった表現の提案や、表現をより豊かにするための単語提案、文章の盗用チェックまで行ってくれます。<br><br>私も一時期はプレミアムプランを利用していましたが、長文を翻訳する機会が減ったため、現在は無料プランに戻しています。<br></p><h2 id="h33c68e1057">Weblio辞書</h2><p><a href="https://ejje.weblio.jp/" target="_blank" rel="noopener noreferrer">https://ejje.weblio.jp/</a><br><br>Weblio辞書はその名の通り、英和＆和英辞書です。<br></p><h3 id="hf9abc0db83">例文が多い</h3><p>Weblio辞書の最も気に入っている点は、例文が豊富に登録されていることです。<br><br>どの単語がどのようなニュアンスを持っているかを調べるためには、辞書で引いた結果はもちろんのこと、例文をたくさん読むと分かりやすいです。<br><br>Weblio辞書では、どのような場面（かたい？カジュアル？専門用語？古語？）で使われるか、どのような意味範囲で使われるかを何十例も見比べることができます。<br></p><h3 id="h1354157fa5">縦断検索できる</h3><p>英和和英辞書、例文以外にも、類語や自動翻訳を簡単に表示できます。<br>紙の辞書にはない、オンラインならではの利点だと思います。<br><br>また、どう訳したものか…というニュアンスに困ったとき、YarakuZenの自動翻訳に加えてWeblioの方でも自動翻訳にかけてみることで、異なる自動翻訳結果によってアイデアがひらめくことがあります。<br></p><h3 id="h39c4b2c09f">料金について</h3><p>辞書に関しては全ての機能を無料で利用できますが、プレミアムサービス（月額300円）に登録することで、広告が非表示になったり、辞書をカスタマイズできます。<br>有料サービスのお試しキャンペーンを頻繁にやっているようなので、気になる方はぜひ一度登録してみてはいかがでしょうか。<br><br>語彙力診断や単語登録、単語帳機能もあり、前向きに英語を学習していきたい方にはぴったりです。語彙力診断は楽しかったです。<br><br>私はお試しの結果、今は不要と判断して解除してしまいましたが、もし今後英語を仕事に多く活用していきたいと思った場合は再契約すると思います。<br>（現在はあくまでサイト制作メインなもので…）</p>

雑記