アメーバピグを体験してみた
アメーバピグ（別窓）
アメーバピグはサイバーエージェントによる新たな仮想空間サービスです。
自分の分身である「ピグ」を作成し、着せ替え、部屋の模様替え、実在する街をモチーフにした世界でのコミュニケーションなどができます。
とりあえずざっと触ってみて覚えておいたほうがよさげなシステムは以下の通り。
マップでピグをクリックすると、以下のようなウィンドウが表示されます。
ここでグッピグボタンを押すことで実行することができます。
このログはグッピグ帳に保存されます。
また、誰かにグッピグされるとアメが1つもらえます。
ただしグッピグの上限は1日1回となっています。
グッピグで増えるアメは1日20個、他は1個までのようです。
このアメはスクラッチに利用することができます。
アメ20個につき1回スクラッチを利用することができます。
スクラッチは1日に1回利用可能回数が増えるシステムになっているようです。
しかし、引換券を使えばアメゴールドなしにアイテムを購入することが出来ます。
ただし全部のアイテムが引換券で買えるかというとそうではなく、中にはアメゴールド限定のアイテムもあります。商売上手ですね。
尚、初ログイン時にガイドを最後まで聞くと引換券を5個貰うことが出来るので、最後まで聞いておくことをオススメします。それ以外ではスクラッチなどで増えるようです。
登録することで、そのピグがオンラインであればその場所に移動できるワープ機能が利用できるようになります。
また、自分の家には入場制限をかけることができるので、ピグとも限定という制限をかけたピグの家に入れるようになります。
とりあえず様子見、という感じなのでしょうけども30人はちょっと少なすぎるように思いました。
それとショップですが、服装は試着があったほうがいいかなーとか。
あとはバグと仕様漏れっぽいのがいくつか。
ただ、気になった人のブログにすぐ飛べるというのはブログサービスを持っているアメーバの利点を上手く利用している部分ではあるかもしれません。
あとは自分のピグをアメーバのプロフィール画像に設定できたりと、既存サービスとの連携に力を入れてることが伺えます。
アメーバ検定とも連携しているようですが、これはとってつけたような感じが否めないところではあります。
他のサービスとも上手く連携していけば成功の可能性は十分にあると思うので、頑張ってほしいところです。
そういえばアメゴールドのページにはまだピグが追加されてませんが、これはまだ様子見なのか忘れてるだけなのか。
アメーバピグはサイバーエージェントによる新たな仮想空間サービスです。
自分の分身である「ピグ」を作成し、着せ替え、部屋の模様替え、実在する街をモチーフにした世界でのコミュニケーションなどができます。
とりあえずざっと触ってみて覚えておいたほうがよさげなシステムは以下の通り。
グッピグ
相手のピグを褒める機能だそうです。マップでピグをクリックすると、以下のようなウィンドウが表示されます。
ここでグッピグボタンを押すことで実行することができます。
このログはグッピグ帳に保存されます。
また、誰かにグッピグされるとアメが1つもらえます。
ただしグッピグの上限は1日1回となっています。
アメとスクラッチ
アメはログイン時、グッピグされたとき、着せ替えをしたときに増えます。グッピグで増えるアメは1日20個、他は1個までのようです。
このアメはスクラッチに利用することができます。
アメ20個につき1回スクラッチを利用することができます。
スクラッチは1日に1回利用可能回数が増えるシステムになっているようです。
引換券
ショップでアイテムを購入するとき、アメゴールドが必要になります。しかし、引換券を使えばアメゴールドなしにアイテムを購入することが出来ます。
ただし全部のアイテムが引換券で買えるかというとそうではなく、中にはアメゴールド限定のアイテムもあります。商売上手ですね。
尚、初ログイン時にガイドを最後まで聞くと引換券を5個貰うことが出来るので、最後まで聞いておくことをオススメします。それ以外ではスクラッチなどで増えるようです。
ピグとも
マイミクとかアメンバーみたいなものだと思えばいいと思います。登録することで、そのピグがオンラインであればその場所に移動できるワープ機能が利用できるようになります。
また、自分の家には入場制限をかけることができるので、ピグとも限定という制限をかけたピグの家に入れるようになります。
気になったこととか
各マップの滞在者上限がちょっと少なすぎるように感じます。とりあえず様子見、という感じなのでしょうけども30人はちょっと少なすぎるように思いました。
それとショップですが、服装は試着があったほうがいいかなーとか。
あとはバグと仕様漏れっぽいのがいくつか。
- キャラクター作成においてアクセサリ装備時、服や靴の着せ替えでアクセサリが解除される
- おでかけで行きたい場所を選択したタイミングで満員になった場合、部屋が非表示になる。
この状態でもう一度同じ行動をすると自分の部屋が表示される - 満員で入れなかった場合、一旦自室などの別のエリアに移動しないとその選択したエリアに入れない
おわり
ざっと触ってみた感じ、特にこれといって目を見張るような個性は見当たりませんでした。ただ、気になった人のブログにすぐ飛べるというのはブログサービスを持っているアメーバの利点を上手く利用している部分ではあるかもしれません。
あとは自分のピグをアメーバのプロフィール画像に設定できたりと、既存サービスとの連携に力を入れてることが伺えます。
アメーバ検定とも連携しているようですが、これはとってつけたような感じが否めないところではあります。
他のサービスとも上手く連携していけば成功の可能性は十分にあると思うので、頑張ってほしいところです。
そういえばアメゴールドのページにはまだピグが追加されてませんが、これはまだ様子見なのか忘れてるだけなのか。
フリーとは思えないハイクオリティなフォント104選
104 Free Fonts for Web Designers and Logo Artists | instantShift （別窓）
こちらではWebデザイナー向けのとてもフリーとは思えないハイクオリティなフォントが104点紹介されています。
Free Font Download - Athena Unicode font | UrbanFonts.com （別窓）
このようなスタンダードなものは勿論
ABC - Font Typeface Version 2 by ~MyFox on deviantART （別窓）
このようなキュートなもの
trashco.ttf-download by ~loosy on deviantART （別窓）
さらにはこのようなユニークなフォントまで、幅広く紹介されています。
本当にフリーであることを疑ってしまうようなハイクオリティなものばかりです。
詳細なライセンスにつきましてはそれぞれのページをご覧下さい。
また、記事の最後にはフリーフォント集のサイトもいくつか紹介されておりますので、この記事で自分好みのものが見つからなかった方はそちらも合わせてご覧になってみてはいかがでしょうか。
こちらではWebデザイナー向けのとてもフリーとは思えないハイクオリティなフォントが104点紹介されています。
Free Font Download - Athena Unicode font | UrbanFonts.com （別窓）
このようなスタンダードなものは勿論
ABC - Font Typeface Version 2 by ~MyFox on deviantART （別窓）
このようなキュートなもの
trashco.ttf-download by ~loosy on deviantART （別窓）
さらにはこのようなユニークなフォントまで、幅広く紹介されています。
本当にフリーであることを疑ってしまうようなハイクオリティなものばかりです。
詳細なライセンスにつきましてはそれぞれのページをご覧下さい。
また、記事の最後にはフリーフォント集のサイトもいくつか紹介されておりますので、この記事で自分好みのものが見つからなかった方はそちらも合わせてご覧になってみてはいかがでしょうか。
小粋なナビゲーションメニューを実装するjQueryプラグイン25選
25 jQuery Plugins for Navigation （別窓）
ナビゲーション関係のjQueryプラグインが25点紹介されています。
その中から3つだけ紹介。
Bullet List Accordion Menu （別窓）
見た目はシンプルなアコーディオンメニュー。
パラメータで開くコンテンツを指定できるようです。
mb.ideas.repository - web-design & design （別窓）
ツリー構造メニュー＋右クリックでポップアップするコンテキストメニュー。
jqDock : a jQuery plugin （別窓）
MacOSのDock風メニュー。
jQueryを使えばこのような高機能なナビゲーションメニューも簡単に実現することができます。
ナビゲーションメニューに一工夫加えたいという方はjQueryの利用を検討してみてはいかがでしょうか。
ナビゲーション関係のjQueryプラグインが25点紹介されています。
その中から3つだけ紹介。
Bullet List Accordion Menu （別窓）
見た目はシンプルなアコーディオンメニュー。
パラメータで開くコンテンツを指定できるようです。
mb.ideas.repository - web-design & design （別窓）
ツリー構造メニュー＋右クリックでポップアップするコンテキストメニュー。
jqDock : a jQuery plugin （別窓）
MacOSのDock風メニュー。
jQueryを使えばこのような高機能なナビゲーションメニューも簡単に実現することができます。
ナビゲーションメニューに一工夫加えたいという方はjQueryの利用を検討してみてはいかがでしょうか。
Webデザイナーのための使えるサービス＋ツール集
40+ Useful & Handy Web Designer’s Web Services & Tools （別窓）
WebデザイナーのためのWebサービス・ツール集です。
「BG Patterns」のようなデザインに関するものは勿論、「Are My Sites Up?」のようなサイト管理に関するもの、果てはTwitter用クライアントである「TweetDeck」まで紹介されています。
WebデザイナーのためのWebサービス・ツール集です。
「BG Patterns」のようなデザインに関するものは勿論、「Are My Sites Up?」のようなサイト管理に関するもの、果てはTwitter用クライアントである「TweetDeck」まで紹介されています。
あなたのサイトを今風にするジェネレータ集
25+ Web 2.0 Generators to rescue ( Be Lazy) | Desizn Tech （別窓）
あなたのサイトを今風にするためのジェネレータが29個紹介されています。
その中から3つだけ紹介。
Stripe Generator - ajax diagonal stripes background designer （別窓）
シームレスなストライプ画像を生成するジェネレータ。
色、太さ、角度などを変更することができます。
Buttonator （別窓）
ボタン画像生成ジェネレータ。
マルチバイト文字には対応していないものの、ドロップシャドウやロールオーバーなど幅広いカスタマイズが可能です。
Navigation Tab Menu Generator CSS - Tabs Generator （別窓）
タブ画像生成ジェネレータ。
角の丸み、タブの方向などの変更が可能です。
記事タイトルにWeb2.0と書かれているように、最近ではあまり見なくなった（ような気がする）バッジのジェネレータも含まれています。
しかし上で紹介したような1年以上前に作られたにもかかわらず、まだまだ使えるジェネレータも数多く存在します。
画像の制作スキルがない方や、それを手軽に済ませたい方には非常に使える記事ではないでしょうか。
あなたのサイトを今風にするためのジェネレータが29個紹介されています。
その中から3つだけ紹介。
Stripe Generator - ajax diagonal stripes background designer （別窓）
シームレスなストライプ画像を生成するジェネレータ。
色、太さ、角度などを変更することができます。
Buttonator （別窓）
ボタン画像生成ジェネレータ。
マルチバイト文字には対応していないものの、ドロップシャドウやロールオーバーなど幅広いカスタマイズが可能です。
Navigation Tab Menu Generator CSS - Tabs Generator （別窓）
タブ画像生成ジェネレータ。
角の丸み、タブの方向などの変更が可能です。
記事タイトルにWeb2.0と書かれているように、最近ではあまり見なくなった（ような気がする）バッジのジェネレータも含まれています。
しかし上で紹介したような1年以上前に作られたにもかかわらず、まだまだ使えるジェネレータも数多く存在します。
画像の制作スキルがない方や、それを手軽に済ませたい方には非常に使える記事ではないでしょうか。
Photoshopでの制作を手助けするサイト84選
Top 84 Photoshop Resource Sites - Toolbox for Designers : Speckyboy Design Magazine （別窓）
Photoshopでの制作を手助けするサイトが複数のカテゴリに分けて合計84個紹介されています。
具体的なカテゴリは以下の通り。
Photoshopでの制作を手助けするサイトが複数のカテゴリに分けて合計84個紹介されています。
具体的なカテゴリは以下の通り。
- PSDファイル
- ブラシ
- プラグイン＆フィルタ
- チュートリアル
- テキストエフェクトチュートリアル
- フォーラム
- Eブック
- チートシート
アメブロで各記事にAddClipsボタンを自動挿入
ビーグルを愛して止まない人から「アメブロでブックマークプラスを用いて各記事へのブクマを円滑にしたいんだけどどうすればいいの」といった質問を受けました。
ブックマークプラスはサイドバーと各記事のどちらに貼り付けるかは自由といった形式になっており、今回彼は前者を利用したい模様。（勿論フッターやヘッダーでもいいのですが）
ブックマークプラスは貼り付けの方法として「予めサイトのURLを登録しておき、ブックマーク用URLは登録したURL固定となるもの」、「JavaScriptを用いてその時点で見ているページをブックマーク用URLとして取得するもの」の二種類があります。
しかしアメブロではユーザーならご存知の通り、各記事においてJSを利用することはできません。
そのため、前者の方法を用いた場合、各記事に貼ったところでブックマークされるURLは事前に登録したURL固定となってしまうわけです。
サイドバーに貼ればいい話ではありますが、各記事に貼られていた方が「ああ、この記事に対するブックマークなんだな」ということが把握出来ると思います。
そんなわけでやり方を模索することにしました。
目標2は言わずもがな。
おいおい上であれだけ触れておいて使わないのかよって感じですね。
当初は使う予定だったのですが、今回使うことにしたjQueryでちょっと支障が生じるので代わりに「AddClips」というサービスを利用することにしました。
まず以下のページにアクセスします。
AddClips ソーシャルブックマーク＆RSSボタン統合サービス （別窓）
次に「AddClipsボタンをつくる」というリンクをクリックします。
変更するのは「ボタンの機能」と「サイトの種類」と「ボタンの動きとカラー」の3項目です。
まず「ボタンの機能」はRSSのチェックを外してください。
次に「サイトの種類」は「ブログ」に設定し、その下に表示された「使用しているブログ」を「その他」に設定します。
そして最後に「ボタンの動きとカラー」は「ポップアップ」に設定します。
これらが出来たらページ下部にある「AddClipsボタンをつくる」というリンクをクリックします。
すると遷移先にコードが表示されたと思うので、これをコピーしておきます。
ようやくアメブロ側の作業に移ります。
まずはサイドバーの設定から、フリープラグインの設定を選択します。
そして先ほど表示されたAddClipsボタンのコードを貼り付けます。
さらに、以下のコードを貼り付けます。
imgタグの中のsrcの値に関しましては、AddClipsの作成の際にボタンの種類を変更した場合に限り自分が選択した画像のURLに変更してください。
尚、このままだとサイドバーにもボタンが出っ放しなので、もし消したい場合は適当なidもしくはclassを持つdivなどで「AddClips Code START」から「AddClips Code END」までをくくってdisplay:noneを適用するといいと思います。
めでたく出来たものの、ちょっとだけ欠点があります。
今回の実装では、あくまでそのとき開いてるページのURLをブックマーク用URLとして判断します。
例えばトップにおいて複数の記事を表示しているとき、今回の実装だとその全ての記事のフッタ部分にボタンが表示されますが、どれをクリックしてもブックマーク用URLはそのとき開いてるページのものであり、各記事のものではありません。
勿論各記事の個別URLを開いている場合は問題ないんですけども。
フリープラグインに追加した以下のコード。
これはAJAX Libraries APIを読み込むものです。
今回はjQueryというライブラリを読み込んでいます。
以下の記事に分かりやすく書かれておりますので、興味がある方はご覧下さい。
inputlog - Google AJAX APIを使ってjQueryを読み込む （別窓）
次に同様にフリープラグインに追加した以下のコード。
これが各記事のフッタ部分にボタンを追加するためのコードです。
「div.foot」という部分で挿入するための基準とする要素を指定しています。
今回はfootというclassを持つdiv要素を基準としています。
classではなくidを指定する場合、「.」ではなく「#」を用います。CSSと同じですね。
そして次のappendという部分で基準に対してどこにそのあとのカッコ内の要素を挿入するかを指定しています。
appendはカッコ内の要素を指定した要素の最後に挿入するための関数です。他にprepend、after、beforeという関数があります。
興味がある方は以下をご覧下さい。
第15回 HTMLの挿入 jQueryによるJavaScript入門-Re:Creator’s Kansai （リクリ） （別窓）
最後に書くのもアレですが、自分はJavaScriptのことは殆ど知りません。
今回の問題を解決するにあたっていくつかサイトを参考に試しただけなので、もっといい方法がいくらでもあると思います。
少しでも参考になれば幸いです。
あと最後に補足を。
AddClipボタン作成のところでRSSのチェックを外したのは、今回とりあえずブックマークに関して解決しておきたかったためです。
RSSにチェックが入った状態では試していないのでどうなるか分かりません。
今後試すことがあればまた記事にするかもしれません。
また、マウスオーバーではなくポップアップを選択したのは引数が少なくて実験が楽そうだったからです。
これに関しても今後試すことがあれば記事にすると思います。
とりあえず今回は実験ということで思いつく中で一番簡単そうなものを選択した形です。色々ひどいですね！
それでは長くなってしまいましたが、最後までお読み頂き誠にありがとう御座いました。
09.02.13 14:50追記
手順を一つ書き忘れてました。
AddClips作成時に「サイトの種類」を「ブログ」に設定すると書きましたが、「ブログ」を選択するとさらに「使用しているブログ」という項目が表示されますので、そこで「その他」を選択してください。
（※記事は既に修正してあります）
ブックマークプラスはサイドバーと各記事のどちらに貼り付けるかは自由といった形式になっており、今回彼は前者を利用したい模様。（勿論フッターやヘッダーでもいいのですが）
ブックマークプラスは貼り付けの方法として「予めサイトのURLを登録しておき、ブックマーク用URLは登録したURL固定となるもの」、「JavaScriptを用いてその時点で見ているページをブックマーク用URLとして取得するもの」の二種類があります。
しかしアメブロではユーザーならご存知の通り、各記事においてJSを利用することはできません。
そのため、前者の方法を用いた場合、各記事に貼ったところでブックマークされるURLは事前に登録したURL固定となってしまうわけです。
サイドバーに貼ればいい話ではありますが、各記事に貼られていた方が「ああ、この記事に対するブックマークなんだな」ということが把握出来ると思います。
そんなわけでやり方を模索することにしました。
目標
- 外部鯖にJSなどのプログラムを用意しない
- いちいち手作業で追加しない
目標2は言わずもがな。
やってみる
既にお気づきの方も多いと思いますが、今回ブックマークプラスは使いません。おいおい上であれだけ触れておいて使わないのかよって感じですね。
当初は使う予定だったのですが、今回使うことにしたjQueryでちょっと支障が生じるので代わりに「AddClips」というサービスを利用することにしました。
まず以下のページにアクセスします。
AddClips ソーシャルブックマーク＆RSSボタン統合サービス （別窓）
次に「AddClipsボタンをつくる」というリンクをクリックします。
変更するのは「ボタンの機能」と「サイトの種類」と「ボタンの動きとカラー」の3項目です。
まず「ボタンの機能」はRSSのチェックを外してください。
次に「サイトの種類」は「ブログ」に設定し、その下に表示された「使用しているブログ」を「その他」に設定します。
そして最後に「ボタンの動きとカラー」は「ポップアップ」に設定します。
これらが出来たらページ下部にある「AddClipsボタンをつくる」というリンクをクリックします。
すると遷移先にコードが表示されたと思うので、これをコピーしておきます。
ようやくアメブロ側の作業に移ります。
まずはサイドバーの設定から、フリープラグインの設定を選択します。
そして先ほど表示されたAddClipsボタンのコードを貼り付けます。
さらに、以下のコードを貼り付けます。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(document).ready(function(){
$('div.foot').append('<a onclick="return AddClipsGo(\'\',\'bookmark\')" href="#"><img height="16" width="141" border="0" alt="AddClips ブックマークに登録" style="border: medium none ; padding: 0px; vertical-align: middle;" src="http://img.addclips.org/addclips_1.gif"/></a>');
});
</script>
imgタグの中のsrcの値に関しましては、AddClipsの作成の際にボタンの種類を変更した場合に限り自分が選択した画像のURLに変更してください。
完成！
これでページを確認すると、各記事の下部、「ペタ」のリンクの右横にAddClipsボタンが表示されたと思います。尚、このままだとサイドバーにもボタンが出っ放しなので、もし消したい場合は適当なidもしくはclassを持つdivなどで「AddClips Code START」から「AddClips Code END」までをくくってdisplay:noneを適用するといいと思います。
めでたく出来たものの、ちょっとだけ欠点があります。
今回の実装では、あくまでそのとき開いてるページのURLをブックマーク用URLとして判断します。
例えばトップにおいて複数の記事を表示しているとき、今回の実装だとその全ての記事のフッタ部分にボタンが表示されますが、どれをクリックしてもブックマーク用URLはそのとき開いてるページのものであり、各記事のものではありません。
勿論各記事の個別URLを開いている場合は問題ないんですけども。
ちょっとだけ解説
やり方を紹介するだけだったのでちょっとだけ何をしてるのか解説してみます。フリープラグインに追加した以下のコード。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
これはAJAX Libraries APIを読み込むものです。
今回はjQueryというライブラリを読み込んでいます。
以下の記事に分かりやすく書かれておりますので、興味がある方はご覧下さい。
inputlog - Google AJAX APIを使ってjQueryを読み込む （別窓）
次に同様にフリープラグインに追加した以下のコード。
<script type="text/javascript">
$(document).ready(function(){
$('div.foot').append('<a onclick="return AddClipsGo(\'\',\'bookmark\')" href="#"><img height="16" width="141" border="0" alt="AddClips ブックマークに登録" style="border: medium none ; padding: 0px; vertical-align: middle;" src="http://img.addclips.org/addclips_1.gif"/></a>');
});
</script>
これが各記事のフッタ部分にボタンを追加するためのコードです。
「div.foot」という部分で挿入するための基準とする要素を指定しています。
今回はfootというclassを持つdiv要素を基準としています。
classではなくidを指定する場合、「.」ではなく「#」を用います。CSSと同じですね。
そして次のappendという部分で基準に対してどこにそのあとのカッコ内の要素を挿入するかを指定しています。
appendはカッコ内の要素を指定した要素の最後に挿入するための関数です。他にprepend、after、beforeという関数があります。
興味がある方は以下をご覧下さい。
第15回 HTMLの挿入 jQueryによるJavaScript入門-Re:Creator’s Kansai （リクリ） （別窓）
おわり
長くなってしまいました。最後に書くのもアレですが、自分はJavaScriptのことは殆ど知りません。
今回の問題を解決するにあたっていくつかサイトを参考に試しただけなので、もっといい方法がいくらでもあると思います。
少しでも参考になれば幸いです。
あと最後に補足を。
AddClipボタン作成のところでRSSのチェックを外したのは、今回とりあえずブックマークに関して解決しておきたかったためです。
RSSにチェックが入った状態では試していないのでどうなるか分かりません。
今後試すことがあればまた記事にするかもしれません。
また、マウスオーバーではなくポップアップを選択したのは引数が少なくて実験が楽そうだったからです。
これに関しても今後試すことがあれば記事にすると思います。
とりあえず今回は実験ということで思いつく中で一番簡単そうなものを選択した形です。色々ひどいですね！
それでは長くなってしまいましたが、最後までお読み頂き誠にありがとう御座いました。
09.02.13 14:50追記
手順を一つ書き忘れてました。
AddClips作成時に「サイトの種類」を「ブログ」に設定すると書きましたが、「ブログ」を選択するとさらに「使用しているブログ」という項目が表示されますので、そこで「その他」を選択してください。
（※記事は既に修正してあります）
シングルページで作るWebデザイン
Web Design Inspiration: 40+ Impressive Single Page Websites （別窓）
一つのページで構成されたWebサイトが42個紹介されています。
その中から3つだけこちらで紹介。
Yura Sklyar （別窓）
これは非常にシンプルなシングルページサイト。
環境にもよりますが、スクロールも無く一画面に収まるように設計されたデザインです。
コンテンツが最低限だからこそ実現できるデザインですね。
Pikaboo - Where Ideas Grow （別窓）
こちらもスクロール無しに一画面に収まるようになっていますが、上のサイトとの違いはJavascriptを利用しているところです。
コンテンツをポップアップや画面遷移の無い読み込みによって表示しています。
The portfolio of Bryan Katzel | Design, illustration & stuff to make you smile （別窓）
最後にこちらはスクロールを必要とするデザインです。以前紹介した気もします。
コンテンツが縦長になっており、各コンテンツをページ内リンクで繋いでいます。
このコンテンツはこの縦長という特徴を活かして、背景とスクロールの連携によるアニメーションを実現しているところが非常におもしろいですね。
一つのページで構成されたWebサイトが42個紹介されています。
その中から3つだけこちらで紹介。
Yura Sklyar （別窓）
これは非常にシンプルなシングルページサイト。
環境にもよりますが、スクロールも無く一画面に収まるように設計されたデザインです。
コンテンツが最低限だからこそ実現できるデザインですね。
Pikaboo - Where Ideas Grow （別窓）
こちらもスクロール無しに一画面に収まるようになっていますが、上のサイトとの違いはJavascriptを利用しているところです。
コンテンツをポップアップや画面遷移の無い読み込みによって表示しています。
The portfolio of Bryan Katzel | Design, illustration & stuff to make you smile （別窓）
最後にこちらはスクロールを必要とするデザインです。以前紹介した気もします。
コンテンツが縦長になっており、各コンテンツをページ内リンクで繋いでいます。
このコンテンツはこの縦長という特徴を活かして、背景とスクロールの連携によるアニメーションを実現しているところが非常におもしろいですね。
動画で学ぶCSS Sprite
Exactly How to Use CSS Sprites - NETTUTS （別窓）
CSS Spriteの画像の作り方、CSSのコーディング方法が動画で紹介されてます。
実際に作ったものはDemoとして紹介されているので、そちらもあわせてご覧下さい。
CSS Spriteは複数の画像を一つにまとめ、HTTPリクエストを減らすことによってパフォーマンスを向上させるテクニックです。
ナビゲーションに使われることが多く、動画でもナビゲーションにおけるCSS Spriteが紹介されています。
これをふんだんに使ったものとしてはYouTubeなどが有名ですね。
Firebugが入っている方は調査で適当な画像を選択し、CSSに記述されている画像ファイルを開いてみると確認できます。
詳しいことは以前DesignWalkerさんが書かれた以下の記事をご覧下さい。
CSS Spriteを活用しよう | DesignWalker （別窓）
また、CSS Sprite用の画像を簡単に作成するツールもあります。
Project Fondue | CSS Sprite Generator （別窓）
こちらに複数の画像をまとめたZIPファイルをアップロードすると、それを一つの画像にまとめ、CSS Sprite用のCSSコードも生成してくれます。
まずはこれで試してみるのもいいかもしれません。
CSS Spriteの画像の作り方、CSSのコーディング方法が動画で紹介されてます。
実際に作ったものはDemoとして紹介されているので、そちらもあわせてご覧下さい。
CSS Spriteは複数の画像を一つにまとめ、HTTPリクエストを減らすことによってパフォーマンスを向上させるテクニックです。
ナビゲーションに使われることが多く、動画でもナビゲーションにおけるCSS Spriteが紹介されています。
これをふんだんに使ったものとしてはYouTubeなどが有名ですね。
Firebugが入っている方は調査で適当な画像を選択し、CSSに記述されている画像ファイルを開いてみると確認できます。
詳しいことは以前DesignWalkerさんが書かれた以下の記事をご覧下さい。
CSS Spriteを活用しよう | DesignWalker （別窓）
また、CSS Sprite用の画像を簡単に作成するツールもあります。
Project Fondue | CSS Sprite Generator （別窓）
こちらに複数の画像をまとめたZIPファイルをアップロードすると、それを一つの画像にまとめ、CSS Sprite用のCSSコードも生成してくれます。
まずはこれで試してみるのもいいかもしれません。
リストに自動で連番クラス・テキストを挿入するjQueryテクニック
jQuery Sequential List （別窓）
リストに自動で連番クラス・テキストを挿入するjQueryテクニックの紹介です。
具体的にどのようなことができるかというと…
ちなみにこれを実現するJavaScriptコードは以下のような感じです。
これ以外にも、特定のidを持つli要素の中に固定クラスを持つspan+連番テキストを挿入する方法も紹介されています。
項目が多いとき、項目の追加があったときに手作業でクラスを追加する必要がなくなる嬉しいテクニックですね。
リストに自動で連番クラス・テキストを挿入するjQueryテクニックの紹介です。
具体的にどのようなことができるかというと…
<ol id="step">このようなコードを以下のように変換してくれます。
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
<ol id="step">これはstepというidを持つol内のli要素にitem+連番という名前のクラスを付与しています。
<li class="item1">...</li>
<li class="item2">...</li>
<li class="item3">...</li>
</ol>
ちなみにこれを実現するJavaScriptコードは以下のような感じです。
<script type="text/javascript">尚、jQueryを利用しているので、予めjQueryを読み込んでいる必要があります。
$(document).ready(function(){
$("#step li").each(function (i) {
i = i+1;
$(this).addClass("item" i);
});
});
</script>
これ以外にも、特定のidを持つli要素の中に固定クラスを持つspan+連番テキストを挿入する方法も紹介されています。
項目が多いとき、項目の追加があったときに手作業でクラスを追加する必要がなくなる嬉しいテクニックですね。