既存のWPサイトをスマホに最適化してみた

今回自分のサイトであるwww.yukiji.netをスマホに対応させてみましたので、手順をメモしておきます。HTMLソースはそのまま利用して、CSSの変更で制作した場合です。

1．ヘッダーにviewport設定

まずはじめにviewportを記述します。ここでスマホから接続したときにどのように表示するかを設定します。今回はデバイスの等倍で表示させて、ピンチでのズームなどを制御しようとすると、以下のようになります。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

2．文字自動調節機能の設定

iPhoneやAndroidでは、縦向きと横向きで文字サイズを自動で調節する機能があり、文字サイズを変えたくない場合はCSSで以下を追記しておきます。

body{ -webkit-text-size-adjust: 100%; }

3．エミューレーター

 テスト中に手っ取り早く結果を見たい時にブラウザーのエミュレータを使います。今回はgoogle Chromeのエミュレータを使いました。使い方は「Chromeでスマホ動作確認ができる user agent の使い方」で紹介しました。

4．CSSのメディアクエリ

 接続したデバイスの幅によって適用させるCSSを変更することができるメディアクエリを使用します。スマートフォンは320pxから480pxまで、タブレットは481pxから1024pxまでの間で指定しました。CSSファイル内でメディアクエリを直接書くと以下になります。

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

　スマートフォン用CSSを記述

}

@media only screen and (min-device-width : 481px) and (max-device-width : 1024px){

　タブレット用CSSを記述

}

5．CSS初期化

ここでやっとサイトのデザインをいじってきます。ブログのような典型的なデザインだった場合はそんなに変更する場所はありませんでした。やることはまず、メディアクエリ内でフロートでデザインされたものをfloat:noneで フロートを解除して行きます。次に幅が設定されているものはwidth:autoでこちらも初期化して行きます。これだけでほとんど縦に整列されて、あとは微調整するだけです。

5．画像について

デバイス幅以上の画像については{ max-width: 100%; height: auto; }で画面にフィットしてきます。問題はデバイス幅以下の画像です。PCでは問題ないものでもletinaディスプレイに場合は2倍の幅が必要で、150pxの画像をそのままletinaディスプレイで150pxのまま表示させるとぼやけます。なので、150pxで表示させたい場合は300pxと一回り大きいものを用意する必要があります。

6．ボタンについて

作っていくとPCのままの高さだとかなり細くなって、親指だとなかなか押しにくい高さになってしまいます。だいたい40px前後の高さがあると良いかなと思いました。

Chromeでスマホ動作確認ができる user agent の使い方

Chrome単体でスマホのエミューレーターを持っています。実機での確認が一番確実ですが、手っ取り早く確認するのにはいいんではないでしょうか。

まずはじめにデベロッパーツールを開きます。開き方は4通りあります。

• 右上のオプション>ツール>デベロッパーツール
• 右クリック>要素を検証
• F12
• Ctrl + Shift + I

次にデベロッパーツール内の右上の歯車を押します。

Overridesをクリックし、「show 'Emulation' view in console drawer」にチェックを入れます。これで↓準備完了！

一度初めに戻って今度は歯車左隣のマークをクリック

するとEmulationというタグがあるので、そこをクリック 

Device、Screen、User Agent、Sensorsの項目がでてきますが、Deviceを選択すると他の項目も選択されたデバイスの設定に自動的になります。

デバイスのOSだけを変えたい場合はUser Agentを変更してください。

以上！

苗場スキー場でスノーボードしてきた

苗場スキー場

苗場スキー場

新潟県南魚沼郡湯沢町三国

 

今年の初すべりは苗場スキー場でした。数年前にバスツアーで行ったことは覚えてましたが、あらためてマイカーで行くと思ったよりも近いなと思いました。今回は八王子の方から圏央道に乗り、約3時間30分で苗場スキー場に着きました。

 

あきる野IC　01:00

↓首都圏中央通路自動車道

鶴ヶ島JCT

↓関越自動車道

藤岡JCT

↓関越自動車道

月夜野IC 03:30

↓17号線

苗場スキー場 04:30

 

カーナビを指すところは苗場プリンスホテルの駐車場で、その隣に日帰り用の駐車場もありましたが、日帰りの場合は「ワールドカップロッジ」前にも駐車場があり、そこに停めたほうが良いです。

 

大きな地図で見る

 

 

苗場スキー場のポイント

• 首都圏からだいたい3時間強
• 日帰りはプリンスホテル前ではなく、ワールドカップロッジ前に停車する方が良い
• ドラゴンドラに乗らない場合は、リフト代1日券4,800円
• 4時から解放されている無料休憩所やロッカーなどが充実しているので、日帰りにはかなり良い施設があります
• 頂上は1700mもあります。そこにはビューポイントという場所も設けてあり景色も良かったです
• 10時ごろお昼を食べると比較的空いてます
• 頂上近くの筍平ゲレンデは傾斜が緩くて広いので練習場所には良いと思います
• 山頂からのダウンヒルコースは林道コースや中級ほどの傾斜があったりと、かなり楽しめるコースです

温泉

帰りは「まんてん星の湯」というところにいきました。

友人が教えてくれた「温泉天国」というアプリで検索。比較もできて結構これは良アプリ！

 

まんてん星の湯

群馬県みなかみ町 猿ヶ京温泉

 

まんてん星の湯の感想

• 露天風呂の温度は高め
• 施設内のレストランは結構おいしい！
• 2Fに行くと休める場所であり、食べるところでもある大広場がある
• 大人料金3時間650円と安い

スーパーママチャリグランプリ参加してきたよ

1月12日土曜日に富士スピードウェイで開催される「スーパーママチャリグランプリ」に参加しました！富士スピードウェイをママチャリのみというレギュレーションで7時間を交代しながら耐久レースをするものです。

 

今回は当日の0時に富士スピードウェイに到着しました。現地は寒波のため雪が積もって、ただでさえ寒いのに今年はさらに寒い…毎回大変なのが駐車場からパドックまでが長いこと…歩いて10分くらいかかります。

 

さっそくパドックの場所取り。ここでは電源確保が最重要でございます。今回は20Mの電源ケーブルを持って三陣！これのお陰でサーキット方面のシャッター前でもケーブルが届きました。

 

パドックの後ろはテントでぎっしりです。何度か参加してますが、テントの場所を確保できたことは一度もありません…

 

スタート直後はわさわさしてます。

 

通常ですとピットインで交代なのですが、サーキット後半中間あたりにも交代エリアがあり、今回はここで交代することにしました。

 

 

こちらのほうが影じゃないので待つ方もほかほかですし、走る方も前半にキツイ上り坂を登るので精神的に楽でした。(後半に上り坂は結構まいる…)

 

今回は211位でフィニッシュ！毎年参加賞が豪華になっているような気がする…

 

 

 

 

これですぐ思い出す！列とか行とか、rowとかcolumnとかの覚え方

列縦だっけ横だっけ…

とか

テーブルコーディングする時に'colspanding'だっけ…'rowspanding'だっけって毎回悩む…

こんなときに覚えやすい方法を考えてみた。

列と行は漢字で見てみると分かりやすい。行が横方向で、列が縦方向…ってこれ結構既出じゃん！って思ったけど一応書いておいた。

英語の'row'と'column'の覚え方は、漢字と同じような感覚でカタカナにしてみると、ローの伸ばし棒で横、コルのルで縦方向。英語も良く見てると、row も横っぽくって、colも l で縦っぽくみえてきた… row も w を伸ばせば横棒でしょ？

こんな感じで覚えておく、というか思い出せばいいじゃないでしょうか

Sass導入したからCompassも入れてみる

前回Sassを導入したので今日はCompassを入れたいと思います。

Compassのインストール

Sass導入時にRubyを既にインストールしているので今回はCompassをインストールするだけです。

▲今回も黒い画面で’gem install compass'を実行してインストールします。

Koalaさんの設定

▲KoalaさんのScss設定で'Compass Mode'をチェック

実行

まさかこれでできちゃう？と期待して

// style.scss
@import "compass";

.box{
	@include transition(0.5s);
}

▲Compassをインポートして、ためしにコンパイルしてみます。

▲はい残念、だめでした！「プロジェクトフォルダから直接コンパイルしないとだめだよ！」的な。

エラーメッセージをそのまま検索してみるとどうやら'config.rb'がないとだめらしい。

こりゃわからんとKoalaさんをいじっているとフォルダを右クリックでそれっぽいメニューがでてきました。

▲こんなのがでてきました。[プロジェクト設定]>[設定ファイルの作成]>[For Compass]を実行。

▲フォルダを確認してみると'config.rb'が存在していた！キセキ！

これでやっとできると信じてコンパイル…

▲まだだめでした…

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

▲今度は'config.rb'を見てみます。どうやらデフォルトだとCSSとSassはフォルダ分けされているようです。

ss_dir = "stylesheets"
sass_dir = "/"
images_dir = "/"
javascripts_dir = "javascripts"

▲今回はCSSもSassもフォルダ分けしていないのでディレクトリーをルートにしてみます。

これでコンパイル…

▲ついに成功！

まとめ

• Compassはconfig.rbが要！

巷で噂のSassを導入してみる

今後もう必須になってくるんじゃないかと思ってしまうSassの導入です。今回「これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG」をそのまま見て導入しようということです。ちなみにwindows版でございます。

まずはrubyのインストール

SassはどうやらRubyで動いているらしいのでRuby必須でございます。

RubyInstaller for Windows

▲素直にDownloadをクリック

▲自分のパソコンは64bitなので(x64)のものをインストールしました。

▲インストールするときは「Ruby の実行ファイルへ環境変数 PATH を設定する」にチェックを入れる。どこからでもRubyを実行できますよってことみたいです。

次にSassのインストール

▲コマンドプロンプトを出して「gem install sass」を入力します。linuxぽい

▲少し待つとSassのインストールが終わりました。

最後にSassを使うときのGUIソフト「Koala」をインストール

そして、ここからダウンロード

Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.

Koalaさんは特にインストールで難しいものはありませんでした。

▲見た目はかなりシンプル

 ▲とりあえず、空Sassファイルを格納したフォルダをKoalaにドラッグしてみます。

▲するとファイルが読み込みました。ここでファイルをクリックするとするっと右側のメニューが出てきます。

Scssの編集

$mainColor: #3cf;

#header{
  width: 1000px - 40;
  margin: 0 auto;
  height: 200px;
  h1{
    a{
      font-size: 120%;
      color: $mainColor;
      font-weight: bold;		
      &:hover{
        text-decoration: none;
      }
    }
  }
}

▲style.sassにこんな感じに書いてみました。

コンパイル

Koalaにはコンパイルスタイルという設定があって以下の4種類ありました。

• nested
• expanded
• conpact
• compressed

この4種類のコンパイル試してみます。

nested

#header {
  width: 960px;
  margin: 0 auto;
  height: 200px; }
  #header h1 a {
    font-size: 120%;
    color: #33ccff;
    font-weight: bold; }
    #header h1 a:hover {
      text-decoration: none; }

▲ちょっと見難い

expanded

#header {
  width: 960px;
  margin: 0 auto;
  height: 200px;
}
#header h1 a {
  font-size: 120%;
  color: #33ccff;
  font-weight: bold;
}
#header h1 a:hover {
  text-decoration: none;
}

▲いつもの感じ

compact

#header { width: 960px; margin: 0 auto; height: 200px; }
#header h1 a { font-size: 120%; color: #33ccff; font-weight: bold; }
#header h1 a:hover { text-decoration: none; }

▲スマートだね

compressed

#header{width:960px;margin:0 auto;height:200px}#header h1 a{font-size:120%;color:#3cf;font-weight:bold}#header h1 a:hover{text-decoration:none}

▲かなりスマートだね

見やすさだとexpandedでコンパイルしたほうが良さそうだね。

Line Comments

▲ここで事前にLine Commentsにチェックを入れておくと…

/* line 3, style.scss */
#header {
  width: 960px;
  margin: 0 auto;
  height: 200px;
}
/* line 9, style.scss */
#header h1 a {
  font-size: 120%;
  color: #33ccff;
  font-weight: bold;
}
/* line 14, style.scss */
#header h1 a:hover {
  text-decoration: none;
}

▲sassファイルに対応した行数をコメントアウトしてくれる。あとで編集するときに役立つね。

まとめ

• インストールは特に難しいところはなかったので導入はいたって簡単
• Koalaさんが起きない時がある⇒パソコン再起動
• 変数格納や計算ができるのはかなり便利
• 自動コンパイルにチェック入っているけど、どうやって自動コンパイルしてくれるのか分からない