Home

パスワード認証によるGmail SMTPが使用できなくなりました

この記事は 2024年7月9日に公開された記事ですが、2025年4月15日に既存の設定で送信できなくなった事から、内容をより詳細に記述しアップデートしました。

パスワードを使ったGmail SMTPの利用が不可に

Gmailの仕様変更により、2024年9月30日より GmailのSMTP サーバー（smtp.google.com）でパスワードを利用した認証が利用できなくなります。 a-blog cms で、GmailのSMTPをご利用の皆様は、2024年9月30日までに対策をお願いします。

2024 年 9 月 30 日以降: パスワードのみを使用して Google アカウントおよび Google Sync にアクセスするサードパーティアプリのサポートを終了

Google Workspace Updates JA

この記事は 9 月 29 日に英語版ブログに掲載された記事を翻訳したものです。概要ユーザーの安全性に関わる取り組みの一環として、Google Workspace では、Google のユーザー名と...

対応方法1: Gmail SMTP の利用をやめる

パスワード認証が使える他のSMTPサーバーに変更いただくか、SMTPを使用せずSendmailを利用します。

Gmail以外のSMTPの設定をするか、空に設定する

この変更により、送信元メールアドレスのドメインが送信元サーバーと違ってしまう可能性があります。その際は、SPFレコード（DNS）などを設定して「なりすましメール」の防止を行ってください。

対応方法2: Gmail SMTP を OAuth認証で利用する（Ver. 3.1.19 以降）

a-blog cms を Ver. 3.1.19 以降にアップデートすることで、OAuth認証を使った Gmail SMTPが利用できるようになります。

管理画面 > コンフィグ > メール設定にある Google SMTPサーバー設定を行ってください。

Gmail SMTP設定

OAuthクライアントJSONの取得方法

「Google Cloud」の「API とサービス」管理ページにアクセスします。

https://console.cloud.google.com/apis/?hl=ja

Google Cloud の「API とサービス」

Gmail API の有効化

ライブラリから「Gmail API」を検索し、「有効化」しておきます。

Gmail API の有効化

OAuthクライアントJSONの取得

認証情報より「OAuthクライアントID」を作成し、OAuthクライアントJSONファイルをダウンロードし、サーバーに設置後、管理画面にJSONまでのパスを入力ください。

OAuthクライアントJSONの取得

左側のメニューにある「認証情報」をクリックし、「＋認証情報を作成」をクリックしてください。

次に「OAuthクライアントID」を選択してください。

OAuth クライアントIDを作成

以下の画面に切り替わりますので、設定項目を入力し（作成）ボタンをクリックします。

設定項目	値
アプリケーションの種類	ウェブアプリケーション
名前	分かりやすい名前をつけてください。例）Gmail
承認済みのリダイレクト URI	a-blog cms管理画面に記述されているコールバックを入力

「OAuthクライアントを作成しました」の表示が出たら成功です。今回の設定では、JSONファイルを利用しますので「JSONをダウンロード」をクリックしファイルをダウンロードします。

ダウンロードしたファイルを利用するサーバーにアップロードしてください。

コンフィグ＞メール設定＞ Google SMTPサーバーの設定に、メールアドレスと上記の JSONファイルのパスを設定し、保存することで（認証）ボタンが表示されます。

これで（認証）ボタンをクリックで設定完了です。

また、既存の SMTPサーバーの設定は空にしておいてください。

これで、設定は完了ですので、フォームからメール送信が可能かどうかをテストしてください。

交互にclassを付与するゼブラ機能

a-blog cmsでは、1行ごとに交互に2つのクラスを付与するゼブラ機能（zebra）の設定が標準で実装されています。（Ver. 1.3.0より）この機能を使用してクラスが付与される要素は次のとおりです。

tableのtr
ul, olのli
dlのdt, dd

デモ

1つ目のdt（1行目）: 1つ目のdd（2行目）; 2つ目のdd（3行目）; 3つ目のdd（4行目）
2つ目のdt（5行目）: 1つ目のdd（6行目）

設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

//-------
// zebra
zebraMark       : '.js-zebra',
zebraOddClass   : 'odd',
zebraEvenClass  : 'even',

zebraMark	ここで指定したセレクタにzebraOddClassとzebraEvenClassで指定したクラスが付与されます。
zebraOddClass	奇数行に付与されるクラス名の指定です。1, 3, 5, ...行目に付与されます。
zebraEvenClass	偶数行に付与されるクラス名の指定です。2, 4, 6, ...行目に付与されます。

使い方

HTML

指定したクラスをHTMLのtable要素やul要素、ol要素、dl要素に記述します。例）zebraMarkで「.js-zebra」と指定した場合

<dl class="js-zebra">
  <dt>1つ目のdt（1行目）</dt>
  <dd>1つ目のdd（2行目）</dd>
  <dd>2つ目のdd（3行目）</dd>
  <dd>3つ目のdd（4行目）</dd>
  <dt>2つ目のdt（5行目）</dt>
  <dd>1つ目のdd（6行目）</dd>
</dl>

出力後のソースコード

<dl class="js-zebra">
  <dt class="odd">1つ目のdt（1行目）</dt>
  <dd class="even">1つ目のdd（2行目）</dd>
  <dd class="odd">2つ目のdd（3行目）</dd>
  <dd class="even">3つ目のdd（4行目）</dd>
  <dt class="odd">2つ目のdt（5行目）</dt>
  <dd class="even">1つ目のdd（6行目）</dd>
</dl>

CSS

必要に応じてスタイルを指定します。

Ver. 2.10.61 をダウンロード

Ver. 3.1.20 リリースのお知らせ

この記事では、2024年7月17日にリリースした Ver. 3.1.20 及び、Ver. 3.0.37 の修正内容について紹介いたします。

現在お困りの問題に該当する項目がありましたら、お早めにバージョンアップのご検討をお願いいたします。

Ver. 3.1.20 リリースノート

修正点

CMS-6866 メニュー管理機能で、メニューを追加する場合に、admin_menu.add_icon という文字列が表示されてしまう問題の修正
CMS-6867 キャッシュのパフォーマンスを改善
CMS-6870 WYSIWYGエディタでdivタグがpタグに変換されてしまう問題を修正
CMS-6872 Ver. 3.1.19 のテキストユニット（Lite Editor）で、改行が消えてしまう問題を修正

Ver. 3.0.37 リリースノート

修正点

CMS-6869 WYSIWYGエディタでdivタグがpタグに変換されてしまう問題を修正 & JSのエラーが出る問題を修正

主なリリースノートの詳細な内容

CMS-6867 キャッシュのパフォーマンスを改善

各種キャッシュドライバーのキャッシュアクセス数を減らすことにより、キャッシュ利用時のパフォーマンスが良くなりました。

CMS-6870 WYSIWYGエディタでdivタグがpタグに変換されてしまう問題を修正

WYSIWYGエディタで、divタグを入力してもpタグに変換されてしまう問題を修正しました。

入力したHTML

divタグがpタグに変わってしまう

CMS-6872 Ver. 3.1.19 のテキストユニット（Lite Editor）で、改行が消えてしまう問題を修正

Ver. 3.1.19 で発生していた改行したテキストが、編集画面表示時やソース切り替え・タグの切り替えを行うと改行が消えてしまう問題を修正しました。

入力したテキスト

改行が消えてしまう

最後に

該当する問題がありましたら、お早めにバージョンアップのご検討をお願いいたします。
また、迅速にご報告いただいたユーザーの皆さま、誠にありがとうございました。

今後もご報告いただいた内容に対して真摯に受け止め修正と改善を行ってまいります。
今後ともどうぞよろしくお願いいたします。

スタイルスイッチ

a-blog cmsでは、link要素で参照しているCSSを切り替える設定が標準で実装されています。（Ver. 1.2.1より）

デモ

スタイルを[a]に切り替える

スタイルを[b]に切り替える

a-blog cmsはいつも使っているWebブラウザから更新ができ、直感的で使いやすく、便利な機能についてを重視したシステムになっています。

設定の編集

config.js

// スタイルの切り替え
styleSwitchMark: 'a.styleswitch',
styleSwitchStyleMark: 'link.styleswitch'

使い方

スタイルを参照するlink要素と切り替えるa要素に、config.jsで指定されているclass名をHTMLに記述します。そしてそれぞれの要素に、スタイルを対応させる属性（link要素にはtitle属性、a要素にはrel属性）を記述します。

例）styleSwitchMarkで「.styleswitch」と指定した場合head要素内：

<link rel="stylesheet" type="text/css" href="xxx.css" title="a" class="styleswitch" />
<link rel="stylesheet" type="text/css" href="yyy.css" title="b" class="styleswitch" />

body要素内：

<a href="#" class="styleswitch" rel="a">スタイルを[a]に切り替える</a>
<a href="#" class="styleswitch" rel="b">スタイルを[b]に切り替える</a>

このように記述すると、指定したclassがあるアンカーリンクをクリックしたときに、それぞれに対応するスタイルが切り替わります。