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

KUNISAN.JPのメインページである本ページですが、長年に渡って機能の継ぎ足しを繰り返した結果、見た目がごちゃごちゃしていたり、一部の機能が不完全なまま放置されていました。今日は少し時間があったので、以下3点の改良を行いました。

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

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

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

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



Web管理関連記事(リンク一覧): さくらのレンタルサーバ 新サーバーへの移行 / SPF、DKIM、DMARCの設定とネームサーバー(DNS)設定のトラブル / さくらレンタルサーバーのアクセス履歴をPHPで表示 / PHPで画像のアップロード(さくらレンタルサーバーのPHPでImageMagick) / KUNISAN.JPサイトのメンテナンス(2018) / ...(記事連続表示)

人気ブログの作り方: 5ヶ月で月45万PVを突破したブログ運営術 をAmazon.co.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管理関連記事(リンク一覧): さくらのレンタルサーバ 新サーバーへの移行 / SPF、DKIM、DMARCの設定とネームサーバー(DNS)設定のトラブル / さくらレンタルサーバーのアクセス履歴をPHPで表示 / PHPで画像のアップロード(さくらレンタルサーバーのPHPでImageMagick) / KUNISAN.JPサイトのメンテナンス(2018) / ...(記事連続表示)

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

先月のサンフランシスコ旅行では、持参したAndroidタブレットのテキストエディターで日記を書いていました。当初、その内容をブログとして何回かに分けて投稿していこうと考えていたのですが、レイアウトの自由度などを考えて、久しぶりに「ホームページ」の形式で公開しようと思うようになりました。

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

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

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

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

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

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

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

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



Web管理関連記事(リンク一覧): さくらのレンタルサーバ 新サーバーへの移行 / SPF、DKIM、DMARCの設定とネームサーバー(DNS)設定のトラブル / さくらレンタルサーバーのアクセス履歴をPHPで表示 / PHPで画像のアップロード(さくらレンタルサーバーのPHPでImageMagick) / KUNISAN.JPサイトのメンテナンス(2018) / ...(記事連続表示)

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

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管理関連記事(リンク一覧): さくらのレンタルサーバ 新サーバーへの移行 / SPF、DKIM、DMARCの設定とネームサーバー(DNS)設定のトラブル / さくらレンタルサーバーのアクセス履歴をPHPで表示 / PHPで画像のアップロード(さくらレンタルサーバーのPHPでImageMagick) / KUNISAN.JPサイトのメンテナンス(2018) / ...(記事連続表示)

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

KUNISAN.JPブログ開設から12年。ただ、12年前は「掲示板」に独り言を書く形で、「ブログ」という言葉を知りませんでした。2005年頃に日本でもブログが一般的になり、私のページも「掲示板」→「ブログ」という名前に変更して、今のスタイルの基礎がほぼできあがりました(12年前はKUNISAN.JPのドメイン取得前で、当時の本サイトは「KUNI'S PAGE」という名前でした)。

プログラム・システムは他のサービスを使わず全て自前(PerlとPHPの混合)。当初はシンプルな掲示板でしたが、ワード検索、ページタイトル、返信、カテゴリー、年月選択、リンク一覧、広告表示、RSS、SNSシェア、Googleマップ連携…と、ブログっぽさが出るように、少しずつ機能を付け足していきました。

FacebookやTwitterの影響でブログ人口が減ってますが、私はまだまだ続けていくつもりでいます。



Web管理関連記事(リンク一覧): さくらのレンタルサーバ 新サーバーへの移行 / SPF、DKIM、DMARCの設定とネームサーバー(DNS)設定のトラブル / さくらレンタルサーバーのアクセス履歴をPHPで表示 / PHPで画像のアップロード(さくらレンタルサーバーのPHPでImageMagick) / KUNISAN.JPサイトのメンテナンス(2018) / ...(記事連続表示)

儲かるアメブロ 改訂版 ~新・ネットで稼ぐ方程式~をAmazon.co.jpでチェック

お気づきの方がいるかどうか分かりませんが、前回の記事から本ブログの画像サイズをアップしてみました。以前の基本画像サイズは240x180ピクセルでしたが、今後は300x225ピクセルと、画素数ベースでは約1.5倍に上げています。これにより、スマートフォンやタブレットの小さな画面でも、画像が見やすくなりました。

あと、大きめの画像を掲載する場合にも、以前は468x351ピクセルの大きさを基本としていましたが、今後は本ブログの横幅いっぱいの572x429ピクセルで掲載するようにします。


本ブログは2002年開始当初、「掲示板」の位置付けで、画像の投稿機能はありませんでした。また、当時のホームページサーバー(ISP提供のもの)の容量は10MBしかなく、画像を多数掲載できる余裕もありませんでした。

その後、ホームページの運営をレンタルサーバー(WebArena)に移行して、サーバー容量が50MB(Suite)→100MB(Suite2)とアップしたため、2005年以降はほぼ毎回写真を掲載するようにしました。ただ、手持ちの他のホームページとの兼ね合いもあり、ファイルサイズの大きいものはサーバー容量を圧迫してしまうことから、当初の画像サイズは200x150ピクセルを基本としていました。

その後、レンタルサーバーをWebArena SuiteXに切り替え、サーバー容量がギガバイトレベルになったことから、2009年に画像サイズを240x180ピクセルと大きくしました。また、大きめの画像(基本サイズ: 468x351ピクセル)も掲載するようになりました。

今回、さらに画像サイズを大きくしましたが、現状でもサーバー容量に9割以上の空きがあるので、一眼のフルサイズの画像などもアップしていくようにします。



Web管理関連記事(リンク一覧): さくらのレンタルサーバ 新サーバーへの移行 / SPF、DKIM、DMARCの設定とネームサーバー(DNS)設定のトラブル / さくらレンタルサーバーのアクセス履歴をPHPで表示 / PHPで画像のアップロード(さくらレンタルサーバーのPHPでImageMagick) / KUNISAN.JPサイトのメンテナンス(2018) / ...(記事連続表示)

自分で作れる! おしゃれなWebサイト をAmazon.co.jpでチェック

ちょっと前の話になりますが、KUNISAN.JPホームページのフォームからの投稿で、独立行政法人情報処理推進機構(IPA)からメールが届きました。内容はこんな感じです。

--------------------
KUNISAN.JP
ご担当者様

突然のご連絡失礼いたします。
独立行政法人情報処理推進機構(IPA) 技術本部 セキュリティセンターの●●と申します。

IPA では、情報セキュリティ対策の一環として、経済産業省告示に従い、一般の方や研究者の方が発見された、ウェブページに関するセキュリティ上の問題点の届出を受けつけ、ウェブページの管理者の方に連絡する業務を行なっています。

この度、下記ウェブページに関するセキュリティ上の問題につきまして届出がありました。この問題に関する詳細情報を担当者様へご連絡したいので、通知先および通知方法を確認させて下さい。

対象のURL:
http://kunisan.jp/
--------------------

何のことだかよくわかりませんでしたが、まず頭に浮かんだのが「IPAを装う詐欺ではないか?」ということです。とりあえず、メールの一文をコピーして、ネットで検索してみたのですが、他に同じようなメールを受け取った人も多いようで、内容も「(連絡を受けて)助かった」というものでした。

とりあえずは「信じてみよう」ということにしたのですが、IPAにセキュリティの問題を聞く上で、「PGP暗号化方式(PGP公開鍵を用意する必要あり)」または「パスワード方式(IPAから電話連絡のパスワードでZIPファイルを解凍)」のどちらかを選んで欲しいとのことでした。PGP公開鍵はよく分からないし、パスワードの電話対応も「平日のみ」ということで困っていたのですが、「対応が難しい場合にはメール本文に記載」もOKとのことで、結局の一番簡単なこの方式を選択しました。

それから数日後にIPAよりメールが来ました。セキュリティの問題を見ると、思わず「ハッ!」としてしまいました。セキュリティに関わることなので、ここでも詳しい事は書けませんが、何しろ当日のうちに問題の対応にあたりました。問題があったのはPHPのプログラム数点で、本当に基本的な所が抜けていました。これまで大きな問題が起こらなかったのがラッキーな位です。

対応完了後にIPAに「対応完了」の旨をメールしました。その翌日にメールで返信があり、「添付の修正完了報告書(テキスト形式)に記入して欲しい」というものでした。週末の時間がある時に修正完了報告書の記入を完了し、「ご報告ありがとうございました」の一文を添えて提出しました。

それから約2週間後、IPAより以下のメールが届きました。

--------------------
IPAセキュリティセンターの●●です。

修正された旨を発見者に連絡しましたが、異論がありませんでしたので、このメールを持ちまして、本件の取扱いを終了させていただきます。

本件につきまして、ご協力いただき、ありがとうございました。
今後とも、よろしくお願いいたします。
--------------------

一安心というところです。

それにしても、私のサイトのような零細ホームページにまでセキュリティチェックをする人ってどんな人なんだろう、と思ってしまいます。もしかしたら、大手企業などお金のかかったホームページよりも、零細ホームページの方がセキュリティリスクが高いということなのでしょうか。零細サイトでも、ブログサービスを利用している人やHTMLのみでサイトを構築している人は問題無いと思いますが、私のように生半可PHPやPerlやJavaScriptやMySQLを知っているのは、かえって危ないのかも知れませんね…。



Web管理関連記事(リンク一覧): さくらのレンタルサーバ 新サーバーへの移行 / SPF、DKIM、DMARCの設定とネームサーバー(DNS)設定のトラブル / さくらレンタルサーバーのアクセス履歴をPHPで表示 / PHPで画像のアップロード(さくらレンタルサーバーのPHPでImageMagick) / KUNISAN.JPサイトのメンテナンス(2018) / ...(記事連続表示)

情報セキュリティ白書2013 をAmazon.co.jpでチェック

久しぶりにHTMLのページを作成してみました。1ページのみのミニサイトです。

元素の英語名と読み方・発音一覧表
http://kunisan.jp/elements_english/

元素名は日本語のカタカナ表記と英語の発音が大きく違うことがあったりして、慣れないと結構厄介だったりします。そんなことで、自己学習の意味も含めて元素の英語名の発音を一覧表にまとめてみました。前職も現職も仕事で色々な元素を扱ってるので、英語名についてもほとんどの元素について知ってはいるものの、ラドンが「レイダン(Radon)」、キセノンが「ズィーナン(Xenon)」、セシウムが「スィーズィアム(Cesium)」のような発音になるのは、今回まとめてみて初めて知りました。

今のところ何の飾りも無い見た目のしょぼいページですが、暇な時に装飾してみようかな、と思ってます。



Web管理関連記事(リンク一覧): さくらのレンタルサーバ 新サーバーへの移行 / SPF、DKIM、DMARCの設定とネームサーバー(DNS)設定のトラブル / さくらレンタルサーバーのアクセス履歴をPHPで表示 / PHPで画像のアップロード(さくらレンタルサーバーのPHPでImageMagick) / KUNISAN.JPサイトのメンテナンス(2018) / ...(記事連続表示)

関連カテゴリー: 科学・技術関連記事, 英語学習関連記事, Web管理関連記事

化学英語101―リスニングとスピーキングで効率的に学ぶ をAmazon.co.jpでチェック

昨年の10月下旬にGoogleサーチからのペナルティが解けて以降、アクセス数が大幅に回復して、KUNISAN.JP全体で1日当たり3000UV程度(1日当たり3000人程度が閲覧)で推移するようになりました。ページビューについては、1日あたり10000～20000PVの間で推移していますが、これは「画像編集君」の編集操作毎にカウントされたり、「六道山表屋敷(チャット)」のコメント毎にカウントされたりするなど、あまり参考になる数字ではありません。

昨年10月からのアクセス数の推移をグラフにしてみました(画像をクリックすると拡大します)。青い線がUV(数値は右軸)、赤い線がPV(数値は左軸)です。Googleサーチのペナルティ解除前や、年末年始のアクセス数の落ち込みの大きさがわかります。

KUNISAN.JPの中でアクセス数の多いサイトを上から順にならべるとこんな感じです。

1. 電気代計算君 約800UV/日
2. ウクレレコード表-音付き 約600UV/日
3. 画像編集君 約400UV/日
4. KUNISAN.JPブログ 約300UV/日
...

この他にも大小40個程サイトがあって、全部合せて約3000UV/日となります。本ページ左メニューの上の方にある「KUNISAN.JP全サイト」から、全サイトチェックできます。

これだけサイトを所有していても、このブログ以外は全くと言っていいほど更新していません(たまにバグの修正等の作業は入ります)。ただ、個人管理のサイトとしては、「これだけやってれば上等」と自己満足はしています。



Web管理関連記事(リンク一覧): さくらのレンタルサーバ 新サーバーへの移行 / SPF、DKIM、DMARCの設定とネームサーバー(DNS)設定のトラブル / さくらレンタルサーバーのアクセス履歴をPHPで表示 / PHPで画像のアップロード(さくらレンタルサーバーのPHPでImageMagick) / KUNISAN.JPサイトのメンテナンス(2018) / ...(記事連続表示)

ホームページのアクセス数を確実にアップさせる112のコツ―誰も来ないホームページじゃつまらない! をAmazon.co.jpでチェック

今までパソコン上でしか対応していなかった、ウクレレコード表(http://kunisan.jp/ukulele/)の音が鳴る機能ですが、ようやくスマートフォン(iOS&Android)でも対応するようになりました。

元々音を鳴らす機能は、以下のように単純なHTMLだけで構成されていました。
1) コードをクリックすることでiframe内のページ切り替え
2) iframe内のページでbgsoundタグ(IEのみ)またはembedタグ(IE以外)でmidファイルを再生

しかし、スマートフォンでは、midファイルの再生に対応していない上、bgsoundタグとembedタグのどちらにも対応しておらず、スマートフォンで音を鳴らすには、別のやり方が必要でした。

スマートフォン対応に向けて、まずはTimidi95というフリーソフトを使って、midファイルを全てwavファイルに変換しました。しかし1個あたり数百byteのファイルが数百KB～数MBと、ファイルサイズが数千倍に膨れ上がってしまったため、今度はBatchWOO!というソフトを使って、wavファイルをmp3ファイルに変換しました。mp3ファイルは数十KBと、それでももともとのmidファイルの数百倍もありますが、このサイズであれば連続で音を鳴らした場合も、負荷が少ないと判断しました。

続いてタグの調整です。スマートフォンのブラウザーの多くはHTML5に対応しているため、HTML5から追加されたaudioタグを使って、今まで同様にiframe内で音を鳴らすようにしてみました。autoplay属性を使うことで、Galaxy S2(Android)ではうまく音が鳴ったのですが、iPad(iOS)では音が鳴りません。よく調べてみると、iOSではautoplay属性に制限をかけていて「使えない」ということがわかりました。

iOS上の制限を考えるとiframeを使うのは難しいと判断して、各コード毎にaudioタグを生成して鳴らせばいい、というアイデアが浮かびました。1ページ内に百個以上のaudioタグを付ける形になります。この方法もGalaxy S2では問題が無かったのですが、iPadの方は動きが非常に重くなってしまい、画面のスクロールもままならなくなってしまいました。音は鳴るものの、これではiOSユーザーは使わなくなってしまいます。

そして最終的に思いついたのが、JavaScriptを使ったAudioコントロールです。audioタグを設置せず、コードをクリックすることで、パラメータを飛ばしてJavaScriptを実行する形です。具体的には下記のプログラムがベースになります。

function audioPlay(param){
audio = new Audio(param + ".mp3");
audio.play();
}

これにより、iPadでの動作が重くなる現象が解消されました。うちにはiPhoneやiPodはありませんが、OSが同じなので、きっと動くだろうと思っています。もちろん、Galaxy S2での動作も問題ありませんでした。

これでパソコンから離れたところでも、スマートフォンでウクレレのチューニングをしたり、コードの音をチェックすることも可能になりました。実際にこんな使い方をしてくれるようになると、製作者としても嬉しいですね。



Web管理関連記事(リンク一覧): さくらのレンタルサーバ 新サーバーへの移行 / SPF、DKIM、DMARCの設定とネームサーバー(DNS)設定のトラブル / さくらレンタルサーバーのアクセス履歴をPHPで表示 / PHPで画像のアップロード(さくらレンタルサーバーのPHPでImageMagick) / KUNISAN.JPサイトのメンテナンス(2018) / ...(記事連続表示)

関連カテゴリー: Web管理関連記事, ミュージック関連記事

Google API Expertが解説するHTML5ガイドブック をAmazon.co.jpでチェック