« 2011年04月 | Main | 2011年06月 »

2011年05月 Archive


2011年05月31日

Facebookでの自分の行動を展示する美術館 intel The Museum of Me

001.jpg

今年一番感服したサイトです。
完成度の高さに必ずや驚くであろう、非常によくできたサイトです。

Facebookの自分の友達や、過去に「いいね!」した動画、画像について
美術館形式で、且つ素晴らしきクオリティでまとめてくれます。
そして、すさまじいスピードで。。

002.jpg
003.jpg
004.jpg

このサイト、intelのプロセッサーのプロモーションだと思うんですが、
intel入ってると、ここまで早く処理できますよってことなんでしょうか。

拡大解釈しすぎですかねぇ。。。

何故このサイトの目的が分からなかったかというと、

more... "Facebookでの自分の行動を展示する美術館 intel The Museum of Me" »

2011年05月26日

Wordpressでトップページにサムネイル画像を表示する

Wordpressデフォルトでは、トップページに
画像が表示されません。
これでは飾り気がなさ過ぎてよく分からなくなってしまうので、
サムネイル画像を表示できるようにします。


■1.
まず、使用しているテーマフォルダ内にある
index.phpやloop.php(トップページ)やarchive.php (アーカイブページ) など
サムネイルを表示させるファイルを開き、次のような行を探します。

<?php the_content('Read the rest of this entry &raquo;'); ?>


■2.
このコードの上に次のコードを追加します。
このコードを消すわけではなく、上に追加します。

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="<?php $values = get_post_custom_values("image_thumb"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
</a>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php $values = get_post_custom_values("image_thumb"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
</a>

■3.
WordPressの管理画面から画像をアップロードします。

■4.
記事の投稿画面で、下記のように
チェックをいれて「カスタムフィールド」を表示します。

custom.jpg

「名前」フィールドに「image_thumb」と入れ、
「値」フィールドにアップロードした画像のパスを入力します。

その他は、タイトル、本文など、いつものように投稿を作成します。

たったこれだけです。

素晴らしいです。

via わーどぷれすっ!

Wordpressで覚えておくと便利なタグ3つ

wordpress-logo.gif

1.自分のサイトURLタグ

絶対パスで
<img src="http://ブログのurl/images/sitetitle.jpg" />
などと記述してしまうと、パスやURLを変えた時に
イチイチ修正しなければならなくなります。
そこで、下記タグを使用します。

<?php bloginfo('template_url'); ?>

これは、使用しているテーマディレクトリまでのURLを
出力してくれるテンプレートタグです。

例えば、下記のように記述します。

<img src="<?php bloginfo('template_url'); ?>/images/sitetitle.jpg" />

これで、自動的にブログURLの変更にも対応した記述となります。


2.自分のサイトタイトルタグ

ブログのタイトルを出力します。

<?php bloginfo(‘title’); ?>

RSSなどにも記載できるので、地味に使えます。


3.自分のサイト説明文タグ


ブログの説明文を出力します。

<?php bloginfo(‘description’); ?>

2011年05月25日

「詳細はこちら」はリンクラベルとして適当なのか

detail.gif

アクセシビリティとユーザビリティ、同じベクトルになることもあれば、
真逆を向くことすらある、2つの概念です。

インターネットといえばPCしかデバイスが無かったころは、
音声ブラウザなども含め、どんな環境でも同じ量の情報を取得できるように、と
アクセシビリティを重視する風潮がありました。
アクセシビリティ的観点からすると、リンクに「詳細はこちら」などとあっても
リンク先にどんなコンテンツが待ち受けているか一切想像ができないため、
決して使ってはならない、禁じ手のラベルでした。

ところが、時を同じくしてブロードバンドの普及率が劇的に上がり始めたころ、
当時のインターネットリテラシーのあるユーザーが、
慣れ親しんだリンクラベルは「詳細はこちら」でした。
様々な企業サイトやキャンペーンサイトで「詳細はこちら」が多様され、
例えデザイン的にボタンには見えなくても、そこに「詳細はこちら」とさえあれば
クリッカブルである、と認識することができるマジックワードでした。

インターネットに力を入れ始めた企業などは、
富士通が策定したアクセシビリティガイドラインや
JISで規格化されたアクセシビリティに則り、
こぞってサイトをリニューアルし始めました。
この時、「詳細はこちら」は衰退するかと思ったのですが、
一部のユーザーから「分かりにくい」と強烈な反発を受け
「詳細はこちら」はリンクラベルとして今も生き続けています。


「詳細はこちら」は、少しご年配の方が得てして好むものだと
肌感覚では感じているのですが、PC利用歴が長い方もそこまでではない方も
詳細がどちらにあるのかを探し出す方法は、やはり年代により
バラつきがあるように思います。

2011年の今、40代以上が主なターゲットとなるサイトや
外資系企業のサイトでは未だに「詳細はこちら」が
大分幅を利かせているように感じます。(かなり主観的。統計は取っていません。)

more... "「詳細はこちら」はリンクラベルとして適当なのか" »

2011年05月24日

SNSにさえ露出すれば、それでよいのか −トヨタのソーシャルコミュニティ

toyotasocial.jpg

人とクルマ、販売店、メーカーをつなぐ新しいソーシャルネットワークとして、
本日5/23(月)にトヨタがセールスフォース・ドットコムとの提携を発表しました。

セールスフォース・ドットコムのクラウドサービス、Salesforce Chatterを
使用し、トヨタ独自のネットワークを構築するとのことです。

Chatter.comは「非公開で安全な企業向けSNSツール」という認識ですが、
この機能を拡張して、ある程度クローズドなSNSを作成するということでしょう。

もちろん、既存のサービスであるmixi、Twitter、Facebook、Youtubeなどは
活かしつつ、ディーラー間や、オーナー間の交流を促進し、
よりロイヤリティを高める、という施策です。

既存のサービスを利用して顧客とコミュニケーション、ということや
下手にオリジナルのSNSを作成して、碌に会員数もとれないまま
ランニングコストだけがかさむ、なんていうことはよく目にしますが、
自社サービスと他社の既存サービスを統合するプラットフォームを作ろう、
なんていうのは、さすがは世界のトヨタとでもいうべきでしょうか。
規模が違う。。


ユビキタス的な「いつでも、どこからでも」という思想や
「つながる」ということに、当たり前すぎて少し鈍感になりつつある我々ですが、
実はつながっているもの同士の相互の依存度が既にかなり高いことには
早めに気付いておくべきだとも思っています。

more... "SNSにさえ露出すれば、それでよいのか −トヨタのソーシャルコミュニティ" »

2011年05月22日

ブログにHTMLソースコードを楽に書くプラグイン

convert-button.jpg

HTMLソースコードをご紹介する際に、
イチイチ手打ちで<や>を実体参照に変更するのは
正直手間でした。

そこで、このブログはMovableTypeを使っていますが、
実体参照への自動変換プラグインを発見しました。
素晴らしい。

管理画面のエントリー投稿画面に追加される
「&」ボタンを押すだけで、選択した文字列を
実体参照化してくれます。

MT3.3以上をご利用の方は是非使ってみてください。

ダウンロートページはこちら
エムロジック放課後プロジェクト


因みに、Wordpressをお使いの方や、ご自分でちゃんと?cssをカスタマイズされるかたは
下記をご参照ください。

VIVA blog

2011年05月19日

WordPressで画像をアップロード出来ないときは

wordpressimgupload.jpg

初めて画像をアップするときには、
「wp-content」というディレクトリの属性を
「757」に 変更してください。

Wordpressをインストールしたまま
パーミションを変更しないと。
画像をアップロード出来ないのです。

これだけで、アップロードできるようになります。

尚、1枚でもアップロードできたら、
可及的速やかに、「wp-content」の属性を「755」に戻すことをお勧めします。

セキュリティ怖いですからね。

2011年05月18日

Google ストリートビューでAudiバーチャルドライブ

audiex02.jpg

運転席に取り付けられたナビ(Google Map)から、
現在地と目的地を選択すると、
実際のAudiの運転席からGoogleストリートビューを使って
バーチャルドライブができます。

ストリートビューでこんなことが出来たんですね。
かなり実際に走っている感覚と近いので、
試乗した気分になれるかもしれません。

とはいえ、ストリートビューなので
トラックより上の目線から
流れる街並みを見ることになります。


audiex01.jpg

クルマのインテリアの訴求にもなるし、
バーチャル試乗体験にはもってこいです。
まさにインターネットにしかできないコンテンツだと
考えられます。

音の視覚化 -街を作ると、曲を作れるWebゲーム

isleoftune.jpg

この画像を見て、
どんな曲が流れているか想像できる方はまずいないと思いますが、
実はマイケル・ジャクソンのBeat Itなんです。

このサイト、シムシティのように街を作ると、
最後にその街にクルマを走らせることによって
街のレイアウトにあわせた曲が流れる、という
素晴らしきWebゲームなんです。

現実世界では、少し前に
Lexus ISのCM "Music Track" で
似たようなコンセプトのものがありましたが、
それを何十倍にも昇華させたようなイメージです。

音を視覚化する、というのは
個人的にかなり興味がある表現でしたが、
この手法はまさに盲点でした。

まさに、”アイディアは既存のものの組み合わせから生まれる”だと
改めて気付かされました。
※単純にマッシュアップということではないです。


もうすぐ、iPhoneアプリも配布されるよう。
楽しみです。


via FWA

2011年05月17日

Helveticaをベースにしたアイコン


helveticons01.jpg


フォント好きでなくとも、
多少デザインをかじったことがある方なら、
一度は聞いたことがあるであろうフォント「Helvetica」。

世界中で愛され、様々な企業ロゴに使用されています。

3M、BMW、Bank of America、evian、Microsoft、
無印良品、NORTH FACE、Panasonic、SAMSUNGなどなど。

Helveticaのことは知らなくても、
目にしたことはあるでしょう。。。

そんなHelveticaをベースに、
素敵なアイコン集が出来ています。

その名もHelveticons。
helveticons02.jpg


フォントにかわいいっす。

2011年05月

2011年05月にブログ「typocode blog」に投稿されたすべてのエントリーです。過去のものから新しいものへ順番に並んでいます。

前のアーカイブは2011年04月です。

次のアーカイブは2011年06月です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Creative Commons License
このブログは、次のライセンスで保護されています。 クリエイティブ・コモンズ・ライセンス.