wordpressのメンテナンス

保護された通信

https化をすると表示されるのが「保護された通信」しましたという項目。
ありがちなのが、昔の記事の画像やリンク。これを放っておくと「http と https」が混在していますセキュリティ的によくありません!!という項目が表示されてしまう。自分のブログの過去記事も画像のhttps化が済んでなかったようで…とりあえず対応させてきました。

おそらく全てのページにおいて対応させてきたので大丈夫だとは思いますが、ここのページ対応できてないよ!!というお言葉があれば修正させていただきたいと思います。

文字サイズをアップ

14pxだったのを15pxにしてみたのですがお気づきましたか?
私は文庫本を読んでいるので細かな字に苦を感じないのですが、慣れてない人とか年齢が高い方にも少しでも緩和してあげようと思い文字サイズを少しだけ大きくしてみました。

1pxだけでも、読みやすさというのは変わるのでこの調子で気になるところを修正していきたいですね。

気になるトピックス

このような感じで関連したページを紹介するようにしてみました。まだまだコンテンツは薄いので似たような記事がでるのが乏しいですが、新しい記事とか気になる記事に誘導できればと思っております。

webのシステムとユーザビリティを考えるのは大変難しい。

12年HTMLとCSSそしてjavascriptを弄ってwebサイトを制作しているが、最近のHTML5やCSSそして新たな記述方法が増えて頭を悩ませている。

最近では、javascriptやcssを圧縮したり排除、軽量化してモバイルユーザーや通信回線が貧弱なユーザーにもメインコンテンツの内容を読めるようにするというシステム変化は産まれているが、それを考えながらweb(PC)でもモバイルでも双方向見られるようなコンテンツをつくるのは、長年やってきた製作者でも頭を抱える仕組みである。

これから推奨されるWebシステム

大まかに言えば、styleのような装飾よりも文字コンテンツをどれよりも早く描写させなさい。阻害している読み込みは非同期(ラスト)に読み込ませるか、もしくは削除しなさいという言葉である。もちろん色々と対処法はあるが旧世代で作ったWebはデザイン優先でつくられてるため、なかなか書きなおすには辛い。旧世代でも推奨されるオススメの方法を書きたいと思う。

圧縮と最適化

Page SpeedInsight でよく言われるのが、CSSやJavascriptを圧縮しなさいという言葉。別にZIPにして保存しろというわけではない。サーバー側が圧縮してくれるシステムがあるので紹介しよう。

.htaccess に AddOutputFilterByType DEFLATE を記入する

もちろんこの圧縮を許可してないサーバーでは使用は出来ないが、自身で圧縮するよりも簡単で自動的にサイズを圧縮してくれる。

AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf 

キャッシュをするように .htaccess に書き込む

これは昔からある技術だが、ブラウザにキャッシュをするように命令を送ることによってその期間の間はサーバーから情報を毎回もらうのではなくブラウザに保存された情報で処理をするようになりより速く読み込めるようになる。

ExpiresActive On ExpiresByType text/css "access plus 7 days" ExpiresByType image/gif "access plus 7 days" ExpiresByType image/jpg "access plus 7 days" ExpiresByType image/jpeg "access plus 7 days" ExpiresByType image/png "access plus 7 days" ExpiresByType text/javascript "access plus 7 days" ExpiresByType application/javascript "access plus 7 days" ExpiresByType application/x-javascript "access plus 7 days" 

CSSファイルやJavascriptの最適化

機械で読む構文は、構文になってれば変わらないので、ぺちゃんこに圧縮して読ませてくださいということ。

ぺちゃんこCSS ( 圧縮CSS )

CSSファイルでも500Byteの差しかないので圧縮するような方法を持ってない方とかデザインを著しく修正する製作者は後回しでもよいかもしれません。

画像の圧縮化と最適化

Webのサイズの90%を占めていると言われている画像ですが、適したサイズと圧縮率を使えば100〜500KByteも節約することができるということ。対処法は簡単で、Webに表示されている「縦横のサイズ」と同じファイルを製作するとよいらしいです。

例えば、圧縮率(Jpeg)は画像の劣化がさほどない85%を使用し通過ファイルであるGIFはなるべく使わずPNGにファイルにし、ユーザーにもサーバーにも優しい通信を心がけることと言っております。

デザイナーサイトや写真を使うようなサイトでは表示を劣化させたもの。本物のファイルは別に用意してクリックした時に読み込ませるような方法を取ると良いらしいですね。

javascriptの非同期化とjQueryの非推奨

コンテンツの読み込みを阻害するjavascriptはなるべく非同期化をしasyncなどを使ってなるべくコンテンツを読み終わったあとに読み込ませる。

そしてhtmlと共存をして読み込んでスタイルを形成するjQueryは「なるべく使わない」ということです。

async

javascriptの外部呼び出しファイル(js)の記述文の中に async 設定を行うというもの。

<script type="text/javascript" src="hoghog.js" async></script> 

これを記述することによりhtmlが読み込まれてからjavascriptの構文が走ります。その代わり最後に読み込まれるため、動的コンテンツが反映されないなど問題点もあります。

ユーザービリティ

パソコンでもスマートフォンでも見られるようにするというもの。昔はjavascriptで端末の判断を行っていましたが、最近ではCSS3になりCSS内で表示しているサイズの判断(media Query)を行えるようになりました。

CSS サイズ判断に必要なもの。

サイズの判断に伴い書く構文がファイルごとにあります。
htmlに「meta viewport」とCSSに「media screen and (size)」を書く方法です

htmlファイルに書き込む内容

<meta name="viewport" content="width=device-width"> 

CSSファイルに書き込む内容

@media screen and (max-width: 700px) { body { -- 処理文 -- } } 

ほかにも様々な処理方法

ここにご紹介しきれない程の処理方法を紹介されているサイトもあります。
https://dev.classmethod.jp/smartphone/device-media-queries/

HTML5

HTML4まではdivで成形したりh1などの見出しタグで読みやすく解りやすい記述を心かげたであろう。HTML5ではdivはスタイルを形作るものではなく文をまとめる箱的なもの。そのかわり<header><nav><article><section><footer>などの新しいタグを使ってメカニカルな内容を読ませようということ。

主にSEOに効果があり、どれがメインのコンテンツなのかサブコンテンツそれともメニューなのか判断させる事ができます。

詳しいサイトはたくさん有るので、どのタグがどのような効果を生み出すのか説明します。

<header>

<head>タグとは違う存在。主にタイトルやヘッダーとして書く内容を記入します。

<nav>

navigation (ナビゲーション)の略。メニューを表記する時に囲います。

<article>

日本語名で「章」ブログで言えば1記事のこと。

<section>

日本語名で「節」この記事で言うと「これから推奨されるWebシステム」「ユーザビリティ」「HTML5」の項目がsection 主に<h2>と共存して使われることが多いです。<article>タグの中に入れ子になります。

<footer>

頭があれば足もある。最後に記入する項目です。主に「Copyright」が書かれます。

他にもあるけども

補足の<aside>などもありますが上の5つを上手に使えば綺麗にまとまる気がします。今まで<div>の中にidやclassで設定してたと考えると専用のタグがあるので利便性も向上することでしょう。

まとめ

Google Page SpeedInsightで直した方がいいよと言われているものだけ紹介してみました。.htaccess に関しては対応していたら記入させてあげると良いかもしれません。

綺麗な読みやすいコードとWebでのユーザビリティを考えるのはなかなか長年やっていても難しいことだと改めて実感しました。少しでもユーザーに対して考えてみると顧客も増えるのかもしれません。

WordPress MySQL 移行メモ (5.5 → 5.7) – さくらサーバー

http://www.sakura.ad.jp/news/sakurainfo/newsentry.php?id=1841
セキュリティ的にも処理向上的にもアップデートしてくださいというお達者が来ているので初心者ながらもアップデートが出来たので紹介してみる。

さくらコントロールパネル

WordPress が制作出来ていること前提なのでログインなどは省きます。

MySQL 制作

アプリケーションの設定から「データベースの設定」をクリックします。
そして「データベースの新規作成」をクリックしこのような画面を出します。
MySQL 5.7 制作ページ

MySQL5.7を選択し、データベース名にMySQL5.5と"同じ名前"にし同意をし作成してください。文字コードはUTF-8のままで結構です。

MySQL5.5 → MySQL5.7 への移行

まだデータベースは0のままです。
設定ページにもどりMySQL5.5の「管理ツール ログイン」をクリックしてください。そうするとphpMyAdminというページに飛びますのでユーザー名とデータベースで設定したパスワードを入力します。

そこから「Synchronize」というタブをクリック
そうするとこのような管理画面になるので「Source database」を「Current server」に変更、「Target database」は何も変更せず下記のように入力します
Synchronize mode

Souse database

データーベース [ database name ]
*information schema は database用の設定ファイルなので sync しなくてよい

Target database

ホスト [ mysql(ユーザー取得ナンバー).db.sakura.ne.jp ]
Port [ 3306 ]
Socket [ 空欄でOK ]
ユーザ名 [ 初期アカウント名 ]
パスワード [ データベースで登録したパスワード ]
データベース [ Source database で登録してある database name ]

最後に実行を押すと通信するので1分弱ゆっくり待ちます。

Synchronize database

Synchronize database

このような画面になるので右下の「Synchronize databases」をそのままクリックします。これでMySQL5.7の設定は完了しました。

うまく出来ない場合

データベースの「MySQL5.5のインポート」と「MySQL5.7へのエクスポート」を一度行なうことで解消する場合があります。

WordPress 側の設定

転送ソフトなどで「wp-config.php」をダウンロードします。
wp-config.php
いろいろ修正する箇所はありますが今回は「DB_HOST」のみを修正してください。「mysql000.db.sakura.ne.jp」となっておりますが、これをMySQL5.7で扱っているホスト番号(ユーザー取得ナンバー)にします。そしてアップロード

最後に自分のWordpressが表示できてるか確認をし完成です。

相対的な測度

MySQL5.5にくらべて5.7にアップロードしてみたら管理ページの表示速度が1.5倍くらい向上した感じがします。誤差と言えば誤差ですが思ったよりも簡単にアップロードできたのでオススメです。

唯一の問題点

【レンタルサーバ】データベースの利用制限解除

MySQL5.7からデーターベース制限があります。スタンダードでは500MBまでにしてくださいというさくらインターネットのお言葉です。ですが場合によっては解除依頼を出せるということなので心配しなくてもいいかもしれません。

WordPress の ちょっとした高速化 (有料プラグインもあり)

WordPressは高速化が大事!と言われることが多いですがなかなか速くならないのがWordpressユーザーの悩ましいところです。しかし導入して少しだけ弄るだけでも2倍3倍くらい読み込みを速くさせて、無駄な通信(パケット)を減らすことのできるプラグインがありますので紹介します。

高速化プラグイン

EWWW Image Optimizer

EWWW Image Optimizer
https://ja.wordpress.org/plugins/ewww-image-optimizer/

まずは画像を自動的に圧縮してくれるプラグインを紹介。EWWW Image Optimizerです。

WordPressに画像を上げるときには加工してサイズを合わせてから投稿するというのが最適解なのですが、そういうのは面倒くさい!そのままアップロードして画像を上げたいという方にオススメなプラグインです。

主にJPGやPNGをアップロードする際に圧縮(主にメタデータ排除)して少しでも画像を速く表示させるということができます。他にもGoogleが制作したWebPという拡張子にし画像をデコードし文字列と同じように読ませることも出来ます。(サーバーによって対応していない可能性あり)

WP Fastest Cache

https://ja.wordpress.org/plugins/wp-fastest-cache/

次に紹介するのは、キャッシュをしっかり補完し余計なCSSやJSファイルの読み込みを抑制することのできるプラグインです。

WordPressを高速化させる!!というのであれば一番導入して欲しいプラグインであり読み込みで2~3秒かかっていたものを1秒未満までに落とすことができ、面倒くさい設定もなく自分の好みに合わせてチェックリストをチェックするというだけで完了するという便利な仕様となっております。

WP Fastest Cache

無料版

無料版では「モバイルへのキャッシュ」「JavaScript や CSSファイルを自動で Footerへ」「レンダリングでの javascript除去」「Google font を最後に読み込む(async)」という機能は使えませんがページを高速化させるだけであれば問題のない項目となっております。

有料版 (premium)

時価 $39 (2018/01現在 4700円)を一度払うだけで上記の項目も使える様になります。Googleへの評価的には1.2倍、体感速度的には1.3倍くらい速くなるというものであり、どちらかと言うと寄付金としてお世話になったという感じで支払うといいかもしれません。

他にも画像を最適化する機能 (自動ではないがEWWW Image Optimizerと同じような機能)と自動記事バックアップで膨れ上がったデータベースを一括削除する機能などもついております。

Optimize Database after Deleting Revisions

https://ja.wordpress.org/plugins/rvg-optimize-database/

高速化ではないですが便利なプラグインなので紹介。
自動記事バックアップで膨れ上がったデーターベースを決まった周期。決まったバックアップの数で自動的に削除してくれるというプラグインとなっております。

塵も積もれば山となる。Wordpressには記事をつくったときから記事の変更を保存してくれる機能はあるのですが、削除するには記事をのぞいて選択してから削除しなければならないと面倒くさい仕様になっております。記事をかくほど膨れ上がって画像より容量を食っていた!!と後悔することもしばしばあります。

そんな時はこのプラグインを導入することにって「数日以内に変更することがあるから1週間はバックアップ残して欲しい」とか「バックアップはいらないが原本だけだと間違えたときに怖いから最低3つ残して欲しい」などと様々な設定をすることができて便利なプラグインとなっております。

最終的なWordpressの高速化とは?

WordPressで速く記事を見せるというのは、無駄なプラグインを要れない。記事を見せたいのかお洒落なホームページを見せたいのか。どの処理が問題になっているのか特定をすることだと思っております。

今回紹介したのはプレーンな状態でさらに高速化させる為のプラグインになっており、一時変わるかはユーザーによってわかりません。もしかしたら他にも便利な機能があるかもしれませんね。

そういえばひとこと、Wordpressを入れたときから入っている JetPack という公式プラグインですが色々と便利で頼もしいけどもWebサイトへの処理に莫大な負担をかけてるのであまりオススメはしません。使いたい機能を軽量化したモノ、それより高機能なプラグインもあるのである程度Wordpressになれたならば探してみるのもいかがでしょう。

MWeb を Alfred (Workflow) の検索機能を追加する。

今回のアップデート(2017-11-17)で MWeb が Alfred の機能 Workflowに対応しました。作者様が中国語で説明をなさっておりますが、翻訳の意味をこめて内容を書いてみます。

導入方法

ダウンロード

まずApp Storeにて最新版のMWebをインストール。

そしてGithubから「MWeb Workfrow」をダウンロードする。
MWeb Workfrow
https://github.com/tianhao/alfred-mweb-workflow

項目にある「下载」(日本語でいうダウンロード)をクリック 保存先は自分のわかりやすいところに入れてください。

インストール

先程の保存した「MWeb.alfredworkflow」をクリックをすると自動的にAlfredが開くのでインストールを選択。そうするとWorkflow自体は導入します。

必須な手動設定

Alfred での Mweb 追加メニュー
この項目から右端にある。[ χ ] の文字を選択します。そうすると「Workflow Environment Variables」という項目がでてくるので後に説明する通りに設定します

Workflow Enviroment Variables

MWeb を開き「MWeb」の中から「Preformans」→「General」の項目の中の「Library Location」「Builds Sites Save Location」の2項目を使います。

「Library Location」
「Library Location」は「MDOC_HOME」のValueにコピー&ペースト

「Builds Sites Save Location」
「Builds Sites Save Location」は「MBLOG_HOME」のValueにコピー&ペースト

最後にAlfred の Saveを押し導入はコレでおしまいです。

使い方

普通に使うにはAlfred の検索項目で「mo [keyword]」として使えます。
Alfredでの「mo keywords」

tag検索

オマケ機能としてタグに登録した文字を検索できるようです。
使い方としては「mo -t [keyword]」と mo の後に -t を追加するということ

header検索

Mwebとしてはタイトルがそのテキストの保存の名前になるので「mo」検索と被る気がしますが、headerも同じように検索できるよ!!ということらしいです。
使い方としては「mo -h [keyword]」と mo の後に -h を追加するということ

欲しい機能

MWebがAlfredに対応してくれてメモツールとしても便利になりました。主に私が使うのはWordpressですが、それでも前に書いた記事を探すのにも楽になりました。

欲しい機能としてはLibrary検索 -l が欲しいかなと思っております。まだ作りたてホヤホヤなので機能アップに期待したいですね!!