サイトのスマホ・モバイル対応
この雑記帖はスマホ版もあって、アクセスログをみると最近（世間さまのトレンドどおり）スマホ版へのアクセスが増えている。仕事がらみでもスマホ版のリクエストがあったりするだろう、ということで改めて見直し＆調べてみた。
この雑記帖のスマホ版を作ったのは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的にありえない状態です、はい。
Ajaxの使い過ぎ
この雑記帖にはいたるところにAjaxのコンテナがある。本文を少しでも早く表示させようという意図で、本文以外のこれは後でいいだろうというコンテンツをajaxでの取得＆表示に切り替えて行った。
予想通り効果的で体感実測（ストップウォッチ計測）で10秒近くスピードアップに繋がった。
…のはいいんだけど。
調子こいて片っ端からajaxにしたもんで、ふと気づいたら、記事で見せたいコンテンツがajaxコンテナだったりしてびっくりすることになった。絵に描いたような本末転倒。
（困ったことに）ヒマなので、Ajaxコンテナを見直し、静的に生成した（キャッシュ）部品に切り替えることにした。ついでに1ページ表示件数を10件から6件に減らして様子見。
目先の効果に飛びついて、運用していくうちに、あれ？これって？という賽の河原仕事。業務でシビアな環境にいれば気づくことなんだけど、連日格闘してたのはもう5年も前になるのでカンも鈍ったボケ老人状態。
厳しく自分を律することができるならともかく。ストレスフリーの独学独習・環境はやっぱりひとをダメにする。ストレスのかかったところで「このクソが」などと罵りながら仕事として関わらないと、だ。
もう4月も終わろうとしてる。いろいろ見直さないといかんなぁ。
一発芸：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でリクエストするだけ。
http://kindleweb.s3.amazonaws.com/ASIN/gz_sample.html
ASINのところはAmazonの商品コード
ネタとしては。
取得するコンテンツ部分がgzipで圧縮されているので解凍する必要があった（ブラウザは勝手に判定して解凍している）
use Compress::Zlib；
if($r->header(’content-encoding’) =~ m!gzip!){
my $content = Compress::Zlib::memGunzip($r->content)；
}
てことだけど、サンプルの元となるテキストは手元にあるので、いちいちHTTPでリクエストに行くと重くなるのでウチに導入はしなかった（同じサーバーにテキストを上げてそれを引っ張り出した方が早い）
↓Amazonが公開しているサンプルの該当部分をサンプル表示してます。
一発芸：ツイートや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を２カ所編集して再度EPUB3に梱包すればできあがり。
（電子書籍として最低限のEPUB3ファイルを用意したので興味があれば中を覗いてください。え？こんだけでイイの？！というのが実感できると思います）
ちなみに、ことの発端は。
Twitterでフォローしている同人サークル『金属バット』三平x2さん（@sanpeimihira）の【萌える妖怪シリーズ】連続ツイート。
たとえば https://twitter.com/sanpeimihira/status/454153039218102273
↑がまとまったtogetterが http://togetter.com/li/654573
同じく同人サークル『クロヒス諸房』kyozyさん（@kyozy_tohno）の全力でくだらない『ハッターラ・キタクネー』連続ツイート。
たとえば https://twitter.com/kyozy_tohno/status/455272513488949248
↑がまとまったtogetterが http://togetter.com/li/553959
このお二人、このネタはまじめにオススメ。
※ twitterから取得すると取りこぼすことがあるので、togetterから取得する方がいいと思います（togetterはモバイル版からツイートを取得）
ということで、イロモノ一発芸スクリプトのお知らせでした。
（もしかすると、ついのべやBL短歌などTwitter上での読み物をまとめて読むのに使える、かも）
めも：perlでcsvデータ
最近あまりスクリプトを書いてなくて、いざ書こうと思ったら忘れていてビックリしたのでメモ。
csv（コンマ区切り）に限らずタブ区切りでも同じく。
DBIを使ってデータベースと同じように扱うモジュールもあるけど、そこまでのスペックは不要で、とりあえず目の前にあるエクセルや管理ページからダウンロードしたcsvを扱えればそれだけでOKというところ。
コンマやタブで区切られて、ヘッダがついていてデータが並んでいる
date，title，count，amount
2014/4/1，アロイのやさしい神さま，2，210
てな感じのデータ。
これを split してそのまま配列に入れればいいだけなんだけど、
my @w = split(’，’)；
単純に区切りでバラして配列に入れただけだと、データを取り出す時に $w[1] などと書くことになる。それよりはハッシュ（連想配列）にして $_->{title} などとヘッダでつけた名前（キー）で取り出せた方が間違いも少ない。
ヘッダをキーにしてデータを入れて取り出せるようにするのが以下（改行やEncodeなどは省略）
my @head；
my @buf；
while(<IN>){
my %h；
my @w = split(/，/)；
@head=@w ， next if( ! @head )；
@h{ @head } = @w；
push(@buf， \%h)；
}
たぶんここがハッシュ（連想配列）の面白い書き方。
ヘッダ（文字）の配列をキーに、データの配列を値に一度に入れてしまう部分。
h{date} = ’2014/4/1’； h{title} = ’アロイのやさしい神さま’； h{count}=2； h{amount}=210；
↑と同じことを一行で↓
@{ h{ @head } }= @w；
これのおかげで、カラム数が100とか200とか多くてもへっちゃら。
@bufという配列に一行ずつハッシュとして入って、データの取り出しもキー（名前）でわかりやすく。
てのを、仕事でもプライベートでも何度もあちこちで使い捨てで書き散らしていたんだけど、メモがどこにも残ってなかったので改めて。
どうでもいいけど、「ハッシュ」って色気がないよなあ。せっかく「連想配列」というそそられる名前があるんだからこちらを使うべき。