以前は「Google ウェブサイト翻訳ツール」でカンタンに多言語対応できたのだけれど、今は有料の「Cloud Translation API」となってしまいました。
しかし有料というのはクライアント的にはけっこう敷居が高くて、金額の多寡だけじゃなく、支払の口座をどうするかから地味に面倒。料金を払ってまで多言語したいわけじゃないしと、見送りになってしまうこともしばしばありますよね。
そんな場合に、とりあえずで使えるのがGoogle翻訳サイトに自ページURLを投げる方法。
-----
https://translate.google.com/translate?sl=ja&tl=en&u=https://hogehoge.com/
→ sl:原文の言語
→ tl:翻訳後の言語
→ u:ページURL
-----
例えば当ページを投げるならこんな感じ
https://translate.google.com/translate?sl=ja&tl=en&u=https://ef-techmemo.makeit2.co.jp/2026/03/translate.google.html
これをjsなどでリンク先を作ってボタンにすれば良い。
HTMLソース例
<a id="google-translate-link" href="#" target="_blank">
英語版(Google翻訳)
</a>
<script>
// 現在のページURLを取得
const currentUrl = window.location.href;
// Google翻訳のベースURL
const base = "https://translate.google.com/translate?sl=ja&tl=en&u=";
// エンコードして連結
const translatedUrl = base + encodeURIComponent(currentUrl);
// 例:リンク要素にセットする場合
const link = document.getElementById("google-translate-link");
if (link) {
link.href = translatedUrl;
}
</script>
最初に結論を書くと、最新版の「Bogo」では編集者に対して編集できる言語を指定する必要があります。
何があったか順を追って説明すると書きの通り。
長い事アップデートをサボっていたクライアントのWordPressを最新版までアップデートしたところ、多言語化するプラグイン「Bogo」に関連して、クライアントご担当者から「英語での投稿ができない」とのご連絡。
お話を聞いていくと、本来は上部の黒帯右の「日本語」をクリックすれば「英語」の選択肢が出て切り替えできるはずが、クリックしても何も出てこないという状態らしい。
私が確認すると問題無く表示される。
これは私の使っているアカウントが「管理者」で、ご担当がお使いのアカウントは「編集者」だったため。
ユーザー設定画面を開き、「ロケール」という項目にWordPressに設定した言語がチェックボックスと並んでいるので、ここでチェックすることで権限を付与できる。
これで無事に解決できました!
例えば、新着情報記事のうち、ピックアップニュースとして設定したものは「ピックアップニュース」の欄に表示し、一般ニュース欄には、それ以外のニュースを掲載しようとした場合、ACFで「真/偽」チェックボックスを使って切り分けすることができる。
今回は、途中から仕様変更でそのようにしたときのお話です。
ピックアップニュース欄には
'meta_key' => 'pickup_flag',
'meta_value' => true ,
として問題無く動作した。
一方で一般ニュースでは、ループの条件指定を
'meta_key' => 'pickup_flag',
'meta_value' => 0 ,
としたところ、古い記事が出てこない。過去の記事は改めて更新をかけないと、フィールド自体が存在しないためと思われる。
そこで、「フィールド自体が存在しない」条件を追加して
'meta_query' => array(
'relation' => 'OR',
array( // フィールドが存在しない(一度も保存されていない場合)
'key' => 'pickup_flag',
'compare' => 'NOT EXISTS',
),
array( // チェックされていない
'key' => 'pickup_flag',
'value' => 0 ,
'compare' => '=',
),
),
と、二つの条件をORでつないで解決!
XDの開発はとっくに終了しており、今さらXDの記事を書くのもアレですが。まぁ、これはあくまでも自分用のメモなので仕方がない。
もともとがFireWorks愛用者だったこともあり、XDの使い勝手がめちゃくちゃ良いのでサポートが完全終了するまではお世話になるつもり。Figmaをちょっと使ってみた感じでは、いざとなったらいつでも移れる感触はつかんでいるので、まぁ大丈夫でしょう(笑)
それにしてもAdobeさん、心変わりして「やっぱりXDの開発を継続!」となるのをお待ちしています(笑)
さて表題の件。
ちょっとしたパーツを作るのにもやはりXDの機能だけでは物足りないので、イラレで作成してコピペでもってきていました。以前はすんなりコピペできていたと思うのだけれど、最近はXDがフリーズしてしまうことも多くてどうにも不安定。ググってみたけど結局スッキリ解決とはいきませんでした。
じゃぁ、ということで次善の策。
イラレで作ったパーツをアセット書き出しでsvgなんかで書き出して、それをXDにずりずりポンするのが一番楽にできそう。
AIの便利な使い方をメモメモ。実際に使って便利だったものを書いていく。
- 文章の校正、推敲、添削
自分でざっくり書いた文章をAIに渡して、整えたり、漢字の間違いを直したり、言い回しを優しくしたり
- 過去のデータを拾ってきて一覧表に
例)「宮城のJAの米買取価格を過去10年分の一覧表にしておくれ」
- 「大根をたくさん貰ったので、大量消費できるレシピをいくつか教えてください」
- 単純なウェブ検索を、条件を与えるなどして。
特に「とは」検索など、何か新知識をざっくりアウトラインを把握したい時に便利。
- 写真を加工
例)スマホの自撮りを渡して「高級感のあるポートレートにしておくれ」
- アイディア出ししてもらう
「○○の企画を考えています。アイディアをいくつか出しておくれ」
「大根を大量消費できるレシピをリストアップしておくれ」
「(会社URL) この会社の3C分析をしておくれ」
→→ 前提や狙い、経緯なども入れて指示するとより的確に。
逆に、使わないもの
- HTML・CSSの記述方法
基本的にチートシートからコピペしたほうが早くて、他人の書いた良く分からないソースをコピペで使うと検証が必要でむしろ時間がかかることが多い。
OBSBOT Tinyを使ってますが、ウェブカメラとしてはけっこう綺麗な画質で手軽に使えてなかなか便利。オンラインMTGでは画質は関係なくて表情が分かればOK、とはいえ、やっぱり画質が良いに越したことはない(笑)
そんなOBSBOT Tinyですが、ちゃんと使うためには操作するためのアプリケーション「OBSBOT Center」が必要。これでリモートで向きを変えたり拡大率を調整して良いアングルを作ります。
ところが久しぶりに使おうと思いOBSBOT Centerを立ち上げたら、タスクバー上では起動しているのに画面にウィンドウが出てこないので操作できない。Windowsでたまにある画面外に移動してしまって見えてない状態だろうと思い、あれこれ試すけどまったくダメ。
ここで結論を書いてしまうと、OBSBOT Centerには「バグ」と言って良いレベルの欠陥があるらしい。
Windowsでは画面の見やすさのために、モニター表示を200%や300%など拡大して表示する設定が可能ですが、100%以外で設定するとOBSBOT Centerは画面外に追いやられてしまうとのこと。
私の環境ではノートに外部モニタを接続して、ノート画面は300%、外部モニタは100%の設定で使用しています。OBSBOT Centerはずっと外部モニタに置いて使っていたから気が付かなかった。
何が理由なのかは不明だけど、今は立ち上がると必ずノート画面の右上基準でウィンドウが開く状態。これだといつもの300%表示では画面外になるし、いちいち100%に戻してどうのこうのというのも手間なので、しばらくOBSBOTはお蔵入りな感じです。
クライアントのWordPressを更新しようとサイトを開き、上部のツールバーから管理画面に行こうとしたらエラーが出て困った。サーバがロリポップだったので「それが原因か??」と疑って無駄に時間を使ってしまったのでメモメモ。
結論から書くと、ロリポップには全くの濡れ衣で、一度ログアウトしてから改めてログインすればOKのどうという事のない話でした。ロリポップごめんね(笑)
何が起きていたかというと、、、
- 前回編集時に「ログインしたままにする」にチェックを入れてログインしたため、今日は最初からログイン画面を経由することなく上部ツールバーが表示されている状態だった。
- さらにセキュリティのため、プラグイン「SiteGuard」の機能「管理ページアクセス制限」をONにしているので、WordPressがこちらのIPアドレスを記憶していた状態。
- そしてここで、実は今日は施設点検のために停電となったのでルータがリセットされ、IPアドレスが変更となった。
その結果、WordPressが記憶していたIPは前回ログイン時のものなのに、今日は別のIPだったために弾かれていた状態でした。なので、いったんログアウトして再ログインすることでWPが記憶しているIPをリセットすればOKという事でした。
Swiper.js を実装するさいの覚え書きです。
◆まずは導入してみる時に見るページ
初心者向け!JSライブラリ「Swiper」の使い方ガイド
◆いろいろカスタマイズするためのオプション一覧
【Swiper】カスタマイズ用オプションまとめ一覧
bxSliderが便利で、何かといえばこれを使ってきた。ライブラリとしてはすっかり枯れていていわば完全乾燥で狂いが来ないのでとても楽ちん。
しかしすでに開発は止まっているし、他にも良いものが出ているので、そろそろ他のものを導入しようと検討。
◆Swiper.js
モバイル対応・タッチ操作・豊富なトランジション
純粋なJS。更新頻度高く、最も人気
◆Slick.js(jQuery)
カスタマイズ性・レスポンシブ・軽量
安定性は高いが更新は停止気味
◆Splide.js
https://ja.splidejs.com/
軽量・高性能・アクセシビリティ対応
日本製でドキュメントも充実
-- 使ってみたらけっこう便利!
-- 画面幅で切り分けて設定を柔軟に変えられるのもなかなか良い。
◆Glide.js
シンプル・高速・レスポンシブ
軽量で直感的なAPI
◆Owl Carousel 2
タッチ対応・アニメーション豊富
jQuery依存。やや古めだが安定
◆Slider Pro(jQuery)
高度なカスタマイズ・動画対応
多機能だがやや重め
◆lightSlider.js(jQuery)
ギャラリー向け・スワイプ対応
軽量で導入が簡単
***************
選定のヒント
jQueryを使わない構成に移行するなら
→ Swiper.js, Splide.js, Glide.js が最有力。
既存のjQueryベースの構成を活かすなら
→ Slick.js や Owl Carousel 2 が移行しやすい。
アクセシビリティやSEOも意識するなら
→ Splide.js はARIA属性やキーボード操作にも対応。
プラグイン「ACF」は開発側のゴタゴタはありつつ、やっぱり「ネ申」プラグインで、めっちゃ便利(笑)最近はこれ一つでカスタム投稿タイプもカスタムタクソノミーも作れるようになったので尚更。
さて、某案件ではACFで作成したカスタムタクソノミーをチェックボックス選択式にして使っていた。そして今回は新しくカスタム投稿タイプを増やして、既存のカスタムタクソノミーを流用というか共用して設定することに。
ところが管理画面であれこれ設定しても、新しいほうのカスタム投稿タイプにいっこうに反映されなくてグダグダとしてしまったので原因をここにメモメモ。
理由としては「register_post_type()」や「register_taxonomy()」なんかの設定は、管理画面での設定よりもfunctions.phpでの記述が優先されて、競合していると管理画面での設定が無効になってしまうからとのこと。
今回の場合は、チェックボックス選択式にするさいにfunctions.phpへの記述で対応していたために、こちらが優先されていたのが原因。これを削除してすべての設定をACFからのGUIで行うことで解決した。
選択式にするには hierarchical を true にすれば良いだけの話なので、分かっている方には「何でそんな事をしてたの??」案件でしょうが、長くやっていると以前からの作業フローで非効率なやり方が残ってしまっているケースはあるものです(笑)