ひまつぶし雑記帖

ブログの立ち読みサンプルを縦書き段組にする

2016/2/15 [19:21:23] (月) 天気

Kindleの無料サンプルを縦書き段組にして表示するというのをやってみて、ついでに、「はてな」などのブログ記事掲載のサンプルを縦書き段組にしてみた。

CSS3のマルチカラムは縦書きの段組には(現状)使えないので、段組の一カラムずつの塊を返す(レイアウトデザインを崩さずコントロールするためにはこの方法しかなさそうだ)

百聞は一見に如かず。

「はてな」
http://t2akii.hatenablog.com/entry/2016/02/15/182240
image

「HTML直書きのサンプルページ」
http://sandbox.doncha.net/sample-tategumi.html


「はてな」を例にしてみると。

その1。
ブログ記事を「編集 見たまま」で作成する。

その2。
表示させたい立ち読みサンプルを、テキストエディタ(sakuraやxyzzy、秀丸、miやcoteditorなどなど)で開いて、コピー。

その3。
「編集 見たまま」で、立ち読みサンプルをペーストする。
image

そうしたら「HTML編集」に切り替える。

image
赤い部分がコピペした立ち読みサンプル部分。

その4。
このコピペした立ち読みサンプルの冒頭の「<p> 神さまに会いに行く」の「<p>」の部分に「HTML編集」の状態で以下を記入する

image
赤い部分
<p id="sample-tategumi" data-cols="28" data-lines="20">
のように編集。
・data-colsは一行の字数
・data-linesは一カラムの行数

その5。
以下のコードを立ち読みサンプルの下あたりに貼り付け。

image

HTMLに書きこまれたテキストを縦書きにするだけなので、立ち読みテキストがグーグルさまなどの検索エンジンにちゃんと拾われるのもお得な感じになった、かも。

HTML的なことをいうと。
idがsample-tategumiの要素の中のテキストを縦書き段組にするので、pタグだけじゃなくてdivタグなんかでもOK。


…にしても、wordpressもはてなも、CMSってのは余計なお世話が多いなあ。

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

【改良版】kindleの小説無料サンプルを縦書きでブログに貼り付け

2016/2/5 [15:15:47] (金) 天気

Kindleの無料サンプル、試し読みを縦書きにしてブログに貼り付けるというのを、先日やってみたんだけど。

現状のCSS3のマルチカラムは縦書きがまともじゃない。
カラムの高さが取得できなくて2段目以降がオーバーフローしてしまうことがある。親要素に高さが伝わらないので、たとえばページの最下部にありがちなフッターを乗り越えて表示したりしてしまうのだ。
またそのせいか、一段の高さと表示段数の計算がわけわかめ状態。CSSで指定した高さになっていなかったりしてうまくコントロールできない。ブラウザごとで解釈がバラバラ。

つまり、現状のCSS3のマルチカラムを使って縦書きにすると。
ページのレイアウトデザインが意図どおりコントロールできない。ブラウザが違うと一段の字数・行数が違ってくる。ということになる。

ありえなかった。
たぶん、時間が解決してくれる。そのうちCSS3のマルチカラムでも縦書きがちゃんと意図通りに表示される時代がやってくる。

でも、いったいいつになるのか、初老フリーターに残された時間は短い。
てことで、段組表示用に、字数x行数でテキストを区切ってひと塊ずつdiv要素でくるんだものを返すようにした。

CSS3のマルチカラムで起こっていた問題はこれで解決(禁足なんかの判定がバギーだけど…)
意図通りに縦書きで段組されて(=マルチカラムで)表示されるようになった。
image
↑28字x20行のカラムごとに表示している。

でもこれは、CSSのマルチカラムではないので、レスポンシブというか画面の幅に合わせて柔軟に広がったりしない。N字xN行の塊が表示されるだけ。
今どきはスマホファーストでもあるので、それだとなんかアレな感じ。その場しのぎというかスマホでのアクセスの場合、表示する行数をPCの半分にするようにした。

各々一段10行表示となる。
Android
image
iPhone4S
image

http://sandbox.doncha.net/sample-kindle.html
↑表示のサンプルページはこちら
(ちなみに、無料サンプルについてくる「目次」toc は削除)

以下のコードを、縦書きでサンプルを表示させたいところに貼り付け。

1行目。
・「ASIN」の部分にサンプルを表示させたい本のASINコードを記入。
・「data-cols」が一行の字数。デフォルト28字
・「data-lines」が一段の行数。デフォルト20行
※「はてな」や「fc2」などのブログサービスでは「HTML編集」で上記のコードを貼り付ける。


現状、電子書籍をブラウザで読む・体験するのには 「BiB/i」 が最適最強。
ただ、WEBはクリックのコスト・ハードルがかなり高い。
サンプルをさらっと読んでもらいたいと思っても、クリックしなきゃ読めないのはツライものがある。前にも書いたけど、楽天のフンドシのような長いページはそれなりの意図意味がある。

ページに着地したら余計なアクション不要でサンプルが目の前に表示されている状態にしたい。

ということでごそごそいじってみた。

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

コミティア115ありがとうございました!

2016/2/1 [17:44:22] (月) 天気

昨日1/31は例年通り年初のイベント、コミティアに参加。
実際の数字はわからないけど、いつもの年初のコミティアよりも人が多かったような気がする。ウチの新刊既刊も多くのかたに手にとってもらえた。本当にありがとうございます。

「新刊ください」のリピーターのかたや「まとめ買い」のかたがいらっしゃるのは、ずっと続けてきた結果、かな。

今回ビックリしたのが。
たぶん中東系の男性とヨーロッパ系の女性カップルがやってきて、女性の方がニッコリ微笑んでこんにちはと。
新刊のTL(ティーンズラブ小説)を手にとってパラパラ読み始めてビックリ。で、フィアンセだマリッジだと英語で内容を男性に説明しだしてまたビックリ。マンガじゃ昔からの光景だけど小説で初めてだった。バイリンガルかっこええな。ていうか、文芸も国際化・グローバル化の波が来てるのか(大袈裟)

体調不良のせいか、当日明け方までゲロってへろへろだったんだけど、楽しい一日だった。

旧知の永山薫(@Kaworu911)さんとも久しぶりの雑談。年金や介護の話で盛り上り…という歳だなあ。いろいろ具体的な話で参考になった。
出版、商業誌の不景気な話もごにょごにょとしてたんだけどここに書くようなことでもないのでバッサリ削除。

本は「そこにあるから買う」のが基本だ。
注文してまで買う「濃い本読み」の層はいるけど、ほとんどの場合、そこにあるから気づいて、ありゃこれは面白そうと思ってもらえて買ってもらえるものだ。

以前から何度も何度も同じことを書いてるけども。
日野裕太郎の場合も、同人誌の即売会に参加してそこに本を並べてきたから手に取ってもらえるようになったわけだし、機会があって出した商業誌はもちろん、わたし(doncha.net)がやってる電子書籍の個人出版でも同じ、「読者の前に並べてナンボ」だ。

http://hino-yutaro.doncha.net/
↑商業誌・同人誌・電子書籍で出してる日野裕太郎の書籍一覧

プロモーションとかプロデュースとかいろいろなことが言われるけど「使える販路は可能な限りすべて使って読者の前に本を並べる」というのが確実に正しい唯一の方法だ。

てなことを、年初のコミティア参加して改めて実感した次第。
いや、手売りで一冊ずつ、ひとりずつやりとりがあるのはやっぱ刺激になりますです、はい。image

[2016/02/02 08:23:53] 追記。
もうひとつ、プロモで有効だと確実に言えるのは「新刊」を出し続けること。
(電子書籍の個人出版の場合、というかECサイトの場合は特に「NEW!」で露出が増える)

ネットで作家自身のプロモーション、プロデュースなども必要かもしれないけど、実体以上に膨らませても・ネット芸者したところで続かないだけ。
まずは「読者の前に本を並べる」「新刊を出し続ける」を着実・確実に、だ。

次回は5月の文学フリマ東京とコミティア116。少し時間の余裕があるので電子書籍に原稿を回してもらわなきゃ、だなあ。

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

日野裕太郎作品一覧サイトの制作

2016/1/23 [17:14:12] (土) 天気

image
同人誌、商業誌、電子書籍と作品発表の場所というか販路が多岐に渡るので、発行した書籍をまとめてチェックできるサイトを作った。

日野裕太郎の本::駄文の王様
http://hino-yutaro.doncha.net/

宣伝力が弱点の個人作家(…「個人作家」て変な言葉だな)なので、作家名で検索されるようなことも少ないだろうけど、そんな希少で貴重な機会は大切にしたい。
現状はSEOが断然格段圧倒的に強いAmazonの日野裕太郎作品一覧ページが検索結果上位に来る。それはそれでいいんだけど、ウチはAmazonだけで販売してるわけではない。

電子書籍はibooks、kobo、BOOKWALKERでも販売しているし、同人誌はコミケやコミティア、文学フリマなどのイベントで手売りあるいは委託販売している。そちらの情報も掲載したサイトを用意して検索してきた読者のかたにお知らせできるようにしておきたい。
というのが今回サイト制作するにあたっての動機。

わたしの雑記帖に混じってたんじゃ検索にも引っかからないし、URLを新たに作っていろいろと散らばっている情報を集積、掲載することにした。
・手元で作ってあった情報
・Amazonにある書誌情報
・HappyReadingにある同人誌情報
ただ、これらからネタ(掲載情報)をそのまま引っぱってくるだけだと、サテライトサイトみたいなもんでgoogle先生に嫌われる。

オリジナル情報、付加情報が必要。
・日野裕太郎の公式ブログRSS
・エゴサーチしておいたblogやtwitterでのクチコミ
・無料サンプルというか試し読み、立ち読み

このために、ここ2回ほどの雑記帖のネタ。

その1 同人誌情報を取得するために
「創作文芸見本誌会場HappyReadingに書誌情報APIを実装しました」
その2 kindleの無料サンプル(試し読み)を縦書きでページに貼り付けるために
「kindleの小説無料サンプルを縦書きでブログに貼り付け」
となった(商業誌の紙印刷本に関してはアマゾンに無料サンプルがないので諦め)


そしてできた以下のページたち。

商業誌の紙印刷本のページ
『強引執着溺愛ダーリン あきらめの悪い御曹司』
http://hino-yutaro.doncha.net/?asin=4801906095

電子書籍のページ
『夏煉喧騒曲』
http://hino-yutaro.doncha.net/?book=12
『道化の沈む夢』
http://hino-yutaro.doncha.net/?asin=B00MQL0EIE

同人誌のページ
『うそつき、祈祷師になる』
http://hino-yutaro.doncha.net/?happyreading=756

トップページには新刊・既刊情報に同人誌即売会イベント参加情報なども入れてみた。
http://hino-yutaro.doncha.net/

一応、スマホにも対応したけど、サンプルの縦書き表示でスマホのChromeが高さをうまく判定できないようで、スマホの場合はサンプル表示を諦めた。うーん、なんでだろ。


titleタグやaltタグはしっかり入れる、Ajaxは使わないなどそれなりにSEOを考慮。
xmlだのRSSだの、LWPでリクエストだの、なんか久しぶりにサイトを作ったような気がする。
やっぱごそごそとサイトを作るのは面白いなぁ。

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

kindleの小説無料サンプルを縦書きでブログに貼り付け

2016/1/21 [22:34:46] (木) 天気

kindleは無料サンプル、試し読みが提供されている。
ttp://kindleweb.s3.amazonaws.com/content/ASIN/gz_sample.html
この「ASIN」の部分をamazonの商品ID、ASINにしてアクセスすると無料サンプルが読める。権利的な問題からかサンプルが用意されていない本もあるけど、KDPの個人出版の場合はおそらく確実に無料サンプルが用意されている。

これを縦書きにしてブログなんかに貼り付けられるようにしてみた。
以前、同じようなことを試して書いた、その改良版(ていうか、やっとfirefoxが縦書きに対応したのでこの手のネタは注釈なしでイケるのがありがたい)

百聞は一見に如かずとか論より証拠とか。
image
http://sandbox.doncha.net/sample-kindle.html
↑ページはこんな感じ。

「はてな」でも検証確認
image

以下のコードをHTMLやブログ記事にコピー&ペーストすると、そこに無料サンプルを縦書きで表示します。
※「はてな」や「fc2」などのブログの場合は「HTML編集」でペーストしてください。


1行目
・data-asin
 ここにASIN、kindleの商品コードを記入
・data-column
 一段落の高さ(emでの指定になります) デフォルトは20
・data-font-size
 フォントのサイズ(%での指定になります) デフォルトは100

data-columnとdata-font-sizeを調整するとそれっぽくページにおさまります。

KDPを利用して自分の作品を公開しているひとにとっては(サンプルなら自分でテキストを持っているので)ほとんど役に立たないシロモノですが、ブログに貼り付ける手間をほんの少しラクチンに。


2016/2/5 [15:15:47]
現状では、このCSS3マルチカラムを使った縦書きの段組が使い物にならないことが判明。
CSS3のマルチカラムを使わないで、縦書き段組を実現する方法についてはこちら

【改良版】kindleの小説無料サンプルを縦書きでブログに貼り付け
http://t2aki.doncha.net/?id=1454652947

縦書きをシンプルに実現するのはまだ難しい。

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

創作文芸見本誌会場HappyReadingに書誌情報APIを実装しました

2016/1/20 [23:35:34] (水) 天気

APIといえるかどうかはともかく。
創作文芸同人誌のプレビュー・立ち読みサイトのHappyReadingの作品ページに掲載されている書誌情報をXMLで提供するようにしました。
『創作文芸見本誌会場HappyReading』http://books.doncha.net/happy-reading/

今さらですが、HappyReadingはけっこうな量の入力項目があります。
にも関わらず登録いただいてるので、入力された情報をHappyReading以外(たとえばサークルや個人のサイト)で使えれば、読者さんへの告知の幅も手軽に広げることができるのではないかということでXML。

平たく言っちゃうと、自分のサイトやブログでも紹介したいのにまた同じことを書くのは面倒くさい!ということでXMLでの情報取得のAPIもどきをでっち上げました。

XMLで提供する登録情報は以下
image
・HappyReadingのページURL
・登録したアカウントID
・本のID
・タイトル
・発売日
・ページ数
・判型
・印刷形式
・頒布価格
・キャッチ
・著者(イラストレーター、編集者、デザイナーなど)
・サークル名
・サイト
・サイトURL
・アマゾンのASIN
・カテゴリ
です。
※表紙画像や立ち読みの情報は提供していません。

http://books.doncha.net/xml.pl?bookid=839
↑このURLにbookidを指定してアクセスすると書誌情報のXMLを返します
(Firefoxなどでアクセスしてもらえるとどんなものか見えます)

http://books.doncha.net/happy-reading/detail.pl?uid=14879977&bookid=839
↑bookidというのはHappyReadingの作品個別ページのURLのbookidのことです。

このXMLを取得してページに合わせて加工することになります。

http://books.doncha.net/happy-reading/detail.pl?uid=14879977&bookid=566
このHappyReadingのページのXMLをperlで取得、アレンジして表示したのが以下です。
image
http://hino-yutaro.doncha.net/?happyreading=566
※表紙画像と立ち読みは別途用意してます。

phpやperlを使って取得&加工するのが手っ取り早いですが、javascriptが使えればHappyReadingのXMLを取得できます。

はてなやFC2といったブログの場合は「HTML編集」などにしてページの好きな場所に以下のコードをコピー&ペーストすればXMLを取得してページに表示します。
先頭の「data-book="XXX"」の部分にHappyReadingのbookidを記入。


「はてなブログ」で確認。
・「編集 見たまま」でアップロードした画像を貼り付けたり、記事を作ります。
・「HTML編集」でHappyReadingの登録情報を掲載したい部分に上記のコードを(bookidを記入して)貼り付けます。
image
・「プレビュー」
image
素気ないリストでの表示なので、スタイルシートでデザインします。
・id が #happy-reading のリスト(ul)となっていて。
 liに「title」「creator」「size」「printing」「pages」「price」「published」「category」「catch」「circle-name」「site-url」「amazon」「to-happy-reading」というクラスをつけてます。
表示or非表示や文字サイズ、色などをCSSでカスタマイズできます。
(わたしはデザイン力がないのでテンプレートを作る気力が…)


ハマったところがあったんでメモ。

Javascript、ajaxで別ドメインにあるXMLを取得するためにはjQuery側とサーバー側で設定が必要だった。

・jQueryのajaxのパラメータ「crossDomain」を true にする。
・サーバー側(今回の場合xml.pl)スクリプトのHTTPヘッダに
「Access-Control-Allow-Origin:*」
「Access-Control-Allow-Headers:Origin, X-Requested-With, Cotent-Type, Accept」
の2行が必要だった。

(スクリプトに付加したヘッダはなにやらセキュリティ的に不穏な感じなので、formデータのチェックを厳密にしておいた)

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

profile

profile

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

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

検索
<<2017/3>>
   1234
567891011
12131415161718
19202122232425
262728293031

リンク

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

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

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

TOTAL:2811

2017 (3)
1 (2)
2 (1)
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)