エプソンダイレクト株式会社
Home > Tips > Web

2019年1月15日(火曜日)

Fontawesome

Category: Web | Posted By at 23:44:42

Font Awesome

正直いまさら感もあるのですが、
ホームページ等で利用できる
様々なアイコンをまとめて
Web フォントとして利用できるようにしたものが
この Fontawesome です。

簡単なうえに結構色々できるので
ホームページのひな型はもちろん、
本番環境でも使いやすいです。

導入方法も非常に簡単です。
ダウンロードしたファイルを
適当なフォルダに展開し

<link rel="stylesheet" type="text/css" media="all" href="https://mydomain.com/fontawesome/css/all.css">

こんな感じで記述します。

Ver5.1.0 で 1,480 種類もあります。

Icons | Font Awesome

こちらから探せるのですが、正直大変です。

一応 PDF 一覧の PDF ファイルを作ってみましたので
使う方は こちらからどうぞ。

2016年7月7日(木曜日)

その Let’s Encrypt の設定でやらかす

Category: Web | Posted By at 23:59:38

実は 00H が使っている Xserver も
Let's Encrypt を導入ができるということで
ものは試し…ということでやってみることにしました…
この忙しい最中に…。

最初に設定しようとするとエラーが出てるので
あれれ?と思っていると、以前利用していた
Rapidsite の SSL が生きているみたいなので
それをまず解約してから行ってください…とのこと。

サポートの方に言われるがままに解約手続きをして
仕事をしていると…あれれ?
ホームページ表示されへんやん… (´・ω・`)

その Let's Encrypt の設定でやらかす

ちょっと悪いけど今仕事てんてこまいやで…
自社のホームページなんてかまってる場合やないんやで…
(今までも放置してたけど…)
てな感じなのでサポートの方に症状を丸投げして
仕事に勤しんでいたら翌日にメールで返事が来ました。

ちなみにメールが生きているのでサーバ全体の問題ではなく
DNS 系かなぁ…とぼんやり思っていたのですが…。
原因はやはりそこでした…。

ちゃんと覚えていないのですが以前導入した時に
DNS レコードを書き換えていたのですが、
それが残ったままになってたんですね。

その Let's Encrypt の設定でやらかす

見てもらうとわかる通り(内容は実際のものとは違いますが)
*.00h.co.jp の A レコードのとこだけ違う値が入っています。
これをいったん削除しないとダメなんですね。
ただ DNS の場合変更した後は反映するまで
しばらく時間がかかります。

これは普段ブログに追われてる私に少しは休め…
って神様が忠告して下さったんですね。
おかげでまとめて三日分しなければならなくなってますが… (´・ω・`)
まぁ正直ここ数日は仕事が立て込んでいて
ブログどころではなかったのですが(爆)。

2016年7月6日(水曜日)

無料 SSL/TLS Let’s Encrypt

Category: Web | Posted By at 23:59:25

無料 SSL/TLS Let's Encrypt
Let’s Encrypt – Free SSL/TLS Certificates

今まで SSL/TLS を利用しようとすると
年間で 10,000 ~ 20,000 以上支払い
『このサーバは正しく○○さんのものです。
認証局の私が保証します。』と第三者に認証してもらい
通信内容を暗号化した上で安全な通信をする…
というものでした。

クレジットカードや個人情報の送信、
SNS や銀行、ショッピングサイトのログイン等、
インターネットを使っていると
あらゆるところで利用されています。

ショッピングサイトを構築する際に
この SSL についてはほぼ必須となるため
イニシャルコストを抑えたい人からすると
う~んと二の足を踏む方も多くおられました。

さてこれをもっと普及させようということで
Facebook 、Cisco 、Mozzila を始め
多くのスポンサーを集め自動化することで
無料で証明書を発行するサービスを開始したのが
Let’s Encrypt です。
無料だから胡散臭いんじゃないの?
ということですがスポンサーを見る限り
信用しても大丈夫だと思います。
ちょっとしたお問い合わせフォームなどにも
気軽に利用できるので対応レンタルサーバでは
導入を検討してもいいかもしれませんね。

2015年11月15日(日曜日)

html ファイル内で PHP を使う

Category: Tips, Web | Posted By at 22:34:56

最近のホームページは CMS で作ることも多いのですが、
HTML ベースの方がいいという方もおられます。
ただ基本的に HTML でのベタ組みは、
手間もかかる上にメンテナンス性も悪く、
00H で作る場合は、Smarty を使った
独自のテンプレートエンジンで作る場合が多くあります。

今回はホームページを他社から引き継いだお客様で
DreamWeaver ベースで作られていたものを
テンプレート化しました。
ただこれを動かすためには PHP を動かす必要があります。
ただ html ファイルで PHP を動かすためには一工夫必要。

基本的には .htaccess ファイルに

AddType application/x-httpd-php .htm .html

と書くだけでこの機能は実現します。

ただ今回ご利用のサーバはロリポップなので
ちょっと工夫が必要でした。
利用しているサーバのバージョンによって

※ PHP 5.2 の場合
AddHandler php5.2-script .htm .html

※ PHP 5.3 の場合
AddHandler php5.3-script .htm .html

※ PHP 5.4 の場合
AddHandler php5.4-script .htm .html

これは ユーザー専用ページ→ WEB ツール→ PHP 設定 で
PHP のバージョンが確認できますのでそちらをご利用ください。

2014年7月20日(日曜日)

レンタルサーバで svg ファイルが表示されない

Category: Web | Posted By at 23:24:04

画像ファイルにはビットマップ系とベクタ系の二種類があって、
前者の代表は jpeg 、gif 、png 、bmp 、tiff 等、
後者の代表は eps 、pdf 、ai 等。
svg ファイルというのは後者の一つで、
Web の中でサポートされている唯一のベクタ画像です。

ビットマップ形式は 1 ピクセルの集合としての画像なので
拡大してしまうとぎざぎざが目立ったり、
画像が大きくなるとデータ量が多くなってしまいます。
一方ベクタ画像はベクトル(大きさと向き)の集合なので
拡大縮小に強くデータ量も少なくなる傾向にありますが、
多色のものには向きません。

あまり多く使う場所はないかもしれませんが、
企業ロゴ等で拡大縮小することもありながら
ギザギザは見せたくない場合、
サイズ変更のたびに作り直すよりは
ベクタ画像の方が確実に表示できてもいいかもしれません。

ただし svg が表示できるかどうかは
サーバ側の対応が必要です。
WordPress をインストール下はいいけど
ログイン時のワードプレスのロゴが表示されない…等の場合は
サーバの対応ができていない可能性があります。

この場合、 .htaccess の変更が必要となります。

AddType image/svg+xml .svg
AddType image/svg+xml .svgz

これを追加することで表示できるようになります。

2014年3月26日(水曜日)

Web の背景や画像を印刷する

Category: Tips, Web | Posted By at 23:59:17

Web を見ていて印刷してみたら背景が印刷されない…
というのはよく聞くトラブルです。

実は初期状態では Web の背景が印刷されないようになっています。
理由は簡単で、例えば宇宙をイメージしたサイトで
黒い背景に星空…のようなものを作った場合、
それを印刷すると黒のインクやトナーなどが大量に使用され
経済的に無駄になってしまうからです。

IE の場合、ファイル→ページ設定から
背景の色とイメージを印刷するにチェックで
背景も印刷することができます。

実は Web 制作者にとってはここが悩みどころで、
印刷するかどうかはユーザーにゆだねられています。
つまりさっきの例でいうと黒背景だから白い文字としてしまうと、
印刷した時に、背景を印刷する人は表示されるのですが、
そうじゃない人には真っ白に表示されてしまいます。
そのために印刷用に CSS を組みなおすという手法もありますが、
これは結局 Web を二つ作るのと同等の労力がかかってしまうんですね。

2013年12月21日(土曜日)

HTML5 という技術

Category: Web | Posted By at 23:59:04

HTML5 + CSS3 という話が出て久しいですが、
まだまだ確定という訳でもないようで、
こういう生きた技術を扱う Web 屋は
本当に大変だなぁと思います。

HTML5 の hgroup が廃止されてたというのは
恥ずかしながら最近知りました。
正直使いどころが難しいなぁと思ってましたが、
複数の Hn タグをまとめられるということで
それはそれ、使い道を見極めてはいたのですが…。

よく会社のホームページを自社で…
メンテも自分でやります…
とおっしゃる方もおられるのですが、
こういうところを追っかけていくのは
本当に大変なんですよ (´・ω・`)

自社のホームページもいじりたいのですが
当分先になりそうです。
まさに紺屋の白袴…(笑)。

2013年6月13日(木曜日)

ajaxzip3.js で市区町村と所番地等を分ける

Category: Tips, Web | Posted By at 23:36:48

ちなみに現在自社で使っているシステムでは
郵便局から CSV ファイルをダウンロードしてきて
それを加工して利用しているのですが
メンテナンスするのも面倒ですし、
いちいちそのデータを自社で抱え込むのもナンセンスです。
ただ自社で使っているものは、1) 都道府県、2) 市区町村、3) 所番地
という管理をしているのですが、どうやっても 2) と 3) が
一緒になってしまいます。

はて…と思っていたらなんとか解決方法を見つけました。
同サイトの『都道府県以外の住所部分が1つになってしまう』 を見ると
パラメータが逆になっているようですね。
もちろん 'dummy' のようにしてもいいのでしょうけど、
同じ中身を変えるなら…ということで

ソース版を修正する場合
57 行目の
AjaxZip3.zip2addr = function ( azip1, azip2, apref, aaddr, astrt, aarea ) {

AjaxZip3.zip2addr = function ( azip1, azip2, apref, aaddr, aarea, astrt ) {
のように aarea と astrt を入れ替えます。それだけです。

軽量版https 版を修正する場合
"沖縄県"];AjaxZip3.zip2addr=function(h,g,k,b,a,l)

"沖縄県"];AjaxZip3.zip2addr=function(h,g,k,b,l,a)
のように l と a を入れ替えます。それだけです。
悩まれている方、一度試してみて下さい。

2013年6月12日(水曜日)

郵便番号からの住所入力を簡略化する ajaxzip3.js

Category: Tips, Web | Posted By at 23:41:34

http://code.google.com/p/ajaxzip3/

ajaxzip3.js は、郵便番号から住所の情報を引っ張ってくることで
住所入力の手間を軽減するためのものです。
導入については

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

とするだけで組み込め、

<input type="text" name="zip" onkeyup="AjaxZip3.zip2addr(this,'','pref','city','area','street');">

のようにすると各フォームに自動入力されます。
結構住所入力って手間なのでこれで軽減できるのではないかと思います。

ajaxzip3.js での住所入力ですが、
input タグの name 属性をパラメータとして持ちます。

AjaxZip3.zip2addr( 郵便番号上三桁, 郵便番号下四桁, 都道府県, 市区町村, 所番地, 丁目番地 );

のように 6 個のパラメータを持ちますので
それぞれ

<input type="text" name="zip3">
<input type="text" name="zip4" onkeyup="AjaxZip3.zip2addr( 'zip3', 'zip4', 'pref', 'city', 'area', 'street' );">
<input type="text" name="pref">
<input type="text" name="city">
<input type="text" name="area">
<input type="text" name="street">

のようにしておけば自動入力できます。

また

<input type="text" name="zip" onkeyup="AjaxZip3.zip2addr( this, '', 'pref', 'city', 'area', 'street' );">
<input type="text" name="pref">
<input type="text" name="city">
<input type="text" name="area">
<input type="text" name="street">

とすれば郵便番号七桁からの変更も可能です。

省略すると前のものにまとめて表示されますので、

<input type="text" name="zip" onkeyup="AjaxZip3.zip2addr( this, '', 'pref', 'other' );">
<input type="text" name="pref">
<input type="text" name="other">

としてやれば都道府県以外はまとめて表示されます。

2013年4月25日(木曜日)

jQuery 2.0

Category: Web | Posted By at 23:59:29

http://jquery.com/

私も不勉強でしたが、jQuery に 2.0 が登場しているようです。
jQuery というのは JavaScript のライブラリの一つで、
ブラウザ間の JavaScript の差異を吸収して、
共通の記述方法で動くようにしたものです。

まぁなんとなくでいいです(笑)。

この jQuery 等の JavaScript ライブラリは
固定的なコンテンツの表示が多い HTML や CSS に
動きを加えて表示させるときなどに使用します。
例えば画像がニュ~~~と出てくるようなものや
フォームの入力チェックなんかにも使えます。

で、この jQuery 2.0 ですが、

jQuery 2.x

jQuery 2.0 has the same API as jQuery 1.9, but does not support Internet Explorer 6, 7, or 8. All the notes in the jQuery 1.9 Upgrade Guide apply here as well. Since IE 6/7/8 are still relatively common, we recommend using the 1.x version unless you are certain no IE 6/7/8 users are visiting the site. Please read the release notes carefully.

ということなんですね。

つまり InternetExplorer の 6 ~ 8 はサポートされていないそうです。
ちなみに WindowsXP は 8 までしかサポートされていないので、
WindowsXP ユーザは切り捨てられた感じです。

WindowsXP のサポートは来年四月まで。
そろそろ皆様も本格的に移行を考えていただきたいと思います。

HP Directplus -HP公式オンラインストア- デル株式会社 東芝ダイレクト 富士通パソコンFMVの直販サイト富士通 WEB MART ソフマップ・ドットコム