Archive for the ‘Uncategorized’ Category
Zoomooz でズーミング・インターフェース
ジェフ・ラスキン氏の息子である、エイザ・ラスキン氏 (@aza) が twitter への投稿で zooming インタフェースを簡単に実現する JavaScript ライブラリを紹介していました。
Zoomooz.js: Make any web page zoom.
そしてそれを旨く使ったインフォメーション・グラフィックをフランス社会党が掲載しています。
内容ごとのブロックをクリック、矢印キー、あるいは、画面下部のテーマセレクタを使ってナビゲーションできます。
フランス語で詳しいことはわからないかもしれませんが、こういうインタラクティブなページは見て楽しいし、ひとつひとつの論点が明確なので、記憶に残りやすいです。近年のオンラインメディアでは静的／動的なインフォ・グラフィックスが盛んに使われています。インタラクティブなものだと NYTimes はだいぶ前からいろいろと話題を提供してきましたが、今までそれらはみんな Flash で作られていました。最近はやはり JavaScript ですね。
ちなみに製作は Datagif というクリエイティブスタジオで、使われているフォントはフランス社会党オリジナル（！）の Jaures ファミリーのようです。
ヒトリデハキケンジャ GitHubのコーディング規約を授けよう
コードが適切に整形されているかどうかはデザイナーやエンジニアなどコードを書く人にとっては日常的な課題のひとつです。プログラミング言語やツールに応じて様々なコーディング規約によって正しいコードの書き方が定義されていますが、GitHubが社内で利用しているコーディング規約を「スタイルガイド」としてサイト上で公開しています。
このスタイルガイドは5個のセクションに分かれています。
- 概要
- スタイリング(CSS)
- マークアップ(HTML)
- ビヘイビア(JavaScript)
- Ruby
GitHubということで様々なRubyのツールとの組み合わせが前提になっている部分もありますが、CSSに対しての規約は例えば下記のようになっています。
- インデントはスペース2つのソフトタブを使う
- プロパティ宣言の
:の後にはスペースを空ける - 宣言の
{の前にはスペースを空ける - カラーコードは
rgbaを使わない場合は数字で指定する - コメントは
//を使う - KSSのドキュメントに従う
font-sizeにはpxを使う
実際のコードの例だと下記のようになります。
// This is a good example!
.styleguide-format {
border: 1px solid #0f0;
color: #000;
background: rgba(0,0,0,0.5);
}
またクラスやidの設定については「ページ中に一度しか表示しないものはidに、そうでない場合はclassにする」との事でこれも実例が示されています。
- 良いidの例:header, footer, modal popups
- 悪いidの例:navigation, item listings, item view pages
コンポーネントを作る場合はエレメント＋クラスの組み合わせを使う方がidによる指定よりも好ましく、良い例が下記のようになります。
<ul class="category-list"> <li class="item">Category 1</li> <li class="item">Category 2</li> <li class="item">Category 3</li> </ul>
ul.category-list { // element + class namespace
&>li { // direct descendant selector > for list items
list-style-type: disc;
}
a { // minimal specificity for all links
color: #ff0000;
}
}
idを使った指定をする際は同時に複数適用する事が無いように注意します。例えばdisabled, mousedown, danger, hover, selected, and activeといったものは常にclassであるべきです。
まだまだ各種ツールの紹介やHTML、JavaScriptなどについての記述もあるのですが今回はここまでにしておきます。とても参考になりますので皆さんも目を通してみてください。
via:https://github.com/styleguide/css
The Pirates Bay の次なるサーバー戦略
世界最大の Bittorrent トラッカーサイト The Pirate Bay のブログで MrSpock 氏 が次世代サーバー計画を語ります。
我々が常に最適化を行っていることの一つに、フロントマシンをどこにおくか、ということがあります。それらを通して、ユーザーは秘密の場所にあるデータベースに接続されます。今回、我々は驚くべき決断をしました。
GPS でコントロールされた無人飛翔体、遠くまで飛ぶ安価な無線通信機器、小さなコンピュータの３つを使って、数キロメータ上空にサーバーを設置する実験を行います。こうすることで、我々のシステムを停止するためには、飛行機を使わなければいけなくなります。
ちょっと早すぎるエイプリルフールのジョークだとか、出来っこ無いなど否定的な意見も多く見られますが、これまでの The Pirate Bay の生き残り戦略を見る限り、まんざら無い話でもない、と思わせられるのが、またすごいところでしょうか。生暖かい目で見守りたいと思います。
The Pirate Bay – The galaxy’s most resilient bittorrent site
想像以上にモダンな英国政府のデジタルデザイン指針
英国の行政サービス情報サイト direct.gov.uk の次バージョンで使われているデザイン上の指針をまとめた Government Digital Service Design Principles（政府デジタルサービスデザイン指針）がアルファバージョンとして公開されています。政府のサイトとして当然といえば当然ですが、現代的で大事なポイントを押さえていますね。
現在すでに採用されている7つの指針をベースにした新しい指針は以下のとおり。
- 政府のニーズではなく、人々のニーズからスタートすること。
- Do less – 本当に必要なものに集中すること。
- データを使ってデザインすること。
- シンプルにするために大変な仕事をちゃんとやること。
- イテレーションにイテレーションを重ねること。
- 国中の誰もが使えるデザインを。
- コンテキストを理解すること。
- ウェブサイトではなく、デジタルなサービスを構築すること。
- 均一性ではなく、一貫性を大事に。
- オープンにすること。それが、改善につながる。
シンプルなことばと実例を含めて紹介されているこのページもなかなか良い例になっていると思いますし、検索やタグを全面に出した新しいGOV.UK のベータ版と、大量の文字が目立つ現在のサイトを比べてもだいぶ改善が期待できそうで楽しみです。
大層な指針を掲げるだけではもちろん何の意味もありません。しかし、ベータサイトを通してフィードバックを募り（メールや GetSatisfaction から意見を送れます）このリニューアルプロジェクトを成功させることで、彼らの目指すものが実現されていくプロセスから学べるものはありそうです。
もしあなたが政府のサイトをデザインするとしたら、どんな指針が重要だと思いますか？
Codesprints – WEB上で参加できるプログラミングコンテスト
Codesprintsはinterview street上で開催されるコーディングイベントです。出題されるパズルのような問題に対してコードを登録でき、スコアなどがランキングされます。ちょうど昨日はQuoraのスポンサードする5時間のプログラミングコンテストが開催されていました。
ログインするとこんな画面で問題の確認とコードの送信ができます。コードを実際に書かせる面接というのは古くからありますが、今後は選考のもっと早い段階でコーディングの技術を見るということでさらなる実力主義になっていきそうですね。
via:https://www.interviewstreet.com/challenges/
2012年版「間違ったソフトウェアの売り方」
Alex Payne 氏の書いたブログ記事、「How Not To Sell Software in 2012」になるほど、と思ったのでご紹介。無料やオープンソースではないソフトウェアの場合特に、購入のプロセスが「最高に簡単 (as easy as humanly possible)」じゃないとお客さんはどこかに行っちゃうよというお話。
- セールス電話とか Webinar とかやめて。そういうことやる代わりに、サイトに全部情報のっけてね。
- トライアル版がなかなか手に入らないのって困るよね。すぐに試せなかったら、あきらめて次に行っちゃうよ。
- 価格をはっきり書いてくれなかったり、値段で駆け引きするのとかありえない。他のお客さんに聞けば、いくら払ったかすぐ分かるんだから。
- プロダクトの大事な情報がホワイトペーパーのドキュメントファイルにしか書いてないとか、どういうこと？PDF じゃなくて、Flash じゃなくて、Silverlight でも ActiveX でもなくて、サイト内に HTML で書いてよ。
- メールマガジンに自動で登録するって、何？だいたい、お金を払う段階までメールとかの個人情報を聞く必要ないよね。
- プロダクトの動作について詳しく技術者に質問したいのになかなかできないと萎える。フォーラムがなかったら多分他の人が作るだろうし、そうなったらコントロールなんてあったもんじゃないよ。
- クレジットカードも用意してるし、PayPal も Google Checkout も Amazon ペイメントもアカウント持ってるのに、お金払うのが面倒なのはどうよ。他の送金方法って、ちょっとないよね…（訳注: 国内の場合、その他の一般的な送金方法に対応していない状態。海外のお客さんターゲットの場合は参考に）
- 頼んでもないのにスパム電話とかメールとか言語道断。プロダクトが良くできてて必要なものだったら、そのうちきっと見つけるから心配なく。
彼によると、成功しているのは例えばこんなところ。
- Urban Airship、Resumator、PagerDuty、Expensify、Duo Security は価格がはっきりしていてすぐに登録できる。
- Skype のサイトは機能がよく分かるように作られている。
- Google Apps for Business のダッシュボードとカスタマーサービスはひどいけど、価格がわかりやすいのとすぐ登録できるのは良い。
- Datameer はカンペキとは言えないし、サイトに余計な文言も多いけど、すぐにトライアル版が使えるところはナイス。
Alex 氏が「成功例」に挙げる Urban Airship の料金ページ。
失敗例には、価格や情報がサイト上で分かりにくかったり、トライアル版のダウンロードや申し込みに電話が必要だったりするサービスが並んでいますので、興味がある方は原文のリンクをたどってみてください。
締めに Alex 氏は「僕はお金を払いたいんだ。必要以上にややこしい購入プロセスは、競合他社の存在よりももっと高いバリアになってるかもしれないよ」 と書いています。
キャパシティなどの事情によってお客さんをフィルターする目的でプロセスを面倒にするというサービスもあるとは思いますが、そうでなければサイトの作り方や購入フローの参考にしたいですね。成功例に挙げられているサイトは英語ですが、ことばが読めなくても分かりやすいというのが感じられると思います。
23人のキッズがプログラミングに熱中したCoderDojo
子供にプログラミングの楽しさを伝える場所があったら素晴らしい場所になる。その証拠といってもいいような写真と記事がgithubのブログにアップされていました。githubでは先日紹介した、子供向けのプログラミングイベントCoderDojoという活動に参加しその最初のイベントが先週末に開催され大盛況だったようです。
23人の子供とたくさんの親、12人のメンターで満員の会場。(※そして脅威のMac率)最初の1時間はHTMLについての内容で子供たちはタグがどのように動くのかを学び、自分自身についてのウェブサイトや2匹のセイウチの写真、Minecraft、脅威の数の忍者軍団についてのページを作成しました。
10分間のランチ休憩(短い！)の後はGame Makerを使ったセッションに移り、メンター達もレッスンの間にソフトウェアの動きを理解するという興味深い進行になりました。ゲームの作成は子供たちにとってもお気に入りだったようで、キーを押すとパックマンがその方向に動くというコードを1方向分を教えただけで残りの3方向をメンターの助けをあまり借りずに書くことができたようです。
最終的にはパックマンを操作してゴーストを食べるというゲームが完成しあっという間の2時間のセッションが終了。終了の際には子供たちもメンターも親も口を揃えてあっという間に終わってしまった楽しい時間を惜しんでいたようです。
「メンターの人がたくさんいて、手を上げればすぐに教えてもらえた」という感想が多かったそうで、メンターや親のサポート体制が行き届いていた事が結果に現れたようです。次回のセッションは3月末に開催され、その後は毎週土曜日の開催になる予定のようです。
元の記事のコメント欄も賞賛のコメントや「Scratchを使ったら？」「Octopintを発見」といったコメントがついていて楽しい雰囲気になっています。日本でもScratchを使った子供向けのイベントを企画している方もいるようですので、このCoderDojoの日本版を見れる日も近いかもしれません。
TechCrunchにも載っていました！
CoderDojoがGitHubと提携して子どもたちのプログラミング独学を支援
もしもプログラミング言語が車か船だったら
If programming languages were cars…という記事が話題になっています。Nathan Riceさんが書いたこの画像を交えた記事は国内外で2/12頃から幅広く話題になっています。2008年の4月にも似たような趣旨のIf a programming language was a boat…（もしもプログラミング言語がボートだったら）という記事があったので両方を交えていくつかご紹介します。
Perl
Perlは神託で作られた謎めいた車か、港で力強い牽引をするタグボートでしょう。
Ruby
議論の余地はあるけども巧みでややエレガントな車か、ピカピカして運転するのが楽しい流行のボートでしょう。
Java
Javaはちょっとダサいけど実用的な車か、大量の貨物を運ぶけど操縦の楽しくない貨物船でしょう。
C
Cは40年を経てもなおベストな軍用車両か、パフォーマンスに最適化された原子力潜水艦でしょう、
PHP
PHPはご覧の通りの紫のバットワゴンか竹で出来た筏でしょう。
HTML
HTMLはボートではありません。
記事を書いた方の嗜好が見えるという意味で今後も思い出した頃に続いて欲しいシリーズですね。そして安定してネタにされているPHPさんさすがです。
via:arguably
via:If a programming language was a boat… | CompSci.ca/blog
ブログのコメントシステムの速度比較
ブログを運営する上でユーザーとのコミュニケーションに欠かせないのがコメント欄。Pingdomで主要なコメントシステムのベンチマークが公表されていました。対象となったのはWordPressのコメントシステムとDisqus、Facebook、IntenseDebate、LiveFyreそれぞれの外部のコメントシステムです。
詳細な結果は元記事を見ていただくとして、リクエスト数やファイルサイズ、ローディングスピードなどの各方面の比較の結果やはりWordPress組み込みのコメントが一番速かったようです。とはいえその差はあまり大きなものではないようです。その他にも埋め込み型のブログパーツの動作などが気になった場合は同じような観点からのテストをしてみるのもいいかもしれません。
via:Testing the speed of comment systems for blogs | Royal Pingdom
11回目のHackerNews meetupが再び東京で開催 (3/2)
表題の通りの催しが今週末に開催されるようです。参加費用は2500円で、欧米で多いような形式のないスタイルとのことです。
筆者も潜入できればと思っていますが、お時間のある方はどうでしょうか。
A-Listers 