10ページ目

先日、SmartBlock に、地図ブロックが欲しいという要望があったので、その方法を少し考えてみたいと思います。

a-blog cms の地図ユニットでは

地図ユニットでは、実際の地図に自由に動かせるピンとズームレベルの調整を実際の地図上でできるようになっており、細かい緯度経度の数値については手で触る必要はない状況ではあります。しかし、このユニットのようなものを新しく UI を用意するのは大変なので、他の方法を考えてみます。

SmartBlock の YouTube 対応について

YouTubeの場合には、URLを入力することで YouTube である事と 動画ID が分かって、動画を表示させるための iframe を組み立てる事ができます。

iframe をそのまま入力できるようにする

Google Maps を貼れるようにするというより汎用的に、色々な iframe タグをそのまま受け入れる事ができるようにするというプランです。

iframe 側にサイズの指定などがあり、キレイにコンテンツを埋め込めないこともあるかもしれませんが、どんなものでも対応にできるのはアリかと思います。ボタンのデザインはこんなでいいだろうか？

Embedブロックを拡張する

SmartBlock の YouTube対応を行なっているブロックの名前は Embedブロック というらしい。今のところ YouTube にしか対応していないようなので、これを拡張するのが2つ目のプランになります。

例えば、ベースキャンプ名古屋 を表示させるためのリンクを用意してみます。

https://www.google.co.jp/maps/search/%E3%83%99%E3%83%BC%E3%82%B9%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%97%E5%90%8D%E5%8F%A4%E5%B1%8B/@35.176842,136.8931377,15z

これを iframe で表示させようとしても残念ながら表示させる事ができません。

<iframe src="https://www.google.co.jp/maps/search/%E3%83%99%E3%83%BC%E3%82%B9%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%97%E5%90%8D%E5%8F%A4%E5%B1%8B/@35.176842,136.8931377,15z" 
width="100%" height="450"></iframe>

どうするべきかを色々調べてみたところ Maps Embed API というものを利用するといい事が分かりました。 Google Maps を iframe で利用するための API という事で、これを使えばいけそうです。

https://www.google.com/maps/embed/v1/{MODE}?{PARAMETER}

MODE には

PARAMETER には

上記を設定することで、そのままの URL を iframe で利用できなかった Google Maps も iframe で利用が可能になります。APIキーの設定が少しハードルになりますが、今のところ Maps JavaScript API のように利用によっては費用がかかることはないとのことです。

• Usage and Billing | Maps Embed API

Google Maps の URL を調べる

例えば「ベースキャンプ名古屋」で検索すると URL は

のようになり、読みやすく書くと place/ベースキャンプ名古屋/@緯度,経度,ズームレベルz ..... のようになります。 これらから必要な情報を取得して URL を組み立て直すと

のようになります。

次に「ラーメン屋」で検索すると

のようになりました。この場合では MODE が search になります。

MODE が place と search に対応するくらいで大丈夫な気もしますが、directions や view なども頑張ってみてもいいかもしれません。

短縮URLの対応をどうするんだろ？

ブラウザの Google Maps で共有リンクを取得すると短縮URLになります。これだと、URLを解析するだけで対応ができません。また、スマホのアプリからの共有機能で情報をコピーしてもURLは短縮されてしまいます。

いろいろ調べていたところで、以下のような記事を見つけました。

• PHP・JavaScriptでリダイレクト先のURLの調べるには…

ここにあるようなコードで短縮URLを戻してURLを組み立てるといいかもしれません。

「名古屋駅」の短縮URL は、以下のような感じになります。

これを、上記の外部サイトで紹介されていた関数 expand_url を利用して展開すると、

のようになります。しかし、「ベースキャンプ名古屋」の短縮URLは

という感じになっており、Googleマイビジネス【プロフィールの略称】というものでした。この機能は、今調べてみると昨年夏に終了しており辞めることはできても、新しく作ることができないようです。

「名古屋駅」と同様の expand_url では、うまく展開できませんでした。

最後に

今回は SmartBlock のブロックの改良をするための方法を少し調べ、こんな感じの実装をやってみて欲しいを伝えるために書いてみました。いつ、誰にお願いするか分かりませんが、そのうち改良されて便利に使えるようになるといいなって思っています。

アップルップルでは、現在 50% 出社という月の半分は社外での勤務が OK になっています。そのため MacBook Pro を持って帰り、また出社時にはディスプレイと電源を接続する必要が出てきています。外部ディスプレイが1枚であれば USB-C のケーブルを2つ接続することになり、外部ディスプレイが2枚の人は USB-C のケーブルを3つ抜き差しが必要なことになります。打ち合わせが多い人になると、この抜き差しの回数も随分な回数になる事が予想されます。

Apple Studio Display は高い！

アップルが最近出した Studio Display という高価なディスプレイがありますが、なかなか買えそうにありません。（199,800円から） でも、昔 Apple Thunderbolt Display を買ったりもしているので買える日が来たらいいな〜って思っていたりもします。

ケーブルの抜き差しを減らすには 1本にまとめる事が大事

では、その方法を考えてみましょう！

一番簡単な方法は、USB給電対応の USB-C ハブを導入する事です。USB給電 については PD と表記されることも多いので、USB-C ハブを探す際には、PD の表記がある USB-C のポートが付いているものを選択しましょう。

USB PD (給電) の W数には注意が必要

MacBook Pro の充電には USB-C から給電することになります。表にまとめると、以下の W数の ACアダプタが同梱されています。

基本は、この W数のものを使う事をオススメします。そんな中で、今回は USB-C ハブの PD (給電) の W数を注目してみると 100W に対応しているものが少なく 60W のものが多い事が分かります。

さらに 140W というのは、まだ無いのではないかと思います。見つけられていません。あったら教えてください。とりあえず、現段階では社内に 140W が必要な MacBook Pro 16 が無い（近いうちにあることになる）ので、100W のものを探すことにします。

Apple Studio Display の説明に「ホスト用アップストリームThunderbolt 3（USB-C）ポート x 1（96Wのホスト充電）」と書かれていました。140W には対応していないが、16インチで使ってはダメと書かれていないので 100W でいいのかもしれません。

ディスプレイが1枚の 27インチ 4K (3840x2160)の場合

この場合には、普通に PD の W数だけ気にしたら大丈夫なので、以下のような製品を使えば OK です。100W対応と書かれているPD と HDMI ポートがあるものを選択ください。

• Dockteck USB Type C ハブ 6-in-1タイプ C 4K 60Hz HDMIポート 100W PDポート 2xUSB 3.0 ポート SD / TFカードスロット搭載 Type-Cアダプター

ディスプレイが2枚の 24インチ WQHD (2560x1440) 場合

電源1つのディスプレイ2つで、3本の USB-C の抜き差しが出てくるタイプなので、この人たちを楽にするのが大事ですね。2台のディスプレイをさせる USB-Cハブは多くありません。

Windows なら大丈夫だけど MacOS の場合には USB-C 1本でディスプレイは1つしか繋がらないという OS 側の制限があったりもします。過去 HDMI が2つあるものを買って MacOS ではダメだったこともあります。注意ください。

分かりやすいところでは、USB-C が2つ同時に接続するようなコネクターになっているものを選びましょう。

• Anker PowerExpand 9-in-2 USB-C メディア ハブ 4K HDMIポート 100W PD対応

UWQHD(3440x1440) 場合

HDMI で4K の場合には 3840x2160 か 1920x1080 の 16:9 の解像度であれば大丈夫なのですが、変形の 21:9 のディスプレイの性能を発揮しようとすると実は HDMI では NG で、Displayport 接続になります。 なので、USB-Cハブのディスプレイポートに Displayport が付いているモデルを選択するようにしましょう。

Displayport付き USB-Cハブは数が少ないっぽいです。さらに W数が100W になると選択肢がさらに減ります。

• Cable Matters 8K USB C DisplayPort 変換 USB C ハブ PD 100W

60W でいい場合には、こちらも選択肢に。

• StarTech.com USB-C - DisplayPort変換アダプタ PD 60W
• エレコム ドッキングステーション USB-C DisplayPort 変換 TypeC PD 60W

社内の外部ディスプレイ＆電源環境について

上記を実施し、アップルップルの社内では USB-C接続 1本でディスプレイと電源を皆さんが利用できるような環境となりました。

さらに1席、スタンディングデスクを1席追加し、そこに UWQHD(3440x1440) の大型ディスプレイを置いて立って作業しようかなって思った時にもケーブル1本で対応できるような準備も完了です。

Mac で hostsファイルを管理する定番といえば Hosts.prefpane なのだが、最新の MacOS にするとインストールできず困っている人が多いのではないだろうか？

hostsファイルとは

Web制作のお仕事などをしていると、サーバーの引っ越しなどの際にお世話になるファイルです。ネームサーバー (DNS) には現在の利用しているサーバーの名前をIPが保存されていますが、この hostsファイルに名前と IP を設定しておくと DNS にアクセスする前にチェックして hostsファイルにあった時点でこの IP で Mac のブラウザなどは動いてくれるというものです。

macOS Big Sur や Monterey で困っていませんか？

https://www.dirk-froehling.de/downloads/downloads.html

上記のリンク先からアプリ版の Hosts App 1.4.5 をダウンロードしてみてください。

このように単体のアプリケーションとして動作します。システム環境設定 の中で動作しなかった OS の人も利用できます。

2021年12月24日 11:00 に久しぶりに a-blog cms の新しいバージョンがリリースされました。前のバージョン 2.11.0 からで2年ぶり、今回は 3.0 という事になるので 2.0 からすると 8年ぶりのメジャーバージョンアップになります。

動作環境

一番大きい部分としては、ionCube の廃止 でしょう。弊社としては、2004年から 17年お世話になっていた ionCube Encoder と Loader ですが利用しないで配布をする事になりました。

次に、動作PHP のバージョンを 7.2.5 から という事で、これまでの 5.3 - 7.1 の環境では動作しない事になります。

テンプレート

1.7 から 2.0.0 になった時には、管理画面が一新され、テンプレートの互換性が無くなりアップデートする必要がありバージョンアップには少なからず人的コストがかかってしまう状態でした。

そして、今回の 2.11.42 から 3.0.0 のアップデートではテンプレートの互換性は保っていますので アップデート時にテンプレートの改修の必要はありません。 変わってないので、このテンプレートで紹介する必要はなかったのですが、その点はお伝えしたかったので書いています。

セッションやキャッシュ管理

これまではデータベースにページのキャッシュデータを蓄積することを行っていました。10年前と今ではディスクのアクセス速度が随分変わっています。皆さんのパソコンも HDD から SSD に変わって劇的に読み書きが速くなっていることはご存知だと思います。

そういう理由で DB へのキャッシュではなく、ファイルキャッシュなどで行うような方針転換 が行われました。さらにサーバーの環境によっては、APCu や Redis も利用が可能です。この辺りの設定は .env というファイルに設定されています。

XSERVER や さくら であれば、APCu が利用できるようになっており、デフォルトの設定では APCu が優先で利用し、使えない時にはファイルキャッシュを利用するようになっていますので、あまり気にしないでインストールしたままの設定で大丈夫です。

ダッシュボードのキャッシュサイズを表示していた場所が以下のように変わっています。

これまでの ページキャッシュ だけでなく、テンプレートキャッシュ や コンフィグキャッシュ・カスタムフィールドキャッシュ など多くの情報を都度データベースに取りにいくことなく、キャッシュで処理するようになったことからデータベースへのアクセスを劇的に減らすことができるようになりました。

これにより何倍も速くなりました。正確な数字で出してみたいので社内の誰かにお願いしてみようと思っています。

また、あわせてセッション管理も独自にDBで行っていたものを辞めています。これも DBアクセスを減らす1つでもありますね。

エントリー単位のエクスポート・インポート

これは実装担当者は、きっと喜んでくれると思います。a-blog cms で作ったサイトをリニューアルするような案件も10年もやっていると多くなり、作っているサイトと並行して運用しているサイトに情報が増えてきます。

本番公開前に、 運用サイトから部分的にエントリー＋メディアなどをエクスポートし、作っている公開予定のサイトにインポートができるようなる という10年欲しかった機能が搭載されました。

Webhook機能と API機能

まずは Webhook については、現状は エントリー（作成・削除・更新・公開）/ フォーム送信 の際に外部サーバーに情報を POST できる ようになりました。どう活用していくのか、利用者次第な部分ではありますので、活用事例を今後 a-blog cms zoomup などで聞けたらと思っています。

私としては、次はユーザー（作成・削除・更新）の追加が必要だと思っており、まだまだ拡張しないといけない部分になりますので、ご意見・ご要望などをお聞かせください。

API機能というところでは、a-blog cms ユーザーの人に分かりやすく伝えるとするのであれば「モジュールID の変数をテンプレートを用意せず JSON出力できる」という方が伝わりやすいかもしれません。

最後に

私は、この数年「3.0 をリリースする事は無い。新しい CMS を作るよ」とイロイロな人に言ってたと思います。でも、3.0 出ちゃいましたね。

a-blog cms を時代に合ったカタチに進化させていく必要があり、今後も安心して提案・活用してもらえるよう頑張っていきます。

また、新しい CMS の開発についても考えていないわけではありませんので、そちらも何か進捗があればブログに書くというよりは Twitter(@kazumich) に Tweet する感じで情報は漏らしていきます。お楽しみに！

これは a-blog cms Advent Calendar 2021 の 16日目の記事です。

a-blog cms で作られたサイトを引っ越しを依頼されたり、アップデートするのにテスト環境を作るのも引っ越しと言えるでしょう。そんな時に SSH が使えない、phpMyAdmin も使えないそんな経験もあったりします。

これまでインストールを簡単にするための「簡単セットアップ」 setup.php や、バージョンアップを簡単にするための「簡単アップデート」update.php などを作ってきていますが、今回は簡単にバックアップをするための a-backup.php を作ってみました。

バックアップする対象

• archives
• archives_rev
• media
• private/config.system.yaml
• sql/databaseName_yyyymmddhhmmss.sql
• storage
• themes/blog2020

ファイルとしては CMS からアップロードしたファイルが保存されている archives / archives_rev / media / storage と、config.system.yaml と利用しているテーマディレクトリの一式と、MySQL のエクスポートデータを SQL文のテキストで書き出したものが今回のバックアップの対象となります。

テーマが継承されている場合には、子テーマも対象となります。

用意したプログラム

GitHub Gist の kazumich のアカウントで公開している 300行程度の PHP のファイルになります。リンク先にアクセスして Download してください。

https://gist.github.com/kazumich/0c5ce6ed4e8366628842541ee9101b56

利用方法

ブラウザからファイルをダウンロードする設定と、サーバー上にファイルを作る設定の2つの利用方法を用意しました。サイト規模が小さければブラウザからファイルを落とせるかもしれないですが、長く運用されているようなサイトだとブラウザからのダウンロードできないこともあります。

ブラウザから対象ファイルをダウンロードする

一番簡単な方法としてファイルを config.server.php と同じ場所にアップロードして、ブラウザでアクセスするとデータベースのパスワードを聞かれる画面が表示されます。それで簡単に表示されているファイルなどがダウンロードできます。

対象ファイルを圧縮(ZIP)しサーバー内に保存する

ブラウザからダウンロードできなかった時や cron で定期的にバックアップを作りたい時などに利用します。1ファイルになりますので、FTPソフトなどでダウンロードするのも容易になります。

設定

1) 実行方法の設定

# pc  : ブラウザからPCに Zipファイルがダウンロードされます。
# server : サーバー上に Zipファイルを保存します。 5) を設定してください。

$zip_download = "pc"; # pc / server

2) パスワードチェック

# on  : ブラウザ上からパスワードを入力し実行します。（推奨）
# off : cron など画面表示させたくない時に設定ください。

$password_check = "on"; # on / off

3) バックアップテーマの設定

# テーマファイルをバックアップする際には指定してください。
# "site2020" と設定すると site2020 , lp@site2020 , sp@site2020 がバックアップされます。
# "site2020|blog2020" のように複数指定も可能です。

$useThemes = "blog2020";

4) コマンド パスの設定

$mysqldump = "mysqldump";
$mysql = "/usr/bin/mysql";

# MAMP の場合
# $mysqldump = "/Applications/MAMP/Library/bin/mysqldump";
# $mysql ="/Applications/MAMP/Library/bin/mysql";
# 記述の変更が必要なサーバーなどの情報があれば @kazumich に教えてください。

5) バックアップディレクトリの設定

# 1) で server を指定した際に設定してください。
# また、バックアップを保存するディレクトリは public_html , www より上の階層に作成してください。

#$backupDir = "/home/server_name/domain_name/backup";

6) 実行ディレクトリの設定

# ブラウザからの実行の際には設定の必要はありません。 
# cron から実行する際に設定してください。

#$target_dir = "/home/server_name/domain_name/public_html";

今後の改善したい点

a-blog cms のバージョンを出力できるように

そのバックアップデータが、どの a-blog cms のバージョンで動いていたものかを分かるようにしたい。

storage が違う階層にあっても動作するように

storage は違う階層に置くことでファイルへの直接アクセスできないような設定にすることが推奨だと思うが対応ができてない。

部分ダウンロードできるように

今は、画面上にリストのマーカーがついているが、チェックボックスにして必要無いものを外すことができるようにしたい。そうすることでファイルサイズを減らすこともできる。

テーマの指定を実際の設定されているものを自動で設定したい

どのテーマを使っているか分かっている自分の案件なら分かるが、頼まれて対応するような時にデータベースを調べればテーマディレクトリは分かるハズなので自動抽出してくれると、さらに便利だと思う。

追加インストールしているプログラムも対応に

以下のディレクトリも忘れて移行すると、大問題になる可能性があるので、対象に含めるようにしたい。

• extension
• php/AAPP
• php/ACMS/User

最後に

毎回、苦労して用意していたものが簡単に一式入手ができるようになったので、随分省力化できたのではないかと思っています。標準で持っている バックアップ＆リストア 機能というものもありますので、これが公式になる予定は今のところありません。

引越し用のツールですので、利用後はサーバーから削除するなどの対策をお願いします。データベースのパスワードが分かると全てのデータをダウンロードされてしまいますので注意ください。

明日の a-blog cms Advent Calendar 2021 17日目は、口田 聖子さんの「a-blog cmsで現在のエントリーを「関連エントリー」に登録しているエントリーを表示する」になります。まだ、タイトルが分かりませんので、後日アップデート予定です。

これは a-blog cms Advent Calendar 2021 の 8日目の記事です。