行頭に画像を表示させる

擬似要素で画像を表示させる方法をすぐ忘れるので、メモ

.element-class:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../../assets/images/img.png);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
}

Viteの環境変数を用いて開発版とリリース版でソースコードの修正をなくす

開発版は開発用APIを参照し、リリース版はリリースサーバーのAPIを参照させたいときなど、実行やビルドする際にいちいちソースを修正していたのだが、さすがに面倒だしミスも起こりやすいので、修正しなくてもいい方法はないかと調べたら、ちゃんとありました。

環境変数とモード｜Vite

ソースコード中で、import.meta.env.PROD:{boolean}の値をみて、APIのURLを変更するなどすれば、OK。

また、vite.config.tsの、base:で指定したBASE URLは、ソースコード中で、import.meta.env.BASE_URL: {string}として参照できる。

プリペアードステートメントにIN()を使いたい時

以前からSQLのINをプリペアードステートメントで使うたびに躓くのだけど、これを機会に正攻法を確認しておく。

１）プリペアードステートメントを以下のように作成する

$params = array('aaa', 'bbb');
$in_param = implode(',', array_fill(0, count($params), '?');
$sql = '...WHERE IN('.$in_param.')';
$stmt = $mysqli->prepare($sql);

２）バインドする

$stmt->bind_param(str_repeat('s', count($params)), ...$params);

ポイントは、PHP5.6から使えるようになった「... による可変個引数関数」。

参照「[PHP] mysqliのbind paramに可変する引数を渡す」

Vue Routerの二つのHIstory Modeについて

Vue Router のHistory Mode（ページ履歴動作）には、従来からhashモードとHTML5 historyモードの二つがありました。hashモードは、#で指定されるURLフラグメントを用いる形式で、HTML5 historyモードはURLフラグメントを使用しません。

Vue Router Ver 3.xの既定はhashモードでしたが、Ver 4.xでは、HTML5 historyモードの使用が推奨されています（Different History modes）。

意識せずにVue Router Ver 4.xを使用したアプリケーションをつくって、ページをリロードしたら404エラーが返ってきて、ちょっと慌てました。意識してhistoryモードにした覚えがないので、URLに#がなくなって、「お、#がなくなってすっきりしたな」などと喜んでいたら、単にHTML5 historyモードになっていただけでした。

HTML5 historyモードは、当然ながらサーバー側の設定が必要なので、Different History modesの、設定例（今回はApache）にしたがって設定しますが、当該アプリケーションはサーバーのサブフォルダーに設置されていたので、以下の記載に従いました。

Note: The following examples assume you are serving your app from the root folder. If you deploy to a subfolder, you should use the publicPath option of Vue CLI and the related base property of the router. You also need to adjust the examples below to use the subfolder instead of the root folder (e.g. replacing RewriteBase / with RewriteBase /name-of-your-subfolder/).

示されていたApacheの設定例

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

上記のNoteに従って設定例のRewriteBaseを、

RewriteBase /name-of-your-subfolder/

に置き換えてリロード！→404エラー！

最後のRewriteRuleを、

RewriteRule . index.html [L]

に変更しないとだめだよね…。

AlertDialog上のradioボタンの選択状態が更新されない

 最近、Flutterを使った開発にも慣れてきて、なんとなくFlutterがわかった気になっていたところにタイトルの状況にぶち当たって、目の前が真っ暗になりました。

AlertDialog上でRadioボタンの選択状態を変更しても画面上では選択状態が更新されませんが、AlertDialogを閉じて再度開くと選択状態は更新されているので、表示更新の問題であることがわかります。

馬鹿の一つ覚えでsetState()で表示更新させればいいんでしょと思っていたので、setState()を使っているのに表示が更新されないとわかって、まさに絶望の淵に立たされたのでした。

しかし、Flutterユーザーも増えてきた昨今では、先人がネットに情報をあげてくれています。本当にありがたいことです。

それによると、StatefulBuilderを使う必要があるとのこと。

StatefulBuilderの説明にある、プラトニックウィジェット（platonic widget）ってなんだ？、と思いましたが、まあ、今回の場合で考えれば、AlertDialog内のRadioで呼ばれたsetState()を、AlertDialogの外に伝えてくれるだけの役割を果たす観念的なウィジェットという感じでしょうか？

Avoid using web-only libraries outside Flutter web plugin packages.と怒られる

 Flutter web でブラウザをリロードされた際に、その時表示されていたページによって処理を分岐したくて、dart:htmlをimportしてwindow.location.hrefでURLを取得していたら、Avoid using web-only libraries outside Flutter web plugin packages.と怒られるのだが、じゃあ、どうすればいいんだよ！としばらく放置していた。

Uri.base を使えばいいそうだ。

The natural base URI for the current platform.

When running in a browser this is the current URL of the current page (from window.location.href).

When not running in a browser this is the file URI referencing the current working directory.

 

Flutter 開発メモ

 開発中に使用したが、結局使わなくなったのでソースから削除するけど、後で使うかもしれない機能メモ

指定した型の一番近い祖先Widgetを返す

MyApp? myApp = context.findAncestorWidgetOfExactType<MyApp>();

Flutter web でmanifest.jsonが401エラーになる

開発中のFlutter webアプリをサーバにデプロイしてChromeでアクセスしたら、DevToolsのコンソールで、manifest.jsonが 401エラーになっているのがわかった。

なんだよ気持ち悪いなぁと調べていたら、まだ開発中ということでデプロイ先のフォルダにBasic認証をかけているのが原因らしい。

index.html内の

<link rel="manifest" href="manifest.json">

を、以下のように変更したら解消した。

<link rel="manifest" href="manifest.json" crossorigin="use-credentials">

参考 MDN

Flutter web をドキュメントルート以外に設置する

 Flutter web をドキュメントルート以外に設置する方法は、Flutterのドキュメント（Configuring the URL strategy on the web）のHosting a Flutter app at a non-root locationに以下のように書かれている。

Update the <base href="/"> tag in web/index.html to the path where your app is hosted. For example, to host your Flutter app at myapp.dev/flutter_app, change this tag to <base href="/flutter_app/">.

これを受けて、私もbuild/web/index.htmlを直接書き換えていたが、忘れてそのまま設置してしまう可能性もあり、何とかならないのかと思って、build下ではなくプロジェクト直下のweb/index.htmlをみると、以下のように変数指定されている。

<base href="$FLUTTER_BASE_HREF">

これは、どこかで設定しておけるはずだと思い、いろいろ探してみたがそれらしい場所がない。

ターミナルでhelpすると、

> flutter help build web

Usage: flutter build web [arguments]

--base-href                        Overrides the href attribute of the <base> tag in web/index.html. No change is done to web/index.html file

なるほど、上記のドキュメント例なら、以下のようにbuildすればいいということか。

> flutter build web --base-href "/flutter_app/"

ドキュメントに一言、書いておいてください。

Element PlusのDatePickerで週の開始日を指定する

 ElementのDatePickerではfirstDayOfWeekを指定することによって、週の開始日（曜日）を指定することができた。

ところが、Element PlusのDatePickerでは、そのようなオプションが見当たらない。

https://github.com/element-plus/element-plus/issues/1055によると、代わりにDay.jsのロケールを使ってねということらしい。

例えば、Day.jsのアフリカのロケール（af.js）には、以下のような記述が含まれている。

weekStart: 1

これを使うらしい。

日本のロケール（ja.js）には、そのような記述が含まれていないが、追記したものを別ロケール（ja-my.js）として保存した。

通常は、

import ElementPlus from 'element-plus'

import locale from 'element-plus/lib/locale/lang/ja'

createApp(App).use(ElementPlus, { locale })

とすることで、Day.jsのロケールも自動的にセットされるのだが、

import 'dayjs/locale/ja-my'

dayjs.locale('ja-my')

を追加することで、今回作成した週の開始日が指定されたロケールを指定できるようだ。

以下は、土曜日を週の開始日に設定した例

ちょっと、これはドキュメントを読んでもわからないよなぁ。
もっとも、こんな変則的な曜日並びのカレンダー表示させるほうがおかしいと言われれば、その通りなんだけど。

VueアプリケーションのVersion管理（キャッシュ対策）

 VueでSPAアプリケーションをつくってWebに公開すると、はじめから予想されたことだが、ブラウザにキャッシュされるので、サーバにおくアプリケーションのバージョンをあげても、ローカルの古いバージョンのまま使用するユーザーが発生する。

やはり、最初にサーバから現在のバージョン番号を取得して、自分自身（ローカル）のバージョンと異なったらリロードしてもらうのがいいだろう。

自分自身のバージョンは、package.jsonのversionを利用することにしよう。

import { version } from '../../package.json'

なお、上記で以下のエラーが出る場合は、

Cannot find module '../../package.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.Vetur(2732)

tsconfig.jsonに、以下を追加する。

"compilerOptions": {

↓↓

  "resolveJsonModule": true,

↑↑

アプリケーションが表示されたら、最初にサーバにアクセスしてバージョン番号を取得し、自分自身のバージョンと比較して異なる場合は、以下のようにリロードする。

location.reload()

リロードした結果、サーバとローカルのバージョンが一致すれば「更新しました」、一致しなければ「更新できませんでした」のようなメッセージをそれぞれ表示させる。

くれぐれも、一致するまでリロードが無限ループしないように注意。

当該処理が、リロード後であることを判断する方法は、いろいろあるようだが、検証が面倒なので、今回はsessionStorageを使った。

location.reload(true)がdeplicatedになって、location.reload()だとキャッシュ読んじゃうんじゃないかと心配したが、ちゃんと更新してくれたのでとりあえず、深入りしないことにしよう。

PHPで$_POSTが消える

PHPで組まれたあるシステムのPOSTした先のページで、特定条件でエラーが発生するという報告を受けました。

発生しているエラー内容は、本来数値であるべきところに数値以外の値が入力されたというような内容です。

エラーが発生しない場合もあるので、単純な書き間違いではないことは明らかです。

エラーが発生している箇所に係るPOST変数の内容を確認したところ、emptyでした。

数値が入っているべき変数がemptyだったために発生しているということです。

特定条件でemptyになるということは、どこかで上書きしてるとか…。

しかしながら、そのような箇所は存在しませんでした。

次に、エラーが発生しているページで$_POSTをvar_dumpしてみました。

確かに、当該POST変数がなくなっています。

$_POSTのダンプをみていたら、配列の次元が1000になっていることに気づきました。

「これは怪しい」

調べたところ、POST変数の数に上限を設定できる機能があり、php.ini等に設定できるようです。

max_input_vars

このディレクティブを使うと、ハッシュの衝突を悪用したサービス不能攻撃を受ける可能性を軽減できます。

とのことで、phpinfo()で現在の値を確認すると、1000ということで、どうやら間違いなさそう。

当該ディレクティブ本来の意義から、最低限の設定値を見積もって再設定したところ、無事すべてのPOST変数を受信できました。

VS Codeのターミナルでconda activate my_envが反映されない

GeoJsonファイルからShapeファイルを作成する必要があったので、以下の投稿を参考にさせてもらった。

https://www.gis-py.com/entry/geopandas_shape

ところが、geopandasのインストールがconflictしまくってできない。

以下の Creating a new environment を参考に、別環境を作ってやっとインストールできた。

https://geopandas.org/install.html

しかしながら、VS Codeで実行しようとするとインポートできないというエラーが発生する。

VS Codeのターミナルで、どの環境で実行しているのかを確認する。

>conda info -e

案の定、geopandasをインストールした環境ではない。環境を選択するには、

>conda activate my_env

再度、確認しても変更されていない！

コマンドラインからは実行できたので、VS Codeの設定の問題かと試行錯誤した結果、よくよく考えるとVS CodeのターミナルはPowerShellだった。

VS Codeとは別に、PowerShell単体で確認したところ同じ現象が確認された。

調査対象をPowerShellに切り替えたところ、以下の情報にたどり着いた。

https://github.com/conda/conda/issues/8428

conda init powershell

この後、PowerShellでも、環境の選択が可能になった。

TypeScriptでGoogle Maps

さて、VS CodeでTypeScriptをかけるようになったら、次はGoogle MapsをTypeScriptでかきたい。

課題としてはGoogle Mapsにお絵描きだ。
はて？TypeScriptソース内にGoogle Maps JavaScript APIをどうやって導入すればいいんだろう、と思っていたら、AngularでGoogle Maps JavaScript APIを使っている投稿があるので参考にさせてもらう。

1. Install Google Maps types for typescript support

   npm install --save @types/googlemaps

2. Import the Google Maps types into component

   import {} from 'googlemaps';

3. 以下の１行を記載した新規TSファイル「index.d.ts」を設置

   declare module 'googlemaps';

これで、TypeScript内で「google.maps」が使えるようになった。

VS CodeのTypeScript動作確認でいきなりつまずく

今更ながら、VS CodeでTypeScriptでもやっちゃおうかなー、などと軽い気持ちでVS CodeのTerminalをたたく…

> npm install -g typescript

 動作確認は…か、

> tsc --version

tsc : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\hogehoge\AppData\Roaming\npm\tsc.ps1 を読み
込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参
照してください。
発生場所 行:1 文字:1
+ tsc --version
+ ~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess 

なになに、デフォルトではWindowsのPowerShellスクリプト実行ポリシーによって実行が許可されていない…

https://attakei.net/blog/2019/windows-vscode-venv/index.html
ふーん、settings.jsonで、ターミナル起動時にPowerShellの実行ポリシーを変更できるのか…

{
  "terminal.integrated.env.windows": {
    "PSExecutionPolicyPreference": "RemoteSigned"
  }
}

メール文字化け対策

今更知ったのだが、PHPでメールを送信する際に 'ISO-2022-JP' でエンコードするのではなくて、'ISO-2022-JP-MS' でエンコードすると幸せになれるそうだ。

参考サイト：PHPでJIS以外の文字を文字化けせずに日本語メールを送る方法

PHPからGeographicLibを使う

回転楕円体面上（地球表面上）の正多角形を見て、SWIGを使ってPHPからGeographicLibを使おうと企図。
動作環境：エックスサーバ

SWIGのインストール

~/tmpにダウンロード・展開して、~/localにインストールする。

$ cd tmp
$ wget http://prdownloads.sourceforge.net/swig/swig-3.0.12.tar.gz
$ tar xzf swig-3.0.12.tar.gz
$ cd swig-3.0.12
$ ./configure --prefix=$HOME/local
$ make
$ make install

~/local/binにPATHを通すために、.bashrcに以下を追加

export PATH=/home/user/local/bin:$PATH
export CPLUS_INCLUDE_PATH=/home/user/local/include:$CPLUS_INCLUDE_PATH

※userは、それぞれの環境に合わせて変更

.bashrcを再読込

$ source ~/.bashrc




コマンドの実行を確認

$ swig -version

SWIG Version 3.0.12

（省略）

参考）エックスサーバーにSubversionをインストールする

GeographicLibのインストール

$ wget https://sourceforge.net/projects/geographiclib/files/distrib/GeographicLib-1.48.tar.gz
$ tar xzf GeographicLib-1.48.tar.gz
$ cd GeographicLib-1.48
$ ./configure --prefix=$HOME/local
$ make
$ make install

PHPの実行モジュール作成

インターフェースファイル [myproject.i] を準備したら、以下を実行
$ swig -c++ -php myproject.i

php7の場合：$ swig -c++ -php7 myproject.i

さらに、C++のプログラム [myproject.cpp] を準備して、以下を実行

$ g++ -fpic -c myproject.cpp

$ g++ `/opt/php-7.0.18/bin/php-config --includes` -fpic -c myproject_wrap.cxx

$ g++ -shared *.o -o myproject.so -Wl,-rpath=/home/user/local/lib -L/home/user/local/lib -lGeographic

実行モジュール [myproject.so] ができていることを確認。

php.ini に、実行モジュールの配置場所を設定
extension = /home/user/local/lib/php/7.0.18/extensions/myproject.so

使用例

require_once "Geodesic.php";

$lat2 = new_doublep();

$lon2 = new_doublep();

$poly=[];
for($i=0; $i<$nVertices; $i++) {
    $dir = 90 - $i*360 / $nVertices;

    Geodesic::circle($center[0], $center[1], $radius, $dir, $lat2, $lon2);

    $poly[] = sprintf("%f %f", doublep_value($lon2), doublep_value($lat2));
}

さくらのクラウドを使ってみる（２）

次の日サーバを起動してWebページを確認する。
表示されない…。

firewalld が自動起動している。
systemctl is-enabled firewalld
enabled

firewallを止めてしまうのはまずいので、ポート80 (http) と 443 (https)を開けておく。
firewall-cmd --permanent --zone=public --add-service=http
firewall-cmd --permanent --zone=public --add-service=https
firewall-cmd --reload

firewalld が起動しているのを確認して…
systemctl status firewalld
active (running)
Webページが表示されることを確認。

WordPressで動作確認

wget https://ja.wordpress.org/latest-ja.tar.gz
-bash: wget: command not found

何から何まで自分でやらなければならない、それが root ってことだ。
yum -y install wget

tar zxf latest-ja.tar.gz
chown -R apache:apache wordpress

WordPressにアクセスしてみる。
「お使いのサーバーの PHP では WordPress に必要な MySQL 拡張を利用できないようです。」

あれ、php-mysql 入れるの忘れてた。しかも php-mysqlnd に変わってる。

yum --enablerepo=remi,remi-php56 install php-mysqlnd

後で必要になるかもしれないので以下もインストール。
php-pear php-xmlrpc php-soap

php-mcrypt を入れようとしてエラー。
Error: Package: php-mcrypt-5.6.30-1.el7.remi.x86_64 (remi-php56)
Requires: libmcrypt.so.4()(64bit)

libmcrypt-devel を入れて…
yum --enablerepo=epel install libmcrypt-devel

再チャレンジ
yum --enablerepo=remi,remi-php56 install php-mcrypt

入った。

MySQLデータベース作成

MySQL の root ユーザを作成してパスワードを設定
/usr/bin/mysqladmin -u root password 'PASSWORD'

error: 'Access denied for user 'root'@'localhost' (using password: NO)'

…
以下で root の初期パスワードがわかるらしい。
http://dev.mysql.com/doc/refman/5.7/en/linux-installation-yum-repo.html

grep 'temporary password' /var/log/mysqld.log

それらしい文字列が釣れたので、さっそく試してみる。
mysql -u root -p

入れた。
すぐパスワードを変更しておけ…か。
ALTER USER 'root'@'localhost' IDENTIFIED BY 'NewPASSWORD';

ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
ポリシーね…。
https://dev.mysql.com/doc/refman/5.6/ja/validate-password-plugin.html

あれ、mysql_secure_installation を「必ず実行して MySQL インストールをセキュアにしてください。」だそうだ。これでも root のパスワードを設定できるみたいだけど、最初のパスワードはやっぱり必要みたいだな。

データベースとユーザを作って早速WordPressをインストールっと…
ysql> create database wpdb;
Query OK, 1 row affected (0.00 sec)

mysql> grant all privileges on wpdb.* to wpuser@localhost identified by 'hogehoge';
Query OK, 0 rows affected, 1 warning (0.01 sec)

※ waning を表示するには、以下を参照。
https://dev.mysql.com/doc/refman/5.6/ja/show-warnings.html

wordpressインストールディレクトリにアクセスして、「さあ、始めましょう！」をクリック。
データベース情報を入力して、「インストール実行」。

WordPressサイト情報を入力して、「WordPressをインストール」をクリック。

無事ログイン画面が表示され、ログインできました。

htaccessを許可するための設定

/etc/httpd/conf.modules.d/00-base.conf 内にて以下の記述を確認
LoadModule rewrite_module modules/mod_rewrite.so

/etc/httpd/conf/httpd.conf 内にて、以下の設定をする。
<Directory /var/www/html>
    AllowOverride All
</Directory>

apache再起動
systemctl restart httpd

【参考】
https://devops.profitbricks.com/tutorials/install-and-configure-mod_rewrite-for-apache-on-centos-7/

phpMyAdminのインストール

yum install --enablerepo=remi,remi-php56 phpMyAdmin

Error: Package: php-tidy-5.6.30-1.el7.remi.x86_64 (remi-php56)
Requires: libtidy-0.99.so.0()(64bit)

libtidy-devel を入れて…
yum --enablerepo=epel install libtidy-devel

再チャレンジ
yum install --enablerepo=remi,remi-php56 phpMyAdmin
Complete!

apacheを再起動して、/phpmyadmin/ にアクセス…

Forbidden
You don't have permission to access /phpmyadmin/ on this server.

/etc/httpd/conf.d/phpMyAdmin.conf に

<Directory /usr/share/phpMyAdmin/>
   AddDefaultCharset UTF-8

   <IfModule mod_authz_core.c>
     # Apache 2.4
     Require local
     ...

とあり、リモートからのアクセスは受け付けていない。
とりあえず、開発中だけリモートから受け付けることにする。

     Require all granted

apacheを再起動して、/phpmyadmin/ にアクセス…

見慣れたログイン画面が表示された。（「phpMyAdmin へようこそ」なんて書いてあったんだ…）

さすがに root でログインはないだろうということで、ユーザを作っておく。

GRANT SELECT, INSERT, DELETE, UPDATE, ALTER ON `wp`.* TO 'pma'@localhost IDENTIFIED BY 'PASSWORD';

FTPサーバを立てる

yum -y install vsftpd

vi /etc/vsftpd/vsftpd.conf

以下を有効にする。

anonymous_enable=NO
ascii_upload_enable=YES
ascii_download_enable=YES
chroot_list_enable=YES
chroot_list_file=/etc/vsftpd/chroot_list
local_root=/var/www/html/
use_localtime=YES
user_config_dir=/etc/vsftpd/vsftpd_user_conf

firewalld に FTPを許可する。

firewall-cmd --add-service=ftp --permanent
firewall-cmd --reload

FTPユーザを作成する。
adduser ftpuser
passwd hoge

mkdir /etc/vsftpd/vsftpd_user_conf
vi vsftpd_user_conf/ftpuser

中に以下を記述
local_root=/var/www/html/

chroot_list にユーザ追加
ftpuser

vsftpdを再起動
systemctl restart vsftpd

上位ディレクトリへアクセスできないことを確認

書き込み、削除ができない…パーミッションを変更する。
chown -R apache:apache /var/www/html
usermod -G apache ftpuser

/etc/vsftpd/vsftpd.conf に以下を追加。
allow_writeable_chroot=YES

アップロード及び削除できた。

さくらのクラウドを使ってみる

スタートアップサービスを動かすサーバを立てなければならなくなったが、サーバ負荷の予測が現時点でまったくできない（まあ、もともと正確な負荷見積り技術もないのだが、これから増やしていくからわからないんだと自分を納得させる。）。

“ここは、後でスケールアップが容易と聞いているIAASを選んでおくしかない（汗）…”（心の中のつぶやき。）

といっても、クラウドには完全に乗り遅れているので、藁をもつかむ思いで、タイミングよく開催されていたGunma Webさんの勉強会に飛び込む。会場はMacを開いてカタカタやっている若者で一杯だ。超アウェーだ。いい年したおっさんがひとりで来るところではない。

私もいつもお世話になっている「さくらインターネット」の、企画業務をされているという横田さんがDockerというなにやらコンテナ関連の技術の話をしている。その他にも、勉強会のメンバーがユニークな発表をしている、若さって素晴らしい…（と、歳のせいにしてごまかす）。

とりあえず、いつも「GUNMA GIS GEEK」でネタをもらっている清水さんに挨拶して、救いを求める。先ほどの横田さんを紹介してもらい、初心者を必死でアピールしたところ、「新米サーバ／インフラ担当者のための 仮想サーバ／クラウド技術の常識」という本をもらった（もちろん、さくらインターネットの会員登録から説明してある本だ）。なお、参加者全員に「さくらのクラウド」の20,000円クーポンを配っているので、ここは、まんまと「さくらインターネット」さんの術中にはまって、もう「さくらのクラウド」で行くしかない！と、二次会も参加せずに帰って本を一気に読み終える。

「なんだか簡単そうだ…」

さっそく、クーポンを使って「さくらのクラウド」でサーバを構築する。

コントロールパネルから、ポチっとサーバを作る。（簡単だ…）
yum -y update でOSを最新の状態にする。（順調だ…）
reboot で一応リブートしておくんだ。（念のためだ…）

Apache、MySQL、PHPのインストールも yum を使って簡単に行えます…か。

yum install httpd php mysql-server php-mysql

あれ…なんかエラーが出てる。

一つづつやってみるか…。

yum install httpd

うん、大丈夫そうだから起動！
service httpd start

あれ、Redirect...?
CentOS 7 からは systemctl start httpd だそうだ（…）。
しかし何のメッセージもでないので起動に成功したのかどうかわからない。

systemctl status httpd

active (running)...

Webページが見えるか確認する。
表示されない…。

次に、yum install mysql
Conflict...?
何、CentOS7には mariaDB が入っているから消せだと…。

yum remove mariadb-libs
rm -rf /var/lib/mysql/

MySQLのリポジトリを追加
yum localinstall http://dev.mysql.com/get/mysql57-community-release-el6-7.noarch.rpm
続けてインストール
yum -y install mysql-community-server

何だかエラーが出ている。
Downloading packages:
Delta RPMs disabled because /usr/bin/applydeltarpm not installed.

インストールすればいいみたい。
yum install deltarpm

再度インストール
またエラー。
Downloading packages:
No Presto metadata available for base ...

うーん。
yum clean metadata

再再度インストール
入った…。
mysqld --version でも確認。

次に、yum install　php php-mysql

php 5.4が入っちゃったよ…。

yum remove php-*
yum install epel-release
yum install --enablerepo=remi,remi-php56 php php-mysqlnd php-devel php-mbstring php-pdo php-gd

php --version
PHP 5.6.30 (cli) (built: Jan 19 2017 07:57:06)
Copyright (c) 1997-2016 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies

Webページが見えないので、
systemctl stop firewalld

Apatche 2.4のテストページにようやくご対面。

間髪入れずに、phpの動作確認。
cd /etc
php.iniに date.timezone = "Asia/Tokyo" を追加。

cd /var/www.html に <?php phpinfo() ?>と書いたindex.phpを設置。

Web表示を確認。
<?php phpinfo() ?>

ノー！！

cd /etc/httpd/conf
httpd.conf に以下を追加

<FilesMatch \.php$>
    SetHandler application/x-httpd-php
</FilesMatch>

httpd を再起動してWebページでPHPの動作を確認。

やっぱり前途多難だ。

WP jQuery Lightboxがdo_shortcode()で機能しない

WP jQuery Lightboxは、ギャラリーの画像をポップアップして表示してくれる便利なプラグインだ。

エディタでギャラリーを作成して、ギャラリーの設定で「リンク先」を「メディアファイル」にするだけでいい（※jQuery Lightboxプラグインの設定で、「自動的に画像（イメージリンク）にLightbox効果を適応する」のチェックを外していなければ）。

エディタにギャラリーを作成しておけば、ギャラリーの編集で画像の入れ替え等もできて便利なのだが、固定ページの更新に使用する際に、エディタを他の部分の文章の更新に使用するために、ギャラリーをテンプレートファイル内で、

echo do_shortcode('[gallery link="file"]')

で出力することにした。

一見、ギャラリーが正しく表示され問題ないように見えるのだが、画像をクリックするとポップアップせず、画像ファイルが直接開いてしまう。HTMLソースを確認すると、画像リンクに本来追加されるはずの

rel="lightbox[XXX]"

が見当たらない。

対応方法として、

$gallery_shortcode = '[gallery link="file"]';
 print apply_filters( 'the_content', $gallery_shortcode );

とすると、正常に機能した。

検証環境：
 WordPress 4.5
 wp-jquery-lightbox 1.4.8