デザイン崩れています。

デザイン崩れていますが放置しています

タイトルでご案内の通りちょっと現在ブログのデザインが一部で崩れています。
直したいのはやまやま&やり方も何となくめどは付いているのですが、時間がががが

本当はIE8くらいまでは見られるように修正したいんですがねえ(´Д`)
現在はIE9+が推奨環境です笑

以下メモ
・SPモード時のメニュー開閉処理
・niceScrollのwidthがfixされている

[Haskell]最後の1つ前の要素を返す変数

息抜き

基本的にHaskellの勉強は

Real World Haskell―実戦で学ぶ関数型言語プログラミング [大型本]
http://www.amazon.co.jp/dp/4873114233

でやっているわけなのです.
今日は息抜きに練習問題(― ―)
といってもまだ2章ですが.

2章 練習2.
lastButOneという関数を書きなさい.この関数は最後の1つ前の要素を返す関数です.

わしの回答(― ―)
実質初めてオリジナルで書いたhaskellプログラムとなります.

もっと簡単な書き方があるのかもしれないですが,まあ最初ということでご勘弁m(_ _)m

Haskellで人間性を下げる(2)

ghciで外部ファイルをロードする

まあちまちまとHaskellをやっているわけではありますが(― ―)
といっても未だにインタプリタから卒業できていないわけでして

いつも忘れる:loadについて俺様備忘録(― ―)

add.hs

とても初歩的な2つの引数の和を返す関数を定義し,それをadd.hsとして保存

GHCiで当該ファイルをロードするときは,そのディレクトリまで移動する.
その際のコマンドは :cd
Windowsのコマンドプロンプトと同じでございますと.

で,ディレクトリに移動したら

これでエラーが無ければ以下の様なメッセージが出てロードされます.
あとは今までと同様に add に引数を付けて関数を呼び出すことができますということですね.(下図)

Haskellで人間性を下げる

Haskellを試してみる

以前よりTLで狂気の沙汰との印象を受けるHaskellを試してみるの巻

まずはコンパイラをダウンロード&インストール

GHC
http://www.haskell.org/ghc/download_ghc_7_4_2#windows

現状の最新はGHC 7.4.2ですな.
ちなみにGHC(Glasgow Haskell Compiler)というのは読んで字の如くHaskellのコンパイラの名前ですかな.
私の環境はWindows 7なので,『Windows 2000 or later (x86) (standalone)』と書かれているところからダウンロード.

インストールが完了するとWindowsメニューに『GHCi』というのが追加されます.

起動すると以下のコマンドプロンプトのような黒画面が現れます.
(実際はインタプリタらしい(勉強しながらブログ更新しているのでまだ良く分からないというのが実情))

少し関数型言語を堪能してきます(―人―)

Responsive Web Designについて

前提用語の説明

プログレッシブ・エンハンスメント

よりよい環境を持っている人にはリッチな演出を.
あまり良くない環境の人には最低限の演出.
ただし,どちらの場合にも提供する情報は減らさない

→要するにIEユーザーには最低限の演出.テキストなどの情報は見られるように配慮するということ
(IEユーザーは地獄の業火で焼きつくされるべきである)

コンディショナル・コメント

htmlタグにIEブラウザによってクラスを振り分けるアレ.

これですな.

メディアクエリとプログレッシブ・エンハンスメント

もう詳しくは下記サイト様にまとめられているのでそちらを参考にしつつ自分用に加筆

Respond.jsとレスポンシブWebデザインをめぐるベストプラクティス議論
http://tokkono.cute.coocan.jp/blog/slow/index.php/web-technology/best-practice-of-responsive-design/

『・最初にメディアクエリなしで狭いビューポート用スタイルを定義
・次にメディアクエリで他のデバイス用スタイルを定義
・最後に IE6-8 用スタイルをコンディショナル・コメントで定義』

スタイル定義としてはこの順番で行なうのがベターなんですかな.
また,IE6-8に関しては

『古いブラウザがサポートできない機能を何らかの手段で補う、いわゆる ポリーフィル として一旦は H5BP に採用されました が、プログレッシブ・エンハンスメント の考え方から言っても、古いブラウザにそこまでのハンディキャップを負わせる価値はない、がコミュニティーの決定となったのです。』

ということで,無理してレスポンシブ対応しなくても良いのではないかという考え方が提案されているようですね.
上記をまとめると,
『通常のメディアクエリ(Respond.jsは使わない) + プログレッシブ・エンハンスメント』が現状での解
ということになるのでしょうか.

個人的懸念点

メディアクエリを使って,モバイルファーストに実装した場合にも,ワイドスクリーン用のスタイルがリクエストされてしまう

メディアクエリを使った場合,internalに記述した場合でも,importを使って記述した場合にも,各CSSがダウンロードされてしまう.
特にモバイル端末のように回線速度が期待できない場合,何回もリクエストを生じさせる設計はあまりヨロシクないのでは.
(まあ画像とは違って高々数kbのテキストなのですがね…(というかメディアクエリを使う以上,今回のデザインに関わらずこの問題は生じるわけですが))

その他懸念点

この内容は今回の記事の内容とは直接関係ないのですが,レスポンシブサイトを作る上で気になるところを…

1. メディアクエリのブレークポイントどうすんねん

モバイルファーストとは言っていますが,ウィンドウサイズ何ピクセルまでをモバイルと判断するかですね.
特にportraitモードとlandscapeモードがあるので,もはやカオス.
横幅1280pxのタブレットとかどうやって判断すんねんという話でして…

(userAgantなんか使っても本末転倒ですしね…)

2. 画像の問題

モバイルファーストにした場合,画像も小さいものを用意(または縮小表示するか)するとは思うのですが,それをどう切り替えますねんという話ですな.

・imgタグの切り替え
imgタグでhtml内に配置しておいて,cssのdisplayで切り替えるなどがあるとは思いますが,その場合,両方の画像がリクエストされるのでモバイルには優しくない.

・cssのbackgroundの切り替え
cssのbackgroundで指定して,メディアクエリで画像そのものを切替えるという方法もあるとは思います.cssのbackgroundに指定される画像は,css自体はリクエストされますが,背景画像はリクエストされないので,リクエストの問題はクリアされるかと.
ただし,width:100%のような指定ができないので,ウィンドウサイズに対して可変な画像配置というのが難しいのではないかと

・Javascriptを使って動的に切り替え
ウィンドウサイズを逐次把握して,動的に切り替える・・・リクエストも最低限で済みますし,imgタグそのものをJSで切り替えれば,width:100%も対応できるが,これも本末転倒感が否めない…

(レスポンシブにまつわるマニアックなお話でしたm(_ _)m)