月曜日, 3月 29, 2010
水曜日, 3月 03, 2010
PayPalについて、雑学＆最新情報
『朝会議 @ Apple Store, Shibuya』でPayPalについて勉強した！より
PayPalはeBayグループ。eBayグループでの稼ぎ頭です。現在、おおざっぱにいうと年間7.1兆円の取扱額（グローバル）になっています。 現在190ヶ国、19言語で展開。 日本では資金決済法の関係で、現在「展開準備中」の段階。営業はしていない状況。資金決済法が施行され、認可を受けた時点でフル稼働し、マーケティングに力をいれていく予定。実際PayPal Japanのトップページを見るとシンガポールの法律のもとに運営している旨が書かれています。 したがって、英語版にある機能が日本版にない、といったこともあります。認可をとったあとに展開していく予定。 モバイル版はmobile.paypal.comで展開中。iPhoneやBlackberryから送金や残高チェックができます。しかし、日本では未対応。 PayPalでは、アカウント取得は誰でも簡単に、しかし個々の取引を監視、というスタイルをとっています。導入の敷居を低くして誰にでもまずは使ってもらうこと。しかし金融業なので、決済のたびに怪しい取引がないか監視しています。 したがって、PayPalのアカウントは即日発行、クレジットカードもその日から使うことができる、という利点があります。 PayPalを利用した主な日本企業としてはベクター（ソフトウェア販売）、ユニクロの海外展開、ダイソーの海外向け販売などがあります。海外ではPayPalの知名度が高いのと、クロスボーダーでの決済が可能なので、海外と取引している企業によく使われています。 開発で大変なのはやはりローカライゼーション。ただの翻訳ではなくて、日本のマーケットに最適化したコンテンツを増やせるように努力中。 開発系での特徴はオープンな決済プラットフォームの展開。APIなどを使って企業サイトに簡単にイン テグレーションできるように作っています。 日本進出への障害として大きいのは「eBayがないこと」。海外では絶大なる認知を誇る「eBay」や「PayPal」といったブランドが通用しないので、今後は日本での認知度をあげていきます。 日本のPayPalのTwitterアカウントは「@paypaljapan」。現在実験中という位置づけですが、サポート窓口と思ってもらってかまいません。なにかあればお気軽につぶやいてください。
火曜日, 3月 02, 2010
テキストリンクのホバー時に背景をアニメーションで変更するスクリプト
複数行のテキストリンクにも対応した、ホバー時に背景をアニメーションで変更するスクリプトをCSS-Trickから紹介します。
Link Underlines Grow to Backgrounds on Hover
デモページ
デモはTechnique #1から3まであり、キャプチャはIE7に対応したTechnique #3です。
Technique #3はIE7でも下記のように複数行のテキストリンクにも対応しています。
二行に渡るテキストリンクにも対応
こういったテクニックを利用する際、HTMLにspanなどを記述することがありますが、ここで紹介するテクニックのHTMLは通常のa要素のみとなっています。
実装のイメージ
div要素に角丸やフェードのボーダーをスタイリングするスクリプト -DivCorners
ボーダーは矩形の内側と外側に指定して配置することが可能で、ボーダー自体の幅や高さを指定してスタイリングすることができます。
上記キャプチャは、外側（outside）のデモです。
スクリプトの現在の仕様では、角丸やフェードのボーダーには画像が使用されており、下記のイメージで実装されています。
実装のイメージ
スクリプトの将来のバージョンでは、画像無しのスタイリングも加わる予定とのことです。
DivCornersはjQueryのプラグインのため、実装にはjquery.jsが必要です。
テーブルを見やすく、使いやすくするためのアルティメットガイド
Ultimate guide to table UI patterns
テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。
- はじめに
- 1. 列を交互にスタイリング
- 2. 列をフルに
- 3. テーブルのセクション
- 4. ソート
- 5. フィルタリング
- 6. ページネーション
- 7. スクロール
- 8. 固定されたヘッダ
- 9. ヘッダのないテーブル
- 10. 拡張可能な列
- 11. 列のアクション
- 12. マルチプルな列のアクション
はじめに
テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単に比較ができるようにすることです。
テーブルがよくない評判をうけるのはデータが不明慮で、とても退屈なものが多いからです。
ここではテーブルを必要とする人のために、それほど悪くないテーブルを作成するために、助けることができるいくつかのパターンを紹介します。
1. 横列を交互にスタイリング
テーブルの横列を交互にスタイリングすることで、混雑したデータが区別しやくなります。背景のスタイルはカラーか画像を使用します。
背景にカラーを使用する場合はページの背景と比べて、より明るくするか暗くするかのどちらかになります。画像を使用する場合は使用しているカラースキームと一致するグラデーションがよいでしょう。
テーブルのヘッダとフッタも一目で分かるようにカラーを変更するようにします。カラーは横列で使用したものより、さらに明るいかさらに暗いかのどちらかです。
2. 横列をフルに
横列にアクションを設置する場合、その横列全部をクリック可能なようにします。これはすわなち、クリック可能エリアを拡大するということです。例えば、横列でできる唯一のアクションが詳細表示のみである場合、これは非常に有用です。
横列全体をクリック可能にするには、jQueryのプラグイン「RowSelect」などを使用すると便利です。
3. テーブルのセクション
関連した横列をまとめる必要があるとき、セクションやグルーピングを使うことを検討してみてください。セクションとは関連したデータをまとめるテーブルの一部です。すべての項目を縦列と同じようにまとめます。
例えば、国のリストを示すテーブルで、地域は横列でグルーピングを行うほうが自然です。そしてそれぞれのセクションは折りたたみ可能にしてもよいでしょう。
4. ソート
データの量が非常に多かったり、なじみのない言葉が多い場合、ソート機能は有効です。また、隣接したデータを比較するのにも利用できます。
テーブルにソート機能をつける場合は、一般的にはヘッダををクリック可能なようにすることです。そして縦列でソートがされるべきです。もしソートが不可能なコラムがあるときは、ソート可能なコラムと明確に相違がある必要があります。
テーブルにソート機能をつけるにはjQueryのプラグイン「TableSorter」が非常に簡単です。多くのデータタイプに対応しており、マルチ縦列のソートもサポートしています。
5. フィルタリング
データ量が多い場合は、フィルタリングも非常に有用です。これはドロップダウンやラジオボタン・チェックボックスを使用してフィルターします。
フィルタリングの大きな特徴は、あらかじめフィルタするキーワードを決めることです。
6. ページネーション
データ量が多い場合、ページネーションで分けることも良い習慣です。ページネーションは認知度も高いです。
しかしながら、ページの数と前へと次へのリンクだけで、あなたはどこに何があるか言うことができますか？ こういったページネーションの問題を解決できる方法があります。
ここではページを定義するために、数字とアルファベットを使用しています。
また、ページネーション自体の量が多い場合は、補足などのインフォメーションを表示するのも効果的です。
7. スクロール
ページネーションとは対照的に、ページを連続的にスクロールすることでデータを見せるテクニックがあります。スクロールさせる際は、ロード時にはプログレスインジケーターなどを設置します。
このパターンには特定のユーザビリティとアクセシビリティの問題があります。これを使用する場合は事前にユーザーテストを行ってください。
上記のような問題をもっていない変種のパターンもあります。.リストの一番下にあるボタンをクリックすることで、次のデータセットを表示します。
8. 固定されたヘッダ
これは簡単に利用できるすてきなシンプルなテクニックです。
かなり大きく複雑なデータでも、ヘッダが常に固定表示されていると、多くの縦列を識別するのに役立ちます。
FixedHeaderTableは簡単に固定されたヘッダを実現するプラグインです。
9. ヘッダのないテーブル
もし、テーブルのデータが自明であるなら、ヘッダを設置する必要はありません。Eメールのテーブルが良い例でしょう。
Eメールでは件名と送り主と日付はヘッダの必要がない自明で特有なデータです。
しかしながら、ヘッダを削除することが可能ではないケースがあります。例えば、日付が二つあるようなあいまいなデータがある場合です。この場合はヘッダが必要になるでしょう。
10. 拡張可能な列
このパターンのキーポイントはテーブルに追加のインフォメーションや機能性を加えることを可能にします。目に見える重要なインフォメーションに加え、更に詳細などを表示するために使用します。
11. 列のアクション
テーブルは通常スタティックに果てしないデータを表示するものですが、特定の行動を行うことができるインタラクションのエレメントでもありえます。アクションは一つの横列や複数の横列で実行することができます。
インラインのアクション
最も単純なアクションは、横列のデータと一致して、先頭もしくは終わりにアクションを設置することです。
上記の例では、投票ボタンを終わりに設置しています。
ホバーのアクション
これは多くのアクションをもっているとき、利用できるパターンの変化です。ホバーで表示・非表示することで、編集や削除をすることができます。
メニューのアクション
横列の上でホバーやクリックで多くのアクションをおこさせる必要がある場合は、このパターンです。
この例ではそれぞれのファイルでできる多くのアクションがあるため、コンテクストメニューのようにアクションを表示します。
12. マルチプルな列のアクション
複数のファイルを選択し、メニューからはアクションを選択してひつとだけ実行できるようになっています。
こういった良いアプローチの場合、ユーザーは多数の横列の上でアクションを行うことができるはずです。
金曜日, 2月 26, 2010
会議に役立ちそうなエントリーのまとめ
会議に役立ちそうなエントリーのまとめ
まずはここから。ホワイトボードなしのミーティングとか考えられんす。
やんわりとした口調を心がけつつ、こうした台詞を使うといろいろスムーズになります。
こちらも大事。「身近な物」を使って説明する手法をマスターしておきましょう。
ネガティブ発言をする人向けに心がけておくといいかも。
議論が感情的になってしまったときに思い出したい言葉。
使えるシーンが限定されますが、マンネリ化した会議にはいいかもですよ。
こちらもたまに使ってもいいかも。「書き出してから発表する」という文化が根付いた後がよいかと。
会議じゃないけど、外部の人が来るちょっとした会に使えるかと。
ミーティングで使えるちょっとした話法いろいろ
- 「今日何を決めますか？」
- 「今日は何時までですか？」
- 「他にアジェンダありますか？」
- 「何分いります？」
- 「じゃ、○○が解決したとして・・・」
- 「質問ですか？コメントですか？リクエストですか？」
- 「あまり時間はないですが、今何を決めますか？」
- 「いつまでにやりますか？」
- 「どうフォローアップしましょうか？」
- 「他にもやることありますよね？」
- 「じゃ、To Doをまとめますか」
特に外部の人とミーティングする場合、ミーティングの作法が違うことが往々にしてあります。そうした場合、お互いの出方を伺いつつやるので時間の無駄になりがち。
そうしたときはこの質問を最初にしましょう。成果にフォーカスさせることにより、メンバーがちょっとだけ真剣になりますよ。
終わりの時間が決まっていないとだらだらミーティングが終わります。最初に決めておいて、ホワイトボードに書いておきましょう。当たり前だけど往々にして決まっていないことが多い、もしくは参加者間で意識の違いがある場合が多いです。
アジェンダはミーティングの最初に全員に確認しましょう。「今日、あのこと決まるのかなぁ・・・」は大きなストレスになります。
しゃべりすぎる人には事前にこう聞くようにしましょう。こう聞いておけば「○分経ちましたよ」と話を中断しやすくなります。
なにか問題があって議論が前に進まないときは（よくある）、とりあえずそれが解決したと仮定して話を進めましょう。往々にして最初の問題が問題じゃなくなることがあります。
だらだらとしゃべる人に向けて。本人もわかっていない場合が多い。
議題のわりに時間がない、というシーンはよくあります。司会は時間を見ながら「今決められないことについて、今どうするか？」を常にウォッチしていなくてはなりません。
期限の決まっていないタスクのなんと多いことか・・・（と思いません？）。
重要なタスクに関してはフォローアップする方法を決めておきましょう。誰か他の人に頼むといいですね。
見積もりが甘い人は仕事を引き受けがち。そういう人はウォッチしておいて、「他にも仕事あるんだから、今うけない方がよくない？」とやんわりと警告しましょう。
ミーティングの成果はそこで決められたTo Doで決まります。最後に「誰が」「いつまでに」「具体的に何をするか（何がどうなったらそのタスクが終わりなのか）」を確認して終わりましょう。
ちなみにミーティングにはホワイトボードが必須ですよね・・・と思う今日この頃。以下の記事もよろしければどうぞ。
カジュアルな勉強会の進め方
- 巨大ポストイットを用意
- 自己紹介
- お名前
- やっていること
- その人の人となりがわかる軽い質問
- テーマについて質問を書き出す
- 一人ずつ発表
- ゲストのプレゼン
- ゲストが残りの質問に答える
- 追加の質疑応答
ホワイトボードでもいいですが、スペースが足りなくなることが多いので、巨大ポストイット（イーゼルパッド）があると便利っす。
書いたらはがして壁に貼っておくと良いですよ。
まずは自己紹介。あまり長いと時間がとられるので以下の項目を40秒程度でしゃべってもらいます。
今まで質問した中で個人的に良かったな、と思ったのが「思い出に残る旅行」「ケータイに一つ機能を追加するとしたら何？」「他の人にはない特殊能力ある？」「自分と付き合うことで得られるメリット」などなどだったかな。
その人に特有の経験が引き出せる質問、その人の知性にチャレンジするような質問が良いです。
なお、自己紹介を聞きながら司会者はイーゼルパッドに「席順マップ」（席順と名前がわかるような図）を書くと良いでしょう。あとで「あの人の名前がわからない！」ということがなくなります。
本日のテーマについて説明し、その周辺で疑問に思っていることを書き出してもらいます。特に制限は設けず、「テーマについて疑問に思っていることをなんでも」という具合に出してもらいます。
なお、時間の節約のため「書いたままを読んでもらいます」と説明し、きちんと文章で質問を書いてもらうのがもっとも大事です。こうすることで発表のときに説明しだす人を防ぐことができます。
全員書いたら一人ずつ発表します。最初は「一人一個だけ発表。他の人に言われたものは飛ばしてください」ルールで。2～3週すると質問がなくなるのであとは適当に残っている人に発表してもらいます。
質問は全部イーゼルパッドに書いていきます。なお、「その質問の意図って何？」という空気が流れたときは司会者はそれを察知してちょっとだけ突っ込むといい感じになります。
それから長くしゃべりだす人がいたら「書いてあるものだけを読んでください」とやんわりと指示します。
ここまでやってからゲストのプレゼンです。その場にいる人が疑問に思っていることがすべて分かっているので、適当に資料をはしょりながら発表することができます。参加者も聞きたいことだけ聞けてハッピー。
なお、このプレゼンはすっとばしてもOKです。ゲストによっては忙しい人もいらっしゃるでしょうから、事前に資料を用意しないで来ていただくのも手です。
プレゼンでは解決しなかった質問に対してゲストが回答します。時間がないときは司会がざざっと一問一答的にこなしていくと良いでしょう（← 簡単に書いたけど実は難しいｗ）。
プレゼンを聞いているうちに新しく疑問が出た場合は追加で質疑応答をします。
まぁ、つまるところ、ゲストのプレゼンをいきなりやらずに、その場に来ている人の疑問をすべて吸い上げてから議論を開始する、という手法です。
他の人がどういう疑問を持っているか、ということ自体が勉強になることも多いのでとってもおすすめです。ゲストのプレゼンがいきなり始まる勉強会も多いですが、お互いに「？」になるときも多いですよね・・・。
プラナフ・ミストリーさんのSixthSenseテクノロジー
ジェスチャーによるインターフェース。というだけでなくPCという存在をなくすアイデア。
これとヘッドマウントディスプレイを組み合わせれば、iPodなどの制約を抜け出して世界観が広がる。
セカイカメラも、iPodに縛らせずにこの世界に入るといい。
↑ 14分ほどですが、デモ満載で飽きません。View Subtitlesで日本語を選びましょう。
Twitterツール開発者は必見！Twitter APIの動作が簡単に確認できる『Twitter API Viewer』
Twitter API ViewerはTwitter APIの動作確認が簡単にできるツールですよ。パラメーターを入力してSubmitすればどんなリスポンスが返ってくるかがわかります。
↑ トップ画面。API種別ごとにうまいことまとまっています。
↑ たとえばUser情報。IDを指定してSubmitすると・・・。
↑ XMLが表示されます。
Googleスプレッドシートで使える便利な関数いろいろ
Google Docsのスプレッドシートで使える関数ですが、Excelっぽいやつは当然として、GoogleのAPIを利用した関数がいろいろ使えるのですね。ちと勉強になったのでまとめてみますよ。
■ ユニークな値だけ抽出
Excelだとわりと面倒な「ユニークな値の抽出」ですが、Google Docsだとunique()一発すね。
↑ これでOK。
メールアドレスの重複をはじく、なんかの処理に便利そうですね。
■ 閾値を指定してフィルタリング
指定したデータセットのうち、10より大きいものを返す、といったことも簡単ですね。Excelのオートフィルタも便利ですが、こうやってセルに直接流し込んでくれるのがGoogle Docsの良いところですね（データセットを返す、という特徴ですかね）。
↑ こんな感じ。複数条件指定も可。
■ Googleで検索した値を表示
Googleならではの機能ですよ。都市名から国を検索して表示したり、有名人の名前から年をひっぱってくることもできるようです。
↑ こういうのもOK。David Allenさんの年がわかりますよ・・・便利。
どういうオプションが使えるかは以下に詳しいです。
» GoogleLookup の使用 : 関数 – Google ドキュメント ヘルプ
■ Googleで翻訳した値を表示
さらに翻訳なんかも可能ですね。超絶便利。
↑ 日本語もこうやって指定すればOK。
言語コードは以下にありますよ。
» Translation API のクラス リファレンス – Google AJAX Language API – Google Code
他にも株価を表示したり、といった機能もありますね。ついつい慣れでExcelの方を起動しちゃいますが、Google Docsも使い込んでみますかね。そのほかの便利関数は以下からどうぞ。
» 10 Useful Google Spreadsheet Formulas You Must Know – woorkup.com
登録:
投稿 (Atom)