AB型技術系 主に備忘録

ほぼプログラム関連の備忘録

viewportを指定してスマホでも見やすくする

勉強も兼ねて構築中のサイトをスマホでみると非常にみにくい
何故ならPC用のサイトしか用意していないから

PC用のサイトが9割ほど完成したのでスマホ用のデザインもぼちぼち考えていきます

PC用のサイトをスマホでみるとみにくい原因はというと、
スマホがPC用のサイトを表示する時は横幅が980pxで表示しようとするかららしいです

自分のスマホの横幅をscreen.widthで取得すると360pxでした
そこに横幅980pxのレイアウトを合わせようとするので縮小されて表示されます

PCサイトをスマホで表示
f:id:freelancer13:20170312133926j:plain

対策は横幅980pxで表示しようとするのを360pxにすればよいです
そのためにはviewpointを指定します

<meta name="viewport" content="width=device-width;" />

viewport指定後のPCサイトをスマホで表示
f:id:freelancer13:20170312133925j:plain

device-widthでスマホの横幅に合うようになり縮小されずに表示されました
しかし横向きにすると横幅が広がるため拡大してします

スマホを横向きにして表示
f:id:freelancer13:20170312133924j:plain


viewportの記述を下記にすることで横向きにしても拡大されません

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

viewportを変更して表示
f:id:freelancer13:20170312133923j:plain

拡大されずに表示されました
ただし、この指定をするとピンチによる拡大縮小ができません

個人的には拡大縮小できなくてもいいと思ってるのでこの設定をベースにスマホ用のcssを作成してPCとスマホのデザインを切り分けていきたいと思ってます


grepやめてawkにする

仕事でやることがなくなってきました。

その結果、本来はJavaJavaScript使ってWebアプリ作ってますが、それ以外の仕事もふられるようになりました。

今回ふられたのはLinux上で動いてるログ監視シェルの修正。

正直得意ではないけど出来ませんと言うと切られるので勿論引き受けました。

フリーランスは辛いです。

やることはログの出力フォーマットが変わったのでそれに合わせて解析方法を修正すること

現在のログのフォーマット
ERROR 2016-12-10 03:21:03,523 ERR001 エラー発生

現在のシェル

let ERROR_COUNT= `grep ^$ERROR /var/log/error.log | wc -l`
  • grepでログファイルの各行の先頭がERRORではじまる行を出力
  • wcで行数を出力
  • 結果をERROR_COUNTに設定

この後に前回解析時のエラー件数をファイルから読み込んでERROR_COUNTの件数と比較、
増えてればエラーが発生したことをメール送信します

変更後のログのフォーマット
2016-12-10 03:21:03,523 ERROR ERR001 エラー発生

エラーの発生日付が先頭に出力されるように変更されました

変更後のシェル

let ERROR_COUNT= `awk '{if($4=="ERROR") print $1}' /var/log/error.log | wc -l`
  • awkでログファイルの各行を区切り文字(デフォルトはスペース)で区切る
  • 区切った文字の4つ目がERRORであれば区切った文字の1つ目を出力
  • wcで行数を出力
  • 結果をERROR_COUNTに設定

ERROR_COUNTに設定するコマンドを変更しただけで後は変更なし

awkは複雑な文字列操作ができますね。

簡単な解析ならgrepでできますが、複雑になるならawkの出番が増えそうです


Excelのセルに取り消し線を挿入する簡単な方法を知った

今までExcelのセルに取り消し線を挿入する時は以下の手順でやってました。

  1. セルの書式設定を開く

  2. 取り消し線をチェック

先日会議中に他の会議参加者がキーボード操作だけで取り消し線を挿入していたので調べてみると、 Ctrl + 5で簡単に取り消し線を挿入することができました。

Excelでの作業の効率が少しは良くなりそうです。

サイトマップを自動生成するには

勉強もかねてブログ風のサイトを構築中

サイトマップを自動生成できるようにしたいと思いつつ他にやることが多くて手付かず

そんな時ははサイトマップを自動生成してくれる下記のようなサービスを利用するのがよいです

www.xml-sitemaps.com

  1. サイトマップを作成したいサイトのURLを入力
  2. Startボタンクリック

f:id:freelancer13:20170226184739p:plain

ページを読み込んでアンカーを再帰的に解析してリンクを辿っているのでしょう
しばらくするとサイトマップが作成されてダウンロードできるようになります
f:id:freelancer13:20170226184740p:plain

こちらが出力されたサイトマップ

f:id:freelancer13:20170226184741p:plain

あとはサーバーの所定の場所にアップロードして終了
URL解析くらいなら自作できそうなのでこのサイトを参考にゆくゆくはサイトマップを自動生成したいですね

今更ながらPHPで日付形式に変換

日付を日付形式(yyyy/mm/dd)で画面に表示する画面を作ることになりました。

よくある話なので何をいまさらですが・・・

20170226という文字列を取得してそれを2017/02/26という形式にして画面に表示することにします。

<?php

// 文字列を任意の日付形式に変換して出力
echo date('Y/m/d',  strtotime("20170226"));

?>
  1. strtitimeで文字列を日付型に変換する
  2. dateでフォーマット指定

これで2017/02/26と出力されます。

ブラウザに出力するならスラッシュが特殊文字なので下記の方がよいかもです。


|