サイトのスマホ・モバイル対応
この雑記帖はスマホ版もあって、アクセスログをみると最近(世間さまのトレンドどおり)スマホ版へのアクセスが増えている。仕事がらみでもスマホ版のリクエストがあったりするだろう、ということで改めて見直し&調べてみた。
この雑記帖のスマホ版を作ったのは2011年頃だから3年ぐらい前になる。
その頃、スマホ版といえば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」
Ajaxの使い過ぎ
この雑記帖にはいたるところにAjaxのコンテナがある。本文を少しでも早く表示させようという意図で、本文以外のこれは後でいいだろうというコンテンツをajaxでの取得&表示に切り替えて行った。
予想通り効果的で体感実測(ストップウォッチ計測)で10秒近くスピードアップに繋がった。
…のはいいんだけど。
調子こいて片っ端からajaxにしたもんで、ふと気づいたら、記事で見せたいコンテンツがajaxコンテナだったりしてびっくりすることになった。絵に描いたような本末転倒。
(困ったことに)ヒマなので、Ajaxコンテナを見直し、静的に生成した(キャッシュ)部品に切り替えることにした。ついでに1ページ表示件数を10件から6件に減らして様子見。
目先の効果に飛びついて、運用していくうちに、あれ?これって?という賽の河原仕事。業務でシビアな環境にいれば気づくことなんだけど、連日格闘してたのはもう5年も前になるのでカンも鈍ったボケ老人状態。
厳しく自分を律することができるならともかく。ストレスフリーの独学独習・環境はやっぱりひとをダメにする。ストレスのかかったところで「このクソが」などと罵りながら仕事として関わらないと、だ。
もう4月も終わろうとしてる。いろいろ見直さないといかんなぁ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
一発芸:KDPセレクトのサンプルチェック
KDPにはKDPセレクトというkindle専売にするオプションがあって、無料販売やマージン、キンドルオーナーライブラリへの登録など、いろいろ恩恵がある。
詳しくはこちら https://kdp.amazon.co.jp/select
これらの恩恵を受けるには、専売のほかにも制約があって、そのうちのひとつに「ネットで公開するサンプルは本文の10%以内にすること」
で、これってどれだけ公開できるの?その10%ってどうやって計算すればいいの?知らずに規定オーバーして販売停止やアカウント停止なんてことになったらおっかないよね。
てことで、amazonが実際に公開しているサンプルをチェックすればいい…んだけど、いちいちサンプルダウンロードするのも面倒くさいし、ブログパーツなんかを導入してみるのも文字の分量を見るためだけにやってらんない。
ので、ざっとamazonが公開しているサンプルを眺めるためだけの使い捨てスクリプトを思いついた。
https://t2aki.doncha.net/tmp/kindle_sample.pl
Amazonの商品コードを入力すると公開されているサンプルを表示するだけ。
複数の作品をだーっと入力してだーっと表示する。
少なくとも公式で表示しているサンプルの分量なら表示させても大丈夫のはず(…んだけど、自己責任で判断してください)
昨日に続いての一発芸スクリプト公開のお知らせでした。
[04/20 14:34:46] 追記。参考にさせていただいたサイトなど
・「灯台杜と緑の少年」 Kindleストアにサンプル表示ボタンを追加する方法(とりあえず)
・「つんどく速報」 KDP書籍の内容をプレビューできるブックマークレットを用意しました
・「Long Tail World」 キンドル電子書籍をサイトに埋め込む方法:How to Embed Kindle eBooks
例によって、perlのLWPを使ってサンプルのあるURLにGETでリクエストするだけ。
ネタとしては。
取得するコンテンツ部分がgzipで圧縮されているので解凍する必要があった(ブラウザは勝手に判定して解凍している)
てことだけど、サンプルの元となるテキストは手元にあるので、いちいちHTTPでリクエストに行くと重くなるのでウチに導入はしなかった(同じサーバーにテキストを上げてそれを引っ張り出した方が早い)
↓Amazonが公開しているサンプルの該当部分をサンプル表示してます。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
一発芸:ツイートやtogetterから電子書籍を作る
ツイートやtogetterを電子書籍にしてkindleやiphoneにいれて、出かける時に「後で読む」をしてみようかと思い立ったので適当な使い捨てスクリプトにしてみた。
ttp://t2aki.doncha.net/tmp/t2h.pl
ツイートやtogetterのURLを入力するとツイートを取得して電子書籍で使うXHTMLに変換します。
[2015/05/24 22:38:30] ツイッターの仕様が変わったので、今は使えません。
URLからもわかるように、メンテをしていく予定は今のところ、ない。自分が次に使いたくなった時に不具合があったら直すかも。
やってることは単純で、Twitterやtogetterをクロールしてコンテンツを取得しているだけ。
取得したXTHMLをテンプレートの中のコンテンツXHTMLに上書きし、content.opfを2カ所編集して再度EPUB3に梱包すればできあがり。
(電子書籍として最低限のEPUB3ファイルを用意したので興味があれば中を覗いてください。え?こんだけでイイの?!というのが実感できると思います)
ちなみに、ことの発端は。
Twitterでフォローしている同人サークル『金属バット』三平x2さん(@sanpeimihira)の【萌える妖怪シリーズ】連続ツイート。
たとえば
↑がまとまったtogetterが https://togetter.com/li/654573
同じく同人サークル『クロヒス諸房』kyozyさん(@kyozy_tohno)の全力でくだらない『ハッターラ・キタクネー』連続ツイート。
たとえば
↑がまとまったtogetterが https://togetter.com/li/553959
このお二人、このネタはまじめにオススメ。
※ twitterから取得すると取りこぼすことがあるので、togetterから取得する方がいいと思います(togetterはモバイル版からツイートを取得)
ということで、イロモノ一発芸スクリプトのお知らせでした。
(もしかすると、ついのべやBL短歌などTwitter上での読み物をまとめて読むのに使える、かも)
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
めも:perlでcsvデータ
最近あまりスクリプトを書いてなくて、いざ書こうと思ったら忘れていてビックリしたのでメモ。
csv(コンマ区切り)に限らずタブ区切りでも同じく。
DBIを使ってデータベースと同じように扱うモジュールもあるけど、そこまでのスペックは不要で、とりあえず目の前にあるエクセルや管理ページからダウンロードしたcsvを扱えればそれだけでOKというところ。
コンマやタブで区切られて、ヘッダがついていてデータが並んでいる
てな感じのデータ。
これを split してそのまま配列に入れればいいだけなんだけど、
単純に区切りでバラして配列に入れただけだと、データを取り出す時に $w[1] などと書くことになる。それよりはハッシュ(連想配列)にして $_->{title} などとヘッダでつけた名前(キー)で取り出せた方が間違いも少ない。
ヘッダをキーにしてデータを入れて取り出せるようにするのが以下(改行やEncodeなどは省略)
たぶんここがハッシュ(連想配列)の面白い書き方。
ヘッダ(文字)の配列をキーに、データの配列を値に一度に入れてしまう部分。
これのおかげで、カラム数が100とか200とか多くてもへっちゃら。
@bufという配列に一行ずつハッシュとして入って、データの取り出しもキー(名前)でわかりやすく。
てのを、仕事でもプライベートでも何度もあちこちで使い捨てで書き散らしていたんだけど、メモがどこにも残ってなかったので改めて。
どうでもいいけど、「ハッシュ」って色気がないよなあ。せっかく「連想配列」というそそられる名前があるんだからこちらを使うべき。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
電子書籍で紙の再現は無理
ワードのdocxファイルをkindleに、EPUB3にというネタがTwitterの観測範囲で盛況だったりするのをのんきに眺めてたら、別件で雑談・相談していたところで「InDesignの組版データをもらえばそのままEPUB3ができるんですよね」とふられて腰が抜ける。
ワードでレイアウトデザインしてプリントアウトしたものも、InDesignでページレイアウトして一冊作ったものも、そのままEPUB3のリフローにして電子書籍で再現するのは難しい。て、この雑記帖でも何度か同じことを書いてる。
「でも、図版が多い場合は、InDesignで組版データをもらえばEPUB3にするのも早いんでしょ」
と言われたんだけど、それも紙がそのまま再現できると思ってるところからくるんだよなあ。
InDesignでEPUB3出力したものをそのまま細工なしにEPUB3やmobiとして使えるという話は、今のところあまり聞かない。EPUBCheckのエラーや警告を潰すために吐き出されたEPUB3ファイルを開いて調整が必要になるし、また、凝ったレイアウトやデザインは、もし仮に再現できるとしても素直なXHTML&スタイルシートではなくてトリッキーなことをしなきゃいけない一発芸で続きがない。
(fix型で組めばほぼそのまま再現できるだろうけど、いちから作り直しだしなあ)
InDesignが吐き出すEPUB3ファイルを開いて新たにXHTMLを書き直したりスタイルを当て直したりするのはひたすら面倒くさい。
てことで、現状は元原稿のワード(docx)かテキストファイルを預かって、元になる紙の本があるならPDFなどレイアウトデザインのわかるものをもらって作った方が早いかな。
docxを預かった場合、レイアウト再現はしないけど、ボールドや文字色、下線や傍点、ルビ、縦中横など文字装飾系はワードそのまま再現=HTMLタグをつけられるので作業的にはかなり楽になる。
さらに
・InDesignも適切に正しく目次などを設定してXMLで保存すると
・ワードも適切に正しく目次などを設定して保存すると
両者とも、ただのXMLなのでperlやphpなどのスクリプトを使って加工するのは簡単で、コンバート作業はもっとらくちんになるはず…なんだけど「適切に正しく」というのが難しい。
著者がフリーダムに書いたもの・編集が個々の本の体裁に合わせて指定したものなので、文書構造などないことが多い。ここは個別に擦り合わせ現物合わせ作業が必要となっている。
もうひとつついでに、やはり話をしていて「校正どうしてます?」と。
・元原稿データのワードのコメント機能などを使って校正してもらう
・著者側でプリントアウトしたものに文字通り「赤入れ」してそれをPDFにしてもらう
という感じ。ここも労力と時間がかかってしまうところ、かな。
以前、別のところで電子書籍なんですが、と話を持っていったら
「ああ、お皿つけるんでしょ。高くつくよね」
と言われて愕然というか慄然とした。
…ちなみに、以前というのは今年2014年の話。
(註:お皿とはCDROMやDVDROMのことを言います)
数冊出してみたけど思ったほど売れないので撤退したという話もTwitterで流れてたり。
温度差というかがスゲーなあ。
そういや。さすがAmazon公式月替わりセールに乗ると売れる(って、おそらくほかの方はもっと行ってると思う)売れた・売れるという話は書いても良いということらしいので、セールが終わったらちょろっと書きます。
ちなみに。1日から11日朝までセール対象のタイトル(『和猫』)は有料ダウンロードが約100冊、どういうわけかレンタルも25本程度。当然初動からは落ちてるけど日々そこそこ出ていて感謝
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」