3億曲以上の楽曲が聴ける「Soundzit.com」
300 millions songs to listen instantly - Unlimited music - Soundzit.com （別窓）
Soundzit.comは3億曲以上の楽曲を聴くことができるサービスです。
どうやらYoutubeから音だけとってきているみたい。
トップの検索窓にアーティスト名や曲名を入力し、「Press to Play」ボタンをクリックすると上のようなリストが表示されます。
タイトル左の再生アイコンをクリックすると再生が始まり、その隣のCDのアイコンをクリックするとiTunesストアに繋がります。
公式サイトなどと違って、全部聴いた上で購入を考えられるのが魅力ですね。
こちらで聴くだけで完結する方が多いとは思いますけども。
また、再生アイコンをクリックすると埋め込みタグが表示されるので、外部サイトに貼り付けることも可能です。
楽曲制作をしてるブロガーさんなどにとってもなかなか使えるツールかもしれません。
Soundzit.comは3億曲以上の楽曲を聴くことができるサービスです。
どうやらYoutubeから音だけとってきているみたい。
トップの検索窓にアーティスト名や曲名を入力し、「Press to Play」ボタンをクリックすると上のようなリストが表示されます。
タイトル左の再生アイコンをクリックすると再生が始まり、その隣のCDのアイコンをクリックするとiTunesストアに繋がります。
公式サイトなどと違って、全部聴いた上で購入を考えられるのが魅力ですね。
こちらで聴くだけで完結する方が多いとは思いますけども。
また、再生アイコンをクリックすると埋め込みタグが表示されるので、外部サイトに貼り付けることも可能です。
楽曲制作をしてるブロガーさんなどにとってもなかなか使えるツールかもしれません。
コーディングをしながらプレビューもリファレンスも見られるHTMLエディタ
HTML Playground, html, css reference by example （別窓）
このHTML Playgroundでは、コーディングをしながらリファレンスを見ることが出来ます。
ページ左上にはタグの一覧が表示されており、選択すると右下にサンプルコードが表示されます。
また、右上にはそのタグの説明が、左下にはそのタグに付与できる属性・CSSのプロパティが表示されます。
左下に表示された属性とプロパティの一覧からは簡単にそれらの追加も可能なので、HTMLを知らなくてもリファレンスを確認しながら編集することが出来ます。
勿論右下に表示されたコードにおいて詳細を知りたいタグ・属性・プロパティを選択すれば、右上に説明文が表示されます。
マルチバイトに対応していないという欠点がありますが、それを除けばなかなか便利なツールだと思います。
このHTML Playgroundでは、コーディングをしながらリファレンスを見ることが出来ます。
ページ左上にはタグの一覧が表示されており、選択すると右下にサンプルコードが表示されます。
また、右上にはそのタグの説明が、左下にはそのタグに付与できる属性・CSSのプロパティが表示されます。
左下に表示された属性とプロパティの一覧からは簡単にそれらの追加も可能なので、HTMLを知らなくてもリファレンスを確認しながら編集することが出来ます。
勿論右下に表示されたコードにおいて詳細を知りたいタグ・属性・プロパティを選択すれば、右上に説明文が表示されます。
マルチバイトに対応していないという欠点がありますが、それを除けばなかなか便利なツールだと思います。
気になった記事まとめ09.02.27
技術関係で紹介することが特になかったので、久々の気になった記事まとめ。
Twitter小町ジェネレータ （別窓）
ちまたで話題になっている「Twitter中毒の夫に不快感」のような文章を作成するジェネレータ。仕事速い。
私が『Googleすごい！』と思える歴史のおさらい*ホームページを作る人のネタ帳 （別窓）
Googleについて簡潔にまとまってます。
とりあえずどんな会社か知りたい人にはいい記事かもしれません。
予言詩メーカー （別窓）
日本一のニートを目指すでお馴染み、phaさんによるジェネレータです。
名前、生年月日、占いたい月を入力するとそれっぽい予言をしてくれます。
ソニーがPSPの新色を発表、PS3ソフト「リトルビッグプラネット」などのPSP版も - GIGAZINE （別窓）
【2ch】ニュー速クオリティ:【MHP3?】カプコン、PSPでモンスターハンター新作展開【PSPのﾕｰｻﾞｰは楽しみにしててね】 （別窓）
ソニーが「PSP2」を今年の秋に発表か、UMDドライブは廃止？ - GIGAZINE （別窓）
PSPに関する嬉しい話題を三つ。
佐藤秀峰 on Web （別窓）
「ブラックジャックによろしく」や「海猿」で有名な漫画家、佐藤秀峰さんの公式サイト。
プロフィールは一見の価値ありです。
Twitter小町ジェネレータ （別窓）
ちまたで話題になっている「Twitter中毒の夫に不快感」のような文章を作成するジェネレータ。仕事速い。
私が『Googleすごい！』と思える歴史のおさらい*ホームページを作る人のネタ帳 （別窓）
Googleについて簡潔にまとまってます。
とりあえずどんな会社か知りたい人にはいい記事かもしれません。
予言詩メーカー （別窓）
日本一のニートを目指すでお馴染み、phaさんによるジェネレータです。
名前、生年月日、占いたい月を入力するとそれっぽい予言をしてくれます。
ソニーがPSPの新色を発表、PS3ソフト「リトルビッグプラネット」などのPSP版も - GIGAZINE （別窓）
【2ch】ニュー速クオリティ:【MHP3?】カプコン、PSPでモンスターハンター新作展開【PSPのﾕｰｻﾞｰは楽しみにしててね】 （別窓）
ソニーが「PSP2」を今年の秋に発表か、UMDドライブは廃止？ - GIGAZINE （別窓）
PSPに関する嬉しい話題を三つ。
佐藤秀峰 on Web （別窓）
「ブラックジャックによろしく」や「海猿」で有名な漫画家、佐藤秀峰さんの公式サイト。
プロフィールは一見の価値ありです。
「はてなブックマークニュース」オープン
はてなブックマークニュース （別窓）
はてながはてなブックマークに登録された記事の中から話題の情報・コラムを配信する「はてなブックマークニュース」をオープンしました。
現在あるコンテンツはヘッドライン、コラム、アンケートの三つ。詳細は以下に引用。
自分で人気エントリを見るのに比べると情報量は少ないものの、ある話題に関してまとまった情報を得られるので決してつまらないサービスではないと思います。
特にコラムは取り上げてほしいネタを募集しているようなので、今後良質なコンテンツになっていくんじゃないかなーと思います。
記者の募集とかはしないんでしょうか。
はてながはてなブックマークに登録された記事の中から話題の情報・コラムを配信する「はてなブックマークニュース」をオープンしました。
現在あるコンテンツはヘッドライン、コラム、アンケートの三つ。詳細は以下に引用。
・その日話題になっているニュースを伝える「ヘッドライン」今はオープンしたてなので記事が少ないですが、もうちょっと増えれば特に話題になっているものだけ知りたい方にはいいサービスかもしれませんね。
・はてなブックマークで話題になっている出来事を、少し長いスパンで捉えて伝える「コラム」
・特定の話題について、Q&Aサイト「人力検索はてな」のユーザー100人に聞いてみる「アンケート」
自分で人気エントリを見るのに比べると情報量は少ないものの、ある話題に関してまとまった情報を得られるので決してつまらないサービスではないと思います。
特にコラムは取り上げてほしいネタを募集しているようなので、今後良質なコンテンツになっていくんじゃないかなーと思います。
記者の募集とかはしないんでしょうか。
CSS3の5つのプロパティをjQueryで実現！
5 CSS3 Techniques For Major Browsers using the Power of jQuery | Noupe （別窓）
CSS3で実装予定の5つのプロパティをjQueryを用いてモダンブラウザに対して適用するテクニックが紹介されています。
具体的には以下の通り。
border-radiusはボーダーの角を丸めるプロパティです。
以下の二つを用いて実現することができます。
jQuery Rounded Corners with Canvas element （別窓）
jQuery Corners （別窓）
border-imageはボーダーに画像を指定するプロパティです。
以下のものを用いて実現することができます。
borderImage demonstration page （別窓）
Multiple Backgroundsは背景に複数の画像を用いることが出来るものです。
これまで背景画像はbackground-image:url(hoge)という記述でしたが、background-image:url(hoge),url(piyo),url(fuga)...といったようにカンマ区切りで複数の画像を重ねられるようになるようです。
以下のものを用いて実現することができます。
Protocoder - CSS Multiple Backgrounds / Background Layering with jQuery | CSS | Web Design （別窓）
text-shadow、box-shadowのような記述でテキストもしくはボックスに対して影をつけられるプロパティです。
以下の二つのもので実現することが出来ます。
Drop Shadow Examples （別窓）
Text-shadow in IE with jQuery • Javascript • Kilian Valkhof （別窓）
最後は要素に対して透明度を指定するもの。
これは以下のもので実現することが出来ます。
Gradient jQuery plugin | Programming blog （別窓）
CSS3で実装予定の5つのプロパティをjQueryを用いてモダンブラウザに対して適用するテクニックが紹介されています。
具体的には以下の通り。
Border Radius
CSS Backgrounds and Borders Module Level 3 #border-radius （別窓）border-radiusはボーダーの角を丸めるプロパティです。
以下の二つを用いて実現することができます。
jQuery Rounded Corners with Canvas element （別窓）
jQuery Corners （別窓）
Border Image
CSS Backgrounds and Borders Module Level 3 #the-border-image （別窓）border-imageはボーダーに画像を指定するプロパティです。
以下のものを用いて実現することができます。
borderImage demonstration page （別窓）
Multiple Backgrounds
CSS Backgrounds and Borders Module Level 3 #layering （別窓）Multiple Backgroundsは背景に複数の画像を用いることが出来るものです。
これまで背景画像はbackground-image:url(hoge)という記述でしたが、background-image:url(hoge),url(piyo),url(fuga)...といったようにカンマ区切りで複数の画像を重ねられるようになるようです。
以下のものを用いて実現することができます。
Protocoder - CSS Multiple Backgrounds / Background Layering with jQuery | CSS | Web Design （別窓）
Box Shadow and Text Shadow
CSS Backgrounds and Borders Module Level 3 #the-box-shadow （別窓）text-shadow、box-shadowのような記述でテキストもしくはボックスに対して影をつけられるプロパティです。
以下の二つのもので実現することが出来ます。
Drop Shadow Examples （別窓）
Text-shadow in IE with jQuery • Javascript • Kilian Valkhof （別窓）
Transparency & Opacity
Zen Elements Blog | CSS3 Opacity （別窓）最後は要素に対して透明度を指定するもの。
これは以下のもので実現することが出来ます。
Gradient jQuery plugin | Programming blog （別窓）
Twitterのテーマをブラウザ上で作成！「Free Twitter Designer」
Free Twitter Designer （別窓）
FreeTwitterDesignerでは、ブラウザ上で簡単にTwitterのテーマを作成することができます。
予め用意された5つのテーマもしくは、デフォルトのテーマをすると以下のような画面が表示されます。
Twitterでできる背景、文字、リンク色の変更は勿論のこと、テキスト、画像、そして以下のシェイプの挿入も可能です。
挿入したものは以下のようなインターフェースで、不透明度・ブレンドモード・スタイルの変更が可能です。
フォントやシェイプを挿入した場合はカラーの変更も出来ます。
画像においては、透過GIF、透過PNGにも対応しているようです。
気に入ったテーマが作成できたら、「GENERATE IMAGE」ボタンをクリックすると背景画像が生成されます。
設定した背景色などもテキストで一覧出力されるので、あとはコピペするだけで完了です。
今使っているテーマが物足りないと感じている方は利用してみてはいかがでしょうか。
FreeTwitterDesignerでは、ブラウザ上で簡単にTwitterのテーマを作成することができます。
予め用意された5つのテーマもしくは、デフォルトのテーマをすると以下のような画面が表示されます。
Twitterでできる背景、文字、リンク色の変更は勿論のこと、テキスト、画像、そして以下のシェイプの挿入も可能です。
挿入したものは以下のようなインターフェースで、不透明度・ブレンドモード・スタイルの変更が可能です。
フォントやシェイプを挿入した場合はカラーの変更も出来ます。
画像においては、透過GIF、透過PNGにも対応しているようです。
気に入ったテーマが作成できたら、「GENERATE IMAGE」ボタンをクリックすると背景画像が生成されます。
設定した背景色などもテキストで一覧出力されるので、あとはコピペするだけで完了です。
今使っているテーマが物足りないと感じている方は利用してみてはいかがでしょうか。
ブックマークレットから起動するCSSデバッグツール「YAML Debug」
YAML Debug - an assistive code diagnostic tool for web developers （別窓）
YAML Debugはブックマークレットから起動出来る手軽なCSSデバッグツールです。
インターフェースはこんな感じ。
このようにタグを表示したり
div要素を表示してレイアウトの階層を把握したり
グリッドを表示したりできます。
他にもaltが記述されてない要素や空の要素をハイライトしたりなんてことができます。
「Stylesheets」タブでは読み込まれているCSSが一覧表示され、CSSを無効にしたりコードを見たりバリデータに通したりなんてこともできます。
自分のサイトのデバッグはもちろん、他のサイトがどのように作られているかを調べるのにも使えそうですね。
YAML Debugはブックマークレットから起動出来る手軽なCSSデバッグツールです。
インターフェースはこんな感じ。
このようにタグを表示したり
div要素を表示してレイアウトの階層を把握したり
グリッドを表示したりできます。
他にもaltが記述されてない要素や空の要素をハイライトしたりなんてことができます。
「Stylesheets」タブでは読み込まれているCSSが一覧表示され、CSSを無効にしたりコードを見たりバリデータに通したりなんてこともできます。
自分のサイトのデバッグはもちろん、他のサイトがどのように作られているかを調べるのにも使えそうですね。
CSSはこう書け！「CSS Standards & Best Practices」
CSS Standards & Best Practices | Dezinerfolio （別窓）
CSSを記述するにあたって習慣づけるべきことが紹介されています。
具体的な適当翻訳は以下の通り。
各項目における画像は上のリンクから元の記事をご覧下さい。
こちらにはクレジット、ファイルのバージョン、サイトのレイアウトの種類（カラム数やサイズ）などを記述します。
CSSをただただ適当に書くだけでは、どこに何をどこに書いたかがわからなくなってしまいます。
そのため、予め索引をつくり、各要素にユニークな名前を定義しておきます。
元の記事ではアンダーバーを二つつけているのが分かると思います。
これにより、索引で定義したユニークな名前を検索することですぐに目的のコードに辿り付けるようになるわけです。
噛み砕いて言えば、無駄にクラスを付けるなってことですね。
元の記事の画像で言えば、ulの親要素にcontentというクラスが割り振られているのでliはおろか、ulにもクラスを割り振る必要がありません。
クラスを付けるときは、本当にそのクラスが必要かどうかをよく検討しましょう。
画像にあるように「div1」や「block」なんて名前をつけてしまうと、あとから見たときにそれらが何のために作ったものかが分からなくなってしまいます。
しっかりと意味が伝わる名前をつけることで、混乱を防ぐことが出来ます。
CSSにはpadding、margin、backgroundなど、例えば「padding-left」のように細かい指定をすることが出来るものがあります。
左だけpaddingを指定したい、というケースなら問題はありませんが、右にも、上にもとなってくると、コードが無駄に長くなってしまいます。
まとめられるものはまとめてしまいましょう。
一言で言うと、複数の画像を一つにまとめてHTTPリクエストを減らすことでパフォーマンスを向上しようよ、という感じです。
詳しくは以下の記事を見ていただければと思います。
動画で学ぶCSS Sprite｜WEB TANOSHII!! （別窓）
CSSは記述方法によってSpecificity（詳細度）という値が変わり、そのセレクタの優先順位が変動します。
これに関しては割と複雑なので以下のページが参考になるかと思います。
CSSにおけるセレクタの優先順位 - reflux flow （別窓）
ブラウザによってCSSのデフォルトのスタイルが異なります。
そのためそれぞれに自身の定義したプロパティを付与してやることであらゆるブラウザにおいて、自分の基準からサイトを構築できるよ、的な話だと思います。多分。
ユニバーサルリセットに×がついてるのは意図しない部分に適用されるとかそのへんでしょうか。
ごめんなさい英語力不足です
リセットCSSは様々な方が作っているので、それを利用するのも一つの手ですね。
元の記事でもいくつか紹介されていますので、そちらもあわせてご覧下さい。
ブラウザによってCSSの解釈は異なります。
IEとかIEとかIEとかがその代表ですね。
そのため、あるターゲットブラウザに対してのみ適用できるCSSハックを使用する必要があるわけです。
著者は「fuck-ie.css」なんてものを作ってるそうです。
ついでにCSSのハックの参考サイトをいくつか。
セレクタでのCSSハック一覧表｜web bibo （別窓）
IE8とOpera9.5を考慮したCSSハック （別窓）
MOONGIFT: » どのブラウザでどのCSSハックが使えるか「CSS Selector Shell」:オープンソースを毎日紹介 （別窓）
CSSを書いている方にはお馴染みだと思いますが、W3CのバリデータはCSSのエラーの有無を検証する非常に優れたツールです。
コーディングが終わったら、是非これでチェックするようにしましょう。
CSSを記述するにあたって習慣づけるべきことが紹介されています。
具体的な適当翻訳は以下の通り。
各項目における画像は上のリンクから元の記事をご覧下さい。
Index
まずはインデックスの作成です。こちらにはクレジット、ファイルのバージョン、サイトのレイアウトの種類（カラム数やサイズ）などを記述します。
Anchors
次にアンカーです。CSSをただただ適当に書くだけでは、どこに何をどこに書いたかがわからなくなってしまいます。
そのため、予め索引をつくり、各要素にユニークな名前を定義しておきます。
元の記事ではアンダーバーを二つつけているのが分かると思います。
これにより、索引で定義したユニークな名前を検索することですぐに目的のコードに辿り付けるようになるわけです。
Classitis
次はクラス付けです。噛み砕いて言えば、無駄にクラスを付けるなってことですね。
元の記事の画像で言えば、ulの親要素にcontentというクラスが割り振られているのでliはおろか、ulにもクラスを割り振る必要がありません。
クラスを付けるときは、本当にそのクラスが必要かどうかをよく検討しましょう。
Naming Convention
次はクラスやIDの名前に関するものです。画像にあるように「div1」や「block」なんて名前をつけてしまうと、あとから見たときにそれらが何のために作ったものかが分からなくなってしまいます。
しっかりと意味が伝わる名前をつけることで、混乱を防ぐことが出来ます。
Shorthand
次はCSSのプロパティの記述に関して。CSSにはpadding、margin、backgroundなど、例えば「padding-left」のように細かい指定をすることが出来るものがあります。
左だけpaddingを指定したい、というケースなら問題はありませんが、右にも、上にもとなってくると、コードが無駄に長くなってしまいます。
まとめられるものはまとめてしまいましょう。
Sprites
このブログでも何度か紹介しているCSS Spritesです。一言で言うと、複数の画像を一つにまとめてHTTPリクエストを減らすことでパフォーマンスを向上しようよ、という感じです。
詳しくは以下の記事を見ていただければと思います。
動画で学ぶCSS Sprite｜WEB TANOSHII!! （別窓）
Specificity
お次はCSSの詳細度に関するもの。CSSは記述方法によってSpecificity（詳細度）という値が変わり、そのセレクタの優先順位が変動します。
これに関しては割と複雑なので以下のページが参考になるかと思います。
CSSにおけるセレクタの優先順位 - reflux flow （別窓）
Resets
次はCSSのリセットに関して。ブラウザによってCSSのデフォルトのスタイルが異なります。
そのためそれぞれに自身の定義したプロパティを付与してやることであらゆるブラウザにおいて、自分の基準からサイトを構築できるよ、的な話だと思います。多分。
ユニバーサルリセットに×がついてるのは意図しない部分に適用されるとかそのへんでしょうか。
ごめんなさい英語力不足です
リセットCSSは様々な方が作っているので、それを利用するのも一つの手ですね。
元の記事でもいくつか紹介されていますので、そちらもあわせてご覧下さい。
Hacks
気を取り直して次はCSSハックについて。ブラウザによってCSSの解釈は異なります。
IEとかIEとかIEとかがその代表ですね。
そのため、あるターゲットブラウザに対してのみ適用できるCSSハックを使用する必要があるわけです。
著者は「fuck-ie.css」なんてものを作ってるそうです。
ついでにCSSのハックの参考サイトをいくつか。
セレクタでのCSSハック一覧表｜web bibo （別窓）
IE8とOpera9.5を考慮したCSSハック （別窓）
MOONGIFT: » どのブラウザでどのCSSハックが使えるか「CSS Selector Shell」:オープンソースを毎日紹介 （別窓）
Validation
そして最後はバリデーションです。CSSを書いている方にはお馴染みだと思いますが、W3CのバリデータはCSSのエラーの有無を検証する非常に優れたツールです。
コーディングが終わったら、是非これでチェックするようにしましょう。
アメーバピグの隠しエリア？
適当にいじってたら変な挙動をしたのでちょっとメモ。
まずは右クリックで下のメニューを呼び出し、一番上の項目をクリック。
するとアメーバピグのスタッフロールが流れ始めます。
このまましばらく待ちます。
するとこのようなパックマンに限りなく近い何かのアイコンが最後に現れるので、これをクリックします。
すると読み込みが実行され…
このようなウィンドウが表示されます。
エリアみつかんねーよ！と言われてしまい、実際にエリア移動は行われません。
secretとかdevとか書いてあるのでデバッグ用でしょうか。
このようにまだ一般ユーザーが移動できない新しいエリアも追加されているようなので、これからの動きに期待です。
21時半現在、代々木公園東口と西口は以下のようにマップが未完成ですが一応入れる様子。
他のマップも順次移動可能になると思われます。
開発チームの皆様遅くまでお疲れ様です。
ついでに知ってる人にとってはどうでもよさげな微妙な小技を。
一番上の画像で「拡大する」、「縮小する」という項目がありましたが、縮小を使うと以下のようにエリア全体が見渡せてちょっとだけ便利です。
スクリーンショット撮影時なんかには拡大も使えるかもしれませんね。
あとは家具でスピーカーがあるのでマイルームみたいに音楽が流せてもいいかなとか。
そんなことを思ったり思わなかったりしました。
まずは右クリックで下のメニューを呼び出し、一番上の項目をクリック。
するとアメーバピグのスタッフロールが流れ始めます。
このまましばらく待ちます。
するとこのようなパックマンに限りなく近い何かのアイコンが最後に現れるので、これをクリックします。
すると読み込みが実行され…
このようなウィンドウが表示されます。
エリアみつかんねーよ！と言われてしまい、実際にエリア移動は行われません。
secretとかdevとか書いてあるのでデバッグ用でしょうか。
このようにまだ一般ユーザーが移動できない新しいエリアも追加されているようなので、これからの動きに期待です。
21時半現在、代々木公園東口と西口は以下のようにマップが未完成ですが一応入れる様子。
他のマップも順次移動可能になると思われます。
開発チームの皆様遅くまでお疲れ様です。
ついでに知ってる人にとってはどうでもよさげな微妙な小技を。
一番上の画像で「拡大する」、「縮小する」という項目がありましたが、縮小を使うと以下のようにエリア全体が見渡せてちょっとだけ便利です。
スクリーンショット撮影時なんかには拡大も使えるかもしれませんね。
ついでにさらに触ってて思ったこととか
アメーバビジョンと連携して仮想デジタルサイネージ的なことができるかなとか。あとは家具でスピーカーがあるのでマイルームみたいに音楽が流せてもいいかなとか。
そんなことを思ったり思わなかったりしました。