Web管理関連記事 - 連続表示

新規書き込み

※該当の記事タイトル一覧はリンク一覧から参照できます。

電気代計算君のモバイルフレンドリー化(viewport設定)

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2016年7月9日
電気代計算君のモバイルフレンドリー化(viewport設定)電気代計算君」のページを改良して、モバイルフレンドリー化しました。スマートフォンやタブレットでの操作が今までよりもやりやすくなりました。

「電気代計算君」は2006年に公開したサイトで、電化製品の消費電力と使用時間を入力すると、大凡の電気代と(発電所の)二酸化炭素排出量を算出してくれます。当時、Yahoo!Japanのオススメサイトに選ばれて、2日間で5000件近くのアクセスがあったりした時期もありました。

その後しばらくは「電気代 計算」として検索すると、検索結果トップで表示されるなどして、安定して1日800件程度のアクセスがありました。特にエアコンが稼働する夏や冬の始まりは、普段より閲覧者が多く、1日1000件を超えることも珍しくありませんでした。

数年前から似たようなコンテンツのサイトが上位に行くようになり、昨年頭位から徐々に検索順位が下がるようになりました。最近は検索結果2ページ目まで落ちてしまったことから、1日100件程度のアクセスに留まっていました。

先日作成した「PHP Reversi」で、初めてviewport設定によるモバイルフレンドリー化をやって、「これはいいな」と思い、次にテコ入れしたのが「電気代計算君」という流れです。viewportの他にも、HTMLとCSSも全体的に見直して、テキストの行間、リンクの位置を変えるなど、画面の小さいスマートフォンでも使いやすいよう改良しました。

今のところ検索結果やアクセス数などに目立った効果は出ていませんが、モバイルフレンドリー化で検索結果が上がるということも聞いているので、少しでもいいので上に上がってくれると嬉しいです。

ちなみに、「ウクレレコード表」と本ブログページも、とりあえずviewport設定だけはやっておきました。スマートフォンやタブレットで閲覧した場合に、少しだけ見やすくなっています。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

サンワサプライ ワットチェッカーplus 10種類測定可能 検電器 TAP-TST7
サンワサプライ ワットチェッカーplus 10種類測定可能 検電器 TAP-TST7をAmazon.co.jpでチェック

Webプログラミング用リファレンス本の買い直し

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2016年7月5日
Webプログラミング用リファレンス本の買い直し2011年の秋から冬にかけて、私のPC部屋にあった本200冊程度をほぼ全て、裁断+スキャンしてPDFファイルにしました。これで部屋のスペースを確保できたのと、タブレット端末でいつでも本を読むことができるようになったのは良かったのですが、Webプログラミングの上では少し不便に感じました。PHPのページを開きつつ、HTMLやCSSの項目を調べたりするのに、タブレットでは同時に2つのPDFを開けず、またPDFを開いたり閉じたりしている間にタイムラグが発生してしまいます。

それでも、しばらくはWebプログラミングと呼べる作業はしていなかったので、大きな問題ではありませんでした。昨年作ったサンフランシスコ旅行のホームページも、基本はHTML+CSSの組み合わせで、動的なコンテンツは一切無く、ほぼ滞りなく作業を進めることができました。

今年の3月~6月にかけてPCと周辺機器を一新しましたが、交換作業が一通り終わったところで「久しぶりにプログラミングをやってみよう」と思って作ったのが、先日の『PHP REVERSI(オセロもどきゲーム)』です。直前にPHPHTML5&CSS3JavaScriptのポケットリファレンスを購入して、特にPHPのものを参照しまくりました。PHPをまともにいじるのは約6年ぶりで、配列関係の処理など基本的な所も含めてすっかり頭から抜けてしまっていたので、随分と助けられました。

その後、PHP REVERSIの方は無事制作完了。JavaScriptは殆ど使うことは無かったのですが、5月に本ブログで書いた通り、これからはJavaScriptの中でも自分が使ってなかった機能を中心に、しっかりと学んでいくつもりでいます。ポケットリファレンスの他に、別のJavaScript解説書も購入しているので、そちらも参考にしながらプログラミングを進めていけたらと思っています。

ポケットリファレンスについては、追加で正規表現SQLExcel VBAのものも購入しました。正直な所、正規表現については「ネット情報だけでも十分だったかな」という内容でした。SQLについても6年ほどのブランクがあるので、また思い出すのに使っていこうと思います。Excel VBAはWebとは関係ありませんが、会社で使うこともあるのでおまけで購入したものです。

少し前まで自作PCを使っていたおかげで、ハードにもそれなりに詳しくなりましたが、私は元来ハードにはあまり興味なく、それをどう使うかに重点を置く方です。20年前に車を持っていた時にも、車種や「改造」には興味を持たず、色々な所を風景を楽しみながらドライブするのが好きでした。スキーについても板には大きなこだわりはなく、オールラウンドタイプのそれなりのものであれば、自分の方を装備に合わせるようにして滑るだけで、優先なのは風を切るような滑りの爽快感や山頂などからの雄大な景色を楽しむ事です。PCについても周辺機器を含めてハードウェアの入れ替えが一区切り付いたので、これからはプログラミングで色々な事を楽しみながら試してみようと思います。

また、ダラダラと自己紹介的な長い文章を書いてしまいましたが、まあせっかくなので、頭に浮かんだものはそのまま書き残しておきます。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

[改訂第3版]PHPポケットリファレンス : 大垣 靖男 .co.jp
[改訂第3版]PHPポケットリファレンス : 大垣 靖男 .co.jpをAmazon.co.jpでチェック

PHP REVERSI(オセロもどき)の続き

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2016年7月3日
PHP REVERSI(オセロもどき)の続き先週末に作成したPHP REVERSI(オセロもどき)ですが、当初は「オセロとして動けばいいや」という考えで、とりあえず動作するところまで行ったことで満足ではありました。

ただ、コンピューターの打ち手が、「ここに置いたら全滅で負ける」という所に平気で置いたり、逆に「ここに置けば全勝で勝てる」という所の隣に置いたり、いわゆる凡ミスが多いのが気になっていました。

加えて通信状況により盤面のレイアウトが崩れる頻度が高かったり、トップ画面の見た目が少し寂しかったりなど、細かい点も気になり始めてきました。そのような所を「植木の剪定(せんてい)」のような感覚で、少しずつ直していきました。

この一週間で作業した内容は以下の通りになります。

■ コンピューターの思考ルーチン改善
もともと、コンピューター側の思考は、盤面中に石を置ける場所をサーチして、置ける場所が複数ある場合には盤面に設定された「優先順位」に従う、というだけのシンプルな制御でした。ただ、柔軟さに欠けているため、場合によってはわざわざ自分を不利な状況に追い込むような手を打つこともありました。こういった凡ミスを減らすためには、数手先まで読むようなことをしないまでも、ある程度状況に応じて臨機応変に手を変えていく処理を加える必要がありました。展開によって盤面の優先順位を一部逆転させたり、優先順位の割り込みを行ったりなど、大きく7種類の処理を加えることによって、凡ミスの頻度が大幅に軽減しました(ただし、ゼロではないです)。先週末の公開直後よりは幾分強くなっています。

■ 盤面のレイアウト崩れを軽減
盤面の画像は、「盤面」と「石」に分かれているのではなく、「盤面&石なし」と「盤面&石あり」の画像を、横8個x縦8個=合計64個表示する形になっています。この内、「盤面&石あり」の一部でアニメGIFを使っていますが、普通にHTMLで表示するだけだと、2回目以降の表示でアニメGIFの最後の一コマが固定されてしまい、「石がめくれるアニメ」や石を置いた時の「だんだんと浮かび上がるアニメ」が表示されなくなってしまいます。そのため、IMGタグで画像を表示する際、ファイル名の後に"?+タイムスタンプ"と記述して、毎回ファイルを新規で読み込む形にしました。ところが、これをやると今度はアニメの無いGIF画像まで毎回新規で読み込むことになり、通信状況によっては盤面のレイアウト崩れが頻繁に起こるようになってしまいました。これを解消するのに、アニメGIFの場合には"ファイル名+?+タイムスタンプ"、アニメGIFでない場合には"ファイル名+?+固定値"というように、表示内容によって処理を変えるようにしました。

■ タイトルロゴとメニューの変更
最初のタイトルロゴは、PowerPointのワードアートを使っただけのシンプルな画像だったのですが、見た目が少々寂しかったので、「盤面+石」の画像にグラデーションをかけたものを左側に加えてみました。あと、トップページのメニューもテキストだけで寂しい感じがしたので、こちらもワードアートと石の画像を用いて、少しだけ手の込んだ作りにしてみました。

■ ハンデと特殊配置の追加
PHP REVERSIの盤面の配置は、URLに記載のクエリーを変更することで容易に変えられます。そのため、スタート時に黒石をコーナーに置いた「ハンデ」や、中心部分が空白でその周りに石が置いてあるような「特殊配置」も簡単に設定できます。これを活かす形で、トップページに「ハンデ」や「特殊配置」で遊べるよう、サブメニューを追加しました。

■ モバイルフレンドリー対応
画面の大きいパソコンでは表示サイズに問題はなかったのですが、スマートフォンやタブレットで表示すると、画面が小さく表示されて見づらい上にタップ操作もやりづらい状態でした。画面をピンチアウトすると表示が大きくなりますが、石を置いたりしてページが遷移すると、またもとの小さい画面に戻ってします。これを解消するため、metaタグのviewport設定で、モバイル機器の場合には画面横幅いっぱいに表示するようにしました。

■ PHPプログラムの公開
ユーザー定義関数やオブジェクトを一切使用しておらず、コードのコピー&ペーストと変更の繰り返しの汚いプログラムですが、一応公開することにしました。こちらのページでプログラムを見ることができます。

ここまで色々とやってはきたものの、まあ今時オセロゲームを作ったところで、あまり多くの人にプレイしてもらえないことは分かっています。ただ、こういった作業を一度行うことで、また新たに何かを作成する時の役に立ったり、既存のサイトを修正する上でのヒントになったりします。特に「モバイルフレンドリー」の対応については、今回行った作業で「ページの構成によっては、思ったより難しくない」事が分かったので、既存のサイトについてもやりやすいところ(特に閲覧者の多いページ)から随時変更を加えていこうと思っています。




Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

関連カテゴリー: Web管理関連記事, PHP関連記事

詳細! PHP 7+MySQL 入門ノート : 大重 美幸 .co.jp
詳細! PHP 7+MySQL 入門ノート : 大重 美幸 .co.jpをAmazon.co.jpでチェック

PHP REVERSI(リバーシ) - オセロもどきゲームの公開

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2016年6月26日
PHP REVERSI(リバーシ) - オセロもどきゲームの公開今日は丸一日時間があったので、久しぶりにPHPでプログラムを組んでみました。完成したページがこちらです。

PHP REVERSI(リバーシ)
http://kunisan.jp/reversi/

半年位前に、ふと「オセロもどきのゲームを作ってみようかな」と思い、プログラミングの基本的なアイデアも頭の中に出来上がっていたのですが、実際にプログラムを作るとなると何となく億劫になってしまい、今日までずるずると来てしまいました。

オセロのようなゲームだと、サーバー側で動作させるPHPよりも、クライアント側で動作させるJavaScriptの方が良いことは分かってはいます。ただ、PHPの方が単純に馴染みがあるということで、そのままPHPで制作することにしてしまいました。

あと、ちょっと前に「PHPでプログラムを作るなら、オブジェクト指向的な、今風なコードを書こう」とも思っていたのですが、結局今回も今までのような「コードを書いては、コピペ&一部変更の繰り返し」というパワープレイなコードになってしまいました。あまりに汚いプログラムなので、公開の予定はありません
【2016/7/3追記】汚いプログラムなのは変わりませんが、こちらのページでプログラムを公開しています。

一応、コンピューターとの対戦(先手、後手が選べます)と2人同時プレイに対応しています。オンライン対戦機能なんかも時間をかければ作れなくはないと思いますが、恐らく1日あたりの訪問者数は一桁で推移すると思うので、個人Webページの作成には「費用対効果」のような考えを持ち込まない私でも、「さすがにそこまで作るのは無駄すぎるかな」という気持ちの方が強いです。

ちなみに、私はオセロや将棋のような盤面を使うゲームは得意ではありません。そんな私が作ったプログラムなので、コンピューターも強くなりようがありませんね…。




Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

関連カテゴリー: Web管理関連記事, PHP関連記事

Amazon | マグネットオセロ | リバーシ
Amazon | マグネットオセロ | リバーシをAmazon.co.jpでチェック

JavaScript再学習 - 確かな力が身につくJavaScript「超」入門

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2016年5月10日
JavaScript再学習 - 確かな力が身につくJavaScript「超」入門小学6年の息子にWebプログラミングの基礎を教えようと思い、HTML+CSSの入門書とJavaScriptの入門書を同時に購入しました。HTMLとCSSについては、昨年もネット情報をチェックしながら、ホームページを1つ完成させているので、今風の記述の仕方も十分ついていけるレベルにあると思っています(実際に私のサイトの全記述がそうなっているわけではないのですが…)。

JavaScriptについては1999年に習得したものをベースにして、ずっとそれを組み合わせながら使い続けていました。ブラウザーのバージョンアップの度に、一部の機能が動かなくなったりしましたが、その都度突貫工事的な修正を加えていきました。ただ、JavaScript全体を再学習するようなことは特にしていませんでした。

先日、息子にHTMLとCSSの「超基礎」を教えて、さらにFTPソフトを使いながらWebサーバーにファイルをアップする所まで説明しました。JavaScriptの本については、まず私の方で読んでから基本的な所を教えられたらと思っていたのですが…。

今回購入した『確かな力が身につくJavaScript「超」入門』という本を開いたところ、私が知っているプログラムの記述方法からの変わりようにびっくりしてしまいました。

まず、console.log()というのが出てきたのですが、意味はぱっと見でわかっても、私は今までに一度も使ったことがありません。

比較演算子が「===」とイコールが3つになっています(以前は「==」と2つが普通でした)。

また、入門書なのにjQueryやAjaxの説明に大きくページを割いているあたりも、ほぼ昔のJavaScriptの知識しかない私にとっては驚きでした。

他にも細かい所で色々な変化を目の当たりにしたのですが、まるで私のJavaScriptの知識は、現在の日本語に対する「江戸時代の言葉」のようになってしまっている感覚を覚えました。

実は頭の中に作りたいものが2つあって、これをPHPで作るかJavaScriptで作るか迷っていたのですが、やはりこれを機にJavaScriptで作ってみようと思うようになりました。プログラムの制作を開始する前に、効率的なプログラムが書けるよう、事前に少し時間をかけて「江戸ではなく平成のやり方」で色々と試してみようと思います。

ということで、また新しいサイトができたら公開しますね。ちなみに1つは計算ツール、もう1つはゲームです。ただ、どちらも万人受けするものではなく、「自分の力で作ってみたい」という自己満足を満たすためのものです。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ) : 狩野 祐東 .co.jp
確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ) : 狩野 祐東 .co.jpをAmazon.co.jpでチェック

KUNISAN.JPブログページのマイナーチェンジ Part 2

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2016年2月14日
KUNISAN.JPブログページのマイナーチェンジ Part 2先日に引き続き、本ブログページのマイナーチェンジを行いました。本ブログページは掲示板時代からのPerlのプログラムと、2007年から使用し始めたPHPのプログラムが混在していて、改良にはやや混乱が伴いましたが、おかげでまた少し閲覧しやすくなりました。

今回の変更内容は以下の通りです。

1. guest_search.cgi(Perl版)の廃止
ブログページ右上の検索機能は、今までPerlのプログラムで動いていました。複数語検索も可能で、機能としては悪くはなかったのですが、処理速度に難がありました。
数年前にguest_search.phpというPHP版のプログラムも製作しており、こちらは複数語検索が出来ないこともあって、「カテゴリー」や「年月」の分類専門に使っていました。ただ、(恐らく)言語の仕様的なところと、プログラムがよりシンプルなこともあって、PHP版の方がPerl版の数倍の処理速度がありました。ちなみにPerl版もPHP版も同様の検索語で同様の結果を出力します(ただし、複数語検索以外)。
基本的に複数語検索を利用している人は「ほぼゼロ」ということもあり、検索機能のうちPerl版の方は原則廃止して、PHP版のみで運用することにしました。ただ、Perl版の方もプログラムは残っているので、しばらくはアドレスを直接指定すれば使用可能ではあります。
【2017/11/5追記】PHP版も複数語検索に対応しました。それに伴い、Perl版は完全に廃止しました。

2. 「カテゴリー」や「日付」の表示件数とページ移動
以前まで、ブログページ左の「カテゴリー」(Web管理、自作PC等)をクリックしたり、「年月」を指定したりした場合には、最大21件まで記事を表示し、それ以上のものは記事タイトルの「リンク一覧」で確認するしかありませんでした。また、1ページに21件も記事を表示すると、FacebookやTwitterの共有ボタンの影響もあって、画面上でマウスのボタン操作がしばらくできないという現象も発生していました(10秒程待てば解消します)。
まずはこの待ち時間を解消するため、一度に表示する記事を10件までに絞りました。また、11件目以降の記事も続けて閲覧できるように「次ページ」に行けるリンクも設置しました(もちろん「前ページ」にも行けます)。これでカテゴリー毎、または年月毎に淀みなく記事を閲覧することができます。

3. 行間のスペース拡張
若干文面が窮屈な感じがしたので、行間のスペースを少しだけ開けるようにしました。CSSを若干いじった程度です。これで、以前よりもやや読みやすくなったと思います。

4. トップページのTwitterのインラインフレーム廃止
最近、Twitterの使用頻度が減ってきたので、そのまま廃止しました。

こうやって少しずつ変更を加えていきながら、本ページも激動の時代を何とか生き抜いていこうと思います。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

Webディレクション標準スキル152 企画・提案からプロジェクト管理、運用まで
Webディレクション標準スキル152 企画・提案からプロジェクト管理、運用までをAmazon.co.jpでチェック


KUNISAN.JPブログページのマイナーチェンジ

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2016年2月7日
KUNISAN.JPブログページのマイナーチェンジKUNISAN.JPのメインページである本ページですが、長年に渡って機能の継ぎ足しを繰り返した結果、見た目がごちゃごちゃしていたり、一部の機能が不完全なまま放置されていました。今日は少し時間があったので、以下3点の改良を行いました。

1.更新されていないカテゴリー分類を「その他」にまとめ
画面左にあるブログ記事のカテゴリー分けですが、2008年にこの機能を付け足して以来、少しずつカテゴリーが増えていきました。しかし、時代は流れ私の興味も変わってしまい、中にはほとんど更新されないカテゴリーも出てきました。例えば「個人事業」というカテゴリーは、2009年の個人事業開業時に作成しましたが、2010年にサラリーマンに復帰してからは、これ関連の記事はほとんど書いていませんでした。
私の暗い過去にあまり触れてほしくないということもあり(?)、更新されていないカテゴリーは「その他」としてまとめて、ドロップダウンリストで選択するような形にしました。逆によく更新されるカテゴリーのみが表に出るようになったため、見た目にも少しスッキリしました。

2.「リンク一覧」で2005年より前の記事も参照可能に
各記事の下の方に、同じカテゴリーのページを一部のみリスト化して掲載しています。このリストの最初の方にある「リンク一覧」をクリックすると、そのカテゴリーのリンク一覧が出てくるという機能になっています。また、画面右上の検索機能を使って、20ページを超える結果が出た場合にも、「リンク一覧」を表示できるようにもなっています。
ただ、本ページは2005年より前は、基本的に「掲示板」として機能していたため、それ前後でデータの形式が違うなどして、「リンク一覧」機能は2005年より前の記事には対応していませんでした。
先ほど、「リンク一覧」のプログラムを補強して、掲示板としてスタートした2002年からの全ての記事に対応するようにしました。
まあ、元々あまり使われていない機能なのですが、私自身が「昔、自分が何をやっていたか」を検索するのに便利なので付けたという次第です。

3.「管理者プロフィール」の初期表示と「もっと見る」機能
先日、とあるニュース記事を読んでいると、SNSで「自分はこれだけの事ができる」というのを見せびらかしすぎると、「嫌われてしまう」ということが書かれていました。(他には自分の顔写真のアップ、高級料理の写真のアップ、飛び回って忙しいアピール、などを繰り返すのも嫌われるそうです。自分にも心当たりありますが…)
私の「管理者プロフィール」ページは、自分ができる事、やってきた事を淡々と書き足していったつもりですが、積もり積もってかなりの文章量になってしまいました。初めて見た人からすると、「自己アピールしすぎ」と思うかもしれません(自己アピール好きなのは否定しませんが…)。
ということで、私のページに初めて来た人にあまり嫌われないようにするため(?)、プロフィールのページは初期画面で最低限の情報しか載せないようにしました。さらに詳しく見たい人だけ、「もっと見る」をクリックすると、今までと同じ情報が出てくるようになっています。
これであれば、私の詳細なプロフィール情報が出てきても、「だって、『もっと見る』をクリックしてくれたから…」という言い訳ができるようになります。

今後も、時代に合わせで本ページを少しずつ改良していこうと思います。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

人気ブログの作り方: 5ヶ月で月45万PVを突破したブログ運営術
人気ブログの作り方: 5ヶ月で月45万PVを突破したブログ運営術 をAmazon.co.jpでチェック

KUNISAN.JPサイトのメンテナンス

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2015年9月19日
KUNISAN.JPサイトのメンテナンスHTML、CSS、JavaScript、PHPなどのWeb系言語も含めて、プログラミング言語はしばらく使っていないと感覚を忘れてしまい、ソースをチェックするのも億劫になってしまいます。KUNISAN.JP内には数十のサイトがあるのですが、ここ数年はまともなメンテを行っておらず、ブラウザー、Web言語、Webサーバーの仕様変更などで、動作が不完全になっているものがありました。

先日、「サンフランシスコのんびり家族旅行」を作成する際に、久しぶりにHTMLとCSSを使ったおかげで、少しだけ感覚が戻ってきました。せっかく感覚が戻ってきたということで、あまり閲覧者のいないサイトも含めて、ここ2週間程で一気にKUNISAN.JPサイトのメンテ作業を行いました。

メモ代わりと言っては何ですが、作業内容を書いておきます。

FOF
昔のバージョンのIE(Internet Explorer)では、画面左の音符ボタンをクリックすると曲が流れる仕組みになっていました。しかし、音源が"mid"ファイルのため、最近のブラウザーでは対応していないことから曲が流れなくなってしまいました。まずは"mid"ファイルを全て"mp3"ファイルに変換した後、JavaScriptのaudioコントロールを使うことで、曲が流れるようになりました。

JavaScript簡易関数電卓
ブログパーツ版が全く操作できない状態になっていました。ソースを調べてみると、一部のHTMLタグが互い違いの状態になっていて、これを解消することでJavaScriptの部分が動作するようになりました。恐らく以前のブラウザーではHTMLの記述が不完全でも、JavaScriptの部分が動作したものと思われます(←この点は検証していません)。

Whois検索
検索結果によって文字化けが発生するようになっていましたが、これは恐らくWhoisサーバー側の出力のエンコードが変更されたためと思われます。PHPのmb_convert_encoding命令で入力側のエンコードが指定されていましたが、これを指定なし(自動検出)とすることで、文字化けが解消されました。

KUNISAN.JP(ブログ)
IEを基準としてレイアウトを組んでいたため、他のブラウザーではレイアウト崩れを起こしていました。Chrome、Safariなど、他のブラウザーで画面をチェックしながら、レイアウトを調整していきました。また、CSSのline-heightの記述が不十分な点も解消しました(以前はブラウザーにより行間に大きな違いが出ていました)。

喋るブログパーツ適正スポーツ診断
IE以外ではテキストボックスがインラインフレームからはみ出てしまいました。ブラウザー間で相違が大きいHTMLの"size"指定ではなく、CSSの"width"でピクセル(px)指定をすることで解消しました。

IPデカ
Windows 10、Edgeにも対応するようにしました。

惑星写真
IEでは、ページを開くと画面に惑星の画像が浮かび上がるような演出をしていたのですが、他のブラウザーでは、最初に惑星の画像がパッと表示されて、それが消えてから浮かび上がるという不自然な状態になっていました。imgタグ内にCSSの"opacity: 0;"を記述することで、ページを開いた直後に惑星の画像がパッと表示されるのを防ぐようにしました。

バックアップ用バッチファイル
Windows 10にも対応するようにしました。

KUNISAN.JPショップ
ドロップダウンリストのカテゴリーの並びを、現状のAmazon.co.jpの並びと同じにしました。

● PerlやPHPのimgタグ内埋め込み
PerlやPHPをバックグラウンドで動かす場合、imgタグ内にプログラムファイルのURLを埋め込む形で動作させています。以前はimgタグ内にheight="1"、width="1"と属性を記述することで、ブラウザー上で表示されないようにしていましたが、最近のブラウザーでは小さな四角が表示されるようになっていました。これをCSSの"visibility: hidden;"を使って不可視にしました。

● アクセス履歴(MySQL)
サーバーへの過剰な負荷を防止するため、頻繁にデータ更新が行われる「アクティブデータ」のテーブルと、古いデータの「アーカイブデータ」のテーブルに分かれています。これをまとめてチェックする場合には、ユニオンクエリーで2つのテーブルを連結した形で表示するようにしていたのですが、ある時から一部のデータについてユニオンクエリーが正常に動作しなくなってしまいました。調査してみると、アクティブデータ側のテーブルのカラムの順番が、アーカイブデータのものとずれいていることが分かりました。MySQLの"alter table"を使って、テーブルのカラムの位置を調整したところ、ユニオンクエリーがちゃんと動作するようになりました。

あと、IEやEdge以外のブラウザーで、「タイルdeパズル」のアニメGIFを使ったステージを開くと、右上のサンプルと左側のプレー画面のアニメの動作が一致しない不具合があります。複数のアニメGIFのタイミング制御については、プログラムの変更では対応できないため、現状では手を付けられていません。

以上です。この中ではFOFページの曲を流す作業にかなり手こずりましたが(JavaScriptの関数を違うフレームに橋渡しで動かす必要があるなど…)、今ではしっかりと動作するようになったので満足しています。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

Webディレクション標準スキル152 企画・提案からプロジェクト管理、運用まで
Webディレクション標準スキル152 企画・提案からプロジェクト管理、運用までをAmazon.co.jpでチェック

ホームページ『サンフランシスコのんびり家族旅行』公開

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2015年9月8日
ホームページ『サンフランシスコのんびり家族旅行』公開先月のサンフランシスコ旅行では、持参したAndroidタブレットのテキストエディターで日記を書いていました。当初、その内容をブログとして何回かに分けて投稿していこうと考えていたのですが、レイアウトの自由度などを考えて、久しぶりに「ホームページ」の形式で公開しようと思うようになりました。

帰国後間もなく、製作作業を開始しました。

まずは文章の校正です。現地では思いつくままに文章を書いていったので、誤字脱字が各所にあり、不自然な文面や流れの悪い言葉遣いなども多数ありました。そういった所を修正しつつ、「表記ゆらぎ」も避けるようにしていきました。

続いてコーディングです。数年前に作成したHTMLとCSSのファイルをいくつか引っ張りだし、ベースとなる部分だけを残して「ひな形」とし、それからコードと文章を盛り込んでいきました。

現地では600枚以上の写真を撮影しましたが、このうちホームページに使えそうなものだけを100枚程ピックアップしました。微妙に角度や構図がずれているものは、画像編集ソフトを使って画像を回転させたり、切り抜いたりして調整を行いました。

作業開始から約3週間、ホームページを完成することができました。

サンフランシスコのんびり家族旅行
URL: http://kunisan.jp/sanfrancisco/

せっかくHTML+CSSでページを作成するので、デザイン面で凝った作りにしようと思っていたのですが、結局仕上がりはシンプルになってしまいました。JavaScriptやPHPは使用しておらず、純粋に静的なホームページです。

ホームページの内容は「家族旅行の思い出」を超えるものではありませんが、サンフランシスコに興味のある方や、我が家の旅先での行動をチェックしたい方(?)は是非閲覧してみてください。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

スラスラわかるHTML&CSSのきほん
スラスラわかるHTML&CSSのきほんをAmazon.co.jpでチェック

WebARENA SuiteX V2への切り替え

名前: 小川 邦久 リンク: http://kunisan.jp/ 日付: 2015年1月18日
WebARENA SuiteX V2への切り替え5年ぶりのWEBサーバー切り替え作業が完了しました…、とは言っても、同じWebARENA SuiteXのV1からV2への切り替えです。機能的な所では容量が30GB→300GBに大幅アップした他、Web改ざん検知サービスや定期自動バックアップデータも(機能限定ですが)無料で付いてくるようになりました。

しかし、何よりも大きなメリットは、料金の低下です。V1では年間で24,439円(税込)かかっていたのがV2では年間17,640円(税込み)と、年間6,799円の低減になります。加えて、今までアクセスログ保存用に有料の「高機能データベース(年額25,920円、税込)」も使っていたのですが、アクセスログの保存期間を短くすることにより、SuiteXに無料で付いてくる標準データベースのみで対応できるようにもなりました。併せて年間3万円強のコスト削減になります。

サーバー切り替え作業は約5年ぶりではありましたが、前回の手順をメモっておいていたこともあって、データベースの移行に若干時間がかかってしまった他は、比較的スムーズに作業が完了しました。今回の移行手順はこんな感じでした。

++++++++++
2015/1/3
・SuiteX V2タイプ契約変更申し込み。

2015/1/6
・SuiteX V2タイプ開通とV1タイプ解約手続き完了の連絡(V1タイプ解約は2015/3/1)。

2015/1/12 (合計3.5時間の作業)
・FTPクライアントに新設定追加。旧設定のタイトルに「旧」と付け、新設定のタイトルに「新」と付ける。
・新SuiteX管理画面より、メールユーザー登録、迷惑メールフィルタ設定、アクセス制御設定、データベース設定、バックアップ設定(1世代分無料)などを行う。
・Web改ざん検知サービスの申し込み(無料分)。
・ブログ、掲示板、チャット、画像などの各種データファイルを旧サーバーからダウンロード。
・「世界一大きなアクセスカウンター」と「タイルdeパズル」のデータファイルを旧サーバーからダウンロード。
・トップページのメール管理関連ファイルをダウンロード。
・旧サーバーで使われなくなったフォルダやファイルの整理。
・高機能データベースの申し込み(即日開通)。
 →コスト削減のため高機能データベースは直後に解約。
・旧高機能データベースのアーカイブを削除してエクスポート、新高機能データベースにインポート(アーカイブを削除しないと、データが大きすぎてインポートできないため)
 →コスト削減のため高機能データベースは直後に解約。
・データベースファイルを新サーバーの標準データベースにインポート(動作確認用。後日最新データをインポートし直し)。
・サイト管理ページ、カウンターのデータベース接続設定の変更。
・サイト管理ページ内のリンク編集。
・トップのhtaccessファイル編集(リダイレクト)。ただし、ドメイン名設定変更が完了するまでアップしない(新サーバーの動作確認ができなくなるため)。
・全ファイルを新サーバーにアップロード(古いバージョンのファイル、編集用ファイルはアップしない)。
・新サーバーのドメイン名設定変更依頼(親ドメイン変更)。
・六道山表屋敷(チャット)と画像編集君に注意書き(新、旧サーバーの両方に)。

2015/1/16
・新サーバーのドメイン名設定変更完了通知。
・旧サーバーの子ドメイン(www付き)設定解除、新サーバーに子ドメイン新規設定。
・もう一度、旧高機能データベースのデータをエクスポート、新データベース(無料分100MBスペース)を一旦クリアにした上でインポート。
・もう一度、六道山表屋敷(チャット)と画像編集君のファイルを旧サーバーからダウンロード、新サーバーにアップロード。
・トップのhtaccessファイルをアップロード。

2015/1/17
・アクセスが新サーバーへ接続していることを確認。
・全サイトの最終動作確認(掲示板書込、メール送信なども)。
・六道山表屋敷と画像編集君の注意書き削除。
・メールクライアントで一時的に旧サーバーからメール受信。

(今後)
・FTPクライアントの旧設定削除。
++++++++++

以前はドメイン名設定が変更されてから、新サーバーへのアクセスが開始されるのに2日以上かかったと記憶していますが、今回は24時間以内に全アクセスが新サーバーに行くようになりました。

WebARENAについては、2002年に初代のSuiteを契約してから13年も継続して使っています。今後も今まで通りの機能を維持しつつ、安定した稼働をしてくれればと思います。



Web管理関連記事(リンク一覧): KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / KUNISAN.JP全ウェブページのUTF-8化 (複数ファイルの文字コード変換) / アサヒカメラ2月号(2017) - 写真の無断使用への損害賠償&削除要請マニュアル / ...(記事連続表示)

プロとして恥ずかしくない 新・WEBデザインの大原則
プロとして恥ずかしくない 新・WEBデザインの大原則をAmazon.co.jpでチェック


※該当の記事タイトル一覧はリンク一覧から参照できます。