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でのユーザビリティを考えるのはなかなか長年やっていても難しいことだと改めて実感しました。少しでもユーザーに対して考えてみると顧客も増えるのかもしれません。

身に染みるような寒さ

大寒の如くひえひえとつづく日ですが、身体を芯から温めてほかほかしていきたいです。

こうやって日記を書くのも一週間ペースになってるのがちょっと惜しいです。寒さだったり睡魔だったり。それともイベントの周回などで時間を奪われてしまうと執筆するのも億劫になって結局、休みのある休日に呟いてみるというペースになってます。ブログにも予約投稿という機能で如何にもこの時間まで書いてました!!という時間を騙せる機能があるのですが、なるべく使わずにできたてホヤホヤな文章を週2〜3回で残していければと、

大人の語彙力UP

最近話題なのは大人の語彙力アップみたいなので、このような言い回しはカッコイイ!!という本が多く出回ってます。少し読んだのですが、このような自己啓発本を買うならば、気になった小説を買って気になった言い回しや単語を辞書で引くほうが様々な書き方、話し方ができるような気がします。

というのも読んだ本の一文で「この商品を値下げしてよ!」という言い回しを「この商品を勉強してよ!」という言い回しに変える。(勉強というのはモノを安くするという意味もある)説明をしていて。語彙力UPするというよりはお寿司屋で「お愛想お願いします」みたいに変な日本語を取得してしまうのではないかと思いました。

語彙力というよりは、丁寧な言葉や矛盾しないような言い回しを取得することが大切な気がしますね。語彙力というのは本(小説)を読めば自ずと力になってゆくものですから。

またもや積雪予報

寒気があれば降るのが雪です。一週間前の雪はスキー場のようなさらさらとした状態でしたので直ぐに次の日に溶けて影響は無かったのですが、また月末と1日にかけて雪が降るらしいですね。日陰になってたり雪の山にしてるところが未だに溶けないのでなるべくは降ってほしくはないのですよね。雪よりも暖かな春が恋しいです。

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(*1)までにしてくださいというさくらインターネットのお言葉です。ですが場合によっては解除依頼を出せるということなので心配しなくてもいいかもしれません。

(*1) 1.5GBまで拡張されました。プランによって拡張サイズは違うようです。

言霊と自分の伝えたいこと。

記事を多く書いたり惹かれるようなタイトルを書かないのでこのブログの流入数は1記事で20人程度(ほぼソーシャルメディア)です。コンテンツを絞っていない日記なので、この程度でしょう。

だいたい1記事を書くのに1時間はかかってしまいます。
自分の話したい言葉を考えながら感覚で書いて入力していき、同じような言い回しを使わないようにしたり、語尾が著しく変わっていないか確認したりと添削するのでソーシャルメディアの投稿のように直ぐに内容を書けるというのは難しいです。

ブログで何を伝えるべきか

ブログを書こうとしてやっぱり書かずに置いておこう。書いたけども単なる面白みのないことを綴っている内容が沢山ある。大体は近々で起こったこととか愚痴のような好評や批評などと語ってはいるが、書いてて楽しくない嫌悪感を抱いてしまってだるくなってしまうことが多々あります。

好評や批評・レビューというのはユーザーを引き寄せるには良いものですが、好転的な意見・悪化するような内容一個一個に敏感になってしまい精神的にも影響を受けてしまうということが最近わかりました。

言葉は言霊になりやすいというのはこういうことなんでしょうね。

自分の追い求めるもの

自分が追い求めるものとしては、自分の世界観を言葉やイラストで共有したい、小さなことだけども誰かの手助けになれば良いという意識を続けています。楽しいことは楽しい。辛いことはつらい。と言いたくなるような子どものような世界です。

ただ、ファンタジーな世界観を隅から隅まで綴るというのは難しいものでしょうし曖昧な設定だと前半良くても後半がふわふわして足がついてない状態で完結と後味の悪いストーリになってしまいます。だから自分の世界を語れる人というのは誇らしいと思ってます。

そんな人間になりたいかと言うとなりたいですし一総として制作したい気持ちはあります。ですが自分に足りないものとして、「終始をつくるのは上手いものの、中身がスッカスカ」な肉付きのない骨の基礎建築ということが問題です。話は面白いのに結果を早々と伝えたくなってしまい内容としては意味のわからないストーリになっている。途中で話の論点が変わりやすいことが欠点でしょうか。

次につなげたいこと

だれが閲覧するかわからないけども自分の妄想を言葉にしてストーリにしてみるのもよい試みかもしれませんね。この記事を書くまではなにか書いてよいものだろうかと突っかかった気持ちがありましたがスッキリしました。

自分が思ってる言霊。言えないことを言ってみるといいかもしれません。

冬の上野動物園探検巡り

雪がふると聴いたのでそのまえにもふもふした動物をみたくて、動物園に行きたいなと思い行動に移してきました。実は冬の動物園は始めてで動物たちも冬眠するのかな?と思いきや夏と比べて結構行動する動物は多かったです。

上野動物園の動物たち

シロフクロウさん

上野動物園 - シロフクロウ
ちょうどお眠のお時間だったらしく可愛い寝顔が撮れました。

ハシビロコウちゃん

上野動物園 - ハシビロコウ
めったに出てこないと言われるハシビロコウが出てきてました!

アルパカさん

上野動物園 - アルパカ
上野動物園 - アルパカ正面顔
あるぱかもふもふよーのアルパカさん。日向ぼっこしてました。
そして正面ショットが可愛く撮れたので満足

ヤギとヒツジ

上野動物園 - ヤギ
上野動物園 - ヒツジ
やっぱりこの2匹は貫禄ありますね。ヒツジにいたってはもふもふ度が凄いです!!

だいぶリニューアルされてて面白い

夏に来たときにくらべて動物が移動してたり、近くまで寄れたりと面白かったです。やっぱり冬の醍醐味は冬毛かもしれません。鳥類も偶蹄類ももふもふしてて暖まるために行動してたり逆にじっとする動物もいたりして見どころたっぷりです!

小動物など触れるコーナーがなくなってしまったのは、ちょっと悲しかったかな?けれども産まれたての動物をみることができるのは面白いかもしれませんね