最近、アクセスが集中して重い場合があります。申し訳ありません。
2012年05月22日

ヘイ!今回の金環日食、見逃した人は他にいる?

どうも。日食を見逃してしまった正宗です。

2012年5月21日の金環日食の様々な見所を、ウェブ上でざっとおさらい出来るような5つのページをまとめてみました。


2012年5月21日 金環日食を楽しもう!
http://www.youtube.com/watch?v=MZHpKc6Q6KU
日食の仕組みから楽しみ方・注意事項まで解説してくれる基礎知識ムービー。ナレーションのお姉さん(中尾衣里さんという人らしいです)の喋り方が優しげで、個人的に凄く気に入ったので一番目に紹介。

国立天文台三鷹 金環日食映像(2012年5月21日)
http://www.youtube.com/watch?v=RrIbnr2DRBo
日食の一部始終を収めたムービー。

2012年5月21日 金環日食 | ギャラリー
http://naojcamp.mtk.nao.ac.jp/phenomena/20120521/
NAOJこと国立天文台の写真。枚数は少ないですが、貴重なベイリービーズ(月面の凹凸が日食の環を部分的に欠けさせる現象)を見る事が出来ます。

【金環日食】2012年5月21日の金環日食撮影しました!
http://blog.mobiledatabank.jp/archives/51330743.html
個人ブログ『MOBILEDATABANK』さんのページ。画像が大きく枚数が豊富で、かつ鮮明に日食が撮られています。

金冠日食 撮影しました。
http://vantech.at.webry.info/201205/article_7.html
個人ブログ『バンテック ベガ もーもーモーグル アリストTTE』さんのページ。雲の存在が凄く良い味を出してます。カッコイイ。


以上ですー。

ちなみに日食メガネ買いましたか?



もし持ってるなら、その日食メガネで2012年6月6日に金星の太陽面通過を見る事が出来るので、まだ捨てない方が良いよ!


ではでは、また来てね!!

  facebookshare.png  
  comment.png

時事 - サムライEXP posted by 正宗 at 05:23 Thanks Reading!!
2012年05月24日

SeesaaブログをOGPに一部動的に対応させる方法

重要追記

公式OGPの方が機能的に洗練されてきたので、現状では公式OGPを使う事を推奨します。

記事自体は何かの参考になるかもしれないので、このまま残しときますねー!


◇ ◇ ◇



どうも。手探りのままいきなりブログのカスタマイズを始めてしまう方の正宗です。

フェイスブックやミクシィ、グリーの『いいね!』ボタン等で使われているOGP(The Open Graph protocol)ですが、Seesaaがデフォルトで用意してくれている『<% blog.ogp_tag(ar6cle_for_ogp) %>』のタグを使用すると、出力されるページのタイトルやURLはトップページのもので固定され、更にはロゴ画像までSeesaaが用意しているデフォルトのロゴに固定されてしまうので、出来れば自分でOGP用のmetaタグを記述したいと思う人も多いのではないでしょうか?

私もその内の一人です。

でもって、さっそくこのブログのOGP対応を目指してHTMLのカスタマイズを始めたのですが、あれやこれや試行錯誤して予想以上に大変だったので、今日は私がこのブログをOGPに対応させた際のmetaタグの書き方を記しておこうと思います。

SeesaaブログをOGPに対応させたい、あなたの参考になれば。

■ まずはじめに。6つの注意事項

1.腹をくくりましょう。何が起きてもスーパー自己責任です。

2.HTMLのバックアップを事前に絶対に取っておきましょう。そうすれば、少なくとも現状復帰が可能になります。

3.このブログで記述してるOGP用のmetaタグの内容は『title、type、url、image、description、site_name』の6つのみです。

4.metaタグ内容の『title、url』の2つは、ページごとに個別のものを出力する事が出来ます。それ以外は固定になります。

5.descriptionに本文の内容を反映させるのはあきらめましょう。その方が幸せになれます。

6.HTMLの構造タグ『<html>』内にも忘れずに『xmlns:og="http://ogp.me/ns#"』や『xmlns:fb="http://www.facebook.com/2008/fbml"』の文を追加して「OGPに対応しましたよ」と宣言しておきましょう。参考までに書きますと、このブログでは<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="ja" lang="ja">と記述しています。ちなみに私は記述してませんが、ミクシィ用は『xmlns:mixi="http://mixi-platform.com/ns#"』、グリー用は『xmlns:gr="http://gree.jp/ns"』となります。

■ 次に、以下のmetaタグをコピペします

以下の6行のmetaタグをコピーして、あなたのブログのHTMLの『<head>〜</head>』内にペーストします。

↓ 以下をコピペ ↓

<meta property="og:title" content="あなたのブログの<title>〜</title>の間の記述全て" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<% mobile_link_discovery %>" />
<meta property="og:image" content="あなたが用意した画像のURL" />
<meta property="og:description" content="<% blog.description | nl2br | tag_strip %>" />
<meta property="og:site_name" content="<% blog.title %>" />


↑ 以上をコピペ ↑

その後、赤文字の部分をあなた独自のものに修正します。

各行については以下の通りです。

■ 各行ごとの説明

1行目『og:title』について
あなたのブログの<title>〜</title>の間の記述全てを赤文字の部分にコピペします。<% if:extra_title %>とか書いてあると思いますが、それも含めて全部です。"<title>"及び"</title>"自体はコピペしちゃダメですのでご注意を。これで個別記事のタイトルやカテゴリタイトルもOGP用に出力出来るようになります。

2行目『og:type』について
"website"で固定します。検索していて"blog"や個別記事のみ"article"で対応する方も見かけましたが、どのページもHTMLで作られている以上"website"が妥当、かつシンプルで良いと思ったので。

3行目『og:url』について
handheld指定で使われている<% mobile_link_discovery %>を流用します。SeesaaブログではPCと携帯を自動で振り分ける仕様だからだと思いますが、<% mobile_link_discovery %>は常にPC閲覧用の個別ページURLを出力してるので、そのまま使ってしまいましょう。

4行目『og:image』について
あなたのロゴ画像を用意して下さい。サイズは200×200でPNG(次点でJPGかGIF)のものにしましょう。200×200以下のサイズだと警告が出ます。200×200より上のサイズはどこまで対応してるか私には分かりません。用意した画像をファイルマネージャでアップロードして、そのURLを赤文字の部分に記述して下さい。

5行目『og:description』について
本来ならそのページの概要を記述するべき部分なのですが、どう頑張っても本文の文字を自動で表示させる事が出来なかったのでブログの説明文で代用しました。無念じゃ。

6行目『og:site_name』について
ブログの正式名称を表示する部分なので、ブログタイトルで固定します。

■ 最後に、チェックします

設定が終わったら、そのHTMLを保存して下さい。

仕上げにどこか問題が無いかどうかのチェックをしましょう。

フェイスブックが提供しているツールページ、デバッガーにアクセスしてあなたのブログのURLを入力し、結果をチェックしてみて下さい。

どうでしょう?

意図した通りに表示されてますか?


以上でフェイスブック『いいね!』もミクシィチェックも一切ブログに設置していない私からのOGP講座は終了です、お疲れさまでした。

え?

なんでそれでOGPに対応させたのかって?

ロマンだからですよ。


ではでは、また来てね!!







<追記 2016-10-14 深夜>


どうも!4年と半年後の正宗です。

2016年も終わりが近い頃になって、ようやくフェイスブック始めてみました(笑)

ここに来て突然のFacebook

あと、時が経ちSeesaaブログ標準のOGP設定が上手く機能するようになっているのでそちらを使用した方が良い感じです。

  facebookshare.png  
  comment.png

インターネット - サムライEXP posted by 正宗 at 00:58 Thanks Reading!!
2012年05月26日

私のコンテンツの専用リンク集を作り始めました

どうも。整理整頓マニアの正宗です。

以前書いた『リンク集を作ろうかと』という記事の続きです。

今年の1月14日の記事ですよ...ちょっと懐かしい(笑)

上の『リンク集を作ろうかと』の記事の要点をかいつまんで言うと『何個か運営してる自分のコンテンツ専用のリンク集を作って色々スッキリしたい』というものなのですが、その記事を投稿したわずか2日後にパソコンがぶっ壊れるという奇跡体験をしてしまった為、今までこの案は放置となっていました。

しかし、今使用しているこの12インチの小さなノートパソコンも何だかんだでかなり手に馴染んで来たし、ここらでいっちょう作ってやるかな、と思った訳です。

まぁ、ぶっちゃけるとまだ思いっきり作りかけなんですけど、構わず紹介しちゃいます。

【心】Movements

現在の状態をキャプチャーしておきました。

2012-05-26-01.jpg
《画像クリックで拡大》

見て貰えばお分かりの通り、清々しい程にテンプレート丸出しのデザインです。

この初期状態からカスタマイズを繰り返してサイトを作り上げて行く事になります。

リンク集と言いつつ、この『サムライEXP』と『ブログアクセスアップ』へのリンクしか作っていないのも、2サイト分のリンクが有れば取り敢えずの動作テストが出来るからです。

今後しばらくは、あーでもないこーでもないと弄り倒す事になりますので、どんな風に変化するのか、思い出した時にたまーに見に来れば良いと思うよ!

もし、何か失敗しておかしな事になってたら笑って下さい。


ではでは、また来てね!!

  facebookshare.png  
  comment.png

インターネット - サムライEXP posted by 正宗 at 08:33 Thanks Reading!!
PAGE TOP ▲