2011年5月31日火曜日

jQueryオブジェクトの子要素をjQueryオブジェクトのままループで処理する場合

ちょっとハマったのでメモ。

例えば、ある tbody (id="the_table") の直下にある tr 要素に対して何か操作をしたい場合、
各 tr 要素はjQueryオブジェクトのまま取得できた方が操作が楽です。

まずぱっと思いつくのは、jQueryに用意されている $.each() を使うこと。
次のようにまずセレクタでオブジェクトを取得します。

var lines = $("#the_table").children();

このとき、lines には tbody に関するjQueryのオブジェクトが入っています。
なので

$.each(
 lines, 
 function(i, line){
  …
 }
);

こうすると、 line の中には tr に関するjQueryオブジェクトが入っていると期待したのですが、
実際には <tr></tr> のような文字列が入るだけで動きません。

動くようにするには、for文でインデックスのループをまわしてやりながら eq() で取り出します。

for(var i=0; i < lines.length; i++) {
 var line = lines.eq(i);
}

これでOK!

ハッピー☆

2011年5月29日日曜日

ブログ/SNS系の使い分けとお役立ちサービス&アプリ

皆さんはブログ/SNS系の使い分けってどうしてますか?
僕はざっくりこんな感じで使っています↓


  • Blogger
    レビュー、まとめなど、長文を投稿。

  • Facebook
    主に前職関係者との繋がり。
    投稿は、前職に直接役立ちそうなものが中心。

  • Twitter 1
    もともと社外の人達との交流時に使ってたアカウントを現在のメインに。
    ポスト数がそこそこ多く、話題も偏っているので
    (後述の理由から)あえて前職関係者はあまりフォローせず「ご興味のある方は是非!」方式。
    Web、アート、ネタ、ほんと意味でのつぶやきが中心。

  • Twitter 2:
    主に前職関係者向けアカウント。
    層がFacebookとかぶっているため、現在冬眠中。

  • mixi:
    地元の大学生の友達との絡み用。
    内容はプライベート系のみで、政治経済宗教の話は全くなし。


さらにTumblrやinstagramや細かいものを含めるとぐっちゃぐちゃになって来ますよね。
そこでオススメのいい感じSNSまとめサービス&アプリ。
上がWebサービスで、下がアプリ(iPhone, iPad, Mac用)です↓


  • greplin
    FacebookにTwitter、DropBox、Gmailなどをまとめて検索してくれるWebサービス。
    めっちゃ速くて軽いです。

  • Flavors
    一言でいうと「かっこいいリンク集を簡単に作れるサービス」。
    挨拶のときにここのアドレスだけ共有しておけば
    いちいち「Twitterのアカウントはこれで、Facebookはこれで」とかやらなくて済みます。

  • Facebook for iPhone
    Facebook公式のiPhoneアプリ。

  • Tweetbot
    最強UIのTwitterクライアントiPhoneアプリ。
    見た目の綺麗さと言う意味でも、導線設計という意味でも、
    UIに携わる人は是非一度使ってみていただきたいです。
    ただし、有料(230円)。

  • Echofon for iPhone
    入れておくと、何が自分に関連する動きがあったときに
    「ぽーん」と音を出して知らせてくれます。

  • Flipboard for iPad
    FacebookやTwitterの内容をまるで雑誌のように
    綺麗にレイアウトしてみせてくれるiPadアプリ。
    ただ、投稿性、閲覧性はすこぶる悪いので、まったりタイムにしか使いません。

  • Echofon for Mac
    Mac用のTwitterクライアント。
    Firefoxプラグインや、Windows用もあります。


皆さんのやり方も教えていただけると光栄です!

ハッピー☆

2011年5月13日金曜日

Bloggerにはてブボタン、EvernoteのClipボタン、Facebookのイイネ!ボタンとTwitter用Tweetボタンを付ける

前回の「Bloggerにはてブボタン、EvernoteのClipボタン、Facebookのイイネ!ボタンを付ける」にさらにTweetボタンを付けました。

Bloggerにデフォルトでついているボタンはいまいち使いづらいので
別に実装してみたいと思います。
(デフォルトのボタン自体はこの投稿の一番下にひっそりと並んでいます。)

前回の記事をもとに、はてブボタン、Clipボタン、イイネ!ボタンを実装してください。

そして、イイネ!ボタンの直後に↓のようなコードを貼付けます。

<a class='twitter-share-button' data-count='horizontal' data-lang='ja' data-via='hypo_tech ' expr:data-text='&quot;[&quot; + data:blog.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'/>

data-viaの中身はご自分のアカウント名に変えてください。

ここでポイントが二つあります。

まず、投稿内容にブログ名を含めて

[ハイポのメモ] Bloggerに…

と表示させたいので、data-text の部分を

expr:data-text='&quot;[&quot; + data:blog.title + &quot;] &quot; + data:post.title'

とします。
「'(シングルクオーテーション)」で始めて、普通の文字列は「&quot;」で挟み、
それに「data:blog.title」や「data:post.title」を「+」でつなげるところがポイントです。

もし記事名だけでいい場合は

expr:data-text='data:post.title'

でOKです。

それから、Twitterに自動入力された文字列の最後に半角スペースを一つ入れるため、

data-via='hypo_tech'



data-via='hypo_tech '

とします。
一番最後に半角スペースを一つ入れました。

これでOK!
あとはひたすらTweetされるようないい記事を書いてください。

2011年5月10日火曜日

iPhone と Mac と Google の連携

iPhone と Mac と Google の連携の僕なりのやり方をメモします。

条件は
  • 連絡先は主にiPhoneで入れている
  • 予定も主にiPhoneで入れるが、Macやブラウザでも編集したい。
  • 楽に生きたい

文字で書くと結構な量ですけど、作業自体は簡単ですよー。

iPhoneとMacを同期


まず始めに、iPhoneの連絡先とカレンダーをMacに同期します。
これで、iPhoneの連絡先とMacのアドレス帳、iPhoneのカレンダーとiCalの内容が一致します。

Macを最新にする


次に、Macのアドレス帳を最新にします。
誕生日やアドレス、住所など、すべてをメンテナンスします。
カレンダーも更新する必要があれば更新してください。

Macカレンダーの書き出し


そして、MacのiCalを開きます。
左ペインの「このMAC内」と書かれた部分にカレンダーがあると思いますので、
どれかを選択し、メニューの「ファイル」「書き出す ...」「書き出す ...」でカレンダーを書き出します。
デスクトップでもどこでもいいです。
複数カレンダーがある場合は、同じようにして全部書き出します。

Google Calendarに最新のカレンダーを読み込む


次にブラウザを開いて、Google Calendarにログインしてください。
左ペインの「マイカレンダー」と書かれた部分にあなたのカレンダーがズラズラッと並んでいますね。
その一番下に「設定」と書かれたリンクがあるはずなので、それをクリックしてください。
その画面で「新しいカレンダーの作成」と書かれたボタンの右にある「カレンダーをインポート」というリンクを探してください。
これをクリックすると出てくるダイアログで、先ほど書き出したiCalのカレンダーをインポートしてください。
これで、Google Calendar上に最新の予定が入りました。

iCalにGoogle Calendarの同期


MacのiCalに戻ります。
メニューの「iCal」「環境設定」「一般」で「誕生日カレンダーを表示」にチェックを入れます。
これで、アドレス帳に設定した誕生日が表示されるようになります。

次に、「アカウント」のタブをクリック。
左の「アカウント」と書かれた窓の下の方に「+」ボタンがあると思いますので、クリックします。

「アカウントを追加」というダイアログが出てきたら
「アカウントの種類」で「Google」を、メールアドレスとパスワードにはGoogleのアカウントを入れます。
「作成」を押すと、アカウントの窓に自分のGoogleアカウントが表示されていると思います。

右ペインの設定では「アカウント情報」の「カレンダーを更新」の欄を自由に変更してください。
僕は「1分ごと」にしていますが、ネットワーク品質が悪い場合はもう少し長めにした方がよいようです。

僕はGoogle Calendarに「日本の祝日」という外部カレンダーを設定しているので
「委任」タブには「日本の祝日」が表示されています。
これにチェックを入れると、メイン画面の左側に「委任」という欄が現れ、日本の祝日が表示されます。

さて、今、iCalのメイン画面には同じ予定が二重で表示されているはずです。
もともとiCalに入っていた予定がきちんとGoogle Calendarの方にも反映されていることが確認できたら、
「このMAC内」にあるカレンダーは削除してしまいましょう。

すると、左ペインにあるのは
「Googleのアカウントのカレンダー」「委任」「照会」の三つになっているはずです。
ここで試しにGoogleアカウントのカレンダーに予定を追加してみてください。
そして、ブラウザを開いてGoogle Calendarのサイトを開いてください。
さきほど追加した予定が表示されていればOKです。
逆にブラウザ側での変更がiCalに反映されることも確認してください。

iPhoneとMacの同期


今度はiPhoneをMacにつないでください。
iTunesで同期をするのですが、その際の設定で「情報」タブを開いて
「アドレスブックの連絡先を同期」にチェック、その下の「すべての連絡先」を選択してください。

また「iCalカレンダーを同期」のチェックを外してください
同期するはずなのに外すの?と思われる方もいらっしゃるかもしれませんが、これでOKです。
というのも、同期しても予定をiPhone上で編集できない(参照専用になってしまう)からです。

iPhoneでGoogle Calendarを読み込む


同期が済んだら、iPhoneにGoogle Calendarを読み込みます。
こちらを参考に設定してみてください。

iPhoneカレンダーとGoogleカレンダーを同期する方法。

設定が済んだら、iPhoneのカレンダーの中に予定が出てきているはずです。
新しい予定を追加してみましょう。
少し待ってMacのiCalやブラウザ上のGoogle Calendarを確認してみてください。
無事にさきほど入れた予定が表示されていればOKです。

iPhoneで祝日のカレンダーを読み込む


iPhoneではなぜかiCalのように委任が使えません。
まず、ホーム画面から「設定」を開いてください。
「メール/連絡先/カレンダー」「アカウントを追加...」「その他」「照会するカレンダーを追加」と進みます。
「サーバー」という欄が出てくるので、ここに

https://www.google.com/calendar/ical/ja.japanese%23holiday%40group.v.calendar.google.com/public/basic.ics

と貼付けて、次へ次へで確定します。
(上記URLはGoogle Calendar上で設定をいろいろ探すと見つかります。)

この時点で設定としては成功しているものの画面には出てこないので次の設定をします。

iPhoneのカレンダー上に祝日と誕生日を表示する


最後の設定です。
iPhoneのカレンダーを起動して、左上にある「カレンダー」のボタンを押してください。
出てきた設定画面の途中にある「照会」「日本の祝日」と、
一番下の「その他」「誕生日」にチェックを入れてください。
これでOK。

誕生日はMacから同期する方法もありますが
紹介した方法だとアイコンが色付きの丸ではなくプレゼントアイコンになるのでわかりやすいんです。

予定の更新


これで、iPhoneやMacで連絡先、誕生日などを更新しても
次にiPhoneをMacにつなげたタイミングで同期されるようになります。

また、カレンダー上の予定はどれかで変更すれば全部が更新されます。
iPadにも同様に設定して、スケジュール帳として使うのもアリですね!

ハッピー☆

2011年5月8日日曜日

【美術展レビュー】「包む―日本の伝統パッケージ」展 @目黒区美術館

これはよかった!
展示内容の質が高く、また、展示の仕方が非常に観やすかったです。

会場はさほど広くないものの
さらっと観るには必要充分で、疲れないのに適度にお腹いっぱいになる絶妙な量。
それに伴って入場料も若干安め。

ミューぽんを使うともう少し安くなりました。

内容は、昔の日本で使われていた紙や藁の包装や
陶器で出来ている地酒の瓶など、
日常の中の美を包装という切り口でまとめています。

駅からちょっと離れてはいるものの
見に行く価値ありです。



「包む―日本の伝統パッケージ」展
会場: 目黒区美術館
スケジュール: 2011年02月10日 ~ 2011年05月22日
住所: 〒153-0063 目黒区目黒2-4-36
電話: 03-3714-1201 ファックス: 03-3715-9328

【美術展レビュー】「アーティスト・ファイル2011―現代の作家たち」 @国立新美術館

同会場でやっていた「シュルレアリスム展」の直後に鑑賞。

こちらは若手作家を8組集めたアラカルト方式で
テンポよく見られました。

特に気になったのが Tara Donovan のストローアートと
松江泰治の写真群。

着眼点、インパクト、技術ともにすばらしかったです。

個人的にはシュルレアリスム展よりこっち派かな。

図録は薄い冊子が8冊入って2000円なのでオトク。
ただ、大型作品が多いので、時間に余裕があれば実際に観た方がいいと思います。



「アーティスト・ファイル2011―現代の作家たち」
会場: 国立新美術館
スケジュール: 2011年03月16日 ~ 2011年06月06日
5/3(火・祝)は開館、3/26(土)は「六本木アートナイト2011」開催にともない22:00まで開館
住所: 〒106-8558 東京都港区六本木7-22-2
電話: 03-5777-8600

【美術展レビュー】「シュルレアリスム展-パリ、ポンピドゥセンター所蔵作品による-」 @国立新美術館

意外と衝撃的な表現は少なかったです。

というのも、シュルレアリスム(=シュールリアリズム=超現実主義)の意味が、
模倣からの解放(ややこしく言えば「完全に内在のイメージのみに基づく表現」「欲望や幻想の純粋な具現化」)だとしたら、
実は現代美術、映画や漫画、CGなどの表現はシュルレアリスムそのものであって、
現代の「普通」の表現は前提としてシュルレアリスムなのではないかと。

その「普通」に慣れた状態で本展示を見ても、
全く目新しい物ではないのではないかと思わされたのでした。



展示されている作品たちは、正直に言って良くわからない。
けれど、それこそが目的で存在価値。
美とはパッと見でわかるものにしか宿らないのか?
そもそも私たちが認識している「美」とは何か?
無意識と意識の境目はどこ?
というのをひたすら掘り下げて行ったのがシュルレアリスム。

展示的には、作家たちがアメリカに亡命して以後、
キュビズムと結びついてくるあたりからが俄然面白いです。

絵を眺めて楽しむというよりは
アンドレ・ブルトンを始めとした思想的、文化的背景を
ストーリーとして読む感じなので、
そういうのが好きな方にオススメ。



「シュルレアリスム展-パリ、ポンピドゥセンター所蔵作品による-」
会場: 国立新美術館
スケジュール: 2011年02月09日 ~ 2011年05月15日
5月10日(火)は開館 ※金曜日の夜間開館は当面見合わせ
住所: 〒106-8558 東京都港区六本木7-22-2
電話: 03-5777-8600

2011年5月3日火曜日

【烏龍茶レビュー】 LUPICIA 4708 水仙

久々のお茶レビューでございます。
ただいまー。

4708 水仙 ★★★☆☆

見た目は若干茎のような棒が入っていると同時に、
刻んだ縮れ茶葉も入っている。
色はかなり黒い。

水色は茶色。
ウーロン茶よりは紅茶に近い色。
香りは焙じ茶のような香り。

味はウーロン茶版の焙じ茶という感じ。
ベースの味はウーロン茶で、飲み口や後味は焙じ茶。

食後にさっぱり飲むのによさそう。
よくも悪くも、凄く普通。

2011年5月2日月曜日

Bloggerにはてブボタン、EvernoteのClipボタン、Facebookのイイネ!ボタンを付ける

「デザイン」「HTMLの編集」「テンプレートを編集」と進んで
「ウィジェットのテンプレートを展開」にチェックを入れる。

まず、ページ内を「/header」で検索するとヘッダの閉じタグが出てくるので、
その直前に

<script src='http://static.evernote.com/noteit.js' type='text/javascript'/>

を入れます。

次にページ内を「header-line」で検索すると

<div class='post-header-line-1'/>

という行が出てくるはずなので、そのすぐ下に

<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>

<a expr:onclick='&quot;Evernote.doClip({providerName:\&quot;&quot; + data:title + &quot;\&quot;, title:\&quot;&quot; + data:post.title + &quot;\&quot;, url:\&quot;&quot; + data:post.url + &quot;\&quot;}); return false;&quot;' href='#'><img alt='Clip to Evernote' src='http://static.evernote.com/article-clipper.png'/></a>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&layout=button_count&show_faces=false&width=75&height=20&action=like&font=lucida+grande&colorscheme=light&send=false&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:75px; height:20px;'/>

を追加します。
これでOK。
実際に試して、動作を確認してください。

↑の例だとタイトルのすぐ下に出てきますが
別のところにおくこともできるので色々試してみてください。

様子をみてmixiイイネ!など他のサービスのボタンも試してみようと思います。

2011年5月1日日曜日

今更ながらにiPhone 4に機種変更した場合のことを考える

出る出る詐欺で引っ張ってきていた iPhone 4 がついに出ました。

アップル - iPhone

そこで、今自分がiPhone 4に機種変更した場合にどうなるか聞いてみました。

条件は下記の通り。

  • 現在、iPhone 3GSを使っている
  • 経過期間は一年ほど
  • iPhone 4 白 16GBに変更しようと思っている
  • 3GSを買ったときに、端末代金は先払いしている
  • プラン等の変更は考えていない

まず、3GSを買ったときに端末代金を先払いしているので、解約時の追加支払いはなし。

また、二年契約途中での違約金も、4への機種変更の場合はなし。

ただし、毎月受けている1980円値引きはその時点で終了するので
本来であれば受けられた2万強のキャッシュバック的な物はなくなる。

ところが、4への値引きが新たに月々1980円分発生するので
結果的に毎月の支払い額は変わらず。

まとめると、一年前に端末代金一括支払いで3GSを買っている人が4に 変更する場合、
機種変更にはお金はいらないし、毎月の請求額も今までと変わらない。

ただし前回購入時に一括で払った端末代金の半分は戻ってこないけどいいよね、ということでした。

(「実質0円」とは、最初に払ってもらった端末代金を24ヶ月かけてお返ししますよ、というプランだから。)
(もちろん、今回の端末の購入代金はしっかりかかるので、そこは計算に入れてくださいね。)

現在、3GS白16GBの美品が二万程度で売れる事を考えると
一年ほどで買い換える(そして旧機種はオークションで売る)というスタイルは
結果的に端末代金が実質0円で使い続けられるという意味で
理にかなってることがわかる。

価格設定の妙がスゴいですね。