今日のお仕事

ホームページのGoogleスマホ対応

4月21日からスマホ対応していないサイトは、検索順位に影響がでるとGoogleが発表したため、ホームページのスマホ化対応でかなり忙しいです。

現在2つのお客様のサイトがスマホ対応完了、3サイトがデザイン変更を含めて修正対応中、そして5サイトがスマホ対応化相談中という状況。

自社のサイトも12年前に作ったきり放置していたので、早めに修正しなければならないのですが、いつになることやら・・・。

取り急ぎ、自分でホームページのスマホ対応をしたいのであれば、下記お試しください。


★★　ホームページのGoogleスマホ対応　★★

１．現在公開中のサイトのスタイルシートをコピーし、『スマホで表示する.css』『PCで表示する.css』の2つを作成

２．全ページに、下記メタタグを埋め込む
--------------------------------------------------------------------------------------------
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link media="only screen and (max-device-width:980px)" href="スマホで表示する.css" type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:981px)" href="PCで表示する.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
--------------------------------------------------------------------------------------------

３．『スマホで表示する.css』で下記修正
----------------------------------------------------
　・imgタグ　width:100%;
　・BODYやコンテナなど大きなブロック　font-size: 100%;
----------------------------------------------------

４．ページにフラッシュ動画を使っている場合は、フラッシュ動画の代わりになる画像ファイルを準備し、HTMLファイルとスタイルシートを下記のように修正

●HTMLファイルは、フラッシュ動画部と画像部で、別のdivでくくる
----------------------------------------------------
　<div id="header">フラッシュ動画</div>
　<div id="s_header">フラッシュの代わりになる画像</div>
----------------------------------------------------

●スタイルシートに下記を追記
-----------------------------
・『スマホで表示する.css』
　#header {
　display:none;
　}

・『PCで表示する.css』
　#s_header {
　display:none;
　}
-----------------------------

５．メニュー部の修正
----------------------------------------------------------------------
　(1)『スマホで表示する.css』で、メニュー部のdiv（ここでは<div id="menu">とする）を下記修正
　・width:100%;
　・floatがあれば解除

　(2)メニュー部がページの上部に表示されてしまった場合、ページ下部に、<div id="s_menu">を作成し、メニュー部の内容をコピーする

　　スタイルシートに下記を追記
　---------------------------
　・『スマホで表示する.css』
　#menu {
　display:none;
　}

・『PCで表示する.css』
　#s_menu {
　display:none;
　}
　---------------------------
----------------------------------------------------------------------

修正が完了したら、Googleのモバイルフレンドリーテストで、ページの確認をしてみて下さい。
https://www.google.com/webmasters/tools/mobile-friendly/


細かいところがいろいろと難しいので、ホームページのスマホ対応で困った時は、アイ・コンピュータサービスにご相談下さい。

Google PageRankの画像を自動表示するiframeタグをPHPで作った

特定サイトのGoogleのPegeRankを知りたい場合、通常、Googleツールバーをインストールしなければならないのですが、インストールは面倒だし、ブラウザは遅く重くなるし、ブラウザの上の方がゴチャゴチャするし、Googleに検索した情報を送りたくないというのもあり、Googleツールバーなどのアドオンは、あまりインストールしたくありません。

ということで、URLを入力すると、そのページのページランクが表示されるプログラムを作りました。

外部のサイトだと、1日のアクセス制限があったり、突然サイトがなくなったりするので心配ですが、とりあえず、自サイトなので、制限なしで公開しています。


ついでに、そのページのページランクの画像を自動表示するプログラムも作りました。

　みたいな画像を自動表示します。

変な広告がつかず、小さくコンパクトなので、気に入っています。


●Google PageRank画像表示プラグインの使い方

下記iframeタグを、画像表示させたい場所にコピーして下さい。

--

<iframe src="http://www.aicomp.jp/youbou/google_pagerankimage.php"
style="width:58px;height:20px;" scrolling="no" marginwidth="0"
marginheight="0" frameborder="0"></iframe>

--

試しに、アメブロにはりつけてみました。

→アメブロへのGoogle PageRank画像のはりつけ方法

 

500 Internal Server Error Perl/CGI

IPアドレスチェックの日本語を少し修正してUPしたら、突然

---

Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator, [e-mail] and inform them of the time the error occurred, and anything you might have done that may have caused the error.

More information about this error may be available in the server error log.

---

サーバのログには、

---

[Tue Nov 13 11:08:37 2012] [error] [client ***.***.***.***] (2)No such file or directory: exec of '/cgi-bin/ip_check.cgi' failed, referer: http://www.aicomp.jp/youbou/index.html
[Tue Nov 13 11:08:37 2012] [error] [client ***.***.***.***] Premature end of script headers: ip_check.cgi, referer: http://www.aicomp.jp/youbou/index.html

---

どっかいじってしまった？と思い、バックアップしてあったファイルで更新しても×。
Perlのパスや文字コードなどを修正しても×。

久しぶりのPerlなので、Internal Server Errorの対処法を忘れていました。

FFFTPで、ファイル名で転送モード切替え（A/B）にしておくと、ダメ。
バイナリ転送モード（B）で送ってOK。

 

Twitter is over capacity のクジラが可愛かった

Twitterにログインしたら、サーバが頑張っているらしい。

意味のない自動書き込みが多すぎる？

 

しばらくしたら、Something is technically wrong.に変更されてました。

 

その動作は許可されていない可能性があります。ページを更新して、もう一度お試しください。

Twitterをやっている方から、突然フォローできなくなったという相談がありました。

フォローしようとすると、毎回、

--------------------------------------

その動作は許可されていない可能性があります。
ページを更新して、もう一度お試しください。

--------------------------------------

のメッセージが出るとのこと。

これは、2,000人以上をフォローすると、制限が追加されるという、Twitterのアクセス制限によるものです。


----- Twitterのヘルプより　----

フォローについて（制限とルール）

----

2,000人以上をフォローすると、制限が追加される：攻撃的なフォローやフォローチャーンに関するルールは、そのまま適用されます。また、各ユーザーは合計2,000人までフォローすることが許可されています。フォローが2,000に達すると、フォロー可能な追加ユーザー数が制限されます。この制限はフォロワー対フォローの比率に基づいており、個々のユーザーによって異なります。この制限に到達すると、使用するブラウザにエラーメッセージが表示されます。より多くのユーザーをフォローするには、ご自分のフォロワー数が増えるまで待たなければなりません。基本的に、たとえばフォロワー数が100人であれば、10,000人をフォローすることはできません。一日の上限あるいは合計上限に達すると、Twitterからエラーメッセージを表示して、「スパムアカウントによる甚だしい行為を制限し、サイトへの負担を防ぐために設けられた技術的制限に達した」旨をお伝えします。これらはお客様のアカウントに対する技術的制限ですが、それに加え、お客様に対しては攻撃的なフォロー行為が禁止されます。これらの行為を行なうと、アカウントの比率の数値とは無関係に、アカウント凍結という結果を招くことになります。

----

その他、攻撃的なフォローに関する行為などいくつかあるようですが、今回は、2000人リミットにかかったようです。

該当のアカウントは、2001人フォローしており、どうして1人多くフォローできたのか不明でしたが・・・。

2000人を大きく超えたところで、普通にツイートしていて、『その動作は許可されていない可能性があります。』のメッセージが突然出た場合は、Twitterにお問い合わせしてみるといいかと思います。