カテゴリー別アーカイブ: html

やばすぎるアニメ「健全ロボダイミダラー」公式サイトをhtmlソース側から見てみたよ

皆さん「健全ロボダイミダラー」公式サイト、もうみましたか?


TVアニメ「健全ロボ ダイミダラー」公式サイト

高速で目が点滅するまねきねこ画像、うっとうしくくるくる回るボタン類、破損した画像、良く分からない時間表示、ふりしきる雪アニメーション、マウストラッキング、鳴り止まないMIDI、統一感ゼロ、べた塗りの文字背景、蛍光色の文字。もう、もうお腹いっぱいです。

この公式サイトの見た目については、他のまとめサイトとかが詳しく解説してくれるでしょう。ともあれ、ある程度の年齢のネットユーザーにとってはとても懐かしい気持ちにさせてくれるサイトには間違いありません。こういう遊び心、好きです。

さてはて、見ためにも大変楽しいサイトなのですけれど、その中身はどうなってるのかが個人的には気になるので軽く見てみましょう。

ワオ・・・。

じゃ、javascriptオフにして見ちゃうもん。

だが先回りされていた!! 定番ネタばかりしこみやがって。くそ・・・。

 構造化されているのか確認してみよう。

構造化はグーグルにサイトをどのように認識させるのか、とても重要な要素の一つです。ちょっとサイトトップに戻って確認してみましょう。

Google Structured Data Testing Tool

最低元の構造化はちゃんとされています。良い感じです。

haed部分のメタデータを確認

<HEAD>
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<META name="IBM:HPB-Input-Mode" content="mode/flm">
<TITLE>TVアニメ「健全ロボ ダイミダラー」公式サイト</TITLE>
<meta name="viewport" content="width=1100px, user-scalable=yes">
<meta name="keywords" content="ロボット,SF,ハルタ,エンターブレイン,エンブレ,なかま亜咲,ハイスクールD×D,おっぱい,前シッポ,ペンギン,MF,メディアファクトリー,ジェンコ,2014年,4月,アニメ,新番,新番組">
<meta name="Description" content="ハルタで好評連載中のSFロボット作品『健全ロボ ダイミダラー』が、TVアニメ「ハイスクールD×D」シリーズのスタッフたちの手によって2014年4月奇跡のTVアニメ化決定!誰も見たことのないスーパーロボット活劇が今、幕を開ける!">
<meta property="og:title" content="「健全ロボ ダイミダラー」">
<meta property="og:type" content="website">
<meta property="og:description" content="ハルタで好評連載中のSFロボット作品『健全ロボ ダイミダラー』が、TVアニメ「ハイスクールD×D」シリーズのスタッフたちの手によって2014年4月奇跡のTVアニメ化決定!誰も見たことのないスーパーロボット活劇が今、幕を開ける!">
<meta property="og:url" content="http://penguin-empire.com/">
<meta property="og:image" content="http://penguin-empire.com/images/ogp_midara.png">
<meta property="og:site_name" content="TVアニメ「健全ロボ ダイミダラー」公式サイト">
<meta property="og:locale" content="ja_JP">

まず、「IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows」とあることからホームページビルダー11で制作されている事がわかります。タグが大文字になるのはホームページビルダーの特徴の一つですね。

スマートフォン対応もされていますが、これはどちらかというと「このサイトの全体図を見せるため」と取れますね。例えスマートフォンで見たとしても「1100px」の幅表示で見せられるので文字が小さくて認識し辛いでしょう。

案の定グーグルさんにも怒られまくりです。素敵すぎます。

メタキーワードも大量にしこまれています。メタキーワードとは、そのページがどういったページになるのか文字通りキーワードを示す要素ですね。

「<meta name=”keywords” content=”ロボット,SF,ハルタ,エンターブレイン,エンブレ,なかま亜咲,ハイスクールD×D,おっぱい,前シッポ,ペンギン,MF,メディアファクトリー,ジェンコ,2014年,4月,アニメ,新番,新番組”>」おっぱいって何だよ・・・。基本的にメタキーワードは五個程度が良いとされていますがそのルールをぶち破ってます。

もっとも、現在のgoogleなどはメタキーワードは無視するとされているのでそれを知ってのお遊びだと思います。

必要最低元をはき違える超軽量CSS

<link rel="stylesheet" type="text/css" href="css/index.css">

お、CSSファイルがあるのでちょっと覗いてみます。

html{
cursor: crosshair;
background:url(/images/bg-daimidalar.jpg);
}

body{
width:960px;
margin:0 auto;
position:relative;
}

#container{
width:960px;
margin:0 auto;
position:relative;
}

a:link { color: #00FFFF !important; }
a:visited { color: #00FFFF !important; }
a:hover,
a:focus,
a:active { color: #FF2626 !important; }

p {
line-height:180%;
letter-spacing:1px;
}

.special p{
line-height:280%;
}

table{
line-height: 150%;
}

.special table{
line-height:180%;
letter-spacing:1px;
}

.ddimg{
padding:10px 10px 0 10px;
background-color:rgba(255,255,255,0.6);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#AAFFFFFF,EndColorStr=#AAFFFFFF);
}
.ddimg2{
padding:0 5px;
background-color:rgba(255,255,255,0.6);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#AAFFFFFF,EndColorStr=#AAFFFFFF);
}

えーっと、うん☆ これで全部です。いっそすがすがしい位ですが、み、ミニマルなサイトだとあるあるー☆ フォントスタイルすら指定されていないcssって私初めて見ました。

ちなみに私のサイトのCSSはこんな感じでかなり色々な記述がされています。これでも割と少ない方です。

そりゃ褒められるよね。

900行にも及ぶ直接記述のjavascriptが俺の行く手を阻む

びゃああああ!! なんですかこの900行近いスクリプトの山はw

これが全部このページに直接刻み込まれています。当然のようにこれらを処理し終わるまで、この下に鎮座する本文は読み込まれません。

軽く調べてみたらホームページビルダーにある、画像などを簡単にぐりぐり動かすためのスクリプト記述機能によるものだそうです。

・・・・これか!!(思わずgif動画にしてしまう)((そしてもう一つの方は華麗にスルーする))

当然のように要素へと直接スタイル記述

<BODY text="#ffffff" bgcolor="#FFFFFF" link="#ffff00" vlink="#999999" alink="#ff0000" onload="HpbVfxinit('Layer9','HpbVfx0301','G221',0,0,1,'Layer49','HpbVfx0401','I121',0,0,1,'Layer38','HpbVfx0401','I121',0,0,1,'Layer46','HpbVfx0401','I121',0,0,1,'Layer50','HpbVfx0401','I121',0,0,1);">
<DIV style="top : 383px;left : 517px;
 position : absolute;
 z-index : 34;
" id="Layer16"><IMG src="/images/anim2.gif" width="106" height="105" border="0"></DIV>
<DIV style="top : 3px;left : 688px;
 position : absolute;
 z-index : 62;
" id="Layer36"><IMG src="images/title.gif" width="358" height="210" border="0" alt="TVアニメ
「健全ロボ ダイミダラー」
公式サイトへ!!
"></DIV>

こりゃすげえ・・。スタイル記述とポジション設定の嵐です。個人的にびっくりなのはimgタグの中の「art」要素ですね。改行されてますよ。凄い。というよりart要素にちゃんと説明が入っているのも偉いですね。私は適当ですよここらへん。

出、出~w 無意味机要素出力奴~www

<TABLE border="0" class="ddimg2" width="735" height="72">
 <TBODY>
 <TR>
 <TD height="53">
 <TABLE border="0">
 <TBODY>
 <TR>
 <TD align="center" height="23"><A href="/onair/"><IMG src="images/anim29995.gif" width="423" height="59" border="0" alt="4/5(土)より、TVアニメ放送開始!"></A></TD>
 <TD width="311" align="center" height="23"><A href="/onair/"><IMG src="images/anim22222.gif" width="281" height="60" border="0" alt="AT-X、チバテレビ、テレ玉、tvk"></A></TD>
 </TR>
 </TBODY>
 </TABLE>
 </TD>
 </TR>
 </TBODY>
</TABLE>

そして出ました。テーブル要素です。もはや様式美ですね。というかこれ、テーブル要素の中にテーブル要素がありません? どういう事なの?

漢はブラウザキャッシュなんて女々しい事はしない

画像ファイルやcssファイルは、ブラウザにキャッシュさせると次に読み込む時時間を短縮する事が出来ます。

しかし、ブラウザキャッシュは当然のように設定されていません。漢気溢れますね。

見出しタグなんて要らんのですよ

「h1~h6」タグなんて当然のようにありません。最高です。スッキリとしたサイト。頭が上がりません。

まとめ

ああ、面白かった。表から見た場合と内側から見た場合、一つで二度美味しいとても楽しいサイトでした。皆さんも是非ソースを見てこの素敵な趣向に一時の安らぎを感じてみてはいかがでしょうか。

なお、ここで指摘した事柄に対しては、SEOなどの影響がどれだけあるか未知数であるのと同時に、ここまで完璧に振り切ったサイトは知名度・話題性による流入を期待できるため何一つ参考になりません。ホームページビルダーを使用したからダメという記事ではないので誤解なさらないようにお願い致します。

皆さんも是非素敵なサイトを構築してくださいね!! 本当、面白かった。

 

Almightが動かない!Chromeでチュートリアルhtmlが開けない場合の対処(windows)

まっくらだー!!

html5でアドベンチャーゲームを制作できる「Almight」で遊んでみようと喜び勇んだ所、デモファイルがまっ暗です。なんだこりゃあ。


スマホ対応HTML5アドベンチャーゲームエンジン – Almight

公式サイトみたいにカッコイイゲームを早く作りたいのに!! キイィ!! と思いながらもとりあえず公式チュートリアルを覗いたのですが、記述が無いです。むむー。

タグを使ってシナリオを書こう | スマホ対応HTML5アドベンチャーゲームエンジン – Almight

確認したら、「tutorial」フォルダの中にある「lib」フォルダを開き、「index.html」というファイルをChromeで開いてください。 (このとき、開発環境のセットアップで設定したChrome起動ショートカットでChromeを起動するようにしてください)

とはあるのですが、肝心の「開発環境のセットアップ」にはショートカットを作るなんて記述はありません。なんでじゃ。なんでなんじゃ!!

開発環境のセットアップについて | スマホ対応HTML5アドベンチャーゲームエンジン – Almight

と思ったら過去に公式で情報がリリースされていました。

デスクトップにショートカットを作り、リンク先の一番最後の所に「 –allow-file-access-from-files」と付け加えます。スペースを忘れないでください。

hogehogechrome.exe --allow-file-access-from-files

あとはこのショートカットからクロームを起動させてからチュートリアルのindex.htmlを開けば良いのですが、既にchromeが動作中の場合、先程追加した設定が反映されません。

タスクマネージャで動いているchromeを停止させてからショートカットのchromeを動かしましょう。

やったー! 動いたー!!

.htaccessでのjavascriptキャッシュの有効期限が上手く設定できない時の対処

タイトル長いですね。

色々と高速化に向けてサイトを弄っていたのですが、ついに「.htaccess」に手を出そうと思います。サイトには色々なファイルがあり、それらのキャッシュ有効期限や圧縮設定などを記述できます。

普通ならばFTPでファイルをあげたり編集したりという作業が必要なのですが、wordpressは便利ですね。ブラウザ上から編集する事が出来ます。

私は「Yoast WordPress SEO」を利用して編集しました。SEOに関する細かい設定をする事ができるプラグインですよ。とってもお勧めです。

さて、「.htaccess」の記述についてですが、こちらを参考して設定させて頂きました。→WordPressサイト用の.htaccess例 | dogmap.jp

ほとんど同じ内容なので、早速本題に入りましょう。

ちゃんと設定したのに、javascriptのキャッシュが設定されない!

ご覧のように一秒になってます。なんでじゃ。なんでなんじゃ。1秒といったらほとんど意味無しですね。ファックです。

 

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

キャッシュ設定はこんな感じです。上記サイトの物をそのまま頂きました。デフォルト設定である「1 seconds」が設定されてて「text/javascript」はスルーされているように見えますね。

解決方法ですが、こちらにありました→ExpiresByType が JavaScript に対して効かない? | Web Design Leaves

探してみる物です。ありがとうございます。なるほど、こういう記述方法でいけるわけですね。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"

ExpiresByType text/js "access plus 216000 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"

ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

修正したものがこちらです。javascriptの所を改行してあります。

設定できてます!! 良かった良かった。

スコアもかなり良い感じ。

 

ソーシャルボタンをJavaScriptではなく画像で読み込む

1秒台を目指せ!ソーシャルボタンを高速に読み込む方法を比較する » aoringo works

script.jsでgoogleアナリティクスを読み込む » aoringo works

散々迷っていたのに、結局ソーシャルボタンは画像で読み込むようにしました。

JavaScriptで公式から読み込むと時間がかかるんですよね・・・。数字が出るのは嬉しいのですが、私みたいな弱小ブログではどうせ0ばっかですよ。

JavaScriptで各種ソーシャルボタンを読み込むと3秒かかっていた

詳しくは前回の記事をご覧下さい→1秒台を目指せ!ソーシャルボタンを高速に読み込む方法を比較する » aoringo works

どれくらいの時間がかかるのか良く分かると思います。

ソーシャルボタンを読み込むだけで三秒。これはとても大きな数字です。ページを移動するたびにこれだけの時間がかかるのです。大変な事ですよ。

このストレスはページをみてくださる閲覧者に直接のしかかってきます。恐ろしい事ですね。

じゃあもう画像で読み込んじゃおうよ

というわけで本題です。それならもうJavaScriptを使用せずに、用意した画像で良いんじゃない? ということです。

結果ですが、こうなりました。

トップページの表示速度です。わあ。ソーシャルボタンを画像で表示するだけでこんな速度出るんですね。実際、見てみるとビックリしますよ。

各種ソーシャルボタンを画像で読み込むのは簡単です。

<div class="socialset">
<!-- twitter -->
<a href="https://twitter.com/share?text=テキスト&url=アドレス" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="twitter_share"/>
</a>
<!-- facebook -->
<a href="http://www.facebook.com/share.php?u=アドレス" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="facebook_share"/>
</a>
<!-- google+ -->
<a href="https://plus.google.com/share?url=アドレス" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="googleplus_share">
</a>
<!-- hatena -->
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=アドレス&title=ページタイトル" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="hatena_share">
</a>
</div>

これで読み込めます。その他のソーシャルボタンについては私は利用してないので調べてないです。もうしわけぬい。

また、ワールドプレスの場合は今表示しているページのアドレスを出力する関数がありません。なので、

<?php $url = is_single() ? get_permalink() : home_url();?>

とすると、「$url」変数に投稿ページでは現在のアドレスを。その他のページではトップページのアドレスを表示するようになります。

新規ウインドウでページを開くのと、nofollow属性は念のためつけてます。

JavaScriptでポップアップウインドウ内に投稿画面を開く

こんな奴です。小さなポップアップを出しましょう。新しいタブやウインドウよりは個人的にこっち派です。

jQuery(document).ready(function () {
jQuery(".socialset a").click(function () {
window.open(this.href, 'sosialwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1');
return false;
});
});

ちゃちゃっとjQueryで記述しちゃいます。socialsetクラスのリンクがクリックされたら小さなウインドウを表示するようにします。

これでソーシャルボタンの画像化終了になります。高速! 早い!

ちなみに、各種ソーシャルアイコンは→画像 – Arabiki – 上質なweb素材とソーシャルアイコン類 » aoringo works

ここで紹介している「Arabiki」様より頂きました。日本のソーシャルサービスの画像もあって素敵です。

ソーシャルボタンは必要なものだけ導入しよう

沢山あるソーシャルボタンですが、それの読み込み、どれだけの時間かかってるかわかりますか?

「はてな」「ツイッター」「フェイスブック」「google+」の各種ソーシャルボタンを、何も無い状態のhtmlファイルに読み込ませてみます。

ソーシャルボタンテスト

どうでしたか? 私は2.7秒かかりました。

ソーシャルボタンを読み込むだけでこれだけの時間がかかるんですよ。もちろんこのボタンたちと同時に、ページ自体の読み込みも進みはしますが、この「2.7」という数字は最低かかる事がわかるわけです。

色々考えたすえ、このブログではtwitterとファイスブックのみのボタン導入としてみました。

ツイッター&フェイスブックボタンのみ

一秒近く縮みました。良い感じです。しばらくはこれでテストして見ようかなあという感じです。もっと高速に読み込めれば全てのソーシャルボタンを設置できるんですけれどね。高望みかも知れません。

さて、ボタン整理後の私のサイトですが、計測時間はこんな感じ。

ボタン以外も色々と読み込んでいるのでこれだけの時間がかかるのでしょう。参考にしてみてくださいね。

記事の価値を自負するなら「nofollow」リンクを使わないほうがいいかもよ

SEO的なお話ですよ~。

サイトを運営する上で必要なのは、なんだかんだいってもリンクの存在です。

で、リンクには「nofollow属性」というものがあります。

<a href="http://hoge" rel="nofollow"> hogehoge </a>

このaタグについている「rel=”nofollow”」がそれです。これがついていると、「このリンク先は見る価値無し」と検索エンジンなどに宣言する意味合いになります。

nofollow属性のリンクはどういった時につけるのか

なんとも難しい所ですが、普通に記事を書いてる分には必要無いのではないかと私は思うですよ。

そもそも皆に有益な情報を提供するためにブログをやっているのであって、そこで紹介したリンクはほとんどが重要な物のはずです。それを「価値無し」と宣言して回るのはあまり有効だとは思えません。

記事の本筋とは違う、一応リンク置いておこう、というような時はつけても良いんじゃないでしょうか。

ただし、荒らしの可能性があるコメント欄やトラックバック等は、wordpressを使用している場合「rel=”nofollow”」が原則つくようになっているようですね。

無料ブログ等のブログパーツとかにはこの要素がついていたりするそうです。

nofollow付きとそうじゃないのはどういった違いがあるのか

nofollow属性をリンクに付けるのはどんなとき? | 海外SEO情報ブログ

そのものズバリな回答がありました。翻訳ありがとうございます。

  • すべての外部リンクにnofollowが付いていたからといって、順位付けに関しては他のサイトとなんら違うように扱うことはない。
  • でもそれがいい考えとは思わない。理由は、Googleはnofollowリンクを見るとそのリンクをリンクグラフから除外するから。つまりそのリンクを新しいウェブページの発見に使わないし、スコアリングのためにそのリンクのアンカーテキストを使わない。
  • nofollowを付けてPageRankの流れを制御してため込もうとするPageRankスカルプティングはもう効き目がなくなっている。
  • 外部リンクにすべてnofollowが付いていることはプラスにもならないしマイナスにもならない。

引用させて頂くとこういう事らしいです。SEO的な意味合いで「nofollow」しても意味は無い。さらに、そのリンクを評価しないどころか文字列すらも認識しないという事です。これはとても重要なポイントですね。リンクも記事を構成する文章の一つです。仮に上記のリンクをnofollowすると「nofollow属性をリンクに付けるのはどんなとき? | 海外SEO情報ブログ」という一文がまるまる無視される事になります。

「PageRankスカルプティング」というのは、外部リンクをすべて「nofollow」にして、自分からは外部へリンクを出さず、外からどんどんアクセスを貯めるという手法みたいですが、常に検索エンジンをアップデートしている中で無効化されてるようですね。(極端な例なだけで、的確な構築をしていればpagerankを調整する事は可能のようです)

ノーフォロータグ(nofollow)リンクでSEO | ネットビジネスで20代にて転職して独立したなるひこのブログ

とはいえ、googleで「nofollow リンク」を検索するとこんなページも見つかるわけですが。なんでしょうね「自分のサイトからパワーを流出させないようにします。」っていうふわっとした説明がじわじわ来ます。もちろんこのリンクにはきちんとnofollow設定してます。

まとめ

というわけで、自信を持ってリンクを張っていった方が良いと思いますよ。普通に記述すればいいだけです。簡単ですね。

wikipedia等はスパム防止のために全てのリンクが「nofollow」設定されています。それを差し引いても濃い記事内容ですし、役に立つサイトだから自然と上位に行くわけですね。納得ですよ。

ともあれ、個人的には「nofollow」の記事で使わないリンクと使ったリンク両方とも記述できて満足度高いです!

1秒台を目指せ!ソーシャルボタンを高速に読み込む方法を比較する

どもっち。最近TRPGじゃなくてツールばっかり作ってるaoringoです。サイト調整に奮闘しております。

サイトの速度、気になりますかね? 私は超絶気になりますよ。特にソーシャルボタンです。こいつらが原因で遅くなっているのでは・・・・と常々思っております。

今回はこのソーシャルボタンに手を入れてみましょう。

とはいえ、どれくらい表示速度に違いがあるのか・・・ちょっと確認してみましょうか。

計測に使うのはこちら→【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | Web担当者Forum

お手軽に、正確に表示できるので好きです。

素のコードを記述する

空のhtmlファイルにソーシャルボタンを読み込んだだけのページを作成し、これを計測します。

読み込むソーシャルボタンはtwitter、はてな、facebook、グーグルプラスです。ついでにアナリティクスコードも読み込んでみます。

ソーシャルボタンテスト

時間はこんな感じです。何度かリロードを繰り返してみたところ、2秒~2.3秒かかるようなイメージです。

次、このページをiframeで読み込みます。

iframeテスト

時間的には変わらず。が、一応副次的な効果はありますよ。

iframe内でJSファイルを読み込むため、描写が途中で止まってしまうという事がありません。

また、iframe内で読み込むため検索エンジンとかにはjsファイルを隠せるという利点もあります。どれくらいの効果があるかはちょっとわかりませんが。

あと少し古いブラウザだと正常に動作しません。

 非同期読み込みにしてみる

Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ | Cappee Design

こういう記事を見つけました。非同期読み込みをする事によって、ストレスフリーに記事を閲覧するというものです。試してみましょう。

twitterボタンを例にしてみます。

 

<a href="https://twitter.com/share" class="twitter-share-button" data-via="moeringo" data-lang="ja">ツイート</a>
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');</script>

<a href="https://twitter.com/share" class="twitter-share-button" data-via="moeringo" data-lang="ja">ツイート</a>
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.async = true;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');</script>

「js.async = true;」を追加で記述するだけです。簡単ですね。

asyncテスト

全体の時間はそこまで変わっていません。あまり効果は無さそうですね。

最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた | ゆっくりと…

一歩進み、この記事の通り非同期スクリプトをまとめられた人が入るようなので使ってみます。

まとめたテスト

時間的には変わりませんが、スクリプトが圧縮されてるので取り回しが楽です。

script.jsを使う

はい、本題です。script.jsを使いましょう。

Javascriptファイルを非同期に読み込む$script.jsを使ってみた | notnil creation weblog

非同期によるファイル読み込みを行うスクリプトファイルです。イエイイエイ!

使い方はとても簡単です。

$script(['foo.js', 'bar.js'], function() {
  // foo.js & bar.js is ready
})

このようにJSファイルを記述するだけで非同期で読み込んでくれます。今回は全てまとめてこのようにしました。詳しい使い方はドキュメントを見てくださいね。

<script type="text/javascript" src="./script.min.js" charset="utf-8"></script>
<script type="text/javascript">
$script(["//platform.twitter.com/widgets.js", "//connect.facebook.net/ja_JP/all.js#xfbml=1","//b.st-hatena.com/js/bookmark_button.js", "//apis.google.com/js/plusone.js", "//www.google-analytics.com/analytics.js"], function () {
ga('create', 'UA-35371593-2', 'ao-works.net');
ga('send', 'pageview');
})
</script>

アナリティクスコードは正常に動作するかわからないのでしばらく検証、別に記述かするようにしたほうがいいかもしれません。また、script.js自体は非同期で読み込んではいけません。正常に動作しなくなります。

script.jsテスト

いきなり早くなりましたね!なんですかねこれ。全ての読み込みが終わり次第jsファイルの読み込みが始まるのでしょうか。実際全ての表示が終わるのは2秒くらいかかりますが、少なくともロードは全て終わってるっぽいです。恐ろしい・・・。

そんなわけで私はscript.jsを選択しようかなと思います。皆さまも色々試してみてくださいね!!

パーマリンクは英語か日本語か SEO的にどうなんだろうか

はいさい! ブログ運営頑張っておりますか。私は割と適当です。

さて、パーマリンクですよ。パーマリンク。

悩ましい問題です。日本語の方がユーザビリティが良いとか、英語の方が検索エンジンに好かれるとか、色々ありますよね。

ぶっちゃけ気にしてもしょうが無いのかも知れませんけれどね・・・。

検索エンジンに好まれるサイト

結局はユーザーから見て得になるサイトが上位に食い込みます。つまり私のブログみたいな誰のタメにもなら無いブログは論外って事ですね。

検索エンジンはページの内容を解析してインデックスしていきます。サイトの構造自体や、その新鮮度、更新頻度を重視します。アドレスに求められのはその永続性だけです。

アドレスについて色々と試行錯誤するよりも、タイトルやMeta Descriptionに拘る方がよっぽど効果的なのが実際の所のようです。

とはいえ、頑張ったところで私のブログはSEOやパーマリンクの話題はほぼ取り上げないので、この記事がグーグルさんとかに評価される事はほぼ無いでしょう☆

実際の所

実際、検索エンジンで適当な単語で検索してみるのが一番お手軽です。

色々なアドレスが見えますね。パーマリンク設定は本当にバラバラなのがよくわかります。

見ているとパンくずリストの方が効果的なように見えますね。今度ちゃんと設定しよう、パンくずリスト・・・。

私の所は数単語の英語にするようにしてます。自動翻訳に突っ込んでるのであまり意味は通じません。

最近作ってる花言葉のサイトでは、花の名前を日本語表記にしています。

アザレア(白)「あなたに愛されて幸せ 」「愛の喜び 」「節制」 – Suggestion of flower

まだそんなに記事数は無いですが少しずつ作っています。アドレスは「http://flower.ao-works.net/%E3%82%A2%E3%82%B6%E3%83%AC%E3%82%A2%EF%BC%88%E7%99%BD%EF%BC%89」というような感じですね。花の名前だけですね。花の名前だけなら短いし、これくらいなら英単語よりも日本語のほうが良いかな? くらいの気持ちです。

日本語ドメインはどうだろう

少し脱線。

日本語ドメインの方は少し事情が違うかもしれません。

というのも、googleが最近日本語のドメイン取得ページを最近作りました。

[browser-shot width=”450″ url=”http://xn--p8j9a0d9c9a.xn--q9jyb4c/index.html”]

特定キーワードによる検索上位を狙うなら、取ってみるのも手かもしれませんね。

 

IEの対応なんてハナっからする気なし!「ie-owakon」で楽々と他ブラウザへ誘導

コードをコピペするだけでIE8以下で閲覧したときに警告を表示する『ie-owakon』を作りました | SANOGRAPHIX

IE向けにページを組むのは結構大変です! IE7までCSSがまともに使えない上に未だにIE6がうようよいやがるぜ!!!

とまあ、今ではtwitterですらちょっと前のIEで閲覧すると表示が崩れます。そろそろIEから乗り換えちゃいなよべいべー!! という感じで、IEの対応を最初からする気がないページを私もいくつか作ってきました。

さすがにこのブログではやっておりませんが、aoringo toolsで取り扱っているwebツールではIE8以下で閲覧すると警告が出たりします。

その警告の元が上記サイト様。オワコンちゃんかわいい!! イラストをそのまま載せるのはなんとなくはばかられたので置いてませんが、かわいいんだよね、オワコンちゃん。

デモページは↓

IEはオワコン!

IE以外のブラウザで見るとただの文字列ですが、IEで見ると、

オワコンちゃんが出てきます! かわいい!

ソースはリンク先で配布されていますが、IE10では「 <!–[if IE]>」が仕様変更でただのコメントとして扱われるようになりまともに動作しません。

なのでメタタグに

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

を追加する事によってIE9のシミュレーションをして表示させることができます。

IE10はCSSとかもある程度できるのでIE10までオワコンする必要はないと思うのですけれど、皿まで憎い人はやっぱりいるわけですよね!!

ちなみに私は特に気にせず実装しちゃう畑なんでわりとどうでもいいです!

CSSでサイトの印刷範囲を指定する

後で印刷して自分で読んだりする場合。余計な部分がついてきて無駄に紙を使うのは勿体ないし、そんな不便を万が一見ている人にさせるのは忍びない。

というわけでCSSでささっと掃除します。

今の状況はこんな感じ。

ツイートボタンとかがまあ、邪魔ですが、印刷する分にはこれぐらいどうってことない・・・んですが、ページをめくっていくと。

こうなっているわけですよ。邪魔ですよね。ページ、嵩みますよね。

印刷範囲を指定するcssを以下の通り。

@media print{
  #head{display:none;}
}

印刷する場合のそれぞれのCSS要素をここで指定してあげれば、かなりキレイになります。

すっきりかっちり。

/*印刷範囲指定*/
@media print{
  #zenback_loady{display:none;}
  #zenback{display:none;}
  #comments{display:none;}
  #site-description{display:none;}
  .menu{display:none;}
  .googlead{display:none;}
  #breadcrumb{display:none;}
  #side{display:none;}
  .social4i{display:none;}
  #main{width:100%; float:none;}
}

最終的な形はこういう感じになりました。コメント欄や、広告の表示を消して、メインを全体的に表示できるように。

これで印刷するときも気をつけなくても良くなりましたね。やったぜ!