2012年4月24日火曜日

CSSのfont指定時のline-height #fb

CSSでfontでまとめて指定するときのline-heightの書き方ですが、
ちょっとはまったのでメモ。

始め、順番に並べればいいと思っていたので以下のように書いていました。
body {font:bold 20px 200% sans-serif;}

空白で区切ってサイズの後に記述していたのですが、どうも反映されない。。。
それもそのはず、font-size/line-heightとスラッシュで区切るようです。
いかが正解。

body {font:bold 20px/200% sans-serif;}

スラッシュで区切る形式は今まで出会っていなかったのでハマりました。。

一度経験するとどうってことないんですけどね。
ということで、メモ。

2012年4月23日月曜日

Booki.shに津田マガepubをアップする場合、気をつけること

先日紹介したクラウド型のepubリーダーサービスBooki.sh。
端末を気にせずに、続きから読めるのは非常に快適です。

僕は主に津田さんのメルマガ-津田大介の【メディアの現場】を読んでいるのですが、
なぜか2ファイル以上、津田マガがアップできない。
例えば今Vol.30を読んでいますが、その状態で前の号の29はアップできません。
仕方なく一旦読んだら削除してアップという対応をしていましたが、なんだか
面倒です。読みきれなかった場合でもとりあえず次の号をアップしておきたいし。

で、なぜアップできないのか調査していたのですが、どうやら津田マガはepubの
ユニークIDが毎号同じようで、Booki.shはユニークIDが同じだから同じファイルと
みなすためにアップができない様子。
同じファイルを幾つもアップしても無駄なのでシステム的には確かに間違っては
いない気もするけど、他のepubリーダーだとそんなこともないし、、、
その辺の詳しい仕様はわからないですが、どっちが正しい動きなんでしょうか?

ということで、ユニークIDを修正してepubを作成し直します。
手順は以下のとおり。

��.epubはzipで圧縮されているので、拡張子をepubからzipに変更
��.zip内のOEBPSフォルダ内のcontent.opfのdc:creatorタグを以下のように変更
<dc:identifier id="BookId">tsudamag20120411_vol29</dc:identifier>

  例としてVol.29の場合です。一意なIDになるようにしないといけないと思いますが、
  とりあえずこれでいけるんじゃないでしょうか。。
��.同じフォルダのtoc.ncxのmeta name="dtb:uid"タグ内のcontentを上のIDと同じに変更
��.変更したファイルを差し替えてzip圧縮後、拡張子をepubに変更

これでBooki.shに無事アップロードできるようになりました。
もし困っている方は試してみてください。

2012年4月19日木曜日

[javascript] jqueryを使って文字列をふんわり点滅

jqueryを使用してふわっと文字を点滅させる方法です。

$(function(){
setInterval(function(){
$('#id').fadeOut(500,function(){$(this).fadeIn(500)});
},1500);
});


fadeOutで500ミリ秒で徐々に文字が消えます。
その後fadeInが呼ばれて500ミリ秒で文字が出てきます。
これを1500ミリ秒ごとに実行しているのが、setIntervalです。

時間を適当に変更して使用してみてください。

[javascript] jQuery.ajaxで同期通信

ajaxといえば非同期通信ですが、単にデータ取得するだけでも便利なので同期通信でも
使用してみました。
jQuery.ajaxで同期通信する場合のメモです。

そもそも最初は非同期とか意識してなくて、以下のようにやろうとしてました。

var hoge = 0;
$.getJSON("json.js", {"pram1":"a","param2":"b"}, function(data,status){
hoge = data.key1;
});


hogeを外部で使用しようとしても値が入っていない。
変数スコープの問題もあるのですが、そもそも非同期通信なのでこういう書き方自体
まずいということが分わかりました。

なので、jQuery.ajaxを使用して同期通信に変更。

var retText = $.ajax({url: "json.js", data: {"param":"1", ,"param2":"b"}, async: false});


「async: false」で同期通信になります。
jQuery.ajaxはXMLHttpRequestを返します。
retText.responseTextにはjson形式のテキストが入っているのですがjsonと理解されずにそのまま
テキストなので、定義し直します。

eval("var retData=" + retText.responseText);


これでjsonとして認識されるので、retData.key1とかで使用できます。

2012年4月16日月曜日

クラウド型電子書籍ライブラリ Booki.sh

最近、メルマガなどでepub形式の電子書籍を読むことが増えました。
epubリーダーで一番有名なのはやっぱりiBookです。
iPhone、iPadなどのフリーアプリで、pdf,epubなどに対応しています。
既読位置を同期してくれて、これがかなり便利だったりします。

例えば、家ではiPadで途中まで、外出時にはiPhoneで続きからなどという
使い方ができます。

ただ、PCとは同期できないんですよね。
僕の場合、日中の殆どでPCを使用しているので、PCで読めて更に同期
できるようなものを探していました。

アプリではさすがに見つからず、以前はMagicScrollというクラウド型の
サービスを使っていました。
http://www.magicscroll.net

epubファイルをアップロードして、ブラウザから閲覧します。
ただ、一度リニューアルされてからiPhoneでうまく動作しなくなったんですよね。
それで使わなくなってしまいました。


それから数ヶ月。
とあるページでBooki.shというサイトを見つけました。
https://booki.sh/

これもMagicScrollと同じようにepubファイルをアップしてブラウザから閲覧します。
他にもWebで電子書籍を購入することもできるようですが、、、日本語の書籍は
あまりなさそうです。

ここはiPhone/iPadでもばっちり動作。当然PCでも動作します。
さらに、一度ダウンロードするとオフラインでも読めるようです。
実際に試したことはないのですが、なかなか良くできたサイトですね。
HTML5とかで作ってるのかな?

安定もしているようで、特に問題があったことはありません。
あと、肝心の既読位置の同期もバッチリです。
PCで途中まで読んで、iPhoneで開くとPCで読んだ既読位置までページを移動するかどうか
聞いてきます。
「GO THERE」(だったと思う)ボタンクリックで既読位置まで移動します。

epubを複数のデバイスで読むことがある方にはオススメです!