サイトのスマホ・モバイル対応
この雑記帖はスマホ版もあって、アクセスログをみると最近（世間さまのトレンドどおり）スマホ版へのアクセスが増えている。仕事がらみでもスマホ版のリクエストがあったりするだろう、ということで改めて見直し＆調べてみた。
この雑記帖のスマホ版を作ったのは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」
自己振り返りシート
先週の木、金で行ってきたアフターミドル世代（45歳〜54歳）のためのキャリアデザイン研修。２日間行ってみて初日の印象とあまり変わりなく、正直なところ求めていたものとはちょっと違っていた。
わたしが求めていたのはもっと具体的なことで、自分の年齢やキャリアと求人状況、企業名が出て仕事内容が語られる・前例が語られるような講座、セミナーだと思った。そもそも、いまさらこの歳で自分探ししてるようでは人生詰んでるだろ。
『ミドル世代のキャリアデザイン研修』（初日） https://t2aki.doncha.net/?id=1366277947
「東京しごとセンター」 https://www.tokyoshigoto.jp
とはいえ、産業カウンセラーでコンサルティングもする講師の話が面白かったことも確か。なんせ、ひと前でしゃべり慣れてるし、カウンセラーとしての訓練、教育も積んでいる。
ひとつこれはいいかも、と思ったのが自己振り返りシート。
左から右に時系列。上下するグラフもどき。このとき良かった、このとき悪かったと人生の振り返り、というやつだ。
良いと思った時、悪いと思った時をこういうグラフにして、おのおの何がその時に起こったのか・やったのかをできるだけ細かく記入していく。あくまでも主観だ。上がった時下がった時の自己評価をすることで、自分になにがあるのか、自分の中の材料を探す。ということらしい。
意外にこれはハマった。へええ、そんなもんか、おれ。ということが出てきたので面白かった。「絵」にするのがいいんだろうか（時系列をどの幅でやるのか、それももしかすると自由に設定してその時の気分でこの時期限定とかやるのも面白いかもしれない）
ちょっとコレはオススメ。時間があったらやってみても損はないと思う。
という同じ世代の失業者たちと研修のスケジュールをこなしてきた。
特に交流会などがあるわけでもなく、お互い名前と顔が一致する程度。自分も含めてだけど、この時点で失業状態、会社組織にハマるかどうかかなり疑問。わたし自身は請負や業務委託をいくつか複数こなして帳尻合わせ、と思ってる。
研修でもワークライフバランスという言葉が使われたように、この歳になると、今後なにを重視していくかを考えつつ、その中のひとつとして仕事を入れていく、んだろう。
» ローカル環境で電子書籍を作る、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」
電子書籍の目次が難しい
無職50代の請負仕事に、電子書籍EPUB3ファイル制作もやってる（年金まで食っていかないと）
以前も書いたように元になるデータはHTMLだったりワードだったり。
電子「書籍」ということで、目次も凝ったデザインレイアウトを求められることがある。でも、いわゆる書籍の目次と違って電子書籍の目次は「ナビゲーション」で、アプリやデバイスなどのリーディングシステムと密接密着。
使えるタグが限られている。
https://www.idpf.org/epub/30/spec/epub30-contentdocs.html#sec-xhtml-nav
使えるのは、hタグ、リストタグ（ol li）、ハイパーリンク aタグに、spanタグぐらい。
WEBのHTMLのようにdivタグ使ってコンテナごとにデザインレイアウトはできないっぽい。また、リストタグの中はaタグかspanタグで装飾されている必要があって、テキストをナマで置いたり改行のbrもエラーとなる。
クライアント、デザイナーさんに説明してもらえるとありがたいんだけど、それが難しい場合もあるようで…となると、本来やっちゃいけないと思いつつ、下請けに「No」はない。
ナビゲーション文書（nav.xhtml）とは別に「目次」を作って並べてしまう。その時、ナビゲーション文書がspineに入っていると（kindleの場合？）「linear＝no」にしても表示されてしまうので、spineから外しておく。
epubcheckでエラーにこそならないものの、しっかり警告されるし、mobi化してプレビューワーでチェックすると、ナビゲーションは未定義になってしまう。
内容が変更になった場合など、目次をふたつ書き換えることになり、ミスの元となる。
電子書籍の特性を認知してもらうにはまだまだ時間がかかりそうで。そうこうしているうちにいろんなEPUB3ファイルが出回ることになるなぁ。
…うーむ。こりゃ石を投げられてもしょうがない、おれ。
twitterで情報をいただきました。ありがとうございます！
ナビゲーション（nav.xhtml）のlandmarksでHTML目次を指定すればイケる、とのこと。
（でも、変更時のメンテが面倒なので、ナビゲーション文書ひとつでやりたいなあ）
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
腐れクロウラー撃退に成功
てことで、無事、ど腐れクロウラーのBecomeBotを撃退できてるようだ。
[client 64.124.85.211] client denied by server configuration:
読書SNS の方は、まだ人数が少ないのでなんとも判断のしようがないけれど、バグの検証なんかも進みつつ、かな。
ケータイの固体識別番号を取得するのってどうやってんのか、セッション管理はどうやってんのか、てなところを調べてみて可能ならケータイからのアクセスもしたいところ。
最低でも、自分の本棚チェックはしたい。ていうか、そもそもこいつの目的のひとつに「一度読んだ本の２度買いを防ぐ」というのがあって。ケータイでアクセスしてチェックできれば本屋で無駄づかいすることもなくなる、と。
まだ負荷チェックになるほどアクセスがないので、そこんとこをクリアしてから、の話かなぁ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
すっきりしない体調だけど
な〜んかしゃき〜っとせんのだよなぁ〜、と「〜」だらけな体調。鼻の奥に薄紙が貼りついたような感覚が抜けなくて、微妙に寝汗。鼻汁が黄色というか緑色というか、きちゃなくて嫌んです。
今日は早朝からゴミ置き場まで数回往復して、目につく燃えないゴミを片っ端から。アパートの小さなゴミ置き場が、わたしの出したゴミで２／３近くまで積みあがった。ちょっとすっきりした気分。あとは週明けにリサイクルで大モノを運び出してもらえばわたしの方の引越しはほぼ終了、かなぁ。
んで、ガス台もゴミ袋の中で冷蔵庫の中は氷だけ、という状態、メシを食いに出るついでに三鷹の職安へ。
なんかないかなぁ、と新着情報を端末でチェックしたら、年齢不問・編集募集が！……一瞬、を！とビックリマークを多用したんだけど、見たらばわたしが２月後半いた上流階級でがっくり。職場環境を変えない限り求人を続けることになるんだろうね。さらに見てると45歳以下・記者・編集募集が。ますこみ同好会、ってどんな会社やねん（少し表記を変えてあります）有限会社とも株式会社とも書いてない。給料は18万〜21万で、保険関係は雇用と労災だけなのに退職金制度あり。社員10人で創業50年とあるが、ぐーぐる様で検索しようにもこんな名前じゃ検索絞り込みようがない。大学のサークルじゃないんだから。ううむ…てことで見送り。
体調も体調だし、三鷹でメシを食ってトイレクイックル詰め替えシートを買ってちゃっちゃと帰宅。部屋の片付けしようと思ってもだるくて起きてられず昼寝ぶっこく。平日の昼下がり、うつらうつら昼寝する中高年の失業者って、どう贔屓目に見ても（ってこんなものを贔屓目に見るなよ）だらしない絵面にしかならん。
昨日も書いたけど、調理系が出来ない状態で、今晩もメシを求めてさ迷い出る感じか。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
