タグ: 技術者ブログ

Recently, I had the chance to work with WordPress for the first time in a while.

So, for this post, I decided to set up WordPress 7.0 in a local environment and try out AI Client for myself.

What Is the “AI Client” in WordPress 7.0?

AI Client is a system designed to make it easier to use AI services from within WordPress and plugins.

Until now, when using AI from a plugin, it was necessary to implement API connection processes and other tasks for each AI service used.

By using the AI Client, you can access a common framework for working with AI from within WordPress.

In this article, we’ll try using this system in practice.

Setting Up WordPress 7.0 Locally

This time, we’ll test it in a local environment.

We’ll be using “Local.”

Since it makes it easy to set up a WordPress testing environment, it’s useful for experiments like this one.

First, launch Local and create a new WordPress site.

For this post, I’ve named the site “wp-ai-test.”

Trying Out the AI Client

Creating a Plugin

When you press the button, it asks the AI a specific question and displays the answer.

I’m going to create a small plugin called…

Open the wp-ai-test folder you created in Local.

Inside the “app/public/wp-content/plugins” directory in WordPress,

Create a folder named “wp-ai-client-test.”

Inside that directory, create a file named “wp-ai-client-test.php.”

Initial plugin code

First, let’s get WordPress to recognize it.

In the WordPress admin panel, go to “Plugins” → “Installed Plugins.”

“WordPress AI Client Test” will appear in the list of plugins.

Add “AI Client Test” to the Admin Panel

Next, we’ll create a dedicated page in the admin panel.

Add the code to the file from earlier.

Once you save and refresh the admin screen, “AI Client Test” will appear in the left-hand menu.

Add a “Ask AI” feature

In this session, we’ll set it up so that when the “Ask AI” button is clicked, a fixed question is sent to OpenAI.

Add the processing to the ai_client_test_page() function.

We’ll also make a few changes to the form.

Save and Run

When I clicked the “Ask AI” button, the answer to my question was displayed.

Summary

Given the name “AI Client,” I had imagined the implementation would be a bit more complex, but I was able to call the AI with some simple code.

AI Client is not a feature that provides AI itself, but rather a platform for using AI within WordPress. To actually create useful features, you’ll need to integrate it using plugins or similar methods.

Since WordPress allows you to add features through plugins, I felt that combining it with AI Client could lead to the implementation of various AI features in the future.

Going forward, I’d like to try out features that are useful for actual WordPress management, such as article summaries and title generation.

Stay tuned for the next Engineer Blog post.

最近、久しぶりにWordPressを触る機会がありました。

WordPress 7.0では「AI Client」という、WordPressからAIサービスを利用するための仕組みが追加されています。

そこで今回は、Localの環境にWordPress 7.0を用意し、AI Clientを実際に触ってみることにしました。

WordPress 7.0の「AI Client」とは？

AI Clientは、WordPressやプラグインからAIサービスを利用しやすくするための仕組みです。

これまでプラグインからAIを利用する場合、利用するAIサービスごとにAPIとの接続処理などを実装する必要がありました。

AI Clientを利用することで、WordPress側からAIを扱うための共通的な仕組みを利用できるようになります。

今回の記事では、この仕組みを実際に使ってみます。

LocalでWordPress 7.0を構築する

今回は、ローカル環境で検証します。

使用するのは「Local」です。

WordPressの検証環境を簡単に作成できるため、今回のような実験には便利です。

まずLocalを起動し、新しいWordPressサイトを作成します。

今回はサイト名を「wp-ai-test」としました。

AI Clientを実際に使ってみる

プラグインを作成する

ボタンを押すと、AIに固定の質問をして回答を表示する

という小さなプラグインを作ります。

Localで作った wp-ai-test のフォルダを開きます。

WordPressの「app/public/wp-content/plugins」の中に、

「wp-ai-client-test」というフォルダを作ります。

その中に、「wp-ai-client-test.php」ファイルを作ります。

最初のプラグインコード

まずはWordPressに認識させます。

WordPress管理画面の、「プラグイン」→「インストール済みプラグイン」を開きます。

プラグインの一覧に「WordPress AI Client Test」が表示されます。

管理画面に「AI Client Test」を追加

次に、管理画面に専用ページを作ります。

先ほどのファイルにコードを追記します。

「AIに質問する」処理を追加する

今回は、「AIに質問する」ボタンが押されたら、固定の質問をOpenAIに送るようにします。

ai_client_test_page() の中に処理を追加します。

保存して実行する

「AIに質問する」ボタンを押下すると、質問に対する回答を表示することができました。

まとめ

AI Clientという名前から、もう少し複雑な実装を想像していましたが、シンプルなコードでAIを呼び出せました。

AI ClientはAIそのものを提供する機能ではなく、WordPressからAIを利用するための基盤です。実際に便利な機能を作るには、これをプラグインなどから組み込んでいく必要があります。

WordPressはプラグインによって機能を追加できるため、AI Clientとの組み合わせによって、今後さまざまなAI機能が実装されていく可能性を感じました。

今後は、記事の要約やタイトル生成など、実際のWordPress運用に役立つ機能も試してみたいと思います。

次回の技術者ブログもお楽しみに。

As an engineer’s blog, I’d like to share what I’ve been learning on a daily basis.
I received an email asking me to migrate my assets to the new Deno platform, as the site where I had previously hosted my Discord bot had been rebuilt.
This migration allowed me to continue running the bot 24 hours a day for free, so I’d like to share more about that here.

What is Deno Deploy?

Before getting into the main topic, let me first briefly explain Deno Deploy.
It is a serverless edge computing service provided by the Deno development team.
It is a cloud service that allows you to publish applications written in TypeScript or JavaScript to the Internet without having to worry about setting up or managing servers. Because it makes it easy to deploy web apps, APIs, bots, and more, it has been widely adopted by many developers.

Email Content from Deno Deploy Classic

To be specific, the email I received had the following content:
・Deno Deploy Classic will be discontinued on July 20, 2026
・Apps on Classic will stop running after that date
・There will be no automatic migration
・You will need to manually migrate to the new Deploy

Things to Check Before Starting Work

① Are you using Classic?
Since you’ve received this email, it goes without saying that you’re using it, but just to be sure, please confirm that you’re using Classic.
https://dash.deno.com
If your project is listed above, it’s eligible for migration.

② Is the source code on GitHub?
Items to Check
・GitHub repository
・main branch
・Latest code

③ Make a note of the environment variables
Open the project you want to migrate in Deno Deploy Classic, and go to “Settings” → “Environment Variables.”
You should see tokens such as DISCORD_TOKEN configured here. Since these tokens are not automatically migrated, if you have a record of them, you’ll need to refer to that during the migration.
If you registered the token during development but didn’t keep a record of it, you’ll need to reissue a new token from the Discord Developer Portal.

The image shows the browser’s Japanese translation, which makes the Japanese look a bit unnatural, but the settings are correct.
Since I had the TOKEN noted down in my production notes this time, I’ll skip the step of reacquiring the TOKEN.

Just a side note… The Discord bot isn’t currently active.
It’s offline.

Actual Migration Procedures

① Log in to the new Deno Deploy
https://console.deno.com/

② Creating an Organization
Enter the Organization name and Organization slug, then click “Create Organization.”
If clicking this button reopens the previous Deno Deploy window, open a new Deno Deploy window and check to see if the organization you created is displayed there.

③ Tap “New App”
Tap the “Apps” tab, open “Applications,” and tap “New App.”

Open “Create a new application,” select your GitHub account, and choose your bot repository.
Scroll down and select your deployment targets.
Since this is a free plan, select “Free Regions” under “Managed,” then click “Create App.”
*This guide assumes you have already uploaded your source code to GitHub and have set up a new DenoDeploy integration with GitHub.

The build will start, but it will fail if you haven’t migrated the KV Database.

Click “Database” within the project to open the Database screen and migrate the KV Database.
Click “+Attach” for Deno KV on the following page

Click “provision new Deno KV” to create a KV database

Verify that the database you created is selected, then click “Attach Database.”

Return to the Build screen and click “Retry Build.”

④ Set the environment variables
Set the DISCORD_TOKEN in the “Environment Variables” section of the “Settings” page within your new Deno Deploy organization.

⑤ Check if you’re online on Discord
I am.

Now all that’s left is to test the system, and if it’s still running smoothly the next day, we’re all set.
This has been a long post, but that wraps up this edition of the Engineer’s Blog.

Stay tuned for the next Engineer Blog post.

技術者ブログとして日ごろ取り組んでいる学習内容を紹介します。
以前作成したDiscordのBOTを置いていた場所が再構築されたことに伴い、新しいDenoに資産を移動させて欲しいというメールが届きました。
今回の資産移動により無料での24時間稼働が継続できたので、今回はそちらについてご紹介します。

Deno Deployとは

本題に入る前に、まずDeno Deployについて簡単に説明します。
Deno開発チームが提供するサーバーレスのエッジコンピューティングサービスです。
TypeScriptやJavaScriptで作成したアプリケーションを、サーバーの構築や運用を意識せずにインターネット上へ公開できるクラウドサービスです。手軽にWebアプリやAPI、Botなどをデプロイできることから、多くの開発者に利用されてきました。

Deno Deploy Classicからのメール内容

具体的にどんなメールが届いたかというと、以下のような内容でした。
・Deno Deploy Classicが2026/7/20で終了
・それ以降Classic上のアプリは停止
・自動移行はされない
・手動で新しいDeployへ移行する必要がある

作業前に確認すること

①Classicを使用しているか
メールが届いているので使用していることは当たり前ですが、念のためClassicを使用しているか確認します。
https://dash.deno.com
上記にプロジェクトがあれば移行対象です。

②GitHubにソースコードがあるか
確認事項
・GitHubリポジトリ
・mainブランチ
・最新コード

③環境変数を控える
Deno Deploy Classicの移動させるプロジェクトを開き、「setting(舞台設定)」→「Environment Variables(環境変数)」を確認します。
ここでDISCORD_TOKENなどでTOKENが設定されているはずです。このTOKENも自動移行されないので、このTOKENのメモを残してあるのであれば、そちらが移行時に必要になります。
もし制作時に登録してTOKENのメモを残していない場合はDiscord Developer Portalから新しいTOKENを再発行する必要があります。

画像はブラウザの日本語訳表示になっているため日本語が不自然になっていますが、設定していますね。
今回は制作時のメモにTOKENが控えてあったのでTOKEN再取得は割愛します。

余談ですが…現在のDiscordBotは動いていない状態です。
オフラインに居ます。

実際の移行手順

①新しいDeno Deployへログイン
https://console.deno.com/

②Organization作成
Organization name・Organization slugを入力して「Create Organization」を押下。
押下したら前のDeno Deployが開きましたが、その場合は新しいDeno Deploy画面を開いて作成したOrganizationが表示されているか確認。

③New app押下
Appsタブを押下し、Applicationsを開き、New appを押下します。

Create a new applicationsを開き、自分のGitHubを選んで、Botのリポジトリを選択する。
下にスクロールして、Deployment targetsを自分の選択。
今回は無料利用なのでManagedはFree Regionsを選択して、Create Appを押下。
※ここではGitHubにソースを上げていて、GitHubと新しいDenoDeploy連携をしている前提です。

ビルドが始まりますがKV Databaseの移行をしていないと失敗します。

プロジェクト内のDatabaseを押し、Databaseの画面を開いてKV Databaseの移行をする。
以下のページのDeno KVの+Attachを押下

provision new Deno KV押下でKV Databaseを作成する

作成したDatabaseが選択されていることを確認して「Attach Database」押下

Buildの画面に戻り「Retry Build」押下

④環境変数を設定する
新しいDeno DeployのOrganization内にあるSettingのEnvironment VariablesにDISCORD_TOKENを設定する

⑤Discordでオンラインになったか確認する
なりました。

これであとは動作確認をして、翌日も問題なく動いていれば完了です。
長くなりましたが、これで今回の技術者ブログを終わります。

次回の技術者ブログをお楽しみに。

I’m oz, and I’ll be writing this edition of the Engineer’s Blog.
Since WordPress has recently been updated, I’d like to introduce some new features that should be useful for actual website management, along with how to make the most of them.

1. Responsive Display Control Features

In WordPress 7.0, you can now configure which devices each block is displayed on.

You can configure settings like the ones described above. Previously, you had to write CSS or install a dedicated plugin, but this is now available as a standard feature.

For example, you can hide images on smartphones to improve page load speed, or switch large tables designed for desktop computers to a different layout on smartphones.

2. Adding an Icon Block

WordPress 7.0 also includes a feature that makes it easy to place icons.

Until now, you couldn’t place icons without installing the Font Awesome plugin.

For example,

• Display a phone icon next to the phone number
• Display an email icon next to the email address
• Display a warning icon next to the notes

You can create visually intuitive websites, such as these.

Summary

In this post, we’ve highlighted some of the new features added in WordPress 7.0 that are likely to be useful for actual website management.

The “responsive display control” and “new icon blocks” we’ve introduced here are relatively easy to use even without specialized knowledge, and they help improve the readability and usability of your website.

WordPress is updated regularly, with new features being added all the time. Even if you use it without giving it much thought on a daily basis, taking this opportunity to try out the new features might help you manage your site more efficiently.

There are still many features I haven’t fully mastered myself, so I plan to continue trying out new features and learning how to make the most of them.

That’s all for this post.
Thank you for reading this far.
Stay tuned for the next Engineer Blog post!

1.レスポンシブ表示の制御機能

WordPress 7.0では、ブロックごとに表示する端末を設定できるようになりました。

例えば、

2.アイコンブロックの追加

WordPress 7.0では、アイコンを簡単に配置できる機能も追加されました。

今までは、Font Awesomeプラグインを導入しないとアイコンを配置できませんでした。
例えば、

• 電話番号の横に電話アイコンを表示する
• メールアドレスの横にメールアイコンを表示する
• 注意事項に警告アイコンを表示する

など、視覚的に分かりやすいサイトを作成できます。

まとめ

今回は、WordPress 7.0で追加された新機能の中から、実際のサイト運用で役立ちそうな機能を紹介しました。
今回紹介した「レスポンシブ表示の制御機能」や「アイコンブロックの追加」は、専門的な知識がなくても比較的簡単に利用でき、Webサイトの見やすさや利便性の向上につながります。
WordPressは定期的にアップデートが行われ、新しい機能が追加されています。普段何気なく利用している方も、この機会に新機能を試してみることで、より効率的なサイト運用ができるかもしれません。
私自身もまだ使いこなせていない機能がたくさんあるので、今後も新しい機能を試しながら活用方法を学んでいきたいと思います。

今回は以上になります。
ここまで読んでくださり、ありがとうございました。
次回の技術者ブログもお楽しみに！

皆さんこんにちは！業務開発部所属「プリン🍮」です。
今回は、日々進化を続ける生成AIの種類や上手な使い方について紹介します。

私たちは、「DandelionsJapan」という海外向けECサイトを運用しています。
そのSNS運用や動画制作において、AIを積極的に活用しています。
例えば、投稿内容のアイデア出しや文章作成にはAIを使用し、効率的に魅力あるコンテンツを作成しています。また、画像や動画の素材についてもAIを活用することで、これまで時間がかかっていた作業を短縮しながら、高品質なビジュアルを実現しています。

生成AIの種類

一口にAIといっても、その種類はさまざまです。
文章生成AI、画像生成AI、動画生成AI、音楽生成AIなど、用途ごとに特化したツールが次々と登場しています。それぞれ得意分野が異なるため、目的に応じて使い分けることが重要です。

例えば、文章作成には文章生成AI、ビジュアル制作には画像生成AIといったように、適切なツールを選ぶことで、より効率的に成果を出すことができます。

具体的には、文章生成AIとしてはChatGPTが代表的で、アイデア出しや文章作成、要約など幅広い用途に対応しています。

次に、画像生成AIとしてはMidjourneyがあり、テキストで指示を出すだけで高品質なイラストや写真風の画像を生成することができます。
また、動画制作の分野では、画像やテキストから映像を生成する動画生成AIが活用されており、制作の効率化に大きく貢献しています。

さらに、音楽生成AIとしてはSunoがあり、文章で雰囲気を指定するだけでオリジナルの楽曲を作ることが可能です。

このように、それぞれのAIには得意分野があるため、目的に合わせて適切に使い分けることで、より質の高いコンテンツ制作が実現できます。

上手なプロンプトの書き方

生成AIを活用するうえで特に重要なのが「プロンプト（指示文）」の書き方です。生成AIは入力された内容をもとに結果を生成するため、指示が曖昧だと期待通りの成果は得られません。例えば、画像生成において「着物の女性、かわいい」といった簡単な指示では、具体性に欠けるためイメージ通りの画像にならないことがあります。

一方で、「浅草の仲見世通りで、赤と白の着物を着た20代の日本人女性が笑顔で立っている。日中の自然光で、写真のようにリアルな表現」といったように、被写体・場所・状況・雰囲気などを具体的に書くことで、より理想に近い結果を得ることができます。

では、このようなプロンプトはどのように考えればよいのでしょうか。
実は、先ほどの例は以下のような要素に分解して考えることができます。

・主題／被写体（Who / What）
　最も描きたいものを具体的に指定する（例：20代の日本人女性）

・行動／状況（What）
　主題が何をしているかを明確にする（例：笑顔で立っている）

・場所／背景（Where）
　シーンの舞台を指定する（例：浅草の仲見世通り）

・画風／芸術スタイル
　どのようなタッチで描くかを指定する（例：写真のようにリアル）

・写真／写実性
　リアルさのレベルを強調する（例：自然光、フォトリアル）

・カメラ／アングル
　視点や構図を指定する（例：クローズアップ、広角など）

・不要な要素の指定
　生成してほしくない要素をあらかじめ除外する（例：ぼやけ、低品質、文字、透かしなど）

さらに重要なのが語順です。プロンプトは前に書いた要素ほどAIへの影響が強くなる傾向があるため、最も重要な要素（被写体など）を最初に書くことがポイントです。

最近では、生成AIの精度も上がってきているため、ある程度簡単な指示でもそれなりの結果は得られるようになっています。しかし、よりクオリティの高い成果や自分のイメージに近いアウトプットを得るためには、こうした要素を意識してプロンプトを設計することが重要です。
少し手間をかけて具体的に指示を書くことで、生成AIの能力を最大限に引き出すことができます。これらを意識すると、想像していたような画像が生成できるようになります！

まとめ

生成AIは非常に便利なツールであり、使い方次第で作業効率や表現の幅を大きく広げることができます。しかし、ただ使うだけでなく、適切なツールの選択やプロンプトの工夫が重要です。
私たちもこれらのポイントを意識しながら生成AIを活用し、より良いコンテンツ制作に取り組んでいきます。
本内容が、これから生成AIを使ってみたい方の参考になれば幸いです。

今回は以上になります。
ここまで読んでくださり、ありがとうございました。
次回の技術者ブログもお楽しみに！

こんにちは！今回の記事を担当しますひろとまるです。
今回は、Excelマクロを使って「A1セルに移動し、表示倍率を100%に戻す方法」をご紹介します。
スクロール位置や表示倍率がバラバラのまま保存されてしまい、次回開いたときに見づらいと感じることがあると思います。1クリックでこの操作をできるようになるのでとても便利です。

マクロショートカットボタンを作るまでの手順を説明していきます。

マクロを作成する

1.「開発」タブから「マクロの記録」をクリック

2.マクロ名を入力して、マクロの保存先(I)で「個人用マクロブック」を選択し「OK」を押します

3. 何も操作せず「記録終了」をクリック

コードを貼り付ける

開発タブの「Visual Basic」を開き、標準モジュールところに以下のコードを貼り付けます。
元から入っている文字はすべて消して、一行目の「Subマクロ名()」には作成するときに入力したマクロ名を入れます。
貼り付けたら保存して閉じます。

Sub A1ショートカット()

‘ 画面更新を停止（画面のちらつきを防ぐ）
Application.ScreenUpdating = False

Dim ws As Worksheet

‘ すべてのシートを順番に処理
For Each ws In Worksheets

Next ws

‘ 1枚目のシートに戻る
Sheets(1).Select

‘ 画面更新を再開
Application.ScreenUpdating = True

‘ 完了メッセージ
MsgBox “処理が完了しました”

End Sub

今回の場合は標準モジュールのModule7にコードを貼り付けました。

ショートカットに登録する

このままだと１クリックでマクロを実行できないので、クイックアクセスツールバーに登録してすぐに実行できるようにします。
1.クイックアクセスツールバーの設定を開きます
2.マクロを選択します
3.作成したマクロ（A1ショートカット）を追加してOKを押します

左上のボタンから１クリックで実行できます。

まとめ

今回ご紹介したマクロを設定しておくことで、シートごとの表示位置や倍率を簡単に初期状態へ戻すことができます。ボタン一つで実行できるため仕事の効率化にもつながると思います。ぜひ活用してみて下さい。

次回の技術者ブログもお楽しみに！！