サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Switch 2
otani-webs.com
memo 作業内容 前回のGoogle Maps API version3を使ってみる（1）では、表示させるための記述を学びましたが、今回はマーカーや情報ウィンドウを加えるなどもう少し便利にGoogle Mapを使ってみたいと思います。 UI（コントローラー）の変更 マーカーの表示 情報ウィンドウの表示 --- head内に設定等を記述 --- <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(33.59232418300553,130.3789624214172); var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, //地図タイプの切り
demo memo 作業内容 クロスフェードで画像を切り替える時それぞれの画像にリンクを設定したいなと思い、探してみたらInnerFade with JQueryてのがあったので試してみます。フェード効果などの設定は以下の通り。 animationtype … 'fade'か'slide'（デフォルトは'fade'） speed … 'slow'か'nomal'か'fast'かミリ秒（デフォルトは'nomal'） timeout … ミリ秒（デフォルトは 2000） type … 'sequence'か'random'か'random_start'（デフォルトは'sequence'） containerheight … （デフォルトは'auto'） --- jQuery設定 --- <script type="text/javascript" src="../common/js/jquer
demo PozuPadのフィード memo 作業内容 Google AJAX Feed APIを使ってAtomやRSSフィードを読み込んでみます。まずはGoogle AJAX Feed API への登録を行います。するとサンプルが表示されるので、それを元に以下のように設定。 --- 表示されるサンプルを元に「表示件数」「リンク」「投稿日の表示スタイル」を追加設定 --- <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>タイトル</title> <script type="text/javascript" src="http://www.google.com/jsapi?key=生成されたAPIキー"></script> <script type="text/javascr
demo hoverで背景色を#FFCC00にじんわり変えます。 で、マウスを外せば背景色を#FFFFFFにじんわり戻します。 hoverで文字色を#333333にさっと変えます。 で、マウスを外せば文字色を#2C95D7にじんわり戻します。 memo 作業内容 文字色や背景色などを指定した色にじんわりとアニメーションで変更させるJquery Color Pluginを試してみます。今回はhoverで発動、stop()でアニメーション中のhoverはノーカウントにしてます。 --- javascript --- <script type="text/javascript" src="../common/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/101120/jquery.color.js
memo 作業内容 友達のサイトを作ってると「Photo」というコンテンツがあったのですが、ただ写真を並べて表示させることに何の面白味も感じず、余程素敵な写真だったり頻繁に更新されない限り1度見て終わりやな、と…は言うものの面白いアイデアは浮かばず、それなら気軽に更新できる環境だけでも用意しようと外部サービスを使った表示を調べてみました。 代表的なFrickrとPicasaで比較すると、Frickrの無料アカウントでは10個までしかグループ（アルバム）が作成できなかったため、Picasaに決定。んで、今回はpwiを使わせていただくことにしました。mootoolsを使ったPicasaViewerというのもありましたが、今回はjQueryで進めます。 公開しているアルバムを一覧で表示させ、そこからクリックで各アルバムの写真をずらっと表示させる…のが基本のようですが、ユーザビリティ的に気になる点
demo memo 作業内容 某サイトで見た、背景で画像が動き回っている透過ロゴに惹かれました。使っていたのはjQueryプラグインBackground-Position Animations。 まず、透過させたテキスト画像とその背景で動かせたい画像を用意。今回のサンプルの背景では下の画像が動いています。 --- head内にjQueryとjquery.backgroundPosition.jsを読み込む --- <script type="text/javascript" src="../common/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/100713/jquery.backgroundPosition.js"></script> --- htmlサンプル --- <p class
memo 作業内容 クロスフェードで画像を切り替える時それぞれの画像にリンクを設定したいなと思い、探してみたらA Simple jQuery Slideshowてのがあったので試してみます。リンク設定した画像で挙動させるよう、少しいじっています。 --- jQuery設定 --- <script type="text/javascript" src="../common/js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow a.active'); if ( $active.length == 0 ) $active = $('#slideshow a:last'); var $next = $active.n
memo 作業内容 クロスフェードで画像を切り替える時それぞれの画像にリンクを設定したいなと思い、探してみたらSimple jQuery Slideshow Pluginてのがあったので試してみます。フェード効果などの設定は以下の通り。 timeout … ミリ秒（デフォルトは 2000） fadetime … ミリ秒（デフォルトは 600） type … 'sequence'か'random'（デフォルトは'sequence'） --- jQuery設定 --- <script type="text/javascript" src="../common/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/100815/jquery.slideshow.js"></script> --- html
demo 下のほうへスクロールしてみてください。ページ右下に上向きの矢印が出現するのでレッツクリック。レッドクリフに見えた。 memo 作業内容 フッター部分に「トップへ戻る」ボタンというのはよく見かけますが、このサイトにはありません。個人的にあのボタンを押すことがほぼ無いんです。が、別にあるとイヤなわけでもないので試しに置いてみます。 ページを読み進める（スクロールする）と、トップへ戻るボタンがウィンドウの右下にじんわり出現するjQuery Scroll to Top Controlを使ってみます。クリックするとスクロールしながらトップへ戻ります。 --- head内にjQueryとscrolltopcontrol.jsを読み込む --- <script type="text/javascript" src="../common/js/jquery-1.3.2.min.js"></scr
memo 作業内容 以前試してみたGoogle AJAX Feed APIですが、今回は複数のRSSをひとまとめにして表示させてみます。Google AJAX Feed API への登録については、今回は省略。ブログごとに異なるclass名を設定したいけど、よくわからず。とりあえずclass名にブログのタイトルを入れるという暴挙。 --- demo用コード --- <script type="text/javascript" src="http://www.google.com/jsapi?key=取得したAPIキー"></script> <script type="text/javascript"> google.load("feeds", "1"); var entryArray = new Array(); var entryNum = 0; function initialize(
demo 前書 ルネ･クレールと喜劇 ルネ･クレールとチャップリン ルネ･クレールと諷刺 前書 ルネ・クレールに関する一文を求められたのであるが、由来クレールに関してはほとんどもう語り尽された観がある。しかし考えてみると私には別な見方がないでもない。それを書いて見ようというのであるが自分の仕事のことなどを考えると気恥ずかしくてクレール論などは書けないのがほんとうである。今日はひとつ批評家になつて書いてみようと思う。 ルネ・クレールと喜劇 ルネ・クレールについてまつたく何も知らない人から「ルネ・クレールとはどんな人だ」ときかれたならば、私は「非常に喜劇のうまい人だ」と答えるにちがいない。 少しいい方を変えるならば、ルネ・クレールは私に喜劇を見せてくれるただ一人の映画芸術家だともいえる。正直な話、私のクレール観は以上でおしまいなのであるが、これでやめてしまつたのでは『キネマ旬報』の印刷所がひま
前書 ルネ・クレールに関する一文を求められたのであるが、由来クレールに関してはほとんどもう語り尽された観がある。しかし考えてみると私には別な見方がないでもない。それを書いて見ようというのであるが自分の仕事のことなどを考えると気恥ずかしくてクレール論などは書けないのがほんとうである。今日はひとつ批評家になつて書いてみようと思う。 ルネ・クレールと喜劇 ルネ・クレールについてまつたく何も知らない人から「ルネ・クレールとはどんな人だ」ときかれたならば、私は「非常に喜劇のうまい人だ」と答えるにちがいない。 少しいい方を変えるならば、ルネ・クレールは私に喜劇を見せてくれるただ一人の映画芸術家だともいえる。正直な話、私のクレール観は以上でおしまいなのであるが、これでやめてしまつたのでは『キネマ旬報』の印刷所がひまで困るだろうから、もう少しルネ・クレールをもてあそんでみるが、それにつけても残念千万なのは
memo 作業内容 前回のGoogle Maps API version3を使ってみる（2）では、マーカーや情報ウィンドウの基本的な表示について学びましたが、今回はマーカーの見せ方とイベントについて調べてみたいと思います。 マーカーの複数表示設定 マーカーのオリジナル画像設定 情報ウィンドウを1つずつしか表示させない設定 マーカークリックでマップを移動させる設定 --- head内に設定等を記述 --- <script type="text/javascript"> // 最後に開いた情報ウィンドウを記憶 var currentInfoWindow = null; function initialize() { var latlng = new google.maps.LatLng(33.593754102476126, 130.38095712661743); var myOptions
memo 作業内容 前回のGoogle Maps API version3を使ってみる（3）では、マーカーの複数表示やオリジナル画像設定について学びましたが、今回はストリートビューを用いた見せ方について調べてみたいと思います。 --- head内に設定等を記述 --- <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(33.593434606900864,130.37826418876648); var myOptions = { zoom: 17, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: true, //ストリートビューアイコンを追加 //地図
demoとmemo jQueryを勉強することにしました。『Web制作の現場で使う jQueryデザイン入門』をが分かりやすかったのですが、買う前にできることもあろう、ということでまずはネットで調べてみました。すると前述の本の著者でもある西畑 一馬さんが、全15回で解説するjQueryによるJavaScript入門-Re:Creator's Kansai （リクリ）があったので、まずはここから読んでいきます。 jQueryによるJavaScript入門-Re:Creator's Kansai （リクリ） 第0回 第0.5回 Javascriptの記述場所 Javascriptの記述場所（外部ファイル、script要素、インライン※推奨されてない） jQueryファイルの読み込み方法（Google AJAX Libraries APIからの直接利用も） 第1回 CSSの操作 jQueryによ
demo この箇所のテキスト部分を選択してみてください。通常このサイトではグレー背景に黒文字のハイライトとなりますが、赤色背景に白文字のハイライトになっているかと思います。 memo 作業内容 CSS3から定義された"selection"という擬似要素を使っています。なお、"selection"自体は突然CSS3のセレクタから削除されたそうですが、とりあえず下記の記述で適用はされます。 --- CSSはこんな感じ --- ::selection{ /* Safari and Opera */ background:#ff0000; color:#000; } ::-moz-selection{ /* Firefox */ background:#ff0000; color:#fff; } ちなみにこんなのもありました。以下の英文をハイライトすると画像が浮かんできます。Text + Imag
何かと使うことの多いギャラリー系プラグイン。生憎僕は1から作ることができないので、その都度配布されてるものをちまちま探していたりします。毎回同じプラグインを見ては、「あぁこれ前も見たなー」と思い出す情けない僕なので、ギャラリー集をまとめることにしました。 なお、ライセンス関係はメモしていないので各サイトにてご確認ください。 ギャラリー（ポップアップ型） ColorBox [ jQuery ] エフェクトがたくさん用意されていますね。 Fancybox [ jQuery ] シンプルなギャラリー。 Galleria [ jQuery ] フルスクリーン対応。 Galleriffic [ jQuery ] サムネイルリストの隣に画像表示。 Image Gallery v1.0 [ Flash ] 使う場面はあまり思いつきませんが、こういうの作れたら良いなぁ。 Lightview [ jQuer
11-02-26Picasaにアップした画像で手軽にギャラリーを作れる「pwi」 11-01-26多様なページ内スクロールを選択できる「jQuery.easing.scroll.js」 11-01-22スクロールしてもiPhoneのように見出しを残す「m5elementFollow」 10-12-09複数の外部RSSを「Google AJAX Feed API」で読み込む 10-12-08ページの背景にyoutube動画を全画面表示する「jquery-tubular」 10-12-02Twitterでつぶやくボタンあれこれ 10-11-20文字色や背景色をじんわり変える「Jquery Color Plugin」 10-08-24外部リンクだけに新規ウィンドウ設定とアイコンを付加する 10-08-23指定の要素にリンクを設定できる「Biggerlink」 10-08-15クロスフェードでリン
年賀挨拶専用ブログになっていますが、今年もどうかひとつよろしくお願いいたします！ 皆さんも僕も健康でありますように。
このページを最初にブックマークしてみませんか？
『大谷和輝／OTANI KAZUKI』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
