So-net無料ブログ作成
検索選択
前の10件 | -

レスポンシブWEBデザインの概要とサンプル [html/css]

最近、ホームページの話になると、「レスポンシブ対応で」と言われることが多い。
でも、話しを聞いていくと、認識がおかしい人がたくさんいる。
画像が切り替わったり、アニメーションしたりすることが「レスポンシブ」だと思っている人が多いらしい。
他のブログとか見てても似たような記事があるので、間違った認識でいる人は、ある程度いるのかもしれない。

この1ヶ月くらいで、3回もそんなことがあって、うち1回はwebデザイナーさんだったりする・・・。
素人の人ならわかるけど、さすがに業界の人はまずいだろうと思ったので、ちょっと書いてみる。


レスポンシブWEBデザインとは、1つの html ファイルで、様々な端末の画面サイズに対応すること
様々な端末というのは、パソコンとか、タブレットとか、スマートフォンとか。
機種によって画面サイズが違うので、それぞれに最適化して作っていたらきりがない。
そこで、css でなんとか対応させてしまおうというのがレスポンシブデザイン。


例えば、こんな感じのホームページを作りたいとする。
レスポンシブ01.jpg

まず、パソコン画面とスマホ画面を合体させたような html を作る。
レスポンシブ02.jpg

次に css にパソコン画面の設定とスマホ画面の設定を書く。
css の内容は、こんな感じ。

【パソコン画面の場合】
  • フッターメニューを非表示にする
  • その他はすべて表示

【スマホ画面の場合】
  • ヘッダーメニューを非表示にする
  • 本文を横幅100%にする
  • サイドのfloatを外し、横幅100%にする
  • フッターメニューを表示する


レスポンシブデザインのサンプル(sample.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<title>レスポンシブ サンプル</title>
<meta charset="utf-8">
<meta content="width=device-width, user-scalable=yes, initial-scale=1.0, 
maximum-scale=2.0" name="viewport">
<link rel="stylesheet" href="style.css">
</head>

<body>
	<div class="wrapper">

		<div id="header">ヘッダー</div>

		<div id="header_menu">ヘッダーメニュー</div>

		<div id="main">本文</div>

		<div id="side">サイド</div>

		<div id="footer_menu">フッターメニュー</div>

		<div id="footer">フッター</div>

	</div>
</body>
</html>


レスポンシブデザインのサンプル(style.css)
@charset "UTF-8";
body{
	margin: 0;
	padding: 0;
	color:#fff;
	font-size: 20px;
	font-weight:bold;
	background-color:#fff;
	text-align:center;
}
.wrapper{
	width:800px;
	margin:auto;
	background-color:transparent;
}
#header{
	width:100%;
	padding:20px 0;
	display:block;
	background-color:#008000;
}
#header_menu{
	width:100%;
	padding:20px 0;
	color:#fff;
	background-color:#ff6600;
}
#main {
	width: 70%;
	height:200px;
	padding:20px 0;
	color:#000;
	background-color:#ffff00;
	float:left;
}
#side{
	width:30%;
	height:200px;
	padding:20px 0;
	color:#000;
	background-color:#00ffff;
	float:right;
}
#footer_menu{
	display:none;
}
#footer{
	width:100%;
	padding:20px 0;
	background-color:#008000;
	clear:both;
}

/*--- ディスプレイ幅800pxより小さい画面に使われるCSS ---*/
@media screen and (max-width: 800px) {
	html{width: 100%;}
	body{
		width: 100%;
		margin:0;
		padding:0;
	}
	.wrapper{
		width: 100%;
		margin:0;
		background-color: transparent;
	}
	#header_menu{
		display:none;
	}
	#main {
		width: 100%;
		height:200px;
		padding:20px 0;
		color:#000;
		background-color:#ffff00;
		float:none;
	}
	#side{
		width:100%;
		height:100px;
		padding:20px 0;
		color:#000;
		background-color:#00ffff;
		float:none;
	}
	#footer_menu{
		width:100%;
		padding:20px 0;
		display:block;
		color:#fff;
		background-color:#ff6600;
		clear:both;
	}
}


このサンプルでは、ディスプレイ幅800px で切り替わるようにしてみた。
細かく設定するのであれば、
 パソコンの場合(指定なし)
 タブレットの場合(ディスプレイ幅800px 以下)
 スマートフォンの場合(ディスプレイ幅480px 以下)
などを css に書けばいいんだけど、複雑になってサンプルとしてはわかりにくくなるのでやめました。

パソコンで表示して、ブラウザの横幅を動かすと、表示が切り替わるはず。
タグの意味は、ググってください(笑)。


1つの html ファイルで、いろいろな端末の画面サイズに対応できるレスポンシブWEBデザインですが、デメリットもあるので、なんでもかんでもレスポンシブ!というのは、違うと思っています。
その辺は、ホームページ作成者やwebデザイナーがちゃんと判断してくれるはず!?



nice!(1)  コメント(0) 
共通テーマ:パソコン・インターネット

田舎の中小業でIT化が進まない原因 [雑談]

先日、役所の人と話をしたときに「企業のIT化がまったく進んでいない」という話題になりました。それは、私自身もすごく感じています。というか、驚くほど進んでいません。
いまさら「IT化」というのも変ですが・・・。

私の住んでいるところは、田舎の小さな街。
中小企業がたくさんあります。

ほとんどの中小企業は大企業の下請けだと思います。
そのためなのか、情報発信の必要性を感じていないようで、ホームページを持っていないなんて会社がたくさんあります。

連絡をとるのも、電話かFAX。
メールアドレスはもっているけど使ったことがない。
直接会いに行った方が早かったりします。

役所の申請書類をホームページからダウンロードできるようになっていても、役所まで紙の書類を取りに来たり・・・。

せめて、メールくらいは使えるようになってもらいたいものです。


もうパソコンが一般的になってからだいぶたつし、スマホだってかなり普及していると思っているのですが、実際にはほとんど使っていない、使いこなしていない会社も多いと感じています。
若い社長の会社であっても、「紙と鉛筆方式」でやっている会社もあります。


逆に、小さい会社なのに、パソコンやタブレットを駆使して、先進的なことをやっている会社もあります。
60代、70代の社長なのに、ITツールを使いこなしている会社もあります。



その差はなんなのか?
いろいろ見ていると、IT化の進んでいる会社の社長(役員)は、普段からパソコンやインターネットを利用しています。
ブログや Facebook をやっていたり、趣味の写真を整理するのにパソコンを使っていたり。
プライベートでも使っているから、ITのメリットとデメリットを理解していて、自分の会社に必要な機能がなんなのかをしっかりと認識できているようです。


IT化の進んでいない会社の社長は、ほぼ確実に自宅でもパソコンなどを使っていません。
都会にいるとスマホを活用しないと不便だと感じることもありますが、田舎だとスマホなど無くても生活に支障が出ません。
周りに使いこなしている人もほとんどいません。
普段から使っていないので、「難しいモノ」という先入観があるのかもしれません。
ITの導入に積極的な社長であっても、普段からパソコンなどを使っていない社長だとうまく活用できていないケースが目立ちます。
よくわかっていないので、会社内にパソコンに詳しい若い社員がいても、指示が出せないとか、説明できないという状況になってしまっているようです。


IT化は、トップダウンで進めることが多くなるはずなので、トップである社長がITの利点をわかっていなければ、うまく活用できません。
田舎に住んでいると、「使えなくてもなんとかなる」のですが、まずは、社長が ”使えるようになってみる” ことです。



「パソコン覚えるくらいの努力が出来ないなら社長なんかやめちまえ!」
と、某社長が言っておりました(笑)




内部処理を修正しました [ぶっくま!]

ぶっくま!の内部処理を修正しました。
主にデータベース周りの修正なので、ほとんど見えない部分なのですが・・・。

1カ所だけ、ユーザーから見える部分を修正してあります。
[ブックマークの登録](+ボタン)のページで、グループ名の変更ができるようになっていましたが、これを削除しました。
あまり使われていないのと、他のメニューからグループ名を変更できるため、不要と判断しました。


本当は、見える部分も大幅に修正したかったのですが、なかなかまとまった時間が作れず滞っています。
いろいろと要望もいただいているので、少しずつ実現していこうと思っています。

これからもよろしくお願いします。



タグ:ぶっくま!

PHP はダメ?理由を考えてみた [php]

私は現在、PHP をメインにプログラムを作っています。
他の言語を使うこともありますが、web の仕事はほぼ PHP です。

たまに、「PHP はダメだ」とか「PHP は使えない」という話しを聞きます。
個人的には、使えるモノは使えばいいと思っているのですが・・・。



PHP のメリットは、初心者がとっつきやすいということだと思っています。
プログラマーであれば、多少さわったことがあるという人はたくさんいます。
ちょっとしたツールであれば、簡単に作れます。
わからないことがあってもインターネットで検索すればいくらでも情報があります。
ほとんどのレンタルサーバーでは最初から PHP を使えるようになっています。
コンパイルなどの作業がいらず、書いたコードの結果をすぐに確認できます。


ただ、簡単にそれっぽいモノが作れてしまうため、いいかげんなコードもたくさん公開されています。
また、PHP は、言語仕様が厳格ではありません。1つのことに対していろいろな書き方が出来てしまいます。
この辺が、「PHP はダメ」と言われるような気がします。



もともと、PHP は、「動的にHTMLを生成する」ために作られています。
システムを作ったり、ハードウェアを制御するための言語ではありません。
ここが他のプログラミング言語と大きく違う部分です。
最終的にHTMLを生成できればいいので、言語仕様を厳格にする必要がないのです。


現在のPHP は、バージョンアップを重ねて、大規模なシステムも作れるようになっています。
ただし、初心者が簡単に作れるわけではありません。
他の言語のように、言語側がある程度コントロールしてくれるということがないため、すべて自前で書かなければいけないというイメージです。
知識や経験が無いと、穴だらけのシステムになりやすいのも、PHP の特徴です。



とはいえ、PHP は手軽なうえ、少ない工数で開発できるスクリプト言語です。
PHP での開発を指定される仕事もよくあります。
デメリットもたくさんありますが、それをわかった上でうまく使っていけばいいのではないでしょうか。



タグ:PHP

在庫管理 デモ版を公開しました! [在庫管理]

ここ数ヶ月、在庫管理システムを作っていたのですが、デモ版を公開しました。
適当なデータを入力できるようにしてあります。

在庫管理 検索.jpg
在庫管理 デモ版

もともとは、某社さんから依頼を受けて作った倉庫管理のシステムなのですが、他の会社さんからも使いたいという要望が有り、一般向けの在庫管理システムに作り直しました。


機能としては、以下のようなことができます。

>複数の倉庫を管理できる
>スマホから在庫の確認
>品名の一部で検索可
>一人ずつアカウントを持ち、ユーザーごとにメニューや担当倉庫を限定できる

>発注
 発注データの入力
 発注データの修正・キャンセルは、入力したユーザーのみ可

>在庫管理
 商品の数量管理(指定数量以下になると赤字で表示)
 発注データで納品確認
 発注作業なしの入庫にも対応
 商品を別の倉庫へ移動
 数量の増減には、説明を追加できる
 商品画像の表示可
 賞味期限、消費期限などの管理可(有効期限が近づくと赤字で表示)

>履歴表示
 入出庫の履歴と発注の履歴を一覧で表示
 伝票などのチェックに利用



すでに、運用を開始しているところも数社あります。
現在のところ、独自ドメインで運用するシステムになっています。
料金は、会社の規模(データ量)によるので、お問い合わせください。
ぶっくま!から問い合わせてもらってもかまいません。

在庫管理 デモ版



開発費を回収するためには売っていかないとなのですが、まだ体制が整っていません・・・。
少しずつ進めていきます!

その前にシステムの名前を考えないとかな?
何かいい名前ありませんか?(笑)




nice!(1)  コメント(0)  トラックバック(0) 
共通テーマ:仕事

SQLSTATE[42000] [1044] でアクセスできない!? [php]

先日、「サーバーを新しくしたらプログラムが動かない」というので、見に行ったのですがハマりました。

どこかで購入(?)したシステムをインストールしたらしいのですが、データベースの接続時に、

 SQLSTATE[42000] [1044] Access denied for user 'ユーザー名'@'localhost

というエラーが出ていました。
SQLSTATE[42000] [1044] は、指定されたユーザーのアクセスを拒否する というエラーです。


状況としては、
●システムのインストールは成功している
●データベースは作ってある
●phpMyAdmin にはログインできる
●ユーザー名やパスワードは間違っていない


エラーメッセージからすると、ユーザー名やパスワードが間違っているのかと、いろいろ試したのですが状況は変わらず。

再度、サーバーの設定を確認していたら、データベースのポート番号が '3307' になっていました!
なぜそうなっていたのかはわかりませんが、localhost は '3306' なので、明示的に指定しなければつながりません。
が、そもそもポート番号を指定するところが無い!?


インストールしたシステムが php で作られていたので、ソースを覗いてみたら、データベースに接続する部分が、以下のようになっていました。
	$this->pdo = new PDO(
		sprintf('mysql:dbname=%s;host=%s;charset=utf8',
			DB_NAME,
			DB_HOST
		),
		・・・


なので、ポート番号を指定するように書き換えました。
	$this->pdo = new PDO(
		sprintf('mysql:dbname=%s;host=%s;port=%s;charset=utf8',
			DB_NAME,
			DB_HOST,
			DB_PORT
		),
		・・・


これで、
 DB_HOST に、データベースのIPアドレス(localhost ではない)
 DB_PORT に、データベースのポート番号('3307')
を指定することで、解決しました。



今回ハマった原因は、データベースのポート番号は '3306' だと思い込んでいたこと。
プログラムにポート番号を指定する箇所が無かったため、なかなか気づきませんでした。

「これはハマるだろうなぁ」
と思ったので、記事にしてみました。




サーバーエラーが発生しました [ぶっくま!]

2017年6月25日(日)13:48 頃、サーバーエラーが発生しました。
現在は復旧しております。

原因は、データベースのバージョンアップにより、プログラムが正常に機能しなくなったためでした。
すべてのプログラム見直し、修正しました。



具体的には、バージョンアップにより数値フィールドに空白を代入するとエラーになる仕様に変更になったため、プログラムに空白を代入している箇所に、-1 を入れるように修正しました。

数値フィールドに数値を入れるのは当たり前なのですが、空白にも意味を持たせていたため、ちょっと甘かったですね。




紹介していただきました! [ぶっくま!]

ぶっくま!を紹介してくれているサイトを見つけたので、紹介します!

PCとのブックマーク共有に使える!最新オンラインブックマークサービス4選



最近、新たなサービスを作っているので、ぶっくま!に手が回っていません。
が、いろいろ直したい部分もあるので、順次修正していきます!



タグ:紹介

ぶっくま! 修正しました [ぶっくま!]

ぶっくま!を公開してから半年ほどたちました。

ときどき(いい意味で)こちらの想定していなかった使い方をする人が出てきたりします。

現状では、機能不足でできなかったりしていますが・・・。

なので、将来的に拡張できるように、内部構造を変更しました。

プログラム的には大幅に修正したのですが、使い方は今まで通りです。

今後、少しずつ機能追加などをしていきたいと思います。



ついでに、トップページに写真を入れてみました。

見た目で変わったところはそれだけです・・・。




タグ:修正

オーディオインターフェイス [雑談]

知り合いに頼まれて、オーディオインターフェイスを買ってきました。

パソコンで音楽やっている人にはおなじみの周辺機器なのですが、それ以外の人にはあまり知られていないかもしれません。
オーディオインターフェイスは、パソコンで「音」をやりとりするための周辺機器で、マイクや楽器の音を録音したり、MIDI データを外部音源で演奏させたりするときに使います。
パソコン用のスピーカーに不満があるなら、オーディオインターフェイスの出力をステレオにつないで、ステレオから鳴らすということもできます。

今回は、動画にナレーションやBGMを入れるために導入しました。


Steinberg UR22mkII
購入したのは、Steinberg の UR22mkII という USBで接続するタイプのオーディオインターフェイスです。
USBでパソコンに接続しておけば、外部電源は必要ありません。
入力は2系統ですが、今回は動画にナレーションを入れるのが主な目的なので、これで十分。

UR22mkII


ハイインピーダンスの入力にも対応できるので、ギターなどは、ラインでそのままつなぐことができます。

一般的に、マイクで音声を録音すると音量が小さくなるのですが、GAIN を最大にしておけばなんとか使える音量になりました。
UR22mkII からファンタム電源も供給できるので、キャノン(XLR)ケーブルでつなげば、コンデンサーマイクも使えます。

モニタすることもできるので、ヘッドフォンで音を確認しながら録音することもできます。

今回は使いませんが、MIDI 端子もあるので、外部音源やシンセサイザーなどをつなげることもできます。

UR22mkII 前面

UR22mkII 背面



UR22mkII のドライバーは、付属のCDに入っていますが、最新版は、Steinberg のホームページ からダウンロードできます。

また、音楽を作成するためのソフト Cubase AI がバンドルされていますが、これはダウンロードする必要があり、ちょっと面倒・・・。
専用ページにアクセスして、アカウントを作成し、製品のシリアルナンバーを入力すると、アクティベーションコードが発行され、ダウンロードできるようになります。

専用ページ

Cubase は、音楽の知識が無いと簡単には使いこなせないので、音楽を作成しないのであれば、ダウンロードしなくてもいいと思います。



前の10件 | -