ブラウザでバーコードをスキャンしてISBNを取得する
2006年公開のWEB本棚「趣味は読書２」のスマホ版にバーコードをスキャンして本を登録できるようにしたのでメモ。
このWEB本棚は、なんだかんだ15年以上続けていて、最初は自宅で組んだパソコンをサーバーにして公開してたんだけど、東日本大震災があって、計画停電とかいつ停電してもおかしくない状況というのがあって、レンタルサーバーに引っ越し、現在にいたる。
WEB本棚「趣味は読書2」 https://doncha.net/
もともと自分で使うことを考えてたので、既読・未読がわかって、簡単なメモやカテゴリをつけられればいいので、機能的には十分足りてる。
ただ、1冊ずつISBNを手入力するのがちょっと面倒くさい。ガサツなわたしはISBNをタイプミスしてエラーになることも少なくないし。
なもんで、後づけで、アマゾンの検索結果を一覧にしてチェックしたものを本棚に登録できるようにして使ってたら、2019年のAPIの利用規定改定でアフィリエイトで売上のないアカウントはAPIを利用できないということになった。当然アフィリエイトの売上などないわたしは、APIを利用した検索結果からの一括登録ができなくなってしまった。
これを作った当初の状態に戻っただけなので、まあしょうがないな、ぐらいな感じ。本を買っては／読んでは、ちまちま本棚に登録していた。
てな昨今だったわけだけど。
イーロン・マスクがTwitterを買って、何かと騒がしいので、以前アカウントを作っていたマストドンに久しぶりにログイン。
ここは本好き、本読みのひとが集まるサーバー（インスタンス）で、流れてくる話も小説がらみが多くて静かに面白い。本の整理、積読なんかの話も流れてくる。
本好きの集まるマストドンはこちら
Bookwor.ms
それに刺激されて、ふたたびだかみたびよたびだか、WEB本棚の見直しをしてみた。
機能的には満足しちゃっていて、データベースの構造もシンプルで必要十分、昔の自分をちょっと褒めてもいいかもだった。
UIを含めたデザインが古臭くて気に入らない。でも、変更するとなると、かなり面倒くてさすがに手をつける気合気力体力がない…IE対応なんかのスタイルシートも混じってて、そのうち考えないとなあ。
スマホ版も見直しかな、とスマホでログインして触ってみて、そういやISBNの入力をバーコードスキャンでやりたいと思ってたんだと。
さっそく検索してみた。
…て、ここまで、自分でもびっくりするぐらい無駄なまえがき、無用なゴタクが長くてすまん。もう爺、老人なもので許してください。
ブラウザからスマホのカメラを使うためのjavascriptライブラリも公開されていた。
Quagga.jsというライブラリで、公式ページはこちら→ QuaggaJS
javascriptも詳しくないし、読み取り精度をあげるためには、HTML5あたりのcanvasも使う必要があるらしい。
あちこち実装されてるかたのサイトを拝見しては、ちょっとずつ試して試して、最終的にこちらのサイトに助けられて、どうにかISBNのバーコードスキャンに成功。
QuaggaJSを使ってブラウザでバーコードスキャン：なんぶ電子
ほんと、こちらのページには感謝しかない。
テストページでいろんなコードを試してまる一日。javascriptだけじゃだめで、canvasも使う必要があるのが大騒ぎで、javascriptが意図通りじゃないのか、それともHTML的な問題なのか切り分けるのに時間がかかった…って、どっちも自分のスキル不足が原因なんだけど。
WEB本棚「趣味は読書２」スマホ版 https://doncha.net/sp/ 
WEB本棚「趣味は読書２」ついて https://doncha.net/about.pl
WEB本棚「趣味は読書２」で出来ること https://doncha.net/about.pl?c=help
たぶん、小学校の頃、自動車文庫（移動図書館）がなければ、いまの自分はなかった。
ほんと、小説は面白いぞー！
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
一発芸：縦書き段組レイアウトのためにテキストを分割
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」
サンプルの縦書き段組表示
やっと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」
Android標準ブラウザでダウンロードできない現象
Android標準（？）のブラウザでPDFやzip、epubファイルのダウンロードができなくて吐血。
PCのブラウザやiphone(iOS)、AndroidでもChrome、Firefoxなどのブラウザだと意図通り問題なくダウンロードできるのに、Android標準（？）のブラウザだとダウンロードできない。というか、なぜか、ページのHTMLをダウンロードしてしまう。
謎な挙動のスマホ標準ブラウザに対応する必要があるのかという、そもそものところはまた別として。
調べてみたら、検索のしかたが悪いのか情報が錯綜していて正解が見えてこない。
スクリプトが吐くヘッダは定型。
このヘッダに続いて、epubファイルが標準出力に吐き出される。ほかのいろんなスクリプトで使っているやりかたで、Androidスマホ以外では問題なく意図通りダウンロードできている。
老眼血眼、しこたま検索しまくって、こちらのサイト
「コンピュータの日々 Android付属ブラウザのファイルダウンロードの動作」
AndroidのブラウザがPOSTメソッドでサーバにリクエストして、サーバからContent-Disposition:attachmentなヘッダを受け取ると、再びGETメソッドで同じURLにリクエストを送信するとのことです。
へ？ と思ってアクセスログを見るとAndroidスマホのブラウザ(docomoのスマホ L-05E 、mobile safari)は、確かにPOSTでアクセスしてきた後、なぜかGETでアクセスしている。
ページのHTMLを取得してるので、最初はブラウザのキャッシュを疑ったんだけど、どうやら真相はこいつ。attachmentで渡してるはずのepubファイルではなくて、次のGETでページのHTMLをダウンロードしているご様子だ。
なんでやねん。
以上は、とりあえずのメモ。
これじゃ、スクリプトで吐き出させたんじゃダウンロードしてくれない、ということになる。
ダウンロードしてもらう方法としては、一度サーバーにファイルを書き出して、静的リンクをクリックしてもらうしかない…うーん、ほんまかいな。
スクリプトで直接ダウンロードする方法をもうちょっと調べてみる。たぶん、わたしのスキル不足だと思う（詠み人知らず）
[12/20 21:30:21] 追記。
現状、スマホ標準のブラウザは .epub ファイルにリンクしても、ブラウザが epub ファイルを開いて表示しやがる。
バイナリを文字化けした文字にしてブラウザにダアアアアッと表示する。なんじゃそりゃ状態。
なもんで、.htaccess で（httpd.confでもいいけど） MIME TYPE を指示(指定)してやる必要がある（epubという拡張子のファイルにアクセスされたらどうするのかの設定）
addType application/octet-stream .epub
…て、epub自体が最近なので、Android標準ブラウザに適切な対応を求めるのは可哀想、というか無理かもしれん。もう意味不明なブラウザを使うのではなくて、Firefoxなり、PCでも使われるブラウザとその挙動を標準にすべきだろう。
[2016/01/03 10:47:38] 追記。
どうやら現状のAndroidの「ダウンロード」（ダウンローダー）はSSLのページや認証が必要なページからはダウンロードできない困った仕様っぽい。
・ブラウザで閲覧→PDFやzipをタップ→ダウンローダーが起動してzipやPDFをダウンロード
という流れだとダウンロードできない。
・ブラウザで閲覧→PDFやzipをタップ→ブラウザがPDFやzipをダウンロード
だとダウンロードができる。Firefoxなどだとダウンロードができる、ということ。
スマホって、なんでまた「ダウンローダー」なんてのを噛ませることになったんだろう。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
サイトのスマホ・モバイル対応
この雑記帖はスマホ版もあって、アクセスログをみると最近（世間さまのトレンドどおり）スマホ版へのアクセスが増えている。仕事がらみでもスマホ版のリクエストがあったりするだろう、ということで改めて見直し＆調べてみた。
この雑記帖のスマホ版を作ったのは2011年頃だから３年ぐらい前になる。
その頃、スマホ版といえばjQueryMobileというJavascriptのフレームワークを使うのが主流…というかコレはかなりスグレもので、ほとんど何も考えずにデータだけを流せば、ページ遷移などの機能面はもちろん、アイコンや部品などのデザインパーツなども当時流行りのものにしてくれて感謝・感激したものだった。
ところが、今週ちょっと（ほんとうにちょっと、ぐーぐる様小一時間程度）調べたところ、今やモバイル版はHTML5とCSSを駆使したレスポンシブデザインとやらで対応するのが主流。
そこまでのデザインは求めてないけど、どうせサーバー側で出力するデータを制御するわけだし、それに合わせたCSSを作って読み込ませるだけ、というのは魅力的。丸投げできるjQueryMobileに感謝しつつも、ちょっとクセのあるJavascriptの使い方（特にAjaxまわり）は、素人のわたしには難しかった。
てことで、今日は朝からごそごそと午前中をつぶして雑記帖モバイルを作り直した。
USER AGENTで判定して振り分け。モバイル専用のスクリプトへリダイレクトする必要もなく（＝URLが同じ、というのはネットだとポイントが高い）運用できることとなった。
表示系で少しひっかかったのでメモしておくと。
・表示がPC版を縮小しただけに見える
→viewport を device-width に設定すると勝手によろしくやってくれて解決
・イメージがハミ出してレイアウトが乱れる
→ imgに max-width:100% で解決
その他、モバイル用には width をピクセルなどの絶対値指定してあったところを％やemなど相対値で指定するだけでほぼモバイル対応は完了だった。
情報的にはPC版からサイドメニューなど削ったけど、特に問題もなさそう。
jQueryMobileの管理下でうまく動かせなかった（←わたしのスキルが足りなくて）Javascirptも今回のモバイル版ではPC版同様に動かせることとなった。
サンプルの表示
PC版
モバイル版（iPhone4S）
PC版だと横スクロールバーをマウスで動かすのがありえないインターフェイスなんだけど、モバイルだと指をスライドさせるだけで読めるので、これなら全然OKだった。驚いた。うーん、タッチパネルがページをめくる感じにしてくれるんだな。
あ。突っ込まれる前に。
特にリンクはスマホに最適化したものではないので使いにくくてUI的にありえない状態です、はい。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
webkitが分裂するのか
Appleとgoogleが中心となって開発、採用してきたレンダリングエンジンのwebkit。今度googleがそのwebkit陣営から分かれて独自のBlinkというレンダリングエンジンの開発、採用するというニュースにびっくり、というかげんなりというか。
この結果、webkitは少数派に転落。今後はBlinkがシェアを握る、とか。
https://ascii.jp/elem/000/000/778/778554/
今まで、WEBサイトを作っていて、表示や動作をチェックするのは
・webkit → chrome safari
・gekko → firefox
・trident → IE
の３つだった（って、IEはもうほとんどノーチェック）のが今後はBlinkが増えて４つでチェックすることになる。
動画配信のECサイトのに在籍していた頃の悪夢が再びみたび。当時はアクセスログからもユーザーの8割はIE。
IEをターゲットに作ってWEB標準に合わせる vs WEB標準で作ってIEを別扱いにする
どっちにするか議論した結果、開発時点ではWEB標準の firefoxとchromeをターゲットに作って、IE用に別スタイルシート、ということでやっていた。そちらの方があちこちにノウハウもあって断然効率的だった。
同じソースを表示させてなんでこんなに違うんだ、と。IEの素行の悪さに殺意さえ覚えつつ。
webkitもBlinkも、FireFoxのGekkoに代わる？新しいServoも、WEB標準だろうからそんなに酷い違いは出ないと思いたい。
電子書籍もまったく同じ。アプリやデバイス、リーディングシステムで見た目が変わるのは勘弁してくれ。
「いつどこでだれが見ても同じものを」というのは紙媒体にはかなわない。
ユーザーに優しいかどうかは別の話になるけどね
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
