7月 21

サイトの提案書や各種ドキュメントを作る際、結構イラストレータで作っている。

レイアウトが綺麗にできるし、編集時のストレスが少ない。(Wordで書類を作ってると、どうやっても行間やインデントをうまく調整できない場合があり、半端ないストレスを感じるため、Wordで書類作成したくない)

しかし、イラストレータで不便なのは、そもそもが複数ページの書類を作るように設計されてないので、ページをタイリングしても、共通ヘッダ・フッタなどを利用できないし、複数ページのPDF化等も機能が無いため、ここは不便である。

しょうがないので、最上位・最下位のレイヤーに共通パーツを置いて、ページのデータをレイヤーに展開して作成し、該当レイヤーのみ可視にしPDF書き出し→Acrobat で結合ということを手動でやっていたのだが、この部分を自動化するスクリプトを提供してくれてる方がいた。すばらしい。

早速使わせてもらった。

Karappo web design room » レイヤーごとにPDF書き出しするJavascript

すばらしい。便利です。作業が遅い僕もこれですこし効率アップできます。多謝!

Popularity: 1% [?]

written by ANN

6月 25

某データベースサイトにて、サイト内検索を行う場合、

  1. 自スクリプトにて全文検索
  2. マッチしない場合、Yahoo!Web検索APIで検索
  3. それでもマッチしない場合は「一致するものがない」メッセージを表示

Yahoo!Web検索APIでは、RESTリクエストに、siteパラメータを設定し、サイト内検索をしていたのだが、どうもおかしい。サイト内に存在するキーワードだった場合は正しく動作するが、サイト内に存在しないキーワードの場合、勝手に外部サイトを対象とする結果を引っ張ってきている模様。(通常のサイトとかwikipediaとか)

RESTクエリのサンプル

http://search.yahooapis.jp/WebSearchService/V1/webSearch?appid=アプリケーションID&query=%e6%b2%96%e7%b8%84&site=example.com


siteパラメータの使い方が悪いのかと、ドキュメントをしばらく読み込んでみたが分からず。

しょうがないので、REST内のsiteパラメータを利用するのではなく、クエリ文字列中に、”キーワード+site:example.com”と、キーワードの一部としてAPIを実行。こうすることで、サイト内でマッチしない場合でも、勝手に外部から結果を持ってこず、指定キーワードはサイト内には存在しない、という処理を実行できた。

しかし、Yahooのサイト内検索ではマッチしないものでも、Googleだとマッチするというのが悔しいところ。Googleの場合、結構な精度で読み仮名も自動的に検索してくれるので、とても便利なのだが…。


Popularity: 1% [?]

written by ANN

3月 16

納品済みのWordPressで問題が発生したので、その原因と対処などを。

【トラブルその1】

[現象]アップロードしたワード・エクセル・パワーポイントのファイルを、ダウンロードしようとするとなぜかZipファイルになってダウンロードされ、正常に開けない。また、Safariだとそのファイルのソースが表示されてしまう。

[原因]officeの新しいバージョンのファイルは、実は1ファイルではなく、Mac OS Xのパッケージファイルみたいに複数ファイルをアーカイブしたZipファイルである。拡張子でいうと、docx,xlsx,pptxのファイルが該当。適切なmime typeが割り当てられてない為、ブラウザ側がなんのファイルか分からず、中身をみてZipと思って処理しまっている。

[対策]
ファイルの正体(?)を明示的に示す必要がある。httpd.confに、下記3行を追加。httpdを再起動すればOK.

AddType application/vnd.openxmlformats-officedocument.wordprocessingml.document .docx
AddType application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xlsx
AddType application/vnd.openxmlformats-officedocument.presentationml.presentation .pptx
※画面の都合で改行されてますが、実際はAddTypeから1行で記述してください。

[参考リンク]
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1426328894
http://trivia.cocolog-nifty.com/blog/2010/01/docxzip-9104.html

【トラブルその2】

[現象]突然、記事の「プレビュー」が出来なくなった。

[原因]リビジョン管理とアートセーブ機能を停止するプラグイン→ http://exper.3drecursions.com/2008/07/25/disable-revisions-and-autosave-plugin/ を入れていると、プレビュー機能が死んでしまう模様。

[対策]プラグインをOFF。しかし、OFFすると自動保存が利いてしまい、正直、残念な感じ。皆さんも困ってる模様。これはWordPressの該当機能の動作仕様に問題があるんだろうけど。

[参考リンク]
http://wp.mmrt-jp.net/2009/04/17/3269/
http://suirakukai.com/wordpress/291/disable-revisions-and-autosave-plugins

Popularity: 4% [?]

written by ANN

1月 29

起動ディスクをCarbon Copy Clonerを使って外付けのディスクにバックアップしている時に気づいた現象。

なぜかボリューム直下の”home”というフォルダが、Finderから見えない。バックアップコピーに失敗してるかと思いきや、Terminalから/Volumes/外付けHD/にいき、lsしてみたところ、ちゃんとhomeフォルダは存在する。

しかも、

$ open home

とやれば、ちゃんとFinder上で開ける。その開いた状態でcmd + iをしてファイル情報を見ても問題ない。というか、Finder上では可視/不可視の設定ってできないしね。

ls -l で表示される結果をよくよく見てみると、

drwxr-xr-x@   6 hoge  staff   204B  9  3 10:51 home/

と、パーミッションの隣に、なにやら見慣れるアットマークが。あれ?こんな記号、あったっけ?と思い調べてみると、

OSXの拡張属性、@(アットマーク)付きファイル

とのこと。たしかに、ls -la@としてみると、

drwxr-xr-x@   6 hoge  staff   204B  9  3 10:51 home/
com.apple.FinderInfo  32B

上記Blogでは、この拡張属性を消せばいいと書いてあるが、なんかしっくりこないので、追記にあるように、SetFileコマンドを使ってみる。

まず、SetFileと対になる(?)GetFileInfoを使う。

$ GetFileInfo home
directory: "/Volumes/backup/home"
attributes: aVbstclInmedz
created: 05/22/2009 11:13:54
modified: 09/03/2009 10:51:44

この、attributesというのがキモ。attributesの説明は、SetFileコマンドのヘルプか、manをみるとよろし。要するにそれぞれの記号がファイルの属性を表している。このうち、Vのみ大文字なので、manualによると、V = invisible つまり、不可視フラグが立ってるということである。

これを、SetFileコマンドを使ってhomeディレクトリに対し、可視フラグを設定するには、

$ SetFile -a v home

でOK。(つまり、V = 不可視設定、v=可視設定)

なんつーか、1つのファイルに対して、複数方面からの設定やらフラグやらが設定しており、非常にややこしいですな。Macのファイルシステムは。

Popularity: 3% [?]

written by ANN

12月 29

年明けから本気だす為に、WEB制作に便利なチートシート(Cheat Sheet)のまとめです。主に日本語版かつPDFで入手できるものを集めました。日本語版が見つからないものは、非日本語版も掲載しています。

1.CSSのチートシート

from CSS Cheat Sheet 日本語版 | textdrop

2.正規表現のチートシート

from 正規表現 Cheat Sheet 日本語版 | textdrop

3.PHPのチートシート

from PHP Cheat Sheet 日本語版 | textdrop

4.MySQのチートシート

from 漢(オトコ)のコンピュータ道: MySQL Cheat Sheet 1.0

5.SEOのチートシート

from SEO基本技術のチートシート(トラの巻)を作ってみた | Web担当者Forum

6.WordPressのチートシート

from WordPress Help Sheet 日本語版 | textdrop
※その他WordPressの開発用のさまざまなチートシート→WordPressチートシートいろいろ・SEOとかテンプレートタグとか – かちびと.net

7.mod_rewriteのチートシート

from mod_rewrite Cheat Sheet 日本語版 | textdrop

8.Subversionのチートシート

from Subversion Cheat Sheet 日本語版 | textdrop

9.Gifのチートシート

from Git Cheat Sheet 日本語版 | textdrop

以下、英語版です。

10.HTML5のチートシート

from HTML 5 Cheat Sheet (PDF) – Smashing Magazine

11.jQueryのチートシート

from jQuery Cheat Sheet
jQueryは日本語版のチートシートが無かったけど、いずれ誰か作るだろう。とりあえず jQuery 1.3.2 日本語リファレンスがあれば充分。

12.htaccessのチートシート

from the jackol’s den » htaccess Cheatsheet
※htacdessのチートシートの日本語版はどっかにあった気がするんだけどな~

13.PHPの各種演算結果のチートシート

from BlueShoes: PHP Cheat Sheet

14.実体参照文字のチートシート

from XHTML Character Entity Reference

15.adobe Flash CS4 キーボードショートカットのチートシート

from

16.Unix/Linuxのコマンドのチートシート

from Unix/Linuxコマンドリファレンス – よたらぼ 保管庫

17.ActionScript/Tweenerのトランジションのチートシート

from 超訳:Tweenerドキュメント&言語リファレンス

18.ActionScript/Flexのクラス・API相関図ポスター

from Ted On Flash: Cube Wallpaper – AS3 and Flex API Posters

こうやってみると、textdrop – http://www.textdrop.net/さんによる日本語化されたものがおおいですね。ありがたいです。

僕もなにか作ってみようかな。

Popularity: 8% [?]

written by ANN

12月 25

時間の処理には、trick7さんのTeraClockを使わせてもらいました。

キモは、

(TextArea).verticalScrollPosition = (TextArea).maxVerticalScrollPosition

だけです。

デバッグ用に、TextAreaに変数とかを表示させたいときに、スクロールバーが付いてこないと非常に見づらいので、上の1行を追加すると便利です。


Actionscript:
  1. package 
  2. {
  3.     import fl.controls.Button;
  4.     import fl.controls.TextArea;
  5.     import flash.display.MovieClip;
  6.     import flash.events.*;
  7.    
  8.     import com.trick7.utils.TeraClock
  9.     /**
  10.      * ...
  11.      * @author IRONHEARTS
  12.      */ 
  13.     public class Main extends MovieClip
  14.     {
  15.         private var _ta1:TextArea;
  16.         private var _ta2:TextArea;
  17.         private var _reset:Button;
  18.         private var _tc:TeraClock;
  19.  
  20.         public function Main():void
  21.         {
  22.             addEventListener(Event.ADDED_TO_STAGE, init);
  23.         }
  24.        
  25.         private function init(e:Event = null):void
  26.         {
  27.             removeEventListener(Event.ADDED_TO_STAGE, init);
  28.            
  29.             _ta1 = TextArea(getChildByName("ta1"));
  30.             _ta2 = TextArea(getChildByName("ta2"));
  31.             _reset = Button(getChildByName("reset"));
  32.            
  33.             _reset.addEventListener(MouseEvent.CLICK, resetHandler);
  34.            
  35.             _tc = new TeraClock;
  36.            
  37.             _tc.addEventListener(TeraClock.SECONDS_CHANGED, secListener);
  38.  
  39.         }      
  40.         private function resetHandler(e:MouseEvent):void
  41.         {
  42.             _ta1.text = _ta2.text = "";
  43.         }      
  44.         private function secListener(e:Event):void
  45.         {
  46.             var s:String = _tc.hours2 + ":" + _tc.minutes2 + ":" + _tc.seconds;
  47.            
  48.             _ta1.text += s + "\n";
  49.             _ta2.text += s + "\n";
  50.    
  51.             _ta2.verticalScrollPosition = _ta2.maxVerticalScrollPosition;
  52.         }
  53.     }
  54. }

ソース必要な人はドウゾつtascroll.fla,Main.as

Popularity: 7% [?]

written by ANN

12月 18

一つ前のエントリーの続きで、Flashでテキストエディタを作成中。編集したテキストおよびTextFormatをXML形式に変換して、サーバにPOSTし、保存する処理を作成中に、上記のエラーが発生。

Flash側からPHPへのPOSTについては、

AS3とPHPの連携 - 基礎 - memo.at sonic

を参考にさせてもらう。たしかに、load()でPOSTするというのには違和感を感じるが、これしかないのでしょうがない。(Socketベースで通信する場合はセキュリティポリシーファイル/サーバが必要でさらに面倒)


Actionscript:
  1. // テキストフィールドのフォーマットをXMLに落とし込む
  2.  var txtxml:TextField2XML = new TextField2XML(_targetText);
  3.  var v:URLVariables = new URLVariables();
  4.  v.body = txtxml.getXML();
  5.  var req:URLRequest = new URLRequest("ポスト先のURL");
  6.  req.data = v;
  7.  req.method = URLRequestMethod.POST;
  8.  var loader:URLLoader = new URLLoader(req);
  9.  loader.dataFormat = URLLoaderDataFormat.VARIABLES;
  10.  loader.load(req);

PHP側は、$_POSTで受信したデータをDBに保存する処理を記述。


PHP:
  1. $data = $_POST["body"];
  2. // ~DBに書き出す処理・省略~

で、FlashIDE上でプレビューしてみると、

Error: Error #2101: URLVariables.decode() に渡される文字列は、名前/値のペアを含む、URL エンコーディングされたクエリー文字列でなければなりません。

という、エラーが発生。おかしいなぁ。ちゃんとURLVariablesで値を渡していて、URLエンコーディングされたクエリー文字列が生成されてるんだけどナーと思い、悩むこと30分。

やっと分かった。

呼び出し時にエラーになってるんじゃなく、呼び出した後にエラーになっている。つまり、


Actionscript:
  1. loader.load(req);

で、呼び出すURLからのレスポンスが、key=value形式になってないとエラーになるのである。

しかし、POSTしても別にレスポンスを見ないケースもあるだろうにネー。

しょうがないので、php側でexitする前に echo "ret=true";とダミーのレスポンスを返すことにする。コレでエラーは無くなった。

TextField2XMLのソースは、まだ調整中なので公開できないけど、XMLの読み書きが完了したら、サンプルとして公開する予定。

それにしても、as3になってから、URLへのGET,POSTや、FlashVarsへのアクセスが煩雑になって面倒この上ない。だれかas2互換のラッパー関数とか作ってないかな。ついでにJavaScript互換関数とかPHP互換関数とかあると嬉しいな。

知っていたら教えてください。

Popularity: 18% [?]

written by ANN

12月 10

flash-texteditor1

JavaScriptベースのエディタは沢山あるが、最終的に編集した結果を画像として出力したいので、Flashで作ってみることにした。最終的に目指すのは、

●編集結果を画像(jpeg)として保存できるようにする。
●編集内容もMySQLに保存しておき、再編集できるようにする。

とりあえずは編集できるTextFieldと、フォント・サイズ・色の選択を作ってみた。

>>>>>続きを読む

Popularity: 6% [?]

written by ANN

12月 01

まぁ、タイトルが全てなんですが、フォームのフィールドで入力を数値に制限する::TexoTela:: jQuery - numericというのがあるのだが、これを使うと、Safariからペーストできないという問題を発見。


↑下のテキストフィールドにはSafariからペーストできないはず。

よく見ると配布元にペーストに問題がある…と書いてあったわけだが…

ここで、もう一つの入力制限プラグイン,jQuery AlphaNumericについても調べてみた。

こちらも、入力制限の文字種に限らず、各ブラウザでペーストに問題があるようだ。


結論。


jQuery numericやjQuery AlphaNumericを使う場合、ブラウザによってはペーストできないので要注意。フォームにペーストできるかできないかというのは、案外、テストされないんじゃないだろうか。


Popularity: 4% [?]

written by ANN

11月 20

いまさらだけど、Yahoo Pipesが面白い。

大まかな使い方は他のサイトを参考してもらうとして、自分が使っていて気づいた点というかメモを書いていきます。

Fetch Pageについて

サイトのHTMLデータをスクレイピングするためのモジュールなのだが、サイトのencodingが、utf-8以外だとパースエラーとなる場合がある。ならない場合もある(謎)。仕方ないのでphpのスクリプトを1つかまして、mb_convert_encodingして渡すが、metaのcharsetもちゃんと変えてないとエラーになる。charset見てるんならutf-8以外も対応してほしいなー。

regexの正規表現について

Operators > regex

では、入力データを正規表現で置換できる。しかし、いわゆるPHPやPerlと完全互換では無いようだ。具体的には、一部のメタ文字や文字クラスが使えない。たとえば、

\w - 英数字
\W - 英数字以外

や、

[:alnum:] - 英数字
[:blank:] - ブランク

など。しょうがないので[0-9]{n}という感じで書くしかない。

Yahoo Pipesが改変するもの

Fetch Pageで取ってきた時点で、HTML中のアンカー(aタグ)において、相対パスは、絶対パスに置き換えられ、rel="nofollow" target="_blank"が追加される。targetに違うものが設定されていても、_blankに上書きされる。

まぁ、Yahoo Pipes師匠の言いたいこともわからんでもないが、Fetch Pageの時点でデータが改変されていることに注意したい。

相対パスが絶対パスに置き換わるという点においては、文字コード変換のプロクシスクリプトをかましている場合、そのスクリプトのホストが絶対パスのベースとなるので、RSS出力した際に、相対パスからのリンクがそのホストからになり、当然、404となる。Fetch Pageの後でその部分を再度regexして、オリジナルのホストに戻してやる必要がある。


基本、Fetch Pageしたあとはregexで置換するんだけど、古いサイトだと、HTMLもむちゃくちゃだから、簡単な正規表現ではなかなか置換できない。ここ数日、ひたすら正規表現の練習である。

正規表現は、パズルみたいで面白いけど。


あとは、if(exp)で分岐できたり、各モジュールに一言コメントを入力できると、便利なんだけどなー

[ 追記 ]

2年前にすでにYahoo! Pipes の Page Fetch モジュールでスクレイピングし放題 - てっく煮ブログ さんで同じようなこと書かれてた…僕は2年遅れてたってことか orz=3

Popularity: 3% [?]

written by ANN