Ho-KAGO After School http://mkicle.biz/blog/ ja Copyright 2008 Tue, 11 Mar 2008 11:05:06 +0900 http://www.sixapart.com/movabletype/ http://www.rssboard.org/rss-specification GoogleMapsAPIを使ってみた。 最近、GoogleMapsAPIの練習ばっかりしてたので、忘れない内に復習のため載せて行きたいと思います。

内容が偏って行くばかりですが・・・。

今回は、はじめの一歩、GoogleMap上の自分が印を打ちたい地点にマーカーを表示させる方法です。

では、どうぞ！

]]> http://mkicle.biz/blog/2008/03/googlemapsapi.php http://mkicle.biz/blog/2008/03/googlemapsapi.php googlemapsAPI Tue, 11 Mar 2008 11:05:06 +0900 CSSで、プルダウンメニューを作ってみた。 って言っても、そういうサンプルを置いてくれてるサイトがありました。

CSS MENU GENERATOR

っていうサイトです。

今まで、プルダウンメニューというか、アコーディオンメニューというかそういうのを作る機会が無かったので、今回色々調べていて、最初JavaScriptのを使おうかと思ってたんですが、使おうとしてるサイトでも、「別にJavaScriptを使っているのでややこしくなりそうやなー。」と思ってたらCSSでできるのを知りました。

]]> http://mkicle.biz/blog/2008/02/css.php http://mkicle.biz/blog/2008/02/css.php CSS JavaScript アコーディオンメニュー プルダウンメニュー Mon, 25 Feb 2008 02:27:43 +0900 MooTabs1.2を作ってみた。 またまた、タブをクリックしたら、コンテンツが変わるJavaScriptです。

今回は、mootoolsライブラリを使用した、MooTabs1.2.jsを作ってみました。

MooTabs1.2.jsは、タブをクリックすると、コンテンツ部分がストンという感じ表示されるJavaScriptです。jsファイルの値を変えれば、表示する際のエフェクトも変えられるようです。

MOOTABS1.2サンプル

mootabs1.2.jpgのサムネール画像　では、どうぞ。

]]> http://mkicle.biz/blog/2008/02/mootabs12.php http://mkicle.biz/blog/2008/02/mootabs12.php Ajax JavaScript menu mootools スライド ページ遷移 Thu, 21 Feb 2008 23:53:41 +0900 SpryTabbedPanels.jsを作ってみた。 今回も懲りずに、タブを押すと、コンテンツが切り替わるJavaScriptです。

Spryを使った、SpryTabbedPanels.jsというJavaScriptです。

こんなのです。

SpryTabbedPanels.jsサンプル

tabbedpael.jpg

 

 

 

 

 

 

 

 

 

 

 

では、どうぞ。

]]> http://mkicle.biz/blog/2008/02/sprytabbedpanelsjs.php http://mkicle.biz/blog/2008/02/sprytabbedpanelsjs.php Ajax JavaScript Spry スライド タブ ページ遷移 メニュー Thu, 21 Feb 2008 22:25:50 +0900 MovabletypeとGooglemapを組み合わせてみた。 昨日、やりたかったGoogleMapsAPIのんが簡単ながら形になった所で、「もしやあるんじゃないのか・・・。」と思い始めて、色々検索してたら、やっぱりあった。

その内の一つをやってみたら、何とか上手い事行ってブチ上がりました。

こんな感じです↓

MovableTypeとGooglemapの練習。

Movabletypeで記事を投稿するときに、一緒に経度と緯度を入れるとGoogleMapの方に、マークがついて、吹き出しに記事の内容が出るようになります。

]]> http://mkicle.biz/blog/2008/02/movabletypegooglemap.php http://mkicle.biz/blog/2008/02/movabletypegooglemap.php MovableType4(ムーバブルタイプ4) googlemapsAPI Mon, 18 Feb 2008 00:22:55 +0900 突然、FirefoxでGoogleMapが表示されなくなった。 IEで確認すると、ローカルだとXMLを読まないので、毎回Firefoxで確認してたら、突然、GoogleMapが表示されなくなって、Firebugで見てみると、エラーが・・・。

一分ぐらい前まで、普通に見られてたのに！何で突然!?

]]> http://mkicle.biz/blog/2008/02/firefoxgooglemap.php http://mkicle.biz/blog/2008/02/firefoxgooglemap.php Firefox googlemapsAPI Sun, 17 Feb 2008 21:15:23 +0900 Glider.jsを作ってみた。 今回も、ページ内でコンテンツがスライドする系、Glider.jsを作ってみました。

Glider.jsは、prototype.jsのライブラリを使用していて、コンテンツの内容別にstyleをしたり、flashコンテンツや動画を載せたり、インラインフレームを使用できたりと、便利です。

Glider.jsのサンプルglider.gif

では、どうぞ。]]> http://mkicle.biz/blog/2008/02/gliderjs.php http://mkicle.biz/blog/2008/02/gliderjs.php Ajax JavaScript prototype.js スライド ページ内遷移 メニュー Sat, 16 Feb 2008 14:12:45 +0900 Coda-Slider 1.1.1を作ってみた。 今回は、Coda-Slider 1.1.1を作ってみました。

タブを押すとページ内でコンテンツの内容がスムーズに遷移するやつです。

今まではギャラリー、スライドショー系の嵐でしたが、今日以降は今回と同じような"遷移する系"ばかりになると思います。なぜなら、今日自分の目的に合うのを探すため作りまくったからです。

その第一弾が、Coda-Slider 1.1.1です。jQueryのライブラリを使用します。

こんなのです↓

Coda-Slider 1.1.1.gif
















Coda-Slider 1.1.1のサンプル

では、どうぞー。

]]> http://mkicle.biz/blog/2008/02/codaslider-111.php http://mkicle.biz/blog/2008/02/codaslider-111.php Ajax JavaScript jQuery スライド タブ ページ内遷移 メニュー Fri, 15 Feb 2008 23:25:49 +0900 GoogleMapの指定した場所に、youtubeの動画を表示させてみた。 今回は、GoogleMapの住所や画像が表示される吹き出しに、youtubeを表示させるのをやってみました。

GoogleMapは、去年の春頃に挑戦して、一瞬で挫折したまんまで、もろもろすっ飛ばしてやってみました。

でも、出来た！

こんな感じです。

GoogleMapの吹き出しにyoutubeを表示

]]> http://mkicle.biz/blog/2008/02/googlemapyoutube.php http://mkicle.biz/blog/2008/02/googlemapyoutube.php API Ajax googlemapsAPI youtube Wed, 13 Feb 2008 18:52:02 +0900 画像を使ったスライドメニュー、imagemenuを作ってみた。
今回は、imagemenuを作ってみたいと思います。

imagemenuは、mootoolsライブラリを使用して、auのトップページで使われてるみたいな伸縮してスライドするメニューを作る事ができます。こんなやつです。

imagemenuサンプル

じゃあ、やってみます！
]]> http://mkicle.biz/blog/2008/02/imagemenu.php http://mkicle.biz/blog/2008/02/imagemenu.php Ajax JavaScript imagemenu menu mootools メニュー Wed, 13 Feb 2008 11:21:34 +0900 lightbox2.0を作ってみた。 今回は、prototype.jsを使用したlightboxを作ってみました。

色々なライブラリでも、lightboxの発展系が登場していますし、前回作ったmootoolsを使用したslimboxもその中の一つです。

lightboxサンプル

こんなやつです。

実際には、

steruss

のreleaseの部分で使用されていたりします。

では、どうぞ！

]]> http://mkicle.biz/blog/2008/02/lightbox20.php http://mkicle.biz/blog/2008/02/lightbox20.php Ajax lightbox prototype.js ギャラリー スライド Sun, 03 Feb 2008 11:07:26 +0900 mooRevolverを作ってみた。 今回は、mooRevolverです。

mooRevolverは、mootoolsを使用した回転式の画像ギャラリーです。これを使用すると、アップルのiTunesのようなギャラリーやメニューを作成するする事ができます。

mooRevolverサンプル

では、いつも通り、簡単な説明とサンプルですが、どうぞ！

]]> http://mkicle.biz/blog/2008/01/moorevolver.php http://mkicle.biz/blog/2008/01/moorevolver.php Ajax gyrari- moorevolver mootools ギャラリー メニュー 回転 Thu, 31 Jan 2008 11:36:10 +0900 Smoothboxを作ってみた。 今回は、Smooth Boxを作ってみます。

Thickboxの、mootools版みたいな感じです。

自分のサイトworks部分でも使っていますが、こんなやつです。

Smoothboxサンプル

では、どうぞ！

]]> http://mkicle.biz/blog/2008/01/smoothbox.php http://mkicle.biz/blog/2008/01/smoothbox.php Ajax mootools ギャラリー スライド Wed, 30 Jan 2008 18:15:58 +0900 Slimboxを作ってみた。 前回一日一サンプルと言っておきながら、余裕で更新してない心の弱さ。

色々サンプル作ってはいるので、がんばって記事にはしたいと思います。

今回は、Slimboxです。こんなやつです。

Slimboxサンプル

Slimboxは、mootoolsを使用して作るギャラリーで、rel="lightbox"と指定するので、lightboxを使用してる方もそのまま移行する事ができます。

自分のサイトでも、Worksのページで使用しています。

では、どうぞ！

]]> http://mkicle.biz/blog/2008/01/slimbox.php http://mkicle.biz/blog/2008/01/slimbox.php Ajax mootools ギャラリー スライド Wed, 30 Jan 2008 12:13:46 +0900 Smooth galleryを作ってみた。 今日から、1日1サンプル何か作るのを始めます。

では、1発目は、MooToolsというAjaxライブラリを使った、"Smooth gallery"というスライドショーを作ってみます。

]]> http://mkicle.biz/blog/2008/01/smooth-gallery.php http://mkicle.biz/blog/2008/01/smooth-gallery.php Ajax JavaScript ギャラリー スライドショー Thu, 10 Jan 2008 04:27:32 +0900