Tags

閉じる

Category

閉じる

Search

Search

閉じる

( ・ω・)⊃ gunji の記事

実践で覚える!新人向けコーディング課題 その1

コーディングは好きですか?私は大好きです!
DE課でME課なgunjiです。

カヤック意匠部では、デザイナーも全員コーディングを一度は経験し、
ちょっとしたコーディングならME(マークアップエンジニア)課に依頼せず
自分たちでやります。

単に人手が足りないときもありますが、WEBデザイナーならやっぱり
コーディングの考え方を理解していた方が、WEBに最適なデザインが
できるようになるから という理由もあります。

そのため、新人さんや、中途でも紙の分野から来た方には
オリジナルのコーディング課題をお出ししています。

今回はそんな課題の第1回を、
思い切って公開してみたいと思います。

ダウンロードする

続きには模範解答と簡単な解説を掲載しました。

やるだけでコーディングがみるみるできるような気分になりますよ!

続きを読む

今熱い!無料オーディオ系サービスのUI 7選+α

昨日、2010年12月1日、ついに
IPサイマルラジオ「radiko」がついに本格サービススタート!
ワッショイワッショーイ!

てなこともあり、無料音声配信コンテンツが今最高にアツイ!と信じて疑わないgunjiです。

映像系サービスが大人気の今、なぜあえて音声だけがイイのか?

それを語り始めると夜が明けてしまうので、今回はあまり掘り下げませんが
ひとつは、コンテンツを配信する方・視聴する方 両方にとってハードルが低く、
別のことをしながら利用出来るということが挙げられると思います。

まあムービー見ながら仕事するのはけっこう難しいし、ふつうに怒られちゃうけど
作業用BGMなら仕事の効率がアップすることもありますしね。
移動中も眠りながらも聞いていられますしね。

というわけで今回は国内外の、特にプレイヤー部分のUIが面白い
無料オーディオ系サービスをご紹介したいと思います。
ながら利用」を加速させるプレイリストなどの機能にも注目です。

radiko

冒頭でもご紹介した日本のIPサイマルラジオ、つまり
インターネット上で地上波ラジオの放送が聞けちゃうという夢のようなサービスです。

テスト運用時は関東で聞けるのは首都圏だけでしたが昨日から北関東でも聞けるようになりました。
今後エリアが拡大していって、どこでもネット越しにラジオを楽しめる時代が来ると
思うとwktkが止まりません!

radiko

メインのページには番組表や特集のビジュアルがあって、再生開始すると
細長いプレイヤーウィンドウが立ち上がります。
今放送中の局のロゴと番組の情報が上3分の1に収められています。

iphoneアプリもこのプレイヤーウィンドウとほぼ同じUIになっていますが
スマートフォンのインターフェースが先にあって、PCのプレイヤーもそれに
あわせたのではないかという気がします。

続きを読む

文字の大きさも書体も変わることがあるよ

縦の長さは可変だよ

横の長さも可変だよ(ウィンドウサイズなど)

そこだけ背景をしくのは無理だよ

どこからどこまでリピートするか教えてね

ポインタが乗ったりクリックしたときどうなるか指定してね

iPhone4 がついに届いて興奮気味のgunjiです。
2週間待ちでした!

待ってる間に、iPhone4も対象としたWEBアプリ(ネイティブアプリのweb view を含む)
のコーディングで気をつけることについておさらいしていたところ、

Retinaディスプレイに画像を最適化させるのって意外とめんどいよね!

という現実に打ちのめされたので、まとめてみます。

そもそもRetinaディスプレイってなんでしたっけ?

はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で
画面がとってもキレイに見えるんですよね!
拡大しなくても小さな文字が読めるなんてサイコー!

ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと
不思議な状態になってることがあるのです。

iPhone4で見たらなんか画像がにじんでるように見える・・・?!

iPhone4だとなんか画像がにじむ・・・

こういうイメージです。
そう、2倍の解像度ってことは、今まで等倍で表示していた画像が
2×2=4倍に引き伸ばされて表示されるということなのです。

(ネイティブアプリでの切り替えや詳しい画像の作り方については別のメンバーが
書くって言ってました。お楽しみに!)

では、WEBアプリ(サイト)ではどうすればiPhone4の高解像度を活かして 画像をきれいに表示することができるのでしょうか?
つづきから、詳しく見ていきましょう。

続きを読む