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

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

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

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

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

XMLで提供する登録情報は以下

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

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

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

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

https://books.doncha.net/happy-reading/detail.pl?uid=14879977&bookid=566
このHappyReadingのページのXMLをperlで取得、アレンジして表示したのが以下です。

https://hino-yutaro.doncha.net/?happyreading=566
※表紙画像と立ち読みは別途用意してます。

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

はてなやFC2といったブログの場合は「HTML編集」などにしてページの好きな場所に以下のコードをコピー&ペーストすればXMLを取得してページに表示します。
先頭の「data-book="XXX"」の部分にHappyReadingのbookidを記入。
<ul id="happy-reading" data-book="XXX"></ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script type="text/javascript" src="https://books.doncha.net/happy-reading/xml-happy-reading.js"></script> <script type="text/javascript">getHappyReading();</script>

「はてなブログ」で確認。
・「編集 見たまま」でアップロードした画像を貼り付けたり、記事を作ります。
・「HTML編集」でHappyReadingの登録情報を掲載したい部分に上記のコードを(bookidを記入して)貼り付けます。

・「プレビュー」

素気ないリストでの表示なので、スタイルシートでデザインします。
・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データのチェックを厳密にしておいた）

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

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

コミュ障にネットは厳しい

2015/12/26 [23:26:07] (土)

「いっちょかみ」なもんで、いろんなSNSだの新サービスにとりあえず登録だけはしてる。

note（https://note.mu/）もそのうちのひとつ。
ミケさんと野良猫の写真集の宣伝に「ノート」を作って放置してあった。
https://note.mu/t2aki/n/nc0a4fe02a030

来年また写真集っぽいものを出してみようと思いつき。
いや、残念ながら文才もなければ、絵を描くこともできない。手元にあるのは一眼レフのフィルム写真からスマホのパシャパシャまで2000枚ほどの写真。写真であれば底辺エロ出版社時代にさんざんやってきた「昔とった杵柄」（死語）、トリミングで見せることはできる。
ただ、写真を並べるだけの手法は猫写真だから通用したと思っていて、風景だなんだのを混ぜる時にはなんらかのネーム、文章、ストーリーが必須。

100以上文章を作れば10ぐらいはさらにブラッシュアップして使えるものになるだろう。
とりあえず何も考えずに書き散らかして、適当にピックアップするというのも、昔さんざんやってきた。量は質に転化する、という良い言葉もある。

ただ、自分の性格的に、メモ帳なんかにちまちま書いて続けられるとも思えない。
なんらかのモチベーションというか、ちょっとはひと目に晒す緊張感が必要だ。

最初はこの雑記帖に書こうと思ったんだけど、それこそココが何のこっちゃなページになる。いや、今でもそうなのでこれ以上カオスにするのはいかがなものか。
twitterの140字だと足りない。
Facebookはどうも使い勝手（UI）が好みじゃない。
mixiは死んでいる。

MediumかnoteかElloの3択。
Elloは日本語が不自由っぽいので却下。
Mediumは登録してなかった（あれ？）

てことで、noteに思いつきのネタを書いておくことにした。
改めてnoteの利用規約やFAQを読んでいて、

あなたの公開したノートにコメントがつく場合があります。コメントがついた時は内容を確認し、コメントに”スキ”をしたり、お礼のコメントを返しましょう。作品を見てくれる人とコミュニケーションをとり、あなたの活動を応援してくれるファンを増やしていきます。

いや、そのとおりだと思う、思うけど無理。その能力があったら、今こんなことやってないっての。ネットもリアルと同じく対人スキル、社交性、営業力が求められるんだなあ、と今さら。

人間、得手不得手がある。不得手なものを無理してやってもロクなことにならないのは経験的に知っている。そこんとこはスルーして、とりあえず100個頑張ってみよう。

こういう雑多なのは、ほんとならコンセプトを決めなきゃいけないんだけど、材料が溜ってから決める泥縄式。

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

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

一発芸：縦書き段組レイアウトのためにテキストを分割

2015/9/26 [15:38:08] (土)

Firefox41がようやく縦書きに対応したのでこれからは遠慮なく縦書きを使える、すばらしい、というネタの続き。
WEBブラウザでの縦書き表示のあるべき姿について。いや、横書きでいいというひとにとっては意味のないネタ。


縦書きの場合、テキストをそのままブロック要素に流し込むとスクロールとなる。

これはありえない。
・文字が切れるのをコントロールできない。
・ページは縦にスクロールして見てるのに、なんでここだけ横スクロール。

ということで、前回も書いたように、縦書きでは段組でレイアウトされるのが正しい。

(※どうやら今日時点、Firefoxは縦中横が効かないので「!?」がひっくり返っているけど、ChromeやSafari、IEは問題なし)

で、これがちょっと面倒くさい。
１段落に入る字数と行数によって、どこで次の段落に移動するのかを確認する必要がある。これはやっぱ面倒くさい。
スクリーンショットでいうと「家屋が」で段落が終了して、次の段落が「かしぐ」から始まるというのを判断して段落を分けなきゃいけない。

なもんで、字数行数改行をチェックして文字数を数えて段落単位でテキストを分割するスクリプトを書いた。

[10/02 11:22:44]追記
CSS3のmulti columnを使えばそのまま文字通り段組が実現できる。N字xN行ではなくて、画面幅やテキスト量で柔軟に表示してくれるので、webは本来このCSS3のマルチカラムを使うべき。
版面というかN字xN行のレイアウト表示で見せたい場合にこのスクリプトの出番(css3の完全リフローとは少し違って、N字xN行の箱に入る分のテキストの塊を作るイメージ)


ルビや縦中横に関しては、テキストにHTMLでタグづけされてれば生かす。
でも、わたしは素人のヘタレなので制約はあって。文字数を数えるために。
縦中横の指定のない半角の数字と、半角のアルファベットや記号類は全角に変換。
また、なんちゃって禁則でバグくさいところがある。


https://t2aki.doncha.net/tmp/dangumi-sample.pl
(例によってここは直リンクできないのでこちらからどうぞ)
↑ここでテキストや字詰め行数を入力すると、縦書き段組表示用に分割されたテキスト(縦書き用のスタイルシート付き)のHTMLが手に入ります。

テキトーにテキストを放り込んで試してみてください(わたしはこれで表示の調整をしてました)

縦(字詰め)、横(行数)を確認して縦書きサンプルとして、ブログなどにコピペしてご利用いただければ。

『創作文芸見本誌会場HappyReading』 に登録した立ち読み用のテキストなど、ご自分のサイト、ブログで縦書き表示して読者さんに希求できると思います。
(※HTMLが編集登録できるブログ限定でしょうか)

小説は縦で読んでもらおうず！

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

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

サンプルの縦書き段組表示

2015/9/23 [10:01:31] (水)

やっとFirefoxが縦書きに対応したことで、すべてのブラウザで縦書きでの表示ができるようなった。
今までは、「サンプルを読む」みたいなリンクをクリックすると、Firefoxの場合は横書き、それ以外のブラウザは縦書きのポップアップウィンドウを表示させていた。苦肉の策。
今後はブラウザ判定して分岐させる必要がなくなったので、以前やってたようにページに縦書き段組のサンプルをajaxで埋め込む方法に変更した。
(とはいえ、新しいバージョンが出たからといってみんなすぐにインストールするとも思えないので、しばらくは必要だと思うけど)

ajaxにしたのは。
サンプルはそれなりに多いんで、ページ表示がひょっとして遅くなっちゃいけないと思ったから。
サンプル以外の表紙やキャッチなんかのいわゆる書誌情報は、とっとと表示してもらいたいということ。WEBで唯一断言できるのが「速さは正義」だ。表示にもたもたしてたらそれだけでそのページは終了だ。
ajaxならまずページは先に表示されるので、体感的なページ表示速度に影響しない。

縦書きのポップアップを使わなかったのは。
クリックはコストが高いから。
以前にも書いたかもしれないけど、オンデマンドの動画配信サイトで仕事をしていた頃に何度も(毎日)計測していた。ほとんどのユーザーはランディングページ→離脱。
いや、楽天のチラシのようなフンドシのような長いページをダセエーと思ってるけど、あれは正しい。
ユーザーのクリック誘導がいかに大変かという結果。理由もなくあんなクソみたいなページ構成にしてるわけじゃない、てことだと思う。

また、WEBページで、ページを縦にスクロールしていって、サンプルの縦書きのコンテンツだけ横にスクロールというのは違和感がある、目線の動きとUI的にありえない。
縦書きの文章は段組されて、目線の流れ的に、右上から左に読んで行って、左下端にきたら、下の段の右上端から読むものだ。

てことで(表示速度のリスクとクリックコストと縦横混在混乱を検討して)、縦書き段組を復活させた。
（のはいいけど、Safari、ChromeはともかくIE(ver.10)がまたCSSの解釈が微妙に違ってるぽいなあ）

もちろん不満点はあって。

とにかくWindowsはフォントが汚いんでビックリ。
ディスプレイの設定でマシになるとのことだけど、そんなことを来訪するユーザーに強要するわけにはいかない(昭和のホームページでは「画面1024px以上推奨」とか「フォントサイズ12px推奨」とかあったけど)

ダッシュが繋ってくれない。
これは電子書籍でも苦労してるところだからしょうがないか。

ただ、WEBというかブラウザにあまり多くを求めてもしょうがないんで、現状はこれでOK。
電子書籍を読むなら、それに特化した専用端末か専用アプリを利用するし。


この雑記帖を「縦書き」で検索するとどっさりヒット。2009年とか2004年ぐらいから待望の縦書き実現、というやつ。
やっと、Firefoxありがとう、だ。



日野裕太郎の作品紹介ページでサンプルが読めるのでゼヒゼヒ！！
↓このへんからどうぞ
https://t2aki.doncha.net/?id=1362724515

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

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

読者コミュニティ「趣味は読書2」の登録データ

2015/5/14 [09:50:39] (木)

「趣味は読書」というweb本棚サービスを2006/4/1から公開している。

今日時点

登録会員:310名
登録冊数:49,780冊
登録タイトル:38,851タイトル
登録著者:14,264人

【人気タイトル(会員10人以上が登録)】

【人気著者ベスト20(登録された本の総数)】

「趣味は読書2」
https://doncha.net/about.pl

図書館で本を借りて図書カードを見て
「あれ？あのコもこれ読んだのかぁ」とか「おっあいつこんなの読むんだ」と、ニマニマしたり
ひとんちに呼ばれたら、まず本棚を覗いて
「これ、わたしも読んだよ」と言いたくなったり
図書館とか本屋で、どの棚の前に立っているかで、そのひとの属性がわかって、うれしかったり
なんだか「ありきたり」な趣味なので履歴書にも書けない気がしたり
本を読んでも難しいことを考えたり感想文は面倒くさかったり
ヲタクだと思われそうで嫌だったり

でもって、だけど本好きとか本読みですが、なにか？

というようなことを、思ったことはありませんか？ ぼくは、あります。なので、そんな本棚のようなサイトを作ってみました。

『読者のコミュニティ』
↑にも書いたけど。
東日本大震災の時、自宅サーバーで公開していたものを一度閉じて、レンタルサーバーで再開。
2006年公開当時、流行りのmixiもどきで掲示板や日記などつけたんだけど、利用パターンの8割以上が「本棚直行直帰」だったのでリニューアルして現在の形に。

現状は月に20人ぐらいのアクティブユーザーといったところ。
特に告知などしてなくて、ニュースサイトの古い記事や紹介されているブログ、twitter連携などから新規に登録・利用してくれている。


手前味噌。
設計もデザインも古くさくなってダサイのはすみませんだけど。
もともとわたしは「あれ？これ読んだっけ？持ってたっけ？」のトリ頭、重複買いがわりとあったのに、「既読・未読」フラグのあるこのweb本棚のおかげで重複買いはなくなった（ログインして検索、あるいは、twitterにリプを飛して本棚検索結果を返してもらう）


『「趣味は読書２」など読書記録WEBサービス』
2011年時点のWEB本棚サービスのリスト。なくなったサービスがけっこう多いけど。

本を読むひとの数を増やしたい、小説を面白がってくれるひとを増やしたい、たくさん面白い小説を読みたい、というのはどのサービス提供者にも共通することだと思うんで、みんなで盛り上げられればいいなあ、と思うですよ。

面白い小説はまだまだたくさんあるので、残り時間を有効に使わないとなあ、とあらためて初老はしみじみするのでありました。

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

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

オレオレCGMでランディングページ

2015/1/26 [12:04:29] (月)

この雑記帖はperlで自作のcgi。
最初1998年頃は、テキストエディタでHTMLを書いてFTPでアップロードする昭和の世界だった。さすがに面倒になったのでperlでcgiにしたのが2000年。当時はMovableTypeもWordpressもなかった。
それ以来、ダラダラ続けて、その場その時の思いつきでいろいろ機能を付け足し現在に至る…18年め。

kindleだけだった頃とは違って、今は楽天koboも始まって配信するストアが増えてきた。

今のところ雑記帖では、Amazonへのコンテナを表示して、それ以外のストアはオマケの扱い。kindleありきで作ったコンテナ。
でも、ヨタ・ネタの雑記ならともかく、日野裕太郎の作品ページでそれはどうなの。だいたいゴチャゴチャしたコンテナでなんのことやら分かりにくい。ユーザー行動を誘うwebページでは情報は整理されるべき。

kindleもibookstoreもkoboも、ストアへの動線は同じ扱い。ゴチャついたコンテナ表示を止めて購入ボタンっぽくして並べることにした。

作品ページに表示する情報も統一した。
表紙画像、タイトル、定価、キャッチ、ページ数、本文一部抜粋。
アマゾンレビュー、twitterの感想ツイート、取り上げられたブログや掲示板。
その他関連記事。
サンプル表示リンク。

管理のためにデータベースに書誌情報などをブチ込んで、と思ったんだけど、この雑記帖以外でも使う可能性があるので、とりあえずは perl のデータとして記述。これならどこからでもスグに読み込んで使い回せる（そのうちデータベースに入れる、か）

今回の作品ページ機能追加は「ストアありき」ではなくて「タイトルありき」ということ。
昔からよく言われてるんだけど、別サイトを立ち上げるのもしんどいので、オレオレCGMの雑記帖に機能追加。
 
『おかえりください』https://t2aki.doncha.net/?id=1363395220
↑Amazonのコンテナ廃止。各ストアへ購入ボタン風味
↓従来のAmazonコンテナ使用

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

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