<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>Blog &#8211; JunkHack Feed</title>
	<link>/</link>
	<description>アリエクでポチった JUNKHACK</description>
	<lastBuildDate>Thu, 22 Feb 2024 02:55:38 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.6.2</generator>
	<item>
		<title>WordPressのAIプラグイン・AI Engineを使って自分のブログを学習させてみた</title>
		<link>/2024/02/22/post-11712/</link>
		
		<dc:creator><![CDATA[JunkHack]]></dc:creator>
		<pubDate>Thu, 22 Feb 2024 02:55:38 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">/?p=11712</guid>
				<media:thumbnail url="/wp-content/uploads/2025/01/AI-Engine.png" />
							<description><![CDATA[今回は、ちょっと長い記事です。WordPressを使って自分のブログの内容を学習したAIを実装する方法はどのような手法があるかいろいろ考えてみました。ブログの内容をAIに学習させて便利に使う方法を模索したいと思います。  [&#8230;]]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_L w_b_flex w_b_div" style=""><div class="w_b_ava_box w_b_relative w_b_ava_L w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_L w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img decoding="async" src="/wp-content/uploads/2020/09/abata.png" width="96" height="96" alt="じゃんくはっく" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">じゃんくはっく</div></div><div class="w_b_bal_box w_b_bal_L w_b_relative w_b_direction_L w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_L w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_L w_b_shadow_L w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
WordPressのコンテンツをAIに学習させて有効に使う方法がないか調査したよ
</div></div></div></div></div></div></div></div>

<p>今回は、ちょっと長い記事です。WordPressを使って自分のブログの内容を学習したAIを実装する方法はどのような手法があるかいろいろ考えてみました。ブログの内容をAIに学習させて便利に使う方法を模索したいと思います。</p>
<h2>何をしたいのか？</h2>
<p>普段は、<code>ChatGPT</code>やGoogleの<code>Gemini</code>とかにお世話になっています。<code>GPTs</code>が出たことで、自分用にカスタム学習したAIを作ることは簡単にできるようになりました。
しかし、自分のブログを自動的に学習させて、その内容を加味した回答をAIがしてくれる、そんな執事のようなAIはどうやったら作れるのか？　まだ試してはいませんが、<code>GPTs</code>のAPIを使えばそれも可能だと思います。
　今回の記事は、そういう自分用にカスタムしたAIをWordPressに連携するお話です。</p>
<h2>結論から先に</h2>
<p>今、ブログの右下についているボットがありますが、これは<code>DocsBot</code>という仕組みを利用しています。</p>
<img decoding="async" src="/wp-content/uploads/2024/02/docsbot.png" alt="" />
<p>これは、<code>AI Engine</code>とは関係ない<code>DocsBot</code>というサービスで、以下で提供されています。</p>
<blockquote>
<code>DocsBot</code>

URL：<a href="https://docsbot.ai/?via=k07v6t0lcyrnck8ig1ot" data-wpel-link="external" target="_blank" rel="external noopener noreferrer" class="wpel-icon-right">https://docsbot.ai/<span class="wpel-icon wpel-image wpel-icon-1"></span></a>
</blockquote>
<p>例えば、「ベトナムでおすすめの料理は？」と聞くと学習してあるブログ記事の内容を加味した答えが返ってきます。</p>
<img decoding="async" src="/wp-content/uploads/2024/02/db_ss1.png" alt="" />
<p>このブログは、WordPressで管理していますが公開するときは静的ファイルを出力しています。ですので、<code>AI Engine</code>は常時WordPressを稼働させないといけない関係上、今は利用せず、<code>DocsBot</code>のサービスを利用しています。有料のサービスですが、なかなか出来が良いので今は使っています。</p>
<h2>AI Engine Pro版を使うメリットは？</h2>
<p>読者の中には、他のサービスではなく自前のブログ（WEBアプリ）や、WordPressのプラグインで学習済みのAIを連携するような仕組みを作りたいという要望があるかもしれません。自分もWordPressで似たようなことができたらいいなと思っていました。もし、そういうことが出来たら、いろいろと応用が効きそうです。</p>
<p>　調べてみると、Ai EngineのPro版を使うとできそうなことがわかったので、実際に使ってみました。</p>
<blockquote>
<code>Ai Engine Pro</code>　（WordPressのプラグイン）<br>
<code>無料版のWordPress公式</code>：<a href="https://wordpress.org/plugins/ai-engine/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer" class="wpel-icon-right">https://wordpress.org/plugins/ai-engine/<span class="wpel-icon wpel-image wpel-icon-1"></span></a><br>
<code>プロ版</code>：<a href="https://meowapps.com/products/ai-engine-pro/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer" class="wpel-icon-right">https://meowapps.com/products/ai-engine-pro/<span class="wpel-icon wpel-image wpel-icon-1"></span></a><br>
</blockquote>
<p>プロ版は買取のライセンスもありますが、まずは様子を見たいのでスタンダードの年間ライセンスを購入してみました。５つのWEBサイトに適用できて年間69USDです。</p>
<h2>AI Engineとは何か？</h2>
<p>WordPressのAI系プラグインは、AIにコンテンツやタイトル・SEO系のワードを書いてもらう補助をするツールが多いです。ブログを書くときに、WordPressのUI画面から直接、<code>ChatGPT</code>のAPIを通して利用できるメリットがあります。</p>
<p>紹介する<code>AI Engine</code>もこういう機能はありますが、他のプラグインには無い機能としては、<code>Embeddigns</code>からベクターデータベースを指定でき、自分のブログの記事や独自の学習内容を覚えさせることができます。</p>
<img decoding="async" src="/wp-content/uploads/2024/02/ai_embed.png" alt="" />
<p>画像では、すでに１つの記事（以下）を覚えさせた状態です。</p>
<blockquote>
Surface ProのHackintoshが欲しい！（<a href="/2024/02/02/hackintosh-of-surface-pro/" title="LINK" data-wpel-link="internal" rel="noopener noreferrer">LINK</a>）<br>
投稿日: 2024年2月2日 更新日:2024年2月6日
</blockquote>
<p><code>ChatGPT</code>には、質問として「Surface Proの記事は？」と聞いています。答えは</p>
<blockquote>
Surface ProをHackintosh化してmacOSを楽しむプロジェクトについて興味があるんだね。この種のプロジェクトでは、特にSurface Pro7や7+のような高性能モデルが推奨されていることが多いけど、予算の都合でSurface Pro5や6で試すのも一つの方法だっちゃ。中古市場での価格は機種や状態によって大きく異なるけれど、正常な状態のSurface Proはだいたい1万円から5万円程度で手に入るみたいだっちゃ。Hackintosh化は技術的な挑戦が多いけど、macOSのタッチ操作体験やその他の利点を探究する価値は確かにあるね。詳細な情報は専門のサイトで確認するといいだっちゃ。
</blockquote>
<p>と回答するようになりました。素晴らしいですね！！</p>
<h3>AI Engineで使えるベクターデータベースは？</h3>
<p>設定から、<code>Environments for Embeddings</code> でベクターDBの設定が可能です。今は、<code>Pinecone</code>と<code>Qdrant</code> が使えます。この両者のメリット・デメリットはまだよく調べていませんが、どちらも無料枠があります。本格的に利用したい場合は、課金したほうがよいかもです。</p>
<p>このベクターデータベースとはmysqlとかと違っていて面白い仕組みなんですが、また違う記事で取り上げてみたいなと思います。</p>
<blockquote>
<ul>
<li>ベクターデータベース：Pinecone<br>
　URL：<a href="https://app.pinecone.io/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer" class="wpel-icon-right">https://app.pinecone.io/<span class="wpel-icon wpel-image wpel-icon-1"></span></a><br></li>
<li>ベクターデータベース：Qdrant<br>
　URL：<a href="https://cloud.qdrant.io/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer" class="wpel-icon-right">https://cloud.qdrant.io/<span class="wpel-icon wpel-image wpel-icon-1"></span></a></li>
</ul>
</blockquote>
<h2>自分のWordPressのAPIから使ってみる</h2>
<p>他の利用例として、自分のWordPressからAPIを提供できるようです。<code>設定</code>の<code>Advanced</code>から、<code>Public API</code> にチェックすれば利用できます。</p>
<img decoding="async" src="/wp-content/uploads/2024/02/Public_API.png" alt="" />
<p>マニュアル（<a href="https://meowapps.com/ai-engine/api/" title="LINK" data-wpel-link="external" target="_blank" rel="external noopener noreferrer" class="wpel-icon-right">LINK<span class="wpel-icon wpel-image wpel-icon-1"></span></a>）によると、以下のように利用できるようです。</p>
<p><code>REST API</code>：<code><a href="https://domains.com/wp-json/mwai/v1/{function_name" data-wpel-link="external" target="_blank" rel="external noopener noreferrer" class="wpel-icon-right">https://domains.com/wp-json/mwai/v1/{function_name<span class="wpel-icon wpel-image wpel-icon-1"></span></a>}</code></p>
<p>認証は、<code>Bearer Token</code> が使えるようです。例えば、「おはよう。あなたについて教えて」とAPI経由で投げる場合は、</p>
<pre><code>curl --location --request POST '/wp-json/mwai/v1/simpleChatbotQuery?prompt=%7BURL%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89%E3%81%97%E3%81%9F%E8%B3%AA%E5%95%8F%E6%96%87%7D&amp;botId=%7B%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%83%9C%E3%83%83%E3%83%88%E3%81%AEID%7D' \
--header 'Authorization: Bearer {トークン}'</code></pre>
<p>と聞くと以下のようにJsonが返ってきます。</p>
<pre><code>{
    "success": true,
    "data": "おはよう！私はぴーで、25歳の元気な女性だよ。いちごが大好きなんだっちゃ！"
}</code></pre>
<p>カスタム学習した内容で回答が返っていますね。JavaScriptからもこれで使えますね。</p>
<h2>OpenRouter経由でGemini proも使える</h2>
<p>設定の<code>Environments for AI</code>では <code>Type</code>として <code>OpenRouter</code>や<code>Azure(OpenAI)</code>も選べます。これにより、例えば、<code>Gemini pro</code> なども利用できます。</p>
<img decoding="async" src="/wp-content/uploads/2024/02/OpenRouter.png" alt="" />
<h3>まとめ</h3>
<p>今回、なんとなくわかったのは以下となります。</p>
<ul>
<li>AI EngineのPro版は、ベクターデータベースとも連携できる</li>
<li><code>Pinecone </code>と<code>Qdrant </code>が現在使える</li>
<li>WordPressの記事を上記のインポートできる機能がある</li>
<li>つまり、学習させることが可能</li>
<li>学習させた内容を回答させることが可能</li>
<li>APIは、WordPressのREST APIを通して使える</li>
<li>認証は<code>Bearer Token</code>が使える</li>
<li>外部のAPIは、<code>OpenRouter</code>経由で、<code>Gemini pro</code>も使える</li>
</ul>
<h3>あとがき</h3>
<p>応用すればいろいろと使えそうです。たとえば、自社のナレッジシステムを学習させた自社内AI チャットGPTとか。あとは、3Dオブジェクトと組み合わせて、音声でキャラクターとお話、会話できるものとか。アプリに組み込んで、ヘルプのやり取りをさせたりとか。</p>
<p>もっと機能を限定してシンプルなWordPressのプラグインとか作りたいですね。</p>
<h3>著者にメッセージ</h3>
<p>間違いのご指摘など、コメントじゃなくて、個人的にやりとりしたい場合は<a class="c-link-text" href="/mail/" target="_blank" rel="noopener noreferrer" data-wpel-link="internal">こちらから</a>どうぞ。お返事が遅くなるときもありますが、ご了承を。</p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>音声認識のやることリストで遊んでみた</title>
		<link>/2022/06/15/artyom-js_sticky-notes-semo/</link>
		
		<dc:creator><![CDATA[JunkHack]]></dc:creator>
		<pubDate>Tue, 14 Jun 2022 15:50:57 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<guid isPermaLink="false">/?p=11399</guid>
				<media:thumbnail url="/wp-content/uploads/2022/06/voice-ctl.png" />
							<description><![CDATA[最近の音声認識って、どんな感じなんだろう？ と思ったのでリサーチしてみました。きっと誰かが作っているだろうと思うので調査開始です。いくつか見つかりましたが、今日は、ブラウザが標準で持っている音声認識の機能を使って遊んでみ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_L w_b_flex w_b_div" style=""><div class="w_b_ava_box w_b_relative w_b_ava_L w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_L w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img decoding="async" src="/wp-content/uploads/2020/09/abata.png" width="96" height="96" alt="じゃんくはっく" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">じゃんくはっく</div></div><div class="w_b_bal_box w_b_bal_L w_b_relative w_b_direction_L w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_L w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_L w_b_shadow_L w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
<p>音声認識ってやったことなかったなー！</p>
</div></div></div></div></div></div></div></div>



<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_mla w_b_jc_fe w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_R w_b_flex w_b_jc_fe w_b_div" style=""><div class="w_b_bal_box w_b_bal_R w_b_relative w_b_direction_R w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_R w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_R w_b_shadow_R w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
<p>WEB技術だけで出来るみたいですね！</p>
</div></div></div></div></div><div class="w_b_ava_box w_b_relative w_b_ava_R w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_R w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img decoding="async" src="/wp-content/uploads/2020/09/pi-.png" width="96" height="96" alt="ぴー" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">ぴー</div></div></div></div></div>



<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_L w_b_flex w_b_div" style=""><div class="w_b_ava_box w_b_relative w_b_ava_L w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_L w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img decoding="async" src="/wp-content/uploads/2020/09/abata.png" width="96" height="96" alt="じゃんくはっく" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">じゃんくはっく</div></div><div class="w_b_bal_box w_b_bal_L w_b_relative w_b_direction_L w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_L w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_L w_b_shadow_L w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
<p>そうみたい。最近のブラウザは賢いですね</p>
</div></div></div></div></div></div></div></div>



<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_mla w_b_jc_fe w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_R w_b_flex w_b_jc_fe w_b_div" style=""><div class="w_b_bal_box w_b_bal_R w_b_relative w_b_direction_R w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_R w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_R w_b_shadow_R w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
<p>実用的なサンプルをお願いします〜</p>
</div></div></div></div></div><div class="w_b_ava_box w_b_relative w_b_ava_R w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_R w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img decoding="async" src="/wp-content/uploads/2020/09/pi-.png" width="96" height="96" alt="ぴー" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">ぴー</div></div></div></div></div>



<p>最近の音声認識って、どんな感じなんだろう？ と思ったのでリサーチしてみました。きっと誰かが作っているだろうと思うので調査開始です。いくつか見つかりましたが、今日は、ブラウザが標準で持っている音声認識の機能を使って遊んでみようかなと思います。</p>



<h3 class="wp-block-heading">さっそくデモです</h3>



<p>さて、まずはデモを実際に触ってみてもらったほうが速いかと思います。PCでChromeブラウザであれば動作すると思います。Safariでも動作しました。</p>
<blockquote>
<p>Artyom.js &#8211; A Sticky Notes Demo</p>
<p><a href="https://take-i.github.io/artyom-todo/" target="_blank" rel="noopener external noreferrer" data-wpel-link="external" class="wpel-icon-right">https://take-i.github.io/artyom-todo/<span class="wpel-icon wpel-image wpel-icon-1"></span></a></p>
</blockquote>



<p><a href="https://take-i.github.io/artyom-todo/" target="_blank" rel="noopener external noreferrer" data-wpel-link="external"><img loading="lazy" decoding="async" class="size-full wp-image-11405 aligncenter" src="/wp-content/uploads/2022/06/img.png" alt="" width="1288" height="656" srcset="/wp-content/uploads/2022/06/img.png 1288w, /wp-content/uploads/2022/06/img-1024x522.png 1024w, /wp-content/uploads/2022/06/img-768x391.png 768w, /wp-content/uploads/2022/06/img-984x501.png 984w" sizes="(max-width: 1288px) 100vw, 1288px" /></a></p>



<p>このような付箋紙のToDoリストが音声認識で追加・削除できるものです。メモの追加は、以下のように喋れば追加できます。</p>
<ul>
<li>ソースコードレビューをする　メモ作成</li>
</ul>
<p>削除したい場合は、</p>
<ul>
<li>1番目のメモを削除</li>
</ul>
<p>とすれば、消えます。また、付箋紙をクリックすれば、その内容を喋ってくれます。なお、English USAや、<span style="color: initial; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;">English Great Britain にすると英語の発音じゃないと登録、削除できません。英語の発音練習とかよいのかもしれませんね。</span></p>



<h3 class="wp-block-heading">ソースコード</h3>



<p>元ネタは、以下となります。</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>github : Artyom.js</p><cite><a href="https://github.com/sdkcarlos/artyom.js" target="_blank" rel="noreferrer noopener external" data-wpel-link="external" class="wpel-icon-right">https://github.com/sdkcarlos/artyom.js<span class="wpel-icon wpel-image wpel-icon-1"></span></a></cite></blockquote>



<p>このToDoリストのサンプルアプリの元ソースのGITは不明でしたが、日本語化してあるのが自分のgithub リポジトリにコミットしておきました。</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>artyom.js &#8211; todo list</p><cite><a href="https://github.com/take-i/artyom-todo" target="_blank" rel="noreferrer noopener external" data-wpel-link="external" class="wpel-icon-right">https://github.com/take-i/artyom-todo<span class="wpel-icon wpel-image wpel-icon-1"></span></a></cite></blockquote>



<h3 class="wp-block-heading">どうやって動作しているのか？</h3>



<p>とりあえず、サンプルを日本語化して日本語の音声で話せ、認識できるということがわかりました。さて、これはどういう仕組みで動作しているのでしょうか？　どこぞやのAPIを叩いているのかと思っていたのですが、ソースをみるとそうではないようでした。</p>
<p>　はい、これはWeb Speech APIというようで、つまりはHTML5 対応のブラウザに実装されている仕様ということでした。ほとんどの主要ブラウザーではサポートしているようです。</p>
<p><a href="https://developer.mozilla.org/ja/docs/Web/API/SpeechSynthesis#browser_compatibility" target="_blank" rel="noopener external noreferrer" data-wpel-link="external"><img loading="lazy" decoding="async" class="size-full wp-image-11408 aligncenter" src="/wp-content/uploads/2022/06/b1.png" alt="" width="773" height="970" srcset="/wp-content/uploads/2022/06/b1.png 773w, /wp-content/uploads/2022/06/b1-768x964.png 768w" sizes="(max-width: 773px) 100vw, 773px" /></a></p>



<p>注意するのは、IEとAndroid版のOperaブラウザー、そしてAndroidのWebViewではまだ動作しないって書いてありますね。PWA化したWEBアプリなら大丈夫そうです。</p>
<p>　音声をしゃべらせる部分が、SpeechSynthesisUtterance というようです。意味としては、音声発話ということですね。</p>
<p>　そして、音声を認識する部分は、SpeechRecognitionということのようです。こちらのブラウザ対応状況は</p>
<p><a href="https://developer.mozilla.org/ja/docs/Web/API/SpeechRecognition/SpeechRecognition#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%AE%9F%E8%A3%85%E7%8A%B6%E6%B3%81" target="_blank" rel="noopener external noreferrer" data-wpel-link="external"><img loading="lazy" decoding="async" class="size-full wp-image-11409 aligncenter" src="/wp-content/uploads/2022/06/b4.png" alt="" width="778" height="345" srcset="/wp-content/uploads/2022/06/b4.png 778w, /wp-content/uploads/2022/06/b4-768x341.png 768w" sizes="(max-width: 778px) 100vw, 778px" /></a></p>



<p>こちらは、AndroidのWebViewもいけるようですが、Firefoxや、Operaはだめなようです。ChromeやSafariはPC、スマホは大丈夫なようですね。</p>



<h3 class="wp-block-heading">まとめ</h3>



<p>今回、なんとなくわかったのは以下となります。</p>



<p>・最近のブラウザは賢くなって音声発話や音声認識もできる<br>・ChromeやSafarriやEdgeは問題なく使えそう。<br>・スマホは発話が、AndroidのWebViewでは使えないので注意が必要。<br>・httpsのSSL通信でないと、ブラウザからマイクへの許可許諾のダイアログがアクセスするごとに出る<br>・デモ版のJSはVerが0.9.6と最新1.0.6と比べて少し低いので、最新も使ってみたい</p>



<h3 class="wp-block-heading">あとがき</h3>



<p>音声認識や、音声合成は利用用途によって使えるので何か案件が来た時には積極的に使っていきたいですね。声フォントとか使えば、自然な喋りが実現できるし、キーボード入力が苦手な方は音声入力のようが良いですしね。</p>



<h3 class="wp-block-heading">著者にメッセージ</h3>



<p></p>


<p>間違いのご指摘など、コメントじゃなくて、個人的にやりとりしたい場合は<a class="c-link-text" href="/mail/" target="_blank" rel="noopener noreferrer" data-wpel-link="internal">こちらから</a>どうぞ。お返事が遅くなるときもありますが、ご了承を。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>アルゴリア検索を導入してみたら、速くて便利で気に入った話！</title>
		<link>/2022/05/05/algoliasearch/</link>
		
		<dc:creator><![CDATA[JunkHack]]></dc:creator>
		<pubDate>Wed, 04 May 2022 20:08:40 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[高速化]]></category>
		<guid isPermaLink="false">/?p=11202</guid>
				<media:thumbnail url="/wp-content/uploads/2022/05/AlgoliaSearch.png" />
							<description><![CDATA[ゴールデンウィーク真っ最中ですね！ 皆さんは何してますか？ 僕は、まったりとPCと戯れて、世界中の面白いネタを探しています。もうね、あるわあるわ。面白ネタがたくさんあって、世界は広いなと、再認識しました。 さて、今回のネ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_L w_b_flex w_b_div" style=""><div class="w_b_ava_box w_b_relative w_b_ava_L w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_L w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img loading="lazy" decoding="async" src="/wp-content/uploads/2020/09/abata.png" width="96" height="96" alt="じゃんくはっく" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">じゃんくはっく</div></div><div class="w_b_bal_box w_b_bal_L w_b_relative w_b_direction_L w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_L w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_L w_b_shadow_L w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
<p>静的サイトでも動作する検索を模索してみたよ</p>
</div></div></div></div></div></div></div></div>



<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_mla w_b_jc_fe w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_R w_b_flex w_b_jc_fe w_b_div" style=""><div class="w_b_bal_box w_b_bal_R w_b_relative w_b_direction_R w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_R w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_R w_b_shadow_R w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
<p>Google検索とかじゃなくて？</p>
</div></div></div></div></div><div class="w_b_ava_box w_b_relative w_b_ava_R w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_R w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img loading="lazy" decoding="async" src="/wp-content/uploads/2020/09/pi-.png" width="96" height="96" alt="ぴー" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">ぴー</div></div></div></div></div>



<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_L w_b_flex w_b_div" style=""><div class="w_b_ava_box w_b_relative w_b_ava_L w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_L w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img loading="lazy" decoding="async" src="/wp-content/uploads/2020/09/abata.png" width="96" height="96" alt="じゃんくはっく" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">じゃんくはっく</div></div><div class="w_b_bal_box w_b_bal_L w_b_relative w_b_direction_L w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_L w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_L w_b_shadow_L w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
<p>自分のサイトにもっと特化して検索できるやつが欲しかったのよ</p>
</div></div></div></div></div></div></div></div>



<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_mla w_b_jc_fe w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_R w_b_flex w_b_jc_fe w_b_div" style=""><div class="w_b_bal_box w_b_bal_R w_b_relative w_b_direction_R w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_R w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_R w_b_shadow_R w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
<p>このブログってGitHub Pagesでしょ？ どうやるのかしら？</p>
</div></div></div></div></div><div class="w_b_ava_box w_b_relative w_b_ava_R w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_R w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img loading="lazy" decoding="async" src="/wp-content/uploads/2020/09/pi-.png" width="96" height="96" alt="ぴー" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">ぴー</div></div></div></div></div>



<p>ゴールデンウィーク真っ最中ですね！ 皆さんは何してますか？</p>



<p>僕は、まったりとPCと戯れて、世界中の面白いネタを探しています。もうね、あるわあるわ。面白ネタがたくさんあって、世界は広いなと、再認識しました。</p>



<p></p>



<p>さて、今回のネタは「検索」です。このブログはgithub pages ってのを使っていて静的なサイトなんです。見た目はWordPressのブログサイトっぽいのですが、htmlとcssとjsだけの構成でPHPとかデータベースとか動作していないんです。なので、自分のサイトの検索機能はGoogleのを使っているんですが、もっと良いのはないかなーと探していました。こういう分野のエンジニアは、フロントエンド・エンジニアと、いうんですが、自分は苦手分野なのであまり知識がありませんでした。</p>



<h3 class="wp-block-heading">見つけたところは、Electronのサイト！</h3>



<p><ruby>Electron<rt>えれくとろん</rt></ruby>っていう、仕組みがあるのですがこの本家サイトの日本語ドキュメントにその良い例が載っています。</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Electron ドキュメント</p><cite><a href="https://www.electronjs.org/ja/docs/latest/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external" class="wpel-icon-right">https://www.electronjs.org/ja/docs/latest/<span class="wpel-icon wpel-image wpel-icon-1"></span></a></cite></blockquote>



<p>このサイトを見ると、キーボード操作 CMD＋K で検索ウィンドウが出てきます。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="633" src="/wp-content/uploads/2022/05/Electron-doc-1024x633.png" alt="" class="wp-image-11205" srcset="/wp-content/uploads/2022/05/Electron-doc-1024x633.png 1024w, /wp-content/uploads/2022/05/Electron-doc-768x474.png 768w, /wp-content/uploads/2022/05/Electron-doc-984x608.png 984w, /wp-content/uploads/2022/05/Electron-doc.png 1099w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>こんな感じで、検索文字をタイプするごとにそのキーワードを含んだページとヒットした文字部分が出てくるわけです。検索キーワードの提案（サジェスト）が出るのではなく、検索結果がリアルタイムで表示されるイメージです。このキーワードに対して、その候補のページが出てくる仕組み・検索システムが優秀で使いやすいんです。</p>



<p>で、この仕組みってどうやって作っているんだろうなーと思っていたところ、このウインドウの下には<ruby>algolia<rt>あるごりあ</rt></ruby> と表示されています。どうやら、algolia の検索システムを使っているようです。</p>



<p>ちなみに、Electronっていのは、簡単に紹介すると以下です。そのうち、ネタにしようかなと思っています</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><strong>Electron</strong>（エレクトロン）とは、ウェブ技術でデスクトップアプリケーションを作成できるテクノロジーです。 HTMLとCSS、JavaScriptを使って開発し、WindowsとmacOSの両OSのアプリケーションを1つのコードから作ることができます。</p><cite><a href="https://ics.media/entry/7298/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external" class="wpel-icon-right">https://ics.media/entry/7298/<span class="wpel-icon wpel-image wpel-icon-1"></span></a></cite></blockquote>



<h3 class="wp-block-heading">algolia の検索システムとは何なのか？</h3>



<p>さて、algoliaの検索とはいったい何なのでしょうか？ 英語サイトですが、サービス名称は「<ruby>Algolia Search<rt>あるごりあ　さーち</rt></ruby>」と言うようです。</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Algolia Search</p><cite><a href="https://www.algolia.com/products/search-and-discovery/hosted-search-api/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external" class="wpel-icon-right">https://www.algolia.com/products/search-and-discovery/hosted-search-api/<span class="wpel-icon wpel-image wpel-icon-1"></span></a></cite></blockquote>



<p>FAQのところを見ると、概要が見えてきます。まず、Algoliaは高速で、<ruby>SaaS<rt>さーす</rt></ruby>製品でモバイル向けにも特化してあり、日本語も使えるようです。</p>



<p>機能は大きくわけて、２つあるようです。１つは、Autocompleteと呼ばれる、検索キーワードを入れると、リアルタイムで検索結果が出る仕組み。もう一つは、検索キーワードの提案（サジェスト）のAutoCompleteで、これは「Query Suggestions」を設定すると可能のようです。</p>



<p>こういうのは、まず使ってみるのが手っ取り早いです。幸い、WordPressでalgolia検索を使うのは簡単です。まずは、このサイトですでに実装してあるので、それを紹介してみます。</p>



<h3 class="wp-block-heading">このブログでの実装例</h3>



<p>このブログでは、キーボード操作「/」スラッシュをタイプすると、以下のような検索ウィンドウが出てきます。</p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="795" height="266" src="/wp-content/uploads/2022/05/screenshot-1.png" alt="" class="wp-image-11209" srcset="/wp-content/uploads/2022/05/screenshot-1.png 795w, /wp-content/uploads/2022/05/screenshot-1-768x257.png 768w" sizes="(max-width: 795px) 100vw, 795px" /></figure></div>



<p>検索テキスト入力エリアにフォーカスするには、「.」ドットをタイプするかマウスでフォーカスします。適当な検索ワードをタイプすればその結果を含むページが下に表示されます。これは、検索キーワードのサジェストとは違いますが、検索結果がすぐに出てくるので検索結果に遷移しなくても良くて便利です。検索ワードをタイプしてから、検索結果が出てくるのが異常に速くないでしょうか？</p>



<h3 class="wp-block-heading">WordPressに入れてみる</h3>



<p>では、このブログと同じことをしてみたい人向けに具体的な手順の紹介です。２つプラグインを入れるのですが、まず、１つ目は以下です。</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>WP Search with Algolia</p><cite><a href="https://ja.wordpress.org/plugins/wp-search-with-algolia/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external" class="wpel-icon-right">https://ja.wordpress.org/plugins/wp-search-with-algolia/<span class="wpel-icon wpel-image wpel-icon-1"></span></a></cite></blockquote>



<div class="wp-block-image"><figure class="aligncenter size-full"><a href="https://ja.wordpress.org/plugins/wp-search-with-algolia/" target="_blank" rel="noopener external noreferrer" data-wpel-link="external"><img loading="lazy" decoding="async" width="940" height="417" src="/wp-content/uploads/2022/05/WP_Search_with_Algolia.png" alt="" class="wp-image-11210" srcset="/wp-content/uploads/2022/05/WP_Search_with_Algolia.png 940w, /wp-content/uploads/2022/05/WP_Search_with_Algolia-768x341.png 768w" sizes="(max-width: 940px) 100vw, 940px" /></a></figure></div>



<p>次に、algolia のサイトではアカウントを作成し、Applicationを作成し、APIキーを参照します。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="628" src="/wp-content/uploads/2022/05/API_Keys-Algolia-1024x628.png" alt="" class="wp-image-11212" srcset="/wp-content/uploads/2022/05/API_Keys-Algolia-1024x628.png 1024w, /wp-content/uploads/2022/05/API_Keys-Algolia-768x471.png 768w, /wp-content/uploads/2022/05/API_Keys-Algolia-984x604.png 984w, /wp-content/uploads/2022/05/API_Keys-Algolia.png 1079w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>で、その各種項目を先ほどのWordPressプラグインに設定します。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="779" src="/wp-content/uploads/2022/05/6478b83905b21b77062736e51ba56372-1024x779.png" alt="" class="wp-image-11211" srcset="/wp-content/uploads/2022/05/6478b83905b21b77062736e51ba56372-1024x779.png 1024w, /wp-content/uploads/2022/05/6478b83905b21b77062736e51ba56372-768x584.png 768w, /wp-content/uploads/2022/05/6478b83905b21b77062736e51ba56372-984x748.png 984w, /wp-content/uploads/2022/05/6478b83905b21b77062736e51ba56372.png 1069w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>少し説明は端折りますが、「Search Page」では、とりあえず真ん中の「Use Algolia in the backend」を選んでおけば良いでしょう。Autocomplete では、検索させる対象、たとえば「投稿」を選択してインデックスを再作成しておきます。</p>



<h3 class="wp-block-heading">WP標準の検索ウィンドウで確認</h3>



<p>WP標準の検索ウィンドウで、検索キーワードを入れたら、検索結果が出てくるようになっていれば成功です。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1005" height="927" src="/wp-content/uploads/2022/05/wp-search.png" alt="" class="wp-image-11213" srcset="/wp-content/uploads/2022/05/wp-search.png 1005w, /wp-content/uploads/2022/05/wp-search-768x708.png 768w, /wp-content/uploads/2022/05/wp-search-984x908.png 984w" sizes="(max-width: 1005px) 100vw, 1005px" /></figure>



<p><ruby>アイキャッチ<rt>記事の画像</rt></ruby>があれば、こんな感じで表示されるかなと思います。</p>



<h3 class="wp-block-heading">キーボード操作で検索ウィンドウを出す</h3>



<p>続いて、キーボード操作で、検索窓がポップアップする部分です。検索結果に遷移しなくて良いので、どのページからも検索ウィンドウが表示されれば便利かなと思いました。</p>



<p>そのような動作をするプラグインを昔みたことがあったので検索してみました。「wp-keyboard-nav」というのがあったので、それには検索窓がついていないので、少し手直しして、以下のような野良プラグインを作ってみました。</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Keyboard PopUP algolia search<br>WordPress の野良プラグインです。プラグイン名称は、<code>Keyboard PopUP algolia search</code>&nbsp;です。 キーボード操作でポップアップする検索ウィンドウです。algolia検索と組み合わせて使うために、改造しました。元ソースは、wp-keyboard-nav&nbsp;<a href="https://github.com/tareq1988/wp-keyboard-nav" data-wpel-link="external" target="_blank" rel="external noopener noreferrer" class="wpel-icon-right">LINK<span class="wpel-icon wpel-image wpel-icon-1"></span></a>&nbsp;というプラグインです。</p><cite><a href="https://github.com/take-i/wp-keypopup-algolia" target="_blank" rel="noreferrer noopener external" data-wpel-link="external" class="wpel-icon-right">https://github.com/take-i/wp-keypopup-algolia<span class="wpel-icon wpel-image wpel-icon-1"></span></a></cite></blockquote>



<p>こちらは何も設定は必要ありません。プラグインを入れれば、すべてのページでキーボード操作で検索ウィンドウが出てくるかと思います。</p>



<h3 class="wp-block-heading">レスポンス時間はどのくらいなのか？</h3>



<p>検索ウィンドウに１文字づつタイプするごとに、Algolia のAPIにリクエストが飛び、レスポンスされます。何回か試したのですが、ほとんどが100ms 以内に帰ってきています。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="802" height="650" src="/wp-content/uploads/2022/05/r-time.png" alt="" class="wp-image-11220" srcset="/wp-content/uploads/2022/05/r-time.png 802w, /wp-content/uploads/2022/05/r-time-768x622.png 768w" sizes="(max-width: 802px) 100vw, 802px" /></figure>



<p>以下のように、20ms以内くらいで帰ってくるようです。劇速いです！</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="798" height="581" src="/wp-content/uploads/2022/05/r-time1.png" alt="" class="wp-image-11221" srcset="/wp-content/uploads/2022/05/r-time1.png 798w, /wp-content/uploads/2022/05/r-time1-768x559.png 768w" sizes="(max-width: 798px) 100vw, 798px" /></figure>



<p></p>



<h3 class="wp-block-heading">まとめ</h3>



<p>今回、なんとなくわかったのは以下となります。</p>



<p>・Algolia の無料枠は、10,000検索リクエスト/月<br>・検索対象の数制限は、10,000 レコード<br>・無料枠利用にカード登録は必要なし<br>・個人用サイトなら無料枠で足りそうだが、しばらく運用してみる<br>・有料版は、1000リクエスト/月 で1.5ドル<br>・検索クエリーは１文字づつ、APIリクエストが飛んでいる<br>・その、ほとんどが20ms以内にレスポンスされている<br>・検索結果が検索窓に検索キーワードを入れた時点で表示される<br>・↑これがすごく便利で気に入りました<br>・日本語にも対応していている<br>・紹介はしきれなかったが、静的サイトでも少しの手入れで動作する<br>・速いというのは、正義だなと改めて実感<br>・キーボードで出てくる検索ウィンドウは思ったより、便利<br>・algolia にINDEXデータを入れる部分はwordpressで可能<br>・algoliaの管理画面でAnalyticsがあり、検索ワードや表示ページなど統計データが見れる<br></p>



<h3 class="wp-block-heading">あとがき</h3>



<p>英語サイトの情報なので、まだあまり日本語の情報がないのですが、この手のサイト内検索を商材にするサービスは他にもたくさんあります。商用のサイトなら、たくさんある商品や情報の中から、お客さんが希望するモノにたどり着きやすくするため、サイト内検索は結構重要だと思っています。</p>



<p> 今回の話は、バックエンドにデータベースがあって、それを直接検索参照させる従来のやり方ではないケースです。このブログのように、静的なページがあってそれを対象に高速で検索させる場合は何が正解なのでしょうか。ある人は、全文検索エンジンを入れたらどう？ とか。検索用のインデッックスを持ったDBを用意すればよいとか。</p>



<p>このブログの場合は、記事の作成時点ではWordPressで管理していて、書き出すときに静的なHTMLにしています。全ての記事のインデックス（目次情報）は、WordPressで動作している時点でAlgolia に投げられます。静的ページからの検索は、JavaScript経由でAlgoliaに参照され、文字が入るたびにリアルタイムに検索結果が表示される仕組みです。</p>



<p>データベースは無く、作るつもりもないので静的ページをどうやって手間なく、検索させるか？ の１つの解だとは思います。</p>



<h3 class="wp-block-heading">著者にメッセージ</h3>



<p></p>


<p>間違いのご指摘など、コメントじゃなくて、個人的にやりとりしたい場合は<a class="c-link-text" href="/mail/" target="_blank" rel="noopener noreferrer" data-wpel-link="internal">こちらから</a>どうぞ。お返事が遅くなるときもありますが、ご了承を。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>WordPressをhtmlファイルに出してGitHub Pagesで運用するスタイルが最高</title>
		<link>/2022/01/10/wordpress-to-githubpages/</link>
		
		<dc:creator><![CDATA[JunkHack]]></dc:creator>
		<pubDate>Sat, 15 Jan 2022 17:09:59 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">/?p=11019</guid>
				<media:thumbnail url="/wp-content/uploads/2022/01/hello-github-pages.gif" />
							<description><![CDATA[長らく、スマホ上でWordPress環境を作って、自家サーバで動かしていましたがSLAも納得の数値を出せたのでそろそろ違う環境にしようかなと、考えていました。 　今日のお話は、WordPressから静的なHTMLファイル [&#8230;]]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_L w_b_flex w_b_div" style=""><div class="w_b_ava_box w_b_relative w_b_ava_L w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_L w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img loading="lazy" decoding="async" src="/wp-content/uploads/2020/09/abata.png" width="96" height="96" alt="じゃんくはっく" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">じゃんくはっく</div></div><div class="w_b_bal_box w_b_bal_L w_b_relative w_b_direction_L w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_L w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_L w_b_shadow_L w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
<p>スマホサイトでWordPressも納得したしなー！</p>
</div></div></div></div></div></div></div></div>



<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_mla w_b_jc_fe w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_R w_b_flex w_b_jc_fe w_b_div" style=""><div class="w_b_bal_box w_b_bal_R w_b_relative w_b_direction_R w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_R w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_R w_b_shadow_R w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
<p>あ〜、例の記事をネタにするんですね！</p>
</div></div></div></div></div><div class="w_b_ava_box w_b_relative w_b_ava_R w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_R w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img loading="lazy" decoding="async" src="/wp-content/uploads/2020/09/pi-.png" width="96" height="96" alt="ぴー" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">ぴー</div></div></div></div></div>



<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_L w_b_flex w_b_div" style=""><div class="w_b_ava_box w_b_relative w_b_ava_L w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_L w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img loading="lazy" decoding="async" src="/wp-content/uploads/2020/09/abata.png" width="96" height="96" alt="じゃんくはっく" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">じゃんくはっく</div></div><div class="w_b_bal_box w_b_bal_L w_b_relative w_b_direction_L w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_L w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_L w_b_shadow_L w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
<p>やっぱり運用が楽なのがいいしね！</p>
</div></div></div></div></div></div></div></div>



<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_mla w_b_jc_fe w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_R w_b_flex w_b_jc_fe w_b_div" style=""><div class="w_b_bal_box w_b_bal_R w_b_relative w_b_direction_R w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_R w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_R w_b_shadow_R w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
<p>率直な感想なんかを聞いてみたいわ。</p>
</div></div></div></div></div><div class="w_b_ava_box w_b_relative w_b_ava_R w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_R w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img loading="lazy" decoding="async" src="/wp-content/uploads/2020/09/pi-.png" width="96" height="96" alt="ぴー" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">ぴー</div></div></div></div></div>



<p>長らく、スマホ上でWordPress環境を作って、自家サーバで動かしていましたがSLAも納得の数値を出せたのでそろそろ違う環境にしようかなと、考えていました。</p>



<p>　今日のお話は、WordPressから静的なHTMLファイルを書き出してそれをGitHub Pages やNETLIFYで、独自ドメインを使って動かしてみた感想なんかを書きたいなと思います。具体的な手順なんかは記載していませんので、要望があれば別ネタにしたいなと思います。</p>



<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"></div>
</div>
</div></div>



<h3 class="wp-block-heading">WordPressでの編集から記事公開までの概略</h3>



<p>全体の流れは、基本的に以下の３ステップです。</p>



<p>　(1) ローカル環境のWordPressで記事を書く</p>



<p>　(2) Simply Staticプラグインで、「静的ファイルを生成する」ボタンを押す</p>



<p>　(3) 上記でできたファイルを展開して、Github Pages のリポジトリへコミットする</p>



<p>Github Pages の設定をしておけば、こんな感じですね。(2) のファイル生成時間は、動作速度、記事数や画像数などにもよって変わりますが、自分の場合は１時間弱くらいでした。</p>



<h3 class="wp-block-heading">WordPressのデータをどうやって、静的ファイルにするの？</h3>



<p>これは非常によくできたプラグインがあります。それを使うだけ。いろいろ検討しましたが以下のが一押しです。</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Simply Static<br><a rel="noreferrer noopener external" href="https://ja.wordpress.org/plugins/simply-static/" target="_blank" data-wpel-link="external" class="wpel-icon-right">HTTPS://JA.WORDPRESS.ORG/PLUGINS/SIMPLY-STATIC/<span class="wpel-icon wpel-image wpel-icon-1"></span></a></p></blockquote>



<p>これは、Pro 版と無償版があります。今使っているのは、無償版ですが、Pro版も検討しています。とりあえずは、無償版でも十分な機能を持っています。以下のように「相対 URL を使用する」でファイルを書き出す設定をしておきます。なぜ相対URLにしているかといえば、ミラーサイトにも公開しているからです。このブログの場合、以下のように複数のリポジトリへコミットしているからです。</p>



<h4 class="wp-block-heading">　メインサイト：/</h4>



<h4 class="wp-block-heading">　エイリアス：https://junkhack.gpl.jp/</h4>



<h4 class="wp-block-heading">　ミラーサイト：https://jh.gpl.jp/</h4>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="650" src="/wp-content/uploads/2022/01/Simply_Static_setting-1024x650.png" alt="" class="wp-image-11023" srcset="/wp-content/uploads/2022/01/Simply_Static_setting-1024x650.png 1024w, /wp-content/uploads/2022/01/Simply_Static_setting-768x488.png 768w, /wp-content/uploads/2022/01/Simply_Static_setting-984x625.png 984w, /wp-content/uploads/2022/01/Simply_Static_setting.png 1082w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>あとは、「静的ファイルを生成する」でOKです。このブログの場合、583個の記事を１時間弱で書き出せました。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="582" src="/wp-content/uploads/2022/01/Simply_Static_1-1024x582.png" alt="" class="wp-image-11028" srcset="/wp-content/uploads/2022/01/Simply_Static_1-1024x582.png 1024w, /wp-content/uploads/2022/01/Simply_Static_1-768x436.png 768w, /wp-content/uploads/2022/01/Simply_Static_1-984x559.png 984w, /wp-content/uploads/2022/01/Simply_Static_1.png 1121w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading">書き出したあとはどうするの？</h3>



<p>無事に静的ファイルが描き出せたら、圧縮ファイルを展開してGithub Pages のリポジトリにコミットするだけです。自分は、Sourcetree を使っています。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="904" height="546" src="/wp-content/uploads/2022/01/Simply_Static_2.png" alt="" class="wp-image-11029" srcset="/wp-content/uploads/2022/01/Simply_Static_2.png 904w, /wp-content/uploads/2022/01/Simply_Static_2-768x464.png 768w" sizes="(max-width: 904px) 100vw, 904px" /></figure>



<p>自動化するならスクリプトを作ってコミットもできると思います。そのうち、やってみたいなと思っています。ちなみに、Simply StaticのPro版はGitHub連携も出来るので一手間減ります。</p>



<h3 class="wp-block-heading">環境づくりで、注意する点</h3>



<p>WordPress の環境作りでは、以下の点に気を付ける必要があります。</p>



<ul class="wp-block-list"><li>書き出されるのは静的なHTMLとjsとcss と画像ファイルなのでコメントやメールフォームや検索など動的に動かすことができない</li><li>なので、コメントは全部閉じる</li><li>メールフォームなど、自分の場合はコンタクトフォーム ７を使わないようにした</li><li>検索はGoogleのカスタム検索をWordPressのウィジェットに貼り付ける（<a rel="noreferrer noopener external" href="https://programmablesearchengine.google.com/cse/" target="_blank" data-wpel-link="external" class="wpel-icon-right">https://programmablesearchengine.google.com/cse/<span class="wpel-icon wpel-image wpel-icon-1"></span></a>）</li><li>WordPressのスラグは全部英文字にしておく（日本語は使わない）</li><li>ローカル環境のPHP設定でメモリ関連の設定を上げておく</li></ul>



<p>といったところでしょうか。静的化してもコメントやメールフォームを動かす別の方法もありますが、現時点ではまだ導入していません。そもそも、コメントやメールフォームは無くても良いかなと。あればコミュニケーションができますが、仕事の依頼系はメールでも十分かなと感じています。わざわざ、メールフォームにしておく必要性もないのが実際のところです。コメントについては、このブログの場合、ほとんど書き込みがないので無くても問題はありません。どうしても、コンタクト撮りたい場合は、メールしてもらえれば良いかなと現時点では思っています。</p>



<h3 class="wp-block-heading">現時点で使っているプラグインは？</h3>



<p><meta charset="utf-8">静的ファイルを書き出すSimply Staticを使っても、ちゃんと動作しているWordPressのプラグインは以下です。表示系ではない関係ないプラグインもありますが、表示系に関連するのは動いていることを確認しています。</p>



<pre class="wp-block-code"><code>+-------------------------------------------+----------+-----------+-------------+
| name                                      | status   | update    | version     |
+-------------------------------------------+----------+-----------+-------------+
| acf-quickedit-fields                      | active   | available | 3.1.6       |
| advanced-custom-fields                    | active   | none      | 5.11.4      |
| akismet                                   | active   | none      | 4.2.1       |
| autoptimize                               | active   | none      | 2.9.5       |
| backwpup                                  | active   | none      | 3.10.0      |
| bulk-media-register                       | active   | none      | 1.25        |
| admin-featured-image                      | active   | none      | 1.2         |
| export-all-urls                           | active   | none      | 4.1         |
| google-sitemap-generator                  | active   | none      | 4.1.1       |
| jquery-manager                            | active   | none      | 1.10.6      |
| list-urls                                 | active   | none      | 0.2         |
| luckywp-table-of-contents                 | active   | none      | 2.1.4       |
| multiple-domain-mapping-on-single-site    | active   | none      | 1.0.5       |
| permalink-manager                         | active   | available | 2.2.14      |
| search-regex                              | active   | none      | 2.4.1       |
| shortcoder                                | active   | none      | 5.6         |
| simply-static                             | active   | available | 2.1.5.2     |
| google-site-kit                           | active   | none      | 1.48.1      |
| ultimate-addons-for-gutenberg             | active   | none      | 1.25.2      |
| word-balloon                              | active   | none      | 4.18.4      |
| wordpress-importer                        | active   | none      | 0.7         |
| wp-external-links                         | active   | none      | 2.50        |
| wpfront-scroll-top                        | active   | none      | 2.0.7.08086 |
| wp-multibyte-patch                        | active   | none      | 2.9         |
| duplicate-post                            | active   | none      | 4.3         |
+-------------------------------------------+----------+-----------+-------------+</code></pre>



<p>意外だったのは、目次を作っている「luckywp-table-of-contents」や吹き出し表示の「word-balloon」もちゃんと動作しています。</p>



<h3 class="wp-block-heading">まとめ</h3>



<p>今回、なんとなくわかったのは以下となります。</p>



<p>・運用コストが下がるので、今後はコンテンツネタに力を入れていきたい</p>



<p>・やっぱり静的ファイルは読み込みが速い！</p>



<p>・WordPressとは今後もローカル環境で付き合っていきます</p>



<h3 class="wp-block-heading">あとがき</h3>



<p>かなり前から、WordPress運用環境を変えたいなと検討していました。やっぱりシンプルが一番です。まだ切り替えたばかりなので、少し記事を書いてからまた感想などを書きたいなと思います。</p>



<h3 class="wp-block-heading">著者にメッセージ</h3>



<p></p>


<p>間違いのご指摘など、コメントじゃなくて、個人的にやりとりしたい場合は<a class="c-link-text" href="/mail/" target="_blank" rel="noopener noreferrer" data-wpel-link="internal">こちらから</a>どうぞ。お返事が遅くなるときもありますが、ご了承を。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ジェットパックプラグインは死活監視サービスがあるのか！</title>
		<link>/2020/09/18/jetpack-plugin-has-a-life-and-death-monitoring-service/</link>
					<comments>/2020/09/18/jetpack-plugin-has-a-life-and-death-monitoring-service/#comments</comments>
		
		<dc:creator><![CDATA[JunkHack]]></dc:creator>
		<pubDate>Fri, 18 Sep 2020 09:30:10 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">/?p=6079</guid>
				<media:thumbnail url="/wp-content/uploads/2020/09/sitedown.png" />
							<description><![CDATA[今回引越しをやっていて、気が付いたことがいくつかあります。その１つに、ジェットパックプラグインには、WEBがちゃんと動いているかどうかをチェックしてくれるサービスが無料でありました。 とにかく、たくさん機能があるんですよ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>今回引越しをやっていて、気が付いたことがいくつかあります。その１つに、ジェットパックプラグインには、WEBがちゃんと動いているかどうかをチェックしてくれるサービスが無料でありました。</p>



<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_L w_b_flex w_b_div" style=""><div class="w_b_ava_box w_b_relative w_b_ava_L w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_L w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img loading="lazy" decoding="async" src="/wp-content/uploads/2020/09/abata.png" width="96" height="96" alt="じゃんくはっく" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">じゃんくはっく</div></div><div class="w_b_bal_box w_b_bal_L w_b_relative w_b_direction_L w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_L w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_L w_b_shadow_L w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
<p><strong>Jetpack</strong>プラグインって機能いっぱいあるな！</p>
</div></div></div></div></div></div></div></div>



<div class="wp-block-word-balloon-word-balloon-block"><div class="w_b_box w_b_w100 w_b_flex w_b_mla w_b_jc_fe w_b_div"><div class="w_b_wrap w_b_wrap_talk w_b_R w_b_flex w_b_jc_fe w_b_div" style=""><div class="w_b_bal_box w_b_bal_R w_b_relative w_b_direction_R w_b_w100 w_b_div"><div class="w_b_space w_b_mp0 w_b_div"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1" height="38" viewBox="0 0 1 1" fill="transparent" stroke="transparent" stroke-miterlimit="10" class="w_b_db w_b_mp0"><polygon fill="transparent" stroke="transparent" points="0,1 0,1 0,1 0,1 "/></svg></div><div class="w_b_bal_outer w_b_flex w_b_mp0 w_b_relative w_b_div" style=""><div class="w_b_bal_wrap w_b_bal_wrap_R w_b_div"><div class="w_b_bal w_b_relative w_b_talk w_b_talk_R w_b_shadow_R w_b_ta_L w_b_div"><div class="w_b_quote w_b_div">
<p>使い切れるのかしら？</p>
</div></div></div></div></div><div class="w_b_ava_box w_b_relative w_b_ava_R w_b_col w_b_f_n w_b_div"><div class="w_b_icon_wrap w_b_relative w_b_div"><div class="w_b_ava_wrap w_b_direction_R w_b_mp0 w_b_div"><div class="w_b_ava_effect w_b_relative w_b_oh w_b_radius w_b_size_M w_b_div" style="">
<img loading="lazy" decoding="async" src="/wp-content/uploads/2020/09/pi-.png" width="96" height="96" alt="ぴー" class="w_b_ava_img w_b_w100 w_b_h100  w_b_mp0 w_b_img" style="" />
</div></div></div><div class="w_b_name w_b_w100 w_b_lh w_b_name_C w_b_ta_C w_b_mp0 w_b_div">ぴー</div></div></div></div></div>



<p>とにかく、たくさん機能があるんですよね。最近は、このジェットパックに有料機能をつける戦略のようで、バックアップとかSEOとかあるようです。今回は無料の機能で死活監視機能がどんなものか試してみました。</p>



<h3 class="wp-block-heading">サーバが動いてないとき</h3>



<p>こんな表示のメールが届きます。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="586" height="667" src="/wp-content/uploads/2020/09/sitedown.png" alt="" class="wp-image-9559"/></figure></div>



<h3 class="wp-block-heading">サーバが再び動き出したとき</h3>



<p>こんな表示のメールがきます。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="591" height="558" src="/wp-content/uploads/2020/09/siteonline.png" alt="" class="wp-image-9560"/></figure></div>



<p>ログには？</p>



<p>ちょうどこの時は、何か作業していてWEBを止めていたんだと思います。ログには以下のように出力されていました。</p>



<pre class="wp-block-code"><code>192.0.101.226 - - &#091;15/Sep/2020:00:46:13 +0900] "HEAD / HTTP/1.1" 403 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - &#091;15/Sep/2020:00:54:50 +0900] "HEAD / HTTP/1.1" 403 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - &#091;15/Sep/2020:01:02:42 +0900] "HEAD / HTTP/1.1" 302 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - &#091;15/Sep/2020:01:02:44 +0900] "HEAD /wp-admin/setup-config.php HTTP/1.1" 200 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - &#091;15/Sep/2020:01:11:53 +0900] "HEAD / HTTP/1.1" 200 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - &#091;15/Sep/2020:01:18:32 +0900] "HEAD / HTTP/1.1" 200 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"
192.0.101.226 - - &#091;15/Sep/2020:01:26:37 +0900] "HEAD / HTTP/1.1" 200 0 "-" "jetmon/1.0 (Jetpack Site Uptime Monitor by WordPress.com)"</code></pre>



<p>何をしていたのかは忘れましたが、ログを見るとおそらく、ジェットパッックプラグインの再セットアップでもやっていたのでしょう。</p>



<p>無料でやってくれるなら、使ってみてもいいかなと。現在は、とりあえずこの機能を使うかどうか検討中なので一旦停止しています。</p>



<h3 class="wp-block-heading">他の無料の外部から監視するサービスは？</h3>



<p>お仕事では、Mackerel（マカレル）というサービスを使っていますが、これ無料では監視ができないんですよね。</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Mackerel（マカレル）　料金</p><cite><a href="https://mackerel.io/ja/pricing/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external" class="wpel-icon-right">https://mackerel.io/ja/pricing/<span class="wpel-icon wpel-image wpel-icon-1"></span></a></cite></blockquote>



<p>すごく使いやすくて、警告をLineとかに飛ばしたりできるんで重宝（迷惑かも？w）しています。</p>



<p>無料のこれ系のサービスは今まで調査したことがないので、この機会に少し調べてみようと思います。これ系の検索ワードは、日本語では、外形監視 無料　とか。英語だとなんていうんでしょうかね？　APM (Application Performance Monitoring)&nbsp;とかかな？</p>



<p><a href="/wp-admin/edit.php?post_type=post" data-wpel-link="internal" rel="noopener noreferrer"></a></p>



<p>なんとなく、良さそうなものをピックアップしてみます。</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>New Relic</p><cite><a href="https://newrelic.co.jp/pricing" target="_blank" rel="noreferrer noopener external" data-wpel-link="external" class="wpel-icon-right">https://newrelic.co.jp/pricing<span class="wpel-icon wpel-image wpel-icon-1"></span></a></cite></blockquote>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Site24x7</p><cite><a href="https://www.site24x7.jp/url-monitoring.html" target="_blank" rel="noreferrer noopener external" data-wpel-link="external" class="wpel-icon-right">https://www.site24x7.jp/url-monitoring.html<span class="wpel-icon wpel-image wpel-icon-1"></span></a></cite></blockquote>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>StatusCake</p><cite><a href="https://www.statuscake.com/pricing" target="_blank" rel="noreferrer noopener external" data-wpel-link="external" class="wpel-icon-right">https://www.statuscake.com/pricing<span class="wpel-icon wpel-image wpel-icon-1"></span></a></cite></blockquote>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Freshworks Inc.</p><cite><a href="https://www.freshworks.com/website-monitoring/pricing/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external" class="wpel-icon-right">https://www.freshworks.com/website-monitoring/pricing/<span class="wpel-icon wpel-image wpel-icon-1"></span></a></cite></blockquote>



<h3 class="wp-block-heading">あとがき</h3>



<p>比較表を今作る元気はないので、とりあえずメモしておきます。Site24x7とかは、スピードテストとかでお世話になったことがあり知っていますが他は知りませんでした。結構、無料でもやれるんですね。今度、どれか採用してレポートしたいなと思います。</p>
]]></content:encoded>
					
					<wfw:commentRss>/2020/09/18/jetpack-plugin-has-a-life-and-death-monitoring-service/feed/</wfw:commentRss>
			<slash:comments>9</slash:comments>
		
		
			</item>
	</channel>
</rss>
