2011年7月25日月曜日

OAuth認証時にTwitter側で表示される画面が変わった。ユーザーのクリック数は減ったものの分かりづらくなった印象。

TwitterのOAuth認証時に呼び出すAuthentication URLで表示される画面デザインが、いつの間にか変わっていた。

<Before>

今年2月の時点では、ユーザーがログインしていなければ、まずはログインが要求され、


続いて、アプリ連携が許可されていなければ、許可を確認する画面が表示されるという流れだった。



<After>

しかし、今年7月の時点では、「ログイン=ログイン&アプリ連携許可」という設計に変わっている。


画面上では「ログイン」となっているが、ログインすると、同時にアプリ連携も許可される。

確かに、二度の確認が一度で済むようになり、簡略化されたともいえるが、個人的には、今何が行われているのかが分かりにくくなったように感じる。


Twitterへログイン済みの場合は、以下の画面になる。


Twitterへログイン済みなのに、ボタンのラベル名は「ログイン」。う~ん、わかりづらい。


上記画面で「キャンセル」をクリックすると、こんな画面が表示される。
アプリ連携をキャンセルしたのに、「ログインしていません」と表示されるのはいかがなものか。



ちなみに、YfrogやTwitpicで実装されている「Log on(Sign in) with Twitter」ボタン。


Twitterログイン済みで、これをクリックした場合は、「ログイン」ではなく「連携アプリを認証」というボタンラベルになる。


しかも、既にアプリ連携を許可していたとしても、何度も「連携アプリを認証」を求められる。

ふむぅ、全般的に動作が分かりづらくなった印象。

MobypictureでAPIキーを取得して自サイトから画像をアップロードする

Mobypictureへサイトをを登録し、APIキーを取得する。取得したAPIキーを使うと、自サイトからMobypictureへ画像をアップロードできる。

まずは、Mobypictureの登録ページから、自サイトを登録する。



登録が完了すると、マイページにデベロッパーキー情報が表示されている。画像アップロード時は、そのキー情報を共に送る。



Twitter4Jを使った場合は以下のようなコードになる。
private String upload(twitter4j.auth.AccessToken accessToken, String photoStorage) throws twitter4j.TwitterException, ServletException{

  String url = "";
  try {

    中略

    //アップロードする画像ファイルを取得する
    java.io.File imgFile = new java.io.File(imgFilePath);

    //Confifgを設定する
    twitter4j.conf.ConfigurationBuilder cb = new twitter4j.conf.ConfigurationBuilder();
    cb.setOAuthAccessToken(accessToken.getToken());
    cb.setOAuthAccessTokenSecret(accessToken.getTokenSecret());
   
    if(photoStorage != null ){
      if(photoStorage.equals("mobypicture")){
        //アップロード先にMobypictureを指定しAPIキーを設定する
        cb.setMediaProvider("MOBYPICTURE");
        cb.setMediaProviderAPIKey(MobypictureのAPIキー);
      }else if(){

        中略

      }
    }
    twitter4j.conf.Configuration conf = cb.build();
    twitter4j.media.ImageUpload imageUpload = new twitter4j.media.ImageUploadFactory(conf).getInstance();

    //アップロードを実行しURLを取得する
    url = imageUpload .upload(imgFile);

  } catch (java.io.IOException e) {
    //エラー処理
  }
  return url;
}

LockerzでAPIキーを取得して自サイトから画像をアップロードする

Lockerz(旧Plixi)へサイトをを登録し、APIキーを取得する。取得したAPIキーを使うと、自サイトからLockerzへ画像をアップロードできる。

まずは、LockerzのAdmin Siteから、自サイトを登録する。



登録完了ページ内に「API Key」が表示されている。画像アップロード時は、そのキー情報を共に送る。



Twitter4Jを使った場合は以下のようなコードになる。
private String upload(twitter4j.auth.AccessToken accessToken, String photoStorage) throws twitter4j.TwitterException, ServletException{

  String url = "";
  try {

    中略

    //アップロードする画像ファイルを取得する
    java.io.File imgFile = new java.io.File(imgFilePath);

    //Confifgを設定する
    twitter4j.conf.ConfigurationBuilder cb = new twitter4j.conf.ConfigurationBuilder();
    cb.setOAuthAccessToken(accessToken.getToken());
    cb.setOAuthAccessTokenSecret(accessToken.getTokenSecret());
   
    if(photoStorage != null ){
      if(photoStorage.equals("lockerz")){
        //アップロード先にLockerzを指定しAPIキーを設定する
        cb.setMediaProvider("LOCKERZ");
        cb.setMediaProviderAPIKey(LockerzのAPIキー);
      }else if(){

        中略

      }
    }
    twitter4j.conf.Configuration conf = cb.build();
    twitter4j.media.ImageUpload imageUpload = new twitter4j.media.ImageUploadFactory(conf).getInstance();

    //アップロードを実行しURLを取得する
    url = imageUpload .upload(imgFile);

  } catch (java.io.IOException e) {
    //エラー処理
  }
  return url;
}

JA伊達みらい「桃の恵み」の絶品ジュースを飲みながら福島県産農産物の未来を思う

福島県伊達市の「JA伊達みらい」から発売されている「桃の恵み」

自宅近くにあるカルディコーヒーファームで、たまに売られていると、ついつい買ってしまう。混ぜモノなしのストレート桃果汁100%。そのまあ、おいしいこと、おいしいこと(^-^)。


つい先日、福島県産しいたけが一袋100円で売られていた。一袋にいくつも入っているにもかかわらず100円だ。

ちなみに、伊達市のしいたけは、路地ものも施設栽培ものも出荷制限がかかっていて、出荷できるのは菌床栽培のものだけだ(2011年7月22日時点)。
参考:農林水産省/しいたけ、米、牛乳・乳製品、肉と卵について

福島県産しいたけでも、伊達市のように路地ものも施設栽培ものも出荷できない地域もあれば、出荷できている地域もある。また、菌床栽培では、放射性物質が検出されていないか、規制値以下となっている。


政府には、可能な限り、速くて正確な情報発信と、情報へのリーチのしやすさを求めたい。そうしないと、福島県のものは、なんでもかんでもダメという風評被害はいつまでも起こり、なくならず、農家の方々は立ち行かなくなってしまう。

私自身も、全面肯定でも、全面否定でもなく、正確な情報判断をしていくように心がけたいと改めて思う。


今月4日に伊達市では桃の出荷が始まったとのこと。これからも、おいしい「桃の恵み」が頂けますように。

武蔵野御陵の参拝時間は16時まで!

昭和天皇の陵「武蔵野御陵」がある武蔵陵墓地
先日、高尾駅から歩いて20分程あるその場所へ行ってきた。

そもそも参拝したいと思うきっかけになったのは、よしりんの「昭和天皇論」

幼い頃テレビで陛下をを拝見している頃は、正直、自分に近しい感覚は全くなく、単に天皇=偉い人、ぐらいの感覚でしかなかった。みまかられた時も、学校が休みになってラッキーと思ったくらいだ。

しかし、先の大戦及び大戦直後、存続の危機にあった日本を昭和天皇がいかに守ろうとしてくださったか、そして各地の日本人を励ますためにどれだけ足を運ばれたかを知ってからは、日本人として一度は陛下の陵へ参拝し、お礼を申し上げたいと思っていた。

ところが、到着してみると・・・!!!

送信者 武蔵野御陵探訪 2011.07.17

残念ながら参拝時間を若干過ぎており、敢え無く撃沈orz。NO~!!

武蔵陵墓地は9時から16時までしか開いておらず、入ることが出来るのは15時半までということを、初めて知った。


あ~、途中、八王子で評判のスープカレー屋さんで食べるために、行列待ちをしたのが敗因だ。

今度こそ時間に気をつけて参ろうぞ!

2011年7月15日金曜日

日本でもAndroid Marketで書籍購入やムービーレンタルがしたい! | Android Developers Blog: A New Android Market for Phones

Android端末(2.2以上)で見るAndroid Marketのデザイン、UIが刷新される。まずはUSからだが、数週間内に各国のMarketへ反映される。

Android Developers Blog: A New Android Market for Phones



ビデオで見る限り、現状よりもアプリの詳細まで早く進めるようになりそうだ。


残念なのは、USオンリーで、書籍購入やムービーレンタルの機能が実現されていること。Googleアカウントでログインしていれば、PCだろうがタブレットだろうが端末を問わずに、本を読んだり映画を見たりできる。

これが出来ると便利なのになあ。是非日本でも実現して欲しい。


ちなみに、ムービーレンタルの紹介では、三池崇史監督の「13 ASSASSINS(13人の刺客)」が使われている。日本人としてちょっと嬉しい。

2011年7月9日土曜日

画像読み込み完了時に画面幅によって画像をリサイズする

作成した画像を、スマートフォンのブラウザで見るときに、画面幅にあわせてリサイズさせてみた。

ブラウザの画面幅を取得するコードは以下のページを参考にした。
参考:ブラウザの画面サイズの取得(javascript) - Object Design Blog

画像の読み込み完了前に拡大縮小率を計算しないように、img の load 完了イベント時に、画像の幅を取得するのがポイント。以下、コードの一部抜粋。

<head>

<script type="text/javascript">
var imgW = 0;
var imgH = 0;
var paneW = 0;
var scale = 100;

//ブラウザ幅に合わせて拡大縮小率を算出する
//マージンは20px
function calcScale(){
  var paneW_alt = paneW - 20;
  if(imgW > paneW_alt){
    scale= ((paneW_alt/imgW)*100).toFixed(0);
  }else{
    scale = 100;
  }
}

function getBrowserWidth() {  
    if(window.innerWidth) {
        return window.innerWidth; 
    } 
    else if(document.documentElement && document.documentElement.clientWidth != 0){
        return document.documentElement.clientWidth;
    }
    else if(document.body){
        return document.body.clientWidth;
    }
    return 0;
}

</script>

</head>

<body marginheight="0" marginwidth="0">


(中略)


<script type="text/javascript"><!--
var img = document.getElementById("dlImg");

//画像のload完了時に画像の幅と高さを取得する
img.addEventListener('load', getImageSize, false);
function getImageSize(){
    imgW = img.width;
    imgH = img.height;
}

//画像の幅と高さを取得した上で画像をリサイズする
img.addEventListener('load', resize, false);

//端末が回転された際もブラウザ幅に合わせて再度リサイズする
window.addEventListener('orientationchange', resize, false);

function resize(){
    paneW = getBrowserWidth();
    calcScale();
    if(imgW > 0 && imgH > 0){
      img.width=(imgW * (scale/100)).toFixed(0);
      img.height=(imgH * (scale/100)).toFixed(0);
    }
}
//--></script>

</body>

2011年7月8日金曜日

スマートフォン向けページに最適な meta viewport の指定で迷う

スマートフォンでページが見やすくなるように、metaタグでviewportを指定。

試行錯誤の結果、以下の書式に決定。
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

viewportの属性の内容は以下の通り。

・width
デフォルトの幅は 980、範囲は [200, 10,000]。
つまり、viewportが指定されていない場合は、デフォルトは幅980pxでページが表示されるので、表示コンテンツが小さくなり、見にくくなる。

・height
デフォルトの高さは、width と縦横比から計算され、範囲は [223, 10,000]。

・initial-scale
ページが最初に読み込まれるときの拡大率。デフォルトではページを画面に合わせる。指定可能範囲は [minimum-scale, maximum-scale]。

・minimum-scale
ユーザーが操作可能な拡大率の下限。デフォルトは 0.25 で指定可能範囲は [>0, 10]。

・maximum-scale
ユーザーが操作可能な拡大率の上限。デフォルトは 1.6 で指定可能範囲は [>0, 10]。

・user-scalable
ユーザーが拡大縮小(ピンチイン/ピンチアウト)できるかどうかをyesかnoで設定。デフォルトはyes。数値指定も可能。その場合yesが1、noが0。

参考:Travellers Tales : iPhone 用 Web ページおよびアプリケーションの作り方 - iPhone Development Guidelines を読む



つまり、今回のviewport指定では、
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
width=device-width; initial-scale=1.0;
ページの横幅を、ユーザーが使用しているスマートフォン画面の横幅と等倍になるようにし、

maximum-scale=1.0; user-scalable=0;
ユーザー操作による拡大縮小を禁止している。



今回作成したページでは、端末の画面幅に合わせて、画像を最適なサイズへリサイズする必要があった。

端末を回転させる前にユーザーがページを拡大させていたとする。端末を回転させると、回転させる前のズームレベルを継承しつつ、回転後の画面幅に合わせようとして、思ったとおりの画像サイズへリサイズされない。

よって、

maximum-scale=1.0; user-scalable=0;

の指定が必要だった。

参考:meta viewportがよくわからん - Takazudo hamalog


さらに、画像をリサイズする拡大縮小率は、端末のdpiを考慮しないと、正確な拡大縮小率にはならない。

例えば、端末のdpiを考慮しないと、docomo Galaxy TAB(SC-01C)縦では、ブラウザ幅は400pxとなる。Galaxy TABのdpiレベル 1.5 を考慮しないと、正確な解像度である幅600pxとはならないのだ。

dpiレベルを指定する属性を含めると、viewportは以下のようなタグになる。
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
参考:Targeting Screens from Web Apps | Android Developers


しかし、ここで問題が。

スマートフォン向けのAdSense広告をページ内に表示していると、dpiに合わせて広告が小さく表示され、アピール度に欠けてしまうのだ。

よって、target-densitydpiは指定せず、拡大縮小率を数値で表示させるのもやめることとした。

スマートフォンのユーザーエージェントを調べる時に参考になるサイトのリスト(2011年7月)

スマートフォンからのアクセスを判断するために各機種のユーザーエージェントを調査。その際、参考になったサイトをピックアップ。

1. スマートフォンのユーザエージェントを纏めてみたよ « 色々やってみてはみる

2010年10月までの端末だったら、ドコモ、au、ソフトバンクの全てのAndroid端末と、iPhoneのUAが網羅されている。BlackberryとWindowsMobile端末、iPad、iPodは掲載無し。


2. iPhone,iPad,iPodのユーザーエージェント一覧 | 自由が丘で働くWeb屋のブログ

iPad、iPodのUAがまとめられている。


3. Javaアプリ開発(日本語情報)|BlackBerry® 開発者様用技術情報|NTTドコモ

ドコモのBlackberry端末のUA一覧。


4. FAQ|Windows Mobile®向けアプリケーション開発者様用技術情報|NTTドコモ

ドコモのWindowsMobile端末のUA一覧。


以下は、上記サイトに網羅されていても情報ソースとして有益なサイト。

5. FAQ|Android™向けアプリケーション開発者様用技術情報 | NTTドコモ

ドコモのAndroid端末のUA一覧がまとめられている。


6. 端末情報検索画面

ソフトバンクのAndroid端末のUAを検索して調べることが出来る。


au自身が運営しているAndroid端末向け技術サイトは見当たらず。う~む。auは「Android au」がキャッチコピーではなかったっけ?

2011年7月5日火曜日

厚木市議選2011 各候補者のネット活用状況をリスト化してみた

7月10日に投票日を控えて、いよいよ選挙モードになった厚木市。
厚木市議会議員定数28名に対して、33名の方が立候補されている。

共に厚木のことを考えることができる政治家を、ひとりひとりしっかりと判断して議会へ送り出したい。

そこで、自分自身の判断材料の一つとして、普段からどれだけ、ブログやTwitterなどで活動状況を報告してくれているか、コメントやツイートなどで議員とコンタクをとれるチャンネルを用意してくれているか、を知りたいと思った。

そのような観点で、33名の方々のネット活用状況を出来る限り調べてみた。


参考:選挙:厚木市議選 33人が立候補 /神奈川 (毎日新聞) - Yahoo!ニュース
※順番は届け出順

1.野上元 氏/無所属 新
サイトURL-
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)-

2.竹松俊雄 氏/無所属 元(当選1回)
サイトURL-
ブログURLhttp://www.takematsu-toshio.net/
Twitterアカウント-
備考(開始時期、更新頻度等)2003年9月からブログ開設。コメント。更新は不定期。

3.内川由喜子 氏/神奈川ネットワーク運動 新
サイトURLhttp://utikawa.kgnet.gr.jp/index.php
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)2010年9月からサイト開設。更新は不定期。

4.井上武 氏/みんなの党 元(当選1回)
サイトURLhttp://www.inoue-takeshi.com/
ブログURLhttp://blogs.yahoo.co.jp/inouetakeshi0402/
Twitterアカウント-
備考(開始時期、更新頻度等)2009年6月からブログ開設。コメント。更新は不定期。

5.栗山香代子 氏/共産党 現(当選1回)
サイトURL-
ブログURLhttp://kuriyamakayoko.blog102.fc2.com/
Twitterアカウント-
備考(開始時期、更新頻度等)2007年4月からブログ開設。コメント。更新は2~4日に1回と多め。

6.名切文梨 氏/民主党 現(当選1回)
サイトURL-
ブログURLhttp://nackyland.blog123.fc2.com/
Twitterアカウント-
備考(開始時期、更新頻度等)2007年10月からブログ開設。コメント。更新は不定期。

7.渡辺貞雄 氏/無所属 新
サイトURL-
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)-

8.奈良握 氏/市民の党 現(当選6回)
サイトURLhttp://www5d.biglobe.ne.jp/~nigiru9/nara/
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)サイトは更新されているのか不明。

9.高田浩 氏/無所属 現(当選3回)
サイトURLhttp://www.hiroshi-takada.com/
ブログURL-
Twitterアカウント@hiroshitakada
備考(開始時期、更新頻度等)2006年5月からサイト開設。サイト更新は月3回程度。ツイートは3日に1回程度。コンタクトはTwitter経由になると思われ。

10.沼田幸一 氏/無所属 現(当選3回)
サイトURL-
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)-

11.小島一郎 氏/無所属 現(当選4回)
サイトURLhttp://kojimaichiro.com/
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)今回の市議選に向けてサイトの政策欄を更新。日常的なサイト更新頻度は不明。

12.石井芳隆 氏/無所属 現(当選4回)
サイトURL-
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)-

13.後藤由紀子 氏/無所属 新
サイトURL-
ブログURLhttp://goto-thefuture.cocolog-nifty.com/blog/
Twitterアカウント-
備考(開始時期、更新頻度等)2007年2月からブログ開設。コメント。ブログ投稿日が分かりにくいのでざっくりとしか言えないが更新頻度はかなり多め。

14.太田洋 氏/無所属 現(当選7回)
サイトURL-
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)-

15.古川環 氏/民主党 新
サイトURL-
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)-

16.越智一久 氏/無所属 現(当選1回)
サイトURL-
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)-

17.釘丸久子 氏/共産党 現(当選4回)
サイトURL-
ブログURLhttp://kugimaruhisako.blog117.fc2.com/
Twitterアカウント-
備考(開始時期、更新頻度等)2007年8月からブログ開設。コメント。更新は週一程度。

18.作山豪 氏/みんなの党 新
サイトURLhttp://www.gosakuyama.com/
ブログURLhttp://ameblo.jp/go1977jp/
Twitterアカウント-
備考(開始時期、更新頻度等)2011年6月5日からブログ開設。コメントは不可

19.川口仁 氏/公明党 現(当選2回)
サイトURLhttp://www.komei.or.jp/km/h-kawaguchi-atsugi/
ブログURLhttp://www.komei.or.jp/km/h-kawaguchi-atsugi/blog/
Twitterアカウント-
備考(開始時期、更新頻度等)2011年4月からブログ開設。コメントは不可

20.田上祥子 氏/公明党 現(当選3回) 現市議会議長
サイトURLhttp://www.ayu.ne.jp/user/s-tagami/shouko-commu/syouko-framepage3.htm
ブログURL-
Twitterアカウント@atugisigikai
@HARIKIRIMAMA110
備考(開始時期、更新頻度等)サイトはかなり古いものしか見当たらず。更新はされていない。複数Twitterアカウントの使い分けは不明。@atugisigikaiは2011年3月に登録、@HARIKIRIMAMA110は2010年12月に登録。ツイートは共に15ツイートと少なめ。

21.井上敏夫 氏/無所属 新
サイトURL-
ブログURLhttp://ameblo.jp/tso-i/
Twitterアカウント-
備考(開始時期、更新頻度等)ブログでは本名は明記されていないが、検索でトップに表示され、内容から察しても恐らく井上氏のものと推測される。2006年9月からブログ開設。コメント。更新頻度は週一程度。

22.松田則康 氏/自民党 現(当選5回)
サイトURL-
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)-

23.寺岡まゆみ 氏/公明党 現(当選2回)
サイトURLhttp://www.komei.or.jp/km/atsugi-teraoka-mayumi/
ブログURLhttp://www.komei.or.jp/km/atsugi-teraoka-mayumi/blog/
Twitterアカウント-
備考(開始時期、更新頻度等)2011年5月からブログ開設。コメントは不可

24.石井恒雄 氏/無所属 現(当選3回)
サイトURL-
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)-

25.徳間和男 氏/自民党 現(当選11回)
サイトURLhttp://www.tokuma.net/
ブログURLhttp://www.mytownclub.com/sns/index.php?command=topas&asid=2821000
Twitterアカウント@tokumakazuo
skypeアカウントkazuo.tokuma
備考(開始時期、更新頻度等)サイト開設は2009年からだと思われるが、それ以前の議会質問等もアップされている。サイト更新は月10回程度と多め。ブログ開設も2009年10月からで更新頻度も月10回程度と多め。あつぎSNSに登録すればコメント。ツイートは月3回程度。

26.松前進 氏/無所属 現(当選2回)
サイトURL-
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)-

27.難波達哉 氏/無所属 現(当選1回)
サイトURL-
ブログURLhttp://nanba-tatsuya.at.webry.info/
Twitterアカウント-
備考(開始時期、更新頻度等)ブログ開設は2007年だがその次の投稿は2011年3月。コメント。更新は不定期。

28.高澤孝一 氏/無所属 新
サイトURL-
ブログURLhttp://blog.livedoor.jp/ktakazawa/
Twitterアカウント-
備考(開始時期、更新頻度等)2008年1月からブログ開設。コメント。更新頻度は週一程度。

29.瀧口慎太郎 氏/無所属 新
サイトURL-
ブログURLhttp://ameblo.jp/shintarou-taki/
Twitterアカウント@shintarou_taki
備考(開始時期、更新頻度等)ブログは開設のみで投稿無し。ツイートも1ツイート。

30.遠藤浩一 氏/公明党 新
サイトURL-
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)-

31.神子雅人 氏/無所属 現(当選2回) 現市議会副議長
サイトURL-
ブログURLhttp://kamikomasahito.cocolog-nifty.com/blog/
Twitterアカウント-
備考(開始時期、更新頻度等)2010年8月からブログ開設。コメント。更新頻度はほぼ毎日とかなり多め。

32.泉修 氏/みんなの党 新
サイトURL-
ブログURLhttp://ameblo.jp/izumix0729/
Twitterアカウント@IZUMISYU
備考(開始時期、更新頻度等)ブログ開設は2010年9月だがその次の投稿は2011年6月。コメント。ツイート頻度は多め。

33.松本樹影 氏/無所属 現(当選1回)
サイトURL-
ブログURL-
Twitterアカウント-
備考(開始時期、更新頻度等)-


なお、議員が質問している様子を見たい場合は、厚木市議会のサイトが利用できます。
厚木市議会 インターネット中継

2011年7月4日月曜日

MTV Japan Aid Relief Awardsでのレディ・ガガのパフォーマンスに感動。岡本太郎氏の言葉「芸術は爆発だ!」を思い出した。

MTV Japan Aid Relief AwardsでのLady Gagaのパフォーマンスに感動した。



六本木ヒルズの巨大蜘蛛のオブジェからインスパイアされて作ったという蜘蛛の巣に絡め取られたガガ。その蜘蛛の巣を徐々に引きちぎり、遂には激しく踊り歌う。

彼女のパフォーマンスを見ていて、岡本太郎氏の有名な言葉「芸術は爆発だ!」を思い出した。
彼女の内にある鬱屈したようなマグマを爆発させ、過去を、思い込みを、打ち破るような強烈なエネルギー。まさに、彼女のコスモが燃えているような表現だった。

日本に住む私達へ、前へ進むパワーを、あの小さな体から発散してくれているようだった。

ガガはライブが終わったらかなり消耗するんじゃないだろうか。
でも、それが彼女のLOVEなんだろう。


今年グラミーで披露してくれたガガのショーも素晴らしかった。



最低限の所を隠して、まるで生まれたての姿のようなダンサー達。
「Born This Way」。私はこういう風に生まれついたの。
本当は一糸まとわない姿でこの曲を表現したいのかもしれない。


ガガは計11日間も日本に滞在し、世界中に「日本は安全ということを(世界に)叫びたい」と発信してくれた。

恐らく彼女は長期スパンで日本のことを支援してくれるつもりだろう。

ありがとう、ガガ。
是非また日本に来て欲しい。

あゆコロちゃんのデザイン使用権は厚木市シティセールス推進課で管理されているんだね

愛甲石田にある「パン・ド・ファンタジスタ」さんで販売されている「あゆコロちゃんパン」。最近も、FM横浜の「ホズミング」のコーナーで取り上げられるなど、大人気。

ふと、あゆコロちゃんのデザイン使用権などはどうなっているんだろう?と思ったら、パン・ド・ファンタジスタさんのブログに使用権について書かれていた。

秘密プロジェクト(笑)公開 パン・ド・ファンタジスタ情報局/ウェブリブログ
あゆコロちゃんのデザイン使用権は厚木市役所のシティーセールス課さんが管理しているとのこと。
早速、問い合わせてみたところ申請書を提出の必要ありとの事で、試作と書類を作成し、無事許可を頂きました


厚木市のサイトでも、厚木市政策部シティセールス推進課へ届け出て承認手続きが必要と書いてある。

厚木市:厚木市マスコットキャラクター「あゆコロちゃん」及びロゴマークの使用に関する要綱

要項を纏めてみた。
  • 使用承認申請書を市長宛に提出。窓口はシティーセールス推進課。
  • 使用を承認するのは市長。OKでもNGでも通知書が届く。
  • 承認期間は承認日から起算して2年経った最初の3月31日まで。
  • 使用料は無料。
  • 企画書や何らかの参考となるものを添付すること(だから、パン・ド・ファンタジスタさんは試作品を提出されたんですね)。

使用料は無料だし、申請についても細々規定していないので自由度も高そうだ。

BloggerのHTML/JavaScriptガジェットでTweet、いいね!、Google+1(Google Plus One)ボタンをつけてみた

Bloggerのブログ記事に対してではなく、ブログサイトそのものに対して、ツイートや、いいね!、+1をクリックできるように、Bloggerのブログ右脇にガジェットを追加してみた。


1.「HTML/JavaScript」ガジェットを追加

Bloggerの管理ページで「デザイン」>「ページ要素」>「ガジェットを追加」>「HTML/JavaScript」の+記号をクリック。


2.ソースコードを編集

「HTML/JavaScript」右下の「編集」をクリック。コンテンツ欄に以下のコードを貼り付ける。

ボタンサイズは全て65pxレベルの大きなものを選択。
<iframe allowtransparency='true' src='http://platform.twitter.com/widgets/tweet_button.html?url=ブログのURL&text=ブログのタイトル&related=Twitterのアカウント&lang=ja&count=vertical' frameborder='0' scrolling='no' style='border:none; vertical-align:top; overflow:hidden; width:110px; height:65px;'></iframe>
<iframe allowtransparency='true' frameborder='0' scrolling='no' style='width:100px; height:65px; border:none; overflow:hidden; vertical-align:top;' src='http://www.facebook.com/plugins/like.php?href=URLエンコードしたブログのURL(例:http%3a%2f%2fxxxx.blogspot.com%2f)&amp;layout=box_count&amp;show_faces=false&amp;width=100px&amp;action=like&amp;colorscheme=light&amp;height=65px'></iframe>
<g:plusone size="tall" href="ブログのURL"></g:plusone>
ガジェットのコンテンツ欄では、expr:タグが解釈されず、そのまま文字列として表示されてしまうようだ。そのため、ブログのURLやタイトルも直接入力せざるを得なかった。

何かやり方があるのかな?

Bloggerブログ記事のTweetボタンをiframe版にしてみた

Bloggerのブログ記事のテンプレートに追加していたTwitterのTweetボタン。
これをiframeを使ったバージョンへ移行した。

これまでのコードは以下。
<a class='twitter-share-button' data-count='horizontal' data-lang='ja' data-via='Twitterのアカウント' expr:data-text='data:title + &quot;: &quot;+ data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

これを、以下のiframe版のコードへ変更。
<iframe allowtransparency='true' expr:src='&quot;http://platform.twitter.com/widgets/tweet_button.html?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:title + &quot;: &quot; + data:post.title + &quot;&amp;related=Twitterのアカウント&amp;lang=ja&amp;count=horizontal&quot;' frameborder='0' scrolling='no' style='width:130px; height:20px;'/>
iframe版ではsrc属性のみexprを使用。


「ブログタイトル:投稿記事のタイトル」という書式は変えていないが、同じことを表現するのに、以前は、
expr:data-text='data:title + &quot;: &quot;+ data:post.title'
としていたが、それを以下のように変更する必要があった。
text=&quot; + data:title + &quot;: &quot; + data:post.title + &quot;
&quot; が複雑につながるので注意深く編集しなくてはならない。


ちなみに、現在のブログ記事フッターのソースコード一覧は以下。
<div class='post-body entry-content'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->

  <!-- Tweet Buttonなど -->
  <div style='float: left; margin-top:2.0em;'>
    <table border='0' cellpadding='0' cellspacing='0'>
      <tr>
        <td align='left' width='130'><iframe allowtransparency='true' expr:src='&quot;http://platform.twitter.com/widgets/tweet_button.html?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:title + &quot;: &quot; + data:post.title + &quot;&amp;related=Twitterのアカウント&amp;lang=ja&amp;count=horizontal&quot;' frameborder='0' scrolling='no' style='width:130px; height:20px;'/></td>
        <td align='left' width='110'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/></td>
        <td align='left' width='90'><g:plusone expr:href='data:post.url' size='medium'/></td>
      </tr>
    </table>
  </div>
  <div style='clear: both;'/>
</div>

Google+1(Google Plus One)ボタンをBloggerのブログ記事につけてみた

GoogleのGoogle+1(Google Plus One)ボタンを、Bloggerのブログ記事のテンプレートに追加してみた。

1.プラスワンのサイトでコードを作成する

プラスワン ボタン
Google+1サイトで、ボタンサイズやカウンターの表示/非表示を設定する。


2.ブログ記事のテンプレートを編集

Bloggerの管理ページで「デザイン」>「HTMLの編集」へ。
「ウィジェットのテンプレートを展開」にチェックを入れる。

まずは、</body> の直前にGoogle+1のjsを読み込むコードを追加する。
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

次に、ボタンを追加。
例えば、ブログ記事の一番下に追加したい場合は<data:post.body/>の下に以下のようにコードを追加する。ボタンサイズはmediumを選んだ場合。
<div class='post-body entry-content'>
<data:post.body/>

<g:plusone expr:href='data:post.url' size='medium'/>

</div>

ポイントはexpr:href='data:post.url'
data:post.urlが投稿記事のURLになるので、その情報をhref属性としてgタグに追加する。