乱雑モックアップ » script

[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を指定するにはどうしたらいいんだろうか。

さくら家

友蔵+こたけ

ひろし+すみれ

さきこ
まるこ

phpでサーバーのフルパスを調べる

まこと — Sun, 18 Sep 2011 12:36:43 +0000

ベーシック認証をかけたい時に
サーバーのフルパスが分からなくて困る人間なのでメモ

ちなみに、以下のページで.htaccessと.htpasswdを簡単に作れる。
.htaccess ファイルを簡単作成「.htaccess Editor」

concrete5をxampp環境にインストール

まこと — Tue, 21 Jun 2011 19:17:33 +0000

concrete5(コンクリートファイブ)というCMSがあるそうです。
concrete5日本語公式サイト by Usagi Project

何がいいのかイマイチ判らないまま仕事で使う事になったので
とりあえず動作確認用にローカルにインストールしてみようとしたら
Warning: session_start()ってエラーがでて
上手くインストール出来なかったよっていうメモ。

環境

windows7 64bit
xampp1.7.3
concrete5.4.1.1.1 日本語最新安定板

インストールの準備

以下のリンクを参考にphpMyAdminからconcrete5用の空DBを作成
バーチャルホストも用意しておく
うちは_c.localhostにした。

inputlog – Concrete5をxamppにインストール
 インストール準備 :: concrete5日本語公式サイト

インストール

_c.localhostにアクセスすると下のようなエラーが表示されて先に勧めなかった。

Warning: session_start() [function.session-start]: open(\xampp\tmp\sess_jpft2igj399p07rk0ecstj7tn5, O_RDWR) failed: No such file or directory (2) in D:\_webroot\c5\htdocs\concrete\startup\session.php on line 18

エラーの原因

どうも、php.iniのsession.save_pathがおかしいみたい。

C:\xampp\php\php.ini

を開いて、1496行目あたりの

session.save_path = "\xampp\tmp"

を
こんな感じに修正

session.save_path="C:/xampp/tmp"

xamppのコントロールパネルからapacheを再起動して
_c.localhostにアクセスしてみるとエラーが消えた。

変な達成感があるけど、実際まだ始まってすらいない。

MySQLのサーバーアドレスは
デフォルトだとlocalhostで
その下はMySQLにログインする時のidとpass
データベース名はインストールの準備で作ったヤツ

windows7 64bitにxamppを再インストール

まこと — Mon, 20 Jun 2011 18:15:36 +0000

mysqlのrootパスワード忘れて再インストールした際のやったことメモ。
なんか足りてない気がする。

ダウンロード

旧バージョン(1.7.2)をインストールしたかったので
こっちから拾ってきた
XAMPP – Browse /XAMPP Windows at SourceForge.net

最新版はこっちにも。apache friends – xampp for windows

インストール

全部デフォルトでポチポチしてって完了。
(※インストール先をc:にすると勝手にxamppフォルダが出来て、c:\xamppにインストールされた。

設定

localhostにアクセスして
左側のメニューの
セキュリティ – セキュリティから

そのような問題をすべて修正するには、単純に次のツールを使ってください。
=> http://localhost/security/xamppsecurity.php <=

をクリックして
パスワードを設定。

パスワード指定時にチェックをいれとかないと
mysqlrootpasswd.txt や
xamppdirpasswd.txt が生成されないみたい。

.htaccessをC:\xampp\htdocs か C:\xampp\htdocs\xamppあたりに置くらしいけど


Order deny,allow
Deny from All
Allow from localhost 127.0.0.1

や


order deny,allow
deny from all
allow from localhost
allow from 127.0.0.1

みたいなの。
大文字と小文字に違いはあるのかな？

localhostが開かなくなった、なんか間違ってたんだろうか。

あとSSIとバーチャルホスト(バーチャルドメイン？)の設定した。
xamppでinclude(SSI)を使えるようにする
 ルートパスとDreamweaverとバーチャルホスト(バーチャルドメイン？)

httpd-vhosts.conf
19行目あたりの
#NameVirtualHost *:80のコメントアウトを解除して
すぐ下に



DocumentRoot "C:/xampp/htdocs"
ServerName localhost

を追加した。

(※なぜかlocalhostじゃないやつがlocalhostで開いてしまったので

php.ini

C:\xampp\php\php.ini
を開いて、mbstringで検索

1771行あたりから始まるmbstringの
;mbstring.language = Japanese
みたいなやつの先頭の「;(セミコロン)」を削除した

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

DreamweaverのjQuery拡張機能 / jQuery Utilities Toolset with Code Utilities

まこと — Tue, 03 May 2011 05:17:09 +0000

Adobe – Dreamweaver Extension
上の一般、レイアウト、フォームとか書いてあるタブの所にjQueryのタブを追加
ボタンひとつで

$(function(){

});

とか挿入出来る。

jQueryのコードヒント拡張もあるみたいなんだけど
jQuery API extension for Dreamweaver | XTND.US – Xtnd urslf! Extensions for software. Adobe Dreamweaver, Drupal, jQuery, Eclipse, Fireworks
Dreamweaaver側のショートカットを変更してるとインストール出来ないのよね

一応

C:\Users \[ユーザー名]\AppData\Roaming\Adobe\Dreamweaver [各バージョン]\ja_JP\Configuration\Menus\

のMenus.xmlを削除するとインストール出来る。
変更したショートカットが無くなってしまうので、WinMergeなんかを使って差分をコピったりするのもいいかも。

WinMergeの説明はこちら / ファイル比較ツールをWinMergeに変更す
WinMerge 日本語版本体はこちら / WinMerge 日本語版

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などの高さ)の上ミーンライン？より飛び出した分はアセンダって名称らしい。

AS2 / オブジェクトをタイル状に敷き詰める

まこと — Thu, 09 Dec 2010 04:07:17 +0000

[as]objNum=0;
margin=50;
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
objNum++;
attachMovie("obj","obj"+objNum,objNum)
this["obj"+objNum]._x=i*margin;
this["obj"+objNum]._y=j*margin;
}
}[/as]

AS2のメモ残すのは勇気がいる。

[追記 / 20101211]
割って小数点を切り捨てた方が簡単かも
行を出す
[as]maxnum=15;
rowmax=3;
nowline=0;

for(i=0;i nowline=Math.floor(i/rowmax);
trace(nowline);
}[/as]

列は%で
[as]maxnum=15;
rowmax=3;
margin=50;
nowline=0;
nowrow=0;

for(i=0;i nowline=Math.floor(i/rowmax);
nowrow=i%rowmax;
//
xy={_x:nowrow*margin+margin,_y:nowline*margin+margin};
_root.attachMovie(“atobj”,”atobj”+i,i,xy);
trace(nowline);
trace(“nowrow”+nowrow);
}[/as]

ブラウザの表示倍率を無理やり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

AS2 / attachMovieした要素にアクセスする時

まこと — Thu, 04 Nov 2010 05:39:28 +0000

綺麗な書き方じゃないってのと、今更AS2ってのはわかってるけどメモ

for (var i = 1; i<=thumbmax; i++) {
 this["thumb"+i].num = i;
 this["thumb"+i].onRelease = function() {
  if (flag == "off") {
   _root.container_dummy.attachMovie("container", "container", 1);
   _root.container_dummy.container.photo_root.attachMovie("p"+this.num, "photo", 2);
   _root.flag = "on";
   //
    _root.container_dummy.container.photo_root.photo.x_button.onRelease = function() {
    if (flag == "on") {
     remove();
    }
   }
  }
 }
}

_root.container_dummy.container.photo_root.photo.x_button.onReleaseとか長すぎる。
こんな風にすると短く指定出来た(5～6行目あたり)

for (var i = 1; i<=thumbmax; i++) {
 this["thumb"+i].num = i;
 this["thumb"+i].onRelease = function() {
  if (flag == "off") {
   var at_c = _root.container_dummy.attachMovie("container", "container", 1);
   var at_p = at_c.photo_root.attachMovie("p"+this.num, "photo", 2);
   _root.flag = "on";
   //
   at_p.onRelease = function() {
    if (flag == "on") {
     remove();
    }
   }
  }
 }
}

メモ / 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みたいだけど知らなかったなぁ、あると便利でした。
という事でメモ。

さくらインターネットのスタンダードプランでphp5.3.3をインストールして使う

まこと — Fri, 13 Aug 2010 18:59:08 +0000

使用したSSHクライアント / index – Terminal Emulator Poderosa
(さくらインターネットの公式で例に挙げられていたので使った、秘密鍵というのを何度チャレンジしても作れなくてログインが面倒くさい)

このサイトを参考にしてインストールしました。

さくらのレンタルサーバーで、php5-mysqli をつかえるようにする覚書。(PHP5.3.0をコンパイルして使う) – れいさ屋

上記サイトに書いてある順番そのまんま入力していくだけでphp5.3.3のインストールに成功した(※コンパイル時のコマンドでmysqlに関係するところを省略したけど)。
サイトが移転したようなので、消えないと思うけど念のため記事を一部引用させていただきます。

※php-5.3.0をphp-5.3.3に変更して使った

作業ディレクトリの作成

mkdir tmp
cd tmp

PHPをダウンロード・解凍

wget http://jp.php.net/get/php-5.3.0.tar.gz/from/this/mirror tar zxvf php-5.3.0.tar.gz

* TABキーによる補完が利用できます

コンパイル

cd php-5.3.0 ./configure --prefix=/home/ --with-config-file-path=/home//www/ --enable-force-cgi-redirect --enable-mbstring --enable-mbregex --enable-calendar --enable-pdo --with-pcre-dir=/usr/local --with-openssl=/usr --with-iconv=/usr/local --with-gd --with-zlib=/usr --with-jpeg-dir=/usr/local --with-png-dir=/usr/local --with-ttf --with-freetype-dir=/usr/local --with-mysql=/usr/local/mysql/5.1 --with-pdo-mysql=/usr/local/mysql/5.1 --with-mysqli=/usr/local/mysql/5.1/bin/mysql_config --enable-soap --with-curl --with-xsl=/usr/local --enable-dom --with-gettext=/usr/local --enable-exif

* の部分は、書き換えてください。
* ミソは、–with-mysqli=/usr/local/mysql/5.1/bin/mysql_config これです。

renice +20 -u make make install

使って見るには：

このままでは今回コンパイルしたPHPは、使われることはありません。

ドメインごとに、以下の手順をする必要があります。

・例: www.example.com (/home//www/example.com/)でつかえるようにする場合

mkdir /home//www/example.com/cgi-bin cp /home//bin/php-cgi /home//www/example.com/cgi-bin/php5.cgi

このようにしてphp-cgiをコピーしたら、~/example.com/ディレクトリ上に、.htaccessを作成します。

内容は、

Action php5-script /cgi-bin/php5.cgi AddHandler php5-script .php .php5

こんな感じにします。すると、.php拡張子にアクセスを試みた場合、/cgi-bin/php5.cgiでphpコードが実行されるわけです。ちなみに、デフォルトでmysqliは有効になっています。特に設定は弄る必要ないです。
(推奨)php.iniの設定

mbstring.language = Japanese mbstring.internal_encoding = UTF-8 mbstring.http_input = auto ;mbstring.http_output = UTF-8 mbstring.detect_order = auto
date.timezone = Asia/Tokyo

コイツは、.htaccessと同じディレクトリに設置しましょう。
おわりに

* mysqliに限らず、その他組み込まれていないモジュールについても、この方法でつかえるようにすることができます。詳しくは、php公式サイトあたりをご覧ください。

php.iniの設定のdate.timezone = Asia/Tokyo、これ大事ぽかった。

なんでphp5.3.3をインストールしたかったか、事の経緯

iPhoneのユーザー辞書用にファイルを変換するサイト(ココとかこことか)はphpで作ってて、sqliteをいじったり作成したりするのにPDOクラス(php5.1以降で対応)やらSQLite3クラス(php5.3以降で対応)やらを使ってる。

動作テストはローカルのxamppでやってた(phpのバージョンは5.3.1みたい)。
なのでPDOクラスもSQLite3クラスも問題なく使えてた。

だがしかし、残念な事に作成したphpを実際に走らせるこのサーバーのphpは5.2.13(CGI版)だった(さくらインターネットのスタンダードプラン)。
つまり本サーバーではSQLite3クラスが使えない。

そんな最初に気づいておかなきゃいけない大事な事も気にかけずに、よみと単語の.txtを.sqliteに変換して追加したり作成するphpを作ってローカルでテストして問題なさそうだったので、本サーバーにアップしたらあたりまえのように動かない。

せっかく作ったプログラムがこのままだと使えない。
なのでSQLite3クラスを使えるようにする方法を探す。

PECLのSQLite3拡張モジュールを使えば大丈夫？

PECL :: Package :: sqlite3 :: download

さくらインターネットのスタンダードプランのサーバーにPECLをインストールさせるには、どうもautoheaderとautoconfを弄らないと使えないみたいなんだけど、うちの頭が悪すぎた為にうまいこと設定が出来ずインストール出来なかった。

参考 / さくらインターネットにPECLをインストール [dozo dokuwiki.php]

なので、php自体を5.3以上にしてしまえ！と思ったわけです。

mb_strlen()で変な値が返ってくる時は文字エンコードを指定する。

まこと — Sun, 18 Jul 2010 14:21:10 +0000

strlenは文字列の長さを取得する関数で戻り値はバイト数らしい。
そして、mb_strlenはマルチバイトを考慮して文字列の長さを取得できるそうだ。

こんな感じ。

print(mb_strlen("あ"));
//出力 1
print(mb_strlen("あいう"));
//出力 3

けれど、ローカルのxamppでは以下の値を取得してしまった。

print(mb_strlen("あ"));
//出力 3
print(mb_strlen("あいう"));
//出力 9

phpの内部エンコーディングと合わない時にそうなるみたいで、
解決法はmb_strlen()関数の第2引数に文字エンコードを指定すれば良いみたい

print(mb_strlen("あ","utf-8"));
//出力 1

あーびっくりした。

参考 / 21. mb_strlen()関数の落とし穴 – PHP TIPS：ITpro

簡単に 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…

if文、書き方にバリエーションがあるようだ

まこと — Thu, 13 May 2010 17:28:38 +0000

うちはWordPressもphpも全然初心者であります。
なので思いっきり格好つけて(ソースを書いて)も、周りからみたらきっと恥ずかしい事になってるに違いない。あぁ恥ずかしい。
でもどうせ後で恥をかくなら今恥ずかしい方が良いに決まってる、はしかも若いうちにかかった方がいいって言うし(同じ恥をかく回数がはしかの様に1回ならばの話だけども)。

よし今日も恥をかくことを恐れずに書いていくぞ。と
RADWIMPSの「誤解を恐れず言わせてもらいます」ってそれはもうすでに恐れてます的な前置きでスタートでありんす。

if文

WordPressのsidebar.phpにdynamic_sidebarの記述があるのだけれど、うちの知っているif文とはちょっと違う書き方のif文になってる。

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
#ダイナミックサイドバーがあるのでここは出力されない
<?php endif; ?>
#こっちが出力される
1
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>
#ダイナミックサイドバーがあるのでここは出力されない
<?php endif; ?>
#こっちが出力される

endif;が必要。

うちの知ってるif文

<?php
if ( $job ){
print ('(ヽ´ω｀)');
} else {
print ('(；´Д｀)ｳｳｯ…');
}
?>

これと同じような意味なのかな

<?php $job=null; if($job){ ?>
(ヽ´ω｀) //仕事がないので出力されない
<?php }else{ ?>
(；´Д｀)ｳｳｯ… //こっちが出力される
<?php } ?>

「:」があるうから三項演算子に似てるなーと思ったけどifが最初にないもんねあれは。

endifで検索したらなんか出てきた

if..endif の文法：PHPマニュアル

elseif/else if

PHP: elseif/else if – Manual

<?php
//これが
if ($a > $b) {
    echo "a is bigger than b";
} elseif ($a == $b) {
    echo "a is equal to b";
} else {
    echo "a is smaller than b";
}
?>

//こうなる?
if($a > $b):
    echo $a." is greater than ".$b;
elseif($a == $b): // Note the combination of the words.
    echo $a." equals ".$b;
else:
    echo $a." is neither greater than or equal to ".$b;
endif;
?>

あー、なんとなくわかってきた
if中にを抜けた時、だと判りづらいから?

いやしかし:else:ってなんだよ

dynamic_sidebar()

ダイナミックサイドバーを出したい時、今はこう書いてたけど

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
<?php endif; ?>

こっちでも出る。大丈夫なのかなこれ。

<?php dynamic_sidebar(1) ?>

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

まこと — 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.

自tumblrの画像を表示させるやつ / 編集途中メモ

まこと — Tue, 09 Mar 2010 16:12:25 +0000

TumbprAPIのxmlを使って、とりあえずtestデザインのページ下部に設置してみた。
type=photoを50件。

WordPressのshadowbox JSを使っている、が
~~グループ化されてないので連続して表示させられてない。~~
ちょっとエッチな画像のreblogが多いので恥ずかしい。

次の作業

shadowboxでグループ化
プラグインの管理画面の作り方を調べて作る / 入力するのはidと読み込み件数くらい。

そのうちやる

~~記事の詳細画面に入った時のnextボタンをアンカーから次の記事へのリンクになるようにしたいなぁ。~~

simplexml_load_fileでxmlの要素にアクセス出来なかった。

まこと — Fri, 05 Mar 2010 16:20:05 +0000

tumblrのxmlを読み込んで画像を表示しようと思ったので

simplexmlでxmlを読みこむが何故だか画像urlの要素にアクセス出来ない。

(結論を先に見る)

tumblr APIの説明｜和訳
http://(you).tumblr.com/api/read｜うちのtumblrのxml

xml抜粋



 やっとタイトルを変えて写真変更の仕方が分かったレベル
 
  
   </blockquote>
   http://ffffound.com/image/2c4ba8b6bcb787992657ac8266ce5ddbc20588bd
   http://dobinn69.tumblr.com/photo/1280/423624165/1/tumblr_kyfivkpZ7u1qzlhmu
   http://29.media.tumblr.com/tumblr_kyfivkpZ7u1qzlhmuo1_500.jpg
   http://27.media.tumblr.com/tumblr_kyfivkpZ7u1qzlhmuo1_400.jpg
   http://26.media.tumblr.com/tumblr_kyfivkpZ7u1qzlhmuo1_250.jpg
   http://28.media.tumblr.com/tumblr_kyfivkpZ7u1qzlhmuo1_100.jpg
   http://25.media.tumblr.com/tumblr_kyfivkpZ7u1qzlhmuo1_75sq.jpg

この中のphoto-urlのどれかが欲しいので最初にこう書いた。
tumblr.php

$xml=simplexml_load_file("http://dobinn69.tumblr.com/api/read");
$pu=$xml->posts->post->photo-url[0];

するとこんなエラーが。
表示結果

Parse error: syntax error, unexpected '[' in ファイル名 on line 2

あるぇ？

なんでかなぁなんでかなぁと検索してみるけど配列へのアクセスは別に間違ってないようだ。

試しに適当なxmlを作って上記方法でアクセスすると取得出来た。

test.xml



 
  
   test-title
   test00
   test10
   test20
   test30
   test40

test.php

posts->post->testText[0];
print($test);
?>

表示結果

test00

そして結論

二つを見比べてみる、どうも要素名にハイフンが入っているのが問題らしい気がする。

さっそくgoogleで「xml ハイフン」と検索してみると結構でてきた！
simplexml_load_fileの問題じゃなかったわけだ。

よってこんな風に変更

$pu=$xml->posts->post->{"photo-url"}[0];

参考：92. ハイフン付きのメンバ変数名を参照する方法

中括弧とクォーテーションで囲います。こうすることでハイフンが使われている要素名も参照できるようになります。

なるほどー。

WindowsXPのxamppでperlを動かそうとすると couldn’t create child process: 720003 でエラーになる時の対処方法メモ。

まこと — Thu, 28 Jan 2010 17:13:04 +0000

perlの1行目が

#!/usr/bin/perl

なんて風になってる場合なんかだと、
パスが通らない為couldn’t create child process: 720003になる。

その解決方法を2種類。

解決策1：#!/usr/bin/perlを書き換える

XAMPPの場合、perl.exeはC:\xampp\perl\binにインストールされるので、perlの1行目を

#!C:\xampp\perl\bin\perl.exe

みたいに変更しておく必要があるそうです。

でもそんなの全部変更するのうっかりミスの原因になるし、なにより面倒くさい。

解決策2：シンボリックリンクっちゅーのを作る。

シンボリックリンクを作成すれば#!/usr/bin/perl部分を変更せずにローカルで動かせるようになるらしい。
そっちのほうが断然良い。

ただXPはデフォルトでシンボリックリンクを作成する事が出来ない為リンク作成シェル拡張for Windows 2000/XPを使う。

perlのシンボリックリンクを作ってみる。

1．Cドライブ直下にusrフォルダを作る
2．C:\xampp\perlフォルダにあるbinフォルダを右クリックでC:\usrにドラッグする

3．表示されるメニューから[リンクを作る(L)]を選ぶ

4．C:\usrの中にbinフォルダが出来る

これで1行目が#!/usr/bin/perlでもcouldn’t create child process: 720003にならない(ハズ

参考にさせてもらったサイト

Pentan.info｜Windows版ApacheでCGI(Perl)を使用する方法 ActivePerl

暫定版 photoshopのスウォッチ(.aco)を色相で並び替えるようにした

まこと — Sat, 26 Dec 2009 18:11:58 +0000

とりあえずだけどやっと出来た、やっとだ。
スウォッチ(.aco)を色相か彩度か明度で並び替えるテスト

当初、色相の昇順だけを考えていたけど、どうせなのでHSBの昇順/降順6種類から選べるようにしてみた。

1．スウォッチを書き出す

プリセットマネージャーからも書き出せるかもしれないけどやったことない。

2．ソートの方法を選んで変換する

1．で保存したスウォッチを選択して
ソートの基準を色相、彩度、明度から選んで「変換」

3．ダウンロード

登録されている色数とRGBなんかと、ソート前の並び順とソート後の並び順を表示。

ソート済みファイルのダウンロード / 色数colors-西暦月日_時分秒.acoから保存先を選んでダウンロード、名前は変更しても問題なし。

こんな感じで使います。

追記｜2010-01-12
不具合修正、~~ついでに重複した色を削除するようにしてみた~~。
array_uniqueがローカルだと正常動作してるっぽいのに、サーバーにアップすると配列の先頭1つを残して全て削除してしまう、なにゆえ！？

追記2｜2010-01-12
array_uniqueの第2引数にSORT_REGULARを設定したところローカルでもサーバー上でも同じ動作になった。
さくらインターネットのarray_uniqueの設定はSORT_STRINGがデフォルトにでもなっているのでしょうか？
ようわからん。

帰ってきた photoshopのスウォッチ(.aco)を色相で並び替えるようにしたい

まこと — Sat, 26 Dec 2009 05:02:38 +0000

この記事は最新版があります。

ローカルではacoをソート出来るようになったんですが、アップロードすると動かない。
どうも.acoファイルの読み込みが失敗してるみたい。

色相で並び替えたらこんな感じ。

色相でソートしても明度がめだつなぁ
綺麗なグラデーションになるかと思ってたけど、HSBをうまいこと混ぜてソートしないとダメみたいだがようわからん。

とりあえず、次はファイルのアップロードと変換後のダウンロード出来るようにしなきゃ。

headerつけて、readfileを使うのか？

前回からここまでにつまづいた部分と大体の流れ

バイナリデータ(.aco)を16進数で開いて(bin2hex)
先頭から2番目のブロックの色数をhexdecで16進数から10進数に変換してループを回してRRRR GGGG BBBBを抽出。

色相で並び替えたいのでRGBからHSBに変換する準備。

RRRR GGGG BBBBからRR GG BBの配列を作成してmaxとminを使ってmaxとminを抽出、RGBと絡めてH(色相)を抽出。
ついでにS(彩度)とB(明度)も調べ配列に入れとく。

ソート

array_multisortを使って[例3 データベースの結果をソートする]を参考にソート。

str_padなどで隙間を埋めた。

bin2hexと書こうとするとbin22hexに変換される。

まこと — Fri, 25 Dec 2009 18:21:25 +0000

google日本語入力のせいだ。
と、思う。

phpメモ

bin2hex：バイナリを16進数で表示
hexdec：16進数を10進数に変換

dechex：10進数を16進数に変換

pack(“H*”,文字列);：16進数をバイナリに変換？

array_multisort — 複数の多次元の配列をソートする

まこと — Fri, 25 Dec 2009 11:47:08 +0000

array_multisort — 複数の多次元の配列をソートするの
「例3 データベースの結果をソートする」が理解できない。悔しいやら情けないやら。

$ar1=array("name"=>"サヨナラダンス","bpm"=>127);
$ar2=array("name"=>"ハローグッバイ","bpm"=>88);
$ar3=array("name"=>"WAGON","bpm"=>131);
$data=array($ar1,$ar2,$ar3);
print_r($data);

foreach ($data as $key => $row) {
    $name[$key]  = $row['name'];
    $bpm[$key] = $row['bpm'];
}

array_multisort($bpm,SORT_DESC,$data);
print_r($data);

//ソート前
Array (
　[0] => Array ( [name] => サヨナラダンス [bpm] => 127 )
　[1] => Array ( [name] => ハローグッバイ [bpm] => 88 )
　[2] => Array ( [name] => WAGON [bpm] => 131 )
)

//ソート後
Array (
　[0] => Array ( [name] => WAGON [bpm] => 131 )
　[1] => Array ( [name] => サヨナラダンス [bpm] => 127 )
　[2] => Array ( [name] => ハローグッバイ [bpm] => 88 )
)

「こうゆうものだ」って覚えるようなものじゃない気がするんだよなぁ。
foreachとセットでしか多次元の連想配列はソート出来ないのかな。

続 photoshopのスウォッチ(.aco)を色相で並び替えるようにしたい

まこと — Tue, 22 Dec 2009 07:49:46 +0000

20091227｜とりあえずのが出来たのでアップしまんた。
暫定版 photoshopのスウォッチ(.aco)を色相で並び替えるようにした
————————-

photoshopのスウォッチ(.aco)を色相で並び替えるようにしたいの続き。

まだまだ完成しないけど現状のメモ

$fileName="945066.aco";
$aco=fopen($fileName,"rb");
$acoStr=fread($aco,filesize($fileName));
$acoStr=bin2hex($acoStr);

//基本
$setBlock=20;//色一区切り
$setHead=12;//頭出し分
$cutNum=12;//切り取る分
//色数
$colorMax=substr($acoStr,4,4);
echo hexdec($colorMax)."
";

//
for($ii=0;$ii
出力結果：
2
Array ( [0] => Array ( [0] => 50 [1] => 8b [2] => 94 ) [1] => Array ( [0] => 94 [1] => 50 [2] => 66 ) )


まず.acoの開き方を調べた
.acoはバイナリなのでfopenにbで開く

そのままだと化けてたので

$acoのバイナリデータをbin2hexで16進数に
$fileName="945066.aco";
$aco=fopen($fileName,"rb");
$acoStr=fread($aco,filesize($fileName));
$acoStr=bin2hex($acoStr);

echo wordwrap($acoStr,4," ",true);//出力結果を見やすくする為に入れた

fclose($aco);

$acot出力結果：
0001 0002 0000 5050 8b8b 9493 0000 0000 9493 5050 6666 0000 0002 0002 0000 5050 8b8b 9493 0000 0000 0008 30b9 30a6 30a9 30c3 30c1 0020 0031 0000 0000 9493 5050 6666 0000 0000 0008 30b9 30a6 30a9 30c3 30c1 0020 0032 0000

色の開始位置が先頭から12

1セット0000 RRRR GGGG BBBB 0000の20

必要な分が12
$setBlock=20;//色一区切り
$setHead=12;//頭出し分
$cutNum=12;//切り取る分

.acoに何色登録されてるか抜き出す
//色数
$colorMax=substr($acot,4,4);
echo hexdec($colorMax)."
";

hexdec：16進数を10進数で返す
色を抜き出す
ここをどうしたらいいんだろうかわからん。

0000～0000の中身だけを取得する方法はないもんかな。
1セット(20)×色数分シフトさせてく。
for($ii=0;$ii
$colorName4[$ii]=substr($acoStr,$nowBlock,$cutNum);
$colorName4[$ii]=str_split($colorName4[$ii],4);
for($i=0;$i<3;$i++){
$colorName2[$ii][$i]=substr($colorName4[$ii][$i],0,2);
}
}

RRRRGGGGBBBBを抜き出して

$array[0]=RRRR

$array[1]=GGGG

$array[2]=BBBB

みたいになるよう配列に入れて

さらにRR GG BBになるよう2次元配列にいれた。

入れ方がこれで正しいのか…
substr：文字列の一部分を範囲指定して返す

str_split：文字列を配列に変換
print_r($colorName2);
fclose($aco);

print_r：変数の情報を吐き出す

var_dump：print_rより吐き出す情報が多い

fclose：ファイル閉じる
さて、この後はどうしたらいいんでしょう。

完成するといいな。
追記
色相で並び替えるから

RGBをHSBに変換して、Hでソートすればいいんですよね？

RGBからHSBのHと出すにはr,g,bを比較しなきゃダメで

ソートした後に移動させたら0000で包み込んで書き出す？

最初にbin2hexしたから逆のことしなきゃダメなんかな？
2箇所にあるRGBの表記はどうやってまとめたらいいのかな

photoshopのスウォッチ(.aco)を色相で並び替えるようにしたい

まこと — Sun, 20 Dec 2009 13:20:58 +0000

20091227｜とりあえずのが出来たのでアップしまんた。
暫定版 photoshopのスウォッチ(.aco)を色相で並び替えるようにした
————————-

何をどうしたらそんな事が出来るようになるのかわからんので、やってる事がずれてるかもしれんけどもメモ。

.acoの中身を見たい、
バイナリエディタで見るしかないようだ。
Stirlingを使ってみる。

16進数？なにそれ、まいったな。

適当なスウォッチを何個か作って.acoで書き出して、見比べてみて判ったこと

#508b94 を2個登録したスウォッチをバイナリエディタで開くと以下の通り

00 01 00 02 00 00 50 50 8B 8B 94 93 00 00 00 00
50 50 8B 8B 94 93 00 00 00 02 00 02 00 00 50 50
8B 8B 94 93 00 00 00 00 00 08 30 B9 30 A6 30 A9
30 C3 30 C1 00 20 00 31 00 00 00 00 50 50 8B 8B
94 93 00 00 00 00 00 08 30 B9 30 A6 30 A9 30 C3
30 C1 00 20 00 32 00 00

2色目を#945066に変更したスウォッチは以下

00 01 00 02 00 00 50 50 8B 8B 94 93 00 00 00 00
94 93 50 50 66 66 00 00 00 02 00 02 00 00 50 50
8B 8B 94 93 00 00 00 00 00 08 30 B9 30 A6 30 A9
30 C3 30 C1 00 20 00 31 00 00 00 00 94 93 50 50
66 66 00 00 00 00 00 08 30 B9 30 A6 30 A9 30 C3
30 C1 00 20 00 32 00 00

最初の00 01と最後の00 00は定型ぽい
次の00 02が登録されてる色の数、
3つ登録してあるスウォッチは00 03で、58個登録されてるスウォッチは00 3Aだった。
(2進数、8進数、10進数、16進数相互変換で変換させてもらってます。)

次の00 00がよく分からないけど区切り？
その後の50 50 8B 8B 94 93がhex値、前半2桁だけが有効？で00 00で閉じる？

00 08 30 B9 30 A6 30 A9 30 C3 30 C1 00 20 00

も区切りかな

hex値ぽいところを以下のようにガーっと00にしてもちゃんと読み込む

00 01 00 02 00 00 00 00 00 00 00 00 00 00 00 00
00 00 00 00 00 00 00 00 00 02 00 02 00 00 50 50
8B 8B 94 93 00 00 00 00 00 08 30 B9 30 A6 30 A9
30 C3 30 C1 00 20 00 31 00 00 00 00 94 93 50 50
66 66 00 00 00 00 00 08 30 B9 30 A6 30 A9 30 C3
30 C1 00 20 00 32 00 00

02 00 02 00からが本当の色設定？

phpのテスト



r:
g:
b:

// rgb.php
$r=hexdec($_POST["rr"]);
$g=hexdec($_POST["gg"]);
$b=hexdec($_POST["bb"]);
//
$max=max($r,$g,$b);
$min=min($r,$g,$b);
print "max:".$max."
";
print "min:".$min."
";
print $_POST["rr"]."
";
print $_POST["gg"]."
";
print $_POST["bb"]."
";

if($max==$min){
	$hue=0;
}
else if($g==$max) {
$hue=($b-$r)/($max-$min)*60+120;
}
else if($b==$max) {
$hue=($r-$g)/($max-$min)*60+240;
}
else if($g<$b){
$hue=($g-$b)/($max-$min)*60+360;
}
else{
$hue=($g-$b)/($max-$min)*60;
}
print "hue値".$hue;

でhexからhueを取り出せた。

あと必要な事

.acoの色の格納のされ方と範囲指定しての取り出し方
phpでバイナリを読む方法
とか？
方向はあってるんのでしょうか…

とりあえずphpで読み込んでみた

辞書を引きながら、こんな感じに。

$fname="945066.aco";
$aco=fopen($fname,"rb");
$str=fread($aco,filesize($fname));
$str=bin2hex($str);
echo $str;

$aco_ar=explode('0000',$str);
print_r($aco_ar);

fclose($aco);

出力結果

00010002000050508b8b949300000000949350506666000000020002000050508b8b949300000000000830b930a630a930c330c1002000310000000094935050666600000000000830b930a630a930c330c1002000320000Array
(
    [0] => 00010002
    [1] => 50508b8b9493
    [2] =>
    [3] => 949350506666
    [4] => 00020002
    [5] => 50508b8b9493
    [6] =>
    [7] => 000830b930a630a930c330c100200031
    [8] =>
    [9] => 949350506666
    [10] =>
    [11] => 000830b930a630a930c330c100200032
    [12] =>
)

メモ
explode(‘区切り文字’,文字列);
explode(’0000′,$str);

0000で区切ったけど、これだと#000が登場した時に区切り文字になってしまう。

メモ2
どうゆう風にしてけばいいんだろ
最初の2バイトを飛ばして、次の2バイトに格納されてる色の数を取得
前半00 00 RR RR GG GG BB BB 00 00で1セット
RR RRなどそれぞれの後半2文字を飛ばす
000830b930a630a930c330c1002000の前に出てくるRRRR GGGG BBBBを書き換える

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が無いよ

乱雑モックアップ » script

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

さくら家

phpでサーバーのフルパスを調べる

concrete5をxampp環境にインストール

環境

インストールの準備

インストール

エラーの原因

windows7 64bitにxamppを再インストール

ダウンロード

インストール

設定

.htaccessをC:\xampp\htdocs か C:\xampp\htdocs\xamppあたりに置くらしいけど

php.ini

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

どんな使い方をしてるか

超参考にしたページ

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

練習

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

DreamweaverのjQuery拡張機能 / jQuery Utilities Toolset with Code Utilities

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

rollover2.jsとoperaと色々復習

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

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

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

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

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

AS2 / オブジェクトをタイル状に敷き詰める

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

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

使い方メモ

AS2 / attachMovieした要素にアクセスする時

メモ / 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

さくらインターネットのスタンダードプランでphp5.3.3をインストールして使う

このサイトを参考にしてインストールしました。

なんでphp5.3.3をインストールしたかったか、事の経緯

PECLのSQLite3拡張モジュールを使えば大丈夫？

mb_strlen()で変な値が返ってくる時は文字エンコードを指定する。

簡単に 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

使い方

ダウンロード

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

ソース

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

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