【第2回】HTMLを書いてみましょう2

今日はマークアップを書いてみます。

その前に、今日の日記を書いておきましょう。
テキストエディタを開いて、新しい文章を作ります。適当で構いません。

スクリーンショット 2016-02-13 15.23.32

一旦、保存しましょう。「20160214.html」と名前をつけます。昨日と同じフォルダに保存しておきましょう。

マークアップのイメージは、蛍光ペンを持って、「ここから〜ここまで」と色をつけるようなイメージです。始まりと終わりがあります。そしてそれはセットになっています。マークアップに使うのは「HTMLタグ」です。「HTMLタグ」には始まりと終わりがあります。

“【第2回】HTMLを書いてみましょう2” の続きを読む

【第1回】HTMLを書いてみましょう1

では、HTMLを書いてみます。まず、用意するものがあります。

これからHTMLを書いていきます。書いたHTMLは拡張子が.htmlというテキストファイルになります。そのファイルをまとめておくために、場所を作りましょう。
ご自分のパソコン内に適当な名前でフォルダを作ってください。できれば半角英数のみで名前をつけてください。深い意味はありません、そんなもんだと思って慣れてください。

次に、HTMLを書くためのアプリケーションを用意します。Windowsの場合はメモ帳で大丈夫です。Macの場合は「mi」というテキストエディタのアプリケーションを使いますので、ダウンロードしてインストールしてください。これらのアプリケーションは「テキストエディタ」と呼ばれる種類のものです。Macにある「テキストエディット」というアプリケーションは名前が似ていますが違うものです。紛らわしいですね。

あとはブラウザがあればOKです。いつも使ってるものでいいですよ。

では、早速書きます。テキストエディタを開きます。まず、文章を書きましょう。なんでもいいですが、勉強のために後々わかりやすいので、日記を書いてみてください。
別に長くなくても構いません。

“【第1回】HTMLを書いてみましょう1” の続きを読む

【第0回】ウェブサイトを知りたい人向けにHTMLの話

IMG_6011

制作者としてウェブサイトを作りたい人や、発注者としてウェブサイトを作りたい人向けに、そもそもウェブサイトっていうものがどんな風にできているのかを知ってもらいたいと、思うような出来事が続いたので、少し書いてみようと思います。

ただ、私は物書きではないし、ウェブサイトについて全てを知っているわけでもないです。なので、だいぶ制作者よりの内容になってしまいますが、そこは気をつけて、なるべくわかりやすく書くようにします。

ウェブサイトのことを知りたかったら、使いましょう

これに尽きると思います。
例えば、ホームページという言葉の意味を検索して調べてみてください。
・・・・・やってみましたか?
するとたぶん、この記事の中で「ホームページ」という言葉を避けていることに気がついていただけると思います。
このお話の続きはまた最後に。

ウェブページは何でできているか?

ウェブページは、ざっくり言うと次の3つの要素でできています。

「HTML」・・・ウェブサイトのページを作る要
「CSS」・・・・色をつけたり、線をつけたり、最近では簡単な動きも実現
「Javascript」・・色を変えたり、動きをつけたり

ただし、これはフロントエンドの話で、最低限、この要素が関わっている、という話です。ウェブサイトの中にはデータベースと情報のやり取りをするプログラムやシステムなどの上記以外の要素との組み合わせでできているものが多くあります。

私はHTMLとCSSを特に重点的に取り扱っています。Javascriptはあまりよく分かりません。このように、ひとくちにウェブの制作者といってもよくわかる分野、わからない分野があります。ひとつひとつがとても深いものなので、ひとりで全てを深く理解するのはとてもハードルの高いことです。上記の要素はいずれも「言語」と呼ばれるものです。

HTMLは「HyperText Markup Language」という言葉の頭文字をとったものです。日本語訳すると「なんかすっごい文書のために意味付けをする言語」でしょうか、我ながら酷いですね。HTMLで何をしているかというと、そこにあるただの文書をハイパーにするためにテキストに印をつけて意味付けをしているのです。

何のこっちゃわかんないですよね(笑)

では、次回からは実際に書いてみましょう。

ということで、続きは次回。なるべく毎日更新いたします。

最後に、検索をした時の行動を振り返ってみましょう。

先に「ホームページという言葉の意味を調べてください」と書きました。その時、どんな風に行動しましたか?
・検索サイトまでどのようにたどり着きましたか?
・検索窓にどんな言葉を入力しましたか?
・結果を見て、「これは使えそうだ」と思ったサイトはありましたか?
・その判断の根拠は何でしたか?
・この意味がきっと正しいだろうと判断した根拠は何でしたか?
・その情報はいつのものでしたか?
・他の記事も探してみようと思いましたか?その理由は何ですか?

…..と、矢継ぎ早に聞きましたが、その行動ひとつひとつ、判断ひとつひとつが、あなたが作るサイトを訪れてくれるユーザーの行動であり、判断です。そして、これは確かなことですが、あなたと同じ行動をする人もいますが、全く別の行動をとる人もいます。何か気がつくことがありましたか?あればそれはとても重要なことかもしれません。是非とも心に留めて、この先もお付き合いください。

投稿の「この投稿を先頭に固定表示」を使ってみた

スクリーンショット 2016-02-11 22.18.09

そういえばこんな機能あったな、と思って使ってみた。
特別設定が必要なわけじゃないのかなー、という感じです。

スクリーンショット 2016-02-11 22.25.23

上記は投稿一覧のページです。特に設定した覚えはないんですが、投稿の一覧のページでは先頭に表示されていました(右サイドのRecentが本来の投稿順の記事の並びです)。メインクエリだと特に何も設定しなくても使えるのかなあ、という感じです。
先頭に固定した記事が複数あるとどうなんかな。

ですが、フロントページで、get_posts()とかで記事を呼び出すときとかは、先頭に固定したからといってそれが反映されるわけではないです。

なんかもうちょっといい方法があるような気がしますが、とりあえず、最初に「先頭固定表示の記事のみ」を表示して、そのあとに「先頭に固定表示の記事以外」の記事を呼び出している、という感じにしました。

		<ul class="front-news-list">
<?php
$sticked_posts = get_posts( array( 'post__in' => get_option( 'sticky_posts' ), 'posts_per_page' => -1 , 'post_type'=> 'post') );
foreach ( $sticked_posts as $post ) : setup_postdata( $post ); ?>
		<li class="list-item sticked-item"><time class="date"><?php the_time('Y-m-d');?></time><a href="<?php the_permalink();?>"><?php the_title(); ?></a></li>
<?php endforeach; wp_reset_postdata();?>
<?php
$args = array( 'post__not_in' => get_option( 'sticky_posts' ), 'posts_per_page' => 5 , 'post_type'=> 'post') ;
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
		<li class="list-item"><time class="date"><?php the_time('Y-m-d');?></time><a href="<?php the_permalink();?>"><?php the_title(); ?></a></li>
<?php endforeach; wp_reset_postdata();?>
		</ul>

実際の表示は下記の感じです。

スクリーンショット 2016-02-11 22.37.33

参考になればと〜。

サイトの文字化け、大丈夫ですか?

Twitterなどで「あの公共施設のサイト、文字化けしてるぜ」「スマホで文字化けしている」という書き込みを最近よく目にします。
というのも、PCのブラウザでは文字化けが「減った」のですが、スマホで見ると文字化けを起こすサイトが「増えた」ようなのです。

文字化けをしてしまっている場合は、サイトのソースに、下記のような一文が入っているかどうかを確認してみてください。

<meta charset="UTF-8">

少し書き方にばらつきがあるかもしれませんが、charsetの部分がキモです。
これが入っていないサイトが文字化けせずに見えていたとしても、それは「たまたま」ですので、正しいコードを入れるようにしてください。(これが入っていて文字化けする場合は、もうちょっと複雑な原因も考えられますので、即、サイト制作者に相談してください。)このコードは「このサイトはUTF-8っていうエンコードで書いてあります!」という宣言になり、ブラウザはこれを見て、適切な解読をするわけです。

上記のコードはあくまでこのサイトの場合ですので、それぞれのサイトで適切なコードは異なりますので注意してください。必ずホームページの制作者などに問い合わせてください。その時は「サイトが(スマホで見ると)文字化けするので、文字エンコーディングのメタタグを確認してください」とお願いするといいと思います。

最近のサイトは、概ね「UTF-8」という文字エンコーディングが使われている場合が多いですが、ひとむかし前は「shift-JIS」という形式が多くありました。
文字エンコーディングを示すメタタグが書かれていない場合、ブラウザは当てずっぽう(と言ってもかなり精度の高い当てずっぽうではあるのですが)で解読をします。たいてい「あたり」のエンコーディングにたどり着くので文字化けをせずに表示されるのですが、スマホのブラウザでは「失敗」がもしかすると多いのかもしれません。そもそも宣言をしていないと正確なエンコードは「わからない」ものなので、先に挙げたコードが入っていないといけないです。

文字化けをするサイトが増えてきているのは、潜在的にあった「文字エンコーディングのメタタグが抜けているサイト」が、スマホの普及と閲覧者の増大によって表面化してきた、ということなのかなあ、と思っております。

みなさま今一度、自分のサイトを確認してみてくださいませ。

ウェブサイトのアクセシビリティについて

IMG_5818
コーディングWebアクセシビリティ<WAIーARIAで実現するマルチデバイス環境のWebアプリケーション>
ボーンデジタル
著:ヘイドン・ピカリング 訳:太田良典 伊原力也 Bスプラウト

価格 2,484円(本体2,300円+税)
発行年月 2015年03月
判型 A5
ISBN 9784862462664

本の最初の方にウェブが「本質的にアクセシブルであるというメディアの責務」、という表現が書かれていて、気づかされるものがありました。

あまりうまく言えないのですが、ウェブ上に、HTMLで書かれたものなら、ブラウザが表示し、スクリーンリーダーが読み上げれば目が見えない人にとっても、本とは違って常に更新され、新しい情報を受け取ることができる。しかも、多分、他のものよりも容易で手軽に。それはきっと誰かの今を明日を良くする可能性があるものだと思いました。

実際問題、ウェブの制作者として明日から何ができるのか、今の仕事で何ができるのかを問われると答えられないのですが、少なくとも、「アクセシブルである責務」について考え、コーディングを少しでも「適切な」ものにしていける指針ができたように思います。

初めてHTML5について真面目に調べた時、いろんなタグが増えたこととその理由を聞いた時、「あー!これだーー!!」と思っていたことを、久しぶりに思い出してワクワクしました。HTMLが書ける自分でよかったなあ、とも。

さて、本の内容ですが・・・・・javasctiptについての知識がそこそこないと理解しがたい部分もあって、全てを把握できたわけでなく、何度か読み返しが必要だな、と思ったのですが、やはりHTML5のタグを理解し、適切に作ることが何よりも肝要で、jsで効果や動きをつけていく際にも、アクセシビリティを阻害しないやり方について知恵を出すべき、ということでありました。

正直なところ、読み上げソフトがどのようにウェブページを読んでいくかについての実際に知らなければ理解できない点が多いので、まずは自分で作ったサイトを読み上げさせてみることがいいと思います。

MacにはVoice Overという読み上げの機能があります。

スクリーンショット 2015-12-31 13.02.29

Macは、特に設定を変えなくてもブラウザでページを開いて、ショートカット「⌘+F5」を押すと読み上げを始めます。読み上げをやめたい時も「⌘+F5」です。項目を飛ばしたり

iPhoneでも使えます。
設定>一般>アクセシビリティ>スピーチ を選び、「画面の読み上げ」をONにします。

友人からこの読み上げの機能が「校正に使えそう!」というヒントをもらって「ガッテン!ガッテン!」と盛り上がりました。(ちょっと違う)

と、いうのはさておき、読み上げさせてみるとわかることがいろいろあります。私は、とにかくWebのテキストでは「英数は半角!」と主張していたのですが、読み上げがうまくいかないことがあるのだとわかって、工夫が必要なのかもしれない、と思っています。あと、リーダー自体も「読み間違い」があったりしたので、そういうところは今後改善なのかなあ、と思いました。書いてある日本語を正確に読み上げさせるってかなり大変ですね。漢字の読み間違えが結構多いんです。日本語対応のリーダーにはもっと賢くなってもらわなくちゃ、ですねー。

ウェブというメディアが目指すべきところというのを考えさせられましたし、常に考えていく必要があるなあ、と思いました。

PHPのバージョンについて

スクリーンショット 2015-12-16 10.50.19

WP Security Audit Log をインストールして有効化しようとしたら、上記のエラー。

Warningとかだいぶ青ざめるのですが、調べてみると「PHPのバージョンが低いのかもよ」という記事が。そういえば意識したことがなかった。
早速サーバーのコントロールパネルから調べてみると、バージョン5.2を利用していて「そりゃ古いわ」と、納得。WPは5.2.4でも動く(2015/12/16現在)そうですが。

でも、イメージで「古い」と思ったけど、実際どうなのか。
っていうか、PHPのバージョンて、何。

さっぱりわからないので、どなたかに聞いてみたい気持ちでいっぱいです。我こそはという方是非教えてください。

とりあえず、わかったのは
・新しいバージョンがリリースされてから2年は完全にサポートされる。
・上記期限が過ぎても1年は重篤なセキュリティの惰弱性に対するアップデートはサポートされる
・つい先日7.0がリリースされたようだ(その前のバージョンは5.6)
・5.4はすでにサポートが切れた、5.5もセキュリティアップデートのみの期間に入っている
参照ページ:Currently Supported Versions

過去のバージョンの中にも安定しているものがあるという記事もあった。書いてあることが難しくて把握できた範囲は少ないのだけども。
参照ページ:安全なPHPを使っていますか? – PHPバージョンアップとの付き合い方を考える

PHPで作られているサイトが、安全でないバージョンを使っている場合が多いことの指摘もあった。安全なバージョンのPHPを使っているのは2割ほどとのこと。えー。。
参照ページ:PHP Install Statistics

単純に新しくしておけばいい!ということでもないのかしら、と思いつつ、選択できる最も新しいバージョンに変更しましたとさ。

PHPのページはこちらから