技術ノヲト

イラストレーターなどでPDFファイルを作ると、複数ページがつくれなかったりする。有料のツールなんかはでているのだが、お金をかけたくない。Firefoxには印刷物をPDF化する機能がある。CSSには改ページコマンドがあるので、あっさりと複数ページの印刷物を作る事ができた。なんだHTMLで良かったんだ、と思う。

これ、意外と常識なのだろうか？　きっとそうなんだろうなあ。

長い間電源を切っていなかったPowerbook G4。半日ほど電源を切る。この後で再起動すると問題が起こり出した。Safariを起動してウェブサイトを閲覧すると、フリーズするのだ。アクティビティモニターを見るとMDSというプロセスがCPUを食っている。検索するといろいろな情報が出てくる。OS X10.4, 10.5では時折あるバグのようだ。解決策情報もあるのだが、どうやら一貫性がない。
お
Spotlightのインデックスを作り直すとよいというので、作り直したが状況は改善しなかった。インデックスの作り直しには時間がかかる。ムービーや音楽などをSpotlightの検索対象から外す。アクセス権が関係あるという人がいるので、これも修復。なぜかFront Row関係で不具合が見つかる。

１日、いろいろとやっている内に、不具合は収まった。とても気持ち悪い。副産物として、Front Rowの動きがスムーズになった。どうやらこちらも自己修復に問題があるようだ。

しばらく10.3のG4で作業したのだが、下位ブラウザーではFacebookの読み込みに問題があるようだ。Firefoxは動かなくなり、Safariは落ちてしまう。コードを見るとJavascriptに重複がある。これを修正するとFirefoxでは読み込みができるようになった。Safariは依然落ちる。

MacOS 10.5でTime Machineを使ったバックアップを取っている。ところが、ある日突然バックアップが取れなくなった。１時間程がんばった挙げ句、フリーズする。画面がすーっと暗くなって「リスタートしてください」という画面が出る訳だが、MacOSはほとんどフリーズしないので、とても心臓に悪い。この世の終わり的な感じ。結論だけ言うと、結局バックアップを新規で取り直した。要領とCPUにもよるのだと思うが、約12時間かかる。

さて、それまでやったことをまとめる。まず、バックアップディスクをディスクユーティリティで診断。その後本体のハードディスクにディスクユーティリティで診断。両方ともたいした問題は見つからない。作りかけの作業ファイルが悪さをしている可能性があるので、それを消す。

コンソールを見ると、インデックスにアクセスできないからバックアップが取れないというような記録がある。システムがフリーズするたびに、Spotlightのインデックスを作り直しているようだ。

別にTime Machineに文句を言っても仕方がないのだが、できないんなら、フリーズするまえに「ゴメンできません」と言ってからと止まって欲しい。

できあがり試作品

1. IllustratorでSVGを準備する。polygonデータとpathデータのみを保存する。
2. svgタグの中にデータを「手書き」で埋め込んでゆく。（CS5では書き出しが自動化されているらしい…）
3. 適宜グループ化する。gタグで囲む。例えばジャケットは複数のパスデータでできているので、gタグで囲み、gタグにid=jacketを振る。
4. 変更しない色（例えば肌色）は予めスタイルシートで定義する。

   #head {fill: #EFBB95; stroke: #EFBB95;}

   などといった具合。
5. その他はこうやってJavascriptから変更する。

   function change2(id, color){
   var poly = document.getElementById(id);
   poly.setAttribute("fill", color);
   

   }

少なくともSafari5.xでは動作した。Firefox 3.xでは動作せず。あとは試してません。

サンプルはコチラ。iPhoneのアプリケーションを作るためには、cocoaとobjective-cを勉強しなければならない。これがなかなか面倒くさい。ということでwebの基本的な技術だけで作れたらなあと思う。そういった望みに答えてくれるのが、この本。jQueryベースの技術を使ってiPhone風のwebアプリが作れる。

ついでに、HTML5対応のブラウザーを使うとローカルでSQLを使えるのだそうだ。cookieみたいなものだが、もっと複雑。知らなかった。

オブジェクティブ

一連の写真を閲覧し、気に入った写真をデータベースに保存する。ログイン機能があり、写真集の作成は制限される。今回はイメージに合わせて洋服のコレクションが自由に選べるようになっている。

作り方

フォトアルバムそのものはJQueryにあるデモが使える。ただしデモのままでは、どのファイルが受け渡されたかがわからない。オブジェクトそのものは$itemとして受け渡される。改良してイメージに固有のIDを振るようにする。すると下記の要領でid名が取得できる。これをデータベースに飛ばす。なぜこんなことを書いているかというと、いくら探してもドキュメントが見つからなかったから…。

$found_image = $item.find("img");
var idname = $found_image.attr("id");

PHPであればvar_dumpが使えるのだが、JavaScriptにはない。いろいろ調べた結果Firebugでconsole.log($item)というコマンドを見つけた。JavaScriptで変数名を調べるにはconsole.log([変数名])を使うといいらしい。

次の問題はアイコンのロゴだ。サンプルはゴミ箱になっている。これはちょっと意外な方法で変更する。ui-icon-trashというクラスがあり、これをui-icon-plusに変更した。スクリプトを見るとクラス名が見つかるとファンクションが起動することになっているらしい。リフレッシュボタンも同じ要領で、ui-icon-minusに変更。

次にログイン機能を付ける。FacebookのPHP版を使う。ログアウトしたら別ページに飛ばすというような面倒くさいことはしないで$meに変数が入っていれば編集ボタン（つまりプラスとマイナス）が表示されるようにした。ちなみに、もともとはドラッグアンドドロップのデモなので、ドロップするとデータベースに登録されてしまう。

コチラがログイン前。ログインボタンが表示される。

コチラがログイン後。ログインした人の顔写真が表示され、プラスとマイナスのボタンが加わる。プラスを押すとアルバムが編集される。

密かに怖れていたのだが、このレベルではJQueryとFacebookはコンフリクトしなかった。

Facebookの応用

E-Commerceサイトへの応用
コレクションされた写真とアイテムが紐づけられていれば、お薦めコレクションとそこに使われているアイテムを全て表示することも可能だ。アルバム編集画面を隠しておいて、でき上がったコレクションだけを見せることも可能だろう。

Prototype Window Classを使うと、こんな機能が実装できる。UIがややこしくなる危険性はありそうだが…

ブログ「Keynotes」に使っているLikeボタンが機能しないという連絡があった。いろいろ調べたがよくわからなかった。

原因として考えたのは次の点

• AddThisなど別のスクリプトがコンフリクトしている
  
• Facebook SDKが古い
  
• Facebookのせいで、僕は悪くない…
  

Facebook君は「Linterがばっちり教えてくれるから」の一点張りなのだが、Linterはエラーを見つけてくれない。OpenGraphのドキュメントを見たら「either」と書いてある。ひょっとして？？？

結局問題はやはりOpenGraphだった。アプリIDとアドミのIDが指定できるのだが、両方付けているとエラーになるらしい。でも、最近まで動いていたような気がする。いずれにせよ、Likeボタンが動かない場合にはOpengraphを疑ってみるといいかもしれない。

多分、知っている人は既に知っていることだとは思うが、備忘録として…

Facebookアプリの作り方はここにまとめがある。PHPをつかうと$meや$uidで閲覧者のユーザーIDが引き出せる。

すでにデータベース管理されているコンテンツがあれば、キーを、今あるキー+ユーザーIDにすることで、誰が登録したコンテンツかが区別できる。

• 全員が閲覧できるが、ログインしたユーザーだけが操作できる。
• ログインしたユーザーだけが閲覧できる
• 全員が閲覧できるが、操作できるレコードは自分が登録したものだけ（where id=xx AND uid=$uid）

などというような区別を作る事ができる。組み込みは意外と簡単だった。

InsightsのページにSelect Pageというリンクが置いてある。このリンクをコピーして、ブログに貼ったら、インサイトページへの直接リンクできあがった。こっそり置くのやめといてほしいなあ。Movable Typeでのやり方は次の通り。

https://www.facebook.com/insights/?sk=wo_[固有の番号]_<$MTEntryPermalink$>

ただ、数字が合わない。時差があるのか。それとも別の理由なのかはよくわからない。