7年間使ってたPCがご臨終したこととパーマリンクの見直し

PCのご臨終(故障)

大学入って買ったPCが先程ご臨終になられました。壊れたところとしてはファンの部分で回転軸がズレているのか…大きな異音を出すので修理をしない限りは難しそうです。それはそうと、このPCだいぶしつこく使っていたのでちょっと悲しいものがあります。Webサイトの修正をしたりイラスト書いたり動画をつくったりと、色んなことをクリエイティブに使わせて頂いたのでありがたかったです。

今後

カバンでも軽く持ち運べるようにと、2年前にmacbookを購入してるのでメインのパソコンはこちらを使用していきます。ちょっと金銭的余裕が出来たらちょっと高機能なWIndows PCを購入していきたいですね。

パーマリンクの見直し

パーマリンク(アドレス)を「2018/01/01/(title)」にしていたのですが、これを見直して「(title)」のみに変更しました。というのも検索の時にURLが表示されないデメリットが大きいみたいなのでこうしております。

google検索が新しく変わるまで本当のページにいけない問題がありますがご了承ください。

とことこと歩く。

いつも自転車や車を使うところを徒歩で歩く。
そうすると新たな発見をしたり細かいものに意識が移って足が止まってしまう。
何があるんだろうと小径に入ったり袋小路に阻まれたりおもしろい。

最短ルートで歩くのもたのしいけども、地図も見ずに方向だけで決めるのも歩くことの醍醐味だ。
そして日向ぼっこしているねこにニャーと話しかけたり、知らないカフェ喫茶に訪れて休憩してぼ〜っと満喫するのも風情。

そろそろ日が暮れてきた…。帰らなきゃ。

WordPressで1年書いて分かった話題になるものならないもの

ここまでの投稿した記事数は50冊ですが話題性になった記事は1つだけ、それでも1年前の記事で1000Previewを超えてる程度なので、ブログ(日記)で集客を考えるのはなかなか難しいです。

Android Wear Pageviews
https://warabe.temaripm.com/2017/02/28/zenwatch-3/

話題になったのは、Android Wear – ZenWatch 3 を買ったときのレビュー。
記事的にはシンプルで当初のメリットとデメリットをコメントした程度なので詳しい内容はないものここまで伸びるとは思いませんでした。

話題になるものならないもの

記事数が少ないので本質的なSEOの判断にはならないですが、それでも書いてて
良いもの悪いものの違いを認識が出来たので呟いてみます。

話題になるもの

ユーザーが求めているもの

「購買意欲になるコンテンツ」いわゆるレビュー記事は来客していただけることが多いです。そのコンテンツに絞ったサイトが評価が高いのはモノを絞っているからだと、そのサイトで新しい記事があればついでに閲覧したくなるのもあるでしょう。

調べなきゃわからないもの

人というのはわからなければ調べる。のを逆手にとって調べなきゃわからないもの。書籍には敵わないコンテンツというのはサーチエンジンを活かして自分のサイトへ呼び込むことができるでしょう。

人気を博している内容

一昔では、けものフレンズ 今ではポプデピピックなどユーザーが多いコンテンツというのは相対数も多いので気になる方がいれば大勢の方を呼び込めることは出来るでしょう。ただ、この呼び込みというのは欠点もあり検索での順位や情報が著しく変わるという点でデメリットがあるのです。

マイナーな情報

マイナーなものというのはマニアやオタクが数少ない情報から欲しいと思うために探しまわるというもの。技術的な情報を呟くだけでも情報としてはよいものになります。

話題にならないもの

たんなる日記

〜をしました!!的な個人の日記というのは共感がなければ話題にはならないです。というのも自己満足な内容というのは自分のなかでの気持ちにしかならないので、なかなかそのブログの愛好家でなければ呼び込むのは難しいでしょう。

広まるのを無視して自分へ残していきたいのであれば、日記というのも悪くはない方法ですね。

文字数がすくない記事

やっぱり文字が少ないというのは質が低いイメージが強くなってしまうので最低でも作文用紙2枚〜3枚(800字 ~ 1200字)くらいは書いたほうが良いでしょう。

夜中やら早朝など人がすくない状態

私も良くやってしまうのですが、夜中に記事を書いて早朝に投稿するというのは見られずに埋もれてしまうので、投稿するならば人が多い夕方などを狙って投稿するのがいいかもしれません。

人気記事にするには

細かく書いて惹きつけるような記事を書くことを意識すると変わるかもしれません。また流入数が変わってきたらもう一度呟いてみたいと思います。

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日にかけて雪が降るらしいですね。日陰になってたり雪の山にしてるところが未だに溶けないのでなるべくは降ってほしくはないのですよね。雪よりも暖かな春が恋しいです。