buena suerte!


HTML5 に関するメモなど。(2009.04)

2010年に勧告予定らしい HTML5 。勉強がてら彼方此方のぞいてみました。

リファレンス/参考記事など

やはりずいぶん変わっているようで覚えるのが大変そうだ……

とりあえず色々参考にして、ここのトップページを HTML5 化してみた。本文の中身は殆ど変わってませんし、リンクとかはそのままなので注意。
IE6 だと若干崩れてますが、一応 Validator 通しても問題無いようにしてみました。

Demo Site

HTML5 をテストしてみる

Read more...


livedoor クリップのクリップコメント表示について。

すっかりご無沙汰でした。まだしぶとく生きてます。
またまた大分離れていた間に、管理画面がおニューになってたり、機能が増えてたりと色々変わってますね。

今回は livedoor クリップ のクリップコメントをブログに設置する事についてちょろっと書いてみます。
えらい前のことなのでかなり今更ですが。

livedoor クリップ - ブログに「クリップコメント」を設置する方法
こちらの解説のとおり、個別記事の広告下あたりに設置してみました。
# 設置は簡単なのに、コメントついた記事なんぞ殆ど無いので探すほうが大変だった件。

ただ解説のとおりにすると、 URL#comment みたいなところに行くと、記事に付いてるはずのクリップコメントが表示されなかったりします。
コメント表示用のライブラリの中身のぞいてみるとページの URL を指定してやると良いみたいで、ライブドアブログなら、独自タグをこんな風に使うと問題なく動きます。

new ClipComments({
  url  : "<$ArticlePermalink$>",
  type : "simple"
}).load();

# ライブラリの131行目と165行目に記述ミスを発見。 height でないといけないところが heigth になってます。動作に問題ありませんが、念の為。
# 修正されました。

そのままでも良いんですが、ちょっとだけ機能追加したものを作ってみました。カスタム版限定で

  • タグとクリップした日時の表示。
  • アイコン(プロフィール画像)の大きさを選べる。
  • 最大表示件数の指定。
  • 改行に対応。(追記)

こんなことができます。

new ClipComments({
  url  : "<$ArticlePermalink$>",
  type : "custom",
  size : "small", //指定しない場合はsmall(16x16)。他はnormal(60x60)とlarge(160x160)
  max  : "15" //指定しない場合は10(仕様上最大20件まで)
}).load();

追記:2009.04.09
中の人修正おつでした。反応早い。この記事に記述ミスがあって人の事いえなかった。はずかしい。
あと、改行もきちんと出来た。↓のは対応してないけど。

追記:2009.04.12
やばい。エスケープするの忘れてた……

ついでにこんなのも作ってみた。
livedoor クリップのコメントを表示してみる
クリップテスト

久しぶりに触ったので、色々忘れまくりで大変だった……

関連記事リンク

Read more...


Firefox 3.0 導入私的メモ。

バージョン2.0リリースのときもそうでしたが、メジャーバージョンの出始めは対応していないアドオンやテーマも多く、いきなり新しい環境に移行するには心もとないので、とりあえず上書きしないで、共存させて3.0をインストールすることにしました。
あわせて新環境以降の際のメモなどを置いておきます。

こちらを参考に、文章中の1.5を2.0に、2.0を3.0におきかえて行いました。
旧バージョンの Firefox を同時起動させたい場合は

ここを参考にしてみてください。

これでうまく新しい環境になったので、ここから、旧プロファイル環境に近づけるために作業していきます。

まず、ブックマークを旧環境から新プロファイルへインポートします。
次にアドオンですが、公式でアドオン検索するとキーワードは合っているのに引っかからなかったりするので、Google 使ったほうがアドオンの個別のページに辿り着けるんでいいかも。

導入済みのアドオン

Tab Mix Plus は 開発バージョンがここにありました。
うちで試しに作った Safari View for Windows も問題なくインストールできて動いてます。

今まで使っていた、All-in-One GesturesCopy URL+ のかわりにそれぞれ、 FireGesturesMake Link を導入しています。
FireGestures は動作が軽いですし、 Make Link はより使いやすい感じですね。

3.0に対応していないけど、導入したいアドオンは以下。

続いて、設定などもまっさらの状態ですので、さらに少しでも前の環境に近づけるために……
まず保存してあるパスワードを移行させます。

こちらのアドオンを使って、旧プロファイルからパスワードを書き出して、新プロファイルへ読み込ませます。

新旧両方のプロファイルにアドオンをインストールしないと出来ません。また、パスワードの書き出しは CSV 形式で書き出してください。 XML 形式だと読み込めませんでした。
それでもいくつか読み込めないパスワードがあったので注意。(文字コードの所為かも?)

それから、旧プロファイルフォルダからクッキー用の cookies.txt と Stylish 用に stylish.rdf も、新プロファイルフォルダにコピーしておきました。
他にもアドオンの設定などで引き継ぎたいものがあれば、旧プロファイルフォルダからコピーしておいたほうがいいかも。

後は検索バーに検索エンジン追加するだけです。

ここから好きな物を選んで追加していきます。旧プロファイルの searchplugins フォルダをコピーでも可。

テーマはとりあえずデフォルトのままで使っていますが、これでかなり前の環境に近い環境でブラウジングできるようになりました。

最後に使用感ですが、2.0と比べると特に javascript を多く使っているところが速く感じられる気がします。よく使う Netvibes や Gmail なんかも以前よりもキビキビ動いてる感がありますし。
ただ、逆に重くなったページもあったようななかったような……

参考関連リンク