2009 9月 | creator note

09-27-09

ウェブアルバムdfGalleryをインストールしてみました

dfGalleryとはFlickrによく似た機能が無料でつかえるツールです。CMSの管理画面があり、Ajaxで画像ファイルをアップロード。アルバム単位でタグが生成されホームページやブログへ簡単に貼付ける事ができます。コンテンツはFlashでスライドショーやフルスクリーン機能などがあります。php5以上とSQLが必要なので、設置するサーバーの環境を確認しましょう。

DEMO：Cotapon Photo Gallery | こたぽんが撮った写真

　※別ウィンドウで開きます。
で、実際にどうやってインストールするか。いろいろ調べてみましたが、なかなか成功した！という記事が見当たりませんでした。唯一、参考にさせていただいたページが見つかりましたので紹介します。

・Flickrのウェブアルバムと同等の機能を持つdfGallery 2.0をさくらインターネットの共用サーバーに設置する -KUMA TYPE-
http://blog.kumacchi.com/2009/03/flickrdfgallery_20.html#comments

どうもさくらレンタルサーバーではそーとー苦労するみたいですね。。。ただ、dfGallery自体がバージョンアップしてて解消されているかもしれません。ボクはロリポップを借りてるんですが、KUMA TYPEさんが苦労されている現象は全く起きませんでしたので、ある程度のインストール手順を書き留めておきます。

設置するまでの環境

・パソコン：Power Book G4 OS10.4
・レンタルサーバー：ロリポップ　php5以上　MySQL可
・FTPクライアント：Cyberduck
パソコンの環境はあんまり関係ないと思いますけど一応＾ー＾；

手順その１：必要ファイルの準備

まず、dfGallery 2.0をダウンロードしてください。
>>http://www.dezinerfolio.com/dfgallery-2/free-flash-gallery
「dfgallery_v2.005.zip」というzipファイルを解凍して、出てきたフォルダーに対して「dfg」という名前を付けました。最終的にこの名前が管理画面へのアドレスになるので、好きな名前を付けてください。

手順その２：FTPでアップロードしてからパーミッション設定

名前を変えたこのフォルダーの中には、不可視ファイルでアクセス権限設定用の「.htaccess」が含まれていますので、フォルダーをまるごとFTPでアップしてください。ボクは「photo」というディレクトリにアップしました。これで、一応「http://hoge.com/photo/dfg/」にアクセスすれば管理画面にいけるんですが、ここで一回つまずきました。Cyberduckで、ディレクトリ「dfg」を右クリックして「情報」を選んでください。

アクセス権、パーミッションの設定チェックボックスがあると思います。「グループ」と「その他」に対して【読み】と【実行】にそれぞれチェックを入れてください。

これで、アクセスできなかった管理画面へアクセスできるようになりました。

ロリポップの場合、MySQLの設定

上から順番に、
・hostname：ロリポップのサーバーアドレス。例えばmysql00.lolipop.jpこんなん。
・Database Type：MySQLのまま。
・username：ロリポップのデータベース名。
・password：データベースのパスワード。
・database：ロリポップのデータベース名と一緒かな・・？？
・database prefix：ロリポップのデータベース名の末尾に「_」をつける？？
※KUMA TYPEさんを参考にさせていただきました。＾ー＾；
これでインストール完了。ログイン名とパスワードが「admin」のままになってたので変更しました。後は、KUMA TYPEさんの使い方がとても参考になりましたので、ブログランキングボタンをボチッ！っと押させて頂きました。m( _ _ )m

Let’s Enjoy！

さっそく数枚アップしてみましたので、よかったら観ていってくださいー！＾－＾
Cotapon Photo Gallery | こたぽんが撮った写真

※別ウィンドウで開きます。

09-26-09

SIGMA（シグマ）18-200mm F3.5-6.3 DCが届きました！

Amazonの家電&カメラ秋のメガセールでシグマ 18-200mm F3.5-6.3 DCを購入してみました。2005年モデルなので少々型は古いですが、18-200mmで2万をきるという魅力で衝動買いしました＾ー＾；

むかーしから使ってる愛機、D70sにもぴったり合うデザインですね。赤のラインがかっこいいです！えーっとiPhoneで撮ったのできれいじゃないですw　早速近所をブラブラして撮影した写真は下記に載せます。

個人的にホワイトバランスを日陰モードで撮れた雰囲気が好きなので全体的にほのかに赤みがかってますが、全体的にシャープに写っているように感じました。18-200mmなので、ほとんどのシーンがこのレンズ１つでいけそうですねー！レンズも軽く、あまり負担にはなりませんでしたが、ズームをするときの回転する方向が、いままで使ってきたNikonは時計回りなんですが、このSIGMAレンズは逆時計回りなのが違和感ありました。あ〜たぶん18-200mmまで伸びるから、レンズを左手で下から添えて回転するより、上から添えて回転させる方が回す距離をだせるからなんでしょうね。あと若干回転が重いなぁ。ピントを合わすときに「ジージー」という機械音は個人的には好みですね。
そろそろ紅葉の季節。楽しみでしゃーないです！！＾O＾

09-25-09

外部画像ファイルにsetMask();すると「セキュリティ Sandbox 違反」というアラート

どういうときに起きたか

外部にある、jpgやgifファイルをFlashが読み込んで表示させるコンテンツはよくあります。例えば、その時画像が、画像専用のサーバーにあって、swfファイルとは別のドメインにあるとします。普通に画像を読み込むだけでは問題ないのですが、その読み込んだ画像に対してsetMaskメソッドを使うと、下記のようなアラートが出ました。

*** セキュリティ Sandbox 違反 ***
SecurityDomain 'http://image.www.hoge.co.jp/hoge.gif' が互換性のないコンテキスト 'file:///C/hoge.swf' にアクセスを試みました。

おそらく原因は、

setMask();メソッドが、外部画像を読み込んだMovieClipに対してマスクをかけるのではなく、なにか見えない力で外部画像がマスクをとりにいっている。そういうイメージなのかもしれません。つまりクロスドメインなんでしょうね。

解決方法

ActionScriptで下記を追加すると一発で直りました。

System.security.allowDomain("*");

いやぁ～いろいろ難しいですねーｗ　＾－＾；

09-25-09

JavaScriptで動くファミコンエミュレーター：JSNES

JavaScriptってすごいなー！！！ブラウザで懐かしいファミコンが動かせるエミュレーターです。CanvasというHTML5が使われているので、それに対応したブラウザ、かつ、JavaScriptの処理が早い、Google Chromだとなんとか動きます。もちろん、利用の際には著作権などに注意し、自己責任の上でご利用してください。

JSNES：http://benfirshman.com/projects/jsnes/

09-23-09

WordPressでやっておくべき事まとめ

SEO関連

・パーマリンク設定
URL自体にタイトルと同じテキストのURLを設定する方法です。amazonの商品ページのURLと同じ方法です。
ダッシュボード⇒左メニューの「設定」⇒パーマリンク設定、を開いて、

/articles/%category%/%postname%.html

「articles」のところは何でもいいです。ボクは「articles」＝「記事」ということにしました。この方法が良いのかどうかは定かではありませんが、わりと良い。という周りの意見を兼ねて採用しました。
※2009.10.19追記
どうやら、URLの最後に「.html」があると、googleにインデックスされないくさいことが判明。サイトステータスウィザードに「.html」付きでやってみたところうまくいきませんでした。。

/articles/%category%/%postname%/

「.html」を外してしばらく様子を見ます。

そして、もろもろブログランキングサイトを登録。
・人気ブログランキング
http://blog.with2.net/
・FC2ブログランキング
http://blogranking.fc2.com/
・にほんブログ村
http://www.blogmura.com/
たくさん登録するの大変ですね＾ー＾；とりあえずこんなところで。

ウェブマスター関連

・Google Webmaster Central
http://www.google.co.jp/webmasters/
・Yahoo検索　サイトエクスプローラー
http://siteexplorer.search.yahoo.co.jp/
・Bing Webmaster Center（旧：MSN）
http://www.bing.com/webmaster
※サイトマップは下記のプラグイン、「XML-sitemap」でXMLのURLを生成して登録してください。

アクセス解析

・Google Analytics
http://www.google.com/analytics/
・トラックワード
http://my.trackword.net/
トラックワードは「楽ワード」という楽天アフィリエイトIDを利用してマッチング広告も提供しています。

プラグイン

・All in One SEO Pack（オール・イン・ワンSEOパック）
記事ごとにmetaタグを変更してくれたり、WordPressでのSEO対策定番プラグインです。
All in One SEO Packの日本語版はこちら
・XML-sitemap
サイトマップ登録用にXMLを生成するプラグインです。
・WPtouch
WordPressのページをiPhoneのSafariで最適化して閲覧できるようにするプラグインです。
WPtouchの詳しい使い方はこちら
・Smart Update Pinger（日本語版）
ブログが更新されたときに、「更新したよ」とお知らせをする機能Ping。どうも記事を編集して更新するたびにPingが送信されるみたいで、あまりにも多くのPingを送信するとスパムになるみたいなので、このプラグインで編集の更新ではPing送信が行われなくなります。下記に設定しているPing送信先のURL一覧を記載します。


http://ping.bloggers.jp/rpc/

http://www.blogpeople.net/ping/

http://www.blogpeople.net/servlet/weblogUpdates

http://rpc.technorati.jp/rpc/ping

http://api.my.yahoo.co.jp/RPC2

http://blogsearch.google.com/ping/RPC2

http://www.blogpeople.net/servlet/weblogUpdates

http://ping.namaan.net/rpc/

http://ping.rss.drecom.jp/

http://ping.blogoon.net/

http://pingoo.jp/ping/

http://hamo-search.com/ping.php

http://www.blogoon.net/ping/

http://www.blogpeople.net/servlet/weblogUpdates

http://blogstyle.jp/xmlrpc/

http://blogsearch.google.co.jp/ping

http://blogranking.fc2.com/tb.php/186415

http://blog.goo.ne.jp/XMLRPC

http://blog.rank10.net/update/ping.cgi

http://blog-search.net/up.php

http://blogstyle.jp/xmlrpc/

http://blogdb.jp/xmlrpc

http://blog.with2.net/ping.php/488844/1182618205

http://api.my.yahoo.co.jp/RPC2

http://ping.bloggers.jp/rpc/

http://ping.rss.drecom.jp/

http://ping.fc2.com

http://ping.blogoon.net

http://ping.blo.gs/

http://rpc.blogrolling.com/pinger/

http://rpc.technorati.com/rpc/ping

http://ping.maplog.jp/

http://ping.namaan.net/rpc/

http://ping.myblog.jp

http://rpc.reader.livedoor.com/ping

http://rpc.technorati.jp/rpc/ping

http://rpc.technorati.com/rpc/ping

http://www.blogpeople.net/servlet/weblogUpdates

http://r.hatena.ne.jp/rpc

・SyntaxHighlighter Evolved
HTML、CSS、JavaScript、PHP、C++、ActionScriptなどのソースコードを奇麗に表現する事ができるプラグイン。
（2009.10.18追記）

・Simple Tags
よく、記事とコメントの間に「関連する記事」という形で、その記事に対して関連している記事のリンクがあります。「単一記事の投稿」の場所に設置するのがいいと思います。phpコードはたった一行。

<?php st_related_posts(); ?>

（2009.10.30追記）

09-23-09

ページ内リンクからブラウザの戻るボタンで、Flash Playerが正しく再生されない

つまりどういうことかというと

1.新規ウィンドウ、または新規タブでFlashが載っているページを開く。
2.ページ内リンク、a nameタグで移動する。
※このとき、ブラウザの戻るボタンが押せるようになっているはず。
3.ブラウザの戻るボタンを押す。
4.Flashが正しく表示されてない。

というバグ？を聞いたことがあります。いろいろ調べてみると、どうやらFirefoxやSafariは大丈夫で、IE6と7で確認しました。そのFlashコンテンツは、外部XMLファイルを読み込んで、その中に書かれている画像パスから外部外部画像データをすべて読み込んでから再生する。という仕組みになってて、再生するタイミングで、ステージの最前面に白いシェイプをおいて、そいつに対してdanndannアルファを0%に、フェードアウトして演出していました。

どうやら、戻るボタンを押したときに、なぜかタイムラインが1フレーム目に戻っているようにみられ、最初のフレームにXMLの読み込みや画像の読み込みのAction Scriptは実行済みの状態でした。Flash Playerのキャッシュかブラウザのキャッシュか。。そして、最終的に考えられる条件というのが、「シーン」で再生しているということです。

解決方法

このように、「シーン」のタイムライン上で１フレーム目にいろいろAction Script、諸々の条件で再生。５フレーム目に移動していますね。今回の問題点は、ページ内リンクからブラウザの戻るを押すと、同じページ内に戻ってくるわけですが、Flashは５フレーム目に再生しきっている状態で戻ってしまうわけです。

回避方法は、シーンに１フレームだけにMovieClipをおいて、その中にAction Scriptやコンテンツを置いたら解消されました。ただ、これでは同じページ内に戻ってきているにも関わらず、またXMLを読みにいったり画像をロードしたりすることになってしまいます。ユーザビリティが悪い場合は、「シーン」の１フレーム目に書かれたAction Scriptですべてお完結させれば事済みますが、既に作ってしまっているFlashを修正する場合は、新規シンボルで空のMovieClipを「シーン」１フレーム目に置いて、「シーン」あったAction Scriptやコンテンツは、すべてさっき作った空のMovieClipの中にペーストしてしまいましょう。そして「シーン」には１フレーム目にペーストしたMovieClipがあるだけ。一応これで、ページ内リンクからブラウザの戻るボタンを押したときに挙動がおかしくなるのは避けれると思います。

09-18-09

Adobe Scene7：日本語版発表記念セミナー

adobescene7

Adobe Scene7「アドビ　シーンセブン」とは、単純に言いますと画像サーバーです。そう言い切ってしまいますと語弊がありますので、導入事例をまじえて、もう少し詳しく説明します。

ピーチジョンの事例

商品を選ぶと、左の方にScene7で作られたFlash
あります。

ピーチジョン

右側のJavaScriptと連携して、商品の種類にマウスをあわせるとアニメーションします。

そのFlashで商品画像をアップすることができます。かなり高解像度の画像が登録されてますね。

ピーチジョン

商品をかごに入れると別の画像が出てきます。普通だと別途このサイズの画像を用意しなければなりませんが、Scene7にこのサイズで出力するようにリクエストしているのでリサイズ工数を削減しています。

ピーチジョンカタログ

カタログコンテンツが作れるのもScene7の特徴です。

ピーチジョンカタログ

次のページへめくれる演出もちゃんとできてます。

ピーチジョンカタログ

カタログなので読み物コンテンツです。ここからの拡大も可能

ピーチジョンカタログ

十分すぎるぐらいまで拡大でき、ここでも普段なら間の画像を用意しなければなりませんが、Scene7に拡大率のパラメータを渡してレスポンスを受けると、適応された画像が出力することができます。

画像のリクエストに任意のパラメータをつけると、任意のサイズにリサイズされてレスポンスがくる。

例えば、imgタグsrcで画像をリクエストするとき、画像のパスに対して「hoge.jpg?100×100」と「？」と「100×100」すると、Scene7側で100×100の画像に変換してレスポンス、表示することができます。つまり、同じデザインで縦横の比率が同じであれば、縦横サイズの大きい画像を一枚用意するだけで、それ以下のサイズであれば自由にレスポンスを返すことができ、リサイズをする手間も省けます。大きい画像をheightとwidthで小さくするわけではないので、画像ファイル自体の容量も相当のサイズに変換されますので、ブラウザの表示が遅くなるということはありません。

素材の画像さえあれば、スキンが用意されているので、ズーム機能や回転機能があるコンテンツがすぐに導入できる。

ただの画像サーバーではありません。Flashコンテンツのスキンが用意されてますので、コンテンツの制作コストが発生することなく導入することができます。ただ、スキンをオリジナルデザインに変更する際には、別途制作が必要になります。ある意味、デザインを変更できるということが嬉しいことですね。

雑誌風、カタログコンテンツも作成可能。

もともと海外のサービスなので、雑誌は右から左へ開くカタログコンテンツでしたが、今回、日本語版ということで左から右開きにも対応したということです。Scene7以外にもカタログコンテンツを提供している企業はありますが、画像サーバーまでは提供されていないので画像のクオリティーが全然違います。ピーチジョンのカタログページがScene7で作られており、楽天のrib MagがFLIPPER Makerというデジタルカタログ制作ツールで作られています。

そして何よりもCustomer Experienceの向上のため。

導入するにも、カスタマイズしてブランドイメージを統一するにも、いろいろコストがかかってしまうものですが、何よりもお客様と直接会話をするコンテンツ力を強化し、使って頂くことで満足していただき、またリピートしていただくことが大切。と、熱く語られていました。今回のセミナーはWeb制作者向けというより、企業への紹介が目的とみられ、一応、制作者といして参加させていただいたボクの感想は、「で？結局どうやって作るの？？」という疑問が残りました。しかし、とても魅力的な画像サーバーであることには変わりないので、商用でなければ無償提供するなど、クリエイターに興味を持っていただかなければ普及しないのではないかと、アンケートに記入させていただきました。ワクワク感いっぱいで今後の期待をこめて！＾ー＾

09-15-09

WPtouchでiPhoneに最適化して表示：WordPress プラグイン

いろいろ便利になっていく世の中。使っているサービスに対してユーザーさんはいい感じにわがままになっていきます。ボクもそのうちの一人。あれができる。これができない。というのが、類似サービスへの浮気なのか正しい選択なのか、ある意味、そのサービスへの期待と、それに答えるデベロッパーの方々のおかげで、改善され更に盛り上がったりします。
そこで、WordPressでiPhone用のページがつくれないものか。探せばプラグインがありました！さすがですね！！

WPtouch

http://www.bravenewcode.com/wptouch/

ダウンロードしたzipファイルを解凍して、出てきたwptouchフォルダーを下記にアップ。

/wp-content/plugin/

ダッシュボードからプラグインの設定から、wptouchフォルダーにいろいろ設定ファイルがインストールされます。
あとはあれをやってみたいですよねー！そう！Safariから「ホーム画面に追加」してウェブクリップのアイコンを登録。設定方法は真ん中のほうにある、Default & Custom Icon Poolから、pngファイルをアップロードしましょう。