サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
今年の「#文学」
blog.bonkura.jp
こなだいスライドショーをjQueryを利用して作ったんですが、IEだと画像の読み込みがどうも遅い。たぶん事前にキャッシュさせなきゃいけないんだろうなぁと思いつつも方法がわからず、先に読み込んでCSSで消すって方法を採用しました。 でもこれだとどうもスマートじゃない。何か方法があるでしょ、と思っていたらやっぱりありました。 こういうコードをDOM readyイベントの外に書いておくといいみたいです。 var images = ["hoge1.jpg", "hoge2.jpg", "hoge3.jpg"]; $.each(images, function(){ $("<img>").attr("src", this); }); こんな簡単だなんて･･･。jQueryはやっぱり凄いです。
jQueryを利用する際の高速化記述方法のメモ。 セレクタにid属性を指定できないか検討する classだとすべての要素をチェックしなければならないから処理効率がよくない。idが使えるならばidを使うべし。 セレクタに要素名とclass属性を追加する $(“.nav”)ではなくて、$(“div, nav”)とそれば、JavaScriptのgetElementsByTagNameで精査する要素を絞り込むことができる。 findメソッドを利用する $(“#nav a”)より$(#nav).find(“a”)のほうが早い。これはまったく逆だと思ってた･･･。jQueryのセレクタは「右から左」に解釈されるため、$(“#nav a”)だとa要素を検索して、その中から#navが先祖要素にあたるa要素をjQueryオブジェクトとする。findを使えば、#navを検索してからa要素をjQueryオブジェ
ABOUT THE BLOG Bonkura BlogはJavaScriptやPHP,CSSなどWebデザインについて研究するブログです。 ARCHIVES 2011年3月 (15) 2011年2月 (8) 2011年1月 (6) 2010年12月 (7) 2010年8月 (2) 2010年7月 (7) SEARCH Post Categories ActionScript 3.0 (3) CSS (3) Facebook (1) Firefox (1) JavaScript (27) jQuery (20) Mac (4) Movable Type (1) PHP (3) WordPress (1) Regular Expression (3) Sass (1) website (1) META INFORMATION ログイン
また目から鱗な書き方。 こういうHTMLがあったとします。 <table id="tbl"> <tr> <td>a1</td> <td>b1</td> <td>c1</td> <td>d1</td> <td>e1</td> </tr> <tr> <td>a2</td> <td>b2</td> <td>c2</td> <td>d2</td> <td>e2</td> </tr> <tr> <td>a3</td> <td>b3</td> <td>c3</td> <td>d3</td> <td>e3</td> </tr> <tr> <td>a4</td> <td>b4</td> <td>c4</td> <td>d4</td> <td>e4</td> </tr> </table> tdを押したらCSSを変更したい場合。 今までボクはこういう書き方をしてました。 $("#tbl td").clic
案件でプルダウンメニュー（メニューA）を実装した際に、左袖のローカルメニュー（メニューB）でも入れ子の実装をしていたために起こったバグ。メニューAがメニューBの背景に潜り込んでしまう。単純にCSSでz-indexをメニューBよりAの値を大きくすれば問題なさそうだけど、IE7で不具合。z-indexが効かない。IE7のz-indexにはこういう不具合があるらしい。 IE7限定なんだろうけど、z-indexは同一階層間での重ね順の前後を指定するもので、 グローバルに前後を指定するものではなかった komacchi.com/blog ググると色々解決策は出てくるが、どれもしっくりこない。海外サイトでjQueryを利用した解決策を発見し、無事解決。JavaScript上でz-indexをすべてのdivタグに設定しておけばバグは解消されるらしい。 $(function() { var zInde
せっかく購入したMAMP PROをもっと使うためにMovable TypeもMacローカルにインストールしてみた。WordPressはPHPなのでインストールが簡単でしたが（MAMPデフォのまま何も作業しなくてOK）、Movable Typeのインストールはノンプログラマにとってかなりハードルが高くてかなり苦戦しました（最終的にできましたけど）。ちなみにインストールしたMovable Typeのバージョンは4です。 まずPerlモジュールをMacにインストールする必要があるらしい。MAMPデフォのままMovable Typeをインストールすると使えない機能が沢山でてくる。MySQLも使えない状態。そこでPerlモジュールっていうのをインストールする必要が模様。 モジュールをインストールするための管理者権限をつくる ターミナル.appを立ち上げて、以下のコードを入力。 sudo passw
最近のコーディングでは共通箇所はSSIにしたりPHPのincludeを使ったり、更新時に作業ができるだけラクになるように設計しています。ボクはMAMP PROを使ってローカルサーバーを立てて、ドキュメントルートを設定しています。無料版のMAMPでもhttpd.confに設定を書き加えればドキュメントルートを複数設定することができるのですが、MAMP PROはGUI操作で簡単に設定できるのが魅力です。 MAMP PROの設定手順 下記サイトからMAMP PROをダウンロードします。ここで非常に重要な注意。最新版1.9はボクの環境(Mac OS 10.6)では正常に動きませんでした。ですのでボクはMAMP PRO1.8.4を使用しています。 MAMP: Mac, Apache, MySQL, PHP ダウンロード完了後、インストールしMAMP PROを立ち上げます。Apacheを80、MyS
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 ■サンプル ■スクリプト function init():Void{ w = contentMC._width+10; cnt = Math.ceil(Stage.width/w)+4; x0 = Stage.width/2; scrollWidth = w * cnt; for(i=1; i<=cnt; i++){ x = w * (i-2); y = contentMC._y; props = {_x:x, _y:y}; newMC = contentMC.duplicateMovieClip("scrollMC"+i, i, props); newMC.onEnterFrame = scrollxMC; } contentMC._visible = false; } funct
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 まず読み込むXMLはこのように書いておきます(ファイル名はphotodata.xml)。 <?xml version="1.0" encoding="UTF-8"?> <slideshow> <photo url="1.jpg" caption="匂い" time="2008/05/02"/> <photo url="2.jpg" caption="フィルム列車" time="2008/05/03" /> <photo url="3.jpg" caption="ひとりひとり違う" time="2008/05/07" /> <photo url="4.jpg" caption="ありがとう音楽" time="2008/05/23" /> <photo url="5.jpg
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 ■サンプル package { import flash.display.DisplayObjectContainer; import flash.display.Loader; import flash.display.MovieClip; import flash.events.Event; import flash.events.ProgressEvent; import flash.events.IOErrorEvent; import fl.transitions.*; import fl.transitions.easing.*; import flash.net.URLRequest; import flash.text.TextField; import flash
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 単純なイージング（長い形式） var dx:Number = targetX - sprite.x; var dy:Number = targetY - sprite.y; vx = dx * easing; vy = dy * easing; sprite.x += vx; sprite.x += vy; 単純なイージング（短縮形） vx = (targetX - sprite.x) * easing; vy = (targetY - sprite.y) * easing; sprite.x += vx; sprite.y += vy; 単純なイージング（さらに短くした形式） sprite.x += (targetX - sprite.x) * easing; sprite.y +
指定のボタンをクリックした、複数のアニメーションがすべて終了した、必要なイメージファイルやXMLファイルをすべて読み終えたというように、複数のイベント発生の完了を知りたい場合に使えます。 登録した複数のイベントがすべて発生しきったらEvent.COMPLETEイベントを発信。 メインのクラスはEventGroupクラスにイベント発生完了時の監視は任せておき、メインはEventGroupクラスからのEvent.COMPLETEイベントだけを待てばよいわけです。 package { import flash.events.Event; import flash.events.EventDispatcher; public class EventGroup extends EventDispatcher { private var eventCount:uint; public functio
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 ■サンプル ■ムービークリップ内のスクリプト import caurina.transitions.Tweener; import caurina.transitions.properties.ColorShortcuts; ColorShortcuts.init(); //デバッグ用 //Tweener.setTimeScale(0.1); bar.width = 0; hit.buttonMode = true; hit.addEventListener(MouseEvent.ROLL_OVER, xRollOver); hit.addEventListener(MouseEvent.ROLL_OUT, xRollOut); hit.addEventListener(MouseE
var styles:TextField.StyleSheet = new TextField.StyleSheet(); ･CSSの受け皿を作ります。 styles.setStyle("p",{fontSize:"9px",marginLeft:"10px",color:"#FFFFFF"}); styles.setStyle("headline",{color:"#FF0000",fontSize:"10px",textDecoration:"underline"}); ・各種CSSの設定を行います。 output_txt.styleSheet = styles; ・どこにCSSを適用するか設定。 output_txt.html = true; ・HTMLを読めるようにする。trueにすることで初めて<p>〜</p>はpタグとして認識されます。 次にボタンを押したときに関数l
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 参考にしたのはこのサイト様です。 ・gotoandlearn.com - Object-Oriented Scrollbar 1 ・gotoandlearn.com - Object-Oriented Scrollbar 2 ・trick7.com blog: Flashスクロールバーのサンプル（flaファイル付き） ただ、人様のサンプルを流用するだけでは芸が無いので、ちょっと機能を付加してみました。 付加した機能はこんな感じ。 ・スクロールハンドルの後ろのバーを押すとその位置までハンドルが移動。 ・マスクよりコンテンツのサイズが小さい場合はスクロールの表示なし。 ・初期設定でユーザビリティ対策の初期動作のオン、オフの切り替え可能。 ・初期設定でハンドルのサイズをコンテン
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 package { import flash.display.DisplayObjectContainer; import org.libspark.utils.ui.HIGEWheel; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; public class ScrollBar extends MovieClip { private var yMin:Number; private var yMax:Number; private var yOffset:Number; private var friction:Number = 0.2; pub
PennerEasing easeInBack : いって、戻ってくる。 easeInBounce : はねるように動く。 easeInCirc : 緩急をつける(1位)。 easeInCubic : 緩急をつける(5位)。 easeInElastic : ばねのように動く。 easeInExpo : 緩急をつける(2位)。 easeInQuad : 緩急をつける(6位)。 easeInQuart : 緩急をつける(4位)。 easeInQuint : 緩急をつける(3位)。 easeInSine : 緩急をつける(7位)。 linear : 緩急なし。 詳しくはこちら。 にゃあプロジェクト - ウェブログ - FuseKitのイージング ●使い方例 box1_mc.scaleTo(100, 2, "easeOutBack"); box1_mc.scaleTo(終値, 何秒かけてT
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 日産：購入検討サポート これどうやってるんだろう？と思って色々実験してみました。 まずやってみたのが、こんな内容。 swfObjectのパラメータでFlashの背景を透明にする。 swfを挿入するdivタグのCSSのpositionをabsolute、z-indexを10にする。 一応、これでもFlashの下のHTMLのテキストを読むことはできます。 Flashの背景を透明にして、CSSでHTML上のレイヤーを分けただけなので、そりゃそうです。 ただ、HTMLのテキストをクリックしたりなどは受け付けません。 Flashは背景が透明になっただけで、HTMLテキストの上のレイヤーに存在するからです。 どうすれば対応できるんだろう？？ そこでJavaScriptをかましてみました。 fu
中規模な企業サイトを作る話がひさびさにありました。今も企業サイトの更新をいくつかかかえてるんですが、HTMLで作っているのでナビゲーションが増えたり減ったりしたときの作業が非常にめんどくさいです。 今度から共通部分はSSIを使おう！と思ってサンプルをつくり、その企業のサーバにアップしてみたところSSIは使っちゃダメみたい。ウンともスンともいわん。 で、ちょっと調べたらPHPでもおんなじようなことができるそう。早速サンプルファイルつくってサーバで試してみたら上手くいった！なんだか感動。 index.phpに書いたのはこんな感じのPHP。 include "include/global_header.php"; ただちょっとまてよ、と。 階層深くなったときにglobal_header.phpへのパスは相対になるんだよなあ。それもめんどいのどこからでも参照できるように絶対パスでこんな感じに書い
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 あくまで僕が一番管理しやすいと思うディレクトリ構成です。 「こうしたほうが便利だよ！」ってのがあれば逆に教えてほしいっすなあ。 ■データ一式ダウンロード CSSディレクトリ ■dw.css clearfixはDreamweaverのデザインビューではうまく反映されませんが、overflow:hiddenとするだけでDreamweaver上の表示は改善されます。ただし、overflow:hiddenとしてしまうとネスケなので表示がされなくなるので、Dreamweaverの機能である「デザインタイム」を利用します。この機能を使えばdw.cssはDreamweaverのデザインビューにしか反映されません。 ■pages/ 各ページ個別対応しなきゃならないCSSをページカテゴリー名で管
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 よくムービークリックを入れ子にしてプルダウンメニューを作ると思うんですが、ActionScript2.0の場合、入れ子にしたムービークリップの扱いは非常にめんどくさいものでした。 FN0308001 - onハンドラを使わずにロールオーバー/ロールアウトを検出する - Flash : テクニカルノート が、AS3だとcurrentTargetを使えば直感的に操作可能！ package { import caurina.transitions.Tweener; import flash.display.MovieClip; import flash.events.MouseEvent; import flash.text.TextField; /** * ... * @author
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 AS2版のほうはこちらのサイト様を参照しました。 テキストくるくるライブラリ - pandajustice.jp ソースを読めば以外と簡単。 もうちょっと簡潔＆仕様追加してAS3に移植してみました。 package { import flash.display.DisplayObjectContainer; import flash.text.TextField; import flash.events.Event; public class RandomText { private var sourceTxt:String = "_/-=+%&$#!?ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
ActionScript3.0でアニメーション用のライブラリ、Tweenerの文法メモ。 FuseKitがAS3でも使えたら最高だったんだけどなあ。 Tweenerで｢動け｣と命令するメソッドは｢addTween｣と｢addCaller｣の二種類。 ■addTween 任意の数値プロパティを変化させるメソッド。移動や回転、拡大縮小、色の変化などをトゥイーンするときに使用。Tweener機能のメイン機能。 ■addCaller 設定時間内に任意の関数を好きな回数だけ連続して実行させたい時に使用。トランジションタイプも設定でき、｢関数myFuncを最初は少なめに、後半はハイペースで呼び出す｣といった指定も可能。
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 制作時の基本的な注意としては、FlashとPHPを同じディレクトリ内において、Flashでプレビューしても動きません。PHPが動くローカルサイトを構築してから、ブラウザでチェックする必要があります。 ボクはMacなのでMAMPというアプリケーションを使って環境構築をしています。 MAMPについての詳しい説明はこちら。 WindowsはXAMPというアプリケーションがあるそうです。 ここではPHPの細かい説明はとばします。今のスキルレベルでPHPを理解するのは難儀すぎます......来年やりたいなあ。 早速初歩的なサンプルを作ってみました。 サンプル1 これはPHPから受け取った変数をダイナミックテキストに表示しているだけです。 (変数の中身はテキストデータ) スクリプトはこ
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 package { import flash.display.DisplayObject; import flash.display.DisplayObjectContainer; import flash.display.MovieClip; import flash.geom.Rectangle; import flash.events.MouseEvent; public class DragFront { var my_mc:MovieClip; var bounds:Rectangle; function DragFront(drag_mc:MovieClip, ...arg) { my_mc = drag_mc; if (arg[0] is DisplayObject)
Tweenerでは色やフィルタ効果などもトランジッション可能。スペシャルプロパティを使うには別途専用のクラスをimportし、initメソッドで初期化する必要があります。 ■Blurフィルターを適用した例 import caurina.transitions.Tweener; import caurina.transitions.properties.FilterShortcuts; FilterShortcuts.init(); Tweener.addTween(mc1, {_Blur_blurX:255, _Blur_blurY:255, time:1.5}); ほかにはドロップシャドウやベベル、グローなどもトランジッション可能です。 ■ドロップシャドウの例 import caurina.transitions.Tweener; import caurina.transitions.p
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 カスタムイベントの基本 カスタムイベントの定義では2つのことを考える必要があります。 1つ目はイベントオブジェクトの定義、2つ目はイベント発生時にリスナーに対してイベントオブジェクトを配信する機能です。 カスタムイベントクラスはEventクラスを継承して作ります。MouseEventやTimerEventもすべてEventクラスから派生していますので、カスタムクラスもこれに習います。 addEventListener、removeEventListener、dispatchEventはいずれもEventDispatcherクラスの機能です。なのでカスタムイベントを配信する際は、EventDispatcherクラスを継承する必要があります。ただし、MovieClipクラスなどイベント
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 画像読み込み後の映像効果の完了を知らせる 写真が切り替わる間は同時に2枚の写真を表示している必要があり、前の写真を消すことはできません。と言って、新しい写真を次々と上にフェードインさせていくとメモリの負担が増えてしまいます。 表示が終わった写真はメモリから消去する必要があります。これを解決するには、フェードインの完了を告げるカスタムイベントを定義し、このイベントを受けて前の写真をメモリから消去するようにします。 次のTweenImgLoaderクラスには、外部画像を読み込んでフェードインで表示する機能と、フェードインが終了したら写真表示の完了を告げるカスタムイベントが定義してあります。 package { import flash.display.DisplayObjectCont
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。
次のページ
このページを最初にブックマークしてみませんか？
『BONKURA BLOG』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
