サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
kaelab.ranadesign.com
今日聞かれたので調べてみました。 以下のようなURLからドメインまでを取得する場合のパターン。 http://www.example.com/news/index.html <script type="text/javascript"> <!-- document.write(location.href.match(/^https?:\/\/[^\/]+/)); //--> </script> 出力は http://www.example.com になります。 ちなみにhttpsでアクセスした場合も大丈夫です。 ただ、正規表現に関してはかなり簡略化しています。
MTが置いてあるサーバーと本番公開用サーバーが異なる場合、MTで書き出したファイルをそのまま本番サーバーにアップしてしまうと、HTML中でhttp://で始まるパスが合わなくなってしまいます。(パスはMTの置いてあるサーバーを指してしまう) これを解決するためにどうにか、絶対パスを出力しないように工夫してテンプレートを組むわけですが、MTタグによっては必ず絶対パスを出力してしまうものがあります。 例えばMTEntryPermalink。 これ、使えないと結構面倒。 今日ふと思いついたんですが「出力を置き換えてしまう」って方法がありました。 まず絶対パスでホストURL部分が入った変数を作り <mt:SetVarBlock name='website_absolute_url'>http://<$mt:BlogHost$>/</mt:SetVarBlock> この変数を元に、該当タグの出
Ajaxで他のページを取ってきて、コンテンツをガリガリ書き換えてしまうようなサイトを先日案件で作ったのですが、従来の方法ではGoogle Analyticsで遷移先のページビューを取得できないことに気づいて、実験を行ってみました。 実験のために作成したデモがこちらです。 Google Analytics Demo 何をやっているかを解説していきます。 以下のような部分がAjaxでページを書き換える処理の例です。 今回はjQuery 1.7.1を使うことを前提にしてコードを書いています。"ul a"セレクタ(いかにもやっつけですが。。)で選択されたa要素をクリックすると、href属性値で指定されたURLをAjaxリクエストし、その内容で <div id="contents"/> の中身を書き換えちゃうよ、というものです。 $(function() { $(document).on('cli
画像の読み込みと生成を行い、ローディング完了またはタイムアウトを確認してからコールバックに設定した処理を行う。 【 実行方法 】 $("element").imgloader(options); 【 オプション 】 imglist: (Array) 画像のsrcに指定するパスを配列形式で指定。 callback: (function) コールバック処理を関数形式で指定。 timeout: (Number) タイムアウトをミリ秒で指定。省略時はタイムアウトしない。 【 例 】 var options = { imglist: [ "photo/0.jpg", "photo/1.jpg", "photo/2.jpg", "photo/3.jpg" ], width: 1200, height: 896, callback: function() { // コールバック処理 } } // loa
続・ハイパフォーマンスWebサイトを読んでPNGファイルの最適化について興味が湧いたので、同書に紹介されているPNG最適化ツールをいくつか試してみました。使用してみた感想を簡単にレポートします。 PNGOUT Windowsのみ。GUI版とコマンドライン版がある。GUI版は有料。圧縮効果は高く、コマンドライン版でも十分使える。オプション多し。 OptiPNG クロスプラットフォーム。オープンソース。コマンドラインのみ。圧縮効果は低めな印象。オプション多し。 PNGCRUSH Windowsのみ。オープンソース。コマンドラインのみ。自分の環境だと動作しませんでした。。何がいけないんだろう。 PngOptimizer Windowsのみ。オープンソース。GUI版とコマンドライン版がある。ファイルをドラッグアンドドロップするだけの超シンプル設計。オプションなどは設定できない。何も考えずに
フローティングなナビゲーションを作るjQueryプラグイン ↑に位置固定(position: fixed)の機能を追加した。 もちろん、IE6にも対応。 floater.js サンプル デモ オプションや使い方などは前記事を参照ください。
fixedオプションを追加。 ナビゲーションなどのコンテンツをスクロールに追従させ、画面の上下に接着させるjQueryプラグイン。 どこかで見たような気がするのだが、どこで見たか思い出せない&探してもすぐ出てこないので、作ってみた。 floater.js サンプル デモ 使い方は簡単。 よくある感じで、動かしたい要素でfloaterメソッドを実行する。 $(element).floater(); オプションは以下の通り。 marginTop: 上の余白 marginBottom: 下の余白 agility: 0~1。0はナビが通り過ぎるまで待つ。1はナビの末端が出るとすぐ動きだす。 speed: アニメーションにかける時間 easing: イージング fixed: trueでposition: fixedに切り替え。初期値はfalse。 オプションを適用すると、こんな感じ。 $("nav
2倍速&イージングあり。 $("#slide-01").slider({ time: 5, easing: "swing" }); // timeの初期値は10
というわけで、ちょっとだけ使いやすくしました。 まだ付けたい機能があるので、おいおい追加していきます。 使い方は以前の記事「jQueryプラグインなスライダー slider.js」を参考ください。 基本的には、以下のような感じで使えるお手軽仕様です。 <div class="slideFrame" id="slide-00"> <ul class="slideGuide"> <li class="slideCell">セル</li> <li class="slideCell">セル</li> </ul> </div> <script> $("#slide-00").slider(); </script> あけましておめでとうございます。 今年もバンバンやっていきまっせ! というわけで、本年一発目はhashchangeイベントについて。 hashchageイベントとは、URLに#~とつく例の
Description このスクリプトはjQueryプラグインです。 指定した要素からのリンクされているドキュメントを、モーダルウィンドウ(通称Lightbox)で表示します。ドキュメントの呼び出しにはAjaxを使っています。WebKit搭載ブラウザで実行すると、モーダルウィンドウの開閉時にアニメーションを伴います。 もともとはiPhone/iPod touch/iPadのSafariに最適化したUIを実現するために制作したものなので、少々挙動にクセがあります。PC向けのウェブサイト用途であれば一般的なLightboxクローン(fancyboxなど)をオススメします。 Demos Open Modal Contents!! Usage Step01 head要素内で jquery.smartModalWindow.jsと、jquery.smartModalWindow.cssをそれぞれ読
2011年2月25日 20:52 Instagram APIとGoogle Maps APIのマッシュアップ 「Gramap」 昨年後半くらいから人気がじわじわと出てきたiPhoneアプリの「Instagram」。 その公式APIが出るという噂を聞いたのが先月くらい。 そして、今月中旬にデベロッパー登録の受付が始まりいつになったら使えるのかと待ちわびていたのですが、先日たまたまデベロッパー用ページにアクセスしたら既にアプリ登録が出来るようになっていたので早速試しに作ってみました。 ※注意 2011/2/26現在まだプライベートベータ版です。 この地図のマーカーをクリックするとその場所で投稿された写真をスライドショーで眺めることができます。 地図を移動させれば世界中の写真を観ることも可能です。 (写真をクリックするとInstagramの個別ページに飛びます。) このウェブアプリ
"背景だけ"を透過させたい時には、background-colorにrgba()で色と不透明度を指定してやるだけでOKです。 ・・・最近のブラウザは。 rgba()に対応してないブラウザ、まぁ主にアレですが・・・にもオリジナルな素晴らしい機能filter: alpha()があります。 filter: alpha(opacity=50)とやると要素の不透明度が50%になるというやつです。 0.5じゃなくて50と指定するところもまた強い自己主張を感じますね。昔気質とでも言いましょうか。 しかし、この素敵機能filter: alpha()では、"背景だけ"でなく子要素含め、すべて透過してしまいます。 とても面倒見が良いです。 しかし、今回のように"背景だけ"に透過を適用したい。そんな時は"DirectX FilterのGradient Filter"の出番です。 これを使って背景にグラデ
今日は、JavaScript開発の定番になっているjQuery、これをGoogleAPIから呼び出して、サイト構築の手間を省こうではないかというお話です。 Google API を使う時にAPIをロードするためのgoogle.load() これでjQueryも呼び出せます。 <script src="http://www.google.com/jsapi/"></script> <script>google.load("jquery", 1)</script> これだけ。 ↓ 以下Googleから抜粋。 google.load(moduleName, moduleVersion [, optionalSettings]) google.load()の引数で渡すのは3つ。最後のはオプションです。 moduleName API名。maps, search, feeds, など moduleVe
すっかり最近のマイブームになってしまった、ふわっと切り替えるホバー処理。 マウスオーバーすると、imgの不透明度を0%にして、下の背景を表示させる。 マウスアウトすると、imgの不透明度を100%に戻す。 // HTML <a href="#" class="hover"> <img src="..."> </a> // CSS a { background: url(...); } // JS $(".hover").hover( function(){ $("img", this).stop(true).fadeTo(500, 0); }, function(){ $("img", this).stop(true).fadeTo(500, 1); } );
あけましておめでとうございます。 今年もバンバンやっていきまっせ! というわけで、本年一発目はhashchangeイベントについて。 hashchageイベントとは、URLに#~とつく例のあれが変更された時に発生するイベント。 kinect.jp - Kinect for Xbox 360などでも使われてますね。 hashchange対応ブラウザへの実装 IE8、FF3.6以上、Chrome8、Safari5、Opera10、など主流ブラウザの最新版なら対応している。 サンプルデモ 注意点。 a要素を使ってハッシュを付加する場合、 preventDefaultやreturn falseなどをすると、ハッシュが付かなくなる。 また、jQuery1.4.4現在、hashchange()メソッドは未サポートなので、 使用する際はbind()メソッドを使ってwindowのhashchang
jQueryプラグインにチャレンジしてみました。 よくあるスライダーです。 (10/26 追記) iPhone&iPad対応しました。 細かいことはCSSで調整ください (9/7 追記) ドラッグに対応しました。 slider.js Demo HTML側の記述は下記を参考ください。 <div class="slideFrame"> <ul class="slideGuide" id="slide-00"> <li class="slideCell">セル</li> <li class="slideCell">セル</li> </ul> <div class="slideCtrl left"><</div> <div class="slideCtrl right">></div> </div> リスト要素の部分はdiv要素など他のブロック要素でも構いません。 ガイド用クラス(.slide
Description このスクリプトはjQueryプラグインです。 指定したエリア内に横スライドするだけのシンプルなTwitterティッカーを表示します。 Demos Demo 1 Query "from@toptweets_js"with no links. Usage Step01 head要素内で jquery.twTicker.jsと、jquery.twTicker.cssをそれぞれ読み込みます。もちろん、jquery.jsを読み込んだ後に読み込みましょう。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.twTicker.js"></script> <link rel="stylesheet" type="text/css"
全部で5個登録されたバナーのうち、ランダムに3個を選択して表示する、というスクリプトについて。 案件で必要に迫られて書いたのですが、あまりにイケてないコードになってしまったので改良したものをここで公開します。イケてないコードで公開してしまった懺悔みたいなものです。 処理の流れとしてはこんな感じ。 5個のHTML文字列が入った配列(1)からランダムに1個取り出して、表示用変数に格納 残りの4個を新たに作った配列(2)に格納 配列(2)からランダムに1個取り出して、表示用変数に格納 残りの3個を新たに作った配列(3)に格納 配列(3)からランダムに1個取り出して表示用変数に格納 表示用変数を使って出力 これをベタッと処理の順そのまんまに書いたらこうなった、というイケてないやつ。 サンプル1 var contentHtml = [ '<li><a href="#"><img src="bnrs
特定のフィールドへのコピペを禁止するという、単純な機能です。demoではそれが分かりやすいようにalertを出すようにしてみました。(実際の案件では出していません)
Twitterのタイムラインを横にアニメーションさせる、シンプルなティッカーを作りました。jQueryセレクタで指定した要素内に特定のTweetのリストが書き出され、それが横にアニメーションするというものです。 今の作りではページに1つしか埋め込めないので、今後も改良予定です。 ページ内に複数埋め込めるように改良したバージョンを作りました。 デモや使い方など、詳しくは以下の解説ページでどうぞ。 "twTicker" jQuery plugin - 解説ページ
リストの分割というテーマは前から取り組んでいたのですが、jQueryプラグインという形で書いたのは今回が初です。 デモ - Large list auto paging jQuery plugin ページ送りもスパスパ切り替わるだけでは面白くないので、アニメーションするオプションも実装しました。使い方は以下の通りです。 // 該当のリスト要素をjQueryセレクタで指定 // オプションは引数に、オブジェクトリテラル形式で渡す $('ul.list1').listPaging({ // リストの幅を指定(単位はピクセル) listWidth: 160, // 一度に表示する項目の数 listLength: 5, // 分割後のリスト要素名 list: 'ul', // 分割後のリスト項目要素名 listItem: 'li', // 前へページ送りするナビゲーションのテキスト(例:前へ)
スマートフォン対応サイトではよく見られるのが、Ajaxによるコンテンツの切り替えです。ページ遷移によるユーザーのストレスを軽減を図る手法として利用されているものと思われます。この手法でたまに見られるのがモーダルウィンドウ(通称Lightbox。モーダルボックスとも呼ばれる)です。 今回はスマートフォン(主にiPhone Safari)に最適化したモーダルウィンドウを表示するjQueryプラグインを作りました。デモや使い方など、詳しくは以下の解説ページにて。 "smartModalWindow" jQuery plugin - 解説ページ スマートフォン端末ではiPhone 3GS Safari、iPhone 4 Safariで動作確認しています。PCのブラウザでも動作しますが、WebKit系以外はアニメーションしません。
なんとなくいまっぽいタイトルにしてみましたw vertical-align を baseline から bottom に。またはその逆。囲っているブロック要素の font-size を0に。または overflow を hidden に。zoom:1 などで hasLayout を true に。間にコメントや改行をいれずに並べてみる。 それでもダメならレイアウトを変えてみる。
かえラボBlog初投稿です。 今回HTMLメルマガを作成していてハマったポイントをメモ代わりに書いておきます。 メルマガ作成時の基本 ・がっつりテーブルコーディング ・CSSは<head>~</head>内に記述 (でもGmailに反映しない。インラインで書くのがよい) ・テーブルのセルには単位を明記する。 ・padding、marginなどは使わない。 ・backgroundの指定はできない。 ・画像はフルパスで記述。 ...他にもありましたが、割愛。 今回、上記に則って作成しましたが、firefox+Gmailの環境で、 リンクするimg要素にボーダーが出てしまう、という現象にぶち当たりました。 IE+Gmail、Chrome+Gmailでは問題なし。 リンクするimg要素にはborder="0"を指定して解決しました。 基本中の基本なのかも知れませんが、うっかりもれてしまっていたので
screen.width 画面幅 : screen.height 画面高 : screen.availWidth 有効画面幅 : screen.availHeight 有効画面高 : window.innerWidth 表示領域幅 : (IE非対応) window.innerHeight 表示領域高 : (IE非対応) window.outerWidth ウィンドウ幅 : (IE非対応) window.outerHeight ウィンドウ高 : (IE非対応) $(window).width() 表示領域幅 : $(window).height() 表示領域高 : document.documentElement.clientWidth 表示領域幅 : document.documentElement.clientHeight
かえラボBlogはラナデザインアソシエイツのテクニカルチームが運営する技術系ラボプロジェクトですいよいよHTML5もメインストリームになってきたようなので、もろもろテストもかねて作ってみました。 デモはこちら テーマは「重力と音」です。 ボール(低機能なブラウザでは箱)が投げられてバウンドするだけの単純な内容ですが、 HTMLファイルと使用するサウンドファイルのみで動作しています。 jQueryなどの外部ライブラリも使用していません。(ここ重要) 重力間の表現は下記の公式を利用してます。 初速をv、経過時間をt、仰角をθ、重力加速度をg、初期座標を(x0, y0) として任意の座標を求めると x = v * t * cosθ + x0 y = v * t * sinθ - g * t * t / 2 + y0 音の再生には、HTML5のaudio要素(非対応ブラウザはembed要素)を使
画面内でコンテンツをふわふわさせてみました。 デモ var i = 0; (function move(){ // プラスマイナスを交互に渡す i = i > 0 ? -1 : 1; var p = $("#sample").position().top; $("#sample").animate({ top: p + i * 10 }, { duration: 500, complete: move // アニメーション完了後に関数を再帰呼び出しする。 }); })(); .animate()を再帰的に呼び出すことで繰り返し処理を行っています。
このページを最初にブックマークしてみませんか?
『kaelab.ranadesign.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く