WEB・アプリ開発・音楽制作 | Kaleidoscope » JavaScript

宝島チャンネル　ローテーションバナーをJS化しました

kosuke — Sun, 13 Nov 2011 12:52:38 +0000

宝島チャンネル　ローテーションバナーをJS化しました

宝島チャンネル

宝島社さんの公式サイトである「宝島チャンネル」のサイトトップのローテーションバナー（右上のやつ）を改修させていただきました。毎度ご依頼ありがとうございます。

以下、改修内容。

元々Flashで作られていたものを、JSとCSS3で改修してます。

・動きはほぼ従来のFlashバージョンと同様
・左から右にアニメーションしてる白いカーソルみたいのは、CSS3で再現。
　ただし、Chrome、Safari、Firefoxなどの対応で、IEだとここは省略されます。
　いわゆるプログレッシブエンハンスメントってやつです。
・Flashバージョンの更新性があまり良くなかったので、外部のxmlで更新をおこなう仕様に変更しました。

という感じで、現在はアプリ事業に注力してるのですが、
こういったFlash→JS化は好きなので、ご依頼を受けることにしてます。
お仕事ございましたらぜひ。

「宝島チャンネル」

他の人気エントリ

Webクリエイター向けにHTMLやJSの記述をObjective-Cに置き換えてみた（UILabel編）

kosuke — Mon, 30 May 2011 08:20:01 +0000

Web系の人でiPhoneアプリ作ってみたいなーと思ってる人って多いのかな？どうなんだろ？

個人的には、HTML5技術とか進んでて、Webアプリでもかなりのものが作れるようになってきてますけど、やっぱりまだまだネイティブの方が有利な部分が多いと思ってます。あと、iPhoneの仕様を深く知る上でもいいんじゃないかなーと。

ちょっとしたアプリ作るなら、Titanium Mobileとかで全然いいと思うんですが、Titanium MobileのAPIに無いことをやろうとするとObjective-Cしかありません。

Objective-C自体はそんなに難しくないと思うんですよ。どちらかというと、APIやら仕様やらの情報がわかりにくい。それさえ調べ調べやれば、Web系の人でもアプリ作れます。

ということで、Web系の人でObjective-C学んでみたいという人向けに、ちょっとまとめてみました。
ただし、超基本な部分をすっ飛ばして書いてるので、その辺はご自身で学習を。

今回は、viewという基本的なオブジェクトを組み立てていくお話。
（webの記述を置き換えてますが、webViewの話しではないですよ）

ビューにテキストを書く

これはHTMLだったらなんてことはない。

たとえば、
[html]

テキスト

[/html]

説明をわかりやすくするため、divで囲って座標系をインラインで加えます。
[html]

テキスト

[/html]

というHTMLの場合、Objective-Cで書くとこうなる。

[cpp]
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 100, 20)];
label.text = @"テキスト";
[self.view addSubView:label]:
[/cpp]
みたいな感じ。
（※座標系とサイズはCSSと同じ数値ですが、実際のサイズは異なります。あくまで説明用です。）

まぁ、これくらいだったらInterface BuilderのGUIによる組み立てができるんだけど、
Objective-Cのビューの組み立ては、基本的にパーツを担うオブジェクトを初期化・用意して親となるビューに貼付けていく感じなのです。

HTMLもDOMっていうオブジェクトモデルをインターフェースとしてるので、上記のコードだと、bodyっていうオブジェクトにテキスト込みのdivオブジェクトを貼付けてるようなもの（…と、説明のため極端な言い方させてもらいます）と考えてみて、JavaScriptによるDOM操作の方がイメージしやすいかなと。

最近はピュアなJS書くよりも、jQuery記述の方が分かる人の方が多いだろうからjQueryで書くとこうなる。

jQuery
[javascript]
label = $(‘
テキスト
’);
label.css({position:’absolute’, top:’10px’,left:’10px’, width:’100px’, height:’20px’});
$(‘body’).append(label);
[/javascript]

↓↓↓↓↓

Objective-C
[cpp]
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 100, 20)];
label.text = @"テキスト";
[self.view addSubView:label];
[/cpp]

１行目：テキストを入れるUILabelっていうオブジェクトを、X座標、Y座標、横幅、高さとともに初期化および用意する。
[c]
[[UILabel alloc] initWithFrame:CGRectMake(X座標, Y座標, 横幅, 高さ)];
[/c]
２行目：テキストの内容を定義。@っていうのは、そういう文法なので深く気にしない。
[c]
label.text = @"テキスト";
[/c]
３行目：そのラベルを親ビューに貼付け。
[c]
[貼付ける先のオブジェクト addSubView:貼付ける対象のオブジェクト];
[/c]

上記を踏まえて、テキスト周りの装飾を他にも紹介すると下記みたいな感じ。

テキストカラー

jQuery
[javascript]
label.css({color:’#000′});
[/javascript]

↓↓↓↓↓

Objective-C
[c]
label.textColor = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.0f];
[/c]
もしくは
[c]
label.textColor = [UIColor blackColor];
[/c]

フォントサイズ

jQuery
[javascript]
label.css({fontSize:’12px’});
[/javascript]

↓↓↓↓↓

Objective-C
[c]
label.font = [UIFont systemFontOfSize:12.0f];
[/c]

（※座標系とサイズはCSSと同じ数値ですが、実際のサイズは異なります。あくまで説明用です。）

他にも、UILabel系のAPIやプロパティがありますが、大体上記と似たような感じですよ。

ちなみに、ここの説明だとaddSubViewしたあとに、テキストカラーやサイズのプロパティを変えてるような感じですが、実際はプロパティを設定したあとに、addSubViewしてください。
誤りなどありましたら、突っ込み入れていただければです。

※【2011.5.30　追記】HTML＝DOMと書いたつもりではなかったのですが、そのように受取られるご意見がありましたので、その辺を修正させていただきました。

他の人気エントリ

スマホ最適化でやったこと

kosuke — Wed, 27 Apr 2011 15:03:03 +0000

※Androidでアクセスされた方は使用感をいただけると幸いです。
（サイトトップ）

先日簡単なエントリで書いてますが、今まではてなダイアリーにエントリを書いてまして、やはりデザインの限界などがありWordPressに移行しました。

このサイトのPCビュー

同時に、基本的なスマホ最適化もおこなっています。

ようやく自分のサイトでスマホ最適化ができたので…ということでのエントリです。

ちなみに、このサイト自体はまだまだ作りかけでして…
そもそもサイトの構成がちゃんと考えられておらず、かなりいろいろ行き届いてないサイトです（笑）
（IE系ではちゃんと表示されません…そのうち手入れします。すみません）

どちらかというと、スマホ最適化でのユーザーインターフェースに重きを置いてのエントリとなります。

では、以下にスマホ最適化でおこなったことをまとめてみました。
（ちなみに対象としているスマートフォンはiOSデバイス（iPhone, iPod Touch）、Androidです）

1.PCとスマートフォンの振分け

基本は、CSSとJavaScriptのみでレイアウト変更しています。

PHPではUA判定してスマートフォン用のCSSとJSを読み込む数行を加えた程度で、WordPressのテーマのスイッチなどはおこなっていません。

[html]

…

[/html]

スマートフォンビュー

HTMLソース的には、上記の3行を変えただけでスマートフォン最適化を実現しています。

場合によっては、WordPressのスマホ用テーマを作って、スイッチしてもいいと思うのですが、今回はその方法は見送りました。

なぜかというと、別のテーマを作るということは、サイトの構成を変えたくなったとき
基本的に2つのテーマを管理・更新しなくてはいけなくなるなーと。

CSSとJSによるレイアウト変更であれば、基本的にPCサイトの要素はそのまま引き継げるので、要素の取捨選択や変更することに集中でき、変更するファイルがCSSとJSのみとなり効率が良いからです。

PHPテンプレートを変更する必要がなくなります。

もちろん、サイトを管理する人が複数いるとか、運用体制に余裕がある場合は、テーマ切替による最適化でもよいと思います。

また、iPhone3GS全盛時代までは、CSSのメディアクエリで振り分けることもできたのですが、今現在横幅が480px以上のAndroid端末がだいぶ多いので、サーバ言語かJSなどでUA判定して振り分けるようにしましょう。

2.viewportの設定

ほとんどお決まりの記述ですね。
[html]

[/html]

これについては、いろんなサイトで情報が出ていますので、説明は割愛します。
下記サイトなどをご覧ください。

3.ホーム画面アイコン（iPhone）、ショートカットアイコンの設定（Android）

[html]

[/html]

ホーム画面アイコンの設定

（アイコンがダサいですがスルーで…）

この記述をおこなうことで、iPhoneならホーム画面に追加する際のアイコン、Androidならショートカットアイコンを設定できます。
（iPhoneは用意した画像に、自動的に磨き処理がかかって、いい感じになります）

余談ですが、「スマートフォン対応しました！」とアピールしているものの、この設定がされてないサイトをたまに見かけます。なんだか、アピールしているだけに惜しい感じが出てしまうので出来るだけ設定しておいた方が良さそうです（笑）

4.横向き時のテキスト拡大の無効化

スマートフォン時のCSSには次の記述をしています。
[css]
body {
…
-webkit-text-size-adjust: none;
…
}
[/css]

デフォルトのまま

拡大表示無効

これを行うことで、横向きしたときのテキストの自動拡大表示を無効にします。最近は拡大をしないのが一般的のようです。拡大表示されちゃうとなんだか不自然な印象を受けます。

比較していただければわかるように、情報量が全く違います。

5.リキッドレイアウト

このサイトはスマートフォン時には、コンテナ要素をwidth:100%としており、内部要素も必要に応じて横向きにした際に横幅が広がるレイアウトを組んでいます。

悪い例：横幅固定にした場合の横向きビューのイメージ

たまに横幅320pxなどとしたサイトを見かけます。別にそれがいけないというわけではないですが、問題はAndroidで閲覧した時です。iPhoneはレイアウトの組み方によっては、横向きにしたときに自動的にフィットしてくれますが、Androidでは純粋にその固定幅で表示されるため、以下のようなイメージになります。

左右に無駄な余白ができてしまい、なんだか不自然な感じになってしまいます。

6.スマートフォンならではのユーザーインターフェースの実装

フリックできるスライドの実装

サイトトップのバナーは、ユーザーがフリック操作が出来るようにしています。
トランジションはCSS3、UIの構築にはjQueryを使って自前プラグイン化してます。

今後いろんなサイトで使い回せるように、実装は下記の1行で済むようなプラグインを作っています。
[javascript]
$(‘#mainImageArea>#mainImages ul li’).flickSlide({target:’#mainImageArea’, duration:5000});
[/javascript]

スマートフォンビュー

このUIはけっこう手の込んだことをしています。

スマホサイトは横向き時というのを、念頭においてリキッドレイアウトという大前提で組む必要がありますが、絶対配置（position:absolute）などの要素を使うことになると、かなりハードルが高くなります。今までのPCサイトでのCSSレイアウト術より高度なスキルと発想が求められるのでは〜？と思っています。

後日のエントリでプラグインの説明と配布をおこなうつもりです。

ちなみに、このUIはAndroidでたまーにバグることがあります。どうやらYahooさんのサイトなどを見ると、iPhoneではフリックが有効になっているのに、Androidではフリック無効となっているので、まだまだAndroid向けサイトではフリックの実装はおこなわない方がよいのかも知れません。

LightBox風の画像表示の実装

こちらも自前で作成しています。

LightBox風のUI

PC時はColorBoxという海外の方のプラグインを使用させてもらってるのですが、それをスマートフォン時でも同様に使うと想定どおりにおかしな表示になりました（笑）

なので、こちらのUIも独自にjQueryで作成しました。PCのように凝ったUIにするとだいぶ重くなってしまうので、とりあえずシンプルにしています。

7.手付かずな部分…

だいぶ基本的な部分は作ったものの、元々サイトの構成ができてない上、細かい部分で最適化が行き届いてないです。
たとえば、リンクがボックスリンク（？）になってなかったり…タッチしにくいですよね。

とりあえずは、ちょっと凝ったUIの部分に時間を割いてみました。

もし、なにか気づかれた部分などあればお知らせください。
まだまだ知らないことが多く、日々勉強中です。

長くなってしまいましたが、少しでもみなさんのご参考になれば幸いです。

他の人気エントリ

SVG女子がすごい

kosuke — Tue, 26 Apr 2011 00:28:40 +0000

SVG女子

IE9のプロモーションサイト「SVG女子」の日本語版が公開になりました。アニメーション制作は神風動画さん、サイト制作・開発はカヤックさん。

IE9をはじめ、ChromeやSafari、Firefox（4）あたりで見れると思います。非Flashなのです。
これ見てると、いよいよ本格的なHTML5時代が到来してきたなーと思わずにいられません。

原理はコマ撮りやパラパラアニメーションみたいなので、
Flashのモーショントゥイーンより考え方はシンプルかも。

こういうの作りたいなー。他の人気エントリ

はてなから引越しました。

kosuke — Sun, 24 Apr 2011 09:27:09 +0000

はてなからブログを引越しました。
WordPressに移行しました。
前のブログはこっち
http://d.hatena.ne.jp/izit_kosuke/

基本的なスマホ対応してます。（iPhone・Androidでアクセスしてください）
【サイトトップ】
超突貫で作ったので、細かい部分でいろいろ行き届いてません。
カテゴリやエントリがないリンクすらありますw

IE6は完全切り捨てです（笑）
IE7ではレイアウトが微妙に崩れるようです。

iPhone／Android対応してますが、フリックできるところとか
（完全なフリックの実装はしてない）
ときどきバグります。
また、スマホ時もPCサイトの画像（サイズの大きい画像）をそのまま読込んでいるので
ページ読込みにやや時間がかかります。

スマホサイトやアプリの制作関連をエントリしていきつつ、
サイトも良くしていこうと思ってます。

新しいブログ　スマートフォンビュー

他の人気エントリ

スマホサイト制作：URLバーをページ読込み完了時に引っ込める方法

kosuke — Sun, 27 Feb 2011 00:16:54 +0000

今回もあまりがっつり書ける時間が無いので、超小技のエントリー(￣▽￣;)

たとえば、Yahooさんとかがやっているんですが、

「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。

Yahoo! JAPAN （スマートフォンサイト）

（Yahooさんの手法とは違うかもしれませんが）

その方法を紹介します。

僕の場合は、ページ読込みが完了した時に1ピクセルだけスクロールさせています。

そもそも、iOSのSafariやAndroidの「ブラウザ」は、

ページ読み込み完了時に、スクロール位置が1ピクセル以上あった場合、

URLバーが引っ込む仕様のようです。

（あくまで推測。ページ内リンクなどで、そうなるのが根拠です。）

まぁ、これのなにがいいのかというと、

ページの表示範囲を少し広く見せられる。

ってところでしょうか。

やり方は簡単です。

JavaScriptでWindowオブジェクトの読み込み完了時に、

1ピクセルのスクロールをしてあげます。

jQueryで記述すると

[javascript]
$(window).bind('load',function(){//←windowオブジェクトにloadイベントをバインド
setTimeout(function(){window.scrollTo(0,1);　//←windowオブジェクトを1ピクセルスクロール
　},1);
});
[/javascript]

setTimeoutについては、リロード時など読み込みが早すぎて動作が追いつかない場合があるため

やや遅らせるという処理をおこなっています。

記述は違えど、こういう手法が一般的のようです。

逆に他に良い方法があれば、教えていただければです！

動作デモ

（iPhone・Androidで見てください。iPhone 3GS/IS03で確認済み）

※ページ内容によっては、setTimeoutの遅延をもう少し大きくしてあげるといいかもです。

※前回のエントリーで「URLバーを隠す行為」とコメントがありましたが、今回についても隠すことを推奨しているわけではありません。

【2011.5.6　追記】ツイッター上などで、やはり「隠す行為」とおっしゃっている方がいますが、そもそもスクロールしたら引っ込みますよ。Mobile SafariやAndroid標準ブラウザはそういう仕様ですので。よくブラウザ見てみましょう。それが嫌ならURLバーが固定で表示されるブラウザに変えましょう。

他の人気エントリ

WEB・アプリ開発・音楽制作 | Kaleidoscope » JavaScript

宝島チャンネル ローテーションバナーをJS化しました

宝島チャンネル ローテーションバナーをJS化しました

Webクリエイター向けにHTMLやJSの記述をObjective-Cに置き換えてみた（UILabel編）

ビューにテキストを書く

テキストカラー

フォントサイズ

スマホ最適化でやったこと

1.PCとスマートフォンの振分け

2.viewportの設定

3.ホーム画面アイコン（iPhone）、ショートカットアイコンの設定（Android）

4.横向き時のテキスト拡大の無効化

5.リキッドレイアウト

6.スマートフォンならではのユーザーインターフェースの実装

フリックできるスライドの実装

LightBox風の画像表示の実装

7.手付かずな部分…

SVG女子がすごい

はてなから引越しました。

スマホサイト制作：URLバーをページ読込み完了時に引っ込める方法

宝島チャンネル　ローテーションバナーをJS化しました

宝島チャンネル　ローテーションバナーをJS化しました