「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を動かしましょう。

やったー! 動いたー!!

レスポンシブデザインのhtmlテンプレートの個人的厳選四つ

新しくサイトを立ち上げるときに一番大事だったりするサイトデザイン。その負担を軽減してくれるテンプレートは知っておくに越したことはありません。

ただ、個人的にビビッとくる物に出会える事は少ないため、厳選に厳選を重ねた俺まとめを残して置きます。

いつかこれを使ってサイト作るんだ・・・。

VINTAGE TEMPLATE


Demo Free Html5 and Css3 Templates | Html5xcss3.com

レトロな雰囲気がとてもオシャレ。落ち着きながらもとんがった雰囲気がとても良いですね。

ENGINERY


Demo Free Html5 and Css3 Templates | Html5xcss3.com

黄色が印象的なだけではなく、それぞれの要素がウインドウサイズに合わせてシームレスに変化します。メニューもまとまるわけではなく、そのままなところも良いですね。文字の後ろに文字が来たりして、細かな所にオシャレさを感じます。

SIMPLEX


SIMPLEX | Free Responsive Template by Dzyngiri

シンプルなデザインで横幅一杯に要素が並ぶのがとても壮観ですね。レスポンシブもとてもシンプルで印象があまり変わらないのが良いです。

prologue


Prologue | HTML5 UP

右側に固定されたメニューがとても大きく見やすいです。スマフォでの閲覧時にもメニューがにゅっと出るアクションでとてもかわいらしいです。

見出し(H1など)タグはどういった時に使うのか 迷わないためのまとめ

毎回迷うのですよね。見出しタグって。というわけで色々なサイトを巡ってまとめました。

html5基準ではH1は何個でも良い

HTML5 では 1 ページに複数 h1 を配置するのがスパム行為にならない? | monopocket blog

あくまでsectionタグやarticleタグで囲ってる部分の見出しとしてh1は使うと良いそうですよ。 そんなわけで、今作ってる私の運営するビアガーデンサイトは記事タイトルを原則としてh1タグで囲っています。


中の町ビアガーデン|沖縄市 中の町にあるビアガーデン 冷えたオリオンビールで乾杯しましょう!!

なので記事一覧ページではh1タグが頻出しています。

<header id="site-header">
<div class="site-meta">
<p id="title"><a href="http://xn--cckua5fzbxk1b6232e5e3a.com">中の町ビアガーデン</a></p>
<p id="title_description">沖縄市 中の町にあるビアガーデン 冷えたオリオンビールで乾杯しましょう!</p>
</div>

</header>

<article itemtype="http://schema.org/BlogPosting" id="post-271" class="post-271 post type-post status-publish format-standard hentry category-opening tag-6 category">

<h1 itemprop="headline" class="post-title entry-title">
記事タイトル
</h1>

<h2 class="post-date">
投稿情報
</h2>
<div class="entry excerpt-text" itemprop="articleBody">
概要
</div>

</article>

<article itemtype="http://schema.org/BlogPosting" id="post-271">

<h1 itemprop="headline">
記事タイトル
</h1>

<h2>
投稿情報
</h2>
<div itemprop="articleBody">
概要
</div>

</article>

こんな感じですよ。

今のところgoogleさんの検索順位もそれほど影響を受けていないので、間違った記述でもないと思います。

h1タグには記事タイトルを入れる

あくまでそのページが何の為のページか。わかるようにh1タグをつけるようにしましょう。

googleの検索エンジンはどんどん進化していて、迷うことなくそのページを認証してくれますが、それ以外の検索エンジンは誤解する場合があるようです。

私はサイトタイトルや説明をpタグにして、記事タイトルをh1で囲うようにしています。

見出しタグは30文字~60文字くらいで納める

見出しタグがある程度重視されるのは間違いありません。ならば、それはほどよい長さで、分かりやすくあるべきです。そう考えると30文字~60文字くらいが丁度よく、その中にキーワードを出来れば含める。というのが一般的なようです。

見出しタグの歯抜けはNG

H1、H2、H3と順序よく使うようにします。そうすることでどの文章がどの文章と関係を持っているのか暗黙的に示す事が出来ます。

「H1 H2 H3 H2 H3 H4」といった使い方は問題ありません。

「H1 H2 H3 H5 H2 H4」みたいな使い方はNGですね。

まとめ

いくつか見出しタグについてのページを漁りましたが、大抵の記述は古い情報ばかりのようでした。今はそこまで使い方に気をつけなくても問題無いように感じます。その見出しがどこに属しているのか。文章と見出しが合っているのか。話題の転換で見出しタグを使っているのか。など、基本的な理由で見出しタグをつけていけばいいのかなと思いますよ。

完全保存版 この組み合わせで完璧!wordpress高速化プラグインまとめ

試行錯誤してきたwordpressの高速化プラグイン。その総括をしようかなと思います。

ああでもない、こうでもないと色々とやってきましたが、ようやく落ち着いたという感じです。

私が関わっているwordpressサイトにはこの組み合わせで運営されておりますよ。

キャッシュ系

その名の通りキャッシュ系プラグイン。これが無いと始まりませんね。

Head Cleaner

WordPress › Head Cleaner « WordPress Plugins

ソース整理といえばこれ。ヘッダー部分のお掃除をしてくれます。jsファイルやcssファイルを圧縮してキャッシュ化しておくことも可能。cssファイルを編集してもその都度新しいcssキャッシュファイルを作成してくれるので他キャッシュ系プラグインの影響でレイアウトが崩れる心配も無し。

本当助かってます。ありがとうございます。ふがふが。

WP Super Cache

WordPress › WP Super Cache « WordPress Plugins

wordpressの出力画面をhtmlに出力してそれを見せちゃうというページキャッシュプラグイン。動的な処理を常時やるようなサイトに向きませんが、このサイトのような普通のブログにはモアベターなプラグインとなります。

キャッシュの有効期限が切れても、切れたキャッシュをユーザーに提供しつつ新しいキャッシュを裏で生成したりと痒いところに手が届きます。設定が豊富で取っつきにくいかも知れませんが、その分細やかな設定が可能です。

wordpressのキャッシュを制御できるプラグイン「WP Super Cache」の設定項目解説 » aoringo works

モバイルモードをオンにすれば、別にスマフォ用のキャッシュを作りそれを見せるようになります→wp super cacheのモバイルモードはスマフォ用のキャッシュファイルも生成してくれる! » aoringo works

DB Cache Reloaded Fix

WordPress › DB Cache Reloaded Fix « WordPress Plugins

mysqlリクエストをキャッシュするプラグインです。私は検索ページをキャッシュしないようにしているので、そういう時はこいつが働くようになっています。wordpressはmysqlで全ての設定やデータを管理するので、このプラグインはもはや必須と言っていいでしょうね。

WP File Cache

WordPress › WP File Cache « WordPress Plugins

php関数の出力をキャッシュします。これが有ると無いとではかなり動きに差があります。

キャッシュプラグインの組み合わせの最適回答を求めて – aoringo works

DB Cache Reloaded Fix同様、静的キャッシュが動かない所で強力にサポートしてくれます。

001 Prime Strategy Translate Accelerator

WordPress › 001 Prime Strategy Translate Accelerator « WordPress Plugins

wordpressは多言語に対応しており、ページを表示する度にどの言語で表示するべきかをphpにより判定しております。

このプラグインはその部分をキャッシュ化する事で高速化を図りますよ。同様のプラグインはいくつかありますが、このプラグインは閲覧ページ、ログインページ、管理者ページでキャッシュを使うかどうか設定する事が出来ます!! 管理者ページでキャッシュをオンにすると恐ろしい事になるので、私は閲覧ページのみオンにしております。

「MO cache」はもしかするとすさまじい容量を食うかもしれない。 » aoringo works

処理系

wordpressの各種処理を手助けするプラグインです。縁の下の力持ちといった所。

WP Hyper Response

WordPress › WP Hyper Response « WordPress Plugins

phpというのは、普通処理が全て終わってからクライアント側に送信しますが、このプラグインを利用すればphpの処理をリアルタイムでクライアントへと送信するようになります。

結果的に閲覧者はすぐに画面に反応があるのでストレスが減るというわけですね。

サーバーによっては利用できない場合があるので気をつけてくださいね。

画像系

ブログの画像はいつだって頭を悩ませる所ですね。ここでもプラグインは活躍します。

Imsanity

WordPress › Imsanity « WordPress Plugins

アップロードする画像を自動リサイズ! 過去の画像もリサイズできるwordpressプラグイン「Imsanity」が素敵 » aoringo works

アップロードする画像を指定の解像度へリサイズしてくれるプラグインです。どんなに巨大な画像をあげようが、これで「1024px」等と設定しておけば、そのサイズになるのです!!ブログの解像度に合わせて設定しておけばなにより強力な速度対策になるでしょう。

過去にアップロードした画像を一括変換する機能もついてます。

EWWW Image Optimizer

アップロードされた画像を圧縮してくれるプラグイン。場合によっては50%以上も容量を抑える事が出来ます。また、アップロードされたpngをjpgに変換したりする機能もあります。至れり尽くせりですね。このプラグインも過去にアップロードした画像を圧縮する事が出来ます。

また、テーマファイルに含まれている画像も圧縮する事が出来るんですよ!! ワザマエ!

Unveil Lazy Load

WordPress › Unveil Lazy Load « WordPress Plugins

画面に表示されるであろう画像だけを読み込むようにして、下へとスクロールを始めたら画像の読み込みを開始する「遅延ロード」をさせる事ができるプラグインです。

どれだけ写真を大量に載せようが、これでかなり負荷を減らすことが出来ますよ!

Jetpack by WordPress.com

WordPress › Jetpack by WordPress.com « WordPress Plugins

CDN設定って面倒くさいですよね・・・このプラグインを導入することによってボタン一個でCDNを導入する事が出来ます。他にも沢山の便利機能が一個に集約されているので、プラグインの節約にもなります。

まとめ

どうですかね。結構な数のプラグインを導入しています。

高速化といっても色々なプラグインの組み合わせ、設定があるのでとても大変だとは思いますが、是非参考にしてみてくださいね!

 

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

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

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

ソーシャルボタンテスト

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

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

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

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

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

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

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

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”]

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

 

何も考えずサイトを移転したらアクセス数が10分の一以下になった話

 

これ、何の画像かわかります? 私のサイトのアクセス数です。見たとおり、かなりパナイ降下っぷりを示しています。恐ろしい。

今、このサイトがあるドメインは「ao-works.net」という名前で、一ヶ月前に取得した物です。新しく取得したばかりだから、検索サイトからも評価が低い状態なんですね。

前あった場所はかなり時間が立ち、良ドメインではあったのですが、巣立ちという意味合いも込めて心機一転。新しくやっていこうと思ったわけです。

サイト移転はリダイレクトをしっかりと

前のサイトからこちらのサイトへ移る際、前の方では検索エンジンにインデックスさせないように設定していました。

 

「ダッシュボード>設定>表示」にあるこのチェックボックスにチェックを入れるんですけれどね。これでサイトが完全に分裂した状態です。

さらには、依存記事を一旦非公開に。結果大量の404ページが量産されることに。今考えると何してるんでしょうね、私。

301リダイレクトを選択する事

サイトを移転する – ウェブマスター ツール ヘルプ

301 リダイレクトを使用して、以前のサイトにあるすべてのページを新しいサイトに完全にリダイレクトします。これにより、検索エンジンやユーザーに、サイトが完全に移転したことを知らせることができます。最初に 1 つのセクションまたはディレクトリを移転してリダイレクトし、リダイレクトが正しく動作することをテスト、確認してから、すべてのコンテンツを移転することをおすすめします。

googleさんもこういっておられますし。301リダイレクトにしましょう。そうしましょう。

wordpressは便利なプラグインがある

301リダイレクトを設定するには「.htaccess」ファイルを弄る必要があります。どのFTPソフトとかで直接ファイルを触るので、知識が無いとちょっと怖いですね。中身も意味不明な呪文みたいなのが書かれてますよ。私にはちんぷんかんぷんです。ええ。

というわけで素直にwordpressプラグインに頼ります。

WordPress › Redirection « WordPress Plugins

日本語対応でわかりやすく、正規表現が扱えます!ワオ!

 

設定はこんな感じです。詳しいプラグインの解説なのでは他のサイトが詳しくやってくれるので割合しまして。

前のサイトと、今のサイトではちょっとパーマリンクの設定が違います。前のサイトでは語尾に「.html」がついていたのですが、今のサイトではついていないのです。

「(.*).html」という表記は、.htmlまでを全て認識しつつ、「.html」の前の部分だけを記憶する、という正規表現の表記です。

対してリダイレクト先の設定の「http://ao-works.net/$1」にある「$1」は、記憶した文字列をここに追加する、という意味です。

設定したら、実際にリダイレクトできるかどうか試してみましょう。

http://cre.jp/honyomusi/see-uss-picture-summary-just-to.html

アドレスに注意してアクセスしてみてくださいね。

あとは結果を黙して待つ。

手遅れな気もするのですが、とりあえず結果をまってみようと思います(汗

数ヶ月後くらいにどうなったのかの経過報告をさせていただきますね・・・。

プログラム等のコードハイライトを「WP Code Prettify」に変更したよ!

チャオ! この挨拶に特に意味は無いよ。

wordpressでのブログ執筆はとても楽しいですよね。楽しいんですが、色々な種類の記事をごちゃまぜで書いてる私には困った事も多いんですよ。

 

wordpressでの記事作成では、完成記事に近いブレビューをみながら編集する「ビジュアル」と、htmlタグを直接いじいじしながらやる「テキスト」の二つの編集モードがありますよね。私はへっぽこ日曜プログラマーなので、両方使ってます。

で、本題のコードハイライトプラグインなのですが。これがもう大変なわけですよ。両方を行ったり来たりしてるとこのコードが変な変換をされてしっちゃかめっちゃか。最終的には文字化けみたいになっちゃったり崩れまくりだったわけです。

それで今回見つけたのが「WP Code Prettify」ですよ。ショートコードではなくpreタグによる記述なので、ビジュアルエディタとテキストエディタを行き来しても影響をありませんよ!わーい。

[browser-shot width=”450″ url=”http://wordpress.org/plugins/wp-code-prettify/”]

<?php if(function_exists('wp_pagenavi')): ?>
 <?php wp_pagenavi(); ?>
 <?php else : ?>
 <div class="navigation">
 <div class="alignleft"><?php previous_posts_link(__('Previous page')) ?></div>
 <div class="alignright"><?php next_posts_link(__('Next page')) ?></div>
 </div>
 <?php endif; ?>

ちなみにこんな感じです。うん、良い感じですね!

もしも今後、このプラグインを削除したとしてもpreタグでは残るので最低限の見た目も保証されます! 安心!!