めも

自分用メモ

Photoshop で Web用に保存をしたとき、 Photoshop 上で「このサイズで書き出すよ！」って言ってるファイルサイズと 実際に書き出されるファイルサイズにあまりにも違いがある場合、 「Web およびデバイス用に保存」ウィンドウの中の 「メタデータ」の部分をなしにする。

書き出す際に著作権情報等を付加してしまうため、ファイルサイズが増えてしまう、というわけ。

ASSHUKUセヨ！！

JPEGとかPNGとかの画像をダウンロードさせるページを作っていたのですが、 aタグのhrefに画像のパスを書いても、対象の画像に遷移して困ってしまいました。 ZIP等をダウンロードするときみたいに確認ダイアログを出したかったので、 色々調べてみました。

perlやPHPでファイルのダウンロード確認ダイアログを表示させる方法 | perl/CGI | 阿部辰也のブログ――人生はひまつぶし。

ここのPHPのソースを一部改変してJSからドーンします。

<?
$files = $_GET;
$src = &quot;./hoge/{$files['filename']}&quot;;</p>

<h1>HTTPヘッダを送信</h1>

<p>if(file_exists($src)){
header(&quot;Content-type: application/octet-stream&quot;);
header(&quot;Content-Disposition: attachment; filename=\&quot;{$files['filename']}\&quot;&quot;);</p>

<h1>出力</h1>

<p>readfile($src);
}else{
  header(&quot;Location: ./fuga.html&quot;);
}
?&gt;

header(“Content-Disposition: attachment; filename=\”{$files['filename']}\”"); ここの記述でダイアログを表示させる(ついでにファイル名を決めることができる)ようですが、 セキュリティ的に問題もある模様。 [Studying HTTP] HTTP Header Fields

あと、ファイルによってMIMEタイプ(Content-Type)が異なるので、それもなんとかしなければならず。 PHP の mime_content_type() を使おうとするも非推奨とのことで断念。 とりあえず application/octet-stream とすることで回避(と言えるのかわかりませんが)しました。

で、このPHPをJSから叩く

    $('a.download').click(function(e){
      e.preventDefault();
      var filename = ($(this).attr('href')).split('/');
      filename = filename[filename.length-1];
      location.href = './fuga.php?filename='+filename;
    });

firebug とかで href 書き換えられて押されたりすると怖いので、 ファイル名の部分だけを切り取って送るようにしました。

ここまでできたので、今度は欲しい画像を選んでZIPに圧縮してダウンロード、とか作りたいのですが。 さぁ、時間が無い。

■おまけ application/octet-stream とはなんぞ web用語辞典 – application/octet－stream

なんだかわからないけど何かのファイル っていう意味っぽいです。

XMLを読み込んでステージ上に画像を配置するためにこんなコードを書きました。 かなりの割合ではしょってるけども。

for(var i:int = 0; i<xml.@maxnum; i++){
  //Panel を用意する
  panelInit(i);</p>

<p>//画像を読み込む
  img.load(reqImage);
  img.contentLoaderInfo.addEventListener(Event.COMPLETE, attachImage(i));</p>

<p>if(i == xml.@maxnum-1){
    Tweener.addCaller(this, {
      onUpdate : function(){
        sortPanel();
        loading.visible = false;
        showControler();
        panels.forEach(function(_this:Panel, i:int, ary:Array){
          _this.visible = true;
          _this.oldY = _this.y;
          _this.y = stageH+_this.height;
        });
      },
      onComplete : function(){
        panels.forEach(function(_this:Panel, i:int, ary:Array){
          Tweener.addTween(_this,{
            y : _this.oldY,
            visible : true,
            time : 2.5,
            onComplete : function(){
              if(i==ary.length-1){
                timer.start();
              }
            }
          });
        });
      },
      delay : 1,
      time : 1,
      count : 1
    });
  }
}</p>

<p>function attachImage(_id:int):Function{
    return function(event:Event):void{
        var img:MovieClip = new MovieClip();
        img.addChild(event.target.content);
        img.x = -img.width/2;
        img.y = -img.height/2;
        img.alpha = 1;
        panels[_id].addChild(img);
        panels[_id].href = xmlObj.href[_id];
        panels[_id].target = xmlObj.target[_id];
        panels[_id].addEventListener(MouseEvent.CLICK,clickImg);
    };
}

panelInit() はPanelクラスを呼び出して配置する関数。 でもこの書き方だと、 Panelを一個配置する→画像を読み込む→読み込まれたらPanelに貼り付ける っていう処理になってるので、どうやら画像が読み込まれた順(？)に配置されてる模様。

これじゃいけないので、 Panelをとりあえず配置する→とりあえず画像を読み込んでおく→順番にPanelに貼り付けていく っていう処理に変えたいと思います。

まず先にPanelを全部配置したいので、

for(var i=0; i<xml.@maxnum; i++){
  panelInit(i);
}

panelInit() だけ別のfor文で処理しておきます。

次に画像を順番に並べてどっかに置いておきたいので、

var imgAry:Array = new Array(); //画像を置いておく配列を用意する
for(var i:int = 0; i&lt;xml.@maxnum; i++){</p>

<p>//中略</p>

<p>//画像が読み込まれたら実行でなく、画像を読み込む準備ができたら実行するようにする
  img.contentLoaderInfo.addEventListener(Event.INIT, attachImage(i));</p>

<p>//中略</p>

<p>function attachImage(_id:int):Function{
    return function(event:Event):void{
        var img:MovieClip = new MovieClip();
        img.addChild(event.target.content);
        img.x = -img.width/2;
        img.y = -img.height/2;
        img.alpha = 1;
　　　　　　　　　//Panelに設定していた諸々はここではやらないようにする
                //ただただ画像をおいとくだけにする
        imgAry.push(img);
    };
}

で、最後にパネルの配列と画像の配列を対応させます。

//略
  if(i == xml.@maxnum-1){
    Tweener.addCaller(this, {
      onUpdate : function(){
        sortPanel();
        loading.visible = false;
        showControler();
        panels.forEach(function(_this:Panel, i:int, ary:Array){
          //ここで各Panelにプロパティを指定する
          _this.href = xmlObj.href[i];
          _this.target = xmlObj.target[i];
          _this.addEventListener(MouseEvent.CLICK,clickImg);
          _this.visible = true;
          _this.oldY = _this.y;
          _this.y = stageH+_this.height;
          //いろいろやったら最後にPanelに画像を貼り付ける
          _this.addChild(imgAry[i]);
        });
      },
//略

こんな感じで無事XMLに書いた順番に配置してくれるようになりました。

でももっとうまくやる方法がある気がするんだぜ。

参考：http://dev-man.seesaa.net/article/56353764.html

httpd.conf内 最下部 バーチャルホスト追加部分

<VirtualHost *:9999>
DocumentRoot D:/studies/
<Directory "D:/studies/">
Options Indexes FollowSymLinks MultiViews Includes ExecCGI
AddType text/html .shtml
AddHandler server-parsed .html　　←ここを追加
AddHandler server-parsed .shtml
AddHandler cgi-script .cgi .pl
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

とのこと。めもめも。

—————-【追記(2010/03/26 19:07)】—————- 下記の方法でやっていたところ、再度エラーが出る(例によって表示はされないけど)ので、 結局 window.parent.fn() で取りました。

エラーがでたりでなかったりなんなんだよもう。。

昨日のiframeの続きで、 iframe の中の子ページから親の関数を呼び出したかったので、 とりあえず window.parent.fn() で取ってみました。

すると、IE6で動かない。 きっとスコープ的な何かがおかしいんだろうなぁと思い、 window.parent.document.fn() とか色々試しつつ調べつつ。 そうこうしているうちにこんな記事を発見。

parent – hoshikuzu | star_dust の書斎

これによると、IEの場合 document.parentWindow なるものが存在するらしい。 へーなんかきもい。

それでもとりあえず6以外ではちゃんと動いてたので、6だけに適用。なんか怖いし。 document.parentWindow.fn() で無事取得できました。

こんな感じ

if(undefined !== window.ActiveXObject && $.browser.version.indexOf('6.') != -1){
  document.parentWindow.ｆｎ();
}else{
  window.parent.fn();
}

http://www.unolabo.boo.jp/ と http://unolabo.boo.jp/ の両方で同じページが閲覧できる場合(実際はできませんが)、 GoogleMaps API などの様なサービスを使おうとするとちょっと厄介です。 それぞれの URL に対してAPIキーを発行してもらわなければならないですので。 なので、これらの URL をどちらか一つに統一して、もう片方はリダイレクトさせてしまいましょう。

Continue reading

っていう JavaScript を書いたとき、 func1 の処理が完全に終わってから func2 の処理を行いたい。 そんなことを考えてたわけなのですが。 どうにかしてうまいこと処理したい、そう思って調べてたら、

動的スクリプトローディング（さんざん既出だと思うけど｜IT戦記

こんな記事を発見。 jQuery が完全に読み込まれたのを確認してから実際の処理を行う、というものなのだったので一部拝借。

Continue reading

追記 このエントリーでの問題は解決しました。 解決編はこちらからどうぞ。

twitterの認証方式にOAuthというものがあるとのことで、色々やってみることにしました。 とりあえずPHPでやってみます。 以下覚え書き(自分用メモなんでだいぶ端折ってます。わかりづらくてごめんなさい)。

参考ページ： PHP+OAuthでTwitter – SDN Project TwitterのbotをOAuthに対応させる – しばそんノート Sinatra と OAuth を使って Twitter のタイムラインを取得してみた – まちゅダイアリー(2009-08-18)

Continue reading

げこ さんの発言:

　　　　　　　　 ,. -‐'''''""¨¨¨ヽ 
　　　　 　 　 (.＿＿,,,... -ｧァﾌ|　　　　　　　　　　あ…ありのまま 今　起こった事を話すぜ！ 
　 　 　 　 　 |i i|　 　 }!　}} /／| 
　　　　 　 　 |l､{　 　j}　/,,ｨ//｜　　　　　　　『おれはDD_belatedPNG.jsを使ってIE6で透過PNGを使ってたんだ。 
　　　　　　　 i|:!ヾ､ﾉ／ u {:}//ﾍ　　　　　　　　だが戻るボタンを押した途端PNG指定した要素の位置が全てずれてやがったんだ。』 
　　　　　　　 |ﾘ u' }　 ,ﾉ　,!V,ﾊ | 
　　 　 　 ／´fト､{ﾙ{,ィ'ｅﾗ　, ﾀ人　　　　　　　　な…　何を言ってるのか　わからねーと思うが 
　　　　 /' 　 ヾ|宀| {´,)⌒/ |<ヽﾄiゝ　　　　　　　　おれも何をされたのかわからなかった 
　　　　,ﾞ　 ／ )ヽ iLﾚ 　u' |　| ヾｌﾄﾊ〉 
　　 　 |／_／　 ﾊ !ニ⊇　'／:} 　V:::::ヽ　　　　　　　　頭がどうにかなりそうだった… 
　　　 /／ 二二二7'T'' ／u'　__ /:::::::/｀ヽ 
　　　/'´r　-―一ｧ‐ﾞＴ´　'"´ ／::::／-‐ 　＼　　　　position:absolute; だとか hasLayout だとか 
　　 / // 　 广¨´ 　/'　　 ／:::::／´￣｀ヽ ⌒ヽ　　　　そんなチャチなもんじゃあ　断じてねえ 
　　ﾉ ' /　 ノ:::::ー-､___／:::::／/ 　 　 　 ヽ　　} 
_／｀丶　/::::::::::::::::::::::::::￣`ー-{:::...　　　 　　　ｲ　 もっと恐ろしいものの片鱗を味わったぜ…

でも、なんか hasLayout がらみくさい気もするよ。 position:static; にしたら直ったし。

[｡-ﾟ]