HTML一覧

Tagumblr で Tumblr のタグ一覧を高速に表示!・初投稿も表示する

詩的私的 Tumblr

Un dia especial
(あの雲が最初に生まれたのは──どこだろう)

2011 年も Tumblr が面白かった! 「タンブラくんのこと──、嫌いじゃないよ!(夕日に向かってダッシュ」──というくらい愛してる(?)。

現在、下の 3 サイトを運用しています。

どのサイトも、ゴテゴテと過剰装飾ぎみではある。それには理由があります。Tumblr は 1 つの記事が短くなりがちなので、せっかくやってきた お客さんが「なんだ、このホームページは中身スカスカだな!」と思ってしまう。

タグ一の覧を表示する「Tagumblr」は、つい最近になって発見し、すぐ気に入りました。類似のスクリプト(プログラム)は多いけれど、もっとも高速に「タグクラウド」表示してくれます。

さっそく導入してみましょう!

続きを読む


SEO(検索エンジン最適化)のために「リッチスニペット」を導入!

リッチスニペット・Microdata・schema.org

Untitled by dandandanRyan, on Flickr
(schema.org ──早すぎたんだ!)

結論: リッチスニペットの導入は、最近の SEO には欠かせない。しかし、schema.org に手を出すのは まだ早い!

まず、この記事で言う「SEO」と「スニペット」とは、下のように決めてしまいます。ずいぶん限定的なようですが、必要にして十分だと思う。

  • SEO: Google 検索の結果有利に表示されること
  • スニペット: Google の検索で表示されたページの説明文

もっと言えば、自分のなかでは、「SEO = Google に好かれること」と思っています。

「リッチなスニペット」と「普通のスニペット」との違いは、下の記事を見れば すぐに分かるでしょう。

Google ウェブマスター向け公式ブログ: リッチ スニペットの導入について

──そう、具体的に言えば、検索ページで「ちょっと情報が増えるだけ」なのです。しかし、その すこしの差が検索した人の「ん?」に つながり、新たな訪問者を生み出す きっかけになる。

では、具体的に導入例を見ていきましょう──。

続きを読む


YouTube の「埋め込みコード」を Valid にする! HTML5 時代編

YouTube 動画の「埋め込みコード」

YouTube 動画の新旧「埋め込みコード」
リトルモンスターなら──貼らずには いられない)

YouTube で公開されている動画をブログで紹介したいぜ! ──ブロガ (Blog + er) なら、食欲と同じレベルで湧いてくる欲求ですよね。たぶん。

全ブロガの 98 割は、YouTube が提供する標準の「埋め込みコード」で満足することでしょう。「みんなと一緒」は、この国でも・あの国でも、絶対的な正義なのです。

ところが──、今も昔も、ゆーちゅーぶ先生が教えてくれるコードは、(X)HTML 的に・W3C 的に「よろしくない」。

そこで、以前は下の User Script を利用していました。これを GreasemonkeyScriptish などから使うと、Valid な HTML コードを出してくれます。

Valid YouTube Embed for Greasemonkey

しかし、現在のユーチューブは仕様が変更されました。

このスクリプトを使うには、わざわざ以前の埋め込みコードを使用するという項目にチェックを入れる必要があります。──この記事の上にある画像を参照してくださいね。

その上、ユーザ・スクリプトを利用しても、それほどクリーンなコードでもない……。

今回は、イイ感じに埋め込みコードを変更する方法──のヒントを紹介します。ちょっと歯切れが悪いのは、続きを読んでの お楽しみ……。

続きを読む


UTF-8 の文字化け対策! 「美乳」ではなく「†(ダガー)」を使う

文字化けと対策

Fight Mojibake!!!
(これからも── Mojibake と戦い続ける)

「文字化け」しているウェブサイトは、最近では見なくなりました(と思いたい)。

大昔──、まだ人類が石のヤリでマンモスと戦っていたころは、何度も何度もウェブ・ブラウザの「文字コード」を手動で変更していましたよね。何もかもが懐かしい──。

石のヤリ:
Internet Explosion ──もとい Internet Explore 6
マンモス:
Yahoo!ジオシティーズ

──いや、両方とも世間では健在ですけれど。

ウェブ上の文章が異常な状態で表示される原因は、おもに「文字コード」の問題です。ソフトウエアと人間の両方が成長することで、じょじょに改善されているけれど──。

文字化け – Wikipedia

Unicode 版「美乳テーブル」

ところが、まだまだ文字は化ける!

そこで、UTF-8 時代の「おまじない」として、次のページで面白いアイデアを紹介しています。

Unicode 版美乳テーブルを探せ

これをちょっとだけ改変して、利用してみました。

続きを読む


livedoor Reader へ SSL 認証で自動ログインする方法

livedoor Reader 自動ログイン

livedoor Reader へ自動的にログインする HTML ファイルを作ったので、必要な方はご利用ください。

http://asiamoth.com/download/html/ldr_auto_login.html.txt

使い方は下の通りです。最後の呼び出した段階で、自動的に livedoor Reader が開きます。

  1. 適当な場所へ保存
  2. ファイルを開く
  3. *** で囲まれた場所を、自分のID とパスワードに書き換える
  4. 拡張子を「.html」へ変更
  5. ブラウザから呼び出す(ブックマークなど)
参考

下記のページを参考にして作成した。思ったより簡単で、ほかのページにもすぐ応用できる。

自動ログイン用HTML文書 – パソコン遊戯

また、id:amachang の影響でHTML5(の DOCTYPE 宣言)にした。まったく意味はないが……。

HTML5 の DOCTYPE 宣言って IE6 でも標準モードになるんですね – IT戦記

余談だけど Another HTML-lint は HTML5 に対応していない。対応が待たれるところだ。作者にビールをおごると良いかもしれない。

Another HTML-lint gateway

続きを読む


『Build Link』 次世代のリンクタグ作成用 Greasemonkey

Build Link

ブロガに とって、「リンク用 HTML タグを素早く作る」ための道具(手段)は、非常に大切です。料理人の調理道具と同じで、手になじむ便利な物を用意するのは、死活問題と言えます。

「そんな大げさな」──と、自分も半分くらい思っていますが(笑)。でも、リンク作成で時間が取られたら、記事を書く気が無くなるよね。

今回は、数あるリンク作成ツールの中から、リリースしたばかりの『Build Link』を紹介します。

使い方

Greasemonkey スクリプトなので、事前に拡張機能のインストールが必要です。

Greasemonkey – Mozilla Firefox まとめサイト

『Build Link』のインストールと使い方は、作者さんのページをご覧ください。

We Ain't Seen Nothin' Yet. : Build Link: 自由に形式を指定してリンクを作れるGreasemonkeyスクリプト We Ain’t Seen Nothin’ Yet. : Build Link: 自由に形式を指定してリンクを作れるGreasemonkeyスクリプト

特徴

なんと言っても、UI が気持ちいい! 次世代 Web アプリケーションの姿がコレ、と言っても過言ではない感じ。

文字列をドラッグするとアイコンが現れて、そこからリンクタグのコピーは もちろん、タグの編集や追加も出来ます。非常にシンプルで、直感的に使えるのが素晴らしい。

続きを読む


(X)HTML の仕様にイライラ(軽い気持ちで見よう)

(X)HTML の仕様に関する疑問

何度も書いているように、このブログの記事は、HTML を直接ガシガシ書いています。

そうやって、日常的に HTML を書いていると、だんだんと

「HTML が 第 2 の母国語」

みたいな、錯覚を覚え始めたり。──同じような事を、Web デザイナやプログラマも思うのだろうな、と想像します。

で、そこまで慣れ親しんでくると、ちょっとした細かい点が気になってきます。(X)HTML の仕様の中で、「何で こうなっているの?」と。

──と言っても、そんなに深い話ではなくて……。

日本語で言うところの、「はははははじょうぶだ」や「にわにはにわにわとりがいます」、「ぼくははてなならなんでもすきだ」などの、重複に感じるイライラさ、みたいな感じ。

今回は、XHTML1.0 Strict に話を限定して、「何で こう書くの?」とか「コレは何故ダメなの?」と言った話題を書いてみます。

例によって、仕様書も ろくに見ずに、テキトーに書いているので、間違っていたら済みません!(指摘よろ)

続きを読む


『LDR Full Feed』 XPath で全文取得するグリモン

LDR Full Feed

『LDR Full Feed』という、livedoor Reader 用の便利な Greasemonkey スクリプトを紹介します。

インストール

インストールは こちらから。

LDR Full Feed – Userscripts.org

これは何?

初登場したときの、ダイアリーのタイトルが全て物語っていますね。

Livedoor Readerで記事全文を表示するGreasemonkey Script – 枕をそばだてて聴く

ということで、LDR で閲覧中に G キィ(任意)を押すと、全文を取得するスクリプトです。

続きを読む


function()… というアクセスの原因→MyBloglog

アクセスログに「function()…」

これまた需要が少なそう(無さそう)な話題ですが……。

かなり以前から、アクセスログにおかしな文字列が残るようになりました。

真・対spam最終兵器『IPスパムフィルタ』 : 亜細亜ノ蛾

具体的に書くと、こんなアクセスです。

/mt/.../function(){return this.inject(...)} HTTP/1.1

function() を含むアクセスは、少なくとも MT ではありえないので、全て 403 Forbidden. を返すようにしていました。しかし、なにしろ一日に何百も同じようなアクセスがあるので、アクセスログのエラー項目が役に立たない……。

MT が出力している (X)HTML を調べても、どこにも function() なんてリンクは無いし、もしかして不正アクセス? と悩んでいました。

Firebug で解決

先日、ようやく Firebug で原因を突き止めました(約一年間、なにやってたんだろう)。

Firebug は JavaScript が生成した後の HTML を見られるので、おかしな記述が発見できました。Firebug と作者に感謝!(トレードマークを G と間違えてごめんね)

はたして、その原因とは?

──まぁ、タイトルでネタバレですが。

続きを読む


Google AdSense を XHTML valid に

Google AdSense チームからメール

予告: 今回の記事は広告スクリプトを object タグで読み込む方法 : 亜細亜ノ蛾 の宣伝です。

──少し前の話だけど、Google AdSense チームさまからお手紙(メール)が来た!

まぁ、ここでピンと来た人は多いと思うけど、決して、

「初めまして! いつも楽しみに見てます。ぜひとも相互リンクをお願いします」(?)

──みたいなことが書いてあるわけではなく(当たり前だ)、

(……)お客様のアカウントを確認しましたところ、Google のポリシーに準拠しない方法で Google 広告が表示されています。(……)

Google のプログラム ポリシーに記載されているとおり、どのような理由においても、AdSense 広告のコードを変更することは許可しておりません。 たとえば、Google 広告であることを隠すために広告の高さ変数を変更することはできません。(……)

この機会に、Google のプログラム ポリシー (https://www.google.com/adsense/policies) をご覧になり、お客様の他のすべてのページがこれらの基準に従っているかどうか確認することをお勧めします。(……)

72 時間以内に修正が加えられない場合、お客様のアカウントは引き続き有効ですが、該当するウェブ サイトへの広告配信を停止させていただきます。 なお、今後 Google のプログラム ポリシーに違反していることが確認された場合は、アカウントを無効にさせていただくこともありますのでご注意ください。

(抜粋、強調は asiamoth による)

──という内容だったので、あわててブログのテンプレートを見直したのでした。

その後、どうも全然見当違いのところを直していたことがわかり、Google AdSense チーム担当者様と何度かメールのやり取りをした結果、最終的に OK をもらったのでした。

広告スクリプトを object タグで読み込む

その過程で、以前書いた「広告スクリプトを object タグで読み込む方法」が問題ないかを質問しました。

広告スクリプトを object タグで読み込む方法 : 亜細亜ノ蛾

そしてその答えは──

(……)お問い合わせのサイトを確認いたしましたところ、現時点では、AdSenseの掲載にあたり問題がないことを確認いたしました。ただし、このご案内は以後の掲載において違反がないことを保証するものではございません。

Google のプログラム ポリシーに記載されているとおり、Google 広告の動作、ターゲットを変更することは許可しておりませんので、ご注意いただけますようお願いいたします。

ということで、あくまでも現時点では大丈夫なようです。

繰り返しになりますが、object タグで読み込むメリットは、

XHTML 1.0 Strict や XHTML 1.1 なページで、valid を保ったまま Google AdSense 広告を導入できる

というものです。

──その前に、このブログのテンプレートは「なんちゃって Valid」なのを直さないと……。