2016_10
28
(Fri)11:28
立ち読みページ作成 その4 (*´∀`*)

htaccessで、スマホページに自動振り分けできました。
前回出来なかったのは、多分記述自体を間違ったのでは…
何しろ、スマホで見てもエラーになるとかじゃなく、何も起きなかった(ToT)ので…

今回はこちらを参照しました。
htaccess、php、JavaScriptの3通りが、並べてわかりやすく解説されてます。
で、前回htaccessで失敗したのでサーバーがこの処理を許可してない可能性があるかも?にもかかわらず、しつこく今回もhtaccessでチャレンジしてみたところ、出来ちゃいました。
やったー
つまり前回出来なかったのは、サーバーのせいじゃなく私がどっか書き間違えたのよね…きっと…
ほぼコピペなのに書き間違えるとか、残念すぎる★

具体的方法と詳しい説明は、上の参照元ページを見てください。
ここでは参照元ページに書いていないことを…

htaccessファイルの作り方:
テキストファイルを新規作成し、それに .htaccess と名前を付ける。
拡張子.txtが付いて .htaccess.txt になっていても、とりあえず気にせずに。
このファイルを開いて、参照元ページにあるコードをコピペ。
リダイレクト先を適宜書き換えて保存。
これを、振り分けを実行したいフォルダにFTPなどでアップして、拡張子.txtを削除して、ただの「.htaccess」というファイルにする。

6行目、 RewriteRule ^(.*)$ ここのアドレス/$1 [R,L] は、ルートフォルダからみたアドレスにする。

※レンタルサーバーによってはhtaccessは設置できない場合があります。

たった7行で出来るとは楽♪
でも、ユーザーが自分で見るページを選べるJavaScript版が、本当は一番ユーザーフレンドリーなんでしょうね。
振り分け対象にタブレットは含まれてないので、小表示のページにはスマホ用に切り替えられるボタンを付けました。
以上で立ち読みページ作成は「完」、ということにしておきます…

ps.
ページの拡大縮小は、metaダグのviewportでuser-scalableをyesにすると表示がガチャガチャになるので諦めました。
web拍手 by FC2
2016_10
26
(Wed)11:04
立ち読みページ作成 その3 (-.-;)

スマホページはslickというjsを使って作ってみました。
turn.jsが差し替えるだけの簡単仕様だったのに対し、こっちは…まあ、これが普通だけど…ちょっとわかりにくい感じでした。
微妙に表示が調整不足なんだけど、CSSじゃなくjsで設定がされている部分かもしれん。
というわけで、これ以上はそう簡単には調整できない感じ、私には。
システムエンジニアの次女に、Chromeの開発者ツールを使うと、表示の設定がどこでされているか簡単にわかって便利だよ、と勧められたけど、ま、理系でもない素人の私にはちょっと高いハードルかな…。
プログラムの中身に手を付けるのは危険★

次女は、他人が書いたコードやプログラムはわかりにくいので初めから自分で書く方がマシ、というご意見。
すげーな、SE。
言ってみたいわ、そんなこと(笑;
実際、次女の職場の先輩スーパープロブラマーは、市販品が使いにくいからと言って、自分で代わりのソフトを作って使ってるとか。
その方、「何でフリープログラマーとして独立しないんだろう?」と周囲に言われるくらいのスキルの持ち主だそうだけど、本人は会社員でいた方が気楽らしい…
うん、それはわかるかな。
フリーランサーは結構大変よ★
でも、世の中にはそーゆ―すごいSEさんが色んな会社内にゴロゴロいるんだろうなあ。

そんなこんなで自分にスキルがないもんで、スマホでアクセスすると自動的にスマホページに飛ぶ、とゆーのは実現できませんでした( ノД`)
htaccessで振り分ける方法を試したんだけど、ダメでした。
もしかして使ってるサーバーがパスワード制限以外許可してない??
JavaScriptでもできるとか、次女にはphpで出来るのでは?と言われたけど、自力じゃ無理です~★
とゆーわけで、今はまだ閲覧者が自発的にスマホページに移動する仕様ですm(_ _)m → 振り分けに成功しました

↓スマホページはこちら。タブレットでも良かよ
QRcode (1)
web拍手 by FC2
2016_10
21
(Fri)22:38
立ち読みページ作成 その2~(^-^)/

2016年6月現在のモニター解像度番付(?)によれば、1位は1920×1080(27.13%)、2位は1366×768(19.13%)だそうです。
参照元
で、1920✕1080モニターで作った昨日のページを1366✕768で見てみたら、本が枠からはみ出して大変残念なことになっていたので、横幅1366以下用ページを別に作り、モニターサイズによって表示ページを振り分けるようにしました。

▽HTML内
〈head〉~〈/head〉に

<script type="text/javascript">
w = screen.width;
if (w <= 1366) { location.href = "A.html" };
if (w > 1366) { location.href = "B.html" };
</script>

これで、横幅が1366以下のときはA.html、1366を超えるときはB.htmlが表示されます。
もっとややこしいのかと思ったら意外にあっさり。
簡単で良かったです。

これにしたことで、スマホで見ると横幅1366以下用のページが表示されるようになりました。
…小さすぎて読めん(゚д゚)
1920用だったら辛うじて読めたけど★
なんかねー、拡大できないページなのよね。
きっとどこかをいじると拡大できるようになるんだろうけど、わからんし。
どっちみちスマホ用は別に作るつもりだけど。
そうすると、スマホでアクセスした時はC.htmlを表示する、っていうアレにしないといけないわけね。
うまくできますように。。。
web拍手 by FC2
2016_10
20
(Thu)16:29
本の立ち読みページをturn.jsというスクリプトで作ってみました。
rojo.jpg

パラパラと本をめくってる感がある効果のJavaScriptですね。
プログラムの最終更新が2013年と、やや古かったので、最初は別のを使おうと思ったのだけど、いらんものが色々ついてたりデザインカスタマイズがしにくそうだったりしたので、これにしてみました。
シンプルで綺麗で軽くてわかりやすいので、お薦めです。

ダウンロードすると、サンプルページが丸ごとフォルダに入ってるので、ページファイルを自分のものに差し替えるだけで使える超簡単仕様。
表示はサンプル通りのサイズでいいなら困らないけど、サイズを変えたい場合はちょっといじらないといけないです。
↓私はここらへんを自分の都合に合わせて幾つか変更しました。

▽CSSファイル内
.flipbook-viewport .container{
position:absolute;
top:38%;
left:43%;

margin:auto;
}

.flipbook-viewport .flipbook{
width:1128px;
height:800px
;
left:-461px;
top:-300px;
}

.flipbook-viewport .page{
width:564px;
height:800px;

background-color:white;
background-repeat:no-repeat;
background-size:100% 100%;

▽index.html内
$('.flipbook').turn({
// Width
width:1128,
// Height
height:800,
……

デフォルトは右開きなので、左開きにするには、ページをくくってるタグ〈div class="flipbook"〉に dir="rtl" というオプションを追加して〈div class="flipbook" dir="rtl"〉にすればOKです。

一応スマホ対応してるけど、サイズ感が微妙。
何かしらいじれればどうにかできるんだろうけど、そこら辺は諦めよう。
スマホ対応ページは別にフリック/スワイプ対応のスクリプトでどうにかしようかなと思いつつ…
今すぐは面倒なので、いずれ頑張ろうっ★
web拍手 by FC2
2016_10
15
(Sat)14:11
9月は残暑も秋晴れも台風が蹴散らしていったので、10月に入ってようやく秋らしい好天がやってきた、と思ったら、季節もすっかり進んでましたね。
半袖からいきなり長袖。
七分袖を着る間が無かったなあ。
そんな秋晴れの今日、向かいの家の小学一年生は友達招いてノースリーブで水遊び。
さすが子供だ、恐るべし。


夏より秋に入ってからの方が元気なマリーゴールド。
台風で一株茎が真っ二つに裂けたけど、元気に咲いてる。


秋明菊は結局花びらのバランスが悪かった。
こういう種類?


夏中玄関前を飾ってくれたペチュニアが終わったので、交代要員のビオラ。


いつぞや買って地植えしてあったフランネルフラワーが咲いてる。
放ったらかしだから花が小さい。


関係ないけど、先日娘たちがカービィカフェで買ってきたお菓子。
シュークリームの上にカービィマカロンが乗ってる。
可愛い♡
web拍手 by FC2
2016_10
06
(Thu)16:11

鉄腕アダム 1 (ジャンプコミックス)

ダンナが居間にポロッと置いていたので開いてみたら、お!絵がうまい!見やすい!とゆーことにまず惹かれて読み始めました。
やっぱ絵が上手い漫画はいいな。
しかも描き込み過ぎてないあっさり感がいい。
最小限のタッチで見せるのって、実は描き込むのより難しいのよ。
動線を使わずに動きを描くのって、作画レベルが高くないとできないし。
うん、やっぱり絵が上手い漫画はいい(二度言った★)

時代設定は2045年、感情を持ったヒューマノイドくんとその開発者らチームの皆さんが淡々と人類を守るお仕事をしている話だ。何。
2045年というだけでナルホド、と思う人もいるだろう。
ディスカバリー(TV)とかニュートン(雑誌)とかが好きな人にはきっと面白い。
web拍手 by FC2