Daily Archives: 2012年2月2日

ゲーミフィケーションでよく使われるバッジをcssだけで作成する

2012年2月2日 (カテゴリ: 未分類:, )

ゲーミフィケーションを考える際、作業を行った報酬としてバッジを提供することが有ります。 例えばfoursquareやロケタッチなどの大きなサービスでは、全てのバッジを個別の画像で作成してますが、個人で作るような小さなWebサービスでは、なかなか個別の画像を用意することは出来ません。 そこで、今回はcssだけを使用して見栄えのするバッジを作ってみます。 また、デザインの分野に不慣れな人でも簡単に作ることが出来るよう、今回は作成の過程も紹介します。 今回は例として、”よくできました”の文字を装飾していくことにします。 まずは装飾無し。普通の文字です。 ソース <a&g…


続きを読む

[jQuery]iframeを動的に追加して,googlemapを表示させる

2012年2月2日 (カテゴリ: JavaScript:)

htmlの中でjQueryを使用して動的にiframeをappendするサンプルです。 例では、入力された住所を元にgooglemapを表示しています。 ソース: <input type="text" id="txtAddress" value="東京都千代田区丸の内一丁目" size="30" /> <input type="button" id="btnTest" value="iframe追加"/> <div style…


続きを読む