キョウダケダカンナー

Links for 20120223 [はてなブックマーク]

Fri, 24 Feb 2012 00:00:00 PST

[Photoshop]コーディングの手間を省略！PSDファイルからテキストを抽出してtxtファイルにまとめてくれるスクリプト | バシャログ。

[Photoshop]コーディングの手間を省略！PSDファイルからテキストを抽出してtxtファイルにまとめてくれるスクリプト | バシャログ。
どうも。Xperia arcの外装に小さなヒビを発見して自分の心にも小さなヒビが入りました。hakoishiです。扱い荒かったのかなぁー… さて、今回はPSDファイルからテキストを抽出してtxtファイルにまとめてくれるスクリプトのご紹介です。コーディングの時、PSDファイルからテキストをコピーしてくるのが地味に手間だったりしますね。フォント環境の無いPCだと都度警告が出たりもするし。テキスト...

sw_lucchini photoshop PSDからテキストを抽出する
Twitter bootstrap入門

Twitter bootstrap入門
Statistics Favorites 2 Downloads 0 Comments 0 Embed Views 0 Views on SlideShare 77 Total Views 77 Twitter bootstrap入門 — Presentation Transcript Twitter Bootstrap Toshiaki Maki (@making)12 2 23 • Toshi...

sw_lucchini css
さくらのレンタルサーバ非公式FAQ ValueDomainでのドメイン設定例

さくらのレンタルサーバ非公式FAQ ValueDomainでのドメイン設定例
ValueDomainでのドメイン設定例 - 初心者向け設定と応用設定目次関連ページドメインをさくらのDNSで使う場合(初心者向け) ドメインをValueDomainのDNSで使う場合の応用例応用例[2] 応用例[3] 応用例[4] DNSラウンドロビン応用例[5] ウェブは他社サーバー・メールはさくら応用例[6] さくらでメールのみ使用応用例[7] TXTレコードも設定する初心者...

sw_lucchini レンタルサーバー ValueDomainでとったドメインをさくらのDNSで使う

走るWEBクリエイター

loop0429 — Fri, 24 Feb 2012 03:00:55 +0000

2月19日（日）に沖縄で人生二度目のフルマラソンを走ってきました。目標の3時間うんぬん分を達成！

一度目のマラソンで今回のタイムを切ることが目標だったんですが、ペース配分はめちゃくちゃでエネルギー補給もまともにせず、後半、足にきてバテバテになり、完走はしましたが目標達成できませんでした。
今回はその経験を活かし、ペース配分をしっかりしたおかげで、一度目よりもきついコースでしたが歩くこともなく、無事、目標達成。

フルマラソンは毎年の大きな目標なので、来年もしっかり走れるように体調を崩さずがんばろうと思います。

Links for 20120221 [はてなブックマーク]

Wed, 22 Feb 2012 00:00:00 PST

jQuery Blend Modes Plug-in - Demo

jQuery Blend Modes Plug-in - Demo
jQuery Blend Modes examples Make a new mouse hover feeling jQuery Blend Modes plugin bring the blend Modes functions to your web page, without use any images editor (Like Photoshop), The main function...

sw_lucchini jQuery Photoshopのブレンドモードを再現
少しのコードで実装可能な15のスマートフォンサイト用小技集 | Webクリエイターボックス

少しのコードで実装可能な15のスマートフォンサイト用小技集 | Webクリエイターボックス
スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！スマートフォ...

sw_lucchini iphone コーディング
Photoshop VIP ☞ クリエイティブなゴシック調フリーフォント、30個あつめました。

Photoshop VIP ☞ クリエイティブなゴシック調フリーフォント、30個あつめました。
古い歴史を感じる、クラシックな書体が印象的なゴシックフォント。それぞれのアルファベットに、装飾が施されており、Webデザインだけでなく、雑誌などのプリント媒体においても、利用されているフォントスタイルのひとつです。海外デザインブログNaldzGraphicsで、バリエーション豊かなゴシック体フリーフォントを30個まとめたエントリー「30 Creative and Stylish Gothic ...

sw_lucchini フォントロック系で使えそうな
どんなデザインにも使いやすい、ミニマルなフリーアイコンセットまとめ14個 - W3Q

どんなデザインにも使いやすい、ミニマルなフリーアイコンセットまとめ14個 - W3Q
[アイコン・素材] どんなデザインにも使いやすい、ミニマルなフリーアイコンセット

sw_lucchini アイコン
【Fireworks】テキストボックスを改行で分割するコマンド | バシャログ。

【Fireworks】テキストボックスを改行で分割するコマンド | バシャログ。
髪を切って2日目で失敗したことに気がついたminamiです。今回もちょっとだけ便利なFireworksのコマンドです。テキストボックスを改行で分割するコマンド右クリックなどで保存してください。ご使用は自己責任でお願いいたします。読んで字のとおりですが、テキストボックスを改行部分で複数のテキストボックスに分割してくれるコマンドです。画面をデザインをする際に、テキストを原稿からパーツにわけて...

sw_lucchini fireworks
Kern Type, the kerning game

Kern Type, the kerning game
A game that helps you learning how to kern typeInstructions Your mission is simple: achieve pleasant and readable text by distributing the space between letters. Typographers call this activity kernin...

sw_lucchini typography カーニングクイズ

Links for 20120217 [はてなブックマーク]

Sat, 18 Feb 2012 00:00:00 PST

iPhone生活が加速する話題のランチャーアプリ「Launch Center」を活用したら本当に便利で感動した！ * 男子ハック

iPhone生活が加速する話題のランチャーアプリ「Launch Center」を活用したら本当に便利で感動した！ * 男子ハック
@JUNP_Nです。少し前から話題のランチャーアプリ「Launch Center」ですが、色々と設定して使うようにしてみたら本当に色々と捗って便利だったので僕が設定している項目をご紹介します。 Launch Center – Schedule tasks and apps like Facebook, Twitter, etc. 1.2（￥170）カテゴリ: 仕事効率化, ユーティリティ販売元...

sw_lucchini iPhone 買った！

Links for 20120216 [はてなブックマーク]

Fri, 17 Feb 2012 00:00:00 PST

Sliderコンポーネントのつまみ(Thumb)のサイズと位置設定の方法 | ウルトラライトで山に行く。

Sliderコンポーネントのつまみ(Thumb)のサイズと位置設定の方法 | ウルトラライトで山に行く。
sliderをSliderコンポーネントとした場合、 BaseButton(slider.getChildAt(1)).useHandCursor = true; //手のカーソルを出す BaseButton(slider.getChildAt(1)).setSize(9,9); //つまみのサイズを設定 BaseButton(slider.getChildAt(1)).y=2; //高さの位置を...

sw_lucchini as3 Sliderのthumbをカスタマイズ

Links for 20120215 [はてなブックマーク]

Thu, 16 Feb 2012 00:00:00 PST

ウノウラボ by Zynga Japan: iPhone向けのサイトを作るときのちょっとした気配り

ウノウラボ by Zynga Japan: iPhone向けのサイトを作るときのちょっとした気配り
yamaokaです。だいぶiPhoneやAndroidといったスマートフォン向けのwebページを作ることが増えてきたのではないでしょうか。ちょっとした気配りで使いやすくなるケースもあるかなと思うので、いくつか使えそうな工夫について書いてみたいと思います。ただし、今回はiPhone向けです。タップされた場所をハイライトする iPhoneのSafariでは「-webkit-tap-highlig...

sw_lucchini iphone コーディング電話番号の部分
iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう | HTML5でサイトをつくろう

iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう | HTML5でサイトをつくろう
iPhoneサイト制作（スマートフォンサイト制作）をする上で、ソースの無駄な記述を最低限に抑え、通信速度を上げることが「最適化」へとつながります。スマートフォンサイト用に最適化したcssを制作する場合、reset.cssの記述を減らすことで、重複する命令を減らして、読み込みのスピードを上げることができます。今回はスマートフォンサイトを制作する上で、最低限必要となるreset.cssの記述につい...

sw_lucchini HTML5 スマホ版html5reset.css

Links for 20120214 [はてなブックマーク]

Wed, 15 Feb 2012 00:00:00 PST

HTML5で進化したフォーム機能　ここが違う！サンプルで見るHTML5（5）（1/3）：CodeZine

HTML5で進化したフォーム機能　ここが違う！サンプルで見るHTML5（5）（1/3）：CodeZine
新たに導入されたフォームコントロール　これまでウェブにおける入力フォームコントロールは、非常に限られたものしかありませんでした。皆さんがよくご存じのテキスト（パスワード）入力フィールド、ラジオボタン、チェックボックス、セレクトメニュー、テキストエリア、ファイル選択です。お問い合わせフォームであれば、ほとんどのシーンで十分といえるでしょうが、ウェブアプリケーションにおいては、不足していると言わざるを...

sw_lucchini HTML5 フォーム機能まとめ

Retina display対応のデザインも幅320pxで作って問題ないんじゃないかという話

loop0429 — Wed, 15 Feb 2012 01:00:42 +0000

手順はこう。

新規ドキュメントで320*480（高さは好きな値で）のドキュメントを作成する
すべての素材を大きめに準備して、Photoshopならスマートオブジェクト、Fireworksならシンボルに変換する
好きなようにデザインする（それぞれのツール内でアイコンなどを作るなら、シェイプ・ベクトルで素材を作る）
完成したら、画像解像度を2倍にする（大きい時の情報が残ってるのでボケたりしない）
画像を書き出してコーディング

今まで640pxで作ってて、偶数の値になるようにがんばって計算してたのがバカらしかった。
marginとかの余白の値もそのままでいけるのでオススメ。

Links for 20120213 [はてなブックマーク]

Tue, 14 Feb 2012 00:00:00 PST

Fireworkでモダンなストライプを作ってみました！ | webdesigner's log…

Fireworkでモダンなストライプを作ってみました！ | webdesigner's log…
お久しぶりです。今回はFireworkでモダン風ストライプを作ってみた！完成はこんな感じになります。どうでしょう？ランダムな色のストライプがスタイリッシュなイメージに見えませんか？それでは作り方です！まずグラデーションツールで「しわ」を適応するグラデーションツールで「しわ」を適応します。色は特に気にしなくても大丈夫ですグラデーションを水平方向にかける次にグラデーションを水平方向にかけま...

sw_lucchini fireworks ストライプの作り方。ちなみにFirework「s」
画像を使わないでCSS3のグラデーションでスマートフォンサイトの背景パターンをつくろう | HTML5でサイトをつくろう

画像を使わないでCSS3のグラデーションでスマートフォンサイトの背景パターンをつくろう | HTML5でサイトをつくろう
スマートフォンサイトを制作する上で重要となる「最適化」。 PCサイトとは違い、外出先や移動中などに見られる機会が多いスマートフォンサイトでは、できるだけ容量を抑えて通信速度を上げ、サクサクと閲覧できることがもとめられます。スマートフォンサイト最適化のためには様々な方法がありますが、できるだけ使用する画像の容量を減らすこともその一つです。今回は、スマートフォンサイト制作に便利な、CSS3のグラデ...

sw_lucchini css3 これは使える
HTML5演出に最適な画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog

HTML5演出に最適な画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示さ...

sw_lucchini javascript 画像読み込み管理

jQueryを使ってyoutubeの特定ユーザーのチャンネルをリスト化してみる

loop0429 — Thu, 09 Feb 2012 01:00:55 +0000

先日、サイトにyoutubeのチャンネルのリストを埋め込みたいという要望がありました。
YouTubeのAPIを調べてみるとウィジェットがないようなので、サクっと作ることにしました。
調べて触ってみるとなかなか面白かったので、サンプルの一つとしてデモを作ってみました。

特定ユーザーのフィードを取得するには

ひとまずYouTube Data APIのドキュメントを見てみます。
すると、特定のユーザーがアップロードした動画にはこのように書いてあります。

http://gdata.youtube.com/feeds/api/users/username/uploads

「username」を変えてねとのことなので、ここではAppleのチャンネルを取得することにしましょうか。

http://gdata.youtube.com/feeds/api/users/Apple/uploads

JSON形式でフィードを取得

JavaScriptではJSON形式でしかフィードを取得できないようなので、jQueryのgetJSONを使って取得します。

logを見てみるとデータはこんな感じになってる。

entryに動画の情報があるようなので、ここから必要な項目のみ取り出していきます。

必要な項目を抜き出してみる

今回使いたいデータはこんなところ。

動画の投稿者
サムネイル画像
リンク先
タイトル
動画の時間
再生回数

それぞれに該当するのが

entry.author[0].name.$t
entry.media$group.media$thumbnail[2].url
entry.media$group.media$player[0].url
entry.media$group.media$title.$t
entry.media$group.yt$duration.seconds
entry.yt$statistics.viewCount

なのでループして1件ずつ抜き出していきます。

$(document).ready(function() {
	var url = "http://gdata.youtube.com/feeds/api/users/Apple/uploads";
	$.getJSON(url, { alt:'json' }, function(json) {
		var entry = json.feed.entry; //entryにアクセスしやすく
		var str = '';

		for (var i = 0; i < entry.length; i++) {
			var media = entry[i].media$group; //media$groupにアクセスしやすく

			var author = entry[i].author[0].name.$t; //動画投稿者
			var src = media.media$thumbnail[2].url; //小さいサムネイル画像
			var href = media.media$player[0].url; //リンク先
			var title = media.media$title.$t; //タイトル
			var duration = media.yt$duration.seconds; //動画の時間
			var viewCount = entry[i].yt$statistics.viewCount; //再生回数

			//liタグ作成
			str += '';
			str += '' + duration + '';
			str += '' + title + '' + author + '再生回数：' + viewCount + '回';
			str += '';
		}

		$('ul#playList').append(str);
	});
});

html

見た目を整える-JavaScript

ひとまず抜き出したけど、時間が秒になってたり再生回数にコンマがなかったりなので、この辺を整えるために関数を作ったり。
説明は省略。

$(document).ready(function() {
	var url = "http://gdata.youtube.com/feeds/api/users/Apple/uploads";
	$.getJSON(url, { alt:'json' }, function(json) {
		var entry = json.feed.entry; //entryにアクセスしやすく
		var str = '';

		for (var i = 0; i < entry.length; i++) {
			var media = entry[i].media$group; //media$groupにアクセスしやすく

			var author = entry[i].author[0].name.$t; //動画投稿者
			var src = media.media$thumbnail[2].url; //120×90の小さいサムネイル画像
			var href = media.media$player[0].url; //リンク先
			var title = media.media$title.$t; //タイトル
			var duration = formatDuration(media.yt$duration.seconds); //動画の時間
			var viewCount = comma(entry[i].yt$statistics.viewCount); //再生回数

			//liタグ作成
			str += '';
			str += '' + duration + '';
			str += '' + title + '' + author + '再生回数：' + viewCount + '回';
			str += '';
		}

		$('ul#playList').append(str);
	});
});

//時間の表記
function formatDuration(duration) {
	var hour = Math.floor(duration / 3600); //時
	var minute = Math.floor(duration / 60) % 60; //分
	var second = duration % 60; //秒

	if (hour) {
		return hour.toString() + ':' + zero(minute) + ':' + zero(second);
	} else {
		return minute.toString() + ':' + zero(second);
	}
}

//10未満なら先頭に0をつける
function zero(num) {
	if (num < 10) {
		return '0' + num.toString();
	} else {
		return num.toString();
	}
}

//3桁ごとにカンマをつける
function comma(num) {
	var str = new String(num).replace(/,/g, "");
	while(str != (str = str.replace(/^(-?\d+)(\d{3})/, "$1,$2")))
	return str;
}

見た目を整える-CSS

あとはCSSで見た目を整えるだけです。
気をつけるところといえば、サムネイル画像が4:3になっており、16:9の動画には上下に黒みが追加されているので、この黒い部分をoverflow:hiddenで隠してやることです。

画像の幅が120pxなので、これを基準に16:9の高さを算出します。
120を16で割ってやると120px / 16 = 7.5なので、黒みを除いた画像の高さは9 × 7.5 = 67.5px（切り上げて68pxとする）になります。
ひとまずdiv.leftのheightが68pxに決まりました。

div.left {
	width: 120px; height: 68px;
	overflow: hidden;
}

あとは画像を黒み分だけ上に持ちあげてやるだけ。
元の画像の高さが90pxなので、(90px - 68px) / 2 = 11pxが黒み分の高さになります。
なので11pxほどネガティブマージンで持ちあげてやります。

img.thumb  {
	margin-top: -11px;
}

あとはお好きなように。

* {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
}

ul {
	width: 320px;
	list-style: none;
}

li {
	position: relative;
	padding: 3px;
	border-bottom: 1px solid #EAEAEA;
}

a {text-decoration: none;}

div.left {
	position: relative;
	width: 120px; height: 68px;
	overflow: hidden;
}

img.thumb  {
	margin-top: -11px;
	vertical-align: bottom;
}

.duration {
	position: absolute;
	right: 3px; bottom: 3px;
	padding: 3px 5px;
	background: rgba(0,0,0,.5);
	color: #FFF;
	font-size: 10px;
	font-weight: bold;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

div.right {
	position: absolute;
	width: 188px;
	right: 0; top: 0;
	color: #242424;
	font-size: 12px;
}

div.right span {display: block;}

span.author,
span.viewCount {
	text-align: right;
}

youtubeデモ - jsdo.it - share JavaScript, HTML5 and CSS

今回のデモはAPIのほんの一部でドキュメントを見てみると色々とおもしろそうなことができそうな気がします。
機会があれば、見て・触って・楽しいものを作ってみてください。

FlexのVideoPlayerコンポーネントでFlash Media Serverに置いてるflvファイルを再生するには

loop0429 — Fri, 03 Feb 2012 01:00:29 +0000

FlexのVideoPlayerコンポーネントとは、Flashで言うところのFLVPlaybackに当たるものなんですが、プロパティのsourceに

「rtmp://serverName/vod/fileName.flv」

みたいに記述するとFLVPlaybackなら再生されて、VideoPlayerでは再生されませんでした。
ローカルに置いてあるflvファイルは再生できるのになんでだ？と思って調べてみると、

「rtmp://serverName/vod/fileName」

のように、拡張子「flv」を除いた形で記述するとうまく再生されました。
なんだか紛らわしいのでちゃんと統一してほしいですね。

ちなみにこのVideoPlayer、Androidで再生してみてもフルスクリーン対応などなかなかの優れものなので、UIも統一されますしAndroidならVideoタグの代わりに使ってみてもいいかもしれませんね。

参考：Adobe Flash Media Server 4.0 * オンデマンドメディアのストリーミング

iScroll.jsで動的に要素を追加したときにスクロールしない場合の解決法

loop0429 — Fri, 27 Jan 2012 01:00:36 +0000

スマートフォン対応ページを作るときにjQuery Mobileの固定headerとfooterのフワってなるのがいやだ！って人は、iScroll 4を使うといいです。
サンプルを見てみるとちゃんと動きますが、このli要素は動的に書き換えたいなぁってことが多々あると思います。

例えばこんな感じに


iScroll

するとDOMを読み終えたはいいものの、まだ画像が完全にロードされてないせいで、高さがわからずにスクロールできる範囲が中途半端な状態になってしまいます。

そんな場合はiScroll.jsをこのように修正してやるといいみたいです。

//省略
_start: function (e) {
        var that = this,
        point = hasTouch ? e.touches[0] : e,
        matrix, x, y,
        c1, c2;

        that.refresh(); //318行目追加

        if (!that.enabled) return;
//省略

参考： [スマートフォン]ヘッダーを固定配置にするJavaScript/ – サイブリッジラボ

例では、画像を追加してるだけなのでli要素のheightにあらかじめ画像の高さ分を指定しておけば問題ないといえばないんですが、本来ならもっと可変的だと思うので、上記のようにiScroll.jsを修正しておく必要があると思います。
これだけ覚えておけばjQueryにも頼ることなくスマートフォン対応ページも作れそうですね。

Windows XPを初期化したので厳選してインストールしたソフトウェアとか拡張機能とかまとめ

loop0429 — Wed, 18 Jan 2012 01:00:11 +0000

ここのところ会社のパソコンを二度も初期化することがあったので、もうメモ取らないようにまとめ。
上から優先度が高い。会社でNOが出てるソフトは含まない。

ソフトフェア

Windows XP Service Pack 3（その他、Windows Updateをすべて行う。IEは6のままにしておいた。）
Adobe Creative Suite（Adobe製品どれか立ち上げて、「ヘルプ」→「アップデート」でアップデートを行う）
Google Chrome（メインブラウザ）
Firefox（Google Chromeの印刷が不満なので）
お好きなウィルス対策ソフト
Google 日本語入力（IME）
Microsoft OfficeまたはOpenOfficeまたは各Microsoft Office製品Viewer
プリンタのドライバ
秀丸とかTera Padなどのテキストエディタ
フォントマスターとかフォントインストーラーSAKURAなどのフォント管理ソフト
XAMPP（テスト環境）
FlashDevelop（Flash開発）
msysgit（Git）
DIVX コーデック（コーデックのみインストール）
GOM PLAYER（FLV再生用プレイヤー）
CCleaner（パソコンのお掃除。ひと通りインストールしたらやっておく。）
Auslogics Disk Defrag（デフラグツール。ひと通りインストールしたらやっておく。）

Adobe Extension

詳しい機能は各ページで調べてください。

Progression（Flash）
Zen Coding（Dreamweaver）
CSS3 Setwithprefix（Dreamweaver）
HTML5 Tag Suites（Dreamweaver）
CSS Selectors Codehint（Dreamweaver）
Dreamweaver CS4版/CS5版スペシャルコードヒント（Dreamweaverのコードヒント）
コードビューを　Sublime Textエディタ風な黒い画面になるようコードカラーリングを変更してみた（Dreamweaverのカラーリング）
Photoshopのアクションとかグラデーションとかブラシなど

Google Chrome拡張機能

五十音順。

AutoPatchWork（ページ先読み）
Color Pick（ページ内の色を吸う）
Create Link（ページのタイトル・URLをクリップボードにコピー）
Drag & Drop Search（選択したテキストをドラッグアンドドロップで検索）
Facebook for Chrome（Facebookチラ見）
Google Mail Checker（Gmailの通知）
Google Reader – Colorful List View for Greasemonkey（Googleリーダーをサイト別に色分け）
Google Reader Notifier（Googleリーダーの未読アイテム数表示）
Instapape-R（リンク先を右クリックでInstapaperへ。自作したやつ。）
Reeder for Chrome（Googleリーダーの見た目をiPhone・iPadアプリのReeder風に）
RSS Subscription Extension（アドレスバーへRSS登録ボタンを追加）
SBMカウンタ（被ブックマーク数を表示）
Screen Capture（スクリーンショットを撮る）
Silver Bird（Twitterチラ見）
SpellBook – ブックマークレットを右クリックから実行（コンテキストメニューからブックマークレット実行）
Web Developer（ページのチェック）
Window Resizer（ウィンドウサイズの変更。1280×1024が好きなので。）
はてなブックマーク GoogleChrome 拡張（はてブに追加。）

「Web開発してるのにこれを入れてないとか信じられん！」なんてソフトウェア・拡張機能などあれば教えて下さい。

iPadを充電しても電池残量が増えなくなった場合

loop0429 — Wed, 11 Jan 2012 06:00:37 +0000

iPad初代を買ってこれまでに3回ほど同じ現象に見舞われて、ようやくコレって解決法がわかったので書いておく。

今までちゃんと充電できたはずなのに、何時間充電しても充電始めた時と電池残量が変わらない！再起動してもダメ！って時は、一度iPadをPCにUSBで接続してみる。
その後は普通にACアダプターで充電できるようになってるはず。

一昨年の寒い季節になった時は、２日くらい充電できずにもう電池が逝ったのかと思って、なんとなく会社に持って行って充電してみたらできたけど、近々の2回はこれですんなり直った。

といってもこれで確実に直るかはわからないので、Appleに問い合わせてみる前に一度試してみるといいかも。

スマートフォン向けにHTML5のvideoタグを使ってみたのでまとめておく

loop0429 — Fri, 06 Jan 2012 01:00:22 +0000

HTML5の目玉機能の一つvideoタグ。
videoタグを使えば、Flashを使わずに簡単に動画を埋め込むことができますが、一方でブラウザにより動画規格が統一されておらず、今後の標準がどうなるかもわかっていません。

が、とりあえず今回はアプリのWebView（iPhoneは厳密にいうとUIWebViewですが）を使って、ページを表示させることになったので、WebKitのことだけを意識したまとめとなっています。
Androidのすべてのブラウザで対応を考えている方も、基本的な部分は共通して使えると思うので、是非参考にしてみてください。

属性関係

とりあえずvideoタグを使って動画を埋め込んでみる

非常に簡単です。
本来ならvideoタグ非対応ブラウザや別フォーマットの動画を考慮した書き方も必要ですが、今回はvideoタグに対応していること・Webkitを前提として考えているのでmp4のみでいきます。

サムネイル画像を設定

iPhoneなら動画の頭の画を自動で表示してくれますが、Androidでは端末の標準なビデオアイコンが表示されます。
なので、サムネイル用の画像を準備してposter属性に画像を設定する必要があります。

preload（動画の自動読み込み）にはnoneを

スマートフォンは非力なため、動画を自動読み込みしているとページのスクロールがカクついたり、ストレスが溜まる原因となります。
デフォルトではpreload属性が「auto」（自動読み込みあり）になっているので「none」（自動読み込みなし）を設定する必要があります。

このままでは再生できない端末があるみたいなので

このままではAndroid端末でvideoタグをタップしても再生してくれない端末があるようです。
なので、onclick属性で自身がタップされた時に再生するように設定する必要があります。

iPadなどのタブレット端末向けにコントローラーを表示

通常、スマートフォンでは、再生時に動画が自動でフルスクリーン表示になり、シークバーや一時停止ボタンなどのコントローラーが表示されます。
しかし、iPadなどのタブレット端末では、フルスクリーン表示にならずそのページ内で動画が再生されることになります。
フルスクリーンで見たい場合やシークバーなど再生のコントロールがしたい場合もあると思うので、controls属性を設定しておきましょう。

ちなみに最近のAndroid端末ではcontrols属性を設定していると、自動でフルスクリーン表示で動画が再生される割には、サムネイル画像にコントローラーが表示されたりと機種によって仕様が異なっています。
「ユーザーエージェントによるスマートフォンの端末判別方法について」の情報によると、スマートフォンのエージェントには「android」「mobile」が含まれているのに対して、タブレット端末のエージェントは「android」のみなので、そこで振り分けてやる手もあるかと思います。

CSS関係

iPhoneでサムネイル画像の左右に黒みが表示される

これはvideoタグのwidth・heightに値を指定すると消すことができます。
動画と同じ表示サイズに合わせてあげましょう。

video {
	width: 320px;
	height: 180px;
}

videoタグはimgタグと同じstyleしか使えない？

やってみようと思って、できたできなかったこんなこと。

borderを指定すると枠線がつく
widthを指定してmargin: 0 auto;しても中央寄せにならない
ブロック要素（div・h1・p・ulなど）で囲んで、text-align:centerを指定すると中央揃えになる

imgタグと同じ挙動ですね。サムネイル画像にstyleを指定してると考えるとわかりやすいかもしれませんね。

動画変換関係

基本的にiPhone・iPadはH.264で書き出したmp4ファイルでファイルが破損さえしてなければ、なんでもvideoタグで埋め込んで再生できますが、Androidでは変換の仕方によって、再生できる端末・できない端末が出てきます。
そんなときの対処法です。

mp4boxを使うといいらしい

Androidアプリでビデオ再生をしたときのエラー – Android開発覚書：Android Cafe
やってみて再生できない端末があったけどタダでやるならこの方法がいいみたいです。
アプリのビデオ再生用だといいけど、videoタグじゃダメってことですかね？

RealPlayer Converterで変換する

会社でAndroidアプリ用に動画変換するときには「RealPlayer Converter」を使ってます。
これで動画が見れないと問い合わせはきてないので確実でしょう。

変換の仕方は簡単でRealPlayer Converterへドラッグ・アンド・ドロップでファイルを追加して、フォーマットをApple iPhoneにするだけ。細かい書き出しの設定は「詳細」より行なってください。
書き出されたファイルの拡張子は「m4v」になりますが、そのまま使っても「mp4」に拡張子を書き換えてしまったも構いません。
昔はタダだったみたい（？）ですが、今はアップグレード版じゃないと変換できないみたいです。

あまり動画変換に関しては詳しくないので、いい方法・ソフトがあれば教えて下さい。

AndroidだとWebViewに載せたときにvideoタグの動画が再生されない

html5webviewを使いましょう

iPhoneではUIWebViewに載せてもちゃんと動画は再生されますが、AndroidのWebViewでは動画が再生されません。
これは今後バージョンアップで改善されるかもしれませんが、とりあえずはhtml5webviewを使えばなんとかなるようです。（今回はHTML・CSS・JS部分しかやってないのでこの辺は詳しくない。）

html5webview – An Android WebView Wrapper to Enable Quick HTML5 Setup – Google Project Hosting

長々と書いてしまいましたが、html5の標準フォーマットが決まり、スマートフォン全体のバージョンも上がってくれば、もっとシンプルになると思います。
許させるならyoutubeに動画をアップして埋め込むのが一番ラクな方法だと思うので、今はその辺も検討しながらvideoタグと付き合っていきましょう。

CSS3時代のナビゲーションの作り方-スマートフォン対応編

loop0429 — Fri, 30 Dec 2011 07:00:17 +0000

今回は前回の「CSS3時代のナビゲーションの作り方」で作ったナビゲーションをスマートフォンに対応させていきます。

Viewportの追加

ひとまず前回のページをiPhoneで表示させてみるとこんな風に見えます。

これだと小さくて目標物をタップするためにわざわざピンチアウト（拡大）する必要があります。
ページ遷移のたび、ユーザーにそんなご足労かけさせるわけにはいかないので、Viewportで端末の画面幅を設定します。

大体、これが鉄板ですかね。
詳しく知りたい方は「Viewport [iPhone生活]」がとても参考になります。

ひとまずこれで端末の幅の範囲内でコンテンツが縮小されずに表示されるようになりました。

しかし、このままではコンテンツが収まりきってないのでCSSを調整していきます。

CSSの調整

今回はスマートフォンの場合のみのスタイルを適応したいので、メディアクエリを使うことにします。

メディアクエリとは、普段HTMLでcssファイルを読み込む際にlink要素に書いているmedia属性を拡張したもので、スクリーンサイズや端末の解像度を指定してスタイルを振り分けることができるようになります。

こんなやつ

とっても詳しいことは「CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き」に任せるとして、「Hardboiled CSS3 Media Queries | Stuff & Nonsense」を参考に鉄板なやつを書いておきますか。

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* Styles */
}

でも、これはiPhoneが基準なのでAndroidだと端末のディスプレイの高さ(「max-device-width: 480px」にあたる部分)がバラバラなおかげで端末を横向きにした場合にスタイルが効いてないことが多いです。
横向きでも合わせたい場合はメディアクエリではなく、エージェントでページなりcssファイルを振り分けたほうが無難でしょう。

なので、今回は端末が縦向きの状態且つ幅480px以内のスマートフォンを対象ということを前提に話をすすめます。

ひとまずは描画範囲におさまるように調整しましょう。

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
	ul {
		width: 100%;
		border: none;
	}
	ul li {
		width: 20%;
		background: url(../img/line.png) no-repeat right top; /* 2px（黒1px・グレー1px）のライン */
		border: none;
		font-size: 14px;
	}
}

widthで端末の幅いっぱい100%を指定して、li要素は項目が5つあるので100%を5で割って1つずつの幅を20%に指定します。
borderがあるとwidthとは別に余計なスペースをとってしまうので、ボーダーは背景画像にして100%ぴったり収まるようにしてます。

一番右のラインは邪魔なのでCSS3で使える:last-child擬似セレクタを使って消えてもらいましょう。

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
	/* 省略 */
	ul li:last-child {
		background: none;
	}
}

これでとりあえず見た目はできてますが、タップ（a:hoverにあたる）した時にラインが消えてしまいます。

原因としては、言葉で説明するよりも以下の図を見てもらったほうが早いでしょう。

今までならこれだけのために文字をspanで囲んだり、色々と小細工をしていたかもしれませんが、今後はそんな心配はありません。
これからはbackgroundが複数指定できるようになります。そう、CSS3ならね。

ということで、backgroundを複数指定する方法は簡単。「,」で区切るだけです。

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
	/* 省略 */
	ul li a:hover {
		background: url(../img/line.png) right top no-repeat,
			     -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(50%,#030303), color-stop(51%,#1c1c1c), color-stop(100%,#5a5a5a)) left top repeat-x;
			     /* ライン,グラデーション（この順番じゃないとラインが表示されない） */
	}
	ul li:last-child a:hover {
		/* 一番右はタップしてもラインが出ないように */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(50%,#030303), color-stop(51%,#1c1c1c), color-stop(100%,#5a5a5a));
	}
}

これでタップをした時もラインが表示されるようになり、完成です。
デモページ（スマートフォンのディスプレイの幅が480px以内を対象且つWebkitを搭載しているブラウザ）

前回のdisplyの値「box」に加え、今回はViewportやMedia Queries(メディアクエリ)、backgroundに複数指定ができることがわかりました。
今回のナビゲーションは一つの例であって、様々な場面で使うことがあることでしょう。
現状でCSS3のプロパティ・値まで細かく覚えておく必要もないですが、いざCSS3を使う時になったときにどんなことができるか知ってるか知らないのでは、HTMLのマークアップ時点で大きな差がつくことでしょう。

また、「自分はデザインメインだから関係ない」って人には余計に知っておいてもらいたいです。
今まで苦労かけそうだなぁってデザインがCSS3なら簡単にできる可能性があることを。それによりデザインに妥協をする必要がなくなることを。

CSS3時代のナビゲーションの作り方

loop0429 — Mon, 26 Dec 2011 01:00:33 +0000

ここ最近スマートフォン向けのHTMLコーディング（CSS・JavaScript含む）をすることが途端に増えました。
CSS3で追加されたプロパティについては結構知ってる人は多いと思うけど、今までの使用していたプロパティに新たに追加された「値」についてはあまり知ってない人が多いように思います。

そこで今回はCSS3で新たに追加された「プロパティ・値」を使って、すぐに使える（少なくともスマートフォン向けページでは）ナビゲーションの作り方を紹介します。
※Webkit搭載のブラウザを対象としています。AndroidのFirefoxやOperaなどWebkitを搭載してないブラウザやHTML5未満のブラウザに対応してません。必要に応じて個別に対応してください。

今回はこんな感じのありきたりなナビゲーションを作ることにします。

HTML5でマークアップ

どうせなんでHTML5でマークアップします。




餃子
カレー
寿司
焼肉
ラーメン

CSSの記述

nav要素

nav要素は背景のグラデーションやドロップシャドウなどブラウザの幅いっぱい伸びる部分になります。
デザインしたグラデーションをCSS3で書き出すには「Ultimate CSS Gradient Generator – ColorZilla.com」が大変便利です。

* {
	margin: 0; padding: 0;
}
nav {
	height: 54px;
	border-bottom: 1px solid #FFF;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a5a5a), color-stop(50%,#1c1c1c), color-stop(51%,#030303), color-stop(100%,#000000)); /* グラデーション */
	-webkit-box-shadow: 0 0 8px rgba(0,0,0,.6); /* ドロップシャドウ */
}

ここまでのイメージ

ul要素

ul要素でセンタリング、そしてCSS3でdisplayプロパティに新たに追加された値「box」を指定しておきます。
「box」が指定された要素内のブロック要素は横並びに自動的になります。
なので、今までナビゲーションを作るときにli要素に指定していた、float: leftやdisplay: inlineなど使う必要がありません。

ul {
	margin: 0 auto;
	width: 800px;
	display: -webkit-box; /* 横並び */
	border-right: 1px solid #5a5a5a;
	border-left: 1px solid #000;
	list-style: none;
}

ここまでのイメージ

li要素

li要素は主に文字の装飾などします。

ul li {
	width: 158px; height: 100%;
	border-right: 1px solid #000;
	border-left: 1px solid #5a5a5a;
	font-size: 24px;
	line-height: 54px;
	text-align: center;
	text-shadow: 0 -1px 0 #000; /* 文字にドロップシャドウ */
}
ul li a {
	display: block;
	color: #FFF;
	text-decoration: none;
}
ul li a:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(50%,#030303), color-stop(51%,#1c1c1c), color-stop(100%,#5a5a5a)); /* グラデーション */
}

完成イメージ

実際に見てみる（ChromeやSafariなどWebkit搭載ブラウザのみ）

次回はスマートフォン向けに対応するべく、メディアクエリの使い方をふまえながら、解説していこうと思います。