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_06
08
(Wed)15:23

PC買いました。(貯金が…(TдT))
横置き出来る。


裏はこんな感じ。
USBがまあまあ挿せる。

KIMG0097.jpg
KIMG0098.jpg
最近あまり見かけないUSBじゃないマウスと、やっぱりUSBじゃないキーボード(白い方)がついてきた。
ほぼオマケみたいなものかな。
キーボード、横に長過ぎてデスクに置くスペースが無さそうなので、結局古い方(グレーの)を使うことになりそう。

KIMG0099.jpg
前のPCに比べると大分小さい。
一昨日一年ぶり(!)くらいに電源を入れてみた古い方のPCは、相変わらず壊れていた(修理してないから当たり前)。
新しい方がいくら小さいスリムタワーとはいえ、この人をどけないと置けないし、これをこのまま持っててもしょうがないので、修理した上で中古で売ろうと思ってPCデポに持って行った。
修理代と買い取り額でトントンまでならOKと思ってたけど、延長保証に入っていたおかげでちょっとは差額が戻ってきそうな気配。
で、診断の結果どこが壊れていたかというと、マザーボードかグラフィックボードか電源ユニットかそれらの複数要因か、ということだった。
NVIDIA、ちょいちょい調子悪くなってたから、グラボはあるのかもね。
これからメーカーで修理となるわけだけど、ほぼ中身全取っ替えかなあ?
ハード的な話はさっぱりなのでわからないけど。

KIMG0101.jpg
何はともあれ新しい方のセットアップ。
と思ってモニターとHDMIで接続して電源をいれてみたものの、モニターに何も映らない!(;´Д`)
なんか考えるの面倒くさいので、さっさとDVIに変えました。
HDMI問題は後で考えよう…
で、セットアップしてウイルスバスター入れてGoogle日本語入力を入れて商売道具のAdobeCCを入れて、とりあえずフォトショインストール中。
(メラルーはイヤホン入れ)

KIMG0100.jpg
本体は小さいので、モニターの後ろに隠れてる。

KIMG0102.jpg
で、やっぱり古い方のキーボードを使ってる。
置き場所はノートパソコンの上。


スペック
EPSON Endeavor MR4600E
OS  Windows 10 Home 64bit
CPU  インテル® Core™ i7-6700K プロセッサー(4.0GHz)
メモリー  32.0GB(8GB×4)PC4-2133 DDR4 SDRAM
ビデオ  CPU内蔵3Dグラフィックス
M.2 SSD  256GB PCI-Express x4対応M.2 SSD
HDD  2TB シリアルATA 600MB/s対応 7200rpm

web拍手 by FC2
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。