乱雑モックアップ » javascript

[jQuery]$(this)の親要素や子要素を指定するには。

まこと — Mon, 26 Sep 2011 21:08:50 +0000

thisを使ってなかったからthisの子要素のアクセス方法が全くわからんかった。

当たり前だけどこんな風に出来無いわけですよね

$("this ul").addClass("hogehoge");

childrenを使うといいみたい。

$(this).children("ul")

親にはparent

$(this).parent()

参考 / まよねこ inside » Blog Archive » 【jQuery】thisの親や子要素の指定方法[リライト版]

宿題
ひろし+すみれのliからから友蔵+こたけのliを指定するにはどうしたらいいんだろうか。

さくら家

友蔵+こたけ

ひろし+すみれ

さきこ
まるこ

photoshopでfireworksのカンバスを合わせる、的な事をする.jsx

まこと — Wed, 01 Jun 2011 19:01:45 +0000

fireworksの「カンバスを合わせる」って便利ですよね
photoshopでも使いたい！と思い調べてみたところ
イメージ – トリミングと
イメージ – すべての領域を表示を組み合わせて
同じような事が出来るみたいだったので
.jsxに出来ないかなぁと試してみました。

不具合や必要ない記述があるかと思いますが、自分が使う範囲では困らない感じになったのでとりあえず公開してみます。

fit-canvas.jsx

例1 / before これが

例1 / after こうなる

例2 / before オブジェクトがカンバスの外にはみ出てる場合

例2 / after それを含めてから削る

どんな使い方をしてるか

大元のpsdからパーツを作成する時に
レイヤーを複製で新規ファイルで作成して抽出してるんですけど
その時に、元psdのカンバスサイズを引き継いでしまうので
それを除去するのに使ってます。

※ “トリミング” と “すべての領域を表示” で削れない部分は削れません。

超参考にしたページ

Adobe Photoshop CS4自動化作戦

スクロールバーを変更するjscrollpane.js

まこと — Tue, 10 May 2011 13:07:11 +0000

SAVEJAPAN! PROJECTのツイッターのスクロールバーのところが、
デザインにあってていいねぇなんて思いながら見ていたら
だんだん自分でも使ってみたくなったので調べてみるとjscrollpaneというのを使っているようでした。

これ2009年くらいに話題になったらしいんだけど、全く知りませんでした。。。

ここ / jScrollPane – cross browser styleable scrollbars with jQuery and CSS
iframeも、親htmlにjsを追加するだけで(operaでマウスホイールが反応しなかったけど)スクロールバーを追加できたり
子htmlに直接jsを追加する事でマウスホイールも反応するように出来るかんじ。

練習

乱雑モックアップ｜jQueryでツイッターを取得してjscrollpaneを適用

ツイッターをjQueryで読み込む方法の参考にしたページ

jQueryでTwitterの自分のつぶやきを表示する | webOpixel

iframeに開くページを、location.searchで受け取った値で変更させちゃっても問題ない？

まこと — Mon, 25 Apr 2011 19:52:42 +0000

iframeを持つ1つのhtmlを使い回して
中身だけを変更したいんだけど何かいい方法はないかね？と聞かれて
iframeの中身をバラバラに作るくらいならiframeやめなよと答えたけど
気になったので少し考えて
location.～が使えそうじゃない？と以下のソースを書いた

親(index.html





乱雑モックアップ｜親ページ





 googleを開く
 yahooを開く

子iframeがあるhtml(after.html





乱雑モックアップ｜子ページ

これで、親ページのリンクの?以下の名前
(after.html?http://yahoo.co.jpならhttp://yahoo.co.jp)のファイルを
子のiframeで開けるのだが
これ、大丈夫なんでしょうか？

?javascript:alert('alert');

でalertがでるけど、alertを任意に使えるって事は何か別の事がされるんだろうか？
パスワードなんかを扱わないページは気にしなくていいのだろうか。
という感じで使えるものかわからんので教えてない。

rollover2.jsとoperaと色々復習

まこと — Mon, 28 Feb 2011 21:04:05 +0000

凄く滑らかなロールオーバーを超お手軽に実装できるrollover2.jsというものがあるんですが
クロスフェードするロールオーバー処理をお手軽に実装するJavaScript – KAZUMiX memo
クロスフェードするロールオーバー処理動作サンプル – XHTML サンプル | KAZUMiX memo

これ、imgにvertical-align:bottom;や
vertical-align:top;を指定してある場合、
operaでpositionの基準点がうまくいってないような感じの
とんでもない表示になってて(v10.50以前は確認してないけど)

例 / positionの基準点がうまくいってない感じの表示

今気づいたけど
aタグの中にrollover2.jsのロールオーバー対象になるimgだけが入っていると
おかしくなる。

aタグの中にimgの他に、テキストが入っているとおかしくならない。

蛇足 / imgにvertical-align:bottomしたい(してる)理由

ご存知vertical-alignの初期値はbaselineなので
アルファベットのg,j,p,q,yの下に飛び出る部分(ディセンダって名称らしい_*1)の余白が確保され、テキストと並べた時にimgの下に隙間ができちゃう

この隙間を埋めるには、vertical-align:text-bottomを指定するのが定石みたいなんだけど
operaだとテキストの位置がズレてたので(10.50以降？)、
いつしかbottomで指定するようになって
しばらくしてbottomを指定するようになった理由を失念してました。

今確認してみたらbottomも表示が変だった＞＜；；；なんだこれ。

とりあえず
vertical-align:text-bottomを指定しとけば
operaでクリック出来なくなるくらい表示が崩れる事はないのかな？

ここから先は失敗を含む試行錯誤メモ

operaだけvertical-align:bottomやtopをそれ以外の値で上書きできないか？

vertical-align:bottomが基本だと疑ってなかったので
問題のあるoperaだけディセンダが消える別の指定にすればいいかな？と思った

しかしoperaだけにcssを適用出来るハックってのが無いんですよね
(検索して出てくるのはopera11では対策されているのか、効き目がなかった)

で逆に考えて
「opera以外にハックで指定して、通常の指定がoperaだけに適用される」ようにすれば
operaだけvertical-align:text-bottomなんかを指定できるんじゃないか？と思ったけど
面倒なので却下。

cssua.js / CssUserAgent (cssua.js)で分岐させる

最近はてなで見かけたブラウザを判別してhtmlタグにclassを付けてくれるjs
これを使えば簡単にoperaだけにcssを指定できた。

.ua-opera img{
 vertical-align:text-bottom;
}
img{
 vertical-align:top;
}

参考 / もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 | Web活メモ帳

cssua.jsの使い方はcssua.jsを読み込むだけ
cssua.jsを読み込んだページを
operaの”要素を調べる”やfirebugでソースをみると
htmlタグにclassがたくさんついてるのが確認できる。

いやでもjs使わないでどうにかならないかな？

この時点でまだopera以外もtext-bottomでいいのでは？と想像も出来てない。

aにdisplay:blockしたらvertical-align:bottom;でも問題なく表示できた。
でも全部のaにそんな指定したら困っちゃうし
rollover2.jsの範囲のaだけdisplay:blockするってのは
画像の名前だけで勝手にrolloverを指定出来るせっかくの超便利機能を制限することになるので避けたい。

display:inline-block;ならどうだろう？

block要素になればいいみたいだから指定してみたらいい感じだった。
が、いままで問題なかったsafariで
aタグテキストの上部に隙間ができてしまった。

むむむ。

そんで、じゃあそもそもvertical-alignをtext-bottomやtopにすると
どんな問題が発生するんだろう？と
検証してみてら色々こんがらがってきて
結局text-bottomで特に問題なさそうという最初に書いた結論に落ち着きそうな感じ。

*1 逆にb,d,f,h,k,lなどエックスハイト(小文字のxなどの高さ)の上ミーンライン？より飛び出した分はアセンダって名称らしい。

ブラウザの表示倍率を無理やり100%に見せる（ただしIE限定、動作確認は8のみ）

まこと — Tue, 07 Dec 2010 14:57:36 +0000

サンプル / http://sakurachiro.com/_exercise/html_css/zoom1/index.html
（IEで表示倍率を変更すると確認出来ます）

ブラウザの表示倍率をリセットする方法は無いかな？と試行錯誤してみました。

ちょっと調べてみるとscreen.devicexdpiってのを使うと画面のdpiがわかるみたい

参考にさせてもらったページ
javascript screen deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI
deviceXDPI Property (screen, Screen Constructor)
これでできる！クロスブラウザJavaScript入門：第19回　CSSOM View Module解説

windowsは96でIEの表示を400%にしてる時は384。

そこに直接数字を入れたらコントロールできるかのか？と
screen.devicexdpi=96;みたいにしても反応なし。
読み取るだけなのか、使い方を間違ってるのかとにかくこの方法じゃ出来なかった。

なのでzoomプロパティを使って拡大してる分を縮小させてみる事に。
こんな感じ

function cz(){
      if (screen.deviceXDPI !=96) {
      var dxd=screen.deviceXDPI;
      var nowMagniFication=dxd/96;
      var chgZoom=1/nowMagniFication;

      document.body.style.zoom=chgZoom;
      document.body.style.width=document.body.clientWidth*nowMagniFication+"px";
   }
}
window.onload=cz;

zoomを1になるようにしても
横幅が拡大した時のサイズにあわせて変更されちゃうので
document.body.clientWidthを倍率に合わせて拡張

スクロールバーが表示されるのでbodyにoverflow-x:hidden;を指定して切捨て。
window.onloadとwindow.onresizeで呼び出してみたけど
書き方が悪いのかwindow.onresizeがあると横幅が異常に広がってしまうので削除した。

なんとなくokぽい感じがしないでもないけど
上下marginがあると拡大したままになってしまうのよね、これ。

縦のスクロールも伸びっぱなしでした。
ん～もうちょっと頑張らないと使い物にならないかなぁ。

まとめてリンケージとリンケージ解除

まこと — Thu, 25 Nov 2010 20:26:37 +0000

たくさんリンケージする時、手動だと面倒なのでjsflでパパパッと済ませてしまおうというメモ。

参考1:リンケージの設定を自動化する | tanablog
上記のソースだとHOGE+連番なので
任意の接頭語+連番になるように少し書き換えて.jsflとして保存

こんな感じ。

var library = fl.getDocumentDOM().library;
var items = library.getSelectedItems();

//prompt("表示されるメッセージ", "入力されてる文字")
var myprefix=prompt("prefix", "test")

for (var i = 0; i < items.length; i++) {
//actionscriptに書き出し
  items[i].linkageExportForAS = true;
//最初のフレームに書き出し
  items[i].linkageExportInFirstFrame = true;
  items[i].linkageIdentifier = myprefix + i;
}

ライブラリの名前を活かしてリンケージさせるならこんな感じ？

var library = fl.getDocumentDOM().library;
var items = library.getSelectedItems();
var myprefix=prompt("prefixを付けるなら入力", "test")

for (var i = 0; i < items.length; i++) {
  items[i].linkageExportForAS = true;
  items[i].linkageExportInFirstFrame = true;
  items[i].linkageIdentifier = myprefix + items[i].name;//ここを変更
}

リンケージを解除するjsfl[引用]

var library = fl.getDocumentDOM().library;

library.selectAll();
library.setItemProperty("linkageExportForAS", false);

プロンプトでラジオボタンみたいなのを表示させて処理を分岐させるにはどうしたらいいんだろう。

参考2:Flashの拡張機能(pdf)

使い方メモ

[コマンド] – [コマンドの実行]からか
作成した.jsflを以下に保存するとツールバーのコマンド内に出現する

xpの場所

C:\Documents and Settings\[ユーザ名]\Local Settings\Application Data\Adobe\Flash CS3\ja\Configuration\Commands

参考3:jsflのすすめ – yama-ko.net blog

メモ / iframe 高さ取得変更クロスドメイン

まこと — Tue, 02 Nov 2010 19:34:43 +0000

こちらのページをそのまま参考にしてhttp://ja.w3support.net/index.php?db=so&id=153152
iframeで別ドメインにあるページを開いた時に、自動的にheightを調整する方法を試してみた。
(※ 別ドメインにあるファイルにjsを追加する必要あり)

別ドメインのhtmlに手を加えずに出来たら、確実に嬉ションしちゃうけど難しいみたいすなぁ。

構成

www.foo.com/home.html, which iframes
└＞ www.bar.net/framed.html, which iframes
└＞ www.foo.com/helper.html

記述例

www.foo.com/home.html

www.bar.net/framed.html

www.foo.com/helper.html

追記

結局iframe先のページに書き込むの事に代わりがないのなら
window.postMessage() を使って、クロスドメインの iframe の高さを設定する検証 – 写経日記の方がシンプルで素敵だ。

でもwindow.postMessage()というのを使っているので
以下のように(見よう見まねで)window.attachEventを追加してもIE7以下は広がらなかったです。

構成

www.foo.com/parent.html
└＞ www.bar.net/iframe.html

parent.html

www.bar.net/iframe.html

jQueryアコーディオンメニューddaccordion.js (Accordion Content script)の設置メモ

まこと — Mon, 01 Nov 2010 10:35:34 +0000

ddaccordion.js v1.9現在のお話
Dynamic Drive DHTML Scripts- Accordion Content script (v1.9)

このjs最後にクリックした要素をcookieに保存して
ページ変移後に最後にクリックした要素を開いた状態で移動出来るという便利なオプションがあるんだけど
子を持たない親だけのメニューが混ざっていると、
最後に子メニューを持った親をクリックした場所を記憶してしまい
ページ変移後に変なところが開いてしまう(分かりづらいと思うけど)
みたいな面倒な感じだったので途中経過をメモ。

多分すべての要素が子階層を持っているなら問題は無いのだけれども。

ddaccordion.jsを適用したメニュー


 親メニュー1
  
   子メニュー
   子メニュー
   子メニュー
  
 
 親メニュー2
  
   子メニュー
   子メニュー
   子メニュー
   子メニュー
   子メニュー
   子メニュー
  
 
 子なしメニュー1
 親メニュー3
  
   子メニュー
   子メニュー
   子メニュー
   子メニュー
   子メニュー
  
 
 子なしメニュー2

/*cssはあまり関係ないけど*/
#dd_box {
 width:438px;
 padding:20px;
 border:1px solid #E9E1CB;
 background:#FCFBF8;
 color:#fff;
 border-radius: 3px;

}

#dd_nav {
 font-size:80%;
 width:190px;
 background:#000;
 padding:7px 0;
 margin:0 auto;
border-radius : 4px;
 -moz-border-radius:3px;
}
#dd_box a {
 color:#fff;
 text-decoration:none;
 display:block;
 padding:0 10px;
 background:none;
 border:none;
}
/* 親 */
#dd_box li a {
 height:30px;
 line-height:30px;
 background:#000;
}
#dd_box li a:hover, #dd_box .chked { background:#1A4395; }
/* 子 */
#dd_box li li a {
 height:20px;
 line-height:20px;
 padding-left:2em;
 background:#252525;
}
#dd_box li li a:hover { background:#173267; }
#dd_box li { border-top:1px solid #555; }
#dd_box li,#dd_box li li,
#dd_box ul ul{
 list-style:none;
 padding:0;
 margin:0;
}

子メニュー無しのページにはclassかidを付けて、それが無ければすべてを閉じるようにした

例えば子メニューが無いページに.dd_childを付けておく
onloadで.dd_childががあるか無いか調べて、みつかったらアコーディオンを閉じる

window.onload=function(){
  var keywords="dd_child";
  var elems = document.getElementsByTagName("*");

  for(var i=0;i
とりあえずポスト

Firefoxでwindow.innerWidthとdocument.body.clientWidthの値がおかしい

まこと — Thu, 28 Oct 2010 12:04:13 +0000

(1マス=100px)

ブラウザのbody部分のサイズを取得したくて

window.onresize=function(){
w = document.body.clientWidth;
alert(w);
}

とやってみたらFirefoxが吐き出す値が大きすぎるうえに
あるサイズ以下になると一定の値しか返さなくなる。

アドオンがいけないのかな？とか色々消していったら
ナビゲーションツールバーを非表示にした時に期待した値を取れるようになりました。

ナビゲーションツールバーを無視してサイズを取得するにはどうしたらいいんだろう…

PhotoshopCS2以降でオブジェクトを等間隔に分布させる.jsxがあったよ。

まこと — Mon, 18 Oct 2010 14:07:23 +0000

illustratorやFireworksにある等間隔に分布ってものそい便利じゃないですか。
でも残念な事にphotoshopは出来ないんですよね、残念な事に。

そこでjsxで出来ないかな？と調べて書いてみようと頑張ったんですけど、
複数選択したレイヤーの情報を取得する事すら出来ずに挫折しました(割と手前の壁)。

しかし、海の向こうではすでに等間隔に分布させるjsxを作って配布されてる方がいらっしゃいました、すごいなー。

ダウンロード:Adobe Photoshop Scripts | Trevor Morris Photographics
垂直方向用のjsxしか試してないけど、水平方向用や他にも沢山jsxがありまんた。

分布結果の違いを比べてみた画像

整列前の適当な配置、青い背景はサイズが分かりやすいようにとつけちゃった。

photoshopの左端を分布 / 重なるよねぇ

photoshopの水平方向中央を分布 / 最初何が起きたのか理解できなかった。

photoshopの右端を分布 / 重なるよねぇ

Adobe Photoshop Scripts | Trevor Morris Photographicsの
Photoshop > Scripts > Distribute Layers Horizontallyを使用

SUGEEEEEEEEEEEE！！！！！1
愛してる！！！！！！！！！

ie-css3.jsのベータが取れて名前がSelectivizr(:select[ivizr]？)に変わってた

まこと — Thu, 23 Sep 2010 09:25:42 +0000

IE8以下にcss3の擬似クラスを対応させるjsのバージョンが1.0になって名前と配布サイトが変わってた。
Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

いつのまにか擬似否定クラス E:not(s) にも対応してた(0.9.7bから？)

使い方メモ

ie-css3.jsと変わらない(おそらく)

上記サイトからelectivizr.jsとお好きなjsライブラリをダウンロードしてくる
NWMatcher – CSS3 Selector and MatcherにあるNWMatcher 1.2.2.jsを使うと全開でいけるみたい。

ヘッダ部分の例

気をつける事
やっぱり、ローカルじゃ機能しない。
head無いに書いたcssやインラインのcssの指定は効かない。

そこらへんは前回試した0.9.5bと同じですた。
ie-css3.js ( :nth-childなどのCSS3擬似クラスをIEでも使えるようにするjs ) で失敗した事。 | 乱雑モックアップ

.psd内のテキストレイヤーからテキストを抽出して.txtファイルに書き出してくれる.jsx

まこと — Tue, 31 Aug 2010 16:46:02 +0000

Bram.us » PS_BRAMUS.TextExport 1.3 – Automatically export all Text layers from Photoshop PSD to a Text file (PSD2TXT)

(レイヤー階層で)下にあるテキストレイヤーから順番にテキストを抽出してテキストファイルに書き出してくれる.jsx

フォルダ階層が深いと処理にものすごく時間がかかって不安になる。
逆にフォルダ階層が浅いとテキストレイヤーの数が多くても結構速く終わる感じがしました
(The quick brown fox jumps over the lazy dog.と書いてあるテキストレイヤーを60程複製したpsdを処理させたらだいたい10～20秒くらいで完了しました)。

複数psdを開いている場合

TextExport has detected Multiple Files.
Do you wish to run TextExport on all opened files?

と聞かれるので、開いているファイル全て処理したいなら「はい」にして
選択してるファイルだけ処理したいなら「いいえ」を選ぶ。

随分昔からあるscriptみたいだけど知らなかったなぁ、あると便利でした。
という事でメモ。

簡単に Another HTML-lint gatewayで html のチェックが出来るブックマークレット。

まこと — Tue, 15 Jun 2010 15:48:44 +0000

[追記]現在は使えなくなっちゃいました＞＜；；；

うおおおおおおおおおおおおおおおお突然ですがこれは『気合いの雄叫び』ですッ！

昔は Web developer ( Firefoxのアドオン ) から簡単に、現在見ているページをAnother HTML-lint gatewayでチェック出来ていたのですが、ある日気がつけば以下の文言が表示されるようになって慌てた人も多いのではないでしょうか？

自分がそうだったからって、他の人もそうなんじゃないですかとか決めつけちゃって失礼ですよね、ごめんなさい。
とりあえず、ひとしきり騒いだ後、“外部からのGETリクエスト停止” になった事を知り肩を落としそして少し泣きました。

それ以来 ( 2009年4月30日以降) html の検証をするには、Another HTML-lint gatewayにアクセスして
チェックしたいHTMLのURLを指定するか、HTMLを下のテキスト領域に直接記述して、[チェック] ボタンを押して使う事になりました。

当時はもう文法チェックする頻度も下がってはいたけど、Web developerからチェックする事に慣れきっちゃっていたので
いざ普通に使おうとしたらウオオオオオウダラァーーーッとまでは行かないまでも、面倒くさい事面倒くさい事。

あれから一年余、なんと現在も有効なAnother HTML-lintのブックマークレットがありましたッ！。
Another HTML-lintのブックマークレット | 沖縄のWebデザイナーChopstickBrunch
また、簡単にlintにかけられるなんて日が来るなんて、感無量。

人は慣れる。

しばらく ChopstickBrunch 様のブックマークレットを使っていましたが、
これだとチェックしたいページ自体が lint の結果に置き換わってしまう為、若干不便に感じるようになってきました ( ゆとり世代じゃないけどゆとってるなぁ… )。

でもって検証結果を別のタブで開けるようにならないかな？と、勝手に手を加えたのが以下です。

Another HTML-lint gateway のチェック結果をタブで開くブックマークレット

( target=”_blank” なだけだから、タブで開くとは限らないけど )

javascript:var%20f%20=%20document.createElement('form');f.setAttribute('target','_blank');var%20o=new%20Object;o[0]=document.createElement('input');o[0].setAttribute('type','text');o[0].setAttribute('name','Stat');o[0].setAttribute('value','on');o[1]=document.createElement('input');o[1].setAttribute('type','text');o[1].setAttribute('name','Method');o[1].setAttribute('value','URL');o[2]=document.createElement('input');o[2].setAttribute('type','text');o[2].setAttribute('name','URL');o[2].setAttribute('value',location.href);o[3]=document.createElement('input');o[3].setAttribute('type','text');o[3].setAttribute('name','ViewSource');o[3].setAttribute('value','on');for(var%20i%20in%20o){f.appendChild(o[i]);}document.body.appendChild(f);f.action%20=%20'http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi';f.method%20=%20'POST';f.submit();

このリンクをブックマークしてもおkです→ Another HTML-lint タブで開く

ブックマークレットの使い方

うちもほとんど使った事がないんですけど簡単です。
FirefoxやChromeだと上のリンク(Another HTML-lint タブで開く)をブックマークツールバーまでドラッグ&ドロップ
IE8だと(6や7も?) リンクを右クリックして、お気に入りに追加、なんかalertが開くけどok。

lintチェックしたいページでお気に入りに入っているリンクをクリックすれば実行。

別窓や別タブで結果が開くのウザイよって場合は
Another HTML-lintのブックマークレット | 沖縄のWebデザイナーChopstickBrunch様のページを参考にしてみてください。

[無料のiPhoneアプリ] いつでも、どこでも、JavaScriptプログラミング！ / JavaScript Anywhere で jQuery。

まこと — Wed, 09 Jun 2010 17:45:11 +0000

ちょっと前に見つけて入れてみた iPhone app JavaScript Anywhere が素敵です。
作者様のサイト
JavaScript Anywhere

HTML、外部.js、外部.cssの各1ファイルを自由に編集していつでもどこでも内蔵ブラウザで動作確認(実行)できます。
そして出来たモノを自分宛にメール送信する事も可能。
iPhoneのキーボードだとタグの入力が恐ろしく面倒臭いんですけど(個人的に ‘ (シングルクォーテーション)を入力した後にアルファベットに戻るのが納得いかない)、人って慣れるもの。
けどiPhoneで辞書登録ができたら定型文を使えて便利なのになぁ。

でもって JavaScript Anywhere を使って jQuery の練習をする

JavaScript Anywhere は jQeury を持っていないので Google Code のものを使わせてもらう。
Google AJAX Libraries API – Google Code
デベロッパーガイド – Google AJAX Libraries API – Google Code

HTMLの内に

もしくは

これでjQueryが使えるハズ。

動作確認

JSタブに

$(function(){
$("body").prepend("Hello");
});

と入力して Hello が表示されたらおkなハズ。

JavaScript Anywhere のダウンロードはこちら

iTunes App Store で扱っている iPhone、iPod touch、iPad のJavaScript Anywhere

jQueryでアンカーリンクをスムーズスクロールの練習

まこと — Mon, 07 Jun 2010 15:28:50 +0000

要素を動かすのは前回の(フローティングメニュー作成)でなんとなくわかったけど
全体をスクロールさせる方法はさっぱりなので調べた。

$(function(){
  $('a[href*=#]').click(function() {
    var $target=$(this.hash);
    var targetY=$target.offset().top;
    $('html').animate({scrollTop: targetY},2000);return false;
  });
});

$('a[href*=#]').click(function() {

#を含むリンクをクリックすると

var $target=$(this.hash);
var targetY=$target.offset().top;

クリックされた要素のハッシュを$targetに入れて
offset().top;で位置を調べてtargetYに入れる

$('html').animate({scrollTop: targetY},2000);return false;

scrollTop(=スクロールの位置)に先程調べたtargetYを入れる、2000ミリ秒で移動完了。

以上のコードでFirefox、Opera、IE8と動いた
さすがjQuery、案外簡単にできちゃうんだなぁと思っていたら
Chromeで動かない、うんともすんとも言わない(safariの確認はしてない)。

$(‘html’).を変更する

$('html,body')

とすると
chromeでも動くようになった、良かった。

だが断るしかし

今度はOperaで上に戻るスクロールが通常のアンカーリンクのように一瞬でページの一番上まで戻り、それからゆるゆるとスクロールしながら画面がチカチカする。

Operaでは、htmlとbody両方の指定が有効になるのがチラつきの原因みたい。とほほ
jQueryでscrollToを使うときの注意点 – NoteBook
$(‘html’)と$(‘body’)のどちらが有効か?の表がある。

しかし、operaでは、両方の指定が有効になり、ちらつきの原因となるので、以下のように指定します。

$($.browser.opera ? document.compatMode == ‘BackCompat’ ? ‘body’ : ‘html’ :’html,body’)
.animate({scrollTop:目標のオフセット値Y,scrollLeft:目標のオフセット値X});

流用させてもらったらこうなった。

$(function(){
  $('a[href*=#]').click(function() {
    var $target=$(this.hash);
    var targetY=$target.offset().top;
    $($.browser.opera ? document.compatMode == 'BackCompat' ? 'body' : 'html' :'html,body').animate({scrollTop: targetY},2000);return false;
  });
});

しかしこの三項演算子が全く解読できない＞＜

今回チェック用のhtmlとcss

clicktest

link

wrap内

abc

def

ghi

to wrap

メモ

$.browser.～
jQuery.browser – jQuery 日本語リファレンス

※jQuery 1.3からはサポート外。jQuery.supportを使って下さい。
navigator.userAgentを元に、ユーザエージェントを識別するためのフラグを連想配列として保持しています。
現時点で有効なフラグは次の通りです。
* safari
* opera
* msie
* mozilla

Google Analytics 非同期トラッキングコードが、標準のトラッキングコードとしてご利用いただけるようになりました。とのこと。

まこと — Sat, 05 Jun 2010 20:46:38 +0000

よくわかっていないで書き込んでます。今更でしたらごめんあそばせ。

どうも非同期トラッキングコードが正式版になったみたい。
Analytics 日本版公式ブログ: 成長し続ける Google Analytics のエコシステム

非同期トラッキングコード
昨年 12 月に公開した非同期トラッキングコードが、標準のトラッキングコードとしてご利用いただけるようになりました。新たにプロファイルを作成した際、標準のトラッキングコードとして、トラッキングコード設定ウィザードに表示されます。

違いは何?何かいいことあるの?

いままでの直前だったトラッキングコードの挿入場所がの直前に変更されたみたい。
それによってより正確に計測できる、と。

Analytics 日本版公式ブログ: Google Analytics のトラッキングコードが新しくなりました

新しい非同期トラッキングコードは、ga.js トラッキングコードで計測可能なデータセットと同様のものを得ることができます。

両者の唯一の違いは、計測対象ページへの挿入場所です。従来のga.js トラッキングコードの場合、body セクションの最後に挿入することをご推奨しておりました。一方、新しい非同期トラッキングコードは、他のJavaScript コードの読み込みが完了しなくても正常にロードできるため、HTMLファイル内の head セクション内に記述することが可能です。

ページ末尾に入れる ga.js の場合、ページの読み込みに時間がかかると、り離脱したセッションを正確に計測できないという不都合がありましたが、新しいトラッキングコードではそのような懸念がなくより正確なデータを計測できるため、ぜひ多くのユーザーの皆さまにご利用頂ければと思います。

「り離脱したセッション」は原文ママです。

メリットの説明

非同期トラッキングコードの主なメリットの 1 つは、HTML 文書の一番上に配置できることです。これによって、ユーザーがページを離れる前にトラッキングビーコンが送信される可能性が高くなります。JavaScript コードはセクションに配置することが慣例となっており、このコードをセクションの一番下に配置すると最高のパフォーマンスが得られます。

トラッキングコードの設定 – Analytics ヘルプ

トラッキングコードの設定

実際のトラッキングコードが載ってる場所

Analytics 設定 > プロファイル設定 > トラッキングコード

アナリティクス以外のjsの置き場所について

あらゆるブラウザで最高のパフォーマンスを達成できるように、サイトの他のスクリプトを以下のいずれかの場所に配置することをお勧めします。
HTML の lt;head> セクションのトラッキングコードの前
トラッキングコードとすべてのページコンテンツの後（HTML body の一番下など）

lt;head>は原文ママ。&が抜けてる、google誤字が多いなぁ。

すでに詳しく検証されてる方がいらっしゃいました(はてブ結構な数ついてるのに気付かなかったなぁ)。
Google Analytics 非同期トラッキングコード再考 | MOL
読み込み時間の高速化とか計測の精度向上とか、移行出来るならしたい感じ。

前置きが長くなったけど本題

これを読んでいて気になったのは、今WordPressに挿入してるトラッキングコードの事。
乱雑モックアップにはUltimate Google Analytics(OraTransplant » Ultimate Google Analytics plugin for WordPress)というプラグインで自動挿入されとります。
これ最後にアップデートされたのが2008年の2月と少し古い。
今回の変更にあわせてアップデートされるかどうかも微妙。

なので新しい非同期トラッキングコードに対応したプラグインがないかPlugin Directoryを探して見つけたのがこれ。
WordPress › Google Analyticator « WordPress Plugins

NEW! Supports standard Google Analytics tracking via the latest async tracking methods (faster and more reliable than the older ga.js tracking method)

使い方

他のプラグインと一緒。
pluginsにアップしてプラグインを有効化
設定に出現したGoogle Analyticsを開いてUA-xxxxxxx-xを入力。
追跡したいファイルがあるならDownload extensions to track:に拡張子を,(カンマ)区切りで入力、.(ドット)は必要ないっぽい。
特に変更も必要なく使えそうだった。

下の方にGoogle Analytics profile ID:とかいう見覚えの無い項目があった。
Entering your profile ID is optional, and is only useful if you have multiple profiles associated with a single UID.
あなたのプロファイルIDを入力するオプションであり、複数のプロファイルを1つのUID を関連付けられている場合にのみ有用です。(google翻訳)

Google Analytics profile IDの確認方法

アナリティクスにログインして編集から確認できた。

切り替えはどういったタイミングで行えばいいんだろう。
とりあえずUltimate Google Analyticsは切ってみた。

選択範囲にあわせてガイドを引く.jsx

まこと — Thu, 03 Jun 2010 17:12:50 +0000

(なんだかガイドを引くjsxばっかり作ってる気がするけど)
選択範囲に沿ってガイドを引けた方が、前に作ったカンバス枠にガイド引くだけの機能よりシンプルさはあまり変わらず使い道が広がって便利だよなぁとほんのり思ったので改造した。
Ctrl + Aすればカンバス枠の選択範囲が出来るわけだし。

使い方

[ファイル] – [スクリプト] – [参照] から下からダウンロードしたjsxを選択する。
(xpの場合) C:\Program Files\Adobe\Adobe Photoshop CS3\プリセット\スクリプトの中に.jsxを入れておけば[ファイル] – [スクリプト] から使用できる。

ExtendScript Toolkitからも使える。

ダウンロード

addGuide.jsx｜選択範囲にあわせてガイドを引く.jsx

挙動 / どんなガイドが引かれるか

こんな感じの選択範囲だと

こうなる

四角じゃない選択範囲だと

こうなる

変な形の選択範囲だと

こうなる、予想通り。

ソース

function selectionRange(){
	try {
		//選択範囲を取得
		var boundsObj = activeDocument.selection.bounds;
		x1 = parseInt(boundsObj[0]);
		y1 = parseInt(boundsObj[1]);
		x2 = parseInt(boundsObj[2]);
		y2 = parseInt(boundsObj[3]);

		//選択範囲にガイドを引く
		guideWrap("Vrtc",x1);//左上
		guideWrap("Vrtc",x2);//右上
		guideWrap("Hrzn",y1);//左上
		guideWrap("Hrzn",y2);//左下
	}
	catch(e){
		alert("選択範囲がありません。");
	}
}

function guideWrap(direction,position){
var id1 = charIDToTypeID( "Mk  " );
    var desc1 = new ActionDescriptor();
    var id2 = charIDToTypeID( "Nw  " );
        var desc2 = new ActionDescriptor();
        var id3 = charIDToTypeID( "Pstn" );
        var id4 = charIDToTypeID( "#Pxl" );
        desc2.putUnitDouble( id3, id4, position );
        var id5 = charIDToTypeID( "Ornt" );
        var id6 = charIDToTypeID( "Ornt" );
        var id7 = charIDToTypeID( direction );
        desc2.putEnumerated( id5, id6, id7 );
    var id8 = charIDToTypeID( "Gd  " );
    desc1.putObject( id2, id8, desc2 );
executeAction(id1,desc1,DialogModes.NO);
}

// ==========
// 実行
// ==========
selectionRange();

参考

選択範囲の取得方法を参考にさせていただきました。
崖っぷちWEBデザイナーブログ | photoshopのscript機能メモ（CS3）

大量のテクスチャー画像を、超簡単にパターン登録する.jsx ( バッチ処理不使用

まこと — Sun, 23 May 2010 12:02:35 +0000

以前作ったjsxは ( Fireworksのテクスチャー画像等をPhotoshopのパターンに一括登録したい )

.jsxをアクションに登録して
[ファイル] – [自動処理] – [バッチ] から登録したアクションを指定

といった手順を踏む必要があったけれど今回のはバッチ処理なしでいけるはず、多分。
WindowsXPのCS3では大丈夫だった。

どういったモノ?

パターンに画像を、ファイル名で登録するだけ。
大量に登録したい時に威力を発揮するはず。

例えばこうゆう.patではないパターン画像を超簡単に一気に登録できる。
patterns: set no.7 by ~77words on deviantART

使い方

ExtendScript Toolkitからも使える。

ダウンロード

addPattern.jsx｜バッチを使わずに画像をファイル名でパターンに追加する.jsx

// ==========
// File Name: addPattern.jsx
// File URI: http://sakurachiro.com/_exercise/javascript/jsx/addPattern.jsx
// Description: 画像をパターンに一括登録する
// Author: makoto
// Version: 1.0.0
// Author URI: http://blog.sakurachiro.com/
// Copyright: Copyright 2010 makoto
// ==========

textureFolderObj = Folder.selectDialog("パターンに登録したい画像があるフォルダを選択してください");
if (textureFolderObj) {
  fileSet(textureFolderObj);
}

function fileSet(textureFolderObj) {
  var textureFileList = textureFolderObj.getFiles();
  for (var i = 0; i < textureFileList.length; i++) {
    var textureFileObj = textureFileList[i];
    if (textureFileObj.name.indexOf(".") < 0) {
      //拡張子がなければフォルダと判断
      fileSet(textureFileObj);
    } else if (textureFileObj.name.match(/.png|.jpg|.jpeg|.gif/g)) {
      //正規表現に自信はないけど動いているようだ
      addTexture(textureFileObj);
    }
  }
}

function addTexture(textureFileObj) {
	open(new File(textureFileObj));

  // ==========
  // 登録する
  // ==========
  var idMk = charIDToTypeID("Mk  ");
  var desc1 = new ActionDescriptor();
  var idNull = charIDToTypeID("null");
  var ref1 = new ActionReference();
  var myPtrn = charIDToTypeID("Ptrn");
  ref1.putClass(myPtrn);
  desc1.putReference(idNull, ref1);
  var idUsng = charIDToTypeID("Usng");
  var ref2 = new ActionReference();
  var idPrpr = charIDToTypeID("Prpr");
  var idFsel = charIDToTypeID("fsel");
  ref2.putProperty(idPrpr, idFsel);
  var idDcmn = charIDToTypeID("Dcmn");
  var idOrdn = charIDToTypeID("Ordn");
  var idTrgt = charIDToTypeID("Trgt");
  ref2.putEnumerated(idDcmn, idOrdn, idTrgt);
  desc1.putReference(idUsng, ref2);
  var idNm = charIDToTypeID("Nm  ");
  var docName = app.activeDocument.name;
  desc1.putString(idNm, docName);
  executeAction(idMk, desc1, DialogModes.NO);

  // ==========
  // 閉じる
  // ==========
  var idCls = charIDToTypeID("Cls ");
  executeAction(idCls, undefined, DialogModes.NO);
}

今回詰まったところ

バッチにある「サブフォルダをすべて含める」をjsxでどうやって書いていいのかがさっぱりだった。

こんな風に書いて、

var myFolder = Folder.selectDialog("フォルダを選択");
var myFiles = myFolder.getFiles();
for(i=0;i
下記画像ような中身のフォルダを選択すると、困った事にmyFiles.lengthは7になる。


そんな時とても参考になったページ
IllustratorとPhotoshopのファイル名埋め込み

IllustratorとPhotoshopのファイル名埋め込み – for iPhone
ExtendScript Toolkitを使ってみたんだけど

ちゃんと書けていたのに「対象アプリケーションを選択」でPhotoshopを選んでいなかった為、いつまでもopenが関数ではありません等のエラーが出て動かず途方に暮れた。



ちゃんとadobe photoshop cs3を選択しなければ。

懲りずに ) jQueryを使った画面スクロールに合わせてついてくるフローティングメニューが一応形になりまんた。

まこと — Fri, 21 May 2010 14:11:19 +0000

前回までの作りは、jsを読み込む元々のhtml(とcss)に多少依存していました。

positionで段組みしてるhtmlに、コンテンツ部分が短い時はmenuがfooterが食い込んじゃう！どうしよう！
なんて、そんな事はコーディングする時にどうにかする問題で、javascriptでどうにかしなきゃならんもんではないだろうし
同じように、メニューを動くようにする為に、予めpositionを仕込んでおかなければならないなんてのも良くないかと。

今回は、元々あるレイアウト(htmlやcss)になるべく手を加えずとも動くようにしたい。を念頭にやったので、floatで組んだページも、positionで組んだページも、フッターの有無に関わらず使えるように出来たと思う。
メニューとフッターのidを合わせるか追加する必要はあるけれど。

: floatレイアウトにフローティングメニューを追加のサンプル
: positionレイアウトにフローティングメニューを追加のサンプル

作成したjavascript
floatingmenu-v2.0.2.js

あるぇ？
“続きを読む”以降の文章が全部なくなってる…なぜ…

使い方

次の2つのファイルをダウンロード

イージングを追加したいなら以下も。

jQuery Easing Plugin

hemlの内で読み込む

<script type="text/javascript" src="_js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="_js/floatingmenu-float-a.js"></script>

floatingmenu-v2.jsを開くと最初に設定する部分があるので適当に書き換える。

//メニューの上部に余白を設けるなら入力 / 単位px
  offsetY = 10;
//absoluteでコンテンツ部分が短い時のメニューとフッターの余白 / 単位px
  minMargin = 10;
//処理時間 (ミリ秒)  / 0だとposition:fixedのようになる、チラつくけど
  duration = 900;
//移動させるメニューのid
  _foName = '#nav';
//positionで組んだレイアウトは「0」 floatで組んだレイアウトは「1」
  _navRelative = 1;
//フッター部分のid
  _ftName = '#footer';
//イージングタイプ / 使いたいのがなければjQuery Easing Pluginを追加してもいい
  easingSet = 'swing';

つまったところや、よく分からない部分

cssのプロパティの記述が違う部分がある？
margin-top は marginTop とも書ける？
いやmarginTopはcssじゃないのか、なんだろ？

cssを複数指定する方法

$("#example").css('background', 'tomato').css('height','100px').css('text-align','center');
$('#example').css({'height' : '100px','text-align' : 'center','background' : 'tomato'});

なので作成したfloatingmenu-v2.0.1.jsの以下の部分を

$(_ftName).css('position', 'absolute').css('width', ftWidth).css('top', navHeight + navSetY + minMargin);

~~こう書いたら上手く動かなかった~~と思ったら動いた。あるぇ?

$(_ftName).css({
'position' : 'absolute',
'width': ftWidth,
'top': navHeight + navSetY + minMargin
});

上記確認をしていて不具合を発見 v2.0.2に修正した。
positionを使ってでfooterがnavと重なるのを解決させると、
footerの下に何か要素があった場合、今度はそれがnavに食い込んでしまうので
footerにmargin-topをつけてfooterの下の要素も押し出すようにした。
そうした所bodyのheightが伸びるから、navがスクロールする場合があった。
flagをつけてfooterを伸ばした時はnavを動かさないようにした。

console.log() の位置によって挙動が変わる？
出来ないと思ってた事が console.log を削除すると動く。

pxがつく要素からpxを取るには

parseIntを使う。

#example{
margin-top:100px;
}

$('#example').css('margin-top');
//100px

parseInt($('#example').css('margin-top'));
//100

parseIntを使えば文字列を数値に変換できるので、以下の記述では「300+300+”px”」と認識されます。最初の+は数値と数値の間にある算術演算子の+なので足し算として扱われて「600」になり、次の+で文字列の「px」と連結されて、「600px」を設定できます。
parseInt($("#navi .pageWrap").css("margin-left"))+300+"px"

ASCII.jp：jQueryで作る画像ギャラリーのチュートリアル｜Web制作の現場で使えるjQuery　UIデザイン入門

続き / スクロールに合わせて、移動するメニュー(要素)

まこと — Tue, 18 May 2010 06:26:37 +0000

二転三転中、最初の見極めが甘いんだろうなぁ
作って試してみると、じゃあこうゆう時はどうなる？こうなったら？が出てくること出てくること。
あーしたい、こーしたいって欲も。

前回の練習以降に変更した事。

_1.footerと被った部分の処理とあえて移動させない処理。
ウインドウサイズをちょこちょこ縮めていくと(普通はそんな使い方しないけど)メニューとフッターが被る。
処理を1.ヘッダーが画面内にある場合 / 2.フッターが画面内にある場合 / 3.両方画面内にない場合の3段階に分けて、メニューが移動する位置などを決めるようにした。

_2.コンテンツの中身が全然ないhtmlの場合
4.ヘッダーもフッターも同じ画面にある場合はどうなるの?と思って試してみた。
コンテンツ部分を短くしたら(このページは現在製作中です的な長さ、公開するなよって話)不具合が。

_3.コンテンツの中身が全然ないhtmlの場合:修正
短い場合の修正として、コンテンツの高さを無理やり広げた。
そうしたところ、今度はbodyの高さを取得する順番なんかが狂ってしまった。
スクロールに合わせて移動するメニューなのに移動させない処理を追加

_4.javascript外部化、要素名を変数化
いままでのままだと、移動する要素ややヘッダーやフッターの名前を変更したい時に書き換える部分が沢山あるので変数にした、速度とかも。あとhead内の記述から.jsにした。

外部化したけど、どんなhtmlにも読み込んだらそのまま使えるの?

これがまた使えないんですよねぇ。
まずフッター要素が無いと使えない。ふむー

次に、position周りの指定は自分でやる必要がある。
移動する要素のidも揃える、これは仕方がない。

他の人はどうやってるんだろう?

こういったフローティングメニューを配布してる人の設置方法を流し読みした感じだと、
いろんなhtmlに使う場合でも、フロートさせる要素しか変更しないで平気そうなんですよね。

どうやったら簡単に使いまわせるようになるんだろうか(次の課題)。

[追記 / 20100518 19:24]
ちょっと調べた。
positionを使った2カラムレイアウトの考え方がそもそも違ってたみたい。

大体#navにabsoluteをつけるか / relativeかの2パターンあった。

うちのやり方は

#navにabsolute

(親要素にrelative)。
で#articleのmarginに#navのwidth分を設定してズラす。
これだと見た目は2カラムになっているけど、実際は1カラム。

メリット
左右marginや#navのwidthなんかをemで設定出来る、あと#articleのwidthを設定しなくてもいい。

デメリット
見た目が2カラムだけど実際は1カラムだから、#articleの内容が#navより少ないと#footerが食い込んでくる(#navの高さで#containerが拡張されない)。

#containerがrelativeで#navもrelativeの場合

floatと併用してやってるみたい。

メリットとデメリット
両方ともfloatの2カラムと同じ。

#navも#articleもwidthをちゃんと設定しなきゃいけないし、
左右marginにemを使ったりしたら文字サイズを拡大したときにカラムが崩れる。
アバウトに組めないけど普通はpxできっちりやってるからあまり困らない?

なにより#articleの内容が#navより少なくても、
#containerにclearfixを使えばrelativeのデメリットに書いた現象は起きないです。

うちが今回使ってたcssの組み方だと、最初の理由で#articleの高さが無い時に#footerが食いこむ。
それを回避する為にjQueryを使って(練習なので)#navの高さを#articleの高さに移植した。

なので、高さを計算するのに#articleか#footerの名前が必要だった。
#containerにmin-height使えばいいんだけど、せっかくだから高さ計算しないでも使いたいなぁ。

#navにもrelativeの方すると、#articleが短いときに重なりはしないだろうけど、ウインドウを縮めていったときにどうやってstopする位置を計算するんだろう?

現状のソースと使い方

直接floatingmenu.jsを、開いたりするのはこっちから。

使い方

_1. / 以下の二つを保存して読み込む

_jsフォルダに保存してるならこんな感じ。

_2. / “floatingmenu.js”を開いて11行目から適当に変更

offsetY = 13; //フロートさせるボックスの上マージン単位はpx。
duration = 800; //処理時間 (ミリ秒) 0だとposition:fixedのようになる、チラつくけど
_mcName = ‘#main’; //メインコンテンツ部分
_foName = ‘#primaryNavigation’; //フロートさせるボックス部分
_ftName = ‘#footer’; //フッター部分

_3. / htmlとpositionの処理

現状footer要素が必要
フロートさせるボックスにposition:absolute; 親要素にposition:relative;

ソース / javascriptソースをフォーマットしてくれるサイトを利用しました。
Online javascript beautifier

[修正した / 20100518 17:23]
でもまだ修正がある、どうしよう。

//jquery.easing.1.3.jsから
jQuery.extend(jQuery.easing, {
  easeOutCubic: function (x, t, b, c, d) {
    return c * ((t = t / d - 1) * t * t + 1) + b;
  }
});

$(function () {
  //[設定する部分]-------------------------
  offsetY = 13; //メニュー上のマージン 1em
  duration = 800; //処理時間 (ミリ秒) 0だとposition:fixedのようになる、チラつくけど
  _mcName = '#main'; //メインコンテンツ部分
  _foName = '#primaryNavigation'; //フロートさせるボックス部分
  _ftName = '#footer'; //フッター部分
  //[/設定する部分]-------------------------
  mainContent = $(_mcName).outerHeight(true); //メインコンテンツの高さ
  navHeight = $(_foName).outerHeight(true); //ナビゲーションのmargin+border+padding+heightを合わせた高さ
  navHeights = navHeight + offsetY;

  bodyHeight = $('body').outerHeight(true); //コンテンツの高さ
  naviSetY = $(_foName).offset().top; //ナビゲーションの初期座標(=margin・paddingを含めたheadの高さ)
  footerSetY = parseInt($(_ftName).offset().top); //フッターの初期座標(=margin・paddingを含めたheadの高さ)
  naviMarginSetY = naviSetY - offsetY; //ヘッダの高さを超えた時の位置用
  //↓body全体の高さからfooterの座標を引くとbodyのpaddingやmarginなどを含めたfooterの高さになる?
  footerArea = bodyHeight - footerSetY; //footer、実際の高さ
  desiredHeight = navHeights + footerArea; //必要な高さ(footer+naviの高さ)
  naviMaxY = bodyHeight - desiredHeight; //naviが重ならずに降りられる一番下
  floatObjMoveChk(mainContent - navHeights);
});

//スクロール毎の処理

function floatObjMove() {
  $(window).scroll(function () {
    var naviScrollTop = parseInt($(this).scrollTop()); //スクロール量
    if (navHeights < windowHeight) {

      //スクロール量が最初の位置より小さい内は
      if (naviScrollTop <= naviSetY) {
        $(_foName).animate({
          top: 0
        }, {
          duration: duration,
          queue: false,
          easing: "easeOutCubic"
        });
      }
      //
      else if (naviMaxY < naviScrollTop) {
        $(_foName).animate({
          top: naviMaxY - naviSetY
        }, {
          duration: duration,
          queue: false,
          easing: "easeOutCubic"
        });
      }
      //(naviMaxY-naviSetYの理由:メニュー自体ヘッダーの下で0だけど、bodyからみたらヘッダ分下にある
      //ヘッダもフッタも無い位置
      else {
        $(_foName).animate({
          top: naviScrollTop - naviMarginSetY
        }, {
          duration: duration,
          queue: false,
          easing: "easeOutCubic"
        });
      }
      //ウインドウサイズが足りないので動かない。
    } else {
      //console.log("ウィンドウの高さ:"+windowHeight," / メニューの高さ:"+desiredHeight,"クリック出来ないメニューが出来るので動かさない");
    }
  });
}

//リサイズしたらwindowのサイズを変更
$(window).resize(function () {
  windowHeight = parseInt($(window).height()); //windowのサイズ
});

function floatObjMoveChk(val) {
  if (val < 0) {
    $(_mcName).css('height', navHeight);
  } else {
    windowHeight = $(window).height(); //変更後windowのサイズ
    floatObjMove();
  }
}

修正前

//jquery.easing.1.3.jsから
jQuery.extend(jQuery.easing, {
  easeOutCubic: function (x, t, b, c, d) {
    return c * ((t = t / d - 1) * t * t + 1) + b;
  }
});

$(function () {
//[設定する部分]-------------------------

  offsetY = 13; //メニュー上のマージン 1em
  duration = 800; //処理時間 0だとposition:fixedのようになる、チラつくけど
  _mcName = '#main'; //メインコンテンツ部分
  _foName = '#primaryNavigation'; //フロートさせるボックス部分
  _ftName = '#footer'; //フッター部分

//[/設定する部分]-------------------------

  mainContent = $(_mcName).outerHeight(true); //メインコンテンツの高さ
  navHeight = $(_foName).outerHeight(true); //ナビゲーションのmargin+border+padding+heightを合わせた高さ
  navHeights = navHeight + offsetY;

  floatObjMoveChk(mainContent - navHeights);
});

function floatObjMoveSet() {
  bodyHeight = $('body').outerHeight(true); //コンテンツの高さ
  windowHeight = $(window).height(); //windowのサイズ
  naviSetY = $(_foName).offset().top; //ナビゲーションの初期座標(=margin・paddingを含めたheadの高さ)
  footerSetY = parseInt($(_ftName).offset().top); //フッターの初期座標(=margin・paddingを含めたheadの高さ)
  naviMarginSetY = naviSetY - offsetY; //ヘッダの高さを超えた時の位置用
  //↓body全体の高さからfooterの座標を引くとbodyのpaddingやmarginなどを含めたfooterの高さになる?
  footerArea = bodyHeight - footerSetY; //footer、実際の高さ
  desiredHeight = navHeights + footerArea; //必要な高さ(footer+naviの高さ)
  naviMaxY = bodyHeight - desiredHeight; //naviが重ならずに降りられる一番下
  /*footerHeight=$(_ftName).outerHeight(true);*/
  floatObjMove();

}

//スクロール毎の処理

function floatObjMove() {
  $(window).scroll(function () {
    var naviScrollTop = parseInt($(this).scrollTop()); //スクロール量
    if (navHeights < windowHeight) {

      //スクロール量が最初の位置より小さい内は
      if (naviScrollTop < naviSetY) {
        $(_foName).animate({
          top: naviScrollTop
        }, {
          duration: duration,
          queue: false,
          easing: "easeOutCubic"
        });
      }
      //
      else if (naviMaxY < naviScrollTop) {
        $(_foName).animate({
          top: naviMaxY - naviSetY
        }, {
          duration: duration,
          queue: false,
          easing: "easeOutCubic"
        });
      }
      //(naviMaxY-naviSetYの理由:メニュー自体ヘッダーの下で0だけど、bodyからみたらヘッダ分下にある
      //ヘッダもフッタも無い位置
      else {
        $(_foName).animate({
          top: naviScrollTop - naviMarginSetY
        }, {
          duration: duration,
          queue: false,
          easing: "easeOutCubic"
        });
      }
      //ウインドウサイズが足りないので動かない。
    } else {
      //console.log("ウィンドウの高さ:"+windowHeight," / メニューの高さ:"+desiredHeight,"クリック出来ないメニューが出来るので動かさない");
    }
  });
}

//リサイズしたらwindowのサイズを変更
$(window).resize(function () {
  windowHeight = parseInt($(window).height()); //windowのサイズ
  //console.log("リサイズしたよ:"+windowHeight);
  floatObjMoveSet();
});

function floatObjMoveChk(val) {
  if (val < 0) {
    $(_mcName).css('height', navHeight);
  } else {
    floatObjMoveSet();
  }
}

jQueryの練習 / スクロールに合わせて、移動するメニュー(要素)

まこと — Sat, 15 May 2010 19:39:46 +0000

jQueryの練習
よくある”スクロールしてもついてくるメニュー”を、作ってみようと試行錯誤中。

やってる事は、position:absoluteしてある要素のtopを、スクロールした分に近づける処理の繰り返し、だと想像。
スクロール量の取得方法、要素をブラウザ上部からみた位置の取得方法、animateの使い方とイージングの追加方法等を調べて試してみた。

使ったライブラリ

jquery-1.4.2.js
jquery.easing.1.3.js / easingの種類を増やす

練習の途中経過

[追記 / 20100517]
IE6-7でめちゃくちゃ崩れててびっくりした。
以下を追加して回避

  top:0;
  left:0;/*これがないとIE7が右にずれる*/
  _margin-left:-12em;/*ie6が#mainのmarginに引きづられるバグの対処*/

IE6ではposition:absoluteしたメニューの次に続く要素のmargin分メニューが引きづられてた
ハックでマイナスマージンつかって戻した。
IE7はtop,leftのleftを指定しないとこれまた次の要素を基準に配置されてた(と思う)
追記ここまで。

Test page 1.スクロールに合わせて、移動するメニュー(要素):序

とりあえず動かしてみる、まずはそれからだ。
垂直スクロール量を取得するには以下の記述みたい
javascriptだと

var scrollTop  = document.body.scrollTop  || document.documentElement.scrollTop;

ブラウザ毎に挙動が違うのがjavascriptの嫌な所です。

jQueryだと以下で取得できるみたい。

$('html').scrollTop();
$(window).scrollTop();
$(document).scrollTop();

$(‘html’).scrollTop() はsafari3で常に0 が返されるので注意らしいです。

あとは、jQuery本体が使えるイージングはlinearとswingの二つだと知る。

Test page 2.スクロールに合わせて、移動するメニュー(要素):破

Webっぽいレイアウトの中に入れてみて高さを取得できるかテスト。:序に説明を書き足してたら、すでにヘッダのない2カラムになってたので、あんまり見栄えが変わらず意味がなさそうだけど、問題点が見えてきたのでよし。

メニューとコンテンツが被った時にどうするか、ウィンドウの高さが足りない時にどうするかなんかを考えたいところ。

Test page 3.スクロールに合わせて、移動するメニュー(要素):Q

:破だと、スクロールしてもメニューが初期のx座標を移動するのでヘッダが無い部分だと変。なのでそれを修正してみる。

現在の最終的なソースメモ(ゴミは後で削る)

css

html



  
    スクロールに合わせて、移動するメニュー(要素):Q
  
  
    
      乱雑モックアップ
      
        pagetop
        step3
        library
        htmlcode
        csscode
        jscode
        memo
      
    
    
      STEP3.headerが無い部分の高さ調整、footerと被った部分の処理。
      Lorem  ipsum dolor sit amet, consectetuer adipiscing elit.  Aenean commodo  ligula eget dolor.
    
  
  
    このページは乱雑モックアップのサンプルページです。

とりあえず次は

ウィンドウのサイズが狭いとフッタに被ったりしてるので、重なる前に移動を停止させたい。
どんな計算をすればいいのだろうか。
あと、Qの次は何てタイトルにすればいいんだろうか。

参考

scrollTop() – jQuery 日本語リファレンス
 jQuery の位置・サイズ関連メソッドまとめ – Cyokodog :: Diary
jQuery でブラウザの表示領域に対するサイズや位置情報を取得してみる – Cyokodog :: Diary
TO BE CONTINUED…

「黄金長方形の軌跡」で回転せよ!そこには「無限に続く力」があるはずだ・・・

まこと — Mon, 10 May 2010 20:40:33 +0000

javascriptの練習。
黄金比と白銀比を計算するフォーム。 > (ポップアップで開く)ポップアップはIEじゃ動かなかったなぁ。

作ってる途中で思った事、勘違いした事などを思い出してメモ

getElementsByTagName

こんなhtmlがあった時

次みたいな書き方したら全てのinputタグにアクセスして、valueを「チェンジ」に変更できると思ってた。でも出来ない。

document.getElementsByTagName("input").value="チェンジ";
// 結果:1,2,3,4,5

こうする。

var inputAll=document.getElementsByTagName("input");
for(var i=0;i
.onkeyup
なんか入力したら処理。

submitボタンとblurかfocusで計算を開始させていたんだけど、面倒臭かったのでonkeyupにした。
function funckeyupS(){
 var cdbox=document.getElementById("cd-box");
 var obj=cdbox.getElementsByTagName("input");
 for(var i=0;i
forの中”this”が自分を参照してた、これ普通だっけ?

iを使うと最後のiしかとれないんだっけ?
isFinite(変数とか数式とか文字列とか)
数値かどうか調べる、数値ならtrueを返してくれるらしい。
それなのに不思議だなと思う事。
/*
&goldvalue=inputに入力された数字
goldenRatio=黄金比
$a=1の辺
$b=0.618の辺
$ab=1.618の辺
*/
//$goldvalueが$aの辺で、入ってる数字が309だとして
function calGoldenRatio(goldvalue){
var $goldvalue=Number(goldvalue); //数字にして

if(isFinite($goldvalue)){ //判定
 $b.value=Math.round($a.value/goldenRatio); //四捨五入して$bへ
 $ab-ng.value=$a.value+$b.value; stringの309191が入る
 $ab-ok.value=parseInt($a.value)+parseInt($b.value); //500になる
 //$ab.value=Number($a.value)+Number($b.value);どっちがいいの?
}
parseInt()かNumber()を使わないと

どっちも数字のハズの$a.valueと$b.valueを足してるのにstringになる。

第2引数を指定してないparseInt()は、01や02などの文字列を渡すと8進数と解釈するらしい。
その他
ifで分岐させるとき、「値が入ってなかったらtrue」みたいにしたい時
if(!変数) //これはtrueになると思ったけど期待通りに動かなかった
if(変数==null) //こっちも
if(変数=='') //これはokだった
どうやるのが正しいんだろう。
あと何か思い出したら書いていきます。

ステージ枠と中央にガイドを引く.jsx

まこと — Fri, 30 Apr 2010 06:39:57 +0000

var posArr=[0,50,100];//位置%
var dirArr=["Vrtc","Hrzn"];//向き

function guideWrap(direction,position){
var id1 = charIDToTypeID( "Mk  " );
    var desc1 = new ActionDescriptor();
    var id2 = charIDToTypeID( "Nw  " );
        var desc2 = new ActionDescriptor();
        var id3 = charIDToTypeID( "Pstn" );
        var id4 = charIDToTypeID( "#Prc" );
        desc2.putUnitDouble( id3, id4, position );
        var id5 = charIDToTypeID( "Ornt" );
        var id6 = charIDToTypeID( "Ornt" );
        var id7 = charIDToTypeID( direction );
        desc2.putEnumerated( id5, id6, id7 );
    var id8 = charIDToTypeID( "Gd  " );
    desc1.putObject( id2, id8, desc2 );
executeAction(id1,desc1,DialogModes.NO);
}

for(var i=0;i
[追記 / 20100501] for文の中身を変更した。

使い方イメージ
上のソースを[適当な名前].jsxで保存。

program files以下のphotoshopフォルダにある\プリセット\スクリプト ( C:\Program Files\Adobe\Adobe Photoshop CS3\プリセット\スクリプト ) にぶち込むと[ファイル] – [スクリプト]から選べるようになるので便利。
[ファイル] – [スクリプト] – [参照(B)…]から[適当な名前].jsxを選んで使える。
ステージ枠にだけガイドを引くには
上の.jsxのままだとカンバスの中央にもガイドが引かれて邪魔かもしれない、真ん中のは必要ないよって場合は1行目の50を削除する。

ここを　　var posArr=[0,50,100];
こうする　var posArr=[0,100];

結構作ってる人がいる。
うちが作ってみた理由もこれと全く同じでした。

外枠にガイドを引くスクリプト | Dearps ～Adobe Photoshopに関するTipsや便利な裏技を紹介するサイトです～
カンバスのサイズに合わせたシェイプを描きたい場合等フォトショップはピクセルにスナップしてくれないので外枠にガイドをひく必要があります。
高機能、他のjsxもすばらしい。

Add Guides EX(1.0.0) – Adobe Photoshop
ダイアログボックスからガイドの位置・幅・間隔・数等を指定することによって、自動的に位置を計算してガイドを作成します。
さくさくと引ける。

flabaka – 複数のガイドを一度に引けちゃうJSX
x=50,x=100,x=150,x=200の計4本ガイドを引きたい場合、50,100,150,200と入力し、OKボタンを押します。

ie-css3.js ( :nth-childなどのCSS3擬似クラスをIEでも使えるようにするjs ) で失敗した事。

まこと — Wed, 28 Apr 2010 00:46:03 +0000

動作テストだからといってhtmlのhead内にcss書いて、ローカルで表示確認していたらエラーしか出なくて途方に暮れた…

その原因は2つありました。

ローカルだと機能しない
cssは外部化しておく

以下、使い方メモなど。

ヘッダ部分の例

ie-css3.jsダウンロード先
~~Keith Clark – IE CSS3 pseudo-class selectors~~

ie-css3.js以外にjavascript libraryが必要、色々対応してるので好きなのを選んで使う。
DOMAssistant 2.8.0と併用すれば以下の擬似クラス全てに対応するようだ。

v0.9.5bで対応している擬似クラス
Supported JavaScript Libraries

:nth-child
:nth-last-child
:nth-of-type
:nth-last-of-type
:first-child
:last-child
:only-child
:first-of-type
:last-of-type
:only-of-type
:empty
:enabled
:disabled
:checked
:hover
:focus
:target
::first-line
::first-letter

選択子 / 6.6.5 構造上の擬似クラス(日本語訳)

ie-css3.js動作確認サンプル
確かにIEでも擬似クラスが有効になってるけど、

のcssが無効になってる。使い方間違ってるのかな…

でもどうやら@importから先のcssファイルを読み込んでくれてないみたいだ。
書いてあった＞＜；；
A few things you should know:
    * Style sheets MUST be added to the page using a
 tag. You can still use @import in your style sheets. Page level style sheets won’t be parsed

    * Style sheets MUST be hosted on the domain as the page.

jQuery Masonryを使いたいんだけど

まこと — Sat, 19 Dec 2009 12:01:56 +0000

jQuery Masonryってのは、grid-a-liciousみたいにdivをタイルみたいに並べるやつ。

htmlのhead内で次の2ファイルを読み込んで

下のソースみたいのをbody内に書いて


ボックスボックスボックス
ボックスボックスボックスボックスボックスボックスボックスボックスボックスボックスボックスボックスボックスボックスボックス
ボックスボックスボックス

cssはこんな感じ。

#primary {
	width:870px;
}
.box {
	width:200px;
	float:left;
	background:#f33;
	border-radius:5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

最後にBasic Examplesのページに書いてあったのを追加してみるけど。

$('#primary').masonry({
    columnWidth: 100,
    itemSelector: '.box'
});

普通に.boxをfloatした時と同じ表示にしかならない。
何を間違ってるんだろう(´；ω；`)ｳｳｯ…

functionで囲んだら動いた。

$(function(){
 $('#primary').masonry({
    columnWidth: 100,
    itemSelector: '.box'
});
})

jQueryはそうやって使うのがデフォだから、わざわざexampleには記述されてない？
わからん( ´･＿･｀)

毎朝俺の為に、width変えた時の縦横比を守ったheightを計算してくれないか。

まこと — Mon, 16 Nov 2009 01:57:39 +0000

~~一辺が固定の四角形のサイズ変更後の高さを計算させるform~~

[2009年11月16日 11:59修正しました]一辺が固定の四角形のサイズ変更後の高さを計算させるformその2
こんなの電卓でちょちょいと計算すればすむのに、あほなので作った。

以下、なんでそんな事しかたという説明。

このblogはgrungeというテーマを残してある為、
コンテンツ本文部分のwidhtが400pxまでしか使えない縛りがあります(simpleは1カラムでwidth100%、dying-flowerはたぶん900pxのwidth76%)。

WordPress君は賢いので、400pxより大きい画像を挿入しても、横幅が400pxになるように縦横比を揃えてheightを計算してくれます。

けどyoutubeだと、これがうまくいかない。

先日の写真で動画というエントリーの時にyoutube貼ったけど
[埋め込み]のurlを[カスタマイズ]できるんだけど、widthとheightは決めうちの中から選ぶ事になってるようで横幅400pxは無いんですよね、
なので自分でheightを計算しなくちゃいけなくて面倒くさいなぁと思ったわけです。

面倒だからwidthだけ400pxに変更すれば大丈夫でしょうとして公開したら
縦横比が変わるというか、Firefoxにswfのheightを入力しなかった時の初期値があるのか、二つとおも同じ高さになって
それにあわせて動画の横幅(プレイヤーのではなく)が縮んで見えないよコレ！と。

たぶん式はこんな感じ(計算苦手なのでアバウトに)で修正してアップしたです。

変更後の高さ = ( 希望の横幅 / 今の横幅 ) * 今の高さ ;

修正後の手順

html


	
		元のwidth：
		
		元のheight：
		
		目標のwidth：
		px
	

	

	
		結果：

jsのイベント削除した。
formの中のソースが綺麗になった(cssもjsも外部化してないけど)。

javascript

focus();とonfocusの違いがよく判ってないです。
bodyのonloadをwindow.onloadに変更するのと一緒みたいな感じにした。

css(抜粋)これは前と一緒。

input[type="text"] {
	font-size:110%;
	padding:0.1em 0.2em;
	border:1px solid #999;
}
input[type="text"]:focus {
	border:1px solid #6CC;
	background:#F7FDFF;
}

form dl{
	padding:1em;
	border:5px solid #999;
	border-radius:3px;
	-moz-border-radius: 3px;
}
form dt{
	padding:0.4em 0.5em;
	display:inline;/*最初のうち上のpaddingをmarginで指定して背景色を表示させてた名残、今は必要ない指定。*/
	width:7.5em;
	font-weight:bold;
	float:left;/*続くddを横に置く、floatを使わないければmargin-topにネガティブマージンを指定でもok？*/
}
form dd{
	padding:0.4em 0.5em;
	margin:0 0 0 7.5em;
}

修正前の手順

html


	
		
			元のwidth：
		
		
			
		
		
			元のheight：
		
		
			
		
		
			目標のwidth：
		
		
			
			px
	
	
		
	
	
		結果：

28行目：onfocus=”this.select()でフォーカスした時に勝手にテキストを選択するように。

javascript

13行目：簡単にコピペできた方が楽なので、[width="xxx" height="yyy"]で吐き出すようにしておく。
ダブルクォーテーションを表示させる方法がわからず検索したら\”ではなく"を使うと書いてあったんだけど、そうすると変数が展開されなかったのでごにょごにょしてたら結局\”でokだった。

css(抜粋)

input[type="text"] {
	font-size:110%;
	padding:0.1em 0.2em;
	border:1px solid #999;
}
input[type="text"]:focus {
	border:1px solid #6CC;
	background:#F7FDFF;
}

form dl{
	padding:1em;
	border:5px solid #999;
	border-radius:3px;
	-moz-border-radius: 3px;
}
form dt{
	padding:0.4em 0.5em;
	display:inline;/*最初のうち上のpaddingをmarginで指定して背景色を表示させてた名残、今は必要ない指定。*/
	width:7.5em;
	font-weight:bold;
	float:left;/*続くddを横に置く、floatを使わないければmargin-topにネガティブマージンを指定でもok？*/
}
form dd{
	padding:0.4em 0.5em;
	margin:0 0 0 7.5em;
}

1～9行目：type属性がtextのinputに、今ここがフォーカスしてますよって印をつける。

11～27行目：form dl-ddまで
昔流行ったdtとddを横並びにする指定。

widthとheightを続けて何回も書くとたまにwidhtになってしまよね。

参考にしました

[JS]ページが開いたら自動でフォーカスを合わせる

element.select – input部品を選択状態にする

HTMLタグ内でのJavaScriptのダブルクォーテーション

TEXTAREAをリサイズするjQueryのプラグイン

まこと — Mon, 09 Nov 2009 17:13:27 +0000

こんなの
jQuery TextAreaResizer plugin example

ダウンロード先
TextArea Resizer
必要なjs読み込ませて
リサイズの時つまむbarをcssで設定して
textareaにclass=”resizable”を追加

some test text
some test text
some test text
some test text
some test text
some test text

つまんだときの透明度が低すぎてtextareaが見えないよって時は
jquery.textarearesizer.compressed.jsかjquery.textarearesizer.jsどっちか使ってる方の

textarea.css('opacity',0.25)

を適当に変更

プラグインのHead Cleanerでhead 内の JavaScript を、フッタ領域に移動あたりにチェックを入れてると使えないかも。

Fireworksのテクスチャー画像等をPhotoshopのパターンに一括登録したい。

まこと — Thu, 05 Nov 2009 21:55:20 +0000

[追記 / 20100523]
バッチ処理を使わないように改造したのを公開した。
大量のテクスチャー画像を、超簡単にパターン登録する.jsx ( バッチ処理不使用

photoshopで使っているパターン(テクスチャー)は、使いたい時に使いたい物を自作して即登録しているので今まで気にもしませんでしたが、
例えばCOLOURlovers :: パターンやFtg – Fireworks texture galleryのような素敵サイトから感謝の念をこめてダウンロードしたpng形式のテクスチャー画像を「これちょっとphotoshopでも使いたいのぅ」なんて思ったら
1ファイル1ファイルphotoshopで開いて[編集] – [パターンを定義]しなきゃ駄目なんですね。
プリセットマネージャーへドラッグアンドドロップすれば登録できるんだと思ってた。

1個2個ならいいけど300回繰り返すとなるとなると半端なく面倒臭い。
面倒臭いとモチベーションダウンに繋がるしで良くない。
ほいではどうしたら面倒臭くなくなるか？を考えるわけです。醍醐味です。

バッチ処理とアクションで自動化

バッチ処理という機能を使えばフォルダ単位でアクションを自動化させられるそうだ、これは使わない手はない。

まずパターン登録のアクションを作成

次にバッチ処理に登録
[ファイル] – [自動処理] – [バッチ]

プリセットマネージャーから確認すると全部登録されてた。
バッチ処理すごい！

しかし問題がひとつ。
パターン名がすべて「check02.png」になってた。
なんてこったい、アクションでパターンを登録する時に使った名前に上書きされていくという。
パターン名を空白にするとアクションに登録できないし困った。
気にしなければいんだけど、気になるのがおとめ座B型の性分か。

アクションでファイル名を参照させる方法もあるのかもしれないけど、全然わからなかったので別の方法を考えてみる事にする。

スクリプトってやつを使ったらどうだろう？

バッチ処理を検索すると、アクションとセットで登場するスクリプトというのがある。
これでどうにかならんかね？と調べてみた結果が前回のエントリーなわけです。

ScriptingListenerJS.logが吐き出すソースをパク参考に以下の.jsxを作成

// ==========
// 登録する
// ==========
var idMk = charIDToTypeID( "Mk  " );
    var desc1 = new ActionDescriptor();
    var idNull = charIDToTypeID( "null" );
        var ref1 = new ActionReference();
        var myPtrn = charIDToTypeID( "Ptrn" );
        ref1.putClass( myPtrn );
    desc1.putReference( idNull, ref1 );
    var idUsng = charIDToTypeID( "Usng" );
        var ref2 = new ActionReference();
        var idPrpr = charIDToTypeID( "Prpr" );
        var idFsel = charIDToTypeID( "fsel" );
        ref2.putProperty( idPrpr, idFsel );
        var idDcmn = charIDToTypeID( "Dcmn" );
        var idOrdn = charIDToTypeID( "Ordn" );
        var idTrgt = charIDToTypeID( "Trgt" );
        ref2.putEnumerated( idDcmn, idOrdn, idTrgt );
    desc1.putReference( idUsng, ref2 );
    var idNm = charIDToTypeID( "Nm  " );
    var docName = app.activeDocument.name;
    desc1.putString( idNm, docName );
executeAction( idMk, desc1, DialogModes.NO );

// ==========
// 閉じる
// ==========
var idCls = charIDToTypeID( "Cls " );
executeAction( idCls, undefined, DialogModes.NO );

どうもバッチから直接.jsxを呼べないようなので
それをアクションに登録

本当はjsxにバッチ側が受け持つ「指定フォルダにファイルがあったら開く」処理を書ければいいのだろうけど、まだわからないので仕方がない。

実行結果

ご自由にどうぞ

add-Pattern.jsx｜画像をファイル名でパターンに追加する.jsx

.jsx(アクションより融通が利くであろうスクリプト)作成メモ / Photoshop CS3

まこと — Thu, 05 Nov 2009 20:06:05 +0000

まず何をどうするのか？それすらわからない。

ガイドに目を通す。
Program Files\Adobe\Adobe Photoshop CS3\以下あたりにあるフォルダ

スクリプティングガイド\Photoshop CS3 Scripting Guide-J.pdf / 日本語
スクリプティングガイド\Photoshop CS3 JavaScript Ref.pdf / 英語

肝心な方が英語＞＜

Fireworksの「手順をコマンドとして保存」のような機能を追加。

スクリプティングガイド\ユーティリティ\ScriptListener.8li を
プラグイン\自動処理に複製

デスクトップにScriptingListenerJS.logが作成される。。

[追記 / 20100428]
ほっといたら.logファイルの容量がすごいことになってた。
定期的に削除するか、.logが必要無いときはScriptListener.8liを削除したほうがいいかも。

保存場所

プリセット\スクリプト内に置けば[ファイル] – [スクリプト]に表示される(と思う)

参考にさせていただきました。

そらかぜ工場 Photoshop Scripting 覚書き

Adobe Photoshop CS3自動化作戦

スクリプト内に日本語を含む場合にはUTF-8 (Unicode)の文字コード (できればBOM (Byte Order Mark)付き)にする必要があります。

element.insertBeforeとelement.appendChild

まこと — Fri, 09 Oct 2009 02:04:45 +0000

こっちもまだメモ

要素を追加する

element.appendChild(newNode)

elementにnewNodeを追加する？

window.onload=function(){
elm=document.getElementById("elm");
kakiku=document.createTextNode(">kakikukeko");
elm.appendChild(kakiku);
}

html

aiueo

output

aiueo>kakikukeko

element.insertBefore()

sasisu=document.createTextNode("sasisuseso>");
elm.insertBefore(sasisu,elm.firstChild);

output

sasisuseso>aiueo

setAttributeとassignment to undeclared variable ～

まこと — Thu, 08 Oct 2009 22:27:30 +0000

まだメモ

var imgNode=document.createElement("img");
imgNode.setAttribute("src", imgURL);
imgNode.style.opacity=0.2;
var targetNode=document.getElementById("wrap");
targetNode.insertBefore(imgNode,targetNode.firstChild);

src=”xxx.gif” style=”opacity: 0.2;” />

setAttributeはどうも曲者らしい
setAttributeが曲者じゃなくてIEが曲者か。
IEではclassとstyleとイベントを設定できないそうだ。
便利っぽいのにな残念。

Firefoxの警告

assignment to undeclared variable ～: varが無いよ

mozilla-JavaScript-style-guide

まこと — Mon, 05 Oct 2009 19:04:37 +0000

mozilla developercenter｜JavaScript style guide

ホワイトスペース

* 基本的なインデントはスペース 2 つです。タブを使ってはいけません。

どっかほかのところでもインデントはタブじゃなくてスペース2つって書いてあったなぁ
うちは今TABを使っている。

ヘッダーの背景画像をランダムに表示させたくなって知恵を絞る、の巻

まこと — Mon, 05 Oct 2009 18:29:02 +0000

先日追加したテンプレート（x-ran-zatsu）のヘッダー画像が何パターンかあるので
せっかくだから全部使ってしまおうと
ランダムで背景画像を表示するjavascriptを追加してみたら、これがうまくいかない。

うまくいかないといっても、htmlに使えば動くんだけど、wordpress（php）で読み込むと画像が消えてしまう。

これがその時書いたjavascriptで
読み込んだ時のミリ秒が奇数か偶数かで分岐させて、#headerの背景を差し替える。
phpで使う場合jsの読み込ませる場所が違うのかな？

window.onload=function(){
	headsw();
}

function headsw(){
var dt = new Date();
ms=dt.getMilliseconds();
//console.log("ms:"+ms);
if(ms%2==0){
document.getElementById("header").style.backgroundImage="url(img/common/header.jpg)"

}else{
document.getElementById('header').style.backgroundImage='url(img/common/header-2.jpg)'
}
}

関係ないけどキーボードの調子がすこぶる悪い。
文字側のenter（テンキー側のは反応する）やc,v,F7あたりが反応したり、しなかったり、延々と一文字が入力され続けたり。

さて、粘ってみたけど、うまい解決法も閃かないので別の方法を考える事にした。
せっかくwordpressでphpを使っているのだから、phpで出来ないかね？と辞書を片手にシコシコ書いてみたら、とりあえず動くだけというものだけど、出来たので手順を晒してみます。

まず画像を表示させてみる

test-sw.phpという名前のファイルを作成して以下を記述

やった、localhostから確認するとheader-2.jpgが表示された。

次にこのphpをcssに読み込ませてみる。
css/test-css.css

#header{
	background:url(../test-sw.php) no-repeat;
	border:1px solid #f33;
	height:400px;
	width:400px;
}

test表示用のphpを作ってtest-css.cssを読み込ませる。
test-oya.php





test





head

やった、#headerの背景にheader-2.jpgが表示された。

背景画像を表示させる事は出来たので
次は、画像の選び方を考える。

ランダムに切り替えたい背景画像だけを集めたフォルダを作って、そのフォルダ内にある画像を配列に入れられないか？
これが出来れば、いちいちtest-sw.phpを変更する必要がなくて、背景画像を集めたフォルダに画像をぶっこめば済むようになる。

辞書を引くと、opendir()とreadfir()でディレクトリ操作ができるそうだ。
test-sw.phpに追加

$dn=opendir(img/header);
while($file=readdir($dn)){
	echo "ファイル名：$file
";
}
closedir($dn);

出力結果例

ファイル名：.
ファイル名：..
ファイル名：header-2.jpg
ファイル名：header-3.jpg
ファイル名：header-4.jpg
ファイル名：header-5.jpg
ファイル名：header-6.jpg
ファイル名：header.jpg

ん？
ファイル名：.
ファイル名：..
？
なんだこれ。

よくわからないのであとで調べるとして今はif文で弾いとく、
ついでにマジックナンバー的なフォルダ階層を潰して、抜き出したファイル名を配列に入れる。

test-sw.phpを変更

$headimgdir='img/header';

$dn=opendir($headimgdir);
while($file=readdir($dn)){
	if($file!='.' && $file!='..'){
		$files[]=$file;
	}
}
closedir($dn);

これで画像が入った配列が完成。
ここからランダムにピックアップさせる方法を調べる。

php4～で「array_rand(配列);」というものがあった、配列のインデックスをランダムに取得できるらしい。
これを使ってみる。
test-sw.phpを変更

$imgnum= array_rand($files);
$imgpath=$files[$imgnum];
header('Content-Type: image/jpeg');
readfile($headimgdir.'/'.$imgpath);

readfileはフォルダ階層と配列からの値に変更。

最終的なtest-sw.php

完成。

CKEditorの画像アップロードを有効にする

まこと — Sun, 20 Sep 2009 11:15:16 +0000

CKEditor｜demo

多機能過ぎるCKEditorですが、ダウンロードしただけだとアップロード機能が有効になってない。
それを有効にするには？って話です。

ckfinderてのも必要です。

ダウンロードはこちらから
ckeditor
ckfinder

ファイルブラウザ/アップローダについて（英語）

ckfinder\_samples\js\ckeditor.html

を参考にしろと書いてあるようなので参考にしたものを以下のページにアップしました。

下準備
ckfinderのconfig.php
32行目近辺の return false;をtrueに
55行目近辺の $baseUrl = ‘/ckfinder/userfiles/’;お好みで

アップロード先のフォルダはckfinder/ckfinder.jsの中で指定してるようなので
.htmlみたいな言葉で検索してurlのところを変更

http://sakurachiro.com/_exercise/javascript/cke/

CKEditor For WordPress

WordPressのプラグインが出てた。
http://wordpress.org/extend/plugins/ckeditor-for-wordpress/

JavaScriptでブラウザのレンダリングモードを調べる方法

まこと — Wed, 16 Sep 2009 20:05:31 +0000

アドレスバーにコピペしてエンター

レンダリングモードを調べる

javascript:alert(document.compatMode)

標準準拠なら[CSS1Compat]？
後方互換なら[BackCompat]

IE8は3つのレンダリングモードがある

javascript:alert(document.documentMode)

IE8 //8 これがデフォルト
IE7互換 //7
後方互換 //5

確認用

関係ないけど更新された時間を調べる

javascript:alert(document.lastModified)

ブラウザやサーバーによって動作はマチマチらしい

ロールオーバーでimgをフェード

まこと — Tue, 15 Sep 2009 04:55:18 +0000

またもや前回の続き

次は、現在1個のidにしか対応してないので、対象の要素（とりあえずa？）が複数あれば勝手に全部対応できるようにさせる。

特定のid内のaに包まれたimgを対象にopacityを変化させるようにしてみた。
動作確認はこちら。

javascriptはcssと違って「子 > 親」を指定できるみたい、便利だ。

_contentWrap=document.getElementById("content");
_img=_contentWrap.getElementsByTagName("img");
for(var i=0;i<_img.length;i++){
if(_img[i].parentNode.tagName=="A"){
//親要素がaタグだった場合の処理
//小文字のaにすると見つけられないようでした。
}
}

一応当初の目的は達成したけれど、次は、
別の画像を前面にalpha0で呼び出してからalphaを100に変更させるか、
背面に呼び出して前面の画像のalpha0に変更させるか、してクロスオーバーするマウスオーバーが出来たらいいなぁ

setIntervalからsetTimeoutへ

まこと — Fri, 11 Sep 2009 21:26:22 +0000

何から書こうかな

まず前回の続き

1.setIntervalで、イベントをonclickからonmouseover,onmouseoutに変更、等速から等加速運動に変更
http://sakurachiro.com/_exercise/javascript/timer/setInterval_opacity_1.html

setIntervalで呼び出す関数に引数を持たせたら動かない
これだとダメ

aID1=window.setInterval(alphaSet1(minA),reftime);

functionで呼び出したらok

aID1=window.setInterval(function(){
	alphaSet1(minA);
	},reftime);

引数はこれで解決したものの
setIntervalが同時に何個も呼ばれてしまい失敗。

2.上記に関数が動いてるかのチェックを追加
http://sakurachiro.com/_exercise/javascript/timer/setInterval_opacity_2.html

3.行き詰ったのでsetTimeoutを勉強してみる
http://sakurachiro.com/_exercise/javascript/timer/setTimeout_opacity_1.html

と、こんな感じまできた
次は、現在1個のidにしか対応してないので、対象の要素（とりあえずa？）が複数あれば勝手に全部対応できるようにさせる。

肝心のopacityは
CSS Validation Service｜テキストエリアに直接入力して検証によると

プロパティ opacity は CSS レベル 2.1 に存在しませんが、[css3] に存在します

なんだけど、IE以外のブラウザ、opera/google chrome/safari/Firefox なんかはすでにopacityに対応してる。
IEは独自拡張のfilterをつかって対応

filter:alpha(opacity=20);

その場合hasLayoutをtrueにしておく必要があるみたい（clearfixみたいにzoom:1が影響がない？）
しかし独自拡張かぁ。
CSS3も先行実装なんだけど、いつか実装された時に修正なしで使えるのがいいおね。

.onmouseover=function()での恥ずかしい勘違い

まこと — Wed, 09 Sep 2009 12:46:21 +0000

[追記 / 20100427]
うわー、

2）こっちだと動かない

なぜだ～

.onmouseover=function()ってあれでしょ
as的な解釈だとマウスオーバー時に{}内の処理をすんでしょ？
こんな感じ

onmouseover=function(){
マウスオーバー時の処理
}

なんで反応しないんだろう？
もしかしてjavascriptってヤツは、window.以下のイベント内にすべての処理を書かないといけないのか！？（偏見です）
いやいやそれはないですね、docment.writeは


	タイマー:

次はこれを改造して、ロールオーバーしたらopacityを0.80へ、ロールアウトで1.00にすればいいのよね？

マウス座標を取得するサンプルと引数の疑問2

まこと — Sat, 29 Aug 2009 09:03:14 +0000

input毎のidをgetElementByIdで指定せずとも辿っていけた


	mouseX:
	
	mouseY:

window.onload=function(){
mouseXY=document.getElementById("form1");
}
document.onmousemove=function(e){
	mouseXY.mxx.value=e.pageX;
	mouseXY.myy.value=e.pageY;
}

マウス座標を取得するサンプルと引数の疑問

まこと — Sat, 29 Aug 2009 08:22:06 +0000


	mouseX
	
	mouseY

window.onload=function(){
//テキストフィールド取得
mouseX=document.getElementById("mxx");
mouseY=document.getElementById("myy");
}

//座標取得して挿入1
document.onmousemove=function(e){
mouseX.value=e.pageX;
mouseY.value=e.pageY;
}

//座標取得して挿入2
function msMove(e){
mouseX.value=e.pageX;
mouseY.value=e.pageY;
}
document.onmousemove = msMove;

1でも2でも動く、違いはなんだろう
1のfunction(e)の引数eや
2のmsMove(e)の引数eはなんだろう
いままで理解した（と思っていた）引数とは、使い方が違う気がする。

DOMとDHTML

まこと — Thu, 27 Aug 2009 03:49:23 +0000

いまさら感たっぷりですけど
DOM（Document Object Model）と
DHTML（Dynamic HTML）の違いは？
AJAX（Asynchronous JavaScript + XML）は非同期通信を利用したDHTML？

document.write()が
document.getElementById(“ID名”).innerHTML？

window.onload=function(){}

まこと — Sun, 23 Aug 2009 03:16:25 +0000

答える内容に合わせて選択項目の内容を変更するを使ってwindow.onload=function(){}を練習してみたメモ。

javasript

html

body onload

body onloadを

window.onload=function(){}に書く

window.onload=function(){
	setMenuOption(document.myForm.sbox01,document.myForm.sbox02);
}

最初、引数を指定する方法がわからなくて

window.onload=	setMenuOption(document.myForm.sbox01,document.myForm.sbox02);

なんて書いてたけど、これはダメ。

しかしbodyのonloadって何なんだろう
いままでjavascriptだと思ってたけどhtmlのイベントかなにかなのかな？
window.onload=function(){}は文法がasに似てるのでjavascriptだと思うのだけれど
って恥ずかしいレベルのお話ですよね。

答える内容に合わせて選択項目の内容を変更する

まこと — Fri, 07 Aug 2009 20:09:53 +0000

ずいぶん前に買って放置していた
MdNのプロとして恥ずかしくないJavaScriptの大原則
Flash関係の書籍だとサンプルプログラムのダウンロードが出来るのにJavaScriptはサンプルソースが無かった。
ためしにp52｜答える内容に合わせて選択項目の内容を変更するてのを作ってみたんだけど、2個目のセレクトボックスに配列をちゃんと読み込んでくれない。
なんだろうソースミスってるのかな。(ミスってた。)

CD-ROMつけてないんだから、ちゃんと動作するサンプルソースくらいダウンロード出来るようにしといて欲しいなぁ。
そもそも書籍に、対応ブラウザーも表記されてないみたいだし
大抵のサンプルソースはscript type=から始まってるけどDOCTYPEによって（標準準拠モードと後方互換モード）動かないのあったりもするんでしょ？（jsよく判らない人の認識）
完動するサンプルソースがないと不安になる初心者は、こうゆうのは向かないんだろうな。
選んだ自分がいけないのかな。

javascript初心者

まこと — Tue, 04 Aug 2009 14:38:39 +0000

javascript、よくわからない。
よくわからないけれどもas1を少し触ってたので、なんとなく流れがわかったりはする（程度）。
自分のために使う事は皆無で、誰かが仕事で使う時に一緒に調べたり書いたりしてたけど、ほぼコピペという体たらくだ。

なんかハードルが高い。
よくわかってないのにハードルが高いと感じる理由は何故だろう？と考える。

cssのようにブラウザ（主にIEだけど）によって挙動が変わるからなんじゃないだろうか。
よくわかってないんだけどjavascriptはブラウザによって書き方が変わるんだよね？
各ブラウザ毎の書き方がよくわからない、ってのは無駄にハードルをあげていると思う

一つの同じ処理をするのに、ifで分岐して何個も別のコードを書かなきゃならないなんて無駄だ、すごく。
どこかにブラウザ毎の挙動の違いを纏めてくれてるサイトは無いでしょうか？

[追記｜20090806_21:45]
IT PROの記事で「一つの同じ処理をするのに～～」のくだりで同じような事を書いてるのをみつけたので読んでみようかと思うメモ

DOMから始めるJavaScriptモダン・スクリプティング

http://itpro.nikkeibp.co.jp/article/COLUMN/20070627/276026/?ST=webdesign

javascriptなぁ。。。

まこと — Wed, 15 Jul 2009 23:22:35 +0000

なんか得体が知れなくて嫌な感じなのは、ブラウザ毎に使える関数が違ったりするって話を聞くけど具体的に何がOKで何がNGかがよくわからんところなんだろうなぁと思うんだけど、それ言ったらcssだってブラウザ毎に挙動が違うじゃんね。

ようわからんーってさせるのは一体なんだ。

をwindow.onload=function(){}に出来ると知った。
なんかデメリットあるのかな？と調べてると特に変わりはないみたいだけど、よくある「onloadで2つの関数を呼べない」てのを目にした。

解決するにはaddEventListenerを使えばよいそうでそれが使えないブラウザ（IE）はattachEventを使うとの事。

これだよ、でたよ、ここでもまたIEだよ。

でもjavascript詳しくない身からしてみると、attachEventで変わりが利くなら、全部のブラウザでattachEventの方使えばいいんじゃない？と思ったんだけど、これってもしかして透過pngを使うIE6のfilterみたいなもんで、IEの独自拡張？だったりするのかねぇ。

あーようわからん。

firebugの使い方でも調べようか。

乱雑モックアップ » javascript

[jQuery]$(this)の親要素や子要素を指定するには。

さくら家

photoshopでfireworksのカンバスを合わせる、的な事をする.jsx

どんな使い方をしてるか

超参考にしたページ

スクロールバーを変更するjscrollpane.js

練習

ツイッターをjQueryで読み込む方法の参考にしたページ

iframeに開くページを、location.searchで受け取った値で変更させちゃっても問題ない？

rollover2.jsとoperaと色々復習

蛇足 / imgにvertical-align:bottomしたい(してる)理由

operaだけvertical-align:bottomやtopをそれ以外の値で上書きできないか？

cssua.js / CssUserAgent (cssua.js)で分岐させる

いやでもjs使わないでどうにかならないかな？

display:inline-block;ならどうだろう？

ブラウザの表示倍率を無理やり100%に見せる（ただしIE限定、動作確認は8のみ）

まとめてリンケージとリンケージ解除

使い方メモ

メモ / iframe 高さ取得変更 クロスドメイン

構成

記述例

追記

構成

jQueryアコーディオンメニューddaccordion.js (Accordion Content script)の設置メモ

ddaccordion.jsを適用したメニュー

子メニュー無しのページにはclassかidを付けて、それが無ければすべてを閉じるようにした

Firefoxでwindow.innerWidthとdocument.body.clientWidthの値がおかしい

PhotoshopCS2以降でオブジェクトを等間隔に分布させる.jsxがあったよ。

分布結果の違いを比べてみた画像

ie-css3.jsのベータが取れて名前がSelectivizr(:select[ivizr]？)に変わってた

使い方メモ

.psd内のテキストレイヤーからテキストを抽出して.txtファイルに書き出してくれる.jsx

簡単に Another HTML-lint gatewayで html のチェックが出来るブックマークレット。

うおおおおおおおおおおおおおおおお 突然ですがこれは『気合いの雄叫び』ですッ！

人は慣れる。

Another HTML-lint gateway のチェック結果をタブで開くブックマークレット

ブックマークレットの使い方

[無料のiPhoneアプリ] いつでも、どこでも、JavaScriptプログラミング！ / JavaScript Anywhere で jQuery。

でもって JavaScript Anywhere を使って jQuery の練習をする

動作確認

Hello

JavaScript Anywhere のダウンロードはこちら

jQueryでアンカーリンクをスムーズスクロールの練習

$(‘html’).を変更する

だが断るしかし

今回チェック用のhtmlとcss

メモ

Google Analytics 非同期トラッキングコードが、標準のトラッキングコードとしてご利用いただけるようになりました。とのこと。

違いは何?何かいいことあるの?

トラッキングコードの設定

実際のトラッキングコードが載ってる場所

前置きが長くなったけど本題

使い方

Google Analytics profile IDの確認方法

選択範囲にあわせてガイドを引く.jsx

使い方

ダウンロード

挙動 / どんなガイドが引かれるか

ソース

参考

大量のテクスチャー画像を、超簡単にパターン登録する.jsx ( バッチ処理不使用

どういったモノ?

使い方

ダウンロード

今回詰まったところ

そんな時とても参考になったページ

懲りずに ) jQueryを使った画面スクロールに合わせてついてくるフローティングメニューが一応形になりまんた。

使い方

つまったところや、よく分からない部分

cssを複数指定する方法

pxがつく要素からpxを取るには

続き / スクロールに合わせて、移動するメニュー(要素)

前回の練習以降に変更した事。

外部化したけど、どんなhtmlにも読み込んだらそのまま使えるの?

#navにabsolute

#containerがrelativeで#navもrelativeの場合

現状のソースと使い方

使い方

jQueryの練習 / スクロールに合わせて、移動するメニュー(要素)

メモ / iframe 高さ取得変更クロスドメイン

うおおおおおおおおおおおおおおおお突然ですがこれは『気合いの雄叫び』ですッ！