現象

YouTube側の仕様変更により、YouTube動画が再生できなくなる問題が確認されました。

対応方法

js/config.js の modalVideoConfig.youtube 内の list と playlist の2つのオプションを削除ください。

 modalVideoConfig: {
    channel: 'youtube',
    youtube: {
      autoplay: 1,
      cc_load_policy: 1,
      color: null,
      controls: 1,
      disablekb: 0,
      enablejsapi: 0,
      end: null,
      fs: 1,
      h1: null,
      iv_load_policy: 1,
      // list: null,  この行を削除
      listType: null,
      loop: 0,
      modestbranding: null,
      origin: null,
      // playlist: null, この行を削除
      playsinline: null,
      rel: 0,
      showinfo: 1,
      start: 0,
      wmode: 'transparent',
      theme: 'dark'
    },
    ....

Ver. 2.11 の次期フィックスバージョンでも修正を行います。

この度は、ご迷惑をおかけしてしまい大変申し訳ございませんでした。
今後ともa-blog cmsをよろしくお願いいたします。

位置情報を付加してポストインクルードする

ポストインクルードを使うことで、検索結果など別コンテンツをページを移動することなく引っ張ってくることができます。技術的にはAjaxを使って実現しています。

このポストインクルードはJavaScriptで動いているため、端末の位置情報を取得して、ポストインクルード先に位置情報を渡すことができます。そうすることで、現在位置から近い店舗を表示するなどといった、ユーザーに優しい機能を作ることができます。（Ver. 2.7.0 以上）

注意点

最近のブラウザは https（SSL/TLS対応）でないと、位置情報を取得できない事が多くなっています。この機能を使用する場合は、httpsの環境をご用意ください。

また、最初にアクセスするときにブラウザが、位置情報を取得してもいいか、許可を求めてきます。ここでユーザーが許可を行わないと、位置情報の取得はできません。

位置情報の取得許可の確認画面

実装方法

ポストインクルードの formのデータ属性に 「data-geo="true"」 を追加する事で、自動的に組み込みJSが自動で位置情報を取得してポストインクルードしてくれます。

位置情報の指定のされ方

formのデータ属性に 「data-geo="true"」 を追加する事で、位置情報を付加して指定されたテンプレートにアクセスするのですが、以下のようにクエリストリングとして付加されます。

?lat=xxxxxx&lng=xxxxxx

位置情報のグローバル変数

a-blog cms では、クエリストリングを自動的にグローバル変数化しますので、ポストインクルード先で、 %{lat}, %{lng} などとすることにより、位置情報が取得できます。

サンプル

以下、緯度・経度を表示するサンプルになります。

ポストインクルード

<h2>位置情報</h2>
<form action="" method="post" class="js-post_include" data-geo="true">
  <input type="hidden" name="bid" value="%{BID}">
  <input type="hidden" name="tpl" value="/include/geo.html">
  <input type="submit" name="ACMS_POST_2GET" value="緯度・経度を取得">
</form>

読み込みテンプレート

<ul>
	<li>緯度: %{lat}</li>
	<li>経度: %{lng}</li>
</ul>

動作サンプル（緯度・経度を表示）

Entry_GeoListとの組み合わせ

Entry_GeoListモジュールは、エントリーに位置情報を付加して、ある場所（エントリーや個別指定）から近い順番でエントリーを表示できるモジュールです。このEntry_GeoListと位置情報付きのポストインクルードを使うことで、現在位置から近いエントリーを引っ張ってくる事ができるようになります。

実装方法

Entry_GeoListモジュールIDを作成し、設定の基準点を「URLコンテキストを参照」から「URLクエリストリングを参照（?lat=xxx&lng=xxx）」に変更してください。これでモジュールは、エントリー基準ではなくURLの情報から基準点をとってくるようになります。

URLクエリストリングを参照に変更

そして、Entry_GeoListモジュールが書かれたテンプレートを、位置情報付きのポストインクルードで読み込めば、現在位置から近い順で表示する事ができるようになります。

Ver. 2.11.48 をダウンロード

Ver.2.12より、管理画面、及び全てのテーマで Dart Sass に移行します

いつも a-blog cms をご利用いただき、誠にありがとうございます。開発スタッフの森田です。

Ver.2.12より、管理画面、及び全てのテーマで Dart Sass に移行することになったため、経緯と以降の方法をお知らせいたします。
なお、現在CSSからスタイルをカスタマイズされている方々は以前と同じようにカスタマイズできますので、ご安心ください。この記事は今までSassを使ってカスタマイズされていた方々を対象に、具体的な実装をご案内しています。

なぜ Dart Sass へ移行するのか

公式ブログのFuture Plansの項目にて、LibSass のサポートは遅くとも2022年10月1日には廃止されるというアナウンスがありました。

Sass: The Module System is Launched

Syntactically Awesome Style Sheets

Sassが@importを非推奨とすることと、新しいSassの機能を使用していくため a-blog cms の開発においても Dart Sass へ移行をおこないます。

ご利用中のテーマではそのままLibSassをお使いいただくことも可能ですが、新しいバージョンの a-blog cms 内のSassを使用時には記述がDart Sassに対応されていることと、今後Sassの公式でもDart Sassがメインになっていくことを考え、早めの移行をお勧めいたします。

移行時の変更

主な変更内容は @import ルールを使用していた箇所が @use及び@forwardへの変更になります。

これにより以下の作業が想定されます。

Mixinや変数、関数の重複を回避する
ファイル名が重複する場合は名前空間の指定

Mixinsや変数、関数を使用している際には移行する際に多少作業が必要になりますので、その点はご留意ください。

@useとは

@useルールは、他のSassスタイルシートからMixins、関数、変数を読み込むことができ、複数のスタイルシートのCSSをまとめて表示する機能です。

@useで読み込まれたメンバー（変数、関数、Mixins）は、カプセル化され読み込んだスタイルシートでのみ使用できます。

シンプルに利用する際には @use "<url>" のように記述して利用します。

// _variables.scssを読み込むときの例

@use "variables";

ファイル名で読み込んだ際は、そのファイル名が名前空間となります。そのため、以下のように使用できます。

@use "variables";

.button {
  color: variable.button-color;
}

名前空間はas節を使用して変更可能です。

@use "variables" as var;

.button {
  color: var.button-color;
}

変数がグローバルでは無くなったことにより、同じ変数名や、関数名、Mixins名を使用して上書きできなくなリました。

外部から変数を変更したい場合は、あらかじめ上書きできるようにしたい箇所に !default フラグを指定しておき、@useで読み込む際にwith節を使用して変更します。

// variables.scss

$button-color: red;

.button {
  background: $button-color !default;
}

@use "variables" with (
  $button-color: blue
)

詳しくは公式ドキュメントをご覧ください。

Sass: @use

Syntactically Awesome Style Sheets

@forwardとは

@useでは読み込んだ変数やMixinsなどのメンバーしか読み込めませんが、@useルールと異なる点としては、階層の深いファイルで指定したメンバーも読み込むことができ、利用時には単一のエントリーポイントのファイルを読み込むことができます。

シンプルに利用する際には @forward "<url>" と記述して利用します。

// エントリーポイントのファイル global/common.scss

@forward "variables";
@forward "mixins";
@forward "functions";

@use "../global/common"

.button {
	background: $button-color; //コンパイルエラーになる
}

@forward "../global/common"

.button {
	background: $button-color; //コンパイルできる
}

@forwardを利用の際にもwith節を使用して外部から内容を変更することができます。

@forward "../global/common" with (
  $button-color: blue;
)

.button {
	background: $button-color; //blueが出力される
}

実際にa-blog cms のテーマ内で使用している記述では、acms.cssの内容を変更する際には下記のように利用します。

@forward "../../../../system/src/scss/global/variables" with (
    $unit-gutter : 20px,
    $entry-class : entry-style,
    $unit-margin-bottom : 30px,
    $acms-font: '../../../system/fonts/'
);

同じ変数名が存在するとエラーが起こるので、もし$unit-gutterなどを変数名で別途上書きをしている場合は、その記述を削除し、with節で変更内容を指定しましょう。

詳しくは公式ドキュメントをご覧ください。

Sass: @forward

Syntactically Awesome Style Sheets

移行手順

実際に、Site2020を移行した手順をご紹介します。

Dart Sassへコンパイルするための環境を用意する
ルートのscssファイルをforwardとuseで読み込む
forwardで読み込んだ変数、関数、Mixinを整える
useで読み込んでいるファイルに名前空間を反映する

Dart Sassへコンパイルするための環境を用意する

gulp、webpackなどでコンパイルする際は、node-sass モジュールではなく、 sass モジュールを使用してください。

$ npm i sass --save-dev

ルートのscssファイルを@forwardと@useで読み込む

// site.scss

@charset "utf-8";

// グローバルメンバーファイル acms.css兼用
@forward "global/acms-common";

// グローバルメンバーファイル siteテーマ専用
@forward "global/common";

// ベース
@use "base";

// パーツ
@use "animation";
@use "banner";
@use "button";

... 以下省略 ...

@importを使用時は変数やMixins、コンポーネント利用時にも利用していましたが、ここでは変数やMixins、関数は@forward、コンポーネントは@useを使用しています。

forwardで読み込む変数、関数、Mixinsを整える

a-blog cms の公式テーマでは、変数、関数、Mixins は全てのコンポーネントのファイルで参照しているファイルです。これらをまとめるacms-common.scssとcommon.scssを作成しています。

公式テーマではglobalディレクトリを新しく作り、下記のように設定しています。

global/_acms-common.scss
global/_common.scss
global/mixins.scss
global/variables.scss

// global/_acms-common.scss

@forward "../../../../system/src/scss/global/variables" with (
    $unit-gutter : 20px,
    $entry-class : entry-style,
    $unit-margin-bottom : 30px,
    $acms-font: '../../../system/fonts/'
);
@forward "../../../../system/src/scss/global/variables-fonts";
@forward "../../../../system/src/scss/global/mixins";

// global/common.scss

@forward "variables";
@forward "mixins";

Siteテーマの場合は、global/_mixins.scssでacms.cssの変数とMixinsを使用しています。そのため、ファイルの先頭に@useを使ってacms-common.scssを読み込んでいます。

こうすることによって、systemテーマ内のmixins.scssで指定しているfont-sizeのMixinsが利用可能になります。

// global/_mixins.scss

@use "../global/acms-common" as acms;

@mixin footer-sns-list($sns-color){
	... 省略 ...
	@include acms.font-size(19);
  ... 省略 ...
}

useで読み込んでいるファイルに名前空間を反映する

公式テーマでは、acms.cssの変数、関数、Mixinsに加えて、テーマが各自で持っている変数、関数、Mixinsを使用します。

どのファイルの変数、関数、Mixinsを使用しているのかわかりやすくするために名前空間を指定しています。

コンポーネントのファイルの先頭にて、@useでファイルを名前空間を指定して読み込みます。

以下の場合は、acms-common.scssのメンバーはacms、common.scssのメンバーはglobalという名前空間が割り振られています。

// scss/_base.scss
@use "global/acms-common" as acms;
@use "global/common" as global;

LibSass利用時は以下のような記述でしたが、この記述ではエラーが出てしまいます。さらに名前空間を指定する必要があります。

// LibSass利用時の記述
@use "global/acms-common" as acms;
@use "global/common" as global;

body {
	color: $text-color-base;
	font-family: $font-family;
	background: #FFF;
	@include font-size(14);
}

名前空間を指定した記述が以下になります。

// Dart Sass利用時の記述
@use "global/acms-common" as acms;
@use "global/common" as global;

body {
	color: global.$text-color-base;
	font-family: global.$font-family;
	background: #FFF;
	@include acms.font-size(14);
}

global.xxxとacms.xxx という記述が増えました。$text-color-base はglobal/_common.scss で指定したファイルから参照しており、名前空間をasでglobalと指定しているのでglobal.xxx、@include font-size(); はglobal/acms-commonから指定したファイルから参照しており、名前空間をasでacmsと指定しているのでacms.xxx を指定します。

ユニットのガターなどはsystemフォルダの変数を利用しているケースがあるかと思いますが、その時は以下のようにwith節を使用して@forward時に変数の内容を変更してください。

// global/_acms-common.scss

@forward "../../../../system/src/scss/global/variables" with (
    $unit-gutter : 30px,
    $entry-class : entry-style,
    $unit-margin-bottom : 30px,
    $acms-font: '../../../system/fonts/'
);
@forward "../../../../system/src/scss/global/variables-fonts";
@forward "../../../../system/src/scss/global/mixins";

acms.cssでは、$entry-class はacms-entryが指定されていますが、上記の記述ではentry-styleに変更しています。

まとめ

これらの変更はVer.2.12の各テーマおよび管理画面にて行う予定です。リリースまで今しばらくお待ちください。

また、Ver.2.12からはWebpackでコンパイルできる環境を各テーマで用意する予定です。nodeをマシンにインストールされている方であればターミナルまたはコマンドプロンプトに $ npm i とするだけで、テーマのスタイル、JSがコンパイルできます。

Ver.2.12についての詳しい情報は、9月10日、9月11日に行われる a-blog cms Training Camp 2021 Autumn にて公開する予定です。ご興味ある方は是非ご参加ください。

a-blog cms Training Camp 2021 Autumn

a-blog cms Training Camp

2021-09-10（金）13:30 - 2021-09-11（土）17:00 ※カスタマイズ講座2日目のURLはZoomではなく、各YouTube LiveのURLとなっております。下記のタイムテーブルに記載されているURLより、時間...

Ver. 2.11.47 をダウンロード

組み込みJSの modal-video で YouTube動画が再生されない問題がみつかりました。

現象

対応方法

位置情報を付加してポストインクルードする

注意点

実装方法

位置情報の指定のされ方

位置情報のグローバル変数

サンプル

ポストインクルード

読み込みテンプレート

動作サンプル（緯度・経度を表示）

Entry_GeoListとの組み合わせ

実装方法

Ver. 2.11.48 をダウンロード

Ver.2.12より、管理画面、及び全てのテーマで Dart Sass に移行します

なぜ Dart Sass へ移行するのか

移行時の変更

@useとは

@forwardとは

移行手順

Dart Sassへコンパイルするための環境を用意する

ルートのscssファイルを@forwardと@useで読み込む

forwardで読み込む変数、関数、Mixinsを整える

useで読み込んでいるファイルに名前空間を反映する

まとめ