イケてる、モノ・コト

大晦日です。念願の、自分のホームページのＴＯＰ画面をスマホにも対応したレスポンシブデザインにしました。



以前はホームページの先生にお願いしたのでかっこよかったのですが、いかんせん、Flashを使っており、SSLを導入したらますます表示が厳しくなっていました。そしてGoogleで検索するとこれ見よがしに「モバイルフレンドリーではありません」と出てしまい、頭にきていました。



今回も、HTML5 & CSS3 デザインブックのサンプルコードを活用させてもらいました。ありがとうございます。本当にこの本にはお世話になった。本来は最初から順番に実際に試してみて学ぶ本だろうけど、大体の理屈はわかっているので（かなり忘れていたが）、ざっと目を通してサンプルコードと格闘した。これはよい本です。お勧めします。



しかし4回も続けて作っていると、だんだんと要領がわかってきて、工程的には複雑になっているのだけど、速度は上がっている。さすがである。

タブレットの幅での表示。最上部のh1タグで書いてある概要が、横幅いっぱいに表示される。「安くて気軽な公共の宿」などの地図は一列になる。



右側のサイドメニューは下部に落ちて、二列になる。



スマホ幅での表示。最上部の概要は数行になってしまってウザイので表示をしないようにして、さらに最新情報で画面がいっぱいになるので、これも表示しないようにした。display:none。



サイドメニューは下部に一列になる。



これらはほぼサンプルコードのままです。ありがとうございます。いずれにせよ、こんなカンジにしたかった。

スマホとタブレットの実際の画面。



今後は、中味のデザインがパソコン用のままなので、早くそれらをレスポンシブデザインにしてスマホやタブレットでもきれいに見えるようにしたいです。

今年の目標を達成できた気がして、ほっとしています。
ありがとうございました。

　　

今日は年末恒例の墓参と、10月に買った新車のプリウスの初めての洗車のあと、「旅行情報-Travelinfo-」という、私の旅行系ホームページのTOP画面に相当するページを、レスポンシブデザインで作り直した。たったの1ページです。前は表紙と、国内旅行、海外旅行の3ページを作っていました。



このデザインは昨日作った「日本全国泊まっていい宿」と同様、「HTML5 & CSS3デザインブック」のサンプルデザインのほぼそのままの応用である。ありがとうございます。
飛行機の写真は成田空港を飛び立つ、ANAのニューヨーク行きです。こういう写真はいくらでもあるが、この日は天気がよくなかった。

レスポンシブデザインのため、スマホでもタブレットでもきれいに見える。



これが"設計図"というか、サムネイルです。



以前のデザインはこちら。
このホームページだけで国内旅行も海外旅行もすべてが手配できるという意気込みで作ったホームページで、実際に私の個人的な旅行や出張も、このページを入り口としてすべてまかなえていた。



しかし、ほかの人から閲覧されることはほとんどなかった。あまりに稚拙なデザインである。趣味として、いろんなホームページ制作技術を試したかったのだ。
今回、SSLの導入とモバイルフレンドリーにしたので、Googleの検索結果はどうなるだろうか。中味がないのでGoogleから価値がないとみなされそうで、あまり期待しないほうがいいと思う。

今回、font icon（フォントアイコン）というワザを使っている。これもデザインブックの受け売りだ。しかし簡単にはいかなかった。

フォントアイコンは、アイコンが文字同様にフォント状になっているもので、拡大や色付けが自由に出来て、パソコンとスマホでも同じように見える。
右上のトグルボタンの三みたいのも、スーツケースや地球のアイコンもフォントアイコンだ。



デザインブックで紹介されていたFont Awesomeを利用したのだが、本とフォントアイコンのバージョンが違っていて、これに気づくのにだいぶ時間を要した。CSSのタグのどこかをヘンにいじったのではないかと、スタイルシートも何度も見直してしまった。

スマホ対応でぜひともやりたかったのが、上部にある、パソコンでは横に並んだメニューが、スマホでは右上の赤丸のトグルボタンになって、それをクリックすると下に縦並びにせり出して表示される動作である。



サンプルコードのままでやれば動くのに、こちらが一部を書き換えたらまったく動作しなくなった。
散々試行錯誤を繰り返したが、フォントアイコンのバージョンを最新にしたので、それを動かすjQueryも最新バージョンにしなければならなかった。これに気づくのにかなりの時間を要した。

結果的にちゃんと動いたのでよかったし、こういう失敗の経験を積み上げて学んでいくものなのだと思う。

それにしても、ベースのホームページは今から12年前の2006年から作っており、このころは子供たちも学校だったし、仕事も遊びもそれなりにやっており、よくもこんなことをしている時間があったのだと感心する。でも、要は時間の使い方と能力の問題だと思う。

これで旅行系ホームページの改修は一段落。次はクイズ系のホームページの改修をするけど、これは来年からにする。

　　

私はパソコンやインターネットをいじるのが好きで、２０年ほど前から趣味でホームページらしきものを作ってきた。
昨日は公共の宿をリスト化した予約情報サイトの「安くて気軽な公共の宿」を１ヶ月かけてフルリニューアルしたが、今日は一般の宿泊施設２万軒の予約サイトである「日本全国泊まっていい宿」をフルリニューアルした。



ぶっちゃけ、HTML5&CSS3デザインブックのサンプルHTMLをベースにしたレスポンシブデザインです。ありがとうございます。
そのかわり、今日１日で出来た。タブレットでもスマホでも表示されます。細かい調整はできていないけれど。



これが「設計図」です。



実はこのサイトは公共の宿サイト以上に放置していた。２０１１年３月７日に完成して志賀高原にスキーに行ったのだが、直後の１１日に起きた東日本大震災の影響で旅行業界はたいへんな混乱になった。私としてはこのページだけですべての旅行が完結するようにしたかった。しかし２万軒の宿を管理するだけで大変で、これは太陽に挑んで墜落したイカロスのような無謀であった。



テレビ東京の紀行番組を見るのが好きで、そこで紹介された宿を毎週調べてアップしていた。
皇室の方々が泊まった宿を紹介するページも作った。図書館にまで行って宿を調べた。

アップルやGoogleがフラッシュを排除したり、SSLの導入の必要性などから、このままのホームページでは表示すら厳しくなってきて、２万軒の管理も厳しいことから、よほど閉鎖しようと思っていた。
とりあえず、フラッシュ地図はGoogle Chromeでは表示されないので、jpgのクリッカブルマップに代えた。



宿泊施設ごとに１ファイルずつページを作っており、それだけで２３０００ファイルあってアップロードだけで大変だったのだが、全部を改修するのはとてもムリなので、表紙だけを作り変えて、個別のページは削除した。
なにしろ、ぐるなびトラベルは撤退したし、国内宿泊旅行商品を近畿日本ツーリストもEクーポンというネーミングだったし、日本旅行は「宿ぷらざ」と称していた。そしてANA札幌全日空ホテルはANAクラウンプラザホテル札幌に改名している。
ここまで放置するのは、全体の信頼性にかかわる。



その代わり、スマホでの閲覧は厳しいけれど、CGIで更新が比較的楽な一覧ページを残して、表紙からここにエリアごとにリンクを貼った。そのデータベースも大部分を作り直した。２万軒との格闘である。



拡大するとこんなカンジ。複数の宿泊予約サイトへのリンクを貼る作業がものすごくたいへんで、＜桐＞というデータベースソフトを活用している。



大手旅行サイトは、
るるぶトラベル
JTB
Yahoo！トラベル
じゃらんネット
楽天トラベル
近畿日本ツーリスト
日本旅行
ゆこゆこネット
一休
J-yado
にリンクしている。さらに宿泊施設の地図へのリンクや、周辺観光情報はるるぶ.comにそれぞれの地域ごとにリンクしており、施設ごとの「お客様の声」もわかるようになっている。

この一覧はスマホでは小さいがパソコンとタブレットなら、ちゃんと操作できる。

こうしてみると、事業継続というのはとても大変なことがわかる。また、自身のWEBデザイン技術の稚拙さにもあきれる。だが、ベースを作った２０１１年は会社勤めをしながら、子供とスキーに行ったし、同僚とアメリカにも行ったし、地震で旅行業界はたいへんになったし、それでもこの煩雑な作業をしていた自分はエライと思う。つまり経営者のやる気の問題なのではないか。

悪あがきかもしれないが、継続するべきものと撤退するものとを見極めて、負担がかからないレベルでチマチマとやっていくのがよいのだと思った。

　　

この1ヶ月、データの整備からホームページの制作まで格闘していた「安くて気軽な公共の宿」サイトのフルリニューアルが完成した。



12年前の2006年にフルリニューアルしてから、干支一回りが過ぎていた。公共の宿は2200軒あったのが1600軒に減ってしまった。宿泊業の世界も、インターネットの世界も大きく変わった。

今回のリニューアルのポイントは、
１）公共の宿のリンクをすべて確認。旅行サイトは、るるぶトラベル、JTB、Yahoo!トラベル、じゃらんネット、楽天トラベル、施設公式HPの６つに絞った。割愛したのは、近畿日本ツーリスト、日本旅行、ゆこゆこネット、J-yadoだ。これらはほとんどアクセスがなかった。ぐるなびトラベルは撤退していた。



２）レスポンシブデザインに対応し、パソコン、タブレット、スマートフォンに対応した。まぁ、なんちゃってレスポンシブかもしれない。
CGIで更新・表示するページはいじれなかったので、パソコン向きということでバナー広告のタグだけ変えてそのまま置いてある。

タブレットの代表、iPadで閲覧すると、左右の余白（余青）が消えて左右が拡大される。



さらにスマホになると、横二列だったのが一列になって、より見やすくなる。



以前は、スマホ専用のサイトを作っており、更新はパソコン用が手一杯だったので放置していた。レスポンシブだと１つのファイルを更新すれば、どのデバイスでも同じファイルを表示するので更新の手間が省ける。



３）サーバーに安全性とSEO（Googleの検索結果の上位に表示される仕組み）を高めるためSSLを導入したので、バナー広告などを一新した。以前のバナーはSSLだと表示されない不都合があった。



しかし、画面デザインや遷移のわかりやすさなどはまだまだ未熟で、レスポンシブデザインの本を読んで独学したものの、限界があるなぁ。2012年にホームページ制作の学校に通った時はスマホサイトが世に出てきたばかりで、レスポンシブデザインがなかったかもしれないころなので、本来はもう一度学びなおしたほうが近道と思う。
　　　　.
点一つあるかないかで、表示されないのでそれに気づくだけに4時間くらいかかったこともある。

独学は時間がかかるが、スキルはあがるのがせめてもの救いだけれども、再度プチリニューアルをしたい。しかし公共の宿以外の、たとえばクイズの本のサイトもレスポンシブにしたいので、やはりそっちが先だと思う。

SSLはわかりやすく言えば、ホームページのURLが
http://
で始まるのでなく、
https://
で始まる。

secure sockets layer（セキュア・ソケッツ・レイヤー）の頭文字で、具体的にはホームページを閲覧するブラウザと、ネットワークの先にあるウェブサーバーとの間の通信を暗号化して行う仕組みだ。クレジットカード番号などの個人情報が漏洩することを防ぐ。
これまでは銀行や通信販売、旅行などの予約サイトに導入されていたが、最近はGoogleが一般サイトでもSSL導入を重視するようになって、この7月からホームページを見ると、アドレスバーに「保護されている／されていない」が表示されるようになってしまった。



SSLが重要になるのは前々から知っていたのだけれど、SEO対策（検索したときに上位に表示される施策）からもSSLを導入するべきだとわかっていた。しかしドメインごとに料金がかかり、私の場合はサブドメインも多数使っているので、

http://kitagawa.tv/
http://travelinfo.jp/
http://pyado.travelinfo.jp/
http://eyado.travelinfo.jp/
http://think-inc.co.jp/

と、それぞれにお金がかかって、やりきれないなぁ、どれかに絞るかなぁと逡巡していた。

しかし、私が借りているGMOクラウドのiCLUSTA+（アイクラスタプラス）というプランが、アルファSSLを無料で導入できるサービスを始めていた。6月にGMOに質問した時はサブドメインごとに費用がかかりますとの返事だったが、7月から無料オプションになっていたのだ。教えてくれよぅ。
年間6000円くらいかかるのが、このサーバーを使っている限りレンタル料にSSLが含まれていることになる。すばらしい！

さっそく申し込んだらすぐに開通した。ネット検索ではまだ前のhttpのままだけれど。

https://kitagawa.tv/
https://travelinfo.jp/
https://pyado.travelinfo.jp/
https://eyado.travelinfo.jp/
https://think-inc.co.jp/

なお、このブログはGMOが運営しているJUGEMのレンタルブログですが、SSLは導入されていません。



わかる範囲で自分のサイト内のリンクは修正した。
これによって安全なサーバーを使っているホームページということで、SEO対策上も好ましいことになると思う。

ファイアフォックスの画面。



GoogleChromeの画面。お問い合わせフォームもSSLになりました。



ただし、Flashを使っていたり、バナー広告やiframeで別画面を呼び出したりしているので、その場合は「この接続は完全には保護されていません」とのメッセージが出ることもある。また、バナー広告などが表示されないこともあって、GoogleChromeでGoogleの広告が表示されないのは矛盾だ。

散々調べたら、２０１２年ごろに作ったHTMLのGoogleやバリューコマースのバナー広告のコードにhttp://で記述されているものがあり、これがhttps://とバッティングするからみたいだった。今の新しいコードは//から書かれており、httpでもhttpsでも対応している。ホームページ上の広告バナーを差し替える必要がある。
さらにGoogle Analyticsのコードは/bodyの直前に記述していたが、今の非同期コードはheadの最初の要素として記述するそうだ。

この数年のブランクはインターネットの世界を激変していた。しかもまったくスルーだったのが情けない。

「安くて気軽な公共の宿」の改修も佳境なので、年内には新サイトを公開したい。

　　

「安くて気軽な公共の宿」というサイトを作っています。今回、データベースを更新し、なんと１６００軒に減ってしまいました。１２年前は２２００軒くらいあったのにねぇ。

公共の宿は学生時代から旅行の好きな私の強い味方だった。
キャンプ主体の自転車ツーリングで、ユースホステルはつかの間の休息。しかし当時のユースホステルは自分で皿洗いまでしなければならず、ふとんもシーツに包まる方式だった。たまに国民宿舎などの公共の宿に泊まったらそれはそれは豪華な宿、に思えた。家族旅行を始めてからも、公共の宿は安くてそれなりに設備が整っており、家族からも基本的に評判がよかった。

公共の宿が一覧になったサイトがあればいいのに…。そう思って、最初は一覧リストを作ったが、当時はまだ宿のガイドブックも多くあって、対抗するつもりもあって、内容も盛り込んでいった。
これは初期の「安くて気軽な公共の宿」で、説明などはリンク先に任せている。



このころ、山と渓谷社のJガイド「全国公営の宿３３００」を愛用していたが、３３００軒も盛り込むのは個人ではムリだった。もうこのような宿ガイドは見かけない。



「安くて気軽な公共の宿」のタイトルは、種村直樹氏の「鉄道旅行術」の一節から許可を得て借りた。



膨大なデータを管理している桐は仕事で顧客管理に使っていたデータベースソフトで、これに宿のデータを入力していった。もう１２年位前からだ。それをリバイスにリバイスを重ねていったが、この数年は忙しさにかまけて放置状態だったので、今回２週間を費やしてすべてのリンクをチェックした。



作ったときは２２００軒、これまで１９００軒と言っていたのに、もう１６００軒くらいに減ってしまってました。
しかしリニューアルの宿や、ホームページを独自ドメインを取得して更新した宿もあり、それはそれでうれしい。

取り急ぎ、１２年前にホームページの先生が作ってくれたフォームにアップしたけれども、スマホ最適化はまだです。



ホームページ制作ソフトのDream Weaver CS6を久しぶりに起動したけれども、使い方をすっかり忘れてしまっている。
私が学んだ２０１２年はCS5で、その後CS6を購入したけど、今はCCです。



情けなや。２０１２年にWEB制作の学校に通って学んだのだけどな。
当時はスマホが普及してきたころで、スマホサイトはパソコン用とは別に作って、Java Scriptでデバイスを判別して振り分けていたが、この数年で同じHTMLを画面サイズによって切り替えるレスポンシブデザインがすっかり普及したので、それで作りたいのだが、そもそものソフトの使い方を忘れている。

こうして考えると、昔の自分は偉かったとつくづく思うこのごろである。

あと、サーバーにSSL(セキュリティシステム)を導入しないと、Googleの検索結果がよろしくないので、こちらもサーバー会社に申し込まないといけない。

古い「お気に入りに追加」や「リンク集」をたまにクリックすると、サイトにつながらないことがよくある。リンク先のＵＲＬが変わったり、ドメインそのものが廃止されたのだ。

たいていはファイルが見つからないというエラーメッセージが出る。



しかし中にはまったく違うサイトにつながることがある。よくよく見ると、ＵＲＬは合っている。







リンク集に格納されているほどのドメインならばこうやって間違ってアクセスする人もいるだろうからと、そのドメインを売っているのだ。

大部分は海外のレジストラー（ドメイン名の登録申請を受け付ける業者）のようだ。comやnetなどのドメインは世界中で利用されているから、そういうドメインが狙われている。しかし、施設名をローマ字にしたドメインなど、その施設でなければ使いようがないだろう。

中には買ったのだろうかよくわからないけれども、エラーにならないでリンクがつながったら、まったく別のデザインや内容になっているケースもある。







まったくドメイン名と異なっている内容のようだが、間違ってクリックしていき、あれ様子がヘンだなと思いつつも、中身をさらにクリックするとどうなるのだろう。そもそもが、施設名（ローマ字）のドメインを買い取って、どうしようというのだ。

先日紹介したニセの「ウィルス出たぞ」のようにならなければよいのだが。



それにしても使わなくなったドメインにどうしたら気づくのだろうか。昨今話題の産業革新投資機構（ＪＩＣ）に似たドメインを持っていたのだけれども、結局は使わないで手放した。何に使うでなし、無駄遣いをしないで済んだのだが、こういう話題になると、間違ってクリックする人もいるのだろうなと、黒いＳＥＯ対策が頭によぎるのだ。