ホームページ制作会社、サイト制作、その他各種システムの構築、CGI、PHP等のWEBアプリ開発

ホームページ制作・システム構築・DB設計ホームページ制作・システム構築・DB設計
ホームページ制作とWEBシステムの構築、カスタマイズから運用サポートまで。
スペーサー

総合的なサポートでネット集客(売上)を改善します。

当サイトは、ホームページ制作、WEBデザイン、および各種プログラムの制作を通して、クライアントの皆様の集客や売上げの改善を行っています。

ネットからの集客を改善するためにはホームページを作るだけではなく、その後の運用が大切です。

弊社ではネットマーケティングに特化した総合的なスキルでクライアントの成長を促します。
ホームページ制作のご発注、WEBプログラムのご依頼が初めて方でも安定運用までサポートいたします。お問い合わせはこちらから。




ZendFrameworkのZend/Mail.phpで、差出人が文字化けする件。

2015年3月 8日 22:04

料理本の通りにやっても上手く動きませんでした。
ZendFrameworkのZend/Mail.phpは日本語きらいですかね。

// コンポーネントをロードする
require_once 'Zend/Mail.php';

// 文字コード設定
$mailCharset = 'ISO-2022-JP';
$crrCharset = 'UTF-8';

// メールの内容を設定する
$fromMail = 'from@example.com';
$sendName = '送信者名';

// 文字コードを「ISO-2022-JP」に変換する
$sendName = mb_convert_encoding($sendName, $mailCharset, $crrCharset);

// インスタンスを生成する
$mail = new Zend_Mail($mailCharset);

// メールを作成する
$mail->setFrom( $fromMail , $sendName );
↑これでは差出人名が文字化けしてしまいました。↓だとGmail受信して差出人名が文字化けしませんでした。
$mail->setFrom( $fromMail , "=?ISO-2022-JP?B?".base64_encode($sendName)."?=" );

沢山省略しています。大切なところだけ記述していますので、ご了承ください。

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・DB設計
●ユタデザイン
●住所:〒135-0062
東京都江東区東雲2-7-5-3503
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+


PC用とスマホ用の表示切り替えをCSSだけで行う方法(その3)

2015年2月 7日 10:28

PC用とスマホ用の表示切り替えをCSSだけで行う方法(その3)

PC用とスマホ用の表示切り替えをCSSだけで行う方法について、追記します。
弊社では、現在そのほとんどがbootstrapのフレームワークを使って構築しています。

少しとっつきにくいbootstrap(ブートストラップ)ですが、構造を理解していただければ、非常に簡単なCSSフレームワークです。

PC用のソースとスマホ用のソースが一枚のhtmlファイルに記述できるので、簡単です。

<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
ここに表示したい内容
</div><!--/.col-lg-3 col-md-3 col-sm-3 col-xs-12 -->
</div><!--/.row -->
</div><!--/.container -->
というように記述します。

以下、class指定している設定値の説明です。
col-lg-数字 = 画面サイズが≥1200pxの場合このクラスが適応されます。
col-md-数字 = 画面サイズが≥992pxの場合このクラスが適応。
col-sm-数字 = 画面サイズが≥768pxの場合このクラスが適応。
col-xs-数字 = 画面サイズが<768pxの場合このクラスが適応。
となります。
数字には、ブロック要素として1〜12が入ります。

デバイスごとに隠したいコンテンツがある場合は、
hidden-を使います。
hidden-lgとか、hidden-xsとかです。
弊社では、bootstrap.cssの1580行目付近にある、
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
という設定を、
@media (min-width: 1200px) {
.container {
width: 970px;
}
}
という設定に変更して、画面が1200以上でも、横幅を970に設定しています。

サンプルサイトはこちら。
ブラウザの右下をつかんでウインドの幅を変更すると状態が変更されます。



bootstrapのサイト構成は以下。
bootstrap/
├── css/
│ ├── bootstrap.css
│ └── bootstrap.css.map
├── js/
│ └── bootstrap.js
└── fonts/
  ├── glyphicons-halflings-regular.eot
  ├── glyphicons-halflings-regular.svg
  ├── glyphicons-halflings-regular.ttf
  ├── glyphicons-halflings-regular.woff
  └── glyphicons-halflings-regular.woff2

bootstrapで作ったサイトはこちら。
http://www.kankyo-d.co.jp/
http://www.frogrock.jp/
http://www.pleasure-mikunigaoka.com/
いずれもおなじHTMLファイルがCSS制御で表示しています。



PC用とスマホ用の表示切り替えをCSSだけで行う方法(その1)
PC用とスマホ用の表示切り替えをCSSだけで行う方法(その2)
PC用とスマホ用の表示切り替えをCSSだけで行う方法(その3)
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・DB設計
●ユタデザイン
●住所:〒135-0062
東京都江東区東雲2-7-5-3503
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+


bootstrapに夢中

2015年1月30日 11:40
少し前からほぼすべてのホームページ制作でbootstrapを使っています。
スマホ、PC用とひとつのhtmlファイルでレスポンシブルに表示してくれるので、設計だけちゃんとしていれば、きれいなサイトが出来上がります。

まあ、bootstrap臭というフレームワーク特有の雰囲気が出ることは致し方ありません。

bootstrap管理画面系

また、管理画面系のUIにも非常に相性が良く、ボタンひとつでも視覚的に訴求したい場合にCLASSで括ればよいだけなので、大変楽です。
バージョンが3に上がってからはより使いやすくなったと思っています。 あまりメジャーなアップデートがあると少しやっかいですが。。。

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・DB設計
●ユタデザイン
●住所:〒135-0062
東京都江東区東雲2-7-5-3503
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+


フラットUIってなんだ!?

2013年6月21日 22:37
先日、iOSがフラットUI(ユーザインターフェイス)の導入を検討しているという記事を見た。

フラットUIってなんだ!?

詳しくは先日行われたWWDC 2013で紹介されたとおり、あたらしいUIの提案である。

windows8のインターフェイスはこのフラットUIを踏襲していると思って構わないと思われる。

いままではフラットな画面に盛り上がっているメタルチックなボタンや、グラデーションのUIを基調としたアイコン類が並んでいたのだけれど、よりフラットに、より洗練された形でのインターフェイスが今後のデザインの流行となりそうである。

20130621.gif

海外の有名デザインプロダクションなんかだと少し前からこのフラットデザインに統一されたホームページなんかを目にする事があって、マネしようと悪戦苦闘したこともあったけれど、これって結構難しい。また、日本語だとかっこ良くない。

でもjqueryも整備されてきたことだし、HTML5なんて本当に素晴らしいし、果敢にチャレンジして行きたい方向であることは間違いない。

でもよく考えれば、このサイトだってフラットであることには変わりはないかな。

参考サイト
http://designmodo.github.io/Flat-UI/
http://purecss.io/
http://fltdsgn.com/
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・DB設計
●ユタデザイン
●住所:〒135-0062
東京都江東区東雲2-7-5-3503
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+


ドメインとDNSの関係についての大雑把な説明。

2013年3月30日 12:58


今回サーバ切り替えの業務の過程で、DNSの説明をいろいろ行ったのだが、 いまひとつお客様に理解されていなかったようなので、図解で説明することにした。

20130330.gif

非常に乱暴な説明となっているが、この解釈で問題ないと思う。
ドメインとサーバはセットとなって初めて機能するものであるけれど、 ドメインだけを取得することが出来たり、サーバだけを契約することも出来る。

では、それぞれのドメインとサーバをどうやって紐づけるのかといえば、それがDNS情報ということになる。


ドメインを取得するとドメインの管理画面などから、DNSというものを設定する管理画面があり、ドメインにDNS情報を設定することでサーバを特定する。

では、ドメインに設定するDNS情報になにを記載すれば良いかというとそれは、サーバ側が用意するものである。

DNSに何を記載すればよいか分からない場合は、サーバ会社に確認してDNS情報を教えてもらう必要がある。

また、現在ある特定のドメインにどのようなDNSが設定されているかはドメインwhoisなどで検索すれば、だれでも確認することが出来る。


サーバ乗り換えなどで、レンタルサーバ会社を他社に変更する時などには、このDNSの切り替え作業が発生する。

それぞれのサーバを同じ状態にしておき、ドメインのDNSを書き換えると、48時間程度の猶予を経過して、世界中のDNS情報があたらしいDNSに書き換えられることとなる。

この世界中のDNS情報というところが説明に面倒なところなのだが、世界中に点在する電話交換局のようなものだと思ってもらえれば差し支えない。


サーバとドメインはセットで機能するものなので、サーバ会社などに管理を委ねず、ある程度自由に操作できることが望ましく思う。
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・DB設計
●ユタデザイン
●住所:〒135-0062
東京都江東区東雲2-7-5-3503
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+





Valid XHTML 1.0 Transitional スペーサー 正当なCSSです!