2011年07月26日

jsdo.itにリングリストプラグインを投稿してみました

jsdo.itにリングリストプラグインを投稿してみました。
赤いPlayボタンを押すと、実際にリングリストプラグインが動きます。
Stopボタンを押すとコードが表示されます。

これで人気爆発満員御礼になるはず!
なるといいな。
なるかもしれないな。


リング状のリスト - jsdo.it - share JavaScript, HTML5 and CSS






タグ:RingList jquery
posted by ぺるたご at 23:10| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

HTML5で強調っぽい意味を表すタグ(strong、em、i、b、mark)

まえがき


今回のネタは、HTML5で強調っぽい意味を表すタグについてです。
HTML5になって意味が変わったタグもありますので、「強調はstrongタグでオールOK!」とか思ってると罠に嵌ります。
W3Cが定義したタグの仕様(原文+私の劣悪日本語訳)と、その使いどころを中心に書いてみます。



strongタグ


HTML4の頃は「強い強調」を表していたstrong。
HTML5になって、「強調」の意味はなくなり「重要性」を表すことになりました。

W3Cのサイトから引用

The strong element represents strong importance for its contents.
The relative level of importance of a piece of content is given by its number of ancestor strong elements; each strong element increases the importance of its contents.
Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.

strongタグは重要性を表すよ。
strongタグを入れ子にすると重要度がアップするよ。
strongタグで重要度を変えても文章の意味は変わらないよ。

特に読者に伝えたい部分に適用します。
使いどころとしては、エラーメッセージや警告文などでしょうか。
ブラウザでの見た目は太文字になります。



emタグ


「強調」を表します。

W3Cのサイトから引用

The em element represents stress emphasis of its contents.
The level of emphasis that a particular piece of content has is given by its number of ancestor em elements.
The placement of emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which emphasis is used in this way depends on the language.

emタグは強調を表すよ。
emタグを入れ子にすると強調度がアップするよ。
emタグの位置によって文章の意味が変わることがあるけど、その辺は言語に依存してるよ。

文章を口頭で話したときに強く発音する部分に適用します。
音声ブラウザだと実際に強く発音されるようです。
使いどころは、一言では説明しづらいです。
例えば以下の文章で「」の部分を強調したときのニュアンスに違いが出ます。

「猫」は可愛い動物です。
(他の動物に比べて、特に猫に萌える感じ)

猫は「可愛い」動物です。
(「猫は不細工だ」と言ってる相手に反論する感じ)

猫は可愛い「動物」です。
(「猫って植物?」とか言ってる愚者に真実を教える感じ)



iタグ


HTML4では見た目としてのイタリックを表していましたが、HTML5では「イタリックで表しそうなもの」という意味になりました。

W3Cのサイトから引用

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.

iタグは声やムードを表すテキストの範囲や、通常の文から区別したい範囲を表すよ。

iタグが表すのは具体的に、専門用語、別言語の慣用句、心の声、船の名前、などです。
日本語ではそもそもイタリックという習慣がないので、無理して使う必要はないかもしれません。
ブラウザでの見た目はイタリックになります。



bタグ


HTML4では見た目としての太文字を表していました。
HTML5では、前後のコンテンツから区別したいテキストを表します。
ただし、特に重要性を表しはしません。

W3Cのサイトから引用

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

bタグは特に重要性を表すことなく注意を引きたいときに使うよ。

bタグが表すのは具体的に、文書概要のキーワード、レビュー内の製品名、プログラムの予約語(?)、記事の前置き部文、などです。
bタグはあまり積極的に使うものではなく、他のタグでちょうど良いものがない場合に使うようです。
ブラウザでの見た目は太文字になります。



mark


HTML5で追加された新しいタグです。

W3Cのサイトから引用

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.

原文を読んでもいまいちよくわかりません。
使いどころを挙げるなら「検索結果のハイライト」でしょう。



あとがき


HTML5では、厳密な文書構造を求められます。
きちんとタグの意味を理解してマークアップしたいものです(主に自戒的な意味で)。







タグ:HTML5
posted by ぺるたご at 03:55| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2011年07月18日

SleipnirからChromeに引越し

まえがき


2011/08/29 マウスジェスチャーについて追記

今回のネタはSleipnirからChromeへの移行です。
今まではSleipnirメイン、非常用にChromeを使い分けていたのですが、これをChromeに統一します。
で、移行の際の作業、両者の比較などを記すことにします。


以降、「拡張」という単語が頻出しますが、これはChromeのプラグインのことです。
これは公式の呼び方です。
Extensionを日本語訳したんでしょうけど、ちょっと違和感があります。




移行の理由


SleipnirのエンジンがTrident(IEのエンジン)だから。
一応、プラグインでGecko(FireFoxのエンジン)に切り替えられますが、このプラグインは既に開発が止まっているみたいです。
ChromeやFireFoxで見てね、ってサイトが増えてきた気がします。
IE9になってもHTML5やCSS3への対応がいまいちですからね。
描画速度についてはIE9でかなりマシになりました。
それでもChromeの方が少し速いか?




RSSリーダー


SleipnirのHeadline-Reader Pluginを使っているのですが、私はこれにどっぷり浸かっています。
こいつはフィード一覧を別ペインに、常に表示しておくことができます。
高速流し読みにすこぶる便利。

それっぽい拡張がないのでGoogle Readerを使うことにしました。
Google ReaderはいわゆるWebアプリなので、レスポンスに一抹の不安がありましたが、この点は大丈夫そう。
ついでにGoogle reader RSS Subscriberという拡張を入れました。
ボタン一発でGoogle Readerにフィードを登録できるプラグインです。
便利といえば便利ですが、何だか釈然としません・・・。
「あなたのために、あなたに言われる前に用意しておきました」と言ってくれるアプリが好きなのです。

フィード自体の移行は簡単でした。
どちらもOPML形式でインポート・エクスポートできます。
インポートしたら何故かGoogle Readerが勝手にソートしやがったので、手動で並べ替えてとりあえずはOKです。

Google reader RSS Subscriber




マウスジェスチャー


2011/08/29 追記
2011/08/29現在、Smooth GesturesはChrome ウェブストアから削除されています。
どうも、スパイウェアだったらしいです。
参考ページはこちら。

岩澤英治 - Google+ - ChromeでSmooth Gesturesという拡張機能を使っていたのですが、こいつアクセスしたページを…

【スパイウェア】Google ChromeでSmooth Gesturesというマウスジェスチャー拡張機能を使っているとページ読み込みが終わらない件



突然ですが、「リンクを別タブで開く」というのはマウスのホイールクリックに割り当てられています。
どのブラウザもデフォルトで大概そうなってます。
で、Chromeでは別タブで開いた後に、別タブがアクティブになってくれないのです。
リンク先を見たいのにリンク先が目の前にないってどういうこと?
怒り心頭です。

Smooth Gesturesという拡張でこれを解決できました。
それ以外にもいろいろ設定できてわりと良さげ。
ユーザー数がダントツなので、マウスジェスチャーはこれ一択なのでしょう。
Sleipnirと比べても特に不満はありません。

Smooth Gestures




検索エンジン


通常、検索するときはGoogleで検索しますが、それ以外で検索したい場合もあります。
Yahooで検索、Youtubeで検索、Wikipediaで検索、辞書サイトで英単語の意味を調べる、といった状況です。
Sleipnirでは「何で検索するか」をコンボボックスから選択できます。
また、検索エンジンのリストはユーザーが管理できます。

Chromeでも似たようなことはできますが、「コンボボックスから選択」ってのができないんですね。
これは仕方ないかな。
Chromeでの検索エンジンの設定方法はこちら




ロボフォーム


パスワードを管理するアプリです。
Sleipnirをインストールしたときに付属してたので使ってました。
RoboFormの拡張があるのでインストール。
特に問題ありません。

蛇足ですが、ロボフォームって余計な機能が付きすぎてる気がします。
タスクトレイにあるアイコンを触ると「検索ボックス」なるものが出てきたり。
ここからGoogleで検索できますよ、ってことだが・・・。




はてなブックマーク


はてなブックマークの公式拡張です。
ブックマーク数表示、ブックマーク登録、コメント表示、などの機能があります。
Sleipnir版と概ね同じ感じです。

はてなブックマーク GoogleChrome 拡張




Irvine


古き良き日のダウンロード支援ツールです。
今は回線が速くなったのでほとんど使う機会はありません。
ですが「ページ内の画像をまとめてダウンロードする」みたいな状況では便利です。
IrvineはIEのコンテキストメニューに統合できます。
つまり、Sleipnirで右クリックするとIrvineのメニューが出てくるんですね。

Chromeでも似たようなことができないかなと思ってたら、拡張がありました。
でも何故か右クリックからだとちゃんと動かないみたいです。
「左クリックしながら右クリック」でそれっぽく動くので問題ないといえば問題ないかも。

IrvineApi extension




その他


Sleipnirからの引越しとは関係ありませんが、AutoPatchWorkという拡張がなかなか良いです。
検索結果やニュース記事など、1ページに収まらないのでページが分割されてるのはよくあること。
AutoPatchWorkはこれらを1ページに合体してくれる拡張です。
具体的には、文章を読み進めて下にスクロールしていくと、いつの間にか次のページの内容が表示されています。
「次ページ」ボタンをクリックしなくてもいいので快適ですね。

ただ、あらゆるページを合体できるわけではありません。
合体できるページはホワイトリスト方式で管理されています。
リストにないサイトではページ合体できません。
有名なサイトは網羅されてるので十分実用的です。

AutoPatchWork




タグ:CHROME
posted by ぺるたご at 19:20| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。