plog - 4ページ目 (5ページ中) -

iOSのSafariでColorboxの表示がセンターに来ない件

モーダル表示で何かと便利なColorboxだが、iOSのSafariだと、ウィンドウがが縦センターじゃなく上の方に出る。どうも、表示時のアニメーションが原因らしい。

なので、’transition’を’none’にしてアニメーションを切ってみたら、ちゃんと出てきた。（デフォルト値は’elastic’）

$(".colorbox").colorbox({transition:"none"});

WordPressのログイン中にサイトのツールバーを非表示にする

WordPressログイン中にサイトを見ると、headerの上部に隙間が空くなど、ツールバーが邪魔になると時があります。
ユーザーの管理画面で「ユーザー」-「ツールバーを表示する」のチェックを外すと非表示にできますが、手っ取り早い方法としてテーマの関数に追加します。


add_filter( 'show_admin_bar', '__return_false' );

WordPressのデータベースのバックアップ

WordPressのアップグレードや、テーマの大幅な更新を行う前にバックアップを行うことが大事です。

プラグインで行う

BackWPupをインストールして「新規ジョブを追加」。
バックアップするテーブルを全部選択されていることを確認しておきます。
バックアップしたデータはローカルフォルダ他クラウドにも保存出来ますが、とりあえずイレギュラーで容量も少ないので、今回は「メールでバックアップを送信」にしておきます。

コマンドラインで行う

複数案件を管理しているとプラグインでいちいち設定するのも面倒なので通常はコマンドラインで行います。

指定のデータベースをバックアップ

$ mysqldump -u root -p DB名 > dump_YYMMDD_DB名.sql

戻す場合は

$ mysql -u root DB名 < dump_YYMMDD_DB名.sql

WordPressのアップグレードやプラグインのインストールを管理画面から行う

WordPressに深刻な脆弱性が報告されましたため、注意喚起情報が回っています。
「改ざん被害情報が多数寄せられております。」との事なので、改めてアップグレードの方法を見直しておきます。

wp-config.phpに追記

define('FS_METHOD', 'direct’);

※ ABSPATHの記述よりも上の行に追加すること。

wordpressフォルダのグループをapache実行ユーザーへ（オーナは変えなくて良い）

パーミッションを775へ

以上で管理面からの更新、プラグイン・テーマのインストール・更新を行えます。

OSX El Capitan へアップグレードで XtraFinder が動かない

OSX El Capitan はOSをよりセキュアに利用出来るようになる事と引き換えに、システムに深く関わるツールは動作に制限が出るようです。
XtraFinderもその一つのようで、アップグレードしただけでは起動すらできません。

オフィシャルサポートページを参考にシステムの設定を変更すると起動は可能（制限有り）

https://www.trankynam.com/xtrafinder/sip.html

1. Boot to Recovery OS by restarting your machine and holding down the Command and R keys at startup.
Command+R キーを押しながらMacを起動して、リカバリーモードにする。

2. Launch Terminal from the Utilities menu.
「ユーティリティー」メニューから「ターミナル」を起動する。

3. Enter the following command: csrutil enable –without debug
Reboot your computer.
セキュリティの一部を変更（若干不安）し、再起動。

# csrutil enable --without debug
Successfully disabled System Integrity Protection. Please restart the machine for the changes to take effect.

これで XtraFinderが動作します。
この状態で、タブ切り替えのショートカットやウインドウの背景を暗くする等の機能は使えますが、カラム表示でフォルダを先頭に並び替える機能が設定画面に出てきません。
仕方がないので Finder の「表示オプション」で表示順序を種類に変更します。

OSX El Capitanへアップグレード時のローカル環境問題解決

色々とピンポイントで動かないアプリも出てきたので、作業環境のOSX Yosemiteをアップグレードしました。
macOS Sierra は、リリースされてまだ不具合も多そうなので、一つ前の OSX El Capitanへしたのですが、ローカルのサーバー周りで、マイナーな個人的なトラブルがありました。

VirtualHostが効いていない

httpd.confファイルが初期化されて設定が読み込まれていない事が原因。

$ sudo vi /etc/apache2/httpd.conf

#Include /private/etc/apache2/extra/httpd-vhosts.conf

コメントを外す

同様にいくつか別件で必要なモジュールもロードする

LoadModule alias_module libexec/apache2/mod_alias.so
LoadModule rewrite_module libexec/apache2/mod_rewrite.so
LoadModule php5_module libexec/apache2/libphp5.so

apacheを再起動

$ sudo apachectl restart

VirtualHostの問題は解決するも、作業中のWordpressサイトでデーターベース接続エラー

ターミナル上ではデータベースのアクセスに問題無いが、Wordpressからのみエラーになる。
原因がわからず一旦 MySQLを再インストール

$ brew uninstall mysql
$ brew install mysql

それでも解決しないので wp-config.php を変更

#define('DB_HOST', 'localhost');
define('DB_HOST', '127.0.0.1');

これで、一旦データーベースに繋がるようになりました。

若干気になるのでもう少し調べてみると、 php.ini がありませんでした。
php.ini.default をコピーして編集します

$ sudo cp -p /etc/php.ini.default /etc/php.ini
$ sudo chmod+w /etc/php.ini
$ sudo vi /etc/php.ini

short_open_tag = On
post_max_size = 20M
upload_max_filesize = 20M
extension=php_mysql.dll
date.timezone = "Asia/Tokyo"
pdo_mysql.default_socketi = /tmp/mysql.sock
mysql.default_socket = /tmp/mysql.sock
mysqli.default_socket = /tmp/mysql.sock

$ sudo chmod-w /etc/php.ini

wp-config.php をもとに戻して接続出来るようになりました。

define('DB_HOST', 'localhost');
#define('DB_HOST', '127.0.0.1');

El Capitan は Yosemite に比べて動作がキビキビしています。
XtraFinderが動かなくなる（条件付きで動く）事もありますが、結果、アップデートを行って良かったです。

古いスマホでe.preventDefault()が効かない件

ちょっと古いスマホ（iPhone5SとかAndroidの4.x 辺り）のブラウザだと、e.preventDefault()が効かないので、a タグの処理が走ってしまう….

で、ググったりテストしたりして、分かったこと。

onClickだと、どうやっても無理。
onTouchEndでも、どうにも無理。
onTouchStartなら行けそう！
e.stopPropagation()はなんか、効くっぽい。

って事で、以下の様な感じにしたら、なんとか動いた。


$('a').on("touchstart",function(e){
	e.preventDefault();　	　←普通はこれでキャンセル
	e.stopPropagation();	　←問題スマホは、これでキャンセル
	//処理内容
}

SSLサーバー証明書 Let’s Encrypt（無料）を設定する

会社のオフィシャルWEBサイトにはRapidSSLを導入していますが、ワイルドカードタイプは年間数万円かかるので、別サービスではお金の掛からない「Let’s Encryptサーバー証明書」を利用します。

リポジトリのクローン

$ git clone https://github.com/certbot/certbot

依存パッケージのインストール

$ cd certbot/
$ sudo ./certbot-auto

証明書の取得

$ sudo /certbot-auto certonly --webroot -w /var/www/sample（ドキュメントルート） -d sample.plane-plan.com -m hoge@plane-plan.com --agree-tos

WEBサーバーの設定を追記（ssl.conf等）


<VirtualHost *:443>
SSLEngine on
ServerName sample.plane-plan.com:443
DocumentRoot “/var/www/sample.plane-plan.com"
SSLCertificateFile /etc/letsencrypt/live/sample.plane-plan.com/cert.pem
SSLCertificateKeyFile /etc/letsencrypt/live/sample.plane-plan.com/privkey.pem
SSLCertificateChainFile /etc/letsencrypt/live/sample.plane-plan.com/chain.pem
SSLProtocol all -SSLv2
SSLCipherSuite DEFAULT:!EXP:!SSLv2:!DES:!IDEA:!SEED:+3DES
<Directory "/var/www/sample/“>
Options -Indexes FollowSymLinks
AllowOverride All
</Directory>
</VirtualHost>

httpのアクセスをhttpsへリダイレクト


<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

サーバー設定のリロード

$ sudo service httpd reload

証明書の更新

署名書の有効間は90日間です。
「certbot-auto renew」で、有効期間30日未満の証明書が更新されます。

$ certbot-auto renew

実際に更新しようとした所、エラーが発生しましたがPythonのバージョンを2.7を入れることで更新できました。

virtualenv: コマンドが見つかりません

Python2.7で動作するシェルを起動します。

$ sudo scl enable python27 bash

CentOS 6 で発生するエラーの対処法
https://letsencrypt.jp/usage/centos6-error.html

Let’s Encrypt 総合ポータル
https://letsencrypt.jp/

※追記
複数ドメインを一括で更新時に問題がありました。
一旦Apacheを停止して更新できます。

Attempting to renew cert from /etc/letsencrypt/renewal/z-groove.com.conf produced an unexpected error: Could not bind TCP port 443 because it is already in use by another process on this system (such as a web server). Please stop the program in question and then try again.. Skipping.
# service httpd stop
# certbot-auto renew
# service httpd start

線を描くアニメーション

Canvasでサクッと描画できるのはいいけど、描画過程を見せたくて、線を引っ張る過程をアニメーションさせる方法を模索中。

Line Animation

始点のと終点の座標から、角度と線分の長さを割り出し、始点から終点に向かって、ちょっとづつ線を描いては消す…ってのを繰り返すってだけがが、そこそこ成功。

なお、描画にはタイマー関数ではなく、「requestAnimationFrame」を使ってます。

>>Canvasアニメーションの要点

OSXで写真ファイルのタイムスタンプ（作成日・更新日）を撮影日に合わせる

日常的にデジタルカメラで撮影した写真を管理していると、移動やコピー時にファイルの日付がズレてしまう場合があります。

また、LightRoom等でRAWを現像書き出したファイルも撮影日とは違う日付になってしまいます。
明確にイベント名で管理できない多くの写真データは撮影日ベースで管理したいところです。

そこで、「exiftool」を使ってタイムスタンプの変更を行ってみます。

homebrewでexiftoolをインストール

$ brew install exiftool

対象ファイルのタイムスタンプを撮影日に変更

$ exiftool "-DateTimeOriginal > FileModifyDate" *.{jpg,JPG}

ファイル名に撮影日に変更の場合

$ exiftool "-FileName < CreateDate" -d %Y-%m-%d_%H-%M-%S%%-c.%%e *.{jpg,JPG}

更に年月フォルダを追加して自動的に振り分けたい場合

$ exiftool "-FileName < CreateDate" -d %Y-%m/%Y-%m-%d_%H-%M-%S%%-c.%%e *.{jpg,JPG}

暫くはこれで良いかとおもいます。
元のファイル名も必要な場合はタイムスタンプを変更した上でAutomatorかbashにて対応です。