RSS Feed
  1. 無断転載の弾幕をかいくぐって、画像のソース(著作者)に辿り着く方法

    March 29, 2012 by admin

    サイト制作やデザインの仕事をしていると、自分が撮った写真だけじゃ全然ダメ!
    ってなる事が結構あります。というか、ほとんどです。

    自分なりの写真ストックがあったとしても、被写体がほとんど「犬」とか「犬」とか「犬」だったりするので特定のクライアントさん以外には使えないという事に気付きます・・・。無理やり使う訳にもいきません :x

    そんな時に重宝するのが有料のストックフォト!有名どころでは「シャッターストック」とか「iStockPhoto」とかがありますが、それでも被写体が限られている場合(特定の町並み・山とか)は個人で撮ってる方々にコンタクトを撮って、使用許可の交渉をしたりと、頼る事もあります。

    今回はそういう状況だったので、ネットを探していたら「これだ!」っという写真を何枚か見つけたのですが・・・そのサイトの写真を一つ一つ見てみると、サイズがばらばら・・・。加工処理も若干違う?コントラストやカラーバランスのバリエーションが豊富すぎる。

    (・・・ここはダミーか・・・!)

    と、著作者本人が投稿しているのかが微妙なサイトがあったりします。

    今回の疑いのターゲットは「cocorogo」さん。

    「何気ない日常を感じるままに・・・パチリ!」というプロフィール文ですが、コメント欄では「師匠」と呼ばれていたり、「本を出しちゃいなよ!」と絶賛されてたり、すごいです。

    出たら私も買います。

    Naverの「Pick!」とか「Tumblr」とかで無断転載するのは結構流行ってるので 8-)  正直、私が指摘したところで今更感があるのですが、

    「・・・著作者に会いに行こう!」というのが今回のテーマなので、一応。

    で、何をするかというと、まずは画像を保存。

    その画像を、グーグル先生の「画像で検索」で検索する。

    Chromeだと、「画像検索」のところにドラッグ&ドロップするだけでできた。

    そうすると、どどーんと出てくる。

    最後に

    「あなたは、もう、逃げられない。」 :twisted:

    というテロップが流れたら成功。たぶん。

    ちなみに、cocorogoさんのサイトの写真を検索した結果は以下の通り。

    無断転載1? VS 著作者1?(4つ目の画像)

    無断転載2? VS 著作者2?

    無断転載3? VS 著作者3?

    無断転載4? VS 著作者4?(2つ目の画像)

    無断転載5? VS 著作者5?

    無断転載6? VS 著作者6?

    適当に選んだ画像全部ヒットしました。でもめんどくさいので、ここで終わり。5番目の写真に関しては丁寧に著作者の「COPYRIGHT」の文字を切り取って載せてます。それでも検索できちゃうんですね。

    6個目まで検索して分かった事が3つあります。

    1. まず、このcocorogoさんはすごい能力を持っている人なんじゃないかという事。・・・仮にこれらのブログサイト全てが、彼の手によって管理され、各ブロガーの人格、コメントの口調までもを作り出していたとしたら・・・。がくぶるです。
    2. そして、cocorogoさんのサイトのコメント欄を見る限り、誰も無断転載かもしれないという事に気付いていないこと。というか、すごい写真家という認識であること。ピックされてる数もフォロワー数もかなり多いし(フォロワー数2400人)。羨ましいです。
    3. 最後に、結局グーグル先生からは逃げられないという事。

    (もしかしたら)全て驚きの事実だったので、どこかに書かなければ・・・!という衝動に駆られました。

    これからまた、著作者に辿り着くために画像の海に出かけようと思いますが、なんか、このバーチャル世界の裏側をちょっと覗いてしまったようで、怖かったです。



  2. ソーシャルボタンを短縮URL「Bit.ly」と連携させる

    February 24, 2012 by admin

    ワードプレスのソーシャルボタン系プラグインといえば

    WP Social Bookmarking Light

    Twitter, Facebook とかはもちろん、作者が日本人なので日本のソーシャルボタンも多く取り揃えています。はてなブックマークとかMixiとかグリーとか、色々。

    自分が今まで使ってきたツイートボタンは「bit.ly」と連携していたので、

    このプラグインのソーシャルボタンを使うと、今までのリンクアドレスが変わっちゃって(短縮URLじゃなくなる)

    ツイートカウントが「0」にリセットする事態になってた・・・(がーん)。

    ・・・。

    って、あまりツイートカウントないから関係ないんだけどね。

    ツイートボタンから共有するURLを自動で短縮URL(bit.ly)にしちゃう方法がないかなぁ、と探していたら

    ありました。

    まずは、テーマのfunctions.phpに

    以下の関数を追加しておく。

    
    function bitly()
    {
    $url = get_permalink(); //generates wordpress' permalink
    
    //URLの長さが35またはそれ以下なら、短縮しない
    if( strlen($url) <= 35 )
     {
     return get_permalink();
     }
     $login = 'BIT.LYのログインアカウント名'; //your bit.ly login
     $apikey = 'Rから始まるAPIキー'; //bit.ly apikey
     $format = 'json'; //JSONかXMLを選ぶ
     $version = '2.0.1';
     //URL作成
     $bitly = 'http://api.bit.ly/shorten?version='.$version.'&longUrl='.urlencode($url).'&login='.$login.'&apiKey='.$apikey.'&format='.$format;
     //URL取得
     //cURLを使いたければここで
     $response = file_get_contents($bitly);
     //JSONかXMLでパース
    
    if(strtolower($format) == 'json')
     {
     $json = @json_decode($response,true);
     return $json['results'][$url]['shortUrl'];
     }
     else //xml
     {
     $xml = simplexml_load_string($response);
     return 'http://bit.ly/ '.$xml->results->nodeKeyVal->hash;
     }
    }
    

    上のBITLY関数を、WP Social Bookmarking Lightで呼び出す。 ツイッターボタンの共有URLに連携付ける場合は 「services.php」wp-social-bookmarking-light/modules/services.php
    にある twitter() 関数の中をちょっとだけ変える。 136行目あたり

    .' src="http://platform.twitter.com/widgets/tweet_button.html'
     .'?url='.$this->encode_url
     .'&amp;text='.$this->encode_title
    

    を下に置き換える

    .' src="http://platform.twitter.com/widgets/tweet_button.html'
     .'?url='.bitly()
    .'&amp;text='.$this->encode_title
    

    これでbit.lyで短縮されたURLがツイートURLになる。

    bit.lyアカウントと連携してるから、クリック数とか分かって、ちょっとだけ便利。

    ちなみに↓のツイートボタンで試せます。



  3. ワードプレスでキャッシュ系プラグインをインストールすると文字化けする

    February 4, 2012 by admin

    以前作ったブログでも同じ症状が出たのですが、

    今回も「W3 Total Cache」というプラグインを入れたら、2週間後にサイトが全体的に文字化けして、ぐちゃぐちゃに・・・。

    キャッシュが溜まったから?キャッシュの文字コードが間違っていたから?

    原因は分かりませんが、プラグインを停止したら元に戻りました。

    ちなみに、管理人としてログインした状態でブログを表示すると、まったく問題がない。

    指摘されなかったら気付かないところでした。

    多分、管理人モードだとキャッシュ化されてない、素の状態で表示するからだと思う。

    ちなみに前回は「WP Super Cache」をインストールしたら文字化けしてた。

    日本語ブログを作成する際は、キャッシュ保存で高速化してくれるプラグインには気をつけよう・・・。



  4. ブログパーツの「設置コード」の作り方。IE7, IE8 にも対応させる

    January 25, 2012 by admin

    ブログパーツ・ウィジェットを作っていると、HTMLから外部JSを読み込んで外部JSでフラッシュ作成して表示してあげる、というやり方をよくする。

    ソースコードを自分のサイトにコピー&ペーストして使って下さいっていうアレ。設定があれば、それもコピペソースに入れておく。

    例えばこんな感じ

    HTML側

    
    <script type='text/javascript'>
     var setting1=''カスタム設定1" setting2='カスタム設定2';
     </script><script type='text/javascript' src='http://www.rabbitsfactory.com/twinkle-tweets3.js'></script>
    

    外部Javascript側

    document.write('<scr'+'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></scr'+'ipt>');
    document.write('<scr'+'ipt>swfobject.registerObject("twinkletweets", "10.0.0", "http://www.rabbitsfactory.com/expressInstall.swf");</scr'+'ipt>');
    document.write('<div><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+ttwidth+'" height="'+ttheight+'" id="twinkletweets" align="middle" wmode="opaque">');
    document.write('<param name="movie" value="http://www.rabbitsfactory.com/twinkle-tweets3.swf" /><param name="wmode" value="opaque" /><param name="allowscriptaccess" value="always" />');
    document.write('<param name="flashvars" value="param1='+setting1+'&amp;param2='+setting2+'" />');
    document.write('<!--[if !IE]>--><object type="application/x-shockwave-flash" data="http://www.rabbitsfactory.com/twinkle-tweets3.swf" width="'+ttwidth+'" height="'+ttheight+'" align="middle">');
    document.write('<param name="allowscriptaccess" value="always" /><param name="wmode" value="opaque" />');
    document.write('<param name="flashvars" value="param1='+setting1+'&amp;param2='+setting2+'" />');
    document.write('<!--<![endif]-->');
    document.write('<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>');
    document.write('<!--[if !IE]>--></object><!--<![endif]--></object></div>');
    

    JavascriptでSWFコンテナを document.write でHTMLマークアップで書き出してる感じ。この際に、定番Flash埋め込みライブラリのswfobjectを読み込んで(一行目)利用してるけど、クロスブラウザ対応化とか色々と解決してくれてるような気がするので、おすすめ。

    注意点はスクリプトタグの閉じ</script> を </scr’+'ipt>に変えておく事。そうしないと、文字列と認識しないで実際に実行されちゃう。頭の<script>はバラさないでも問題ないんだけど、なんか <scr’+'ipt>にしてる人が多かったので一応・・・。意味あるんだろうか?

    ただ、上記のままだと、IE7, IE8では 「swfobjectは宣言されていません」「swfobject is undefined」とエラーが出る。

    一行目のコードでswfobjectを読み込んでいるハズ・・・?だったけど、読み込まれていない。何故だろう。

    
    document.write('<scr'+'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></scr'+'ipt>');
    

    HTML側に書いてあげたら問題なくなったから良いけど、コピペコードが長くなっちゃうからちょっと嫌だ。

    
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    

    原因は分からないけど、他ブラウザは全部大丈夫だったからIEだけの問題のようだ。

     

    むー。



  5. クロスブラウザ対応について。HTML5 CSS3に適応するサイト作り

    January 25, 2012 by admin

    最近はHTML5に嵌ってます。

    ①「TwinkleTweets ツイッターウィジェット – 初期サイト。あんまし対応してない。

    ②「TwinkleTweets ツイッターウィジェット - 下位ブラウザ対応版

    他のウェブデザイナーもみんな試しているみたいだし、そろそろHTML5が仕事の依頼として一般的になってくるのかなぁ~

    なんて思ってる今日この頃。

    一応、ぷちHTML5で作った  のサイト。Javascriptを使いまくってます。

    実は色々と試しているうちに、IE6, 7, Operaではバグりまくりな状態になってしまって、

    クロスブラウザー対応版として、同じサイトを1から作り直しました。

    それが  のサイト。

    結局、Javascriptを多用し過ぎない、作り直したサイトの方が全然良い仕上がりになったので、今後初期サイトを置き換える予定です。

    効果とか新機能を使い過ぎると、クロスブラウザ問題が大変だぁ;;

    今回、クロスブラウザー対応で一番困ったのがIE7。はぁ・・・、この問題児。

    以下IE7での問題点。

    ・absolute positioning を多用すると、IEではずれてくる事が多い。数箇所に留めて、他はrelativeを使いましょう。

    ・{ opacity:1, x:100 } これはOKで、 { opacity:1, x:100, } これはNG(注:最後のカンマ「,」)。Firefoxとかでは問題ない。クセになってる人は困るかも。特にjQuery派。

    ・jQueryのAJAXとか.load()を使って、外部HTMLをロードした場合、Javascriptが丁寧にコメントアウトされてるとエラー。jQueryのバージョンが低い場合だけかな?

    ・とにかくjQueryのプラグイン系で使えないのが結構ある。っていうか対応してない方が悪いのか・・・?

    ・HTML の history (push state) とかもなるべく使わない。複雑化するし、有名ライブラリでは「jQuery TOOLS History」とか、マイナーな「history.js」なんかを使っても手間がかかる。ちなみに初期サイトでは使いまくってます。

    ・CSS3は・・・からっぽ!?グラデーションなんか無いものと思え。それでも対応させる為のIEハックなんて、まじ○ァック・・・。

    Raphael.jsとかのSVGライブラリは一応使えるみたい。

    クロスブラウザ対応策ライブラリ。一応、絶対入れておけってやつ。

    ・「HTML5 Boilerplate」 クロスブラウザー対応テンプレート。絶対これをベースに構築するべき!というか、デフォルトスタンダードになってきています。

    ・「Modernizr」 CSS3+HTML5に対応しているかをチェックしてくれる。非対応だったら、代理を容易する。こういう風に説明されてます→「絶対に使いたい、modernizr 2.0

    ・「jQuery」 いわずと知れたJavascriptライブラリー。クロスブラウザーもばっちし。有名すぎるので、リンクは省きますw「mooTools」とかも使ってみたけど、やっぱり適わない。情報量が違いすぎ。

    かなり凝ったサイトを作るのなら、「Eclipse」+「Aptana Studio 3」がおすすめ。というか今の自分の制作環境w 無料だし、ローカルサーバーのセットアップとか簡単です。

    新規「HTML5プロジェクト」で始めると、Boilerplateとか色々とデフォルト設定(404.html favicon.ico)がされてるので楽。あとは、自分のスタイルとかを追加していくだけ。

    ちなみに、Boilerplateで利用されている「normalize.css」というのが、クロスブラウザー間CSS表示を「ノーマライズ」(平均化?)してくれるので、かなり便利。

    これまでは、BoilerplateもCSSを「リセット」する仕様でしたが、方向性が変わってきたのかな?

    という事で、ちょっとづつHTML5に適応していこうと思います。



  6. AS3メモ – SWFファイルがローカルかオンラインかを正規表現で調べる方法

    October 9, 2011 by admin

    Flashがローカル上にあるか、オンライン上にあるかを調べて、Booleanで返す方法。

    
    var localMode:Boolean = new RegExp("file://").test(loaderInfo.url);
    

    単純にURLを取得してきて、”file://”が含まれているかをチェックする。

    loaderInfo.urlでSWFファイルのアドレスを取得。

    RegExpってかなり便利。

    “http://”が含まれていたら、自動リンクさせてあげたり、

    画像のソースだけを抜いたり、色々使えます。

    F-Site AS3.0では正規表現が使えます

    とか

    memo kappa-lab.com AS3の正規表現でURLを抜き出すメモ

    とかを参考にすると分かりやすいです。



  7. Geocoding API の比較

    October 7, 2011 by admin

    地名や住所などから緯度と経度を取得できるジオコーディング。

    TwinkleTweetsでは

    「Twitter API」でワード検索

    続いてツイートユーザー情報検索

    経度緯度を「Yahoo! API」で検索

    みたいな感じに最終的に位置情報を取得している。

    Google Geocoding」とか「Finds.jp」とか「GeoNames」とか「SimpleGeo」とか、
    ジオコーディングのAPIは色々とあるんだけど、
    「GeoNames」と「SimpleGeo」は、ほとんどヨーロッパ・北米に限られる。それに正確度が低すぎる。

    Finds.jpは日本国内しか調べられない。でも国内に限定するんだったらオススメ。
    商用・非商用問わず利用可能で、他にも「日の出日の入り計算」とか使えるサービスが多い。
    一日の「使用回数上限」が原則として「10万件」!というのも太っ腹すぎる。

    そして「Google Geocoding」はというと・・・

    注: Geocoding API は Google マップと組み合わせて使用する場合にのみ使用できます。

    !?

    Googleマップにだけしか使用できないって・・・。利用規約にひっかかるので使えない。

    ・・・ケチ野郎め!

    ここのジオコーディングAPI比較(注:英語)サイトを読んでなかったら、危なく使っているところだった。

    …you can only use Google Geocode data to plot items onto a Google Map. If you do anything else you are violating the terms of use, which is pretty anal if you ask me.

    アメリカ人も「ファック!」とお怒りの様子。

    結局正確で、地域・使用制限がないジオコーディングAPIとなると、
    Yahoo! API ジオコーダ」しか選択肢がない。

    ただYahoo! Japan ジオコードAPIのドキュメントを読んでみても、一日の利用制限回数が書かれてないので分からない。
    ネット上の情報もバラバラでよく分からん・・・。

    最終的には本家の「Yahoo! PlaceFinder」というジオコーディングAPIを使う事にしました。
    一日の上限リクエスト回数は50,000とケチケチGoogle(2,500)と比べても全然多い。
    アメリカのAPIでもちゃんと日本語で通ります。

    ただ、複数の住所を一括検索する事ができないのが、ちょっと痛い。
    TwinkleTweetsで表示するツイート数は64なので、64回もリクエストを送らないといけない。

    オリジナル地図を作って情報を表示するのって、リソースやAPIが足りなくて結構大変だなぁ、

    と思いました。



  8. TwinkleTweets

    September 29, 2011 by admin

    今作っているブログパーツ「TwinkleTweets」(ついんくるツイート)で

    見えてきた問題点とこれからの課題。

    ちなみにサンプルはこのブログの右の方にあります。

    ・Twitterアプリなので、公式の仕様変更に左右される。

    ・Twitterと連携して、しかもツイートの座標取得まですると、ちょっと重くなる。
    - 特に、ツイート数が50の場合、50回もCALLしないといけないのが問題(Yahoo! API)。
    一回のCallで複数の座標を取得できるAPIってないのかなぁ・・・。

    ・3Dだと重い。
    - Alternativa3D, Away3D, Papervision3D… やっぱり全部重い。
    ウィジェットにするなら、ドットを動かす程度が許容範囲。
    でも最近はAlternativa3Dとかちょっと軽いかも。
    次期FLASHアップデート(Molehill)で、3D処理は何百倍も早くなる・・・らしい。
    とにかく期待。

    ・そもそもインタラクティブな(ビジュアル重視・遊び仕様)ツイッターウィジェットってウケるの?
    -  「公式だけで十分。ツイート見せたいだけだし・・・。軽いし。」「(開発者)・・・がーん。」
    なんて事もしばしば。軽くてスッキリしたものを目指そう。
    公式ライクな機能は完全に組み込むか(メインウィジェットを狙う)、
    省くか(セカンドウィジェットを狙う)のどちらかに絞った方がいいかも。

    ・Flashだと iPhoneには対応できない。
    - どうしようもないw 同じものをJavascriptで作るのは技術的(経験値的)に無理。
    HTML5だと可能かも・・・って思ったけど、
    ほとんどのブラウザーがHTML5対応になるまでこれから何年かかるんだろ・・・。

    今日はここまで。



  9. 始めに

    August 1, 2011 by admin

    確か去年もプログラミング関係のブログを始めたけど、

    3日と続かなかった。アドレスも名前も思い出せないので、

    今頃はウェブの端っこの塵となって、グーグルにクロールされなくなって、

    消されていくのを待つのみだと思う。

     

    アートや絵画と違って、WEB上の物はオール・オア・ナッシング。

    劣化しないで完全な状態で残るか、データベースから跡形も無く削除されるか。

    対してアート作品等の物理的な物は、変化していくだけ。

    古くなって、埃を被って、色味が変わっても、燃やさない限りは存在する。

    とにかくそう考えると、デザイナーとしてなんか救われる気がする。

     

    でもここは、そんなアートとは程遠いプログラミングについて書いていく場所にしたい。