ひまつぶし雑記帖

CSSとperlの小ネタめも

2013/5/8 [11:22:31] (水) 天気

電子書籍がらみ。HTMLとCSSでどうやって表示・表現すればいいんだろうと調べたことをメモしておこう。

【横書き】

1M(1メガバイトは)は、2の20乗バイト(220 = 1048576バイト)です。


この文字の右肩に小さくついてる「20」ってどうすんだ、画像にしてくれなきゃ無理だろ、と思わず担当者にメールしようとして思いとどまった。調べた。

右肩に小さくつけたい文字をspanタグで囲み、spanタグにスタイル指定

フォントサイズを小さくして、下側のpaddingを0にして、表示の基準ラインをトップにする
(padding-bottom は指定しなくて大丈夫っぽいけど…どうして指定してあったんだろう)


【縦書き】

縦中横をperlで一括処理する。

単純に、すべての半角アルファベットに縦中横のタグをつけるのは簡単な正規表現。
このあたりに →  『ルビのため perl unicode正規表現』

縦書きなのにやたら英単語が混じると、単語の長さによって縦中横になったりならなかったり、とても読みにくい。ということで、アルファベットの縦中横について

・アルファベット一文字は縦中横にする
・英単語は縦中横にしない

英単語をとりあえず別形式にエンコードして保護しておく。
「tab+アルファベットの10進数」
タブだったら原稿に混じり込む可能性は少ない。タブ+数字というのはまず出てこないだろう。

一文字のアルファベットに縦中横を定義したクラスを指定。

タブ+10進数にしておいたアルファベットの英単語を元に戻す

(上記、正規表現のところをいじれば、アルファベット2文字までは縦中横にする、3文字以上の単語はそのままにする、なんてことも出来る。でも、中途半端な設定は読みにくくなるだけ)

ていうか、そもそも、アルファベットの英単語や数字が入り乱れる「実用書」なんて縦書きである必要は感じない。底本が縦書きであっても、電書にする時には横書きで十分。縦書きの底本は全角半角アルファベットがその時々で別々。正直とても読みにくい。小説でもないのになんでまた縦書きにしたんだろう。謎だ。

»電子書籍制作代行についてはこちら

WORD文書をEPUB3に変換

2013/4/5 [11:47:36] (金) 天気

文書ファイルを電子書籍のEPUB3ファイルにコンバートするケース。元ネタになる文書は、サイト用に作られたHTML文書だけではなくて、当然WORD文書もある。

って、わたしはプログラマではないので、アプリが出力するバイナリデータを直接触ってごにょごにょするのは無理。

「テキストデータに変換したものをもらえば対応できますのでゼヒゼヒ」と営業してきたけど、先方はライターから上がってくるWORD文書をそのままEPUB3にして欲しいに決まってるしなあ。と。

調べてみたら、最新バージョンのWORDで保存する、拡張子が .docx の文書はzipで固められたものらしい。unzipで解凍したものが以下。
image 
xmlで保存されていて吃驚。
全部きちんと調べてないんだけど、どうやら「document.xml」が本文。これならAWSのAPIと同じ。XMLなら中身を見ることができるので、ざっくり文章を抽出することはできた。
perl の定番、 XML::Simple と Data::Dumper でデータを眺めると、位置情報やフォントサイズなどの属性も入ってるっぽい。画像も同様。WORD文書に見出しタイトルなどがついていれば、それを目次に登録してEPUB3文書にできる。

とはいえ、やはり検索してみるとすでにWORD文書をEPUB電子書籍に変換=コンバートするアプリは無料有料があるし、一太郎のEPUB3出力エンジンは定評のあるFUSEeなのでWORD文書を一太郎に読み込んでコンバートというやりかたもある。たぶん凝ったレイアウトなどもうまく再現できる、はず。

わたしが作るとしたら、大量にあるWORD文書をひとつひとつソフトに読み込んで、ひとつひとつ出力していく手作業よりも、WORD文書が入ってるフォルダをボトっとドロップしたらそれっぽいEPUB3文書にする。という大雑把なシロモノになるんだろうなあ。
スクリプトは手順どおりのことをさせるだけなので、面倒くさいけど難しいことはない。必要に迫られたら作ってみよう(本当だったらXMLの公式の仕様書を見ないとメンテができないけど。ね)

XMLってこんなところに使われてたのか。



[04/05 20:28:06] 追記。
ということで  『かんたん電子書籍作成』  に組み込んでみた。
ワードのファイル(.docxなので2010以降かな)をそのままアップロードできるように。ただ、レイアウトやフォントなどのデザイン情報は無視します。挿絵があったら、ダミーの画像を一枚差し込むようにしてみました。
ちなみに、ルビはワードそのまま大丈夫。縦中横もそれっぽいところは自動で指定しています。
(つむぎゆう・『わたし、おねえちゃんの犬になる』より)
image 


[2014/02/14 14:25:34]
こちら、 『かんたんEPUB3作成easy_epub』  にもWORDの文書を流し込んでEPUB3にする機能を追加。縦書き・横書き、ルビ、縦中横はワードの情報を生かします。


いつも何かとふぁっくなMSだけど、XMLで保存はイカしてるぞ!

 

»電子書籍制作代行についてはこちら

ルビのため perl unicode正規表現

2013/2/22 [09:13:24] (金) 天気

EPUB3::かんたん電子書籍作成 http://books.doncha.net/epub/ では、テキストデータにルビや縦中横のHTMLタグを自動で振るためのオプションを用意してある(※ ページ中ほどにある [スクリーンショット、ルビや縦中横タグを挿入するにはこちら] のリンク)

そのための perl の正規表現メモ。

縦中横。
半角の、「!?」「!!」「?!」と、連続するアルファベット、連続する数字に span タグで縦中横のクラス tcy をつける。


ルビ。
「漢字(るび) 」と漢字に続いて半角のカッコに囲まれたひらがな・カタカナをルビとして ruby rt タグをつける。
※ WORDのルビつき文書をテキストで出力すると半角カッコの中にルビが入る


縦中横のタグはけっこうよく使う正規表現なのですんなり。でもルビのための漢字判定がちょっとわからずグーグル様。perlは5.8以降、ユニコードによる正規表現が使えるようになって、文字クラスを下記のように指定することができる。



ルビもこれを使って正規表現。でも、スクリプトでは、どこからルビなのか判断できない。東京都千代田区(ちよだく)と書いてあったら、「千代田区」ではなく「東京都千代田区」に「ちよだく」のルビがつく。「千代田区」にルビですよということで「東京都[#ルビ]千代田区(千代田区)」などとテキストにマークアップする必要がある。

「EPUB3::かんたん電子書籍作成」  のコンセプトは
「何も考えずにテキストを放り込んだら、それっぽい電子書籍ができる」

面倒っぽく感じる・小難しそうなことは極力排除したいので、Wikiやはてなで使われるような独自記法・方言マークアップは却下とした。
レイアウトデザインを作り込みたいということであれば(字下げや文字方向一部変更など)EPUB3ファイルを解凍して直接xhtmlに対してタグをつけて、CSSを作れば可能。「かんたん電子書籍作成」で作るHTMLとCSSは、こんなでいいのかというぐらい手抜きレベルに単純なHTMLなので、編集加工がしやすい元素材でもある。

HTMLタグのついたテキストデータで小説原稿などを保存管理するのは面倒なので、元原稿はプレーンな状態にしておきたい。間違えて元データを消してしまって、HTMLタグのついたデータしか残ってない!という場合に。

テキストデータからHTMLタグを除去する正規表現


»電子書籍制作代行についてはこちら

mixi graphの日記APIで写真つき投稿

2012/7/3 [11:31:06] (火) 天気

先日mixiの日記に投稿するスクリプトを作ったんだけど(「次はmixiのgraph APIから」 http://t2aki.doncha.net/?id=1339828183)これはとりあえず本文だけの投稿で、本文をjsonにしてリクエストしている。
でも、せっかくなので、写真付きの日記も投稿できるようにしてみた。

OAuthのやりとり、access_token や refresh_token の取得などは前回の記事と同じなので、ここでは省略。
perl の lwp を使って multipart/form-data をリクエストするところのメモ。
バウンダリや、文字のエスケープなど、いろいろ考えなきゃいけないことがあって、LWP::UserAgent と HTTP::Requestだけで自作するのはよくわからんなあ、と眺めたり検索すると HTTP::Request::Common というのを使うのが定番だと。さすがperl、欲しいものはちゃんとある。感謝。

てことで

例によってこんだけでOK。
content-type も access_token も、ここで指定するとちゃんと header に入っている。

ちょっとハマったのがPOSTの書き方。対象URLに実際にリクエストするのは、いろいろなケースがあってリクエストするものが違う。リクエストを生成するところとは別、実際に対象URLにリクエストするのは一カ所にした方がコードのメンテがしやすい。
でも、リクエストを生成しようと POST URL ... を入れるとこの時点で対象URLにリクエストしてしまう。
「LWP::UserAgent の post(...) メソッドは$ua->request(POST ...) への ショートカットとして存在しています。」
ということで、POSTと書くと飛んでいってしまう。
なので、
use HTTP::Request::Common qw(POST);
と、Common の POST を使うことを指定して、POSTと書いてもリクエスト生成だけですよ、ということに。
 
写真の枚数とか画像ファイルの存在チェックなどは、ここにつけたし。
perl最高っす!

 

»電子書籍制作代行についてはこちら

次はmixiのgraph APIから

2012/6/16 [15:29:43] (土) 天気

twitterは気楽なヨタネタ放言。少し長く書くときは、この雑記帖。facebookとmixiが絶賛放置となる。なので、この雑記帖の駄文たわごとをfacebookとmixiに投稿できればいいよな、ということでここんとこgraph APIというのをお試し中。
facebookは先日作ったので、今日はmixiの日記へmixi graph APIで投稿。

mixiの認証は facebookと同じOAuth2.0。くどく繰り返しておく(忘れっぽいんで)
一次情報はここ http://developer.mixi.co.jp/

 アプリ登録時に取得して使うことになるのが
 consumer key と consumer secret (と、自分で登録したアプリのURL)

 code を取得するために、consumer key をパラメータにぶら下げて指定URLにGETでリクエストする

 ユーザーはmixiの承認ページに。scopeのw_diary は日記への投稿権限
 ※facebookはrespone_typeというのは不要だったな

 2で問題なければ・承認されば、自分で登録したアプリにcodeを持ってリダイレクトしてくる
 URL?code=XXXXXXXXXXXXX

 codeを取得したら、次は access token と refresh token を取得するために以下をPOSTのボディに入れて指定URLにリクエスト(POST)する。
 ※lwp のパラメータ content-type に、application/x-www-form-urlencoded を指定。

 ※facebookはここもGETだった。

以上で、access token と refresh token が取得できる(twitterのOAuth1.0とかamazon の認証だと、こちらでパラメータを暗号化したりする必要があるので、2.0はラクチン、かも)
mixiとfacebookで違うのが。
facebookだと、access token が永続で使えるんだけど、mixiは有効期限が短い。その分、refresh token というのがある、らしい。

↓access token の有効期限が切れてるよ
↓refresh token を使って access token を取得しなおしてね

ということになる。refresh token の有効期限は、現状だと3か月+α?
セキュリティのためだろうけど明らかに2度手間。access token が使えるかどうか確認して、使えなかったらrefresh token を使って再取得。だったら、最初からaccess token は、refresh token を使って取得する。ということにした。手元に保存して使う refresh token が期限切れになったら、また手作業で設定しなおす。


 refresh token で access token を取得しなおす
 access tokenを取得したURLと同じURLに以下のパラメータを本文にしてPOSTする

 grant_type は refresh_token。これで access token を再取得する。

mixi日記への投稿
写真つきを multipart/form-data で投稿することも可能だけど、今回は、この雑記帖へリンクするので、本文だけでいい。
lwpの content-typeパラメータを application/jsonに。以下のJSON形式で本文を投稿する。

わたしのmixi日記は友人限定なので、privacyのvisibilityをfriendsに。
facebookは投稿する本文に access token をつけるが、mixiはheader部分につける。

とりあえず。これで、facebook も mixiも graph APIを利用して、wallや日記に投稿できるようになった、かな。同じOAuth2.0でも本文に入れたりヘッダに入れたり、tokenの期限があったりなかったり、微妙に違うのが注意が必要。
[07/03 11:35:45]
写真つき投稿の記事はこちら→ 「mixi graphの日記APIで写真つき投稿」


わたしは、気楽なtwitterと、閑散とした辺境のこの雑記帖で十分。

今回 facebookとmixiを改めて眺めた感想。
facebook はわからない。プライバシー設定が信用できない。データをどう使われてるか気持ち悪いところがある。企業ページが充実しているけど、金になってんのかね。アプリをクリックして何が起こるのかわからないので、臆病もののわたしはクリックできない。
全般いろんなところが「わからない」ので使えないんだよなあ。
mixiは最近残念だと思ってたのに、今回改めて見るとページや機能はかなり頑張ってるように見える。今さら。「あしあと」はリアルタイムで見えたからこそ、ユーザーが自分で公開や発言コントロールできる安心感。コミュニティは2chでいうスレ立てで、ひとりのユーザーが気楽に掲示板を持つことができるのは目玉だったような気がする。なんでわかりにくく使いにくくなったんだろう。あしあともコミュニティもユーザーの要望を取り入れて今のカタチになったんだろうけど、ユーザーの声を聞きすぎててんこ盛りのカオス、右往左往になってんじゃないのか。

 

»電子書籍制作代行についてはこちら

facebookのウォールに投稿するアプリ

2012/6/14 [00:20:39] (木) 天気

使い勝手がよくわからないし、プライバシーというか公開範囲もよくわからないし、妙にうっとーしーオススメされるので、すっかり放置のfacebook。正直なところ、なんか胡散臭くて、魅力を感じないんだけど、ユーザー数を考えるとちょっと調べておいたほうがいいような気がした。
で、この雑記帖のRSSをwallに投稿できればいいなあ、と。有名どころの、facebook graffitiというのを試したところ、反映されない。投稿されない。設定をいじっても沈黙したままで使いものにならない(たぶん、わたしの設定が悪い)
しょうがないんで、自作の方向で。facebookのAPIを触ってみるいい機会だ。

https://developers.facebook.com/apps
アプリを登録するために、携帯電話のメールアドレスかクレジットカードで本人認証が必要。それ以外は twitterのアプリと似たようなもんだ。WEBアプリとして登録。ドメインやアプリの名前、アプリのURLなどを入力して、アプリの app_id app_secret が管理画面で確認できる。
後は、facebookの、認証するためのURLにGETでリクエスト。レスポンスに含まれるパラメータでまたGETして、と。OAuthのやりとりは、OAuth1.0Aのtwitterより、OAuth2.0のfacebookの方が簡単、かもしれない。
具体的でわかりやすい解説は、ほかのページがたくさんあるので、検索してください。

ここでは。
facebookが用意してるSDKはPHPとJavascript。わたしが多少なりとも使えるのはperl。SDKがないので、perlでベタベタ書いていったメモ。(さらについでにいうと、CPANにはfacebookのモジュールがあるので、それを使った方がいい)
とりあえず。facebookの自分のwallにpost、投稿できるまでを忘れないうちに。

access tokenさえ取得してしまえばOK。

その1.コードを取得する

APP_ID、URLは、アプリ登録した時の管理画面に表示されている。
コンマ区切りのパラメータscope。
・publish_stream、wallに書き込む権限くださいね。
・offline_access、access tokenの期限を無期限にしてくださいね。
ということらしい。
[08/28 10:35:26] offline_access は2012/7/5で廃止になった。記事最後に代替手段追記

上記URLにアクセスすると、facebookの、このアプリを使いますか、というページに行くので、そこで承認=OKすると、facebookから、URLにコードをつけて返ってくる。
URL?code=CODECODECODE

その2.access tokenを取得する

1で取得したコードと、アプリ登録時に取得するapp secretをパラメータに追加して、上記URLにアクセスする。

8行目、その2で作ったURLにアクセス。問題なければ、レスポンス=htmlの中に、access_tokenが入っているのでそれをメモる。(今回は、自分のブログ記事を流すことが目的なので、そのままaccess token を使う)

ウォールに投稿するには
https://graph.facebook.com/USER_ID/feed ※
というURLにPOSTすることになる。ここでちょっとハマる。USER_IDなんてこれまでの過程で一度も出てきてない。取得した access token を使って USER IDを取得する必要があった。

access token をパラメータにつけてアクセスするとJSON形式でデータが返ってくる。その中に user idという項目があるので、それをメモる。

使ったもの必要なものは以下。
アプリ登録時取得 app_id app_secret
OAuthで取得 code access_token
APIで取得 user_id

※のURLに対して、POSTで本文を投稿する。
本文に最低限必要なのは access_tokenとmessage。(その他のパラメータには、link name caption description picture などがある)
access_token=ACCESS_TOKEN&message=URLENCODE(message)という形式。

これで投稿ができるようになった。ブログの最新記事をfacebookのウォールに投稿するには、本文を適当に整えるだけ。あとでやっつけてしまおう。

SDKがあるので、モバイルアプリも頑張れば作れる、ような気がする。でもなあ、facebookってどうも信用できんのだ。

[08/28 10:35:26]
追記
offline_access を指定することで access token の有効期限は永続的だったが、2012/7/5にoffline_accessが廃止となって、access_token の有効期限をチェックしなきゃいけなくなった。
詳しくは以下のURL(ありがとうございます!)
http://appofit.com/facebook/remove_offline_access/

ウチは、ユーザー権限で何かするわけでもないので、有効期限が永続的に使えるアプリのトークンでwallに投稿することにした。

上記URLに直接アクセスするとaccess_tokenがわかるので、それをメモってハードコーディング。

 

»電子書籍制作代行についてはこちら

profile

profile

 
doncha.net
名前:
飯田哲章
mail:
t2aki@mrh.biglobe.ne.jp
twitter:
t2akii

WEBサービス制作/電子書籍制作

検索
<<2019/9>>
       
1234567
891011121314
15161718192021
22232425262728
2930

リンク

WINDOWS版サウンドノベル
おかえりください PC WINDOWS版サウンドノベル
『おかえりください』体験版

iPhone電子書籍アプリ
小説同人誌Select iPhone電子書籍アプリ
『小説同人誌Select』

[18 Page]« »
1 2 3 4 5 6 7 8 9 10

TOTAL:2875

2019 (14)
1 (3)
2 (4)
3 (2)
4 (2)
5 (1)
6 (1)
8 (1)
2018 (21)
1 (3)
2 (2)
3 (2)
4 (1)
5 (1)
6 (6)
8 (1)
9 (1)
10 (2)
12 (2)
2017 (32)
1 (2)
2 (1)
4 (2)
5 (1)
6 (6)
7 (3)
8 (5)
9 (3)
10 (2)
11 (2)
12 (5)
2016 (41)
1 (5)
2 (5)
3 (2)
4 (3)
5 (4)
6 (6)
7 (2)
8 (2)
9 (3)
10 (1)
11 (4)
12 (4)
2015 (99)
1 (11)
2 (12)
3 (9)
4 (6)
5 (8)
6 (8)
7 (3)
8 (5)
9 (16)
10 (6)
11 (1)
12 (14)
2014 (112)
1 (16)
2 (5)
3 (6)
4 (12)
5 (16)
6 (19)
7 (9)
8 (6)
9 (4)
10 (8)
11 (6)
12 (5)
2013 (145)
1 (24)
2 (15)
3 (18)
4 (23)
5 (14)
6 (11)
7 (7)
8 (11)
9 (5)
10 (4)
11 (6)
12 (7)
2012 (103)
1 (1)
2 (1)
3 (4)
4 (3)
5 (7)
6 (26)
7 (17)
8 (5)
9 (8)
10 (10)
11 (11)
12 (10)
2011 (54)
1 (4)
3 (7)
4 (4)
5 (14)
6 (6)
7 (3)
8 (3)
9 (1)
10 (4)
11 (2)
12 (6)
2010 (70)
1 (12)
2 (7)
3 (6)
4 (6)
5 (3)
6 (10)
7 (6)
8 (4)
9 (3)
10 (4)
11 (3)
12 (6)
2009 (144)
1 (15)
2 (12)
3 (12)
4 (6)
5 (15)
6 (6)
7 (10)
8 (9)
9 (17)
10 (12)
11 (14)
12 (16)
2008 (148)
1 (10)
2 (6)
3 (10)
4 (11)
5 (13)
6 (10)
7 (13)
8 (19)
9 (18)
10 (12)
11 (13)
12 (13)
2007 (106)
1 (7)
2 (5)
3 (3)
4 (7)
5 (5)
6 (9)
7 (8)
8 (13)
9 (18)
10 (11)
11 (8)
12 (12)
2006 (158)
1 (28)
2 (28)
3 (25)
4 (7)
5 (9)
6 (7)
7 (12)
8 (13)
9 (10)
10 (7)
11 (6)
12 (6)
2005 (350)
1 (31)
2 (26)
3 (26)
4 (27)
5 (29)
6 (30)
7 (32)
8 (30)
9 (30)
10 (32)
11 (29)
12 (28)
2004 (292)
1 (24)
2 (24)
3 (29)
4 (27)
5 (28)
6 (25)
7 (26)
8 (24)
9 (12)
10 (19)
11 (26)
12 (28)
2003 (318)
1 (22)
2 (25)
3 (21)
4 (28)
5 (28)
6 (28)
7 (28)
8 (29)
9 (26)
10 (29)
11 (28)
12 (26)
2002 (317)
1 (29)
2 (26)
3 (26)
4 (25)
5 (28)
6 (30)
7 (27)
8 (21)
9 (25)
10 (27)
11 (28)
12 (25)
2001 (277)
1 (17)
2 (21)
3 (23)
4 (20)
5 (31)
6 (18)
7 (26)
8 (25)
9 (29)
10 (19)
11 (24)
12 (24)
2000 (53)
6 (9)
7 (4)
8 (2)
9 (3)
10 (1)
11 (15)
12 (19)
1999 (3)
7 (1)
10 (2)
1998 (18)
9 (9)
10 (7)
11 (2)